/* =========================================================
   ミツクル LP — styles.css
   設計：モバイルファースト（BP: 768px / 1024px、補助 600px）
   デザインシステム: .claude/skills/mitsukuru-design
   ========================================================= */

:root{
  --green:        #7CB342;
  --green-dark:   #689A38;
  --green-deep:   #5F9233;
  --green-deeper: #5C8A2E;
  --green-mid:    #9CC766;
  --green-soft:   #A8D26C;
  --green-050:    #FAFBF7;
  --green-100:    #EFF6E4;
  --green-150:    #F6FAEF;
  --green-200:    #E4F0D2;
  --line:    #E5E7EB;
  --line-2:  #EAEFE0;
  --line-3:  #F0F2EC;
  --ink:    #2B2B2B;
  --muted:  #6B7280;
  --hint:   #9CA3AF;
  --maxw:   1180px;
  --font: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  --grad-badge: linear-gradient(135deg, #8FC74F 0%, #689A38 100%);
}

/* ---- reset / base ---- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--font); color:var(--ink); background:#fff; line-height:1.8; font-size:16px; -webkit-font-smoothing:antialiased; }
::selection{ background:#C9E3A6; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
.sprite{ position:absolute; }
:where(a,button):focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:6px; }
.icon{ display:inline-block; width:1em; height:1em; vertical-align:middle; flex-shrink:0; fill:none; }

/* ---- layout ---- */
.container{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.sp-only{ display:none; }
.container--narrow{ max-width:720px; }
.section{ padding:64px 0; }
.section#works{margin:0;}
.section--soft{ background:var(--green-050); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section--mint{ background:var(--green-100); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section__head{ text-align:center; margin-bottom:40px; }
.eyebrow{ font-size:13px; font-weight:700; color:var(--green); letter-spacing:.08em; margin:0 0 12px; }
.section__title,.post_content h2.section__title{ font-size:27px; font-weight:900; line-height:1.45; color:var(--ink); margin:0; }
.section__lead{ font-size:15.5px; color:var(--muted); line-height:1.9; margin:14px auto 0; max-width:640px; letter-spacing:0; }
.section__cta{ text-align:center; margin-top:44px; }

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:700; border-radius:9999px; padding:14px 30px; font-size:15px; cursor:pointer; border:none; white-space:nowrap; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.btn:active{ transform:translateY(0); }
.btn .icon{ width:19px; height:19px; }
.btn--sm{ padding:11px 22px; font-size:14px; }
.btn--lg{ padding:16px 36px; font-size:16px; }
.btn--xl{ padding:19px 42px; font-size:17px; font-weight:800; }
.btn--primary{ background:var(--green); color:#fff; box-shadow:0 8px 22px rgba(124,179,66,.35); }
.btn--primary:hover{ background:var(--green-dark); color:#fff; transform:translateY(-2px); }
.btn--grad{ background:linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%); box-shadow:0 10px 26px rgba(124,179,66,.36); }
.btn--grad:hover{ transform:translateY(-3px); box-shadow:0 16px 32px rgba(124,179,66,.42); }
.btn--ghost{ background:#fff; color:var(--ink); border:1.5px solid var(--line); box-shadow:none; }
.btn--ghost:hover{ border-color:var(--green); color:var(--green-deeper); }
.btn--white{ background:#fff; color:var(--green-deeper); box-shadow:0 12px 30px rgba(0,0,0,.14); }
.btn--white:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,.22); }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---- shared bits ---- */
.eyebrow + .section__title{ margin-top:0; }
.ic-badge{ flex:none; width:52px; height:52px; border-radius:50%; background:var(--grad-badge); box-shadow:0 5px 12px rgba(104,154,56,.30); display:flex; align-items:center; justify-content:center; color:#fff; }
.ic-badge .icon{ width:26px; height:26px; }
.ic-badge--sm{ width:46px; height:46px; }
.ic-badge--sm .icon{ width:23px; height:23px; }
.tag{ display:inline-block; font-size:12px; font-weight:700; color:var(--green-deep); background:var(--green-100); border-radius:999px; padding:5px 14px; }
.card-hover{ transition:box-shadow .28s ease, transform .28s ease; }

/* =========================================================
   ヘッダー
   ========================================================= */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0; }
.logo img{ height:36px; width:auto; }
.nav{ display:none; }
.nav__list{ display:flex; align-items:center; gap:28px; font-size:15px; font-weight:500; }
.nav__list a:hover{ color:var(--green-deeper); }
.nav__sp a{ font-weight:700; }
.nav__cta{ color:#fff; }
.nav-toggle{ display:inline-flex; align-items:center; justify-content:center; background:none; border:none; color:var(--ink); cursor:pointer; padding:4px; }
.nav-toggle .icon{ width:28px; height:28px; }
.nav-toggle__close{ display:none; }
.site-header.is-nav-open .nav-toggle__open{ display:none; }
.site-header.is-nav-open .nav-toggle__close{ display:inline-block; }

@media (max-width:767.98px){
  .site-header.is-nav-open .nav{ display:block; position:absolute; top:100%; left:0; right:0; background:rgba(255,255,255,.98); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); box-shadow:0 12px 26px rgba(0,0,0,.08); }
  .site-header.is-nav-open .nav__list{ flex-direction:column; align-items:stretch; gap:0; padding:8px 20px 18px; }
  .site-header.is-nav-open .nav__list > li > a{ display:block; padding:14px 4px; border-bottom:1px solid var(--line); font-size:15px; }
  .site-header.is-nav-open .nav__cta{ margin-top:14px; border-bottom:none; justify-content:center; }
}

/* =========================================================
   ヒーロー
   ========================================================= */
.hero{ padding:40px 0 48px; }
.hero__inner{ display:grid; gap:28px; align-items:center; }
.badge{ display:inline-flex; align-items:center; gap:8px; background:var(--green-100); color:var(--green-deeper); font-size:13px; font-weight:700; padding:8px 16px; border-radius:9999px; margin-bottom:22px; }
.badge__dot{ width:7px; height:7px; border-radius:50%; background:var(--green); }
.hero__title,.post_content .hero__title{ font-size:30px; font-weight:900; line-height:1.45; letter-spacing:.005em; margin:0 0 22px; word-break:auto-phrase; overflow-wrap:anywhere; }
.hero__title .hl{ color:var(--green); }
.hero__lead{ font-size:16px; color:var(--muted); line-height:1.9; margin:0 0 30px; max-width:480px; }
.ticks{ display:flex; flex-wrap:wrap; gap:20px; margin-top:28px; color:var(--muted); font-size:13px; font-weight:500; }
.ticks li{ display:inline-flex; align-items:center; gap:7px; }
.ticks .icon{ width:16px; height:16px; color:var(--green); }
.hero__figure{ margin:0; }
.hero__figure img{ width:100%; height:auto; }
.btn-row .btn{ flex:1 1 100%; }

/* スマホ（768px以下）はヒーロー内の表示順を h1 → 画像 → 説明文 → CTA に並び替え。
   HTMLの並び順は変えず、hero__text を display:contents で展開し order で制御。
   PC（≥1024）の左テキスト＋右画像の2カラムには影響しない。 */
@media (max-width:767.98px){
  .hero__inner{ display:flex; flex-direction:column; align-items:stretch; gap:24px; }
  .hero__text{ display:contents; }
  .hero__text .badge{ order:1; align-self:flex-start; margin-bottom:0; }
  .hero__title{ order:2; margin:0; }
  .hero__figure{ order:3; }
  .hero__lead{ order:4; margin:0; max-width:none; }
  .hero__text .btn-row{ order:5; }
  .hero__text .ticks{ order:6; margin-top:0; }
}

/* =========================================================
   お悩み / 価値バナー
   ========================================================= */
.pain-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(270px,1fr)); gap:24px; padding-left:0; }
.pain-card{ position:relative; overflow:hidden; background:#fff; border-radius:18px; padding:36px 28px 32px; box-shadow:0 4px 20px rgba(0,0,0,.06); transition:box-shadow .28s ease, transform .28s ease; }
.pain-card:hover{ box-shadow:0 16px 36px rgba(124,179,66,.20); transform:translateY(-4px); }
.pain-card__bar{ position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--green) 0%, var(--green-soft) 100%); }
.pain-card__head{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.pain-card__head h3{ font-size:17px; font-weight:700; line-height:1.5; margin:0;}
.pain-card__thumb{ aspect-ratio:4/3; border-radius:12px; overflow:hidden; background:var(--green-150); margin-bottom:20px; }
.pain-card__thumb img{ width:100%; height:100%; object-fit:cover; }
.pain-card p{ font-size:14.5px; color:var(--muted); line-height:1.9; }

.bridge{ position:relative; overflow:hidden; margin-top:48px; background:linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%); border-radius:22px; padding:44px 40px; display:grid; gap:28px; align-items:center; box-shadow:0 22px 50px rgba(104,154,56,.34); }
.bridge__deco{ position:absolute; top:-70px; right:-40px; width:260px; height:260px; border-radius:50%; background:rgba(255,255,255,.10); pointer-events:none; }
.bridge__text{ position:relative; z-index:1; }
.bridge__label{ font-size:14px; font-weight:700; color:var(--green-100); letter-spacing:.06em; margin-bottom:12px; }
.bridge__lead{ font-size:23px; font-weight:900; line-height:1.55; color:#fff; }
.bridge .btn{ position:relative; z-index:1; justify-self:start; }

/* =========================================================
   作れるもの
   ========================================================= */
.make-grid,.post_content .make-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:24px; padding:0; }
.make-card{ overflow:hidden; background:#fff; border-radius:18px; box-shadow:0 4px 20px rgba(0,0,0,.06); transition:box-shadow .28s ease, transform .28s ease; }
.make-card:hover{ box-shadow:0 16px 36px rgba(124,179,66,.20); transform:translateY(-4px); }
.make-card__thumb{ aspect-ratio:320/220; overflow:hidden; }
.make-card__thumb img{ width:100%; height:100%; object-fit:cover; }
.make-card__body{ padding:22px 26px 28px; }
.make-card__head{ display:flex; align-items:center; gap:14px; padding-bottom:12px; }
.make-card__head h3{ font-size:15px; font-weight:700; line-height:1.45; word-break:keep-all;margin:0; }
.make-card p{ font-size:14px; color:var(--muted); line-height:1.85; }

/* =========================================================
   選ばれる理由
   ========================================================= */
.why-grid,.post_content .why-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(290px,1fr)); gap:24px; padding:0;}
.why-card{ position:relative; overflow:hidden; background:#fff; border-radius:18px; padding:34px 32px; box-shadow:0 6px 24px rgba(104,154,56,.10); transition:box-shadow .28s ease, transform .28s ease; }
.why-card:hover{ box-shadow:0 18px 40px rgba(124,179,66,.22); transform:translateY(-5px); }
.why-card__num{ position:absolute; top:10px; right:22px; font-size:80px; font-weight:900; line-height:1; color:var(--green-200); letter-spacing:-.03em; pointer-events:none; }
.why-card__inner{ position:relative; z-index:1; }
.why-card__head{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.why-card__head p{ display:none;}
.why-card__head h3{ font-size:17px; font-weight:700; line-height:1.45; word-break:keep-all; margin:0; }
.why-card__thumb{ aspect-ratio:4/3; border-radius:12px; overflow:hidden; margin:0; padding-bottom:18px;}
.why-card__thumb img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.why-card p{ font-size:14.5px; color:var(--muted); line-height:1.9; }

/* =========================================================
   使い方の流れ（縦タイムライン → デスクトップで横並び）
   ========================================================= */
.flow,.post_content .flow{ display:flex; flex-direction:column; align-items:center; max-width:520px; margin:0 auto; padding:0; }
.step{ width:100%; display:flex; flex-direction:column; overflow:hidden; background:#fff; border-radius:18px; box-shadow:0 6px 24px rgba(104,154,56,.10); }
.step__head{ text-align:center; padding:26px 22px 16px; }
.step__no{ display:block; font-size:13px; font-weight:800; letter-spacing:.12em; color:var(--green); margin-bottom:10px; }
.step__head h3{ font-size:17px; font-weight:700; line-height:1.5; word-break:keep-all; margin:0; }
.step__head p{display:none;}
.step__thumb{ background:var(--green-150); }
.step__thumb img{ width:100%; height:auto; }
.step p{ text-align:center; padding:20px 22px 26px; font-size:14px; color:var(--muted); line-height:1.85; }
.flow__arrow{ display:flex; align-items:center; justify-content:center; color:var(--green-mid); padding:14px 0; }
.flow__arrow .icon{ width:26px; height:26px; transform:rotate(90deg); }
.flow__note{ text-align:center; font-size:13.5px; color:var(--hint); margin-top:36px; }

/* =========================================================
   事例（Before → After）
   ========================================================= */
.case-grid,.post_content .case-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(290px,1fr)); gap:24px; padding:0; }
.case-card{ overflow:hidden; background:#fff; border-radius:18px; box-shadow:0 6px 24px rgba(104,154,56,.10); transition:box-shadow .28s ease, transform .28s ease; }
.case-card:hover{ box-shadow:0 18px 40px rgba(124,179,66,.22); transform:translateY(-5px); }
.case-card__thumb{ aspect-ratio:4/3; overflow:hidden; background:var(--green-150); }
.case-card__thumb img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.case-card__body{ padding:24px 26px 26px; }
.case-card__body .tag{ margin-bottom:18px; }
.ba{ display:flex; align-items:center; gap:12px; }
.ba__col{ flex:1; }
.ba__label{ display:block; font-size:11px; font-weight:700; letter-spacing:.06em; margin-bottom:4px; }
.ba__label--before{ color:#B0B7A6; }
.ba__label--after{ color:var(--green); }
.ba__text{ font-size:14.5px; font-weight:700; line-height:1.5; color:#374151; }
.ba__text--after{ color:var(--green-deep); }
.ba__arrow{ flex:none; width:20px; height:20px; color:var(--green-mid); }
.case-card__client{ border-top:1px solid var(--line-3); margin-top:22px; padding-top:16px; font-size:12.5px; color:var(--hint); }

/* =========================================================
   パートナー
   ========================================================= */
.partner-grid,.post_content .partner-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:22px; padding:0; }
.partner-card,.post_content .partner-card{ display:flex; flex-direction:column; align-items:center; text-align:center; background:#fff; border-radius:18px; padding:30px 18px; box-shadow:0 6px 24px rgba(104,154,56,.10); transition:box-shadow .28s ease, transform .28s ease; margin:0; }
.partner-card:hover{ box-shadow:0 18px 40px rgba(124,179,66,.22); transform:translateY(-5px); }
.partner-card__avatar{ width:80px; height:80px; border-radius:50%; overflow:hidden; background:#fff; box-shadow:0 6px 16px rgba(104,154,56,.18); margin-bottom:16px; }
.partner-card__avatar img{ width:100%; height:100%; object-fit:cover; }
.partner-card__name{ font-size:15px; font-weight:700; color:var(--ink); }

/* =========================================================
   よくある質問（JSアコーディオン）
   ========================================================= */
.faq{ display:flex; flex-direction:column; gap:16px; }
.faq__item{ background:#fff; border:1px solid var(--line-2); border-radius:14px; box-shadow:0 2px 10px rgba(104,154,56,.06); overflow:hidden; }
.faq__h,.post_content h3.faq__h{ margin:0; font-size:inherit; font-weight:inherit; }
.faq__q{ width:100%; display:flex; align-items:center; gap:14px; background:none; border:none; cursor:pointer; text-align:left; font:inherit; color:var(--ink); padding:20px 24px; font-size:16px; font-weight:700; }
.faq__qmark{ flex:none; width:30px; height:30px; border-radius:50%; background:var(--green-100); color:var(--green-deep); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; }
.faq__label{ flex:1; }
.faq__toggle{ flex:none; position:relative; width:18px; height:18px; }
.faq__toggle::before, .faq__toggle::after{ content:""; position:absolute; background:var(--green); border-radius:1px; }
.faq__toggle::before{ top:8px; left:2px; width:14px; height:2px; }
.faq__toggle::after{ left:8px; top:2px; width:2px; height:14px; transition:opacity .2s ease, transform .2s ease; }
.faq__item.is-open .faq__toggle::after{ opacity:0; transform:rotate(90deg); }
.faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease; }
.faq__item.is-open .faq__a{ grid-template-rows:1fr; }
.faq__a-inner{ overflow:hidden; }
.faq__a-inner p{ padding:2px 24px 22px 68px; font-size:14.5px; color:var(--muted); line-height:1.9; }

/* =========================================================
   末尾CTA
   ========================================================= */
.final-cta{ position:relative; overflow:hidden; background:linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%); }
.final-cta__deco{ position:absolute; border-radius:50%; background:rgba(255,255,255,.08); pointer-events:none; }
.final-cta__deco--1{ top:-120px; right:-80px; width:360px; height:360px; }
.final-cta__deco--2{ bottom:-160px; left:-60px; width:320px; height:320px; background:rgba(255,255,255,.06); }
.final-cta__deco--3{ top:40px; left:12%; width:80px; height:80px; border-radius:22px; background:rgba(255,255,255,.05); transform:rotate(18deg); }
.final-cta__inner{ position:relative; z-index:1; max-width:760px; text-align:center; padding-top:72px; padding-bottom:72px; }
.final-cta__title,.post_content h2.final-cta__title{ font-size:30px; font-weight:900; line-height:1.45; color:#fff; margin:0 0 18px; }
.final-cta__lead{ font-size:16px; line-height:1.95; color:rgba(255,255,255,.92); margin:0 0 34px; }
.final-cta__note{ font-size:13px; color:rgba(255,255,255,.82); margin:20px 0 0; }
.final-cta .mitsukuru-cta-wrap{display:none;}

/* =========================================================
   フッター
   ========================================================= */
.site-footer{ background:#fff; border-top:1px solid var(--line); }
.site-footer__inner{ display:grid; gap:36px; padding-top:56px; padding-bottom:8px; }
.site-footer__brand img{ height:40px; width:auto; margin-bottom:18px; }
.site-footer__tagline{ font-size:14px; color:var(--muted); line-height:1.9; max-width:360px; }
.site-footer__links{ display:flex; flex-wrap:wrap; gap:48px; }
.foot-col__h{ font-size:13px; font-weight:800; letter-spacing:.06em; color:var(--ink); margin:0 0 16px; }
.foot-col ul{ display:flex; flex-direction:column; gap:13px; }
.foot-col a{ font-size:14px; color:var(--muted); transition:color .18s ease; }
.foot-col a:hover{ color:var(--green); }
.copy{ border-top:1px solid var(--line-3); margin-top:40px; padding:26px 0 32px; font-size:12.5px; color:var(--hint); }

/* =========================================================
   モーション
   ========================================================= */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none; }
  .btn, .pain-card, .make-card, .why-card, .case-card, .partner-card, .faq__a, .faq__toggle::after{ transition:none; }
}

/* =========================================================
   ブレークポイント：768px（タブレット）
   ========================================================= */
@media (min-width:768px){
  .container{ padding:0 32px; }
  .section{ padding:80px 0; }
  .section__head{ margin-bottom:52px; }
  .section__title,.post_content h2.section__title{ font-size:31px; }

  /* header */
  .nav{ display:block; }
  .nav-toggle{ display:none; }
  .nav__sp{ display:none; }
  .logo img{ height:40px; }

  /* hero */
  .hero{ padding:44px 0 52px; }
  .hero__title,.post_content .hero__title{ font-size:34px; }
  .btn-row .btn{ flex:0 0 auto; }

  /* value bridge / partners */
  .bridge{ grid-template-columns:1fr auto; padding:48px 52px; }
  .partner-grid,.post_content .partner-grid{ grid-template-columns:repeat(4, 1fr); }

  /* footer */
  .site-footer__inner{ grid-template-columns:1fr auto; align-items:start; gap:56px; padding-top:64px; }
  .site-footer__links{ gap:64px; }
}

/* =========================================================
   ブレークポイント：1024px（デスクトップ）
   ========================================================= */
@media (min-width:1024px){
  .section{ padding:92px 0; }
  .section__title,.post_content h2.section__title{ font-size:34px; }

  /* hero：テキスト左＋イラスト右（画像を大きく・上下の余白を圧縮） */
  .hero{ padding:24px 0 32px; }
  .hero__inner{ grid-template-columns:minmax(0,620px) minmax(0,1fr); gap:40px; align-items:stretch; }
  .hero__text{ align-self:center; }
  .hero__title,.post_content .hero__title{ font-size:40px; }
  .hero__lead{ font-size:17px; }
  .hero__figure{ align-self:stretch; display:flex; align-items:center; justify-content:center; }
  .hero__figure img{ width:100%; height:auto; max-height:100%; object-fit:contain; display:block; }

  /* 使い方：横並び＋右向き矢印 */
  .flow,.post_content .flow{ flex-direction:row; align-items:stretch; max-width:none; }
  .flow .step{ flex:1 1 0; }
  .flow__arrow{ flex:0 0 48px; padding:0; }
  .flow__arrow .icon{ transform:none; }

  /* 末尾CTA */
  .final-cta__inner{ padding-top:96px; padding-bottom:96px; }
  .final-cta__title,.post_content h2.final-cta__title{ font-size:38px; }
  .final-cta__lead{ font-size:17px; }
}

/* ======================================================================
   共通サイトナビ（gnav）— 下層ページ＆トップ共通のヘッダー／フッター。
   各ページのマークアップ自体はインラインスタイルを保持し、ここでは
   レスポンシブの表示切替・フッターの整列・フォーム入力・ハンバーガー
   開閉状態（JSで aria-expanded / .is-open を切替）だけを担う。
   ====================================================================== */
.footer-grid { display: flex; justify-content: space-between; gap: 56px; }
.footer-links { display: flex; gap: 72px; }
.gnav-desktop a, .gnav-actions a { white-space: nowrap; }

.ff-input { width: 100%; font-family: inherit; font-size: 15px; color: #2B2B2B; background: #ffffff; border: 1.5px solid #DCE5D0; border-radius: 8px; padding: 13px 15px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.ff-input::placeholder { color: #AEB6A4; }
.ff-input:focus { border-color: #7CB342; box-shadow: 0 0 0 3px rgba(124,179,66,0.20); }

@media (max-width: 1024px) {
  .gnav-desktop, .gnav-actions { display: none !important; }
  .gnav-burger { display: flex !important; }
}
@media (min-width: 1025px) {
  .gnav-mobile { display: none !important; }
}
@media (max-width: 760px) {
  .footer-grid { flex-direction: column; gap: 40px; }
  .footer-links { gap: 48px; }
}

/* ハンバーガー開閉（JS が .gnav-burger の aria-expanded と .gnav-mobile.is-open を切替） */
.gnav-mobile.is-open { display: block !important; }
.gnav-burger[aria-expanded="true"] span span:nth-child(1) { top: 8px !important; transform: rotate(45deg) !important; }
.gnav-burger[aria-expanded="true"] span span:nth-child(2) { opacity: 0 !important; }
.gnav-burger[aria-expanded="true"] span span:nth-child(3) { top: 8px !important; transform: rotate(-45deg) !important; }

/* =========================================================
   SP（768px以下）追加調整：見出し縮小・横スワイプ・縦長の圧縮
   （※ ベース定義より後に置き、SPで確実に上書きする）
   ========================================================= */
@media (max-width:767.98px){
  /* 4) 「作れるもの」h2 を「作りたいものは、」で改行（SPのみ） */
  br.sp-only{ display:inline; }

  /* 6) ヒーローh1をSPで1px小さく（PC/タブレットは据え置き） */
  .hero__title{ font-size:29px; }

  /* 7/A) 「ミツクルなら」のキャッチをSPで小さく＋余白を詰め、各行を1行に収める
     （既存の<br>で「を」の後ろを改行。PCは現状の2行を維持）
     見出し・ボタンともフォントを下げ、320px幅でも各行が折り返さないようにする */
  .bridge{ padding:26px 20px; gap:18px; }
  .bridge__label{ font-size:13px; margin-bottom:8px; }
  .bridge__lead{ font-size:14px; line-height:1.65; }
  .bridge .btn{ font-size:14px; padding:13px 24px; }

  /* 9) SPの縦長を圧縮：セクション余白・見出し下・ヒーロー・画像枠を詰める */
  .section{ padding:44px 0; }
  .section__head{ margin-bottom:28px; }
  .hero{ padding:20px 0 28px; }
  .hero__figure img{ width:auto; max-width:100%; max-height:248px; margin:0 auto; display:block; }
  .pain-card__thumb,.why-card__thumb{ aspect-ratio:16/10; }
  .pain-card__thumb{ margin-bottom:16px; }
  .pain-grid,.why-grid{ gap:18px; }

  /* 8) 「作れるもの」をSPのみ横スワイプ（カルーセル）。PC/タブレットはグリッド維持 */
  .make-grid,.post_content .make-grid{
    display:flex; grid-template-columns:none; gap:14px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    margin:0 -20px; padding:4px 20px 14px;
    scrollbar-width:none;
  }
  .make-grid::-webkit-scrollbar{ display:none; }
  .make-card{ flex:0 0 48%; scroll-snap-align:start; }
  /* 狭いカード幅でもタイトルが切れないよう、見出しを縦積み＋折返し可に */
  .make-card__body{ padding:18px 18px 22px; }
  .make-card__head{ flex-direction:column; align-items:flex-start; gap:10px; padding-bottom:10px; }
  .make-card__head h3{ word-break:auto-phrase; overflow-wrap:anywhere; }
}

/* =========================================================
   10) SP（768px以下）：ご利用の流れを 2×2 の田の字グリッドに
   （矢印は非表示。番号 STEP 01〜04 で順序が分かる。PC/タブレットは横並び＋矢印を維持）
   ========================================================= */
@media (max-width:767.98px){
  .flow,.post_content .flow{ display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:none; align-items:stretch; }
  .flow .step{ width:auto; }
  .flow__arrow{ display:none; }
  /* 2列幅でも崩れないよう余白・文字サイズを調整 */
  .step__head{ padding:16px 14px 10px; }
  .step__no{ font-size:11px; letter-spacing:.08em; margin-bottom:6px; }
  .step__head h3{ font-size:14.5px; line-height:1.45; word-break:auto-phrase; overflow-wrap:anywhere; }
  .step p{ padding:12px 14px 18px; font-size:12.5px; line-height:1.8; }
}

/* =========================================================
   11) 下層ページ共通：ページヘッダー（緑背景のタイトル帯）の高さを詰める
   - 対象は index 以外の全下層ページ（.page-head を付与）
   - PC は上下paddingと内部marginを 2〜3割カット
   - SP（768px以下）は約半分の高さまで圧縮し、h1 も少し小さく
   - 文言・色は変更せず、縦の余白（高さ）だけ調整
   - インラインstyle を上書きするため !important を使用
   ========================================================= */
.page-head{ padding-top:40px !important; padding-bottom:42px !important; }
.page-head > nav{ margin-bottom:14px !important; }      /* パンくず */
.page-head > nav + div{ margin-bottom:12px !important; } /* ラベル（バッジ）*/
.page-head > div:first-child{ margin-bottom:9px !important; } /* ラベル（mypage 等、navなし）*/
.page-head h1{ margin-bottom:11px !important; }

@media (max-width:767.98px){
  .page-head{ padding-top:22px !important; padding-bottom:24px !important; }
  .page-head > nav{ margin-bottom:10px !important; }
  .page-head > nav + div{ margin-bottom:9px !important; }
  .page-head > div:first-child{ margin-bottom:7px !important; }
  .page-head h1{ font-size:26px !important; line-height:1.4 !important; margin-bottom:8px !important; }
}