@charset "utf-8";
/* CSS Document */

body {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  background-color: #f9f6f2; /* 背景色は必要に応じて変更 */
  color: #333333	
}

/* ベージュの背景設定 */
.beckground-bage {
  background-color: #f9f6f2;
  display: block;
}

/* =========================
   CTA Monitor Button (SP)
   ========================= */
#cta-monitor .cta-monitor-container{
  width:100%;
  margin: 0; 
  padding: 30px 0px 35px 7px;           /* 上25px 下30px 左右余白 20px */
  box-sizing:border-box;
  text-align:center;
}

.cta-monitor-link{
  display:inline-block;
}

.cta-monitor-img{
  width:100%;
  height:auto;
  display:block;
}

/* =========================
   CTA：画像ボタンのベース
   ========================= */
.rb-cta{
  display:inline-block;
  position:relative;
  overflow:hidden;          /* シマーのはみ出し隠す */
  transform-origin:center;
  isolation:isolate;        /* シマーのブレンド安定 */
  will-change: transform;   /* 連続アニメをGPU最適化 */

  /* シマー調整（必要なら数値だけ変える） */
  --rb-sheen-speed: 5.2s;     /* 光の速さ（遅め） */
  --rb-sheen-intensity: .7;   /* 明るさ */
  --rb-sheen-width-1: 7%;     /* 光の太さ（細） */
  --rb-sheen-width-2: 14%;    /* 光の太さ（太） */
}

.rb-cta-img{
  display:block;
  width:100%;
  height:auto;
  pointer-events:none; /* 画像上でもリンククリック可 */
}

/* クリック感（任意） */
.rb-cta:active{ transform: scale(.995); }

/* =========================
   Diamond Shake (1.5s) + Pause (0.2s)
   ========================= */
.rb-anim--shake-burst {
  animation: rbShakeDiamond 1.7s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes rbShakeDiamond {
  /* 0〜88.2% (1.5s) 揺れ, 88.2〜100% (0.2s) 停止 */
  0%    { transform: translateX(0) skewX(0deg) scale(1,1); }
  6%    { transform: translateX(-3px) skewX(-3deg) scale(1.02,0.98); }
  12%   { transform: translateX(3px)  skewX(3deg)  scale(0.98,1.02); }
  18%   { transform: translateX(-3px) skewX(-2deg) scale(1.015,0.985); }
  24%   { transform: translateX(2px)  skewX(2deg)  scale(0.985,1.015); }
  30%   { transform: translateX(-2px) skewX(-2deg) scale(1.01,0.99); }
  40%   { transform: translateX(2px)  skewX(2deg)  scale(0.99,1.01); }
  50%   { transform: translateX(-2px) skewX(-1.5deg) scale(1.005,0.995); }
  60%   { transform: translateX(1px)  skewX(1.5deg)  scale(0.995,1.005); }
  70%   { transform: translateX(-1px) skewX(-1deg)   scale(1,1); }
  80%   { transform: translateX(0.5px) skewX(0.5deg) scale(1,1); }
  88.2% { transform: translateX(0) skewX(0deg) scale(1,1); }  /* 1.5s終了 */
  100%  { transform: translateX(0) skewX(0deg) scale(1,1); }  /* 停止0.2s */
}

/* =========================
   Diagonal Sheen（斜めに光る）
   方向はクラスで選択：rb-shine-ltr / rb-shine-rtl
   ========================= */

/* 左上 → 右下 */
.rb-shine-ltr::after{
  content:"";
  position:absolute;
  inset:-25%;
  pointer-events:none;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,var(--rb-sheen-intensity)) var(--rb-sheen-width-1),
    rgba(255,255,255,0) var(--rb-sheen-width-2)
  );
  mix-blend-mode: screen;
  transform: translate(-120%, -120%);
  animation: rbSheenDiagLTR var(--rb-sheen-speed) ease-in-out infinite;
  z-index:1;
}
@keyframes rbSheenDiagLTR{
  0%   { transform: translate(-120%, -120%); }
  50%  { transform: translate(120%, 120%); }
  100% { transform: translate(120%, 120%); }
}

/* 右上 → 左下 */
.rb-shine-rtl::after{
  content:"";
  position:absolute;
  inset:-25%;
  pointer-events:none;
  background: linear-gradient(
    225deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,var(--rb-sheen-intensity)) var(--rb-sheen-width-1),
    rgba(255,255,255,0) var(--rb-sheen-width-2)
  );
  mix-blend-mode: screen;
  transform: translate(120%, -120%);
  animation: rbSheenDiagRTL var(--rb-sheen-speed) ease-in-out infinite;
  z-index:1;
}
@keyframes rbSheenDiagRTL{
  0%   { transform: translate(120%, -120%); }
  50%  { transform: translate(-120%, 120%); }
  100% { transform: translate(-120%, 120%); }
}

/* 店舗情報セクション：1080×270 を常に等倍縮尺で表示 */
.store-info{
  width: 100%;
  aspect-ratio: 1080 / 270;                 /* ← 高さを比率から自動算出 */
  background: url("../images/lptenpo01_relaxbody.webp") center / cover no-repeat;
  position: relative;
  text-align: center;
}

/* 文字：左右中央・上下中央。横一行で折り返させない */
.store-title{
  position: absolute;
  left: 50%;
  top: 27%;
  transform: translate(-50%,-50%);          /* 上下左右ど真ん中 */
  white-space: nowrap;                      /* ← 折り返し禁止 */
  margin: 0;

  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 550;
  color: #4aaa4c;

  /* 1080px幅のとき ≒88px（PCの5.5rem相当）。SPでは自動で小さく。 */
  font-size: clamp(28px, 8.15vw, 88px);
  line-height: 1.05;
}

/* もし”少しだけ上に”置きたい時は 50% → 48% など微調整してOK */
/* .store-title{ top:48%; } */

/* 文字：左右中央・上下中央。横一行で折り返させない */
.stuff-title{
  position: absolute;
  left: 50%;
  top: 27%;
  transform: translate(-50%,-50%);          /* 上下左右ど真ん中 */
  white-space: nowrap;                      /* ← 折り返し禁止 */
  margin: 0;

  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 550;
  color: #4aaa4c;

  /* 1080px幅のとき ≒88px（PCの5.5rem相当）。SPでは自動で小さく。 */
  font-size: clamp(28px, 8.15vw, 88px);
  line-height: 1.05;
}

/* =========================
   店舗外観画像
   ========================= */
.store-photo {
  text-align: center;
  margin: 0;
  padding: 0 30px;
  box-sizing: border-box;   /* ★追加：padding込みで100%に納める */
  width: 100%;              /* ★追加：親幅にフィット */
}

.store-img {
  width: 100%;          /* ★変更：端末幅にフィット */
  max-width: 950px;     /* ★追加：元画像より大きくしない保険 */
  height: auto;         /* ★変更：縦横比を維持 */
  object-fit: cover;
  display: inline-block;
}

/* =========================
   店舗詳細テキスト
   ========================= */
.store-detail {
  text-align: center;
  font-family: 'M PLUS Rounded 1c', sans-serif; /* 丸文字 */
  color: #333;          /* 濃いグレー */
  line-height: 1.5;     /* 読みやすい行間 */
  margin: 20px auto;    /* 上下余白 */
  max-width: 800px;     /* 読みやすい幅 */
}

.store-name {
  font-size: 1.7rem;
  font-weight: 600;     /* 少し太字 */
  color: #916e41;       /* 茶色 */
  margin-bottom: 0;
}

.store-address,
.store-access,
.store-hours,
.store-url {
  font-size: 0.9rem;
  font-weight: 400;     /* 標準の太さ */
  margin-bottom: 10px;
}

.store-url a {
  color: #4aaa4c;
  text-decoration: none;
}
.store-url a:hover {
  color: #4aaa4c;       /* 緑に変化 */
  text-decoration: underline;
}

.store-tel {
  color: #4aaa4c;                /* 標準は黒 */
  text-decoration: none;       /* 下線なし */
  font-weight: 500;            /* 少し強調 */
}
.store-tel:hover {
  color: #4aaa4c;              /* ホバーで緑 */
  text-decoration: underline;  /* 下線表示 */
}

.staff-movie-txt {
  font-size: 0.9rem;
  font-weight: 400;     /* 標準の太さ */
  margin-bottom: 10px;
}

.staff-movie-txt strong {
	color: #916e41; font-size: 120%; font-weight: 600;
}

.staff-movie {
	font-size: 85%; color:#999999;
}

.stuff-info{
  width: 100%;
  aspect-ratio: 1080 / 270;                 /* ← 高さを比率から自動算出 */
  background: url("../images/lptenpo01_relaxbody.webp") center / cover no-repeat;
  position: relative;
  text-align: center;
  margin-bottom: 0;
}

.stuff-info-sp{
	margin-top: 20px;
}

.staff-info-txt {
  font-size: 1.2rem;
  font-weight: 400;     /* 標準の太さ */
  margin:　0 0 15px 0;
}

.staff-info-txt strong {
	color: #916e41; font-size: 120%; font-weight: 600;
}

.staff-info-txt-movie {
	font-size: 70%; color:#999999;
}

/* === スタッフ紹介ボタン（SP） === */
:root{
  --rb-staff-btn-bg: #916e41;   /* リラクボディの緑 */
  --rb-staff-btn-fg: #fff;
  --rb-staff-btn-radius: 10px; /* 角丸（丸カプセル） */
  --rb-staff-btn-shadow: 0 4px 10px rgba(0,0,0,.05);
}

.rb-btn-staff{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 12px 20px;
  min-width: 210px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: var(--rb-staff-btn-fg);
  background: var(--rb-staff-btn-bg);
  border-radius: var(--rb-staff-btn-radius);
  box-shadow: var(--rb-staff-btn-shadow);
  text-decoration: none;
  transition: transform .12s ease, opacity .12s ease, box-shadow .2s ease;
  margin: 20px auto 20px auto;
}
.rb-btn-staff:active{ transform: translateY(1px); opacity: .9; }

/* 行の中央に置きたい時のユーティリティ（必要な時だけ親に付与） */
.rb-btn-center{ display:flex; justify-content:center; }


/* =========================
   店舗情報：Google Map
   ========================= */
.store-map {
  width: 100%;              /* ★変更：幅は100%に */
  height: 270px;
  margin: 0 auto 30px auto;
  padding: 0 30px;
  box-sizing: border-box;   /* ★追加：padding込みで収める */
}

.store-map iframe {
  width: 100%;
  height: 100%;
  border: 0;            /* 枠線なし */
  display: block;
}

/* =========================
   SP: 画像6枚グリッド（3列×2行）
   ========================= */

:root{
  --pad: 10px;    /* 外側余白（自由に調整OK） */
  --gapx: 10px;   /* 横の間隔 */
  --gapy: 14px;   /* 縦の間隔 */
}

.v{
  width: 100%;
  margin: 0 auto 15px auto;
  padding: 0 var(--pad) var(--pad) var(--pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ← 3列に修正 */
  gap: var(--gapy) var(--gapx);
  box-sizing: border-box;
}

.v__item{ display:block; }

.v__item img{
  width: 100%;   /* ← 1frごとの幅にフィット */
  height: auto;
  display: block;
}

/* ===== 動画：SPフルスクリーンオーバーレイ ===== */
@media (max-width: 1023.98px) {
  /* オーバーレイ本体 */
.rb-video-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;  /* ← 4辺を明示 */
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

  /* 動画コンテナ（縦横フル／余白なし） */
.rb-video-frame {
  position: relative;
  width: 100%;
  height: 100%;
}
@supports (height: 100svh) {
  .rb-video-frame { height: 100svh; }  /* ★Safari 16.4+ならこちらが使われる */
}

  /* iframe / video を全面にフィット */
  .rb-video-frame iframe,
  .rb-video-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    outline: none;
    object-fit: contain;   /* 端末に合わせて全体表示（トリミング無し） */
    background: #000;
  }

  /* 閉じる（×）…囲い無し・大きめ・白文字＋影で視認性UP */
  .rb-video-close {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 10000;
    appearance: none;
    border: none;
    background: none;
    color: #fff;
    font-size: 36px;       /* 大きめ */
    line-height: 1;
    padding: 8px;          /* タップしやすく */
    cursor: pointer;
    text-shadow:
      0 2px 6px rgba(0,0,0,.85),
      0 0 2px rgba(0,0,0,.85);
  }
  .rb-video-close:active { opacity: .8; }

  /* 背景スクロール抑止 */
  body.is-video-open {
    position: fixed;     /* ← 追加 */
    width: 100%;         /* ← 追加 */
    overflow: hidden;
    touch-action: none;
  }
}

/* ===== スマホ用スライダー（1枚固定表示／透過対応／余白ゼロ） ===== */
@media (max-width: 1023.98px) {

  /* セクション＆ビューポート（Safari初期計測安定化） */
  .rb-slider { margin: 0; padding: 0; }
  .rb-slider .rb-slider__viewport,
  .rb-slider .swiper {
    position: relative;
    width: 100%;
    height: auto;              /* 高さは画像に追従（JSでupdateあり） */
    margin: 0;
    padding: 0;
    box-sizing: border-box;    /* ← 端まで広げてもはみ出さない */
    background: transparent;   /* 透過.webpの下地を出さない */
    overflow: hidden;
  }

  /* ラッパーは幅100%で計測させる */
  .rb-slider .swiper-wrapper{
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }

  /* スライド：常に100%幅で初期化（Safariの1枚目が小さくなる対策） */
  .rb-slider .swiper-slide{
    width: 100% !important;    /* ★初期全幅を強制 */
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    height: auto;              /* 画像の高さに合わせる */
    display: block;
    background: transparent;
  }

  /* 画像：必ずブロック化＋幅100%＋高さauto（containで切り抜かない） */
  .rb-slider .swiper-slide img{
    display: block;
    width: 100%;
    height: auto;              /* ★初期表示での縦方向の誤計測を防ぐ */
    object-fit: contain;       /* トリミング無しで全体表示 */
    margin: 0; padding: 0; border: 0;
    background: transparent;
    image-rendering: auto;
    -webkit-transform: translateZ(0); /* 描画安定 */
  }

  /* ===== 前へ／次へボタン（端に小さめ領域：アイコンの約1.5倍） ===== */
  .rb-slider .rb-slider__btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;               /* 20pxアイコンの約1.5倍 */
    height: 48px;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 5;
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }
  .rb-slider .rb-slider__btn--prev{ left: 6px; }
  .rb-slider .rb-slider__btn--next{ right: 6px; }

  /* アイコン（白シェブロン＋ドロップシャドウ） */
  .rb-slider .rb-slider__btn::before{
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml;utf8,\
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
        <path fill="%23FFFFFF" d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>\
      </svg>') center/contain no-repeat;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
  }
  .rb-slider .rb-slider__btn--next::before{ transform: scaleX(-1); }

  /* タップ時の薄いシェード（ボタン領域内のみ） */
  .rb-slider .rb-slider__btn:active::after{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.10);
    border-radius: 4px;
  }
}


/* ===== Q&A（スマホ） ===== */
@media (max-width: 1023.98px) {
  :root{
    --faq-bg: #f7f3ee;      /* 淡いベージュ */
    --faq-border: #cccccc;  /* 薄い境界線 */
    --faq-q: #27b3b0;       /* Q色 */
    --faq-a: #e46a6a;       /* A色 */
    --faq-text: #3d3d3d;
  }

  /* セクション */
  .rb-faq--pc{
    max-width: 100%;
    margin: 0 auto 35px auto;
    padding: 0 14px;
    counter-reset: faq;
  }

  /* Q1/A1 ブロック間だけ余白をつける（QとAは密着） */
  .rb-faq__item{ margin: 3px 0 18px 0; }

  /* ── 質問ボタン（左寄せ・同一行右端に三角） ───────── */
  .rb-faq__q{ margin: 0; }
  .rb-faq__q button{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;          /* 左寄せ */
    gap: 10px;
    padding: 16px 16px;                    /* 親指で押しやすい余白 */
    color: var(--faq-text);
    font-size: clamp(16px, 4.5vw, 20px);   /* スマホで見やすい大きさ */
    line-height: 1.55;
    background: var(--faq-bg);
    border: 1px solid var(--faq-border);
    border-radius: 0;                      /* 角丸なし */
    box-shadow: none;                      /* 影なし */
    cursor: pointer;
    position: relative;
    text-align: left;	  
    -webkit-tap-highlight-color: transparent;
  }
  /* 「Q1.」は自動連番で左先頭に表示 */
  .rb-faq__q button::before{
    counter-increment: faq;
    content: "Q" counter(faq) ".";
    color: var(--faq-q);
    font-weight: 700;
    margin-right: 4px;
    flex: 0 0 auto;
  }

  /* 右端の三角（同じ行の一番右） */
  .rb-faq__chev{
    margin-left: auto;                     /* 右端へ */
    width: 22px; height: 22px;
    opacity: .55;
    transition: transform .2s ease, opacity .2s ease;
    -webkit-mask: url('data:image/svg+xml;utf8,\
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
        <path fill="black" d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"/>\
      </svg>') center/20px 20px no-repeat;
            mask: url('data:image/svg+xml;utf8,\
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
        <path fill="black" d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"/>\
      </svg>') center/20px 20px no-repeat;
    background: #8c8c8c;
    flex: 0 0 22px;
  }
  .rb-faq__q [aria-expanded="true"] .rb-faq__chev{
    transform: rotate(180deg);
    opacity: .75;
  }

  /* ── 回答パネル（Qと密着・角丸なし影なし） ───────── */
  .rb-faq__a{
    border: 1px solid var(--faq-border);
    border-top: none;                      /* Qと線を共有して密着 */
    border-radius: 0;                      /* 角丸なし */
    background: #fff;
    overflow: hidden;                      /* 開閉アニメのはみ出し抑制 */
  }

  /* JSが自動で作る内側ラッパ（予備定義） */
  .rb-faq__a-inner{
    padding: 16px 16px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--faq-text);
    font-size: clamp(16px, 4.5vw, 20px);
    line-height: 1.3;
    text-align: left;
  }
  /* 「A1.」の自動連番 */
  .rb-faq__a-inner::before{
    content: "A" counter(faq) ".";
    color: var(--faq-a);
    font-weight: 700;
    flex: 0 0 auto;
  }

  .rb-faq__a p{ margin: 0; }
}

/* ===== Footer (SP)：HTML共通／点線と色指定、余白は変数で調整可 ===== */
@media (max-width: 1023.98px) {
  :root{
    --rbf-bg: #f4d54a;            /* ベースの黄色 */
    --rbf-text: #333333;          /* 文字色＆リンク色 */
    --rbf-green: #20a66b;         /* 県名カラー */
    --rbf-dots: #333333;          /* 点線色 */
    --sp-pad-x: 14px;             /* 横の基本パディング */
    --sp-group-pad-y: 14px;       /* 県ブロック上下余白（後から変更しやすい） */
  }

  .rb-footer--pc{
    background: var(--rbf-bg);
    color: var(--rbf-text);
    font-size: 90%;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
  }

  /* リンク：色は#333、タップ/フォーカスで下線 */
  .rb-footer--pc a{
    color: var(--rbf-text);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .rb-footer--pc a:hover,
  .rb-footer--pc a:active,
  .rb-footer--pc a:focus{
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* 横幅＆左右パディング（各ブロック共通） */
  .rb-footer--pc > *{
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--sp-pad-x);
    padding-right: var(--sp-pad-x);
    max-width: 100%;
  }

  /* ロゴ（画像化） */
  .rb-footer__logo{
    padding: 16px 0 12px;
    margin: 0;
  }
  .rb-footer__logo img{
    display: block;
    width: 100%;
    height: auto;
  }

  /* リード文（中央寄せ・改行OK） */
  .rb-footer__lead{ text-align: center; padding: 8px 0 12px; }
  .rb-footer__lead p{ margin: 4px 0; font-size: 90%; line-height: 1.5; }

  /* 会社名（緑・やや大きめ） */
  .rb-footer__company{
    text-align: center;
    color: var(--rbf-green);
    font-weight: 700;
    font-size: 120%;
    margin: 12px 0 6px;
  }

  /* 住所/TEL（中央寄せ、タップしやすいよう行間確保） */
  .rb-footer__address{
    text-align: center;
    font-style: normal;
    margin: 0 0 14px;
  }
  .rb-footer__address p{ margin: 3px 0; }

  /* 店舗一覧 */
  .rb-footer__stores{ padding: 6px 0 20px; }

  /* 各県ブロック：下だけ点線、宮城(最初)の上にだけ点線 */
  .rb-footer__group{
    padding-top: var(--sp-group-pad-y);
    padding-bottom: var(--sp-group-pad-y);
    border-bottom: 2px dotted var(--rbf-dots);
	margin: 0 20px;	  
    /* 余白を個別に調整したい場合：style="--sp-group-pad-y:16px" をHTML側で指定 */
  }
  .rb-footer__group:first-child{
    border-top: 2px dotted var(--rbf-dots);
  }

  /* 県名 */
  .rb-footer__pref{
    color: var(--rbf-green);
    text-align: center;
    margin: 0 0 6px;
    font-weight: 700;
    font-size: 120%;
  }

  /* 店名リンク（中央寄せ・折返し時の間隔） */
  .rb-footer__links{
    text-align: center;
    margin: 0;
  }
  .rb-footer__links a{
    display: inline-block;
    margin: 4px 8px;
    font-size: 100%;
    line-height: 1.7;
  }

  /* コピーライト（画像化） */
  .rb-footer__copyright{
    padding: 0;
    margin-top: 24px;   /* 必要に応じて調整OK */
  }
  .rb-footer__copyright img{
    display: block;
    width: 100%;
    height: auto;
  }
}

/* ======== Shop List (SP) ======== */
/* ファーストビューはSP用CSSのみ適用される想定（link要素で制御）。
   そのため本ファイルでは @media を使わずベタ書きで上書きします。 */

/* コンテナ：左右/上下に十分な余白、幅は100% */
.rb-shop {
  width: 100%;
  margin: 0 auto 48px auto;
  padding: 0 18px;
  box-sizing: border-box;
}

/* 上部アンカー（PCと同デザインの“緑ピル型”） */
.rb-shop-anchor{
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  justify-content: center;
  margin: 10px 0 28px;
}
.rb-shop-anchor a,
.rb-shop-anchor a:link,
.rb-shop-anchor a:visited {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  background: #f2f6f3;
  color: var(--menu-hover, #4aaa4c);
  text-decoration: none;                 /* 下線を消す（紫リンク対策） */
  font-weight: 700;
  font-size: 1.06rem;
  border: 1px solid #e3eee5;
}
.rb-shop-anchor a:hover,
.rb-shop-anchor a:active,
.rb-shop-anchor a:focus {
  filter: brightness(.96);
  outline: none;
}

/* セクションタイトル：PCと同じ“緑文字＋薄緑の全幅アンダーライン” */
.rb-shop-section{ display:block; }

.rb-shop-title{
  width: 100%;
  margin: 36px 0 20px;
  text-align: left;
  line-height: 1;
  position: relative;
}
.rb-shop-title span{
  background: none;
  color: var(--menu-hover, #4aaa4c);
  padding: 0;
  border-radius: 0;
  font-weight: 700;
  font-size: 1.6rem;                     /* モバイル見出しサイズ */
  text-decoration: none;
}
.rb-shop-title::after{
  content:"";
  display:block;
  height: 4px;
  width: 100%;
  background: #e9f4eb;                   /* 薄い緑ライン */
  margin-top: 6px;
}

/* グリッド：スマホは1列（PCは3列） */
.rb-shop-grid{
  display: grid;
  grid-template-columns: 1fr;            /* ★1列に */
  gap: 24px;                             
}

/* カード：PCと同じラウンド&シャドウ */
.rb-shop-card{
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  border: 1px solid #eee;
  display: grid;
  grid-template-rows: auto 1fr;
}

/* サムネール：PCと近い縦感。横幅いっぱい＆角は親継承 */
.rb-shop-thumb{ display:block; line-height:0; }
.rb-shop-thumb img{
  width: 100%;
  height: auto;
  aspect-ratio: 4.1 / 3;                 /* PCと同等の比率寄り（縦やや深め） */
  object-fit: cover;
  transition: transform .35s ease;
}
.rb-shop-card:hover .rb-shop-thumb img{ transform: scale(1.02); }

/* テキスト領域：PCと同テイストで少しコンパクトに */
.rb-shop-info{ padding: 16px 14px 18px; }
.rb-shop-name{
  margin: 0 0 6px;
  color: var(--menu-hover, #4aaa4c);
  font-size: 1.4rem;
  font-weight: 600;
}
.rb-shop-addr{
  margin: 0 0 10px;
  color: #666;
  line-height: 1.6;
  font-size: 1.0rem;                    /* 視認性を保ちつつPCより僅かに小さく */
}

/* 詳しく見るボタン：PCと同カラー */
.rb-shop-more{
  display: inline-flex; align-items: center; gap:.4em;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f7f2ec;
  color: #916e41;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid #ecdccc;
  font-size: .98rem;
}
.rb-shop-more::after{ content:"▶"; font-size: .85em; }
.rb-shop-more:hover{ filter: brightness(.97); }

/* 余白の調整（下にカードが続くため、節度ある間隔） */
.rb-shop-section + .rb-shop-section { margin-top: 10px; }

.rb-shop-txt {
	font-size: 75%; color:#999999;
}

.rb-plan-grid { grid-template-columns: 1fr; }


/* ==== カウントダウンバナー ==== */
@media screen and (max-width: 959px) {
  /* アンカー自体を固定バナーにする */
  #relaxbody-bottom-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;                 /* クリック領域を全幅に */
    background-color: #ffdd41;
    text-align: center;
    font-family: sans-serif;
    padding: 10px;
    font-size: 14px;
    line-height: 1.5;
    font-weight: bold;
    z-index: 9999;                  /* 最前面 */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    color: inherit;                 /* リンク色を継承 */
    text-decoration: none;          /* 下線を消す */
    -webkit-tap-highlight-color: transparent;
  }

  /* 子要素のクリック干渉を防ぎ、常にアンカーへヒットさせる */
  #relaxbody-bottom-banner * { pointer-events: none; }

  #relaxbody-bottom-banner strong {
    display: block;
    font-size: 16px;
    color: #4aaa4c;
  }

  .text-label {
    color: #000;
    margin-left: 4px;
    font-weight: normal;
  }

  .countdown-box {
    display: inline-block;
    background: #fff;
    color: #4aaa4c;
    padding: 2px 6px;
    margin: 0 2px;
    border-radius: 4px;
    min-width: 36px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
  }

  #relaxbody-bottom-banner.hidden { display: none; }
}


/* ==== Back to Top（SP）==== */
:root{
  /* バナーの下端（SPのカウントダウンの固定位置） */
  --rb-banner-bottom: 65px;     /* 例：カウントダウンが bottom:50px */
  --rb-btt-gap: 0;           /* バナーとの隙間 */
  --rb-btt-size: 37px;          /* ボタンの一辺 */
  --rb-btt-bg: #4aaa4c;         /* リラクボディの緑 */
  --rb-btt-color: #fff;         /* 矢印色 */
  --rb-btt-z: 10000;            /* バナーより上に出したい場合はバナーより大きく */
}

#rb-backtotop{
  position: fixed;
  right: 0;
  bottom: calc(var(--rb-banner-bottom) + var(--rb-btt-gap)); /* すぐ上に配置 */
  width: var(--rb-btt-size);
  height: var(--rb-btt-size);
  display: grid;
  place-items: center;
  background: var(--rb-btt-bg);
  color: var(--rb-btt-color);
  border: 0;
  border-radius: var(--rb-btt-radius);
  box-shadow: var(--rb-btt-shadow);
  z-index: var(--rb-btt-z);
  cursor: pointer;
  opacity: 0;                   /* 初期は非表示、スクロールで表示 */
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, background-color .2s ease;
}
#rb-backtotop .rb-btt__icon{ pointer-events: none; }

#rb-backtotop.is-visible{
  opacity: 1;
  transform: translateY(0);
}

#rb-backtotop:active{ transform: translateY(1px); }

/* 端末が「動き減らす」設定のときはアニメ最小化 */
@media (prefers-reduced-motion: reduce){
  #rb-backtotop{ transition: none; }
}

/* 画面最下部でもはみ出さないように安全域を少し確保（任意） */
@media (max-height: 540px){
  #rb-backtotop{ bottom: calc(var(--rb-banner-bottom) + 4px); }
}

/* SP時の可視化保険（競合に勝つ） */
@media (max-width: 959px){
  #rbcb-banner{ display:block !important; }
}