/* ==========================================================================
   料金紹介ページ（/price-renewal/）用の差分CSS

   2026-08-25 css-renewal/ex-join.css の複製として作成。
   体験・入会ページと同じ見た目から始めるため中身はそのまま。
   ※ 体験ページと連動して壊れないよう、意図的に別ファイルにしている。
     両ページで共通させたい指定は css-renewal/renewal.css に置くこと。
   ========================================================================== */

/* ==========================================================================
   体験・入会 統合ページ（/ex-join-renewal/）用の差分CSS

   ・本番 css/taiken.css を読み込んだ上で、このファイルで上書きする
   ・本番CSSは一切編集しない
   ・2026-08-21 作成：まずは体験ページの複製のため中身は空
   ========================================================================== */


/* ==========================================================================
   2026-08-21  ファーストビュー(.ex-title)をトップページと同じ写真に差し替え

   本番 taiken.css は base64 で暗い写真を埋め込んでいる。それを上書きして
   トップページで使用中の img-renewal/ex-title-bg3.jpg を表示する。

   写真が明るくなると白文字が埋もれるため、トップページで確定した処理
   （白の半透明パネル＋濃紺の文字＋濃色版の見出し画像）を同じ値で適用する。
   ※見出し画像は page-ex-join-renewal.php 側で濃色版に差し替え済み
   ========================================================================== */
.ex .ex-title{
  background-image: url(../img-renewal/ex-title-bg3.jpg?ver=20260817b);
  background-color: #dfe6ea;
}

/* テキストの下地（トップページと同じ値） */
.ex .ex-title-wrap{
  background: rgba(255,255,255,.62);
  border-radius: 6px;
  padding: 26px 24px 30px;
  box-sizing: border-box;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.ex .ex-title-wrap h2 img{ width: 100%; height: auto; display: block; }
.ex .ex-title-wrap-en{ color: #0e3341; }
.ex .ex-title-wrap-en:after{ background-color: #0e3341; }
.ex .ex-title-wrap p{ color: #0e3341; }

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

/* --------------------------------------------------
   タブレット(768〜1263px)
   ・background-size:180% は元の写真向けの指定で、差し替えた写真だと
     1.8倍に拡大されて人物が切れるため cover に戻す
   ・パネルが幅90%で写真をほぼ覆うので絞って右寄せ
   -------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1263px){
  .ex .ex-title{
    background-size: cover;
    background-position: center;
  }
  .ex .ex-title-wrap{
    width: 62%;
    max-width: 520px;
    top: 30%;
    padding: 22px 22px 26px;
  }
  .ex .ex-title-wrap-en{ padding-right: 110px; }
  .ex .ex-title-wrap-en:after{ width: 96px; }
  .ex .ex-title-wrap p{ font-size: 16px; }
}

/* --------------------------------------------------
   スマホ
   ・縦長の枠に横長写真を cover で入れるため左右が大きく切れる。
     顔が入るよう 27% に寄せる（トップページと同じ）
   ・パネルは下寄せにして上半分を写真の見せ場に
   -------------------------------------------------- */
@media screen and (max-width: 767px){
  .ex .ex-title{
    height: 65vh;
    min-height: 450px;
    background-position-x: 27%;
    background-position-y: 22%;
  }
  .ex .ex-title-wrap{
    width: 86%;
    top: auto;
    bottom: 5%;
    padding: 20px 18px 24px;
  }
  .ex .ex-title-wrap h2{ margin-bottom: 6px; }
  .ex .ex-title-wrap h2 img{ max-width: 90%; margin-left: auto; }
  .ex .ex-title-wrap-en{ font-size: 12px; margin-bottom: 8px; padding-right: 78px; }
  .ex .ex-title-wrap-en:after{ width: 66px; top: 7px; }
  .ex .ex-title-wrap p{ font-size: 13px; line-height: 1.8; }
}


/* --------------------------------------------------------------
   2026-08-21  「体験はこちら」リード文 ／ 新規メンバー登録への導線
   -------------------------------------------------------------- */
.rn-reserve-lead{
  text-align: center;
  color: #fff;
  font-size: 18px;
  letter-spacing: .08em;
  margin: 0 0 24px;
}
@media screen and (min-width: 768px){
  .rn-reserve-lead{ font-size: 22px; margin-bottom: 30px; }
}

.rn-register-cta{
  background: #302f2e;
  padding: 46px 0 54px;
  text-align: center;
}
.rn-register-cta__lead{
  color: #fff;
  font-size: 16px;
  letter-spacing: .06em;
  line-height: 1.8;
  margin: 0 0 22px;
}
@media screen and (min-width: 768px){
  .rn-register-cta{ padding: 60px 0 70px; }
  .rn-register-cta__lead{ font-size: 20px; margin-bottom: 28px; }
}


/* 新規メンバー登録ボタン：本番の com-btn--gold は矢印を right:85px（幅342px前提）
   で置いており、文字と重なるため位置を調整 */
.rn-register-cta__btn a{ max-width: 320px; }
.rn-register-cta__btn a:after{ right: 26px; }
@media screen and (min-width: 768px){
  .rn-register-cta__btn a:after{ right: 28px; }
}


/* --------------------------------------------------------------
   2026-08-22  共通クラスを css-renewal/renewal.css へ移動

   .rn-training-photos / .rn-plan-note / .rn-gold-badge（--sm含む）は
   inc/inc-free-renewal.php・inc/inc-price-renewal.php で使っており、
   ジムの特徴ページ(/about-renewal/)とも共用する。
   このファイルは体験ページでしか読み込まれないため、当たっていなかった。
   → 全ページで読み込む renewal.css に移設した。定義はそちらを参照。
   -------------------------------------------------------------- */


/* --------------------------------------------------------------
   2026-08-21  FEATURE を2カラム×3行に、画像はイメージ程度に縮小（ご指示）

   元は「画像50% + テキスト50%」を左右交互に5段積む構成で、
   1項目が画面いっぱいになり縦に長かった。
   カード型（画像が上・テキストが下）にして2列グリッドに並べ替える。
   POINT2・4はHTML上テキストが先に来るので order で画像を上に統一する。
   -------------------------------------------------------------- */
@media screen and (min-width: 768px){
  .ex .feature-wrap{
    max-width: 1080px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 34px;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .ex .feature-wrap-col,
  .ex .feature-wrap-col:nth-child(2n){
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    margin-bottom: 0;
    background-color: #fff;
    box-shadow: 0 10px 10px rgba(0,0,0,.05);
    overflow: hidden;
  }
  /* 画像を必ず上に */
  .ex .feature-wrap-col-img{
    order: 1;
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .ex .feature-wrap-col-img img{
    display: block;
    width: 100%;
    height: 190px;        /* イメージ程度の高さに */
    object-fit: cover;
  }
  /* テキストは下に。中央絶対配置を解除して通常の流し込みに */
  .ex .feature-wrap-col-txt{
    order: 2;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 26px 24px 30px;
    position: static;
    box-shadow: none;
    flex: 1 1 auto;
  }
  .ex .feature-wrap-col-txt-wrap{
    position: static;
    transform: none;
    left: auto;
    top: auto;
  }
  .ex .feature-wrap-col-txt .point{ margin-bottom: 8px; }
  .ex .feature-wrap-col-txt h3{ margin-bottom: 20px; }
  .ex .feature-wrap-col-txt p{ font-size: 14px; line-height: 1.9; }
}

@media screen and (min-width: 1000px){
  .ex .feature-wrap-col-img img{ height: 210px; }
  .ex .feature-wrap-col-txt{ padding: 30px 28px 34px; }
}

/* スマホは1カラムのまま、画像だけ低くする */
@media screen and (max-width: 767px){
  .ex .feature-wrap-col-img img{
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
  }
}




/* --------------------------------------------------------------
   2026-08-21  sec01__fourthfree__block の下の余白を削除（ご指示）

   実体は padding ではなく taiken-custom/css/style.css の
   「margin: 0 auto 100px」（480px以下で有効）。
   念のため padding-bottom もあわせて 0 にしておく。
   -------------------------------------------------------------- */
.ex .sec01__fourthfree__block{
  margin-bottom: 0;
  padding-bottom: 0;
}


/* --------------------------------------------------------------
   2026-08-21  予約カレンダーの案内文
   -------------------------------------------------------------- */
.rn-reserve-note{
  text-align: center;
  color: #fff;
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: .04em;
  margin: -10px auto 26px;
  padding: 0 20px;
  max-width: 760px;
  box-sizing: border-box;
}
@media screen and (min-width: 768px){
  .rn-reserve-note{ font-size: 16px; margin: -14px auto 32px; }
}






/* --------------------------------------------------------------
   2026-08-21  料金プラン比較表

   ・プラン名（サポート／セルフ）を画像ではなく文字で表示
   ・列の位置は元画像(2048px幅)の金帯を実測して算出
       サポート x490〜1248  → left 23.93% / width 37.01%
       セルフ   x1280〜2043 → left 62.50% / width 37.26%
   ・注釈は画像から切り離してテキスト化（呼称もセルフプランへ）
   -------------------------------------------------------------- */
.rn-plantable{
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.rn-plantable__inner{
  position: relative;
}
.rn-plantable__head{
  position: relative;
  height: 40px;
  margin-bottom: 6px;
}
.rn-plantable__head-item{
  position: absolute;
  top: 0;
  display: block;
  text-align: center;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: .1em;
  color: #e3c88a;
  white-space: nowrap;
}
.rn-plantable__head-support{ left: 23.93%; width: 37.01%; }
.rn-plantable__head-self   { left: 62.50%; width: 37.26%; }

.rn-plantable__img{ margin: 0; }
.rn-plantable__img img{
  display: block;
  width: 100%;
  height: auto;
}

.rn-plantable__note{
  color: #fff;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: .02em;
  text-align: center;
  margin: 22px auto 0;
  max-width: 960px;
}

@media screen and (max-width: 900px){
  .rn-plantable__head{ height: 32px; }
  .rn-plantable__head-item{ font-size: 17px; }
  .rn-plantable__note{ font-size: 13px; }
}


/* --------------------------------------------------------------
   2026-08-21  お得バナー画像を非表示（ご指示）
   loop_otoku2.png（最大3,000円迄の割引バナー）は旧名称「プレミアムプラン限定」
   が入っているため非表示に。内容はプラン内のテキストで補っている。
   ※ HTML は残してあるので、この1ブロックを消せば表示に戻せる
   -------------------------------------------------------------- */
.ex .ex__premire__bnr{ display: none; }
.ex .ex__premire__item{ text-align: center; }


/* --------------------------------------------------------------
   2026-08-21  FEATURE を3カラムに（ご指示）
   5項目なので 3列 → 2行（3+2）になる。
   タブレット(768〜999px)は2列のまま、スマホは1列。
   -------------------------------------------------------------- */
@media screen and (min-width: 1000px){
  .ex .feature-wrap{
    max-width: 1240px;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px 26px;
  }
  .ex .feature-wrap-col-img img{ height: 180px; }
  .ex .feature-wrap-col-txt{ padding: 24px 20px 28px; }
  .ex .feature-wrap-col-txt p{ font-size: 13.5px; line-height: 1.85; }
}


/* --------------------------------------------------------------
   2026-08-21  3つのフリー／4つ目のフリーを非表示（ジムの特徴ページへ移動）

   マークアップは inc/inc-free-renewal.php に切り出して両ページで共用。
   このページでは「入会金、登録料無料!」だけ残し、その下を非表示にする。
   ※ HTML は残っているので、このブロックを消せば表示に戻せる
   -------------------------------------------------------------- */
/* 2026-08-26 4つ目のフリーをこのページに載せることになったため、
   非表示指定を解除した（3つのフリーはこのページでは出力していない） */


/* --------------------------------------------------------------
   2026-08-22  FEATURE を非表示（ご指示）

   同じ内容をジムの特徴ページ(/about-renewal/)に3カラムで載せたため、
   このページでは非表示にする。
   ※ HTML（inc/inc-feature.php）は残してあるので、
     この1ブロックを消せば表示に戻せる
   ※ 上にある「FEATUREをカード型グリッドに」の指定はそのまま残している
     （表示に戻したときにそのまま効くように）
   -------------------------------------------------------------- */
.ex .feature{ display: none; }


/* --------------------------------------------------------------
   2026-08-25  ファーストビュー(.ex-title)を非表示（ご指示）

   料金プラン(sec04)をページ最上部に持ってきたため、
   体験ページ由来のキービジュアルは出さない。
   ※ HTML は残してあるので、この1ブロックを消せば表示に戻せる
   -------------------------------------------------------------- */
.ex .ex-title{ display: none; }

/* ヘッダー直下から料金プランが始まるので上に余白を確保
   2026-08-27 ご指示により padding を 100px 0 30px に固定 */
.ex .sec04{ padding: 100px 0 30px; }


/* --------------------------------------------------------------
   2026-08-25  ex-subtitle を非表示 ／ sec01-free をその位置へ（ご指示）

   ・「施設見学・体験のご案内」の見出しブロックは料金紹介ページには
     不要なため非表示にする
   ・「入会金、登録料無料!」は page-price-renewal.php 側で
     .rn-price-free として ex-subtitle の下に設置した。
     inc/inc-free-renewal.php から sec01 の中に出るぶんは重複するので消す
   ※ HTML はどちらも残してあるので、このブロックを消せば元に戻せる
   -------------------------------------------------------------- */
.ex .ex-subtitle{ display: none; }

/* 2026-08-25 sec01 ごと削除したので、重複回避の指定は不要になり削除した */

/* 移設先。PLAN見出しの下（sec04 の中）に入るので、背景は sec04 のものを使う */
.rn-price-free{
  padding: 10px 0 40px;
}
.rn-price-free .sec01-free{
  width: 95%;
  max-width: 1000px;
  margin: 0 auto;
}
@media screen and (min-width: 768px){
  .rn-price-free{ padding: 16px 0 54px; }
}


/* --------------------------------------------------------------
   2026-08-26  sec04-title「選べるお得な2つのプラン」を非表示（ご指示）

   ※ プラン内の「通えば通うほどお得に、最大3,000円まで」も同じ
     .sec04-title を持つ（.new 付き）ため、:not(.new) で除外している。
     あちらも消す場合は :not(.new) を外すこと。
   ※ HTML は残してあるので、この1ブロックを消せば表示に戻せる
   -------------------------------------------------------------- */
.ex .sec04-title:not(.new){ display: none; }


/* --------------------------------------------------------------
   2026-08-27  比較表の見出し（サポートプラン／セルフプラン）を
               太字＋白枠（角丸）で囲う（ご指示）

   .rn-plantable__head-item は absolute 配置で、親 .rn-plantable__head の
   高さが 40px（〜900px は 32px）に固定されている。枠と上下パディングを
   足すぶん、親の高さも広げる。
   -------------------------------------------------------------- */
.rn-plantable__head{ height: 58px; }
.rn-plantable__head-item{
  font-weight: 700;
  padding: 7px 0;
  border: 2px solid #fff;
  border-radius: 8px;
  box-sizing: border-box;
}
@media screen and (max-width: 900px){
  .rn-plantable__head{ height: 44px; }
  .rn-plantable__head-item{
    padding: 5px 0;
    border-width: 1.5px;
    border-radius: 6px;
  }
}