/* ============================================================
   羅針盤LP v2（冒頭より下）。2026-10-04
   手本: 画像生成AIが作った完成デザイン C2。絵が主役で、文字は絵の余白に置く。
   禁止: 影／角丸は0か50%／既製アイコン／純白純黒／日本語本文の行間 2.0 未満
   ============================================================ */
:root{
  --f-ink:#302E29;--f-paper:#F2EEE5;--f-light:#FBF8F1;--f-ochre:#C9AF78;--f-muted:#79674F;--f-red:#8B4938;
  --f-serif:"Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
  /* 絵の縁を紙に溶かすマスク。絵そのものも縁は紙色に寄せて生成してある */
  --f-fade:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%);
}
.flow-story,.flow-wishes,.flow-breath,.flow-card,.flow-after{position:relative;background:var(--f-paper);color:var(--f-ink)}
.flow-story h2,.flow-wishes h2,.flow-breath h2,.flow-card h2,.flow-after h2,.fw h3,.fa h3{font-family:var(--f-serif);font-weight:600;letter-spacing:.04em}
.flow-story p,.flow-wishes p,.flow-card p,.flow-after p,.flow-breath p{line-height:2.1;letter-spacing:.035em}
.flow-story .eyebrow,.flow-wishes .eyebrow,.flow-card .eyebrow,.flow-after .eyebrow{color:var(--f-muted);font-size:14px;letter-spacing:.14em;line-height:2}
.flow-story em,.flow-wishes em,.flow-breath em,.flow-after em{font-style:normal;color:var(--f-red)}

/* ---- 1. スマホの中 ---- */
.flow-story{min-height:clamp(420px,56vw,820px);display:flex;align-items:center;overflow:hidden}
.fs-art{position:absolute;right:-3%;top:50%;transform:translateY(-50%);width:68%;max-width:1100px;height:auto;-webkit-mask-image:var(--f-fade);mask-image:var(--f-fade)}
.fs-copy{position:relative;z-index:1;width:min(46%,620px);margin-left:7%;padding:70px 0}
.fs-copy h2{font-size:clamp(34px,4.6vw,70px);line-height:1.65;margin:18px 0 26px}
.fs-copy p:last-child{font-size:clamp(15px,1.25vw,18px);max-width:28em}

/* ---- 2. 6つの場面（大きさも向きもばらばら） ---- */
.flow-wishes{padding:clamp(70px,9vw,140px) 0 clamp(60px,7vw,110px);overflow:hidden}
.fw-ribbon{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.fw-ribbon path{fill:none;stroke:var(--f-ochre);stroke-width:5;stroke-linecap:round;opacity:.75;vector-effect:non-scaling-stroke}
.fw-head{position:relative;margin:0 7% clamp(40px,6vw,90px);max-width:880px}
.fw-head h2{font-size:clamp(30px,4vw,60px);line-height:1.7;margin:16px 0 20px}
.fw-head p:last-child{font-size:clamp(15px,1.2vw,17px);max-width:34em}
.fw{position:relative;display:flex;align-items:center;gap:0;margin-bottom:clamp(10px,2vw,30px)}
.fw img{flex:none;width:var(--iw,50%);height:auto;-webkit-mask-image:var(--f-fade);mask-image:var(--f-fade)}
.fw>div{position:relative;flex:1;min-width:0;padding:0 clamp(16px,3vw,50px)}
.fw-n{display:block;font:500 15px var(--f-serif);letter-spacing:.2em;color:var(--f-muted);margin-bottom:6px}
.fw h3{font-size:var(--hs,clamp(56px,8vw,120px));line-height:1.2;margin:0 0 10px;color:var(--f-ink)}
.fw .wish-lead{font:600 clamp(17px,1.5vw,22px)/1.9 var(--f-serif);color:var(--f-red);margin-bottom:6px}
.fw>div>p{font-size:clamp(15px,1.2vw,17px)}
.fw .wish-example{display:block;margin-top:8px;font-size:14px;line-height:2;color:var(--f-muted);border-top:1px solid var(--f-ochre);padding-top:8px;max-width:26em}
/* 6場面：幅・左右・段差を変える */
.fw-1{--iw:64%;--hs:clamp(72px,10.5vw,160px);margin-left:0}
.fw-2{--iw:38%;flex-direction:row-reverse;margin-right:0;margin-top:-4vw;padding-left:6%}
.fw-3{--iw:46%;margin-left:12%;margin-top:clamp(0px,1vw,20px)}
.fw-4{--iw:33%;flex-direction:row-reverse;margin-right:9%;margin-top:-3vw}
.fw-5{--iw:54%;margin-left:3%;margin-top:clamp(10px,2vw,40px)}
.fw-6{--iw:40%;flex-direction:row-reverse;margin-right:5%;margin-top:-2vw}
.fw-2>div,.fw-4>div,.fw-6>div{text-align:right}
.fw-2 .wish-example,.fw-4 .wish-example,.fw-6 .wish-example{margin-left:auto}
.fw-6 h3,.fw-5 h3{--hs:clamp(54px,7.5vw,112px)}
.middle-note.fw-note{position:relative;margin:clamp(30px,4vw,60px) 7% 0;font-size:14px;line-height:2;color:var(--f-muted)}
.flow-wishes .reading-bridge{position:relative;margin:34px 7% 0}

/* ---- 3. 全部を、いま決めなくていい ---- */
.flow-breath{overflow:hidden;line-height:0}
.flow-breath>img{width:100%;height:auto;-webkit-mask-image:linear-gradient(#000 78%,transparent 100%);mask-image:linear-gradient(#000 78%,transparent 100%)}
.fb-copy{position:absolute;left:7%;right:7%;top:8%;line-height:1}
.fb-copy h2{font-size:clamp(30px,4.8vw,80px);line-height:1.55;letter-spacing:.05em;color:var(--f-ink);white-space:nowrap}
.fb-copy p{position:absolute;right:0;top:4%;max-width:15em;text-align:left;font-size:clamp(14px,1.3vw,19px);line-height:2.1;color:var(--f-ink);font-family:var(--f-serif)}

/* ---- 4. カード ---- */
.flow-card{display:flex;align-items:center;gap:2%;padding:clamp(40px,6vw,100px) 5% clamp(40px,6vw,100px) 0;overflow:hidden}
.fc-stage{position:relative;flex:none;width:62%}
.fc-stage>img{width:100%;height:auto;-webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 80%,transparent 100%);mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 80%,transparent 100%)}
.fc-sheet{position:absolute;left:14%;top:24%;width:57%;transform:rotate(-8.5deg);transform-origin:0 0;background:#FBF8F1;border:1px solid #BFA878;padding:2% 2.4% 2.2%;color:var(--f-ink)}
.fc-sheet-top{display:flex;justify-content:space-between;align-items:baseline;font:600 clamp(9px,.95vw,14px) var(--f-serif);letter-spacing:.1em;border-bottom:1px solid var(--f-ink);padding-bottom:1%}
.fc-sheet-top small{font-size:.8em;color:var(--f-muted)}
.fc-sheet h3{font:600 clamp(11px,1.4vw,20px)/1.7 var(--f-serif);margin:2.2% 0 1.4%}
.fc-sheet table{width:100%;border-collapse:collapse;font-size:clamp(7.5px,.86vw,12.5px);line-height:1.5}
.fc-sheet th{font-weight:500;color:var(--f-muted);text-align:left;padding:.4% 0;border-bottom:1px solid #BFA878}
.fc-sheet td{padding:.55% 0;border-bottom:1px solid #DDD1B8}
.fc-sheet td:nth-child(2){font-weight:700;color:var(--f-red);white-space:nowrap}
.fc-sheet dl{margin:1.6% 0 0;font-size:clamp(7.5px,.86vw,12.5px);line-height:1.6}
.fc-sheet dt{color:var(--f-muted)}.fc-sheet dd{margin:0 0 .6%;border-bottom:1px dotted #8B7A5A;padding-bottom:.3%}
.fc-copy{flex:1;min-width:0}
.fc-copy h2{font-size:clamp(28px,3.4vw,52px);line-height:1.65;margin:14px 0 20px}
.fc-copy>p{font-size:clamp(15px,1.15vw,17px)}
.fc-copy .solid-cta{margin:22px 0 10px}
.fc-copy .card-meta{font-size:14px;color:var(--f-muted)}
.fc-copy .privacy-note{font-size:13px;color:var(--f-muted);margin-top:8px}

/* ---- 5. しまう・伝える・見直す ---- */
.flow-after{padding:clamp(60px,8vw,120px) 0;overflow:hidden}
.fa-head{margin:0 7% clamp(30px,4vw,60px)}
.fa-head h2{font-size:clamp(30px,4vw,60px);line-height:1.7;margin-top:14px}
.fa{position:relative;display:flex;align-items:center;margin-bottom:clamp(6px,1.6vw,24px)}
.fa img{flex:none;width:var(--iw,46%);height:auto;-webkit-mask-image:var(--f-fade);mask-image:var(--f-fade)}
.fa>div{flex:1;min-width:0;padding:0 clamp(16px,3.4vw,60px)}
.fa-n{display:block;font:500 clamp(40px,5vw,80px)/1 var(--f-serif);color:var(--f-ochre);margin-bottom:4px}
.fa h3{font-size:clamp(22px,2.4vw,36px);line-height:1.7;margin-bottom:8px}
.fa p{font-size:clamp(15px,1.2vw,17px);max-width:28em}
.fa-1{--iw:44%}
.fa-2{--iw:36%;flex-direction:row-reverse;margin-top:-3vw}.fa-2>div{text-align:right}.fa-2 p{margin-left:auto}
.fa-3{--iw:50%;margin-left:7%;margin-top:-1vw}
.flow-after .reading-bridge{margin:34px 7% 0}

/* ---- スマホ ---- */
@media(max-width:760px){
  .flow-story{display:block;min-height:0;padding:56px 0 0}
  .fs-art{position:relative;right:auto;top:auto;transform:none;width:112%;margin:-4% -6% 0;max-width:none}
  .fs-copy{width:auto;margin:0 7%;padding:0}
  .fs-copy h2{font-size:34px}
  .flow-story .fs-copy{order:-1}
  .flow-story{display:flex;flex-direction:column}
  .fw{flex-direction:column!important;align-items:stretch;margin:0 0 6px!important}
  .fw img{width:var(--iwm,92%)}
  .fw:nth-of-type(even) img{align-self:flex-end}
  .fw>div{padding:0 7%;margin-top:-8%;text-align:left!important}
  .fw h3{font-size:clamp(54px,18vw,84px)!important}
  .fw .wish-example{margin-left:0!important}
  .fw-1{--iwm:100%}.fw-4{--iwm:80%}.fw-2{--iwm:84%}
  .fw-ribbon{display:none}
  .fw-head h2{font-size:26px;white-space:nowrap}
  .flow-breath{display:flex;flex-direction:column;line-height:1.5}
  .fb-copy{position:static;order:-1;padding:44px 7% 14px}
  .fb-copy h2{font-size:7.4vw;white-space:nowrap}
  .fb-copy p{position:static;margin-top:10px;font-size:15px;max-width:none}
  .flow-breath>img{min-height:0;object-fit:initial}
  .flow-card{display:block;padding:40px 0 56px}
  .fc-stage{width:100%}
  .fc-sheet{position:relative;left:auto;top:auto;width:88%;transform:rotate(-2deg);margin:-26% auto 0}
  .fc-sheet-top{font-size:11px}.fc-sheet h3{font-size:16px}
  .fc-sheet table,.fc-sheet dl{font-size:12px}
  .fc-copy{padding:36px 7% 0}
  .fa{flex-direction:column!important;align-items:stretch}
  .fa img{width:88%}
  .fa-2 img{align-self:flex-end}
  .fa>div{padding:0 7%;margin-top:-6%;text-align:left!important}
  .fa-2 p{margin-left:0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- 6. FAQ（よくある疑問）。帯は全幅へ。左に絵 ---- */
.questions.section{max-width:none;margin:0;background:var(--f-paper);padding:clamp(60px,8vw,120px) 7% clamp(50px,6vw,90px);display:grid;grid-template-columns:.95fr 1.25fr;gap:4%;align-items:start;color:var(--f-ink)}
.questions .eyebrow{color:var(--f-muted);font-size:14px;letter-spacing:.14em}
.questions h2{font:600 clamp(32px,4.2vw,64px)/1.6 var(--f-serif);letter-spacing:.05em;margin:12px 0 0}
.fq-art{width:112%;max-width:none;margin:10px 0 0 -10%;height:auto;-webkit-mask-image:var(--f-fade);mask-image:var(--f-fade)}
.faq-list{padding-top:12px}
.faq-list details{border-top:1px solid var(--f-ochre);padding:6px 0}
.faq-list details:last-child{border-bottom:1px solid var(--f-ochre)}
.faq-list summary{font:600 clamp(17px,1.6vw,23px)/1.9 var(--f-serif);letter-spacing:.04em;padding:20px 0;cursor:pointer;display:flex;justify-content:space-between;gap:20px;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary span{color:var(--f-red);font-size:1.3em}
.faq-list details p{font-size:clamp(15px,1.2vw,17px);line-height:2.1;color:var(--f-ink);padding:0 0 22px;max-width:36em}
.questions .reading-bridge--start{grid-column:1/-1;margin:clamp(30px,4vw,60px) 0 0;display:flex;justify-content:space-between;align-items:center;gap:30px;padding:clamp(24px,3vw,44px) 0;border-top:2px solid var(--f-ochre);background:transparent}
.questions .reading-bridge--start h3{font:600 clamp(22px,2.6vw,38px)/1.7 var(--f-serif);margin:6px 0}
.questions .reading-bridge--start .bridge-kicker{color:var(--f-red);font-size:14px;letter-spacing:.12em}
.questions .reading-bridge--start p{line-height:2.1;color:var(--f-muted)}
@media(max-width:760px){
  .questions.section{display:block;padding:56px 7% 40px}
  .fq-art{width:104%;margin:16px -2% 18px}
  .questions .reading-bridge--start{display:block}
  .questions .reading-bridge--start button{margin-top:18px}
}

/* ---- 7. マガジン案内（有料）。箱を使わず、大きさと傾きで見せる ---- */
.flow-mag{position:relative;background:var(--f-paper);color:var(--f-ink);padding:clamp(70px,9vw,140px) 0 0;overflow:hidden}
.flow-mag h2,.flow-mag h3,.flow-mag h4{font-family:var(--f-serif);font-weight:600;letter-spacing:.04em}
.flow-mag p{line-height:2.1;letter-spacing:.03em}
.fm-kicker{font-size:14px;letter-spacing:.14em;color:var(--f-red);line-height:2;margin:0}
.fm-head{margin:0 7% clamp(40px,6vw,90px);max-width:1000px}
.fm-head h2{font-size:clamp(34px,5.2vw,82px);line-height:1.55;margin:14px 0 22px}
.fm-head p{font-size:clamp(15px,1.25vw,18px);color:var(--f-muted);max-width:30em}
.fm-offer{display:flex;align-items:center;gap:4%;margin:0 0 clamp(60px,8vw,120px)}
.fm-offer>a{flex:none;width:58%;display:block;transform:rotate(-1.4deg);transform-origin:left center}
.fm-offer>a img{width:100%;height:auto;border:1px solid var(--f-ochre)}
.fm-offer-copy{flex:1;min-width:0;padding-right:7%}
.fm-offer-copy h3{font-size:clamp(24px,2.6vw,40px);line-height:1.7;margin:8px 0 16px}
.fm-offer-copy p{font-size:clamp(15px,1.15vw,17px)}
.fm-included{margin-top:14px;font:600 15px var(--f-serif);color:var(--f-muted);border-top:1px solid var(--f-ochre);padding-top:12px}
.fm-price{display:flex;align-items:baseline;gap:14px;margin:18px 0 14px;flex-wrap:wrap}
.fm-price b{font:600 clamp(56px,7vw,104px)/1 var(--f-serif);color:var(--f-red);letter-spacing:.02em}
.fm-price b i{font-style:normal;font-size:.38em;margin-left:4px;color:var(--f-ink)}
.fm-price small{font-size:13px;color:var(--f-muted);line-height:1.8}
.fm-btn{display:inline-flex;align-items:center;gap:20px;background:var(--f-ink);color:var(--f-paper);padding:18px 28px;font:600 16px var(--f-serif);letter-spacing:.06em;text-decoration:none;border:0}
.fm-btn:hover{background:var(--f-red)}
.fm-parts-head{margin:0 7% clamp(20px,3vw,50px)}
.fm-parts-head h3{font-size:clamp(28px,3.6vw,56px);line-height:1.7;margin-top:10px}
.fm-part{display:flex;align-items:center;gap:0;margin-bottom:clamp(30px,4vw,64px)}
.fm-part>img{flex:none;width:var(--pw,44%);height:auto;border:1px solid var(--f-ochre);transform:rotate(var(--pr,-1.2deg))}
.fm-part>div{flex:1;min-width:0;padding:0 clamp(18px,4vw,70px)}
.fm-part .fm-n{display:block;font:500 clamp(44px,5.4vw,88px)/1 var(--f-serif);color:var(--f-ochre);margin-bottom:4px}
.fm-part .fm-label{display:block;font-size:14px;letter-spacing:.12em;color:var(--f-muted);margin-bottom:8px}
.fm-part h4{font-size:clamp(22px,2.4vw,38px);line-height:1.7;margin:0 0 8px}
.fm-part p{font-size:clamp(15px,1.2vw,17px);color:var(--f-ink);max-width:28em}
.fm-link{display:inline-block;margin-top:12px;font:600 15px var(--f-serif);color:var(--f-ink);border-bottom:1px solid var(--f-red);padding-bottom:4px;letter-spacing:.05em;text-decoration:none}
.fm-link:hover{color:var(--f-red)}
.fm-part-1{--pw:46%;margin-left:0}
.fm-part-2{--pw:38%;--pr:1.4deg;flex-direction:row-reverse;margin-right:0;margin-top:-1vw}.fm-part-2>div{text-align:right}.fm-part-2 p{margin-left:auto}
.fm-part-3{--pw:52%;--pr:-.8deg;margin-left:6%}
.fm-forms{background:#EAE0CB;margin-top:clamp(40px,6vw,90px);padding:clamp(50px,7vw,110px) 7%;display:flex;align-items:center;gap:6%}
.fm-sheets{position:relative;flex:none;width:50%;height:clamp(280px,40vw,560px)}
.fm-sheets img{position:absolute;width:38%;height:auto;border:1px solid #BFA878;background:#FBF8F1}
.fm-sheets img:nth-child(1){left:0;top:8%;transform:rotate(-7deg)}
.fm-sheets img:nth-child(2){left:30%;top:0;transform:rotate(1.5deg);z-index:2}
.fm-sheets img:nth-child(3){left:60%;top:10%;transform:rotate(7deg)}
.fm-sheets p{position:absolute;left:0;bottom:-2%;font-size:13px;color:var(--f-muted);line-height:1.8}
.fm-forms-copy{flex:1;min-width:0}
.fm-forms-copy h3{font-size:clamp(26px,3.2vw,50px);line-height:1.65;margin:8px 0 16px}
.fm-forms-copy p{font-size:clamp(15px,1.2vw,17px)}
.fm-emergency{background:var(--f-paper);display:flex;align-items:center;gap:5%;padding:clamp(50px,6vw,90px) 7%;border-top:2px solid var(--f-ochre)}
.fm-emergency>img{flex:none;width:42%;height:auto;border:1px solid var(--f-ochre);transform:rotate(1deg)}
.fm-emergency h2{font-size:clamp(26px,3.4vw,52px);line-height:1.6;margin:8px 0 14px;font-family:var(--f-serif);font-weight:600}
.fm-emergency p{line-height:2.1;font-size:clamp(15px,1.2vw,17px)}
@media(max-width:760px){
  .fm-head h2{font-size:34px}
  .fm-offer{display:block}
  .fm-offer>a{width:94%;margin:0 3%;transform:rotate(-1deg)}
  .fm-offer-copy{padding:26px 7% 0}
  .fm-part{display:block!important}
  .fm-part>img{width:88%!important;margin:0 6%}
  .fm-part>div{padding:20px 7% 0;text-align:left!important}
  .fm-part-2 p{margin-left:0}
  .fm-forms{display:block}
  .fm-sheets{width:100%;height:68vw;margin-bottom:34px}
  .fm-emergency{display:block}
  .fm-emergency>img{width:100%;margin-bottom:22px}
}