@charset "UTF-8";
/* pass6 P1-3: URL未受領のLINEボタンは枠を残したまま非表示（display:none だと総高14095/11246とヘッダー配置が崩れるため visibility で隠す） */
.is-pending{visibility:hidden!important;pointer-events:none}
/* pass2 - geometry locked to figma frame-pc-top (1:2) 1440x14095 */
:root{--navy:#031c3b;--ink:#1a1b23;--red:#a53b3b;--redh:#8e3131;--gold:#a57a3b;--gold2:#927142;--brown:#463314;--sky:#e1f3fe;--green:#00bc00;--paleblue:#d9eaf6;--serif:"Shippori Mincho B1",serif;--sans:"Noto Sans JP",sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
img{max-width:100%;height:auto;vertical-align:bottom}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--navy);background:#fff;font-size:16px;line-height:1.45;overflow-x:hidden}
.serif{font-family:var(--serif);font-weight:400}
.btn{display:inline-block;text-align:center}
.btn-red{background:var(--red);color:#fff;font-size:16px;line-height:60px;width:320px;max-width:100%;border-radius:30px;transition:background .2s}
.btn-red:hover{background:var(--redh)}
.btn-row{text-align:center}
.section-title{font-size:40px;line-height:58px;text-align:center}
.section-sub{font-size:20px;line-height:29px;text-align:center}
.section-title-w{font-size:40px;line-height:58px;color:#fff;text-align:center}
.label-en{font-size:18px;line-height:26px;text-align:center;letter-spacing:.24em;color:#fff}
.sec-fuji{display:block;width:78px;height:24px;margin:0 auto}
/* origami caret marks */
.step-num,.area-kanji,.chapter-label,.footer-top{display:block;position:relative;width:154px;margin:0 auto;text-align:center}
.step-num::before,.step-num::after,.area-kanji::before,.area-kanji::after,.chapter-label::before,.chapter-label::after,.footer-top::before,.footer-top::after{content:"";position:absolute;width:107px;height:5px;background:var(--navy);border-radius:2px}
.step-num::before,.area-kanji::before,.chapter-label::before,.footer-top::before{left:-3px;top:29px;transform:rotate(-33deg)}
.step-num::after,.area-kanji::after,.chapter-label::after,.footer-top::after{right:-3px;top:29px;transform:rotate(33deg)}
.chapter-label::before,.chapter-label::after,.footer-top::before,.footer-top::after{background:#fff}
/* header */
.site-header{position:sticky;top:0;z-index:100;height:80px;background:#fff}
.header-inner{max-width:1440px;height:100%;margin:0 auto;padding:0 120px;display:flex;align-items:center;justify-content:space-between}
.header-logo img{width:210px;height:60px}
.header-nav{display:flex;align-items:center;gap:30px;font-size:14px;color:#000}
.header-nav a:hover{opacity:.7}
.header-btn{display:inline-block;background:var(--red);color:#fff;border-radius:4px;width:160px;line-height:39px;font-size:14px;text-align:center;transition:background .2s}
.header-btn:hover{background:var(--redh);opacity:1}
.header-line{display:block;width:54px;height:54px;border-radius:4px}
.header-line img{display:block;width:54px;height:54px}
.header-line:hover{opacity:.85}
/* top light zone */
.top-light{position:relative;background:var(--paleblue);padding-bottom:38px}
.top-bg{position:absolute;left:0;right:0;top:0;height:1025px;overflow:hidden;pointer-events:none}
.top-bg::before{content:"";position:absolute;left:50%;top:-190px;transform:translateX(calc(-50% - 103.5px));width:2291px;height:542px;background:url(../assets/bg-asanoha.png) center/2291px 542px no-repeat}
.top-bg::after{content:"";position:absolute;left:50%;top:352px;transform:translateX(calc(-50% - 174.5px));width:2149px;height:673px;background:url(../assets/bg-wave-pattern.png) center/2149px 673px no-repeat}
/* mv */
.mv{position:relative;z-index:1;padding:0 120px}
/* pass5: 施主最優先指示=KV一枚絵を一切切らない。height:auto(原寸比率1.5)、1440基準の構図を上限に>1440は1200px幅で中央寄せ */
.mv-frame{max-width:1200px;margin:0 auto}
.mv-frame img{display:block;width:100%;height:auto}
/* intro */
.intro{position:relative;z-index:1;padding:75px 0 0;text-align:center}
.intro>*{position:relative}
.intro-sparkle{position:absolute;left:50%;top:195px;transform:translateX(-50%);width:1920px;max-width:none;z-index:0;pointer-events:none}
.intro-cloud-l{position:absolute;left:-99px;top:572px;width:338px;z-index:0}
.intro-cloud-r{position:absolute;left:50%;margin-left:458px;top:302px;width:338px;z-index:0}
.intro-pref{font-size:16px;line-height:19px}
.intro-catch{font-size:40px;line-height:58px;margin-top:33px}
.intro-emblem{height:168px;margin-top:23px;display:flex;justify-content:center}
.intro-emblem img{width:427px;height:auto}
.intro-meta{display:flex;justify-content:center;align-items:flex-start;gap:34px;margin-top:23px;height:44px;position:relative;left:16px;top:5px}
.meta-label{display:inline-block;width:100px;background:var(--navy);color:#fff;font-size:16px;font-weight:500;line-height:40px;border-radius:4px;margin-right:15px;text-align:center;vertical-align:middle}
.meta-fee .meta-label{font-size:15px;margin-right:12px}
.meta-year{font-size:18px;font-weight:500;margin-right:5px;line-height:44px;vertical-align:middle}
.meta-strong{font-size:32px;font-weight:700;line-height:44px;vertical-align:middle}
.meta-fee .meta-strong{font-weight:500}
.meta-note{display:inline-block;font-size:12px;line-height:14px;text-align:left;margin-left:14px;vertical-align:middle;margin-top:8px}
.intro-cols{display:flex;justify-content:center;gap:38px;margin-top:15px;z-index:1}
.intro-col{width:580px;padding:40px 55px 0}
.intro-col h3{font-size:32px;line-height:46px;margin-top:17px}
.intro-cards,.intro-stories{display:flex;gap:10px;justify-content:center}
.intro-cards img{width:129px;height:180px;object-fit:cover}
.intro-stories img{width:240px;height:180px;object-fit:cover}
.intro-col p{font-size:14px;line-height:17px;margin-top:17px}
/* photo strip + dark band */
.photo-strip{position:relative;z-index:1;overflow:hidden;height:180px;margin-top:94px}
.strip-track{display:flex;width:100%;justify-content:center}
.strip-track.is-ready{width:max-content;justify-content:flex-start}
.strip-seq{display:flex;flex:0 0 auto}
.strip-track.is-ready .strip-seq{animation:strip-move var(--strip-dur,48s) linear infinite}
.photo-strip img{width:300px;height:180px;object-fit:cover;border-radius:90px;flex:0 0 auto;margin-right:20px}
@keyframes strip-move{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.strip-track.is-ready .strip-seq{animation:none}}
.intro-dark{position:relative;z-index:2;margin-top:-102px;height:645px;text-align:center}
.intro-dark::before{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:1920px;height:645px;background:url(../assets/fuji-bg-pattern.png) center bottom/1920px 645px no-repeat}
.intro-walk{position:absolute;left:50%;top:17px;transform:translateX(-50%);width:1030px;max-width:none;z-index:1}
.intro-dark-catch{position:absolute;left:0;right:0;top:295px;z-index:3;color:#fff;font-size:40px;line-height:44px;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.intro-moving-cloud{position:absolute;left:50%;bottom:-39px;transform:translateX(-50%);width:1440px;max-width:none;z-index:4}
/* how to join */
.how-to-join{position:relative;background:#fff;text-align:center;overflow:hidden}
.how-deco{position:absolute;pointer-events:none;z-index:0}
.how-deco-01{left:auto;right:-44px;top:16px;width:322px}
.how-deco-02{left:-241px;right:auto;top:40px;width:563px}
.how-inner{position:relative;z-index:1;max-width:1440px;margin:0 auto;padding:4px 40px 60px}
.how-to-join .section-title{margin-top:3px}
.how-to-join .section-sub{margin-top:6px}
.how-steps{display:flex;justify-content:center;margin-top:37px}
.how-steps li{width:300px;padding:0 10px}
.step-num{height:72px;font-size:32px;line-height:46px;padding-top:26px}
.how-steps img{display:block;margin:10px auto 0;height:180px;object-fit:cover}
.how-steps li:nth-child(1) img{width:280px}
.how-steps li:nth-child(2) img{width:240px}
.how-steps li:nth-child(3) img{width:230px}
.how-steps li:nth-child(4) img{width:270px}
.step-title{font-size:20px;line-height:24px;font-weight:700;margin-top:10px}
.how-note{font-size:12px;line-height:14px;color:#000;margin-top:37px}
.how-to-join .btn-row{margin-top:52px}
/* card intro */
.card-intro{position:relative;overflow:hidden;background:#fff;padding:60px 0;text-align:center}
.card-intro::before{content:"";position:absolute;left:50%;top:-63px;transform:translateX(-50%);width:2820px;height:1300px;background:var(--sky);border-radius:50%}
.card-intro-inner{position:relative;z-index:1;max-width:1440px;margin:0 auto;padding:0 40px}
.card-intro .section-title{margin-top:3px}
.card-intro .section-sub{margin-top:5px}
.card-types{display:flex;justify-content:center;gap:10px;margin-top:40px}
.card-type{width:300px;padding:0 20px;flex:0 0 auto}
.card-type-imgs{display:flex;gap:10px;justify-content:center}
.card-type-imgs img{width:124px;height:173px;object-fit:cover}
.card-type-name{font-size:20px;line-height:24px;font-weight:700;margin-top:10px}
.card-type-desc{font-size:14px;line-height:17px;color:#000;margin-top:10px}
.eight-marks{background:#fff;border-radius:16px;margin:56px auto 0;width:1200px;max-width:100%;padding:33px 39px}
.eight-marks-head{display:flex;align-items:baseline;gap:42px;text-align:left;padding-left:20px}
.eight-marks-head h3{font-size:24px;line-height:35px;white-space:nowrap}
.eight-marks-head p{font-size:14px;line-height:17px;color:#000}
.marks-grid{display:flex;justify-content:center;gap:23px;margin-top:17px}
.marks-grid li{width:120px;display:flex;flex-direction:column;align-items:center;padding:0 9px}
.marks-grid img{width:100px;height:100px}
.marks-grid b{font-size:16px;line-height:19px;margin-top:10px}
.marks-grid span{font-size:12px;line-height:19px;margin-top:10px}
.product-info{display:flex;gap:20px;align-items:flex-start;justify-content:space-between;background:#fff;border-radius:16px;margin:40px auto 0;width:1200px;max-width:100%;padding:40px 40px 45px 60px;text-align:left}
.product-text{width:400px;flex:0 0 auto}
.product-sub{font-size:16px;line-height:19px;font-weight:700}
.product-title{font-size:40px;line-height:58px;margin-top:12px}
.product-label{font-size:20px;line-height:29px;font-weight:500;margin-top:20px}
.product-desc{font-size:14px;line-height:17px;color:#000;margin-top:20px;max-width:342px}
.product-imgs{display:flex;gap:20px}
.product-imgs img{width:330px;height:220px;object-fit:cover;border-radius:8px}
.card-intro-heading{font-size:24px;line-height:35px;margin-top:40px}
.card-intro .btn-row{margin-top:40px}
/* area */
.area{position:relative;background:#fff;padding:0 0 120px;text-align:center;overflow:hidden}
.area-wave{position:absolute;left:50%;top:1120px;transform:translateX(-50%);width:1920px;max-width:none;z-index:0}
.area-deco-r{position:absolute;right:-74px;top:84px;width:322px;z-index:0;pointer-events:none}
.area-deco-l{position:absolute;left:-211px;top:108px;width:563px;z-index:0;pointer-events:none}
.area .section-title{position:relative;margin-top:3px}
.area .section-sub{position:relative;margin-top:15px}
.area-groups{position:relative;left:5px;display:flex;justify-content:center;margin-top:30px;z-index:1}
.area-group{width:300px;padding:0 20px;flex:0 0 auto}
.area-kanji{height:72px;font-size:32px;line-height:46px;padding-top:26px}
.area-benefit{font-size:18px;line-height:26px}
.area-img{height:180px;display:flex;align-items:flex-end;justify-content:center;margin-top:10px}
.area-img img{max-height:180px;width:auto;max-width:100%}
.area-desc{font-size:14px;line-height:17px;color:#000;margin-top:10px}
@media (max-width:767px){.area-desc{margin:10px -5px 0}}
.area-map-title{position:relative;font-size:24px;line-height:35px;margin-top:40px;z-index:1}
.area-map{position:relative;left:5px;width:1000px;margin:20px auto 0;z-index:1}
.area-map-img{width:100%}
.map-card,.map-mini{position:absolute}
.map-card{filter:drop-shadow(0 6px 12px rgba(3,28,59,.25))}
.map-sign{position:absolute;width:38px}
.map-sign img{width:38px}
.sign-v{position:absolute;top:17px;left:50%;transform:translateX(-50%);writing-mode:vertical-rl;font-family:var(--serif);font-size:14px;line-height:1.15;color:var(--brown);letter-spacing:.05em;white-space:nowrap}
.sign-v b{display:block;color:var(--gold2);font-weight:400;margin-bottom:4px}
.area-note{position:relative;font-size:12px;line-height:17px;margin-top:13px;z-index:1}
.area .btn-row{position:relative;margin-top:60px;z-index:1}
/* story */
.story{position:relative;background:var(--ink);color:#fff;text-align:center}
.story-bg{position:absolute;left:0;top:0;width:100%;height:1000px;background:url(../assets/bg-story.jpg) center top/cover no-repeat}
.story-bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.4)}
.story-head{position:relative;padding:167px 40px 0;background:none}
.story-text{font-size:20px;line-height:29px;max-width:1200px;margin:60px auto 0}
.story-text .gold{color:#cda662}
.story-body{position:relative;padding:0 40px 130px}
.story-img{display:block;width:720px;height:405px;object-fit:cover;max-width:100%;margin:126px auto 0}
.story-body .story-text{margin-top:60px}
.story-body .story-img:last-child{margin-top:180px}
/* characters */
.characters{position:relative;background:#101317 url(../assets/bg-chara.jpg) center top/cover no-repeat;color:#fff;text-align:center;padding:120px 40px 153px;overflow:hidden}
.chara-band{position:absolute;left:50%;transform:translateX(-50%);width:1920px;max-width:none;pointer-events:none}
.chara-band-1{top:0}
.chara-band-2{top:983px}
.chara-band-3{top:1508px}
.characters>p,.characters>h2,.chara-row{position:relative}
.characters-lead{font-size:20px;line-height:29px;margin-top:28px}
.chara-row{display:flex;justify-content:center;align-items:flex-end;gap:100px;margin-top:54px}
.chara-row+.chara-row{margin-top:56px}
.chara-card{width:300px;flex:0 0 auto;text-align:center}
.chara-img{height:400px;display:flex;align-items:flex-end;justify-content:center}
.chara-img img{max-height:400px;width:auto;max-width:none}
.chara-row-3 .chara-img{height:240px}
.chara-row-3 .chara-img img{max-height:240px}
.chara-img .img-ootengu{width:400px;height:400px;max-width:400px;object-fit:cover;object-position:50% 0}
.chara-name{font-size:24px;line-height:29px;font-weight:700;margin-top:10px}
.chara-role{font-size:18px;line-height:22px;margin-top:10px}
.chara-desc{font-size:14px;line-height:17px;margin-top:10px;text-align:left;min-height:84px}
/* chronicle */
.chronicle{position:relative;background:#0d0d0d url(../assets/bg-chronicle.jpg) center top/cover no-repeat;color:#fff;text-align:center;padding:120px 0 0}
.chron-ornament{position:relative;left:20px;width:466px;margin:23px auto 0}
.chron-ornament img{display:block;width:100%;height:auto}
.chron-title{font-size:24px;line-height:35px;margin-top:22px}
.chron-lead{font-size:16px;line-height:23px;max-width:768px;margin:25px auto 0}
.chron-schedule{font-size:24px;line-height:29px;font-weight:700;color:var(--gold);margin-top:46px}
.chron-note{font-size:12px;line-height:17px;margin-top:11px}
.chapters{display:flex;flex-wrap:wrap;justify-content:center;row-gap:40px;width:1200px;max-width:100%;margin:38px auto 0}
.chapter{width:400px;padding:0 20px;flex:0 0 auto;background:none;border:none}
.chapter-label{height:68px;font-size:20px;line-height:29px;padding-top:39px;color:#fff}
.chapter img{width:360px;height:240px;object-fit:cover;margin-top:10px}
.chapter-title{font-size:24px;line-height:35px;margin-top:10px}
.chapter-desc{font-size:14px;line-height:17px;margin-top:10px;min-height:34px}
.chapter-btn{margin-top:19px}
.chapter .btn-red{width:320px;line-height:60px}
.line-block{padding:86px 0 0}
.line-heading{font-size:24px;line-height:35px}
.line-img{width:400px;max-width:100%;margin:34px auto 0}
.line-img img{display:block;width:100%;height:225px;object-fit:cover;border-radius:8px}
.btn-line{display:inline-flex;align-items:center;background:var(--green);color:#fff;width:300px;height:64px;font-size:18px;font-weight:700;border-radius:8px;margin-top:30px;position:relative;padding-left:85px}
.btn-line .line-glyph{position:absolute;left:16px;top:16px;width:40px;height:38px}
.btn-line::after{content:"";position:absolute;right:20px;top:50%;width:10px;height:10px;margin-top:-5px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg)}
.btn-line:hover{opacity:.85}
.chron-catch{font-size:32px;line-height:46px;margin-top:60px}
.chron-start{width:504px;max-width:100%;margin:30px auto 0}
/* footer */
.site-footer{position:relative;background:#000;color:#fff;text-align:center;overflow:hidden;padding:0}
.footer-band{position:absolute;left:50%;top:0;transform:translateX(calc(-50% - 20px));width:1920px;max-width:none;opacity:.3;pointer-events:none}
.footer-emblem{position:relative;padding-top:120px}
.footer-emblem img{width:300px;height:330px}
.footer-inner{position:relative;padding:0 40px 82px}
.footer-notice-title{font-size:24px;line-height:35px;margin-top:87px}
.footer-notice{font-size:16px;line-height:23px;max-width:905px;margin:26px auto 0}
.footer-notice .u,.footer-contact .u{text-decoration:underline;text-underline-offset:3px}
.footer-contact{font-size:16px;line-height:23px;margin-top:127px}
.footer-top-link{margin-top:137px}
.footer-top{height:65px;font-size:16px;line-height:23px;padding-top:39px;color:#fff;display:inline-block;width:154px}
.footer-top:hover{opacity:.75}
.footer-logo{margin-top:47px}
.footer-logo img{width:403px;height:44px}
.footer-copy{font-size:14px;line-height:20px;margin-top:18px}
/* fix */
.card-intro::before{top:-3px}
/* fine-tune pass */
.eight-marks{padding:33px 39px}

/* ===== SP layer (390px design, frame-sp-top 390x11243) ===== */
.sp-only{display:none}
.sp-menu-btn{display:none}
.scroll-wrap{position:relative}
.scroll-hint{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:6;pointer-events:none;transition:opacity .4s}
.scroll-hint img{width:120px;height:60px;animation:hint-nudge 1.8s ease-in-out infinite}
.scroll-hint.is-hidden{opacity:0}
@keyframes hint-nudge{0%,100%{transform:translateX(0)}30%{transform:translateX(7px)}70%{transform:translateX(-7px)}}
@media (min-width:768px){.scroll-hint{display:none}}
@media (max-width:767px){
.pc-only{display:none!important}
.sp-only{display:block}
span.sp-only,br.sp-only{display:inline}
/* header */
.header-inner{padding:0 15px}
.header-nav{display:none;position:absolute;left:0;right:0;top:80px;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:8px 0 16px;box-shadow:0 10px 18px rgba(3,28,59,.18)}
.site-header.nav-open .header-nav{display:flex}
.header-nav a{padding:12px 24px}
.header-nav .header-btn{width:auto;margin:8px 24px 0;line-height:44px}
.header-nav .header-line{width:auto;height:44px;margin:8px 24px 0}
.sp-menu-btn{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;width:54px;height:54px;border:0;border-radius:4px;background:var(--navy);cursor:pointer;padding:0}
.sp-menu-btn span{display:block;width:30px;height:2px;background:#fff}
/* top bg */
.top-light{padding-bottom:0}
.top-bg{height:855px;background:url(../assets/intro-cloud.svg) no-repeat -105px 12px/300px auto,url(../assets/intro-cloud.svg) no-repeat 103px 666px/372px auto}
.top-bg::before{width:1000px;height:237px;top:0;background-size:1000px 237px;transform:translateX(-50%)}
.top-bg::after{width:1000px;height:313px;top:542px;background-size:1000px 313px;transform:translateX(-50%)}
/* mv */
.mv{padding:0 15px}
.mv-frame img{height:auto}
/* intro */
.intro{padding:29px 0 0}
.intro-sparkle{top:232px;margin-left:166px}
.intro-cloud-l,.intro-cloud-r{display:none}
.intro-catch{font-size:28px;line-height:41px;margin-top:33px;padding:0 15px}
.intro-emblem{height:auto;margin-top:18px}
.intro-emblem img{width:300px}
.intro-meta{flex-direction:column;align-items:center;gap:0;height:auto;margin-top:21px;left:7px;top:3px}
.meta-period{height:48px}
.meta-fee{height:46px}
.intro-cols{display:block;margin-top:0}
.intro-col{width:100%;padding:0 14px;display:flex;flex-direction:column;margin-top:28px}
.intro-col h3{order:-1;font-size:32px;margin:0 0 17px}
.intro-col+.intro-col{margin-top:45px}
.intro-cards{gap:8px}
.intro-cards img{width:calc(25% - 6px);height:119px}
.intro-stories{gap:0}
.intro-stories img{width:50%;height:150px}
.intro-col p{margin-top:17px}
/* photo strip + dark band */
.photo-strip{margin-top:64px}
.intro-dark{margin-top:-57px;height:286px}
.intro-dark::before{width:768px;height:265px;top:0;bottom:auto;background-size:768px 265px;background-position:center top}
.intro-walk{top:auto;bottom:0;width:100%}
.intro-dark-catch{top:145px;font-size:24px;line-height:35px}
.intro-moving-cloud{width:720px;bottom:0;left:calc(50% + 5px)}
/* how to join */
.how-deco-01{right:-47px;top:22px;width:172px}
.how-deco-02{left:-120px;top:71px;width:282px}
.how-inner{padding:0 0 60px}
.how-steps{margin-top:28px;padding:0 10px;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch}
.how-steps li{flex:0 0 auto}
.how-note{margin-top:19px;padding:0 43px} /* pass6 P2-5: spec x43 w304 */
.how-to-join .btn-row{margin-top:36px}
/* card intro */
.card-intro::before{width:844px;height:1449px;border-radius:422px/274px;top:0}
.card-intro-inner{padding:0}
.card-types{margin-top:30px;padding:0 11px;gap:30px;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch}
.card-type{width:258px;padding:0}
.card-type-desc{margin:10px -1px 0}
.eight-marks{width:auto;margin:46px 1px 0 15px;padding:30px 0 33px;text-align:left;border-radius:16px 0 0 16px}
.eight-marks-head{display:block;padding-left:20px}
.eight-marks-head h3{white-space:normal}
.eight-marks-head p{margin-top:14px}
.marks-grid{margin-top:25px;padding:0 16px;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch}
.marks-grid li{flex:0 0 auto}
.product-info{flex-direction:column-reverse;width:auto;margin:20px 15px 0;padding:20px 20px 45px;gap:20px}
.product-text{width:auto}
.product-desc{max-width:none}
.product-imgs{gap:10px;margin:0 -10px}
.product-imgs img:first-child{width:210px;height:144px}
.product-imgs img:last-child{width:110px;height:144px}
.card-intro-heading{margin-top:20px;padding:0 27px}
.card-intro .btn-row{margin-top:24px}
/* area */
.area{padding-bottom:60px}
.area-wave{width:1000px;top:1014px}
.area-deco-r{right:-94px;top:111px;width:322px}
.area-deco-l{left:-126px;top:121px;width:282px}
.area .section-title{font-size:28px;line-height:1.447}
.area .section-sub{font-size:16px;line-height:1.45;margin-top:12px}
.area-groups{left:0;margin-top:20px;padding:0 20px;gap:24px;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch}
.area-group{width:165px;padding:0}
.area-kanji{font-size:28px;height:67px;padding-top:26px}
.area-benefit{font-size:16px;line-height:23px;margin-top:5px}
.area-img{height:140px;align-items:flex-end;margin-top:10px}
.area-img img{max-height:140px}
.area-group:first-child .area-img img{max-height:180px;margin-bottom:-20px}
.area-tag{font-size:16px;line-height:19px;font-weight:700;margin-top:10px;text-align:center}
.area-map-title{display:none}
.area-map{left:0;width:auto;margin:40px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.area-map-img{width:841px;max-width:none;margin-left:119px}
.area-map>img:nth-of-type(2){left:50px!important;top:74px!important;width:172px!important}
.area-map>img:nth-of-type(3){left:0!important;top:284px!important;width:223px!important}
.area-map>img:nth-of-type(4){left:861px!important;top:308px!important;width:139px!important}
.area-map>img:nth-of-type(5){left:866px!important;top:92px!important;width:134px!important}
.area-map>img:nth-of-type(6){left:245px!important;top:51px!important;width:32px!important}
.area-map>img:nth-of-type(7){left:422px!important;top:56px!important;width:34px!important}
.area-map>img:nth-of-type(8){left:555px!important;top:127px!important;width:43px!important}
.area-map>img:nth-of-type(9){left:671px!important;top:105px!important;width:33px!important}
.area-map>img:nth-of-type(10){left:704px!important;top:101px!important;width:23px!important}
.area-map>img:nth-of-type(11){left:726px!important;top:83px!important;width:34px!important}
.area-map>img:nth-of-type(12){left:330px!important;top:348px!important;width:20px!important}
.area-map>img:nth-of-type(13){left:720px!important;top:409px!important;width:21px!important}
.area-map>img:nth-of-type(14){left:807px!important;top:423px!important;width:84px!important}
.area-map>img:nth-of-type(15){left:803px!important;top:262px!important;width:48px!important}
.map-sign{width:36px}
.map-sign img{width:36px}
.area-map .map-sign:nth-of-type(1){left:817px!important;top:59px!important}
.area-map .map-sign:nth-of-type(2){left:280px!important;top:269px!important}
.area-map .map-sign:nth-of-type(3){left:319px!important;top:45px!important}
.area-map .map-sign:nth-of-type(4){left:670px!important;top:212px!important}
.area-note{margin-top:18px;padding:0 15px} /* pass6 P2-5: spec x15 w360 */
.area .btn-row{margin-top:30px}
/* story */
.story-bg{height:880px}
.story-head{padding:60px 15px 0}
.story-text{font-size:16px;line-height:1.45;margin-top:23px}
.story-body{padding:0 15px 330px}
.story-img{width:100%;height:203px;margin:27.8px auto 0}
.story-body .story-text{margin-top:30px}
.story-body .story-img:last-child{margin-top:26.6px;height:202px}
/* characters */
.characters{padding:60px 0}
.chara-band-2{top:363px}
.chara-band-3{display:none}
.characters-lead{font-size:16px;line-height:1.45;margin-top:8px;padding:0 15px}
.chara-scroll{display:flex;gap:94px;padding:0 47px;margin-top:13px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.chara-row{display:contents}
.chara-row-3 .chara-img{height:400px}
.chara-row-3 .chara-img img{max-height:400px}
.chara-row-3 .chara-card:last-child .chara-img img{width:300px;height:auto;max-height:none}
.chara-desc{min-height:100px}
/* chronicle */
.chronicle{padding:60px 0 0}
.chron-ornament{left:0;width:360px;margin:20px auto 0}
.chron-title{margin-top:20px}
.chron-lead{font-size:14px;line-height:1.45;margin-top:25px;padding:0 15px}
.chron-schedule{margin-top:30px}
.chapters{width:auto;margin:35px 0 0;flex-wrap:nowrap;row-gap:0;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch}
.chapter{width:390px;padding:0 15px;flex:0 0 auto}
.chapter img{width:100%}
.line-block{padding:62px 0 0}
.line-heading{font-size:20px;line-height:29px;padding:0 15px}
.line-img{width:auto;margin:32px 15px 0}
.line-img img{height:auto}
.chron-catch{font-size:28px;line-height:1.372;margin-top:30px}
.chron-start{width:auto;margin:36px 15px 0}
/* footer */
.footer-band{width:1200px;transform:translateX(-50%)}
.footer-emblem{padding-top:60px}
.footer-notice-title{margin-top:43px}
.footer-notice{font-size:14px;line-height:1.45;text-align:left;margin-top:24px;padding:0 15px;max-width:none}
.footer-contact{margin-top:52px;padding:0 15px} /* pass6 P2-5: spec x15 w360 */
.footer-top-link{margin-top:168px}
.footer-logo{margin:35px 15px 0}
.footer-logo img{width:100%;height:auto}
.footer-copy{margin-top:23px}
.footer-inner{padding:0 0 108px}
/* scroll areas: hide scrollbars */
.how-steps,.card-types,.marks-grid,.area-groups,.area-map,.chara-scroll,.chapters{scrollbar-width:none}
.how-steps::-webkit-scrollbar,.card-types::-webkit-scrollbar,.marks-grid::-webkit-scrollbar,.area-groups::-webkit-scrollbar,.area-map::-webkit-scrollbar,.chara-scroll::-webkit-scrollbar,.chapters::-webkit-scrollbar{display:none}
}
/* characters wave-line overlays: spec opacity .3 (also satisfies client tone-down request) */
.chara-band{opacity:.3}
/* map kanban sign readability (client request; was color #463314/#927142, fw400, ls .05em) */
.sign-v{color:#3a2408;font-weight:700;letter-spacing:.08em;text-shadow:0 0 3px rgba(246,235,214,.95),0 0 6px rgba(246,235,214,.75),0 0 10px rgba(246,235,214,.55)}
.sign-v b{color:#6e4a14;font-weight:700}
@media (max-width:767px){.story-body{padding-bottom:330px}}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ===== pass4 fixes ===== */
/* P3-14: html{overflow-x:hidden} was tried and REVERTED - it breaks position:sticky header in Chrome. body overflow-x:hidden (audit-verified) is sufficient. */
/* P3-11 reduced motion */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scroll-hint img{animation:none}}
/* P3-1 card-types row: spec row is off-center (L120/R90) */
@media (min-width:768px){.card-types{position:relative;left:15px}}
/* P1-2 header nav: single line at 768-1439px (1440+ stays pixel-true) */
@media (min-width:768px) and (max-width:1439px){
.header-nav a{white-space:nowrap}
.header-inner{padding:0 clamp(12px,25vw - 240px,120px)}
.header-nav{gap:clamp(8px,4.6vw - 36px,30px)}
}
@media (min-width:768px) and (max-width:959px){
.header-inner{padding:0 12px}
.header-logo img{width:170px;height:49px}
.header-nav{font-size:12px;gap:7px}
.header-btn{width:auto;padding:0 12px;font-size:12px}
.header-line,.header-line img{width:44px;height:44px}
}
@media (min-width:768px) and (max-width:849px){
.header-inner{padding:0 10px}
.header-logo img{width:150px;height:43px}
.header-nav{font-size:11px;gap:6px}
.header-btn{padding:0 10px;font-size:11px}
.header-line,.header-line img{width:40px;height:40px}
}
/* P1-1 intro meta lockup <=380px (390 stays pixel-true) */
@media (max-width:380px){
.meta-period,.meta-fee{height:auto}
.meta-label{width:88px;margin-right:10px;font-size:14px}
.meta-fee .meta-label{font-size:13px;margin-right:8px}
.meta-year{font-size:16px}
.meta-strong{font-size:26px}
.meta-note{margin-left:8px}
}

/* ===== pass5 fixes (2026-08-24) SP実機の横パン939px対策 ===== */
/* 原因: .intro-sparkle(1920px)/.intro-moving-cloud(720px)/.intro-dark::before(768px)がクリップ無しで文書幅を拡大。crop.html(iframe)経由の検証がこれを隠蔽していた */
/* overflow-x:clip はスクロールコンテナを作らずstickyを壊さない(hiddenはP3-14で破壊実測)。旧ブラウザはbody行のoverflow-x:hiddenへフォールバック */
html{overflow-x:clip}
body{overflow-x:clip}
.top-light,.intro,.intro-dark{overflow-x:clip}

/* ===== pass6 fixes (2026-09-09) audit-2026-09-09 対応 ===== */
/* pass6 D-1: フッター帯は大元 Figma どおり上下反転（模様が上・逆さ富士が下） */
.footer-band{transform:translateX(calc(-50% - 20px)) scaleY(-1)}
@media (max-width:767px){.footer-band{transform:translateX(-50%) scaleY(-1)}}
/* pass6 D-4: Figma で step01 は反転指定（rotation 180°）。鬼が左・河童が右 */
.how-steps li:nth-child(1) img{transform:scaleX(-1)}
/* pass6 D-5: Figma rotation 180°（地図の小さなお地蔵さん = .area-map 直下の img 12番目） */
.area-map>img:nth-of-type(12){transform:scaleX(-1)}
/* pass6 P3-5: 配信予定ボタン(span.btn-red ×6)は hover 反応させない */
span.btn-red{pointer-events:none}
/* pass6 P1-2: 768-1239px はPC固定幅の行を折り返す（iPad 縦/横）。1440以上・767以下には影響しない */
@media (min-width:768px) and (max-width:1239px){
  .intro-meta{left:0;gap:24px} /* 768px で参加費の注記が右へ12pxはみ出すため */
  .intro-cols{flex-wrap:wrap}
  .intro-walk{width:100%;top:auto;bottom:0} /* 1030px固定だと両端のキャラが切れる。SPと同じく幅100%・下揃え */
  .how-steps,.card-types,.area-groups{flex-wrap:wrap;row-gap:40px;max-width:660px;margin-left:auto;margin-right:auto}
  .card-types{left:0}
  /* キャラ: 3体×3ブロックのままだと 2+1 に折れるので、SPと同じく .chara-row を display:contents にして 2列×5行に */
  .chara-scroll{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:40px 60px;max-width:760px;margin:54px auto 0;position:relative}
  .chara-row{display:contents}
  .marks-grid{flex-wrap:wrap;row-gap:24px;max-width:600px;margin-left:auto;margin-right:auto}
  .product-info{flex-wrap:wrap}
  .product-imgs{flex-wrap:wrap} /* 800/834 で 330×2+20=680px が白枠内幅を超えるため */
  .chapter{width:min(400px,50%);padding:0 12px} /* 768〜799px でも章カードを2列に保つ（画像360pxは無加工） */
  /* 地図: SPと同じ横スクロール。左にはみ出すカード2枚(left:-81/-141px)がクリップされないよう 141px の左余白を確保（配置関係は不変） */
  .area-map{width:min(1141px,calc(100% - 40px));overflow-x:auto;-webkit-overflow-scrolling:touch}
  .area-map-img{width:1000px;max-width:none;margin-left:141px}
  .area-map>.map-card,.area-map>.map-mini,.area-map>.map-sign{margin-left:141px}
}
/* pass8 (2026-09-10) 施主指示: 序章の背景は固定でコンテンツだけがスクロール。iOS Safari は background-attachment:fixed が効かないため position:fixed の層を clip-path で節内に切り抜く方式 */
.story{clip-path:inset(0);margin-top:120px}
.story-bg{position:fixed;top:0;right:0;bottom:0;left:0;width:auto;height:auto;background:url(../assets/bg-story.jpg) center center/cover no-repeat;z-index:0}
@media (max-width:767px){.story{margin-top:60px}.story-bg{background-position:58% 50%}}
/* ===== pass9 (2026-09-12) KV 登場演出＋桜の花びら（一枚絵のまま。着地後の座標は spec と同一。マウス追従は施主意向で撤去） ===== */
.mv-frame{position:relative}
.js .mv-frame{opacity:0} /* JS が画像読込後に .mv-in を付けて浮き上がる。JS無効時は通常表示 */
.js .mv-frame.mv-in{animation:mv-rise 1.4s cubic-bezier(.16,.84,.3,1) both}
@keyframes mv-rise{0%{opacity:0;transform:translate3d(0,44px,0) scale(1.045)}100%{opacity:1;transform:translate3d(0,0,0) scale(1)}}
.mv-petals{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.mv-petals i{position:absolute;top:-8%;left:0;display:block;width:13px;height:10px;border-radius:100% 0 100% 0;background:radial-gradient(circle at 35% 35%,#fff6f9 0,#ffd7e4 45%,#f4a6c3 100%);box-shadow:0 1px 2px rgba(150,60,90,.18);opacity:0;will-change:transform,top;animation:petal-fall var(--fall,12s) linear var(--d1,0s) infinite,petal-sway var(--sway,4s) ease-in-out var(--d2,0s) infinite}
@keyframes petal-fall{0%{top:-8%;opacity:0}6%{opacity:.95}85%{opacity:.85}100%{top:106%;opacity:0}}
@keyframes petal-sway{0%{transform:translateX(0) rotate(0deg)}25%{transform:translateX(22px) rotate(75deg)}50%{transform:translateX(-12px) rotate(150deg)}75%{transform:translateX(18px) rotate(235deg)}100%{transform:translateX(0) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.js .mv-frame{opacity:1;animation:none!important}.mv-petals{display:none}}
/* pass9b: 案B「雫→波紋→ピントが合う」（WebGL。非対応時は案Aの浮き上がりにフォールバック） */
.js .mv-frame.mv-ripple{animation:mv-fade .5s ease-out both}
@keyframes mv-fade{0%{opacity:0}100%{opacity:1}}
.mv-fx-canvas{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none;animation:mv-focus 1.2s cubic-bezier(.25,.6,.2,1) .55s both}
@keyframes mv-focus{0%{filter:blur(9px) saturate(.88) brightness(1.05)}100%{filter:blur(0) saturate(1) brightness(1)}}
.mv-drop{position:absolute;left:50%;top:-4%;width:10px;height:14px;margin-left:-5px;border-radius:50% 50% 50% 50%/40% 40% 60% 60%;background:radial-gradient(circle at 40% 35%,#fff 0,#dff3ff 40%,#8fc7ea 100%);box-shadow:0 0 6px rgba(255,255,255,.9);z-index:3;pointer-events:none;animation:mv-drop-fall .55s cubic-bezier(.5,0,.9,.4) both}
@keyframes mv-drop-fall{0%{transform:translateY(0) scaleY(1);opacity:0}15%{opacity:1}100%{transform:translateY(var(--dropY,400px)) scaleY(1.25);opacity:1}}
.mv-splash{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);z-index:3;pointer-events:none;animation:mv-splash .9s cubic-bezier(.1,.6,.3,1) .55s both}
@keyframes mv-splash{0%{transform:scale(1);opacity:.7}100%{transform:scale(30);opacity:0}}
@media (prefers-reduced-motion:reduce){.mv-fx-canvas,.mv-drop,.mv-splash{display:none}}
/* ===== pass10 (2026-09-12) LINE 友だち追加のフローティングCTA（施主要望・案1）。KVを過ぎたら表示、年代記のLINEブロックが見えている間は非表示。URL未受領（.header-line.is-pending）の間は JS が生成しない ===== */
.line-cta{position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;padding:8px 12px calc(10px + env(safe-area-inset-bottom,0px));background:none;pointer-events:none} /* 白帯は施主意向で透過。ボタンだけ浮かせる */
.line-cta.is-on{display:block;animation:line-cta-in .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes line-cta-in{0%{transform:translateY(110%)}100%{transform:none}}
.line-cta-btn{display:flex;align-items:center;justify-content:center;gap:12px;height:56px;border-radius:8px;background:var(--green);color:#fff;transition:background .2s;pointer-events:auto;box-shadow:0 6px 18px rgba(3,28,59,.28)}
.line-cta-btn:hover{background:#00a800}
.line-cta-btn img{width:34px;height:32px;flex:0 0 auto}
.line-cta-text{display:flex;flex-direction:column;line-height:1.25;text-align:left}
.line-cta-text b{font-size:17px;font-weight:700;letter-spacing:.03em}
body.has-line-cta{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
@media (min-width:768px){
.line-cta{left:auto;right:24px;bottom:24px;width:320px;padding:0}
.line-cta.is-on{animation-name:line-cta-in-pc}
@keyframes line-cta-in-pc{0%{transform:translateY(24px);opacity:0}100%{transform:none;opacity:1}}
.line-cta-btn{height:64px;padding:0 18px;box-shadow:0 8px 24px rgba(3,28,59,.28)}
.line-cta-text b{font-size:18px}
body.has-line-cta{padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){.line-cta.is-on{animation:none}}
/* ===== pass10-2 (2026-09-12) SP用CSSが 391〜767px の device-width 分岐（PCの狭い窓・iPad分割・プレビュー枠）で当たったとき、固定高さの画像が上下に切れる／商品欄が左に寄る問題。390以下（実機は常に390固定）は従来値のまま ===== */
@media (min-width:401px) and (max-width:767px){
.intro-cards img{height:auto;aspect-ratio:258/360}
.intro-stories img{height:auto;aspect-ratio:6/5}
.story-img,.story-body .story-img:last-child{height:auto;aspect-ratio:16/9}
.product-info{padding:28px 24px 36px} /* 原本どおり左揃えのまま。画像だけ枠幅に応じて拡大 */
.product-imgs{margin:0;width:100%;max-width:680px;gap:16px}
.product-imgs img:first-child,.product-imgs img:last-child{flex:1 1 0;min-width:0;width:auto;max-width:330px;height:auto;aspect-ratio:3/2}
.product-desc{max-width:560px}
}
/* pass11-2 (2026-09-12) SPのハンバーガーメニュー内のLINEアイコンは見栄えが悪く、SPは下固定CTAがあるため非表示（DOMには残し、CTAの href の参照元として使う）。PCヘッダーの LINE アイコンは spec どおり表示 */
@media (max-width:767px){.header-nav .header-line{display:none}}
/* pass11-3 (2026-09-12) SPの序章セクション末尾：spec由来の下余白330px（元は背景画の見せ場だった部分）が、背景固定化後は無地の空きに見えるため、上下のリズムに合わせて60pxに詰める（施主指示）。PC(130px)は変更なし */
@media (max-width:767px){.story-body{padding-bottom:60px}}
/* pass12 (2026-09-12) アンカー着地の補正。固定ヘッダー(80px)が節の先頭（見出し・富士アイコン・STORY 等のラベル）に被って隠れるため、id 付き section すべてで着地位置をヘッダー分下げる（PC: 参加方法・配布エリアの見出しが隠れていた / SP: 全節）。/#chronicle 直リンクも同じ挙動 */
section[id]{scroll-margin-top:80px}
/* pass13 (2026-09-12) PC 用 QR カード（フローティングCTAの上）。PC のブラウザからは LINE の友だち追加ができないため、スマホで読み取る QR を添える。SP は非表示 */
.line-cta-qr{display:none}
@media (min-width:768px){
.line-cta-qr{display:flex;align-items:center;gap:12px;margin:0 0 10px;padding:10px 12px;background:#fff;border-radius:8px;box-shadow:0 8px 24px rgba(3,28,59,.18);pointer-events:auto}
.line-cta-qr img{width:84px;height:84px;flex:0 0 auto;display:block}
.line-cta-qr-text{margin:0;font-size:12px;line-height:1.5;color:var(--navy);letter-spacing:.02em}
.line-cta-qr-text b{display:block;font-size:13px;font-weight:700;margin-bottom:3px}
}
/* pass14 (2026-09-12) 施主指示: PC は QR カードだけにする（緑ボタンは PC で非表示、カード下の余白 0）。文言は「LINEの友だち追加で冒険を始める」（JS 側）。SP の下固定ボタンは変更なし */
@media (min-width:768px){
.line-cta{width:344px} /* 見出し1行分（16字）が収まる幅。320 では「る」だけ折り返した */
.line-cta-btn{display:none}
.line-cta-qr{margin:0}
}
/* pass14-3 (2026-09-12) PC QR カードの再デザイン（施主指示: 見出しを2行に分け「冒険を始める」を大きく）。LP の世界観に合わせた紺×金。SP は従来どおり非表示 */
@media (min-width:768px){
.line-cta{width:320px}
.line-cta-qr{gap:14px;padding:12px 14px;background:var(--navy);border-radius:10px;box-shadow:0 8px 24px rgba(3,28,59,.28)}
.line-cta-qr-tile{display:block;flex:0 0 auto;padding:5px;background:#fff;border-radius:6px}
.line-cta-qr-tile img{width:84px;height:84px;display:block}
.line-cta-qr-text{display:flex;flex-direction:column;line-height:1.2;color:#fff;letter-spacing:.04em}
.line-cta-qr-s{font-size:12px;font-weight:500}
.line-cta-qr-text b{display:block;margin:2px 0 6px;font-family:var(--serif);font-size:22px;font-weight:500;color:#e2c48a}
.line-cta-qr-c{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;opacity:.92}
.line-cta-qr-c img{width:14px;height:13px;display:block}
}
/* pass14-4 (2026-09-12) 施主「主張が強い。QR を今の80%、カード右側の余白を半分に」→ QR 84→67px、カード幅を内容に合わせて縮小（右余白 60→30 相当） */
@media (min-width:768px){
.line-cta{width:auto}
.line-cta-qr{padding:10px 26px 10px 12px;gap:12px}
.line-cta-qr-tile{padding:4px}
.line-cta-qr-tile img{width:67px;height:67px}
}
/* pass14-5 (2026-09-12) 施主「右上の LINE マークはいらない」→ ヘッダー右端の LINE アイコンを全幅で非表示（SP は pass11-2 で既に非表示）。DOM には残す（フローティングCTA の href 参照元、URL 差し替えは引き続きここ1ヶ所） */
.header-nav .header-line{display:none}