/*
Theme Name: K-RENT Child
Description: K-RENTホームページ改修用の子テーマ。親テーマ(k-rent)は無変更のまま維持し、このテーマ側だけを編集することで安全に見た目・機能を調整する。
Author: K-RENT
Template: k-rent
Version: 1.7.0
*/

/* ここから下は子テーマ独自の追加スタイル（親テーマのCSSはfunctions.php経由で別途読み込み済み） */

/* ---- 共通の余白・カード見た目（2026-09-15 見た目の現代化） ---- */
.krent-section {
margin-bottom: 24px;
}
.krent-card {
border-radius: 6px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}
.krent-card h3.point01 {
margin-bottom: 12px;
}

/* ---- トップのキャッチコピー ---- */
.krent-hero-copy {
text-align: center;
padding: 32px 16px 28px;
background: #fff;
}
.krent-catch {
color: #00A0DD;
font-size: 1.7em;
font-weight: bold;
margin: 0 0 12px;
line-height: 1.4;
letter-spacing: 0.02em;
}
.krent-catch-sub {
color: #333;
font-size: 1em;
margin: 0;
line-height: 1.8;
}

.krent-accident-intro,
.krent-lineup-intro,
.krent-service-area,
.krent-omimai {
padding: 22px 20px;
margin: 0 0 20px;
border-left: 3px solid #DF257E;
background: #fff;
}
.krent-accident-intro h3,
.krent-lineup-intro h3,
.krent-service-area h3 {
color: #00A0DD;
margin-top: 0;
}
.krent-vehicle-notice {
font-size: 0.85em;
color: #777;
margin-top: 14px;
}
.krent-lineup-cta {
margin-top: 16px;
}
.krent-omimai {
border-left-color: #00A0DD;
font-weight: bold;
color: #DF257E;
text-align: center;
}

/* ---- 車両ジャンル一覧（2026-09-19改訂）：チップ表示・均一な箱6個構成をやめ、
   写真中心・大小の強弱がある「車両紹介」らしい見せ方に変更 ---- */
.krent-genre-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px 20px;
margin: 24px 0 6px;
}
.krent-genre-card {
display: flex;
flex-direction: column;
}
.krent-genre-card--no-photo {
padding: 16px 18px;
border: 1px solid #e6e6e6;
border-top: 3px solid #00A0DD;
background: #fff;
}
/* 代表画像は複数枚を横並びのミニストリップで表示（未設定なら何も出ない） */
.krent-genre-card-photos {
display: flex;
gap: 3px;
width: 100%;
margin-bottom: 12px;
}
.krent-genre-card-photo {
position: relative;
flex: 1 1 0;
aspect-ratio: 4 / 3;
overflow: hidden;
background: #eee;
}
.krent-genre-card-photo img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.krent-genre-card-body {
padding: 0 2px;
}
.krent-genre-card--no-photo .krent-genre-card-body {
padding: 0;
}
.krent-genre-card-title {
margin: 0 0 6px;
font-size: 1.05em;
font-weight: bold;
color: #222;
letter-spacing: 0.01em;
}
.krent-genre-card-examples {
margin: 0;
font-size: 0.85em;
line-height: 1.7;
color: #555;
}

/* ショーケース扱いのジャンル（ミニバン・SUV／高級車・高級ミニバン）：横幅2倍・写真を大きく */
.krent-genre-card--feature {
grid-column: span 2;
padding-bottom: 20px;
border-bottom: 1px solid #ececec;
}
.krent-genre-card--feature.krent-genre-card--no-photo {
border: none;
border-bottom: 1px solid #ececec;
border-top: none;
padding: 0 0 20px;
}
.krent-genre-card--feature .krent-genre-card-photos {
gap: 4px;
}
.krent-genre-card--feature .krent-genre-card-photo {
aspect-ratio: 16 / 10;
}
.krent-genre-card--feature .krent-genre-card-photo--main {
flex: 2 1 0;
}
.krent-genre-card--feature .krent-genre-card-title {
font-size: 1.3em;
color: #00A0DD;
}
.krent-genre-card--feature .krent-genre-card-examples {
font-size: 0.95em;
color: #444;
}
.krent-genre-grid > .krent-genre-card--feature:last-child {
border-bottom: none;
padding-bottom: 0;
}

.krent-tel-link {
color: #DF257E;
font-weight: bold;
font-size: 1.2em;
text-decoration: none;
}
.krent-tel-link:hover {
text-decoration: underline;
}

/* スマホ版フッターの電話番号（2026-09-15、画像tel03_number_sp.pngからテキスト化） */
.krent-tel-link-sp {
display: block;
text-align: center;
text-decoration: none;
background: #DF257E;
color: #fff;
padding: 10px 8px;
border-radius: 4px;
}
.krent-tel-link-sp-label {
display: block;
font-size: 0.7em;
line-height: 1.4;
}
.krent-tel-link-sp-number {
display: block;
font-size: 1.5em;
font-weight: bold;
letter-spacing: 0.03em;
}

.krent-notice {
padding: 24px 16px;
background: #fff;
line-height: 1.8;
}

/* スマホ幅での余白調整（2026-09-15、既存レイアウトの崩れは発生させない範囲での微調整） */
@media screen and (max-width: 640px) {
.krent-hero-copy {
padding: 24px 12px 20px;
}
.krent-catch {
font-size: 1.4em;
}
.krent-accident-intro,
.krent-lineup-intro,
.krent-service-area,
.krent-omimai {
padding: 18px 14px;
}
.krent-genre-grid {
grid-template-columns: 1fr;
gap: 16px;
}
}