/* ── ARiUYUNA LP — Shared Styles ── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500&family=Noto+Sans+JP:wght@300;400;500&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Josefin+Sans:wght@100;300;400&family=Italianno&display=swap');
@font-face{font-family:"Josefin Sans";font-style:normal;font-weight:100;src:url("fonts/JosefinSans-Light.ttf") format("truetype");}
@font-face{font-family:"Josefin Sans";font-style:normal;font-weight:400;src:url("fonts/JosefinSans-Regular.ttf") format("truetype");}

/* ── Tokens ── */
:root{
  --forest:#3F4F3A; --sage:#8FA28A; --sage-mist:#D5DBCB;
  --gold:#AA9479; --gold-soft:#C8B89E; --gold-dark:#8C7960;
  --ink:#3A3A36; --gray-deep:#7E7C76; --gray-mid:#C9C7C0;
  --white:#FFFFFF; --off-white:#F7F6F2; --cream:#ECEAE4;
  --natural:#E8E2D4; --dark:#272420;
  --jp-serif:"Noto Serif JP",serif;
  --jp-sans:"Noto Sans JP",sans-serif;
  --en-serif:"Cormorant Garamond",serif;
  --en-num:"Josefin Sans",sans-serif;
  --en-script:"Italianno",cursive;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{background:var(--white);color:var(--ink);font-family:var(--jp-sans);font-size:14px;line-height:1.7;letter-spacing:.1em;-webkit-font-smoothing:antialiased;max-width:390px;margin:0 auto;}

/* ── Crossfade ── */
/* 4 images: 5s display + 2s fade each = 7s per image, 28s total cycle */
/* Each image: fade-in 2s → hold 5s → fade-out 2s (overlap with next fade-in) */
@keyframes cf0{0%{opacity:1;transform:scale(1)}17.86%{opacity:1;transform:scale(1.05)}25%{opacity:0;transform:scale(1.05)}92.86%{opacity:0;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes cf1{0%{opacity:0;transform:scale(1)}17.86%{opacity:0;transform:scale(1)}25%{opacity:1;transform:scale(1)}42.86%{opacity:1;transform:scale(1.05)}50%{opacity:0;transform:scale(1.05)}100%{opacity:0;transform:scale(1)}}
@keyframes cf2{0%{opacity:0;transform:scale(1)}42.86%{opacity:0;transform:scale(1)}50%{opacity:1;transform:scale(1)}67.86%{opacity:1;transform:scale(1.05)}75%{opacity:0;transform:scale(1.05)}100%{opacity:0;transform:scale(1)}}
@keyframes cf3{0%{opacity:0;transform:scale(1)}67.86%{opacity:0;transform:scale(1)}75%{opacity:1;transform:scale(1)}92.86%{opacity:1;transform:scale(1.05)}100%{opacity:0;transform:scale(1.05)}}
.cfw{position:absolute;inset:0;}
.cfs{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;}
.cfs:nth-child(1){opacity:1;animation:cf0 28s ease-in-out infinite;}
.cfs:nth-child(2){animation:cf1 28s ease-in-out infinite;}
.cfs:nth-child(3){animation:cf2 28s ease-in-out infinite;}
.cfs:nth-child(4){animation:cf3 28s ease-in-out infinite;}

/* ── Shimmer lines ── */
@keyframes sh{0%{background-position:-200% 0}100%{background-position:200% 0}}
.shl{height:.8px;background:linear-gradient(90deg,transparent,var(--gold-soft) 30%,#E8DDD2 50%,var(--gold-soft) 70%,transparent);background-size:200% 100%;animation:sh 3.5s ease-in-out infinite;}

/* ── Marquee ── */
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-t{display:inline-flex;white-space:nowrap;animation:mq 18s linear infinite;}

/* ── Scroll reveal ── */
@keyframes fadeup{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);}
.reveal.visible{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;}.reveal.d2{transition-delay:.18s;}.reveal.d3{transition-delay:.3s;}.reveal.d4{transition-delay:.44s;}.reveal.d5{transition-delay:.58s;}

/* ── LINE pulse ── */
@keyframes lp{0%,100%{box-shadow:0 5px 18px rgba(63,79,58,.24)}50%{box-shadow:0 8px 30px rgba(63,79,58,.44)}}

/* ── Section label ── */
.sec-label{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:20px;}
.sec-label::before,.sec-label::after{content:"";flex:1;height:.8px;background:var(--gold-soft);opacity:.6;}
.sec-label span{font-family:var(--en-serif);font-style:italic;font-size:10px;color:var(--gold);letter-spacing:.28em;white-space:nowrap;}

/* ── Typography ── */
.t-display{font-family:var(--jp-serif);font-weight:200;font-size:26px;letter-spacing:.22em;line-height:1.9;color:var(--ink);}
.t-h2{font-family:var(--jp-serif);font-weight:300;font-size:20px;letter-spacing:.2em;line-height:1.7;color:var(--ink);}
.t-h3{font-family:var(--jp-serif);font-weight:300;font-size:16px;letter-spacing:.18em;line-height:1.7;}
.t-body{font-family:var(--jp-sans);font-size:13.5px;font-weight:300;letter-spacing:.15em;line-height:1.95;color:var(--gray-deep);}
.t-caption{font-size:10px;letter-spacing:.14em;color:var(--gray-mid);}
.t-en{font-family:var(--en-serif);font-style:italic;letter-spacing:.2em;}
.t-num{font-family:var(--en-num);font-weight:100;letter-spacing:.02em;}

/* ── LINE button ── */
.btn-line{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;background:var(--forest);color:#fff;font-family:var(--jp-sans);font-weight:400;font-size:13px;letter-spacing:.2em;border:none;cursor:pointer;border-radius:2px;animation:lp 3s ease-in-out infinite;}
.btn-line:hover{background:#2E3C29;}
.btn-line svg{width:16px;height:16px;flex-shrink:0;}

/* ── Gold hairline ── */
.gold-rule{height:.8px;background:linear-gradient(to right,transparent,var(--gold-soft),transparent);margin:16px 0;}

/* ── FAQ accordion ── */
details.faq-item{border-bottom:1px solid var(--cream);}
details.faq-item summary{display:flex;align-items:center;justify-content:space-between;padding:16px 0;cursor:pointer;list-style:none;font-family:var(--jp-serif);font-weight:300;font-size:13.5px;color:var(--ink);letter-spacing:.15em;line-height:1.65;}
details.faq-item summary::-webkit-details-marker{display:none;}
details.faq-item summary .q{color:var(--gold);font-family:var(--en-serif);font-style:italic;font-size:18px;margin-right:12px;flex-shrink:0;}
details.faq-item summary .plus{font-size:20px;font-weight:200;color:var(--gold);flex-shrink:0;transition:transform .25s;}
details.faq-item[open] summary .plus{transform:rotate(45deg);}
details.faq-item .ans{padding:0 0 16px 30px;font-family:var(--jp-sans);font-size:13px;font-weight:300;color:var(--gray-deep);letter-spacing:.13em;line-height:1.9;}

/* ── Image placeholders ── */
.img-ph{background:linear-gradient(135deg,var(--cream) 0%,var(--natural) 100%);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;}
.img-ph img{width:100%;height:100%;object-fit:cover;}
.img-ph .ph-label{font-family:var(--en-serif);font-style:italic;font-size:11px;color:var(--gold-soft);letter-spacing:.2em;}

/* ── Step timeline ── */
.flow-item{display:flex;gap:16px;padding-bottom:28px;position:relative;}
.flow-item:not(:last-child)::before{content:"";position:absolute;left:15px;top:32px;bottom:0;width:1px;background:linear-gradient(to bottom,var(--gold-soft),rgba(200,184,158,.2));}
.flow-dot{width:32px;height:32px;border-radius:50%;border:1px solid var(--gold-soft);background:var(--off-white);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--en-serif);font-style:italic;font-size:11px;color:var(--gold);}

/* ── Sticky CTA bar ── */
#sticky-cta{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);width:calc(100vw - 12px);max-width:440px;z-index:100;background:transparent;border:none;box-shadow:none;border-radius:0;overflow:visible;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .35s ease;}
#sticky-cta.hidden{transform:translateX(-50%) translateY(calc(100% + 24px));opacity:0;pointer-events:none;}
#sticky-cta a{display:block;}
#sticky-cta img{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 18px rgba(63,79,58,.22));}

/* ── Menu card ── */
.menu-card{border:1px solid rgba(200,184,158,.4);padding:18px 16px 14px;margin-bottom:10px;position:relative;}
.menu-card.featured{border-color:var(--gold);background:linear-gradient(135deg,rgba(200,184,158,.06),rgba(200,184,158,.02));}
.menu-card.featured::before{content:"おすすめ";position:absolute;top:-1px;right:14px;background:var(--gold);color:#fff;font-size:9px;letter-spacing:.16em;padding:3px 10px;font-family:var(--jp-sans);}

/* ── Voice card ── */
.voice-card{background:var(--off-white);padding:18px;border-radius:0;margin-bottom:12px;}

/* ── WHAT IS AKASURI - 背景・テキスト位置ともに完全固定（スクロール連動なし） ── */
.wa-section{position:relative;background:var(--ink);overflow:hidden;}
.wa-stage{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;z-index:0;}
.wa-layer{position:absolute;inset:0;background-size:cover;background-position:center;will-change:auto;filter:brightness(.58) saturate(.85);}
.wa-layer.is-active{opacity:1;}
.wa-overlay{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(0,0,0,.15) 0%,rgba(0,0,0,.55) 75%,rgba(0,0,0,.85) 100%);pointer-events:none;z-index:2;}
.wa-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(63,79,58,.05) 0%,rgba(20,30,40,.18) 50%,rgba(0,0,0,.45) 100%);pointer-events:none;mix-blend-mode:multiply;z-index:1;}

/* Scenes - 通常フロー配置（margin-topの引き上げなし） */
.wa-scenes{position:relative;z-index:4;}
.wa-scene{position:relative;}
.wa-scene-1{display:flex;flex-direction:column;justify-content:flex-end;padding:88px 28px 56px;}
.wa-scene-2{display:flex;flex-direction:column;justify-content:flex-start;padding:24px 28px 88px;}

.wa-scene-top-label{display:flex;align-items:center;gap:10px;margin-bottom:28px;}

@media (min-width: 768px){
  .wa-scene-1{padding:96px 28px 56px;}
  .wa-scene-2{padding:32px 28px 96px;}
}

/* ── HERO 固定レイアウト構成（モバイルファースト） ── */
.hero-fit{position:relative;width:100%;display:flex;flex-direction:column;background:var(--off-white);overflow:hidden;box-sizing:border-box;}
.hero-fit::before{content:"";position:absolute;top:0;right:-40px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(213,219,203,.55) 0%,transparent 68%);z-index:1;pointer-events:none;}
.hero-fit .hf-image{position:relative;width:100%;height:280px;overflow:hidden;flex-shrink:0;}
.hero-fit .hf-image::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(247,246,242,0) 55%,rgba(247,246,242,1) 100%);pointer-events:none;z-index:2;}
.hero-fit .hf-body{display:flex;flex-direction:column;align-items:center;padding:18px 24px 28px;position:relative;z-index:2;margin-top:-12px;}
.hero-fit .hf-logo{width:160px;display:block;}
.hero-fit .hf-eyebrow{margin-top:6px;display:flex;align-items:center;gap:8px;}
.hero-fit .hf-eyebrow .line{width:14px;height:.8px;background:var(--gold);}
.hero-fit .hf-eyebrow .text{font-family:var(--en-serif);font-style:italic;font-size:10px;color:var(--gold);letter-spacing:.2em;}
.hero-fit .hf-divider{width:22px;height:.8px;background:var(--gold);margin:10px auto;}
.hero-fit .hf-catch{text-align:center;font-family:var(--jp-serif);font-weight:200;font-size:26px;letter-spacing:.22em;line-height:1.55;color:var(--ink);padding-left:.7em;}
.hero-fit .hf-sub{margin-top:18px;text-align:center;font-family:var(--jp-sans);font-size:11px;font-weight:300;letter-spacing:.14em;line-height:1.7;color:var(--gray-deep);}
.hero-fit .hf-footer{border-top:1px solid rgba(200,184,158,.28);padding:14px 20px 22px;background:var(--off-white);}
.hero-fit .hf-tags{display:flex;align-items:center;justify-content:center;}
.hero-fit .hf-tags span{font-family:var(--jp-serif);font-size:11px;font-weight:300;color:var(--ink);letter-spacing:.14em;}
.hero-fit .hf-tags .sep{width:.8px;height:14px;background:var(--gold-soft);margin:0 12px;}
.hero-fit .hf-shl{margin:7px 0;}
.hero-fit .hf-preopen{text-align:center;}
.hero-fit .hf-preopen .label{font-family:var(--en-serif);font-style:italic;font-size:11px;color:var(--ink);letter-spacing:.26em;}
.hero-fit .hf-preopen .date{font-family:var(--en-num);font-size:14px;color:var(--gold);letter-spacing:.17em;margin-top:3px;}
.hero-fit .hf-preopen .city{font-family:var(--en-serif);font-style:italic;font-size:9px;color:var(--sage);letter-spacing:.2em;margin-top:1px;}

/* ── Gold gradient divider ── */
.gold-divider{height:2px;background:linear-gradient(to right,transparent,var(--gold-soft) 25%,#E8DDD2 50%,var(--gold-soft) 75%,transparent);}

/* ── BENEFITS card (REFRAME section) ── */
.bnf-row{display:flex;align-items:stretch;border-top:1px solid rgba(200,184,158,.2);}
.bnf-text{flex:1;position:relative;display:flex;flex-direction:column;justify-content:center;padding:22px 16px 22px 24px;}
.bnf-text.right{padding:22px 22px 22px 16px;}
.bnf-num{font-family:var(--en-serif);font-style:italic;font-size:72px;font-weight:300;color:rgba(200,184,158,.18);line-height:1;position:absolute;top:10px;letter-spacing:-.01em;}
.bnf-num.left{left:18px;} .bnf-num.right{right:14px;}
.bnf-body{position:relative;z-index:1;padding-top:38px;}
.bnf-title{font-family:var(--jp-serif);font-weight:300;font-size:15.5px;color:var(--ink);letter-spacing:.17em;line-height:1.75;margin-bottom:8px;}
.bnf-img{width:166px;flex-shrink:0;background-size:cover;background-position:center;min-height:220px;}

/* ── Accessibility ── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}