:root{
  --bg:#fdfcfa; --bg-alt:#f4f0ea; --accent:#b08d57; --accent-deep:#8a6b4a;
  --ink:#2e2a27; --muted:#6b625b; --line:#e8e1d6;
  --cta:linear-gradient(100deg,#cfbcab 0%,#bba996 48%,#ab9780 100%); --cta-ink:#fff; --cta-deep:#8a6b4a;
  --maxw:1040px;
  --serif:"Noto Serif JP",serif; --sans:"Noto Sans JP",sans-serif; --en:"Cormorant Garamond",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.9;letter-spacing:.02em}
img{display:block;max-width:100%}

/* ===== HERO（案04準拠） ===== */
.hero{position:relative;overflow:hidden;background:var(--bg);min-height:100svh}
@media(min-width:1024px){.hero{min-height:0;aspect-ratio:16/9;max-height:100svh}}

/* ドレープ背景（SVG） */
.hero__drape{position:absolute;inset:0;width:100%;height:100%;z-index:0}
/* 人物背後の葉影ボケ */
.hero__bokeh{position:absolute;z-index:1;right:-6%;top:-10%;width:52%;height:120%;pointer-events:none;
  background:
    radial-gradient(38% 30% at 62% 22%,rgba(196,190,176,.55) 0%,rgba(196,190,176,0) 70%),
    radial-gradient(30% 26% at 30% 55%,rgba(203,198,186,.45) 0%,rgba(203,198,186,0) 70%),
    radial-gradient(28% 24% at 75% 70%,rgba(190,186,172,.5) 0%,rgba(190,186,172,0) 70%),
    radial-gradient(22% 18% at 45% 85%,rgba(204,200,190,.4) 0%,rgba(204,200,190,0) 70%);
  filter:blur(22px);opacity:1.35;
  -webkit-mask-image:radial-gradient(60% 60% at 60% 50%,#000 40%,transparent 100%);
          mask-image:radial-gradient(60% 60% at 60% 50%,#000 40%,transparent 100%)}

.hero__inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column}
@media(min-width:1024px){.hero__inner{display:block;position:absolute;inset:0}}

.hero__copy{padding:72px 24px 0}
@media(min-width:1024px){.hero__copy{position:absolute;left:7.8%;top:23%;width:58%;padding:0}}
.hero__title{font-family:var(--serif);font-weight:500;line-height:1.5;letter-spacing:.06em;
  font-size:clamp(1.9rem,5.6vw,5.9rem);white-space:nowrap;
  background:linear-gradient(180deg,#7a6553 0%,#9e8467 55%,#b69a76 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.35)}
.hero__title span{display:block}
.hero__sub{margin-top:1.3em;font-family:var(--serif);font-weight:400;letter-spacing:.16em;color:var(--muted);
  font-size:clamp(.9rem,1.65vw,1.75rem)}
.hero__cta{margin-top:2.4em}

/* 主CTA＝金グラデのピル（案04準拠・文字は中央・右端に「›」・浮き出し強め） */
.btn-cta{position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-width:min(100%,340px);padding:18px 56px 18px 40px;border-radius:999px;
  background:var(--cta);color:var(--cta-ink);text-decoration:none;text-align:center;
  font-family:var(--serif);font-weight:600;letter-spacing:.16em;font-size:clamp(1rem,1.5vw,1.55rem);line-height:1.4;
  box-shadow:
    0 2px 0 rgba(255,255,255,.35) inset,          /* 上辺ハイライト */
    0 -3px 0 rgba(120,95,70,.22) inset,           /* 下辺の落ち影＝厚み */
    0 0 0 1px rgba(255,255,255,.4) inset,
    0 3px 0 #a08c74,                              /* 台座（押せる厚み） */
    0 14px 30px -10px rgba(120,100,78,.55),
    0 26px 48px -22px rgba(120,100,78,.45);
  text-shadow:0 1px 2px rgba(90,70,50,.28);
  transition:transform .22s ease,box-shadow .22s ease}
@media(min-width:1024px){.btn-cta{min-width:34.5vw;padding:1.6vw 3.4vw;font-size:1.78vw}}
.btn-cta::after{content:"";position:absolute;right:1.6em;top:50%;width:.48em;height:.48em;margin-top:-.24em;
  border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:rotate(45deg);opacity:.9}
.btn-cta:hover{transform:translateY(-3px);
  box-shadow:0 2px 0 rgba(255,255,255,.4) inset,0 -3px 0 rgba(120,95,70,.22) inset,0 0 0 1px rgba(255,255,255,.45) inset,
    0 6px 0 #a08c74,0 20px 36px -10px rgba(120,100,78,.6),0 34px 56px -22px rgba(120,100,78,.5)}
.btn-cta:active{transform:translateY(2px);
  box-shadow:0 2px 0 rgba(255,255,255,.3) inset,0 -2px 0 rgba(120,95,70,.25) inset,0 0 0 1px rgba(255,255,255,.4) inset,
    0 1px 0 #a08c74,0 8px 18px -10px rgba(120,100,78,.5)}

/* 人物＝案04カンプの右側（人物＋葉影ボケ＋ドレープ）を画像のまま使う。左端200pxはPNG側でフェード済み */
.hero__figure{position:relative;margin-top:24px;flex:1;min-height:52svh;overflow:hidden}
.hero__figure img{position:absolute;right:0;bottom:0;height:100%;width:auto}
@media(min-width:1024px){
  .hero__figure{position:absolute;inset:0;margin:0;min-height:0}
  .hero__figure img{position:absolute;right:0;top:0;height:100%;width:auto}
}

/* 900〜1023pxは横幅に対して十分なため、FVだけ先に左右構成へ切り替える */
:root{--hero-tablet-copy-left:7.8%;--hero-tablet-copy-top:23%;--hero-tablet-copy-width:58%;--hero-tablet-cta-width:34.5vw}
@media(min-width:900px) and (max-width:1023px){
  .hero{min-height:0;aspect-ratio:16/9;max-height:100svh}
  .hero__inner{display:block;position:absolute;inset:0}
  .hero__copy{position:absolute;left:var(--hero-tablet-copy-left);top:var(--hero-tablet-copy-top);width:var(--hero-tablet-copy-width);padding:0}
  .hero__figure{position:absolute;inset:0;margin:0;min-height:0}
  .hero__figure img{right:0;top:0;bottom:auto;height:100%;width:auto}
  .hero .btn-cta{min-width:var(--hero-tablet-cta-width);padding:1.6vw 3.4vw;font-size:1.78vw}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}

:root{--size-80px:80px;--size-88px:88px;--size-64px:64px;--size-8px:8px;--size-16px:16px;--size-1px:1px;--size-26px:26px;--size-neg-20px:-20px;--size-10px:10px;--size-p68rem:.68rem;--size-1p3rem:1.3rem;--size-p08em:.08em;--size-14px:14px;--size-999px:999px;--size-p7rem:.7rem;--size-3px:3px;--size-p5rem:.5rem;--size-40px:40px;--size-680px:680px;--size-12px:12px;--size-1rem:1rem;--size-p14em:.14em;--size-1p35rem:1.35rem;--size-1p9rem:1.9rem;--size-p05em:.05em;--size-1p1rem:1.1rem;--size-p04em:.04em;--size-24px:24px;--size-18px:18px;--size-32px:32px;--size-22px:22px;--size-5px:5px;--size-20px:20px;--size-2px:2px;--size-28px:28px;--size-p78rem:.78rem;--size-140px:140px;--size-7px:7px;--size-4px:4px;--size-1p08rem:1.08rem;--size-52px:52px;--size-136px:136px;--size-25px:25px;--size-72px:72px;--size-1p7rem:1.7rem;--size-48px:48px;--size-340px:340px;--size-2rem:2rem;--size-4rem:4rem;--size-9p5px:9.5px;--size-neg-9p5px:-9.5px;--size-44px:44px;--size-112px:112px;--size-p82rem:.82rem;--size-11px:11px;--size-1200px:1200px;--size-630px:630px;--size-4p2rem:4.2rem;--size-1p2rem:1.2rem;--size-640px:640px;--size-1024px:1024px;--size-30px:30px;--size-p75rem:.75rem;--size-9px:9px;--size-36px:36px;--size-600px:600px;--size-58px:58px;--size-420px:420px;--size-56px:56px;--size-1p25rem:1.25rem;--size-3rem:3rem;--size-p625rem:.625rem;--size-414px:414px;--size-19p2px:19.2px;--size-40p8px:40.8px;--size-21p36px:21.36px;--size-250px:250px;}


/* ===== HERO以外 ===== */
:root{--white:#fff;--shadow:rgba(46,42,39,.35);--header-bg:rgba(253,252,250,.9);--todo-bg:rgba(176,141,87,.1);--line-green:#06c755;--sp-bar-bg:rgba(253,252,250,.96);--radius-card:14px;--radius-photo:12px;--radius-small:8px;--space-section-sp:64px;--space-section-pc:112px;--shadow-card:0 8px 26px -20px var(--shadow)}
html{scroll-behavior:smooth;scroll-padding:var(--size-80px) 0 var(--size-88px)}
body{overflow-x:hidden}
a{color:inherit}
.site-header{position:fixed;z-index:20;top:0;left:0;width:100%;height:var(--size-64px);padding:var(--size-8px) var(--size-16px);display:flex;align-items:center;gap:var(--size-16px);border-bottom:var(--size-1px) solid transparent;transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}
.site-header.is-scrolled{background:var(--header-bg);border-color:var(--line);box-shadow:0 var(--size-8px) var(--size-26px) var(--size-neg-20px) var(--shadow);backdrop-filter:blur(var(--size-10px))}
.site-header__brand{display:flex;flex-direction:column;text-decoration:none;line-height:1.25;font-family:var(--serif);font-size:var(--size-p68rem);white-space:nowrap}
.site-header__brand strong{font-family:var(--en);font-size:var(--size-1p3rem);font-weight:500;letter-spacing:var(--size-p08em)}
.site-nav{display:none}
.header-cta{margin-left:auto;display:flex;flex-direction:column;align-items:center;line-height:1}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;padding:var(--size-8px) var(--size-14px);border:var(--size-1px) solid var(--line);border-radius:var(--size-999px);background:var(--header-bg);text-decoration:none;font-family:var(--serif);font-size:var(--size-p7rem);line-height:1.4}
.line-todo{margin-top:var(--size-3px);color:var(--accent-deep);font-size:var(--size-p5rem);white-space:nowrap}
.container{width:min(calc(100% - var(--size-40px)),var(--maxw));margin-inline:auto}
.text-column{max-width:var(--size-680px)}
.section{padding:var(--space-section-sp) 0;border-top:var(--size-1px) solid var(--line);background:var(--bg)}
.section--alt{background:var(--bg-alt)}
.eyebrow{margin-bottom:var(--size-12px);color:var(--accent-deep);font-family:var(--en);font-size:var(--size-1rem);font-weight:500;letter-spacing:var(--size-p14em)}
h2{font-family:var(--serif);font-size:clamp(var(--size-1p35rem),3.2vw,var(--size-1p9rem));font-weight:600;line-height:1.6;letter-spacing:var(--size-p05em)}
h3{font-family:var(--serif);font-size:var(--size-1p1rem);font-weight:600;line-height:1.6;letter-spacing:var(--size-p04em)}
.section h2+*,.section .eyebrow+*{margin-top:var(--size-24px)}
.section p+p{margin-top:var(--size-18px)}
.check-list{margin-top:var(--size-32px);list-style:none;display:grid;gap:var(--size-18px)}
.check-list li{display:flex;gap:var(--size-12px);align-items:flex-start;padding-bottom:var(--size-18px);border-bottom:var(--size-1px) solid var(--line)}
.check-list svg{flex:0 0 var(--size-22px);margin-top:var(--size-5px);fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.closing{margin-top:var(--size-32px);font-family:var(--serif);font-weight:500}
.split{display:grid;gap:var(--size-40px);align-items:center}
.split__text{max-width:var(--size-680px)}
blockquote{font-family:var(--serif);font-size:var(--size-1p1rem);line-height:2}
.split blockquote{padding:var(--size-20px) 0 var(--size-20px) var(--size-20px);border-left:var(--size-2px) solid var(--accent);margin-bottom:var(--size-28px)}
.photo-frame{position:relative}
.photo-frame img{width:100%;height:auto;border-radius:var(--radius-photo);object-fit:contain;box-shadow:var(--shadow-card)}
.todo-badge,.todo-panel,.todo-inline{border:var(--size-1px) dashed var(--accent);background:var(--todo-bg);color:var(--accent-deep);font-size:var(--size-p78rem);font-weight:500}
.todo-badge{position:relative;margin-top:var(--size-10px);padding:var(--size-5px) var(--size-8px);line-height:1.5}
.todo-panel{margin-top:var(--size-24px)!important;padding:var(--size-14px) var(--size-16px);border-radius:var(--radius-small)}
.todo-panel--large{min-height:var(--size-140px);display:grid;place-items:center;text-align:center}
.todo-inline{display:inline-block;padding:var(--size-2px) var(--size-7px);border-radius:var(--size-4px)}
.redefine,.future{padding-block:var(--size-88px)}
.redefine .text-column,.future .text-column{text-align:center}
.redefine p,.future p{font-family:var(--serif);font-size:var(--size-1p08rem);line-height:2.2}
.future{background:var(--bg-alt)}
.flow-list{margin-top:var(--size-40px);list-style:none}
.flow-list li{position:relative;display:grid;grid-template-columns:var(--size-52px) 1fr;gap:var(--size-20px);min-height:var(--size-136px)}
.flow-list svg{position:absolute;left:var(--size-25px);top:var(--size-52px);width:var(--size-2px);height:var(--size-72px);fill:none;stroke:var(--accent);stroke-width:1}
.step-number{width:var(--size-52px);height:var(--size-52px);display:grid;place-items:center;border:var(--size-1px) solid var(--accent);border-radius:50%;color:var(--accent-deep);font-family:var(--en);font-size:var(--size-1p7rem)}
.section-cta{margin-top:var(--size-48px);text-align:center}
.section-cta .btn-cta{width:100%;max-width:var(--size-340px)}
.ba-grid{margin-top:var(--size-32px);display:grid;grid-template-columns:repeat(2,1fr);gap:var(--size-10px)}
.ba-grid img{width:100%;height:auto;aspect-ratio:3/4;border-radius:var(--radius-photo);border:var(--size-1px) solid var(--line);background:var(--white);object-fit:contain}
.voices{margin-top:var(--size-40px);display:grid;gap:var(--size-18px)}
.voices blockquote{padding:var(--size-20px);border:var(--size-1px) solid var(--line);border-radius:var(--radius-card);background:var(--white);box-shadow:var(--shadow-card)}
.price{text-align:center}
.price__value{margin:var(--size-32px) 0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--size-16px);font-family:var(--en);font-size:clamp(var(--size-2rem),7vw,var(--size-4rem));line-height:1.3}
.faq-list{margin-top:var(--size-32px);border-top:var(--size-1px) solid var(--line)}
.faq-list details{border-bottom:var(--size-1px) solid var(--line)}
.faq-list summary{position:relative;padding:var(--size-22px) var(--size-52px) var(--size-22px) 0;cursor:pointer;list-style:none;font-family:var(--serif);font-weight:500}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary span,.faq-list summary span::after{position:absolute;display:block;background:var(--accent);transition:transform .25s ease}
.faq-list summary span{right:var(--size-10px);top:50%;width:var(--size-20px);height:var(--size-1px)}
.faq-list summary span::after{content:"";left:var(--size-9p5px);top:var(--size-neg-9p5px);width:var(--size-1px);height:var(--size-20px)}
.faq-list details[open] summary span{transform:rotate(45deg)}
.faq-answer{overflow:hidden}
.faq-answer p{padding:0 var(--size-44px) var(--size-22px) 0;color:var(--muted)}
.text-link{color:var(--accent-deep);text-underline-offset:var(--size-5px)}
.final-cta{text-align:center;padding-block:var(--size-88px)}
.site-footer{padding:var(--size-48px) var(--size-20px) var(--size-112px);border-top:var(--size-1px) solid var(--line);background:var(--bg-alt);text-align:center;color:var(--muted);font-size:var(--size-p82rem)}
.site-footer p+p{margin-top:var(--size-8px)}
.sp-cta{position:fixed;z-index:30;left:0;bottom:0;width:100%;padding:var(--size-10px) var(--size-16px) calc(var(--size-10px) + env(safe-area-inset-bottom));background:var(--sp-bar-bg);border-top:var(--size-1px) solid var(--line);transform:translateY(110%);visibility:hidden;transition:transform .28s ease,visibility 0s linear .28s;backdrop-filter:blur(var(--size-8px))}
.sp-cta.is-visible{transform:translateY(0);visibility:visible;transition-delay:0s}
.sp-cta a{display:block;padding:var(--size-11px) var(--size-20px);border-radius:var(--size-999px);background:var(--line-green);color:var(--white);text-align:center;text-decoration:none;font-weight:500}
.reveal{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}
.reveal-ready .reveal{opacity:0;transform:translateY(var(--size-20px))}
.reveal.is-visible{opacity:1;transform:none}

body.ogp-page{width:var(--size-1200px);height:var(--size-630px);overflow:hidden}
.ogp-page .ogp-canvas{position:relative;width:var(--size-1200px);height:var(--size-630px);overflow:hidden;background:var(--bg)}
.ogp-page .hero{width:var(--size-1200px);height:var(--size-630px);min-height:0;aspect-ratio:auto}
.ogp-page .hero__copy{position:absolute;left:7.8%;top:23%;width:58%;padding:0}
.ogp-page .hero__title{font-size:var(--size-4p2rem)}
.ogp-page .hero__sub{font-size:var(--size-1p2rem)}
.ogp-page .hero__figure{position:absolute;inset:0;margin:0;min-height:0}
.ogp-page .hero__figure img{position:absolute;right:0;top:0;height:100%;width:auto}

@media(min-width:640px){
  .container{width:min(calc(100% - var(--size-64px)),var(--maxw))}
  .section{padding-block:var(--size-88px)}
  .ba-grid{gap:var(--size-18px)}
  .site-header{padding-inline:var(--size-24px)}
}
@media(min-width:1024px){
  .site-header{height:var(--size-72px);padding-inline:4%;gap:var(--size-30px)}
  .site-header__brand{flex-direction:row;align-items:baseline;font-size:var(--size-p75rem)}
  .site-nav{margin-left:auto;display:flex;gap:var(--size-24px)}
  .site-nav a{text-decoration:none;font-size:var(--size-p78rem);color:var(--muted)}
  .site-nav a:hover{color:var(--accent-deep)}
  .btn-ghost{margin-left:0;padding:var(--size-9px) var(--size-18px);font-size:var(--size-p75rem)}
  .section{padding-block:var(--space-section-pc)}
  .split{grid-template-columns:minmax(0,1fr) minmax(var(--size-340px),.8fr);gap:var(--size-88px)}
  .split--offset figure{transform:translateY(var(--size-36px))}
  .photo-frame img{max-height:var(--size-600px)}
  .flow-list{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--size-58px)}
  .flow-list li{display:block;text-align:center;min-height:0}
  .flow-list svg{top:var(--size-26px);left:calc(100% - var(--size-3px));width:var(--size-72px);height:var(--size-2px);transform:rotate(-90deg);transform-origin:top left}
  .step-number{margin:0 auto var(--size-24px)}
  .ba-grid{grid-template-columns:repeat(3,1fr);gap:var(--size-24px)}
  .section-cta .btn-cta{width:auto;min-width:var(--size-420px);padding:var(--size-18px) var(--size-56px) var(--size-18px) var(--size-40px);font-size:var(--size-1p1rem)}
  .sp-cta{display:none}
  .site-footer{padding-bottom:var(--size-48px)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* 検収調整：確定済みFVには適用しない */
:root{--textw:680px;--space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--space-5:40px;--space-6:48px;--radius-pill:999px;--cta-secondary-max:520px;--focus-width:2px}
main>.section:nth-child(odd){background:var(--bg-alt)}
main>.section:nth-child(even){background:var(--bg)}
main .text-column{max-width:var(--textw)}
.section-cta .btn-cta{max-width:var(--size-340px)}
.price__value .todo-inline{font-size:var(--size-1p25rem);padding:var(--space-2);font-family:var(--serif)}
.price__number{font-family:var(--en);font-size:var(--size-3rem);line-height:1}
.line-todo{font-size:var(--size-p625rem);border-bottom:var(--size-1px) dashed var(--accent);line-height:1.4}
.site-header a:focus-visible,main a:focus-visible,summary:focus-visible,.site-footer a:focus-visible,.sp-cta a:focus-visible{outline:var(--focus-width) solid var(--accent-deep);outline-offset:var(--size-4px)}
a,summary{touch-action:manipulation}
.section[id]{scroll-margin-top:var(--space-2)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-deep)}
.site-footer a:hover{text-decoration-thickness:var(--size-2px)}
.ogp-page .hero__inner{display:block;position:absolute;inset:0}
.ogp-page .hero{max-height:none}
.ogp-page .btn-cta{min-width:var(--size-414px);padding:var(--size-19p2px) var(--size-40p8px);font-size:var(--size-21p36px)}
@media(min-width:1024px){
 .flow-list svg{top:var(--size-26px);left:calc(50% + var(--size-40px));width:var(--size-2px);height:var(--size-250px);max-height:none;transform:rotate(-90deg);transform-origin:top left}
 .section-cta .btn-cta{width:100%;min-width:0;max-width:var(--cta-secondary-max)}
}

.flow-list .flow-connector-wide{display:none}
@media(min-width:1024px){.flow-list .flow-connector-tall{display:none}.flow-list .flow-connector-wide{display:block;left:calc(50% + var(--size-40px));top:var(--size-26px);width:calc(100% - var(--size-22px));height:var(--size-1px);transform:none}}