/* ルミエール ティザー（2026-10-02）— 方向D「灯りの手帖」(mock/direction-d.html) から切り出し。
 見た目の正本は mock 側。ここで色や部品を足したら mock にも戻す。 */
:root{
  --paper:#F3EADB;      /* 生成りの紙 */
  --paper-2:#EBDDC6;    /* 少し濃い紙（帯） */
  --panel:#FBF7F0;      /* 上に重ねる紙 */
  --ink:#5A4535;        /* ココアの墨 */
  --ink-soft:#86705E;
  --gold:#C8A24E;       /* ロゴの金を紙の上で読める濃さに */
  --gold-light:#E6CA73; /* ロゴの金そのもの */
  --berry:#B0584A;      /* 差し色は小物だけ（旗・スタンプ） */
  --cocoa:#6B5243;      /* 濃い帯 */
  --line-green:#06C755;

  --font-body:"Zen Kaku Gothic New",-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --font-hand:"Klee One","Zen Kaku Gothic New",sans-serif;
  --font-script:"Sacramento",cursive;
  --font-display:"Fraunces",Georgia,serif;

  --container:1040px;
  --paper-tex:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .27  0 0 0 0 .2  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper) var(--paper-tex);
  color:var(--ink);font-family:var(--font-body);
  line-height:1.85;letter-spacing:.06em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,p{margin:0;}
.wrap{max-width:var(--container);margin:0 auto;padding:0 20px;}


/* ---------- 見出しの組（筆記体＋手書き日本語） ---------- */
.ttl{text-align:center;position:relative;}
.ttl .en{
  font-family:var(--font-display);font-variation-settings:"SOFT" 100,"WONK" 1;
  font-weight:500;font-size:40px;line-height:1.1;letter-spacing:.06em;color:var(--ink);
}
.ttl .script{
  font-family:var(--font-script);font-size:46px;line-height:1;color:var(--gold);
  display:inline-block;letter-spacing:0;
}
.ttl .ja{font-family:var(--font-hand);font-size:15px;color:var(--ink-soft);margin-top:10px;display:block;letter-spacing:.12em;}
/* 手で書き足したような下線（スクロールで描かれる） */
.swash{display:block;margin:6px auto 0;width:150px;height:18px;overflow:visible;}
.swash path{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.4s cubic-bezier(.6,.1,.3,1) .3s;}
.is-in .swash path,.swash.is-in path{stroke-dashoffset:0;}


/* ---------- 手描きの線（揺らぎフィルタ） ---------- */
.rough{filter:url(#rough);}


/* ---------- 破れ紙の縁 ---------- */
.torn{display:block;width:100%;height:18px;}
.torn path{fill:currentColor;}


/* ---------- ボタン（タグ形・旗形） ---------- */
.tag-btn{
  --bg:var(--ink);--fg:#fff;
  position:relative;display:inline-flex;align-items:center;gap:10px;
  min-height:54px;padding:0 34px 0 26px;background:var(--bg);color:var(--fg);
  font-weight:700;font-size:15px;letter-spacing:.1em;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%);
  transition:transform .35s cubic-bezier(.3,1.6,.5,1),background .3s;
}
.tag-btn:hover{transform:translateX(4px) rotate(-1deg);}
.tag-btn.line{--bg:var(--line-green);}
.tag-btn.line:hover{--bg:#05b04b;}
.tag-btn .ico{width:22px;height:22px;flex:0 0 22px;}
.tag-btn.ghost{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);clip-path:none;border-radius:2px;padding:0 26px;}


/* ---------- 灯りの花綱 ---------- */
.garland{position:absolute;left:0;right:0;top:0;height:120px;pointer-events:none;z-index:3;}
.garland svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.garland .wire{fill:none;stroke:var(--ink);stroke-width:1.2;opacity:.55;}
.bulb{position:absolute;width:12px;height:17px;margin-left:-6px;transform-origin:50% 0;animation:sway 4.2s ease-in-out infinite;}
.bulb::before{content:"";position:absolute;left:3px;top:0;width:6px;height:5px;background:var(--ink);opacity:.7;border-radius:1px;}
.bulb::after{
  content:"";position:absolute;left:0;top:4px;width:12px;height:13px;border-radius:50% 50% 50% 50%/40% 40% 60% 60%;
  background:radial-gradient(circle at 40% 35%,#fffbe8 0 25%,var(--gold-light) 60%,#d9b55a 100%);
  box-shadow:0 0 14px 4px rgba(230,202,115,.55);
  animation:glow 2.8s ease-in-out infinite;animation-delay:inherit;
}
@keyframes sway{0%,100%{transform:rotate(-7deg);}50%{transform:rotate(7deg);}}
@keyframes glow{0%,100%{opacity:1;box-shadow:0 0 16px 5px rgba(230,202,115,.6);}50%{opacity:.62;box-shadow:0 0 6px 1px rgba(230,202,115,.25);}}


/* ---------- きらめき ---------- */
.spark{position:absolute;width:14px;height:14px;color:var(--gold);pointer-events:none;animation:twinkle 3.4s ease-in-out infinite;}
.spark svg{width:100%;height:100%;display:block;}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.6) rotate(0);}50%{opacity:1;transform:scale(1) rotate(45deg);}}


/* ---------- 1. ファーストビュー ---------- */
.hero{position:relative;padding:70px 0 40px;text-align:center;overflow:hidden;}
.orbit{position:relative;width:min(84vw,560px);aspect-ratio:1/1;margin:0 auto;}
.orbit .logo{position:absolute;left:50%;top:50%;width:27%;transform:translate(-50%,-50%);z-index:2;}
.orbit .logo img{width:100%;height:auto;}
.cake{position:absolute;width:30%;z-index:1;filter:drop-shadow(0 10px 10px rgba(90,69,53,.18));}
.cake img{width:100%;height:auto;animation:float 6s ease-in-out infinite;}
.cake:nth-child(odd) img{animation-duration:7.2s;}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1.5deg);}50%{transform:translateY(-9px) rotate(1.5deg);}}
/* 位置（円周上に6つ） */
.c1{left:35%;top:-2%;}
.c2{left:70%;top:16%;width:27%;}
.c3{left:70%;top:58%;}
.c4{left:36%;top:74%;width:28%;}
.c5{left:0%;top:57%;width:28%;}
.c6{left:1%;top:15%;width:27%;}
/* 登場：ひとつずつ、ぽんと置かれる */
.cake{opacity:0;transform:scale(.6) translateY(20px);animation:pop .9s cubic-bezier(.3,1.6,.5,1) forwards;}
.c1{animation-delay:.2s}.c2{animation-delay:.35s}.c3{animation-delay:.5s}.c4{animation-delay:.65s}.c5{animation-delay:.8s}.c6{animation-delay:.95s}
@keyframes pop{to{opacity:1;transform:none;}}
.orbit .logo{opacity:0;animation:fadein 1.2s ease 1.1s forwards;}
@keyframes fadein{to{opacity:1;}}
.orbit-ring{position:absolute;inset:17%;border-radius:50%;border:1.5px dashed rgba(200,162,78,.55);animation:spin 60s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.hero-script{
  font-family:var(--font-script);font-size:clamp(40px,11vw,68px);line-height:1.1;color:var(--gold);
  margin-top:6px;letter-spacing:0;
  clip-path:inset(0 100% 0 0);animation:write 2.2s cubic-bezier(.5,0,.3,1) 1.6s forwards;
}
@keyframes write{to{clip-path:inset(0 0 0 0);}}
.hero-copy{font-family:var(--font-hand);font-size:clamp(20px,5.6vw,26px);line-height:1.7;margin-top:10px;letter-spacing:.14em;}
.hero-sub{font-size:14px;color:var(--ink-soft);margin-top:10px;}
.hero-actions{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:14px;margin-top:22px;}

/* オープン日のスタンプ */
.stamp{
  position:relative;width:118px;height:118px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--berry);transform:rotate(-12deg);
  opacity:0;animation:stamp .5s cubic-bezier(.2,1.8,.5,1) 3.3s forwards;
}
.stamp::before,.stamp::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid currentColor;}
.stamp::after{inset:6px;border-width:1px;}
.stamp .s1{font-family:var(--font-display);font-size:30px;line-height:1;font-weight:500;letter-spacing:.02em;}
.stamp .s2{font-size:10px;font-weight:700;letter-spacing:.3em;margin-top:4px;}
.stamp .s3{font-size:9.5px;letter-spacing:.1em;margin-top:2px;}
@keyframes stamp{0%{opacity:0;transform:rotate(-12deg) scale(1.8);}100%{opacity:.92;transform:rotate(-12deg) scale(1);}}


/* ---------- 2. 店の考え方（アーチの紙） ---------- */
.concept{position:relative;padding:40px 0 70px;}
.arch{
  position:relative;max-width:820px;margin:0 auto;background:var(--panel) var(--paper-tex);
  border-radius:50% 50% 0 0/140px 140px 0 0;padding:70px 26px 46px;text-align:center;
}
.arch-torn{color:var(--panel);max-width:820px;margin:-1px auto 0;}
.concept .ttl .script{font-size:52px;}
.concept-lead{font-family:var(--font-hand);font-size:clamp(19px,5vw,24px);color:var(--berry);margin-top:24px;letter-spacing:.14em;line-height:1.7;}
.concept-body{font-size:14.5px;margin-top:16px;line-height:2.1;}
.words{display:flex;justify-content:center;gap:18px;margin-top:26px;flex-wrap:wrap;}
.word{position:relative;font-size:13px;font-weight:700;letter-spacing:.14em;padding:6px 4px;}
.word svg{position:absolute;left:-10%;bottom:-2px;width:120%;height:10px;overflow:visible;}
.word path{fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;opacity:.45;}


/* ---------- 6. お店の場所 ---------- */
.access{padding:70px 0 70px;}
.access-grid{display:grid;gap:26px;margin-top:40px;}
.frame{position:relative;padding:14px;}
.frame::before{content:"";position:absolute;inset:0;border:1.5px solid var(--ink);opacity:.55;filter:url(#rough);border-radius:3px;}
.frame::after{content:"";position:absolute;inset:7px;border:1px solid var(--ink);opacity:.25;filter:url(#rough);}
.frame{background:linear-gradient(transparent,transparent);}
.map-wrap{position:relative;z-index:1;background:var(--paper-2);}
.map-wrap::before{content:"地図を読み込み中";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink-soft);}
.map{position:relative;z-index:1;display:block;aspect-ratio:4/3;width:100%;border:0;filter:sepia(.35) saturate(.8);}
.addr dt{font-size:11px;font-weight:700;letter-spacing:.3em;color:var(--gold);margin-top:18px;}
.addr dt:first-child{margin-top:0;}
.addr dd{margin:4px 0 0;font-size:15px;line-height:1.9;}
.addr a{border-bottom:1px solid currentColor;}


/* ---------- 7. 締め（LINE） ---------- */
.closing{position:relative;padding:40px 0 90px;text-align:center;}
.bubble{
  position:relative;display:inline-block;background:var(--ink);color:#fff;
  font-family:var(--font-display);font-variation-settings:"SOFT" 100,"WONK" 1;font-size:26px;letter-spacing:.08em;
  padding:16px 26px 12px;border-radius:50%/60%;line-height:1;
  animation:bob 3s ease-in-out infinite;
}
.bubble small{display:block;font-family:var(--font-hand);font-size:11px;letter-spacing:.2em;margin-top:4px;}
.bubble::after{content:"";position:absolute;left:50%;bottom:-10px;margin-left:-8px;border:8px solid transparent;border-top-color:var(--ink);border-bottom:0;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.closing-lead{font-family:var(--font-hand);font-size:clamp(19px,5vw,24px);letter-spacing:.12em;margin-top:30px;line-height:1.8;}
.closing-body{font-size:14px;color:var(--ink-soft);margin-top:10px;}
.closing-actions{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:30px;}


/* ---------- フッター ---------- */
footer{background:var(--cocoa) var(--paper-tex);color:rgba(246,238,226,.8);padding:30px 0 34px;text-align:center;font-size:12.5px;}
.foot-mark{font-family:var(--font-script);font-size:44px;line-height:1;color:var(--gold-light);letter-spacing:0;}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-top:18px;font-size:12px;}
.foot-copy{margin-top:16px;font-size:11px;color:rgba(246,238,226,.45);}


/* ---------- スクロールで現れる ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.8,.2,1);}
.rv.is-in{opacity:1;transform:none;}
.rv-d1{transition-delay:.15s}.rv-d2{transition-delay:.3s}


/* ---------- PC ---------- */
@media (min-width:800px){
  .wrap{padding:0 40px;}
  .hero{padding-top:110px;}
  .ttl .en{font-size:54px;}
            .access-grid{grid-template-columns:1.3fr 1fr;align-items:center;gap:50px;}
  .hero-actions{flex-direction:row;justify-content:center;gap:40px;}
  .closing-actions{flex-direction:row;justify-content:center;}
  .arch{padding:90px 60px 56px;}
}


@media (max-width:799px){
  .stamp{width:92px;height:92px;}
  .stamp .s1{font-size:23px;}.stamp .s2{font-size:9px;}.stamp .s3{font-size:8.5px;}
  .hero-actions .tag-btn{padding:0 28px 0 18px;font-size:14px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .cake,.orbit .logo,.stamp,.rv{opacity:1!important;transform:none!important;}
  .stamp{transform:rotate(-12deg)!important;}
  .hero-script{clip-path:none!important;}
  .swash path{stroke-dashoffset:0!important;}
}

/* ---------- ティザー固有 ---------- */
.announce{position:relative;padding:10px 0 60px;}
.announce .arch{padding-top:64px;}
.announce-date{font-family:var(--font-display);font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:500;
  font-size:clamp(46px,13vw,76px);line-height:1;letter-spacing:.04em;color:var(--berry);margin-top:22px;}
.announce-date small{font-size:.36em;letter-spacing:.12em;margin-left:.2em;color:var(--ink-soft);}
.announce-grand{font-family:var(--font-hand);font-size:clamp(22px,6vw,30px);letter-spacing:.2em;margin-top:12px;}
.announce-place{display:inline-block;margin-top:22px;padding:10px 22px;font-size:15px;font-weight:700;letter-spacing:.14em;
  border-top:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);}
.announce-place span{display:block;font-size:12px;font-weight:400;letter-spacing:.1em;color:var(--ink-soft);margin-top:2px;}
.announce-body{font-size:14.5px;margin-top:22px;line-height:2.1;}
.band-torn{color:var(--cocoa);}
.tag-btn.insta{--bg:linear-gradient(45deg,#F2A03D 0%,#E1306C 50%,#833AB4 100%);background:var(--bg);}
.tag-btn.insta:hover{filter:brightness(1.05);}
.tag-btn.ghost .ico path{fill:var(--ink);}