@charset "UTF-8";

/* =========================================================================
   Fuku-Biz Renewal Site / common.css
   ---------------------------------------------------------------------
   全ページ共通の基盤スタイル。
   セクション目次:
     01. Web Font Import
     02. Design Tokens (CSS Custom Properties)
     03. Reset & Base
     04. Typography Utilities
     05. Layout (wrap / grid helpers)
     06. Shared Chrome (eyebrow / section-head)
     07. Buttons (.pill 系)
     08. Header (site header)
     09. News Strip (Heroの直下に出る共通帯)
     10. Final CTA (フッター直上の共通CTA)
     11. Footer (site footer)
     12. Global Image Treatment (グレースケール統一)
     13. Accessibility / Utilities
     14. Print
   ========================================================================= */


/* =========================================================================
   01. Web Font Import
   ------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=M+PLUS+Rounded+1c:wght@500;700;800&family=Oswald:wght@500;700&display=swap');


/* =========================================================================
   02. Design Tokens
   - サイト共通の色・フォント・余白・角丸・影・モーション定義
   ------------------------------------------------------------------------- */
:root {
  /* ----- Color: Rose (Primary brand) ----- */
  --rose-50:   #FBF1F3;
  --rose-100:  #F4DEE4;
  --rose-200:  #EAC2CC;
  --rose-300:  #DFAAB6;
  --rose-400:  #D896A4;  /* Brand primary */
  --rose-500:  #C97F90;  /* hover / active */
  --rose-600:  #B26779;
  --rose-700:  #8E4F60;

  /* ----- Color: Seed Green (Fuku-Biz Seed sub-brand) ----- */
  --seed-50:   #F2F8E6;
  --seed-100:  #DEEDC0;
  --seed-200:  #C2DE96;
  --seed-300:  #99C25E;
  --seed-400:  #80AC3F;
  --seed-500:  #669922;
  --seed-600:  #557F1C;
  --seed-700:  #3F5F15;

  /* ----- Color: Cream (Seed cards / accent ground) ----- */
  --cream-50:  #FFFEF5;
  --cream-100: #FFFDE6;
  --cream-200: #F8F1C8;

  /* ----- Color: NEXT (事業承継) - 暫定 ----- */
  --next-500:  #3A7FB7;
  --next-50:   #E5EFF7;

  /* ----- Color: Ink (Text / borders) ----- */
  --ink-100: #111111;
  --ink-80:  #3A3A3A;
  --ink-60:  #6E6E6E;
  --ink-40:  #ADADAD;
  --ink-20:  #E2E2E2;
  --ink-10:  #F2F2F2;
  --paper:   #FFFFFF;

  /* ----- Semantic ----- */
  --color-bg:            var(--paper);
  --color-bg-rose:       var(--rose-50);
  --color-bg-ink:        var(--ink-100);
  --color-fg:            var(--ink-100);
  --color-fg-muted:      var(--ink-60);
  --color-border:        var(--ink-20);
  --color-divider:       var(--ink-10);
  --color-link:          var(--rose-500);
  --color-primary:       var(--rose-400);
  --color-primary-hover: var(--rose-500);

  /* ----- Type ----- */
  --font-body:    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --font-display: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --font-num:     "Oswald", "M PLUS Rounded 1c", ui-sans-serif, sans-serif;

  /* Type scale — v7: +1px overall for senior-friendly readability */
  --fs-overline: 12px;
  --fs-caption:  14px;
  --fs-body-s:   15px;
  --fs-body:     17px;
  --fs-body-l:   19px;
  --fs-h5:       21px;
  --fs-h4:       25px;
  --fs-h3:       29px;
  --fs-h2:       37px;
  --fs-h1:       49px;
  --fs-display:  64px;

  --lh-tight: 1.25;
  --lh-snug:  1.5;
  --lh-base:  1.75;
  --lh-loose: 2;

  /* ----- Spacing (4px grid) ----- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ----- Container ----- */
  --container-max:    1200px;
  --container-wide:   1320px;
  --container-gutter: 24px;

  /* ----- Radius ----- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ----- Shadow ----- */
  --shadow-soft:  0 4px 14px -6px rgba(0, 0, 0, 0.10);
  --shadow-lift:  0 12px 32px -12px rgba(0, 0, 0, 0.16);
  --shadow-focus: 0 0 0 3px rgba(216, 150, 164, 0.4);

  /* ----- Motion ----- */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}


/* =========================================================================
   03. Reset & Base
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-body);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-size: var(--fs-body-s);
  line-height: var(--lh-base);
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}

a:hover {
  color: var(--rose-600);
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}


/* =========================================================================
   04. Typography Utilities
   ------------------------------------------------------------------------- */
.display-jp {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
}

.h1-jp {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
}

.h2-jp {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
}

.h3-jp {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

/* ワードマーク "Fuku-Biz" 用 */
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--rose-400);
}


/* =========================================================================
   05. Layout (container helpers)
   ------------------------------------------------------------------------- */
.wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-gutter);
}

.wrap-wide {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--container-gutter);
}


/* =========================================================================
   06. Shared Chrome
   - .eyebrow: セクション小見出しの上に置く英文ラベル
   - .section-head: 見出し+リード文のセット
   ------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-weight: 500;
  font-size: 14px;
  color: var(--rose-500);
  letter-spacing: 0.16em;
  text-transform: none;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--rose-400);
}

.section-head {
  text-align: center;
  margin-bottom: 56px;
}

.section-head .eyebrow {
  justify-content: center;
}

.section-head h2 {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 32px;
  line-height: 1.5;
  margin: 14px 0 14px;
  letter-spacing: 0.02em;
}

.section-head .sub {
  font-size: 15px;
  color: var(--ink-80);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.95;
}


/* =========================================================================
   07. Buttons (.pill 系)
   - .pill          : 基本のピルボタン
   - .pill.rose     : ブランドピンク（メインCTA）
   - .pill.seed     : Seedブランドの緑（創業ページ用CTA）
   - .pill.outline  : 白地+黒枠（サブCTA）
   - .pill.lg       : 大きめサイズ
   ------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 700;
  padding: 16px 32px;
  border-radius: var(--radius-pill);
  border: 0;
  cursor: pointer;
  line-height: 1;
  text-decoration: none;
  transition: all var(--dur-base) var(--ease-out);
}

.pill .arr {
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 11px;
  opacity: .85;
}

.pill.rose {
  background: var(--rose-400);
  color: #fff;
}

.pill.rose:hover {
  background: var(--rose-500);
  color: #fff;
}

/* 全ボタン共通：ホバー時の下線と、クリック時（:focus）の黒枠を除去。
   キーボード操作時は下の :focus-visible（ローズ色リング／--shadow-focus）が残るため
   アクセシビリティは維持される。 */
.pill:hover,
button:hover {
  text-decoration: none;
}

.pill:focus,
button:focus {
  outline: none;
}

.pill.seed {
  background: var(--seed-500);
  color: #fff;
}

.pill.seed:hover {
  background: var(--seed-600);
  color: #fff;
}

.pill.outline {
  background: #fff;
  color: var(--ink-100);
  border: 1.5px solid var(--ink-100);
}

.pill.outline:hover {
  background: var(--ink-100);
  color: #fff;
}

.pill.lg {
  padding: 20px 40px;
}


/* =========================================================================
   08. Header (site header)
   - sticky 配置・半透明 + backdrop blur
   ------------------------------------------------------------------------- */
.l-header {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--ink-10);
}

.l-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 !important;
}

.l-header__logo img {
  height: 50px; /* 旧: 56px → 90%サイズ */
  width: auto;
}

.l-header__nav {
  display: flex;
  gap: 30px;
  font-weight: 700;
  font-size: 15px;
}

.l-header__nav a {
  color: var(--ink-100);
  padding: 6px 0;
  position: relative;
  transition: color var(--dur-base);
}

.l-header__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--rose-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}

.l-header__nav a:hover {
  color: var(--rose-500);
  text-decoration: none;
}

.l-header__nav a:hover::after {
  transform: scaleX(1);
}

/* 現在ページ（アクティブ）：ホバーと同じ「文字色＋下線」を常時適用。
   ドロップダウン内リンク（.l-header__dropdown a）や矢印の向きは対象外。 */
.l-header__nav a.is-active {
  color: var(--rose-500);
}

.l-header__nav a.is-active::after {
  transform: scaleX(1);
}


/* =========================================================================
   09. News Strip (Hero直下の共通お知らせ帯)
   - TOPでのみ使う想定だが、Newsページ等でも使えるように共通化
   ------------------------------------------------------------------------- */
.news-strip {
  background: var(--rose-50);
  color: var(--ink-100);
  padding: 14px 0;
  border-top: 1px solid var(--rose-100);
}

.news-strip__row {
  display: flex;
  align-items: center;
  gap: 22px;
}

.news-strip__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--rose-600);
  flex-shrink: 0;
}

.news-strip__label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rose-400);
  box-shadow: 0 0 0 4px rgba(216, 150, 164, .25);
}

.news-strip__date {
  font-family: var(--font-num);
  font-size: 14px;
  color: var(--ink-60);
  flex-shrink: 0;
}

.news-strip__title {
  font-weight: 500;
  font-size: 14px;
  text-align: justify;
  flex: 1;
  color: var(--ink-100);
}

.news-strip__title a:hover {
  color: var(--rose-500);
}

.news-strip__more {
  font-size: 15px;
  color: var(--ink-80);
  flex-shrink: 0;
  font-weight: 700;
}

.news-strip__more::after {
  content: "〉";
  margin-left: 6px;
  font-size: 10px;
}


/* =========================================================================
   09b. Page Hero (下層ページの共通ヒーロー / TOP以外のページで使用)
   ------------------------------------------------------------------------- */
.l-page-hero {
  background: linear-gradient(180deg, var(--rose-50) 0%, #fff 100%);
  padding: 80px 0 64px;
  border-bottom: 1px solid var(--rose-100);
}

.l-page-hero__inner {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.l-page-hero__eyebrow {
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--rose-500);
  margin-bottom: 12px;
}

.l-page-hero h1 {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 40px;
  line-height: 1.5;
  margin: 0 0 18px;
  letter-spacing: 0.02em;
}

.l-page-hero__lead {
  color: var(--ink-80);
  line-height: 1.95;
  margin: 0;
}
@media screen and (max-width:820px){
  .l-page-hero h1 {
    font-size: 30px;
  }
  .l-page-hero__lead {
    text-align: justify;
  }
}

/* =========================================================================
   09b-2. Page Hero (with visual / 2カラムと左記フォトエリア版)
   - about.html など特定ページで使用
   ========================================================================= */
.l-page-hero--with-visual {
  background: linear-gradient(180deg, var(--rose-50) 0%, #fff 100%);
  padding: 32px 0 96px;
  position: relative;
  overflow: hidden;
}

.l-page-hero--with-visual::before {
  content: "";
  position: absolute;
  top: 60px;
  right: -120px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--rose-100), transparent 65%);
  opacity: 0.5;
  pointer-events: none;
}

.l-page-hero--with-visual .l-page-hero__grid {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: 60px;
  align-items: center;
  position: relative;
}

.l-page-hero--with-visual .l-page-hero__eyebrow {
  margin-bottom: 18px;
}

.l-page-hero--with-visual h1 {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 64px;
  line-height: 1.4;
  letter-spacing: 0.03em;
  margin: 0 0 32px;
}

.l-page-hero--with-visual h1 .is-rose {
  color: var(--rose-400);
}

.l-page-hero--with-visual .l-page-hero__lead {
  color: var(--ink-80);
  line-height: 2.1;
  text-align: justify;
  max-width: 560px;
}

.l-page-hero--with-visual .l-page-hero__lead b {
  color: var(--ink-100);
}

.l-page-hero--with-visual .l-page-hero__visual-col {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  max-width: 480px;
  justify-self: end;
}

/* Responsive: 768px以下で1カラム折りたたみ */
@media (max-width: 768px) {
  .l-page-hero--with-visual {
    padding: 24px 0 64px;
  }

  .l-page-hero--with-visual::before {
    width: 300px;
    height: 300px;
    top: 40px;
    right: -100px;
  }

  .l-page-hero--with-visual .l-page-hero__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .l-page-hero--with-visual h1 {
    font-size: 36px;
  }

  .l-page-hero--with-visual .l-page-hero__visual-col {
    justify-self: start;
  }
}

/* =========================================================================
   09c. Placeholder Section (各下層ページ未実装区画用)
   - 後続セッションで原稿スプレッドシートv0.1を反映する想定
   ========================================================================= */
.l-placeholder {
  padding: 96px 0;
}

.l-placeholder__inner {
  text-align: center;
  background: var(--cream-100);
  border: 1px dashed var(--rose-300);
  border-radius: 16px;
  padding: 56px 32px;
  color: var(--ink-80);
}

.l-placeholder__inner b {
  display: block;
  font-size: 18px;
  color: var(--ink-100);
  margin-bottom: 12px;
}

.l-placeholder__inner p {
  margin: 0;
  line-height: 1.95;
  font-size: 16px;
}


/* =========================================================================
   10. Final CTA (フッター直上に出る共通CTAバナー)
   ------------------------------------------------------------------------- */
.l-final-cta {
  background: linear-gradient(135deg, var(--rose-400) 0%, var(--rose-500) 100%);
  color: #fff;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.l-final-cta::before,
.l-final-cta::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
}

.l-final-cta::before {
  width: 480px;
  height: 480px;
  top: -120px;
  right: -120px;
}

.l-final-cta::after {
  width: 320px;
  height: 320px;
  bottom: -100px;
  left: -80px;
}

.l-final-cta .wrap {
  position: relative;
  z-index: 1;
  text-align: center;
}

.l-final-cta .eyebrow {
  color: rgba(255, 255, 255, .85);
  justify-content: center;
}

.l-final-cta .eyebrow::before {
  background: rgba(255, 255, 255, .6);
}

.l-final-cta h2 {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 32px;
  line-height: 1.5;
  color: #fff;
  margin: 14px 0 16px;
}

.l-final-cta__sub {
  max-width: 680px;
  margin: 0 auto 36px;
  line-height: 2;
  opacity: .95;
}

.l-final-cta__ctas {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.l-final-cta__ctas .pill.outline {
  background: #fff;
  color: var(--rose-500);
  border: 0;
}

.l-final-cta__ctas .pill.outline:hover {
  background: var(--ink-100);
  color: #fff;
}

.l-final-cta__tel {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  color: #fff;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.02em;
}

.l-final-cta__tel::before {
  content: "☎";
  font-size: 22px;
  color: rgba(255, 255, 255, .85);
}

.l-final-cta__tel small {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: .8;
}

/* ----- Final CTA: 所在地マップ (Google Maps Embed) ----- */
.l-final-cta__map {
  margin-top: 56px;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 24px 64px -28px rgba(0, 0, 0, .35);
}

.l-final-cta__map iframe {
  width: 100%;
  height: 360px;
  border: 0;
  display: block;
  border-radius: 8px;
}

.l-final-cta__map-caption {
  margin-top: 14px;
  padding: 6px 6px 8px;
  color: var(--ink-100);
  text-align: left;
  font-size: 13px;
  line-height: 1.7;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
}

.l-final-cta__map-caption b {
  font-weight: 700;
  font-size: 13px;
}

.l-final-cta__map-caption a {
  margin-left: auto;
  color: var(--rose-500);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}

.l-final-cta__map-caption a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 768px) {
  .l-final-cta__map iframe { height: 280px; }
  .l-final-cta__map-caption { font-size: 12px; }
}


/* =========================================================================
   11. Footer (site footer)
   ------------------------------------------------------------------------- */
.l-footer {
  background: #fff;
  color: var(--ink-80);
  padding: 64px 0 28px;
  border-top: 1px solid var(--ink-20);
}

.l-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 44px;
}

.l-footer b {
  color: var(--ink-100);
  font-size: 14px;
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-num);
  letter-spacing: 0.1em;
}

.l-footer ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* v9: SERVICE/ABOUT/INFO are single-column on PC, 2-column only on SP */
.l-footer__col--2col ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 640px) {
  .l-footer__col--2col ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
  }
}

.l-footer a {
  font-size: 14px;
  color: var(--ink-80);
}

.l-footer a:hover {
  color: var(--rose-500);
}

.l-footer__org {
  color: var(--ink-100);
  font-weight: 900;
  font-size: 15px;
}

.l-footer__addr {
  font-size: 13px;
  line-height: 1.9;
  margin-top: 10px;
}

.l-footer__copy {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-60);
}

/* v10: SNS icons in footer */
.l-footer__sns {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 24px 0 32px;
  padding: 20px 0;
  border-top: 1px solid var(--ink-10);
  border-bottom: 1px solid var(--ink-10);
}
.l-footer__sns-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink-80);
  border: 1px solid #c8c8c8;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.l-footer .l-footer__sns-icon:hover {
  background: var(--rose-500);
  color: #fff;
  border-color: var(--rose-500);
  transform: translateY(-2px);
}
.l-footer__sns-icon svg {
  width: 20px;
  height: 20px;
}


/* =========================================================================
   12. Global Image Treatment
   - 全ページの写真をグレースケール統一（沼波様トーン）
   - 差し色は文字とUIで担当
   ------------------------------------------------------------------------- */
.photo,
.ph,
.ava,
.img,
.visual,
img.is-grayscale {
  filter: grayscale(1) contrast(.7) brightness(1.18);
}

/* ----- Advisor face photos: keep color ----- */
/* about.html および index.html のアドバイザー紹介カードの顔写真は
   グローバルなグレースケール処理を打ち消してオリジナルのカラーで表示する */
.p-about-team__main-card .ava,
.p-about-team__spec-card .ava,
.p-about-team__back-card .ava,
.p-team__card .ava {
  filter: none;
}

/* ----- Icon System (SVG icon styling) ----- */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: 24px;
  flex-shrink: 0;
}

.icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Size modifiers */
.icon--sm {
  font-size: 16px;
}

.icon--md {
  font-size: 20px;
}

.icon--lg {
  font-size: 32px;
}

.icon--xl {
  font-size: 40px;
}

/* Color modifiers */
.icon--rose {
  color: var(--rose-500);
}

.icon--seed {
  color: var(--seed-500);
}

.icon--ink {
  color: var(--ink-100);
}


/* =========================================================================
   13. Accessibility / Utilities
   ------------------------------------------------------------------------- */
/* クリック操作（マウス・タッチ）時の :focus outline は全要素で除去。
   キーボード操作時は下の :focus-visible（--shadow-focus のローズリング）が残る。 */
:focus:not(:focus-visible) {
  outline: none;
}
:focus-visible {
  outline: 0;
  box-shadow: var(--shadow-focus);
}
/* focus / focus-visible 時は文字色・下線を変えない（全要素） */
:focus,
:focus-visible {
  color: inherit;
  text-decoration: none;
}
/* Bootstrap 等の a:focus / a:hover（詳細度 0,1,1）を確実に上書きするため、
   html を付けて詳細度を上げる（読み込み順に依存せず適用される）。
   キーボード時のローズリングは :focus-visible の box-shadow が別途残る。 */
html a:focus,
html a:focus-visible {
  color: inherit;
  text-decoration: none;
  outline: none;
}
/* Bootstrap（親テーマ）由来の a:hover { text-decoration: underline }（詳細度 0,1,1）を
   全ページで打ち消す。個別に下線を出したい箇所（パンくず・カード見出し等）は
   .class を含む詳細度 0,2,x 以上で上書きするため影響しない。 */
html a:hover {
  text-decoration: none;
}

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.u-text-center { text-align: center; }
.u-text-left   { text-align: left; }
.u-text-right  { text-align: right; }


/* =========================================================================
   14. Print
   ------------------------------------------------------------------------- */
@media print {
  .l-header,
  .l-footer,
  .l-final-cta {
    display: none;
  }

  body {
    color: #000;
    background: #fff;
  }
}


/* =========================================================================
   15. Hamburger Button & Drawer (SP/Tablet 用)
   - PCでは hidden、Tablet以下で表示
   - クリックで右からスライドインするドロワー
   ------------------------------------------------------------------------- */
.l-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.l-header__hamburger {
  display: none; /* PCでは非表示。Tablet以下で flex に */
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  transition: background var(--dur-base);
}

.l-header__hamburger:hover {
  background: var(--rose-50);
  border-color: var(--rose-300);
}

.l-header__hamburger-icon {
  position: relative;
  width: 20px;
  height: 14px;
}

.l-header__hamburger-icon span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ink-100);
  border-radius: 2px;
  transition: transform 240ms var(--ease-out), opacity 240ms var(--ease-out), top 240ms var(--ease-out);
}

.l-header__hamburger-icon span:nth-child(1) { top: 0; }
.l-header__hamburger-icon span:nth-child(2) { top: 6px; }
.l-header__hamburger-icon span:nth-child(3) { top: 12px; }

/* Open state: X 形に変形 */
.l-header__hamburger.is-open .l-header__hamburger-icon span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.l-header__hamburger.is-open .l-header__hamburger-icon span:nth-child(2) { opacity: 0; }
.l-header__hamburger.is-open .l-header__hamburger-icon span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* ----- Drawer Panel ----- */
.l-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(33, 33, 38, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease-out);
}

.l-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.l-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 86vw);
  background: #fff;
  z-index: 100;
  transform: translateX(100%);
  transition: transform 300ms var(--ease-out);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.l-drawer.is-open {
  transform: translateX(0);
}

.l-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--ink-10);
}

.l-drawer__head img {
  height: 36px;
  width: auto;
}

.l-drawer__close {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  color: var(--ink-80);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.l-drawer__close:hover {
  background: var(--rose-50);
  color: var(--rose-500);
}

.l-drawer__nav {
  display: flex;
  flex-direction: column;
  padding: 14px 0;
}

.l-drawer__nav a {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-100);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background var(--dur-base);
}

.l-drawer__nav a::after {
  content: "→";
  color: var(--rose-400);
  font-size: 14px;
  opacity: 0.7;
}

.l-drawer__nav a:hover {
  background: var(--rose-50);
  color: var(--rose-500);
  text-decoration: none;
}

.l-drawer__cta {
  padding: 20px 22px;
  margin-top: auto;
  border-top: 1px solid var(--ink-10);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--rose-50);
}

.l-drawer__cta .pill {
  width: 100%;
  justify-content: center;
}

.l-drawer__tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  font-family: var(--font-num);
  color: var(--ink-100);
  text-decoration: none;
  padding: 6px 0;
}

.l-drawer__tel b {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.l-drawer__tel small {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--ink-60);
  letter-spacing: 0.06em;
}

/* Body scroll lock while drawer is open */
body.is-drawer-open {
  overflow: hidden;
}


/* =========================================================================
   16. Responsive: Tablet (max-width: 1024px)
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* ----- Container ----- */
  .wrap,
  .wrap-wide {
    padding: 0 24px;
  }

  /* ----- Header: hide nav, show hamburger ----- */
  .l-header__nav {
    display: none;
  }

  .l-header__hamburger {
    display: inline-flex;
  }

  .l-header__row {
    padding: 12px 0;
    /* スマホ/タブレットの縮小ヘッダーに左右余白を付与（.wrap の余白が !important で消えるための補填） */
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  .l-header__logo img {
    height: 44px;
  }

  /* SP用ピル：少しコンパクトに */
  .l-header__actions .pill {
    padding: 12px 20px;
    font-size: 13px;
  }

  /* ----- Typography & Heads ----- */
  .section-head {
    margin-bottom: 40px;
  }

  .section-head h2 {
    font-size: 30px;
    line-height: 1.45;
  }

  /* ----- News Strip ----- */
  .news-strip__row {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 4px 0;
  }

  /* ----- Final CTA ----- */
  .l-final-cta {
    padding: 72px 0;
  }

  .l-final-cta h2 {
    line-height: 1.5;
  }

  .l-final-cta__ctas {
    flex-direction: column;
    gap: 12px;
  }

  .l-final-cta__map {
    margin-top: 40px;
  }

  .l-final-cta__map iframe {
    height: 320px;
  }

  /* ----- Footer ----- */
  .l-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}


/* =========================================================================
   17. Responsive: SP (max-width: 640px)
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* ----- Container ----- */
  .wrap,
  .wrap-wide {
    padding: 0 16px;
  }

  /* ----- Header ----- */
  .l-header__row {
    padding: 10px 0;
    /* スマホ版ヘッダーの左右余白 */
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  .l-header__logo img {
    height: 30px;
  }

  .l-header__actions {
    gap: 8px;
  }

  .l-header__actions .pill {
    padding: 10px 14px;
    font-size: 12px;
    gap: 6px;
  }

  .l-header__hamburger {
    width: 40px;
    height: 40px;
  }

  /* ----- Section heads ----- */
  .section-head {
    margin-bottom: 32px;
  }

  .section-head h2 {
    font-size: 22px;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .section-head .sub {
    font-size: 14px;
    line-height: 1.85;
  }

  .eyebrow {
    font-size: 12px;
    gap: 10px;
  }

  .eyebrow::before {
    width: 20px;
  }

  /* ----- Pill buttons ----- */
  .pill {
    padding: 14px 24px;
    font-size: 14px;
  }

  .pill.lg {
    padding: 16px 28px;
    font-size: 15px;
  }

  /* ----- News Strip ----- */
  .news-strip {
    padding: 20px 0;
  }

  .news-strip__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px 12px;
  }

  .news-strip__more {
    align-self: flex-end;
    font-size: 14px;
  }

  /* ----- Final CTA ----- */
  .l-final-cta {
    padding: 56px 0;
  }

  .l-final-cta h2 {
    font-size: 22px;
    line-height: 1.55;
    margin: 10px 0 12px;
  }

  .l-final-cta__sub {
    font-size: 14px;
    margin-bottom: 20px;
  }

  .l-final-cta__tel {
    font-size: 22px;
  }

  .l-final-cta__map {
    margin-top: 28px;
    padding: 8px;
  }

  .l-final-cta__map iframe {
    height: 240px;
  }

  .l-final-cta__map-caption {
    font-size: 12px;
    flex-direction: column;
    gap: 4px;
  }

  .l-final-cta__map-caption a {
    margin-left: 0;
    margin-top: 4px;
  }

  /* ----- Footer ----- */
  .l-footer {
    padding: 48px 0 24px;
  }

  .l-footer__top {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* スマホ版：コピーライトを1カラム・中央揃え */
  .l-footer__copy {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
  }

  /* ----- Drawer: smaller width on tiny screens ----- */
  .l-drawer {
    width: min(320px, 92vw);
  }
}


/* =========================================================================
   Header Dropdown Navigation (v0.4 / v6)
   ========================================================================= */
.l-header__nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.l-header__nav-item--dropdown {
  /* Extend hover hit area downward so the dropdown stays visible */
  padding-bottom: 18px;
  margin-bottom: -18px;
}
.l-header__nav-item--dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Invisible bridge between trigger and dropdown */
.l-header__nav-item--dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 18px;
  pointer-events: none;
}
.l-header__nav-item--dropdown:hover::after,
.l-header__nav-item--dropdown:focus-within::after {
  pointer-events: auto;
}
.l-header__nav-arrow {
  display: inline-block;
  /* 三角は CSS の border で描画する（▾ グリフではなく）。
     こうすると外枠の中心＝三角の中心になり、回転が「その場で反転」する。
     大きさは border-left/right（＝幅の半分）と border-top（＝高さ）の px で調整可能。 */
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor; /* 下向き三角。色は color を継承（ホバー色指定がそのまま効く） */
  font-size: 0;                        /* 元の ▾ グリフを隠す（描画は border が担当） */
  color: var(--ink-60);
  margin-top: 1px;                     /* テキストとの縦位置微調整（旧 translateY(1px) 相当） */
  transform-origin: center;            /* 三角の中心を支点に回転 */
  transition: transform .2s ease, color .2s ease;
}
.l-header__nav-item--dropdown:hover .l-header__nav-arrow,
.l-header__nav-item--dropdown:focus-within .l-header__nav-arrow {
  transform: rotate(180deg);
  color: var(--rose-500);
}

.l-header__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #fff;
  border: 1px solid var(--ink-10);
  border-radius: 12px;
  padding: 10px 0;
  min-width: 260px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 100;
  margin-top: 18px; /* Distance from trigger to dropdown — covered by ::after bridge above */
}
.l-header__dropdown::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: #fff;
  border-top: 1px solid var(--ink-10);
  border-left: 1px solid var(--ink-10);
}
.l-header__nav-item--dropdown:hover .l-header__dropdown,
.l-header__nav-item--dropdown:focus-within .l-header__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.l-header__dropdown a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 22px;
  color: var(--ink-100);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}
.l-header__dropdown a::after {
  content: "→";
  /* ↓ .l-header__nav a::after（下線バー）から漏れる絶対配置・背景・高さを打ち消す */
  position: static;
  inset: auto;
  height: auto;
  background: transparent;
  transform-origin: initial;
  opacity: 0;
  color: var(--rose-500);
  transition: opacity .15s ease, transform .15s ease;
  transform: translateX(-4px);
  margin-left: 16px;
}
.l-header__dropdown a:hover {
  background: var(--rose-50);
  color: var(--rose-500);
}
.l-header__dropdown a:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* Drawer (SP/Tablet) — sub-list under 相談できること */
.l-drawer__sub {
  /* 「相談できること」の子であることを、左ライン＋インデントでシンプルに表現 */
  padding: 2px 0 8px 16px;
  border-left: 2px solid var(--rose-200);
  margin: 0 0 4px 24px;
}
.l-drawer__sub a {
  display: block;
  padding: 9px 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-80) !important;
  border-bottom: 0;
  text-decoration: none;
}
.l-drawer__sub a::before { content: none; }
.l-drawer__sub a::after  { content: none; }
.l-drawer__sub a:hover {
  color: var(--rose-500) !important;
}

/* SP: hide PC dropdown */
@media (max-width: 1024px) {
  .l-header__dropdown,
  .l-header__nav-item--dropdown:hover .l-header__dropdown,
  .l-header__nav-item--dropdown:focus-within .l-header__dropdown {
    display: none !important;
  }
  .l-header__nav-arrow {
    display: none;
  }
}

/* =========================================================================
   FAQ Accordion (v8) — universal styles for details/summary based FAQ
   ========================================================================= */
details.p-sd-faq-item,
details.p-faq-item,
details.p-flow-faq-pickup-item,
details.p-seed-faq__item {
  /* keep original card padding/border via existing class */
  cursor: pointer;
}
details.p-sd-faq-item summary,
details.p-faq-item summary,
details.p-flow-faq-pickup-item summary,
details.p-seed-faq__item summary {
  list-style: none; /* hide default disclosure triangle */
  cursor: pointer;
  position: relative;
  user-select: none;
}
details.p-sd-faq-item summary::-webkit-details-marker,
details.p-faq-item summary::-webkit-details-marker,
details.p-flow-faq-pickup-item summary::-webkit-details-marker,
details.p-seed-faq__item summary::-webkit-details-marker {
  display: none;
}
details summary .p-sd-faq-item__toggle,
details summary .p-faq-item__toggle,
details summary .p-flow-faq-pickup-item__toggle,
details summary .p-seed-faq__toggle {
  margin-left: auto;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cream-100);
  color: var(--rose-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 20px;
  line-height: 1;
  transition: transform .2s ease, background .2s ease;
  border: 1px solid var(--ink-10);
}
details[open] summary .p-sd-faq-item__toggle,
details[open] summary .p-faq-item__toggle,
details[open] summary .p-flow-faq-pickup-item__toggle,
details[open] summary .p-seed-faq__toggle {
  transform: rotate(45deg);
  background: var(--rose-500);
  color: #fff;
}
/* The Q row must accommodate the toggle */
details summary.p-sd-faq-item__q,
details summary.p-faq-item__q,
details summary.p-flow-faq-pickup-item__q,
details summary.p-seed-faq__q {
  margin-bottom: 0;
  padding-right: 0;
  align-items: baseline;
  display: flex;
}
/* Seed page: rewrite ::before icon (Q letter) since summary doesn't allow ::before in the same way */
details summary.p-seed-faq__q::before {
  display: none;
}
/* Smooth expand: animate the inner __a body */
details .p-sd-faq-item__a,
details .p-faq-item__a,
details .p-flow-faq-pickup-item__a,
details .p-seed-faq__a {
  margin-top: 14px;
  animation: faqFadeIn .25s ease;
}
@keyframes faqFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Hover state on summary */
details summary:hover {
  opacity: 0.85;
}


/* =========================================================================
   FAQ Accordion (v9) — shared item look（旧 faq.css §03 を共通部品化）
   -------------------------------------------------------------------------
   v8 の details/summary 汎用スタイルに「カード見た目・A行・開閉アニメ」を追加。
   .p-faq-item を「よくあるご質問」ページと下層各所（相談の流れ FAQ抜粋 等）で共用する。
   ※ 列幅・配置などページ固有の体裁は各ページCSS側で行う（本ブロックは見た目のみ）。
   ========================================================================= */
.p-faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.p-faq-item {
  background: #fff;
  border: 1px solid var(--ink-20);
  border-radius: var(--radius-lg);
  padding: 0;                             /* パディングは summary / __a 側へ移動（閉時も全面クリック可に） */
  overflow: hidden;                       /* 開閉アニメの高さクリップ用 */
  box-shadow: var(--shadow-soft);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow  var(--dur-base) var(--ease-out);
}
.p-faq-item[open] {
  border-color: var(--rose-200);
  box-shadow: var(--shadow-lift);
}
/* 質問行＝クリック領域。v8 の padding-right:0 等を上書きするため高詳細度で指定 */
details.p-faq-item summary.p-faq-item__q {
  padding: 22px 28px;
  margin-bottom: 0;
}
.p-faq-item__q {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-weight: 900;
  font-size: 15px;
  line-height: 1.55;
  text-align: justify;
  color: var(--ink-100);
}
.p-faq-item__q-tag {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--rose-500);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-weight: 900;
  font-size: 13px;
}
details.p-faq-item .p-faq-item__a {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0;
  padding: 0 28px;                        /* 横のみ。縦パディングを持たせないので真の0まで畳めてガタつかない */
  overflow: hidden;
  animation: none;                        /* v8 の faqFadeIn を無効化（高さアニメと二重防止） */
  transition: height var(--dur-slow) var(--ease-out);
}
/* Q↔A の上下余白は「内側」に持たせる（overflowでクリップ＝閉時は0まで畳める） */
details.p-faq-item .p-faq-item__a > * {
  margin-top: 14px;
}
.p-faq-item__a-tag {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cream-100);
  color: var(--ink-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-weight: 900;
  font-size: 13px;
  border: 1px solid var(--ink-10);
}
.p-faq-item__a-body {
  font-size: 15px;
  line-height: 1.95;
  text-align: justify;
  color: var(--ink-80);
  flex: 1;
  padding-bottom: 22px;                   /* カード下端の余白 */
}
.p-faq-item__a-body b {
  color: var(--rose-600);
  font-weight: 700;
}
/* SP */
@media (max-width: 640px) {
  details.p-faq-item summary.p-faq-item__q { padding: 18px 20px; }
  .p-faq-item__q { font-size: 14px; }
  details.p-faq-item .p-faq-item__a { padding: 0 20px; }
  .p-faq-item__a-body { font-size: 14px; padding-bottom: 18px; }
}
/* 低モーション設定では即時開閉 */
@media (prefers-reduced-motion: reduce) {
  .p-faq-item,
  details.p-faq-item .p-faq-item__a { transition: none; }
}


/* =========================================================================
   common.css 追記分（堅牢版）— Contact Form 7 出力を after.png に合わせる
   -------------------------------------------------------------------------
   ポイント：
   - [radio]/[acceptance] の class: は <input> 自身に付くため子孫セレクタが当たらない。
     → ラジオは実HTMLのdiv（.p-contact-form__radio-cf7 / --status / --format）、
       同意は既存の実div（.p-contact-form__consent）を起点に、CF7実DOM
       （.wpcf7-radio / .wpcf7-acceptance / .wpcf7-list-item / -label）を狙う。
   - 選択状態は :has(input:checked)（JS不要）。
   - CF7の自動 <p>/<br> 対策も内蔵（autopをOFFにしなくても崩れない）。
   ========================================================================= */

/* --- 共通：入力を囲む wrap を block 化 --- */
.p-contact-form__field .wpcf7-form-control-wrap { display: block; }

/* --- autop（自動<p>）の余白を打ち消す --- */
.p-contact-form__card p { margin: 0; }

/* テキスト系の背景統一 */
.p-contact-form__card .wpcf7-form-control.p-contact-form__input,
.p-contact-form__card .wpcf7-form-control.p-contact-form__select,
.p-contact-form__card .wpcf7-form-control.p-contact-form__textarea,
.p-contact-form__card .wpcf7-form-control.p-contact-form__date-input,
.p-contact-form__card .wpcf7-form-control.p-contact-form__time-select {
  background: #fff;
  border: 1.5px solid var(--ink-20);
  border-radius: 8px !important;   /* input/select/textarea の角丸を高詳細度で固定（角丸消え対策） */
}

/* --- 日付＋時間：横並び（autopの<br>を無効化） --- */
.p-contact-form__date-inputs { display: flex; gap: 12px; align-items: center; }
.p-contact-form__date-inputs > p { display: contents; }          /* autopの<p>を透過してflexを効かせる */
.p-contact-form__date-inputs br { display: none; }               /* 日付と時間を横並びに */
.p-contact-form__date-inputs .wpcf7-form-control-wrap { flex: 1 1 0; min-width: 0; display: block; }
.p-contact-form__date-inputs .p-contact-form__date-input,
.p-contact-form__date-inputs .p-contact-form__time-select { width: 100%; box-sizing: border-box; }

/* =========================================================================
   ラジオ＝チップ（相談者の状況 / 相談形式）
   フォーム側で <div class="p-contact-form__radio-cf7 ...--status/--format"> で
   [radio ... use_label_element] を囲む。
   ========================================================================= */
.p-contact-form__radio-cf7 .wpcf7-radio { display: flex; gap: 10px; flex-wrap: wrap; }
.p-contact-form__radio-cf7 .wpcf7-list-item { margin: 0; }
.p-contact-form__radio-cf7 input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }

.p-contact-form__radio-cf7 .wpcf7-list-item label {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 22px; border: 1.5px solid var(--ink-20); border-radius: 12px;
  background: #fff; font-weight: 700; font-size: 14px; cursor: pointer;
  min-width: 220px; transition: all 200ms;
}
.p-contact-form__radio-cf7 .wpcf7-list-item label:hover { border-color: var(--rose-300); background: var(--rose-50); }

.p-contact-form__radio-cf7 .wpcf7-list-item label::before {
  content: ""; flex: 0 0 auto; width: 18px; height: 18px;
  border: 1.5px solid var(--ink-40); border-radius: 50%; box-sizing: border-box;
}

.p-contact-form__radio-cf7 .wpcf7-list-item-label { display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.p-contact-form__radio-cf7 .wpcf7-list-item-label::after { font-weight: 500; font-size: 11px; color: var(--ink-60); }

.p-contact-form__radio-cf7 .wpcf7-list-item label:has(input:checked) {
  border-color: var(--rose-400); background: var(--rose-50); color: var(--rose-700);
}
.p-contact-form__radio-cf7 .wpcf7-list-item label:has(input:checked)::before {
  border-color: var(--rose-400); background: radial-gradient(circle, var(--rose-400) 40%, transparent 45%);
}
.p-contact-form__radio-cf7 .wpcf7-list-item label:has(input:checked) .wpcf7-list-item-label::after { color: var(--rose-600); }

/* 各選択肢のサブテキスト（after.png の2行表示を再現） */
.p-contact-form__radio-cf7--status .wpcf7-list-item:nth-child(1) .wpcf7-list-item-label::after { content: "個人事業・法人問わず"; }
.p-contact-form__radio-cf7--status .wpcf7-list-item:nth-child(2) .wpcf7-list-item-label::after { content: "副業・週末起業もOK"; }
.p-contact-form__radio-cf7--format .wpcf7-list-item:nth-child(1) .wpcf7-list-item-label::after { content: "センターでお会いします"; }
.p-contact-form__radio-cf7--format .wpcf7-list-item:nth-child(2) .wpcf7-list-item-label::after { content: "Zoom等"; }

/* =========================================================================
   同意チェック（agree）＝ 既存の実div .p-contact-form__consent 起点
   ========================================================================= */
.p-contact-form__consent .wpcf7-form-control-wrap { display: inline-block; width: auto; }
.p-contact-form__consent .wpcf7-acceptance,
.p-contact-form__consent .wpcf7-list-item { margin: 0; }
.p-contact-form__consent label { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 14px; cursor: pointer; }
.p-contact-form__consent input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.p-contact-form__consent .wpcf7-list-item-label { position: relative; padding-left: 34px; }
.p-contact-form__consent .wpcf7-list-item-label::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border: 2px solid var(--ink-40); border-radius: 4px; background: #fff; box-sizing: border-box;
}
.p-contact-form__consent label:has(input:checked) .wpcf7-list-item-label::before { background: var(--rose-400); border-color: var(--rose-400); }
.p-contact-form__consent label:has(input:checked) .wpcf7-list-item-label::after {
  content: "✓"; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);
  color: #fff; font-size: 14px; font-weight: 700;
}

/* =========================================================================
   送信ボタン（矢印は value に「→」を含める。スピナー位置だけ調整）
   ========================================================================= */
.p-contact-form__submit-row .wpcf7-spinner { margin-left: 12px; }

/* =========================================================================
   バリデーション表示
   ========================================================================= */
.p-contact-form__card .wpcf7-not-valid-tip { color: var(--rose-700, #b03a55); font-size: 12px; margin-top: 6px; display: block; }
.p-contact-form__card .wpcf7-form-control.wpcf7-not-valid { border-color: var(--rose-500, #d8628a) !important; }
.p-contact-form__card .wpcf7-response-output { margin: 20px 40px 0; border-radius: 8px; font-size: 13px; }

/*------------------------------------
SP / PC 改行切替ユーティリティ
<br class="br-sp"> … SP（820px以下）でのみ改行を有効化
<br class="br-pc"> … PC（821px以上）でのみ改行を有効化
参考: https://qiita.com/narikei/items/3d0a50c8d621dfe6815e
------------------------------------*/
.br-sp{
  display:none;
}
@media screen and (max-width:820px){
  .br-pc{
    display:none;
  }
  .br-sp{
    display:inline-block;
  }
}

/* =====================================================================
   EEMON SINGLE（備後のええもん 投稿詳細）
   ---------------------------------------------------------------------
   renewal ヘッダー/フッター内に Sydney 製の本文を表示するための調整。
   （旧 eemon-single.php の直書き style を移設したもの）
   ・.wrap.eemon-single-wrap … .wrap（左右padding・中央寄せ）に上下余白を追加。
       セレクタを .wrap.eemon-single-wrap（詳細度 0,2,0）にして、
       レスポンシブの .wrap ルールに上書きされないようにする。
   ・.eemon-single-wrap .content-area … 中身の外箱 col-md-9（幅75%・float）を
       全幅・float解除して .wrap の適正幅に収める。
   ===================================================================== */
.wrap.eemon-single-wrap {
  padding-top: 60px;
  padding-bottom: 60px;
}

.eemon-single-wrap .content-area {
  width: 100%;
  max-width: 100%;
  float: none;
}