/*
Theme Name: Shokokaikan Child
Template: twentytwentyfive
Version: 1.0.0
Text Domain: shokokaikan-child
*/

/* --------------------------------------------------------------
* ---------------------- common
* -------------------------------------------------------------- */
:root {
  /* header */
  --header-offset: 120px;
  /* wood texture */
  --wood-webp: url('assets/images/wood-tile.webp');
  --wood-jpg: url('assets/images/wood-tile.jpg');

  /* CTA rail */
  --cta-rail-w: clamp(160px, 18vw, 220px);
  --cta-z: 9999;
  --cta-bg: var(--wp--preset--color--bg-base);
  --cta-fg: var(--wp--preset--color--brand-light);
  --cta-btn-min-h: 52px;
  --cta-btn-fz: clamp(14px, 1.6vw, 16px);
  /* font */
  --wp--custom--font-size-h1: 32px;
  --wp--custom--font-size-h2: 28px;
  --wp--custom--font-size-h3: 22px;
  --wp--custom--font-size-body-l: 18px;
  --wp--custom--font-size-body: 16px;
  --wp--custom--font-size-body-s: 14px;

  --wp--custom--font-line-height-h1: 1.25;
  --wp--custom--font-line-height-h2: 1.3;
  --wp--custom--font-line-height-h3: 1.35;
  --wp--custom--font-line-height-body: 1.7;
  --wp--custom--font-line-height-body-sm: 1.6;

  --wp--custom--font-h1-weight: 700;
  --wp--custom--font-h2-weight: 700;
  --wp--custom--font-h3-weight: 400;
  --wp--custom--font-body-weight: 400;

  --wp--custom--font-h1-letter-spacing: 0.1em;
  --wp--custom--font-h2-letter-spacing: 0.02em;
  --wp--custom--font-h3-letter-spacing: 0.02em;
}
/* ----------------- テキスト ---------------- */
body {
  font-family: var(--wp--preset--font-family--ui-body);
}
p,
li,
blockquote {
  text-justify: inter-ideograph;
  overflow-wrap: anywhere; /* 単語間で適宜折り返す */
}
h1,
h1.wp-block-heading {
  font-size: var(--wp--custom--font-size-h1);
  line-height: var(--wp--custom--font-line-height-h1);
  font-weight: var(--wp--custom--font-h1-weight);
  letter-spacing: var(--wp--custom--font-h1-letter-spacing);
}
h2,
h2.wp-block-heading {
  font-size: var(--wp--custom--font-size-h2);
  line-height: var(--wp--custom--font-line-height-h2);
  font-weight: var(--wp--custom--font-h2-weight);
  letter-spacing: var(--wp--custom--font-h2-letter-spacing);
}
h3,
h3.wp-block-heading {
  font-size: var(--wp--custom--font-size-h3);
  line-height: var(--wp--custom--font-line-height-h3);
  font-weight: var(--wp--custom--font-h3-weight);
  letter-spacing: var(--wp--custom--font-h3-letter-spacing);
  margin-block-start: 0;
  margin-block-end: 0;
}
body,
p,
.wp-block-paragraph {
  font-size: var(--wp--custom--font-size-body);
  line-height: var(--wp--custom--font-line-height-body);
  font-weight: var(--wp--custom--font-body-weight);
  margin-block-start: 0;
  margin-block-end: 0;
}
small,
.wp-block-paragraph.is-style-text-small {
  font-size: var(--wp--custom--font-size-body-s);
  line-height: var(--wp--custom--font-line-height-body-sm);
}
.font-body-l {
  font-size: var(--wp--custom--font-size-body-l);
  line-height: var(--wp--custom--font-line-height-body);
}
/* ----------------- text ------------------ */
.nowrap {
  white-space: nowrap !important;
}
.nowrap-chunk {
  white-space: nowrap; /* この塊だけ折り返さない */
}
.is-style-indent-all {
  padding-left: 1em;
}
/* 二行目以降をインデント */
.is-style-hanging-indent {
  padding-left: 1em; /* 全体を右にずらす */
  text-indent: -1em; /* 1行目だけ左に戻す */
}
/* ----------------- リンク ---------------- */
a:hover {
  text-decoration: none;
  color: var(--wp--preset--color--accent-aqua);
  opacity: 0.7;
  transition: all 0.3s;
}
a:active {
  opacity: 0.7;
}
/*  a hover 別タイプ */
.link-text {
  display: flex;
  align-items: center;
}
.link-text::before {
  width: 0;
  height: 0;
  content: '';
  background-color: transparent;
  border-radius: 50%;
  transition: 0.3s;
}
.link-text:hover a {
  color: var(--wp--preset--color--text-inverse) !important;
}
.link-text:hover::before {
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.5em;
  background-color: var(--wp--preset--color--bg-base);
}
.has-underline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.has-underline:hover {
  text-decoration: none;
}
.has-underline.underline-aqua {
  text-decoration-color: var(--wp--preset--color--accent-aqua-dark);
}
/* マウスでクリックされたときのフォーカス枠を全体で消す */
:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* PC（デスクトップ）では tel: リンクを無効化 */
@media (width >= 769px) {
  a[href^='tel:'] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}

/* タブレット以下（768px以下）では有効 */
@media (width <= 768px) {
  a[href^='tel:'] {
    pointer-events: auto;
    cursor: pointer;
  }
}
/* --------------------------------------------------------------
 * ---------------------- common -- layout
 * -------------------------------------------------------------- */
.is-broken-left {
  margin-left: calc(50% - 50vw) !important;
}
.is-broken-right {
  margin-right: calc(50% - 50vw) !important;
}
.is-broken {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
.is-fullwide {
  width: 100vw;
  margin: 0 calc(50% - 50vw) !important;
}
.has-maxwidth {
  max-width: 900px;
}
.has-maxwidth-1200 {
  max-width: 1200px;
}
.gap-narrow {
  gap: min(1rem, 1.2vw, 1.5rem);
}
.no-gap {
  gap: 0;
}
/* ----------------- position ------------------ */
.is-relative {
  position: relative !important;
}
.is-absolute {
  position: absolute !important;
}
.is-fixed {
  position: fixed !important;
}

/* --------------------------------------------------------------
 * ---------------------- common -- display
 * -------------------------------------------------------------- */
.display-u-tab {
  display: none !important;
}
@media (width <= 768px) {
  .display-u-tab {
    display: block !important;
  }
}
.is-inline-flex {
  display: inline-flex !important;
}
.is-flex {
  display: flex !important;
}
.is-column {
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}
.is-flex-wrap {
  flex-wrap: wrap !important;
}
/* flex options */
.jc-start {
  justify-content: flex-start !important;
}
.jc-end {
  justify-content: flex-end !important;
}
.jc-center {
  justify-content: center !important;
}
.jc-between {
  justify-content: space-between !important;
}
.jc-around {
  justify-content: space-around !important;
}
.ai-baseline {
  align-items: baseline !important;
}
.ai-center {
  align-items: center !important;
}
.ai-start {
  align-items: flex-start !important;
}
.ai-end {
  align-items: flex-end !important;
}
.ai-stretch {
  align-items: stretch !important;
}
/* ----------------- アイコン ---------------- */
p svg,
a svg,
.wp-block-button__link svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  padding: 0 2px 0 4px;
}
header .wp-block-button__link.wp-element-button {
  padding-top: 1em;
  padding-bottom: 1em;
  letter-spacing: 0.1em;
}
header a svg,
.wp-block-button__link svg {
  padding: 0 2px;
}
.wp-block-button.cta--brand .wp-font-awesome-icon {
  vertical-align: middle;
  margin: 0 4px;
  height: 20px; /* アイコンサイズ調整 */
}
/* ----------------- その他 ---------------- */
figure {
  text-align: center;
}
/* -------------- 色・柄　デザイン関連 ------------------ */
/* 木目のカード背景（CTA台座） */
.has-wood-card {
  background-image: url('assets/images/wood-tile.jpg');
  background-image: image-set(
    var(--wood-webp) type('image/webp'),
    var(--wood-jpg) type('image/jpeg')
  );
  background-size: 300px 300px;
  background-repeat: repeat;
  border-radius: 48px;
  padding: 1.5rem;
}
/* 木目の丸ボタン */
.has-wood-bg {
  background-image: url('assets/images/wood-tile.jpg');
  background-image: image-set(
    var(--wood-webp) type('image/webp'),
    var(--wood-jpg) type('image/jpeg')
  );
  background-size: 240px 240px;
  background-repeat: repeat;
  border-radius: 50%;
}
/* ----------------- ボタン ---------------- */
/* 共通プロパティ（色は別） */
.wp-block-button__link {
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: var(--font-button-letter-spacing);
  transition: all 0.3s ease;
  white-space: nowrap;
}
.wp-block-button__link.is-style-large {
  line-height: 1.75;
  font-weight: var(--font-button-large-weight);
  letter-spacing: var(--font-button-large-letter-spacing);
  transition: all 0.3s ease;
}
/* 回転タイプ */
.text-rotate mark {
  color: transparent !important;
}
.text-rotate mark span {
  color: var(--wp--preset--color--accent-aqua-dark);
}
.text-rotate {
  overflow: hidden;
  text-shadow:
    0 -1.8em 0 var(--wp--preset--color--accent-aqua-dark),
    0 0 0 var(--wp--preset--color--accent-aqua-dark);
  transition: text-shadow 0.3s;
}
/* moreボタン */
/* ラッパー：ボタン全体 */
.wp-block-button.more-link {
  display: flex;
}

/* 実際のリンク本体 */
.wp-block-button.more-link .wp-block-button__link {
  position: relative;
  display: inline-block;
  overflow: hidden; /* 文字の移動ではみ出し防止 */
  color: transparent !important;
}

/* 矢印 */
.wp-block-button.more-link .wp-block-button__link::before {
  content: '→';
  position: absolute;
  font-size: 1.2em;
  color: var(--wp--preset--color--accent-aqua);
  bottom: -100%; /* 下に隠す */
  left: 50%;
  transform: translate(-50%, 12px);
  opacity: 0;
  background-color: transparent;
  border-radius: 24px;
  transition:
    transform 0.3s,
    bottom 0.3s ease-out,
    opacity 0.3s ease-out;
}

/* テキスト（元のボタンテキストを疑似要素で複製） */
.wp-block-button.more-link .wp-block-button__link::after {
  content: 'more...'; /* data-text="more..." を a に付ける想定 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
  color: var(--wp--preset--color--accent-aqua);
}
@media (width <= 425px) {
  .wp-block-button.more-link a {
    font-size: 11px !important;
  }
}
/* ----------------- ボタン ホバー ------------------*/
/* 塗りタイプ */
.wp-element-button:hover,
.wp-block-button__link:hover,
.wp-element-button:active,
.wp-block-button__link:active,
.wp-element-button:focus,
.wp-block-button__link:focus {
  color: var(--wp--preset--color--text-inverse);
  background-color: var(--wp--preset--color--accent-aqua);
  opacity: unset;
}
/* 枠線タイプ １: ヘッダーナビボタン */
.wp-element-button.has-text-inverse-border-color:hover,
.wp-element-button.has-text-inverse-border-color:active,
.wp-element-button.has-text-inverse-border-color:focus {
  border-color: var(--wp--preset--color--accent-aqua-light) !important;
  background-color: transparent !important;
  color: var(--wp--preset--color--accent-aqua-dark) !important;
  opacity: unset;
}
/*  枠線タイプ ２: moreボタン */
/* 回転タイプ */
.text-rotate:hover,
.text-rotate:active,
.text-rotate:focus {
  text-shadow:
    0 0 0 var(--wp--preset--color--accent-aqua-dark),
    0 1.8em 0 var(--wp--preset--color--accent-aqua-dark);
}
/* moreボタン */
.wp-block-button.more-link .wp-block-button__link:hover::before {
  bottom: 50%;
  opacity: 1;
}
.wp-block-button.more-link .wp-block-button__link:hover::after {
  transform: translateY(-100%);
}
/* 現在ページを示すボタン変化 */
.current-menu-item > .wp-element-button.has-text-inverse-border-color {
  color: var(--wp--preset--color--text-inverse) !important;
  background-color: var(--wp--preset--color--accent-aqua) !important;
  border-color: var(--wp--preset--color--accent-aqua);
}
.current-menu-item > .wp-element-button.has-text-inverse-border-color svg mark {
  color: var(--wp--preset--color--text-inverse) !important;
}
/* ----------------- ページトップにもどるボタン ----------------- */
/* ボタンの見た目 */
.page-top-btn {
  padding: 0 !important;
}

/* ----------------- CTA サイドボタン 特有 ------------------ */
/* 固定レール */
.cta-rail {
  inset-inline-end: max(
    clamp(4px, 1vw, 12px),
    env(safe-area-inset-right)
  ); /* 右余白（ノッチ対応付き） */
  inset-block-end: max(16px, env(safe-area-inset-bottom)); /* 下余白（ノッチ対応付き） */
  z-index: var(--cta-z);
  inline-size: var(--cta-rail-w);
  border-radius: 48px;
  color: var(--wp--preset--color--brand-base);
  padding: 12px;
  display: flex;
  flex-direction: column;
  width: fit-content;
}
/* レール内のボタン（WPボタンでもリンクでも適用） */
.cta-rail .wp-block-button,
.cta-rail a.wp-block-button__link {
  inline-size: 100%;
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center;
}
.cta-rail a.wp-block-button__link,
.cta-rail a {
  min-height: var(--cta-btn-min-h);
  font-size: var(--cta-btn-fz);
  padding: 1em 1.75em;
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  word-break: keep-all;
  text-wrap: balance;
  white-space: nowrap;
}
/* 共通ふるまい：白文字＋透明枠、角丸はインライン0pxを上書き */
.cta-rail .wp-block-button__link {
  color: var(--wp--preset--color--text-inverse);
  border: 2px solid transparent;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.12s ease;
  border-radius: 999px; /* ← インライン style="border-radius:0" を上書き */
}
.cta-rail .wp-block-button__link:active {
  transform: translateY(1px);
}

/* accent-aqua-dark：親divに .cta--accentがついている前提 */
.cta-rail .wp-block-button.cta--accent .wp-block-button__link {
  background-color: var(--wp--preset--color--accent-aqua-dark);
  border: 2px solid var(--wp--preset--color--accent-aqua-dark);
}
.cta-rail .wp-block-button.cta--accent .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--bg-base);
  color: var(--wp--preset--color--accent-aqua) !important;
  border: 2px solid var(--wp--preset--color--accent-aqua);
  font-weight: var(--font-button-large-weight);
  opacity: unset;
}
/* accent-aqua：親divに .cta--accent-aqua が付いている前提 */
.cta-rail .wp-block-button.cta--accent-aqua .wp-block-button__link {
  background-color: var(--wp--preset--color--accent-aqua);
  border: 2px solid var(--wp--preset--color--accent-aqua);
}
.cta-rail .wp-block-button.cta--accent-aqua .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--bg-base);
  color: var(--wp--preset--color--accent-aqua) !important;
  border: 2px solid var(--wp--preset--color--accent-aqua);
  font-weight: var(--font-button-large-weight);
  opacity: unset;
}
/* accent-aqua：親divに .cta--point が付いている前提 */
.cta-rail .wp-block-button.cta--point .wp-block-button__link {
  background-color: var(--wp--preset--color--accent-aqua);
  border: 2px solid var(--wp--preset--color--accent-aqua);
}
.cta-rail .wp-block-button.cta--point .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--bg-base);
  color: var(--wp--preset--color--accent-aqua) !important;
  border: 2px solid var(--wp--preset--color--accent-aqua);
  opacity: unset;
}
/* 印刷では非表示 */
@media print {
  .cta-rail {
    display: none !important;
  }
}
/* 動き控えめ環境 */
@media (prefers-reduced-motion: reduce) {
  .cta-rail {
    transition: none;
  }
}
@media (width <= 860px) {
  .cta-rail.has-wood-card {
    display: none !important;
  }
}
/* ----------------- floating CTA --------------- */
.floating-cta {
  right: 0;
  bottom: 0;
  z-index: 1000;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}
/* js制御表示 */
.floating-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* レール内 共通*/
.floating-cta .cta-rail .wp-block-buttons {
  width: 100%;
  min-width: 80px;
}
.floating-cta .cta-rail a {
  height: fit-content;
  line-height: unset;
  cursor: pointer;
}
.floating-cta p {
  line-height: 1;
}
.floating-cta svg {
  padding: 0 !important;
}
.floating-cta a > span {
  display: flex;
}
.floating-cta .cta-rail--faq a {
  background-image: image-set(
    var(--wood-webp) type('image/webp'),
    var(--wood-jpg) type('image/jpeg')
  );
}
.text-hover.is-absolute {
  top: -88%;
}
/* レール内 電話番号 */
.floating-cta .cta-rail--tel-box .tappable {
  display: none !important;
}
.floating-cta .cta-rail--tel-box .open-time {
  opacity: 1;
  transition: opacity 0.2s ease-out;
}
.floating-cta .cta-rail--tel-box .number-hover {
  content: '';
  position: absolute;
  top: 40px;
  transform: translateX(-50%);
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}
.floating-cta .cta-rail--tel-box:hover .number-hover {
  opacity: 1;
  transition: opacity 0.2s ease-out;
}
.floating-cta .cta-rail--tel-box:hover .open-time {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
/* --- SP用：下部固定＋タップ専用 --- */
@media (width <= 768px) {
  .floating-cta {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 1000;
    transform: translateY(10px);
    transition:
      opacity 0.4s ease,
      transform 0.4s ease;
  }
  .floating-cta.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .floating-cta .cta-rail {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0.5rem !important;
    max-width: 100%;
    gap: 0.1rem;
  }
  .floating-cta .cta-rail .wp-block-buttons {
    min-width: unset;
  }
  .floating-cta .cta-rail .wp-block-button__link {
    inline-size: unset;
    padding: 13px 1.2rem !important;
  }
  .cta-rail--tel-box {
    pointer-events: auto;
    padding: 13px 1rem !important;
    border-radius: 2rem !important;
  }
  /* SPでは hover 演出をオフに */
  .cta-rail--tel-box:hover {
    transform: none;
    background-color: var(--wp--preset--color--bg-base);
  }
  .floating-cta .cta-rail--tel-box .hoverable {
    display: none !important;
  }
  .floating-cta .cta-rail--tel-box .number-hover {
    display: none !important;
  }
  .floating-cta .cta-rail--tel-box .open-time {
    display: none !important;
  }
  .floating-cta .cta-rail--tel-box .tappable {
    display: flex !important;
    pointer-events: auto; /* この中だけ有効 */
    padding: 0 !important;
  }
}
@media (width <= 375px) {
  .floating-cta .cta-rail .wp-block-button__link,
  .floating-cta .cta-rail--tel-box {
    padding: 10px 1rem !important;
    align-items: center !important;
  }
  .floating-cta .cta-rail--tel span.wp-rich-text-font-awesome-icon {
    display: inline-flex;
    width: 22.8px !important;
    aspect-ratio: 1 / 1;
  }
}
@media (width <= 300px) {
  .floating-cta .wp-block-buttons.wp-container-core-buttons-is-layout-23441af8 {
    display: none;
  }
}

/* --------------------------------------------------------------
 * ---------------------- common -- header
 * -------------------------------------------------------------- */
.is-sticky {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgb(255 255 255 / 12%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
/* 初期：最上部にいるとき エディタで指定中*/
header.is-sticky.wp-block-template-part {
  transition: background 0.3s ease;
}

/* スクロールしてトップから外れたとき */
/* front-pageのみ */
body.home header.is-sticky.wp-block-template-part.is-scrolled {
  background: var(--wp--preset--color--bg-pinkwhite);
}
header.is-sticky.wp-block-template-part.is-scrolled {
  background: rgb(255 255 255 / 100%);
}
header.is-sticky.wp-block-template-part.is-scrolled .h-logo-img {
  width: 24vw;
  max-width: 240px;
  min-width: 160px;
}
/* ----------------- ハンバーガーメニュー ------------------ */
/* 初期状態では global_nav 内のサブメニューだけ閉じる */
.global_nav .wp-block-navigation__submenu-container {
  display: none !important;
}
/* JS で開いたときだけ表示 */
.global_nav .wp-block-navigation__submenu-container.is-open {
  display: block !important;
}
/* ハンバーガー展開中でも矢印を表示させる */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation__submenu-icon {
  display: inline-flex !important;
}
.global_nav
  .wp-block-navigation-item.open-on-click
  .wp-block-navigation-submenu__toggle
  + .wp-block-navigation__submenu-icon {
  display: none !important;
}
/* 親ラベルに疑似要素で矢印を出す */
.global_nav .has-child > .wp-block-navigation-item__content {
  position: relative;
  padding-block-end: 1.5rem;
  margin-block-end: 2rem;
}
.global_nav .has-child > .wp-block-navigation-item__content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%; /* 親の幅の 50% の位置 = 中央 */
  transform: translate(-50%, 0); /* 自分の幅の半分左に戻す */
  width: 1rem;
  height: 1rem;
  background: url(assets/images/down-arrow.png) no-repeat center / contain;
  transition: transform 0.2s ease-in-out;
}
/* li.is-open のときだけ 180度回転 */
.global_nav .has-child.is-open > .wp-block-navigation-item__content::after {
  transform: translate(-50%, 0) rotate(180deg);
}

.wp-block-navigation__responsive-container.is-menu-open {
  z-index: 1001;
  align-items: center !important;
}
/* ハンバーガーボタン */
/* ボタンのバーの色変更 */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
  color: var(--wp--preset--color--accent-aqua);
}
/* ボタンの大きさ変更 */
.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-open svg {
  height: 2rem;
  width: 2rem;
}
/* 閉じるボタン 位置変更 */
.wp-block-navigation__responsive-container-close {
  right: 1.7rem;
  top: 2rem;
}
/* コアのアニメ 変更 */
.wp-block-navigation__responsive-container {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s ease,
    visibility 0s 0.4s; /* 閉じるとき用 */
}
.wp-block-navigation__responsive-container.is-menu-open {
  animation: overlay-menu__fade-in-animation 0.4s ease-out forwards;
  opacity: 1;
  visibility: visible;
} /* 開く用 keyframes（イメージ） */
@keyframes overlay-menu__fade-in-animation {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* オーバーレイメニュー */
.wp-block-navigation__responsive-close {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100%;
}
/* ----------------- PCナビ  ------------------ */
/* 1100px以下で非表示 */
@media (width <= 1100px) {
  nav.pc_nav {
    display: none !important;
  }
}
/* それ以外では表示 */
@media (width > 1100px) {
  nav.pc_nav {
    display: block !important;
  }
}

/* ----------------- レスポンシブ  ------------------ */
/* logo調整 */
@media (width <= 1100px) {
  .h-logo-img {
    width: 24vw;
    max-width: 240px;
    min-width: 160px;
  }
}
@media (width <= 768px) {
  .header-container {
    padding: 0 1rem !important;
  }
}
/* --------------------------------------------------------------
 * ---------------------- common -- footer
 * -------------------------------------------------------------- */
/* オーバーレイメニュー */
.wp-block-navigation__responsive-close {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* ナビのサブメニューを常に展開状態にする例 */
.wp-block-navigation__submenu-container.wp-block-navigation-submenu {
  display: block;
  opacity: 1;
  visibility: visible;
  position: static; /* ドロップダウンではなく普通のリスト風に */
}
.before-footer .cta--accent .wp-block-button__link:hover,
.before-footer .cta--accent .wp-block-button__link:focus,
.before-footer .cta--accent .wp-block-button__link:active {
  color: var(--wp--preset--color--accent-aqua-light) !important;
}
@media (width <= 768px) {
  footer .cta-rail--tel {
    font-size: 19px !important;
  }
  footer .sp-flex-reverse {
    flex-direction: column-reverse !important;
  }
  .wp-container-core-group-is-layout-223c52c3 {
    grid-template-columns: repeat(auto-fill, minmax(min(8rem, 100%), 2fr));
  }
}
/* --------------------------------------------------------------
 * ---------------------- common -- main contents
 * -------------------------------------------------------------- */
body {
  max-width: 100%;
  overflow-x: hidden;
}
/* 各ページコンテンツの最外枠 */
.wp-site-blocks {
  width: 100%;
}
/* ------------------ section ------------------------- */
.wp-block-separator.section-h--decoline {
  width: 40px;
  height: 3.2px;
  border: none;
  border-radius: 9999px;
  background-color: currentColor;
  margin-inline: auto;
}
.section-container {
  padding: 120px;
}
@media (width <= 1024px) {
  .section-container {
    padding: 100px 0 !important;
  }
}
@media (width <= 768px) {
  .main-wrap {
    padding-block-start: 80px !important;
  }
}
/* --------------------------------------------------------------
 * ---------------------- front-page.php
 * -------------------------------------------------------------- */
.home .wp-site-blocks {
  background-color: var(--wp--preset--color--bg-pinkwhite);
  background-image: url(assets/images/fv-bg.png);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: top right;
  min-height: 80dvh;
}
.home .section-wrap.has-bg {
  background-image: url(assets/images/bg_repeat-base.png);
  background-repeat: repeat;
  background-size: 100% auto;
  background-position: center;
}
@media (width <= 768px) {
  .home .section-wrap.has-bg {
    background-image: url(assets/images/topbg.png);
  }
}
@media (width <= 425px) {
  .section-container {
    padding: 40px 0 !important;
  }
}
/* ---------------- fv ------------------- */
.hero-wrap {
  flex-direction: row;
  min-height: calc(80dvh - 122px);
  max-height: 928px;
}
.hero-foreground {
  z-index: 2;
  width: 100%;
  height: 100%;
  padding-inline-end: clamp(120px, 8.3vw, 200px);
}
.hero-foreground--right {
  /* min-height: 64vh;
  min-height: 64dvh; */
  min-height: 666px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-block-start: 4.8%;
}
.hero-catch_bar {
  border-radius: 0 56px 0 0;
  width: fit-content;
  align-self: flex-end;
}
.illust-on-catch {
  left: 0.5%;
  bottom: 99%;
  z-index: -1;
}
.hero-loop-bg {
  inset: 0;
  z-index: 1;
  overflow: hidden;
  padding-block-start: 5%;
}
.hero-loop-bg_inner {
  animation: hero-loop 60s linear infinite;
  min-width: 108%;
  flex-shrink: 0;
}
@keyframes hero-loop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.hero-item {
  border-radius: clamp(28px, 12vw, 56px);
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-item.hero-item_01 {
  background-image: url(assets/images/hero-loop-bg_img--01.jpg);
}
.hero-item.hero-item_02 {
  background-image: url(assets/images/hero-loop-bg_img--02.jpg);
  aspect-ratio: 4/3;
}
.hero-item.hero-item_03 {
  background-image: url(assets/images/hero-loop-bg_img--03.jpg);
  aspect-ratio: 4/3;
}
.hero-item.hero-item_04 {
  background-image: url(assets/images/hero-loop-bg_img--04.jpg);
  aspect-ratio: 4/3;
}
.hero-item.hero-item_05 {
  background-image: url(assets/images/hero-loop-bg_img--05.jpg);
}
.hero-item.no-bgimg {
  background-image: none;
}
/* fv右側関連 */
.hero-foreground--right-flexbox.display-under-tab {
  display: none;
}
/* info-square */
.info-square {
  width: 100%;
}
.info-square-img {
  /* is-absoluteの配置 */
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 64%;
  min-width: 240px;
  text-align: center;
}
.info-square-container {
  backdrop-filter: blur(4px);
}

/* media quaery */
@media (width > 1600px) {
  .info-square-container {
    padding-top: 4rem !important;
    padding-right: 3rem !important;
    padding-bottom: 2rem !important;
    padding-left: 3rem !important;
  }
  .hero-foreground--right-flexbox h2 a,
  .hero-foreground--right-flexbox .cta-rail .wp-block-button a {
    font-size: 0.8vw !important;
  }
  .hero-foreground--right-flexbox time {
    font-size: 0.6vw;
    line-height: normal;
  }
  .hero-foreground--right-flexbox .cta-rail--tel {
    font-size: 1vw !important;
  }
  .hero-foreground--right-flexbox .cta-rail--business-hours {
    font-size: 0.6vw !important;
  }
}

@media (width > 1280px) {
  .catch-h {
    font-size: 2.4vw !important;
  }
}
@media (width <= 1440px) and (height <= 1140px) {
  .hero-wrap {
    min-height: 668px;
  }
}
@media (width < 1280px) {
  .hero-foreground {
    padding-inline-end: 2vw;
  }
}
@media (width <= 1000px) {
  .hero-catch_bar {
    padding: 2rem 2.5rem 3rem !important;
  }
  .hero-catch_bar p {
    letter-spacing: 0.05em !important;
  }
}
@media (width <= 860px) {
  .catch-h {
    font-size: max(2rem, 4vw) !important;
  }
  .hero-foreground--right.display-pc {
    display: none;
  }
  .hero-foreground--right-flexbox.display-under-tab {
    display: block;
  }
  .hero-catch_bar {
    padding: 2rem 1.5rem 3rem !important;
  }
}
@media (600px <= width <= 860px) {
  .info-square {
    width: calc(100% - 208px);
    margin: 0 auto 0 20% !important;
  }
  .info-square-img {
    transform: translate(-50%, -50%);
    top: 50%;
    left: 0;
  }
  .info-square-container {
    padding: 3.5rem 4rem 2rem 8rem !important;
  }
  .info-square-container .wp-block-buttons {
    justify-content: flex-start;
  }
}
@media (width <= 768px) {
  .info-square {
    width: auto;
    margin: 0 2% 0 20% !important;
  }
  .info-square-container {
    padding: 3.5rem 2rem 2rem 8rem !important;
  }
  .info-square .wp-container-core-group-is-layout-391a0b0f {
    gap: 1rem;
  }
  .info-square-img img {
    width: 160px !important;
  }
}
@media (width <= 768px) and (height <= 812px) {
  .hero-wrap {
    min-height: calc(64dvh - 86px);
  }
}
@media (width < 600px) {
  .catch-h {
    font-size: max(1.6rem, 5vw) !important;
  }
  .info-square-container {
    padding: 5rem 4rem 2rem !important;
  }
  .info-square {
    margin: 0 auto !important;
  }
}
@media (width <= 425px) {
  .hero-catch_bar {
    border-radius: 0 2.5rem 0 0;
  }
  .catch-h {
    font-size: min(2rem, 7vw) !important;
  }
  .info-square-container {
    padding: 3.5rem 2rem 2rem 2.5rem !important;
    border-radius: 2.5rem !important;
  }
}
/* ---------------------- main contants ---------------------- */
.home .main-wrap {
  padding-block-start: 0 !important;
}
/* ------------------ section ------------------------- */
.home .section-wrap {
  padding-inline: 0 !important;
}
/* top-section--01 */
.top-section--01 {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.top-section--01::before {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  content: '';
  width: calc(100% - clamp(120px, 8.3vw, 200px));
  height: 100%;
  background-color: var(--wp--preset--color--bg-base);
  border-start-start-radius: 56px;
}
.top-section--01 .section-container--inner-full {
  z-index: 2;
}
/* ボタン */
.purpose-block {
  position: relative;
  overflow: visible;
}
.purpose-illust {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 0.4s ease-in-out;
  pointer-events: none;
  height: 100%;
  max-width: 480px;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
.purpose-btn,
.purpose-btn .ark-block-button.is-btn-outline,
.purpose-btn a {
  height: 100%;
}
.purpose-btn-02 > .ark-block-button,
.purpose-btn-03 > .ark-block-button {
  margin-left: 0 !important;
  width: 100% !important;
}
/* purpose-illust each */
/* 01 */
.purpose-illust--front.purpose-illust--01-front {
  background-image: url('assets/images/purpose-illust--01-front.png');
}
.purpose-illust--back.purpose-illust--01-back {
  background-image: url('assets/images/purpose-illust--01-back.png');
}
/* 02 */
.purpose-illust--front.purpose-illust--02-front {
  background-image: url('assets/images/purpose-illust--02-front.png');
}
.purpose-illust--back.purpose-illust--02-back {
  background-image: url('assets/images/purpose-illust--02-back.png');
}
/* 03 */
.purpose-illust--front.purpose-illust--03-front {
  background-image: url('assets/images/purpose-illust--03-front.png');
}
.purpose-illust--back.purpose-illust--03-back {
  background-image: url('assets/images/purpose-illust--03-back.png');
}
/* 04 */
.purpose-illust--front.purpose-illust--04-front {
  background-image: url('assets/images/purpose-illust--04-front.png');
}
.purpose-illust--back.purpose-illust--04-back {
  background-image: url('assets/images/purpose-illust--04-back.png');
}
/* illust common */
.purpose-illust--front {
  z-index: 3;
}
.purpose-illust--front.purpose-illust--01-front {
  top: 156%;
  left: -160%;
}
.purpose-illust--back {
  z-index: -1;
  max-width: unset;
}
.purpose-illust--back.purpose-illust--01-back {
  left: 60%;
  top: -248%;
  aspect-ratio: 1059 / 437;
  height: 240%;
}
.purpose-illust--front.purpose-illust--02-front {
  top: 104%;
  left: -400%;
  height: 150%;
}
.purpose-illust--back.purpose-illust--02-back {
  left: 20%;
  top: -270%;
  aspect-ratio: 924 / 610;
  height: 280%;
}
.purpose-illust--front.purpose-illust--03-front {
  top: 16%;
  left: -188%;
  aspect-ratio: 900 / 502;
  height: 130%;
}
.purpose-illust--back.purpose-illust--03-back {
  top: -370%;
  left: 60%;
  aspect-ratio: 924 / 526;
  height: 280%;
}
.purpose-illust--front.purpose-illust--04-front {
  top: -4%;
  left: -400%;
  height: 150%;
}
.purpose-illust--back.purpose-illust--04-back {
  top: -370%;
  left: 20%;
  aspect-ratio: 900 / 631;
  height: 280%;
}
/* hover */
.purpose-block:hover .purpose-illust--front {
  opacity: 1;
}
.purpose-block:hover .purpose-illust--back {
  opacity: 1;
}
.purpose-btn a span.arkb-fz.parah {
  display: inline-block;
  margin-block-start: 12px;
}
.purpose-btn a {
  padding: 1.75rem 4rem 2rem 3rem !important;
  position: relative;
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--bg-surface) !important;
  font-size: var(--wp--preset--line-height--body-s);
}
.purpose-btn a::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(100% - 4rem);
  transform: translateY(-50%);
  transform-origin: left center;
  border-radius: 999px;
  line-height: 0;
  padding: 0;
  background-color: currentColor;

  /* 初期は“完全な丸”にする */
  width: 0.3em;
  height: 0.3em;
  transition: width 0.2s ease-out;
}
@media (width <= 1440px) {
  .purpose-illust--front {
    left: -120%;
  }
  .purpose-illust--back.purpose-illust--02-back {
    left: 0;
  }
  .purpose-btn a span.arkb-fz.parah {
    margin-block-start: 0 !important;
  }
}
@media (width <= 1280px) {
  .purpose-illust--front {
    left: -4%;
  }
  .purpose-illust--front.purpose-illust--01-front {
    max-width: 320px;
  }
  .purpose-illust--front.purpose-illust--02-front,
  .purpose-illust--front.purpose-illust--04-front {
    max-width: 260px;
    left: -360%;
  }
}
@media (width <= 1024px) {
  .top-section--01::before {
    width: 96%;
  }
  /* hover */
  .purpose-block:hover .purpose-illust--front {
    opacity: 0;
  }
  .purpose-block:hover .purpose-illust--back {
    opacity: 0;
  }
  .purpose-illust--back.purpose-illust--01-back {
    opacity: 1;
    right: -32%;
    height: auto;
    width: 240%;
    top: -224%;
  }
  .purpose-block:hover .purpose-illust--back.purpose-illust--01-back {
    opacity: 1;
  }
}
.purpose-btn-icon {
  position: absolute;
  top: 50%;
  left: calc(100% - 4rem);
  width: 0.72em;
  height: 0.72em;
  transform: translate(50%, -50%);
}
.purpose-btn-icon::before,
.purpose-btn-icon::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.72em;
  height: 0.26rem;
  border-radius: 999px;
  background-color: currentColor;
  transform-origin: right center;
  opacity: 0;
  /* ほんの少しだけ左に＆薄くしておく */
  transform: translateX(-4px) translateY(-50%) rotate(0deg);
  transition:
    opacity 0.1s ease-out,
    transform 0.1s ease;
}
.purpose-btn a:hover {
  opacity: unset;
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent-aqua) !important;
  background-color: var(--wp--preset--color--bg-surface) !important;
}
/* ホバー時：線が伸びる */
.purpose-btn a:hover::after,
.purpose-btn a:focus::after,
.purpose-btn a:active::after {
  width: 1.8em;
}
/* ホバー時：ヘッドが“スッ”と現れる */
.purpose-btn a:hover .purpose-btn-icon::before,
.purpose-btn a:hover .purpose-btn-icon::after,
.purpose-btn a:focus .purpose-btn-icon::before,
.purpose-btn a:focus .purpose-btn-icon::after {
  opacity: 1;
  transform: translateX(0) translateY(-50%) rotate(43deg); /* before 用 */
  transition-delay: 0.1s; /* 出るときだけ遅らせる */
}
/* 下側だけ角度を書き分け */
.purpose-btn a:hover .purpose-btn-icon::after,
.purpose-btn a:focus .purpose-btn-icon::after {
  transform: translateX(0) translateY(-50%) rotate(-43deg);
}
/* デフォルト設定を上書き */
.is-btn-fill[data-hover='swap'] .ark-block-button__link:hover {
  color: var(--wp--preset--color--accent-aqua);
  background-color: var(--wp--preset--color--bg-paleblue);
  border: 1px solid var(--wp--preset--color--accent-aqua);
}
@media (width <= 768px) {
  .purpose-btn a {
    padding: 1.25rem 1.75rem 1.5rem !important;
    border-radius: 2.5rem;
    box-shadow:
      rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
      rgba(0, 0, 0, 0.05) 0px 1px 1px 0px !important;
  }
  .purpose-btn a::after,
  .purpose-btn a:hover .purpose-btn-icon::before,
  .purpose-btn a:focus .purpose-btn-icon::before,
  .purpose-btn a:hover .purpose-btn-icon::after,
  .purpose-btn a:focus .purpose-btn-icon::after {
    display: none;
  }
  .purpose-btn .ark-block-button__text::after {
    content: url(assets/images/btn-bg--arrow.png);
    position: absolute;
    top: 50%;
    left: calc(100% - 4rem);
    transform: translateY(-50%);
    padding: 0;
    width: auto;
  }
}
@media (width <= 425px) {
  .top-section--01::before {
    border-start-start-radius: 2.5rem;
  }
  .purpose-btn-links {
    grid-template-columns: auto;
    gap: 0.5rem;
  }
  .purpose-btn a span.arkb-fz.parah {
    margin-block-start: 0.5rem !important;
  }
  .purpose-btn-03 .is-btn-outline .ark-block-button__link {
    background: var(--wp--preset--color--bg-pinkwhite) !important;
  }
  .purpose-btn-04 .is-btn-outline .ark-block-button__link {
    background: var(--wp--preset--color--bg-paleblue) !important;
  }
}
/* top-section--02 */
.home .splide__track {
  overflow-x: hidden; /* 横方向はカット */
  overflow-y: visible; /* 上下だけ見せる */
  padding-block-start: 2rem;
}
.home .splide__slide {
  padding: 3rem 2rem;
  border-radius: 3rem;
  border: 1px solid var(--wp--preset--color--accent-aqua-light);
  transition: transform 0.3s ease-in-out;
}
.home .splide__slide:hover {
  transform: translateY(-2rem);
}
.home .splide__slide a {
  width: 100%;
}
.splide__slide a img {
  aspect-ratio: 6 / 5;
  width: 100%;
  max-width: 360px;
}
.home .splide__slide h3 {
  margin-block-end: 1rem;
}
.home .splide__slide--textbox {
  padding-block: 1.5rem 0;
  padding-inline: 0.75rem;
}
.home .splide__arrow {
  background: var(--wp--preset--color--bg-paleblue) !important;
}
.home .splide__arrow svg {
  fill: var(--wp--preset--color--accent-aqua) !important;
}
.home .splide__arrow--prev {
  left: 1.5rem;
}
/* top-section--03 */
.top-section--03 .section-h {
  z-index: 2;
}
.top-section--03 .section-contents {
  z-index: 3;
  margin: 0 auto;
  max-width: 96%;
}
.top-section--03 .section-h.has-bg--blue::after {
  content: '';
  position: absolute;
  top: -120px;
  left: 0;
  border-top-right-radius: 3rem;
  margin: 0 calc(50% - 50vw);
  width: 80vw;
  padding-top: 72%;
  background-color: var(--wp--preset--color--bg-paleblue);
  z-index: -1;
}
.top-section--03.has-bg--wood::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  border-top-right-radius: 3rem;
  margin: 0 calc(50% - 50vw);
  width: 90vw;
  padding-top: clamp(560px, 48vw, 640px);
  background-image: image-set(
    var(--wood-webp) type('image/webp'),
    var(--wood-jpg) type('image/jpeg')
  );
}
.feature-card {
  justify-content: space-between;
}
@media (width<=1024px) {
  .top-section--03.has-bg--wood::before {
    width: calc(100% - 0.55rem);
  }
}
@media (width <= 768px) {
  .top-section--03 .section-contents {
    max-width: 64%;
  }
  .top-section--03 .section-h {
    margin-bottom: 2.5rem !important;
  }
  .top-section--03 .section-h.has-bg--blue::after {
    top: -80px;
    width: 88vw;
    padding-top: 80%;
  }
  .top-section--03.has-bg--wood::before {
    padding-top: 880px;
  }
  .top-section--03 .features-cards-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    margin: 0 auto;
  }
  .feature-card {
    padding: 2rem 1.5rem !important;
    border-radius: 2rem !important;
  }
  .feature-card p.sp-small {
    font-size: 0.75rem !important;
  }
  .feature-card .card-innerwrap,
  .feature-card .card-inner--flexbox {
    width: 100%;
  }
  .feature-card .wp-container-core-group-is-layout-9e89c9a3 .card-inner--flexbox {
    flex-direction: row !important;
    align-items: center !important;
  }
}
@media (width <= 540px) {
  .top-section--03 .section-contents {
    max-width: 88%;
  }
  .top-section--03 .section-h.has-bg--blue::after {
    padding-top: 108%;
  }
}
@media (width <= 480px) {
  .top-section--03 .section-h.has-bg--blue::after {
    padding-top: 150%;
    width: 92vw;
  }
}
@media (width <= 360px) {
  .top-section--03 .section-contents {
    max-width: 92%;
  }
  .top-section--03 .section-h.has-bg--blue::after {
    padding-top: 180%;
  }
}
/* top-section--04 */
.top-section--04 .section-container--inner-full.has-bg--map {
  max-width: none;
  margin: 0 calc(50% - 50vw) !important;
}
.top-section--04 .section-container--inner-full.has-bg--map::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border-top-left-radius: 3rem;
  width: 80vw;
  z-index: 1;
  background-image: image-set(
    url('assets/images/bg-map.webp') type('image/webp'),
    url('assets/images/bg-map.jpg') type('image/jpeg')
  );
  background-size: cover;
}
.top-section--04 .section-h {
  z-index: 2;
  width: fit-content;
  margin: 0 auto;
}
@media (width <= 1440px) {
  .top-section--04 .section-container--inner-full.has-bg--map::before {
    width: 92vw;
  }
}
@media (width <= 768px) {
  .top-section--04 .section-h {
    padding: 4rem 2.5rem !important;
  }
}
@media (width <= 540px) {
  .section-container--inner-full {
    margin: 0 8% !important;
  }
  .top-section--04 .section-container--inner-full.has-bg--map::before {
    width: 100%;
  }
  .top-section--04 .section-h {
    max-width: 84%;
  }
}
/* --------------------------------------------------------------
 * ---------------------- 下層ページ 
 * -------------------------------------------------------------- */
/* ---------------------- 共通 ------------------------- */
@media (width <= 480px) {
  p.has-body-s-font-size {
    font-size: 12px !important;
  }
}
/* ---------------- fv ------------------- */
.page-cover-wrap {
  margin-top: -122px;
}
.page-cover {
  min-height: 480px;
}
.page-cover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/images/page-cover--bg.png');
  background-size: auto;
  background-position: center bottom;
  background-repeat: no-repeat;
}
@media (width <= 1440px) {
  .page-cover::before {
    background-size: cover;
  }
}
@media (width <= 1024px) {
  .page-cover::before {
    background-position: right top;
  }
}
@media (width <= 600px) {
  .page-cover::before {
    background-image: url('assets/images/page-cover--bg-sp.png');
  }
}
/* breadcrumbs */
.aioseo-breadcrumbs,
.aioseo-breadcrumbs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 1200px;
}
.aioseo-breadcrumbs li {
  display: inline-flex;
  align-items: center; /* ← li 内の要素は上下中央 */
}
.aioseo-breadcrumb br {
  display: none;
}
.aioseo-breadcrumbs .aioseo-breadcrumb:first-child {
  width: 1.1rem;
  height: 1.1rem;
  display: flex;
}
.aioseo-breadcrumbs .aioseo-breadcrumb a[title='Home'] {
  position: relative;
  font-size: 0; /* ← テキストを消す目的 */
  line-height: 1; /* 行高さを詰めてアイコン基準に */
  width: 100%;
}

.aioseo-breadcrumbs .aioseo-breadcrumb a[title='Home']::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1rem;
  height: 1rem;
  transform: translateY(-45%); /* -50% → -45% くらいにして少し下げる */
  background: url('assets/images/home-icon.svg') no-repeat center / contain;
}
@media (width <= 1260px) {
  .aioseo-breadcrumbs {
    padding-left: 1rem;
  }
}
/* ---------------- page-nav ------------------- */
.page-nav {
  width: 80vw;
  max-width: 1200px;
}

.page-nav--child {
  position: relative;
  cursor: pointer;
}
.page-nav--child:not(:first-child)::before {
  position: absolute;
  content: '';
  transform: translateY(-50%);
  top: 50%;
  left: 0;
  width: 3px;
  height: 32px;
  background-color: var(--wp--preset--color--bg-base);
  border-radius: 2px;
}
.page-template-page-reservation .page-nav--child:nth-child(3)::after {
  content: '';
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  right: 0;
  width: 3px;
  height: 32px;
  background-color: var(--wp--preset--color--bg-base);
  border-radius: 2px;
}
.page-template-page-reservation .to-r-system-btn .wp-block-button__link {
  border: 2px solid var(--wp--preset--color--accent-aqua);
}
.page-template-page-reservation .to-r-system-btn .wp-block-button__link:hover,
.page-template-page-reservation .to-r-system-btn .wp-block-button__link:active,
.page-template-page-reservation .to-r-system-btn .wp-block-button__link:focus {
  color: var(--wp--preset--color--accent-aqua) !important;
  background-color: var(--wp--preset--color--bg-base);
  border: 2px solid var(--wp--preset--color--accent-aqua-light);
}
.page-nav--child .menu-title {
  position: relative;
  text-align: center;
}
.page-nav--child .menu-title::after {
  content: '';
  position: absolute;
  top: 112%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 1rem;
  height: 1rem;
  background: url('assets/images/down-arrow.png') no-repeat center / contain;
  transition: 0.2s ease-in-out;
}
.page-nav--child:hover .menu-title::after {
  top: 132%;
}
@media (width <= 1100px) {
  .page-nav {
    width: 94%;
  }
}
@media (width <= 768px) {
  .page-nav {
    width: 94vw;
  }
}
@media (width <= 480px) {
  .page-nav {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    border-radius: 2.4rem !important;
  }
  .page-nav--child {
    padding-top: 1rem !important;
    padding-bottom: 1.5rem !important;
  }
  .page-nav--child:not(:first-child)::before,
  .page-nav--child:not(:last-child)::after {
    display: none;
  }
  .page-nav--child .menu-title::after {
    width: 0.75rem;
    height: 0.75rem;
    top: 102%;
  }
  .page-nav--child .menu-title {
    font-size: 13px !important;
  }
}
/* ---------------------- FAQ / Contact ------------------------- */
/* ----------------- FAQ ----------------- */
.ark-block-tab.is-style-box > .arkb-tabList .arkb-tabList__button[aria-selected='true'] {
  background-color: var(--wp--preset--color--bg-base);
  border-bottom: 3px solid var(--wp--preset--color--accent-aqua-light);
  color: var(--wp--preset--color--text-base);
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
}
.ark-block-tab.is-style-box > .arkb-tabList .arkb-tabList__button[aria-selected='false'] {
  border-bottom: 3px solid var(--wp--preset--color--bg-paleblue);
  box-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.15),
    inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}
.q-a-set {
  padding: 1.5rem 1rem;
  border-bottom: 1px solid var(--wp--preset--color--accent-aqua-light);
}
.q-a-set p {
  position: relative;
  padding-inline-start: 2.25rem;
  padding-block: 0.75rem;
}
.q-a-set p::before {
  content: 'Q';
  position: absolute;
  transform: translateY(-50%);
  top: 1.6rem;
  left: -1rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--wp--preset--color--accent-aqua-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--wp--custom--font-size-body-l);
  font-weight: 600;
}
.q-a-set p.a-text::before {
  content: 'A';
  color: var(--wp--preset--color--accent-aqua);
}
/* ----------- フォームまわり ---------------- */
/* Contact Form 7 (共通）*/
.form_wrapper {
  padding-block: 3rem;
}
.wpcf7-form-control {
  padding: 1rem;
}
/* spanをブロック要素＆100%幅に */
.wpcf7-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}
.wpcf7 input[type='text'],
.wpcf7 input[type='email'],
.wpcf7 input[type='url'],
.wpcf7 input[type='tel'],
.wpcf7 textarea {
  width: calc(100% - 2rem) !important;
  font-size: var(--wp--custom--font-size-body-s);
}
.wpcf7 .contact_item {
  margin-block-end: 2rem;
}
.wpcf7-form-control.wpcf7-radio .wpcf7-list-item {
  margin: 0 0 0 1rem;
}
.wpcf7-form-control.wpcf7-radio .wpcf7-list-item.first {
  margin: 0;
}
.wpcf7 .contact_item .label {
  margin-block-end: 0.75rem;
}
.wpcf7 .contact_item .label span.label_tag-must {
  background-color: var(--wp--preset--color--accent-aqua-dark);
  color: var(--wp--preset--color--text-inverse);
  font-size: smaller;
  display: inline-block;
  margin-inline: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: 16px;
}
.wpcf7 .contact_item input,
.wpcf7 .contact_item textarea {
  border: 1px solid var(--wp--preset--color--accent-aqua-light);
  border-radius: 16px;
}
.wpcf7-form-control-wrap[data-name='radio-111'] .wpcf7-form-control.wpcf7-radio {
  padding: 1rem 0 1rem;
}
.checkbox_accept .wpcf7-form-control {
  padding: 0;
}
.btn_confirm:disabled {
  padding: 1rem 1.5rem;
  font-size: var(--wp--custom--font-size-body);
  font-weight: 500;
  letter-spacing: 0.1em;
  border-radius: 3rem;
}
.btn_confirm:not(:disabled),
.btn_sent,
.back_button {
  padding: 1rem 1.5rem;
  font-size: var(--wp--custom--font-size-body);
  font-weight: 500;
  letter-spacing: 0.1em;
  border-radius: 3rem;
  border: 2px solid var(--wp--preset--color--accent-aqua-light);
  color: var(--wp--preset--color--accent-aqua-dark);
  background-color: var(--wp--preset--color--bg-base);
  cursor: pointer;
}
.back_button {
  margin-block-start: 2rem;
}
/* 送信完了画面以外ではトップへ戻るボタンを非表示 */
.back_totop_btn.only_complete {
  display: none;
}

/* Contact Form 7 送信中のスタイル */
/* 送信ボタンのカーソルを待機状態に */
.wpcf7-form.submitting .wpcf7-submit {
  cursor: wait !important;
}
/* CF7標準スピナーのスタイル調整と表示 */
.wpcf7-form .wpcf7-spinner {
  visibility: hidden; /* 通常は非表示 */
  display: inline-block; /* 位置調整のため */
  background-image: url('assets/img/custom-spinner.gif'); /* カスタムスピナー */
  background-repeat: no-repeat;
  background-position: center;
  width: 20px; /* スピナーのサイズ */
  height: 20px;
  vertical-align: middle;
  margin-left: 8px; /* ボタンとの間隔 */
  opacity: 0;
  transition:
    opacity 0.2s ease-in-out,
    visibility 0s linear 0.2s; /* visibilityの遅延を調整 */
}
.wpcf7-form.submitting .wpcf7-spinner {
  visibility: visible; /* 送信中に表示 */
  opacity: 1;
  transition-delay: 0s; /* 送信開始時に即座に表示 */
}
/* 送信ボタン自体の見た目を少し変える */
.wpcf7-form.submitting .wpcf7-submit {
  opacity: 0.8;
}
/* 確認画面エリア */
.confirm_area {
  margin-block-end: 2rem;
}
.confirm_area h3 {
  font-size: var(--wp--custom--font-size-h3);
  margin-block-end: 2rem;
}
.confirm_area .form_c-container p {
  margin-block-end: 1rem;
}
.confirm_area .input-text {
  margin-block-end: 1rem;
  color: var(--wp--preset--color--accent-aqua-dark);
  text-indent: 0.75rem;
}
.confirm_area .wpcf7-form-control.wpcf7-submit.btn_sent {
  margin-block-start: 2rem;
}
/* 送信完了画面エリア */
.complete_area .form_c-container h3 {
  font-size: var(--wp--custom--font-size-h3);
  margin-block-end: 2rem;
}
.complete_area .form_c-container p {
  margin-block-end: 1rem;
}
.back_totop_btn.only_complete {
  margin-block-end: 0;
  cursor: pointer;
}
/* ---------------------- Access ------------------------- */
.access-info--item {
  width: 100%;
}
.gmap-btn .wp-block-button__link:hover,
.gmap-btn .wp-block-button__link:active,
.gmap-btn .wp-block-button__link:focus {
  background-color: var(--wp--preset--color--bg-paleblue) !important;
  opacity: 0.7;
}
@media (width <= 768px) {
  .wp-container-core-group-is-layout-839d1f68 {
    /* 例：2カラムにする */
    grid-template-columns: 1fr 1fr;
    gap: 1rem; /* モバイル用に少し詰めるなど */
  }
  .wp-container-core-group-is-layout-8d702440
    > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 100%;
  }
  .gmap-container iframe {
    border-radius: 2rem !important;
  }
  .access-info .column-box--r {
    margin-block-start: 0.75rem;
    padding-inline-start: 1.75rem;
  }
  .access-info--item {
    gap: 0 !important;
  }
}
/* 425px以下で「小さめ正方形寄り」にする */
@media (max-width: 425px) {
  .wp-container-core-group-is-layout-839d1f68 {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2列維持 */
    gap: 0.5rem; /* 余白も少し詰める */
  }
  .wp-container-core-group-is-layout-839d1f68 > * {
    aspect-ratio: 1 / 1; /* 正方形 */
    padding: 0.5rem;
  }
}

/* --------------------- Reservation ------------------------ */
/* flow */
.flow-container::after {
  border-left: 2px solid var(--wp--preset--color--accent-aqua-light);
  content: '';
  display: block;
  height: 100%;
  left: 6rem;
  position: absolute;
  top: 0;
  z-index: 1;
}
.flow-container .flow-box {
  position: relative;
  z-index: 2;
}
/* reservationFAQ */
.reservation-faq--container .ark-block-accordion__title {
  background-color: var(--wp--preset--color--bg-surface);
  border: 2px solid var(--wp--preset--color--bg-paleblue);
  border-radius: 8px;
}
[data-icon-type='caret'] .ark-block-accordion__icon {
  background-color: var(--wp--preset--color--accent-aqua-dark);
}
.reservation-faq--container .q-a-set p.a-text::before {
  top: 0.5rem;
  transform: unset;
}
.faq-note p {
  z-index: 2;
}
.faq-note--img {
  left: -7rem;
  z-index: 1;
  opacity: 0.56;
  width: max(120px, 10vw);
  max-width: 240px;
}
/* .btn.display-u-SP {
  display: none !important;
} */
@media (width <= 768px) {
  .faq-note--img {
    transform: translateX(-50%);
    left: 50%;
  }
}
@media (width <= 540px) {
  /* .btn.display-u-SP {
    display: inline-block !important;
  }
  .btn.display-u-SP .cta-icon a {
    border-radius: 1.25rem !important;
  }
  .cta-icon a span {
    display: flex;
  } */
  .page-template-page-reservation .page-nav .to-r-system-btn {
    display: none !important;
  }
}
/* --------------------------  Facility  -------------------------- */
/* facility ページの section[id] だけに適用 */
.page-template-page-facility section[id] {
  scroll-margin-top: var(--header-offset);
}
.main.main-facility {
  padding-inline: 4%;
}
.page-template-page-facility .section-container {
  padding: 0 min(120px, 4vw) 120px;
}
.tab-box--facility .arkb-tabList {
  max-width: 94%;
  margin: 0 auto;
}
.tab-box--facility .arkb-tabList__button {
  font-family: var(--wp--preset--font-family--body) !important;
}
.tab-box--facility .arkb-tabList li > button > span {
  display: block;
  margin-block-start: 6px;
  letter-spacing: 0.1em;
  font-size: 1.125em !important;
}
.tab-box--facility .arkb-tabList .arkb-tabBody {
  padding: 0;
}
/* ---------------- facility page-nav ------------------- */

.page-nav--grid {
  width: 80vw;
  max-width: 1200px;
  margin: 0 auto;
}
.page-nav.facility-nav {
  width: auto;
}
.page-nav-wrap .is-absolute {
  transform: translateX(-50%);
  left: 50%;
  top: clamp(-37.714px, calc(-1.392rem - ((1vw - 3.2px) * 1.754)), -22.272px);
}
@media (width <= 1100px) {
  .page-nav--grid {
    position: relative;
    width: 94vw; /* 画面幅の 94% にする */
    /* left: 50%;
    transform: translateX(-50%); */
  }
}
.main-facility .section-container .section-h,
.main-facility .section-container .section-contents {
  max-width: 1200px !important;
}
.main-facility .section-h.has-bg-paleblue h2,
.main-facility .section-h.has-bg-paleblue {
  padding: 0.85rem 0 !important;
}

@media (width >= 1200px) {
  section#building-amenities .icons-grid {
    max-width: 72%;
  }
}
@media (width <= 768px) {
  .tab-box--facility .arkb-tabList {
    flex-wrap: wrap !important;
  }
}
/* ========================================
   全TablePress共通スタイル
   ======================================== */
/* テーブルのヘッダー行を中央寄せ */
.tablepress thead th {
  text-align: center;
}

/* テーブルの左端と右端の列（1および9列目）を中央寄せ */
.tablepress .column-1,
.tablepress .column-9 {
  text-align: center;
  vertical-align: middle;
}

.tablepress tbody tr,
.tablepress td,
.tablepress th {
  border: 1px solid #e0e0e0;
  vertical-align: middle;
  line-height: 1.4;
}
/* リンクスタイル（予約ボタン） */
.tablepress tbody td a[href*='reserve']:hover {
  background-color: var(--wp--preset--color--bg-base) !important;
  color: var(--wp--preset--color--accent-aqua-dark) !important;
  border: 1px solid var(--wp--preset--color--accent-aqua-dark) !important;
}
.js-scrollable {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
/* ScrollHint用のスタイル調整 */
.scroll-hint {
  margin-bottom: 1em;
}
/* ========================================
   テーブル内のテキスト配置
   ======================================== */
.tablepress tbody tr:nth-child(1) td:nth-child(n + 2):nth-child(-n + 7),
.tablepress tbody tr:nth-child(2) td:nth-child(n + 2):nth-child(-n + 7),
.tablepress tbody tr:nth-child(3) td:nth-child(n + 2):nth-child(-n + 7) {
  text-align: center !important;
}

/* ========================================
   TablePress ID 4専用: 列幅とレイアウト
   ======================================== */
.tablepress-id-4 {
  width: 100%;
}
.tablepress-id-4 thead th {
  text-align: center;
}
.tablepress-id-4 thead th,
.tablepress-id-4 tbody td {
  padding: 0.875rem 0.5rem;
  white-space: nowrap;
}
/* 1列目: フロア */
.tablepress-id-4 tbody tr > td.column-1 {
  min-width: 72px;
  text-align: center;
  font-weight: 600;
}
/* 2列目: 部屋名 */
.tablepress-id-4 tbody tr > td.column-2 {
  min-width: 160px;
  text-align: center;
}

/* 3列目: 面積 */
.tablepress-id-4 tbody tr > td.column-3 {
  min-width: 100px;
}
/* 4-7列目: スクール型、シアター型、ロの字型、島型 */
.tablepress-id-4 tbody td:nth-child(n + 3) {
  min-width: 96px;
  text-align: center;
}

@media (width <= 768px) {
  .main.main-facility {
    padding: 0 !important;
  }
  .tablepress {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tablepress thead th,
  .tablepress tbody td {
    font-size: 13px;
    padding: 0.25rem;
  }
  .tablepress .wp-element-button {
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem 0.5rem 0.75rem !important;
  }
}
@media (width <= 441px) {
  .page-nav--grid .page-nav-wrap:last-child .page-nav--child:last-child {
    padding-top: 0 !important;
  }
}
@media (width <= 404px) {
  .page-nav--grid .page-nav-wrap:nth-child(2) .page-nav--child:last-child {
    padding-top: 0 !important;
  }
}
/* --------------------------  Archive , single  -------------------------- */
.info-archive-title {
  font-size: var(--wp--preset--font-size--body-l);
  color: var(--wp--preset--color--brand-light);
  margin-bottom: 0;
  font-weight: 600;
}
/* sidebar */
.archive ul.tag-list,
.single ul.tag-list {
  list-style: none;
}
.archive ul.tag-list,
.single ul.tag-list {
  padding-inline-start: 1rem !important;
}
.archive ul.tag-list li.cat-item,
.single ul.tag-list li.cat-item {
  margin-inline-end: 0.5rem;
}
/* pagenation */
.wp-block-query-pagination .page-numbers {
  padding-block: 0.125rem;
  padding-inline: 0.4rem;
}
.wp-block-query-pagination .page-numbers {
  border: 1px solid var(--wp--preset--color--accent-aqua-dark);
}
.wp-block-query-pagination .page-numbers.current {
  background-color: var(--wp--preset--color--accent-aqua-dark);
  color: var(--wp--preset--color--bg-base);
}
.wp-block-query-pagination .page-numbers:not(.current):hover {
  border-color: var(--wp--preset--color--accent-aqua-light);
}
.cat-list-all li {
  margin-top: 0;
}
@media (width <= 768px) {
  /* articles */
  .archive-container li.wp-block-post {
    display: flex;
  }
  .archive-container li.wp-block-post figure {
    width: 32%;
    margin-inline-end: 1rem;
    margin-block-end: 0 !important;
  }
  .archive-container li.wp-block-post .article-title {
    margin-block-start: 0.5rem;
  }
  .archive-container li.wp-block-post .taxonomy-info_cat {
    font-size: 12px;
    font-weight: 500;
  }
  .single-info .post-navigation-link-previous.has-body-s-font-size,
  .single-info .post-navigation-link-next.has-body-s-font-size {
    font-size: 0.75rem !important;
  }
}
/* ---------------------------- Features ---------------------------- */

.page-template-page-features #environmental-initiatives,
.page-template-page-features #disaster-prevention-hub,
.page-template-page-features #community-collaboration-hub {
  scroll-margin-top: var(--header-offset);
}

.page-template-page-features .section-contents h2 {
  text-align: center;
}