@charset "utf-8";

/* ============================================================================
   fmc_azm: 料金カード（中古／新車タブ）専用スタイル

   【なぜ別ファイルなのか】
     style.css は 18行目〜3,179行目までが丸ごと1つの @media(max-width:768px) の
     中にあるスマホ用ファイル（smartphone.css）と対になっていて、追記位置を誤ると
     PCとスマホのどちらかで丸ごと効かなくなる。
     カードは新しく作るレイアウトなので、PC・スマホ両方のスタイルをこの1本に
     閉じ込めて、既存CSSの構造に影響されないようにしている。

   【スコープ】
     すべて #rentacar_price 配下に限定している。クラス名も rcp- で始めており、
     既存のクラス体系（price_box / tbl_price / rentacar_list など）とは衝突しない。

   【本番へ切り替えるとき】
     price.php にこのCSSの読み込みを移すだけでよい。中身は変更不要。
============================================================================ */

#rentacar_price{
  /* fmc_azm: 配色は現行サイト（indio系）に合わせた白背景×ワインレッド。
     青系ではないので、色を足すときはこの変数を経由すること。 */
  --rcp-brand:#8a1a3d;
  --rcp-brand-strong:#6c1130;
  --rcp-brand-soft:#f6e7ec;
  --rcp-card:#ffffff;
  --rcp-border:#e7dee2;
  --rcp-border-strong:#d8ccd1;
  --rcp-ink:#2a1d22;
  --rcp-muted:#7c6b71;
  /* fmc_azm: 「ナビなし」など控えめに見せたい文字の色。
     モックアップでは #a4959b だったが、白地でのコントラストが 2.86 しかなく
     小さい文字の基準（4.5）を大きく下回っていたため濃くしている。
     「ナビが付いていない」は読み落とされると困る情報なので、
     薄さは色ではなく「塗りを外して枠線だけにする」ことで表している。 */
  --rcp-faint:#7c6b71;
  /* fmc_azm: 画像未登録のプレースホルダ用。薄いピンクの上に載るので、
     白地よりコントラストが落ちる分だけ濃くしてある（#f6e7ec 上で 4.64）。 */
  --rcp-faint-on-soft:#756469;
  --rcp-price-panel:#fffbe3;
  --rcp-price-line:#efe6c4;
  --rcp-note:#8a7a80;
  --rcp-shadow:0 1px 2px rgba(74,20,40,.05),0 8px 22px rgba(74,20,40,.06);

  color:var(--rcp-ink);
  /* fmc_azm: font-family を明示している。未指定のままだと iOS Safari が
     明朝体で描画してしまい、PCでは気づけない崩れ方をするため。 */
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,"Noto Sans JP",Meiryo,sans-serif;
  line-height:1.6;
  margin:0 0 10px;
}

#rentacar_price *{ box-sizing:border-box; }

/* fmc_azm: default.css にサイト全体の「table,div{margin:auto}」がある。
   通常の縦積みでは margin-top:auto は 0 になるので無害だが、カードは縦方向の
   flex なので「余った高さを子要素に配る」という別の意味になり、
   カード下端にそろえたい詳細写真ボタンが宙に浮いてしまう。
   ここで一度 0 に戻し、意図した箇所（.rcp-detail）だけで auto を効かせる。 */
#rentacar_price div{ margin:0; }

#rentacar_price .rcp-lede{
  color:var(--rcp-muted);
  font-size:14px;
  margin:0 0 16px;
  text-align:center;
}

/* ----------------------------------------------------------------------------
   タブ（中古車レンタカー / 新車レンタカー）
---------------------------------------------------------------------------- */
#rentacar_price .rcp-tabs{
  display:inline-flex;
  background:#fff;
  border:1px solid var(--rcp-border);
  border-radius:999px;
  padding:5px;
  gap:4px;
  margin:0 0 20px;
  box-shadow:var(--rcp-shadow);
}

#rentacar_price .rcp-tab{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  cursor:pointer;
  font:inherit;
  font-weight:700;
  font-size:14.5px;
  color:var(--rcp-muted);
  padding:9px 20px;
  border-radius:999px;
  transition:background .15s,color .15s;
}

#rentacar_price .rcp-tab[aria-selected="true"]{
  background:var(--rcp-brand);
  color:#fff;
}

/* fmc_azm: キーボード操作でどこにいるか分かるようにする。
   マウス操作では出ないので、見た目の邪魔にはならない。 */
#rentacar_price .rcp-tab:focus-visible{
  outline:2px solid var(--rcp-brand-strong);
  outline-offset:2px;
}

/* ----------------------------------------------------------------------------
   カードの並び（PC3列 / タブレット2列 / スマホ1列）
---------------------------------------------------------------------------- */

/* fmc_azm: PCではサイト側の #Price（最大920px）より広げて3列にする。
   920px幅のまま3列にするとクラス名や金額が折り返して読みにくくなるため、
   中央基準で画面幅いっぱいまで広げている。 */
@media (min-width:921px){
  #rentacar_price{
    width:min(1180px,94vw);
    margin-left:50%;
    transform:translateX(-50%);
  }
}

#rentacar_price .rcp-grid{
  display:grid;
  /* fmc_azm: minmax(0,1fr) にしているのは、1fr のままだと列が中身の実寸より
     小さくならず、長いクラス名や大きな画像で列幅が膨らんでしまうため。 */
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

/* fmc_azm: 非表示のタブは hidden 属性で隠す。display だけで消すと
   読み上げソフトには両方のタブの中身が読まれてしまう。 */
#rentacar_price .rcp-grid[hidden]{ display:none; }

@media (max-width:900px){
  #rentacar_price .rcp-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:620px){
  #rentacar_price .rcp-grid{ grid-template-columns:minmax(0,1fr); }
}

#rentacar_price .rcp-empty{
  grid-column:1 / -1;
  text-align:center;
  color:var(--rcp-muted);
  font-size:14px;
  border:1px dashed var(--rcp-border-strong);
  border-radius:10px;
  padding:40px 20px;
  margin:0;
}

/* ----------------------------------------------------------------------------
   カード1枚
---------------------------------------------------------------------------- */
#rentacar_price .rcp-card{
  background:var(--rcp-card);
  border:1px solid var(--rcp-border);
  border-radius:14px;
  padding:18px 18px 16px;
  /* fmc_azm: 縦積みの flex にしているのは、詳細写真ボタンを
     margin-top:auto でカード下端にそろえるため。
     これで写真枚数や料金の行数が違ってもボタンの高さが一致する。 */
  display:flex;
  flex-direction:column;
  gap:14px;
  box-shadow:var(--rcp-shadow);
}

/* fmc_azm: クラス名と車種例バッジを横並びにするが、必ず折り返せるようにしている。
   車種例は運用担当の自由入力で、「タント・N-BOX・スペーシア・ムーヴキャンバス等」の
   ように長くなることがある。折り返しを禁じているとカードの外へはみ出し、
   ページ全体が横スクロールしてしまう（実測で18pxのはみ出しを確認）。
   短い車種例のときは今までどおり右肩に並び、長いときだけ次の行へ落ちる。 */
#rentacar_price .rcp-head{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-start;
  gap:6px 10px;
}

#rentacar_price .rcp-cls{
  margin:0;
  /* fmc_azm: min-width:0 が無いと、flex の既定（中身より小さくならない）で
     長いクラス名が列幅を押し広げてしまう。 */
  flex:1 1 auto;
  min-width:0;
  overflow-wrap:anywhere;
  font-size:19px;
  font-weight:800;
  color:var(--rcp-brand);
  line-height:1.25;
}

#rentacar_price .rcp-cls small{
  display:block;
  font-size:12px;
  font-weight:700;
  color:var(--rcp-muted);
  margin-top:2px;
}

#rentacar_price .rcp-badge{
  /* fmc_azm: 縮小も折り返しも許す。入りきらないときは行ごと下に落ちる。 */
  flex:0 1 auto;
  max-width:100%;
  background:var(--rcp-brand);
  color:#fff;
  border-radius:999px;
  font-size:11.5px;
  font-weight:700;
  padding:6px 12px;
  overflow-wrap:anywhere;
  letter-spacing:.02em;
}

/* fmc_azm→(2026-09-08 ②改修): 年式。車種例バッジ（.rcp-badge）の右隣に、値のみで小さく出す。
   バッジと同じ行の右端に来るよう flex アイテムとして扱い、バッジと縦位置をそろえる。 */
#rentacar_price .rcp-year{
  flex:0 0 auto;
  align-self:center;
  font-size:12px;
  font-weight:700;
  color:var(--rcp-muted);
  white-space:nowrap;
}

/* fmc_azm: 画像枠に aspect-ratio を持たせて高さを先に確定させている。
   高さが未確定だと、中の img が元画像の比率のまま伸びて
   カードごとに高さがバラつく（グリッドで揃わなくなる）。 */
#rentacar_price .rcp-pic{
  background:var(--rcp-brand-soft);
  border-radius:10px;
  aspect-ratio:16 / 10;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--rcp-faint-on-soft);
  /* fmc_azm→(2026-09-08 ③改修): 拡大バッジ(.rcp-zoombadge)を隅に重ねるための基準。 */
  position:relative;
}

#rentacar_price .rcp-pic img{
  width:100%;
  height:100%;
  /* fmc_azm: 縦横比の違う写真が来ても枠を崩さないよう、はみ出し分は切る。
     車両写真は中央に主題が来るので cover で問題ない。 */
  object-fit:cover;
  display:block;
}

#rentacar_price .rcp-pic .rcp-noimg{
  font-size:11px;
  letter-spacing:.08em;
}

/* ----------------------------------------------------------------------------
   fmc_azm→(2026-09-08 ③改修): カード表面の写真をクリックで詳細写真ポップアップを開く。
     クリックできることを PC でもスマホでも伝えるため、隅に拡大アイコンのバッジを常時
     表示する（スマホはホバーが無いのでバッジが唯一の合図）。PC ではホバーで軽く暗転。
     クリック可能なカードにだけ .rcp-pic--zoom が付く（詳細写真があるとき）。
---------------------------------------------------------------------------- */
#rentacar_price .rcp-pic--zoom{
  cursor:pointer;
}

#rentacar_price .rcp-pic--zoom img{
  transition:transform .2s ease, filter .2s ease;
}

/* PC のホバー時だけ（スマホのタップでは発火しない）軽く拡大＋暗転して押せる感を出す */
@media (hover:hover){
  #rentacar_price .rcp-pic--zoom:hover img{
    transform:scale(1.04);
    filter:brightness(.9);
  }
}

#rentacar_price .rcp-pic--zoom:focus-visible{
  outline:2px solid var(--rcp-brand-strong);
  outline-offset:2px;
}

#rentacar_price .rcp-zoombadge{
  position:absolute;
  right:8px;
  bottom:8px;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:rgba(0,0,0,.55);
  border-radius:50%;
  pointer-events:none; /* クリックは下の .rcp-pic に通す */
}

#rentacar_price .rcp-zoombadge svg{
  display:block;
}

/* ----------------------------------------------------------------------------
   料金
---------------------------------------------------------------------------- */
#rentacar_price .rcp-prices{
  background:var(--rcp-price-panel);
  border:1px solid var(--rcp-price-line);
  border-radius:10px;
  padding:4px 12px;
  display:flex;
  flex-direction:column;
}

#rentacar_price .rcp-prow{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;
  gap:8px 10px;
  padding:9px 2px;
  border-bottom:1px dashed var(--rcp-price-line);
}

#rentacar_price .rcp-prow:last-child{ border-bottom:0; }

#rentacar_price .rcp-plabel{
  font-size:13px;
  color:var(--rcp-ink);
  font-weight:800;
}

#rentacar_price .rcp-pmain{
  grid-column:2;
  text-align:right;
  font-size:23px;
  font-weight:800;
  color:var(--rcp-ink);
  /* fmc_azm: 数字の幅をそろえて、カード間で桁位置が揃って見えるようにする。 */
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
  line-height:1.1;
}

#rentacar_price .rcp-pmain .rcp-yen{
  font-size:14px;
  font-weight:700;
  margin-right:1px;
}

#rentacar_price .rcp-pmain .rcp-tax{
  font-size:11px;
  font-weight:700;
  color:var(--rcp-brand);
  margin-right:5px;
  vertical-align:2px;
}

#rentacar_price .rcp-pday{
  grid-column:2;
  text-align:right;
  font-size:11.5px;
  color:var(--rcp-muted);
  font-variant-numeric:tabular-nums;
  margin-top:1px;
}

#rentacar_price .rcp-calc{
  font-size:11px;
  color:var(--rcp-note);
  text-align:center;
  margin-top:-2px;
}

/* ----------------------------------------------------------------------------
   機能タグ
---------------------------------------------------------------------------- */
#rentacar_price .rcp-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

#rentacar_price .rcp-tag{
  background:var(--rcp-brand-soft);
  color:var(--rcp-brand);
  border-radius:7px;
  font-size:11.5px;
  font-weight:700;
  padding:5px 10px;
}

/* fmc_azm: 「ナビなし」など付いていない装備。塗りを外して打ち消しに見せる。
   文字色を薄くしているのは、付いている装備との強弱を付けるため。 */
#rentacar_price .rcp-tag.off{
  background:transparent;
  color:var(--rcp-faint);
  border:1px solid var(--rcp-border-strong);
}

/* ----------------------------------------------------------------------------
   カードごとの注釈（機能タグの真下）
---------------------------------------------------------------------------- */

/* fmc_azm: クラスごとに条件が違う（禁煙車のみ、走行距離の上限など）ため、
   タグでは書ききれない但し書きをここに出す。
   文字の大きさ・色は上の .rcp-calc（※1ヶ月(30日)計算…）とそろえて、
   「小さな補足」という同じ役割に見えるようにしている。
   ただし本文は自由入力で長くなりうるので、.rcp-calc の中央そろえではなく
   左そろえにして、複数行でも読みやすくしている。 */
#rentacar_price .rcp-note{
  margin-top:-4px;
  font-size:11px;
  line-height:1.7;
  color:var(--rcp-note);
  /* fmc_azm: 長い単語やURLがカード幅を押し広げないようにする。 */
  overflow-wrap:anywhere;
}

/* ----------------------------------------------------------------------------
   車両の詳細写真（中古のみ）
---------------------------------------------------------------------------- */

/* fmc_azm: ポップアップに渡すためだけのリンク置き場。画面には出さない。
   display:none ではなくこの書き方にしているのは、
   magnific-popup が対象リンクを拾えるようにしておくため。 */
#rentacar_price .rcp-gallery{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

#rentacar_price .rcp-detail{
  /* fmc_azm: カード下端にそろえる。料金の行数が違ってもボタンの位置が揃う。 */
  margin-top:auto;
  border-top:1px solid var(--rcp-border);
  padding-top:12px;
}

#rentacar_price .rcp-detailbtn{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  font:inherit;
  font-weight:700;
  font-size:13px;
  width:100%;
  background:transparent;
  color:var(--rcp-brand);
  border:1.5px solid var(--rcp-brand);
  border-radius:9px;
  padding:9px 12px;
  transition:background .15s,color .15s;
}

#rentacar_price .rcp-detailbtn:hover{
  background:var(--rcp-brand);
  color:#fff;
}

#rentacar_price .rcp-detailbtn:focus-visible{
  outline:2px solid var(--rcp-brand-strong);
  outline-offset:2px;
}

/* fmc_azm→(2026-09-08 ①改修): ボタンが2つ（詳細写真／ボディ色一覧）並ぶときの間隔。
   どちらか片方だけのときは余白が出ないよう、隣接時だけ上マージンを付ける。 */
#rentacar_price .rcp-detailbtn + .rcp-detailbtn{
  margin-top:8px;
}

/* fmc_azm: 動きを減らす設定にしている利用者にはアニメーションを出さない。 */
@media (prefers-reduced-motion:reduce){
  #rentacar_price *{ transition:none !important; }
}

/* ============================================================================
   fmc_azm: 詳細写真ポップアップ（magnific-popup）の見た目の調整

   【なぜここに書くか】
     ポップアップの中身は <body> の直下に作られるので、#rentacar_price の
     スコープが届かない。そこで price_new.php 側の mainClass で
     「.rcp-mfp」という目印を付け、それを手がかりに上書きしている。
     サイト既存のポップアップ（foot.php の .popup-modal）にはこの目印が
     付かないため、そちらの見た目は一切変わらない。

   【何を直しているか】
     magnific-popup の既定CSSに、そのままでは使いにくい2点がある。
       1. .mfp-image-holder .mfp-close が width:100% で、
          閉じるボタンが「画像の幅いっぱいの黒い帯」になってしまう。
       2. .mfp-arrow-left{left:0} / .mfp-arrow-right{right:0} が
          画面の左右端に矢印を貼り付けるため、写真から遠く押しにくい。
     どちらも上書きで解決している（!important は使わず、
     クラスを1つ増やして詳細度で勝たせている）。
============================================================================ */

/* fmc_azm: 矢印を写真の近くに寄せるため、ポップアップの器そのものに横幅の上限を置く。
   矢印はこの器の左右端に配置されるので、器を狭めれば写真のすぐ横に来る。
   写真が大きいときは写真の縁に重なる形になり、これはこれで自然に見える。 */
.rcp-mfp .mfp-container{
  max-width:1040px;
  left:0;
  right:0;
  margin:0 auto;
}

/* ---- 前へ / 次へ の矢印 ---- */
.rcp-mfp .mfp-arrow{
  width:52px;
  height:52px;
  top:50%;
  margin-top:-26px;
  padding:0;
  background:rgba(0,0,0,.55);
  border-radius:50%;
  opacity:1;
}

.rcp-mfp .mfp-arrow:hover,
.rcp-mfp .mfp-arrow:focus{ background:rgba(0,0,0,.85); }

/* fmc_azm: 押した瞬間に位置がずれる既定の演出を止める（丸ボタンでは不自然なため）。 */
.rcp-mfp .mfp-arrow:active{ margin-top:-26px; }

.rcp-mfp .mfp-arrow-left{ left:4px; }
.rcp-mfp .mfp-arrow-right{ right:4px; }

/* fmc_azm: 既定の矢印はCSSの三角形を2枚重ねて作られている。
   丸ボタンの中に収まらないので、いったん消して細い山形（＞）を描き直す。 */
.rcp-mfp .mfp-arrow:before,
.rcp-mfp .mfp-arrow .mfp-b{ display:none; }

.rcp-mfp .mfp-arrow:after,
.rcp-mfp .mfp-arrow .mfp-a{
  content:'';
  display:block;
  position:absolute;
  top:50%;
  left:50%;
  width:13px;
  height:13px;
  margin:0;
  border:0;
  border-top:2.5px solid #fff;
  border-right:2.5px solid #fff;
}

.rcp-mfp .mfp-arrow-left:after,
.rcp-mfp .mfp-arrow-left .mfp-a{ transform:translate(-30%,-50%) rotate(-135deg); }

.rcp-mfp .mfp-arrow-right:after,
.rcp-mfp .mfp-arrow-right .mfp-a{ transform:translate(-70%,-50%) rotate(45deg); }

/* ---- 閉じるボタン ---- */
/* fmc_azm: 既定の width:100% を打ち消して、写真の右上に収まる丸ボタンにする。
   写真の外（上）ではなく内側の角に置いているのは、画面が小さいときに
   ボタンが画面外へはみ出して押せなくなるのを避けるため。 */
.rcp-mfp .mfp-image-holder .mfp-close{
  width:44px;
  height:44px;
  line-height:44px;
  top:10px;
  right:10px;
  padding:0;
  text-align:center;
  background:rgba(0,0,0,.55);
  border-radius:50%;
  color:#fff;
  font-size:26px;
  opacity:1;
}

.rcp-mfp .mfp-image-holder .mfp-close:hover,
.rcp-mfp .mfp-image-holder .mfp-close:focus{ background:rgba(0,0,0,.85); }

/* fmc_azm: 押した瞬間に1pxずれる既定の演出を止める。 */
.rcp-mfp .mfp-image-holder .mfp-close:active{ top:10px; }

/* ---- 写真の下の説明と枚数表示 ---- */
/* fmc_azm: 既定では背景が無く、後ろのページの文字と重なって読みにくい。
   帯を敷いて、写真の一部として読めるようにする。 */
.rcp-mfp .mfp-bottom-bar{
  margin-top:-38px;
  padding:0 12px;
  pointer-events:none;
}

.rcp-mfp .mfp-title,
.rcp-mfp .mfp-counter{
  display:inline-block;
  padding:4px 10px;
  background:rgba(0,0,0,.6);
  border-radius:6px;
  color:#fff;
  font-size:12.5px;
  line-height:1.5;
}

.rcp-mfp .mfp-counter{ right:12px; top:auto; bottom:0; }

/* fmc_azm: スマホでは矢印と閉じるボタンを少し小さくして、写真の面積を確保する。 */
@media (max-width:620px){
  .rcp-mfp .mfp-arrow{ width:44px; height:44px; margin-top:-22px; }
  .rcp-mfp .mfp-arrow:active{ margin-top:-22px; }
  .rcp-mfp .mfp-arrow-left{ left:2px; }
  .rcp-mfp .mfp-arrow-right{ right:2px; }
  .rcp-mfp .mfp-image-holder .mfp-close{ width:38px; height:38px; line-height:38px; font-size:22px; top:6px; right:6px; }
  .rcp-mfp .mfp-image-holder .mfp-close:active{ top:6px; }
}