/* ================================================================
   WEDDING PAGE STYLES
   ================================================================ */

:root{
  --w-gold:#c9a961;
  --w-forest:#3a4a3f;
  --w-ivory:#f5f2eb;
  --w-charcoal:#2a2a2a;
  --w-gray:#6a6a68;
  --w-line:rgba(58,74,63,.16);
}

/* ---- 共通 ------------------------------------------------------- */
.wed{color:var(--w-charcoal);background:#fff;font-family:"Noto Sans JP","游ゴシック Medium","Yu Gothic Medium",sans-serif;font-weight:300;line-height:1.9;letter-spacing:.04em}
.wed .container{width:min(1200px,92%);margin-inline:auto}
.wed .en{font-family:"Cinzel","Noto Serif JP",serif;font-weight:400;letter-spacing:.2em}
/* 見出しのみ「、」等で改行させない。本文は自然な折り返しに戻す */
.wed h1,.wed h2,.wed h3{font-weight:400;line-height:1.6;word-break:keep-all;overflow-wrap:normal;line-break:strict}
.wed p{word-break:normal;overflow-wrap:break-word;line-break:auto}

/* ---- HERO（他下層と同じ hero-top 構造）------------------------ */
.w-hero-page.hero-top{height:100svh;min-height:520px;max-height:900px}
.w-hero-page .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.05) 45%,rgba(0,0,0,.5) 100%);z-index:1;pointer-events:none}
.w-hero-page .w-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.w-hero-page .hero-content{position:absolute;left:0;right:0;bottom:clamp(56px,7vh,120px);text-align:center;z-index:2;color:#fff}
/* hero-title は共通CSS（Helvetica Neue / letter-spacing .4em）を継承。色と影のみ上書き */
.w-hero-page .hero-title{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35);font-weight:200}

/* ---- セクション共通 --------------------------------------------- */
.w-section{padding:clamp(72px,12vw,160px) 0;position:relative}
.w-section--ivory{background:var(--w-ivory)}
.w-section--forest{background:var(--w-forest);color:#fff}
.w-section-head{text-align:center;margin-bottom:clamp(48px,6vw,80px)}
.w-eyebrow{display:block;font-family:"Cinzel",serif;font-size:11px;letter-spacing:.5em;color:var(--w-gold);text-transform:uppercase;margin-bottom:clamp(14px,2vw,22px)}
.w-title{font-family:"Noto Serif JP",serif;font-weight:300;font-size:clamp(22px,3.2vw,36px);line-height:1.7;letter-spacing:.08em;color:var(--w-charcoal);margin:0 0 clamp(20px,3vw,32px);word-break:keep-all;overflow-wrap:normal}
.w-title--center{text-align:center}
.w-lead{font-size:clamp(13px,1.15vw,15px);line-height:2.15;letter-spacing:.06em;color:var(--w-gray);word-break:keep-all;overflow-wrap:normal;margin:0}
.w-divider{width:40px;height:1px;background:var(--w-gold);margin:0 auto clamp(20px,3vw,32px)}

/* ---- 2カラム（画像+テキスト）------------------------------------ */
.w-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:center}
.w-split--reverse{direction:rtl}.w-split--reverse>*{direction:ltr}
.w-split__figure{position:relative;aspect-ratio:4/5;overflow:hidden;background:#eee}
.w-split__figure img{width:100%;height:100%;object-fit:cover;transition:transform 6s ease}
.w-split__figure:hover img{transform:scale(1.04)}
.w-split__body{padding:0}

/* ---- STORY（LOCATION & FACILITY を1日のストーリーに）------------ */
.w-story__timeline{position:relative;margin-top:clamp(48px,6vw,96px)}
/* 縦のゴールドライン（PC）中央に細く */
.w-story__timeline::before{content:"";position:absolute;left:50%;top:40px;bottom:40px;width:1px;background:linear-gradient(180deg,transparent 0,rgba(201,169,97,.55) 6%,rgba(201,169,97,.55) 94%,transparent 100%);transform:translateX(-50%);pointer-events:none;z-index:1}
.w-scene{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,7vw,104px);align-items:center;padding:clamp(64px,9vw,128px) 0}
.w-scene:first-child{padding-top:0}
.w-scene:last-child{padding-bottom:0}
.w-scene--right .w-scene__figure{order:2}
.w-scene--right .w-scene__body{order:1;text-align:right}
/* シーンドット（縦線上のマーカー）*/
.w-scene::before{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;background:var(--w-ivory);border:1px solid var(--w-gold);border-radius:50%;transform:translate(-50%,-50%);z-index:3}
.w-scene__figure{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:#eee}
.w-scene__figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.w-scene__body{padding:0 clamp(0px,2vw,28px)}
.w-scene__num{font-family:"Cinzel",serif;font-weight:500;font-size:12px;letter-spacing:.5em;color:var(--w-gold);display:block;margin-bottom:clamp(14px,2vw,22px)}
.w-scene__cat{display:none}
/* 他の見出し(.w-title)と同サイズに揃える */
.w-scene__title{font-family:"Noto Serif JP",serif;font-weight:400;font-size:clamp(22px,3.2vw,36px);letter-spacing:.1em;line-height:1.5;margin:0 0 clamp(20px,3vw,32px);color:var(--w-charcoal);word-break:keep-all}
.w-scene__text p{font-size:clamp(13px,1.05vw,15px);line-height:2.15;color:var(--w-gray);margin:0 0 1.4em;letter-spacing:.04em}
.w-scene__text p:last-child{margin-bottom:0}

/* シーン単位のフェードイン（子要素をディレイでずらす）*/
.wed .w-scene[data-fade]{opacity:1;transform:none;transition:none}
.w-scene .w-scene__figure{opacity:0;transform:translateY(24px);transition:opacity 1.4s ease,transform 1.4s cubic-bezier(.2,.8,.2,1)}
.w-scene .w-scene__body>*{opacity:0;transform:translateY(16px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.w-scene.show .w-scene__figure{opacity:1;transform:none}
.w-scene.show .w-scene__body>*:nth-child(1){opacity:1;transform:none;transition-delay:.35s}
.w-scene.show .w-scene__body>*:nth-child(2){opacity:1;transform:none;transition-delay:.45s}
.w-scene.show .w-scene__body>*:nth-child(3){opacity:1;transform:none;transition-delay:.6s}
.w-scene.show .w-scene__body>*:nth-child(4){opacity:1;transform:none;transition-delay:.75s}

/* Mobile: PC用タイムラインは非表示、sticky演出を表示 */
@media (max-width:960px){
  .w-story__timeline{display:none}
}

/* ================================================================
   【CRITICAL FIX】横はみ出し対策 + sticky対応
   overflow-x: clip はスクロールコンテキストを作らない。非対応ブラウザでは
   前の overflow-x:hidden にフォールバック（この場合stickyは壊れるが横スクは阻止される）
   ================================================================ */
html, body{overflow-x:hidden;overflow-x:clip;max-width:100%}
main.wed{overflow-x:hidden;overflow-x:clip;max-width:100%}
main.wed > *{max-width:100vw;overflow-x:hidden;overflow-x:clip}
.wed .container{max-width:100%}
.wed img,.wed video,.wed svg{max-width:100%}
/* マーキートラックだけは意図的に max-content で幅を持たせる（親.w-marquee{overflow:hidden}で視覚的にクリップ）*/
.w-marquee__track{max-width:none}
/* mstory sticky内部要素も max-width 制約（ただし mstory自身はsticky動作のためoverflow:hidden回避）*/
.mstory{overflow-x:hidden;overflow-x:clip}
.mstory *{max-width:100%}
.mstory__cap,.mstory__eyebrow,.mstory__verb,.mstory__copy,.mstory__text{max-width:100%;box-sizing:border-box}

/* 狭い画面（640px以下）では全ての「keep-all」見出し・本文の折り返しを許可（overflow防止）*/
@media (max-width:640px){
  .wed .w-title,.wed .w-scene__title,.wed .w-scene__text p,
  .wed .w-cta__title,.wed .w-cta__text,
  .wed .w-feat__title,.wed .w-feat__text,
  .wed .w-plan__name,.wed .w-plan__note,.wed .w-plan__list li,
  .wed .mstory__verb,.wed .mstory__copy,.wed .mstory__text p{
    word-break:normal;overflow-wrap:break-word;line-break:auto;
  }
}

/* ---- Hero title mobile overflow guard ---- */
.w-hero-page .hero-title{max-width:calc(100vw - 24px);white-space:nowrap;overflow:visible}
@media (max-width:400px){
  .w-hero-page .hero-title{font-size:clamp(30px,9vw,44px);letter-spacing:.22em}
}
@media (max-width:340px){
  .w-hero-page .hero-title{font-size:26px;letter-spacing:.18em}
}

/* ================================================================
   【NEW】MOBILE STICKY STORY v2 - refactored, outside data-fade
   sectionの外に配置し、祖先のtransform問題を完全に回避
   ================================================================ */
.mstory{display:none;background:var(--w-ivory)}
.mstory-end{display:none;background:#fff;height:clamp(80px,20vw,140px)}
@media (max-width:960px){
  .mstory{display:block}
  .mstory-end{display:block}
}
.mstory__scroll{position:relative;height:340vh}
.mstory__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#fff;isolation:isolate;contain:layout paint}

/* シーン全体：flex縦。上=写真、下=本文パネル。opacityのみで切替（visibility不使用でジッター回避）*/
.mstory__scene{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .55s ease-out;will-change:opacity;transform:translateZ(0)}
.mstory__scene.is-active{opacity:1;pointer-events:auto}

/* 上部：写真 + キャプション */
.mstory__visual{position:relative;flex:0 0 52svh;overflow:hidden;background:#111}
.mstory__visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.03) translateZ(0);transition:transform 1s ease-out;will-change:transform}
.mstory__scene.is-active .mstory__visual img{transform:scale(1) translateZ(0)}
.mstory__visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.05) 45%,rgba(0,0,0,.65) 100%);pointer-events:none;z-index:1}
.mstory__cap{position:absolute;left:24px;right:24px;bottom:28px;z-index:2;color:#fff;opacity:0;transform:translate3d(0,12px,0);transition:opacity .5s ease-out,transform .5s ease-out}
.mstory__scene.is-active .mstory__cap{opacity:1;transform:translate3d(0,0,0);transition-delay:.1s}
.mstory__eyebrow{display:block;font-family:"Cinzel",serif;font-weight:500;font-size:11px;letter-spacing:.5em;color:var(--w-gold);margin-bottom:12px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.mstory__verb{font-family:"Noto Serif JP",serif;font-weight:400;font-size:clamp(22px,5.5vw,28px);letter-spacing:.08em;line-height:1.4;color:#fff;margin:0 0 12px;text-shadow:0 2px 20px rgba(0,0,0,.55);word-break:keep-all}
.mstory__copy{font-family:"Noto Serif JP",serif;font-weight:300;font-size:15px;line-height:1.85;letter-spacing:.06em;color:rgba(255,255,255,.92);text-shadow:0 2px 20px rgba(0,0,0,.6);margin:0;word-break:keep-all}

/* 下部：本文パネル */
.mstory__panel{position:relative;flex:1 1 auto;min-height:48svh;background:var(--w-ivory);color:var(--w-charcoal);padding:26px 24px 60px;overflow:hidden;opacity:0;transform:translate3d(0,10px,0);transition:opacity .5s ease-out,transform .5s ease-out}
.mstory__scene.is-active .mstory__panel{opacity:1;transform:translate3d(0,0,0);transition-delay:.15s}
.mstory__title{font-family:"Noto Serif JP",serif;font-weight:400;font-size:17px;letter-spacing:.08em;line-height:1.6;margin:0 0 16px;color:var(--w-charcoal);word-break:keep-all}
.mstory__text{margin:0}
.mstory__text p{font-family:"Noto Sans JP","游ゴシック Medium",sans-serif;font-weight:300;font-size:13px;line-height:1.95;letter-spacing:.04em;color:var(--w-gray);margin:0 0 .95em}
.mstory__text p:last-child{margin-bottom:0}

/* プログレスは写真エリア下部、パネル境界の少し上に配置 */
.mstory__prog{position:absolute;left:0;right:0;top:calc(52svh - 34px);z-index:5;display:flex;justify-content:center;align-items:center;gap:10px;font-family:"Cinzel",serif;font-size:11px;letter-spacing:.3em;color:rgba(255,255,255,.55);pointer-events:none;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.mstory__n{min-width:22px;text-align:center;transition:color .5s ease}
.mstory__n.is-active{color:var(--w-gold)}
.mstory__l{width:20px;height:1px;background:rgba(255,255,255,.4)}

@media (max-width:640px){
  .mstory__visual{flex:0 0 52svh}
  .mstory__prog{top:calc(52svh - 32px)}
  .mstory__cap{bottom:22px;left:20px;right:20px}
  .mstory__verb{font-size:clamp(20px,5.4vw,24px);margin-bottom:10px}
  .mstory__copy{font-size:14px;line-height:1.8}
  .mstory__eyebrow{font-size:10px;letter-spacing:.4em;margin-bottom:10px}
  .mstory__panel{min-height:48svh;padding:24px 20px 60px}
  .mstory__text p{font-size:13px;line-height:1.95}
}
@media (max-width:380px){
  .mstory__visual{flex:0 0 50svh}
  .mstory__prog{top:calc(50svh - 30px)}
  .mstory__panel{min-height:50svh;padding:22px 20px 60px}
  .mstory__verb{font-size:20px}
  .mstory__copy{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  .mstory__scene,.mstory__scene img,.mstory__cap,.mstory__panel{transition:none!important;transform:none!important}
}

/* 旧sticky祖先transform無効化はmstoryでも安全のため残す */
.wed .w-story[data-fade]{opacity:1;transform:none;transition:none}

@media (prefers-reduced-motion:reduce){
  .w-scene .w-scene__figure,.w-scene .w-scene__body>*{opacity:1;transform:none;transition:none}
}

/* ---- FEATURES（旧・使わないが互換のため残す）--------------------- */
.w-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px);align-items:start}
.w-feat{background:#fff;min-width:0;display:flex;flex-direction:column}
.w-feat__figure{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:#eee;margin:0 0 clamp(22px,2.5vw,32px)}
.w-feat__figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 2s ease}
.w-feat:hover .w-feat__figure img{transform:scale(1.05)}
.w-feat__body{padding:0 clamp(14px,1.5vw,24px)}
.w-feat__num{font-family:"Cinzel",serif;font-size:11px;letter-spacing:.4em;color:var(--w-gold);margin-bottom:12px;display:block}
.w-feat__title{font-family:"Noto Serif JP",serif;font-weight:400;font-size:clamp(17px,1.8vw,22px);letter-spacing:.08em;line-height:1.6;margin:0 0 16px;color:var(--w-charcoal);word-break:keep-all}
.w-feat__text{font-size:13px;line-height:2.05;letter-spacing:.04em;color:var(--w-gray);margin:0}

/* ---- PLAN & PRICE ---------------------------------------------- */
.w-plan{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,80px);align-items:center;background:#fff;padding:clamp(40px,6vw,72px);border:1px solid var(--w-line)}
.w-plan__badge{font-family:"Cinzel",serif;font-size:11px;letter-spacing:.4em;color:var(--w-gold);margin-bottom:16px;display:block}
.w-plan__name{font-family:"Noto Serif JP",serif;font-weight:400;font-size:clamp(20px,2.4vw,28px);letter-spacing:.08em;line-height:1.6;margin:0 0 clamp(24px,3vw,32px);color:var(--w-charcoal);word-break:keep-all}
.w-plan__price{display:flex;align-items:baseline;gap:8px;margin-bottom:clamp(20px,3vw,28px);padding-bottom:clamp(20px,3vw,28px);border-bottom:1px solid var(--w-line);flex-wrap:wrap}
.w-plan__price-num{font-family:"Cinzel",serif;font-size:clamp(40px,6vw,72px);font-weight:400;color:var(--w-charcoal);line-height:1;letter-spacing:.02em}
.w-plan__price-unit{font-family:"Noto Serif JP",serif;font-size:14px;color:var(--w-gray);letter-spacing:.1em}
.w-plan__note{font-size:12px;color:var(--w-gray);line-height:1.9;margin:0 0 clamp(24px,3vw,32px);letter-spacing:.04em;word-break:keep-all;overflow-wrap:normal}
.w-plan__list{list-style:none;padding:0;margin:0}
.w-plan__list li{position:relative;padding:10px 0 10px 22px;font-size:13px;line-height:1.8;color:var(--w-charcoal);border-bottom:1px dashed var(--w-line);word-break:keep-all}
.w-plan__list li:last-child{border-bottom:none}
.w-plan__list li::before{content:"";position:absolute;left:0;top:20px;width:12px;height:1px;background:var(--w-gold)}
.w-plan__list-title{font-family:"Cinzel",serif;font-size:11px;letter-spacing:.4em;color:var(--w-gold);margin-bottom:12px;display:block}

/* ---- GALLERY 帯（2列マーキー・右→左 / 左→右）-------------------- */
.w-gallery{padding-top:clamp(72px,12vw,160px);padding-bottom:0;overflow:hidden;background:var(--w-ivory)}
.w-gallery__head{text-align:center;margin-bottom:clamp(40px,5vw,64px)}
.w-marquee{overflow:hidden;width:100%;margin-block:clamp(8px,1.2vw,16px);mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
.w-marquee__track{display:flex;gap:clamp(10px,1.5vw,20px);width:max-content;will-change:transform}
.w-marquee__item{flex:0 0 auto;width:clamp(240px,26vw,360px);aspect-ratio:4/3;overflow:hidden;background:#eee}
.w-marquee__item img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.98)}
.w-marquee--left .w-marquee__track{animation:wMarqueeLeft 90s linear infinite}
.w-marquee--right .w-marquee__track{animation:wMarqueeRight 100s linear infinite}
.w-marquee:hover .w-marquee__track{animation-play-state:paused}
@keyframes wMarqueeLeft{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@keyframes wMarqueeRight{
  0%{transform:translateX(-50%)}
  100%{transform:translateX(0)}
}
@media (max-width:640px){
  .w-marquee__item{width:clamp(200px,60vw,280px)}
  .w-marquee--left .w-marquee__track{animation-duration:60s}
  .w-marquee--right .w-marquee__track{animation-duration:70s}
}
@media (prefers-reduced-motion:reduce){
  .w-marquee__track{animation:none !important;transform:none !important}
  .w-marquee{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ---- CTA -------------------------------------------------------- */
.w-cta{padding:clamp(40px,6vw,64px) 0;text-align:center;background:#3a4a3f;background:var(--w-forest);color:#fff}
.w-cta + .w-section{padding-top:clamp(40px,6vw,64px)}
@media (max-width:640px){
  .w-cta{padding:28px 0}
  .w-cta__title{font-size:clamp(17px,4.5vw,20px);margin:0 0 14px;line-height:1.7}
  .w-cta__text{margin:0 auto 18px;font-size:12.5px;line-height:1.9}
  .w-btn{padding:14px 32px;font-size:11px}
  .w-cta + .w-section{padding-top:32px;padding-bottom:48px}
}
.w-cta__title{font-family:"Noto Serif JP",serif;font-weight:300;font-size:clamp(20px,2.6vw,30px);line-height:1.8;letter-spacing:.1em;margin:0 0 clamp(24px,3vw,36px);color:#fff;word-break:keep-all}
.w-cta__text{font-size:13px;line-height:2.1;color:rgba(255,255,255,.85);margin:0 auto clamp(32px,4vw,48px);max-width:640px;letter-spacing:.05em;word-break:keep-all;overflow-wrap:normal}
.w-btn{display:inline-block;padding:18px 56px;font-family:"Cinzel",serif;font-size:12px;letter-spacing:.4em;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.7);text-decoration:none;transition:all .4s cubic-bezier(.2,.8,.2,1)}
.w-btn:hover{background:#fff;color:var(--w-forest);border-color:#fff}

/* ---- ACCESS ----------------------------------------------------- */
.w-access{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:start;max-width:800px;margin:0 auto}
.w-access__block{padding:0}
.w-access__label{font-family:"Cinzel",serif;font-size:11px;letter-spacing:.4em;color:var(--w-gold);margin-bottom:14px;display:block}
.w-access__text{font-size:14px;line-height:2.1;color:var(--w-charcoal);margin:0;letter-spacing:.06em}

/* ---- フェードイン --------------------------------------------- */
.wed [data-fade]{opacity:0;transform:translateY(24px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.wed [data-fade].show,.wed [data-fade].is-show{opacity:1;transform:none}

/* ===============================================================
   RESPONSIVE
   =============================================================== */
@media (max-width:960px){
  .w-split{grid-template-columns:1fr;gap:clamp(28px,5vw,40px)}
  .w-split--reverse{direction:ltr}
  .w-split__figure{aspect-ratio:4/3}
  .w-features{grid-template-columns:1fr;gap:clamp(28px,5vw,40px);max-width:520px;margin-inline:auto}
  .w-feat__figure{aspect-ratio:4/3}
  .w-feat__body{padding:0 clamp(6px,2vw,16px)}
  .w-plan{grid-template-columns:1fr;padding:clamp(28px,6vw,48px)}
  .w-access{grid-template-columns:1fr;gap:28px}
}
@media (max-width:640px){
  .w-title{font-size:clamp(19px,5.4vw,26px);letter-spacing:.06em;line-height:1.7}
  .w-lead{font-size:14px;line-height:2}
  .w-feat__text{font-size:13px}
  .w-plan{padding:clamp(24px,6vw,40px)}
  .w-plan__name{font-size:clamp(18px,4.5vw,22px);letter-spacing:.06em}
  .w-plan__price-num{font-size:clamp(34px,9vw,44px)}
  .w-plan__price-unit{font-size:12px}
  .w-btn{padding:16px 40px;letter-spacing:.3em}
}
@media (max-width:400px){
  .w-plan{padding:22px 18px}
  .w-plan__name{font-size:17px}
  .w-plan__price-num{font-size:32px}
}
@media (max-width:420px){
  .w-title{font-size:19px}
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion:reduce){
  .wed *,.wed *::before,.wed *::after{animation:none!important;transition:none!important}
  .wed [data-fade]{opacity:1;transform:none}
}