:root{
  --ivory:#FAF7F5;
  --band:#EFE8E2;
  --ink:#2B2523;
  --gold:#B39260;
  --muted:#8C817A;
  --line:#E4DDD5;
  --white:#fff;
  --col:560px;
  --mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --gothic:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  --serif-en:"Cormorant Garamond","Times New Roman",serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--gothic);font-weight:300;font-size:16px;line-height:1.9;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,.title{word-break:auto-phrase;text-wrap:balance;line-break:strict;font-weight:400;margin:0}

.page{max-width:var(--col);margin:0 auto;background:var(--ivory)}
@media (min-width:768px){
  body{background:#F3EEEA}
  .page{box-shadow:0 0 60px rgba(43,37,35,.06)}
}

/* 読み上げ用テキスト（画像の文字と同じ内容） */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.sec{position:relative}
.art{position:relative}
.art img{width:100%}
.hotspot{position:absolute;display:block;border-radius:4px;font-size:0;color:transparent}
.hotspot:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* HTMLで組むセクション */
.sec--html{padding-bottom:72px}
.photo{margin:0}
.photo--wide img{width:100%;aspect-ratio:3/2;object-fit:cover}
.inner{padding:0 8%}
.eyebrow{display:flex;align-items:center;gap:16px;margin:40px 0 6px;font-family:var(--serif-en);font-weight:400;font-size:15px;letter-spacing:.42em;color:var(--gold)}
.eyebrow::before{content:"";width:44px;height:1px;background:var(--gold)}
.title{font-family:var(--mincho);font-size:clamp(28px,7.4vw,38px);line-height:1.5;letter-spacing:.06em;margin-bottom:28px}

.price{border-top:1px solid var(--line)}
.price__row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0;padding:20px 0;border-bottom:1px solid var(--line)}
.price__row dt{font-family:var(--mincho);font-size:17px;line-height:1.6}
.price__sub{display:block;font-family:var(--gothic);font-size:13px;color:var(--muted);margin-top:2px}
.price__row dd{margin:0;font-variant-numeric:lining-nums;font-family:var(--serif-en);font-size:22px;white-space:nowrap;color:var(--ink)}
.price__row--main dt{font-size:19px}
.price__row--main dd{font-size:28px;color:var(--gold)}
.note{font-size:13px;color:var(--muted);line-height:1.8;margin:18px 0 0}

.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__h{margin:0;font-size:inherit}
.faq__btn{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:flex;gap:14px;align-items:flex-start;min-height:44px;padding:20px 30px 20px 0;position:relative;font-family:var(--mincho);font-size:17px;line-height:1.7;color:var(--ink)}
.faq__btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.faq__btn::after{content:"";position:absolute;right:6px;top:30px;width:9px;height:9px;border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);transform:rotate(45deg);transition:transform .3s var(--ease),top .3s var(--ease)}
.faq__btn[aria-expanded="true"]::after{transform:rotate(-135deg);top:34px}
.faq__q,.faq__a>span{font-family:var(--serif-en);font-size:22px;line-height:1.2;color:var(--gold);flex:0 0 auto;width:20px}
.faq__a{display:flex;gap:14px;padding:0 0 22px}
.faq__a p{margin:0;font-size:15px;color:#4a413d}

/* CTA：流れのカルーセル */
.flow{background:var(--band);padding:26px 0 30px;margin-top:-1px}
.flow__head{display:flex;justify-content:space-between;align-items:center;padding:0 6%;margin-bottom:16px}
.flow__label{margin:0;font-size:14px;letter-spacing:.25em;color:var(--muted)}
.flow__nav{display:flex;gap:10px}
.flow__btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--gold);background:transparent;color:var(--ink);font-size:16px;cursor:pointer;transition:background .3s var(--ease),opacity .3s}
.flow__btn:hover{background:rgba(179,146,96,.12)}
.flow__btn:disabled{opacity:.3;cursor:default}
.flow__track{list-style:none;margin:0;padding:0 6%;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:6%;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.flow__track::-webkit-scrollbar{display:none}
.flow__track::after{content:"";flex:0 0 1px}
.card{flex:0 0 62%;scroll-snap-align:start;background:var(--white);border-radius:4px;overflow:hidden}
.card img{width:100%;aspect-ratio:4/5;object-fit:cover}
.card__body{padding:16px 18px 20px;text-align:center}
.card__no{display:block;font-variant-numeric:lining-nums;font-family:var(--serif-en);font-size:24px;line-height:1;color:var(--gold);margin-bottom:8px}
.card h3{font-family:var(--gothic);font-weight:400;font-size:17px;letter-spacing:.06em;margin-bottom:4px}
.card p{margin:0;font-size:14px;color:var(--muted);line-height:1.7}
.flow__dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
.flow__dots i{width:6px;height:6px;border-radius:50%;background:#D6CBC0;transition:background .3s,transform .3s}
.flow__dots i.is-active{background:var(--gold);transform:scale(1.3)}

.cta{padding:40px 8% 48px;text-align:center}
.btn{display:flex;justify-content:center;align-items:center;gap:18px;min-height:64px;padding:16px 24px;background:var(--ink);color:var(--white);text-decoration:none;font-size:clamp(15px,4.2vw,19px);letter-spacing:.08em;white-space:nowrap;border-radius:3px;transition:background .3s var(--ease),transform .3s var(--ease)}
.btn:hover{background:#463c38}
.btn__arrow{font-family:var(--serif-en);font-size:1.2em;transition:transform .3s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}
.cta__note{font-size:14px;color:var(--muted);margin:14px 0 0}
.todo{font-size:12px;color:#b0675a;margin:6px 0 0}
.cta__logo{font-size:34px;margin:40px auto 0}

.footer{max-width:var(--col);margin:0 auto;padding:36px 8% 110px;background:var(--ink);color:#d9d0c8;text-align:center}
.footer__logo{font-size:24px;margin:0 auto 18px}
.footer__info{font-size:12px;margin:0 0 12px}
.footer__copy{margin:0;font-size:12px;color:#9c918a}

/* スマホの追従ボタン（FVのボタンが見えなくなったら出す） */
.sticky{position:fixed;left:50%;bottom:14px;z-index:10;transform:translate(-50%,140%);width:min(92vw,520px);display:flex;justify-content:center;align-items:center;gap:14px;min-height:54px;background:var(--ink);color:#fff;text-decoration:none;font-size:15px;letter-spacing:.12em;border-radius:3px;box-shadow:0 8px 24px rgba(43,37,35,.18);transition:transform .45s var(--ease);pointer-events:none}
.sticky.is-show{transform:translate(-50%,0);pointer-events:auto}

/* =========================================================
   モーション（ゆっくり・静かに。上品さを優先して、跳ねる動きは使わない）
   ========================================================= */
:root{--slow:cubic-bezier(.16,1,.3,1)}

/* 共通：ふわっと出る */
[data-reveal]{transition:opacity 1.1s var(--slow),transform 1.1s var(--slow),filter 1.1s var(--slow)}
.js [data-reveal]:not(.is-inview){opacity:0;transform:translateY(18px)}

/* 01 FV：読み込み時にゆっくり引いて、光が一度だけ横切る */
.art--fv{overflow:hidden}
.js .art--fv img{animation:fvIn 2.8s var(--slow) both}
.js .art--fv::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,250,240,.38) 50%,transparent 62%);
  transform:translateX(-110%);animation:sweep 2.2s var(--ease) 1.3s both}
@keyframes fvIn{from{opacity:0;transform:scale(1.07)}to{opacity:1;transform:none}}
@keyframes sweep{to{transform:translateX(110%)}}

/* 画像のボタンに重ねたリンク：光がときどき横切る */
.hotspot{overflow:hidden}
.js .hotspot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-110%);animation:shine 5.5s var(--ease) 3s infinite}
@keyframes shine{0%{transform:translateX(-110%)}28%,100%{transform:translateX(110%)}}

/* 02〜05・CTA上部：上から幕が開くように現れ、写真がわずかに引く
   （幕は中の見出し要素に掛ける。外側は画面に入ったかの判定に使うので隠さない） */
.js .art[data-reveal]:not(.is-inview){opacity:1;transform:none}
.js .art[data-reveal] .art__h{overflow:hidden;clip-path:inset(0 0 0 0);transition:clip-path 1.6s var(--slow)}
.js .art[data-reveal]:not(.is-inview) .art__h{clip-path:inset(0 0 100% 0)}
.art[data-reveal] img{transition:transform 2.4s var(--slow)}
.js .art[data-reveal]:not(.is-inview) img{transform:scale(1.06)}

/* 料金・Q&Aの横長写真：横に開く */
.photo[data-reveal]{overflow:hidden}
.js .photo[data-reveal]:not(.is-inview){opacity:1;transform:none}
.js .photo[data-reveal] img{clip-path:inset(0 0 0 0);transition:clip-path 1.5s var(--slow),transform 2.4s var(--slow)}
.js .photo[data-reveal]:not(.is-inview) img{clip-path:inset(0 0 0 100%);transform:scale(1.08)}

/* 英字ラベル：金の線が伸びてから文字 */
.eyebrow::before{transform-origin:left;transition:transform 1s var(--slow) .1s}
.js .eyebrow:not(.is-inview)::before{transform:scaleX(0)}
.js .eyebrow[data-reveal]:not(.is-inview){transform:translateX(-8px)}

/* 見出し：にじみから現れる */
.js .title[data-reveal]{transition-delay:.15s}
.js .title[data-reveal]:not(.is-inview){filter:blur(6px);transform:translateY(10px)}

/* 料金の行：上から順に */
.price__row{transition:opacity .9s var(--slow),transform .9s var(--slow)}
.js .price[data-reveal]:not(.is-inview){opacity:1;transform:none}
.js .price:not(.is-inview) .price__row{opacity:0;transform:translateY(12px)}
.price__row:nth-child(2){transition-delay:.12s}
.price__row:nth-child(3){transition-delay:.24s}
.price__row:nth-child(4){transition-delay:.36s}

/* Q&A：項目が順に。開閉は main.js で高さをなめらかに */
.faq__item:nth-child(2){transition-delay:.08s}
.faq__item:nth-child(3){transition-delay:.16s}
.faq__item:nth-child(4){transition-delay:.24s}
.faq__item:nth-child(5){transition-delay:.32s}
.faq__a{overflow:hidden}
.faq__a[hidden]{display:none}
.faq__btn .faq__text{transition:color .3s}
.faq__btn:hover .faq__text{color:#6b5a4c}

/* カルーセル：カードが右から順に入り、続きがあることを小さく揺れて知らせる */
.js .flow[data-reveal]:not(.is-inview){opacity:1;transform:none}
.card{transition:opacity 1s var(--slow),transform 1s var(--slow)}
.js .flow:not(.is-inview) .card{opacity:0;transform:translateX(36px)}
.card:nth-child(2){transition-delay:.1s}
.card:nth-child(3){transition-delay:.2s}
.card:nth-child(4){transition-delay:.3s}
.card:nth-child(5){transition-delay:.4s}
.flow.is-inview .flow__track{animation:nudge 1.4s var(--ease) 1.5s both}
@keyframes nudge{0%,100%{transform:none}45%{transform:translateX(-26px)}}
.card img{transition:transform 1.2s var(--slow)}
@media (hover:hover){.card:hover img{transform:scale(1.04)}}

/* 予約ボタン：光がときどき横切る。ロゴは少し遅れて */
.btn{position:relative;overflow:hidden}
.sticky{overflow:hidden}
.btn::after,.sticky::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.16) 50%,transparent 70%);
  transform:translateX(-110%);animation:shine 6s var(--ease) 1s infinite}
.btn:hover{transform:translateY(-1px)}
.cta__logo{transition:opacity 1.4s var(--slow) .5s}
.js .cta:not(.is-inview) .cta__logo{opacity:0}

/* 動きを減らす設定の人：すべて止めて、最初から表示 */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;transition-delay:0s!important;animation:none!important}
}
.reduce-motion [data-reveal],.reduce-motion [data-reveal] *{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
.reduce-motion .art--fv::after,.reduce-motion .hotspot::after,.reduce-motion .btn::after,.reduce-motion .sticky::after{display:none}
.art__h{margin:0;font-size:inherit}

/* FV 縦書きの見出し（HTML）。位置は 01-fv.png の元の文字に合わせて % で置く */
.art--fv{container-type:inline-size}
.fv__h{position:absolute;inset:0;margin:0;pointer-events:none;font-family:var(--mincho);font-weight:400;color:#3a3230;font-size:7.6cqw;line-height:1}
.fv__col{position:absolute;top:8.6%;writing-mode:vertical-rl;text-orientation:upright;white-space:nowrap;letter-spacing:.235em}
.fv__col--1{left:79.8%}
.fv__col--2{left:68.0%}
.fv__c{display:inline-block}
.js .fv__c{animation:charIn 1.3s var(--slow) both;animation-delay:calc(.9s + var(--i) * .13s)}
@keyframes charIn{from{opacity:0;transform:translateY(-.35em);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@media (prefers-reduced-motion:reduce){.fv__c{animation:none!important}}
.reduce-motion .fv__c{animation:none!important;opacity:1!important}

/* ロゴ（眉のマーク＋Artmake）。大きさは font-size で決まる */
.logo{display:flex;flex-direction:column;align-items:center;width:max-content;color:var(--ink);line-height:1;font-family:var(--serif-en)}
.logo__mark{width:2.4em;height:.528em;color:var(--gold);margin:0 0 .12em .5em}
.logo__name{font-style:italic;font-weight:300;font-size:1.25em;letter-spacing:.08em;margin-right:-.08em}
.logo__sub{white-space:nowrap;font-size:.2em;letter-spacing:.42em;margin-right:-.42em;color:var(--muted);margin-top:.9em}
.logo--dark{color:#EFE8E2}.logo--dark .logo__sub{color:var(--gold)}

/* FV のロゴ：見出しのあとに、眉が左から描かれてから文字が出る */
.fv__logo{position:absolute;left:50%;top:76.4%;transform:translateX(-50%);margin:0;font-size:8.2cqw;pointer-events:none}
.js .fv__logo .logo__mark{animation:browDraw 1.6s var(--slow) 2.3s both}
.js .fv__logo .logo__name,.js .fv__logo .logo__sub{animation:fadeUp 1.4s var(--slow) 2.7s both}
.js .fv__logo .logo__sub{animation-delay:2.95s}
@keyframes browDraw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(.25em)}to{opacity:1;transform:none}}
.reduce-motion .fv__logo *{animation:none!important;opacity:1!important;clip-path:none!important}