/* ============================================================
   Issy Creative Studio — 共通デザインシステム
   型：A 親しみ（丸ゴシック）× 紺で信頼 ／ モーション m-soft
   モチーフ：手書きのチェック（段取りを先に渡す）
   ============================================================ */
:root{
  --navy:#1F3B73; --navy-deep:#16294F; --navy-ink:#1E2633;
  --sub:#E9EEF5; --accent:#E8913A; --accent-deep:#C9741F;
  --bg:#FBFAF7; --paper:#FFFFFF; --muted:#5C6676; --note:#7A8291; --line:#DDE3EC;
  --f-head:'Zen Maru Gothic',sans-serif; --f-body:'Zen Kaku Gothic New',sans-serif; --f-en:'Space Grotesk',sans-serif;
  --wrap:1120px; --radius:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;word-break:auto-phrase;line-break:strict;overflow-wrap:break-word;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg) url(../images/texture-paper.jpg) center/600px repeat;color:var(--navy-ink);font-family:var(--f-body);font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,.lead,.btn,summary{word-break:auto-phrase;text-wrap:pretty}
.zp{white-space:nowrap}
.skip-link{position:absolute;left:12px;top:-60px;z-index:200;background:var(--navy);color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:700}
.skip-link:focus{top:12px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.l-wrap{width:min(var(--wrap),calc(100% - 48px));margin:0 auto;position:relative;z-index:1}
.c-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-en);font-weight:700;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent-deep)}
.c-eyebrow::before{content:"";width:26px;height:2px;background:currentColor;border-radius:2px}
.c-h2{font-family:var(--f-head);font-weight:900;font-size:clamp(27px,3.6vw,40px);line-height:1.45;color:var(--navy);margin:12px 0 0;letter-spacing:.01em}
.c-lead{color:var(--muted);font-size:16px;max-width:34em;margin:18px 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 30px;border-radius:999px;font-family:var(--f-head);font-weight:700;font-size:16px;text-decoration:none;letter-spacing:.04em;white-space:nowrap;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.btn--accent{background:var(--accent);color:#fff;box-shadow:0 14px 28px -14px rgba(201,116,31,.75)}
.btn--accent:hover{background:var(--accent-deep);transform:translateY(-2px)}
.btn--ghost{background:#fff;color:var(--navy);border:2px solid var(--navy)}
.btn--ghost:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
.btn .arw{font-family:var(--f-en);font-weight:700}
/* 手書きチェック（シグネチャーモチーフ） */
.c-check{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.18em}
.c-check path{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
section{position:relative}

/* ---------- ヘッダー（header-01：透明→スクロールで白） ---------- */
.l-header{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .35s,box-shadow .35s}
.l-header__in{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 28px;transition:padding .35s}
.l-header.is-solid{background:rgba(251,250,247,.95);backdrop-filter:blur(8px);box-shadow:0 8px 24px -18px rgba(22,41,79,.45)}
.l-header.is-solid .l-header__in{padding:10px 28px}
.c-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy)}
.c-logo img{width:38px;height:auto}
.c-logo span{font-family:var(--f-en);font-weight:700;font-size:19px;letter-spacing:.02em;white-space:nowrap}
.l-nav{display:flex;align-items:center;gap:26px}
.l-nav a{text-decoration:none;font-size:14px;font-weight:500;color:var(--navy-ink);position:relative;white-space:nowrap}
.l-nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--accent);transition:width .25s}
.l-nav a:not(.btn):hover::after,.l-nav a[aria-current="page"]::after{width:100%}
.l-nav .btn{min-height:44px;padding:0 22px;font-size:14px}
.c-menu-btn{display:none;width:48px;height:48px;border:0;border-radius:12px;background:var(--navy);color:#fff;cursor:pointer;position:relative}
.c-menu-btn span,.c-menu-btn span::before,.c-menu-btn span::after{position:absolute;left:14px;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,top .3s}
.c-menu-btn span{top:23px}.c-menu-btn span::before{content:"";left:0;top:-7px}.c-menu-btn span::after{content:"";left:0;top:7px}
.c-menu-btn[aria-expanded="true"] span{background:transparent}
.c-menu-btn[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.c-menu-btn[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
/* スマホのドロワー（spmenu-01） */
.c-drawer{position:fixed;inset:0;z-index:99;visibility:hidden;pointer-events:none;overflow:hidden}
.c-drawer__bg{position:absolute;inset:0;background:rgba(22,41,79,.45);opacity:0;transition:opacity .3s}
.c-drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(86vw,360px);background:var(--bg);padding:92px 28px 32px;transform:translateX(100%);transition:transform .35s ease;overflow-y:auto}
.c-drawer.is-open{visibility:visible;pointer-events:auto}
.c-drawer.is-open .c-drawer__bg{opacity:1}
.c-drawer.is-open .c-drawer__panel{transform:none}
.c-drawer__panel ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.c-drawer__panel li a{display:flex;justify-content:space-between;align-items:center;padding:16px 4px;border-bottom:1px solid var(--line);text-decoration:none;font-weight:700;font-family:var(--f-head);color:var(--navy)}
.c-drawer__panel li a::after{content:"→";font-family:var(--f-en);color:var(--accent)}
.c-drawer__panel .btn{width:100%;margin-top:26px}
body.is-locked{overflow:hidden}

/* ---------- ① ファーストビュー（fv-52 SearchType を移植） ---------- */
.hero{position:relative;width:100%;min-height:760px;min-height:max(760px,100svh);overflow:hidden;background:var(--bg) url(../images/fv.jpg) center/cover no-repeat;display:flex;align-items:center}
.hero::after{content:"";position:absolute;right:-6%;bottom:-18%;width:52vw;max-width:780px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.75),rgba(255,255,255,0) 68%);mix-blend-mode:soft-light;z-index:0;pointer-events:none}
.hero-inner{position:relative;z-index:1;width:min(1340px,calc(100% - 56px));margin:0 auto;padding:140px 0 96px;display:grid;grid-template-columns:1fr;justify-items:center;text-align:center}
.c-fv__text{position:relative;z-index:2;width:100%;max-width:860px}
.c-fv__search{position:relative;max-width:560px;margin:0 auto;text-align:left}
.c-fv__deco{position:absolute;z-index:0;width:clamp(64px,7vw,104px);opacity:.55;mix-blend-mode:multiply;pointer-events:none}
.c-fv__deco.d1{left:7%;top:24%;transform:rotate(-8deg)}
.c-fv__deco.d2{left:12%;bottom:16%;transform:rotate(6deg)}
.c-fv__deco.d3{right:8%;top:28%;transform:rotate(7deg)}
.c-fv__deco.d4{right:11%;bottom:14%;transform:rotate(-5deg)}
.j .c-fv__deco{animation:fvFloat 7s ease-in-out infinite alternate}
.j .c-fv__deco.d2,.j .c-fv__deco.d4{animation-delay:-3.5s}
@keyframes fvFloat{to{translate:0 -14px}}
.c-fv__box{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid #CBD5E3;border-radius:999px;padding:14px 22px;box-shadow:0 18px 40px -26px rgba(22,41,79,.55)}
.c-fv__box svg{flex:none}
.c-fv__q{flex:0 1 auto;min-width:0;font-size:17px;font-weight:500;color:var(--navy-ink);white-space:nowrap;overflow:hidden;text-overflow:clip}
.c-fv__cursor{display:inline-block;width:2px;height:1.15em;background:var(--accent);vertical-align:-3px;margin-left:2px}
.j .c-fv__cursor{animation:fvBlink 1s steps(1) infinite}
@keyframes fvBlink{50%{opacity:0}}
.c-fv__sug{position:absolute;left:0;right:0;top:calc(100% + 8px);background:#fff;border-radius:18px;box-shadow:0 22px 44px -22px rgba(22,41,79,.5);overflow:hidden;opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .3s ease;z-index:3;pointer-events:none}
.c-fv__sug.is-on{opacity:1;transform:none}
.c-fv__sug div{display:flex;align-items:center;gap:10px;padding:9px 20px;font-size:14px;color:var(--muted);border-top:1px solid #EEF2F7}
.c-fv__sug div:first-child{border-top:0}
.c-fv__sug b{color:var(--navy-ink);font-weight:700}
.c-fv__h1{font-family:var(--f-head);font-weight:900;font-size:clamp(28px,4.4vw,60px);line-height:1.45;color:var(--navy);margin:104px 0 0;letter-spacing:.005em}
.c-fv__h1 .l{display:block;white-space:nowrap}
.c-fv__h1 .mk{background:linear-gradient(transparent 68%,rgba(232,145,58,.38) 68%)}
.c-fv__sub{margin:24px auto 0;font-size:18px;color:var(--navy-ink);max-width:30em}
.c-fv__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px}
.c-fv__proof{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;margin:26px 0 0;padding:0;list-style:none;font-size:14px;color:var(--muted)}
.c-fv__proof li{display:inline-flex;align-items:center;gap:6px}
.c-fv__proof b{color:var(--navy);font-family:var(--f-en)}

/* ---------- ② お悩み（sec-intro-15 あるあるチェックリスト） ---------- */
.c-worry{padding:112px 0 104px;background:var(--bg)}
.c-worry__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.c-worry__grid > *,.c-worry__item > *{min-width:0}
.c-worry__head{position:sticky;top:110px}
.c-worry__sheet{background:#fff;border:1px solid var(--line);border-radius:6px;padding:clamp(22px,4vw,44px);box-shadow:0 26px 54px -32px rgba(22,41,79,.35);position:relative}
.c-worry__sheet::before{content:"";position:absolute;left:0;top:0;width:100%;height:6px;background:var(--navy);border-radius:6px 6px 0 0}
.c-worry__st{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:6px;font-family:var(--f-head);font-weight:700;color:var(--navy)}
.c-worry__st small{font-family:var(--f-en);font-size:12px;letter-spacing:.2em;color:var(--note)}
.c-worry__item{display:grid;grid-template-columns:28px 1fr 64px;gap:16px;align-items:center;padding:18px 4px;border-bottom:1px dashed var(--line)}
.c-worry__item:last-of-type{border-bottom:0}
.c-worry__cb{position:relative;width:26px;height:26px;border:2px solid var(--navy);border-radius:6px;background:#fff}
.c-worry__cb svg{position:absolute;left:-4px;top:-9px;width:34px;height:34px;overflow:visible}
.c-worry__cb path{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.c-worry__tx{font-weight:700;font-size:16.5px;line-height:1.7}
.c-worry__tx small{display:block;font-weight:400;font-size:13.5px;color:var(--muted);margin-top:2px}
.c-worry__ic{width:64px;height:64px;object-fit:contain}
.c-worry__tally{margin-top:20px;background:var(--sub);border-radius:10px;padding:18px 22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.c-worry__score{font-family:var(--f-en);font-weight:700;font-size:34px;color:var(--navy);white-space:nowrap}
.c-worry__score small{font-size:.45em;color:var(--muted)}
.c-worry__tally p{margin:0;flex:1;min-width:15em;font-size:15px}

/* ---------- ③ 変化の約束（sec-vs-11 フロム・トゥ） ---------- */
.c-promise{padding:112px 0 120px;background:url(../images/bg-blue-wash.jpg) center/cover no-repeat}
.c-promise::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(31,59,115,.05) 1px,transparent 1px);background-size:100% 44px;-webkit-mask-image:linear-gradient(#000,transparent 80%);mask-image:linear-gradient(#000,transparent 80%);pointer-events:none;mix-blend-mode:multiply}
.c-promise__body{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:20px;align-items:end}
.c-promise__body p{margin:0 0 14px;font-size:17px}
.c-promise__list{margin-top:48px;border-top:1px solid #C9D3E2}
.c-promise__row{display:grid;grid-template-columns:minmax(0,1fr) 84px minmax(0,1.15fr);gap:24px;align-items:center;padding:30px 4px;border-bottom:1px solid #C9D3E2}
.c-promise__tag{display:block;font-size:12px;letter-spacing:.2em;margin-bottom:6px;font-weight:700}
.c-promise__from .c-promise__tag{color:var(--note)}
.c-promise__to .c-promise__tag{color:var(--accent-deep)}
.c-promise__from p{margin:0;color:var(--muted);font-size:16px}
.c-promise__ftxt{position:relative;display:inline-block}
.c-promise__strike{position:absolute;left:-3px;right:-3px;top:54%;height:1.5px;background:var(--accent);transform-origin:left center;opacity:.85}
.c-promise__to p{margin:0;font-family:var(--f-head);font-weight:700;font-size:clamp(18px,2.2vw,22px);line-height:1.6;color:var(--navy)}
.c-promise__uw{position:relative;display:inline}
.c-promise__arrow{position:relative;height:12px;display:block}
.c-promise__shaft{position:absolute;left:0;right:9px;top:50%;height:2px;background:var(--navy);transform-origin:left center}
.c-promise__tip{position:absolute;right:0;top:50%;width:10px;height:10px;border-top:2px solid var(--navy);border-right:2px solid var(--navy);transform:translateY(-50%) rotate(45deg)}

/* ---------- ④ 選ばれる理由（sec-reasons-02 左sticky＋特大番号） ---------- */
.c-reasons{padding:120px 0}
.c-reasons__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:64px;align-items:start}
.c-reasons__side{position:sticky;top:110px}
.c-reasons__side .mark{margin-top:26px;width:64px;height:4px;background:var(--accent);border-radius:4px}
.c-reasons__list{border-top:2px solid var(--navy)}
.c-reasons__item{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start;padding:40px 4px;border-bottom:1px solid var(--line)}
.c-reasons__n{font-family:var(--f-en);font-weight:700;font-size:clamp(56px,7vw,96px);line-height:.85;color:transparent;-webkit-text-stroke:1.6px var(--navy);transition:color .3s}
.c-reasons__item:hover .c-reasons__n{color:rgba(31,59,115,.08)}
.c-reasons__ic{float:right;width:88px;height:88px;object-fit:contain;margin:0 0 10px 18px;mix-blend-mode:multiply}
.c-reasons__item h3{font-family:var(--f-head);font-weight:900;font-size:clamp(20px,2.3vw,25px);color:var(--navy);margin:0 0 10px}
.c-reasons__item p{color:var(--muted);margin:0}

/* ---------- ⑤-1 制作実績（sec-gallery-07 ポラロイド散乱→整列） ---------- */
.c-works{padding:120px 0;background:linear-gradient(rgba(251,250,247,.86),rgba(251,250,247,.86)),url(../images/bg-dot.jpg) center/520px repeat;overflow:hidden}
.c-works .c-lead,.c-works__ind{color:var(--navy-ink)}
.c-works__head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:52px}
.c-works__desk{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 30px}
.c-works__pol{margin:0;background:#fff;padding:12px 12px 0;box-shadow:0 18px 36px -18px rgba(22,41,79,.45);text-decoration:none;color:inherit;display:block;transition:box-shadow .3s}
.c-works__pol img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.c-works__pol.is-mock img{object-position:bottom}
.c-works__cap{padding:12px 4px 16px;font-size:14px;line-height:1.6}
.c-works__cap b{display:block;font-family:var(--f-head);font-size:16px;color:var(--navy)}
.c-works__cap span{color:var(--muted);font-family:var(--f-en);font-size:12px;letter-spacing:.06em}
.c-works__more{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;background:var(--navy);color:#fff;text-decoration:none;border-radius:4px;min-height:260px;padding:28px;text-align:center;box-shadow:0 18px 36px -18px rgba(22,41,79,.6);transition:background .3s}
.c-works__more:hover{background:var(--navy-deep)}
.c-works__more .num{font-family:var(--f-en);font-weight:700;font-size:44px;line-height:1}
.c-works__more .num small{font-size:16px;margin-left:4px}
.c-works__more .t{font-family:var(--f-head);font-weight:700;font-size:17px}
.c-works__more .arw{font-family:var(--f-en);color:var(--accent)}
.c-works__ind{margin:40px 0 0;font-size:14px;color:var(--muted)}

/* ---------- ⑤-2 お客様の声（sec-voice-13 インタビュー＋索引） ---------- */
.c-voice{padding:112px 0 128px;background:var(--bg)}
.c-voice__top{display:grid;grid-template-columns:.82fr 1.18fr;gap:52px;align-items:stretch}
.c-voice__panel{position:relative;background:var(--navy);color:#fff;border-radius:6px;padding:44px 36px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;overflow:hidden}
.c-voice__panel::before{content:"";position:absolute;left:-12px;top:-12px;width:96px;height:96px;border-left:3px solid var(--accent);border-top:3px solid var(--accent)}
.c-voice__panel .stars{width:150px;filter:brightness(0) invert(1);opacity:.9;mix-blend-mode:screen}
.c-voice__stats{display:grid;gap:14px;margin:0}
.c-voice__stats div{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:12px}
.c-voice__stats dt{font-size:14px;opacity:.85}
.c-voice__stats dd{margin:0;font-family:var(--f-en);font-weight:700;font-size:28px}
.c-voice__stats dd small{font-family:var(--f-body);font-size:13px;font-weight:500;margin-left:4px}
.c-voice__src{font-size:12.5px;opacity:.75;margin:0}
.c-voice__feature blockquote{margin:22px 0 0;font-family:var(--f-head);font-weight:700;font-size:clamp(18px,2vw,22px);line-height:1.8;color:var(--navy-ink)}
.c-voice__feature blockquote .qm{color:var(--accent);font-size:1.4em;line-height:0}
.c-voice__feature figcaption{display:flex;align-items:center;gap:12px;margin-top:20px;font-size:14px;color:var(--muted)}
.c-voice__feature figcaption img{width:48px;height:48px;border-radius:50%}
.c-voice__index{list-style:none;margin:56px 0 0;padding:0;border-top:2px solid var(--navy)}
.c-voice__row{display:grid;grid-template-columns:52px 1fr 190px;gap:20px;align-items:start;padding:22px 4px;border-bottom:1px solid var(--line);transition:background .25s,padding .25s}
.c-voice__row:hover{background:rgba(31,59,115,.04);padding-left:12px}
.c-voice__row .no{font-family:var(--f-en);font-size:13px;color:var(--accent-deep);font-weight:700;padding-top:3px}
.c-voice__row p{margin:0;font-size:15.5px}
.c-voice__row .nm{font-size:13.5px;color:var(--muted);text-align:right}

/* ---------- ⑥ サービスと料金（sec-pricing-05 ＋罫線インデックス） ---------- */
.c-price{padding:120px 0;background:linear-gradient(160deg,#EEF3FA,#E3EBF6)}
.c-price__head{text-align:center;max-width:720px;margin:0 auto 46px}
.c-price__head .c-lead{margin-left:auto;margin-right:auto}
.c-price__svc{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:26px 0 0;padding:0;list-style:none}
.c-price__svc li{background:#fff;border:1px solid #CFDCEC;border-radius:999px;padding:7px 16px;font-size:14px;font-weight:500;color:var(--navy)}
.c-price__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.c-price__card{position:relative;background:#fff;border:1.5px solid #CFDCEC;border-radius:18px;padding:34px 28px 30px;box-shadow:0 24px 50px -34px rgba(31,59,115,.55);display:flex;flex-direction:column}
.c-price__card.is-pick{border:2px solid var(--accent)}
.c-price__pick{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:12.5px;font-weight:700;border-radius:999px;padding:4px 16px;white-space:nowrap}
.c-price__card h3{font-family:var(--f-head);font-weight:900;font-size:20px;color:var(--navy);margin:0;text-align:center}
.c-price__for{text-align:center;color:var(--muted);font-size:14px;margin:6px 0 16px;min-height:3.2em}
.c-price__yen{text-align:center;font-family:var(--f-en);font-weight:700;font-size:40px;color:var(--navy-ink);line-height:1.2;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;margin:0 0 18px}
.c-price__yen small{font-family:var(--f-body);font-size:15px;color:var(--muted);font-weight:500;margin-left:2px}
.c-price__card ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14.5px}
.c-price__card li{display:flex;gap:8px;align-items:flex-start}
.c-price__card li .c-check{flex:none;margin-top:3px}
.c-price__maint{margin-top:64px;background:#fff;border-radius:18px;padding:36px clamp(20px,4vw,44px)}
.c-price__maint h3{font-family:var(--f-head);font-weight:900;font-size:22px;color:var(--navy);margin:0 0 6px}
.c-price__maint > p{margin:0 0 18px;color:var(--muted);font-size:14.5px}
.c-price__tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.c-price__tbl th,.c-price__tbl td{padding:16px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.c-price__tbl thead th{font-size:12px;letter-spacing:.14em;color:var(--note);border-bottom:2px solid var(--navy);font-weight:700}
.c-price__tbl tbody th{font-family:var(--f-head);font-weight:700;color:var(--navy);white-space:nowrap}
.c-price__tbl .yen{font-family:var(--f-en);font-weight:700;font-size:20px;white-space:nowrap}
.c-price__notes{margin:28px 0 0;padding-left:1.2em;font-size:13.5px;color:var(--muted);display:grid;gap:4px}

/* ---------- ⑦ ココナラ（sec-links-04 斜めスプリット2導線） ---------- */
.c-route{padding:112px 0 120px;background:var(--bg)}
/* 出てくる前のアニメーション（横から寄ってくるカード）で、スマホが横にずれないようにする */
#main>section{overflow-x:clip}
.c-route__intro{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:40px}
.c-route__intro p{margin:0 0 12px;font-size:16px}
.c-route__duo{position:relative;height:400px}
.c-route__lk{position:absolute;inset:0;overflow:hidden;text-decoration:none;display:flex;align-items:flex-end;transition:filter .35s}
.c-route__lk.a{clip-path:polygon(0 0,56% 0,48% 100%,0 100%);background:var(--navy);color:#fff}
.c-route__lk.b{clip-path:polygon(56% 0,100% 0,100% 100%,48% 100%);background:url(../images/bg-blue-wash.jpg) center/cover;color:var(--navy)}
.c-route__lk:hover{filter:brightness(1.06)}
.c-route__cap{position:relative;padding:44px;max-width:44%}
.c-route__lk.b .c-route__cap{margin-left:auto;text-align:right}
.c-route__en{font-family:var(--f-en);font-size:12px;letter-spacing:.22em;font-weight:700;color:var(--accent)}
.c-route__ja{font-family:var(--f-head);font-weight:900;font-size:clamp(22px,2.6vw,30px);margin:6px 0 10px;line-height:1.4}
.c-route__cap ul{list-style:none;margin:0;padding:0;font-size:14.5px;display:grid;gap:4px}
.c-route__go{display:inline-block;margin-top:16px;font-family:var(--f-head);font-weight:700;border-bottom:2px solid var(--accent);padding-bottom:2px}
.c-route__badge{display:inline-flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:12px;font-size:13px}
.c-route__badge span{background:#fff;border-radius:999px;padding:3px 12px;color:var(--navy);font-weight:700}

/* ---------- ⑧ 制作の流れ（sec-process-14 スイムレーン） ---------- */
.c-flow{padding:112px 0 132px;background:linear-gradient(rgba(251,250,247,.86),rgba(251,250,247,.86)),url(../images/bg-dot.jpg) center/520px repeat}
.c-flow__head{text-align:center}
.c-flow .c-lead{color:var(--navy-ink)}
.c-flow__head .c-lead{margin-left:auto;margin-right:auto}
.c-flow__legend{display:grid;grid-template-columns:1fr 64px 1fr;gap:0 28px;margin:50px 0 10px}
.c-flow__legend span{font-family:var(--f-head);font-weight:700;font-size:14px;padding-bottom:10px}
.c-flow__lg-you{color:var(--accent-deep);text-align:right;border-bottom:2px solid var(--accent)}
.c-flow__lg-we{color:var(--navy);border-bottom:2px solid var(--navy)}
.c-flow__lanes{position:relative;padding:26px 0 6px}
.c-flow__lanes::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:#D3DBE7;transform:translateX(-50%)}
.c-flow__prog{position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--accent),var(--navy));transform:translateX(-50%) scaleY(0);transform-origin:top center;z-index:1}
.c-flow__row{display:grid;grid-template-columns:1fr 64px 1fr;gap:0 28px;align-items:center;margin-bottom:30px;position:relative}
.c-flow__node{grid-column:2;justify-self:center;width:48px;height:48px;border-radius:50%;background:#fff;border:2px solid var(--navy);display:grid;place-items:center;font-family:var(--f-en);font-weight:700;font-size:14px;color:var(--navy);position:relative;z-index:2}
.c-flow__card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px 20px;box-shadow:0 18px 40px -32px rgba(22,41,79,.45);position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.c-flow__card b{display:block;font-size:15.5px;line-height:1.6;color:var(--navy-ink)}
.c-flow__card p{margin:2px 0 0;font-size:13.5px;color:var(--muted)}
.c-flow__card img{width:52px;height:52px;object-fit:contain;mix-blend-mode:multiply}
.c-flow__you{grid-column:1;border-top:3px solid var(--accent)}
.c-flow__we{grid-column:3;border-top:3px solid var(--navy)}
.c-flow__rest{grid-column:1;justify-self:end;color:var(--navy-ink);font-size:13.5px;font-weight:700;margin:0;padding:8px 16px;background:#fff;border:1px dashed var(--accent);border-radius:999px}
.c-flow__goal{text-align:center;margin-top:8px;position:relative;z-index:2}
.c-flow__goal span{display:inline-block;background:var(--navy);color:#fff;font-weight:700;font-size:14px;letter-spacing:.06em;border-radius:999px;padding:11px 30px}

/* ---------- ⑨ 代表あいさつ（sec-message-07 手書きノート） ---------- */
.c-greet{padding:120px 0 128px;background:var(--bg)}
.c-greet__body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,3.6vw,48px);align-items:start;margin-top:48px}
.c-greet__memo{position:relative;background-color:#FFFEFA;background-image:repeating-linear-gradient(180deg,transparent 0 35px,#DCE3EE 35px 36px);padding:54px 46px 120px;transform:rotate(-.5deg);box-shadow:0 26px 60px -30px rgba(22,41,79,.4)}
.c-greet__tape{position:absolute;top:-15px;left:50%;width:150px;height:30px;margin-left:-75px;transform:rotate(1.6deg);background:rgba(232,145,58,.4)}
.c-greet__memo h3{display:inline-block;margin:0 0 22px;padding-bottom:4px;font-family:var(--f-head);font-weight:900;font-size:clamp(20px,2.6vw,26px);line-height:1.5;color:var(--navy);border-bottom:3px double var(--accent)}
.c-greet__memo p{margin:0 0 36px;font-size:clamp(15.5px,1.8vw,17px);line-height:36px}
.c-greet__memo p.em{color:var(--navy)}
.c-greet__sign{margin:0;text-align:right;font-family:var(--f-head);font-weight:700;font-size:18px;letter-spacing:.12em}
.c-greet__fusen{position:absolute;left:-14px;bottom:24px;width:170px;padding:14px 14px 18px;background:#FFE7A8;color:#5A4614;font-size:14px;line-height:1.7;transform:rotate(-3deg);box-shadow:0 8px 18px rgba(0,0,0,.12)}
.c-greet__shot{position:relative;margin:14px 0 0;background:#fff;padding:10px 10px 14px;border:1px solid rgba(22,41,79,.1);box-shadow:0 16px 34px -14px rgba(22,41,79,.36);transform:rotate(1.6deg)}
.c-greet__shot img{width:100%;aspect-ratio:1;object-fit:cover}
.c-greet__shot figcaption{margin-top:12px;font-size:14px;color:var(--muted)}
.c-greet__clip{position:absolute;top:-13px;left:22px;width:70px;height:24px;transform:rotate(-4deg);background:rgba(31,59,115,.3)}
.c-greet__facts{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:10px;font-size:14.5px}
.c-greet__facts li{display:flex;gap:8px}

/* ---------- ブログ新着（sec-news-03 左見出し×サムネ点線リスト） ---------- */
.c-news{padding:104px 0;background:var(--bg)}
.c-news__grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:56px;align-items:start}
.c-news__head .btn{margin-top:26px}
.c-news__list{list-style:none;margin:0;padding:0;border-top:1px dashed #C9D3E2}
.c-news__item{display:grid;grid-template-columns:176px 1fr;gap:22px;align-items:center;padding:20px 4px;border-bottom:1px dashed #C9D3E2;text-decoration:none;color:inherit;transition:background .25s}
.c-news__item:hover{background:rgba(31,59,115,.04)}
.c-news__item img{width:100%;aspect-ratio:1200/630;object-fit:cover;border-radius:6px}
.c-news__item time{display:block;font-family:var(--f-en);font-size:13px;color:var(--note)}
.c-news__item b{font-family:var(--f-head);font-weight:700;font-size:17px;color:var(--navy);line-height:1.6}

/* ---------- ⑩ よくある質問（sec-faq-02 2カラム＋下線ドロー） ---------- */
.c-faq{padding:120px 0;background:rgba(255,255,255,.6);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.c-faq__headwrap{position:relative;display:block;width:max-content;max-width:100%}
.c-faq__uline{width:100%;height:10px;overflow:visible;display:block}
.c-faq__uline path{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round}
.c-faq__grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 56px;margin-top:56px}
.c-faq__q{display:flex;gap:14px;align-items:baseline}
.c-faq__qn{font-family:var(--f-en);font-weight:700;font-size:28px;color:var(--accent);line-height:1;flex:none}
.c-faq__q h3{font-family:var(--f-head);font-weight:700;font-size:clamp(17px,1.9vw,19px);color:var(--navy);margin:0;line-height:1.6}
.c-faq__a{margin:12px 0 0 42px;font-size:15px;color:var(--muted)}

/* ---------- ⑪ 最終CTA（sec-cta-14 送ったあとは こうなります） ---------- */
.c-cta{padding:112px 0 124px;background:var(--navy);color:#fff;overflow:hidden}
.c-cta::before{content:"";position:absolute;inset:0;background:url(../images/decor-handline.jpg) center/cover;mix-blend-mode:multiply;opacity:.55;pointer-events:none;z-index:0}
.c-cta__top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:52px;align-items:center}
.c-cta .c-eyebrow{color:var(--accent)}
.c-cta .c-h2{color:#fff}
.c-cta__lead{margin:20px 0 0;font-size:16.5px;color:rgba(255,255,255,.88);max-width:30em}
.c-cta__btn{margin-top:32px;display:flex;justify-content:space-between;max-width:440px;min-height:68px;font-size:18px}
.c-cta__calm{margin:14px 0 0;font-size:14.5px;color:rgba(255,255,255,.8)}
.c-cta__calm b{color:#fff}
.c-cta__side{position:relative;justify-self:center;width:min(100%,380px);display:flex;flex-direction:column;align-items:center}
.c-cta__side img{width:100%;filter:drop-shadow(0 26px 30px rgba(0,0,0,.25))}
/* 吹き出しはイラストの上に置き、顔にかからないようにする（しっぽでイラストを指す） */
.c-cta__note{order:-1;position:relative;margin:0 0 4px;background:#fff;color:var(--navy);border-radius:16px;padding:12px 18px;font-size:13.5px;font-weight:700;line-height:1.6;text-align:center;box-shadow:0 14px 30px -16px rgba(0,0,0,.45)}
.c-cta__note::after{content:"";position:absolute;left:50%;bottom:-9px;width:18px;height:18px;background:#fff;transform:translateX(-50%) rotate(45deg);border-radius:0 0 4px 0}
.c-cta__flow{margin:64px 0 0;background:#fff;color:var(--navy-ink);border-radius:14px;padding:34px 38px 38px}
.c-cta__flow h3{font-family:var(--f-head);font-weight:900;font-size:clamp(18px,1.7vw,21px);color:var(--navy);margin:0 0 26px}
.c-cta__steps{--gap:26px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);list-style:none;margin:0;padding:0}
.c-cta__step{position:relative;min-width:0}
.c-cta__badge{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--navy);font-family:var(--f-en);font-weight:700;color:var(--navy)}
.c-cta__step.is-you .c-cta__badge{background:var(--accent);border-color:var(--accent);color:#fff}
.c-cta__link{position:absolute;left:48px;right:calc(-1 * var(--gap));top:19px;height:2px;background:#D3DBE7;transform-origin:0 0}
.c-cta__step h4{margin:16px 0 0;font-family:var(--f-head);font-weight:700;font-size:17px;color:var(--navy)}
.c-cta__time{display:inline-block;margin-top:6px;background:var(--sub);color:var(--navy);font-size:13px;font-weight:700;border-radius:999px;padding:2px 12px}
.c-cta__step p{margin:10px 0 0;font-size:14px;color:var(--muted)}

/* ---------- フッター（footer-13 NAP型） ---------- */
.l-footer{position:relative;background:var(--navy-deep);color:#E9EEF5;overflow:hidden}
.l-footer::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(640px 420px at 88% -8%,rgba(232,145,58,.12),transparent 62%)}
.l-footer__top{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;padding:64px 0 38px;border-bottom:1px solid rgba(255,255,255,.12)}
.l-footer__brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff}
.l-footer__brand img{width:52px}
.l-footer__brand b{display:block;font-family:var(--f-en);font-size:26px;letter-spacing:.02em}
.l-footer__brand small{display:block;font-size:13px;opacity:.75;font-weight:500}
.l-footer__grid{display:grid;grid-template-columns:1.1fr 1fr 1.1fr;gap:0 44px;padding:44px 0}
.l-footer__blk+.l-footer__blk{border-left:1px solid rgba(255,255,255,.12);padding-left:44px}
.l-footer__sec{font-family:var(--f-en);font-size:12px;letter-spacing:.24em;color:var(--accent);margin:0 0 16px;font-weight:700}
.l-footer__nap{margin:0;display:grid;grid-template-columns:auto 1fr;gap:0 18px;font-size:14px}
.l-footer__nap dt{color:#AEB9CC;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.l-footer__nap dd{margin:0;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.l-footer__nap a{color:#fff}
.l-footer__reply{margin:0;padding:0;list-style:none;font-size:14px;display:grid;gap:0}
.l-footer__reply li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.l-footer__reply li span:first-child{color:#AEB9CC}
.l-footer__chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.l-footer__chips li{border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 14px;font-size:13px}
.l-footer__note{font-size:13px;color:#AEB9CC;margin:14px 0 0}
.l-footer__low{border-top:1px solid rgba(255,255,255,.12)}
.l-footer__low .l-wrap{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.l-footer__nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.l-footer__nav a{display:inline-block;padding:14px 0;font-size:13px;color:#C8D1E0;text-decoration:none}
.l-footer__nav a:hover{color:#fff}
.l-footer__cp{font-family:var(--f-en);font-size:12px;color:#AEB9CC;padding:14px 0}

/* ---------- 演出の初期状態（JSがあるときだけ隠す＝JSなしでも全部読める） ---------- */
.j [data-rise]{opacity:0;transform:translateY(26px)}

/* ---------- レスポンシブ ---------- */
@media (max-width:1024px){
  .l-nav a:not(.btn){display:none}
  .c-menu-btn{display:block}
  .c-route__cap{max-width:46%;padding:32px}
}
@media (max-width:900px){
  .hero{min-height:auto}
  .hero-inner{padding:120px 0 72px}
  .c-fv__deco{display:none}
}
@media (max-width:768px){
  body{font-size:15.5px}
  .l-nav{display:none}
  .l-header__in,.l-header.is-solid .l-header__in{padding:10px 16px}
  .c-logo span{font-size:17px}
  .hero-inner{width:calc(100% - 32px);padding:100px 0 60px}
  .c-fv__sub{font-size:16px}
  .c-fv__q{font-size:15px}
  .c-fv__h1{margin-top:28px}
  .c-fv__cta .btn{flex:1 1 100%}
  .l-wrap{width:calc(100% - 32px)}
  .c-worry,.c-promise,.c-reasons,.c-works,.c-voice,.c-price,.c-route,.c-flow,.c-greet,.c-faq,.c-cta{padding:64px 0 72px}
  .c-worry__grid,.c-reasons__grid,.c-voice__top,.c-promise__body,.c-route__intro,.c-cta__top,.c-greet__body,.c-faq__grid{grid-template-columns:1fr;gap:28px}
  .c-worry__head,.c-reasons__side{position:static}
  .c-worry__item{grid-template-columns:28px 1fr 48px;gap:12px}
  .c-worry__st small{display:none}
  .c-worry__ic{width:48px;height:48px}
  .c-promise__row{grid-template-columns:1fr;gap:12px;padding:24px 2px}
  .c-promise__arrow{width:12px;height:30px;margin-left:6px}
  .c-promise__shaft{left:50%;right:auto;top:0;bottom:9px;height:auto;width:2px;transform-origin:top center}
  .c-promise__tip{left:50%;right:auto;top:auto;bottom:0;transform:translateX(-50%) rotate(135deg)}
  .c-reasons__item{grid-template-columns:1fr;gap:8px;padding:30px 2px}
  .c-works__desk{grid-template-columns:1fr 1fr;gap:22px 14px}
  .c-works__pol{padding:8px 8px 0}
  .c-works__more{min-height:200px}
  .c-voice__row{grid-template-columns:40px 1fr;gap:6px 12px}
  .c-voice__row .nm{grid-column:2;text-align:left}
  .c-price__cards{grid-template-columns:1fr;gap:30px}
  .c-price__for{min-height:0}
  .c-price__tbl thead{display:none}
  .c-price__tbl tr{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:14px 0;border-bottom:1px solid var(--line)}
  .c-price__tbl th,.c-price__tbl td{border:0;padding:0}
  .c-price__tbl td:last-child{grid-column:1 / -1}
  .c-route__duo{height:auto;display:grid;gap:14px}
  .c-route__lk{position:relative;clip-path:none!important;border-radius:14px;min-height:240px}
  .c-route__cap{max-width:none;padding:28px}
  .c-route__lk.b .c-route__cap{text-align:left;margin:0}
  .c-route__badge{justify-content:flex-start}
  .c-flow__legend{display:none}
  .c-flow__lanes{padding-left:42px}
  .c-flow__lanes::before,.c-flow__prog{left:18px;transform:none}
  .c-flow__prog{transform:scaleY(0)}
  .c-flow__row{grid-template-columns:1fr;gap:10px;margin-bottom:26px}
  .c-flow__node{grid-column:1;position:absolute;left:-42px;top:0;width:36px;height:36px;font-size:12px}
  .c-flow__you,.c-flow__we,.c-flow__rest{grid-column:1}
  .c-flow__rest{justify-self:start}
  .c-flow__goal{text-align:left}
  .c-greet__memo{padding:46px 22px 34px}
  .c-greet__fusen{position:static;display:block;width:min(100%,260px);margin:0 0 4px;transform:rotate(-1.5deg)}
  .c-greet__shot{width:min(100%,320px)}
  .c-faq__a{margin-left:0}
  .c-news{padding:64px 0 72px}
  .c-news__grid{grid-template-columns:1fr;gap:24px}
  .c-news__item{grid-template-columns:112px 1fr;gap:14px}
  .c-news__item b{font-size:15px}
  .c-cta__btn{max-width:none}
  .c-cta__side{width:min(70%,260px)}
  .c-cta__flow{padding:26px 20px 28px}
  .c-cta__steps{grid-template-columns:1fr;--gap:24px}
  .c-cta__step{padding-left:56px;min-height:40px}
  .c-cta__badge{position:absolute;left:0;top:0}
  .c-cta__link{left:19px;right:auto;top:48px;width:2px;height:calc(100% + var(--gap) - 48px)}
  .c-cta__step h4{margin-top:6px}
  .l-footer__grid{grid-template-columns:1fr;gap:0}
  .l-footer__blk+.l-footer__blk{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.12);margin-top:28px;padding-top:28px}
}
@media (max-width:420px){
  .c-fv__h1{font-size:25px}
  .c-works__desk{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .j [data-rise]{opacity:1;transform:none}
}

/* ---------- 固定ページ共通（ページヒーロー・本文） ---------- */
.c-pagehero{position:relative;padding:150px 0 64px;background:url(../images/bg-blue-wash.jpg) center/cover no-repeat;overflow:hidden}
.c-pagehero::after{content:"";position:absolute;right:-60px;bottom:-60px;width:260px;height:260px;border-radius:50%;background:rgba(232,145,58,.12);mix-blend-mode:multiply}
.c-pagehero h1{font-family:var(--f-head);font-weight:900;font-size:clamp(30px,4.2vw,46px);color:var(--navy);margin:10px 0 0;line-height:1.4}
.c-pagehero p{margin:14px 0 0;color:var(--muted);max-width:36em}
.c-crumb{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--note)}
.c-crumb li+li::before{content:"/";margin-right:6px}
.c-crumb a{color:var(--note)}
.c-page{padding:72px 0 104px}
.c-prose{max-width:760px}
.c-prose h2{font-family:var(--f-head);font-weight:900;font-size:clamp(21px,2.4vw,26px);color:var(--navy);margin:48px 0 12px;padding-left:14px;border-left:4px solid var(--accent);line-height:1.5}
.c-prose h2:first-child{margin-top:0}
.c-prose p,.c-prose li{font-size:16px}
.c-prose ul{padding-left:1.3em}
@media (max-width:768px){
  .c-pagehero{padding:112px 0 44px}
  .c-page{padding:48px 0 72px}
}

/* ---------- フォーム安全弁 ---------- */
input,textarea,select{max-width:100%;box-sizing:border-box;}
input[type=text],input[type=email],input[type=tel],input[type=url],textarea,select{width:100%;font-size:16px;}

/* ---------- ブログ用：blog-shared.css が前提にするトークンと土台をサイトの色に合わせる ---------- */
:root{--ai:var(--navy);--ai2:#2A4E8F;--shu:var(--accent);--yama:#F2B36B;--yama2:#F7CF9F;--kami:var(--bg);--kami2:#F2EFE8;--ink:var(--navy-ink);--body:var(--navy-ink);--mark:rgba(232,145,58,.32)}
.wrap{width:min(var(--wrap),calc(100% - 48px));margin:0 auto}
.page-hero{position:relative;overflow:hidden;color:#fff;padding:150px 0 72px}
.page-hero h1{font-family:var(--f-head);font-weight:900;font-size:clamp(28px,4vw,44px);margin:8px 0 0;color:#fff}
.page-hero p{color:rgba(255,255,255,.88)}
@media (max-width:768px){.wrap{width:calc(100% - 32px)}.page-hero{padding:112px 0 48px}}
/* blog-shared.css — ブログ（個別/一覧）・サイドバー・page-hero(marquee) の共通CSS断片。
   STEP 7 で各サイトの assets/css/_shared.css の末尾に追記して使う。
   前提トークン: --ai --ai2 --shu --yama --yama2 --kami --kami2 --ink --body --muted --line。
   ベースの .page-hero{...} は _shared.css に既にある前提（ここは marquee 追加と post/sidebar/archive）。 */

/* サイト側のリセット有無に依存しないための保険。padding を持つ箱が幅指定と足し算されて
   スマホで横スクロールを出す事故（375/390px）を防ぐ。 */
.post-wrap,.post-main,.post-side,.widget,.post-toc,.post-author,.post-body .cbox,
.post-body blockquote,.p-card,.p-card__bd{ box-sizing:border-box; }

/* ============ 固定ページ見出しヘッダー：右→左ギャラリー＋カラーオーバーレイ ============ */
.page-hero .wrap{ position:relative; z-index:3; }
.page-hero::before{ z-index:2; }
.page-hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; display:flex; align-items:center; }
.page-hero__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(105deg, rgba(20,59,107,.90) 0%, rgba(31,95,166,.78) 50%, rgba(20,59,107,.90) 100%); }
.page-hero__mq{ display:flex; width:max-content; height:100%; will-change:transform; animation:page-hero-mq 64s linear infinite; }
.page-hero__mq img{ height:100%; width:auto; aspect-ratio:4/3; object-fit:cover; display:block; flex:0 0 auto; }
@keyframes page-hero-mq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .page-hero__mq{ animation:none; } }

/* ============ 投稿（single）ページ ============ */
.post-hero{ position:relative; overflow:hidden; color:#F1F4EF; padding:104px 0 70px; }
.post-hero__bg{ position:absolute; inset:0; z-index:0; }
.post-hero__bg img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-hero__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(20,59,107,.74) 0%, rgba(15,40,80,.92) 100%); }
.post-hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:5px; background:linear-gradient(90deg,var(--shu),var(--yama)); z-index:2; }
.post-hero .wrap{ position:relative; z-index:1; max-width:860px; }
.post-hero__meta{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.post-hero__date{ font-family:'Space Grotesk',monospace; font-size:13px; letter-spacing:.06em; color:rgba(241,244,239,.82); }
.post-hero__cat{ font-size:11px; font-weight:700; letter-spacing:.08em; padding:4px 12px; border-radius:999px; color:#fff; background:var(--ai); }  /* 既定色（WPでis-*が付かない時用）。is-*が上書き */
.post-hero h1{ font-family:'Shippori Mincho',serif; font-weight:800; font-size:clamp(25px,3.8vw,40px); line-height:1.55; letter-spacing:.04em; margin:0; color:#F6F8F4; }
.post-hero .crumb{ font-family:'Space Grotesk',monospace; font-size:10.5px; letter-spacing:.18em; color:rgba(241,244,239,.6); margin:24px 0 0; }
.post-hero .crumb a{ color:rgba(241,244,239,.82); text-decoration:none; }

/* 投稿レイアウト：本文 + サイドバー */
.post-wrap{ display:grid; grid-template-columns:minmax(0,1fr) 312px; gap:52px; max-width:1140px; margin:0 auto; padding:56px 24px 96px; align-items:start; }
.post-main{ min-width:0; }
.post-figure{ margin:0 0 36px; }
.post-figure img{ width:100%; border-radius:14px; box-shadow:0 24px 50px -28px rgba(20,30,46,.5); display:block; }
/* --- 本文タイポグラフィ（読みやすさの主戦場）---
   ねらい：1段落＝1〜3文で改行多め／強調は黄色マーカー／H2とH3で階層が一目で分かる。
   --mark はマーカーの黄色。サイトのパレットに合わせて調整してよい（淡い黄色を保つこと）。 */
.post-body{ --mark:#FFE9A8; counter-reset:h2c; font-size:16.5px; line-height:2.05; color:var(--body);
  word-break:auto-phrase; text-wrap:pretty; }   /* 助詞が行頭に落ちるのを減らす（Chrome）。他ブラウザでは無視される */
.post-body > *:first-child{ margin-top:0; }
.post-body p{ font-size:inherit; line-height:inherit; color:inherit; margin:0 0 1.85em; }
.post-body .post-lead{ font-size:17.5px; color:var(--ink); line-height:2; font-weight:500; margin:0 0 2.2em; padding:0 0 1.6em; border-bottom:1px solid var(--line); }

/* 見出し：H2＝横線＋番号、H3＝黄色の縦バー。粒度の違いが見た目で分かるようにする */
.post-body h2,.post-body h3{ word-break:auto-phrase; text-wrap:pretty; scroll-margin-top:96px; }
.post-body h2{
  font-family:'Shippori Mincho',serif; font-size:clamp(21px,2.9vw,29px); font-weight:700;
  color:var(--ink); line-height:1.62; letter-spacing:.02em;
  margin:3.2em 0 1.1em; padding:0 0 .6em; border-bottom:1px solid var(--line); position:relative;
}
.post-body h2::before{
  counter-increment:h2c; content:counter(h2c,decimal-leading-zero);
  display:block; font-family:'Space Grotesk',monospace; font-size:12px; font-weight:700;
  letter-spacing:.18em; color:var(--shu); margin:0 0 .5em;
}
.post-body h2::after{ content:""; position:absolute; left:0; bottom:-1px; width:4em; height:3px; background:var(--yama); }
.post-body h3{
  font-family:'Shippori Mincho',serif; font-size:clamp(17px,2.1vw,21px); font-weight:700;
  color:var(--ink); line-height:1.65; margin:2.6em 0 .9em; padding-left:14px; border-left:4px solid var(--yama);
}
.post-body h2 + p,.post-body h3 + p{ margin-top:0; }
.post-body h2 + .post-img,.post-body h3 + .post-img{ margin-top:1.2em; }

/* 強調：太字は色を変えない。読ませたい「1文だけ」を黄色マーカー（記事全体で6〜10箇所）。
   マーカーの色はサイトのアクセントに合わせ替えてよい（医療系クライアントで緑を使った実例もある）。 */
.post-body strong{ font-weight:700; color:var(--ink); }
.post-body mark.marker{
  background:linear-gradient(transparent 60%, var(--mark) 60%);
  color:inherit; font-weight:700; padding:0 2px;
}
.post-body mark.marker strong{ font-weight:700; }
/* 短い注意語だけ色文字（「自己判断はせず」等）。1記事1〜2回まで */
.post-body .txt-alert{ color:var(--shu); font-weight:700; }

/* 枠3種：box＝チェック／warning＝注意・警告／remark＝穏やかな補足。役割で使い分け、混用しない */
.post-body .cbox{ margin:0 0 2em; padding:22px 26px 8px; border-radius:12px; border:1px solid var(--line); background:var(--kami2); border-left:4px solid var(--ai); }
.post-body .cbox__ttl{ font-family:'Shippori Mincho',serif; font-weight:700; font-size:15.5px; color:var(--ink); margin:0 0 .9em; }
.post-body .cbox > :last-child{ margin-bottom:1em; }
.post-body .cbox p{ font-size:15.5px; line-height:1.95; }
.post-body .cbox li{ margin-bottom:.55em; }
.post-body .cbox--warning{ background:#FDF4F1; border-color:#EFCDC1; border-left-color:var(--shu); }
.post-body .cbox--warning .cbox__ttl{ color:var(--shu); }
.post-body .cbox--remark{ background:#F5F7FA; border-color:#DFE5EC; border-left-color:var(--muted); }

/* リンク・コード */
.post-body a{ color:var(--shu); font-weight:700; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.post-body a:hover{ text-decoration-thickness:2px; }
.post-body code{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.92em; background:var(--kami2); border:1px solid var(--line); border-radius:5px; padding:1px 6px; }

/* リスト：行間を本文よりわずかに詰め、項目の頭を目立たせる */
.post-body ul,.post-body ol{ margin:0 0 1.85em; padding:0; list-style:none; }
.post-body li{ position:relative; padding-left:1.6em; margin:0 0 .7em; line-height:1.95; }
.post-body ul > li::before{ content:""; position:absolute; left:.35em; top:.78em; width:8px; height:8px; border-radius:50%; background:var(--yama); }
.post-body ol{ counter-reset:olc; }
.post-body ol > li{ padding-left:2em; }
.post-body ol > li::before{
  counter-increment:olc; content:counter(olc);
  position:absolute; left:0; top:.28em; width:1.5em; height:1.5em; border-radius:50%;
  background:var(--ai); color:#fff; font-family:'Space Grotesk',monospace; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.post-body li > ul,.post-body li > ol{ margin:.7em 0 0; }

/* 引用・画像・表 */
/* 引用＝他者の言葉。枠（.cbox）と見た目が被らないよう、背景は敷かず罫線だけで示す */
.post-body blockquote{ margin:.4em 0 2em; padding:2px 0 2px 26px; border-left:3px solid var(--line); }
.post-body blockquote p{ margin:0; font-size:15px; line-height:1.95; color:var(--muted); }
.post-body .post-img{ margin:0 0 2em; }
.post-body .post-img img{ width:100%; height:auto; border-radius:12px; display:block; }
.post-body .post-img figcaption{ margin-top:10px; font-size:12.5px; line-height:1.7; color:var(--muted); text-align:center; }
/* 表：横に広いときだけスクロールさせる。セルの文章は折り返してよい（nowrap にすると必ず横スクロールになる） */
.post-body table{ display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; margin:0 0 1.85em; font-size:14.5px; line-height:1.75; }
.post-body th,.post-body td{ border:1px solid var(--line); padding:10px 14px; text-align:left; vertical-align:top; min-width:6em; }
.post-body th{ background:var(--kami2); font-weight:700; color:var(--ink); white-space:nowrap; }

/* 目次：h2 が2つ以上のときだけ出る（build_blog_pages.py が生成） */
.post-toc{ margin:0 0 40px; border:1px solid var(--line); border-radius:12px; background:var(--kami2); padding:22px 26px 24px; }
.post-toc__ttl{ font-family:'Shippori Mincho',serif; font-size:15px; font-weight:700; color:var(--ink); margin:0 0 14px; padding-left:12px; border-left:4px solid var(--yama); }
.post-toc__list{ list-style:none; margin:0; padding:0; counter-reset:tocc; }
.post-toc__list li{ position:relative; padding-left:2em; margin:0 0 .6em; line-height:1.7; }
/* 番号は h2 の行だけに振る（h3 でも増やすと、本文の H2 番号とズレる） */
.post-toc__list li:not(.is-sub)::before{ counter-increment:tocc; content:counter(tocc,decimal-leading-zero); position:absolute; left:0; top:.15em; font-family:'Space Grotesk',monospace; font-size:11px; font-weight:700; color:var(--shu); }
.post-toc__list li.is-sub{ padding-left:3.2em; font-size:13.5px; }
.post-toc__list li.is-sub::before{ content:"—"; position:absolute; left:1.6em; top:.15em; color:var(--muted); }
.post-toc a{ color:var(--ink); text-decoration:none; font-size:14.5px; font-weight:500; }
.post-toc a:hover{ color:var(--shu); text-decoration:underline; text-underline-offset:3px; }
.post-foot{ margin:44px 0 0; }
.post-foot__bar{ border-top:1px solid var(--line); padding-top:28px; display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.post-foot__back{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:700; font-size:14px; color:var(--ink); }
.post-foot__back:hover{ color:var(--shu); }
.post-foot__cta{ display:inline-block; background:var(--ai); color:var(--kami); font-weight:700; font-size:13.5px; padding:12px 26px; border-radius:999px; text-decoration:none; transition:background .25s; }
.post-foot__cta:hover{ background:var(--shu); }

/* ============ 著者ボックス（この記事を書いた人）============ */
.post-author{ margin:52px 0 0; border:1px solid var(--line); border-radius:14px; background:var(--kami2); padding:26px 28px 28px; position:relative; }
.post-author__label{ position:absolute; top:-11px; left:24px; background:var(--ai); color:#fff; font-size:11px; font-weight:700; letter-spacing:.1em; padding:4px 14px; border-radius:999px; }
.post-author__row{ display:grid; grid-template-columns:88px 1fr; gap:22px; align-items:start; }
.post-author__ph{ width:88px; height:88px; object-fit:cover; border-radius:50%; display:block; border:3px solid #fff; box-shadow:0 10px 24px -14px rgba(20,30,46,.55); }
.post-author__bd{ min-width:0; }
.post-author__name{ font-family:'Shippori Mincho',serif; font-weight:700; font-size:17px; color:var(--ink); margin:2px 0 8px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.post-author__role{ font-family:'Zen Kaku Gothic New',sans-serif; font-size:12px; font-weight:500; color:var(--muted); letter-spacing:.04em; }
.post-author__bio{ font-size:13.5px; line-height:1.95; color:var(--body); margin:0; }
.post-author__link{ display:inline-block; margin-top:12px; font-size:12.5px; font-weight:700; color:var(--shu); text-decoration:none; }
.post-author__link:hover{ text-decoration:underline; }
@media(max-width:680px){
  .post-author{ padding:24px 20px 22px; }
  .post-author__row{ grid-template-columns:64px 1fr; gap:16px; }
  .post-author__ph{ width:64px; height:64px; }
}

/* ============ サイドバー・ウィジェット ============ */
.post-side{ position:sticky; top:88px; display:flex; flex-direction:column; gap:26px; }
.widget{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px 22px 24px; }
.widget__ttl{ font-family:'Shippori Mincho',serif; font-size:16px; font-weight:700; color:var(--ink); margin:0 0 16px; padding-left:12px; border-left:4px solid var(--yama); letter-spacing:.04em; }
.w-search{ display:flex; gap:8px; }
.w-search input{ flex:1; min-width:0; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:13.5px; font-family:inherit; background:var(--kami2); }
.w-search button{ border:none; background:var(--ai); color:#fff; border-radius:8px; padding:0 16px; font-weight:700; cursor:pointer; }
.w-recent{ display:flex; flex-direction:column; gap:14px; }
.w-recent a{ display:grid; grid-template-columns:70px 1fr; gap:12px; align-items:center; text-decoration:none; color:inherit; }
.w-recent a.is-noimg{ grid-template-columns:1fr; }        /* サムネ未生成のとき（空欄を作らない） */
.p-card.p-card--noimg{ grid-template-columns:1fr; }       /* 一覧カードも同様（後方の .p-card 定義に負けないよう詳細度を上げる） */
.w-recent img{ width:70px; height:48px; object-fit:cover; border-radius:7px; display:block; }
.w-recent div{ min-width:0; }
.w-recent b{ font-family:'Shippori Mincho',serif; font-weight:700; font-size:13px; line-height:1.5; color:var(--ink); display:block; }
.w-recent span{ font-family:'Space Grotesk',monospace; font-size:10.5px; color:var(--muted); letter-spacing:.06em; }
.w-recent a:hover b{ color:var(--shu); }
.w-list{ list-style:none; margin:0; padding:0; }
.w-list li{ border-bottom:1px dashed var(--line); }
.w-list li:last-child{ border-bottom:none; }
.w-list a{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 2px; text-decoration:none; color:var(--ink); font-size:13.5px; font-weight:500; }
.w-list a:hover{ color:var(--shu); }
.w-list .n{ font-family:'Space Grotesk',monospace; font-size:11px; color:var(--muted); background:var(--kami2); border-radius:999px; padding:2px 9px; }
.w-cta{ background:linear-gradient(160deg,#2A6FB5,var(--ai2)); border:none; color:#F1F4EF; }
.w-cta .widget__ttl{ color:#fff; border-color:var(--yama2); }
.w-cta p{ font-size:13px; line-height:1.85; color:rgba(241,244,239,.82); margin:0 0 16px; }
.w-cta a{ display:inline-block; background:var(--yama2); color:var(--ai2); font-weight:700; font-size:13.5px; padding:12px 28px; border-radius:999px; text-decoration:none; }
.w-cta a:hover{ background:#fff; }

/* ============ ブログ/お知らせ 一覧（archive）カード ============ */
.p-news{ max-width:940px; }
.p-newsgrid{ display:grid; gap:28px; }
.p-card{ display:grid; grid-template-columns:320px 1fr; text-decoration:none; color:inherit; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; transition:box-shadow .25s, transform .25s; }
.p-card:hover{ box-shadow:0 24px 46px -26px rgba(34,48,74,.5); transform:translateY(-3px); }
.p-card__ph{ overflow:hidden; background:var(--ai2); }
.p-card__ph img{ width:100%; height:100%; min-height:188px; object-fit:cover; display:block; transition:transform .5s; }
.p-card:hover .p-card__ph img{ transform:scale(1.05); }
.p-card__bd{ padding:26px 30px; display:flex; flex-direction:column; gap:10px; }
.p-card__meta{ display:flex; align-items:center; gap:12px; }
.p-card__date{ font-family:'Space Grotesk',monospace; font-size:13px; letter-spacing:.06em; color:var(--muted); }
.p-card__cat{ font-size:11px; font-weight:700; letter-spacing:.08em; padding:4px 12px; border-radius:999px; color:#fff; background:var(--ai); }  /* 既定色。is-*が上書き */
.p-card__ttl{ font-family:'Shippori Mincho',serif; font-size:clamp(18px,2.3vw,22px); font-weight:700; line-height:1.55; color:var(--ink); margin:0; }
.p-card__ex{ font-size:13.5px; line-height:1.9; color:var(--body); margin:0; }
.p-card__more{ margin-top:4px; font-family:'Space Grotesk',monospace; font-size:11px; letter-spacing:.14em; color:var(--shu); font-weight:700; }
.p-newsnote{ font-size:12.5px; color:var(--muted); margin:30px 0 0; }

/* ============ カテゴリ色（post-hero/p-card 共通の .is-*）============ */
.post-hero__cat.is-event,.p-card__cat.is-event{ background:var(--shu); }
.post-hero__cat.is-guide,.p-card__cat.is-guide{ background:var(--ai); }
.post-hero__cat.is-trail,.p-card__cat.is-trail{ background:#5f8a5a; }
.post-hero__cat.is-map,.p-card__cat.is-map{ background:var(--yama); color:var(--ai2); }
.post-hero__cat.is-info,.p-card__cat.is-info{ background:#7c7464; }

/* ============ レスポンシブ（モバイルは1列）============ */
@media(max-width:900px){ .post-wrap{ grid-template-columns:1fr; gap:40px; padding:44px 22px 72px; } .post-side{ position:static; } }
@media(max-width:680px){
  .post-hero{ padding:84px 0 52px; }
  .p-card{ grid-template-columns:1fr; }
  .p-card__ph img{ min-height:0; aspect-ratio:1200/630; }
  .p-card__bd{ padding:22px; }
  /* スマホの読みやすさ：文字はやや小さく、行間は詰めすぎない。見出し前後の余白は圧縮 */
  .post-body{ font-size:16px; line-height:1.98; }
  .post-body .post-lead{ font-size:16.5px; padding-bottom:1.3em; margin-bottom:1.9em; }
  .post-body h2{ margin:2.6em 0 .9em; }
  .post-body h3{ margin:2.1em 0 .8em; }
  .post-body li{ padding-left:1.5em; }
  .post-body blockquote{ padding:16px 18px; }
  .post-body .cbox{ padding:18px 20px 6px; }
  .post-toc{ padding:18px 20px 20px; margin-bottom:32px; }
  .post-toc__list li.is-sub{ padding-left:2.6em; }
  .post-toc__list li.is-sub::before{ left:1.2em; }
}

/* ブログの見出しもサイトと同じ丸ゴシックにそろえる（型A：明朝は使わない） */
.post-hero h1,.post-body h2,.post-body h3,.p-card h2,.p-card h3,.widget h2,.widget h3,.post-author h2,.post-author h3{font-family:var(--f-head)}
/* 一覧カードのアイキャッチを切らずに見せる */
.p-card__ph{align-self:center}
.p-card__ph img{height:auto;min-height:0;aspect-ratio:1200/630}

/* =========================================================
   WordPress 用の追加（wp_nav_menu・記事本文・ページ送り・フォーム）
   ========================================================= */
.l-nav .l-nav__list{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.l-nav .current-menu-item>a::after{width:100%}
/* トップ内へのリンク（#reasons など）は、トップを開くと全部「現在地」扱いになるので下線を出さない */
.l-nav .menu-item-type-custom.current-menu-item>a:not(:hover)::after{width:0}
@media (max-width:1024px){.l-nav .l-nav__list{display:none}}
.c-news__item img{width:100%;aspect-ratio:1200/630;object-fit:cover;border-radius:6px}
.zt-pager{margin-top:40px;display:flex;gap:8px;flex-wrap:wrap}
.zt-pager .page-numbers{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--navy-ink)}
.zt-pager .current{background:var(--navy);border-color:var(--navy);color:#fff}
.post-body img{max-width:100%;height:auto;border-radius:12px}
.w-search input[type=search]{width:100%}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.page-hero,.post-hero{background:linear-gradient(160deg,var(--navy),var(--navy-deep))}
.page-hero .crumb a,.post-hero .crumb a{color:rgba(255,255,255,.85)}
.page-hero .crumb{color:rgba(255,255,255,.75);font-size:13px;margin:14px 0 0}
.sec-eyebrow{font-family:var(--f-en);font-weight:700;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent)}
.page-sec{padding:56px 0 96px}
.c-form.c-form--ff{background:#fff;border:1px solid var(--line);border-radius:10px;padding:clamp(18px,3vw,32px);margin-top:24px}
.c-form--ff .ff-btn-submit{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;border-radius:999px!important;min-height:52px;padding:0 32px!important;font-family:var(--f-head);font-weight:700;font-size:16px;opacity:1!important}
.c-form--ff .ff-btn-submit:hover{background:var(--accent-deep)!important;border-color:var(--accent-deep)!important}
.c-form--ff .ff-el-input--label label{font-weight:700;color:var(--navy-ink)}