/* ========================================
   共通カラー
======================================== */

:root {
    --wine: #820000;
    --wine-dark: #590000;
    --white: #ffffff;
    --cream: #eeeedd;
    --black: #222222;
    --gray: #f4f4f4;
}


/* ========================================
   基本
======================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: var(--wine);
    color: #333333;

    font-family:
        "Yu Gothic UI",
        "Yu Gothic",
        Meiryo,
        sans-serif;

    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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


/* ========================================
   ヘッダー
======================================== */

.site-header {
    background-color: var(--wine-dark);

    box-shadow:
        0 2px 9px
        rgba(0, 0, 0, 0.35);
}

.header-main {
    width: min(1000px, calc(100% - 30px));
    min-height: 90px;

    margin: 0 auto;

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

    gap: 20px;
}


/* ========================================
   ロゴ
======================================== */

.brand {
    display: flex;
    align-items: center;

    gap: 12px;

    color: var(--white);
    text-decoration: none;
}

.brand img {
    width: 170px;
    height: auto;
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.brand-text span {
    font-size: 11px;
    font-weight: 700;
}

.brand-text strong {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.05em;
}


/* ========================================
   ヘッダー電話番号
======================================== */

.header-contact {
    display: flex;
    flex-direction: column;

    color: var(--white);
    text-align: right;
}

.header-contact span {
    font-size: 11px;
}

.header-contact strong {
    font-size: 27px;
    font-weight: 800;
}


/* ========================================
   TOP メイン
======================================== */

main {
    width: min(1000px, calc(100% - 30px));

    margin: 0 auto;
    padding: 18px 0 50px;
}


/* ========================================
   冬タイヤキャンペーン
======================================== */

.top-layout {
    width: 100%;
}

.hero-card {
    width: 100%;

    overflow: hidden;

    background-color: var(--white);

    border-radius: 6px;

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, 0.25);
}

.hero-card > img {
    width: 100%;
    height: auto;
}

.hero-content {
    padding: 16px 20px 20px;

    text-align: center;
}

.hero-content h1 {
    margin: 0 0 8px;

    color: var(--wine);

    font-size: 27px;
    font-weight: 800;
}

.hero-content p {
    margin: 0;

    font-size: 15px;
    font-weight: 600;

    line-height: 1.8;
}


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

.section-title {
    margin: 30px 0 15px;

    color: var(--white);

    text-align: center;

    font-size: 26px;
    font-weight: 800;

    letter-spacing: 0.04em;
}


/* ========================================
   カーライフサービス 3 × 3
======================================== */

.service-section {
    margin-top: 10px;
}

.service-grid {
    display: grid;

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

    gap: 12px;
}


/* ========================================
   サービスカード
======================================== */

.service-tile {
    position: relative;

    display: block;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background-color: var(--white);

    color: var(--white);
    text-decoration: none;

    border: 4px solid var(--white);
    border-radius: 6px;

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, 0.25);
}

.service-tile img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.service-tile > span {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    min-height: 50px;

    padding: 10px 7px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.92),
            rgba(0, 0, 0, 0.30)
        );

    color: var(--white);

    text-align: center;

    font-size: 16px;
    font-weight: 800;

    line-height: 1.3;
}


/* ========================================
   現在クリック可能なカード
======================================== */

.service-active {
    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.service-active:hover {
    transform: translateY(-5px);

    box-shadow:
        0 9px 20px
        rgba(0, 0, 0, 0.38);
}

.service-active::after {
    content: "詳しく見る";

    position: absolute;

    top: 10px;
    right: 10px;

    padding: 5px 9px;

    background-color: var(--wine);
    color: var(--white);

    font-size: 10px;
    font-weight: 800;

    border-radius: 3px;
}

.service-disabled {
    cursor: default;
}


/* ========================================
   店舗情報
======================================== */

.shop-section {
    margin-top: 35px;
}

.shop-grid {
    display: grid;

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

    gap: 7px;

    align-items: stretch;
}


/* ========================================
   店舗カード
======================================== */

.shop-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    background-color: var(--cream);

    border: 3px solid var(--white);
    border-radius: 5px;

    box-shadow:
        0 3px 8px
        rgba(0, 0, 0, 0.20);
}

.shop-card-header {
    margin: 6px 6px 0;
    padding: 5px;

    background-color: #42423c;
    color: var(--white);

    font-size: 11px;
    font-weight: 800;
}


/* ========================================
   店舗ロゴ
======================================== */

.shop-logo {
    height: 135px;

    margin: 5px 6px 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: #050505;
    color: var(--white);

    font-size: 35px;
    font-weight: 800;

    text-align: center;
}

.shop-logo.technical {
    background-color: #dddddd;

    color: var(--wine);

    font-size: 13px;
}

.shop-logo.orix {
    background-color: #292278;

    color: #ffdf00;
}


/* ========================================
   店舗本文
======================================== */

.shop-content {
    padding: 9px 7px 11px;

    display: flex;
    flex: 1;
    flex-direction: column;
}

.shop-content h3 {
    margin: 0 0 6px;

    color: var(--wine);

    font-size: 14px;
    font-weight: 800;

    line-height: 1.4;
}

.shop-content p {
    margin: 0;

    font-size: 10px;

    line-height: 1.6;
}


/* ========================================
   店舗外部リンク
======================================== */

.shop-links {
    margin-top: auto;

    padding-top: 10px;

    display: flex;
    flex-direction: column;

    gap: 5px;
}

.shop-links a {
    padding: 7px 4px;

    background-color: var(--wine);

    color: var(--white);

    text-align: center;
    text-decoration: none;

    font-size: 9px;
    font-weight: 800;

    border-radius: 3px;
}

.shop-links a:hover {
    background-color: #aa0000;
}


/* ========================================
   TOP Web予約
======================================== */

.top-reservation-section {
    margin-top: 28px;
}


/* Web予約カード */

.top-reservation-card {
    min-height: 120px;

    padding: 22px 25px;

    position: relative;

    display: flex;
    flex-direction: column;

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

    background:
        linear-gradient(
            135deg,
            #a30000,
            #600000
        );

    color: var(--white);

    text-align: center;
    text-decoration: none;

    border:
        2px solid
        rgba(255, 255, 255, 0.50);

    border-radius: 7px;

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, 0.25);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


/* 24時間受付 */

.top-reservation-small {
    margin-bottom: 4px;

    font-size: 12px;
    font-weight: 700;
}


/* Web予約はこちら */

.top-reservation-card strong {
    font-size: 26px;
    font-weight: 800;

    letter-spacing: 0.04em;
}


/* 矢印 */

.top-reservation-arrow {
    position: absolute;

    right: 25px;

    font-size: 27px;
    font-weight: 800;
}


/* hover */

.top-reservation-card:hover {
    transform: translateY(-3px);

    background:
        linear-gradient(
            135deg,
            #bb0000,
            #740000
        );

    box-shadow:
        0 8px 18px
        rgba(0, 0, 0, 0.35);
}


/* ========================================
   電話・お問い合わせ
======================================== */

.contact-section {
    margin-top: 20px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;
}

.contact-box {
    min-height: 95px;

    padding: 14px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background-color: #333333;

    color: var(--white);

    text-align: center;
    text-decoration: none;

    border-radius: 4px;
}

.contact-box span,
.contact-box small {
    font-size: 11px;
}

.contact-box strong {
    font-size: 26px;
}


/* ========================================
   まっくる倶楽部
======================================== */

.about-section {
    margin-top: 20px;

    padding: 25px;

    background-color: var(--white);

    text-align: center;

    border-radius: 4px;
}

.about-section h2 {
    margin: 0 0 10px;

    color: var(--wine);

    font-size: 25px;
}

.about-section p {
    margin: 0;

    font-size: 14px;
}


/* ========================================
   フッター
======================================== */

footer {
    padding: 20px;

    background-color: var(--wine);

    color: var(--white);

    text-align: center;
}

footer p {
    margin: 0;

    font-size: 11px;
}


/* ========================================
   ページトップボタン
======================================== */

.page-top {
    position: fixed;

    right: 18px;
    bottom: 18px;

    width: 48px;
    height: 48px;

    background-color: #222222;
    color: var(--white);

    border: 0;
    border-radius: 4px;

    font-size: 20px;

    cursor: pointer;

    box-shadow:
        0 3px 8px
        rgba(0, 0, 0, 0.30);
}


/* ==================================================
   詳細ページ共通
   tire/
   oil/
================================================== */

.detail-page {
    width: min(
        1000px,
        calc(100% - 30px)
    );

    margin: 0 auto;

    padding: 25px 0 60px;
}


/* ========================================
   パンくず
======================================== */

.breadcrumb {
    margin-bottom: 15px;

    color: var(--white);

    font-size: 12px;
}

.breadcrumb a {
    color: var(--white);

    font-weight: 700;

    text-decoration: none;
}

.breadcrumb span {
    margin: 0 8px;
}


/* ========================================
   詳細ページタイトル
======================================== */

.detail-heading {
    width: min(100%, 620px);

    margin: 0 auto 15px;

    padding: 20px;

    background-color: var(--white);

    border-radius: 6px;

    text-align: center;

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, 0.18);
}

.detail-heading h1 {
    margin: 0 0 8px;

    color: #650000;

    font-size: 27px;
    font-weight: 800;
}

.detail-heading p {
    margin: 0;

    color: #444444;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.7;
}


/* ========================================
   タイヤ詳細
======================================== */

.tire-detail-card {
    width: min(100%, 620px);

    margin: 18px auto 0;

    padding: 18px;

    background-color: var(--white);

    border-radius: 7px;

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, 0.20);
}

.tire-detail-card h2 {
    margin: 0 0 14px;

    padding-bottom: 8px;

    color: #760000;

    font-size: 22px;
    font-weight: 800;

    border-bottom:
        2px solid var(--wine);
}


/* タイヤ3カードの横並び（PC 3列 / タブレット 2列 / スマホ 1列） */

.tire-grid {
    display: grid;

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

    gap: 18px;

    margin-top: 18px;
}

.tire-grid .tire-detail-card {
    width: 100%;

    margin: 0;

    display: flex;

    align-items: center;
}

@media (max-width: 860px) {
    .tire-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 3枚目は中央に1枚で配置 */
    .tire-grid .tire-detail-card:last-child {
        grid-column: 1 / -1;

        width: min(100%, 420px);

        justify-self: center;
    }
}

@media (max-width: 560px) {
    .tire-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .tire-grid .tire-detail-card:last-child {
        width: 100%;
    }
}


/* タイヤの3画像 */

.tire-info-image {
    display: block;

    width: 100%;
    max-width: 520px;

    height: auto;

    margin: 0 auto;

    object-fit: contain;
}


/* ========================================
   詳細 Web予約
======================================== */

.detail-reservation {
    width: min(100%, 620px);

    margin: 20px auto 0;

    padding: 25px 18px;

    background-color: var(--white);

    border-radius: 7px;

    text-align: center;

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, 0.20);
}

.reservation-caption {
    margin: 0 0 14px;

    color: #333333;

    font-size: 17px;
    font-weight: 800;
}

.reservation-note {
    margin: 10px 0 0;

    color: #666666;

    font-size: 12px;
}


/* ========================================
   タイヤ予約ボタン
======================================== */

.tire-reservation-button {
    width: min(100%, 520px);

    margin: 0 auto;

    padding: 15px 18px;

    display: flex;

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

    gap: 10px;

    background:
        linear-gradient(
            #980000,
            #640000
        );

    color: var(--white);

    text-decoration: none;

    border-radius: 6px;

    box-shadow:
        0 4px 10px
        rgba(0, 0, 0, 0.25);
}

.tire-reservation-button:hover {
    transform: translateY(-2px);

    background:
        linear-gradient(
            #b50000,
            #7c0000
        );
}

.tire-reservation-button span {
    font-size: 14px;
    font-weight: 700;
}

.tire-reservation-button strong {
    font-size: 19px;
    font-weight: 800;
}

.reservation-arrow {
    font-size: 20px !important;
}


/* ========================================
   TOPへ戻る
======================================== */

.back-top {
    margin-top: 25px;

    text-align: center;
}

.back-top a {
    display: inline-block;

    padding: 10px 22px;

    background-color: #333333;

    color: var(--white);

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    border-radius: 4px;
}


/* ========================================
   OIL DETAIL
======================================== */

.oil-section {
    width: min(100%, 720px);

    margin: 16px auto 0;

    padding: 20px;

    background-color: var(--white);

    border-radius: 6px;

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, 0.20);
}

.oil-section h2 {
    margin: 0 0 16px;

    padding-bottom: 8px;

    color: #760000;

    font-size: 22px;

    border-bottom:
        2px solid var(--wine);
}

.oil-wide-image {
    display: block;

    width: 100%;
    max-width: 620px;

    margin: 0 auto;
}

.oil-product-grid {
    display: grid;

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

    gap: 10px;
}

.oil-product-grid img {
    width: 100%;

    border:
        1px solid #dddddd;
}

.oil-info-grid {
    display: grid;

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

    gap: 12px;
}

.oil-info-grid img {
    width: 100%;

    border:
        1px solid #dddddd;
}


/* ========================================
   オイル予約
======================================== */

.oil-reservation-button {
    width: min(100%, 520px);

    margin: 0 auto;

    padding: 15px 18px;

    display: flex;

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

    gap: 10px;

    background:
        linear-gradient(
            #980000,
            #640000
        );

    color: var(--white);

    text-decoration: none;

    border-radius: 6px;
}

.oil-reservation-button strong {
    font-size: 19px;
}


/* ========================================
   タブレット
======================================== */

@media (max-width: 1000px) {

    .shop-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

}


@media (max-width: 850px) {

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

}


/* ========================================
   スマートフォン
======================================== */

@media (max-width: 650px) {

    /* HEADER */

    .header-main {
        min-height: 70px;
    }

    .brand img {
        width: 110px;
    }

    .brand-text span {
        display: none;
    }

    .brand-text strong {
        font-size: 14px;
    }

    .header-contact {
        display: none;
    }


    /* MAIN */

    main {
        width: calc(100% - 14px);
    }


    /* HERO */

    .hero-content {
        padding:
            12px
            10px
            15px;
    }

    .hero-content h1 {
        font-size: 22px;
    }

    .hero-content p {
        font-size: 13px;
    }


    /* SERVICES */

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

        gap: 7px;
    }

    .service-tile {
        border-width: 2px;
    }

    .service-tile > span {
        min-height: 42px;

        padding: 7px 5px;

        font-size: 12px;
    }


    /* SHOP */

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

    .shop-logo {
        height: 120px;
    }


    /* TOP WEB予約 */

    .top-reservation-section {
        margin-top: 20px;
    }

    .top-reservation-card {
        min-height: 90px;

        padding: 16px 18px;
    }

    .top-reservation-card strong {
        font-size: 21px;
    }

    .top-reservation-arrow {
        right: 15px;

        font-size: 22px;
    }


    /* CONTACT */

    .contact-section {
        grid-template-columns: 1fr;
    }

    .contact-box strong {
        font-size: 23px;
    }


    /* DETAIL */

    .detail-page {
        width: calc(100% - 14px);

        padding-top: 12px;
    }

    .detail-heading {
        width: 100%;

        padding: 17px 10px;
    }

    .detail-heading h1 {
        font-size: 22px;
    }


    /* TIRE */

    .tire-detail-card {
        width: 100%;

        margin-top: 12px;

        padding: 8px;
    }

    .tire-detail-card h2 {
        font-size: 19px;
    }

    .tire-info-image {
        width: 100%;
        max-width: none;
    }


    /* RESERVATION */

    .detail-reservation {
        width: 100%;

        padding: 22px 9px;
    }

    .tire-reservation-button,
    .oil-reservation-button {
        width: 100%;

        padding: 13px 8px;

        flex-wrap: wrap;
    }


    /* OIL */

    .oil-section {
        width: 100%;

        padding: 14px 8px;
    }

    .oil-product-grid,
    .oil-info-grid {
        grid-template-columns: 1fr;
    }


    /* PAGE TOP */

    .page-top {
        right: 10px;
        bottom: 10px;
    }

}


/* ========================================
   小さいスマホ
======================================== */

@media (max-width: 360px) {

    .service-grid,
    .shop-grid {
        grid-template-columns: 1fr;
    }

}



#services {
    scroll-margin-top: 80px;
}


/* オイルページ */
.oil-subtitle {
    width: min(100%, 1000px);

    margin: 30px auto 12px;

    padding: 8px 14px;

    background-color: var(--white);

    color: #760000;

    font-size: 20px;
    font-weight: 800;

    border-left: 6px solid var(--wine);
    border-radius: 4px;
}

.oil-menu-grid {
    display: grid;

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

    gap: 12px;
}

.oil-menu-grid .tire-detail-card,
.oil-pair .tire-detail-card {
    width: 100%;

    margin: 0;

    padding: 10px;
}

.oil-pair {
    display: grid;

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

    gap: 18px;

    width: min(100%, 700px);

    margin: 0 auto;
}

.oil-note-line {
    width: min(100%, 360px);

    margin: 12px auto 0;

    padding: 8px;

    background-color: var(--white);

    border-radius: 6px;
}

.oil-cta {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 14px;
}

.oil-cta a {
    display: block;

    width: min(100%, 330px);
}

.oil-cta img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 6px;
}

@media (max-width: 860px) {
    .oil-menu-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 560px) {
    .oil-menu-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .oil-pair {
        grid-template-columns: 1fr;
    }
}


/* メニューカード（洗車・鈑金・車検・ガソリンスタンド） */
.menu-grid {
    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));

    gap: 16px;

    margin-bottom: 10px;
}

.menu-card {
    display: flex;
    flex-direction: column;

    background-color: var(--white);

    border-radius: 7px;

    overflow: hidden;

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, 0.20);
}

.menu-card > img {
    display: block;

    width: 100%;
    height: 180px;

    object-fit: cover;
}

.menu-card-body {
    padding: 14px 16px 18px;

    color: #333333;

    font-size: 14px;
    line-height: 1.7;
}

.menu-card-body h3 {
    margin: 0 0 4px;

    color: #760000;

    font-size: 17px;
    font-weight: 800;
}

.menu-card-body p {
    margin: 0 0 8px;
}

.menu-card-sub {
    color: #555555;

    font-weight: 700;
}

.menu-card-label {
    margin: 8px 0 2px !important;

    color: #760000;

    font-size: 12px;
    font-weight: 800;
}

.menu-card-body ul {
    margin: 0 0 6px;
    padding-left: 18px;
}

.ss-tag {
    display: inline-block;

    padding: 1px 8px;

    background-color: #760000;

    color: var(--white);

    font-size: 11px;
    font-weight: 700;

    border-radius: 10px;

    vertical-align: middle;
}

.map-link {
    color: #760000;

    font-weight: 700;
}

.wide-card {
    width: 100%;

    margin: 18px 0 0;
}

.wide-img {
    max-width: 100%;
}

.award-card {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 18px;
}

.award-img {
    width: 200px;
    max-width: 100%;

    height: auto;
}

.award-card h3,
.wide-card h3 {
    margin: 0 0 8px;

    color: #760000;
}

.award-card ul,
.check-list {
    margin: 0;
    padding-left: 20px;

    line-height: 1.9;
}

.small-note {
    margin: 10px 0 0;

    color: #555555;

    font-size: 12px;
    line-height: 1.7;
}

.step-list {
    display: grid;

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

    gap: 12px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.step-list li {
    padding: 14px;

    background-color: var(--white);

    border-radius: 7px;

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, 0.20);
}

.step-no {
    display: block;

    color: #980000;

    font-size: 12px;
    font-weight: 800;
}

.step-list p {
    margin: 6px 0 0;

    color: #444444;

    font-size: 13px;
    line-height: 1.6;
}

.shop-mini-list {
    display: grid;

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

    gap: 12px;
}

.shop-mini-list p {
    margin: 0;
    padding: 12px 14px;

    background-color: var(--white);

    border-radius: 7px;

    font-size: 13px;
    line-height: 1.6;
}

.shop-mini-list strong {
    display: block;

    color: #760000;
}

.access-text {
    margin: 0 0 16px;

    color: #333333;

    line-height: 1.8;
}

/* サービスメニュー（7項目） */
.service-nav {
    background: #111111;

    border-bottom: 3px solid var(--wine-dark);
}

.service-nav ul {
    width: min(1000px, 100%);

    margin: 0 auto;
    padding: 0;

    display: grid;

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

    list-style: none;
}

.service-nav li + li {
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.service-nav a {
    min-height: 72px;

    padding: 8px 4px;

    display: flex;
    flex-direction: column;

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

    gap: 4px;

    color: var(--white);
    text-decoration: none;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;

    text-align: center;
}

.service-nav a:hover {
    background: var(--wine);
}

.service-nav img {
    width: 28px;
    height: 28px;
}

html {
    scroll-padding-top: 12px;
}

/* 冬タイヤ早割 + Web予約（横並び） */
.top-layout {
    display: grid;

    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);

    gap: 16px;

    align-items: stretch;
}

.top-layout .top-reservation-card {
    min-height: 0;

    padding: 24px 20px;

    gap: 6px;
}

.top-layout .top-reservation-card strong {
    font-size: 24px;
}

.top-layout .top-reservation-arrow {
    position: static;

    margin-top: 6px;
}

@media (max-width: 760px) {
    .top-layout {
        grid-template-columns: 1fr;
    }

    .top-layout .top-reservation-card {
        padding: 18px 16px;
    }

    .service-nav ul {
        grid-template-columns: repeat(4, 1fr);
    }

    .service-nav li:nth-child(n+5) {
        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }

    .service-nav li:nth-child(5) {
        border-left: 0;
    }
}

.oil-pair { align-items: start; }

/* ロゴ系の画像は切り取らず全体を表示 */
.menu-card > img[src*="insurance"] {
    height: auto;
    max-height: 180px;
    object-fit: contain;
    background: #ffffff;
}

/* オイルページ トップ（写真＋電話＋Web予約） */
.oil-top {
    display: grid;

    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);

    gap: 18px;

    padding: 18px;

    background-color: var(--white);

    border-radius: 7px;

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, 0.20);
}

.oil-top-image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 6px;
}

.oil-top-side {
    display: flex;
    flex-direction: column;

    justify-content: center;

    gap: 12px;
}

.oil-top-side h1 {
    margin: 0;

    color: #650000;

    font-size: 27px;
    font-weight: 800;
}

.oil-top-side p {
    margin: 0;

    color: #444444;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.7;
}

.oil-top-side a img {
    width: 100%;
    max-width: 330px;

    border-radius: 6px;
}

@media (max-width: 760px) {
    .oil-top {
        grid-template-columns: 1fr;

        padding: 12px;
    }

    .oil-top-side h1 {
        font-size: 22px;
    }
}

/* 車検ページ トップ */
.shaken-hero {
    padding: 22px 22px 20px;

    display: flex;
    flex-direction: column;

    gap: 10px;

    background:
        linear-gradient(135deg, #fff3e0, #ffd9a8);

    border-radius: 6px;
}

.shaken-hero-label {
    align-self: flex-start;

    padding: 3px 12px;

    background: #e8630a;

    color: #ffffff;

    font-size: 13px;
    font-weight: 800;

    border-radius: 14px;
}

.shaken-hero strong {
    color: #650000;

    font-size: 28px;
    font-weight: 800;

    line-height: 1.4;
}

.shaken-hero p {
    margin: 0;

    color: #444444;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.7;
}

.price-link {
    margin-top: 4px;
    padding: 10px 16px;

    display: flex;
    align-items: center;

    gap: 12px;

    align-self: flex-start;

    background: #ffffff;

    color: #650000;
    text-decoration: none;

    border: 2px solid #e8630a;
    border-radius: 8px;

    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
}

.price-link:hover {
    background: #fff3e0;
}

.price-mark {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: none;

    background: #e8630a;

    color: #ffffff;

    font-size: 26px;
    font-weight: 800;

    border-radius: 50%;
}

.price-text {
    font-size: 17px;
    font-weight: 800;

    line-height: 1.3;
}

.price-text small {
    display: block;

    color: #666666;

    font-size: 11px;
    font-weight: 600;
}

.banner-tel,
.banner-web {
    width: 100%;
    max-width: 330px;

    padding: 10px 14px;

    display: flex;
    flex-direction: column;

    align-items: center;

    background: #3d3d36;

    color: #ffffff;
    text-decoration: none;

    border-bottom: 3px solid #1c1c18;
    border-radius: 6px;
}

.banner-tel span,
.banner-web span {
    font-size: 13px;
}

.banner-tel strong {
    font-size: 26px;
    font-weight: 800;

    letter-spacing: 0.04em;
}

.banner-web strong {
    font-size: 22px;
    font-weight: 800;
}

.banner-tel small,
.banner-web small {
    color: #dddddd;

    font-size: 11px;
}

.banner-web:hover,
.banner-tel:hover {
    background: #52524a;
}

/* 持込み車検 / 引取り車検 */
.plan-grid {
    display: grid;

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

    gap: 16px;

    margin-top: 18px;
}

.plan-card {
    padding: 18px;

    display: flex;
    flex-direction: column;

    gap: 8px;

    background: #ffffff;

    border-top: 6px solid #980000;
    border-radius: 7px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
}

.plan-card-pickup {
    border-top-color: #e8630a;
}

.plan-tag {
    align-self: flex-start;

    padding: 2px 12px;

    background: #980000;

    color: #ffffff;

    font-size: 13px;
    font-weight: 800;

    border-radius: 12px;
}

.plan-card-pickup .plan-tag {
    background: #e8630a;
}

.plan-card h3 {
    margin: 0;

    color: #650000;

    font-size: 20px;
}

.plan-card p {
    margin: 0;

    font-size: 14px;
    line-height: 1.7;
}

.plan-btn {
    margin-top: auto;
    padding: 11px 14px;

    background: #980000;

    color: #ffffff;
    text-decoration: none;

    font-size: 15px;
    font-weight: 800;

    text-align: center;

    border-radius: 6px;
}

.plan-card-pickup .plan-btn {
    background: #e8630a;
}

@media (max-width: 760px) {
    .plan-grid {
        grid-template-columns: 1fr;
    }

    .shaken-hero strong {
        font-size: 23px;
    }
}

/* 店舗リンク（KeePer） */
.shop-mini-link {
    padding: 12px 14px;

    display: block;

    background-color: #e7f0fb;

    color: #333333;
    text-decoration: none;

    font-size: 13px;
    line-height: 1.6;

    border: 2px solid #2b6cb0;
    border-radius: 7px;
}

.shop-mini-link strong {
    display: block;

    color: #1a4f8a;
}

.shop-mini-link:hover {
    background-color: #d4e5f8;
}

.shop-mini-more {
    display: block;

    margin-top: 4px;

    color: #1a4f8a;

    font-size: 12px;
    font-weight: 800;
}

/* 価格表ページ */
.price-table-wrap {
    overflow-x: auto;

    background-color: #ffffff;

    border-radius: 7px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
}

.price-table {
    width: 100%;
    min-width: 640px;

    border-collapse: collapse;

    font-size: 13px;
}

.price-table th,
.price-table td {
    padding: 8px 10px;

    border-bottom: 1px solid #e3d9d9;

    text-align: right;
    white-space: nowrap;
}

.price-table thead th {
    background-color: #760000;

    color: #ffffff;

    text-align: center;
}

.price-table tbody th {
    min-width: 200px;

    color: #650000;

    text-align: left;
    white-space: normal;
}

.price-table tbody th span {
    display: block;

    color: #555555;

    font-size: 12px;
    font-weight: 600;
}

.price-table tbody tr:nth-child(even) {
    background-color: #faf5f5;
}

.price-table td {
    color: #980000;

    font-weight: 700;
}

.price-logo {
    max-width: 150px;
    max-height: 30px;

    margin-bottom: 2px;
}

.price-note {
    margin-top: 14px;

    color: #ffffff;
}


.wide-card .wide-img { max-width: 620px; margin: 0 auto; }
.oil-top-image { object-position: 70% center; }

/* 自動車販売ページ */
.dealer-hero-image {
    object-position: 100% center;
}

.dealer-lead {
    color: #650000;

    font-size: 17px;
}

.dealer-grid {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.dealer-photo {
    height: 210px !important;

    object-position: center top;
}

.dealer-tag {
    display: inline-block;

    margin-bottom: 6px;
    padding: 2px 12px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 800;

    border-radius: 12px;
}

.dealer-tag-new { background: #f2a900; }
.dealer-tag-used { background: #2380c4; }
.dealer-tag-snow { background: #555555; }
.dealer-tag-camper { background: #8a6d1c; }

.dealer-price {
    color: #980000;

    font-size: 18px;
    font-weight: 800;
}

.dealer-contact {
    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 20px;
}

.dealer-contact p {
    margin: 0 0 8px;

    line-height: 1.9;
}

.dealer-shop-link {
    color: #760000;

    font-size: 18px;
    font-weight: 800;

    text-decoration: none;
}

@media (max-width: 760px) {
    .dealer-grid {
        grid-template-columns: 1fr;
    }

    .dealer-contact {
        grid-template-columns: 1fr;
    }
}

/* サービスメニューを常に表示（スクロール追従） */
.service-nav {
    position: sticky;
    top: 0;

    z-index: 100;

    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

html {
    scroll-padding-top: 90px;
}

.service-nav a.is-current {
    background: var(--wine);
}

@media (max-width: 760px) {
    html {
        scroll-padding-top: 64px;
    }

    .service-nav ul {
        grid-template-columns: repeat(7, 1fr);
    }

    .service-nav li:nth-child(n+5) {
        border-top: 0;
    }

    .service-nav li:nth-child(5) {
        border-left: 1px solid rgba(255, 255, 255, 0.18);
    }

    .service-nav a {
        min-height: 54px;

        padding: 5px 1px;

        gap: 2px;

        font-size: 9.5px;
    }

    .service-nav img {
        width: 22px;
        height: 22px;
    }
}

/* 店舗マップ */
.shop-map-card {
    padding: 10px;
}

.shop-map {
    width: 100%;
    height: auto;

    border-radius: 4px;
}

/* ヘッダー右上：予約センター（元サイトと同じ画像） */
a.header-contact {
    display: block;

    flex: none;
}

a.header-contact img {
    width: 232px;
    max-width: 100%;
    height: auto;
}

@media (max-width: 760px) {
    a.header-contact img {
        width: 170px;
    }
}

/* トップ下部：電話・Web予約・お客様相談室 */
.contact-section {
    grid-template-columns: repeat(3, 1fr);
}

a.contact-box {
    color: var(--white);
    text-decoration: none;
}

a.contact-box:hover {
    background-color: #4a4a4a;
}

.contact-box-web {
    background: linear-gradient(135deg, #a30000, #600000);

    border: 2px solid rgba(255, 255, 255, 0.5);
}

a.contact-box-web:hover {
    background: linear-gradient(135deg, #bb0000, #740000);
}

.contact-box {
    text-align: center;
}

@media (max-width: 760px) {
    .contact-section {
        grid-template-columns: 1fr;
    }
}

/* 車検ページ（画像版） */
.plan-head-image {
    width: 100%;
    max-width: 316px;

    margin: 0 auto;

    border-radius: 6px;
}

.plan-price-image {
    width: 100%;
    max-width: 316px;
    height: auto;

    margin: 0 auto;
}

.menu-card > img.contain-img {
    height: auto;
    max-height: 260px;

    padding: 10px;

    object-fit: contain;

    background: #ffffff;
}

.badge-grid {
    display: grid;

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

    gap: 10px;

    margin-top: 14px;
}

.badge-grid img {
    width: 100%;
    height: auto;

    background: #ffffff;

    border-radius: 7px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
}

.step-list-img li img {
    width: 100%;
    max-width: 150px;
    height: auto;

    margin-bottom: 6px;
}

.need-card {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 16px;
}

.need-card img {
    width: 130px;
    max-width: 100%;
    height: auto;
}

.need-card > div {
    flex: 1;

    min-width: 220px;
}


.oil-top-image.fit-contain { object-fit: contain; height: auto; align-self: center; }

.oil-top-image.fit-contain { align-self: start; }

/* 価格表ページ（カード表示：元サイトと同じ見た目） */
.price-page {
    width: min(1060px, calc(100% - 30px));
}

.price-cta {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 330px));

    gap: 12px;

    justify-content: center;

    margin: 16px 0;
}

.price-cta .banner-tel,
.price-cta .banner-web {
    max-width: none;
}

.pcard-grid {
    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));

    gap: 10px;
}

.pcard {
    padding: 12px 12px 14px;

    background: #ffffff;

    border-radius: 6px;

    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.pcard h3 {
    margin: 0 0 8px;

    color: #333333;

    font-size: 14px;
    font-weight: 800;
}

.pcard-pic img {
    width: 100%;
    max-height: 90px;

    margin: 0 auto 6px;

    object-fit: contain;
}

.pcard-desc {
    min-height: 3.2em;

    margin: 0 0 8px;

    color: #444444;

    font-size: 11px;
    line-height: 1.5;
}

.pcard-desc span {
    display: block;
}

.pcard-label {
    margin: 0 0 4px;

    padding-bottom: 3px;

    color: #333333;

    font-size: 11px;
    font-weight: 800;

    border-bottom: 1px solid #dddddd;
}

.pcard-label small {
    color: #777777;

    font-weight: 600;
}

.pcard dl {
    margin: 0;
}

.pcard dl div {
    display: flex;
    justify-content: space-between;

    padding: 3px 0;

    font-size: 11px;
}

.pcard dt {
    color: #666666;
}

.pcard dd {
    margin: 0;

    color: #333333;

    font-size: 12px;
    font-weight: 800;
}

.pcard-dark {
    background: #3d3d36;
}

.pcard-dark h3 {
    color: #ffffff;

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

    padding-bottom: 6px;
}

.pcard-sizeimg {
    width: 100%;
    height: auto;
}

.keeper-links {
    display: grid;

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

    gap: 10px;
}

.keeper-links a {
    display: block;

    background: #ffffff;

    border-radius: 6px;

    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.keeper-links a:hover {
    background: #f1f1f1;
}

.keeper-links img {
    width: 100%;
    max-width: 316px;
    height: auto;

    margin: 0 auto;
}

@media (max-width: 760px) {
    .price-cta {
        grid-template-columns: 1fr;
    }

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

/* 狭い画面（スマホ）向けの調整 */
@media (max-width: 560px) {
    .header-main {
        min-height: 64px;

        gap: 8px;
    }

    .brand img {
        width: 118px;
    }

    .brand-text {
        display: none;
    }

    a.header-contact img {
        width: 160px;
    }

    .service-nav a {
        font-size: 9px;
    }
}

@media (max-width: 380px) {
    a.header-contact img {
        width: 140px;
    }

    .brand img {
        width: 100px;
    }
}

/* 価格表：車種別サイズ表はスマホで横いっぱいに表示 */
@media (max-width: 760px) {
    .pcard-dark {
        grid-column: 1 / -1;
    }

    .pcard-dark .pcard-sizeimg {
        max-width: 420px;

        margin: 0 auto;
    }
}

/* メニュー8項目 */
.service-nav ul {
    grid-template-columns: repeat(8, 1fr);
}

@media (max-width: 760px) {
    .service-nav ul {
        grid-template-columns: repeat(8, 1fr);
    }

    .service-nav a {
        font-size: 8.5px;
    }

    .service-nav img {
        width: 20px;
        height: 20px;
    }
}

/* メニュー：1行・2行の項目でアイコンと文字の位置をそろえ、選択色はセル全体に */
.service-nav li {
    display: flex;
}

.service-nav a {
    flex: 1;

    justify-content: flex-start;

    padding-top: 10px;
}

.service-nav a span {
    min-height: 2.6em;

    display: flex;

    align-items: flex-start;
    justify-content: center;
}

@media (max-width: 760px) {
    .service-nav a {
        padding-top: 6px;
    }

    .service-nav a span {
        min-height: 2.6em;
    }
}

/* 情報カード・注記 */
.info-note {
    margin: 10px 0 0;

    color: #ffffff;
}

.info-card h3 {
    margin: 18px 0 6px;

    padding-left: 8px;

    color: #760000;

    font-size: 16px;

    border-left: 4px solid #980000;
}

.info-card h3:first-child {
    margin-top: 0;
}

.info-card p,
.info-card li {
    font-size: 14px;
    line-height: 1.8;
}

.speed-grid {
    grid-template-columns: repeat(4, 1fr);
}

.speed-grid .contain-img {
    max-height: 150px;
}

@media (max-width: 860px) {
    .speed-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 420px) {
    .speed-grid {
        grid-template-columns: 1fr;
    }
}

/* ヘッダー・メニュー：元サイトのフォント指定とロゴ表示に合わせる */
.site-header,
.service-nav,
.breadcrumb {
    font-family:
        'Hiragino Kaku Gothic Pro',
        'ヒラギノ角ゴ Pro W3',
        Meiryo,
        'メイリオ',
        'ＭＳ Ｐゴシック',
        'MS PGothic',
        Verdana,
        sans-serif;
}

.brand-text {
    display: none;
}

.brand img {
    width: 303px;
}

.service-nav a {
    font-size: 12.8px;
    font-weight: 700;
}

@media (max-width: 760px) {
    .brand img {
        width: 220px;
    }

    .service-nav a {
        font-size: 8.5px;
    }
}

@media (max-width: 560px) {
    .brand img {
        width: 150px;
    }
}

@media (max-width: 380px) {
    .brand img {
        width: 120px;
    }
}

/* 価格表ページ上部：文字が左、写真が右（元サイトと同じ） */
.oil-top-rev {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}

.oil-top-rev .oil-top-image {
    order: 2;
}

@media (max-width: 760px) {
    .oil-top-rev {
        grid-template-columns: 1fr;
    }

    .oil-top-rev .oil-top-image {
        order: 0;
    }
}

/* カード画像：切り取らず全体を表示する */
.menu-card > img {
    height: auto;

    object-fit: contain;
}

.dealer-photo {
    height: auto !important;
}

/* 元の画像が小さいものは、拡大しすぎない（約2倍まで） */
.menu-card > img[src*="ws_img"],
.menu-card > img[src*="fukuhisa"],
.menu-card > img[src*="minato"],
.menu-card > img[src*="uneda"],
.menu-card > img[src*="matsumura01"],
.menu-card > img[src*="toita02"],
.menu-card > img[src*="masuizumi"],
.menu-card > img[src*="izumino"],
.menu-card > img[src*="nagasaka"] {
    width: min(100%, 290px);

    margin: 12px auto 0;
}

.speed-grid .contain-img {
    width: min(100%, 200px);

    margin: 10px auto 0;
}

.pcard-pic img[src*="mattexture"] {
    width: auto;
    max-width: 108px;
}

/* 車検費用ページ */
.fee-grid {
    display: grid;

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

    gap: 14px;
}

.fee-card {
    padding: 16px 16px 14px;

    background: #ffffff;

    border-radius: 7px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
}

.fee-card h3 {
    margin: 0 0 6px;

    color: #650000;

    font-size: 18px;
    font-weight: 800;

    line-height: 1.3;
}

.fee-card h3 small {
    display: block;

    font-size: 13px;
}

.fee-card img {
    width: 144px;
    max-width: 100%;
    height: auto;

    margin: 6px auto;
}

.fee-ex {
    margin: 4px 0;

    color: #4d4d4d;

    font-size: 14px;
    font-weight: 700;
}

.fee-ex span {
    display: block;

    font-size: 12px;
}

.fee-kind {
    margin: 10px 0 2px;

    color: #4d4d4d;

    font-size: 14px;
    font-weight: 800;
}

.fee-card dl {
    margin: 0;
}

.fee-card dl div {
    display: flex;
    justify-content: space-between;

    padding: 3px 0;

    color: #666666;

    font-size: 13px;
}

.fee-card dd {
    margin: 0;
}

.fee-card .fee-main {
    color: #650000;

    font-weight: 800;
}

.fee-card .fee-total {
    color: #980000;

    font-size: 16px;
    font-weight: 800;
}

.fee-tax {
    margin: 0;

    color: #666666;

    font-size: 12px;

    text-align: right;
}

.fee-card .fee-sub {
    margin-top: 18px;

    padding-top: 12px;

    border-top: 1px solid #dddddd;
}

@media (max-width: 860px) {
    .fee-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .fee-grid {
        grid-template-columns: 1fr;
    }
}

/* 車検ページ：写真内の「車種別価格はコチラ」を押せるようにする */
.hero-photo {
    position: relative;

    align-self: start;
}

.hero-photo img {
    width: 100%;
    height: auto;

    border-radius: 6px;
}

.photo-link {
    position: absolute;

    left: 56.5%;
    top: 84%;

    width: 38%;
    height: 9.6%;

    border-radius: 3px;
}

.photo-link:hover {
    background: rgba(255, 255, 255, 0.25);

    outline: 2px solid rgba(232, 99, 10, 0.8);
}