/* ===========================================================
   HARE TACOS — 営業中だけ存在するサイト(ウェブのれん)
   状態でページの顔が全とっかえ:
     open/preopen = ターコイズ×タコスパレット(祝祭)
     undecided/ended/early = シャッター×静けさ
   =========================================================== */
:root{
  --tq:#5FCFCB;         /* ターコイズ(写真実測系) */
  --tq-deep:#2FA7A4;
  --ink:#132E2C;        /* 深緑の墨 */
  --chili:#E8483F;      /* サルサの赤(点で) */
  --corn:#FFC93C;       /* コーンの黄(予備) */
  --naranja:#E05415;    /* ビビッドオレンジ(服部さん指定・下線/FVアクセント) */
  --paper:#F2EFE7;      /* 静かな紙 */
  --mute:#8B857A;
  --line:rgba(19,46,44,.14);
  --en:"Archivo", system-ui, sans-serif;
  --enblack:"Archivo Black", system-ui, sans-serif;
  --jp:"Noto Sans JP", system-ui, sans-serif;
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ margin:0; overflow-x:clip; }
body{
  font-family:var(--jp); color:var(--ink); background:var(--paper);
  line-height:1.9; letter-spacing:.02em; -webkit-font-smoothing:antialiased; font-size:15px;
  transition:background .6s ease;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---------- 状態テーマ ---------- */
body[data-state="open"]{ background:var(--tq); }
body[data-state="closed"]{ background:var(--paper); }

/* ---------- FV(のれん) ---------- */
.fv{ min-height:100svh; display:flex; flex-direction:column; padding:20px 22px 34px; position:relative; }
.fv__top{ display:flex; justify-content:space-between; align-items:baseline; }
.fv__brand{ font-family:var(--enblack); font-size:20px; letter-spacing:.06em; }
.fv__place{ font-family:var(--en); font-weight:700; font-size:11px; letter-spacing:.22em; opacity:.75; }

.fv__photo{ margin:18px 0 0; overflow:hidden; border-radius:14px; flex:0 0 auto; position:relative; }
.fv__photo img{ width:100%; height:38svh; object-fit:cover; transition:filter .6s ease; }

.fv__state{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; padding-top:26px; }
.fv__today{ margin:0; font-family:var(--en); font-weight:700; font-size:12px; letter-spacing:.26em; color:var(--naranja); opacity:1; }
.fv__word{ margin:2px 0 0; font-family:var(--enblack); font-size:clamp(84px,26vw,190px); line-height:.94; letter-spacing:.01em; }
body[data-state="closed"] .fv__word{ font-size:clamp(60px,17.5vw,130px); }
.fv__sub{ margin:14px 0 0; font-size:17px; font-weight:700; }
.fv__note{ margin:8px 0 0; font-size:14px; font-weight:500;
  display:inline-block; color:#fff; padding:4px 14px; border-radius:999px; width:fit-content; }
.fv__updated{ margin:16px 0 0; font-size:11px; letter-spacing:.08em; opacity:.6; }

/* 状態ごとのFV表情 */
body[data-state="open"] .fv__word{ color:var(--ink); }
.fv__note{ background:var(--naranja); }
body[data-state="closed"] .fv__photo img{ filter:saturate(.55) brightness(.94); object-position:center 32%; }
body[data-state="closed"] .fv__word{ color:var(--mute); }

/* ---------- 本文 ---------- */
main{ background:#FFFDF8; }
.how{ padding:44px 22px; border-bottom:1px solid var(--line); text-align:center; }
.how__line{ margin:0; font-size:16.5px; font-weight:700; line-height:1.75; }
.how__line b{ font-family:var(--enblack); font-size:1.05em; letter-spacing:.02em; color:var(--naranja); font-weight:400; }
.how__line--sub{ margin-top:8px; font-size:13px; font-weight:400; color:var(--mute); }

.sec__h{ margin:0 0 20px; font-family:var(--enblack); font-size:16px; letter-spacing:.16em; }
.sec__h span{ border-bottom:4px solid var(--naranja); padding-bottom:5px; }

.menu{ padding:46px 22px 40px; max-width:640px; margin:0 auto; }
.menu__list{ list-style:none; margin:0; padding:0; }
.menu__item{ display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:15px 0; border-bottom:1px dashed var(--line); }
.menu__name{ font-size:15.5px; font-weight:700; min-width:0; }
.menu__desc{ display:block; font-size:12px; font-weight:400; color:var(--mute); margin-top:2px; }
.menu__price{ font-family:var(--en); font-weight:700; font-size:17px; flex:0 0 auto; }
.menu__price::before{ content:"¥"; font-size:.75em; margin-right:1px; }
.menu__photo{ margin:26px 0 0; border-radius:14px; overflow:hidden; }

.strip{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:0 22px; max-width:960px; margin:0 auto; }
.strip figure{ margin:0; border-radius:10px; overflow:hidden; }
.strip img{ width:100%; height:150px; object-fit:cover; }

.about{ padding:46px 22px; max-width:640px; margin:0 auto; }
.about__body{ margin:0; font-size:15px; }

.info{ padding:6px 22px 56px; max-width:640px; margin:0 auto; }
.info__list{ margin:0; }
.info__row{ display:flex; gap:18px; padding:13px 0; border-bottom:1px dashed var(--line); }
.info__row dt{ flex:0 0 84px; font-size:12.5px; color:var(--mute); letter-spacing:.06em; padding-top:2px; }
.info__row dd{ margin:0; font-size:14.5px; font-weight:500; }

/* ---------- footer ---------- */
.foot{ text-align:center; padding:44px 22px 56px; }
.foot__brand{ margin:0; font-family:var(--enblack); font-size:17px; letter-spacing:.06em; }
.foot__sub{ margin:8px 0 22px; font-size:11.5px; color:var(--mute); letter-spacing:.08em; text-wrap:balance; }
.foot__making{ font-size:12px; color:var(--mute); border-bottom:1px solid var(--line); padding-bottom:2px; }
.foot__demo{ margin:26px 0 0; font-size:11px; color:var(--mute); letter-spacing:.05em; }

/* footer は状態テーマの上に乗る */
body[data-state="open"] .foot{ color:var(--ink); }

@media (min-width:720px){
  .fv{ padding:26px 40px 40px; }
  .fv__photo img{ height:42svh; }
  .strip img{ height:220px; }
}