@charset "utf-8";
/* ==========================================================================
   トップページ リニューアル 変更差分CSS

   本番CSS（css-renewal/ 配下のコピー）は書き換えず、
   このファイルに「変更した内容だけ」を積み上げていく。
   本番へ反映するときは、ここの内容を移せばよい。

   ------------------------------------------------------------------
   2026-08-16  ヘッダー背景を確定カラー #0ccdff に変更
   ------------------------------------------------------------------
   ========================================================================== */

:root{
  --loop-key: #0ccdff;   /* 確定キーカラー */
}

/* --------------------------------------------------------------
   ヘッダー背景（本番は #4ea4bb）
   PC・下層ページ・スマホのハンバーガーボタンをまとめて置き換える
   -------------------------------------------------------------- */
.header-content,
.header-sub .header-content,
.header #drawer-icon{
  background-color: var(--loop-key);
}


/* --------------------------------------------------------------
   2026-08-16  ファーストビューのキャッチコピー変更

   1行目： FITNESS IN LIFE          （本番のまま・変更なし）
   2行目： 人生にフィットネスを。    → 運動は、ひとりで頑張らなくていい。

   2行目は本番が PC 50px の指定。文字数が10文字→18文字に増えるため、
   1行に収まるようサイズを詰め、行間と字間を整えている。
   -------------------------------------------------------------- */
.header-mov-title p.is-jp{
  font-size: 17px;          /* スマホ */
  line-height: 1.8;
  letter-spacing: .04em;
}
@media screen and (min-width: 769px){
  .header-mov-title p.is-jp{
    font-size: 34px;        /* タブレット */
  }
}
@media screen and (min-width: 1200px){
  .header-mov-title p.is-jp{
    font-size: 40px;        /* PC */
  }
}


/* --------------------------------------------------------------
   2026-08-16  sec01 の背景画像を差し替え

   本番は CSS に base64 で画像を埋め込んでいる（SP用859x772 / PC用1802x772）。
   ここで外部ファイル参照に上書きし、差し替えやすくしている。
   ※ パスは css-renewal/ からの相対指定
   -------------------------------------------------------------- */
.top .sec01{
  background-image: url(../img-renewal/sec01-bg.jpg?ver=20260816);
  background-size: cover;
  background-position: center 30%;   /* 顔が切れないよう上寄せ */
}
@media screen and (min-width: 768px){
  .top .sec01{
    background-image: url(../img-renewal/sec01-bg.jpg?ver=20260816);
    background-position: center 28%; /* 本番の -300px は旧画像用のズレ調整のため打ち消す */
  }
}
@media screen and (min-width: 1000px){
  .top .sec01{
    background-position: center 28%;
  }
}


/* --------------------------------------------------------------
   2026-08-16  sec01 のコンテンツ差し替え（お客様ご指示）

   ・見出し画像(sec01-title.png)      → テキスト「あなたの『続けたい』を、…」
   ・特徴タグ画像(sec01-list.png)     → 会員さまの声4件
   ・背景が明るい写真に変わったため、白文字では読めない。文字は濃色にする。
   -------------------------------------------------------------- */

/* 明るい写真の上でも本文が読めるよう、テキスト側にごく薄い下地を敷く */
.top .sec01 .sec01-txt{
  background: rgba(255,255,255,.82);
  border-radius: 12px;
  padding: 40px 32px;
}

/* キャッチコピー */
.rn-catch{
  font-size: 22px;
  line-height: 1.7;
  font-weight: 500;
  letter-spacing: .04em;
  color: #14424a;
  margin-bottom: 16px;
}
/* リード（初心者が安心して続けられる…） */
.rn-lead{
  font-size: 14px;
  line-height: 1.9;
  color: #2f5f66;
  margin-bottom: 28px;
}

/* 既存の説明文も濃色に */
.top .sec01-txt-desc{
  color: #2f5f66;
}

@media screen and (min-width: 769px){
  .top .sec01 .sec01-txt{
    padding: 48px 44px;
  }
  .rn-catch{ font-size: 34px; margin-bottom: 20px; }
  .rn-lead{  font-size: 16px; margin-bottom: 34px; }
}
@media screen and (min-width: 1200px){
  .rn-catch{ font-size: 40px; }
}


/* --------------------------------------------------------------
   2026-08-16  sec01 のレイアウト調整（PC）

   ・左40%は背景写真（女性の顔）を見せる領域として空ける
   ・テキストは右60%に寄せる
   ・文字を目立たせる（サイズ拡大・下地の不透明度アップ・影）
   -------------------------------------------------------------- */

@media screen and (min-width: 769px){

  /* 背景：女性の顔が左側に来るよう左寄せに */
  .top .sec01{
    background-position: left 22%;
  }

  /* テキストは右60%へ。左40%は写真を見せる余白にする */
  .top .sec01 .sec01-txt{
    width: 60%;
    margin-left: auto;      /* 右寄せ＝左に40%の余白ができる */
    background: rgba(255,255,255,.9);
    padding: 52px 48px;
    box-shadow: 0 6px 30px rgba(20,66,74,.10);
  }

  /* 文字を強調 */
  .rn-catch{
    font-size: 38px;
    font-weight: 600;
    line-height: 1.6;
    color: #10353c;
  }
  .rn-lead{
    font-size: 17px;
    font-weight: 500;
    color: #1f5560;
  }
  .top .sec01-txt-desc{
    font-size: 15px;
    line-height: 2;
  }
}

@media screen and (min-width: 1200px){
  .rn-catch{ font-size: 44px; }
  .rn-lead{  font-size: 18px; }
}


/* ==========================================================================
   2026-08-16  ファーストビュー右カード（デザインカンプ準拠）

   構成： 見出し（画像差込予定）／黒帯／うれしい3つのフリー／締め文
   色　： 濃緑 #1f4a45  金 #b99b5a  黒帯 #1b1b1b
   ========================================================================== */

:root{
  --rn-green: #1f4a45;   /* 見出し・本文の濃緑 */
  --rn-gold:  #b99b5a;   /* 金のアクセント     */
  --rn-ink:   #1b1b1b;   /* 黒帯               */
}

/* --------------------------------------------------
   カード本体
   -------------------------------------------------- */
.rn-card{
  background: rgba(255,255,255,.94);
  border-radius: 18px;
  padding: 34px 24px 30px;
  box-shadow: 0 10px 40px rgba(31,74,69,.13);
  text-align: center;
}

/* --------------------------------------------------
   PC
   -------------------------------------------------- */
@media screen and (min-width: 769px){
  .rn-card{ padding: 44px 44px 38px; }
}


/* ==========================================================================
   2026-08-16  ファーストビューをご支給画像で構成

   ・背景　：img-renewal/sec01-bg.jpg（1802x772・本番の背景枠と同寸）
   ・右カード：3枚の透過PNGを縦に並べる
       fv-lead.png 1274x408 ／ fv-band.png 1192x190 ／ fv-free.png 1116x412
     カンプの比率を保つため、それぞれ最大幅を変えている
   ========================================================================== */

/* 背景差し替え（透かし入りプレビュー版 → ご支給版） */
.top .sec01{
  background-image: url(../img-renewal/sec01-bg.jpg?ver=20260816b);
}

/* カード内の画像パーツ */
.rn-fv{ margin: 0 auto; }
.rn-fv img{
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.rn-fv--lead{ max-width: 100%;   margin-bottom: 20px; }
.rn-fv--band{ max-width: 93.6%;  margin-bottom: 22px; }  /* 1192/1274 */
.rn-fv--free{ max-width: 87.6%;  margin-bottom: 18px; }  /* 1116/1274 */

@media screen and (min-width: 769px){
  .rn-fv--lead{ margin-bottom: 24px; }
  .rn-fv--band{ margin-bottom: 26px; }
  .rn-fv--free{ margin-bottom: 22px; }
}


/* --------------------------------------------------------------
   2026-08-16  背景の比率崩れを修正

   問題：背景画像 1802x772（2.33:1）に対し、セクションが 1512x1028（1.47:1）
         と縦長すぎたため、cover で1.33倍に拡大され、左右888pxがカットされて
         人物が過度に拡大されていた。

   対策：上下の余白とカード内の間隔を詰めてセクションの高さを下げ、
         画像本来の比率に近づける。
   -------------------------------------------------------------- */
@media screen and (min-width: 769px){
  /* 本番の padding 160/165px を詰める */
  .top .sec01{
    padding-top: 60px;
    padding-bottom: 60px;
    background-position: center 30%;
  }

  /* カードの余白と各パーツの間隔も詰めて高さを抑える */
  .rn-card{ padding: 30px 34px 26px; }
  .rn-fv--lead{ margin-bottom: 16px; }
  .rn-fv--band{ margin-bottom: 16px; }
  .rn-fv--free{ margin-bottom: 14px; }
  .rn-card__foot{ font-size: 14px; }
}


/* --------------------------------------------------------------
   2026-08-16  sec01 の縦幅を約80%に

   796px → 約637px を目標に、カードごと縮小して高さを詰める。
   （画像パーツは比例縮小されるため、レイアウトは崩れない）
   -------------------------------------------------------------- */
@media screen and (min-width: 769px){
  .top .sec01{
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .rn-card{
    max-width: 82%;      /* カード幅を狭める＝中の画像も比例縮小 */
    margin-left: auto;   /* 右寄せは維持 */
    padding: 24px 28px 20px;
  }
  .rn-fv--lead{ margin-bottom: 13px; }
  .rn-fv--band{ margin-bottom: 13px; }
  .rn-fv--free{ margin-bottom: 11px; }
  .rn-card__foot{ font-size: 13px; }
}


/* --------------------------------------------------------------
   2026-08-16  縦幅80%の調整（修正版）

   前回 .rn-card に max-width を書いたが、詳細度の高い
   「.top .sec01 .sec01-txt { width:60% }」が優先されて効かなかった。
   同じセレクタで width を指定し直してカードを縮小する。
   -------------------------------------------------------------- */
@media screen and (min-width: 769px){
  .top .sec01 .sec01-txt{
    width: 45%;          /* 2026-08-16 ご指定により 50% → 45% */
    max-width: none;
    padding: 22px 26px 18px;
  }
  .top .sec01{
    padding-top: 34px;
    padding-bottom: 34px;
  }
  .rn-fv--lead{ margin-bottom: 11px; }
  .rn-fv--band{ margin-bottom: 11px; }
  .rn-fv--free{ margin-bottom: 9px; }
  .rn-card__foot{ font-size: 12px; }
}


/* ==========================================================================
   2026-08-16  /ex/ ページの ex-title を sec01 の次に配置

   スタイルは本番 css/taiken.css の定義をそのまま移植。
   背景画像は taiken.css に base64 で埋め込まれていたものを抽出し、
   外部ファイル（img-renewal/ex-title-bg.png）として参照している。
   ※ taiken.css 全体は読み込まない（他セクションへの影響を避けるため）
   ========================================================================== */

.rn-ex-title{
  background-image: url(../img-renewal/ex-title-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-position-x: 15%;
  background-color: #7f8e95;
  height: 100vh;
  min-height: 600px;
  position: relative;
}
.rn-ex-title .ex-title-wrap{
  max-width: 640px;
  width: 90%;
  position: absolute;
  top: 35%;
  right: 5%;
}
.rn-ex-title .ex-title-wrap h2{ margin-bottom: 10px; }
.rn-ex-title .ex-title-wrap h2 img{ width: 100%; height: auto; display: block; }

.rn-ex-title .ex-title-wrap-en{
  font-size: 16px;
  font-family: "Yu Mincho Light", "YuMincho", "Yu Mincho", "游明朝体", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "メイリオ", Meiryo, sans-serif;
  color: #d1d1d1;
  display: block;
  text-align: right;
  padding-right: 130px;
  position: relative;
  margin-bottom: 15px;
}
.rn-ex-title .ex-title-wrap-en:after{
  position: absolute;
  right: 0;
  top: 10px;
  width: 117px;
  height: 2px;
  background-color: #4ea4bb;
  content: "";
}
.rn-ex-title .ex-title-wrap p{
  font-size: 18px;
  text-align: right;
  color: #fff;
  line-height: 2;
  margin: 0;
}

@media screen and (min-width: 768px){
  .rn-ex-title{
    background-size: 180%;
    height: 500px;
    min-height: 500px;
    background-position: center;
  }
  .rn-ex-title .ex-title-wrap-en{ margin-bottom: 35px; }
}
@media screen and (min-width: 1000px){
  .rn-ex-title{
    padding: 165px 0 235px;
    background-position: center;
    background-size: cover;
    height: 627px;
    min-height: 627px;
  }
  .rn-ex-title .ex-title-wrap{
    left: 55%;
    width: 40%;
  }
}


/* --------------------------------------------------------------
   2026-08-16  ex-title 内の「体験・入会案内」ボタン

   ・見た目は本番の com-btn--gold（金の枠線＋矢印）をそのまま使う
   ・ex-title-wrap は右寄せのブロックなので、その中で右下に配置する
   -------------------------------------------------------------- */
.rn-ex-btn{
  margin-top: 24px;
}
/* 本番の com-btn--gold は中央寄せ（margin:0 auto）のため、右寄せに上書き */
.rn-ex-btn a{
  margin: 0 0 0 auto;
  background: rgba(0,0,0,.18);   /* 写真の上でも枠線が見えるようにごく薄い下地 */
}

@media screen and (min-width: 768px){
  .rn-ex-btn{ margin-top: 30px; }
  .rn-ex-btn a{ max-width: 300px; }
}
@media screen and (min-width: 1000px){
  .rn-ex-btn{ margin-top: 34px; }
}


/* --------------------------------------------------------------
   2026-08-16  ex-title ボタンの矢印位置を修正

   本番の com-btn--gold は矢印を right:85px（PC）に置いているが、
   これはボタン幅342px前提。今回は300pxに縮めたため相対的に内側へ寄り、
   テキスト「体験・入会案内」と重なっていた。右端寄りに直す。
   （詳細度を .rn-ex-title 付きにして本番のメディアクエリ指定に確実に勝たせる）
   -------------------------------------------------------------- */
.rn-ex-title .rn-ex-btn a:after{
  right: 24px;
}
@media screen and (min-width: 768px){
  .rn-ex-title .rn-ex-btn a:after{
    right: 26px;
  }
}
@media screen and (min-width: 1000px){
  .rn-ex-title .rn-ex-btn a:after{
    right: 28px;
  }
}


/* --------------------------------------------------------------
   2026-08-16  ex-title の背景をご支給画像に差し替え
   （旧: taiken.css から抽出した ex-title-bg.png 1600x607）
   （新: loop_ex.png → ex-title-bg2.jpg 1645x607）
   -------------------------------------------------------------- */
.rn-ex-title{
  background-image: url(../img-renewal/ex-title-bg2.jpg?ver=20260816);
}


/* --------------------------------------------------------------
   2026-08-16  ex-title の背景画像を一旦非表示にし、単色 #302f2e に

   ※ 画像ファイル（ex-title-bg.png / ex-title-bg2.jpg）は残してあるので、
     background-image の行を消せばいつでも画像表示に戻せる。
   -------------------------------------------------------------- */
.rn-ex-title{
  background-image: none;
  background-color: #302f2e;
}


/* --------------------------------------------------------------
   2026-08-16  ex-title 左側の写真（背景画像ではなく img 要素）

   ex-title は position:relative、テキスト側(.ex-title-wrap)は
   絶対配置で右に置かれているため、写真も絶対配置で左半分に収める。
   -------------------------------------------------------------- */
.rn-ex-photo{
  margin: 0;
}
.rn-ex-photo img{
  width: 100%;
  height: auto;
  display: block;
}

@media screen and (min-width: 1000px){
  .rn-ex-photo{
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    padding-left: 30px;   /* 本番 sec02-wrap-col-img-left と同じ左の余白 */
    box-sizing: border-box;
  }
  .rn-ex-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;    /* セクションの高さに合わせて切り抜く */
  }
}


/* --------------------------------------------------------------
   2026-08-16  ファーストビュー動画（4本ローテーション）

   本番は横長動画前提で「width:145% / height:auto」の指定だったが、
   今回の素材は縦型(720x1280)。そのままだと縦に極端に伸びて
   大半が画面外に出るため、object-fit:cover で画面を埋める方式にする。
   -------------------------------------------------------------- */
.header-mov .rn-fv-mov{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: none;
  object-fit: cover;      /* 縦横比を保ったまま画面全体を覆う */
  object-position: center center; /* 2026-08-16 映像の中央が中心に来るように */
}
@media screen and (min-width: 1000px){
  .header-mov .rn-fv-mov{
    width: 100%;
    height: 100%;
  }
}


/* --------------------------------------------------------------
   2026-08-16  ファーストビューの暗幕を薄く

   本番は rgba(0,0,0,0.6) で動画の上に暗い膜を掛けている。
   ご指定により透過を 0.2 にして映像を見えやすくする。
   （背景のドット模様 background-image は本番のまま維持）
   -------------------------------------------------------------- */
.header-mov-bg{
  background-color: rgba(0, 0, 0, 0.2);
}


/* ==========================================================================
   2026-08-17  お客様の声（VOICE）

   ・カード＝「太字の見出し（原文の冒頭1文）」＋「アイコン＋属性」＋「本文」
   ・PCは4カラム1行／星の表記はなし／MOREボタンもなし
   ========================================================================== */

.rn-voice{
  background: #fbfbfa;
  padding: 56px 0;
}

/* 見出し */
.rn-voice__head{
  text-align: center;
  margin-bottom: 34px;
}
.rn-voice__head-ja{
  font-size: 13px;
  letter-spacing: .16em;
  color: #6b6b68;
  margin-bottom: 6px;
}
.rn-voice__head-en{
  font-family: "Marcellus", "Times New Roman", serif;
  font-size: 34px;
  letter-spacing: .1em;
  color: #302f2e;
  line-height: 1.2;
}

/* カード一覧 */
.rn-voice__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.rn-voice__item{
  background: #fff;
  border: 1px solid #eceae6;
  border-radius: 4px;
  padding: 22px 20px;
  box-shadow: 0 2px 10px rgba(48,47,46,.04);
}

/* 見出し（原文の冒頭1文） */
.rn-voice__lead{
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  color: #302f2e;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid #f0eeea;
}

/* アイコン＋本文 */
.rn-voice__body{
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.rn-voice__icon{
  flex: 0 0 auto;
  width: 62px;
  text-align: center;
}
.rn-voice__icon img{
  width: 54px;
  height: 54px;
  display: block;
  margin: 0 auto 6px;
  border-radius: 50%;
}
.rn-voice__who{
  display: block;
  font-style: normal;
  font-size: 11px;
  line-height: 1.4;
  color: #6b6963;
  letter-spacing: .02em;
}
.rn-voice__txt{
  flex: 1 1 auto;
  font-size: 13px;
  line-height: 1.9;
  color: #4a4845;
}

/* --------------------------------------------------
   PC：4カラム1行
   -------------------------------------------------- */
@media screen and (min-width: 768px){
  .rn-voice{ padding: 70px 0; }
  .rn-voice__head-en{ font-size: 40px; }
  .rn-voice__list{
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media screen and (min-width: 1000px){
  .rn-voice__list{
    grid-template-columns: repeat(4, 1fr);   /* 4カラム1行 */
    gap: 18px;
  }
  .rn-voice__item{ padding: 24px 20px; }
  .rn-voice__lead{ font-size: 15px; }
  .rn-voice__body{ gap: 12px; }
  .rn-voice__icon{ width: 56px; }
  .rn-voice__icon img{ width: 50px; height: 50px; }
}


/* --------------------------------------------------------------
   2026-08-17  お客様の声を sec01 の中へ移動（ご指示）

   ・独立セクションをやめ、sec01 のカードの下に
     コンテンツ幅いっぱい（4カラム1行）で配置
   ・その分 sec01 の高さを広げる
   ・背景写真の上に載るため、見出しは白＋影、カードは不透明度を上げる
   -------------------------------------------------------------- */
.rn-voice--in-sec01{
  background: none;
  padding: 0;
  margin-top: 24px;
}
.rn-voice--in-sec01 .rn-voice__head{
  margin-bottom: 16px;
}
.rn-voice--in-sec01 .rn-voice__head-ja,
.rn-voice--in-sec01 .rn-voice__head-en{
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.rn-voice--in-sec01 .rn-voice__item{
  background: rgba(255,255,255,.95);
  border-color: rgba(255,255,255,.6);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

@media screen and (min-width: 769px){
  .rn-voice--in-sec01{ margin-top: 30px; }

  /* 口コミが入った分、セクションの高さを広げる */
  .top .sec01{
    padding-top: 34px;
    padding-bottom: 44px;
  }
}


/* --------------------------------------------------------------
   2026-08-17  口コミを入れて高くなった分の背景対策

   問題：sec01 が 554px → 936px に伸びたため、cover で背景が 1.21倍に
         拡大され、左右が計672pxカットされて人物が過度に寄っていた。

   対策：PCでは背景を「横幅基準（比率どおり）」で上に配置し、
         はみ出す下側は淡色で埋める。口コミは半透明の白パネルに載せて
         写真との境目をなじませる。
   -------------------------------------------------------------- */
@media screen and (min-width: 769px){
  .top .sec01{
    background-size: 100% auto;   /* 横幅に合わせる＝比率どおり */
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #eaf6fa;    /* 写真の下に出る余白の色 */
  }
}

/* 口コミは白パネルに載せる（写真の上でも読めるように） */
.rn-voice--in-sec01{
  background: rgba(255,255,255,.82);
  border-radius: 6px;
  padding: 22px 20px 24px;
}
.rn-voice--in-sec01 .rn-voice__head-ja,
.rn-voice--in-sec01 .rn-voice__head-en{
  color: #302f2e;
  text-shadow: none;
}
.rn-voice--in-sec01 .rn-voice__item{
  background: #fff;
  border-color: #e6e4df;
}
@media screen and (min-width: 1000px){
  .rn-voice--in-sec01{ padding: 20px 26px 28px; }
}


/* --------------------------------------------------------------
   2026-08-17  FVカードをご支給のパーツPNGに差し替え

   素材（LOOP_FITNESS_UI_parts_transparent_PNG）
     01 手書き見出し    1666x556  … 基準幅
     02 無料バッジ      1554x266
     03 3つのフリー見出し 1382x110
     04 ミネラルウォーター 428x438
     05 タオル           294x438
     06 InBody測定       308x438
     07 安心メッセージ   1016x96

   ・カンプの比率を保つため、01の幅(1666)を100%として各パーツの最大幅を決める
   ・アイコン3点は元画像の高さが438で揃っているので、
     幅を元画像の比率どおりに配分すれば高さが自動的に揃う
   -------------------------------------------------------------- */
.rn-fv--lead{ max-width: 100%;  margin-bottom: 18px; }   /* 1666/1666 */
.rn-fv--band{ max-width: 93.3%; margin-bottom: 22px; }   /* 1554/1666 */
.rn-fv--foot{ max-width: 61.0%; margin: 0 auto; }        /* 1016/1666 */

/* うれしい3つのフリー */
.rn-free{ margin: 0 auto 18px; }
.rn-free__title{
  max-width: 83.0%;              /* 1382/1666 */
  margin: 0 auto 16px;
}
.rn-free__title img{ width: 100%; height: auto; display: block; }

.rn-free__list{
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 83.0%;              /* 見出しと同じ幅に揃える */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.rn-free__item{ margin: 0; }
.rn-free__item img{ width: 100%; height: auto; display: block; }
/* 428:294:308 の比率で配分（合計88%＝残り12%が2つの間隔） */
.rn-free__item--water { width: 36.6%; }
.rn-free__item--towel { width: 25.1%; }
.rn-free__item--inbody{ width: 26.3%; }

@media screen and (min-width: 769px){
  .rn-fv--lead{ margin-bottom: 12px; }
  .rn-fv--band{ margin-bottom: 14px; }
  .rn-free{ margin-bottom: 12px; }
  .rn-free__title{ margin-bottom: 10px; }
}


/* --------------------------------------------------------------
   2026-08-17  ex-title の背景をご支給画像に差し替え／左の写真は一旦非表示

   ・背景　：img-renewal/ex-title-bg3.jpg（1645x607・taiken.png を JPEG 化）
   ・左の写真（.rn-ex-photo / ex-photo.jpg）は display:none で一旦非表示。
     HTML は残してあるので、この1行を消せば戻せる。
   -------------------------------------------------------------- */
.rn-ex-title{
  background-image: url(../img-renewal/ex-title-bg3.jpg?ver=20260817b);
  background-color: #dfe6ea;   /* 画像読み込み前・はみ出し部分の下地 */
}

/* 左に置いていた写真を一旦非表示（戻すときはこのブロックを消す） */
.rn-ex-photo{ display: none; }


/* --------------------------------------------------------------
   2026-08-17  ex-title のテキストに透過の下地を追加

   背景が明るい写真になり白文字が埋もれたため、テキストブロック
   （.ex-title-wrap＝見出し・英字・本文・ボタン）の下に
   半透明の濃色パネルを敷いて可読性を確保する。
   色は写真の寒色に合わせた濃紺グレー。
   -------------------------------------------------------------- */
.rn-ex-title .ex-title-wrap{
  background: rgba(22,32,36,.55);
  border-radius: 6px;
  padding: 26px 24px 30px;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}

@media screen and (min-width: 1000px){
  .rn-ex-title .ex-title-wrap{
    padding: 30px 30px 34px;
  }
}


/* 濃さの調整：英字(#d1d1d1)が最明部で 2.55 と基準未達だったため
   パネルを .55 → .62 に濃くし、英字は白へ（実測 最明部 4.86 で基準クリア） */
.rn-ex-title .ex-title-wrap{
  background: rgba(22,32,36,.62);
}
.rn-ex-title .ex-title-wrap-en{
  color: #fff;
}


/* --------------------------------------------------------------
   2026-08-17  ex-title のパネルをキーカラー系の水色に変更（ご指定）
   background: rgba(48,194,252,.62)

   パネルが明るくなったため、上に乗る文字をすべて濃色に組み替える。
   合成後のパネル色は rgb(105,203,240)／輝度 0.523 のため、
   白文字ではコントラスト 1.83 と不足する。
   -------------------------------------------------------------- */
.rn-ex-title .ex-title-wrap{
  background: rgba(48,194,252,.62);
}

/* 見出し画像は濃色版（ex-title-heading-dark.png）に差し替え済み */
/* 英字「To your ideal self」 */
.rn-ex-title .ex-title-wrap-en{
  color: #0e3341;
}
/* 英字の右の横線 */
.rn-ex-title .ex-title-wrap-en:after{
  background-color: #0e3341;
}
/* 本文「心も身体も 美しく カッコ良い」 */
.rn-ex-title .ex-title-wrap p{
  color: #0e3341;
}

/* ボタン：金の枠線・文字では水色に埋もれるため濃紺に。
   下地は黒18%だと沈むので白28%にして文字を立たせる */
.rn-ex-title .rn-ex-btn a{
  background: rgba(255,255,255,.28);
  border-color: #0e3341;
  color: #0e3341;
}
/* 矢印は金色のPNGなので、フィルタで濃色に寄せる */
.rn-ex-title .rn-ex-btn a:after{
  filter: brightness(0.22) saturate(0.35);
}


/* --------------------------------------------------------------
   2026-08-17  ex-title のパネルを白に変更（ご指定）
   透過は前回のご指定どおり .62 を維持
   -------------------------------------------------------------- */
.rn-ex-title .ex-title-wrap{
  background: rgba(255,255,255,.62);
}


/* --------------------------------------------------------------
   2026-08-17  マンツーマンサポート（ex-title の下）

   ・縦型動画（720x1280）4本を横一列に
   ・PC 4列 → タブレット 2列 → スマホ 2列
   ・動画は object-fit:cover ではなく比率どおり表示（切り抜きなし）
   -------------------------------------------------------------- */
.rn-support{
  background: #fbfbfa;
  padding: 56px 0;
}
.rn-support__title{
  text-align: center;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.5;
  color: #302f2e;
  margin: 0 0 28px;
}

.rn-support__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.rn-support__item{
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #eceae6;
  line-height: 0;
}
.rn-support__movie{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 1280;   /* 読み込み前のガタつき防止 */
  object-fit: cover;
}

@media screen and (min-width: 768px){
  .rn-support{ padding: 70px 0; }
  .rn-support__title{ font-size: 26px; margin-bottom: 34px; }
  .rn-support__list{ gap: 16px; }
}
@media screen and (min-width: 1000px){
  .rn-support__title{ font-size: 30px; margin-bottom: 40px; }
  .rn-support__list{
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
}


/* --------------------------------------------------------------
   2026-08-18  「JOIN US 入会のご案内」を一旦非表示（ご指示）

   ※ HTML は残してあるので、この1ブロックを消せば表示に戻せる。
     同じ join クラスの「CORPORATE PLAN 法人プラン」は対象外。
   -------------------------------------------------------------- */
.rn-join-entry{ display: none; }


/* --------------------------------------------------------------
   2026-08-20  うれしい3つのフリー：3点を等間隔に配置（ご指示）

   これまでは space-between で「余白」を均等にしていたが、
   ラベルの文字数が違うため画像の幅がバラバラ（428/294/308）で、
   アイコン同士の間隔が不揃いに見えていた。

   → 3等分のグリッドにして各セルの中央に置くことで、
     アイコンの中心が等間隔に並ぶようにする。
     幅は元画像の比率どおりに配分しているので高さは揃ったまま。
   -------------------------------------------------------------- */
.rn-free__list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: initial;
}
.rn-free__item{
  width: auto;              /* 旧: 36.6% / 25.1% / 26.3% を打ち消す */
  margin: 0 auto;
}
/* セル幅に対する比率（428:294:308 を維持＝高さが揃う） */
.rn-free__item--water { width: 92.0%; }   /* 428/428 * 92% */
.rn-free__item--towel { width: 63.2%; }   /* 294/428 * 92% */
.rn-free__item--inbody{ width: 66.2%; }   /* 308/428 * 92% */


/* --------------------------------------------------------------
   2026-08-20  ex-title のパネルを淡い水色に変更（ご指定）
   background: rgba(152,226,255,.62)
   -------------------------------------------------------------- */
.rn-ex-title .ex-title-wrap{
  background: rgba(152,226,255,.62);
}


/* --------------------------------------------------------------
   2026-08-20  ファーストビューのコピーのサイズをご指定値に
   （FITNESS IN LIFE を外して1行になったため大きくする）
   -------------------------------------------------------------- */
@media screen and (min-width: 1200px){
  .header-mov-title p.is-jp{ font-size: 68px; }
}


/* ==========================================================================
   2026-08-20  タブレット / スマホ対応

   計測して見つかった問題と対策
   ① ファーストビューのコピーが 17px と小さすぎる（PC 68px に対して）
      → SP 26px / 600px以上 32px / タブレット 44px と段階的に
   ② スマホで sec01 の背景が 2.32倍に拡大され、左右3566pxがカットされて
      人物が判別できない（cover のため縦長セクションに引き伸ばされる）
      → PCと同じく「横幅基準＝比率どおり」で上に置き、下は淡色で埋める
   ③ タブレット(769〜999px)でカードが 45% と細く、中の画像が小さすぎる
      → 62% に広げる
   ④ タブレットでサポート動画が2列＝1本が巨大になる
      → 768px以上は4列1行にして高さを抑える
   ⑤ スマホで口コミカードの余白が過大
   ========================================================================== */

/* ---------- ① ファーストビューのコピー ---------- */
.header-mov-title p.is-jp{
  font-size: 26px;
  line-height: 1.7;
}
@media screen and (min-width: 600px){
  .header-mov-title p.is-jp{ font-size: 32px; }
}
@media screen and (min-width: 769px){
  .header-mov-title p.is-jp{ font-size: 44px; }
}
@media screen and (min-width: 1200px){
  .header-mov-title p.is-jp{ font-size: 68px; }
}

/* ---------- ② スマホ：sec01 の背景を比率どおりに ---------- */
@media screen and (max-width: 768px){
  .top .sec01{
    background-size: 100% auto;      /* 横幅に合わせる＝拡大なし */
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #eaf6fa;       /* 写真の下に出る余白 */
    /* 写真の高さは 100vw * 772/1802 = 42.8vw。
       少しだけ重ねてカードを置く */
    padding-top: 38vw;
    padding-bottom: 30px;
  }
  .top .sec01 .sec01-txt{
    width: auto;
    max-width: none;
    padding: 20px 18px 18px;
  }
}

/* ---------- ③ タブレット：sec01 のカード幅 ---------- */
@media screen and (min-width: 769px) and (max-width: 999px){
  .top .sec01 .sec01-txt{ width: 62%; }
}

/* ---------- ④ サポート動画：768px以上は4列1行 ---------- */
@media screen and (min-width: 768px){
  .rn-support__list{ grid-template-columns: repeat(4, 1fr); }
}

/* ---------- ⑤ スマホ：口コミの余白を詰める ---------- */
@media screen and (max-width: 767px){
  .rn-voice--in-sec01{ padding: 16px 12px 18px; }
  .rn-voice__head-en{ font-size: 26px; }
  .rn-voice__item{ padding: 16px 14px; }
  .rn-voice__lead{ font-size: 14px; padding-bottom: 10px; margin-bottom: 10px; }
  .rn-voice__txt{ font-size: 13px; }
  .rn-voice__icon{ width: 44px; }
  .rn-voice__icon img{ width: 40px; height: 40px; }
}

/* ---------- スマホ：ex-title のパネル ---------- */
@media screen and (max-width: 767px){
  .rn-ex-title .ex-title-wrap{
    width: 86%;
    padding: 20px 18px 24px;
  }
  .rn-ex-title .ex-title-wrap-en{ padding-right: 100px; }
  .rn-ex-title .ex-title-wrap-en:after{ width: 88px; }
  .rn-ex-title .ex-title-wrap p{ font-size: 15px; }
}


/* --------------------------------------------------------------
   2026-08-20  タブレット(768〜999px)の ex-title

   ・background-size:180% は taiken.css から移植した旧指定で、
     差し替えた写真(1645x607)では1.8倍に拡大され左右680pxがカットされ、
     左にいる人物が切れてしまう → cover に戻す
   ・パネルが幅90%で写真をほぼ覆ってしまうため 62% に絞って右寄せ
   -------------------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 999px){
  .rn-ex-title{
    background-size: cover;
    background-position: center;
  }
  .rn-ex-title .ex-title-wrap{
    width: 62%;
    max-width: 520px;
    top: 30%;
    padding: 22px 22px 26px;
  }
  .rn-ex-title .ex-title-wrap-en{ padding-right: 110px; }
  .rn-ex-title .ex-title-wrap-en:after{ width: 96px; }
  .rn-ex-title .ex-title-wrap p{ font-size: 16px; }
  .rn-ex-btn a{ max-width: 260px; }
}


/* --------------------------------------------------------------
   2026-08-21  スマホ／タブレット：左上ロゴの下地を追加（ご指示）

   .header-logo は 1000px 未満で表示される固定ロゴ。
   透過PNGの黒ロゴが動画背景に重なって見えづらいため、
   ロゴ部分だけキーカラー #0ccdff の下地を敷く。
   （LOGINボタンは元から下地のある画像なのでそのまま）
   -------------------------------------------------------------- */
@media screen and (max-width: 999px){
  .header-logo h1,
  .header-logo h2{
    background-color: #0ccdff;
    padding: 7px 9px;
    line-height: 0;
    vertical-align: top;
  }
}


/* --------------------------------------------------------------
   2026-08-21  スマホ／タブレット：ロゴの下地をLOGINと同じサイズに

   ・padding を外し、下地をロゴ画像にぴったり合わせる
   ・ロゴ画像とLOGIN画像は同じ .header-logo img の指定でサイズが決まるので、
     余白を無くせば両者は必ず同寸になる
   ・img が inline のため下に line-height 分の隙間ができていたので line-height:0
   -------------------------------------------------------------- */
@media screen and (max-width: 999px){
  .header-logo{
    align-items: flex-start;
    line-height: 0;
  }
  .header-logo h1,
  .header-logo h2{
    background-color: #0ccdff;
    padding: 0;
    display: block;
    line-height: 0;
    font-size: 0;
  }
  .header-logo h1 a,
  .header-logo h2 a{ display: block; line-height: 0; }
  .header-logo-login a{ display: block; line-height: 0; }
}


/* --------------------------------------------------------------
   2026-08-21  スマホ：ex-title の高さと写真の見え方を調整（ご指示）

   ・高さ 100vh(min 600px) → 75vh(min 450px) ＝ 従来比75%
   ・縦長の枠に横長写真を cover で入れているため左右が大きく切れ、
     background-position-x:15% では女性の髪〜肩しか見えていなかった
     → 27% に寄せて顔が入るようにする
   -------------------------------------------------------------- */
@media screen and (max-width: 767px){
  .rn-ex-title{
    height: 75vh;
    min-height: 450px;
    background-position-x: 27%;
  }
}


/* --------------------------------------------------------------
   2026-08-21  スマホ：ex-title で女性の顔が見えるようにする

   横長写真(2.71:1)を縦長の枠に cover で入れているため、
   顔は写真の上部に来る。パネルが top:35% にあり顔を覆っていたので、
   パネルを下寄せにして上半分を写真の見せ場として空ける。
   -------------------------------------------------------------- */
@media screen and (max-width: 767px){
  .rn-ex-title{
    background-position-y: 22%;   /* 上寄りにして頭が切れないように */
  }
  .rn-ex-title .ex-title-wrap{
    top: auto;
    bottom: 5%;
  }
}


/* --------------------------------------------------------------
   2026-08-21  スマホ：ex-title を指定の構成に

   ・セクション高さ 65vh（min 450px）
   ・パネル 幅85% / 高さ38% / 下から3%
   ・固定高にすると中身（見出し・英字・本文・ボタン）が入り切らず
     ボタンが枠外にはみ出すため、各パーツを縮小して収める
   -------------------------------------------------------------- */
@media screen and (max-width: 767px){
  .rn-ex-title{
    height: 65vh;
    min-height: 450px;
  }
  .rn-ex-title .ex-title-wrap{
    width: 85%;
    height: 38%;
    top: auto;
    bottom: 3%;
    padding: 20px 18px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* 枠内に収めるための縮小 */
  .rn-ex-title .ex-title-wrap h2{ margin-bottom: 6px; }
  .rn-ex-title .ex-title-wrap h2 img{
    max-width: 84%;
    margin-left: auto;
    margin-right: 0;
  }
  .rn-ex-title .ex-title-wrap-en{
    font-size: 12px;
    margin-bottom: 7px;
    padding-right: 78px;
  }
  .rn-ex-title .ex-title-wrap-en:after{ width: 66px; top: 7px; }
  .rn-ex-title .ex-title-wrap p{
    font-size: 12.5px;
    line-height: 1.75;
  }
  .rn-ex-btn{ margin-top: 9px; }
  .rn-ex-title .rn-ex-btn a{
    padding: 8px 0;
    padding-right: 18px;
    font-size: 13px;
    max-width: 190px;
  }
  .rn-ex-title .rn-ex-btn a:after{ top: 13px; right: 14px; width: 22px; }
}


/* --------------------------------------------------------------
   2026-08-21  スマホ：ファーストビューのコピーの改行位置

   自動折り返しだと「運動は、ひとりで頑張らなくて／いい。」と
   不自然な位置で切れるため、「運動は、」の後で改行する。
   （769px以上は1行に収まるので改行しない）
   -------------------------------------------------------------- */
.rn-br-sp{ display: none; }
@media screen and (max-width: 767px){
  .rn-br-sp{ display: inline; }
}


/* --------------------------------------------------------------
   2026-08-21  スマホ：staff-img の女性の顔を中央に

   本番CSSでは img を width:1000px の絶対配置＋right:-100px で
   右にずらしているため、差し替えた写真では右側（ピンクの女性と男性）
   しか映らず、手前の女性の顔が枠外だった。
   object-fit:cover に変えて、顔の位置(横44%)を基準に切り抜く。
   画面幅に依存しないので端末差にも強い。
   -------------------------------------------------------------- */
@media screen and (max-width: 767px){
  .top .staff-img img{
    position: static;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: 44% center;
  }
}


/* --------------------------------------------------------------
   2026-08-21  スマホ：コピー2行目が入り切るようにサイズを可変に

   「ひとりで頑張らなくていい。」は 26px だと必要幅350pxに対し
   使える幅が339pxしかなく3行に折り返していた。
   端末幅に応じて縮む clamp を使い、狭い端末でも必ず2行に収める。
   （390px端末で約24px、320px端末で約20px）
   -------------------------------------------------------------- */
@media screen and (max-width: 599px){
  .header-mov-title p.is-jp{
    font-size: clamp(18px, 6.2vw, 26px);
    letter-spacing: .02em;
  }
}


/* --------------------------------------------------------------
   2026-08-21  スマホ：ABOUT の本文の折り返し

   「いつでもトレーニングしたい皆様の想いに」は 15px + 字間0.1em で
   必要幅314px、使える幅305px と 9px 足りず「に」だけが次行に落ちていた。
   フォントを14pxに、字間を0.04emに詰めて1行に収める。
   -------------------------------------------------------------- */
@media screen and (max-width: 767px){
  .top .sec02-wrap-col-p{
    font-size: 14px;
    letter-spacing: .04em;
  }
}


/* --------------------------------------------------------------
   2026-08-21  スマホ：フッターの住所をロゴの右側へ

   .footer-wrap-row は flex-wrap:wrap。
   ロゴ108px + 余白10px + 住所200px = 318px で、行幅305pxを13px超えて
   折り返していた。ロゴを縮め、住所の文字を1px小さくして同じ行に収める。
   -------------------------------------------------------------- */
@media screen and (max-width: 767px){
  .footer-wrap-row{
    align-items: center;
  }
  .footer-wrap-row-logo{
    width: 80px;
    margin-right: 14px;
    margin-bottom: 18px;
  }
  .footer-wrap-row-txt{
    margin-bottom: 18px;
  }
  .footer-wrap-row-txt li,
  .footer-wrap-row-txt a{
    font-size: 13px;
  }
}


/* ==========================================================================
   2026-08-22  共通パーツ用のクラス（ex-join.css から移設）

   inc/inc-free-renewal.php と inc/inc-price-renewal.php で使うクラス。
   もともと css-renewal/ex-join.css に書いていたが、そのファイルは
   体験・入会ページでしか読み込まれないため、同じパーツを共用している
   ジムの特徴ページ(/about-renewal/)では当たっていなかった。
   全ページで読み込む このファイルへ移して1本化する。
   ※ ex-join.css 側からは削除済み（重複させない）
   ========================================================================== */

/* --------------------------------------------------------------
   TRAINING（写真3枚）を非表示

   マンツーマンサポートの動画に置き換えたため。両ページ共通。
   ※ HTML は残してあるので、この1行を消せば表示に戻せる
   -------------------------------------------------------------- */
.rn-training-photos{ display: none; }


/* --------------------------------------------------------------
   サポートプランの説明（4つ目のフリーの下）
   周囲が濃色の背景なので白文字。中央揃えで読みやすい幅に制限する。
   -------------------------------------------------------------- */
.rn-plan-note{
  max-width: 860px;
  margin: 0 auto;
  padding: 34px 20px 6px;
  text-align: center;
  box-sizing: border-box;
}
.rn-plan-note__title{
  font-size: 17px;
  letter-spacing: .1em;
  color: #c4a676;
  margin: 0 0 16px;
  font-weight: 500;
}
.rn-plan-note__txt{
  font-size: 14px;
  line-height: 2;
  letter-spacing: .04em;
  color: #fff;
  margin: 0;
}
.rn-plan-note__strong{
  color: #c4a676;
  font-weight: 700;
}
@media screen and (min-width: 768px){
  .rn-plan-note{ padding: 46px 20px 10px; }
  .rn-plan-note__title{ font-size: 20px; margin-bottom: 20px; }
  .rn-plan-note__txt{ font-size: 16px; }
}


/* --------------------------------------------------------------
   「プレミアムプラン限定」の画像をCSSの金枠バッジに置き換えたもの

   元画像 ex__premire__item1.png (720x72) から色を抽出して再現：
     枠   左 #f0cc7e → 中 #d09920 → 右 #f4e7cd（金のグラデーション）
     文字 #c88b05 を中心とした金のグラデーション
   枠は border-image で枠線部分だけを金グラデにする（中は完全に透過）。
   ※ border ショートハンドは border-image を初期値に戻すため、
     必ず border → border-image の順で書くこと
   -------------------------------------------------------------- */
.rn-gold-badge{
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px 30px;
  background: none;
  border: 2px solid transparent;
  border-radius: 0;
  border-image: linear-gradient(90deg, #f0cc7e 0%, #d09920 32%, #e3bb63 62%, #f4e7cd 100%) 1;
}
.rn-gold-badge__txt{
  display: inline-block;
  font-family: Yu Mincho Light, YuMincho, Yu Mincho, 游明朝体,
               ヒラギノ明朝 ProN, Hiragino Mincho ProN, メイリオ, Meiryo, serif;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: .14em;
  white-space: nowrap;
  /* 非対応ブラウザ用の単色フォールバック */
  color: #d3a53a;
  background: linear-gradient(90deg, #e6bd6a 0%, #c88b05 38%, #e8c877 68%, #f2e0b0 100%);
  -webkit-background-clip: text;
          background-clip: text;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .rn-gold-badge__txt{ color: transparent; }
}

/* プラン内（料金プラン）のバッジは小さめに */
.rn-gold-badge--sm{ padding: 8px 18px; }
.rn-gold-badge--sm .rn-gold-badge__txt{ font-size: 15px; letter-spacing: .08em; }

@media screen and (min-width: 768px){
  .rn-gold-badge{ padding: 15px 60px; }
  .rn-gold-badge__txt{ font-size: 26px; }
  .rn-gold-badge--sm{ padding: 9px 22px; }
  .rn-gold-badge--sm .rn-gold-badge__txt{ font-size: 17px; }
}


/* --------------------------------------------------------------
   2026-08-26  料金プランの「こんな方におすすめ」（ご指示・手書きメモより）

   inc/inc-price-renewal.php のプラン見出し（.sec04-subtitle）の直下に置く。
   プランは金額ではなく経験・実力で選んでほしい、という打ち合わせ方針の説明文。
   濃色背景に載るので白文字。読みやすい幅に制限して中央揃え。
   -------------------------------------------------------------- */
.rn-plan-lead{
  max-width: 860px;
  margin: 0 auto;
  padding: 22px 20px 4px;
  text-align: center;
  box-sizing: border-box;
}
/* 2026-08-26 ご指示により文字を大きく・強めに */
.rn-plan-lead__txt{
  font-size: 17px;
  line-height: 1.8;
  letter-spacing: .06em;
  font-weight: 600;
  color: #fff;
  margin: 0 0 10px;
}
.rn-plan-lead__txt:last-child{ margin-bottom: 0; }
/* 補足（プラン変更の案内）は金色。本文より一段落とすが小さくしすぎない */
/* 2026-08-26 ご指示により少し大きく・太字寄りに、下の余白も確保
   ※ 上の :last-child(0,2,0) より詳細度を上げないと margin-bottom が効かないので
     .rn-plan-lead を付けて (0,2,0) 同士にし、後ろに置いて後勝ちにしている */
.rn-plan-lead .rn-plan-lead__txt--note{
  color: #c4a676;
  font-size: 17px;
  font-weight: 600;
  margin-top: 16px;
  margin-bottom: 10px;
}
@media screen and (min-width: 768px){
  .rn-plan-lead{ padding: 34px 20px 10px; }
  .rn-plan-lead__txt{ font-size: 21px; line-height: 1.75; margin-bottom: 14px; }
  .rn-plan-lead .rn-plan-lead__txt--note{ font-size: 19px; margin-top: 22px; margin-bottom: 10px; }
}


/* --------------------------------------------------------------
   2026-08-26  .recommend を料金プランのリード内でも使えるように（ご指示）

   もとは taiken-custom/css/style.css に
   「.sec01__fourthfree__block .recommend」で定義されており、
   4つ目のフリーの中でしか効かなかった。
   サポートプラン／セルフプランの見出し直下へ移したので、
   同じ見た目（両端の斜線つき中央寄せ）をこちらへ移植する。
   -------------------------------------------------------------- */
/* 2026-08-27 ご指示により、目立たせるため太字＋ゴールドに変更（両プラン共通） */
.rn-plan-lead .recommend{
  font-size: 18px;
  line-height: 1.6;
  text-align: center;
  color: #e8cf9b;
  font-weight: 700;
  letter-spacing: .06em;
  position: relative;
  max-width: 518px;
  margin: 0 auto 20px;
  padding: 0 26px;
  box-sizing: border-box;
  font-family: Marcellus, serif;
}
/* 2026-08-27 ご指示により、文字の下に太い強調線を追加
   text-decoration を使うと文字の幅ぶんだけ線が引かれ、折り返しにも追従する。
   （border-bottom だと要素の幅いっぱいに引かれてしまう） */
.rn-plan-lead .recommend{
  text-decoration: underline;
  text-decoration-color: #e8cf9b;
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
  text-decoration-skip-ink: none;
}

/* 両端の斜線（文字色に合わせてゴールドに） */
.rn-plan-lead .recommend:before,
.rn-plan-lead .recommend:after{
  content: "";
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background-color: #e8cf9b;
}
.rn-plan-lead .recommend:before{ left: 0;  transform: rotate(-30deg); }
.rn-plan-lead .recommend:after { right: 0; transform: rotate(30deg); }

/* スマホだけ改行する */
.rn-plan-lead .recommend .br-sp{ display: block; }
@media screen and (min-width: 768px){
  .rn-plan-lead .recommend{
    font-size: 24px;
    margin-bottom: 26px;
    padding: 0 40px;
    /* 文字を大きくしたぶん、元の 518px だと途中で折り返すので広げる */
    max-width: 780px;
    /* 強調線もPCでは太めに */
    text-decoration-thickness: 5px;
    text-underline-offset: 12px;
  }
  .rn-plan-lead .recommend .br-sp{ display: none; }
}


/* --------------------------------------------------------------
   2026-08-27  固定ボタン（fixed-contact-02）を画像からCSSへ（ご指示）

   もとは img/footer/fixed-btn02_ver2.png（1232x194）に
   「新規メンバー登録はこちら」の文字が焼き込まれており、文言を
   変更できなかった。同じ見た目をCSSで再現し、文字はHTMLで持たせる。
     枠  金色 #c9a55c ／ 地  上が明るい黒のグラデーション
     文字 前半が金 #f5e3b0、後半が白、右端に白い「>」
   ※ 元画像と同じ比率(1232:194)を aspect-ratio で保っている
   -------------------------------------------------------------- */
/* ※ 本番 css/common.css に
     .footer .fixed-contact-02 a { display: block; }  (0,2,1)
   があり、.rn-fixed-btn (0,1,0) では負けて flex が効かず、
   文字が上に寄ってしまっていた。詳細度を上げて指定する。
   左右のパディングは対称にして、文字をボタンの中央に置く
   （「>」は絶対配置なので中央寄せに影響しない）。 */
/* 枠線・地の色・比率は、差し替え前の画像 img/footer/fixed-btn02_ver2.png
   (1232x194) から実測した値をそのまま使っている：
     枠線 上 #be8c57 / 左上 #d2ac7f / 左下 #df9f5f  → 金のグラデーション
     地   上 #1c1c1c → 下 #242424
     枠の太さ 約5px・角丸 約7px（画像基準。表示幅400pxでは約2px / 3px）
   ※ 本番 css/common.css に .footer .fixed-contact-02 a { display:block } が
     あるため、詳細度を上げないと flex が効かない */
.rn-btn-demo .rn-fixed-btn,
.footer .fixed-contact .rn-fixed-btn,
.footer .fixed-contact-02 .rn-fixed-btn{
  display: flex;
  flex-direction: column;   /* 2026-08-27 小さい文字＋大きい文字の2段に */
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  aspect-ratio: 1232 / 194;
  padding: 0 16px;
  border: 2px solid #c6975f;
  border-radius: 3px;
  background: linear-gradient(180deg, #1c1c1c 0%, #202020 55%, #242424 100%);
  color: #fff;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
}
/* 上段（小さい案内文）／下段（メインの文言） */
/* ※ 本番 css/common.css のリセットが span にも color を当てているため、
   親の color を継承せず暗い色になる。ここで明示しておく */
.rn-fixed-btn__sub{
  display: block;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 2px;
}
.rn-fixed-btn__main{
  display: block;
  color: #fff;
  font-size: 12px;
}
/* 金色の部分だけ一回り大きく（元画像も「新規メンバー登録」だけ大きい） */
.rn-fixed-btn__strong{
  color: #f5e3b0;
  font-size: 1.15em;
}
/* 右端の「>」 */
.rn-btn-demo .rn-fixed-btn:after,
.footer .fixed-contact .rn-fixed-btn:after,
.footer .fixed-contact-02 .rn-fixed-btn:after{
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}
@media screen and (min-width: 768px){
  /* 隣の「見学・体験予約はこちら」ボタン（画像）の2段の文字と大きさを揃える */
  .rn-fixed-btn__sub{ font-size: 12px; margin-bottom: 3px; }
  /* 2026-08-27 ご指示：「入会案内」だけ 2.2rem。「はこちら」はそれより一回り小さく */
  .rn-fixed-btn__main{ font-size: 1.9rem; }
  .rn-fixed-btn__strong{ font-size: 2.2rem; }
  .rn-btn-demo .rn-fixed-btn:after,
  .footer .fixed-contact .rn-fixed-btn:after,
  .footer .fixed-contact-02 .rn-fixed-btn:after{ right: 22px; width: 11px; height: 11px; }
}


/* ==========================================================================
   2026-08-27  長期継続割引バナー：画像のバッジ部分だけ差し替え

   img/com/loop_otoku2.png（2416x638）の右上に「プレミアムプラン限定」と
   旧名称が焼き込まれているため、その枠だけを同じ見た目のボックスで覆い、
   「サポートプラン限定」と表示し直す。マークアップは
   inc/inc-otoku-renewal.php。

   覆う位置・色はいずれも元画像から実測した値：
     枠の位置  左 66.23% / 上 10.82% / 幅 21.81% / 高さ 7.52%
     枠線      #d4bb9d
     枠内の地  左 #fff9ef → 右 #f2ead6（横方向のグラデーション）
     文字      #9d8a6b
   文字サイズは画像の拡大縮小に追従させるためコンテナ幅基準(cqw)。
   ========================================================================== */
.rn-otoku-img{
  position: relative;
  container-type: inline-size;
  line-height: 0;
}
.rn-otoku-img img{
  display: block;
  width: 100%;
  height: auto;
}
.rn-otoku-img__badge{
  position: absolute;
  /* 元画像の枠線が下辺にわずかに残るため、上下を少しだけ広げて覆っている */
  left: 66.0%;
  top: 10.4%;
  width: 22.1%;
  height: 8.4%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: linear-gradient(90deg, #fff9ef 0%, #f2ead6 100%);
  border: 1px solid #d4bb9d;
  color: #9d8a6b;
  font-family: Yu Mincho Light, YuMincho, Yu Mincho, 游明朝体,
               ヒラギノ明朝 ProN, Hiragino Mincho ProN, メイリオ, Meiryo, serif;
  font-size: 1.78cqw;   /* 2026-08-27 ご指示により拡大 */
  line-height: 1;
  letter-spacing: .14em;
  text-indent: .14em;   /* letter-spacing のぶん中央からずれるのを戻す */
  white-space: nowrap;
}


/* --------------------------------------------------------------
   2026-08-27  「月1回以上のご利用だとサポートプランがお得。」のリボン

   もとは taiken-custom/img/ex__fourthfree__desc__item1.png（1309x114）で、
   「プレミアムプランがおトク！」という旧名称が焼き込まれていた。
   文言を変えられないため、同じデザインをCSSで組み直したもの。
   マークアップは inc/inc-fourthfree-renewal.php。

   色・形はいずれも元画像から実測した値：
     地   左 #eec97b → 中央 #f2e2c4 → 右 #f0cd8b（横グラデーション）
     両端の切り欠き  幅は全体の約2.37%（元画像で31px）
     文字 濃い赤茶・明朝
   文字サイズと余白はコンテナ幅基準(cqw)にして、幅が変わっても比率を保つ。
   -------------------------------------------------------------- */
.sec01__fourthfree__block .item{
  container-type: inline-size;
  margin: 0 auto;
}
.rn-ribbon{
  display: block;
  width: 100%;
  max-width: 1309px;   /* 元画像と同じ最大幅 */
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0.82em 5%;
  text-align: center;
  color: #8f2f22;
  font-family: Yu Mincho Light, YuMincho, Yu Mincho, 游明朝体,
               ヒラギノ明朝 ProN, Hiragino Mincho ProN, メイリオ, Meiryo, serif;
  font-size: 3.06cqw;
  line-height: 1.2;
  letter-spacing: .06em;
  white-space: nowrap;
  background: linear-gradient(90deg,
    #eec97b 0%, #e9c57d 22%, #f2e2c4 48%, #f3e3c3 62%, #f0cd8b 100%);
  /* 両端のV字の切り欠き */
  clip-path: polygon(0 0, 100% 0, 97.63% 50%, 100% 100%, 0 100%, 2.37% 50%);
}
/* コンテナクエリ非対応ブラウザ向けの保険 */
@supports not (container-type: inline-size){
  .rn-ribbon{ font-size: 20px; white-space: normal; }
}


/* --------------------------------------------------------------
   2026-08-27  見学・体験予約ボタン（fixed-contact）をキーカラーに

   もとは img/footer/fixed-btn_ver4.png（1232x194）で、地は濃い青緑
   （上 #1286a6 → 下 #0d627a）だった。ご指示により地をキーカラー
   #0ccdff に変更するため、画像をやめてCSSで組み直している。

   2026-08-27 デザイン比較（/btn-compare/）の結果、【案C】を採用。
     見学・体験  … 地は #0ccdff のまま、枠と文字を濃紺 #0e3341
     入会案内    … 地は黒のまま、枠と強調文字をキーカラー #0ccdff
   2つのボタンで水色と濃紺が入れ替わる、対になった見せ方にしている。

   ※ 白文字だったときの #0ccdff とのコントラスト比は 1.88:1 で、
     目安の 4.5:1 を大きく下回っていた。濃紺 #0e3341 にして 7.14:1。
   ※ ここは本番 css/common.css の .footer .fixed-contact-02 a などに
     勝つ必要があるため、詳細度を (0,3,0) 以上で書いている
   -------------------------------------------------------------- */

/* 見学・体験予約（キーカラーの地） */
.footer .fixed-contact .rn-fixed-btn--key{
  background: #0ccdff;
  border-color: #0e3341;
  color: #0e3341;
}
.footer .fixed-contact .rn-fixed-btn--key .rn-fixed-btn__sub,
.footer .fixed-contact .rn-fixed-btn--key .rn-fixed-btn__main,
.footer .fixed-contact .rn-fixed-btn--key .rn-fixed-btn__strong{
  color: #0e3341;
}
.footer .fixed-contact .rn-fixed-btn--key:after{
  border-top-color: #0e3341;
  border-right-color: #0e3341;
}

/* 入会案内（黒の地）— 枠と強調文字をキーカラーに */
.footer .fixed-contact-02 .rn-fixed-btn{
  border-color: #0ccdff;
}
.footer .fixed-contact-02 .rn-fixed-btn .rn-fixed-btn__strong{
  color: #0ccdff;
}


/* --------------------------------------------------------------
   2026-08-27  スマホ用のプラン比較表：プラン名の帯だけ差し替え

   画像に「ベーシックプラン」「プレミアムプラン」と旧名称が焼き込まれて
   いるため、上部の帯だけを同じ見た目のボックスで覆って書き換える。
   （PC版の .rn-plantable と同じ考え方）

   覆う位置・色は元画像から実測：
     帯の位置  左 38.6% / 上 0.7% / 幅 61.4% / 高さ 10.7%
     サポート（元プレミアム）の地  左 #e2ba67 → 中 #cb9316 → 右 #e8c278
     セルフ  （元ベーシック）の地  左 #50a5bc → 中 #63aec4 → 右 #4a9ab0
   文字サイズは画像の拡大縮小に追従させるためコンテナ幅基準(cqw)。
   -------------------------------------------------------------- */
/* ※ display は指定しないこと。
   本番 taiken-custom/css/style.css が
     .sec04__pricetable__table-sp { display: none; }                （PC）
     @media(max-width:768px){ .sec04__pricetable__table-sp { display: block; } }
   でPC/スマホを出し分けている。ここで display:block を書くと
   同じ詳細度で後勝ちし、PCでもスマホ版の表が出てしまう（実際に出した） */
.rn-sptable{
  position: relative;
  container-type: inline-size;
  line-height: 0;
  margin-left: auto;
  margin-right: auto;
}
.rn-sptable img{
  display: block;
  width: 100%;
  height: auto;
}
.rn-sptable__head{
  position: absolute;
  left: 38.6%;
  top: 0.7%;
  width: 61.4%;
  height: 10.7%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: #fff;
  font-size: 4.4cqw;
  line-height: 1;
  letter-spacing: .08em;
  text-indent: .08em;   /* letter-spacing のぶん中央からずれるのを戻す */
  white-space: nowrap;
}
.rn-sptable--support .rn-sptable__head{
  background: linear-gradient(90deg, #e2ba67 0%, #cb9316 50%, #e8c278 100%);
}
.rn-sptable--self .rn-sptable__head{
  background: linear-gradient(90deg, #50a5bc 0%, #63aec4 50%, #4a9ab0 100%);
}


/* ==========================================================================
   2026-08-27  recommend の強調パターン A〜D（クライアント選定用）

   料金プランのプラン見出し直下にある「こんな方におすすめ」の一文を
   もっと目立たせるための案。比較ページ /recommend-compare/ で並べている。

   使い方：採用する案のクラスを .recommend に足すだけ。
     <p class="recommend rn-rec--a">…</p>
   案Bだけはラベルの <span> を1つ足す必要がある。

   ・共通の下敷きを外すため、各案の先頭で ＼／の斜線と下線を打ち消している
   ・詳細度は .rn-plan-lead .recommend (0,2,0) に勝つよう (0,3,0) にしている
   ========================================================================== */

/* 4案共通：現状の斜線と下線をいったん外す */
.rn-plan-lead .recommend[class*="rn-rec--"]{
  text-decoration: none;
}
.rn-plan-lead .recommend[class*="rn-rec--"]:before,
.rn-plan-lead .recommend[class*="rn-rec--"]:after{
  content: none;
}

/* ---- 案A：半透明の黒帯＋金の上下罫線 ---------------------------------- */
.rn-plan-lead .recommend.rn-rec--a{
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: 780px;
  margin: 10px auto 28px;
  padding: 14px 24px 15px;
  color: #f5e3b0;
  background: linear-gradient(100deg,
    rgba(227,200,138,.05), rgba(10,12,14,.88) 30%,
    rgba(10,12,14,.88) 70%, rgba(227,200,138,.05));
  border-top: 1px solid rgba(227,200,138,.72);
  border-bottom: 1px solid rgba(227,200,138,.35);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  text-shadow: 0 1px 8px rgba(0,0,0,.8);
}

/* ---- 案B：金のラベル＋本文 -------------------------------------------- */
.rn-plan-lead .recommend.rn-rec--b{
  max-width: 780px;
  margin: 12px auto 28px;
  padding: 0 20px;
  color: #f5e3b0;
  text-shadow: 0 2px 10px rgba(0,0,0,.9);
}
.rn-rec__label{
  display: table;
  margin: 0 auto 10px;
  padding: 4px 16px;
  color: #17140e;
  background: linear-gradient(90deg, #c4a676, #f5e3b0, #c4a676);
  border-radius: 999px;
  font-family: Yu Mincho Light, YuMincho, Yu Mincho, 游明朝体,
               ヒラギノ明朝 ProN, Hiragino Mincho ProN, メイリオ, Meiryo, serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .16em;
  text-indent: .16em;
  text-shadow: none;
}

/* ---- 案C：両端に金の縦線（引用風） ------------------------------------ */
.rn-plan-lead .recommend.rn-rec--c{
  box-sizing: border-box;
  width: calc(100% - 40px);
  max-width: 720px;
  margin: 14px auto 30px;
  padding: 10px 24px 11px;
  color: #f5e3b0;
  border-left: 2px solid #e3c88a;
  border-right: 2px solid #e3c88a;
  background: rgba(0,0,0,.18);
  text-shadow: 0 2px 10px rgba(0,0,0,.95);
}

/* ---- 案D：プランごとに色を変える -------------------------------------- */
.rn-plan-lead .recommend.rn-rec--d{
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: 780px;
  margin: 10px auto 28px;
  padding: 13px 20px;
  color: #f7f2e7;
  background: rgba(8,10,12,.78);
  border: 1px solid rgba(227,200,138,.62);
  box-shadow: inset 5px 0 0 #e3c88a;
  text-shadow: 0 2px 10px rgba(0,0,0,.9);
}
/* セルフプラン側は見出し帯の青を引き継ぐ */
.rn-plan-lead .recommend.rn-rec--d.rn-rec--self{
  border-color: rgba(142,185,202,.62);
  box-shadow: inset 5px 0 0 #8eb9ca;
}

@media screen and (max-width: 767px){
  .rn-plan-lead .recommend.rn-rec--a{ width: calc(100% - 24px); padding: 12px 14px 13px; }
  .rn-plan-lead .recommend.rn-rec--c{ width: calc(100% - 28px); padding: 9px 13px 10px; }
  .rn-plan-lead .recommend.rn-rec--d{ width: calc(100% - 24px); padding: 12px 12px 12px 17px; }
  .rn-rec__label{ font-size: 11px; padding: 3px 14px; }
}


/* --------------------------------------------------------------
   2026-08-27  プラン見出しの帯（.sec04-subtitle）の上余白（ご指示）

     サポートプラン（.premire 付き）… 0px
     セルフプラン  （.premire なし）… 40px

   本番 taiken-custom/css/style.css は
     .ex .sec04-subtitle { margin: 0 auto; margin-bottom: 24px; }
   としており、上の余白は 0。同じ詳細度で上書きする。
   ※ 本番側のメディアクエリは font-size と padding しか触っていないので、
     この指定だけでスマホ・タブレット・PCすべてに効く
   ※ 入会案内ページの .join スコープ側も同時に揃えている
   -------------------------------------------------------------- */
.ex .sec04-subtitle:not(.premire),
.join .sec04-subtitle:not(.premire){
  margin-top: 40px;
}
.ex .sec04-subtitle.premire,
.join .sec04-subtitle.premire{
  margin-top: 0;
}


/* ==========================================================================
   2026-08-27  固定ボタン2つのデザイン案 A〜D（クライアント選定用）

   見学・体験ボタン（.rn-fixed-btn--key／地は #0ccdff）は、白文字だと
   コントラスト比が 1.88:1 しかなく読みづらい。地の色は変えずに
   文字色で解決する案を4つ用意し、あわせて入会案内ボタン
   （.rn-fixed-btn--dark 相当）との統一感も設計している。

   ・比較ページ /btn-compare/ で並べている
   ・採用する案の1ブロックを残し、他を消せばそのまま本番の指定になる
   ・地の色 #0ccdff は全案で変更していない

   コントラスト比（地 #0ccdff に対して）
     白    #ffffff  1.88:1  ← 現状。目安 4.5:1 に届かない
     金    #f5e3b0  1.47:1  ← 現状の強調文字。さらに低い
     濃紺  #0e3341  7.14:1  ← 各案で採用
   ========================================================================== */

/* ---- 案A：金の枠で統一（見学は濃紺文字／入会は白＋金文字）------------- */
.rn-btnv--a .rn-fixed-btn--key{ background:#0ccdff; border-color:#c6975f; }
.rn-btnv--a .rn-fixed-btn--key .rn-fixed-btn__sub,
.rn-btnv--a .rn-fixed-btn--key .rn-fixed-btn__main,
.rn-btnv--a .rn-fixed-btn--key .rn-fixed-btn__strong{ color:#0e3341; }
.rn-btnv--a .rn-fixed-btn--key:after{ border-top-color:#0e3341; border-right-color:#0e3341; }

/* ---- 案B：白の枠で統一（入会側の強調をキーカラーに）------------------- */
.rn-btnv--b .rn-fixed-btn{ border-color:#fff; }
.rn-btnv--b .rn-fixed-btn--key{ background:#0ccdff; }
.rn-btnv--b .rn-fixed-btn--key .rn-fixed-btn__sub,
.rn-btnv--b .rn-fixed-btn--key .rn-fixed-btn__main,
.rn-btnv--b .rn-fixed-btn--key .rn-fixed-btn__strong{ color:#0e3341; }
.rn-btnv--b .rn-fixed-btn--key:after{ border-top-color:#0e3341; border-right-color:#0e3341; }
.rn-btnv--b .rn-fixed-btn--dark .rn-fixed-btn__strong{ color:#0ccdff; }

/* ---- 案C：キーカラーをアクセントにして統一 ---------------------------- */
.rn-btnv--c .rn-fixed-btn--key{ background:#0ccdff; border-color:#0e3341; }
.rn-btnv--c .rn-fixed-btn--key .rn-fixed-btn__sub,
.rn-btnv--c .rn-fixed-btn--key .rn-fixed-btn__main,
.rn-btnv--c .rn-fixed-btn--key .rn-fixed-btn__strong{ color:#0e3341; }
.rn-btnv--c .rn-fixed-btn--key:after{ border-top-color:#0e3341; border-right-color:#0e3341; }
.rn-btnv--c .rn-fixed-btn--dark{ border-color:#0ccdff; }
.rn-btnv--c .rn-fixed-btn--dark .rn-fixed-btn__strong{ color:#0ccdff; }

/* ---- 案D：白文字のまま濃い影で持ち上げる（現状の配色を維持）----------- */
.rn-btnv--d .rn-fixed-btn--key{ background:#0ccdff; border-color:#c6975f; }
.rn-btnv--d .rn-fixed-btn--key .rn-fixed-btn__sub,
.rn-btnv--d .rn-fixed-btn--key .rn-fixed-btn__main{
  color:#fff;
  text-shadow: 0 1px 3px rgba(0,42,60,.95), 0 0 10px rgba(0,42,60,.6);
}
.rn-btnv--d .rn-fixed-btn--key .rn-fixed-btn__strong{
  color:#fff8e2;
  text-shadow: 0 1px 3px rgba(0,42,60,.95), 0 0 10px rgba(0,42,60,.6);
}
.rn-btnv--d .rn-fixed-btn--key:after{ border-top-color:#fff; border-right-color:#fff; }

/* ---- 比較ページ用のデモ枠 --------------------------------------------- */
.rn-btn-demo{ width: 400px; max-width: 100%; margin: 0 auto; }
.rn-btn-demo .rn-fixed-btn + .rn-fixed-btn{ margin-top: 10px; }