/* ================================================================
   TSUITACHI COFFEE & TEA デザインの仕上げ（2026-11-09）
   ROUTii BASE の仕上げ（木と本を参考）を、TSUITACHI の黒とターコイズに合わせて写したもの。
   情報・文章・導線は変えず、見せ方と動きだけを変える。
   やめるときは lib_design.php の DESIGN_ON を false にする。
   ================================================================ */
:root{
  --ts-ink:#2b2829;
  --ts-turq:#4db9c2;
  --ts-turq-d:#12707a;
  --ts-ease:cubic-bezier(.22,.61,.36,1);
  --ts-serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --ts-latin:"Cormorant Garamond","Shippori Mincho",serif;
}

/* ---- 文字：見出しを明朝に。古民家の落ち着きと「古き良き」 ---- */
body{ letter-spacing:.03em; -webkit-font-smoothing:antialiased; }
.haik-container h2, .haik-container h3,
.tc-hero h1.tc-hero-name, h2.tc-picks-head, h2.tc-reasons-head, h2.tc-scenes-head, h2.tc-guide-head, h2.tc-rating-lead,
h3.tc-reason-title, .tc-pick-name, .tc-scene-t, .tc-menu-title, .tc-menu-sec{
  font-family:var(--ts-serif)!important; font-weight:600; letter-spacing:.06em;
}
.tc-hero h1.tc-hero-name{ font-weight:700; letter-spacing:.08em; }
.tc-reason-no, .tc-hero-lead{ font-family:var(--ts-latin); letter-spacing:.32em; }
.tc-reason-no{ font-size:15px; }
.tc-reason-no::before{ content:""; display:inline-block; width:24px; height:1px; background:currentColor; vertical-align:middle; margin-right:10px; }

/* 見出しの下に短いターコイズの線。画面に入ると伸びる */
h2.tc-picks-head, h2.tc-reasons-head, h2.tc-scenes-head, h2.tc-guide-head{ position:relative; padding-bottom:14px!important; }
h2.tc-picks-head::after, h2.tc-reasons-head::after, h2.tc-scenes-head::after, h2.tc-guide-head::after{
  content:""!important; display:block!important; position:absolute; left:50%; bottom:0; width:40px; height:2px; margin-left:-20px;
  background:var(--ts-turq); transform-origin:center;
}
.ts-fx h2.ts-rv::after{ transform:scaleX(0); transition:transform .9s var(--ts-ease) .25s; }
.ts-fx h2.ts-rv.is-in::after{ transform:scaleX(1); }

/* ---- 上部の細い進み具合バー ---- */
#ts-progress{ position:fixed; left:0; top:0; height:2px; width:100%; z-index:2000;
  background:linear-gradient(90deg,var(--ts-turq),#8fd8de); transform-origin:0 50%; transform:scaleX(0); pointer-events:none; }

/* ---- トップ写真：ゆっくり寄る／文字が順に現れる ---- */
section.qhm-eyecatch{ overflow:hidden; position:relative; }
.ts-hero-bg{ display:block; position:absolute; inset:-2%; background-size:cover; background-position:30% 50%; z-index:0;
  animation:tsKen 16s var(--ts-ease) both; will-change:transform; }
.ts-hero-bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(23,21,22,.42) 0%, rgba(23,21,22,.30) 45%, rgba(23,21,22,.62) 100%); }
@keyframes tsKen{ from{ transform:scale(1.12); } to{ transform:scale(1); } }
section.qhm-eyecatch > div{ position:relative; z-index:1; }
.ts-fx .tc-hero > *{ opacity:0; animation:tsUp 1.1s var(--ts-ease) forwards; }
.ts-fx .tc-hero > *:nth-child(1){ animation-delay:.15s; }
.ts-fx .tc-hero > *:nth-child(2){ animation-delay:.35s; }
.ts-fx .tc-hero > *:nth-child(3){ animation-delay:.55s; }
.ts-fx .tc-hero > *:nth-child(4){ animation-delay:.75s; }
.ts-fx .tc-hero > *:nth-child(5){ animation-delay:.95s; }
.ts-hero-done .tc-hero > *{ opacity:1!important; animation:none!important; transform:none!important; }
@keyframes tsUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

/* 下へ誘う線（トップのみ） */
.ts-scroll{ display:block; position:absolute; left:50%; bottom:18px; z-index:3; transform:translateX(-50%); color:#fff;
  font-family:var(--ts-latin); font-size:12px; letter-spacing:.35em; text-align:center; opacity:.85; pointer-events:none; }
.ts-scroll::after{ content:""; display:block; width:1px; height:46px; margin:8px auto 0; background:rgba(255,255,255,.75);
  transform-origin:top; animation:tsLine 2.2s var(--ts-ease) infinite; }
@keyframes tsLine{ 0%{ transform:scaleY(0); } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ---- メニュー：上に貼りつき、スクロールすると少し透ける ---- */
#navigator{ position:sticky; top:0; z-index:1000; transition:background .4s, box-shadow .4s; }
#navigator.ts-stuck{ background:rgba(255,255,255,.9)!important; -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px);
  box-shadow:0 6px 24px rgba(43,40,41,.08); }
#navigator .nav > li > a{ position:relative; }
#navigator .nav > li > a::after{ content:""; position:absolute; left:14px; right:14px; bottom:10px; height:1px; background:var(--ts-turq);
  transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ts-ease); }
#navigator .nav > li > a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ---- 画面に入ると、下からそっと現れる ---- */
.ts-fx .ts-rv{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ts-ease), transform 1s var(--ts-ease); }
.ts-fx .ts-rv.is-in{ opacity:1; transform:none; }

/* 写真は幕が開くように現れる */
.ts-fx .ts-curtain{ clip-path:inset(0 0 100% 0); transition:clip-path 1.3s var(--ts-ease); }
.ts-fx .ts-curtain.is-in{ clip-path:inset(0 0 0 0); }

/* 写真：触れると少し寄る */
.tc-pick-img{ overflow:hidden; }
.tc-pick-img img{ transition:transform 1.4s var(--ts-ease); }
.tc-pick:hover .tc-pick-img img{ transform:scale(1.05); }

/* ---- カード：触れると少し浮く ---- */
.tc-pick, .tc-reason, .tc-scene, .tc-rating-strip{ transition:transform .5s var(--ts-ease), box-shadow .5s var(--ts-ease), opacity 1s var(--ts-ease), border-color .3s; }
.tc-pick:hover, .tc-reason:hover, .tc-scene:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(43,40,41,.10); }
.ts-fx .ts-rv.is-in.tc-pick:hover, .ts-fx .ts-rv.is-in.tc-reason:hover, .ts-fx .ts-rv.is-in.tc-scene:hover{ transform:translateY(-4px); }
.tc-rating-strip:hover{ box-shadow:0 10px 26px rgba(43,40,41,.08); }

/* ---- ボタン：光が走る／少し浮く ---- */
.tc-btn, .btn, .tc-bar a{ position:relative; overflow:hidden; transition:transform .35s var(--ts-ease), box-shadow .35s var(--ts-ease), background .3s; }
.tc-btn::after, .btn::after{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-20deg); transition:left .8s var(--ts-ease); pointer-events:none; }
.tc-btn:hover::after, .btn:hover::after{ left:140%; }
.tc-btn:hover, .btn:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(43,40,41,.18); }
/* 主役のボタン（メニューを見る）は、ときどき光る */
.tc-hero .tc-btn-main::after{ animation:tsShine 4.5s var(--ts-ease) 2.5s infinite; }
@keyframes tsShine{ 0%{ left:-120%; } 22%,100%{ left:140%; } }

/* ---- 本文の文字リンク：下線が伸びる ---- */
.haik-container p a:not(.btn):not(.tc-btn), .haik-container li a:not(.btn){ text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:background-size .45s var(--ts-ease); }
.haik-container p a:not(.btn):not(.tc-btn):hover, .haik-container li a:not(.btn):hover{ background-size:100% 1px; }

/* ---- 余白をひと回り広く ---- */
.tc-picks{ margin-top:28px!important; margin-bottom:56px!important; }
.tc-reasons, .tc-scenes{ margin-bottom:60px!important; }

/* ---- 「動きを減らす」設定の端末では、動かさない ---- */
@media (prefers-reduced-motion: reduce){
  .ts-hero-bg, .ts-scroll::after, .tc-hero .tc-btn-main::after{ animation:none!important; }
  .ts-fx .ts-rv, .ts-fx .ts-curtain, .ts-fx .tc-hero > *{ opacity:1!important; transform:none!important; clip-path:none!important; animation:none!important; transition:none!important; }
}
@media (max-width:767px){
  .tc-hero h1.tc-hero-name{ letter-spacing:.01em; font-size:19px!important; }
  .ts-scroll{ bottom:12px; font-size:11px; }
  .ts-scroll::after{ height:34px; }
  .tc-picks{ margin-bottom:40px!important; }
  .tc-reasons, .tc-scenes{ margin-bottom:44px!important; }
}