/* ============================================================
eido-style.css — エイド宮崎 全ページ共通スタイル
(common + index + inner + news + news-single + contact +
privacy + service + rental + sale + reform + access)
============================================================ */

/* ============================================================
COMMON
============================================================ */

/* ============================================================
RESET & CUSTOM PROPERTIES
============================================================ */

*, *::before, *::after  {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

:root  {
  --c-main-light:  #90d4e8;
  --c-main-pale:   #bee8f4;
  --c-main-ultra:  #defbff;
  --c-main-faint:  #f3feff;
  --c-green-deep:  #1a7a4a;
  --c-green-main:  #4dba7c;

  --c-coral:        #f06050;
  --c-coral-dark:   #d44838;
  --c-blob-peach:   #f8c8b0;
  --c-blob-yellow:  #f8f080;
  --c-cream:        #f5f2ea;
  --c-event-bg:     #fff3e0;
  --c-event-text:   #c07000;
  --c-beige:        #edf6f9;
  --c-text-dark:    #0f3344;
  --c-text-deep:    #0776a1;
  --c-text-main:    #3cb2d6;
  --c-main-deep:    var(--c-text-deep);
  --c-main-main:    var(--c-text-main);
  --c-text-mid:     #2c5568;
  --c-text-light:   #507a8a;
  --c-text-muted:   #8ab0be;
  --c-white:        #ffffff;
  --shadow-sm:    0 2px 14px rgba(13,92,122,.08);
  --shadow-md:    0 5px 28px rgba(13,92,122,.13);
  --shadow-lg:    0 10px 48px rgba(13,92,122,.17);
  --r-ss:         5px;
  --r-sm:         12px;
  --r-md:         20px;
  --r-lg:         28px;
  --r-full:       9999px;
  --font-body:    'Noto Sans JP', 'Meiryo', 'メイリオ', sans-serif;
  --font-ui:      'Noto Sans JP', 'Yu Gothic UI', 'YuGothic', 'Meiryo', sans-serif;
  --font-en:      'Segoe UI', 'Arial', sans-serif;

  --fs-10:       0.625rem;  /* 10px */
  --fs-12:       0.75rem;   /* 12px */
  --fs-14:       0.875rem;  /* 14px */
  --fs-16:       1rem;      /* 16px */
  --fs-18:       1.125rem;  /* 18px */
  --fs-20:       1.25rem;   /* 20px */
  --fs-22:       1.375rem;  /* 22px */
  --fs-24:       1.5rem;    /* 24px */
  --fs-26:       1.625rem;  /* 26px */
  --fs-28:       1.75rem;   /* 28px */
  --fs-30:       1.875rem;  /* 30px */
  --fs-36:       2.25rem;   /* 36px */
  --fs-44:       2.75rem;   /* 44px */
  --fs-58:       3.625rem;  /* 58px */

  /* ----- 余白スケール（フィボナッチベース、セクション余白・gap に使用） ----- */
  /* ===== 8pxベース ===== */
  --space-0: 0px;
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;

  /* ===== フィボナッチ ===== */
  --space-13: 13px;
  --space-21: 21px;
  --space-34: 34px;
  --space-55: 55px;
  --space-89: 89px;
}

html  { overflow-x: clip; scroll-behavior: smooth;}

@media (max-width: 1023px)  {
  html  { scroll-padding-top: 70px;}
}

body  {
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: var(--fs-18);
  font-feature-settings: "palt" 1;
  line-height: 1.8;
  color: var(--c-text-dark);
  text-align: justify;
  background: var(--c-white);

  /* 対策①：文字の間で均等に余白を分配する（日本語に超有効） */
  text-justify: inter-character;
  /* 対策②：長い単語や英数字を端で綺麗に折り返す */
  word-break: break-all;
  /*
   * 注：text-align-last: left は body に置かない。
   * 継承で center/right に override した子（.article-date 等）の
   * 「最後の行だけ左に残る」現象を引き起こすため。
   * 代わりに、本文段落・記事系の長文コンテナにだけ後段で付与する。
   */
}

/* 長文段落コンテナ：両端揃え＋最後の行を左に揃える（日本語の見栄え対策）。
   ここに追加することで、center/right を使う UI 系（パンくず・日付・ナビなど）には
   text-align-last が継承されず、レイアウト崩れを起こさない。 */
.article-body,
.article-body p,
.article-body li,
.page-hero-desc,
.hero-desc,
.policy-list > li p,
.policy-list > li ol  {
  text-align-last: left;
}

img  { display: block; max-width: 100%;}
a  { color: inherit; text-decoration: none;}
ul, ol  { list-style: none;}
main, aside  { min-width: 0;}

/* ============================================================
ICON CHEVRON
============================================================ */

.icon-chevron  {
  display: inline-block;
  flex-shrink: 0;
  width: var(--chevron-size, 0.6875rem);
  height: var(--chevron-size, 0.6875rem);
  vertical-align: middle;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.icon-chevron--sm  { --chevron-size: 0.375rem;  }  /* 6px  ≈ svg10px */
.icon-chevron--md  { --chevron-size: 0.4375rem; }  /* 7px  ≈ svg11px */
.icon-chevron--lg  { --chevron-size: 0.5625rem; }  /* 9px  ≈ svg14px */

/* ============================================================
ANIMATIONS
============================================================ */

@keyframes spin  {
  from  { transform: rotate(0deg);}
  to    { transform: rotate(360deg);}
}

@keyframes fadeUp  {
  from  { opacity: 0; transform: translateY(20px);}
  to    { opacity: 1; transform: translateY(0);}
}

.fade-1  { animation: fadeUp .6s ease both .05s;}
.fade-2  { animation: fadeUp .6s ease both .2s;}
.fade-3  { animation: fadeUp .6s ease both .35s;}
.fade-4  { animation: fadeUp .6s ease both .5s;}

/* ============================================================
IMAGE / ILLUSTRATION PLACEHOLDER
============================================================ */

.ph  {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--c-text-muted);
  background: var(--c-beige);
  border: 2px dashed var(--c-main-pale);
  border-radius: var(--r-md);
}

/* ============================================================
LOGO BLOCK (sidebar共用)
============================================================ */

.logo-block  {
  display: flex;
  gap: var(--space-13);
  align-items: center;
  padding: var(--space-13) var(--space-24) var(--space-13) var(--space-16);
  background: var(--c-white);
  border: 1.5px solid rgba(42,155,191,.22);
  border-radius: var(--r-md);
  box-shadow: 0 2px 16px rgba(13,92,122,.1);
}

.logo-block img  {
  flex-shrink: 0;
  width: auto;
  height: 50px;
}

.logo-block-text,
.mobile-header-logo-text  {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

/* ============================================================
UTILITY
============================================================ */

ul.ul-disc  {
  list-style: disc;
  padding-left: 1.5em;
}

ul.ul-disc li  {
  margin-bottom: .4em;
}

ul.ul-circle  {
  list-style: none;
  padding-left: 1.5em;
}

ul.ul-circle li  {
  position: relative;
  margin-bottom: .4em;
}

ul.ul-circle li::before  {
  content: '◎';
  position: absolute;
  left: -1.5em;
}

/* ============================================================
MAIN LAYOUT — sidebar 280px + content
============================================================ */

.main-layout  {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
}

@media (min-width: 768px) and (max-width: 1023px)  {
  .main-layout  { grid-template-columns: 1fr;}
}

@media (max-width: 767px)  {
  .main-layout  { grid-template-columns: 1fr;}
}

/* ============================================================
SIDEBAR
============================================================ */

.sidebar  { background: var(--c-main-ultra); border-right: 1px solid var(--c-main-pale);}

.sidebar-inner  {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-21);
  max-height: 100vh;
  padding: var(--space-32) var(--space-21) var(--space-24);
  overflow-y: auto;
  scrollbar-width: thin;
}

.sidebar-logo.logo-block  { gap: var(--space-8); padding: var(--space-8) var(--space-16) var(--space-8) var(--space-13);}
.sidebar-logo.logo-block img  { height: 36px;}
.sidebar-logo .logo-corp  {
  margin-bottom: var(--space-8);
  font-family: var(--font-ui);
  font-size: var(--fs-16);
  font-weight: bold;
  color: var(--c-text-light);
}
.sidebar-logo .logo-title  {
  font-family: var(--font-ui);
  font-size: var(--fs-24);
  font-weight: bold;
  color: var(--c-text-deep);
  letter-spacing: .1rem;
}

.sidebar-nav  {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sidebar-nav > li > a  {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-8) var(--space-13);
  font-family: var(--font-ui);
  font-weight: bold;
  color: var(--c-text-light);
  border-radius: var(--r-sm);
  transition: background .18s, color .18s, box-shadow .18s;
}

.sidebar-nav > li > a:hover  { color: var(--c-text-deep); background: rgba(42,155,191,.12);}

.sidebar-nav > li > a.is-active  {
  color: var(--c-text-deep);
  background: var(--c-white);
  box-shadow: 0 2px 14px rgba(13,92,122,.12);
}

.sidebar-nav > li > a.is-parent-active  { color: var(--c-text-deep);}
.sidebar-nav > li > a svg  { flex-shrink: 0; color: var(--c-text-main);}
.sidebar-nav > li > a.is-active svg  { color: var(--c-text-main);}
.sidebar-nav > li > a.is-parent-active svg  { color: var(--c-text-main);}

.sidebar-subnav  {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: var(--space-13);
  margin: 0 0 0 var(--space-24);
  border-left: 2px solid var(--c-main-light);
}

.sidebar-subnav li a  {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-8);
  color: var(--c-text-light);
  border-radius: var(--r-sm);
  transition: background .15s, color .15s;
}

.sidebar-subnav li a:hover  { color: var(--c-text-deep); background: rgba(85,184,212,.08);}

.sidebar-subnav li a.is-active  {
  font-weight: bold;
  color: var(--c-text-deep);
  background: var(--c-white);
  box-shadow: 0 1px 8px rgba(13,92,122,.1);
}

.sidebar-tel  {

  display: none;

  padding: var(--space-16);
  margin-top: auto;
  text-align: center;
  background: var(--c-white);
  border: 1.5px solid var(--c-main-pale);
  border-radius: var(--r-md);
}

.sidebar-tel-label  {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-8);
  color: var(--c-text-muted);
}

.sidebar-tel-num  {
  margin-bottom: 0;
  font-family: var(--font-en);
  font-weight: bold;
  color: var(--c-text-dark);
}

.sidebar-tel-hours  { color: var(--c-text-muted);}

@media (min-width: 768px) and (max-width: 1023px)  {
  .sidebar  { display: none;}
}

@media (max-width: 767px)  {
  .sidebar  { display: none;}
}

/* ============================================================
PAGE HERO（下層ページタイトルバナー）
============================================================ */

.page-hero  {
  position: relative;
  padding: var(--space-24) var(--space-40) var(--space-40);
  overflow: hidden;
  background: var(--c-main-ultra);
  border-bottom: 1px solid var(--c-main-pale);
}

.page-hero::before  {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: '';
  background-image: radial-gradient(circle, rgba(13,92,122,.12) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}

.page-hero::after  {
  position: absolute;
  top: calc(-1 * var(--space-89));
  right: calc(-1 * var(--space-89));
  width: 280px;
  height: 280px;
  pointer-events: none;
  content: '';
  background: rgba(168,217,187,.25);
  border-radius: 50%;
}

.page-hero-inner  {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--space-32);
  align-items: center;
}

.page-hero-text  { flex: 1;}

.page-hero-en  {
  font-family: var(--font-en);
  font-size: medium;
  color: var(--c-text-main);
  text-transform: uppercase;
}

.page-hero h1  {
  font-family: var(--font-ui);
  font-weight: bold;
  color: var(--c-text-deep);
}

.page-hero-desc  { color: var(--c-text-light);}

@media (min-width: 768px) and (max-width: 1023px)  {
  .page-hero  { padding: calc(70px + var(--space-16)) var(--space-32) var(--space-34);}
  .page-hero-inner  { display: block;}
  .page-hero h1  { font-size: var(--fs-20);}
}

@media (max-width: 767px)  {
  .page-hero  { padding: calc(70px + var(--space-16)) var(--space-16) var(--space-24);}
  .page-hero-inner  { display: block;}
  .page-hero h1  { font-size: var(--fs-24);}
  .page-hero::after  { width: 154px; height: 154px; top: -49px; right: -49px;}
}

/* お知らせ詳細（single-news）の h1 だけ 1 サイズ小さく */
.single-news .page-hero h1  { font-size: var(--fs-30);}
@media (min-width: 768px) and (max-width: 1023px)  {
  .single-news .page-hero h1  { font-size: var(--fs-18);}
}
@media (max-width: 767px)  {
  .single-news .page-hero h1  { font-size: var(--fs-22);}
}

/* ============================================================
CONTENT ブロック共通
— .content-section / パンくず / .section-label / .section-title / .title-text / .btn
============================================================ */

.content-section  { padding: var(--space-64) var(--space-40);}
.content-section:has(> nav:first-child)  { padding-top: var(--space-24);}
.content-section > nav:first-child  { margin-bottom: var(--space-34);}

/* パンくず専用：余白をコンパクトにする（共通パンくずをpage.phpへ移動したため） */
.content-section.breadcrumb-section  {
  padding-top: var(--space-16);
  padding-bottom: 0;
}
.breadcrumb-section + .content-section  { padding-top: var(--space-16);}
.breadcrumb-section > nav:first-child  { margin-bottom: 0;}

.breadcrumb  {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: center;
  margin-bottom: var(--space-13);
  font-family: var(--font-ui);
  font-size: var(--fs-14);
  color: var(--c-text-main);
  text-align: left;
}

.breadcrumb a  { transition: color .15s;}
.breadcrumb a:hover  { color: var(--c-text-deep);text-decoration: underline;}
.breadcrumb-sep  { margin-right: var(--space-8); color: var(--c-text-muted); opacity: .5;}

.section-label  {
  display: block;
  margin-bottom: var(--space-8) !important;
  font-family: var(--font-en);
  font-size: var(--fs-20);
  line-height: 0.6;
  color: var(--c-text-deep);
  text-transform: uppercase;
  opacity: .5;
}

.section-title  {
  margin-top: 0 !important;
  margin-bottom: var(--space-16);
  font-family: var(--font-ui);
  font-size: var(--fs-28);
  font-weight: bold;
  color: var(--c-text-deep);
}

.section-title:has(+ .title-text)  {
  margin-bottom: 0 !important;
}

.title-text  {
  margin-top: var(--space-24);
}

.btn  {
  display: inline-flex;
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-13) var(--space-24);
  font-family: var(--font-ui);
  font-weight: bold;
  cursor: pointer;
  border-radius: var(--r-full);
  transition: all .2s;
}

.btn-outline  {
  color: var(--c-text-deep);
  background: transparent;
  border: 2px solid var(--c-main-main);
}

.btn-outline:hover  { color: var(--c-white); background: var(--c-main-main);}

@media (min-width: 768px) and (max-width: 1023px)  {
  .content-section  { padding: var(--space-55) var(--space-32);}
}

@media (max-width: 767px)  {
  .content-section  { padding: var(--space-40) var(--space-16);}
  .section-title  { font-size: var(--fs-24);}
}

/* ============================================================
2カラム（.inner-two-col / .inner-text）
— ACF「image_text」や下層ページのテキスト＋画像
============================================================ */

.inner-two-col  {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-40);
  align-items: start;
}

.inner-text p  {
  margin-bottom: var(--space-21);
  color: var(--c-text-mid);
}

.inner-text p:last-child  { margin-bottom: 0;}

@media (min-width: 768px) and (max-width: 1023px)  {
  .inner-two-col  { grid-template-columns: 1fr; gap: var(--space-24);}
}

@media (max-width: 767px)  {
  /* ACF インライン grid-template-columns（60fr 40fr 等）を上書きして1列に */
  .inner-two-col  {
    grid-template-columns: 1fr !important;
    gap: var(--space-21);
  }

  /* image_text（ACF locate 右でも）スマホは画像 → テキストの順 */
  .inner-two-col .inner-two-col-img,
  .inner-two-col > img  { order: 1;}
  .inner-two-col .inner-text  { order: 2;}
}

/* ============================================================
FOOTER
============================================================ */

footer  {
  padding: var(--space-48) var(--space-40) var(--space-24);
  color: var(--c-white);
  background: var(--c-main-main);
}

.footer-grid  {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-40);
  margin-bottom: var(--space-32);
}

.footer-logo-block  {
  display: inline-flex;
  gap: var(--space-8);
  align-items: center;
  margin-bottom: var(--space-16);
}

.footer-logo-block img  {
  flex-shrink: 0;
  width: auto;
  height: 50px;
  filter: brightness(0) invert(1);
}

.footer-logo-title  {
  font-size: var(--fs-20);
  font-weight: bold;
  color: var(--c-white);
  margin: 0;
}

dl.footer-info  {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-8) var(--space-13);
  align-items: baseline;
  color: var(--c-white);
}

dl.footer-info dt  {
  white-space: nowrap;
}

dl.footer-info dd  {
  margin: 0;
  line-height: 1.4;
}

.footer-nav  {
  display: block;
}

.footer-nav--sp  { display: none; }

.footer-nav-col  {
  columns: 2;
  column-gap: var(--space-24);
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav-col li  {
  break-inside: avoid;
  margin-bottom: 4px;
  line-height: 1.4;
}

.footer-nav a  {
  display: inline-flex;
  gap: var(--space-8);
  align-items: center;
  padding: 0;
  color: var(--c-white);
  transition: color .15s;
}

.footer-nav a::before  {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 0.4375rem;
  height: 0.4375rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.footer-nav a:hover  { opacity: .8;}  /* 変化を明示するため opacity で対応 */
.footer-nav a svg  { flex-shrink: 0; opacity: .95;}

/* wp_nav_menu() 階層メニュー対応 */
.footer-nav-col .menu-item-has-children  { break-inside: avoid; }

.footer-nav-col .sub-menu  {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav-col .sub-menu li  {
  margin-bottom: var(--space-8);
  line-height: 1.4;
}

.footer-nav-col .sub-menu a  {
  padding-left: var(--space-13);
}

.footer-nav-col .sub-menu a::before  {
  width: 0.375rem;
  height: 0.375rem;
}

.footer-copy  {
  padding-top: var(--space-21);
  font-family: var(--font-en);
  font-size: var(--fs-10);
  color: var(--c-white);
  text-align: center;
  border-top: 1px solid var(--c-white);
}

@media (min-width: 768px) and (max-width: 1023px)  {
  .footer-grid  { grid-template-columns: 1fr;}
}

@media (max-width: 767px)  {
  .footer-grid  { grid-template-columns: 1fr;}
  .footer-nav-col  { columns: 1; }
  .footer-nav--pc  { display: none; }
  .footer-nav--sp  { display: block; }
  .footer-copy  { font-size: var(--fs-10);}
  footer  { padding: var(--space-32) var(--space-16) var(--space-21);}
}

/* ============================================================
FLOATING CTA
============================================================ */

/* PC 用フローティング: 右下に「お問い合わせ」1件固定 */
.float-cta--pc  {
  position: fixed;
  right: var(--space-24);
  bottom: var(--space-24);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--space-13);
  align-items: flex-end;
}

.float-cta--pc a  {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  justify-content: center;
  padding: var(--space-13) var(--space-21);
  font-family: var(--font-ui);
  font-weight: bold;
  color: var(--c-white);
  background: var(--c-coral);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-lg);
  transition: all .2s;
}

.float-cta--pc a:hover  {
  background: var(--c-coral-dark);
  box-shadow: 0 12px 40px rgba(240,96,80,.3);
  transform: translateY(-3px);
}

/* スマホ用フローティング: 画面下部に navメニューから取得した複数CTAを横並び */
.float-cta--sp  { display: none;}

@media (max-width: 767px)  {
  .float-cta--pc  { display: none;}
  .float-cta--sp  {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border-bottom: 1px solid rgba(255,255,255,.6);
  }
  .float-cta--sp a  {
    display: flex;
    flex: 1;
    gap: var(--space-8);
    align-items: center;
    justify-content: center;
    padding: var(--space-16);
    font-family: var(--font-ui);
    font-weight: bold;
    line-height: 1;
    color: var(--c-white);
    background: var(--c-text-deep);
    transition: background .2s;
  }
  .float-cta--sp a + a  { border-left: 1px solid rgba(255,255,255,.6);}
  footer  { padding-bottom: calc(50px + var(--space-21));}
}

/* ============================================================
MOBILE HEADER & NAV
— 固定ヘッダー・ハンバーガー・全画面ドロワー・モバイル用 TEL
============================================================ */

.mobile-header  {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 0 var(--space-21);
  background: var(--c-white);
  border-bottom: 1px solid var(--c-main-pale);
  box-shadow: 0 2px 12px rgba(13,92,122,.08);
}

.mobile-header-logo  {
  display: flex;
  gap: var(--space-8);
  align-items: center;
}

.mobile-header-logo img  { width: auto; height: 32px;}

.mobile-header-logo-corp  {
  margin-bottom: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-14);
  font-weight: bold;
  color: var(--c-text-light);
}

.mobile-header-logo-title  {
  font-family: var(--font-ui);
  font-size: var(--fs-24);
  font-weight: bold;
  color: var(--c-text-deep);
}

.mobile-menu-btn  {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  color: var(--c-text-mid);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  transition: background .15s;
}

.mobile-menu-btn svg  { width: 30px; height: 30px;}
.mobile-menu-btn:hover  { background: var(--c-main-ultra);}
.mobile-menu-btn .icon-close  { display: none;}
.mobile-menu-btn.is-open .icon-menu  { display: none;}
.mobile-menu-btn.is-open .icon-close  { display: block;}

.mobile-nav  {
  position: fixed;
  top: var(--space-56);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 199;
  display: none;
  padding: var(--space-8) 0 var(--space-40);
  overflow-y: auto;
  background: var(--c-white);
}

.mobile-nav.is-open  { display: block;}

.mobile-nav-list > li > a  {
  display: flex;
  gap: var(--space-13);
  align-items: center;
  padding: var(--space-16) var(--space-24);
  font-family: var(--font-ui);
  font-size: var(--fs-18);
  font-weight: bold;
  color: var(--c-text-mid);
  border-bottom: 1px solid rgba(180,210,170,.22);
  transition: background .15s, color .15s;
}

.mobile-nav-list > li > a svg  { flex-shrink: 0; color: var(--c-text-main);}
.mobile-nav-list > li > a:hover  { color: var(--c-text-deep); background: var(--c-main-ultra);}

.mobile-nav-list > li > a.is-current  {
  font-weight: bold;
  color: var(--c-text-deep);
  background: var(--c-main-ultra);
}

.mobile-nav-subnav  { display: none; background: var(--c-white);}
.mobile-nav-subnav.is-open  { display: block;}

.mobile-nav-parent  {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(180,210,170,.22);
}

.mobile-nav-parent-link  {
  display: flex;
  flex: 1;
  gap: var(--space-13);
  align-items: center;
  min-width: 0;
  padding: var(--space-16) var(--space-24);
  font-family: var(--font-ui);
  font-size: var(--fs-18);
  font-weight: bold;
  line-height: 1.4;
  color: var(--c-text-mid);
  text-decoration: none;
  transition: background .15s, color .15s;
}

.mobile-nav-parent-link svg  { flex-shrink: 0; color: var(--c-text-main);}
.mobile-nav-parent-link:hover  { color: var(--c-text-deep); background: var(--c-main-ultra);}
.mobile-nav-parent-link.is-current,
.mobile-nav-parent-link.is-parent-active  {
  color: var(--c-text-deep);
  background: var(--c-main-ultra);
}

.mobile-nav-toggle  {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  padding: 0;
  font-size: var(--fs-16);
  color: var(--c-text-main);
  cursor: pointer;
  background: none;
  border: none;
  border-left: 1px solid rgba(180,210,170,.22);
  transition: background .15s, color .15s;
}

.mobile-nav-toggle:hover  { color: var(--c-text-deep); background: var(--c-main-ultra);}

.mobile-nav-toggle .fa-chevron-down  {
  transition: transform .2s;
}

.mobile-nav-toggle[aria-expanded="true"] .fa-chevron-down  {
  transform: rotate(180deg);
}

.mobile-nav-subnav li a  {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-13) var(--space-24) var(--space-13) var(--space-55);
  font-family: var(--font-ui);
  font-size: var(--fs-18);
  color: var(--c-text-light);
  border-bottom: 1px solid rgba(180,210,170,.18);
  transition: color .15s;
}

.mobile-nav-subnav li a:hover  { color: var(--c-text-deep);}
.mobile-nav-subnav li a.is-current  { font-weight: bold; color: var(--c-text-deep);}

.mobile-nav-tel  {
  padding: var(--space-16);
  margin: var(--space-21) var(--space-21) 0;
  text-align: center;
  background: var(--c-main-ultra);
  border-radius: var(--r-md);
}

.mobile-nav-tel-label  {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-8);
}

.mobile-nav-tel-num  {
  margin-bottom: 0;
  font-family: var(--font-en);
  font-size: var(--fs-20);
  font-weight: bold;
  color: var(--c-text-dark);
}

.mobile-nav-tel-hours  { font-size: var(--fs-16); color: var(--c-text-muted);}

@media (min-width: 768px) and (max-width: 1023px)  {
  .mobile-header  { display: flex;}
}

@media (max-width: 767px)  {
  .mobile-header  { display: flex;}
}

/* ============================================================
INDEX（トップページ固有）
— #hero / #about / #service / #news / #access / #contact 等
============================================================ */

@keyframes fadeUpLeft  {
  from  { opacity: 0; transform: translateY(24px);}
  to    { opacity: 1; transform: translateY(0);}
}

@keyframes scrollPulse  {
  0%    { opacity: 0; transform: translateY(-4px);}
  50%   { opacity: 1;}
  100%  { opacity: 0; transform: translateY(6px);}
}

.fade-5  { animation: fadeUp .7s ease both .78s;}

/* ============================================================
HERO
============================================================ */

#hero  {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 560px;
  padding-bottom: var(--space-64);
  overflow: hidden;
  background: var(--c-main-faint);
}

/* Dot pattern */

#hero::before  {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: '';
  background-image: radial-gradient(circle, rgba(13,92,122,.18) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  opacity: 1;
}

/* Decorative organic blobs */

.hero-blob  {
  position: absolute;
  pointer-events: none;
  border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%;
}

.hero-blob-1  {
  top: calc(-1 * var(--space-89));
  right: calc(-1 * var(--space-89));
  width: 400px;
  height: 360px;
  background: var(--c-main-light);
  opacity: .35;
  transform: rotate(25deg);
}

.hero-blob-2  {
  bottom: calc(-1 * var(--space-89));
  left: calc(-1 * var(--space-56));
  width: 280px;
  height: 240px;
  background: var(--c-blob-peach);
  opacity: .35;
  transform: rotate(-18deg);
}

.hero-blob-3  {
  top: var(--space-64);
  left: 16%;
  width: 180px;
  height: 200px;
  background: var(--c-blob-yellow);
  opacity: .2;
  transform: rotate(12deg);
}

/* Main visual block */

.hero-visual  {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  align-items: center;
  max-width: 100%;
  padding: var(--space-40) 0 0;
}

.hero-img-wrap  {
  width: 100%;
}

.hero-img-wrap img  {
  width: 80%;
  height: auto;
  margin: 0 auto;
  transform-origin: center center;
  animation: hero-img-pulse 8s ease-in-out infinite !important;
}

@keyframes hero-img-pulse  {
  0%, 100%  { transform: scale(1);}
  50%       { transform: scale(1.02);}
}

@media (prefers-reduced-motion: reduce)  {
  .hero-img-wrap img  { animation: none;}
}

/* Catchcopy — below image */

.hero-copy  {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  text-align: center;
}

.hero-copy h1  {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(var(--fs-28), 5vw, var(--fs-58));
  font-weight: bold;
  line-height: 1.35;
  color: var(--c-text-deep);
}

/* PC: h1 は文字幅・ライン 120% をテキスト中央 / SM は下記メディアクエリ */
.hero-catch-main  {
  width: fit-content;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  align-self: center;
}

.hero-catch-main::after  {
  content: '';
  display: block;
  width: 120%;
  height: 4px;
  margin-top: var(--space-16);
  margin-bottom: var(--space-8);
  margin-right: 0;
  margin-left: 50%;
  transform: translateX(-50%);
  background-image:
    linear-gradient(to right, transparent, rgba(255,255,255,0.85), transparent),
    linear-gradient(to right, #c9a227, #FFFFFF, #7b2d8b, #00e1ff);
  background-size: 80px 100%, 100% 100%;
  background-repeat: no-repeat, repeat;
  animation: deco-line-shimmer 4.8s infinite linear;
  border-radius: 100px;
}
@keyframes deco-line-shimmer  {
  0%   { background-position: -80px 0, 0 0; }
  100% { background-position: 680px 0, 0 0; }
}

/* Hero new elements */

.hero-label  {
  display: inline-block;
  padding: 5px 14px;
  font-size: var(--fs-20);
  font-weight: bold;
  color: var(--c-text-deep);
}

.hero-catch-brand  {
  display: block;
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
  font-family: var(--font-body);
  font-weight: bold;
  color: var(--c-text-main);
  letter-spacing: .08em;
  text-align: center;
}

.hero-catch-sm  {
  font-size: var(--fs-44);
  vertical-align: baseline;
}

.hero-catch-main .highlight  {
  background: linear-gradient(90deg, var(--c-green-deep), var(--c-green-main));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero-desc  {
  font-size: var(--fs-18);
  line-height: 1.9;
  color: var(--c-text-light);
}

/* Scroll indicator */

.scroll-cue  {
  position: absolute;
  bottom: var(--space-24);
  left: 10px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  align-items: center;
  font-family: var(--font-en);
  font-size: var(--fs-16);
  color: var(--c-text-muted);
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s;
  animation: fadeUpLeft .7s ease both .78s;
}

.scroll-cue > span  {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: .14em;
}

.scroll-cue:hover  { color: var(--c-text-main);}
.scroll-cue-arrow  { color: var(--c-text-muted); animation: scrollPulse 2.2s ease infinite;}

@media (min-width: 768px) and (max-width: 1023px)  {
  #hero  { padding-top: 80px;}
  .hero-visual  { width: 100%;}
  .hero-img-wrap  { width: 90%;}
  .hero-copy h1  { font-size: var(--fs-44);}
  .hero-catch-brand  { font-size: var(--fs-36);}
  .hero-catch-sm  { font-size: var(--fs-28);}
}

@media (max-width: 767px)  {
  #hero  { min-height: auto; max-height: none; padding-top: 80px; padding-bottom: var(--space-16);}
  .hero-visual  { width: 100%; padding-top: 0;}
  .hero-img-wrap  { width: 100%;}
  .hero-img-wrap img  { width: 90%;}
  .hero-copy  { width: 97%; gap: 10px;}
  .hero-label  { padding: 5px 14px 0; font-size: var(--fs-16);}
  .hero-copy h1  { font-size: var(--fs-28);}
  .hero-catch-main::after  {
    width: 90vw;
    max-width: 90vw;
    margin-left: calc(50% - 45vw);
    margin-right: 0;
    transform: none;
  }
  .hero-catch-brand  { font-size: var(--fs-28);}
  .hero-catch-sm  { font-size: var(--fs-20);}
  .hero-desc  { font-size: var(--fs-14);}
  .scroll-cue  { display: none;}
  .hero-blob-1  { width: 220px; height: 198px; top: -49px; right: -49px;}
  .hero-blob-2  { width: 154px; height: 132px; bottom: -49px; left: -31px;}
  .hero-blob-3  { width: 99px; height: 110px; top: 35px;}
}

#about  { background: var(--c-white);}

@media (max-width: 767px)  {
  #about img  { height: auto;}
  #about.content-section  { padding-bottom: var(--space-24);}
  #service.content-section  { padding-top: var(--space-24);}
}

/* ============================================================
INDEX — #service（トップのサービスカード・アイコン）
  ACF の .card-grid 経由でカードが描画され、各カード内の
  .card-body-icon が表示される。
============================================================ */

.card-body-icon  {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-13);
  font-size: var(--fs-24);
  color: var(--c-text-main);
  background: var(--c-main-ultra);
  border: 1.5px solid var(--c-main-pale);
  border-radius: 50%;
  margin-top: calc(2rem - var(--space-16));
}

@media (max-width: 767px)  {
  /* #service — モバイルではアイコン・説明文を非表示 */
  #service .card-body-icon  { display: none;}
  #service .card-grid-item-desc  { display: none;}
}

/* ============================================================
INDEX — #news（トップのお知らせ一覧）
============================================================ */

#news  { background: var(--c-white);}

/* ============================================================
INDEX — #access（トップのアクセス欄）
  本文は ACF / ショートコードで描画される。.map-embed iframe は
  function_shortcode.php の地図埋め込みで使用。
============================================================ */

.map-embed iframe  {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============================================================
INDEX — #contact（トップのお問い合わせ誘導ブロック）
============================================================ */

#contact  {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: none;
  border-bottom: none;
}

#contact::before  { display: none;}
#contact::after  { display: none;}
#contact .section-label  { color: var(--c-text-deep);}

#contact .section-title  {
  margin-top: var(--space-8);
  font-size: var(--fs-20);
  color: var(--c-text-main);
}

/* ============================================================
COMPANY（会社案内）
— 代表挨拶・会社概要テーブル等
============================================================ */

/* ============================================================
代表挨拶（.rep-sig）
============================================================ */

.rep-sig  {
  display: flex;
  gap: var(--space-13);
  align-items: baseline;
  padding-top: var(--space-21);
  margin-top: var(--space-24);
  font-family: var(--font-ui);
  font-weight: bold;
  color: var(--c-text-deep);
  border-top: 1px dashed rgba(160,180,156,.4);
}

.rep-sig span  { color: var(--c-text-muted);}

/* ============================================================
会社概要テーブル
============================================================ */

.info-table  {
  width: 100%;
  margin-top: var(--space-24);
  border-collapse: collapse;
  border-top: 1px solid rgba(180,210,170,.3);
  border-bottom: 1px solid rgba(180,210,170,.3);
}

.info-table th,.info-table td  {
  padding: var(--space-16) var(--space-21);
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid rgba(180,210,170,.3);
}

.info-table th  {
  width: 190px;
  font-family: var(--font-ui);
  font-weight: bold;
  color: var(--c-text-deep);
  white-space: nowrap;
  background: var(--c-main-ultra);
}

.info-table td  {
  color: var(--c-text-mid);
  word-break: break-word;
  overflow-wrap: break-word;
}

.info-table tr:last-child th,.info-table tr:last-child td  { border-bottom: none;}

@media (max-width: 767px)  {
  .info-table  { display: block;}
  .info-table tbody,
  .info-table tr  { display: block;}
  .info-table tr  { padding: 0; border-bottom: none;}
  .info-table th,
  .info-table td  { display: block; width: 100%; border-bottom: none;}
  .info-table th  { width: 100%; padding: var(--space-8) var(--space-16) var(--space-8); font-size: var(--fs-16); font-weight: bold; white-space: normal;}
  .info-table td  { padding: 0 var(--space-16) var(--space-13); border-bottom: 1px solid rgba(180,210,170,.28);}
  .info-table tr:last-child td  { border-bottom: none;}
}

/* ============================================================
NEWS（お知らせアーカイブ一覧）
— .news-list / カテゴリフィルター / .news-item 行
============================================================ */

.news-list  { display: flex; flex-direction: column;}
.news-empty  { padding: var(--space-13) 0; color: #a0aec0;}

.news-cat-filter  {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-24);
}

.news-cat-btn  {
  min-width: 5rem;
  padding: var(--space-8) var(--space-13);
  font-size: .8rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 20px;
}

.news-item  {
  display: flex;
  gap: var(--space-16);
  align-items: center;
  padding: var(--space-24) 0;
  border-bottom: 1px dotted #CCC;
  transition: background .15s;
}

.news-item:first-child  { border-top: 1px solid rgba(180,210,170,.32);}

/* 1件全体のクリック領域。上段（meta）+ 下段（title）を縦積み */
.news-item-link  {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* 上段: 日付 + カテゴリ + NEW を横並び */
.news-item-meta  {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-13);
  align-items: center;
  line-height: 1;
}

.news-item-date  {
  flex-shrink: 0;
  font-family: var(--font-en);
  color: var(--c-text-mid);
}

.news-item-date-icon  {
  margin-right: var(--space-4);
  color: var(--c-text-muted);
}

.news-item-cat  {
  flex-shrink: 0;
  min-width: 40px;
  padding: var(--space-4) var(--space-13);
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--c-text-deep);
  text-align: center;
  white-space: nowrap;
  background: transparent;
  border: 1.5px solid var(--c-main-pale);
  border-radius: var(--r-full);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.news-item-new  {
  flex-shrink: 0;
  font-family: var(--font-en);
  font-size: var(--fs-14);
  letter-spacing: .04em;
  color: var(--c-coral);
  white-space: nowrap;
}

/* 下段: タイトル */
.news-item-title  {
  font-family: var(--font-ui);
  color: var(--c-text-mid);
  line-height: 1.3;
  transition: color .15s;
}

.news-item-link:hover .news-item-title  { color: var(--c-text-deep);}

.news-item-arrow  {
  flex-shrink: 0;
  color: var(--c-text-muted);
  transition: transform .15s, color .15s;
}

.news-item:hover .news-item-arrow  { color: var(--c-text-main); transform: translateX(3px);}

@media (max-width: 767px)  {
  .news-item  { gap: var(--space-8);}
  .news-item-meta  { gap: var(--space-8);}
  .news-item-arrow  { display: none;}
}

/* [SC_NEWS_LIST] 末尾「お知らせ一覧へ」（.back-btn を流用・中央寄せ） */
.news-list-more  { text-align: center;}

/* ============================================================
PAGINATION（一覧のページ送り）
  paginate_links(['type' => 'list']) の出力構造に対応：
    <nav class="pagination">
      <ul class="page-numbers">
        <li><a class="prev page-numbers">‹</a></li>
        <li><span class="page-numbers current">1</span></li>
        <li><a class="page-numbers">2</a></li>
        <li><span class="page-numbers dots">…</span></li>
        <li><a class="next page-numbers">›</a></li>
      </ul>
    </nav>
============================================================ */

.pagination  {
  display: flex;
  justify-content: center;
  margin-top: var(--space-40);
}

.pagination ul.page-numbers  {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pagination ul.page-numbers > li  {
  margin: 0;
  list-style: none;
}

/* 各セル（数字・前後・…）の共通ボタン形状 */
.pagination a.page-numbers,
.pagination span.page-numbers  {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 var(--space-13);
  font-family: var(--font-en);
  font-size: var(--fs-14);
  font-weight: bold;
  color: var(--c-text-mid);
  text-decoration: none;
  background: #fff;
  border: 1.5px solid var(--c-main-pale);
  border-radius: var(--r-full);
  transition: background .15s, color .15s, border-color .15s;
}

.pagination a.page-numbers:hover  {
  color: var(--c-text-deep);
  background: var(--c-main-ultra);
  border-color: var(--c-main-light);
}

/* 現在ページ */
.pagination span.page-numbers.current  {
  color: #fff;
  cursor: default;
  background: var(--c-main-main);
  border-color: var(--c-main-main);
}

/* 省略記号 (…) はボタン枠なし */
.pagination span.page-numbers.dots  {
  background: transparent;
  border-color: transparent;
}

/* 前後ボタンの矢印は大きめに */
.pagination .prev.page-numbers,
.pagination .next.page-numbers  {
  font-size: var(--fs-20);
  line-height: 1;
}

@media (max-width: 767px)  {
  .pagination a.page-numbers,
  .pagination span.page-numbers  {
    min-width: 2.2rem;
    height: 2.2rem;
    padding: 0 var(--space-8);
  }
}

/* ============================================================
NEWS-SINGLE (お知らせ詳細)
============================================================ */

/* ============================================================
PAGE HERO overrides (news-single: no flex, different h1 size)
============================================================ */

/* ============================================================
ARTICLE META (date + category in page hero)
============================================================ */

.article-meta  {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-13);
  align-items: center;
  margin-bottom: var(--space-16);
}

.article-date  {
  margin: 0 0 var(--space-16);
  font-family: var(--font-en);
  font-size: var(--fs-18);
  color: var(--c-text-mid);
  text-align: right;
}
.article-new   {
  font-family: var(--font-en);
  font-size: var(--fs-18);
  font-weight: bold;
  color: var(--c-coral);
  white-space: nowrap;
}
.article-cat  {
  padding: 0 var(--space-13);
  font-family: var(--font-ui);
  font-weight: bold;
  color: var(--c-text-deep);
  background: var(--c-main-pale);
  border-radius: var(--r-full);
}

/* ============================================================
ARTICLE BODY
  #article.content-section は最大 960px に制限して左寄せ。
  上下左右のパディングは .content-section 既定（var(--space-64) var(--space-40)）
  をそのまま使用。本文（.article-body）は #article の内寸（最大 880px）まで広がる。
============================================================ */

#article.content-section  {
  max-width: 960px;
  margin-left: 0;
  margin-right: auto;
}

.article-body p  {
  margin-bottom: var(--space-21);
  font-size: var(--fs-18);
  line-height: 2.1;
  color: var(--c-text-mid);
}

.article-body p:last-child  { margin-bottom: 0;}

.article-body h3,
.policy-list > li h3  {
  padding-left: var(--space-16);
  font-family: var(--font-ui);
  font-weight: bold;
  font-size: var(--fs-20);
  color: var(--c-text-dark);
  border-left: 4px solid var(--c-main-main);
}

.article-body h3  { margin: var(--space-34) 0 var(--space-13);}
.policy-list > li h3   { margin-bottom: var(--space-13);}

.article-body-empty  { color: #a0aec0;}
.article-images  { margin-bottom: var(--space-24);}

.article-images img  {
  display: block;
  max-width: 100%;
  margin-bottom: var(--space-13);
  border-radius: var(--r-sm);
}

.article-pdfs  {
  padding: 0;
  margin: 0 0 var(--space-24);
  list-style: none;
}

.article-pdfs li  { margin-bottom: var(--space-8);}

.article-pdf-link  {
  display: inline-flex;
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-8) var(--space-13);
  font-size: var(--fs-14);
  color: #2b6cb0;
  text-decoration: none;
  background: #ebf8ff;
  border-radius: 4px;
}

.back-btn  {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  width: max-content;
  max-width: 100%;
  padding: var(--space-8) var(--space-21);
  margin: var(--space-34) auto 0;
  font-family: var(--font-ui);
  color: var(--c-text-main);
  border: 1.5px solid var(--c-main-pale);
  border-radius: var(--r-full);
  transition: background .18s, border-color .18s, color .18s;
}

.back-btn:hover  {
  color: var(--c-text-deep);
  background: var(--c-main-ultra);
  border-color: var(--c-main-light);
}

/* ============================================================
ARTICLE PREV/NEXT NAV
============================================================ */

.article-nav  {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  margin-top: var(--space-34);
}

.article-nav-item  {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-13) var(--space-16);
  color: inherit;
  background: var(--c-white);
  border: 1px solid var(--c-main-pale);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, border-color .18s;
}

.article-nav-item:hover  { border-color: var(--c-main-light); box-shadow: var(--shadow-md);}

.article-nav-item.is-next  { justify-content: flex-end;}

.article-nav-title  {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-ui);
  color: var(--c-text-mid);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.article-nav-item.is-next .article-nav-title  { text-align: right;}

/* デスクトップは記事タイトル表示・固定ラベルは非表示 */
.article-nav-label  { display: none;}

@media (max-width: 767px)  {
  .article-nav  { gap: var(--space-8);}
  .article-nav-item  {
    padding: var(--space-8) var(--space-13);
    font-size: var(--fs-14);
  }
  /* スマホは「前の記事 / 次の記事」固定ラベルに切替（タイトル切れ防止） */
  .article-nav-title  { display: none;}
  .article-nav-label  {
    display: inline-block;
    flex: 1;
    font-family: var(--font-ui);
    color: var(--c-text-mid);
  }
  .article-nav-item.is-next .article-nav-label  { text-align: right;}
}

/* ============================================================
CONTACT (お問い合わせ)
============================================================ */

/* ============================================================
CONTACT INFO BOX
============================================================ */

/* ============================================================
CONTACT FORM（送信オーバーレイのみ — 入力欄スタイルは CF7 等に委譲）
============================================================ */

#loading-overlay  {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,.8);
}

/* ============================================================
PRIVACY (個人情報保護方針)
============================================================ */

/* ============================================================
PAGE HERO overrides (privacy)
============================================================ */

/* ============================================================
POLICY LIST
============================================================ */

.policy-list  {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.policy-list > li p  { line-height: 2.1; color: var(--c-text-mid);}
.policy-list > li p + p,
.policy-list > li p + ol  { margin-top: var(--space-16);}
.policy-list > li ol  {
  padding-left: var(--space-24);
  line-height: 2.1;
  color: var(--c-text-mid);
  list-style: decimal;
}
.policy-list > li ol li + li  { margin-top: var(--space-8);}

/* ============================================================
SERVICE（/service 下層・関連テンプレ）
— #flow 等
============================================================ */

/* ============================================================
INVERT SECTION（.invert-section — 交互背景・複数ページで使用）
============================================================ */

.invert-section {
  background: var(--c-main-faint);
}

/* ============================================================
SERVICE — サービス CTA（.service-card-en / .service-card-link）
============================================================ */

.service-card-en  {
  margin-bottom: var(--space-8);
  font-family: var(--font-en);
  font-size: var(--fs-14);
  font-weight: bold;
  color: var(--c-text-main);
  text-transform: uppercase;
}

.service-card-link  {
  display: inline-flex;
  gap: var(--space-8);
  align-items: center;
  align-self: flex-start;
  padding: var(--space-8) var(--space-21);
  font-family: var(--font-ui);
  font-weight: bold;
  color: var(--c-text-deep);
  border: 2px solid var(--c-main-main);
  border-radius: var(--r-full);
  transition: all .2s;
}

.service-card-link:hover  { color: var(--c-white); background: var(--c-main-main);}
.service-card-link svg  { flex-shrink: 0;}

.type-1-btn::after  {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 0.4375rem;
  height: 0.4375rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

/* ============================================================
SERVICE ページ — #flow 縦タイムライン（.flow-steps / .flow-step）
============================================================ */

.flow-steps  {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: var(--space-8);
}

.flow-steps::before  {
  position: absolute;
  top: var(--space-24);
  bottom: var(--space-24);
  left: var(--space-24);
  z-index: 0;
  width: 2px;
  content: '';
  background: var(--c-main-light);
}

.flow-step  {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--space-24);
  align-items: flex-start;
  padding-bottom: var(--space-32);
}

.flow-step:last-child  { padding-bottom: 0;}

.flow-step-num  {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-family: var(--font-en);
  font-weight: bold;
  color: var(--c-white);
  background: var(--c-main-main);
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(42,155,191,.3);
}

.flow-step-body  { flex: 1; padding-top: var(--space-13);}

.flow-step-title  {
  margin-bottom: var(--space-8);
  font-family: var(--font-ui);
  font-weight: bold;
  line-height: 1.5;
  color: var(--c-text-deep);
}

/* ============================================================
画像（.inner-two-col > img / .inner-all-img — 角丸）
============================================================ */

.inner-two-col > img,
.inner-all-img  {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
}

@media (max-width: 1023px)  {
  #about-service .inner-text  { order: 2;}
  #about-service .ph  { order: 1;}
}

@media (max-width: 767px)  {
  .flow-step  { gap: var(--space-16);}
  .flow-step-num  { width: 44px; height: 44px;}
  .flow-steps::before  { left: var(--space-21);}
}

/* ============================================================
RENTAL / SALE / ITEM — カード・グリッド共通（.card-grid-item 系）
============================================================ */

.card-grid-item  {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid var(--c-main-pale);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, transform .2s, background .2s;
}

.card-grid-item:hover  { box-shadow: var(--shadow-md); transform: translateY(-2px); background: var(--c-main-ultra);}

.card-grid-item-link  {
  display: flex;
  flex: 1;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.card-grid-item-img  {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--c-beige);
}

/* ACF: card グリッド — 高さ統一・上下中央トリミング */
.card-grid--autoheight  {
  align-items: stretch;
}

.card-grid--autoheight .card-grid-item-img  {
  aspect-ratio: 1.618 / 1;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* ACF flexible「card」: カード内コンテンツはすべて中央 */
.card-grid--autoheight .card-grid-item-body  {
  text-align: center;
  align-items: center;
}

.card-grid--autoheight .card-grid-item-desc  {
  flex: 1;
  align-self: stretch;
  text-align: left;
}

.card-grid--autoheight .service-card-en  {
  text-align: center;
}

.card-grid--autoheight .service-card-link  {
  align-self: center;
}

.card-grid-item-body  {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-16) var(--space-16) var(--space-40);
}

/* DOMは「本文(h3先頭)→画像」順（SEO/AT対策）。視覚は従来どおり
   （画像 上 → en → ラベル → h3 → 説明 → ボタン）に order で復元 */
.card-grid-item-body  { order: 1;}
.card-grid-item-body > .card-grid-item-value  { order: 1;}
.card-grid-item-body > .card-grid-item-desc   { order: 2;}
.card-grid-item-body > .service-card-link     { order: 3;}

.card-grid-item-body h3  {
  margin-top: var(--space-16);
  margin-bottom: var(--space-16);
  font-family: var(--font-ui);
  font-weight: bold;
  line-height: 1.4;
  color: var(--c-text-deep);
  text-align: center;
}

.card-grid-item-body > p  { margin-bottom: var(--space-8);}

.card-grid-item-label  {
  margin-top: var(--space-32);
  font-family: var(--font-ui);
  font-size: var(--fs-22);
  font-weight: bold;
  color: var(--c-text-muted);
  text-align: center;
}

.card-grid-item-value  {
  margin-bottom: var(--space-16);
  font-family: var(--font-ui);
  font-size: var(--fs-24);
  font-weight: bold;
  color: var(--c-text-deep);
}

.card-grid-item-desc  {
  text-align: left;
}

/* ============================================================
取扱カテゴリ見出し（.item-category-title）
============================================================ */

.item-category-title  {
  padding: var(--space-8) var(--space-16);
  margin-bottom: var(--space-21);
  font-family: var(--font-ui);
  font-size: var(--fs-20);
  font-weight: bold;
  color: var(--c-text-deep);
  background: var(--c-main-ultra);
  border-left: 4px solid var(--c-main-main);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* ============================================================
認定バッジ
============================================================ */

.sale-certified  {
  font-weight: bold;
  color: var(--c-text-deep);
}

/* ============================================================
介護保険適用外商品ノート
============================================================ */

.sale-noinsurance-note  {
  padding: var(--space-16) var(--space-21);
  margin-top: var(--space-24);
  background: var(--c-main-ultra);
  border: 1px solid var(--c-main-pale);
  border-left: 4px solid var(--c-main-main);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.sale-noinsurance-title  {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  margin-bottom: var(--space-8);
  font-family: var(--font-ui);
  font-weight: bold;
  color: var(--c-text-deep);
}

.sale-noinsurance-note p  { color: var(--c-text-mid);}

/* ============================================================
SALE — カードグリッド（.card-grid）
============================================================ */

.card-grid  {
  display: grid;
  margin-top: var(--space-40);
  grid-template-columns: repeat(var(--card-grid-cols, 3), 1fr);
  gap: var(--space-21);
}

@media (min-width: 768px) and (max-width: 1023px)  {
  .card-grid  { grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 767px)  {
  .card-grid  { grid-template-columns: 1fr; gap: var(--space-13);}

  /* card-grid--autoheight: 横スライド（次カード約1/3見え・ドラッグスクロール） */
  .card-grid.card-grid--autoheight  {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--space-13);
    margin-right: calc(-1 * var(--space-16));
    margin-left: calc(-1 * var(--space-16));
    padding-right: var(--space-16);
    padding-left: var(--space-16);
    padding-bottom: var(--space-8);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-16);
    scrollbar-width: none;
    grid-template-columns: unset !important;
  }

  .card-grid.card-grid--autoheight::-webkit-scrollbar  { display: none;}

  .card-grid.card-grid--autoheight::after  {
    flex: 0 0 var(--space-16);
    content: '';
  }

  .card-grid.card-grid--autoheight > .card-grid-item  {
    flex: 0 0 85%;
    width: 85%;
    min-width: 85%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .card-grid.card-grid--autoheight > .card-grid-item:hover  { transform: none;}

  /* カード見出し(h3)：スマホは縮小（PC/タブレットは base の fs-24 のまま） */
  .card-grid-item-value  { font-size: var(--fs-20);}
}

/* ============================================================
強調枠（.emphasis-box）
============================================================ */

.emphasis-box  {
  padding: var(--space-24);
  background: var(--c-main-ultra);
  border: solid 2px var(--c-text-main);
  border-radius: var(--r-md);
}

/* ============================================================
ACCESS / MAP
— #access 下層・.map-embed（埋め込み地図枠）
============================================================ */

.map-embed  {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1.5px solid var(--c-main-pale);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
事業所リスト（.office-list / .office-item）
============================================================ */

.office-list  {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-21);
  margin-top: var(--space-48);
}

.office-item  {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-13);
  padding: var(--space-21);
  background: var(--c-white);
  border: 1.5px solid var(--c-main-pale);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

/* 本社 — full-width featured card */

.office-item--main  {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 40% 1fr;
  row-gap: var(--space-13);
  column-gap: var(--space-24);
  padding: var(--space-24);
  background: var(--c-main-ultra);
  border: 2px solid var(--c-text-main);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

.office-item--main .office-item-head  {
  grid-column: 1 / -1;
  padding-bottom: var(--space-13);
  border-bottom-color: var(--c-main-light);
}

.office-item--main .info-dl  {
  display: flex;
  flex-direction: column;
  grid-row: 2;
  grid-column: 1;
  gap: 0;
}

.office-item--main .map-embed  { grid-row: 2; grid-column: 2; height: 100%; min-height: 200px;}

@media (min-width: 768px) and (max-width: 1023px)  {
  .office-item--main  {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    row-gap: var(--space-16);
  }
  .office-item--main .office-item-head  { grid-column: 1;}
  .office-item--main .info-dl  { grid-row: auto; grid-column: 1;}
  .office-item--main .map-embed  { grid-row: auto; grid-column: 1; height: 280px; min-height: unset;}
}

.office-item-head  {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  padding-bottom: var(--space-13);
  font-family: var(--font-ui);
  font-weight: bold;
  line-height: 1;
  color: var(--c-text-deep);
  border-bottom: 1.5px solid var(--c-main-pale);
}

.office-item-head i  {
  flex-shrink: 0;
  position: relative;
  top: 0;
}

.info-dl  { line-height: 1.6;}

.info-dl dt  {
  margin-top: var(--space-8);
  font-family: var(--font-ui);
  font-weight: bold;
  color: var(--c-text-deep);
}

.info-dl dt:first-child  { margin-top: 0;}

.info-dl dd  {
  padding-left: 0;
  margin-bottom: .2rem;
}

.office-item > p:has(.type-2-btn)  { margin-top: auto; }
.type-2-btn br  { display: none; }

.type-2-btn  {
  display: inline-flex;
  gap: var(--space-8);
  align-items: center;
  align-self: center;
  padding: var(--space-8) var(--space-16);
  margin-top: auto;
  font-family: var(--font-ui);
  font-weight: bold;
  color: var(--c-main-main);
  white-space: nowrap;
  border: solid 1px var(--c-main-main);
  border-radius: var(--r-sm);
  transition: background .15s, transform .15s;
}

.type-2-btn:hover  {
  background: var(--c-main-deep);
  transform: translateY(-1px);
  color: var(--c-white);
}

.type-2-btn::after  {
  content: '\f08e';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-style: normal;
}

@media (max-width: 767px)  {
  /* 拠点一覧: card-grid--autoheight と同じ横スライド（次カード約1/4見え・ドラッグスクロール） */
  .office-list  {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--space-13);
    margin-right: calc(-1 * var(--space-16));
    margin-left: calc(-1 * var(--space-16));
    padding-right: var(--space-16);
    padding-left: var(--space-16);
    padding-bottom: var(--space-8);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-16);
    scrollbar-width: none;
    grid-template-columns: unset !important;
  }

  .office-list::-webkit-scrollbar  { display: none;}

  .office-list::after  {
    flex: 0 0 var(--space-16);
    content: '';
  }

  .office-list > .office-item  {
    flex: 0 0 85%;
    width: 85%;
    min-width: 85%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .office-list > .office-item:hover  { transform: none;}
  .office-item--main  {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    row-gap: var(--space-16);
    padding: var(--space-21);
  }
  .office-item--main .office-item-head  { grid-column: 1;}
  .office-item--main .info-dl  { grid-row: auto; grid-column: 1;}
  .office-item--main .map-embed  { grid-row: auto; grid-column: 1;}
  .map-embed  { height: 240px;}

  /* info-dl: スマホは dt（項目名）と dd（値）を1行に */
  .info-dl,
  .office-item--main .info-dl  {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-13);
    row-gap: var(--space-8);
    align-items: baseline;
  }
  .info-dl dt  { margin-top: 0;}
}

/* ============================================================
   DISPLAY UTIL（レスポンシブ用改行切替 .sp-br / .pc-br）
   ============================================================ */
.sp-br  { display: none; }

@media (max-width: 767px)  {
  .pc-br  { display: none; }
  .sp-br  { display: inline; }
}

/* ============================================================
   TEXT UTILITY
   ============================================================ */
.u-text-left   { text-align: left   !important; }
.u-text-center { text-align: center !important; }
.u-text-right  { text-align: right  !important; }

/* ============================================================
   GLIGHTBOX カスタム
   ============================================================ */
.gslide-title {
  text-align: center;
}

/* ============================================================
CONTACT FORM
============================================================ */

.form-group{ margin-bottom: var(--space-32);}

.form-label  {
  display: block;
  margin-bottom: var(--space-8);
  font-family: var(--font-ui);
  font-weight: bold;
  color: var(--c-text-dark);
}

.form-req,
.form-opt  {
  display: inline-block;
  padding: 0 var(--space-8);
  margin-left: var(--space-8);
  font-family: var(--font-ui);
  font-size: var(--fs-10);
  font-weight: 400;
  vertical-align: middle;
  color: var(--c-white);
  border-radius: var(--r-full);
}

.form-req  { background: var(--c-coral);}
.form-opt  { background: var(--c-text-muted);}

.form-input  {
  display: block;
  width: 100%;
  padding: var(--space-13) var(--space-16);
  font-family: var(--font-ui);
  color: var(--c-text-dark);
  -webkit-appearance: none;
  appearance: none;
  background: var(--c-white);
  border: 1.5px solid var(--c-text-deep);
  border-radius: var(--r-ss);
  transition: border-color .18s, box-shadow .18s;
}

.form-input:focus  {
  outline: none;
  border-color: var(--c-text-main);
  box-shadow: 0 0 0 3px rgba(42,155,191,.12);
}

.form-input::placeholder  { color: var(--c-text-muted);}
.form-input.is-half,
.wpcf7-text.is-half,
.wpcf7-tel.is-half  { width: 60%;}

textarea.form-input  {
  min-height: 160px;
  resize: vertical;
}

.form-note  {
  margin-top: var(--space-8);
  color: var(--c-text-muted);
}

.form-divider  {
  margin: var(--space-32) 0;
  border: none;
  border-top: 1px solid var(--c-main-pale);
}

/* CF7 が input を <span> で包むため block 化 */
.wpcf7-form-control-wrap  { display: block;}

/* CF7 固有クラスで text / tel / email / textarea にスタイルを適用
   （.wpcf7 で詳細度を上げてCF7デフォルトCSSに勝つ） */
.wpcf7 .wpcf7-text,
.wpcf7 .wpcf7-tel,
.wpcf7 .wpcf7-email,
.wpcf7 .wpcf7-textarea  {
  display: block;
  width: 100%;
  padding: var(--space-13) var(--space-16);
  font-family: var(--font-ui);
  font-size: var(--fs-16);
  color: var(--c-text-dark);
  -webkit-appearance: none;
  appearance: none;
  background: var(--c-white);
  border: 1.5px solid var(--c-text-deep);
  border-radius: var(--r-ss);
  transition: border-color .18s, box-shadow .18s;
}

.wpcf7 .wpcf7-text:focus,
.wpcf7 .wpcf7-tel:focus,
.wpcf7 .wpcf7-email:focus,
.wpcf7 .wpcf7-textarea:focus  {
  outline: none;
  border-color: var(--c-text-main);
  box-shadow: 0 0 0 3px rgba(42,155,191,.12);
}

.wpcf7 .wpcf7-text::placeholder,
.wpcf7 .wpcf7-tel::placeholder,
.wpcf7 .wpcf7-email::placeholder,
.wpcf7 .wpcf7-textarea::placeholder  { color: var(--c-text-muted);}

.wpcf7 .wpcf7-textarea  { min-height: 160px; resize: vertical;}

.radio-group  {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding: 0;
}

/* 通常 HTML 用 */
.radio-label  {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  color: var(--c-text-mid);
  cursor: pointer;
}

/* CF7 用（use_label_element が生成する構造に対応） */
.radio-group .wpcf7-radio  {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.radio-group .wpcf7-list-item  { margin: 0;}

.radio-group .wpcf7-list-item label  {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  color: var(--c-text-mid);
  cursor: pointer;
  padding: var(--space-8) var(--space-16);
  border: 2px solid var(--c-main-pale);
  border-radius: 6px;
  background: var(--c-white);
  transition: border-color .2s, background .2s;
}

.radio-group .wpcf7-list-item label:has(input[type="radio"]:checked)  {
  border-color: var(--c-text-main);
  background: var(--c-main-faint);
  color: var(--c-text-deep);
}

.radio-group .wpcf7-list-item input[type="radio"]  {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid var(--c-text-muted);
  border-radius: 50%;
  background: var(--c-white);
  transition: border-color .2s, background .2s;
}

.radio-group .wpcf7-list-item input[type="radio"]:checked  {
  border-color: var(--c-text-main);
  background: var(--c-text-main);
  box-shadow: inset 0 0 0 3px var(--c-white);
}

.radio-group label  { margin-right: 0;}

/* プライバシーポリシー同意チェック（CF7 acceptance）
   CF7 出力は .wpcf7-form-control-wrap でラップされて
   インライン中央寄せが効きづらいので、自身を flex で中央寄せ。 */
.form-agree  {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-16);
  background: var(--c-main-faint);
  border-radius: var(--r-sm);
  text-align: center;
}

/* 同意チェックのまとまり（営業メール対策＋プライバシー）。
   2つの .form-agree を1つの .form-group でくくり、flex の gap で間隔を制御する。
   CF7 の出力では .form-agree 同士が隣接兄弟にならない場合があるため、
   隣接セレクタに頼らずラッパー＋gap で確実に詰める。 */
.form-agree-group  {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-agree .wpcf7-acceptance,
.form-agree .wpcf7-list-item  { margin: 0;}

.form-agree .wpcf7-list-item label  {
  display: inline-flex;
  gap: var(--space-8);
  align-items: center;
  font-family: var(--font-ui);
  color: var(--c-text-mid);
  text-align: left;
  cursor: pointer;
}

.form-agree .wpcf7-list-item input[type="checkbox"]  {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  background-color: var(--c-white);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px auto;
  border: 2px solid var(--c-text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}

.form-agree .wpcf7-list-item input[type="checkbox"]:checked  {
  background-color: var(--c-text-main);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23ffffff' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
  border-color: var(--c-text-main);
}

.form-agree .wpcf7-list-item input[type="checkbox"]:focus-visible  {
  outline: none;
  border-color: var(--c-text-main);
  box-shadow: 0 0 0 3px rgba(42,155,191,.2);
}

.form-agree-link  {
  color: var(--c-text-main);
  font-weight: bold;
  text-decoration: underline;
}

.form-agree-link:hover  { color: var(--c-text-deep);}

.submit-wrap  {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-40);
  width: 100%;
  max-width: 100%;
  padding-inline: var(--space-40);
  box-sizing: border-box;
  text-align: center;
}

/* CF7: 送信は <p><input>（＋後から .wpcf7-spinner）。flex の子が増えると中央がズレるため p は inline-flex＋スピナーは absolute */
.submit-wrap > p,
.submit-wrap .submit-row > p,
.submit-wrap > .wpcf7-form-control-wrap  {
  position: relative;
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  margin: 0;
  margin-inline: auto;
  width: auto;
  max-width: 100%;
  text-align: center;
}

.submit-wrap > p .wpcf7-spinner,
.submit-wrap .submit-row > p .wpcf7-spinner,
.submit-wrap > .wpcf7-form-control-wrap .wpcf7-spinner  {
  position: absolute;
  left: calc(100% + var(--space-8));
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
}

.submit-wrap > input[type="submit"]  {
  margin-inline: auto;
}

/* span ラップ時: グローバル display:block を上書きし、input を中央に */
.submit-wrap .wpcf7-form-control-wrap  {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  position: relative;
  text-align: center;
}

/* CF7 / テーマの float や inline-block でも中央に収まるよう明示 */
.submit-wrap input.wpcf7-submit,
.submit-wrap input[type="submit"].btn-submit,
.wpcf7 .submit-wrap input[type="submit"].wpcf7-submit  {
  float: none;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.btn-submit  {
  --btn-submit-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23ffffff' d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E");
  display: inline-block;
  max-width: 100%;
  margin-inline: auto;
  padding: var(--space-16) calc(var(--space-64) + 0.55em);
  font-family: var(--font-ui);
  font-size: var(--fs-20);
  font-weight: bold;
  color: var(--c-white);
  cursor: pointer;
  background-color: var(--c-main-main);
  background-image: var(--btn-submit-icon);
  background-repeat: no-repeat;
  background-position: right var(--space-21) center;
  background-size: 0.5em auto;
  border: none;
  border-radius: var(--r-full);
  box-shadow: 0 4px 20px rgba(42,155,191,.3);
  transition: background-color .2s, box-shadow .2s;
}

.btn-submit:hover  {
  background-color: var(--c-main-deep);
  background-image: var(--btn-submit-icon);
  box-shadow: 0 6px 28px rgba(13,92,122,.3);
}

/* プライバシーポリシー未同意時：CF7 が送信ボタンへ disabled を付与 → 薄く表示 */
.btn-submit:disabled,
.submit-wrap input.wpcf7-submit:disabled,
.wpcf7 .submit-wrap input[type="submit"].wpcf7-submit:disabled  {
  opacity: .45;
  box-shadow: none;
  cursor: not-allowed;
}

.btn-submit:disabled:hover,
.wpcf7 .submit-wrap input[type="submit"].wpcf7-submit:disabled:hover  {
  background-color: var(--c-main-main);
  box-shadow: none;
}

.submit-note  {
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
  max-width: 100%;
  color: var(--c-text-muted);
  text-align: center;
}

/* .submit-note を .submit-wrap の外に置いた場合（CF7 デフォルト text-align に負けないよう詳細度を上げる） */
.wpcf7 .submit-wrap + .submit-note,
.wpcf7 .submit-note  {
  text-align: center;
}

/* CF7 エラー時の入力枠を赤く */
.wpcf7 .wpcf7-not-valid  {
  border-color: var(--c-coral) !important;
  background: #fff5f5;
}

.radio-group .wpcf7-radio.wpcf7-not-valid ~ .wpcf7-not-valid-tip,
.radio-group:has(.wpcf7-not-valid) .wpcf7-list-item label  {
  border-color: var(--c-coral);
}

/* CF7 バリデーションメッセージ */
.wpcf7-not-valid-tip  {
  display: block;
  margin-top: var(--space-13);
  font-size: var(--fs-16);
  color: var(--c-coral);
  text-align: center;
}

/* CF7 送信後メッセージ（.wpcf7-response-output）。
   結果ごとに付くクラスで色分け：成功＝緑／入力エラー・同意漏れ＝橙／送信失敗・スパム・中断＝赤。
   CF7 既定スタイルに勝つため .wpcf7 form を前置して詳細度を確保している。 */
.wpcf7 form .wpcf7-response-output  {
  width: fit-content;          /* メッセージ本文の幅に合わせて可変 */
  max-width: 100%;             /* 長文時はフォーム幅で折り返す */
  margin: var(--space-21) auto 0;  /* auto で中央寄せ */
  padding: var(--space-16) var(--space-21) var(--space-16) var(--space-48);
  border: none;
  border-radius: var(--r-sm);
  background-color: var(--c-beige);
  background-repeat: no-repeat;
  background-position: left var(--space-16) center;
  background-size: 20px 20px;
  font-size: var(--fs-20);
  font-weight: 700;
  color: var(--c-text-mid);
  text-align: center;
}

/* 送信成功（緑） */
.wpcf7 form.sent .wpcf7-response-output  {
  background-color: var(--c-green-deep);
  color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23ffffff'/%3E%3Cpath d='M7 12.4l3.3 3.3L17 9' fill='none' stroke='%231a7a4a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 入力エラー・同意漏れ（オレンジ） */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output  {
  background-color: var(--c-event-text);
  color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3L22.5 20.5H1.5Z' fill='%23ffffff'/%3E%3Cpath d='M12 10v4.2' stroke='%23c07000' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.6' r='1.4' fill='%23c07000'/%3E%3C/svg%3E");
}

/* 送信失敗・スパム判定・中断（赤） */
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output  {
  background-color: var(--c-coral-dark);
  color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23ffffff'/%3E%3Cpath d='M8.5 8.5l7 7M15.5 8.5l-7 7' stroke='%23d44838' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* CF7 送信成功後の画面上サマリー（メール2の控えの代替。main.js が挿入） */
.wpcf7-sent-summary  {
  margin-top: var(--space-21);
  padding: var(--space-16) var(--space-21);
  border-radius: var(--r-sm);
  background: var(--c-beige);
  border: 1px solid rgba(0, 0, 0, 0.06);
  text-align: left;
}

.wpcf7-sent-summary__title  {
  margin: 0 0 var(--space-13);
  font-size: var(--fs-16);
  font-weight: 700;
  color: var(--c-text-dark);
}

.wpcf7-sent-summary__list  {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(7em, 11em) 1fr;
  gap: var(--space-8) var(--space-16);
  font-size: var(--fs-14);
  line-height: 1.55;
}

.wpcf7-sent-summary__dt  {
  margin: 0;
  color: var(--c-text-muted);
  font-weight: 400;
}

.wpcf7-sent-summary__dd  {
  margin: 0;
  color: var(--c-text-dark);
  word-break: break-word;
}

/* Cloudflare Turnstile の説明文＋ウィジェットのまとまり（[turnstile] を囲むラッパー） */
.cloudflare-turnstile  {
  text-align: center;
}

.cloudflare-turnstile p  {
  margin: 0 0 var(--space-13);
  font-size: var(--fs-14);
  line-height: 1.7;
  color: var(--c-text-light);
  text-align: center;
}

/* Cloudflare Turnstile（CF7 カスタムタグ [turnstile] が出力する .cf-turnstile） */
.cf-turnstile  {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 65px; /* 読み込み中のレイアウト揺れ（高さ飛び）を防ぐ */
}

/* スマホ最小幅でも固定幅（約300px）のウィジェットがはみ出さないよう縮小 */
@media (max-width: 380px)  {
  .cf-turnstile  {
    transform: scale(.9);
    transform-origin: center top;
  }
}

@media (max-width: 767px)  {
  .form-input.is-half,
  .wpcf7-text.is-half,
  .wpcf7-tel.is-half  { width: 100%;}
  .btn-submit  {
    width: 100%;
    padding: var(--space-13) calc(var(--space-40) + 0.55em);
    background-position: right var(--space-16) center;
  }
  .submit-wrap input.wpcf7-submit,
  .submit-wrap input[type="submit"].btn-submit,
  .wpcf7 .submit-wrap input[type="submit"].wpcf7-submit  {
    width: 100%;
    max-width: 100%;
  }
  .submit-wrap > p .wpcf7-spinner,
  .submit-wrap .submit-row > p .wpcf7-spinner,
  .submit-wrap > .wpcf7-form-control-wrap .wpcf7-spinner  {
    left: auto;
    right: 0;
    transform: translateY(-50%);
  }
  .wpcf7-sent-summary__list  {
    grid-template-columns: 1fr;
    gap: var(--space-4) 0;
  }
  .wpcf7-sent-summary__dt  {
    margin-top: var(--space-8);
    font-weight: 700;
    color: var(--c-text-mid);
  }
  .wpcf7-sent-summary__list .wpcf7-sent-summary__dt:first-child  {
    margin-top: 0;
  }
}