/* =====================================================================
   PREMIER HOTEL MOJIKO — SECRET FAIR 広告LP
   2026-09-14 Argento 口コミLP（/lp/reviews）の設計言語で組み直し

   色は公式サイト（weddingmojiko.kenhotels.com）のCSSで使われている値に揃える:
     ブルー  #445887 … CTA・英字見出し（白文字 7.2:1）
     ゴールド #b18b43 … 極細の罫・菱形の装飾のみ（文字色には濃い側 #8a6a2c を使う）
     グリーン #5e7441 … ロゴの葉の色。菱形の差し色だけに使う
   地は白〜ほぼ白。暗い帯・黒い暗幕は置かない。写真の上の文字は白いベール／白いすりガラスで読ませる（婚礼らしい明るさ）。

   スクロールの所作:
     ベース … [data-rv][data-seen="1"]（IntersectionObserver・1回だけ）
     上乗せ … @supports (animation-timeline: view()) かつ reduced-motion でないときだけ
             animation-range は「入り切ったら最終状態で固定」する範囲に留める（途中で止まって薄く見えるのを防ぐ）
   ===================================================================== */

:root{
  --blue:#445887;
  --blue-deep:#34466f;
  --blue-pale:#eef1f7;
  --navy:#26334a;
  --gold:#b18b43;
  --gold-text:#8a6a2c;
  --gold-light:#d9c396;
  --gold-deep:#6b501e;   /* 写真の上（白いベール・すりガラス越し）の金文字用。明るい空の上でも 4.5:1 を確保 */
  --green:#5e7441;
  --white:#ffffff;
  --paper:#fafaf9;
  --beige:#f3f2ef;
  --ink:#3a3a3a;
  --ink-soft:#606060;
  --ink-mute:#737373;
  --line:#e4e4e4;

  --f-jp:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-disp:"Cormorant Garamond","Times New Roman",serif;
  --f-label:system-ui,-apple-system,"Segoe UI","Hiragino Sans",sans-serif;

  --col:680px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-line:cubic-bezier(.2,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
/* ページ端でのゴムのような伸び（iOS Safari等）を止め、後ろの固定レイヤーが覗かないようにする */
html,body{overscroll-behavior-y:none;}
body{
  margin:0;background:#e9edf2;color:var(--ink);font-family:var(--f-jp);
  line-height:1.9;letter-spacing:.02em;-webkit-font-smoothing:antialiased;
  word-break:auto-phrase;line-break:strict;text-spacing-trim:trim-start;overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0;padding:0;}
ul,ol{list-style:none;}
button{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
p,li,h1,h2,h3{overflow-wrap:break-word;text-wrap:wrap;}

.mj-skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--blue);color:#fff;padding:10px 16px;}
.mj-skip:focus{left:8px;}

/* 原稿の改行（1要素＝1行。行長は25emで頭打ち） */
.mj-ln > span{display:block;}
.mj-ln{max-width:25em;}
.mj-center{text-align:center;margin-inline:auto;}

/* ---------------------------------------------------------------------
   土台：ぼかし写真のガター → 固定背景ストリップ → 角丸の中央カラム
   --------------------------------------------------------------------- */
.mj-gutter{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.mj-gutter::before{content:"";position:absolute;inset:-40px;background:url("../img/gutter-blur.webp") center/cover no-repeat;filter:blur(26px) saturate(1.05);}
.mj-gutter::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 24%,rgba(68,88,135,.14),rgba(240,242,245,.74) 84%);}

.mj-strip{
  position:fixed;top:12px;left:50%;z-index:1;transform:translateX(-50%);
  width:calc(100% - 24px);max-width:var(--col);height:calc(100svh - 24px);
  border-radius:24px;overflow:hidden;pointer-events:none;background:var(--blue-pale);
  opacity:0;transition:opacity .45s ease;
}
/* 固定写真はインタールードが画面にある間だけ出す（ページ端の伸びや余白から写真が見えないように） */
.mj-strip.is-visible{opacity:1;}
.mj-strip-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease;transform:scale(1.05);animation:mjKb 26s ease-in-out infinite alternate;will-change:opacity,transform;}
.mj-strip-img.is-on{opacity:1;}
.mj-strip::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 50%,rgba(255,255,255,.12));}
@keyframes mjKb{from{transform:scale(1.04);}to{transform:scale(1.14);}}

.mj-rail{position:fixed;top:0;bottom:0;z-index:2;display:none;align-items:center;pointer-events:none;}
.mj-rail span{writing-mode:vertical-rl;font-family:var(--f-label);font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:rgba(38,51,74,.4);}
.mj-rail--l{left:14px;}
.mj-rail--r{right:14px;}
.mj-rail--r span{writing-mode:vertical-lr;}
@media (min-width:1024px){.mj-rail{display:flex;}}

.mj-col{
  position:relative;z-index:3;overflow:hidden;
  width:calc(100% - 24px);max-width:var(--col);margin:12px auto;
  border-radius:24px;box-shadow:0 18px 60px rgba(18,26,34,.16);
  min-height:calc(100svh - 24px);
}
.mj-grain{position:absolute;inset:0;z-index:40;pointer-events:none;opacity:.04;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

.mj-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:90;background:linear-gradient(90deg,var(--gold),var(--blue));transform-origin:0 50%;transform:scaleX(0);opacity:0;}

/* ---------------------------------------------------------------------
   FV（写真全面。顔にかからないよう、見出しは上・特典とCTAは下に分ける）
   --------------------------------------------------------------------- */
.mj-fv{position:relative;height:calc(100svh - 24px);min-height:640px;overflow:hidden;color:var(--navy);background:var(--blue-pale);}
.mj-fv-media{position:absolute;inset:0;}
.mj-fv-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1);transition:opacity 1.6s linear,transform 6.4s ease-out;will-change:opacity,transform;}
.mj-fv-slide.is-on{opacity:1;transform:scale(1.08);}
/* 婚礼の白いベールのように、上下から柔らかい光を重ねる（写真を暗くしない） */
.mj-fv-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.5) 24%,rgba(255,255,255,.12) 42%,rgba(255,255,255,0) 56%,rgba(255,255,255,0) 64%,rgba(255,255,255,.34) 80%,rgba(255,252,247,.7) 100%);}

.mj-fv-logo{position:absolute;top:18px;left:18px;z-index:3;display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 6px 20px rgba(18,26,34,.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.mj-fv-logo img{height:26px;width:auto;}

.mj-fv-copy{position:absolute;left:0;right:0;top:clamp(92px,15svh,140px);z-index:2;padding:0 24px;text-align:center;color:var(--navy);text-shadow:0 0 18px rgba(255,255,255,.9),0 0 2px rgba(255,255,255,.9);}
/* 文字の背後は暗くせず、白い光のにじみで読みやすくする */
.mj-fv-copy::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(124%,600px);height:150%;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(255,255,255,.7) 0%,rgba(255,255,255,.46) 46%,rgba(255,255,255,0) 70%);pointer-events:none;}
/* PC幅はリード文が1行に伸びるため、光のにじみを横に広げる */
@media (min-width:600px){
  .mj-fv-copy::before{width:min(130%,760px);height:150%;background:radial-gradient(ellipse at center,rgba(255,255,255,.74) 0%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 72%);}
}
.mj-fv-place{font-family:var(--f-disp);font-style:italic;font-size:16px;font-weight:500;letter-spacing:.14em;color:var(--gold-deep);opacity:0;}
.mj-fv-h1{margin-top:14px;font-weight:600;font-size:clamp(27px,7.4vw,46px);line-height:1.45;letter-spacing:.04em;}
.mj-mask{display:block;overflow:hidden;padding-bottom:.06em;}
.mj-mask > span{display:block;transform:translateY(115%);}
.mj-fv-lead{margin-top:4px;font-size:clamp(12.5px,3.6vw,15px);letter-spacing:.1em;color:var(--navy);}
/* 見出しと説明文のあいだの金の罫と菱形 */
.mj-fv-orn{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0 10px;}
.mj-fv-orn span{width:54px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));}
.mj-fv-orn span:last-child{background:linear-gradient(90deg,var(--gold),transparent);}
.mj-fv-orn i{width:7px;height:7px;border:1px solid var(--gold);transform:rotate(45deg);}

.mj-fv-bottom{position:absolute;left:0;right:0;bottom:48px;z-index:2;padding:0 20px;display:flex;flex-direction:column;align-items:center;gap:14px;}
.mj-glass{background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--gold-light);border-radius:16px;box-shadow:0 14px 34px rgba(38,51,74,.14);}
.mj-offer-badge{width:100%;max-width:400px;padding:14px 16px 12px;text-align:center;}
.mj-offer-badge-label{font-family:var(--f-label);font-size:10px;font-weight:600;letter-spacing:.26em;color:var(--gold-deep);}
.mj-offer-badge-main{margin-top:4px;display:flex;flex-direction:column;align-items:center;font-weight:700;line-height:1.35;font-size:clamp(17px,4.8vw,22px);}
.mj-offer-badge-sm{font-size:clamp(13px,3.6vw,15px);font-weight:600;letter-spacing:.08em;}
.mj-offer-badge-main b{font-family:var(--f-disp);font-weight:500;font-size:clamp(46px,13vw,60px);line-height:1;margin:0 3px;color:var(--blue);font-variant-numeric:lining-nums tabular-nums;}
.mj-offer-badge-note{margin-top:6px;font-family:var(--f-label);font-size:10.5px;line-height:1.7;color:var(--ink-soft);}

.mj-fv-scroll{position:absolute;left:50%;bottom:14px;z-index:2;transform:translateX(-50%);font-family:var(--f-label);font-size:10px;letter-spacing:.34em;color:var(--navy);animation:mjFloat 2.4s ease-in-out infinite;}
@keyframes mjFloat{0%,100%{transform:translate(-50%,0);opacity:.85;}50%{transform:translate(-50%,6px);opacity:.4;}}

/* FVの入場（読み込み後に1回）。.is-ready は JS が付ける。JSが無い環境でも見えるよう @keyframes の both で着地させる */
.is-ready .mj-fv-place{animation:mjUp 1.2s ease .2s both;}
.is-ready .mj-mask > span{animation:mjLine 1.1s var(--ease-line) var(--d,.45s) both;}
.mj-up{opacity:0;}
.is-ready .mj-up{animation:mjUp 1.4s ease var(--d,.9s) both;}
html:not(.is-ready) .mj-fv-place,html:not(.is-ready) .mj-up{opacity:1;}
html:not(.is-ready) .mj-mask > span{transform:none;}
@keyframes mjUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
@keyframes mjLine{from{transform:translateY(115%);}to{transform:none;}}

/* ---------------------------------------------------------------------
   CTA（丸いピル・公式のブルー・光沢が周期的に走る）
   --------------------------------------------------------------------- */
.mj-cta{
  position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;max-width:460px;min-height:60px;margin-inline:auto;padding:14px 24px;
  border-radius:999px;background:var(--blue);color:#fff;text-decoration:none;text-align:center;
  box-shadow:0 10px 24px rgba(68,88,135,.35);
  transition:transform .3s var(--ease),background-color .3s ease;
}
.mj-cta::after{content:"";position:absolute;top:0;left:0;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:translateX(-130%) skewX(-18deg);animation:mjSheen 4.2s ease-in-out 2s infinite;}
.mj-cta:hover{background:var(--blue-deep);transform:translateY(-2px);}
.mj-cta:active{transform:scale(.97);}
.mj-cta-main{position:relative;font-weight:700;font-size:clamp(15px,4.2vw,16.5px);letter-spacing:.06em;line-height:1.4;white-space:nowrap;}
.mj-cta-sub{position:relative;margin-top:2px;font-family:var(--f-label);font-size:11px;opacity:.92;}
.mj-cta-wrap{margin-top:34px;}
@keyframes mjSheen{0%{transform:translateX(-130%) skewX(-18deg);}28%,100%{transform:translateX(260%) skewX(-18deg);}}

/* ---------------------------------------------------------------------
   章の器・段階リビール見出し
   --------------------------------------------------------------------- */
.mj-sec{position:relative;padding:64px 24px 72px;}
.mj-sec--white{background:var(--white);}
.mj-sec--paper{background:var(--paper);}
.mj-sec--beige{background:var(--beige);}
.mj-narrow{max-width:540px;margin-inline:auto;}

.mj-head{position:relative;text-align:center;margin-bottom:36px;}
.mj-head-label{font-family:var(--f-label);font-size:10.5px;letter-spacing:.36em;text-transform:uppercase;color:var(--gold-text);}
.mj-head-en{margin-top:10px;overflow:hidden;font-family:var(--f-disp);font-style:italic;font-weight:500;font-size:clamp(34px,9vw,56px);line-height:1.06;letter-spacing:.02em;color:var(--blue);}
.mj-head-en > span{display:inline-block;padding:0 .08em .06em;}
.mj-head-note{margin-top:4px;font-family:var(--f-label);font-size:11px;letter-spacing:.08em;color:var(--ink-soft);}
.mj-head-rule{display:block;width:9px;height:9px;margin:16px auto;border:1px solid var(--gold);transform:rotate(45deg);}
.mj-head-rule--light{border-color:var(--gold);}
.mj-head-ja{font-weight:500;font-size:clamp(14px,4vw,17px);letter-spacing:.14em;color:var(--ink-soft);}

.mj-body{margin-top:18px;font-size:clamp(12px,3.4vw,13.5px);line-height:2.1;color:var(--ink-soft);}
.mj-minihead{margin:40px 0 16px;text-align:center;font-weight:600;font-size:clamp(15px,4.4vw,18px);letter-spacing:.08em;color:var(--ink);}

/* 中抜きの斜体数字。画面に入ると金色で塗られる */
.mj-num{
  font-family:var(--f-disp);font-style:italic;font-size:46px;line-height:1;flex-shrink:0;
  color:transparent;-webkit-text-stroke:1px var(--gold);
  background:linear-gradient(90deg,var(--gold) 0 50%,transparent 50%) 100% 0/200% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;transition:background-position 1.2s var(--ease) .3s;
}
.mj-num--sm{font-size:30px;}
.mj-num--lg{font-size:60px;-webkit-text-stroke-color:var(--gold-light);}
[data-seen="1"] .mj-num,.mj-num[data-seen="1"]{background-position:0 0;}

/* 中央から開く写真 */
.mj-rimg{position:relative;overflow:hidden;border-radius:10px;background:var(--beige);}
.mj-rimg img{width:100%;height:100%;object-fit:cover;}
figure figcaption{margin-top:6px;text-align:center;font-family:var(--f-label);font-size:10.5px;letter-spacing:.06em;color:var(--ink-mute);}
.mj-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;}
.mj-grid2--tight{gap:8px;margin-top:8px;}
.mj-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px;}

/* ---------------------------------------------------------------------
   WHY：価値の帯と3つのポイント
   --------------------------------------------------------------------- */
.mj-values{max-width:540px;margin:0 auto 44px;padding:18px 16px;border-radius:14px;background:var(--white);border:1px solid var(--line);text-align:center;}
.mj-values-label{font-family:var(--f-label);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-text);}
.mj-values-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;}
.mj-values-list li{padding:10px 6px;border-radius:10px;background:var(--paper);}
.mj-values-list b{display:block;font-weight:600;font-size:14px;letter-spacing:.06em;color:var(--navy);}
.mj-values-list span{display:block;font-family:var(--f-disp);font-style:italic;font-size:14px;color:var(--blue);line-height:1.3;}

.mj-pillars{max-width:540px;margin:0 auto;display:flex;flex-direction:column;gap:56px;}
.mj-pillar-head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;}
.mj-pillar-label{font-family:var(--f-label);font-size:11px;letter-spacing:.14em;color:var(--gold-text);}
.mj-pillar-title{margin-top:2px;font-weight:600;font-size:clamp(19px,5.4vw,24px);line-height:1.5;letter-spacing:.04em;color:var(--ink);}
.mj-pillar > .mj-rimg{margin-top:0;}
.mj-proof{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;font-weight:600;font-size:13px;color:var(--navy);text-decoration:none;}
.mj-proof span{border-bottom:1px solid var(--gold-light);padding-bottom:3px;}
.mj-proof i{font-style:normal;transition:transform .3s var(--ease);}
.mj-proof:hover i{transform:translateY(3px);}

/* ---------------------------------------------------------------------
   インタールード（カラムの地を抜き、固定背景を覗かせる）
   --------------------------------------------------------------------- */
.mj-interlude{position:relative;min-height:62svh;display:flex;align-items:center;justify-content:center;padding:64px 24px;text-align:center;color:var(--navy);}
.mj-interlude-card{position:relative;max-width:420px;padding:32px 30px 34px;border-radius:18px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--gold-light);box-shadow:0 20px 50px rgba(38,51,74,.16);}
.mj-interlude-card::before{content:"";position:absolute;inset:8px;border:1px solid rgba(177,139,67,.28);border-radius:12px;pointer-events:none;}
.mj-interlude-en{font-family:var(--f-disp);font-style:italic;font-size:clamp(28px,7.4vw,44px);line-height:1.1;color:var(--gold-deep);}
.mj-interlude-ja{font-weight:600;font-size:clamp(17px,5vw,26px);line-height:1.9;letter-spacing:.14em;}
.mj-interlude-ja span{display:block;}

/* ---------------------------------------------------------------------
   SPECIAL OFFER
   --------------------------------------------------------------------- */
.mj-offer{text-align:center;overflow:hidden;}
.mj-offer-frame{position:absolute;inset:12px;border:1px solid var(--gold-light);border-radius:14px;pointer-events:none;}
.mj-offer-big{margin:0 auto 22px;padding:22px 16px 18px;max-width:420px;border-radius:16px;background:var(--blue-pale);}
.mj-offer-big-sm{font-weight:600;font-size:clamp(15px,4.4vw,18px);letter-spacing:.1em;color:var(--navy);}
.mj-offer-big-num{margin-top:2px;display:flex;align-items:baseline;justify-content:center;gap:4px;font-weight:700;font-size:18px;color:var(--navy);line-height:1;}
.mj-offer-big-num b{font-family:var(--f-disp);font-weight:500;font-size:clamp(76px,22vw,104px);color:var(--blue);font-variant-numeric:lining-nums tabular-nums;}
.mj-offer-big-num span{font-size:clamp(20px,5.6vw,26px);}
.mj-offer-list{display:flex;flex-direction:column;gap:10px;max-width:460px;margin:0 auto;}
.mj-offer-list li{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:12px;background:var(--white);border:1px solid var(--line);text-align:left;}
.mj-offer-list i{flex-shrink:0;width:7px;height:7px;background:var(--gold);transform:rotate(45deg);}
.mj-offer-list b{font-weight:700;font-size:clamp(14.5px,4.1vw,16.5px);color:var(--ink);}
.mj-conditions{max-width:460px;margin:16px auto 0;padding:12px 16px;border-radius:10px;background:var(--beige);text-align:left;}
.mj-conditions p{font-size:11px;letter-spacing:.1em;color:var(--ink-soft);}
.mj-conditions li{font-size:12px;line-height:1.95;color:var(--ink-soft);}
.mj-inline-link{color:var(--blue);text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px;}

/* ---------------------------------------------------------------------
   LOCATION：歴史建造物の横レール（スクロールで進捗バーが伸びる）
   --------------------------------------------------------------------- */
.mj-hrail-wrap{margin:26px -24px 0;}
.mj-hrail{display:flex;gap:12px;overflow-x:auto;padding:4px 24px 14px;scroll-snap-type:x mandatory;scroll-padding-inline:24px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-timeline:--mjrail x;}
.mj-hrail::-webkit-scrollbar{display:none;}
.mj-bldg{flex:0 0 auto;width:min(68vw,250px);scroll-snap-align:start;padding:10px 10px 16px;border-radius:14px;background:var(--white);border:1px solid var(--line);}
.mj-bldg-photo{aspect-ratio:4/3;overflow:hidden;border-radius:8px;background:var(--beige);}
.mj-bldg-photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.mj-bldg:hover .mj-bldg-photo img{transform:scale(1.05);}
.mj-bldg-meta{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:0 4px;}
.mj-bldg-years{font-family:var(--f-label);font-size:11px;color:var(--ink-soft);}
.mj-bldg-years b{font-family:var(--f-disp);font-style:italic;font-weight:500;font-size:30px;color:var(--gold-text);margin-right:2px;line-height:1;}
.mj-bldg-tag{font-family:var(--f-label);font-size:10px;padding:3px 8px;border-radius:999px;border:1px solid var(--gold-light);color:var(--gold-text);}
.mj-bldg-name{margin-top:4px;padding:0 4px;font-weight:600;font-size:15.5px;letter-spacing:.06em;color:var(--ink);}
.mj-bldg-note{margin-top:2px;padding:0 4px;font-size:12px;line-height:1.8;color:var(--ink-soft);}
.mj-hrail-bar{position:relative;height:2px;margin:4px 24px 0;background:var(--line);border-radius:2px;overflow:hidden;}
.mj-hrail-bar span{position:absolute;inset:0;background:linear-gradient(90deg,var(--gold),var(--blue));transform-origin:0 50%;transform:scaleX(.12);}

/* ---------------------------------------------------------------------
   CEREMONY
   --------------------------------------------------------------------- */
.mj-styles{display:flex;flex-direction:column;gap:10px;}
.mj-style{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-radius:12px;background:var(--paper);border:1px solid var(--line);}
.mj-style--photo{padding:0;overflow:hidden;align-items:stretch;}
.mj-style--photo > div:last-child{padding:16px 16px 16px 0;}
.mj-style-photo{flex:0 0 34%;min-height:130px;background:var(--beige);}
.mj-style-photo img{width:100%;height:100%;object-fit:cover;}
.mj-style-en{font-family:var(--f-disp);font-style:italic;font-size:17px;line-height:1.1;color:var(--blue);}
.mj-style-name{font-weight:600;font-size:16px;letter-spacing:.06em;color:var(--ink);}
.mj-style-meta{margin-top:2px;font-family:var(--f-label);font-size:12px;color:var(--gold-text);}
/* 収容人数は「2〜」と「100名」で割れないよう、挙式スタイルの下に1行で置く */
.mj-style-meta b{display:block;font-weight:600;white-space:nowrap;}
.mj-style-text{margin-top:4px;font-size:12.5px;line-height:1.85;color:var(--ink-soft);}

/* ---------------------------------------------------------------------
   BANQUET（口コミLPの「邸宅」の組み方）
   --------------------------------------------------------------------- */
.mj-venue + .mj-venue{margin-top:56px;}
.mj-venue-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px;}
.mj-venue-theme{font-family:var(--f-label);font-size:10.5px;letter-spacing:.14em;color:var(--gold-text);}
.mj-venue-en{margin-top:4px;font-family:var(--f-disp);font-style:italic;font-weight:500;font-size:clamp(34px,9vw,46px);line-height:1;color:var(--blue);}
.mj-venue-ja{margin-top:4px;font-weight:600;font-size:15px;letter-spacing:.1em;color:var(--ink);}
.mj-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;}
.mj-chips li{padding:5px 12px;border-radius:999px;background:var(--beige);font-weight:600;font-size:12px;color:var(--navy);}
.mj-venue-lead{margin-top:14px;font-weight:600;font-size:clamp(14px,4vw,15.5px);line-height:1.85;color:var(--navy);}
.mj-venue .mj-body{margin-top:8px;}
.mj-venue .mj-grid3{margin-top:14px;}

/* ---------------------------------------------------------------------
   HOTEL（白カード＋菱形）
   --------------------------------------------------------------------- */
.mj-cards{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.mj-cards li{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-radius:12px;background:var(--white);border:1px solid var(--line);}
.mj-cards i{flex-shrink:0;width:6px;height:6px;margin-top:10px;background:var(--blue);transform:rotate(45deg);}
.mj-cards b{display:block;font-weight:600;font-size:15px;letter-spacing:.04em;color:var(--ink);}
.mj-cards span{display:block;margin-top:2px;font-size:12.5px;line-height:1.85;color:var(--ink-soft);}

/* ---------------------------------------------------------------------
   CUISINE
   --------------------------------------------------------------------- */
.mj-card-box{margin-top:24px;padding:22px 18px;border-radius:14px;background:var(--white);border:1px solid var(--line);text-align:center;}
.mj-card-label{font-family:var(--f-label);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-text);}
.mj-card-title{margin-top:6px;font-weight:600;font-size:clamp(16px,4.6vw,19px);color:var(--ink);}
.mj-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px;}
.mj-pills li{padding:6px 16px;border-radius:999px;background:var(--blue-pale);font-family:var(--f-disp);font-weight:500;font-size:19px;color:var(--navy);font-variant-numeric:lining-nums;}
.mj-card-note{margin-top:12px;font-family:var(--f-label);font-size:11px;line-height:1.8;color:var(--ink-mute);}
.mj-points{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.mj-points li{display:flex;align-items:flex-start;gap:14px;padding:18px;border-radius:12px;background:var(--paper);border:1px solid var(--line);}
.mj-points h3{font-weight:600;font-size:15.5px;line-height:1.6;color:var(--ink);}
.mj-points .mj-ln{margin-top:4px;font-size:12.5px;line-height:2;color:var(--ink-soft);}
.mj-chef{margin-top:18px;padding:20px 18px;border-radius:14px;background:var(--beige);}
.mj-chef-name{margin-top:6px;font-weight:600;font-size:17px;letter-spacing:.1em;color:var(--ink);}
.mj-chef-profile{margin-top:6px;font-size:12.5px;line-height:2;color:var(--ink-soft);}

/* ---------------------------------------------------------------------
   DRESS
   --------------------------------------------------------------------- */
.mj-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
.mj-facts > div{padding:16px 10px;border-radius:12px;background:var(--white);border:1px solid var(--line);text-align:center;}
.mj-facts b{display:block;font-family:var(--f-jp);font-weight:700;font-size:clamp(22px,6.4vw,28px);line-height:1.2;color:var(--blue);}
.mj-facts small{font-size:12px;margin-left:2px;color:var(--navy);}
.mj-facts span{display:block;margin-top:4px;font-size:11.5px;line-height:1.7;color:var(--ink-soft);}

/* ---------------------------------------------------------------------
   FLOW（縦線は常時フル表示。スクロール連動で描かない）
   --------------------------------------------------------------------- */
.mj-flow{position:relative;}
.mj-flow::before{content:"";position:absolute;left:17px;top:18px;bottom:26px;width:1.5px;background:var(--gold);opacity:.45;}
.mj-flow li{position:relative;display:flex;gap:18px;align-items:flex-start;padding-bottom:22px;}
.mj-flow-no{position:relative;z-index:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--gold);background:#fff;font-family:var(--f-disp);font-style:italic;font-size:15px;color:var(--navy);box-shadow:0 4px 10px rgba(0,0,0,.07);}
.mj-flow-body{flex:1;min-width:0;padding:2px 0 18px;border-bottom:1px solid var(--line);}
.mj-flow-t{font-weight:600;font-size:15.5px;color:var(--ink);}
.mj-flow-d{margin-top:3px;font-size:12.5px;line-height:1.95;color:var(--ink-soft);}
.mj-flow-tip{margin-top:6px;padding:12px 16px;border-radius:10px;background:var(--blue-pale);font-size:12.5px;line-height:1.9;color:var(--navy);}

/* ---------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------- */
.mj-faq{display:flex;flex-direction:column;gap:10px;}
.mj-faq-item{overflow:hidden;border-radius:10px;background:#fff;border:1px solid var(--line);}
.mj-faq-q{appearance:none;width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:12px 18px;background:none;border:0;text-align:left;cursor:pointer;font-weight:600;font-size:14px;line-height:1.75;color:var(--navy);}
.mj-faq-q i{flex-shrink:0;font-style:normal;font-size:22px;color:var(--gold);transition:transform .35s var(--ease);}
.mj-faq-q[aria-expanded="true"] i{transform:rotate(45deg);}
.mj-faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease);}
.mj-faq-a[data-open="1"]{grid-template-rows:1fr;}
.mj-faq-a > p{overflow:hidden;padding:0 18px;font-size:13px;line-height:2.05;color:var(--ink-soft);}
.mj-faq-a[data-open="1"] > p{padding-bottom:16px;}

/* ---------------------------------------------------------------------
   RESERVATION
   --------------------------------------------------------------------- */
.mj-entry{position:relative;overflow:hidden;padding:64px 24px;text-align:center;}
.mj-entry-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 46%;}
.mj-entry-veil{position:absolute;inset:0;background:linear-gradient(165deg,rgba(255,255,255,.9),rgba(255,255,255,.95));}
.mj-entry-inner{position:relative;z-index:1;max-width:480px;margin:0 auto;}
.mj-entry-en{font-family:var(--f-disp);font-style:italic;font-size:clamp(30px,7.4vw,44px);color:var(--gold-text);}
.mj-entry-h2{margin-top:6px;font-weight:600;font-size:clamp(18px,5.2vw,25px);line-height:1.7;color:var(--ink);}
.mj-entry-h2 span{display:block;}
.mj-glass-light{background:rgba(255,255,255,.8);border:1px solid var(--gold-light);border-radius:16px;}
.mj-entry-offer{margin:22px auto 24px;padding:16px;}
.mj-entry-offer p:first-child{font-weight:600;font-size:15px;letter-spacing:.08em;color:var(--navy);}
.mj-entry-offer-main{font-weight:700;font-size:18px;color:var(--navy);line-height:1.2;}
.mj-entry-offer-main b{font-family:var(--f-disp);font-weight:500;font-size:54px;color:var(--blue);margin:0 2px;}
.mj-entry-offer-note{margin-top:4px;font-family:var(--f-label);font-size:11px;color:var(--ink-mute);}
.mj-entry-note{margin-top:12px;font-size:11.5px;line-height:1.9;color:var(--ink-soft);}
.mj-entry-tel{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-soft);}
.mj-entry-tel a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 12px;font-family:var(--f-disp);font-size:28px;letter-spacing:.06em;color:var(--navy);text-decoration:none;}

/* ---------------------------------------------------------------------
   FOOTER / STICKY
   --------------------------------------------------------------------- */
.mj-footer{padding:48px 28px calc(48px + 84px);text-align:center;background:var(--beige);border-top:1px solid var(--line);font-size:11.5px;line-height:1.9;color:var(--ink-soft);}
.mj-footer-logo{height:44px;width:auto;margin:0 auto;}
.mj-divider{display:flex;align-items:center;justify-content:center;gap:10px;margin:22px 0;}
.mj-divider span{width:46px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));}
.mj-divider span:last-child{background:linear-gradient(90deg,var(--gold),transparent);}
.mj-divider i{width:7px;height:7px;border:1px solid var(--gold);transform:rotate(45deg);}
.mj-divider b{width:4px;height:4px;background:var(--green);transform:rotate(45deg);}
.mj-footer-tel{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:4px;padding:0 12px;font-family:var(--f-disp);font-size:18px;letter-spacing:.08em;color:var(--navy);text-decoration:none;}
.mj-footer-link{display:flex;align-items:center;justify-content:center;min-height:44px;color:var(--blue);font-size:12px;}
.mj-footer-note{margin-top:12px;font-size:10.5px;color:var(--ink-mute);}

.mj-sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;transform:translateY(120%);transition:transform .5s var(--ease);padding-bottom:env(safe-area-inset-bottom);pointer-events:none;}
.mj-sticky.is-on{transform:translateY(0);}
.mj-sticky-inner{pointer-events:auto;max-width:var(--col);margin:0 auto;display:flex;gap:8px;justify-content:center;align-items:center;padding:12px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 -4px 24px rgba(0,0,0,.14);border-radius:18px 18px 0 0;}
.mj-sticky-tel{flex:1;max-width:120px;display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:999px;border:1.5px solid var(--navy);font-weight:700;font-size:14px;color:var(--navy);text-decoration:none;}
.mj-sticky-cta{position:relative;overflow:hidden;flex:1.8;max-width:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:52px;border-radius:999px;background:var(--blue);color:#fff;text-decoration:none;line-height:1.3;}
.mj-sticky-cta::after{content:"";position:absolute;top:0;left:0;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:translateX(-130%) skewX(-18deg);animation:mjSheen 4.2s ease-in-out 3s infinite;}
.mj-sticky-cta span{position:relative;font-weight:700;font-size:14.5px;}
.mj-sticky-cta small{position:relative;font-family:var(--f-label);font-size:10px;opacity:.92;}

/* =====================================================================
   入場（ベース：IntersectionObserver で1回だけ。未対応でも必ず最終状態に着地）
   ===================================================================== */
[data-rv]{opacity:0;transform:translate3d(0,24px,0);transition:opacity .9s var(--ease),transform 1s var(--ease);}
[data-rv][data-from="left"]{transform:translate3d(-26px,14px,0);}
[data-rv][data-from="right"]{transform:translate3d(26px,14px,0);}
[data-rv][data-seen="1"]{opacity:1;transform:none;}
.mj-pills [data-rv]{transition-delay:calc(var(--i,0) * 90ms);}

/* 見出しは段階的に：ラベル → 斜体の欧文がマスクからせり上がる → 菱形 → 注記・和文 */
.mj-head[data-rv]{opacity:1;transform:none;}
.mj-head-label{opacity:0;transform:translateY(8px);transition:opacity .7s ease,transform .7s ease;}
.mj-head-en > span{transform:translateY(115%);transition:transform 1s var(--ease-line) .08s;}
.mj-head-rule{transform:rotate(45deg) scale(0);transition:transform .6s ease .4s;}
.mj-head-note,.mj-head-ja{opacity:0;transform:translateY(8px);transition:opacity .7s ease .5s,transform .7s ease .5s;}
.mj-head[data-seen="1"] .mj-head-label,.mj-head[data-seen="1"] .mj-head-note,.mj-head[data-seen="1"] .mj-head-ja{opacity:1;transform:none;}
.mj-head[data-seen="1"] .mj-head-en > span{transform:none;}
.mj-head[data-seen="1"] .mj-head-rule{transform:rotate(45deg) scale(1);}
.mj-interlude-card[data-seen="1"] .mj-head-rule{transform:rotate(45deg) scale(1);}

/* 写真は中央から開き、拡大から等倍へ（opacityに頼らず clip-path で開くので確実に見える） */
.mj-rimg[data-rv]{opacity:1;transform:none;clip-path:inset(9% 11% 9% 11% round 10px);transition:clip-path 1.15s var(--ease) var(--rd,0s);}
.mj-rimg[data-rv] img{scale:1.16;transition:scale 1.6s var(--ease) var(--rd,0s);}
.mj-rimg[data-rv][data-seen="1"]{clip-path:inset(0 0 0 0 round 10px);}
.mj-rimg[data-rv][data-seen="1"] img{scale:1;}

/* =====================================================================
   上乗せ：スクロール連動（対応ブラウザ × 動きを許可している人だけ）
   範囲は「入り切ったら最終状態で固定」に留め、読める位置で途中状態が残らないようにする
   ===================================================================== */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .mj-progress{opacity:1;animation:mjProg linear both;animation-timeline:scroll(root);}
    @keyframes mjProg{to{transform:scaleX(1);}}

    /* FV：スクロールで写真がわずかに沈み、文字は先に上へ抜ける（初期表示は隠さない） */
    .mj-fv{view-timeline:--mjfv block;}
    .mj-fv-media{animation:mjFvMedia linear both;animation-timeline:--mjfv;animation-range:exit 0% exit 100%;}
    @keyframes mjFvMedia{to{transform:translateY(18%) scale(1.06);}}
    .mj-fv-copy,.mj-fv-bottom{animation:mjFvOut linear both;animation-timeline:--mjfv;animation-range:exit 0% exit 70%;}
    @keyframes mjFvOut{to{transform:translateY(-60px);opacity:0;}}

    /* 写真：開く動作をスクロール量に連動させ、開き切った後は内側の写真だけがゆっくり流れる（パララックス） */
    .mj-rimg[data-rv]{clip-path:inset(0 0 0 0 round 10px);transition:none;animation:mjClip linear both;animation-timeline:view();animation-range:entry 0% entry 60%;}
    @keyframes mjClip{from{clip-path:inset(10% 12% 10% 12% round 10px);}to{clip-path:inset(0 0 0 0 round 10px);}}
    .mj-rimg[data-rv] img{scale:1.14;transition:none;animation:mjPara linear both;animation-timeline:view();animation-range:cover 0% cover 100%;}
    @keyframes mjPara{from{translate:0 -5%;}to{translate:0 5%;}}

    /* インタールードのカードは、画面中央を通過するあいだだけ背景のぼかしが強まる */
    .mj-interlude-card{animation:mjCard linear both;animation-timeline:view();animation-range:entry 10% entry 80%;}
    @keyframes mjCard{from{-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);background-color:rgba(255,255,255,.5);}to{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:rgba(255,255,255,.8);}}

    /* 横レールの進捗バーは横スクロール量そのものに連動 */
    .mj-hrail-wrap{timeline-scope:--mjrail;}
    .mj-hrail-bar span{animation:mjRail linear both;animation-timeline:--mjrail;}
    @keyframes mjRail{from{transform:scaleX(.12);}to{transform:scaleX(1);}}
  }
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;transition-delay:0s !important;}
  [data-rv],.mj-head-label,.mj-head-note,.mj-head-ja,.mj-up,.mj-fv-place{opacity:1 !important;transform:none !important;}
  .mj-head-en > span,.mj-mask > span{transform:none !important;}
  .mj-head-rule{transform:rotate(45deg) scale(1) !important;}
  .mj-rimg[data-rv]{clip-path:none !important;}
  .mj-rimg[data-rv] img,.mj-fv-slide.is-on,.mj-strip-img{scale:1 !important;translate:none !important;transform:none !important;}
  .mj-num{background-position:0 0 !important;}
  .mj-grain,.mj-cta::after,.mj-sticky-cta::after{display:none !important;}
}

/* =====================================================================
   端末幅
   ===================================================================== */
@media (min-width:600px){
  .mj-sec{padding:84px 48px 92px;}
  .mj-values-list{grid-template-columns:repeat(4,1fr);}
  .mj-hrail-wrap{margin-inline:-48px;}
  .mj-hrail{padding-inline:48px;scroll-padding-inline:48px;}
  .mj-hrail-bar{margin-inline:48px;}
  .mj-entry{padding:88px 48px;}
}