/* ============================================================
   宿泊の世界（夕暮れの宿）の見た目。土台（_engine/engine.css）の上に重ねる。
   例の出方：行灯の色に透けた障子が2枚、札の上で閉じたまま現れ、左右に開いて声の札が見える。
   流れの3つ：小さな行灯が、1つずつ順にともる。
   ============================================================ */

/* 困りごとの一覧：宿の品書き */
.w-shukuhaku .toc__list{border-top:2px solid rgba(242,166,90,.55)}
.w-shukuhaku .toc__list a{border-bottom:1px solid rgba(244,239,228,.16)}
.w-shukuhaku .toc__no{padding:1px 10px;border:1px solid rgba(242,166,90,.7);border-radius:2px;font-family:var(--mincho);letter-spacing:.14em}

/* ---------- 障子が開く ---------- */
.w-shukuhaku .vcard{max-width:min(100%,600px)}
html.lp-on.w-shukuhaku .vcard{opacity:var(--e1,1);transform:translate3d(0,calc((1 - var(--eo,1)) * 30px),0)}
.w-shukuhaku .vcard__in{padding:32px 28px 34px;border-radius:2px;background:linear-gradient(180deg,#F8F2E4,#EFE4CC);
  box-shadow:0 0 0 6px #2A1E16,0 0 0 7px rgba(242,166,90,.4),0 30px 60px rgba(0,0,0,.55),0 0 80px rgba(242,166,90,.18)}
.w-shukuhaku .vcard::before,.w-shukuhaku .vcard::after{content:"";position:absolute;z-index:2;top:-7px;bottom:-7px;width:calc(50% + 7px);display:none;pointer-events:none;
  background:
    linear-gradient(90deg,#2A1E16 0 6px,transparent 6px calc(100% - 6px),#2A1E16 calc(100% - 6px)),
    linear-gradient(180deg,#2A1E16 0 6px,transparent 6px calc(100% - 6px),#2A1E16 calc(100% - 6px)),
    repeating-linear-gradient(90deg,transparent 0 calc(33.33% - 1.5px),rgba(42,30,22,.82) calc(33.33% - 1.5px) 33.33%),
    repeating-linear-gradient(180deg,transparent 0 42px,rgba(42,30,22,.82) 42px 45px),
    radial-gradient(circle at 50% 60%,#FFF1D2,#F4D69E 65%,#E3B474);
  box-shadow:inset 0 0 34px rgba(200,110,40,.4)}
.w-shukuhaku .vcard::before{left:-7px}
.w-shukuhaku .vcard::after{right:-7px}
html.lp-on.w-shukuhaku .vcard::before,html.lp-on.w-shukuhaku .vcard::after{display:block}
html.lp-on.w-shukuhaku .vcard::before{transform:translate3d(calc(var(--e2,1) * -104%),0,0);opacity:calc(1 - max(0,var(--e2,1) - .65) * 2.86)}
html.lp-on.w-shukuhaku .vcard::after{transform:translate3d(calc(var(--e2,1) * 104%),0,0);opacity:calc(1 - max(0,var(--e2,1) - .65) * 2.86)}
.w-shukuhaku .vcard__code{padding:1px 12px;border:1.5px solid #1A2238;border-radius:2px;font-family:var(--mincho);letter-spacing:.16em}

/* ---------- こう変わる：三日月の印 ---------- */
.w-shukuhaku .scene__title::before{content:"";display:block;width:26px;height:26px;margin-bottom:14px;border-radius:50%;
  box-shadow:inset -7px 3px 0 0 #F4DCA8;transform:rotate(-20deg);filter:drop-shadow(0 0 8px rgba(255,226,170,.55))}

/* ---------- 流れ：行灯が順にともる ---------- */
.w-shukuhaku .flow__list li{border-radius:3px;border:1px solid rgba(242,166,90,.4);
  background:linear-gradient(180deg,rgba(242,166,90,.12),rgba(14,26,51,.7))}
.w-shukuhaku .flow__n{border-radius:2px;background:#F2A65A;color:#1E1206}
html.lp-on.w-shukuhaku .flow__list li{opacity:calc(.3 + .7 * var(--r,1));transform:none;
  box-shadow:0 0 calc(var(--r,1) * 34px) rgba(242,166,90,calc(var(--r,1) * .3)),inset 0 0 calc(var(--r,1) * 24px) rgba(242,166,90,calc(var(--r,1) * .22))}
html.lp-on.w-shukuhaku .flow__n{opacity:calc(.35 + .65 * var(--r,1))}

/* ---------- 画面のイメージ：行灯の光が、ふちに ---------- */
.w-shukuhaku .mock__body{box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(242,166,90,.4),0 0 70px rgba(242,166,90,.16)}
html.lp-on.w-shukuhaku .mock{opacity:var(--m0,1);transform:translate3d(calc((1 - var(--m0,1)) * 44px),0,0)}

.w-shukuhaku .tags li{border-radius:2px}

@media (min-width:980px){
  .w-shukuhaku .vcard{margin-left:4%}
}