/* ================================================================
   ROUTii BASE デザインの仕上げ（2026-11-08）
   木と本のサイトを参考に「落ち着いた明朝の見出し・広い余白・そっと動く」作りへ。
   情報と導線は変えず、見せ方だけを変える。
   やめるときは _blog/lib/design.php の DESIGN_ON を false にする。
   ================================================================ */
:root{
  --rb-wood:#A9875C;
  --rb-ease:cubic-bezier(.22,.61,.36,1);
  --rb-serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --rb-latin:"Cormorant Garamond","Shippori Mincho",serif;
}

/* ---- 文字 ---- */
body{ letter-spacing:.03em; -webkit-font-smoothing:antialiased; }
section.qhm-eyecatch h1,
.haik-container h2, .haik-container h3,
.rb-intro-lead, .rb-str-title, .rb-str-h, .rb-worry-title,
.rb-self-price, .rb-pick-num, .rb-rating-score{
  font-family:var(--rb-serif); font-weight:600; letter-spacing:.06em;
}
section.qhm-eyecatch h1{ font-weight:700; letter-spacing:.08em; }
.rb-str-num, .rb-str-kicker{
  font-family:var(--rb-latin); font-weight:600; font-size:15px; letter-spacing:.32em; color:var(--rb-wood)!important;
}
.rb-str-num::before{ content:""; display:inline-block; width:28px; height:1px; background:currentColor; vertical-align:middle; margin-right:12px; }

/* 見出しの下に短い線。画面に入ると左から伸びる */
.haik-content h2{ position:relative; padding-bottom:14px; }
.haik-content h2::after{
  content:""; position:absolute; left:0; bottom:0; width:44px; height:2px; background:var(--rb-red);
  transform-origin:left center;
}
.haik-content [style*="text-align:center"] h2::after,
.haik-content h2.rb-worry-title::after, .haik-content .rb-str-h::after{ left:50%; margin-left:-22px; transform-origin:center; }
.haik-content .rb-str-h::after{ left:0; margin-left:0; transform-origin:left center; }
.rb-fx .haik-content h2.rb-rv::after{ transform:scaleX(0); transition:transform .9s var(--rb-ease) .25s; }
.rb-fx .haik-content h2.rb-rv.is-in::after{ transform:scaleX(1); }

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

/* ---- ヒーロー：写真がゆっくり寄る／文字が順に現れる ---- */
section.qhm-eyecatch{ overflow:hidden; }
.rb-hero-bg{ display:block; position:absolute; inset:-2%; background-size:cover; background-position:center; z-index:0;
  animation:rbKen 16s var(--rb-ease) both; will-change:transform; }
.rb-hero-bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,40,63,.62) 0%, rgba(18,40,63,.48) 45%, rgba(18,40,63,.80) 100%); }
@keyframes rbKen{ from{ transform:scale(1.12); } to{ transform:scale(1); } }
section.qhm-eyecatch > div{ z-index:1; }
.rb-fx section.qhm-eyecatch .qhm-section-content > *{ opacity:0; animation:rbUp 1.1s var(--rb-ease) forwards; }
.rb-fx section.qhm-eyecatch .qhm-section-content > *:nth-child(1){ animation-delay:.15s; }
.rb-fx section.qhm-eyecatch .qhm-section-content > *:nth-child(2){ animation-delay:.35s; }
.rb-fx section.qhm-eyecatch .qhm-section-content > *:nth-child(3){ animation-delay:.55s; }
.rb-fx section.qhm-eyecatch .qhm-section-content > *:nth-child(4){ animation-delay:.75s; }
.rb-fx section.qhm-eyecatch .qhm-section-content > *:nth-child(5){ animation-delay:.95s; }
/* 動きが止まる環境でも、2.5秒後には必ず文字が見えるようにする（js が rb-hero-done を付ける） */
.rb-hero-done section.qhm-eyecatch .qhm-section-content > *{ opacity:1!important; animation:none!important; transform:none!important; }
@keyframes rbUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
.rb-hero-badge{ transition:transform .6s var(--rb-ease); }
.rb-hero-badge:hover{ transform:rotate(-6deg) scale(1.04); }

/* 下へ誘う線 */
.rb-scroll{ display:block; position:absolute; left:50%; bottom:18px; z-index:3; transform:translateX(-50%); color:#fff;
  font-family:var(--rb-latin); font-size:12px; letter-spacing:.35em; text-align:center; opacity:.85; pointer-events:none; }
.rb-scroll::after{ content:""; display:block; width:1px; height:46px; margin:8px auto 0; background:rgba(255,255,255,.75);
  transform-origin:top; animation:rbLine 2.2s var(--rb-ease) infinite; }
@keyframes rbLine{ 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, backdrop-filter .4s; }
#navigator.rb-stuck{ background:rgba(255,255,255,.88)!important; -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px);
  box-shadow:0 6px 24px rgba(18,40,63,.08); }
#navigator .nav > li > a{ position:relative; }
#navigator .nav > li > a::after{ content:""; position:absolute; left:16px; right:16px; bottom:12px; height:1px; background:var(--rb-red);
  transform:scaleX(0); transform-origin:right; transition:transform .45s var(--rb-ease); }
#navigator .nav > li > a:hover::after, #navigator .nav > li.active > a::after{ transform:scaleX(1); transform-origin:left; }

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

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

/* 写真：枠の中でわずかに動く（奥行き）／触れると寄る */
.rb-str-photo, .rb-mood-grid, .rb-str-gallery{ overflow:hidden; }
.rb-str-photo img, .rb-mood-grid img{ transition:transform 1.4s var(--rb-ease); will-change:transform; }
.rb-str-item:hover .rb-str-photo img, .rb-mood-grid img:hover{ transform:scale(1.05); }
.rb-plx{ transform:translate3d(0,var(--rb-plx,0px),0) scale(1.08); }
.rb-str-item:hover .rb-plx{ transform:translate3d(0,var(--rb-plx,0px),0) scale(1.12); }

/* ---- カード：触れると少し浮く ---- */
.rb-worry-item, .rb-pick-card, .rb-flow-step, .rb-str-item, .rb-self, .rb-rating, .rb-contact, .qhm-bs-box.panel{
  transition:transform .5s var(--rb-ease), box-shadow .5s var(--rb-ease), opacity 1s var(--rb-ease);
}
.rb-worry-item:hover, .rb-pick-card:hover, .rb-flow-step:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(18,40,63,.10); }
.rb-fx .rb-rv.is-in.rb-worry-item:hover, .rb-fx .rb-rv.is-in.rb-pick-card:hover, .rb-fx .rb-rv.is-in.rb-flow-step:hover{ transform:translateY(-4px); }
.rb-worry-item{ border-left:3px solid transparent; }
.rb-worry-item:hover{ border-left-color:var(--rb-red); }

/* ---- ボタン：光が走る／少し浮く ---- */
.btn, #rb-cta-bar a, .rb-cta-btns a{ position:relative; overflow:hidden; transition:transform .35s var(--rb-ease), box-shadow .35s var(--rb-ease), background .3s; }
.btn::after, #rb-cta-bar a::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(--rb-ease); pointer-events:none; }
.btn:hover::after, #rb-cta-bar a:hover::after{ left:140%; }
.btn:hover, .rb-cta-btns a:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(18,40,63,.18); }
.btn-lg{ letter-spacing:.08em; }
/* 主役のボタンは、ときどき光る */
.rb-hero-cta .btn::after{ animation:rbShine 4.5s var(--rb-ease) 2.5s infinite; }
@keyframes rbShine{ 0%{ left:-120%; } 22%,100%{ left:140%; } }

/* ---- サイドメニュー ---- */
#menubar .list-group-item a{ display:block; transition:transform .35s var(--rb-ease), color .3s; }
#menubar .list-group-item a:hover{ transform:translateX(6px); color:var(--rb-red); text-decoration:none; }

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

/* ---- 余白をひと回り広く ---- */
.rb-str-item{ margin-bottom:72px; }
.rb-intro{ padding-top:72px; padding-bottom:44px; }

/* ---- 「動きを減らす」設定の端末では、動かさない ---- */
@media (prefers-reduced-motion: reduce){
  .rb-hero-bg, .rb-scroll::after, .rb-hero-cta .btn::after{ animation:none!important; }
  .rb-fx .rb-rv, .rb-fx .rb-curtain, .rb-fx section.qhm-eyecatch .qhm-section-content > *{ opacity:1!important; transform:none!important; clip-path:none!important; animation:none!important; transition:none!important; }
  .rb-plx{ transform:none!important; }
}
@media (max-width:767px){
  .rb-str-item{ margin-bottom:48px; }
  .rb-intro{ padding-top:48px; }
  .rb-scroll{ bottom:12px; font-size:11px; }
  .rb-scroll::after{ height:34px; }
  .rb-fx .rb-rv.rb-rv-l, .rb-fx .rb-rv.rb-rv-r{ transform:translateY(26px); }
}