/* =========================================================
   Paint Shop Queen
   共通スタイル

   ※このCSSは全ページ共通
   ※Dreamweaver編集用コメント付き
========================================================= */


/* ===============================
   カラー設定（元デザイン）
=============================== */

:root {

--bg-color:#0f0f12;
--card-bg:#1a1a20;

--text-main:#ffffff;
--text-sub:#a0a0b0;

--accent-primary:#00f0ff;
--accent-secondary:#ff00aa;

--gradient-main:linear-gradient(
135deg,
var(--accent-primary),
var(--accent-secondary)
);

--font-main:'Noto Sans JP',sans-serif;
--font-display:'Oswald',sans-serif;

}


/* ===============================
   リセット
=============================== */

*{
box-sizing:border-box;
margin:0;
padding:0;
}

body{

background-color:var(--bg-color);
color:var(--text-main);

font-family:var(--font-main);
line-height:1.6;

overflow-x:hidden;

padding-top:100px; /* 固定ヘッダー分 */

}

a{
text-decoration:none;
color:inherit;
transition:.3s;
}

ul{
list-style:none;
}

img{
max-width:100%;
display:block;
}


/* ===============================
   レイアウト
=============================== */

.container{
max-width:1100px;
margin:auto;
padding:0 20px;
}

.grid{
display:grid;
gap:20px;
}


/* ===============================
   グラデーション文字
=============================== */

.text-gradient{

background:var(--gradient-main);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

font-weight:bold;

}

.text-gradient-retro{

background:linear-gradient(
135deg,
#b026ff,
#00f0ff
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

font-weight:bold;

}


/* ===============================
   セクションタイトル
=============================== */

.section-title{

font-family:var(--font-display);

font-size:2.5rem;

text-transform:uppercase;

margin-bottom:1rem;

border-left:4px solid var(--accent-primary);

padding-left:15px;

line-height:1;

}


/* ===============================
   ガラス風ヘッダー（元デザイン）
=============================== */

.site-header{

position:fixed;

top:0;
left:0;

width:100%;

background:rgba(15,15,18,0.95);

backdrop-filter:blur(10px);

z-index:1000;

border-bottom:1px solid rgba(255,255,255,0.1);

}

.header-inner{

padding:15px 20px;

display:flex;

align-items:center;
justify-content:space-between;

flex-wrap:wrap;

gap:15px;

}

.logo {
    display: flex;        /* 中身を横並びにする魔法のコード */
    align-items: center;  /* 画像同士の縦の「中心（真ん中）」を揃える */
    gap: 10px;            /* 2つの画像の間の隙間（お好みで調整してください） */
}

/* ロゴマーク（左）のサイズ */
.logo .logo-mark {
    height: 50px;         /* 高さを指定（幅は自動で綺麗な比率になります） */
    width: auto;
}

/* ショップ名（右）のサイズ */
.logo .logo-text {
    height: 30px;         /* ロゴマークとのバランスを見て調整してください */
    width: auto;
}

/* ===============================
   ナビゲーション
=============================== */

.nav-list{

display:flex;
gap:20px;
flex-wrap:wrap;

}

.nav-link{

font-weight:500;
font-size:.9rem;

position:relative;

opacity:.8;

}

.nav-link:hover,
.nav-link.active{

opacity:1;

color:var(--accent-primary);

}

.nav-link.active::after{

content:'';

position:absolute;

bottom:-5px;
left:0;

width:100%;
height:2px;

background:var(--gradient-main);

}


/* ===============================
   HERO
=============================== */

.hero{

padding:120px 0;

text-align:center;

background:

linear-gradient(
rgba(15,15,18,.7),
rgba(15,15,18,.8)
),

url("../images/hero.jpg");

background-size:cover;
background-position:center;

}

.hero h1{

font-size:2.8rem;

line-height:1.4;

font-weight:700;

margin-bottom:30px;

text-shadow:0 4px 10px rgba(0,0,0,.5);

}

.hero p{

color:var(--text-main);

font-size:1.1rem;

margin-bottom:20px;

text-shadow:0 2px 4px rgba(0,0,0,.8);

background:rgba(0,0,0,.5);

display:inline-block;

padding:10px 20px;

border-radius:4px;

line-height:1.8;

}



/* BIKEボタンがホバー・選択された時の色（ピンク） */
.filter-btn.btn-bike:hover,
.filter-btn.btn-bike.active {
    border-color: var(--accent-secondary);
    color: var(--accent-secondary);
    background: rgba(255, 0, 170, 0.05);
}

/* HELMETボタンがホバー・選択された時の色（黄色）*/
.filter-btn.btn-helmet:hover,
.filter-btn.btn-helmet.active {
    border-color: #ffe600;
    color: #ffe600;
    background: rgba(255, 230, 0, 0.05);
}

/* ALLボタン（ホワイト） */
.filter-btn.btn-all:hover,
.filter-btn.btn-all.active {
    border-color: #ffffff;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

/* CARボタン（元の水色を明示的に指定） */
.filter-btn.btn-car:hover,
.filter-btn.btn-car.active {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: rgba(0, 240, 255, 0.05);
}

/* OTHERボタン（ネオングリーン） */
.filter-btn.btn-other:hover,
.filter-btn.btn-other.active {
    border-color: #00ff66;
    color: #00ff66;
    background: rgba(0, 255, 102, 0.05);
}

/* ===============================
   カード
=============================== */

.card-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

margin-top:30px;

}

.card{

background:var(--card-bg);

border-radius:12px;

overflow:hidden;

border:1px solid rgba(255,255,255,.05);

transition:.3s;

}

.card:hover{

transform:translateY(-5px);

border-color:var(--accent-primary);

}

.card-img-wrap{

position:relative;

aspect-ratio:16/9;

overflow:hidden;

}

.card-img-wrap img{

width:100%;
height:100%;

object-fit:cover;

transition:.5s;

}

.card:hover .card-img-wrap img{

transform:scale(1.05);

}

.card-body{

padding: 10px 15px 5px;

}

.card-title{

font-weight:700;
margin-bottom:5px;

font-size:1.1rem;

}

.card-desc{

font-size:.9rem;
color:var(--text-sub);

}

/* SERVICE専用：4枚カードを2列×2段にする */
@media (min-width: 769px) {
    .card-grid.grid-4cards {
        grid-template-columns: repeat(2, 1fr);
        max-width: 800px;  /* カードが大きくなりすぎないように制限 */
        margin: 0 auto;    /* 4枚のブロック全体を画面の真ん中に寄せる */
    }
}

/* 写真を半分ずつにするスタイル */
.split-half {
    display: flex; /* 横に並べる */
}

.split-half img {
    width: 50%; /* 半分の幅にする */
    height: 100%;
    object-fit: cover; /* 画像の比率を保ったまま枠を埋める */
}

/* 2枚の画像の間に少しだけ隙間を作る（背景色と同じ色で線を引く） */
.split-half img:first-child {
    border-right: 2px solid var(--bg-color);
}

/**===================
===アクセントの色指定====
======================*/

/* ピンク(BIKE) */
.tag.accent-pink {
    background: rgba(255, 0, 170, 0.15);
    color: var(--accent-secondary);
    border: 1px solid rgba(255, 0, 170, 0.3);
}

/* イエロー（HELMET） */
.tag.accent-yellow { 
    background: rgba(255, 230, 0, 0.15); 
    color: #ffe600; 
    border: 1px solid rgba(255, 230, 0, 0.3); 
}

/* グリーン（OTHER） */
.tag.accent-green { 
    background: rgba(0, 255, 102, 0.15); 
    color: #00ff66; 
    border: 1px solid rgba(0, 255, 102, 0.3); 
}

/* ===============================
   フィルター
=============================== */

.filter-nav{

display:flex;
gap:10px;

flex-wrap:wrap;

margin-bottom:20px;

}

.filter-btn{

background:transparent;

border:1px solid #444;

color:#aaa;

padding:8px 16px;

border-radius:20px;

font-size:.9rem;

}

.filter-btn:hover,
.filter-btn.active{

border-color:var(--accent-primary);

color:var(--accent-primary);

background:rgba(0,240,255,.05);

}


/* ===============================
   フッター（全ページ共通）
=============================== */

footer{

background:#000;

padding:50px 0 30px;

margin-top:60px;

border-top:1px solid #222;

text-align:center;

color:#666;

}


/* ===============================
   レスポンシブ
=============================== */

@media(max-width:900px){

.card-grid{
grid-template-columns:repeat(2,1fr);
}

.hero h1{
font-size:2.2rem;
}

}

@media(max-width:768px){

body{
padding-top:120px;
}

.hero h1{
font-size:1.8rem;
}

.section-title{
font-size:1.8rem;
}

.card-grid{
grid-template-columns:1fr;
}

}


/* --- Rental Table Styles --- */
        .rental-notice {
            background: rgba(255, 0, 170, 0.05);
            border-left: 4px solid var(--accent-secondary);
            padding: 20px;
            margin-bottom: 30px;
            border-radius: 4px;
        }
        .rental-notice p {
            font-size: 0.95rem;
            margin-bottom: 8px;
            color: #ddd;
        }
        .rental-notice p:last-child { margin-bottom: 0; }
        
        .price-section { margin-bottom: 30px; }
        .price-section h4 {
            background: #222;
            padding: 8px 12px;
            border-left: 4px solid var(--accent-primary);
            margin-bottom: 10px;
            font-size: 1.1rem;
            color: #fff;
        }
        .price-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.95rem;
        }
        .price-table td, .price-table th {
            border: 1px solid #444;
            padding: 10px 12px;
        }
        .price-table th {
            background: #111;
            color: #aaa;
            font-weight: normal;
            text-align: left;
        }
        .price-table td.price-val {
            text-align: right;
            font-family: monospace;
            font-size: 1.05rem;
            color: #fff;
        }

/* ===============================
   USED CAR
=============================== */

.usedcar-wrap{

background:var(--card-bg);

padding:40px;

border-radius:12px;

text-align:center;

border:1px solid rgba(255,255,255,0.05);

margin-top:30px;

}

/* ボタン */

.btn-primary{

background:var(--gradient-main);

color:#fff;

padding:12px 30px;

border-radius:30px;

font-weight:bold;

display:inline-flex;

align-items:center;

gap:8px;

transition:.2s;

}

.btn-primary:hover{

transform:translateY(-2px);

box-shadow:0 0 15px rgba(0,240,255,0.4);

}

/* ===============================
   外部サイトへのリンクカード（中古車ページ）
=============================== */
.external-links-grid {
    display: grid;
    /* 画面が広いときは2列、スマホの時は自動で1列になります */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.ext-link-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 25px;
    border-radius: 12px;
    text-align: left;
}

.ext-link-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ext-link-title {
    font-size: 1.4rem;
    font-weight: bold;
    font-family: var(--font-display);
    letter-spacing: 1px;
}

.ext-link-desc {
    font-size: 0.85rem;
    color: var(--text-sub);
}

.ext-link-card i {
    color: var(--text-sub);
    transition: 0.3s;
}

/* クルマ用（水色）のホバーアクション */
.car-link:hover {
    background: rgba(0, 240, 255, 0.05);
    border-color: var(--accent-primary);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 240, 255, 0.2);
}
.car-link .ext-link-title {
    color: var(--accent-primary);
}
.car-link:hover i {
    color: var(--accent-primary);
}

/* バイク用（ピンク）のホバーアクション */
.bike-link:hover {
    background: rgba(255, 0, 170, 0.05);
    border-color: var(--accent-secondary);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(255, 0, 170, 0.2);
}
.bike-link .ext-link-title {
    color: var(--accent-secondary);
}
.bike-link:hover i {
    color: var(--accent-secondary);
}

/* =========================================================
   INDEX専用スタイル
========================================================= */


/* POLICY */

.policy-box{

background:rgba(255,255,255,0.03);

padding:30px;

border-radius:12px;

border-left:4px solid var(--accent-primary);

}

.policy-title{

font-size:1.2rem;

font-weight:bold;

margin-bottom:15px;

color:var(--text-main);

}

.policy-text{

color:#ccc;

line-height:1.8;

}



/* FLOW */

.flow-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

gap:20px;

text-align:center;

margin-top:20px;

}


.flow-box{

padding:20px;

background:rgba(255,255,255,0.05);

border-radius:8px;

}


.flow-box i{

color:var(--accent-primary);

margin-bottom:10px;

}


.flow-box p{

font-size:.9rem;

color:#aaa;

}

/* FLOWアイコンカラー */

.flow-box svg{

color:var(--accent-primary);

margin-bottom:10px;

}

/* ===============================
   余白ユーティリティ
=============================== */

.mt-lg{
margin-top:60px;
}

.mb-md{
margin-bottom:30px;
}


/* --- Kodawari (Process) --- */
        .process-steps { margin-top: 30px; }
        .step-item {
            display: flex; gap: 20px;
            background: rgba(255,255,255,0.03);
            padding: 20px;
            border-radius: var(--radius-md);
            margin-bottom: 15px;
            align-items: flex-start;
        }
        .step-num {
            font-family: var(--font-display);
            font-size: 2rem;
            color: var(--accent-secondary);
            font-weight: bold;
            line-height: 1;
        }


/* Tags */
        .tag-wrap { 
    		display: flex; 
    		flex-wrap: wrap; 
   			gap: 5px; 
   		    margin-bottom: 0; /* 0にして余白を消す */
			}
        .tag {
            font-size: 0.75rem; padding: 2px 8px; border-radius: 4px;
            background: rgba(255,255,255,0.1); color: var(--text-sub);
        }
        .tag.accent { background: rgba(0, 240, 255, 0.15); color: var(--accent-primary); border: 1px solid rgba(0, 240, 255, 0.3); }


/* =====================================================
   車検ページ専用CSS
===================================================== */


/* HERO（専用画像） */
.inspection-hero{
background:
linear-gradient(rgba(15,15,18,.7),rgba(15,15,18,.9)),
url('https://loremflickr.com/1920/1080/mechanic,garage');
background-size:cover;
background-position:center;
}


/* 説明文 */
.inspection-text{
font-size:1.05rem;
color:#ccc;
line-height:1.8;
margin-top:20px;
}


/* 車検内容 */
.inspection-grid{
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
margin-top:30px;
}

.inspection-box{
background:rgba(255,255,255,0.05);
padding:30px;
border-radius:8px;
}

.inspection-box h3{
color:var(--accent-primary);
margin-bottom:10px;
}

.inspection-box.accent h3{
color:var(--accent-secondary);
}


/* アイコン */
.inspection-icons{
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
text-align:center;
margin-top:30px;
}

.icon-box{
background:rgba(0,0,0,0.5);
padding:20px;
border-radius:8px;
border:1px solid #333;
}

.icon-box i{
color:var(--accent-primary);
margin-bottom:10px;
}

.icon-box p{
font-size:0.9rem;
color:#aaa;
}


/* フッター簡易 */
.footer-logo{
font-size:1.5rem;
font-family:var(--font-display);
margin-bottom:10px;
}

.footer-info{
font-size:0.9rem;
color:#aaa;
}

/* =========================================================
   ハンバーガーメニュー（スマホ用設定）
========================================================= */

/* パソコン画面ではボタンを隠す */
.hamburger {
    display: none;
}

/* スマホ画面（横幅768px以下）の時のデザイン */
@media (max-width: 768px) {
    
    /* ハンバーガーボタンの見た目 */
    .hamburger {
        display: block;
        position: relative;
        z-index: 100; /* メニューより上に表示 */
        width: 40px;
        height: 40px;
        background: none;
        border: none;
        cursor: pointer;
    }

    /* 3本線のデザイン */
    .hamburger span {
        display: block;
        position: absolute;
        width: 25px;
        height: 2px;
        background-color: #fff;
        left: 7px;
        transition: 0.3s; /* アニメーションの速度 */
    }
    
    /* 3本線の位置 */
    .hamburger span:nth-child(1) { top: 10px; }
    .hamburger span:nth-child(2) { top: 19px; }
    .hamburger span:nth-child(3) { top: 28px; }

    /* ボタンが押されて「×」になる時のアニメーション */
    .hamburger.is-active span:nth-child(1) {
        top: 19px;
        transform: rotate(45deg);
    }
    .hamburger.is-active span:nth-child(2) {
        opacity: 0; /* 真ん中の線を消す */
    }
    .hamburger.is-active span:nth-child(3) {
        top: 19px;
        transform: rotate(-45deg);
    }

    /* ナビゲーションメニュー（初期状態は画面の右外に隠す） */
    .global-nav {
        position: fixed;
        top: 0;
        right: -100%; /* 右に100%ずらして隠す */
        width: 100%;
        height: 100vh; /* 画面いっぱいの高さ */
        background-color: rgba(15, 15, 18, 0.95); /* ダークな半透明背景 */
        z-index: 90;
        transition: 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ボタンが押されてメニューが開いた時（画面内にスライド） */
    .global-nav.is-active {
        right: 0;
    }

    /* メニューの文字を縦並びに大きくする */
    .nav-list {
        display: flex;
        flex-direction: column;
        text-align: center;
        gap: 30px; /* 文字と文字の隙間 */
    }
    .nav-link {
        font-size: 1.2rem;
    }
}


/* =========================================================
   変な改行を防ぐ魔法のクラス
========================================================= */
.keep-word {
    display: inline-block;
}


/* 印刷用の店舗情報を、通常のスマホ・PC画面では隠す */
.print-footer-info {
    display: none;
}


/* =========================================================
   印刷専用スタイル（A4用紙に綺麗に収める設定：最終完成版）
========================================================= */
@media print {
    
    @page {
        size: A4 portrait;
        margin: 10mm; 
    }

    /* ヘッダーとフッターを非表示 */
    .site-header, footer {
        display: none !important;
    }

    /* 背景を白、文字を黒、行間を詰める */
    body {
        background: #fff !important;
        color: #000 !important;
        padding-top: 0 !important;
        line-height: 1.2 !important;
    }

    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    .mt-lg {
        margin-top: 0 !important;
    }
    
    .section-title {
        color: #000 !important;
        border-left-color: #000 !important;
        font-size: 1.5rem !important;
        margin-bottom: 5px !important;
    }
    
    /* 注意事項の余白 */
    .rental-notice {
        background: #f5f5f5 !important;
        border-left-color: #333 !important;
        padding: 5px 10px !important;
        margin-bottom: 10px !important;
    }
    .rental-notice p {
        color: #000 !important;
        font-size: 0.8rem !important;
        margin-bottom: 0 !important;
    }

    /* 【車の表】1枚目に収めるため、3列でギュッとコンパクトに並べる */
    .grid.print-car-group {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px 10px !important; 
        align-items: start !important;
        margin-bottom: 0 !important;
    }
    
    /* 共通：途中で表が真っ二つに割れるのを防ぐ */
    .price-section {
        break-inside: avoid;
        page-break-inside: avoid;
        margin-bottom: 5px !important;
    }

    /* 共通：テーブルの基本デザイン（主に車用） */
    .price-section h4 {
        background: #e0e0e0 !important;
        color: #000 !important;
        border-left-color: #333 !important;
        font-size: 0.85rem !important;
        padding: 3px 6px !important;
        margin-top: 0 !important;
        margin-bottom: 2px !important;
    }
    .price-table {
        font-size: 0.75rem !important;
        width: 100% !important;
    }
    .price-table th {
        background: #ececec !important;
        color: #000 !important;
    }
    .price-table td, .price-table th {
        border-color: #ccc !important;
        padding: 2px 4px !important; 
    }
    .price-table td.price-val {
        color: #000 !important;
    }

    /* ---------------------------------------------------------
       ★ここから【バイクの表専用】印刷時にドカンと大きくする設定
    --------------------------------------------------------- */
    .grid.print-bike-group {
        grid-template-columns: 1fr !important;      /* 2列から1列にして横幅を広げる */
        max-width: 550px !important;                 /* 大きくなりすぎないように程よい幅に制限 */
        margin: 40px auto 0 !important;              /* 中央寄せにする */
        align-items: start !important;
    }
    /* バイクのタイトルだけ大きく */
    .print-bike-group .price-section h4 {
        font-size: 1.1rem !important;
        padding: 8px 12px !important;
        margin-bottom: 5px !important;
    }
    /* バイクの文字だけ大きく（読みやすいサイズに） */
    .print-bike-group .price-table {
        font-size: 0.95rem !important;
    }
    /* バイクのセルの隙間（上下左右）を広げて、表全体の縦横をボリュームアップ */
    .print-bike-group .price-table td, 
    .print-bike-group .price-table th {
        padding: 8px 12px !important; 
    }

    /* ---------------------------------------------------------
       印刷用店舗情報（3行バージョン）
    --------------------------------------------------------- */
    .print-footer-info {
        display: block !important;
        grid-column: 1 / -1 !important; /* 列の壁を壊して全幅にする */
        width: 100% !important;
        border-top: 1px solid #ccc !important;
        margin-top: 30px !important;
        padding-top: 10px !important;
        text-align: center !important;
    }
    .print-footer-info p {
        font-size: 0.75rem !important;
        color: #000 !important;
        margin: 0 !important;
        letter-spacing: 0.5px !important;
        line-height: 1.4 !important; /* 複数行の行間を綺麗に保つ */
    }

    /* 強制ページめくり命令 */
    .print-page-break {
        page-break-before: always;
        break-before: page;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
}