/*
 * トップページ「結屋について」「結屋で過ごす時間」専用スタイル。
 * concept-preview（確認用ページ）で作り込んだものを本番用に切り出した。
 * トップページでのみ読み込む（functions.php の enqueue 参照）。
 */

/* テーマ全体の overflow-x:hidden が「画面固定（sticky）」を無効にしてしまうため、
   同じ効果で副作用のない clip に置き換える（このページ内のみ） */
html,body{overflow-x:clip;}

/* ふわっと現れる（本番のスクロールアニメと同じ速度・カーブ） */
.cp-a{opacity:0;transform:translate3d(0,26px,0);transition:opacity 1.8s cubic-bezier(.16,.7,.2,1),transform 1.8s cubic-bezier(.16,.7,.2,1);}
.cp-a.on{opacity:1;transform:none;}
.cp-d1{transition-delay:.22s}.cp-d2{transition-delay:.44s}.cp-d3{transition-delay:.66s}


/* ============ 案5：固定スクロール（画面が止まって時間だけ進む） ============ */
.v5{background:#FFFBF2;padding-bottom:clamp(70px,10vh,120px);padding-bottom:clamp(70px,10svh,120px);}
/* 見出しまわりは本番と同じ（section: py-24 md:py-32／見出し: mb-16 md:mb-20／
   ラベル: .section-label mb-6／見出し: .section-title／リード: mt-6 …） */
.v5-head{padding-top:6rem;}
@media(min-width:768px){ .v5-head{padding-top:8rem;} }
/* 写真6枚を切り替える区間。固定される100vhを除いた分（＝この値-100vh）を6等分するので、
   写真1枚あたりのスクロール量は (267-100)vh ÷ 6 ＝ 約0.28画面（高さ900pxの画面で約250px）。 */
.v5-stage{height:267vh;height:267svh;position:relative;}
.v5-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#1E3A5F;display:flex;flex-direction:column;justify-content:flex-end;}
/* 6枚を重ねて切り替えるため、描画をこの箱の中に閉じ込めて負荷を下げる */
.v5-layer{position:absolute;inset:0;opacity:0;will-change:opacity,transform;backface-visibility:hidden;contain:paint;}
.v5-layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.v5-tint{position:absolute;inset:0;}
/* 写真の下側に暗さを足して、文字を必ず読めるようにする */
.v5-shade{position:absolute;left:0;right:0;bottom:0;height:58%;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.42));pointer-events:none;z-index:1;}
/* 昼・夜・朝いずれも写真そのままの色で見せる（色の膜をかけない） */
.v5-layer .v5-tint{background:none;}

/* 文字と目盛りは下に固定の置き場所をつくる（重なったり見切れたりしないように） */
.v5-foot{position:relative;z-index:2;padding:0 clamp(24px,7vw,90px) clamp(38px,6vh,70px);padding:0 clamp(24px,7vw,90px) clamp(38px,6svh,70px);max-width:80rem;margin:0 auto;width:100%;box-sizing:border-box;}
.v5-capwrap{position:relative;height:clamp(140px,20vh,210px);height:clamp(140px,20svh,210px);}
.v5-cap{position:absolute;left:0;right:0;bottom:0;opacity:0;transform:translate3d(0,20px,0);color:#fff;will-change:opacity,transform;backface-visibility:hidden;}
.v5-en{font-family:'EB Garamond',serif;letter-spacing:.4em;font-size:14px;margin-bottom:14px;opacity:.9;}
.v5-copy{font-family:'Shippori Mincho','Noto Serif JP',serif;font-size:clamp(21px,3.2vw,38px);line-height:1.8;text-shadow:0 2px 24px rgba(0,0,0,.3);}

.v5-meter{margin-top:clamp(22px,3vh,34px);margin-top:clamp(22px,3svh,34px);}
.v5-times{display:flex;justify-content:space-between;margin-bottom:22px;}
.v5-times span{font-family:'Shippori Mincho','Noto Serif JP',serif;letter-spacing:.3em;font-size:17px;color:rgba(255,255,255,.42);transition:color .8s ease,opacity .8s ease;}
.v5-times span.on{color:#fff;}
.v5-bar{height:1px;background:rgba(255,255,255,.26);position:relative;}
.v5-barfill{position:absolute;left:0;top:0;height:1px;width:0;background:rgba(255,255,255,.85);}
/* 時間帯の区切り（1/3・2/3の位置） */
.v5-tick{position:absolute;top:-3px;width:1px;height:7px;background:rgba(255,255,255,.3);}
/* 空を渡っていく太陽と月 */
.v5-orb{position:absolute;top:50%;left:0;width:18px;height:18px;border-radius:50%;transform:translate(-50%,-50%);
	background:#FFE9BC;box-shadow:0 0 0 7px rgba(255,226,170,.16),0 0 22px 6px rgba(255,214,150,.5);
	transition:background .9s ease,box-shadow .9s ease;}
/* 夜は三日月に変わる（内側の影で欠けを作る） */
.v5-orb.is-night{background:transparent;box-shadow:inset -5px -2px 0 0 #F2F6FF,0 0 18px 4px rgba(200,220,255,.35);}
/* 朝は少しあたたかい色に */
.v5-orb.is-morning{background:#FFCB93;box-shadow:0 0 0 7px rgba(255,196,140,.16),0 0 24px 7px rgba(255,186,120,.55);}
/* 太陽・月のまわりのやわらかい光 */
.v5-orb::after{content:'';position:absolute;left:50%;top:50%;width:46px;height:46px;border-radius:50%;transform:translate(-50%,-50%);
	background:radial-gradient(circle,rgba(255,228,180,.35),rgba(255,228,180,0) 70%);transition:background .9s ease;}
.v5-orb.is-night::after{background:radial-gradient(circle,rgba(198,220,255,.28),rgba(198,220,255,0) 70%);}
.v5-orb.is-morning::after{background:radial-gradient(circle,rgba(255,200,150,.35),rgba(255,200,150,0) 70%);}
/* 昼→夜の境目は夕日、夜→朝の境目は朝日。日の入り・日の出のオレンジにする。
   （夜の三日月・朝の色より後に書いて、境目のあいだだけ上書きする） */
.v5-orb.is-sunset{background:#FF7A2F;box-shadow:0 0 0 7px rgba(255,122,47,.2),0 0 26px 8px rgba(255,110,40,.6);}
.v5-orb.is-sunset::after{background:radial-gradient(circle,rgba(255,140,60,.45),rgba(255,140,60,0) 70%);}
.v5-orb.is-dawn{background:#FF9A45;box-shadow:0 0 0 7px rgba(255,154,69,.2),0 0 26px 8px rgba(255,150,70,.55);}
.v5-orb.is-dawn::after{background:radial-gradient(circle,rgba(255,165,90,.42),rgba(255,165,90,0) 70%);}
/* 締めの一文。ゆったりした余白の中で、じわっと現れる */
/* 画面に入ったら、スクロール量とは関係なく時間で自動再生する（JS側 concept.js が .on を順に付ける）。
   以前はスクロール量で1行ずつ出していたため画面1枚＋1380pxの区間が必要だったが、
   自動再生にしたのでその距離は不要になり、画面1枚ぶんの高さに戻している。 */
.v5-closingstage{position:relative;height:100vh;height:100svh;overflow-anchor:none;}
.v5-closingpin{height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;}
@media (prefers-reduced-motion: reduce){
	.v5-closingstage{height:auto;}
	.v5-closingpin{position:static;height:auto;display:block;padding:clamp(60px,10vh,120px) 0;padding:clamp(60px,10svh,120px) 0;}
}
/* 締めの一文は PC用(2行)とスマホ用(4行)の2ブロックを用意し、幅で出し分ける（文言を別々に設定できる） */
.v5-cl-sp{display:none;}
@media(max-width:640px){.v5-cl-pc{display:none;}.v5-cl-sp{display:block;}}
.v5-closing{margin-top:0;margin-bottom:0;font-family:'Shippori Mincho','Noto Serif JP',serif;color:#1E3A5F;font-size:clamp(20px,2.6vw,30px);line-height:2.5;letter-spacing:.06em;}
/* 1行ずつ、にじみが晴れるように現れる */
.v5-closing .ln{display:block;opacity:0;transform:translate3d(0,18px,0);filter:blur(4px);transition:opacity 2.8s cubic-bezier(.16,.7,.2,1),transform 2.8s cubic-bezier(.16,.7,.2,1),filter 2.8s cubic-bezier(.16,.7,.2,1);}
.v5-closing .ln.on{opacity:1;transform:none;filter:blur(0);}

/* PC：2行目（旅の予定〜滞在です。）は横一列で、まとめて現れる */
.v5-closing .grp{display:block;}
.v5-closing .grp .ln{display:inline;}
.v5-closing .grp.on .ln{opacity:1;transform:none;filter:blur(0);}
/* 「余白のある」の左右に、文字どおりの余白をつくる（現れながらゆっくり広がる） */
.v5-closing .ma{display:inline-block;padding:0 .15em;letter-spacing:.06em;transition:opacity 2.8s cubic-bezier(.16,.7,.2,1),transform 2.8s cubic-bezier(.16,.7,.2,1),filter 2.8s cubic-bezier(.16,.7,.2,1),padding 2.8s cubic-bezier(.16,.7,.2,1),letter-spacing 2.8s cubic-bezier(.16,.7,.2,1);}
.v5-closing .grp.on .ma{padding:0 1em;letter-spacing:.22em;}

@media (prefers-reduced-motion: reduce){
	.v5-closing .ln{opacity:1;transform:none;filter:none;transition:none;}
	.v5-closing .ma{padding:0 1em;letter-spacing:.22em;transition:none;}
}

@media(max-width:640px){
	/* スマホは4行。1行ずつ順番に現れ、「余白のある」の上下に余白ができる */
	.v5-closing .grp .ln{display:block;}
	.v5-closing .ma{display:block;padding:0;margin:.2em 0;letter-spacing:.06em;
		transition:opacity 2.8s cubic-bezier(.16,.7,.2,1),transform 2.8s cubic-bezier(.16,.7,.2,1),filter 2.8s cubic-bezier(.16,.7,.2,1),margin 2.8s cubic-bezier(.16,.7,.2,1),letter-spacing 2.8s cubic-bezier(.16,.7,.2,1);}
	/* 「余白のある」だけ少し大きく見せる（余白が主役になるように） */
	.v5-closing .ma{font-size:1.22em;}
	.v5-closing .ma.on{padding:0;margin:1.05em 0;letter-spacing:.2em;}
}

@media(max-width:640px){
	.v5-capwrap{height:clamp(150px,26vh,220px);height:clamp(150px,26svh,220px);}
	.v5-copy{font-size:clamp(20px,5.6vw,26px);line-height:1.75;}
	/* 右下の予約ボタンと重ならないよう、文字とメーターの右側に逃げをつくる */
	.v5-foot{padding-right:clamp(20px,6vw,40px);}
}

/* 画面が固定されているあいだは、右下の予約ボタン（と「SALE中」の吹き出し）を消す。
   写真に集中してもらうためと、狭い画面で文字と重なるため。固定を抜ければ戻る。 */
.msb-reserve-fab,#msale-fab-micro{transition:opacity .6s ease,transform .6s ease;}
body.v5-immersive .msb-reserve-fab{opacity:0;transform:scale(.9);pointer-events:none;}
/* 「SALE中」は translateX(50%) が元から掛かっているので、消えるときの動きを合わせる */
body.v5-immersive #msale-fab-micro{opacity:0;transform:translateX(50%) scale(.9);pointer-events:none;}

/* 動きを減らす設定の人には、固定せず写真を順番に見せる */
@media (prefers-reduced-motion: reduce){
	.v5-stage{height:auto;}
	.v5-pin{position:static;height:auto;display:block;}
	.v5-layer{position:relative;opacity:1 !important;height:60vh;height:60svh;transform:none !important;}
	.v5-foot{padding-top:24px;}
	.v5-capwrap{height:auto;}
	.v5-cap{position:static;opacity:1 !important;transform:none !important;color:#1E3A5F;margin-bottom:18px;}
	.v5-copy{text-shadow:none;}
	.v5-meter,.v5-shade{display:none;}
}





/* 本番のコンセプトセクションと同じ白背景・同じ上下余白（py-24 md:py-32） */
.a-sec{background:#fff;padding:6rem 0;}
@media(min-width:768px){ .a-sec{padding:8rem 0;} }
.a-in{max-width:80rem;margin:0 auto;padding:0 clamp(20px,5vw,40px);}
.a-serif{font-family:'Shippori Mincho','Noto Serif JP',serif;}
.a-en{font-family:'EB Garamond',serif;letter-spacing:.4em;font-size:14px;color:#DB4F11;}

/* 見出しは本番と同じ組み（.section-label / .section-title / mt-6のリード） */
.a-head{text-align:center;}

/* 上から下へ通る1本の線。スクロールに合わせてオレンジが伸びる */
.a-chrono{position:relative;}
.a-rail{position:absolute;left:clamp(5px,1.4vw,16px);top:0;bottom:0;width:1px;background:rgba(30,58,95,.16);}
.a-rail i{position:absolute;left:0;top:0;width:1px;height:0;background:#DB4F11;transition:height .3s linear;}

.a-step{position:relative;padding-left:clamp(34px,7vw,96px);padding-bottom:clamp(72px,11vh,130px);padding-bottom:clamp(72px,11svh,130px);}
.a-step:last-child{padding-bottom:0;}
/* 丸ぽちは最初グレー。オレンジの線が届いた段だけ .lit が付いて点灯する（concept.js の draw()） */
.a-node{position:absolute;left:clamp(5px,1.4vw,16px);top:9px;width:11px;height:11px;border-radius:50%;
	background:#d3d5d8;border:1px solid #c2c5c9;transform:translate(-5px,0) scale(.8);
	transition:background .7s ease,border-color .7s ease,box-shadow .7s ease,transform .7s cubic-bezier(.16,.7,.2,1);}
.a-step.lit .a-node{background:#DB4F11;border-color:#DB4F11;box-shadow:0 0 0 7px rgba(219,79,17,.13);transform:translate(-5px,0) scale(1);}

.a-era{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px;}
.a-era .jp{font-family:'Shippori Mincho','Noto Serif JP',serif;font-size:clamp(19px,2vw,24px);color:#DB4F11;letter-spacing:.12em;}
.a-era .en{font-family:'EB Garamond',serif;font-size:14px;letter-spacing:.34em;color:rgba(30,58,95,.45);}

.a-grid{display:grid;gap:clamp(22px,3vw,40px);align-items:center;}
@media(min-width:900px){.a-grid{grid-template-columns:1fr 1fr;gap:clamp(36px,4.5vw,64px);}.a-step.rev .a-txt{order:2;}}
.a-title{font-family:'Shippori Mincho','Noto Serif JP',serif;color:#1E3A5F;font-size:clamp(20px,2.4vw,28px);line-height:1.95;letter-spacing:.06em;margin-bottom:16px;}
.a-body{color:rgba(30,58,95,.78);font-size:clamp(15px,1.15vw,16px);line-height:2.15;}

/* 写真：古い段ほど色が抜けている。画面に入るとゆっくり色が戻る */
.a-ph{position:relative;aspect-ratio:4/3;background:#e6dccb;overflow:hidden;}
.a-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);
	transition:filter 2.6s cubic-bezier(.16,.7,.2,1),transform 2.6s cubic-bezier(.16,.7,.2,1);}
/* 写真は加工せず、そのままの色で見せる（セピア・重ね色は使わない） */
.a-step.on .a-ph img{transform:scale(1);}

/* 文字は下からふわりと */
.a-fade{opacity:0;transform:translate3d(0,24px,0);transition:opacity 1.5s cubic-bezier(.16,.7,.2,1),transform 1.5s cubic-bezier(.16,.7,.2,1);}
.a-step.on .a-fade{opacity:1;transform:none;}
.a-step.on .a-fade.d1{transition-delay:.14s;}
.a-step.on .a-fade.d2{transition-delay:.3s;}
.a-a{opacity:0;transform:translate3d(0,24px,0);transition:opacity 1.6s cubic-bezier(.16,.7,.2,1),transform 1.6s cubic-bezier(.16,.7,.2,1);}
.a-a.on{opacity:1;transform:none;}
.a-a.d1{transition-delay:.2s}.a-a.d2{transition-delay:.4s}

.a-close{margin-top:clamp(72px,10vh,120px);margin-top:clamp(72px,10svh,120px);text-align:center;}
.a-close p{font-family:'Shippori Mincho','Noto Serif JP',serif;color:#1E3A5F;font-size:clamp(18px,2vw,24px);line-height:2.1;}

/* =========================================================
   結屋について（#concept）新デザイン
   文章 → 現在の写真1枚。中央揃えで、他セクションと組みを揃える。
   ※以前の年表（.a-chrono / .a-step）は使わなくなった。
   ========================================================= */
.c-about{background:#fff;padding:6rem 0;}
@media(min-width:768px){ .c-about{padding:8rem 0;} }
.c-in{max-width:80rem;margin:0 auto;padding:0 clamp(20px,5vw,40px);}
.c-head{margin-bottom:clamp(40px,6vw,64px);}
/* 本文。中央揃えで、行間はゆったり。 */
.c-body{max-width:44rem;margin:0 auto;text-align:center;
	display:flex;flex-direction:column;gap:clamp(26px,3vw,38px);}
.c-body p{margin:0;font-family:'Shippori Mincho','Noto Serif JP',serif;
	color:rgba(62,51,45,.86);font-size:clamp(16px,1.22vw,18px);
	line-height:2.5;letter-spacing:.05em;}
/* 写真は本文のあとに1枚。4:3で切り抜く。 */
.c-ph{margin:clamp(48px,7vw,84px) auto 0;max-width:52rem;}
.c-ph img{width:100%;aspect-ratio:4/3;object-fit:cover;}
/* スクロールで、下からそっと現れる（他セクションと同じ動き） */
.c-fade{opacity:0;transform:translate3d(0,16px,0);
	transition:opacity 1.2s cubic-bezier(.16,.7,.2,1),transform 1.2s cubic-bezier(.16,.7,.2,1);}
.c-fade.on{opacity:1;transform:none;}
/* 遅延の段階。本文の3段落を1つずつ順番に出すため d4/d5 まで用意している。
   （段落ごとに .c-fade を付け、d2→d3→d4 と少しずつ遅らせる）
   ※ 出るのが遅く感じたため、待ち時間をおよそ半分に縮めている。 */
.c-fade.d1{transition-delay:.1s;}
.c-fade.d2{transition-delay:.25s;}
.c-fade.d3{transition-delay:.5s;}
.c-fade.d4{transition-delay:.75s;}
.c-fade.d5{transition-delay:1s;}
@media (prefers-reduced-motion: reduce){
	.c-fade{opacity:1;transform:none;transition:none;}
}