@charset "UTF-8";
/* =========================================================
   高松の宿 宵の星 (YOI NO HOSHI) — 公式サイト
   ・外部ライブラリなし / IntersectionObserverのフェードのみ
   ・sticky pin, background-attachment:fixed は使用しない
   ========================================================= */

:root{
  --ink:#1c1b19;          /* 墨 */
  --ink-2:#4a4843;
  --paper:#fbfaf7;        /* 生成り */
  --paper-2:#f2efe9;
  --concrete:#8e8b84;     /* コンクリート */
  --line:#e2ded6;
  --blue:#2a4a7a;         /* 卓球台の青 */
  --amber:#d99a2b;        /* 宵の灯 */
  --night:#151412;
  --font-jp:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
  --font-en:"Outfit","Helvetica Neue",Arial,sans-serif;
  --wrap:1120px;
}

*{box-sizing:border-box;}

/* --- 日本語の折り返し調整 ---------------------------------
   行末に「です。」「ます。」など数文字だけが落ちる“孤立”を防ぐ。
   ・auto-phrase = 文節単位で折り返す（対応ブラウザのみ）
   ・balance     = 見出しの各行の長さを揃える
   ・pretty      = 最終行が極端に短くならないように調整
   ・.nb         = ここで折り返さない、と明示したい箇所に付ける
   -------------------------------------------------------- */
h1,h2,h3,p,li,td,th,figcaption,.tag,.mb-txt{
  line-break:strict;
  word-break:auto-phrase;
  overflow-wrap:break-word;
}
.hero-catch,.sec-title,.feature-title{
  text-wrap:balance;
}
.lead,.note,.cap,.rule p,.rule b,.info-table td,.info-table th,
.site-footer p,.book p,.mb-txt,.amenity li{
  text-wrap:pretty;
}
.nb{white-space:nowrap;}
html{
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-jp);
  font-size:16px;
  line-height:2;
  letter-spacing:.04em;
  font-weight:400;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
h1,h2,h3,p,ul,figure{margin:0;padding:0;}
ul{list-style:none;}

/* ---------- 共通パーツ ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 1.6rem;}
.sec{padding:7rem 0;}
.sec-dark{background:var(--night);color:#efece6;}
.sec-paper{background:var(--paper-2);}

.eyebrow{
  font-family:var(--font-en);
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--concrete);
  font-weight:400;
  margin-bottom:1.1rem;
  display:block;
}
.sec-dark .eyebrow{color:var(--amber);}
.sec-title{
  font-size:2rem;
  line-height:1.6;
  font-weight:500;
  letter-spacing:.06em;
  margin-bottom:1.8rem;
}
.lead{
  font-size:1rem;
  line-height:2.2;
  color:var(--ink-2);
  max-width:44em;
}
.sec-dark .lead{color:#cdc8bf;}
.note{
  font-size:.82rem;
  line-height:1.9;
  color:var(--concrete);
}

.fade{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease;}
.fade.on{opacity:1;transform:none;}

/* ---------- ヘッダー ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.2rem 1.6rem;
  transition:background .4s ease,padding .4s ease,box-shadow .4s ease;
}
.site-header.scrolled{
  background:rgba(251,250,247,.94);
  backdrop-filter:blur(8px);
  padding:.75rem 1.6rem;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.brand{
  display:flex;align-items:baseline;gap:.6rem;
  color:#fff;text-decoration:none;
  transition:color .4s ease;
}
.site-header.scrolled .brand{color:var(--ink);}
.brand-jp{font-size:1rem;letter-spacing:.2em;font-weight:500;}
.brand-en{font-family:var(--font-en);font-size:.62rem;letter-spacing:.3em;opacity:.75;}

.header-right{display:flex;align-items:center;gap:1.4rem;}
.lang{display:flex;align-items:center;gap:.55rem;font-family:var(--font-en);font-size:.7rem;letter-spacing:.12em;}
.lang a{color:#fff;text-decoration:none;opacity:.62;transition:opacity .3s,color .4s;}
.lang a.is-current{opacity:1;text-decoration:underline;text-underline-offset:4px;}
.lang a:hover{opacity:1;}
.site-header.scrolled .lang a{color:var(--ink);}
.lang span{color:#fff;opacity:.35;}
.site-header.scrolled .lang span{color:var(--concrete);}

.btn-book{
  display:inline-block;
  padding:.72rem 1.5rem;
  border-radius:999px;
  background:var(--blue);
  color:#fff!important;
  text-decoration:none;
  font-size:.82rem;
  letter-spacing:.1em;
  white-space:nowrap;
  transition:transform .25s ease,background .25s ease;
}
.btn-book:hover{background:#1e3a63;transform:translateY(-2px);}
.header-right .btn-book{padding:.6rem 1.2rem;font-size:.76rem;}

/* ---------- ヒーロー ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:flex-end;
  overflow:hidden;
}
.hero-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.08) 38%,rgba(0,0,0,.62) 100%);
}
.hero-inner{position:relative;z-index:2;width:100%;padding:0 0 4.5rem;}
.hero-catch{
  color:#fff;
  font-size:2.9rem;
  line-height:1.5;
  font-weight:500;
  letter-spacing:.08em;
  text-shadow:0 2px 26px rgba(0,0,0,.4);
  margin-bottom:1.1rem;
}
.hero-sub{
  color:rgba(255,255,255,.92);
  font-size:.92rem;
  letter-spacing:.14em;
  line-height:2;
  text-shadow:0 2px 16px rgba(0,0,0,.5);
}
.hero-scroll{
  position:absolute;right:1.8rem;bottom:2.2rem;z-index:2;
  font-family:var(--font-en);font-size:.6rem;letter-spacing:.3em;
  color:rgba(255,255,255,.8);writing-mode:vertical-rl;
}

/* ---------- 数字帯（スペック・リボン） ---------- */
.stats{
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.stats-grid{
  display:grid;grid-template-columns:repeat(7,1fr);
  max-width:1240px;margin:0 auto;padding:0 1.2rem;
}
.stat{
  padding:2.6rem .5rem 2.4rem;text-align:center;position:relative;
}
/* 罫線ではなく、短いヘアラインで区切る（各行の先頭には出さない） */
.stat + .stat::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:2.4rem;background:var(--line);
}
.stat:nth-child(7n+1)::before{display:none;}
.stat b{
  display:block;
  font-family:var(--font-en);
  font-size:2rem;font-weight:200;letter-spacing:.02em;line-height:1.1;
  color:var(--ink);
  margin-bottom:.5rem;
}
.stat b .u{font-size:.78rem;letter-spacing:.06em;margin-left:.2em;color:var(--concrete);}
.stat span{
  font-size:.73rem;letter-spacing:.1em;color:var(--concrete);
  line-height:1.6;display:block;
}
/* 駐車場だけ目立たせる */
.stat.is-accent b{color:var(--amber);}
.stat.is-accent span{color:var(--ink-2);}
.pill{
  display:inline-block;font-style:normal;
  margin-left:.45em;padding:.15em .6em .2em;
  border-radius:999px;background:var(--amber);color:#fff;
  font-size:.6rem;letter-spacing:.08em;line-height:1.6;
  vertical-align:middle;
}

/* ---------- コンセプト ---------- */
.concept-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;
}
.concept-copy .sec-title{font-size:2.2rem;}
.concept-photos{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.concept-photos figure:first-child{grid-column:1 / -1;}

/* ---------- 見出し中央 ---------- */
.head-center{text-align:center;margin-bottom:3.4rem;}
.head-center .lead{margin:0 auto;}

/* ---------- 特集ブロック（写真＋文） ---------- */
.feature{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center;margin-bottom:5.5rem;}
.feature:last-child{margin-bottom:0;}
.feature.rev .feature-photo{order:2;}
.feature-title{font-size:1.5rem;line-height:1.7;font-weight:500;letter-spacing:.05em;margin-bottom:1.1rem;}
.feature-photo img{border-radius:2px;}
.feature-photo .sub{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:.8rem;}
.tag{
  display:inline-block;margin:0 .4rem .4rem 0;padding:.34rem .8rem;
  border:1px solid var(--line);border-radius:999px;
  font-size:.74rem;letter-spacing:.06em;color:var(--ink-2);
}
.sec-dark .tag{border-color:rgba(255,255,255,.22);color:#d5d0c7;}

/* ---------- ギャラリー ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;}
.cap{font-size:.78rem;letter-spacing:.06em;color:var(--concrete);margin-top:.55rem;}

/* ---------- 設備 ---------- */
.amenity{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6rem 3rem;}
.amenity h3{
  font-size:.78rem;letter-spacing:.18em;color:var(--blue);
  font-weight:700;margin-bottom:.9rem;
  padding-bottom:.55rem;border-bottom:1px solid var(--line);
}
.amenity li{font-size:.9rem;line-height:2.1;color:var(--ink-2);}

/* ---------- アクセス ---------- */
.access-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;}
.info-table{width:100%;border-collapse:collapse;font-size:.9rem;}
.info-table th,.info-table td{
  text-align:left;vertical-align:top;
  padding:1rem .4rem;border-bottom:1px solid var(--line);
  line-height:1.9;
}
.info-table th{width:8.5em;font-weight:500;color:var(--ink);}
.info-table td{color:var(--ink-2);}

/* ---------- ルール / FAQ ---------- */
.rules{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2.6rem;}
.rule{border-top:1px solid var(--line);padding:1.3rem 0;}
.rule b{display:block;font-size:.95rem;font-weight:500;margin-bottom:.35rem;}
.rule p{font-size:.85rem;line-height:1.95;color:var(--ink-2);}

/* ---------- 予約CTA ---------- */
.book{
  position:relative;text-align:center;color:#fff;
  padding:8rem 0;overflow:hidden;
}
.book-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.book::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(12,11,10,.62);}
.book .wrap{position:relative;z-index:2;}
.book .sec-title{font-size:2rem;margin-bottom:1rem;}
.book p{color:rgba(255,255,255,.85);font-size:.92rem;line-height:2.1;margin-bottom:2.2rem;}
.btn-lg{
  display:inline-block;padding:1.1rem 3rem;border-radius:999px;
  background:#fff;color:var(--ink)!important;text-decoration:none;
  font-size:.95rem;letter-spacing:.1em;
  transition:transform .25s ease,box-shadow .25s ease;
}
.btn-lg:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.3);}
.book-note{font-size:.78rem!important;color:rgba(255,255,255,.6)!important;margin:1.6rem 0 0!important;}

/* ---------- フッター ---------- */
.site-footer{background:var(--ink);color:#a9a49b;padding:4rem 0 6.5rem;font-size:.8rem;line-height:2;}
.ft-brand{color:#f4f1ec;font-size:1.05rem;letter-spacing:.2em;margin-bottom:.4rem;}
.ft-en{font-family:var(--font-en);font-size:.62rem;letter-spacing:.3em;color:#7d7972;margin-bottom:1.6rem;}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:2.5rem;}
.ft-links{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:.9rem;}
.ft-links a{color:#cdc8bf;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:2px;}
.ft-label{
  margin-top:2rem!important;
  font-family:var(--font-en);
  font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:#7d7972;
}
.ft-current{color:#7d7972;}
.ft-copy{margin-top:3rem;font-size:.7rem;color:#6f6b65;letter-spacing:.08em;}

/* ---------- モバイル追従バー ---------- */
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  display:none;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(251,250,247,.96);
  backdrop-filter:blur(8px);
  box-shadow:0 -1px 0 rgba(0,0,0,.08);
  transform:translateY(110%);transition:transform .35s ease;
}
.mobile-bar.on{transform:none;}
.mobile-bar .mb-txt{font-size:.72rem;line-height:1.6;color:var(--ink-2);}
.mobile-bar .mb-txt b{display:block;font-size:.84rem;color:var(--ink);font-weight:500;}
.mobile-bar .btn-book{padding:.7rem 1.3rem;font-size:.8rem;}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:1080px){
  /* 上段4つ＋下段3つ。12分割にして下段（卓球台・プロジェクター・駐車場）を等幅にする */
  .stats-grid{grid-template-columns:repeat(12,1fr);}
  .stat:nth-child(-n+4){grid-column:span 3;}
  .stat:nth-child(n+5){grid-column:span 4;}
  .stat:nth-child(1)::before,.stat:nth-child(5)::before{display:none;}
  .stat:nth-child(2)::before,.stat:nth-child(3)::before,.stat:nth-child(4)::before,
  .stat:nth-child(6)::before,.stat:nth-child(7)::before{display:block;}
}
@media (max-width:900px){
  .sec{padding:5rem 0;}
  .concept-grid{grid-template-columns:1fr;gap:2.4rem;}
  .feature{grid-template-columns:1fr;gap:1.6rem;margin-bottom:4rem;}
  .feature.rev .feature-photo{order:0;}
  .amenity{grid-template-columns:1fr 1fr;gap:2.2rem;}
  .access-grid{grid-template-columns:1fr;gap:2.2rem;}
  .rules{grid-template-columns:1fr;gap:0 2rem;}
  .ft-grid{grid-template-columns:1fr;gap:1.6rem;}
  .hero-catch{font-size:2.2rem;}
  .sec-title{font-size:1.7rem;}
  .concept-copy .sec-title{font-size:1.8rem;}
  .grid-4{grid-template-columns:1fr 1fr;}
  .header-right .btn-book{display:none;}
  .mobile-bar{display:flex;}
  .hero-scroll{display:none;}
}
@media (max-width:600px){
  body{font-size:15px;}
  /* 縦長画面では中央より少し左・少し下を見せて、卓球台とリビングが両方入るようにする */
  .hero-img{object-position:42% 58%;}
  .wrap{padding:0 1.2rem;}
  .sec{padding:4.2rem 0;}
  .hero-catch{font-size:1.85rem;letter-spacing:.06em;}
  .hero-sub{font-size:.8rem;letter-spacing:.1em;}
  .hero-inner{padding-bottom:3.4rem;}
  .grid-3{grid-template-columns:1fr 1fr;gap:.7rem;}
  .grid-4{grid-template-columns:1fr 1fr;gap:.7rem;}
  .concept-photos{gap:.7rem;}
  .feature-photo .sub{gap:.7rem;}
  .amenity{grid-template-columns:1fr;gap:1.8rem;}
  .book{padding:5.5rem 0;}
  .book .sec-title{font-size:1.6rem;}
  .btn-lg{padding:1rem 2.2rem;font-size:.88rem;}
  .info-table th{width:6.5em;}
  /* 上段は2つずつ、下段（卓球台・プロジェクター・駐車場）は3つ等幅 */
  .stats-grid{grid-template-columns:repeat(6,1fr);}
  .stat{padding:1.7rem .3rem;}
  .stat:nth-child(-n+4){grid-column:span 3;}
  .stat:nth-child(n+5){grid-column:span 2;}
  .stat:nth-child(1)::before,.stat:nth-child(3)::before,.stat:nth-child(5)::before{display:none;}
  .stat:nth-child(2)::before,.stat:nth-child(4)::before,
  .stat:nth-child(6)::before,.stat:nth-child(7)::before{display:block;}
  .stat b{font-size:1.35rem;}
  .stat span{font-size:.66rem;}
}
@media (max-width:380px){
  .hero-catch{font-size:1.6rem;}
  .brand-jp{font-size:.86rem;letter-spacing:.14em;}
  .brand-en{display:none;}
  .sec-title{font-size:1.45rem;}
  .lang{font-size:.64rem;gap:.4rem;}
}

/* モバイルのみの改行 */
.spbr{display:none;}
@media (max-width:600px){.spbr{display:inline;}}

@media (prefers-reduced-motion:reduce){
  .fade{opacity:1;transform:none;transition:none;}
}


/* =========================================================
   ▼ ここから D案：スクロールで一日が流れる（宵→夜→深夜→朝→昼→宵）
   ========================================================= */
/* =========================================================
   D案（改）：「一日が流れる」
   ・地色はセクション単位の切替ではなく、スクロール量に応じて連続的に補間
   ・夜は星が浮かび、朝は光が差す
   ・左下の時計はスクロールに合わせて 18:00 → 翌18:00 まで進む
   ・sticky/pin・スクロールジャックは使わない
   ========================================================= */

html{
  --bg:#232a38;
  --fg:#eef1f7;
  --muted:#98a1b3;
  --hair:rgba(255,255,255,.14);
  --accent:#e0a942;
  --nightness:1;   /* 1=夜 0=昼 */
}

/* ---------- 背景の3枚重ね ---------- */
/* スクロールを妨げないよう、背景レイヤーは操作を一切受け取らない */
html{scroll-behavior:auto;}
.bg-stage{position:fixed;inset:0;z-index:-3;background-color:var(--bg);pointer-events:none;}
.sky{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;opacity:var(--nightness);}
.sky i{
  position:absolute;
  border-radius:50%;
  background:currentColor;
  opacity:var(--o,.6);
  /* ごくわずかにぼかして、点ではなく光に見せる */
  filter:blur(.25px);
  animation:twinkle var(--dur,6s) ease-in-out infinite alternate;
}
.sky .venus{filter:none;}
@keyframes twinkle{
  from{opacity:calc(var(--o,.6) * .35);}
  to{opacity:var(--o,.6);}
}
.dawn{
  position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:0;
  background:
    radial-gradient(120% 80% at 8% -10%, rgba(255,214,150,.55) 0%, rgba(255,214,150,0) 55%),
    linear-gradient(180deg, rgba(255,241,214,.5) 0%, rgba(255,241,214,0) 45%);
}
body{background:transparent!important;color:var(--fg);}

/* セクションの地色は透明にして、背景レイヤーを見せる */
.sec,.sec-paper,.sec-dark,.stats,.site-footer{background:transparent!important;}
.sec-dark{color:inherit;}

/* 色は毎フレーム変数で更新するので transition は付けない（追従を滑らかに保つ） */
.sec-title,.feature-title,.hero-catch,.rule b,.info-table th,.ft-brand,.stat b{color:var(--fg);}
.lead,.sec-dark .lead,.rule p,.info-table td,.amenity li,.site-footer p,.mb-txt{color:var(--muted);}
.note,.cap,.stat span,.stat b .u,.ft-en,.ft-copy,.ft-label,.ft-current{color:var(--muted);opacity:.88;}
.eyebrow,.sec-dark .eyebrow{color:var(--accent);}
.amenity h3{color:var(--accent);border-bottom-color:var(--hair);}
.info-table th,.info-table td,.rule{border-color:var(--hair)!important;}
.stats{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);}
.site-footer{border-top:1px solid var(--hair);}
.stat + .stat::before{background:var(--hair);}
.tag,.sec-dark .tag{border-color:var(--hair);color:var(--muted);}
.ft-links a{color:var(--muted);border-bottom-color:var(--hair);}

/* 見出しの横に時刻を出す（JSが差し込む） */
.eyebrow .hour{
  font-family:var(--font-en);font-style:normal;
  margin-left:.9em;padding:.2em .6em .25em;border-radius:999px;
  border:1px solid var(--hair);color:var(--muted);
  font-size:.9em;letter-spacing:.1em;
}

/* アクセント */
.stat.is-accent b{color:var(--accent);}
.pill{background:transparent;border:1px solid var(--accent);color:var(--accent);}
.btn-book{background:var(--accent);color:#141210!important;font-weight:500;}
.btn-book:hover{filter:brightness(1.08);}
.btn-lg{background:var(--accent);color:#141210!important;}

/* ヘッダー */
.site-header .brand,.site-header .lang a{color:var(--fg);}
.site-header .lang span{color:var(--muted);}
.site-header.scrolled{
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  box-shadow:0 1px 0 var(--hair);backdrop-filter:blur(10px);
}
.site-header.scrolled .brand,.site-header.scrolled .lang a{color:var(--fg);}
.mobile-bar{background:color-mix(in srgb, var(--bg) 94%, transparent);box-shadow:0 -1px 0 var(--hair);}
.mobile-bar .mb-txt b{color:var(--fg);}

/* ヒーローの裾を地色になじませる */
.hero::after{background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.08) 38%,var(--bg) 100%);}

/* 写真の明るさも時間に連動（夜はわずかに沈む） */
.feature-photo img,.grid-3 img,.grid-4 img,.concept-photos img,.access-grid img{
  filter:brightness(calc(1 - var(--nightness) * .08));
}


/* 夜明けの反転中だけ、文字に反対色の淡い縁取りが出る（JSが --shadowc を出し入れする） */
.sec-title,.feature-title,.hero-catch,.lead,.note,.rule b,.rule p,
.info-table th,.info-table td,.amenity li,.amenity h3,.cap,.eyebrow,
.stat b,.stat span,.ft-brand,.site-footer p,.tag{
  text-shadow:0 0 10px var(--shadowc, transparent), 0 0 3px var(--shadowc, transparent);
}