/* ================================================================
   RELI.STYLE デザインの仕上げ（2026-11-09）
   木と本・ROUTii BASE と同じ考え方で「明朝の見出し・広い余白・そっと動く」作りへ。
   色は今のRELIのまま（こげ茶 #3f3a31・砂色 #b3a68f・青緑 #5da399）。
   情報と導線は変えず、見せ方だけを変える。やめるときは lib/design.php の DESIGN_ON を false。
   ================================================================ */
:root{
  --rd-ink:#3f3a31;
  --rd-sand:#b3a68f;
  --rd-teal:#5da399;
  --rd-ease:cubic-bezier(.22,.61,.36,1);
  --rd-serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --rd-latin:"Cormorant Garamond","Shippori Mincho",serif;
}

/* ---- 文字 ---- */
body{ letter-spacing:.03em; -webkit-font-smoothing:antialiased; }
.rl-hero h1, .haik-container h1, .haik-container h2, .haik-container h3,
.rl-bg__t, .rl-sum__t, .rl-rev__v, .rl-tr__n, .rl-chk__h{
  font-family:var(--rd-serif); font-weight:600; letter-spacing:.06em;
}
.rl-hero h1{ font-weight:700; letter-spacing:.1em; }
.qblog_title{ font-family:var(--rd-serif); font-weight:600; }
/* 英字の小見出し（HOW TO JOIN など）は、細い線を添えて字間を広く */
.rl-ways__l, .rl-sch__l, .rl-str__l, .rl-bg__l, .rl-who__l, .rl-flow__l, .rl-rev__lbl, .reli-sister__l{
  font-family:var(--rd-latin)!important; font-weight:600!important; letter-spacing:.32em!important; color:var(--rd-sand)!important;
}
.rl-ways__l::before, .rl-sch__l::before, .rl-str__l::before, .rl-bg__l::before, .rl-who__l::before, .rl-flow__l::before{
  content:""; display:inline-block; width:26px; height:1px; background:currentColor; vertical-align:middle; margin-right:12px;
}

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

/* ---- トップ：文字が順に現れる／下へ誘う線 ---- */
.rd-fx .rl-hero > *{ opacity:0; animation:rdUp 1.1s var(--rd-ease) forwards; }
.rd-fx .rl-hero > *:nth-child(1){ animation-delay:.15s; }
.rd-fx .rl-hero > *:nth-child(2){ animation-delay:.35s; }
.rd-fx .rl-hero > *:nth-child(3){ animation-delay:.55s; }
.rd-fx .rl-hero > *:nth-child(4){ animation-delay:.75s; }
.rd-fx .rl-hero > *:nth-child(5){ animation-delay:.95s; }
.rd-fx .rl-hero > *:nth-child(n+6){ animation-delay:1.1s; }
/* 動きが止まる環境でも、2.5秒後には必ず見えるようにする（js が rd-hero-done を付ける） */
.rd-hero-done .rl-hero > *{ opacity:1!important; animation:none!important; transform:none!important; }
@keyframes rdUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

.rd-scroll{ display:block; position:absolute; left:50%; bottom:16px; z-index:3; transform:translateX(-50%); color:#fff;
  font-family:var(--rd-latin); font-size:12px; letter-spacing:.35em; text-align:center; opacity:.85; pointer-events:none; }
.rd-scroll::after{ content:""; display:block; width:1px; height:44px; margin:8px auto 0; background:rgba(255,255,255,.75);
  transform-origin:top; animation:rdLine 2.2s var(--rd-ease) infinite; }
@keyframes rdLine{ 0%{ transform:scaleY(0); } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ---- メニュー：上に貼りつき、スクロールすると少し透ける ---- */
/* パソコンではメニューが2段で大きいので、貼りつけるのはスマホだけ */
@media (max-width:767px){ #navigator{ position:sticky; top:0; z-index:1000; transition:background .4s, box-shadow .4s; } }
#navigator.rd-stuck{ background:rgba(251,247,241,.9)!important; -webkit-backdrop-filter:saturate(1.3) blur(10px); backdrop-filter:saturate(1.3) blur(10px);
  box-shadow:0 6px 24px rgba(63,58,49,.08); }
#navigator .navbar-brand{ font-family:var(--rd-latin); font-weight:600; letter-spacing:.18em; }
@media (min-width:768px){
  #navigator .navbar-collapse ul > li > a{ position:relative; }
  #navigator .navbar-collapse ul > li > a::after{ content:""; position:absolute; left:10px; right:10px; bottom:8px; height:1px; background:var(--rd-sand);
    transform:scaleX(0); transform-origin:right; transition:transform .45s var(--rd-ease); }
  #navigator .navbar-collapse ul > li > a:hover::after{ transform:scaleX(1); transform-origin:left; }
}

/* ---- 画面に入ると、下からそっと現れる ---- */
/* トップの「ブロックごと」の現れ方（toppage.php）は、中身を1枚ずつ出すこちらに任せる */
html.rd-fx.rl-anim .rl-rv:not(.is-in){ opacity:1; transform:none; }
.rd-fx .rd-rv{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--rd-ease), transform 1s var(--rd-ease); }
.rd-fx .rd-rv.is-in{ opacity:1; transform:none; }

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

/* 写真：触れると少し寄る */
.rl-swipe > [class*="col-sm-"], .rl-tr__c, .qblog_thumbnail_box{ overflow:hidden; }
.rl-swipe img, .rl-tr__p img, .rl-tr__p, .qblog_thumbnail_box img{ transition:transform 1.4s var(--rd-ease); }
.rl-swipe > [class*="col-sm-"]:hover img, .rl-tr__c:hover .rl-tr__p, .qblog_thumbnail_box:hover img{ transform:scale(1.05); }

/* ---- カード：触れると少し浮く ---- */
.rl-who__c, .rl-ways__c, .rl-str__i, .rl-sum__i, .rl-tr__c, .reli-sister__i, .rl-sch__d, .qblog_thumbnail_box, .qhm-bs-box.panel{
  transition:transform .5s var(--rd-ease), box-shadow .5s var(--rd-ease), opacity 1s var(--rd-ease);
}
.rl-who__c:hover, .rl-ways__c:hover, .rl-str__i:hover, .rl-tr__c:hover, .reli-sister__i:hover, .qblog_thumbnail_box:hover{
  transform:translateY(-4px); box-shadow:0 14px 34px rgba(63,58,49,.10);
}
.rd-fx .rd-rv.is-in.rl-who__c:hover, .rd-fx .rd-rv.is-in.rl-ways__c:hover, .rd-fx .rd-rv.is-in.rl-str__i:hover,
.rd-fx .rd-rv.is-in.rl-tr__c:hover, .rd-fx .rd-rv.is-in.reli-sister__i:hover{ transform:translateY(-4px); }

/* ---- ボタン：光が走る／少し浮く ---- */
.btn, .rl-hero__b, .rl-cta__b, .rl-sch__go a, .rl-bg__b, .reli-rc, .rl-chk__go a, .reli-cta__btn{
  position:relative; overflow:hidden; transition:transform .35s var(--rd-ease), box-shadow .35s var(--rd-ease), background .3s;
}
.btn::after, .rl-hero__b::after, .rl-cta__b::after, .rl-sch__go a::after, .rl-bg__b::after, .reli-rc::after, .reli-cta__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(--rd-ease); pointer-events:none;
}
.btn:hover::after, .rl-hero__b:hover::after, .rl-cta__b:hover::after, .rl-sch__go a:hover::after, .rl-bg__b:hover::after, .reli-rc:hover::after, .reli-cta__btn:hover::after{ left:140%; }
.btn:hover, .rl-hero__b:hover, .rl-sch__go a:hover, .rl-bg__b:hover, .reli-rc:hover, .reli-cta__btn:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(63,58,49,.18); }
/* 主役のボタン（体験の予約）は、ときどき光る */
.rl-hero__b--main::after{ animation:rdShine 4.5s var(--rd-ease) 2.5s infinite; }
@keyframes rdShine{ 0%{ left:-120%; } 22%,100%{ left:140%; } }

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

/* ---- 余白をひと回り広く ---- */
.rl-ways, .rl-sch, .rl-str, .rl-bg, .rl-who, .rl-voice, .rl-flow, .reli-sister, .rl-chk, .rl-tr{ margin-top:72px!important; }
@media (max-width:767px){
  .rl-ways, .rl-sch, .rl-str, .rl-bg, .rl-who, .rl-voice, .rl-flow, .reli-sister, .rl-chk, .rl-tr{ margin-top:52px!important; }
  .rd-scroll{ bottom:10px; font-size:11px; }
  .rd-scroll::after{ height:30px; }
}

/* ---- 「動きを減らす」設定の端末では、動かさない ---- */
@media (prefers-reduced-motion: reduce){
  .rd-scroll::after, .rl-hero__b--main::after{ animation:none!important; }
  .rd-fx .rd-rv, .rd-fx .rd-curtain, .rd-fx .rl-hero > *{ opacity:1!important; transform:none!important; clip-path:none!important; animation:none!important; transition:none!important; }
}