@charset "UTF-8";
/* Henai Renovation mock */
:root{
  --bg:#f4f1ea;
  --bg-2:#eee8dc;
  --ink:#222;
  --charcoal:#2f302e;
  --muted:#726e68;
  --line:rgba(15,42,35,.18);
  --red:#C83A2A;
  --green:#0F2A23;
  --white:#fffaf0;
  --fs-display:clamp(72px,13vw,180px);
  --fs-heading:clamp(34px,5vw,80px);
  --fs-sub:clamp(20px,2.4vw,32px);
  --fs-body:16px;
  --fs-small:16px;
}
*{box-sizing:border-box}
.logo-intro{position:fixed;inset:0;z-index:999;background:var(--bg);display:flex;align-items:center;justify-content:center}
.logo-intro-img{height:140px;width:auto;transform-origin:center center;will-change:transform}
.logo-intro.animating .logo-intro-img{transition:transform .75s cubic-bezier(.22,1,.36,1)}
.logo-intro.fading{transition:opacity .4s ease .1s;opacity:0;pointer-events:none}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans JP","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100vw}
a{color:inherit;text-decoration:none}
.header{position:fixed;inset:0 0 auto;z-index:100;padding:18px 32px;display:flex;justify-content:space-between;align-items:center;background:transparent;font-size:16px;pointer-events:none;transition:background .4s ease,backdrop-filter .4s ease,border-color .4s ease,padding .3s ease}
.header.scrolled{background:rgba(255,255,255,.25);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.3);padding:14px 32px}
.brand,.nav{pointer-events:auto;color:var(--green)}
.brand-logo{height:40px;width:auto;display:block;mix-blend-mode:multiply}
.hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:6px;background:none;border:none;cursor:pointer;pointer-events:auto;width:40px;height:40px;padding:0;box-sizing:border-box}
.hamburger span{display:block;width:24px;height:2px;background:var(--green);transition:transform .3s ease,opacity .3s ease}
.hamburger.open span{background:var(--ink)}
.hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.sp-br{display:none}
.pc-br{display:inline}
/* 外部リンク（プライバシーポリシー等）に外部リンクアイコンを付与 */
a[href*="privacy.html"]::after{content:"";display:inline-block;width:.72em;height:.72em;margin-left:3px;vertical-align:-.05em;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5h5v5'/%3E%3Cpath d='M19 5l-9 9'/%3E%3Cpath d='M19 13v6H5V5h6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5h5v5'/%3E%3Cpath d='M19 5l-9 9'/%3E%3Cpath d='M19 13v6H5V5h6'/%3E%3C/svg%3E") center/contain no-repeat;}
.sp-about{display:none}
.sp-style-btns{display:none}
.sp-nav{position:fixed;inset:0;background:var(--bg);z-index:98;opacity:0;pointer-events:none;transition:opacity .35s ease;overflow-y:auto;-webkit-overflow-scrolling:touch}
.sp-nav.open{opacity:1;pointer-events:auto}
.sp-nav-scroll{padding:88px 28px 56px;display:flex;flex-direction:column}
.sp-nav-cta-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:16px;background:var(--red);color:var(--white);font-size:16px;font-weight:800;letter-spacing:.08em;margin-bottom:36px}
.sp-nav-group{border-top:1px solid rgba(15,42,35,.12);padding:20px 0}
.sp-nav-group-ttl{font-size:10px;letter-spacing:.22em;color:var(--muted);font-weight:700;margin:0 0 14px;text-transform:uppercase}
.sp-nav-acc{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;padding:0;cursor:pointer;font-family:inherit;color:var(--ink);font-size:17px;font-weight:800;letter-spacing:-.01em}
.sp-nav-acc-icon{font-size:18px;color:var(--muted);transition:transform .25s ease}
.sp-nav-group.is-open .sp-nav-acc-icon{transform:rotate(180deg)}
.sp-nav-acc-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
.sp-nav-group.is-open .sp-nav-acc-body{max-height:640px}
.sp-nav-acc-body{padding-top:0}
.sp-nav-group.is-open .sp-nav-acc-body{padding-top:10px}
.sp-nav-styles{display:flex;flex-direction:column;gap:0}
.sp-nav-style-link{display:flex;align-items:center;gap:8px;padding:9px 0;color:var(--green);font-size:16px;font-weight:700}
.sp-nav-style-link em{font-style:normal;font-size:10px;letter-spacing:.12em;color:var(--red);font-weight:800;min-width:18px}
.sp-nav-page-link{display:block;padding:13px 0;color:var(--ink);font-size:17px;font-weight:800;letter-spacing:-.01em;border-bottom:1px solid rgba(15,42,35,.08)}
.sp-nav-legal{display:flex;justify-content:center;gap:20px;padding-top:28px}
.sp-nav-legal a{color:var(--muted);font-size:11px;letter-spacing:.04em}
.nav{display:flex;gap:24px;font-size:18px;letter-spacing:.01em;font-weight:700;align-items:center}
.h-scroll-wrap{height:200vh;position:relative;z-index:1}.h-scroll{position:sticky;top:0;height:100vh;overflow:hidden}.h-track{display:flex;height:100%;will-change:transform}
.panel{min-width:100vw;height:100vh;padding:96px 7vw 72px;display:flex;align-items:center;position:relative;overflow:hidden;background:var(--bg);isolation:isolate}
.fv-panel{flex-direction:column;align-items:flex-start;justify-content:center;padding-left:32px!important}
.fv-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.fv-panel .fv-bg::after{content:"";position:absolute;inset:0;background:rgba(255,250,240,.32);pointer-events:none;z-index:1}
.fv-bg-layer{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.6s ease;filter:saturate(1.08) brightness(1)}
.charcoal-bg-layer{filter:saturate(.6) brightness(.4)}
.panel-charcoal{background:var(--charcoal);color:var(--white)}
.fv-title{margin:0;color:var(--green);font-size:var(--fs-display);line-height:1.08;letter-spacing:-.04em;font-weight:900;font-family:"Noto Sans JP",sans-serif;white-space:nowrap;position:relative;z-index:2;display:flex;width:100%;gap:.02em}
.type-char{opacity:0;transform:translateY(.08em);transition:opacity .18s ease,transform .18s ease}
.fv-sub{font-size:clamp(18px,1.6vw,22px);font-weight:700;letter-spacing:.02em;line-height:1.9;color:var(--green);opacity:0;z-index:2;transition:opacity .6s ease 1.2s;margin:2em 0 0;position:relative;word-break:keep-all;overflow-wrap:normal}
.fv-panel.type-start .fv-sub{opacity:1}.fv-panel.type-start .type-char{opacity:1;transform:translateY(0)}
.fv-panel.type-start .type-char:nth-child(1){transition-delay:.05s}.fv-panel.type-start .type-char:nth-child(2){transition-delay:.16s}.fv-panel.type-start .type-char:nth-child(3){transition-delay:.27s}.fv-panel.type-start .type-char:nth-child(4){transition-delay:.38s}.fv-panel.type-start .type-char:nth-child(6){transition-delay:.49s}.fv-panel.type-start .type-char:nth-child(7){transition-delay:.6s}.fv-panel.type-start .type-char:nth-child(8){transition-delay:.71s}
.fv-panel::before,.final-message-panel::before{content:"";position:absolute;width:max(22vw,300px);height:260vh;background:var(--red);top:-80vh;left:55vw;transform:rotate(55deg) scaleY(0);transform-origin:center;transition:transform .55s cubic-bezier(.22,1,.36,1);z-index:0;opacity:.98;pointer-events:none}
.fv-panel.slash-start::before,.final-message-panel.active::before{transform:rotate(55deg) scaleY(1)}
.panel-copy{margin:0;max-width:1200px;font-size:var(--fs-sub);line-height:1.55;letter-spacing:-.04em;font-weight:820;line-height:1.7;font-size:clamp(28px,4vw,58px)}.panel-copy span{display:inline-block}.panel.text-reveal{padding:0}.panel.text-reveal .panel-copy{position:absolute}
.first-message-panel .panel-copy{right:8vw;bottom:14vh;text-align:right}.center-message-panel .panel-copy{top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;white-space:nowrap}.final-message-panel .panel-copy{left:32px;bottom:28vh;text-align:left;z-index:2;line-height:1.5}.text-reveal span.char{opacity:.14;transition:opacity .45s ease}.text-reveal.active span.char{opacity:1}
.section{padding:120px 7vw;position:relative}.section-head{text-align:center;margin-bottom:56px}.label{font-size:16px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:800;display:none;margin-bottom:10px}.title{margin:0;font-size:var(--fs-heading);line-height:1.5;letter-spacing:-.04em;font-weight:900}.lead{margin:22px auto 0;max-width:760px;color:var(--muted);font-size:16px;line-height:2.1;text-align:center}
.dark{background:var(--charcoal);color:var(--white)}.green{background:var(--green);color:var(--white)}
#problem{background:#2f302e;padding:112px 7vw 104px}#problem .section-head{max-width:1120px;margin:0 auto 56px}#problem .label{display:none}#problem .title{font-size:var(--fs-heading);font-weight:950;color:var(--white)}#problem .lead{margin-top:26px;max-width:920px;font-size:16px;color:rgba(255,250,240,.78)}
.problem-list{display:flex;justify-content:center;gap:clamp(24px,3vw,56px);flex-wrap:wrap;max-width:1200px;margin:64px auto 0;border:none}
.problem-item{width:clamp(190px,18vw,240px);height:clamp(190px,18vw,240px);border-radius:50%;border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;text-align:center;padding:28px;position:relative;overflow:hidden;background:transparent;transition:border-color .4s ease,background .4s ease;opacity:0;transform:translateY(28px)}
.problem-item.in-view{animation:fadeUp .8s cubic-bezier(.22,1,.36,1) forwards}
.problem-item.in-view:nth-child(1){animation-delay:.1s}
.problem-item.in-view:nth-child(2){animation-delay:.5s}
.problem-item.in-view:nth-child(3){animation-delay:.9s}
.problem-item.in-view:nth-child(4){animation-delay:1.3s}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.problem-item p{margin:0;font-size:16px;line-height:1.9;font-weight:800;color:rgba(255,250,240,.96);position:relative;z-index:2;letter-spacing:-.02em}
.problem-bottom{max-width:980px;margin:72px auto 0;color:var(--red);font-size:clamp(24px,2.2vw,38px);line-height:1.75;font-weight:900;letter-spacing:-.04em;text-align:center;min-height:2.8em}
.typewriter-cursor{display:inline-block;color:var(--red);font-weight:300;margin-left:1px;animation:blink .75s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.collage-section{position:relative;overflow:hidden;min-height:90vh;display:flex;align-items:center;justify-content:center}
.collage-bg{position:absolute;inset:0;z-index:0}
.collage-bg img{position:absolute;object-fit:cover;will-change:opacity}
.collage-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 65% at center,rgba(244,241,234,.78) 0%,rgba(244,241,234,.12) 100%);z-index:1;pointer-events:none}
.collage-content{position:relative;z-index:2;text-align:center;padding:60px 40px}
.collage-main{margin:16px 0 32px;font-size:clamp(42px,6.5vw,100px);font-weight:950;line-height:1.5;letter-spacing:-.07em;color:var(--ink);opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1),font-size 1.1s cubic-bezier(.22,1,.36,1),color .9s ease,letter-spacing .9s ease,margin .9s ease}
.collage-section.visible .collage-main{opacity:1;transform:translateY(0)}
.collage-section.swapped .collage-main{font-size:clamp(26px,3vw,40px);color:var(--muted);opacity:.45;letter-spacing:.01em;margin-bottom:12px}
.collage-desc{max-width:760px;margin:0 auto;font-size:var(--fs-sub);line-height:2;color:var(--ink);font-weight:900;opacity:0;transform:translateY(16px);transition:opacity .9s ease .2s,transform .9s cubic-bezier(.22,1,.36,1) .2s}
.collage-section.swapped .collage-desc{opacity:1;transform:translateY(0)}
.collage-section.swapped .collage-bg img{opacity:.06!important;transition:opacity 1.2s ease!important}
.collage-desc-lead{margin:0 0 16px;font-size:var(--fs-sub);font-weight:900;color:var(--ink)}
.collage-img-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:24px auto 24px;width:100%}
.collage-img-item{position:relative;overflow:hidden;border-radius:3px}
.collage-img-item img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.collage-img-item span{position:absolute;inset:0;display:flex;align-items:flex-end;padding:14px 12px;font-size:16px;font-weight:700;color:var(--white);background:linear-gradient(to top,rgba(0,0,0,.65) 0%,transparent 55%);letter-spacing:.06em;line-height:1.4}
.collage-desc-foot{margin:0;font-size:18px;font-weight:700;color:var(--ink);text-align:center}
/* Style section — immersive */
.style-section{position:relative;min-height:100vh;overflow:hidden;display:flex;align-items:stretch}
.style-panel{flex:0 0 100vw;min-width:100vw;height:100vh;min-height:100vh}
/* 横スクロールパネル内では100vhに収める（高さ連動で縦間隔を圧縮・PCのみ） */
@media (min-width:901px){
  .style-panel .style-immersive{min-height:0;height:100vh;justify-content:flex-start;padding-top:clamp(84px,12vh,104px);padding-bottom:clamp(20px,3vh,44px);gap:clamp(14px,2.6vh,32px)}
  .style-panel .style-immersive-body{gap:clamp(14px,2.4vh,30px)}
  .style-panel .style-detail{row-gap:clamp(2px,.4vh,6px)}
  .style-panel .sd-en{font-size:clamp(80px,11vh,130px);min-height:2em;line-height:1.0}
  .style-panel .sd-desc{font-size:clamp(14px,1.9vh,18px);min-height:2.6em;line-height:1.6}
  .style-panel .style-item{padding-top:clamp(6px,1vh,10px);padding-bottom:clamp(6px,1vh,10px);margin-bottom:clamp(2px,.4vh,4px)}
  .style-panel .si-en{font-size:clamp(14px,1.7vh,20px)}
  .style-panel .si-ja{font-size:clamp(10px,1.4vh,12px)}
}
.style-bg{position:absolute;inset:0;z-index:0}
.style-bg-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .35s ease;filter:saturate(1) brightness(1);will-change:opacity}
.style-bg-img.active{opacity:1}
.style-bg-veil{position:absolute;inset:0;z-index:1;background:none}
.style-immersive{position:relative;z-index:2;width:42%;min-height:100vh;padding:72px 32px 80px 42px;display:flex;flex-direction:column;gap:36px;background:rgba(30,31,30,.5);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.style-immersive-top .label{color:rgba(255,250,240,.5);margin-bottom:10px}
.style-immersive-title{margin:0 0 10px;font-size:26px;font-weight:950;letter-spacing:-.05em;color:var(--white)}
.style-immersive-lead{margin:0;font-size:16px;letter-spacing:.06em;color:rgba(255,250,240,.45);font-weight:500}
.lead-sp{display:none}
.style-immersive-body{display:flex;flex-direction:column;gap:32px;align-items:stretch}
.style-items{list-style:none;padding:0;margin:0;width:100%;display:grid;grid-template-columns:repeat(2,max-content);gap:6px}
.style-item{display:flex;align-items:center;gap:10px;padding:10px 18px;background:rgba(47,48,46,.42);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);margin-bottom:4px;cursor:pointer;opacity:.75;transition:opacity .25s ease,background .25s ease,border-color .25s ease;user-select:none}
.style-item:hover{opacity:1;background:rgba(47,48,46,.65);border-color:rgba(255,255,255,.22)}
.style-item.active{opacity:1;background:rgba(47,48,46,.72);border-color:rgba(255,250,240,.32)}
.style-item.active .si-name{color:var(--white)}
.si-num{font-size:11px;letter-spacing:.18em;color:rgba(255,250,240,.9);font-weight:800;min-width:26px;flex-shrink:0;padding-top:4px}
.si-names{display:flex;flex-direction:column;gap:3px}
.si-en{font-size:clamp(14px,1.4vw,20px);font-weight:600;font-style:normal;letter-spacing:.04em;line-height:1.15;color:rgba(255,250,240,.88);transition:color .35s;white-space:nowrap}
.si-ja{font-size:12px;letter-spacing:.06em;color:rgba(255,250,240,.55);font-weight:500;white-space:nowrap;font-style:normal;font-family:"Noto Sans JP",sans-serif}
.style-detail{display:grid;grid-template-columns:1fr 130px;grid-template-rows:auto auto;column-gap:16px;row-gap:12px;align-items:start;width:100%}
.sd-en{grid-column:1;grid-row:1;min-width:0}
.sd-desc{grid-column:1/3;grid-row:2;min-width:0}
.sd-btn{grid-column:2;grid-row:1;align-self:end;justify-self:end;margin-bottom:4px}
.sd-en{margin:0;font-size:clamp(52px,6.5vw,92px);line-height:1.0;letter-spacing:.02em;font-weight:300;color:var(--white);min-height:2em}
.sd-desc{margin:0;font-size:18px;line-height:1.8;color:rgba(255,250,240,.78);min-height:3.6em}
.sd-btn{
  border-color:rgba(255,250,240,.7);color:var(--white);
  width:100px!important;height:100px!important;
  border-radius:50%!important;padding:0!important;
  background:rgba(255,250,240,.12)!important;
  flex-direction:column!important;gap:0;
  font-size:12px!important;letter-spacing:.12em;font-weight:700;
  display:inline-flex!important;align-items:center;justify-content:center;
  align-self:end!important;justify-self:end!important;white-space:nowrap;text-align:center;line-height:1.8;
  transition:border-color .3s,background .3s,transform .3s;
  animation:sd-btn-pulse 3s ease-in-out infinite;
}
.sd-btn::after{display:none}
.sd-btn:hover{background:rgba(255,250,240,.22)!important;border-color:rgba(255,250,240,.9);transform:scale(1.08)!important;}
@keyframes sd-btn-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,250,240,.25);}
  50%{box-shadow:0 0 0 12px rgba(255,250,240,0);}
}
.btn{display:inline-flex;align-items:center;justify-content:center;width:118px;height:118px;border:1px solid rgba(255,255,255,.28);border-radius:50%;font-weight:700;font-size:16px;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.02);backdrop-filter:blur(8px);transition:background .3s ease,border-color .3s ease,transform .3s ease}.btn:hover{background:rgba(200,58,42,.16);border-color:rgba(200,58,42,.58);transform:translateY(-2px)}
.style-sub-images{position:absolute;left:4vw;bottom:3vw;z-index:2;display:flex;gap:10px}.style-sub-image{width:110px;height:70px;overflow:hidden;border:1px solid rgba(255,255,255,.32);cursor:pointer;padding:0;background:transparent}.style-sub-image img{width:100%;height:100%;object-fit:cover;display:block}
.ig-section{background:var(--bg-2);padding:40px 7vw 40px}
.ig-layout{display:flex;align-items:center;justify-content:space-between;gap:20px}
.ig-title{margin:6px 0 0;display:flex;align-items:center;gap:10px;font-size:clamp(14px,1.6vw,20px);font-weight:700;letter-spacing:-.03em;color:var(--green)}
.ig-section .label{font-size:12px;color:var(--muted);margin-bottom:4px}
.ig-btn-wrap{display:flex;justify-content:flex-end;align-items:center}
.ig-btn{border-color:var(--green);color:var(--green);line-height:1.6;text-align:center;width:110px;height:110px;font-size:11px;letter-spacing:.04em}
.steps-wrap{position:relative;margin-top:56px}
.steps-line{position:absolute;top:40px;left:calc(10% + 40px);right:calc(10% + 40px);height:1px;background:rgba(255,255,255,.15);overflow:hidden;z-index:0}
.steps-line::after{content:"";display:block;height:100%;background:rgba(255,255,255,.55);transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.22,1,.36,1) .2s}
.steps-wrap.in-view .steps-line::after{transform:scaleX(1)}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 20px 40px;opacity:0;transform:translateY(24px)}
.step.revealed{opacity:1;transform:translateY(0);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.step-icon{width:80px;height:80px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;margin-bottom:20px;background:var(--green);position:relative;z-index:1;flex-shrink:0}
.step-icon svg{width:26px;height:26px;stroke:rgba(255,250,240,.9)}
.step small{font-size:16px;letter-spacing:.18em;opacity:.5;font-weight:800;margin-bottom:10px;text-transform:uppercase}
.step h3{margin:0 0 12px;font-size:18px;font-weight:850;letter-spacing:-.03em;line-height:1.3}
.step p{margin:0;font-size:16px;line-height:1.9;color:rgba(255,250,240,.62);text-align:left}
.final-cta{position:relative;min-height:100vh;overflow:hidden}
.cta-bg-cream,.cta-bg-red,.cta-bg-dark{position:absolute;inset:0;z-index:0}
.cta-bg-cream{background:var(--bg)}
.cta-bg-red{background:var(--red);opacity:0;transition:opacity 0s ease .55s}
.final-cta.cta-active .cta-bg-red{opacity:1}
.cta-bg-dark{background:var(--charcoal);opacity:0;transition:opacity .6s ease .6s}
.final-cta.cta-active .cta-bg-dark{opacity:1}
/* clip-pathで3色分割しているため::afterの斜線は非表示 */
.final-cta::after{display:none}
/* type-char — brタグがnth-childに含まれるため6〜8に修正 */
.final-cta .type-char{opacity:0;transform:translateY(.08em);transition:opacity .2s ease,transform .2s ease}
.final-cta.cta-active .type-char:nth-child(1){opacity:1;transform:translateY(0);transition-delay:.4s}
.final-cta.cta-active .type-char:nth-child(2){opacity:1;transform:translateY(0);transition-delay:.52s}
.final-cta.cta-active .type-char:nth-child(3){opacity:1;transform:translateY(0);transition-delay:.64s}
.final-cta.cta-active .type-char:nth-child(4){opacity:1;transform:translateY(0);transition-delay:.76s}
.final-cta.cta-active .type-char:nth-child(6){opacity:1;transform:translateY(0);transition-delay:.9s}
.final-cta.cta-active .type-char:nth-child(7){opacity:1;transform:translateY(0);transition-delay:1.02s}
.final-cta.cta-active .type-char:nth-child(8){opacity:1;transform:translateY(0);transition-delay:1.14s}
.final-cta .cta-buttons{opacity:0;transition:opacity .7s ease 1.2s}
.final-cta.cta-active .cta-buttons{opacity:1}
.cta-headline{position:absolute;left:32px;top:50%;transform:translateY(-50%);z-index:2;margin:0;font-size:clamp(52px,7vw,120px);font-weight:900;font-family:"Noto Sans JP",sans-serif;letter-spacing:-.03em;line-height:1.25;color:var(--green)}
/* CTA 共通 */
.cta-buttons{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:20px;color:var(--white)}
/* 左：問い合わせ — 左下に小さく */
.cta-left{left:6vw;bottom:8vh}
/* 右：テキスト＋ボタン — 上下中央、中央揃え */
.cta-right{right:4vw;top:50%;transform:translateY(-50%);align-items:center;width:clamp(300px,34vw,500px)}
.cta-main-copy{margin:0;font-size:var(--fs-sub);font-weight:900;color:var(--white);line-height:1.55;letter-spacing:-.04em;text-align:center}
/* ENTRYボタンラップ */
.cta-entry-wrap{position:relative;width:320px;height:320px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* A: 円周回転テキスト */
.cta-orbit-text{position:absolute;inset:-16px;width:calc(100% + 32px);height:calc(100% + 32px);transform-origin:center;animation:orbit-spin 16s linear infinite;pointer-events:none;overflow:visible}
.cta-orbit-text text{font-size:10px;font-weight:700;fill:var(--red);letter-spacing:.18em;font-family:"Helvetica Neue",Arial,sans-serif;text-transform:uppercase}
@keyframes orbit-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* B: パルス波紋 */
.cta-pulse{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,250,240,.6);animation:pulse-ring 2.8s ease-out infinite;pointer-events:none}
.cta-pulse-2{animation-delay:1.4s}
@keyframes pulse-ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.2);opacity:0}}
.cta-entry-btn{position:relative;z-index:1;width:320px!important;height:320px!important;font-size:20px;letter-spacing:.18em;border-width:1.5px;background:var(--charcoal)!important;flex-direction:column!important;gap:8px!important}
.cta-btn-main{font-size:28px;font-weight:700;letter-spacing:.22em;color:var(--white);display:block}
.cta-btn-sub{font-size:11px;font-weight:500;letter-spacing:.12em;color:rgba(255,250,240,.7);display:block}
.cta-entry-link{font-size:16px;font-weight:700;color:rgba(255,250,240,.88);letter-spacing:.06em;border-bottom:1px solid rgba(255,250,240,.38);padding-bottom:4px;transition:color .3s,border-color .3s;display:inline-block}
.cta-entry-link:hover{color:var(--white);border-color:rgba(255,250,240,.8)}
.cta-inquiry-small{margin-top:20px;display:flex;flex-direction:column;gap:5px}
.cta-inquiry{color:rgba(15,42,35,.65);font-size:16px;font-weight:700;letter-spacing:.04em;border-bottom:1px solid rgba(15,42,35,.25);padding-bottom:3px;transition:color .3s ease,border-color .3s ease}
.cta-inquiry:hover{color:var(--green);border-color:rgba(15,42,35,.6)}
.cta-inquiry-note{margin:0;font-size:16px;color:rgba(15,42,35,.45);letter-spacing:.03em;line-height:1.7}.footer{background:var(--charcoal);color:var(--white);padding:64px 32px 36px}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:56px;gap:48px}
.footer-logo-img{height:40px;width:auto;display:block;}
.footer-links{display:flex;gap:56px;align-items:flex-start}
.footer-nav-group{}
.footer-nav-label{margin:0 0 14px;font-size:18px;font-weight:600;letter-spacing:.06em;text-transform:none}
.footer-nav-label a{color:rgba(255,250,240,.85);transition:color .2s}
.footer-nav-label a:hover{color:var(--white)}
.footer-nav-sub{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.footer-nav-sub li a{color:rgba(255,250,240,.68);font-size:var(--fs-small);font-weight:400;letter-spacing:.02em;transition:color .2s}
.footer-nav-sub li a:hover{color:var(--white)}
.footer-ig{background:transparent;padding:32px 0;border-top:1px solid rgba(255,250,240,.12);margin-bottom:0}
.footer-ig .label{color:rgba(255,250,240,.45)}
.footer-ig .ig-title{color:rgba(255,250,240,.85)}
.footer-ig .ig-btn{border-color:rgba(255,250,240,.35);color:rgba(255,250,240,.85)}
.footer-bottom{padding-top:28px;border-top:1px solid rgba(255,250,240,.1);display:flex;justify-content:space-between;align-items:flex-end;font-size:var(--fs-small);color:rgba(255,255,255,.85);flex-wrap:wrap;gap:12px}
.footer-bottom-links{display:flex;gap:20px}
.footer-bottom-links a{color:rgba(255,255,255,.85);font-size:var(--fs-small);transition:color .2s}
.footer-bottom-links a:hover{color:var(--white)}
.footer-copyright{font-size:12px}
/* フッター下部: リンクを最上段（全幅）、注釈とコピーライトを同じ段で下揃え */
.footer-bottom-links{gap:40px;flex-basis:100%}
.footer-bottom .footer-note{order:1;margin:16px 0 0 !important}
.footer-bottom .footer-copyright{order:2}
/* Why section */
.why-section{background:var(--bg-2)}
.why-card{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.why-section.in-view .why-card:nth-child(1){opacity:1;transform:translateY(0);transition-delay:.25s}
.why-section.in-view .why-card:nth-child(2){opacity:1;transform:translateY(0);transition-delay:.45s}
.why-section.in-view .why-card:nth-child(3){opacity:1;transform:translateY(0);transition-delay:.65s}
.why-section.in-view .why-card:nth-child(4){opacity:1;transform:translateY(0);transition-delay:.85s}
.why-section.in-view .why-card:nth-child(5){opacity:1;transform:translateY(0);transition-delay:1.05s}
.why-body{max-width:900px;margin:0 auto;text-align:center}
.why-lead{font-size:var(--fs-sub);font-weight:900;letter-spacing:-.04em;color:var(--green);line-height:1.6;margin:0 0 20px}
.why-sub{font-size:16px;font-weight:400;color:var(--muted);line-height:2;margin:0 0 48px}
.why-cards{display:flex;justify-content:center;gap:clamp(12px,2vw,32px);flex-wrap:nowrap;margin-bottom:56px}
.why-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:clamp(138px,15vw,178px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:1px solid var(--line);padding:16px;opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.why-section.in-view .why-card:nth-child(1){opacity:1;transform:translateY(0);transition-delay:.1s}
.why-section.in-view .why-card:nth-child(2){opacity:1;transform:translateY(0);transition-delay:.22s}
.why-section.in-view .why-card:nth-child(3){opacity:1;transform:translateY(0);transition-delay:.34s}
.why-section.in-view .why-card:nth-child(4){opacity:1;transform:translateY(0);transition-delay:.46s}
.why-section.in-view .why-card:nth-child(5){opacity:1;transform:translateY(0);transition-delay:.58s}
.why-card svg{width:24px;height:24px;stroke:var(--green);opacity:.7}
.why-card span{font-size:14px;font-weight:800;color:var(--green);letter-spacing:-.01em;text-align:center;line-height:1.5;word-break:keep-all;overflow-wrap:normal}
.why-quote{margin:0 0 32px;font-size:var(--fs-sub);font-weight:950;letter-spacing:-.05em;line-height:1.75;color:var(--red);border-left:none;padding:0;position:relative}
.why-quote::before{display:none}
.why-fee{font-size:16px;font-weight:400;color:var(--muted);line-height:2;margin:0 0 20px;max-width:680px;margin-left:auto;margin-right:auto}
.why-link{font-size:16px;font-weight:700;color:var(--green);letter-spacing:.04em;border-bottom:1px solid var(--green);padding-bottom:2px;transition:opacity .2s}
.why-link:hover{opacity:.6}
/* 料金（無料の仕組み）説明ブロック — 本文と視覚的に分離した注釈カード */
.why-fee-note{max-width:580px;margin:44px auto 0;padding:30px 30px 26px;background:#FAF6EF;border:1px solid var(--line);border-radius:16px;position:relative;box-shadow:0 6px 24px rgba(0,0,0,.04);text-align:left}
.why-fee-note::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red);border-radius:16px 0 0 16px}
.why-fee-badge{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;color:#fff;background:var(--red);padding:5px 16px;border-radius:999px;margin-bottom:16px}
.why-fee-note .why-fee{margin:0 0 16px}
.why-fee-note .why-link{display:block;width:fit-content;margin:0 auto}
.flow-detail-link{font-size:16px;font-weight:700;color:var(--white);letter-spacing:.04em;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:2px;transition:opacity .2s}
.flow-detail-link:hover{opacity:.7}
.flow-cta{width:100%;margin-top:8px;padding-top:52px;display:flex;flex-direction:column;align-items:center;gap:28px}

/* Flow closing */
.flow-closing{text-align:center;margin-top:72px;display:flex;flex-direction:column;align-items:center;gap:28px}
.flow-closing-text{margin:0;font-size:var(--fs-sub);font-weight:950;letter-spacing:-.05em;line-height:1.65;color:var(--white);word-break:keep-all;overflow-wrap:normal}
.flow-btn-wrap{position:relative;width:190px;height:190px;display:flex;align-items:center;justify-content:center}
.flow-pulse{inset:0}
.flow-cta-btn{border-color:rgba(255,250,240,.55);color:var(--white);width:190px;height:190px;font-size:16px;letter-spacing:.12em;position:relative;z-index:1;flex-direction:column;gap:7px}
.flow-btn-main{font-size:22px;font-weight:700;letter-spacing:.18em;line-height:1;display:block}
.flow-btn-sub{font-size:11px;font-weight:500;letter-spacing:.08em;line-height:1;display:block;text-transform:none}
.flow-cta-btn:hover{background:rgba(200,58,42,.22);border-color:var(--red)}

/* Fit section */
.fit-section{background:var(--bg-2);color:var(--ink)}
.fit-section .section-head{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.fit-section.in-view .section-head{opacity:1;transform:translateY(0)}
.fit-section .title{color:var(--green);word-break:keep-all;overflow-wrap:normal}
.fit-section .lead{color:var(--muted)}
/* インフォグラフィック */
.fit-infographic{display:grid;grid-template-columns:1fr 1px 1fr;gap:0;max-width:1100px;margin:0 auto;align-items:start}
.fit-side{opacity:0;transform:translateY(32px);transition:opacity .7s ease .4s,transform .7s cubic-bezier(.22,1,.36,1) .4s}
.fit-section.in-view .fit-side{opacity:1;transform:translateY(0)}
.fit-no{transition-delay:.6s!important}
/* バッジ */
.fit-badge{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.fit-badge svg{width:44px;height:44px}
.fit-badge-yes{background:rgba(200,58,42,.1);color:var(--red)}
.fit-badge-no{background:rgba(0,0,0,.06);color:var(--muted)}
.fit-side-label{text-align:center;font-size:16px;font-weight:800;letter-spacing:.1em;margin:0 0 28px;text-transform:none}
.fit-yes .fit-side-label{color:var(--red)}
.fit-no .fit-side-label{color:var(--ink)}
/* アイテムリスト */
.fit-items{list-style:none;padding:0;margin:0 auto;display:inline-flex;flex-direction:column;gap:0;width:auto}
.fit-side{display:flex;flex-direction:column;align-items:center}
.fit-item{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid rgba(0,0,0,.06);opacity:0;transform:translateX(-16px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1);width:100%}
.fit-item-no{transform:translateX(16px)}
.fit-section.in-view .fit-item{opacity:1;transform:translateX(0)}
.fit-item:nth-child(1){transition-delay:.9s}.fit-item:nth-child(2){transition-delay:1.05s}.fit-item:nth-child(3){transition-delay:1.2s}.fit-item:nth-child(4){transition-delay:1.35s}
.fit-item-no:nth-child(1){transition-delay:1.0s}.fit-item-no:nth-child(2){transition-delay:1.15s}.fit-item-no:nth-child(3){transition-delay:1.3s}.fit-item-no:nth-child(4){transition-delay:1.45s}
.fit-icon{border-radius:50%;display:grid;place-items:center;font-weight:900;flex-shrink:0;line-height:1;font-style:normal}
.fit-item-yes .fit-icon{width:26px;height:26px;font-size:13px;background:var(--red);color:var(--white)}
.fit-item-no .fit-icon{width:26px;height:26px;font-size:13px;background:rgba(0,0,0,.1);color:var(--muted)}
.fit-item-yes span:last-child{font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.5;color:var(--ink)}
.fit-item-no span:last-child{font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.5;color:var(--muted)}
/* 中央VS */
.fit-divider{display:flex;flex-direction:column;align-items:center;padding-top:96px;gap:0}
.fit-divider-line{width:1px;flex:1;background:var(--line)}
.fit-divider-vs{display:none}
.fit-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:16px}
.fit-list li{font-size:16px;line-height:1.75;padding-left:24px;position:relative;color:var(--ink)}
.fit-yes .fit-list li::before{content:"—";position:absolute;left:0;color:var(--red);font-weight:700}
.fit-no .fit-list li{color:var(--muted)}
.fit-no .fit-list li::before{content:"—";position:absolute;left:0;color:rgba(0,0,0,.2);font-weight:700}

/* Partner section */
.partner-section{background:var(--green);color:var(--white);text-align:center}
.partner-inner{max-width:860px;margin:0 auto}
.partner-section .label{color:rgba(255,250,240,.5);margin-bottom:24px}
.partner-title{margin:0 0 24px;font-size:var(--fs-sub);font-weight:950;letter-spacing:-.05em;line-height:1.45;color:var(--white)}
.partner-desc{margin:0 0 36px;font-size:16px;color:rgba(255,250,240,.65);line-height:2}
.partner-link{display:inline-block;font-size:16px;font-weight:700;color:var(--white);letter-spacing:.06em;border-bottom:1px solid rgba(255,250,240,.4);padding-bottom:4px;transition:border-color .2s,opacity .2s}
.partner-link:hover{border-color:rgba(255,250,240,.85);opacity:.85}

/* ===== 6ステップ 縦並びレイアウト ===== */
.steps-6{grid-template-columns:1fr;max-width:640px;margin:0 auto;position:relative}
.steps-6::before{content:"";position:absolute;left:34px;top:34px;width:1px;height:var(--sp-flow-line,0px);background:rgba(255,250,240,.55);z-index:0;pointer-events:none}
.steps-6 .step{display:grid;grid-template-columns:68px 1fr;column-gap:28px;row-gap:6px;padding:0 0 52px;text-align:left;align-items:start}
.steps-6 .step:last-child{padding-bottom:0}
.steps-6 .step-icon{grid-column:1;grid-row:1/4;width:68px;height:68px;margin-bottom:0;position:relative;z-index:1}
.steps-6 .step-icon svg{width:28px;height:28px}
.steps-6 .step small{grid-column:2;grid-row:1}
.steps-6 .step h3{grid-column:2;grid-row:2;margin-bottom:4px;font-size:18px}
.steps-6 .step p{grid-column:2;grid-row:3;text-align:left}
/* 縦に伸びる接続線 (desktop) */
.steps-wrap:has(.steps-6) .steps-line{display:none}

@media(max-width:900px){
  .brand-logo{height:28px}
  .footer-logo-img{height:28px}
  .pc-br{display:none}
  .header{padding:16px 22px}
  .header.scrolled{padding:12px 22px}
  .nav{display:none}
  .hamburger{display:flex}
  .sp-br{display:block;height:0}

  /* Problem SP: 付箋スタイル */
  .problem-list{flex-direction:column;gap:10px;margin-top:28px;align-items:stretch}
  .problem-item{width:100%;height:auto;border-radius:2px;padding:16px 20px;background:var(--bg);border:none;border-left:4px solid var(--red);flex-direction:column;align-items:flex-start;text-align:left;gap:0;box-shadow:2px 3px 12px rgba(0,0,0,.2);transform:translateY(16px)}
  .problem-item p{font-size:16px;line-height:1.7;color:var(--ink);font-weight:700}
  .problem-item.in-view{animation:stickyUp .5s cubic-bezier(.22,1,.36,1) forwards}
  .problem-item.in-view:nth-child(1){animation-delay:.05s}
  .problem-item.in-view:nth-child(2){animation-delay:.2s}
  .problem-item.in-view:nth-child(3){animation-delay:.35s}
  .problem-item.in-view:nth-child(4){animation-delay:.5s}
  @keyframes stickyUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
  .section{padding:84px 22px}
  #problem .title{font-size:26px}
  .section-head,.concept-grid{grid-template-columns:1fr}
  .problem-list,.steps{grid-template-columns:1fr}
  .lead-pc{display:none}
  .lead-sp{display:inline}
  /* スタイルセクション SP */
  .style-section{min-height:100svh}
  .style-panel{flex:none;min-width:100%;width:100%;height:auto;min-height:100svh;z-index:5}
  .style-immersive{padding:30px 22px 22px;width:90%;min-height:auto;height:auto;align-self:flex-start;background:rgba(0,0,0,.32);backdrop-filter:none;-webkit-backdrop-filter:none;margin-top:60px}
  .style-immersive-body{grid-template-columns:1fr;gap:20px}
  .style-items{display:none}
  /* style-detail: スタイル名の横にMOREボタン */
  .style-detail{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:12px;row-gap:10px;align-items:end;order:-1}
  .sd-en{grid-column:1;grid-row:1;font-size:clamp(32px,9vw,48px);text-shadow:0 2px 18px rgba(0,0,0,.75)}
  .sd-btn{grid-column:2;grid-row:1;align-self:flex-end;width:80px!important;height:80px!important;border-radius:50%!important;padding:0!important;font-size:12px!important;flex-shrink:0;background:rgba(255,250,240,.15)!important;border-color:rgba(255,250,240,.7)!important}
  .sd-desc{grid-column:1/3;grid-row:2;display:block;font-size:16px;color:var(--white);line-height:1.9;text-shadow:0 1px 8px rgba(0,0,0,.7)}
  /* スタイルセクション タイトル・リードのシャドウ・色 */
  .style-immersive-title{text-shadow:0 2px 10px rgba(0,0,0,.65)}
  .style-immersive-lead{color:rgba(255,250,240,.9);text-shadow:0 1px 8px rgba(0,0,0,.65)}
  /* SP 9スタイルボタングリッド — 高さ統一 */
  .sp-style-btns{position:absolute;bottom:24px;left:16px;right:16px;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:52px;gap:5px}
  .sp-style-btn{display:flex;align-items:center;justify-content:center;height:52px;padding:4px;background:rgba(15,42,35,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:rgba(255,250,240,.82);font-size:10px;font-weight:700;letter-spacing:.01em;text-align:center;line-height:1.3;border:1px solid rgba(255,250,240,.18);transition:background .25s,border-color .25s,color .25s}
  .sp-style-btn.active{background:rgba(200,58,42,.75);border-color:rgba(200,58,42,.6);color:#fff}
  .style-item{padding:12px 0}
  .si-name{font-size:clamp(14px,4vw,20px)}
  .panel-copy{font-size:7vw}

  /* 横スクロール → 縦スタック */
  .h-scroll-wrap{height:auto;overflow-x:clip}
  .h-scroll{position:static;height:auto;overflow:visible}
  .h-track{flex-direction:column;width:100%;height:auto;transform:none!important}
  .panel{min-width:100%;position:sticky;top:0}

  /* logo-intro: SP見切れ防止 */
  .logo-intro-img{height:auto!important;width:80vw;max-width:520px}

  /* パネル1: フルスクリーン・インパクト */
  .fv-panel{height:100dvh;min-height:100svh;z-index:1;padding:80px 22px 48px;align-items:flex-start}
  .fv-title{font-size:clamp(56px,16vw,76px);white-space:normal;line-height:1.15;flex-wrap:wrap;width:100%;justify-content:flex-start}
  .fv-sub{width:100%;text-align:left}
  /* 「、」の後で強制改行 → 「好きに、」「偏れ。」の2行に */
  .fv-title-br{flex-basis:100%;width:100%;height:0;display:block}
  .fv-panel::before{width:max(28vw,100px)!important;left:52vw!important}
  .final-message-panel::before{top:-55vh!important}

  /* パネル2〜4: スタックカード */
  .first-message-panel{height:72vh;z-index:2;padding:48px 12px;justify-content:center;align-items:center}
  .center-message-panel{height:72vh;z-index:3;padding:48px 6px;justify-content:center;align-items:center}
  .final-message-panel{height:72vh;z-index:4;padding:48px 12px;justify-content:center;align-items:center}
  .first-message-panel .panel-copy,
  .center-message-panel .panel-copy,
  .final-message-panel .panel-copy{position:static;top:auto;left:auto;right:auto;bottom:auto;text-align:center;transform:none}
  .center-message-panel .panel-copy{white-space:normal}

  /* SP: 下から上にスライドアップする文字出現アニメーション */
  .text-reveal span.char{opacity:0;transform:translateY(28px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
  .text-reveal.active span.char{opacity:1;transform:translateY(0)}
  .final-message-panel::before{transform:rotate(55deg) scaleY(1)!important;transition:none!important}
  .final-message-panel .panel-copy{bottom:auto;top:50%;transform:translateY(-50%)}

  /* Aboutコラージュ SP：PC版を隠してSP版を表示 */
  .collage-bg,.collage-content,.collage-bg::after{display:none!important}
  .collage-section{min-height:auto;padding:0;display:block;background:transparent;overflow:visible;border-bottom:none}
  .sp-about{display:block}

  /* SP Hero (スライダー) */
  .sp-hero{position:sticky;top:0;height:50svh;overflow:hidden;z-index:0}
  .sp-slider-bg{position:absolute;inset:0}
  .sp-slider-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease}
  .sp-slider-bg img.active{opacity:1}
  .sp-hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(15,42,35,.25) 0%,rgba(15,42,35,.55) 100%);z-index:1}
  .sp-hero-text{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 28px;color:var(--white)}
  .sp-hero-text .label{color:rgba(255,250,240,.7);margin-bottom:16px}
  .sp-hero-text h2{font-size:clamp(28px,8vw,40px);font-weight:950;letter-spacing:-.05em;line-height:1.2;margin:0}
  .sp-hero-text h2 br{display:block}
  .sp-scroll-cue{display:none}

  /* SP Features (アイコン説明) */
  .sp-features-section{background:var(--bg);padding:40px 24px 64px;position:relative;z-index:1}
  .sp-intro{font-size:19px;color:var(--muted);line-height:1.9;margin-bottom:28px;font-weight:700}
  .sp-features{display:flex;flex-direction:column;gap:16px;margin-bottom:36px}
  /* コラージュ画像: 正方形 → 横長(高さ半分以下) */
  .sp-features .collage-img-item img{aspect-ratio:2.6/1}
  .sp-feature{display:flex;align-items:center;gap:16px;padding:18px 20px;background:var(--bg-2);border-left:3px solid var(--red)}
  .sp-feature svg{width:26px;height:26px;flex-shrink:0;stroke:var(--green)}
  .sp-feature span{font-size:16px;font-weight:800;color:var(--green);letter-spacing:-.02em}
  .sp-outro{font-size:16px;color:var(--muted);line-height:2}

  /* Flow: 縦タイムライン */
  .steps-line{display:none}
  .steps{display:flex;flex-direction:column;gap:0;border:none;margin-top:0}
  .step{display:grid;grid-template-columns:36px 1fr;column-gap:16px;row-gap:4px;min-height:unset;padding:0 0 40px;border:none;opacity:0;transform:translateY(20px);text-align:left;align-items:start;position:relative;z-index:1}
  .step:last-child{padding-bottom:0}
  .step-icon{width:36px;height:36px;margin-bottom:0;position:relative;z-index:1;grid-column:1;grid-row:1/span 3}
  .step small{grid-column:2;grid-row:1}
  .step h3{grid-column:2;grid-row:2}
  .step p{grid-column:2;grid-row:3}
  .step-icon svg{width:20px;height:20px;stroke:rgba(255,250,240,.9)}
  /* スクロール連動の縦線（steps-wrap に1本） */
  .steps-wrap::after{content:"";position:absolute;left:18px;top:18px;width:1px;height:var(--sp-flow-line,0px);background:rgba(255,250,240,.4);z-index:0}
  .step small{text-align:left}
  .step h3{text-align:left;margin-bottom:6px}
  .step p{text-align:left}

  /* CTA セクション SP (TOP page) — page-split-cta と同パターンの固定クリップ */
  .final-cta{min-height:100svh;position:relative}
  .final-cta::after{display:none}
  .cta-bg-cream,.cta-bg-red,.cta-bg-dark{display:block}
  /* JSのクリップを無効化 → 上ベージュ/赤斜線/下ダーク 縦分割 */
  .final-cta .cta-bg-cream{clip-path:polygon(0 0,100% 0,100% 12%,0 34%)!important;background:var(--bg)!important}
  .final-cta .cta-bg-red{clip-path:polygon(0 34%,100% 12%,100% 20%,0 42%)!important;background:var(--red)!important;opacity:1!important;transition:none!important}
  .final-cta .cta-bg-dark{clip-path:polygon(0 42%,100% 20%,100% 100%,0 100%)!important;background:var(--charcoal)!important;opacity:1!important;transition:none!important}
  /* テキスト: 上部ベージュ帯 */
  .cta-headline{left:24px;top:6vh;transform:none;font-size:clamp(44px,13vw,68px);color:var(--green);line-height:1.15;z-index:2}
  .cta-headline .type-char{color:var(--green)}
  /* STARTボタン: 下部ダーク帯中央 */
  .final-cta .cta-buttons.cta-right{position:absolute!important;left:0!important;right:0!important;top:auto!important;bottom:18vh!important;transform:none!important;width:100%!important;align-items:center!important;justify-content:center!important;z-index:3}
  .final-cta .cta-main-copy{display:none!important}
  .final-cta .cta-entry-wrap{width:200px!important;height:200px!important}
  .final-cta .cta-entry-btn{width:200px!important;height:200px!important;font-size:16px!important;background:var(--charcoal)!important}
  /* 下層CTA: 問い合わせブロック非表示 */
  .page-split-cta .cta-left{display:none}
  /* SP: JSクリップを上書き → 上/赤斜線/下 縦分割 */
  /* [page-split-cta SP rules moved to end] */

  /* フッター SP — ロゴ＋コピーライトのみ */
  .footer{padding:32px 22px 24px}
  .footer-top{margin-bottom:0}
  .footer-logo{margin:0 auto 16px;display:block}
  .footer-links{display:none}
  .footer-ig{display:none}
  .footer-bottom{border-top:1px solid rgba(255,250,240,.1);padding-top:16px;flex-direction:column;align-items:center;gap:0;text-align:center}
  .footer-bottom-links{display:none}
  .footer-note{display:block;width:100%;text-align:left;margin-right:0 !important;}
  .footer-copyright{margin-top:18px}

  /* フッター */
  .footer-inner{grid-template-columns:1fr}

  /* Why section SP */
  .why-cards{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:155px;gap:12px;flex-wrap:unset}
  .why-card{width:auto;height:auto;border-radius:12px;padding:16px 12px;aspect-ratio:unset}
  .why-card:last-child{grid-column:1/-1;width:calc(50% - 6px);justify-self:center;height:155px}
  .why-card svg{width:22px;height:22px}
  .why-card span{font-size:13px}
  .why-quote{font-size:20px}

  /* 6ステップ SP */
  .steps-6 .step{grid-template-columns:36px 1fr;column-gap:16px}
  .steps-6 .step-icon{width:36px;height:36px}
  .steps-6 .step-icon svg{width:20px;height:20px}
  .steps-6::before{left:18px;top:18px}

  /* Flow closing SP */
  .flow-closing{margin-top:48px}
  .flow-cta-btn{font-size:18px}

  /* Fit section SP */
  .fit-grid{grid-template-columns:1fr;gap:16px}
  .fit-col{padding:28px 24px}

  /* Partner section SP */
  .partner-title{font-size:22px}
}

/* ===== PC追従テキストボタン ===== */
.sticky-cta{
  position:fixed;bottom:100px;right:32px;z-index:150;
  display:inline-flex;align-items:center;justify-content:center;
  width:132px;height:132px;
  background:rgba(200,58,42,.95);color:var(--white);
  font-size:14px;font-weight:800;letter-spacing:.06em;
  border-radius:50%;
  box-shadow:0 6px 28px rgba(200,58,42,.35);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .35s ease,transform .35s ease,box-shadow .25s ease;
  text-align:center;line-height:1.4;white-space:pre-line
}
.sticky-cta::before{display:none}
.sticky-cta.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.sticky-cta:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(15,42,35,.4)}

/* ===== SP追従FABボタン ===== */
.fab-group {
  display: none;
  position: fixed;
  right: 28px;
  bottom: 36px;
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.fab-group.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.fab {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  transition: transform .22s ease, box-shadow .22s ease;
  position: relative;
}
.fab:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.22); }
.fab-tel { background: rgba(91,159,116,.82); }
.fab-mail { background: rgba(200,58,42,.82); }
.fab svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fab::before {
  content: attr(aria-label);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(30,30,30,.82);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.fab:hover::before { opacity: 1; }
@media(max-width:900px) {
  .fab-group { display: flex; right: 18px; bottom: 24px; }
  .sticky-cta { display: none; }
  .fab { width: 62px; height: 62px; }
  .fab svg { width: 20px; height: 20px; }
  .fab::before { display: none; }
}

/* ===== ナビ CTA リンク ===== */
/* ===== ドロップダウンメニュー ===== */
.nav-item-wrap { position: relative; display: flex; align-items: center; }
.nav-chevron { font-size: 15px; opacity: .6; margin-left: 3px; transition: transform .25s ease; }
.nav-item-wrap:hover .nav-chevron { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: -24px;
  background: rgba(30,31,30,.82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: none;
  border-top: 2px solid var(--red);
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
  padding: 8px 0 22px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease;
  z-index: 200;
}
.nav-item-wrap:hover .nav-dropdown { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nav-dropdown a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,250,240,.88);
  letter-spacing: .04em;
  white-space: nowrap;
  transition: color .2s ease, gap .2s ease;
  position: relative;
}
.nav-dropdown a::before {
  content: "→";
  color: rgba(255,250,240,.45);
  font-size: 12px;
  opacity: 1;
  transform: translateX(0);
  transition: color .2s ease;
  flex-shrink: 0;
}
.nav-dropdown a:hover {
  color: #fff;
}
.nav-dropdown a:hover::before { color: rgba(255,250,240,.9); }

.nav .nav-cta {
  color: var(--ink);
  font-weight: 900;
}
.nav > a:not(.nav-btn) { transition: opacity .2s ease; }
.nav > a:not(.nav-btn):hover { opacity: .55; }
.nav .nav-btn {
  padding: 0;
  background: none;
  color: inherit;
  font-weight: 700;
  letter-spacing: .01em;
  border-radius: 0;
  align-self: auto;
  line-height: inherit;
  transition: color .2s ease;
}
.nav .nav-btn:hover { opacity: .55; transform: none; }

/* ===== Subpage styles (merged from page.css) ===== */

/* 下層ページはヒーローが暗いため、ヘッダーを常にライト背景にする */
body:has(.page-hero) .header {
  background: rgba(244,241,234,.25);
  backdrop-filter: blur(10px);
  padding: 14px 32px;
}

/* Subpage shared styles — extends style.css */

/* ----- Page hero ----- */
.page-hero {
  padding: 130px 7vw 90px;
  background: var(--charcoal);
  color: var(--white);
  position: relative;
  overflow: hidden;
  min-height: 35vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* 装飾英字 */
.page-hero::before { display: none; }
.page-hero-deco {
  position: absolute;
  left: 7vw;
  bottom: 52px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .28em;
  color: rgba(255,250,240,.5);
  text-transform: uppercase;
  font-family: "Helvetica Neue", Arial, sans-serif;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity .8s ease .5s;
}
.page-hero-deco::before {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: var(--red);
  flex-shrink: 0;
}
.page-hero.slash-start .page-hero-deco {
  opacity: 1;
}
/* 下部ボーダーライン */
.page-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, var(--red) 0%, transparent 60%);
}
.page-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease .2s, transform .6s cubic-bezier(.22,1,.36,1) .2s;
}
.page-hero.slash-start .page-hero-inner {
  opacity: 1;
  transform: translateY(0);
}
.page-hero .label {
  display: block;
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--red);
  margin-bottom: 20px;
  font-weight: 800;
  text-transform: uppercase;
}
/* 背景の大きな英字（重複表示の元）を削除 */
.page-hero-deco { display: none !important; }
.page-hero-title {
  font-size: clamp(20px, 2.6vw, 46px);
  font-weight: 950;
  letter-spacing: -.065em;
  line-height: 1.02;
  margin: 0;
  color: var(--white);
}
.page-hero-copy {
  font-size: 16px;
  line-height: 2.2;
  color: rgba(255,250,240,.65);
  font-weight: 500;
  margin: 24px 0 0;
  max-width: 560px;
}

/* ----- ページリードセクション ----- */
.page-lead-section {
  background: var(--bg);
  padding: 72px 7vw;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.page-lead-inner {
  max-width: 860px;
  margin: 0 auto;
}
.page-lead-inner::before {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--red);
  margin: 0 auto 40px;
}
.page-lead-text {
  margin: 0;
  font-size: clamp(18px,2vw,24px);
  font-weight: 700;
  line-height: 1.8;
  color: var(--ink);
  letter-spacing: -.03em;
}
/* 連続するリード段落の間に余白を入れて段落を分ける */
.page-lead-text + .page-lead-text { margin-top: 1.5em; }

/* ----- Breadcrumb ----- */
.breadcrumb {
  position: absolute;
  bottom: 24px;
  right: 7vw;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: rgba(255,250,240,.4);
  letter-spacing: .06em;
  margin-bottom: 0;
}
.breadcrumb a { color: rgba(255,250,240,.4); transition: color .2s; }
.breadcrumb a:hover { color: rgba(255,250,240,.8); }
.breadcrumb-sep { opacity: .4; }

/* ----- Content block ----- */
.content-block { padding: 100px 7vw; }
.content-block + .content-block { border-top: 1px solid var(--line); }

/* スライドアップパネル — 前セクションに重なって上から乗ってくる */
.slide-up-prev {
  position: relative;
  z-index: 1;
}
.slide-up-panel {
  position: relative;
  z-index: 2;
  border-radius: 24px 24px 0 0;
  margin-top: -48px;
  border-top: none !important;
  transform: translateY(80px);
  opacity: 0;
  transition: transform 1s cubic-bezier(.22,1,.36,1), opacity .7s ease;
}
.slide-up-panel.in-view {
  transform: translateY(0);
  opacity: 1;
}
.content-block--dark { background: var(--charcoal); color: var(--white); }
.content-block--tinted { background: var(--bg-2); }
.content-block--tinted .problem-card { background: var(--bg); }

/* Green block */
.content-block--green { background: var(--green); color: var(--white); }
.content-block--green .block-heading { color: var(--white); }
.content-block--green .block-body { color: rgba(255,250,240,.72); }
.content-block--green .block-body strong { color: var(--white); }
.content-block--green .outcome-item { border-color: rgba(255,250,240,.28); color: var(--white); }

/* Dark block — value-card overrides */
.content-block--dark .value-card { border-color: rgba(255,250,240,.12); border-top-color: var(--red); }
.content-block--dark .value-card-title { color: var(--white); }
.content-block--dark .value-card-body { color: rgba(255,250,240,.55); }

.block-inner { max-width: 900px; margin: 0 auto; }

.block-label { display: none; }
.content-block--dark .block-label { display: none; }

.block-heading {
  font-size: clamp(30px,3.8vw,58px);
  font-weight: 950;
  letter-spacing: -.055em;
  line-height: 1.5;
  margin: 0 0 36px;
  color: var(--green);
}
.content-block--dark .block-heading { color: var(--white); }

.block-body {
  font-size: 16px;
  line-height: 1.9;
  color: var(--muted);
}
.block-body p { margin: 0 0 20px; }
.block-body p:last-child { margin-bottom: 0; }

/* ----- Problem cards (about) ----- */
.problem-stack { display: flex; flex-direction: column; gap: 10px; margin: 32px 0; }
.problem-card {
  background: var(--bg-2);
  border-left: 4px solid var(--red);
  padding: 18px 28px;
  font-size: 16px;
  line-height: 1.85;
  font-weight: 700;
  color: var(--ink);
}

/* ── Problem Circles */
.problem-circles {
  display: flex;
  gap: 32px;
  margin: 48px 0 40px;
  justify-content: center;
  flex-wrap: wrap;
}
.problem-circle {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 2px solid var(--red);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  position: relative;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.problem-circle.visible {
  opacity: 1;
  transform: scale(1);
}
.problem-circle:nth-child(1) { transition-delay: 0s; }
.problem-circle:nth-child(2) { transition-delay: .18s; }
.problem-circle:nth-child(3) { transition-delay: .36s; }
.pc-num {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--red);
  margin-bottom: 10px;
}
.pc-text {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.75;
  color: var(--ink);
  min-height: 3em;
}
.pc-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--red);
  vertical-align: middle;
  margin-left: 1px;
  animation: pcBlink .7s step-end infinite;
}
@keyframes pcBlink { 50% { opacity: 0; } }
@media (max-width: 640px) {
  .problem-circle { width: 160px; height: 160px; padding: 18px; }
  .pc-text { font-size: 16px; }
}

.reason-note {
  margin: 28px 0 0;
  padding: 28px 32px;
  border: 1px solid var(--line);
  font-size: 16px;
  line-height: 2.1;
  color: var(--muted);
  text-align: center;
}
.reason-note strong {
  display: block;
  font-size: clamp(17px,1.8vw,22px);
  font-weight: 950;
  letter-spacing: -.04em;
  color: var(--green);
  margin-bottom: 8px;
}

/* ----- Structure flow (about) ----- */
/* ── 新フローデザイン（中央・アイコン付き） */
.sf-intro-note { color: rgba(255,250,240,.45); margin-bottom: 48px; text-align: center; }

.sf-flow-new {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin: 0 0 56px;
  width: 100%;
}
.sf-step-c {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  width: 160px;
}
.sf-icon {
  width: 64px; height: 64px;
  color: rgba(255,250,240,.6);
  transition: color .3s;
}
.sf-icon svg { width: 100%; height: 100%; }
.sf-step-circle {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,250,240,.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}
.sf-step-svg {
  width: 36px;
  height: 36px;
  stroke: rgba(255,250,240,.65);
  flex-shrink: 0;
}
.sf-step-label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--white);
}
.sf-step-desc {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,250,240,.75);
  font-weight: 500;
}

/* コネクター — 円の縦中央（circle高さ120px / 2 = 60px）に合わせる */
.sf-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: rgba(255,250,240,.35);
  padding: 0 8px;
  flex-shrink: 0;
  margin-top: 58px;
  align-self: flex-start;
}

/* インテロノート */
.sf-note {
  text-align: center;
  font-size: 16px;
  color: rgba(255,250,240,.4);
  margin: 0 0 48px;
  font-style: italic;
}

/* 強調：大きなタイポグラフィ */
.sf-emphasis-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.sf-em-line {
  font-size: clamp(20px, 2.8vw, 38px);
  font-weight: 800;
  color: rgba(255,250,240,.35);
  line-height: 1.4;
  letter-spacing: -.02em;
  margin: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.sf-em-line.in-view { opacity: 1; transform: translateY(0); }
.sf-em-delay1 { transition-delay: .25s !important; }
.sf-em-delay2 { transition-delay: .5s !important; }
.sf-em-line em {
  font-style: normal;
  color: var(--white);
  font-size: clamp(28px, 4vw, 56px);
}

@media (max-width: 640px) {
  .sf-em-line em {
    font-style: normal;
    color: var(--white);
    font-size: clamp(25px, 4vw, 56px);
  }
  .sf-em-line { margin-bottom: 20px; }
  .sf-em-line:last-child { margin-bottom: 0; }
  .sf-flow-new { flex-direction: column; align-items: center; gap: 24px; }
  /* 矢印: 中央配置・↓向き */
  .sf-connector { transform: rotate(90deg); margin: 0; align-self: center; }
  .sf-step-c { width: 200px; }
}

.structure-flow { display: flex; flex-direction: column; gap: 0; margin: 36px 0; }
.sf-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sf-arrow { font-size: 20px; color: var(--red); flex-shrink: 0; margin-top: 2px; font-weight: 700; }
.sf-text { font-size: 16px; line-height: 1.85; color: rgba(255,250,240,.75); font-weight: 700; }

.structure-verdict {
  margin: 36px 0 0;
  text-align: center;
  font-size: clamp(17px,1.8vw,24px);
  font-weight: 950;
  letter-spacing: -.04em;
  color: var(--white);
  padding: 28px 36px;
  border: 1px solid rgba(255,255,255,.14);
  line-height: 1.8;
}
.structure-verdict em { font-style: normal; color: var(--red); }

/* ----- Outcome circles (about - solution) ----- */
.outcomes { display: flex; justify-content: center; gap: 24px; margin: 40px 0; flex-wrap: wrap; }

/* Solutionセクション 非対称レイアウト */
.solution-layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 48px 60px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 7vw;
}
.solution-text .block-heading { margin-bottom: 28px; }
.solution-text .block-body { color: rgba(255,250,240,.72); }
/* ベン図レイアウト */
.solution-circles {
  position: relative;
  width: 310px;
  height: 295px;
  margin: 0 auto;
  flex-shrink: 0;
}
.solution-circles .outcome-item {
  position: absolute;
  width: 180px !important;
  height: 180px !important;
  border: 1.5px solid rgba(255,250,240,.35);
  background: rgba(255,250,240,.1);
  color: var(--white);
  padding: 14px;
  font-size: 15px !important;
  font-weight: 800;
  text-align: center;
}
/* 正三角形ベン図（中心間130px・オーバーラップ50px） */
.sc-1 { left: 65px;  top: 0;    transform: none; }
.sc-2 { left: 0px;   top: 113px; transform: none; }
.sc-3 { left: 130px; top: 113px; transform: none; }
/* ラベルを各円の外側（上＝上、左下の円＝左、右下の円＝右）へ寄せる */
.solution-circles .sc-1 { justify-content: flex-start; align-items: center; padding-top: 44px; }
.solution-circles .sc-2,
.solution-circles .sc-3 { justify-content: flex-end; align-items: center; padding-bottom: 28px; }

/* 中央バッジ：白丸 + 偏愛リノベーション */
.sc-center {
  position: absolute;
  width: 124px;
  height: 124px;
  top: 165px;
  left: 155px;
  transform: translate(-50%, -50%);
  background: rgba(255,250,240,.96);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--green);
  text-align: center;
  line-height: 1.3;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}
.sc-center__main { font-size: 1.5em; line-height: 1.15; }
.slide-up-panel.in-view .sc-center {
  animation: sc-appear .9s cubic-bezier(.22,1,.36,1) 1s forwards;
}
@keyframes sc-appear {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media(max-width:900px){
  .solution-layout { grid-template-columns: 1fr; gap: 32px; padding: 0; }
}
.outcome-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: clamp(120px,14vw,158px);
  height: clamp(120px,14vw,158px);
  border-radius: 50%;
  border: 1px solid var(--line);
  justify-content: center;
  font-size: clamp(14px,1.4vw,18px);
  font-weight: 950;
  letter-spacing: -.03em;
  color: var(--green);
  transition: border-color .3s;
}
.outcome-item::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: var(--red);
}

/* ----- Mechanism cards (about - system) ----- */
/* ── Mech Success Flow */
.mech-section { position: relative; overflow: hidden; }
.mech-lead { margin-bottom: 48px; }
.confetti-canvas {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 10;
  width: 100%; height: 100%;
}

.mech-flow {
  display: flex; flex-direction: column;
  align-items: center; gap: 0;
  max-width: 560px; margin: 0 auto;
}

/* hidden / visible */
.mf-hidden { opacity: 0; transform: translateY(24px); }
.mf-visible { opacity: 1; transform: translateY(0); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); }

/* STEP 1 */
.mf-step { text-align: center; padding: 20px 0 8px; width: 100%; }
.mf-step-tag {
  display: inline-block; font-size: 16px; font-weight: 700;
  letter-spacing: .06em; color: var(--red);
  margin-bottom: 16px;
}
.mf-step-main {
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.mf-icon { width: 36px; height: 36px; color: var(--green); flex-shrink: 0; }
.mf-step-title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 950; letter-spacing: -.04em;
  color: var(--green);
}
.mf-step-desc {
  font-size: 16px; color: var(--muted);
  line-height: 1.8; margin: 12px 0 0; text-align: center;
}

/* Arrow */
.mf-arrow {
  font-size: 28px; color: rgba(46,37,32,.2);
  line-height: 1; padding: 8px 0;
}

/* Auto block */
.mf-auto-block { width: 100%; padding: 4px 0; }
.mf-auto-label {
  font-size: 16px; font-weight: 700; letter-spacing: .06em;
  color: var(--muted);
  text-align: center; margin-bottom: 20px;
}
.mf-auto-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mf-auto-item {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 24px 16px; border: 1px solid var(--line); border-radius: 2px;
}
.mf-check {
  width: 28px; height: 28px; background: var(--green); color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900; flex-shrink: 0;
}
.mf-auto-item div { display: flex; flex-direction: column; gap: 2px; }
.mf-auto-item strong { font-size: 16px; font-weight: 800; color: var(--ink); }
.mf-auto-item span { font-size: 16px; color: var(--muted); }

/* Goal */
.mf-goal { text-align: center; padding: 16px 0 8px; }
.mf-goal-inner {
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 16px;
}
.mf-goal-text {
  font-size: clamp(32px, 5vw, 60px);
  font-weight: 950; letter-spacing: -.04em;
  background: linear-gradient(90deg, var(--ink) 20%, #C5A059 50%, var(--ink) 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mf-goal.mf-visible .mf-goal-text {
  animation: goal-shine 1.8s ease 0.3s both;
}
@keyframes goal-shine {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}

/* スパークル */
.mf-sparkle {
  position: absolute;
  color: #C5A059;
  opacity: 0;
  pointer-events: none;
}
.mf-sparkle-1 { font-size: 20px; top: -30px; left: 8%; }
.mf-sparkle-2 { font-size: 13px; top: -18px; right: 10%; color: var(--red); }
.mf-sparkle-3 { font-size: 16px; bottom: -26px; left: 15%; }
.mf-sparkle-4 { font-size: 22px; bottom: -20px; right: 8%; }
.mf-sparkle-5 { font-size: 14px; top: 30%; left: -32px; color: var(--red); }
.mf-sparkle-6 { font-size: 18px; top: 20%; right: -30px; }
@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
  50%       { opacity: 1; transform: scale(1)  rotate(25deg); }
}
.mf-goal.mf-visible .mf-sparkle   { animation: sparkle-twinkle 1.4s ease-in-out infinite; }
.mf-goal.mf-visible .mf-sparkle-1 { animation-delay: .4s; }
.mf-goal.mf-visible .mf-sparkle-2 { animation-delay: .7s; }
.mf-goal.mf-visible .mf-sparkle-3 { animation-delay: 1.0s; }
.mf-goal.mf-visible .mf-sparkle-4 { animation-delay: .2s; }
.mf-goal.mf-visible .mf-sparkle-5 { animation-delay: .85s; }
.mf-goal.mf-visible .mf-sparkle-6 { animation-delay: .55s; }

/* 「スタイルを選ぶ」赤アンダーライン */
.mf-step-title {
  position: relative;
  display: inline-block;
}
.mf-step-title::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--red);
}
.mf-step.mf-visible .mf-step-title::after {
  animation: red-underline .7s cubic-bezier(.22,1,.36,1) .5s forwards;
}
@keyframes red-underline {
  to { width: 100%; }
}
.mf-goal-sub { font-size: 16px; color: var(--muted); line-height: 1.9; }

.mech-cards { display: flex; flex-direction: column; gap: 20px; margin: 36px 0; }
.mech-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 0 28px;
  padding: 32px 36px;
  border: 1px solid var(--line);
  align-items: start;
}
.mech-card-num { font-size: 11px; letter-spacing: .18em; color: var(--red); font-weight: 800; padding-top: 5px; }
.mech-card-title {
  font-size: clamp(17px,1.8vw,22px);
  font-weight: 950;
  letter-spacing: -.04em;
  margin: 0 0 12px;
  color: var(--green);
}
.mech-card-body { font-size: 16px; line-height: 2; color: var(--muted); }
.mech-card-body p { margin: 0 0 8px; }
.mech-card-body p:last-child { margin-bottom: 0; }
.mech-card-body ul { list-style: none; padding: 0; margin: 8px 0; }
.mech-card-body ul li { padding-left: 18px; position: relative; margin-bottom: 4px; font-size: 16px; }
.mech-card-body ul li::before { content: "·"; position: absolute; left: 0; color: var(--red); font-weight: 700; font-size: 18px; line-height: 1.3; }

/* ----- Value cards (about) ----- */
.value-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin: 36px 0; }
.value-card {
  padding: 32px 28px;
  border: 1px solid rgba(255,255,255,.1);
  border-top: 3px solid var(--red);
}
/* value-card: 回転しながら時差で登場 */
.value-card.reveal {
  opacity: 0;
  transform: rotate(-6deg) translateY(32px) scale(.96);
  transition: opacity .75s ease, transform .75s cubic-bezier(.22,1,.36,1);
}
.value-card.reveal.in-view {
  opacity: 1;
  transform: rotate(0deg) translateY(0) scale(1);
}
.value-card.reveal-delay-1 { transition-delay: .22s; }
.value-card.reveal-delay-2 { transition-delay: .44s; }
.value-card-title { font-size: 16px; font-weight: 950; letter-spacing: -.03em; margin: 0 0 14px; color: var(--green); white-space: nowrap; }
.value-card-body { font-size: clamp(13px,1.4vw,15px); line-height: 1.9; color: var(--muted); }

/* ----- Flow steps (flow page) ----- */
.page-flow-wrap { padding: 80px 7vw 100px; background: var(--green); }
.page-flow-inner { max-width: 800px; margin: 0 auto; }

.page-flow-intro { text-align: center; margin-bottom: 80px; }
.page-flow-intro .block-heading { color: var(--white); margin-bottom: 20px; }
.page-flow-intro p { font-size: 16px; line-height: 2; color: rgba(255,250,240,.65); max-width: 560px; margin: 0 auto; }

.page-steps { display: flex; flex-direction: column; gap: 0; position: relative; }
.page-steps::before {
  content: "";
  position: absolute;
  left: 32px;
  top: 32px;
  bottom: 80px;
  width: 1px;
  background: rgba(255,255,255,.15);
  z-index: 0;
}

.page-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0 36px;
  padding: 0 0 64px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.page-step:last-child { padding-bottom: 0; }
.page-step.in-view { opacity: 1; transform: translateY(0); }

.page-step-num {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.page-step-num small { font-size: 11px; letter-spacing: .18em; color: var(--red); font-weight: 800; }
.page-step-content { padding-top: 12px; }
.page-step-lead { font-size: 11px; letter-spacing: .14em; color: rgba(255,250,240,.35); font-weight: 700; text-transform: uppercase; margin-bottom: 10px; }
.page-step-title { font-size: clamp(22px,2.6vw,30px); font-weight: 900; letter-spacing: -.02em; color: var(--white); margin: 0 0 12px; line-height: 1.35; }
.page-step-sub { font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: rgba(255,250,240,.75); margin: 0 0 14px; }
.page-step-body { font-size: 16px; font-weight: 400; line-height: 2; color: rgba(255,250,240,.6); }
.page-step-body p { margin: 0 0 8px; }
.page-step-body p:last-child { margin-bottom: 0; }
.page-step-body ul { list-style: none; padding: 0; margin: 10px 0; }
.page-step-body ul li { padding-left: 18px; position: relative; margin-bottom: 6px; }
.page-step-body ul li::before { content: "·"; position: absolute; left: 0; color: var(--red); font-weight: 700; font-size: 18px; line-height: 1.3; }

/* ----- Pricing (price page) ----- */
.price-overview { padding: 72px 7vw 60px; background: var(--bg); text-align: center; }
.price-overview-inner { max-width: 680px; margin: 0 auto; }
.price-overview-lead {
  font-size: clamp(18px,2.2vw,28px);
  font-weight: 950;
  letter-spacing: -.04em;
  line-height: 1.65;
  color: var(--green);
  margin: 0 0 24px;
}
.price-overview-body { font-size: 16px; line-height: 2.2; color: var(--muted); margin: 0; }
/* グリーン背景時のオーバーライド */
[style*="background:var(--green)"] .price-overview-lead { color: var(--white); }
[style*="background:var(--green)"] .price-overview-body { color: rgba(255,250,240,.72); }
[style*="background:var(--green)"] .price-tag { color: var(--white); border-color: rgba(255,250,240,.3); }

.price-tags { display: flex; justify-content: center; gap: 16px; margin-top: 36px; flex-wrap: wrap; }
.price-tag {
  font-size: 16px;
  font-weight: 800;
  color: var(--green);
  letter-spacing: -.01em;
  padding: 10px 24px;
  border: 1px solid var(--line);
}

.price-section { padding: 80px 7vw; border-top: 1px solid var(--line); }
.price-section--tinted { background: var(--bg-2); }
/* なぜこの仕組みなのか — 黒背景テキスト色 */
.price-section--why .block-heading { color: var(--white) !important; }
.price-section--why .block-body,
.price-section--why .block-body p { color: rgba(255,250,240,.78) !important; }
.price-section--why .price-point-list li { color: rgba(255,250,240,.9) !important; border-color: rgba(255,250,240,.18) !important; }
.price-section--why .price-highlight { background: rgba(200,58,42,.85); color: var(--white); }
.price-section-inner { max-width: 840px; margin: 0 auto; text-align: center; }

.price-highlight {
  background: var(--green);
  color: var(--white);
  padding: 20px 32px;
  font-size: clamp(15px,1.6vw,20px);
  font-weight: 900;
  letter-spacing: -.03em;
  margin: 32px 0;
  border-radius: 2px;
}

.price-point-list { list-style: none; padding: 0; margin: 36px auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.price-point-list li {
  display: flex; align-items: center; justify-content: center;
  width: clamp(130px, 15vw, 160px);
  height: clamp(130px, 15vw, 160px);
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--green);
  padding: 16px;
}
.price-point-list li::before { display: none; }

/* 偏愛スタイル利用料のみ 3-2 配置 — 同じ円サイズのまま */
.price-point-list--style { flex-wrap: nowrap; max-width: none; }

.price-formula {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 48px;
  background: var(--green);
  border: none;
  margin: 32px 0;
  text-align: center;
  border-radius: 2px;
}
.price-formula-main { font-size: clamp(22px,2.8vw,36px); font-weight: 950; letter-spacing: -.04em; color: var(--white); }
.price-formula-note { font-size: 16px; color: rgba(255,250,240,.7); margin: 10px 0 0; }

/* ----- Split CTA (3-color design, reuses final-cta backgrounds) ----- */
.page-split-cta {
  position: relative;
  min-height: 72vh;
  overflow: hidden;
}
.page-split-cta.cta-active .cta-bg-red { opacity: 1 !important; }
.page-split-cta .cta-bg-dark {
  opacity: 0;
  transition: opacity .6s ease .4s;
}
.page-split-cta.cta-active .cta-bg-dark { opacity: 1; }

.page-split-text {
  position: absolute;
  left: 8vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  max-width: 42vw;
}
.page-split-copy {
  font-size: clamp(24px,3.6vw,52px);
  font-weight: 950;
  letter-spacing: normal;
  line-height: 1.4;
  color: var(--green);
  margin: 0 0 28px;
  word-break: keep-all;
  overflow-wrap: normal;
}
.page-split-sub {
  font-size: 16px;
  line-height: 2.1;
  color: var(--muted);
  font-weight: 500;
  margin: 0;
}
.page-split-cta-right {
  position: absolute;
  opacity: 1;
  right: 0;
  width: 40%;
  top: 0;
  bottom: 0;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 68px 24px 28px;
}
.page-split-cta-right .cta-main-copy {
  font-size: clamp(14px,1.4vw,20px);
  text-align: center;
}

/* ----- Page closing ----- */
.page-closing { padding: 100px 7vw; background: var(--charcoal); color: var(--white); text-align: center; }
.page-closing-inner { max-width: 760px; margin: 0 auto; }
.page-closing-copy {
  font-size: clamp(20px,2.6vw,36px);
  font-weight: 950;
  letter-spacing: -.055em;
  line-height: 1.8;
  margin: 0 0 24px;
}
.page-closing-sub {
  font-size: clamp(16px,1.4vw,18px);
  color: rgba(255,250,240,.6);
  line-height: 2;
  margin: 0 0 52px;
}
.page-closing-actions { display: flex; justify-content: center; align-items: flex-start; gap: 36px; flex-wrap: wrap; }
.page-closing-action { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.page-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  border: 1px solid rgba(255,250,240,.3);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
  line-height: 1.5;
  transition: background .3s, border-color .3s, transform .3s;
}
.page-cta-btn:hover { background: rgba(200,58,42,.18); border-color: rgba(200,58,42,.55); transform: translateY(-2px); }
.page-cta-btn--primary { width: 168px; height: 168px; font-size: 16px; }
.page-closing-desc { font-size: 16px; color: rgba(255,250,240,.5); line-height: 1.9; text-align: center; }

/* ----- Reveal ----- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .12s; }
.reveal-delay-2 { transition-delay: .24s; }
.reveal-delay-3 { transition-delay: .36s; }

/* ----- Responsive ----- */
@media(max-width:900px){
  /* サブページヘッダー右パディング修正 */
  body:has(.page-hero) .header { padding: 12px 22px; background: rgba(244,241,234,.08) !important; }
  .header.scrolled { background: rgba(255,255,255,.18); }

  /* page-split-cta: ENTRYボタンが左にはみ出す問題を修正 */
  .page-split-cta { min-height: 90svh; }
  .page-split-text { left: 24px; top: 8vh; transform: none; max-width: calc(100% - 48px); }
  .page-split-copy { font-size: clamp(22px,7vw,36px); }
  .page-split-cta-right {
    right: 0; left: 0; top: 40%; bottom: auto;
    width: 100%; transform: none;
    align-items: center; justify-content: center;
  }
  .page-split-cta-right .cta-main-copy { display: none; }


  /* ヒーロー・コンテンツ */
  .page-hero { padding: 60px 22px 20px; min-height: 30svh; }
  .page-hero::before { left: 44vw; }
  /* SP: 装飾テキスト非表示 */
  .page-hero-deco { display: none; }
  /* SP: パンくずをタイトル下に流してかぶりを防ぐ */
  .breadcrumb { position:static; margin-top:10px; justify-content:flex-end; }
  /* SP: page-heroページのハンバーガーを白に（暗い背景で視認できるよう） */
  body:has(.page-hero) .hamburger span { background: var(--ink); }

  /* problem-circles: SP時はリスト表示 */
  .problem-circles { flex-direction: column; gap: 0; align-items: stretch; }
  .problem-circles { gap: 10px; }
  .problem-circle {
    width: 100%; height: auto; border-radius: 2px;
    border: none; border-left: 4px solid var(--red);
    background: var(--white);
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    flex-direction: row; align-items: center; text-align: left;
    padding: 14px 16px; gap: 14px; opacity: 1; transform: none;
    justify-content: flex-start;
  }
  .problem-circle.visible { transform: none; }
  .pc-num { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--red); flex-shrink: 0; min-width: 22px; }
  .pc-text { font-size: 16px; min-height: auto; text-align: left; line-height: 1.6; color: var(--ink); }
  .content-block { padding: 72px 22px; }

  /* ページリード SP */
  .page-lead-section { padding: 44px 22px; }
  .page-lead-inner::before { margin-bottom: 24px; }
  .page-lead-text { font-size: clamp(18px,5vw,24px); line-height: 1.7; }

  /* カードグリッド → 1カラム */
  .value-cards { grid-template-columns: 1fr; }
  .value-card-title { white-space: normal; }
  .mech-card { grid-template-columns: 36px 1fr; gap: 0 18px; padding: 24px 20px; }

  /* fit-infographic → 縦積み */
  .fit-infographic { grid-template-columns: 1fr; gap: 0; max-width: 480px; }
  .fit-divider { flex-direction: row; padding: 24px 0 8px; gap: 12px; }
  .fit-divider-line { display: none; }
  .fit-divider-vs { font-size: 13px; font-weight: 800; color: var(--muted); letter-spacing: .1em; }
  .fit-side { width: 100%; }
  .fit-items { width: 100%; margin: 0; }
  .fit-item { padding-right: 8px; }

  /* mf-auto-items → 1カラム */
  .mf-auto-items { grid-template-columns: 1fr; gap: 12px; }

  /* solution-layout → 縦積み・中央揃え (about) */
  .solution-layout { grid-template-columns: 1fr; gap: 32px; }
  .solution-text { text-align: center; }
  .solution-text .block-heading { text-align: center; }
  .solution-text .block-body { text-align: center; }
  /* ベン図 SP */
  .solution-circles { width: 248px; height: 236px; }
  .solution-circles .sc-1 { width: 140px !important; height: 140px !important; left: 54px;  top: 0px;  transform: none; font-size: 13px !important; }
  .solution-circles .sc-2 { width: 140px !important; height: 140px !important; left: 0px;   top: 94px; transform: none; right: auto; font-size: 13px !important; }
  .solution-circles .sc-3 { width: 140px !important; height: 140px !important; left: 108px; top: 94px; transform: none; right: auto; font-size: 13px !important; }
  .sc-center { font-size: 8.5px; width: 66px; height: 66px; top: 133px; left: 124px; }

  /* フロー */
  .page-flow-wrap { padding: 60px 22px 80px; }
  .page-steps::before { left: 24px; }
  .page-step { grid-template-columns: 48px 1fr; gap: 0 22px; padding-bottom: 48px; }
  .page-step-num { width: 48px; height: 48px; }
  .page-flow-intro { margin-bottom: 56px; }

  /* 価格 */
  .price-overview { padding: 56px 22px 48px; }
  .price-section { padding: 60px 22px; }
  .price-formula { padding: 24px 22px; }
  .price-tags { gap: 8px; }
  .price-tag { padding: 8px 16px; }
  /* SP: whyセクション円 → 横長の長方形(縦並び) */
  .price-section--why .price-point-list { flex-direction: column; align-items: stretch; gap: 12px; }
  .price-section--why .price-point-list li {
    width: 100%;
    height: auto;
    aspect-ratio: unset;
    border-radius: 8px;
    padding: 20px 16px;
    font-size: 15px;
    line-height: 1.6;
  }
  .price-section--why .price-point-list li br { display: none; }
  /* SP: スタイル利用料円 → 2列折り返し・はみ出し解消 */
  .price-point-list--style { flex-wrap: wrap; justify-content: center; gap: 14px; }
  .price-point-list--style li { width: 140px; height: 140px; font-size: 14px; }

  /* クロージング */
  .page-closing { padding: 80px 22px; }
  .page-closing-actions { gap: 24px; }

  /* outcomes サークル */
  .outcomes { gap: 16px; }
  .outcome-item { width: 108px; height: 108px; font-size: 14px; }
}

/* ── 薄い色テキスト → ミディアムウェイト統一 */
.lead,
.style-immersive-lead,
.sd-desc,
.page-hero-copy,
.page-split-sub,
.block-body,
.block-body p,
.mech-card-body,
.mech-card-body p,
.value-card-body,
.page-step-body,
.page-step-sub,
.page-closing-sub,
.page-closing-desc,
.why-fee,
.why-sub,
.price-overview-body,
.price-point-list li,
.price-formula-note,
.mf-step-desc,
.mf-auto-label,
.mf-auto-item span,
.mf-goal-sub,
.sf-step-desc,
.sf-note,
.fit-item-yes span:last-child,
.fit-item-no span:last-child,
.reason-note,
.problem-card,
.collage-desc-foot,
.sp-intro,
.sp-outro {
  font-weight: 400 !important;
}

/* 。が段落ちしない */
.panel-copy,
.title, .block-heading,
.fv-title, .fv-sub,
.page-hero-title, .page-lead-text,
.collage-main,
.cta-headline,
.page-split-copy,
.flow-closing-text,
h1, h2, h3 {
  hanging-punctuation: last allow-end;
  text-wrap: pretty;
}

/* Instagram icon */
.ig-icon { width: 22px; height: 22px; flex-shrink: 0; }

/* STARTボタン ホバー時に波紋を赤く */
.cta-entry-wrap:hover .cta-pulse,
.flow-btn-wrap:hover .cta-pulse {
  border-color: var(--red);
  animation: pulse-ring-red 2.8s ease-out infinite;
}
.cta-entry-wrap:hover .cta-pulse-2,
.flow-btn-wrap:hover .cta-pulse-2 {
  animation-delay: 1.4s;
}
@keyframes pulse-ring-red {
  0%   { transform: scale(1);   opacity: .8; border-color: var(--red); }
  100% { transform: scale(2.2); opacity: 0;  border-color: var(--red); }
}

/* Footer: IG link under logo */
.footer-logo-block { display: flex; flex-direction: column; gap: 24px; }
/* footer-ig-sp: PC・SP両用IGリンク（ロゴ横の footer-ig-link の代わり） */
.footer-ig-sp {
  display: flex;
  align-items: center; gap: 16px;
  color: rgba(255,250,240,.92);
  font-size: 18px; font-weight: 600; letter-spacing: .02em;
  text-decoration: none;
  transition: color .2s;
  margin-bottom: 20px;
  word-break: keep-all;
  overflow-wrap: normal;
}
.footer-ig-sp .ig-icon { width: 22px; height: 22px; flex-shrink: 0; }
.footer-ig-sp .ig-more {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  border: 1.5px solid rgba(255,250,240,.45);
  color: rgba(255,250,240,.85);
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  border-radius: 50%;
}
.footer-ig-link {
  display: none; align-items: center; gap: 16px;
  color: rgba(255,250,240,.92);
  font-size: 18px; font-weight: 600; letter-spacing: .02em;
  text-decoration: none;
  transition: color .2s;
  word-break: keep-all;
  overflow-wrap: normal;
}
.footer-ig-link:hover { color: var(--white); }
.footer-ig-link .ig-icon { width: 22px; height: 22px; flex-shrink: 0; }
.footer-ig-link .ig-more {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  border: 1.5px solid rgba(255,250,240,.45);
  color: rgba(255,250,240,.85);
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  border-radius: 50%;
  flex-shrink: 0;
  transition: border-color .2s, background .2s;
}
.footer-ig-link:hover .ig-more { border-color: rgba(255,250,240,.8); background: rgba(255,250,240,.08); color: var(--white); }
.footer-ig { display: none; }

/* ── サブページ セクションタイトル・本文のみ統一 */
body:has(.page-hero) .block-heading {
  font-size: clamp(26px, 6vw, 40px) !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
}
body:has(.page-hero) .block-body p,
body:has(.page-hero) .page-step-body,
body:has(.page-hero) .price-overview-body,
body:has(.page-hero) .price-point-list li {
  font-size: 16px !important;
  font-weight: 400 !important;
}


/* ── page-split-cta SP 完全固定レイアウト */
@media(max-width:900px){
  .page-split-cta{min-height:100svh!important;position:relative!important}
  /* CSS固定クリップ: 上ベージュ/赤斜線/下ダーク */
  .page-split-cta .cta-bg-cream{clip-path:polygon(0 0,100% 0,100% 12%,0 34%)!important;background:var(--bg)!important}
  .page-split-cta .cta-bg-red{clip-path:polygon(0 34%,100% 12%,100% 20%,0 42%)!important;background:var(--red)!important;opacity:1!important}
  .page-split-cta .cta-bg-dark{clip-path:polygon(0 42%,100% 20%,100% 100%,0 100%)!important;background:var(--charcoal)!important}
  /* テキスト: 上部ベージュ帯 */
  .page-split-text{position:absolute!important;left:24px!important;top:8vh!important;transform:none!important;max-width:calc(100% - 48px)!important}
  .page-split-copy{font-size:clamp(22px,7vw,36px)!important;color:var(--green)!important}
  /* ボタン: 下部ダーク帯 */
  .page-split-cta .cta-left,.page-split-cta .cta-main-copy{display:none!important}
  .page-split-cta-right{position:absolute!important;left:0!important;right:0!important;top:40%!important;bottom:auto!important;transform:none!important;width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important}
  .page-split-cta .cta-entry-wrap{width:200px!important;height:200px!important;min-width:200px!important;max-width:200px!important;min-height:200px!important;max-height:200px!important}
  .page-split-cta .cta-entry-btn{width:200px!important;height:200px!important;min-width:200px!important;max-width:200px!important;min-height:200px!important;max-height:200px!important;font-size:16px!important;background:var(--charcoal)!important}
}

/* SP: フッターをflex化してIGリンクをfooter-bottomの直上に配置 */
@media(max-width:900px){
  .footer { display: flex; flex-direction: column; }
  .footer-top { order: 1; }
  .footer-ig-sp {
    order: 2;
    margin-top: auto;
    margin-bottom: 0;
    padding: 28px 22px;
    font-size: 14px;
    gap: 12px;
    line-height: 1.5;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  .footer-ig-sp .ig-more {
    width: 44px; height: 44px;
    min-width: 44px; min-height: 44px;
    flex-shrink: 0;
    font-size: 10px;
  }
  .footer-bottom { order: 3; }
}

/* SP ナビ: Instagram リンク（運営会社の下） */
.sp-nav-ig {
  padding: 24px 0 8px;
  border-top: 1px solid rgba(15,42,35,.12);
  margin-top: 8px;
}
.sp-nav-ig-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  padding: 14px 20px;
  background: var(--bg-2);
  border-radius: 2px;
  width: 100%;
  box-sizing: border-box;
}
.sp-nav-ig-link:hover { background: var(--line); }
.sp-nav-ig-link svg { flex-shrink: 0; }

/* セクション末尾の注釈 */
.style-section .section-disclaimer,
.collage-section .section-disclaimer{position:absolute;right:18px;bottom:14px;z-index:5;font-size:11px;letter-spacing:.04em;line-height:1.4;font-weight:400;margin:0;pointer-events:none;}
.style-section .section-disclaimer{color:rgba(255,255,255,.7);text-shadow:0 1px 4px rgba(0,0,0,.4);}
.collage-section .section-disclaimer{color:rgba(255,255,255,.7);text-shadow:0 1px 4px rgba(0,0,0,.45);}
@media (max-width:430px){
  .style-section .section-disclaimer,
  .collage-section .section-disclaimer{font-size:10px;right:12px;bottom:10px;}
}

/* 画像注釈: TOP page panels */
.panel > .img-note{position:absolute;right:14px;bottom:14px;z-index:6;font-size:11px;line-height:1.4;color:rgba(255,255,255,.7);letter-spacing:.04em;pointer-events:none;text-shadow:0 1px 4px rgba(0,0,0,.5);font-family:'Noto Sans JP',sans-serif;margin:0;}
.style-bg > .img-note{position:absolute;right:14px;bottom:14px;z-index:5;font-size:11px;color:rgba(255,255,255,.7);text-shadow:0 1px 4px rgba(0,0,0,.5);pointer-events:none;letter-spacing:.04em;font-family:'Noto Sans JP',sans-serif;}
@media (max-width:430px){
  .panel > .img-note,
  .style-bg > .img-note{font-size:10px;right:10px;bottom:10px;}
}

/* ===== why セクション：「言語化しています」を problem 見出しとサイズ・ウェイトを揃える ===== */
/* whyセクション：タイトル（マッチング説明）＋小さめのサブ */
.why-section .why-title{font-size:clamp(22px,3.6vw,38px);font-weight:900;color:var(--ink);line-height:1.6;letter-spacing:-.02em;margin:0 auto 24px;max-width:20em}
.why-section .why-sub{font-size:clamp(15px,2.4vw,20px);color:var(--ink);line-height:1.95;letter-spacing:.01em;margin:0 0 44px}
@media (max-width:768px){
  .why-section .why-title{font-size:23px}
  .why-section .why-sub{font-size:16px}
}

/* ===== サービスの流れ：各ステップのサブタイトルを「サブタイトルらしく」 ===== */
.page-step-sub{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:500;
  color:rgba(255,250,240,.62);
  letter-spacing:.04em;
  margin:0 0 18px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(255,250,240,.16);
}
.page-step-sub::before{
  content:"";
  flex:0 0 auto;
  width:24px;
  height:2px;
  background:var(--red);
}