@charset "UTF-8";
/* CSS Document */



@font-face {
    font-family: MBCorpo Title;
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url(https://assets.oneweb.mercedes-benz.com/plugin/workbench/fonts/2.1.0/WOFF2/MBCorpoATitleCond-Regular-Web.woff2)format("woff2")
}

@font-face {
    font-family: MBCorpo Text;
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url(https://assets.oneweb.mercedes-benz.com/plugin/workbench/fonts/2.1.0/WOFF2/MBCorpoSText-Regular-Web.woff2)format("woff2")
}

@font-face {
    font-family: MBCorpo Text;
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url(https://assets.oneweb.mercedes-benz.com/plugin/workbench/fonts/2.1.0/WOFF2/MBCorpoSText-Bold-Web.woff2)format("woff2")
}

@font-face {
    font-family: DaimlerCAC-Regular;
    font-display: swap;
    src: url(https://assets.oneweb.mercedes-benz.com/plugin/workbench/fonts/2.1.0/WOFF2/DaimlerCAC-Regular.woff2)format("woff2")
}

@font-face {
    font-family: DaimlerCS-Regular;
    font-display: swap;
    src: url(https://assets.oneweb.mercedes-benz.com/plugin/workbench/fonts/2.1.0/WOFF2/DaimlerCS-Regular.woff2)format("woff2")
}

@font-face {
    font-family: DaimlerCACArab-Regular;
    font-display: swap;
    src: url(https://assets.oneweb.mercedes-benz.com/plugin/workbench/fonts/2.1.0/WOFF2/DaimlerCACArab-Regular.woff2)format("woff2")
}

@font-face {
    font-family: DaimlerCSArab-Regular;
    font-display: swap;
    src: url(https://assets.oneweb.mercedes-benz.com/plugin/workbench/fßonts/2.1.0/WOFF2/DaimlerCSArab-Regular.woff2)format("woff2")
}

@font-face {
    font-family: Hanyi;
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url(https://assets.oneweb.mercedes-benz.com/plugin/workbench/fonts/2.1.0/WOFF/Hanyi.woff)format("woff")
}

@font-face {
    font-family: Hanyi-Ext;
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url(https://assets.oneweb.mercedes-benz.com/plugin/workbench/fonts/2.1.0/WOFF/Hanyi-Ext.woff)format("woff")
}



dl, dt, dd, ol, ul, li {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
}


html {
    font-family: "MBCorpo Text", "DaimlerCS-Regular", "DaimlerCSArab-Regular", sans-serif;
    font-size: 62.5%;
    line-height: 1.8;
    height: 100%;
    word-break: break-word;
    color: #333;
    background-color: var(--color-base);
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}


body {
    font-size: 1.6rem;
    margin: 0;
    overflow-x: clip;
}

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

::-moz-selection {
    color: #fff;
    background: var(--color-theme);
}

::selection {
    color: #fff;
    background: var(--color-theme);
}

img {
    border: 0;
    margin: 0;
}

figure {
    margin: 0;
}

p {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #333;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 1.6rem;
    margin: 0;
    padding: 0;
}

main {
    display: block;
}




a.under:link {
    text-decoration: none;
    color: #0078d6;
    border-bottom: 1px solid;
    padding-bottom: 2px;
}

a.under:visited {
    color: #0078d6;
}

a.under:hover {
    color: #0b3f71;
}

a.under:active {
    color: #0078d6;
}







.mg-b-5 {
    margin-bottom: 5px;
}

.mg-b-10 {
    margin-bottom: 10px;
}

.mg-b-15 {
    margin-bottom: 15px;
}

.mg-b-20 {
    margin-bottom: 20px;
}

.mg-b-25 {
    margin-bottom: 25px;
}

.mg-b-30 {
    margin-bottom: 30px;
}

.mg-b-35 {
    margin-bottom: 35px;
}

.mg-b-40 {
    margin-bottom: 40px;
}

.mg-b-45 {
    margin-bottom: 45px;
}

.mg-b-50 {
    margin-bottom: 50px;
}

.mg-b-60 {
    margin-bottom: 60px;
}

.mg-b-70 {
    margin-bottom: 70px;
}




@import url("https://fonts.googleapis.com/css2?family=Spartan:wght@400;700&display=swap");

:root {
    --easing: cubic-bezier(.2, 1, .2, 1);
    --transition: .8s var(--easing);
    --color-base: #ffffff;
    --color-gray: #ddd;
    --color-theme: #0078d6;
    --color-theme-darken: #f12617;
    --box-shadow: .8rem .8rem 1.2rem rgba(0, 0, 0, .05), -.8rem -.8rem 1.2rem #fff;
    --box-shadow-hover: 1rem 1rem 1.5rem rgba(0, 0, 0, .08), -1rem -1rem 1.5rem #fff;
    --box-shadow-inset: inset .8rem .8rem 1.2rem rgba(0, 0, 0, .05), inset -.8rem -.8rem 1.2rem #fff;
    --box-shadow-dark: .8rem .8rem 1.2rem rgba(0, 0, 0, .1), -.8rem -.8rem 1.2rem rgba(#fff, .2);
    --wb-spacing-xs: 1.5rem;
    --wb-spacing-s: 2rem;
    --wb-spacing-m: 3rem;
    --wb-spacing-l: 4rem;
    --wb-spacing-xl: 5rem;
    --wb-spacing-xxl: 5.5rem;
}




img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* 自動改行を避け */
span.aks {
    display: inline-block;
}

ul {
    list-style: none;
    padding-left: 0;
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc-main {
    display: block !important;
}

.sp-main {
    display: none !important;
}

.pc-main-grande {
    display: block !important;
}

.sp-main-grande {
    display: none !important;
}

@media only screen and (max-width: 1199px) {
    .pc-main-grande {
        display: none !important;
    }

    .sp-main-grande {
        display: block !important;
    }
}

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 767px) {
    .pc-main {
        display: none !important;
    }

    .sp-main {
        display: block !important;
    }
}

@media screen and (min-width: 1080px) {

    /* ipad Air,ipad pro 11インチ（834px）以上での解像度での動き */
    /* ipad Air,ipad pro 11インチ（834px）から.sp_brは稼働 */
    .pc_br_big {
        display: block;
        line-height: 0;
    }

    .sp_br_big {
        display: none;
        line-height: 0;
    }
}

@media screen and (max-width: 1079px) {

    /* ここに1025px以下の範囲のスタイルを記述(ipad pro 11inc等) */
    /* 834px以下が適用範囲 */
    .pc_br_big {
        display: none;
        line-height: 0;
    }

    .sp_br_big {
        display: block;
        line-height: 0;
    }
}

@media screen and (min-width: 1025px) {

    /* ここに1025px以下の範囲のスタイルを記述(ipad pro 11inc等) */
    /* 834px以下が適用範囲 */
    .pc_br__big {
        display: block;
        line-height: 0;
    }

    .sp_br__big {
        display: none;
        line-height: 0;
    }
}

@media screen and (max-width: 1024px) {

    /* ここに1025px以下の範囲のスタイルを記述(ipad pro 11inc等) */
    /* 834px以下が適用範囲 */
    .pc_br__big {
        display: none;
        line-height: 0;
    }

    .sp_br__big {
        display: block;
        line-height: 0;
    }
}

@media screen and (min-width: 835px) {

    /* ipad Air,ipad pro 11インチ（834px）以上での解像度での動き */
    /* ipad Air,ipad pro 11インチ（834px）から.sp_brは稼働 */
    .pc_br {
        display: block;
        line-height: 0;
    }

    .sp_br {
        display: none;
        line-height: 0;
    }
}

@media screen and (max-width: 834px) {

    /* ここに1025px以下の範囲のスタイルを記述(ipad pro 11inc等) */
    /* 834px以下が適用範囲 */
    .pc_br {
        display: none;
        line-height: 0;
    }

    .sp_br {
        display: block;
        line-height: 0;
    }
}

@media screen and (min-width: 600px) {

    /* ipad Air,ipad pro 11インチ（834px）以上での解像度での動き */
    /* ipad Air,ipad pro 11インチ（834px）から.sp_brは稼働 */
    .pc_br_cross {
        display: block;
        line-height: 0;
    }

    .sp_br_cross {
        display: none;
        line-height: 0;
    }
}

@media screen and (max-width: 599px) {

    /* ここに1025px以下の範囲のスタイルを記述(ipad pro 11inc等) */
    /* 834px以下が適用範囲 */
    .pc_br_cross {
        display: none;
        line-height: 0;
    }

    .sp_br_cross {
        display: block;
        line-height: 0;
    }
}

/* 自動改行を避け */
span.aks {
    display: inline-block;
}

.bg-gray {
    background-color: #8e8f91;
}

.click img {
    transition: 0.5s;
}

.click img:hover {
    opacity: 0.7;
}

.td_60 {
    font-size: 60%;
    font-weight: normal;
}

.td_70 {
    font-size: 70%;
    font-weight: normal;
}

.td_80 {
    font-size: 80%;
}



/* ipad  ipad mini等 */
@media only screen and (max-width: 899px) {
    .tb_br {
        display: block;
    }
}

@media screen and (min-width: 768px) {
    .pc_br {
        display: block;
    }

    .sp_br {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .pc_br {
        display: none;
    }

    .sp_br {
        display: block;
    }
}




/* min600px,max1450px */
.wrapper {
    width: 100%;
}

.contents {
    max-width: 1680px;
    margin: auto;
    padding-right: 5rem;
    padding-left: 5rem;
}

/* 1024px以下に対応 */
@media screen and (max-width: 1024px) {
    .contents {
        padding-right: 4rem;
        padding-left: 4rem;
    }
}

@media screen and (max-width: 767px) {
    .contents {
        padding-right: 3rem;
        padding-left: 3rem;
    }
}

.inner {
    padding: 0 5rem;
}





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

.header {
    padding-top: 22px;
    padding-bottom: 22px;
    background-color: #000000;
    display: flex;
}

/* 479px以下に対応 */
@media screen and (max-width: 479px) {
    .header {
        padding-top: 18px;
        padding-bottom: 18px;
    }
}

.header_contener-1, header_contener-3 {
    width: 40%;
}

.header_contener-2 {
    width: 20%;
    text-align: center;
}

.header img {
    width: 40px;
    aspect-ratio: auto 40 / 40;
    height: 40px;
    margin: 0 auto;
}

/* 1280px以下に対応 */
@media screen and (max-width: 1280px) {
    .header img {
        width: 54px;
        aspect-ratio: auto 54 / 54;
        height: 54px;
    }
}

/* 1024px以下に対応 */
/* ipad pro 12等 */
@media screen and (max-width: 1024px) {
    .header img {
        width: 62px;
        aspect-ratio: auto 62 / 62;
        height: 62px;
    }
}

/* 1024px以下に対応 */
/* ipad 等 */
@media screen and (max-width: 768px) {
    .header img {
        width: 56px;
        aspect-ratio: auto 56 / 56;
        height: 56px;
    }
}

/* 479px以下に対応 */
@media screen and (max-width: 479px) {
    .header img {
        width: 40px;
        aspect-ratio: auto 40 / 40;
        height: 40px;
    }
}




/************************************************************
 *メイン*
 ************************************************************/

.main {}

.main_picture {
    position: relative;
}

/* 左のグラデーション処理 */
.main_picture::before {
    content: "";
    position: absolute;
    width: 60%;
    height: 100%;
    top: 0;
    left: 0;
}

/* 479px以下に対応 */
@media screen and (max-width: 767px) {

    /* 左のグラデーション処理 */
    .main_picture::before {
        content: none;
    }
}

/* 下のグラデーション処理 */
.main_picture::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 30%;
    bottom: 0;
    left: 0;
    background: linear-gradient(0deg, #000000, transparent);
}

/* 479px以下に対応 */
@media screen and (max-width: 767px) {

    /* 下のグラデーション処理 */
    .main_picture::after {
        height: 20%;
    }
}

/* メイン画像を全体表示 */
.yoko__max {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
}

.main_contents {
    position: relative;
    max-width: 1680px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding-right: 5rem;
    padding-left: 5rem;
}

/* 479px以下に対応 */
@media screen and (max-width: 767px) {
    .main_contents {
        padding-right: 4rem;
        padding-left: 4rem;
    }
}

/* 479px以下に対応 */
@media screen and (max-width: 479px) {
    .main_contents {
        align-items: flex-start;
    }
}

.main_contents_txt_wrap {
    position: absolute;
    font-family: "MBCorpo Title", "DaimlerCAC-Regular", "DaimlerCACArab-Regular", serif;
    z-index: 100;
    color: #FFFFFF;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
}

/* 479px以下に対応 */
@media screen and (max-width: 767px) {

    /* 左のグラデーション処理 */
    .main_contents_txt_wrap {
        padding-top: 2.8rem;
    }
}

.main_contents_txt-1 {
    font-size: 2rem;
    font-weight: 400;
    line-height: 2.8rem;
    text-align: left;
    color: #ffffff;
}

/* 1280px以下に対応 */
@media screen and (max-width: 1280px) {
    .main_contents_txt-1 {
        font-size: 1.9rem;
    }
}

/* 1024px以下に対応 */
/* ipad pro 12等 */
@media screen and (max-width: 1024px) {
    .main_contents_txt-1 {
        font-size: 1.8rem;
    }
}

/* 1024px以下に対応 */
/* ipad pro 12等 */
@media screen and (max-width: 767px) {
    .main_contents_txt-1 {
        font-size: 4vw;
        padding-top: 12px;
        line-height: 2.1rem;
        color: #FFFFFF;
    }
}

/* 479px以下に対応 */
@media screen and (max-width: 479px) {
    .main_contents_txt-1 {
        font-size: 2rem;
    }
}

.main_contents_txt-2 {
    font-size: 3.2rem;
    line-height: 1.2;
    margin-bottom: 22px;
    padding-top: 12px;
    min-height: 0vw;
    font-weight: normal;
    font-feature-settings: "palt";
    color: #ffffff;
}

/* 1280px以下に対応 */
@media screen and (max-width: 1280px) {
    .main_contents_txt-2 {
        font-size: 2.3vw;
        line-height: 1.4;
    }
}

@media screen and (max-width: 834px) {
    .main_contents_txt-2 {
        line-height: 1.1;
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 767px) {
    .main_contents_txt-2 {
        font-size: 5.8vw;
        color: #000000;
    }
}

.main_contents_txt-2_catch {
    font-size: 8rem;
    line-height: 1.1;
    margin-bottom: 14px;
    margin-top: 20px;
    min-height: 0vw;
    font-weight: 400;
    letter-spacing: 2px;
    font-feature-settings: "palt";
    color: #ffffff;
}

@media screen and (max-width: 1399px) {
    .main_contents_txt-2_catch {
        font-size: 7.6rem;
    }
}

/* 1280px以下に対応 */
@media screen and (max-width: 1280px) {
    .main_contents_txt-2_catch {
        font-size: 6.2vw;
    }
}

@media screen and (max-width: 767px) {
    .main_contents_txt-2_catch {
        font-size: 11.4vw;
        margin-bottom: 0px;
        color: #FFFFFF;
        line-height: 1;
    }
}



.main_contents_txt-3_sub {
    font-size: 2.2rem;
    line-height: 1.6;
    font-weight: bold;
    text-align: left;
    font-feature-settings: "palt";
    text-shadow: 0px 0px 7px #FFF;
}

/* 1024px以下に対応 */
/* ipad pro 12等 */
@media screen and (max-width: 1024px) {
    .main_contents_txt-3_sub {
        font-size: 2.2rem;
    }
}

@media screen and (max-width: 767px) {
    .main_contents_txt-3_sub {
        font-size: 5.2vw;
        line-height: 1.5;
    }
}




.main_contents_txt-3 {
    font-size: 1.6rem;
    font-size: clamp(1.8rem, 2.3vw, 3rem);
    min-height: 0vw;
    line-height: 1.6;
    font-weight: 400;
    text-align: left;
    color: #ffffff;
}

/* 767px以下に対応 */
/* ipad等 */
@media screen and (max-width: 767px) {
    .main_contents_txt-3 {
        font-size: 3.8vw;
        font-family: "Hiragino Kaku Gothic ProN", sans-serif;
        color: #000000;
    }
}

.main_contents_txt-4 {
    display: none;
}

/* 479px以下に対応 */
@media screen and (max-width: 767px) {
    .main_contents_txt-4 {
        display: block;
        position: absolute;
        z-index: 100;
        bottom: 0;
        font-size: 1.6rem;
        margin: 0 auto;
        width: 90%;
        margin-bottom: 40px
    }
}

/* 479px以下に対応 */
@media only screen and (max-width: 599px) {
    .main_contents_txt-4 {
        margin-bottom: 11px;
    }
}

.main_contents_txt-4_sub {}

@media only screen and (max-width: 1024px) {
    .main_contents_txt-4_sub {
        font-size: 1.4rem;
    }
}

/* 479px以下に対応 */
@media screen and (max-width: 767px) {
    .main_contents_txt-4_sub {
        display: none;
    }
}

.main_sub {
    font-size: 2rem;
    line-height: 1.8;
    font-weight: 400;
    text-align: center;
    margin-bottom: 40px;
    font-family: "Noto Serif JP", serif;
    padding-top: 3.2rem;
}

/* 1024px以下に対応 */
/* ipad pro 12等 */
@media screen and (max-width: 1024px) {
    .main_sub {
        font-size: 1.8rem;
    }
}

/* 834px以下に対応 */
/* ipad pro 11等 */
@media screen and (max-width: 834px) {
    .main_sub {
        font-size: 1.6rem;
    }
}

/* 479px以下に対応 */
@media screen and (max-width: 479px) {
    .main_sub {
        font-size: 1.8rem;
        line-height: 1.8;
        text-align: left;
        margin-bottom: 20px;
        padding-top: 0px;
    }
}





/************************************************************
 *青いボタン
 ************************************************************/

/* ボタン共通 */
.Button {
    overflow: hidden;
    margin: 0;
    width: 580px;
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
}

/* 767px以下に対応 */
@media screen and (max-width: 767px) {
    .Button {
        margin: 0;
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }
}

.Button2 {
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: auto;
}

.Button a {
    display: block;
    position: relative;
    transition: 0.5s;
    z-index: 100;
    text-align: center;
    background-color: #0078d6;
    color: #fff;
    text-decoration: none;
    font-size: 2.2rem;
    /*縦の中心に。但し一行のみ*/
    height: 70px;
    line-height: 70px;
    /*縦の中心に。但し一行のみここまで*/
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: bold;
}

.Button2 a {
    display: block;
    position: relative;
    z-index: 100;
    text-align: center;
    background-color: #0078d6;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    /*縦の中心に。但し一行のみ*/
    height: 70px;
    line-height: 70px;
    /*縦の中心に。但し一行のみここまで*/
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

@media (hover: hover) and (pointer: fine) {
    .Button a:hover {
        background-color: #014980;
        /* マウスオーバーカラー */
    }
}

/* IE11用に以下のコードも追加 */
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .Button a:hover {
        background-color: #014980;
        /* マウスオーバーカラー */
    }
}

@media (hover: hover) and (pointer: fine) {
    .Button2 a:hover {
        background-color: #014980;
        /* マウスオーバーカラー */
    }
}

/* IE11用に以下のコードも追加 */
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .Button2 a:hover {
        background-color: #014980;
        /* マウスオーバーカラー */
    }
}

#IconList1 a:before {
    /*白いひし型 */
    display: block;
    content: "";
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 50%;
    left: 20px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    background: #fff;
}

#IconList1 a:after {
    /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */
    display: block;
    content: "";
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 50%;
    left: 18px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    background-color: #0078d6;
    transition: 0.5s;
}

@media (hover: hover) and (pointer: fine) {
    #IconList1 a:hover:after {
        /*「after要素」のマウスオーバー（カラーを合わせる） */
        background: #014980;
    }
}

/* IE11用に以下のコードも追加 */
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #IconList1 a:hover:after {
        /*「after要素」のマウスオーバー（カラーを合わせる） */
        background: #014980;
    }
}

.main_btn {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 80px;
}

.main_btn2 {
    text-align: center;
    position: absolute;
    left: 736px;
    top: 12px;
}

.main_btn {}







/************************************************************
 *タイトル*
 ************************************************************/

.m-title-box {
    text-align: center;
    margin-bottom: 25px;
}

.m-title-us {
    font-family: DaimlerCAC-Regular;
    font-size: 3.4rem;
    font-weight: 100;
    color: #fff;
    margin-bottom: 0;
}

.m-title-jp {
    font-size: 1.4rem;
    font-weight: 300;
    color: #fff;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 0;
}



.m-title-box-w {
    text-align: center;
    margin-bottom: 25px;
    margin-top: 30px;
}

.m-title-us-w {
    font-family: DaimlerCAC-Regular;
    font-size: 3.4rem;
    font-weight: 100;
    margin-bottom: 0;
}

.m-title-jp-w {
    font-size: 1.4rem;
    font-weight: 300;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 0;
}





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

.black-b {
    background: #000000;
    margin: 0 calc(50% - 50vw);
    padding: 0 calc(50vw - 50%);
    width: 100vw;
}

/*.black-b {
	background: #000000;
	margin: 0 calc(50% - 50vw);
	padding: 4px calc(50vw - 50% + 8px);
	width: 100vw;
}
*/
.shop_contenaer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /*均等配置*/
    color: #FFFFFF;
}

.shop_col-3 {
    width: 31.5%;
    min-height: 0%;
    /*ie11対策 画像の下の隙間をなくす*/
    margin-bottom: 4rem;
}

.shop_inner {
    margin-bottom: 20px;
}

.shop_inner img {
    width: 100%;
    margin-bottom: 20px;
}

.shop-title {
    font-size: 2.0rem;
    line-height: 1.7;
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    text-align: center;
}

/* 1024px以下に対応 */
/* ipad pro 12等 */
@media screen and (max-width: 1024px) {
    .shop-title {
        font-size: 1.8rem;
    }
}

/* 834px以下に対応 */
/* ipad pro 11等 */
@media screen and (max-width: 834px) {
    .shop-title {
        text-align: left;
    }
}

/* 479px以下に対応 */
@media screen and (max-width: 479px) {
    .shop-title {
        font-size: 2.4rem;
    }
}

.shop-title-sub {
    font-size: 1.2rem;
    line-height: 1.7;
    text-align: center;
    margin-bottom: 24px;
}

/* 834px以下に対応 */
/* ipad pro 11等 */
@media screen and (max-width: 834px) {
    .shop-title-sub {
        text-align: left;
    }
}

/* 479px以下に対応 */
@media screen and (max-width: 479px) {
    .shop-title-sub {
        font-size: 1.5rem;
    }
}

.shop-item-address {}

.shop-item-address>li {
    font-size: 1.6rem;
    line-height: 1.9;
    font-weight: 400;
    color: #FFFFFF;
    font-family: "Noto Serif JP", serif;
}

/* 1280px以下に対応 */
@media screen and (max-width: 1280px) {
    .shop-item-address>li {
        font-size: 1.4rem;
    }
}

/* 1024px以下に対応 */
/* ipad pro 12等 */
@media screen and (max-width: 1024px) {
    .shop-item-address>li {
        font-size: 1.3rem;
    }
}

/* 479px以下に対応 */
@media screen and (max-width: 479px) {
    .shop-item-address>li {
        font-size: 1.6rem;
    }
}

.parent-1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    text-align: center;
    line-height: 0;
}

.div1 {
    grid-area: 1 / 1 / 2 / 2;
    border: 1px solid #FFFFFF;
}

.div1 a {
    display: block;
    font-size: 1.4rem;
    height: 40px;
    line-height: 40px;
    color: #FFFFFF;
}

/* 479px以下に対応 */
@media screen and (max-width: 479px) {
    .div1 a {
        font-size: 1.6rem;
    }
}

@media (any-hover: hover) {

    /* ホバーアクションをPCだけにしたい場合、←のメディアクエリで囲む */
    .div1 a:hover {
        background-color: #333333;
        transition: 0.5s;
    }
}

.div2 {
    grid-area: 1 / 2 / 2 / 3;
    border: 1px solid #FFFFFF;
}

.div2 a {
    display: block;
    font-size: 1.4rem;
    height: 40px;
    line-height: 40px;
    color: #FFFFFF;
}

/* 479px以下に対応 */
@media screen and (max-width: 479px) {
    .div2 a {
        font-size: 1.6rem;
    }
}

@media (any-hover: hover) {

    /* ホバーアクションをPCだけにしたい場合、←のメディアクエリで囲む */
    .div2 a:hover {
        background-color: #333333;
        transition: 0.5s;
    }
}

.div3 {
    grid-area: 2 / 1 / 3 / 3;
    border: 1px solid #FFFFFF;
}

.div3 a {
    display: block;
    font-size: 1.4rem;
    height: 40px;
    line-height: 40px;
    color: #FFFFFF;
}

/* 479px以下に対応 */
@media screen and (max-width: 479px) {
    .div3 a {
        font-size: 1.6rem;
    }
}

@media (any-hover: hover) {

    /* ホバーアクションをPCだけにしたい場合、←のメディアクエリで囲む */
    .div3 a:hover {
        background-color: #333333;
        transition: 0.5s;
    }
}


.div4 {
    grid-column: span 2 / span 2;
    border: 1px solid #FFFFFF;
}

.div4 a {
    display: block;
    font-size: 1.4rem;
    height: 40px;
    line-height: 40px;
    color: #FFFFFF;
}

/* 479px以下に対応 */
@media screen and (max-width: 479px) {
    .div4 a {
        font-size: 1.6rem;
    }
}

@media (any-hover: hover) {

    /* ホバーアクションをPCだけにしたい場合、←のメディアクエリで囲む */
    .div4 a:hover {
        background-color: #333333;
        transition: 0.5s;
    }
}


.div5 {
    grid-column: span 2 / span 2;
    border: 1px solid #FFFFFF;
    grid-row-start: 2;
}

.div5 a {
    display: block;
    font-size: 1.4rem;
    height: 40px;
    line-height: 40px;
    color: #FFFFFF;
}

/* 479px以下に対応 */
@media screen and (max-width: 479px) {
    .div5 a {
        font-size: 1.6rem;
    }
}

@media (any-hover: hover) {

    /* ホバーアクションをPCだけにしたい場合、←のメディアクエリで囲む */
    .div5 a:hover {
        background-color: #333333;
        transition: 0.5s;
    }
}









/* ipad  ipad mini等 */

@media only screen and (max-width: 899px) {
    .shop_contenaer {
        display: flex;
        flex-flow: column;
    }

    .shop_inner {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16px;
        /*均等配置*/
    }

    .shop_col-3 {
        width: 100%;
        min-height: 0%;
        /*ie11対策　画像の下の隙間をなくす*/
    }

    .shop_inner_left {
        width: 50%
    }

    .shop_inner_right {
        width: 47%
    }

    .shop_inner img {
        margin-bottom: 0px;
    }
}

/* 479px以下に対応 */
@media screen and (max-width: 479px) {
    .shop_inner {
        flex-direction: column;
        margin-bottom: 10px;
    }

    .shop_inner_left {
        width: 100%;
        margin-bottom: 2rem;
    }

    .shop_inner_right {
        width: 100%
    }
}










/************************************************************
 *車の検索*
 ************************************************************/

.l-inner {
    position: relative;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    max-width: 1680px;
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: 0;
}

.l-section {}

.l-section .l-inner {
    padding-bottom: 6rem;
}

[class*=swiper]:focus {
    outline: none;
}

.slide-media,
.thumb-media {
    position: relative;
    overflow: hidden;
}

.slide-media img,
.thumb-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}


.swiper-button-prev, .swiper-button-next {
    display: grid;
    place-content: center;
    width: 6.4rem;
    height: 6.4rem;
    cursor: pointer;
    -webkit-transition: var(--transition);
    transition: var(--transition);
}

.swiper-button-prev::before, .swiper-button-next::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    border-radius: 50%;
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
}

.swiper-button-prev::after, .swiper-button-next::after {
    width: 1.2rem;
    height: 1.2rem;
    content: "";
    border: solid var(--color-gray);
    border-width: 3px 3px 0 0;
}

.swiper-button-prev::after {
    margin-left: 0.4rem;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.swiper-button-next::after {
    margin-right: 0.4rem;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.swiper-button-disabled {
    pointer-events: none;
    opacity: 0;
}

.card04 {
    overflow: hidden;
}

/* 1024px以下に対応 */
/* ipad pro 12等 */
@media screen and (max-width: 1024px) {
    .card04 {
        margin: 0 calc(50% - 50vw);
        padding: 0 calc(50vw - 50%);
        width: 100vw;
    }
}

.card04 .swiper {
    overflow: visible;
}

.card04 .swiper-button-prev, .card04 .swiper-button-next {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    margin: auto;
}

.card04 .swiper-button-prev::before, .card04 .swiper-button-next::before {
    background-color: rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: var(--box-shadow-dark);
    box-shadow: var(--box-shadow-dark);
}

.card04 .swiper-button-prev::after, .card04 .swiper-button-next::after {
    border-color: #fff;
}

.card04 .swiper-button-prev {
    right: calc(100% - 1.6rem);
}

.card04 .swiper-button-next {
    left: calc(100% - 1.6rem);
}

.card04 .swiper-a:not(.swiper-initialized) {
    padding: 0;
}

.card04 .swiper-a:not(.swiper-initialized) .swiper-button-prev,
.card04 .swiper-a:not(.swiper-initialized) .swiper-button-next,
.card04 .swiper-a:not(.swiper-initialized) .swiper-pagination {
    display: none;
}

.card04 .swiper-a:not(.swiper-initialized) .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}


.card04 .slide {
    overflow: hidden;
    border-radius: 4px;
    background-color: #f1f1f3;
    /* 変更箇所 */
    padding: 40px 0 24px;
    text-align: center;
}

.card04 .slide-media {
    padding-top: 50%;
    /* 変更箇所-元62.5% */
}

.card04 .slide-media img {
    height: calc(100% + 16px);
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px);
}

.card04 .slide-content {
    padding: 3.2rem;
}

.card04 .slide-date {
    font-size: 1.2rem;
    line-height: 1;
    display: block;
    color: var(--color-theme);
}

.card04 .slide-title {
    line-height: 1.6;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 3.2em;
    margin-top: 1.6rem;
}



@media only screen and (max-width: 1024px) {
    html {
        -webkit-text-size-adjust: 100%;
    }

    .l-inner {
        padding: 0 1.2rem;
    }

    .pc {
        display: none !important;
    }

    .card04 .swiper {
        padding: 0 3.2rem;
    }

    .card04 .swiper-button-prev {
        right: calc(100% - 5.2rem);
    }

    .card04 .swiper-button-next {
        left: calc(100% - 5.2rem);
    }
}

@media only screen and (max-width: 599px) {
    html {
        font-size: 50%;
    }

    .pc-tab {
        display: none !important;
    }
}

@media only screen and (min-width: 1025px) {
    .tab-sp {
        display: none !important;
    }

    .swiper-button-prev::before, .swiper-button-next::before {
        -webkit-transition: var(--transition);
        transition: var(--transition);
    }

    .swiper-button-prev:hover::before, .swiper-button-next:hover::before {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    .card04 .slide {
        -webkit-transition: var(--transition);
        transition: var(--transition);
    }

    .card04 .slide img {
        -webkit-transition: var(--transition);
        transition: var(--transition);
    }
}

@media only screen and (min-width: 600px) {
    .sp {
        display: none !important;
    }
}








/************************************************************
 *ユーズドカー・ウェルカムプラン*
 ************************************************************/
.w-inner {
    position: relative;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    max-width: 1680px;
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: 0;
}

.l-section {}

.l-section .w-inner {
    padding-bottom: 8.8rem;
}

[class*=swiper]:focus {
    outline: none;
}

.slide-media,
.thumb-media {
    position: relative;
    overflow: hidden;
}

.slide-media img,
.thumb-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}


.swiper-button-prev, .swiper-button-next {
    display: grid;
    place-content: center;
    width: 6.4rem;
    height: 6.4rem;
    cursor: pointer;
    -webkit-transition: var(--transition);
    transition: var(--transition);
}

.swiper-button-prev::before, .swiper-button-next::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    border-radius: 50%;
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
}

.swiper-button-prev::after, .swiper-button-next::after {
    width: 1.2rem;
    height: 1.2rem;
    content: "";
    border: solid var(--color-gray);
    border-width: 3px 3px 0 0;
}

.swiper-button-prev::after {
    margin-left: 0.4rem;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.swiper-button-next::after {
    margin-right: 0.4rem;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.swiper-button-disabled {
    pointer-events: none;
    opacity: 0;
}

.card05 {
    overflow: hidden;
}

/* 1024px以下に対応 */
/* ipad pro 12等 */
@media screen and (max-width: 767px) {
    .card05 {
        margin: 0 calc(50% - 50vw);
        padding: 0 calc(50vw - 50%);
        width: 100vw;
    }
}

.card05 .swiper {
    overflow: visible;
}

.card05 .swiper-button-prev, .card05 .swiper-button-next {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    margin: auto;
}

.card05 .swiper-button-prev::before, .card05 .swiper-button-next::before {
    background-color: rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: var(--box-shadow-dark);
    box-shadow: var(--box-shadow-dark);
    border: 2px solid #fff;
}

.card05 .swiper-button-prev::after, .card05 .swiper-button-next::after {
    border-color: #fff;
}

.card05 .swiper-button-prev {
    right: calc(100% - 1.6rem);
}

.card05 .swiper-button-next {
    left: calc(100% - 1.6rem);
}

.card05 .swiper-c:not(.swiper-initialized) {
    padding: 0;
}

.card05 .swiper-c:not(.swiper-initialized) .swiper-button-prev,
.card05 .swiper-c:not(.swiper-initialized) .swiper-button-next,
.card05 .swiper-c:not(.swiper-initialized) .swiper-pagination {
    display: none;
}

.card05 .swiper-c:not(.swiper-initialized) .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 42px;
}


.card05 .slide {
    overflow: hidden;
}

.car-type {
    border-radius: 4px;
    background-color: #f1f1f3;
    /* 変更箇所 */
    padding: 40px 0 24px;
    text-align: center;
}

.card05 .slide-media {
    padding-top: 50%;
    /* 変更箇所-元62.5% */
}

.card05 .slide-media img {
    height: calc(100% + 16px);
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px);
}

.card05 .slide-content {
    padding: 3.2rem;
}

.card05 .slide-date {
    font-size: 1.2rem;
    line-height: 1;
    display: block;
    color: var(--color-theme);
}

.card05 .slide-title {
    line-height: 1.6;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 3.2em;
    margin-top: 1.6rem;
}



@media only screen and (max-width: 767px) {
    html {
        -webkit-text-size-adjust: 100%;
    }

    .l-inner {
        padding: 0 1.2rem;
    }

    .pc {
        display: none !important;
    }

    .card05 .swiper {
        padding-top: 0;
        padding-right: 3.2rem;
        padding-bottom: 0;
    }

    .card05 .swiper-button-prev {
        right: calc(100% - 5.2rem);
    }

    .card05 .swiper-button-next {
        left: calc(100% - 5.2rem);
    }
}

@media only screen and (max-width: 767px) {
    html {
        font-size: 50%;
    }

    .pc-tab {
        display: none !important;
    }
}

@media only screen and (min-width: 768px) {
    .tab-sp {
        display: none !important;
    }

    .swiper-button-prev::before, .swiper-button-next::before {
        -webkit-transition: var(--transition);
        transition: var(--transition);
    }

    .swiper-button-prev:hover::before, .swiper-button-next:hover::before {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    .card05 .slide {
        -webkit-transition: var(--transition);
        transition: var(--transition);
    }

    .card05 .slide img {
        -webkit-transition: var(--transition);
        transition: var(--transition);
    }
}

@media only screen and (min-width: 768px) {
    .sp {
        display: none !important;
    }
}







/************************************************************
 *リースプランの2個目のスライダー*
 ************************************************************/

.card08 {
    overflow: hidden;
}

/* 1024px以下に対応 */
/* ipad pro 12等 */
@media screen and (max-width: 767px) {
    .card08 {
        margin: 0 calc(50% - 50vw);
        padding: 0 calc(50vw - 50%);
        width: 100vw;
    }
}

.card08 .swiper {
    overflow: visible;
}

.card08 .swiper-button-prev, .card08 .swiper-button-next {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    margin: auto;
}

.card08 .swiper-button-prev::before, .card08 .swiper-button-next::before {
    background-color: rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: var(--box-shadow-dark);
    box-shadow: var(--box-shadow-dark);
    border: 2px solid #fff;
}

.card08 .swiper-button-prev::after, .card08 .swiper-button-next::after {
    border-color: #fff;
}

.card08 .swiper-button-prev {
    right: calc(100% - 1.6rem);
}

.card08 .swiper-button-next {
    left: calc(100% - 1.6rem);
}

.card08 .swiper-c:not(.swiper-initialized) {
    padding: 0;
}

.card08 .swiper-c:not(.swiper-initialized) .swiper-button-prev,
.card08 .swiper-c:not(.swiper-initialized) .swiper-button-next,
.card08 .swiper-c:not(.swiper-initialized) .swiper-pagination {
    display: none;
}

.card08 .swiper-c:not(.swiper-initialized) .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 42px;
}


.card08 .slide {
    overflow: hidden;
}

.card08 .slide-media {
    padding-top: 50%;
    /* 変更箇所-元62.5% */
}

.card08 .slide-media img {
    height: calc(100% + 16px);
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px);
}

.card08 .slide-content {
    padding: 3.2rem;
}

.card08 .slide-date {
    font-size: 1.2rem;
    line-height: 1;
    display: block;
    color: var(--color-theme);
}

.card08 .slide-title {
    line-height: 1.6;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 3.2em;
    margin-top: 1.6rem;
}



@media only screen and (max-width: 767px) {
    .card08 .swiper {
        padding-top: 0;
        padding-right: 3.2rem;
        padding-bottom: 0;
    }

    .card08 .swiper-button-prev {
        right: calc(100% - 5.2rem);
    }

    .card08 .swiper-button-next {
        left: calc(100% - 5.2rem);
    }
}

@media only screen and (min-width: 768px) {
    .card08 .slide {
        -webkit-transition: var(--transition);
        transition: var(--transition);
    }

    .card08 .slide img {
        -webkit-transition: var(--transition);
        transition: var(--transition);
    }
}








/************************************************************
 *ウェルカムプランの1個目のスライダー*
 ************************************************************/

.card09 {
    overflow: hidden;
}

/* 1024px以下に対応 */
/* ipad pro 12等 */
@media screen and (max-width: 767px) {
    .card09 {
        margin: 0 calc(50% - 50vw);
        padding: 0 calc(50vw - 50%);
        width: 100vw;
    }
}

.card09 .swiper {
    overflow: visible;
}

.card09 .swiper-button-prev, .card09 .swiper-button-next {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    margin: auto;
}

.card09 .swiper-button-prev::before, .card09 .swiper-button-next::before {
    background-color: rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: var(--box-shadow-dark);
    box-shadow: var(--box-shadow-dark);
    border: 2px solid #fff;
}

.card09 .swiper-button-prev::after, .card09 .swiper-button-next::after {
    border-color: #fff;
}

.card09 .swiper-button-prev {
    right: calc(100% - 1.6rem);
}

.card09 .swiper-button-next {
    left: calc(100% - 1.6rem);
}

.card09 .swiper-c:not(.swiper-initialized) {
    padding: 0;
}

.card09 .swiper-c:not(.swiper-initialized) .swiper-button-prev,
.card09 .swiper-c:not(.swiper-initialized) .swiper-button-next,
.card09 .swiper-c:not(.swiper-initialized) .swiper-pagination {
    display: none;
}

.card09 .swiper-c:not(.swiper-initialized) .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 42px;
}


.card09 .slide {
    overflow: hidden;
}

.card09 .slide-media {
    padding-top: 50%;
    /* 変更箇所-元62.5% */
}

.card09 .slide-media img {
    height: calc(100% + 16px);
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px);
}

.card09 .slide-content {
    padding: 3.2rem;
}

.card09 .slide-date {
    font-size: 1.2rem;
    line-height: 1;
    display: block;
    color: var(--color-theme);
}

.card09 .slide-title {
    line-height: 1.6;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 3.2em;
    margin-top: 1.6rem;
}



@media only screen and (max-width: 767px) {
    .card09 .swiper {
        padding-top: 0;
        padding-right: 3.2rem;
        padding-bottom: 0;
    }

    .card09 .swiper-button-prev {
        right: calc(100% - 5.2rem);
    }

    .card09 .swiper-button-next {
        left: calc(100% - 5.2rem);
    }
}

@media only screen and (min-width: 768px) {
    .card09 .slide {
        -webkit-transition: var(--transition);
        transition: var(--transition);
    }

    .card09 .slide img {
        -webkit-transition: var(--transition);
        transition: var(--transition);
    }
}








/************************************************************
 *ウェルカムプランの2個目のスライダー*
 ************************************************************/

.card10 {
    overflow: hidden;
}

/* 1024px以下に対応 */
/* ipad pro 12等 */
@media screen and (max-width: 767px) {
    .card10 {
        margin: 0 calc(50% - 50vw);
        padding: 0 calc(50vw - 50%);
        width: 100vw;
    }
}

.card10 .swiper {
    overflow: visible;
}

.card10 .swiper-button-prev, .card10 .swiper-button-next {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    margin: auto;
}

.card10 .swiper-button-prev::before, .card10 .swiper-button-next::before {
    background-color: rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: var(--box-shadow-dark);
    box-shadow: var(--box-shadow-dark);
    border: 2px solid #fff;
}

.card10 .swiper-button-prev::after, .card10 .swiper-button-next::after {
    border-color: #fff;
}

.card10 .swiper-button-prev {
    right: calc(100% - 1.6rem);
}

.card10 .swiper-button-next {
    left: calc(100% - 1.6rem);
}

.card10 .swiper-c:not(.swiper-initialized) {
    padding: 0;
}

.card10 .swiper-c:not(.swiper-initialized) .swiper-button-prev,
.card10 .swiper-c:not(.swiper-initialized) .swiper-button-next,
.card10 .swiper-c:not(.swiper-initialized) .swiper-pagination {
    display: none;
}

.card10 .swiper-c:not(.swiper-initialized) .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 42px;
}


.card10 .slide {
    overflow: hidden;
}

.card10 .slide-media {
    padding-top: 50%;
    /* 変更箇所-元62.5% */
}

.card10 .slide-media img {
    height: calc(100% + 16px);
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px);
}

.card10 .slide-content {
    padding: 3.2rem;
}

.card10 .slide-date {
    font-size: 1.2rem;
    line-height: 1;
    display: block;
    color: var(--color-theme);
}

.card10 .slide-title {
    line-height: 1.6;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 3.2em;
    margin-top: 1.6rem;
}



@media only screen and (max-width: 767px) {
    .card10 .swiper {
        padding-top: 0;
        padding-right: 3.2rem;
        padding-bottom: 0;
    }

    .card10 .swiper-button-prev {
        right: calc(100% - 5.2rem);
    }

    .card10 .swiper-button-next {
        left: calc(100% - 5.2rem);
    }
}

@media only screen and (min-width: 768px) {
    .card10 .slide {
        -webkit-transition: var(--transition);
        transition: var(--transition);
    }

    .card10 .slide img {
        -webkit-transition: var(--transition);
        transition: var(--transition);
    }
}












.oct-promo-grade__text {
    text-align: center;
    margin: 0;
}

.oct-promo-grade__primary-text {
    font-family: "MBCorpo Text", DaimlerCS-Regular, DaimlerCSArab-Regular, sans-serif;
    font-size: 2.7rem;
    line-height: 1;
    margin: 0 0 0.4em;
    display: block;
}

.oct-promo-grade__secondary-text {
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1;
    margin: 0;
    display: block;
}

.slide-btn {
    min-height: 0%;
    /* flex-direction: column;を指定したときに子要素に画像があるとIEでは余白ができてしまうのでこれで回避 */
}

.slide-btn a {
    /*縦の中心に。但し一行のみ*/
    height: 32px;
    line-height: 32px;
    /*縦の中心に。但し一行のみここまで*/
    background-color: #0078d6;
    color: #fff;
    font-size: 12px;
    text-align: center;
    display: inline-block;
    padding: 0px 16px 0px 16px;
}



/************************************************************
 *aタグの中にaタグを配置 広げてる*
 ************************************************************/
.card {
    position: relative;
}

.slide-btn a:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}










/************************************************************
 *swiper-pagenationの追加分*
 ************************************************************/
.swiper-pagination {
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0, 0, 0);
    z-index: 50
}

@media screen and (min-width: 1025px) {

    /* スクリーンサイズが10250px以上の場合に適用 */
    .swiper-pagination {
        display: none;
    }
}

@media screen and (min-width: 768px) {

    /* スクリーンサイズが10250px以上の場合に適用 */
    .pattern-1 {
        display: none;
    }
}

@media screen and (max-width: 767px) {

    /* スクリーンサイズが10250px以上の場合に適用 */
    .pattern-1 {
        display: block;
    }
}

@media screen and (min-width: 1440px) {

    /* スライダー4に適用 */
    .pattern-2 {
        display: none;
    }
}

@media screen and (max-width: 1439px) {

    /* スライダー4に適用 */
    .pattern-2 {
        display: block;
    }
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-pagination-disabled>.swiper-pagination, .swiper-pagination.swiper-pagination-disabled {
    display: none !important
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom, 8px);
    top: var(--swiper-pagination-top, auto);
    left: 0;
    width: 100%
}

.swiper-pagination-bullets-dynamic {
    overflow: hidden;
    font-size: 0
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transform: scale(.33);
    position: relative
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    transform: scale(.33)
}

.swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
    display: inline-block;
    border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
    background: var(--swiper-pagination-bullet-inactive-color, #000);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .2)
}

button.swiper-pagination-bullet {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-bullet:only-child {
    display: none !important
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color, var(--swiper-theme-color))
}

.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets {
    right: var(--swiper-pagination-right, 8px);
    left: var(--swiper-pagination-left, auto);
    top: 50%;
    transform: translate3d(0px, -50%, 0)
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    display: inline-block;
    transition: .2s transform, .2s top
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform, .2s left
}

.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform, .2s right
}

.swiper-pagination-fraction {
    color: var(--swiper-pagination-fraction-color, inherit)
}

.swiper-pagination-progressbar {
    background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, .25));
    position: absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    transform-origin: right top
}

.swiper-horizontal>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0
}

.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical>.swiper-pagination-progressbar {
    width: var(--swiper-pagination-progressbar-size, 4px);
    height: 100%;
    left: 0;
    top: 0
}

.swiper-pagination-lock {
    display: none
}


















/* 価格帯で検索 */
.kakaku-range {
    font-size: 3rem;
    line-height: 3.75rem;
    font-family: "MBCorpo Title", "DaimlerCAC-Regular", "DaimlerCACArab-Regular", serif;
    font-style: normal;
    font-weight: 400;
    margin: var(--wb-spacing-m) 0;
}

/* SP表示(599px以下) */
@media only screen and (max-width: 599px) {
    .kakaku-range {
        font-size: 2.6rem;
    }
}

.kakaku {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: space-between;
    /*均等配置*/
    margin-bottom: 8rem;
}

.kakaku::after {
    display: block;
    content: "";
    width: 32%;
}

.kakaku li {
    width: 19%;
    background-repeat: no-repeat;
    margin-bottom: 32px;
}

/* 1024px以下に対応 */
/* ipad pro 11等 */
@media screen and (max-width: 1024px) {
    .kakaku li {
        margin-bottom: 16px;
        width: 32%;
    }
}

/* 834px以下に対応 */
/* ipad pro 11等 */
@media screen and (max-width: 834px) {
    .kakaku li {
        margin-bottom: 14px;
    }
}

@media (max-width: 767px) {

    /* 767px 以下のスタイル */
    .kakaku li {
        width: 100%;
    }
}

.kakaku li a {
    display: block;
    font-size: 1.6rem;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: "Hiragino Kaku Gothic ProN";
    font-weight: bold;
    background-color: #0078d6;
    text-shadow: 0px 0px;
    color: #FFFFFF;
}

@media (max-width: 767px) {

    /* 767px 以下のスタイル */
    .kakaku li a {
        padding-top: 16px;
        padding-bottom: 16px
    }
}








/* モデル別全体 */
.model-range {
    font-size: 3rem;
    line-height: 3.75rem;
    font-family: "MBCorpo Title", "DaimlerCAC-Regular", "DaimlerCACArab-Regular", serif;
    font-style: normal;
    font-weight: 400;
    margin: var(--wb-spacing-xl) 0;
}

/* SP表示(599px以下) */
@media only screen and (max-width: 599px) {
    .model-range {
        font-size: 2.6rem;
    }
}

.car_type {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: space-between;
    /*均等配置*/
    margin-bottom: 30px;
}

.car_type li {
    width: 31.5%;
    background: rgb(222, 229, 231);
    background: linear-gradient(180deg, rgba(222, 229, 231, 1) 0%, rgba(247, 249, 250, 1) 100%);
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 32px;
}

@media (max-width: 1460px) {

    /* 1460px 以下のスタイル */
    .car_type li {
        width: 48.5%;
    }
}

@media (max-width: 767px) {

    /* 767px 以下のスタイル */
    .car_type li {
        width: 100%;
    }
}

.car_type::after {
    display: block;
    content: "";
    width: 30%;
}

.type_contener a {
    text-decoration: none;
    display: block;
    min-width: 100%;
    flex-direction: column;
    padding: 22px 16px 19px;
}

.type_small-card__subtitle {
    font-size: 14px;
    line-height: 2.4;
}

.type_small-card__title {
    font-size: 3.4rem;
    line-height: 2.75rem;
    font-family: DaimlerCAC-Regular;
    font-weight: 400;
    margin-bottom: 22px;
}

/* 834px以下に対応 */
/* ipad pro 11等 */
@media screen and (max-width: 834px) {
    .type_small-card__title {
        font-size: 2.8rem;
        margin-bottom: 14px;
    }
}

.type_car {
    width: 50%;
    display: block;
    height: auto;
    position: absolute;
    right: 10px;
    bottom: 45px;
    transform: scale(1);
    transition: transform .4s cubic-bezier(.165, .84, .44, 1);
    pointer-events: none;
}

@media (max-width: 767px) {

    /* 767px 以下のスタイル */
    .type_car {
        width: 40%;
        bottom: 16px;
    }
}

/* SP表示(599px以下) */
@media only screen and (max-width: 599px) {
    .type_car {
        width: 50%;
        bottom: 32px;
    }
}

/* SP表示(iPhone SE) */
@media screen and (max-width: 320px) {
    .type_car {
        right: 0px;
    }
}

.type_small-card__subtitle {
    font-size: 12px;
    line-height: 2.4;

}











/************************************************************
 * アコーディオン
 ************************************************************/

/*http://weback.net/mobile/2165/　を参照*/
/*↓一番上の帯*/
.acd-menu dt {
    position: relative;
    display: flex;
    align-items: center;
    /* 垂直方向の中央寄せ */
    height: 80px;
    padding-top: 2px;
    padding-right: 10px;
    padding-left: 2px;
    padding-bottom: 0;
    border-bottom: 1px solid #515151;
    font-size: 1.8rem;
    cursor: pointer;
}



@media screen and (max-width: 320px) {
    .acd-menu dt {
        font-size: 12px;
    }
}

@media screen and (max-width: 767px) {
    .btn {
        padding-left: 32px !important;
    }
}

@media screen and (max-width: 375px) {
    .btn {
        padding-left: 28px !important;
    }
}

@media (any-hover: hover) {

    /* ホバーアクションをPCだけにしたい場合、←のメディアクエリで囲む */
    .btn:hover {
        color: #00adef;
    }
}




.acd-menu {
    border-top: 1px solid #515151;
}

.acd-main_picture {
    position: relative;
}

.acd-main_contents {
    position: relative;
    max-width: 1680px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding-bottom: 50px;
}

@media screen and (max-width: 767px) {
    .acd-main_contents {
        align-items: flex-end;
        padding-bottom: 30px;
    }
}

@media screen and (max-width: 767px) {
    .main_contents {
        align-items: flex-start;
    }
}

/* 479px以下に対応
@media screen and (max-width: 767px){
.main_contents {
	align-items: flex-start;
}
} */
.acd-main_contents_txt_wrap {
    position: absolute;
    z-index: 100;
    color: #FFFFFF;
    margin-left: 6rem;
}

/* 479px以下に対応 */
@media screen and (max-width: 767px) {
    .acd-main_contents_txt_wrap {
        padding-bottom: 36px;
        margin-left: 0rem;
        width: 100%;
        padding-left: 3rem;
        padding-right: 3rem;

    }
}

.acd-main_contents_txt-1 {
    font-size: 6rem;
    font-size: clamp(4.6rem, 5vw, 6rem);
    font-weight: 400;
    line-height: 1.5;
    font-family: "Noto Serif JP", serif;
    margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
    .acd-main_contents_txt-1 {
        text-align: center;
        margin: 0 auto;
        padding-bottom: 25px;
    }
}

.acd-main_contents_txt-2 {
    font-size: 1.6rem;
    line-height: 1.7;
    width: 100%;
}

@media screen and (max-width: 767px) {
    .acd-main_contents_txt-2 {
        text-align: center;
    }
}






/* 認定メイン */
.acd-nintei_contents {
    position: relative;
    max-width: 1680px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding-bottom: 50px;
}

@media screen and (max-width: 1199px) {
    .acd-nintei_contents {
        align-items: flex-end;
        padding-bottom: 30px;
    }
}

@media screen and (max-width: 767px) {
    .acd-nintei_contents {
        padding-bottom: 0px;
    }
}

.acd-nintei_contents_txt_wrap {
    position: absolute;
    z-index: 100;
    margin-left: 6rem;
    width: 38%;
}

.acd-nintei_contents_txt_wrap-2 {
    display: none;
}

@media screen and (max-width: 767px) {
    .acd-nintei_contents_txt_wrap-2 {
        display: block;
        z-index: 800;
        margin-left: 3rem;
        padding-right: 3rem;
        position: relative;
        /* 重ね順では必須 */
        margin-bottom: 80px;
    }
}

/* 左のグラデーション処理 */
.acd-nintei_picture ::before {
    content: "";
    position: absolute;
    width: 60%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, #ffffff, transparent);
}

/* 479px以下に対応 */
@media screen and (max-width: 1199px) {

    /* 左のグラデーション処理 */
    .acd-nintei_picture ::before {
        content: none;
    }
}

@media screen and (max-width: 1199px) {
    .acd-nintei_picture {
        padding-bottom: 150px;
    }
}

@media screen and (max-width: 800px) {
    .acd-nintei_picture {
        padding-bottom: 176px;
    }
}

@media screen and (max-width: 767px) {
    .acd-nintei_picture {
        padding-bottom: 0px;
        z-index: 50;
        margin-bottom: -50px;
    }
}

/* 479px以下に対応 */
@media screen and (max-width: 1199px) {
    .acd-nintei_contents_txt_wrap {
        padding-bottom: 36px;
        margin-left: 0rem;
        width: 100%;
        padding-left: 3rem;
        padding-right: 3rem;
        position: absolute;
    }
}

/* 479px以下に対応 */
@media screen and (max-width: 767px) {
    .pc-display {
        display: none;
    }
}


.acd-nintei_contents_txt-1 {
    font-size: 6rem;
    font-size: clamp(3.4rem, 3.8vw, 5.7rem);
    font-weight: 400;
    line-height: 1.2;
    font-family: "Noto Serif JP", serif;
    margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
    .acd-nintei_contents_txt-1 {
        text-align: center;
        margin: 0 auto;
        padding-bottom: 25px;
    }
}

.acd-nintei_contents_txt-2 {
    font-size: 1.6rem;
    line-height: 1.7;
    width: 100%;
}

@media screen and (max-width: 767px) {
    .acd-nintei_contents_txt-2 {
        text-align: center;
    }
}

.acd-nintei_contents_txt-3 {
    font-size: 1.2rem;
    line-height: 1.6;
}

@media screen and (max-width: 767px) {
    .aacd-nintei_contents_txt-3 {
        text-align: center;
    }
}









.acd-menu dt:before {
    display: block;
    position: absolute;
    top: 0;
    /*調整*/
    bottom: 0;
    right: 17px;
    width: 20px;
    height: 2px;
    margin: auto;
    background: #000000;
    content: '';
    transition: all 0.3s;
}

@media screen and (max-width: 767px) {
    .acd-menu dt:before {
        right: 26px;
    }
}

.acd-menu .open:before {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background: #00adef;
}

.acd-menu dt:after {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 2px;
    height: 20px;
    margin: auto;
    background: #000000;
    content: '';
    float: right;
    margin-right: 26px;
    /*調整*/
    transition: all 0.3s;
}

@media screen and (max-width: 767px) {
    .acd-menu dt:after {
        margin-right: 35px;
        /*調整*/
    }
}

.acd-menu .open:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background: #00adef;
}

/*
.acd-menu dt::before { OPEN時の▼
  position: absolute;
  top: 50%;
  right: 18px;
  display: block;
  content: '';
  width: 8px;
  height: 8px;
  margin-top: -7px;
  border-top: 2px solid #888;
  border-right: 2px solid #888;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.acd-menu .open::before { OPEN時の▲
   margin-top: -3px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
   border-top: 2px solid #00adef;
  border-right: 2px solid #00adef;
}
*/

.acd-menu dd ul li {
    list-style: none;
}

.red {
    color: #ff0000;
    line-height: 10px;
}


#pre1 {
    background-color: #f0f0f0;
}

.acd_contener {
    padding-bottom: 40px;
    background-color: #FFFFFF;
    color: #2F2F2F;
}

@media screen and (max-width: 767px) {
    .acd_contener {
        padding-right: 3rem;
        padding-left: 3rem;
    }
}

.acd_box {
    background-color: #FFFFFF;
    border: 1px solid #707070;
}

.acd_box img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

.acd_box2 {
    background-color: #FFFFFF;
    padding-top: 16px;
}

.acd_box2 img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

.acd_box3 {
    background-color: #FFFFFF;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    margin-bottom: 30px;
}

.acd_box3 img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

.contents_acd {
    max-width: 1680px;
    margin: auto;
    padding-right: 5rem;
    padding-left: 5rem;
    margin-bottom: 10rem;
}

/* 1024px以下に対応 */
@media screen and (max-width: 1024px) {
    .contents_acd {
        padding-right: 4rem;
        padding-left: 4rem;
    }
}

@media screen and (max-width: 767px) {
    .contents_acd {
        padding-right: 0rem;
        padding-left: 0rem;
    }
}

.acd-main_picture {}

@media screen and (max-width: 767px) {
    .acd-main_picture {
        background-color: #000000;
        padding-bottom: 80px;
    }
}










/************************************************************
 *リアコーディオン2*
 ************************************************************/

.accordion-container .accordion-title, .accordion-container .accordion-inner-title {
    position: relative;
    display: flex;
    align-items: center;
    /* 垂直方向の中央寄せ */
    height: 80px;
    padding-top: 2px;
    padding-right: 10px;
    padding-left: 2px;
    padding-bottom: 0;
    font-size: 1.25em;
    font-weight: normal;
    cursor: pointer;
    border-bottom: 1px solid #515151;
}

/* SP表示(iPhone SE) */
@media screen and (max-width: 320px) {
    .accordion-container .accordion-title, .accordion-container .accordion-inner-title {
        font-size: 1.1em;
    }
}

.accordion-container .accordion-title::before,
.accordion-container .accordion-inner-title::before {
    display: block;
    position: absolute;
    top: 0;
    /*調整*/
    bottom: 0;
    right: 17px;
    width: 20px;
    height: 2px;
    margin: auto;
    background: #000000;
    content: '';
    transition: all 0.3s;
}

@media screen and (max-width: 767px) {

    .accordion-container .accordion-title::before,
    .accordion-container .accordion-inner-title::before {
        right: 26px;
    }
}

.accordion-container .accordion-title.open::before,
.accordion-container .accordion-inner-title.open::before {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background: #00adef;
}


.accordion-container .accordion-title::after,
.accordion-container .accordion-inner-title::after {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 2px;
    height: 20px;
    margin: auto;
    background: #000000;
    content: '';
    float: right;
    margin-right: 26px;
    /*調整*/
    transition: all 0.3s;
}

@media screen and (max-width: 767px) {

    .accordion-container .accordion-title::after,
    .accordion-container .accordion-inner-title::after {
        margin-right: 35px;
        /*調整*/
    }
}

.accordion-container .accordion-title.open::after,
.accordion-container .accordion-inner-title.open::after {
    transform: rotate(-45deg);
    background: #00adef;
}

@media screen and (max-width: 767px) {
    .accordion-container .accordion-title {
        padding-left: 32px !important;
    }
}

@media screen and (max-width: 375px) {
    .accordion-title {
        padding-left: 28px !important;
    }
}

@media (any-hover: hover) {

    /* ホバーアクションをPCだけにしたい場合、←のメディアクエリで囲む */
    .accordion-title:hover {
        color: #00adef;
    }
}













/************************************************************
 *リース* *ウェルカムプラン*
 ************************************************************/
.welcom_tittle {
    font-size: 52px;
    font-size: max(52px, min(3.6vw, 64px));
    font-size: clamp(3.25rem, 3.063rem + 0.94vw, 4rem);
    font-family: "MBCorpo Title", "DaimlerCAC-Regular", "DaimlerCACArab-Regular", serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    font-feature-settings: "palt";
    margin-bottom: 15px;
    letter-spacing: 0.1em;
}

.welcom_tittle_sub {
    margin-bottom: 30px;
    padding-right: 36%;
    color: #6b6b6b;
}

@media screen and (max-width: 767px) {
    .welcom_tittle_sub {
        margin-bottom: 30px;
        padding-right: 0%;
    }
}

.welcom_text-1 {
    font-size: 1.8rem;
    font-weight: 800;
    padding-top: 2.2rem;
    padding-bottom: 0.8rem;
}

.welcom_text-2 {
    font-size: 1.6rem;
    font-weight: 400;
}

.welcom_text-3 {
    font-size: 52px;
    font-size: max(52px, min(3.6vw, 64px));
    font-size: clamp(3.25rem, 3.063rem + 0.94vw, 4rem);
    font-family: "MBCorpo Title", "DaimlerCAC-Regular", "DaimlerCACArab-Regular", serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    font-feature-settings: "palt";
    margin-bottom: 20px;
    letter-spacing: 0.14em;
}

#welcom_text-3 {
    font-size: 52px;
    font-size: max(52px, min(3.6vw, 64px));
    font-size: clamp(3.25rem, 3.063rem + 0.94vw, 4rem);
    font-family: "MBCorpo Title", "DaimlerCAC-Regular", "DaimlerCACArab-Regular", serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    font-feature-settings: "palt";
    margin-bottom: 20px;
    letter-spacing: 0.14em;
}

.welcom_text-3_sub {
    font-size: 1.6rem;
    font-weight: 400;
    padding-right: 40%;
    color: #6b6b6b;
}

@media screen and (max-width: 767px) {
    .welcom_text-3_sub {
        padding-right: 0%;
    }
}

.welcom_text-3_sub p:last-child {
    margin-bottom: 52px;
}

.welcome_img_wrappe {
    padding-bottom: 90px;
}

.welcome_wrapper {
    height: 100%;
}

.lease_etc {
    padding-right: 36%;
    padding-top: 15px;
    padding-bottom: 20px;
    color: #6b6b6b;
}

@media screen and (max-width: 767px) {
    .lease_etc {
        padding-right: 0%;
    }
}

#lease_etc_tittle-1 {
    font-size: 52px;
    font-size: max(52px, min(3.6vw, 64px));
    font-size: clamp(3.25rem, 3.063rem + 0.94vw, 4rem);
    font-family: "MBCorpo Title", "DaimlerCAC-Regular", "DaimlerCACArab-Regular", serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    font-feature-settings: "palt";
    margin-bottom: 20px;
}

.lease_flex_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}

@media screen and (max-width: 767px) {
    .lease_flex_wrap {
        flex-direction: column;
    }
}

.lease_col-2_left {
    width: 34%;
}

@media screen and (max-width: 767px) {
    .lease_col-2_left {
        width: 100%;
        margin-bottom: 24px;
    }
}

.lease_col-2_right {
    width: 62%;
}

@media screen and (max-width: 767px) {
    .lease_col-2_right {
        width: 100%;
    }
}

.lease_col-2_right_tittle {
    font-size: 28px;
    font-size: max(52px, min(3.6vw, 64px));
    font-size: clamp(2.375rem, 2.156rem + 1.09vw, 3.25rem);
    font-family: "MBCorpo Title", "DaimlerCAC-Regular", "DaimlerCACArab-Regular", serif;
    line-height: 1.4;
    margin-bottom: 16px;
}

.lease_col-2_right_txt {
    color: #6b6b6b;
}

.simulation {
    margin-bottom: 80px;
    padding-top: 24px;
}

.simulation a {
    font-weight: 700;
    display: inline-block;
    font-size: 1.6rem;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: "Hiragino Kaku Gothic ProN";
    background-color: #0078d6;
    color: #FFFFFF;
    padding-left: 22px;
    padding-right: 22px;
}

@media screen and (max-width: 767px) {
    .simulation a {
        display: block;
        padding-top: 14px;
        padding-bottom: 14px;
    }
}

/* スマホではホバー(hover)を無効にする */
@media (hover: hover) and (pointer: fine) {
    .simulation a:hover {
        background-color: #0b3f71;
        transition: 0.5s;
    }
}

/* IE11用に以下のコードも追加 */
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .simulation a:hover {
        background-color: #0b3f71;
        transition: 0.5s;
    }
}

.welcome_norikae_img {
    margin-bottom: 80px;
    margin-top: -15px;
}











/************************************************************
 *タブ*
 ************************************************************/
.tab-wrap {
    background: White;
    display: flex;
    flex-wrap: wrap;
    padding: 0 0 20px;
    /* overflow: hidden; */
}

.tab-label {
    color: Gray;
    cursor: pointer;
    font-weight: bold;
    order: -1;
    padding: 12px 24px;
    position: relative;
    text-align: center;
    transition: cubic-bezier(0.4, 0, 0.2, 1) .2s;
    display: inline-block;
    user-select: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

@media screen and (max-width: 767px) {
    .tab-label {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;
    }
}

@media screen and (max-width: 767px) {
    input:checked+.tab-label {
        background: rgba(0, 191, 255, .1);
    }
}

.tab-label:hover {
    background: rgba(0, 191, 255, .1);
}

.tab-switch:checked+.tab-label {
    color: #0078d6;
}

.tab-label::after {
    background: #0078d6;
    bottom: 0;
    content: '';
    display: block;
    height: 3px;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transform: translateX(100%);
    transition: cubic-bezier(0.4, 0, 0.2, 1) .2s 80ms;
    width: 100%;
    z-index: 1;
}

.tab-switch:checked~.tab-label::after {
    transform: translateX(-100%);
}

.tab-switch:checked+.tab-label::after {
    opacity: 1;
    transform: translateX(0);
}

.tab-content {
    height: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-30%);
    /* transition: transform .3s 80ms, opacity .3s 80ms; */
    width: 100%;
    padding-top: 22px;
}

.tab-switch:checked~.tab-content {
    transform: translateX(30%);
}

.tab-switch:checked+.tab-label+.tab-content {
    height: auto;
    opacity: 1;
    order: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.tab-wrap::after {
    content: '';
    order: -1;
    border-bottom: 1px solid #e4e4e4;
    margin: 0 calc(50% - 50vw);
    padding: 0 calc(50vw - 50%);
    width: 100vw;
}

.tab-switch {
    display: none;
}



/************************************************************
 *タブ 2個目*
 ************************************************************/
.tab-wrap__2 {
    background: White;
    display: flex;
    flex-wrap: wrap;
    padding: 0 0 20px;
    /* overflow: hidden; */
}

.tab-label__2 {
    color: Gray;
    cursor: pointer;
    font-weight: bold;
    order: -1;
    padding: 12px 24px;
    position: relative;
    text-align: center;
    transition: cubic-bezier(0.4, 0, 0.2, 1) .2s;
    display: inline-block;
    user-select: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.tab-label__2:hover {
    background: rgba(0, 191, 255, .1);
}

.tab-switch__2:checked+.tab-label__2 {
    color: #0078d6;
}

.tab-label__2::after {
    background: #0078d6;
    bottom: 0;
    content: '';
    display: block;
    height: 3px;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transform: translateX(100%);
    transition: cubic-bezier(0.4, 0, 0.2, 1) .2s 80ms;
    width: 100%;
    z-index: 1;
}

.tab-switch__2:checked~.tab-label__2::after {
    transform: translateX(-100%);
}

.tab-switch__2:checked+.tab-label__2::after {
    opacity: 1;
    transform: translateX(0);
}

.tab-content__2 {
    height: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-30%);
    /* transition: transform .3s 80ms, opacity .3s 80ms; */
    width: 100%;
    padding-top: 22px;
}

.tab-switch__2:checked~.tab-content__2 {
    transform: translateX(30%);
}

.tab-switch__2:checked+.tab-label__2+.tab-content__2 {
    height: auto;
    opacity: 1;
    order: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.tab-wrap__2::after {
    content: '';
    order: -1;
    border-bottom: 1px solid #e4e4e4;
    margin: 0 calc(50% - 50vw);
    padding: 0 calc(50vw - 50%);
    width: 100vw;
}

.tab-switch__2 {
    display: none;
}











/************************************************************
 *ウェルカムプラン スライダー3*
 ************************************************************/

.card06 {
    overflow: hidden;
}

/* 1024px以下に対応 */
/* ipad pro 12等 */
@media screen and (max-width: 1024px) {
    .card06 {
        margin: 0 calc(50% - 50vw);
        padding: 0 calc(50vw - 50%);
        width: 100vw;
    }
}

.card06 .swiper {
    overflow: visible;
}

.card06 .swiper-button-prev, .card06 .swiper-button-next {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    margin: auto;
}

.card06 .swiper-button-prev::before, .card06 .swiper-button-next::before {
    background-color: rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: var(--box-shadow-dark);
    box-shadow: var(--box-shadow-dark);
    border: 2px solid #fff;
}

.card06 .swiper-button-prev::after, .card06 .swiper-button-next::after {
    border-color: #fff;
}

.card06 .swiper-button-prev {
    right: calc(100% - 1.6rem);
}

.card06 .swiper-button-next {
    left: calc(100% - 1.6rem);
}

.card06 .swiper-d:not(.swiper-initialized) {
    padding: 0;
}

.card06 .swiper-d:not(.swiper-initialized) .swiper-button-prev,
.card06 .swiper-d:not(.swiper-initialized) .swiper-button-next,
.card06 .swiper-d:not(.swiper-initialized) .swiper-pagination {
    display: none;
}

.card06 .swiper-d:not(.swiper-initialized) .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 46px;
}

@media screen and (max-width: 1439px) {
    .card06 .swiper-d:not(.swiper-initialized) .swiper-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

.card06 .slide {
    overflow: hidden;
}

.car-type {
    border-radius: 4px;
    background-color: #f1f1f3;
    /* 変更箇所 */
    padding: 40px 0 24px;
    text-align: center;
}

.card06 .slide-media {
    padding-top: 50%;
    /* 変更箇所-元62.5% */
}

.card06 .slide-media img {
    height: calc(100% + 16px);
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px);
}

.card06 .slide-content {
    padding: 3.2rem;
}

.card06 .slide-date {
    font-size: 1.2rem;
    line-height: 1;
    display: block;
    color: var(--color-theme);
}

.card06 .slide-title {
    line-height: 1.6;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 3.2em;
    margin-top: 1.6rem;
}


@media only screen and (max-width: 1024px) {
    .card06 .swiper {
        padding-top: 0;
        padding-right: 3.2rem;
        padding-bottom: 0;
    }

    .card06 .swiper-button-prev {
        right: calc(100% - 5.2rem);
    }

    .card06 .swiper-button-next {
        left: calc(100% - 5.2rem);
    }
}



@media only screen and (min-width: 1024px) {
    .card06 .slide {
        -webkit-transition: var(--transition);
        transition: var(--transition);
    }

    .card06 .slide img {
        -webkit-transition: var(--transition);
        transition: var(--transition);
    }
}









/************************************************************
 *ウェルカムプラン スライダー4*
 ************************************************************/

.card07 {
    overflow: hidden;
}

/* 1024px以下に対応 */
/* ipad pro 12等 */
@media screen and (max-width: 1439px) {
    .card07 {
        margin: 0 calc(50% - 50vw);
        padding: 0 calc(50vw - 50%);
        width: 100vw;
    }
}

.card07 .swiper {
    overflow: visible;
}

.card07 .swiper-button-prev, .card07 .swiper-button-next {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    margin: auto;
}

.card07 .swiper-button-prev::before, .card07 .swiper-button-next::before {
    background-color: rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: var(--box-shadow-dark);
    box-shadow: var(--box-shadow-dark);
    border: 2px solid #fff;
}

.card07 .swiper-button-prev::after, .card07 .swiper-button-next::after {
    border-color: #fff;
}

.card07 .swiper-button-prev {
    right: calc(100% - 1.6rem);
}

.card07 .swiper-button-next {
    left: calc(100% - 1.6rem);
}

.card07 .swiper-d:not(.swiper-initialized) {
    padding: 0;
}

.card07 .swiper-e:not(.swiper-initialized) .swiper-button-prev,
.card07 .swiper-e:not(.swiper-initialized) .swiper-button-next,
.card07 .swiper-e:not(.swiper-initialized) .swiper-pagination {
    display: none;
}

.card07 .swiper-e:not(.swiper-initialized) .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 46px;
}

@media screen and (max-width: 1439px) {
    .card07 .swiper-e:not(.swiper-initialized) .swiper-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

.card07 .slide {
    overflow: hidden;
}

.card07 .slide-media {
    padding-top: 50%;
    /* 変更箇所-元62.5% */
}

.card07 .slide-media img {
    height: calc(100% + 16px);
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px);
}

.card07 .slide-content {
    padding: 3.2rem;
}

.card07 .slide-date {
    font-size: 1.2rem;
    line-height: 1;
    display: block;
    color: var(--color-theme);
}

.card07 .slide-title {
    line-height: 1.6;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 3.2em;
    margin-top: 1.6rem;
}


@media only screen and (max-width: 1439px) {
    .card07 .swiper {
        padding-top: 0;
        padding-right: 3.2rem;
        padding-bottom: 0;
    }

    .card07 .swiper-button-prev {
        right: calc(100% - 5.8rem);
    }

    .card07 .swiper-button-next {
        left: calc(100% - 5.8rem);
    }
}

@media only screen and (max-width: 1024px) {
    .card07 .swiper {
        padding-top: 0;
        padding-right: 3.2rem;
        padding-bottom: 0;
    }

    .card07 .swiper-button-prev {
        right: calc(100% - 5.7rem);
    }

    .card07 .swiper-button-next {
        left: calc(100% - 5.7rem);
    }
}



@media only screen and (min-width: 1024px) {
    .card07 .slide {
        -webkit-transition: var(--transition);
        transition: var(--transition);
    }

    .card07 .slide img {
        -webkit-transition: var(--transition);
        transition: var(--transition);
    }
}











/************************************************************
 * Swaiperの高さを揃える！ *
 ************************************************************/
.swiper .swiper-slide {
    height: auto;
}




/* ダミー用 */
.dummy {
    display: block;
}

@media screen and (max-width: 1439px) {
    .dummy {
        display: none;
    }
}



/* スライダー3の中身 */
.card-type {
    background-color: #ffffff;
    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.22));
    transform: translateZ(0);
    /* safari対策 */
    margin: 2px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 高さをそろえる */
.card-type_inner {}

.item_content-container {
    padding-top: 2.5rem;
    padding-left: 3.0rem;
    padding-right: 3.0rem;
    padding-bottom: 4.0rem;
}

.item_content-container__tittle {
    font-size: 1.7rem;
    line-height: 1.6;
    font-weight: 700;
    margin-bottom: 8px;
}

.item_content-container__sub {
    font-size: 1.6rem;
    line-height: 2.6rem;
}











/************************************************************
 * 認定中古車について
 ************************************************************/
.certified-used_tittle_wrap {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.certified-used_sub_tittle {
    font-size: 1.6rem;
    line-height: 1.8;
    color: #6b6b6b;
    margin-bottom: 6px;
}

.certified-used_tittle {
    font-size: 52px;
    font-size: max(52px, min(3.6vw, 64px));
    font-size: clamp(3.25rem, 3.063rem + 0.94vw, 4rem);
    font-family: "MBCorpo Title", "DaimlerCAC-Regular", "DaimlerCACArab-Regular", serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    font-feature-settings: "palt";
    margin-bottom: 20px;
    letter-spacing: 0.14em;
}

.certified-used_2-col_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 70px;
}

@media screen and (max-width: 1399px) {
    .certified-used_2-col_wrapper {
        align-items: flex-start;
    }
}

@media screen and (max-width: 767px) {
    .certified-used_2-col_wrapper {
        flex-direction: column;
        margin-bottom: 80px;
    }

    .child_1 {
        order: 2;
    }

    .child_2 {
        order: 1;
        margin-bottom: 40px;
    }

    .child_2_wrapper {
        margin-bottom: 30px;
    }
}

.certified-used_2-col_left_item {
    width: 47%;
}

.certified-used_2-col_right_item {
    width: 46%;
}

@media screen and (max-width: 767px) {
    .certified-used_2-col_left_item {
        width: 100%;
        margin-bottom: 30px;
    }

    .certified-used_2-col_right_item {
        width: 100%;
    }
}

.certified-used_2-col_tittle {
    font-size: 52px;
    font-size: max(52px, min(3.6vw, 64px));
    font-size: clamp(3.25rem, 3.063rem + 0.94vw, 4rem);
    font-family: "MBCorpo Title", "DaimlerCAC-Regular", "DaimlerCACArab-Regular", serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    font-feature-settings: "palt";
    margin-bottom: 20px;
    letter-spacing: 0.18em;
}

.certified-used_2-col_detail {}

.certified-used_2-col_detail_etc {
    margin-bottom: 70px;
}

@media screen and (max-width: 767px) {
    .certified-used_2-col_detail_etc {
        margin-bottom: 80px;
    }
}












.footer-sitemap-inner {
    padding-top: 32px;
    padding-bottom: 32px;
    display: flex;
    color: #E6E6E6;
}

@media only screen and (max-width: 599px) {
    .footer-sitemap-inner {
        padding-top: 20px;
        padding-bottom: 20px;
        flex-direction: column;
    }
}

.footer-address {}

.footer-right {
    justify-content: space-between;
    margin-left: auto;
    margin-top: auto;
    padding-right: 100px;
    font-size: 1.2rem;
}

@media only screen and (max-width: 599px) {
    .footer-right {
        margin-left: 0;
        margin-right: auto;
        padding-right: 0px;
    }
}

.footer-address-title {
    font-family: "Noto Serif JP", serif;
    font-size: 1.6rem;
    font-weight: 400;
    color: #fff;
    margin-bottom: 15px;
}

@media only screen and (max-width: 599px) {
    .footer-address-title {
        margin-bottom: 10px;
    }
}

.footer-address-sub-title {
    font-size: 1.2rem;
    line-height: 1.7;
}




/* 下記テンプレに追加 */

/* --------  top移動 btn  -------- */
#PageTopBtn {
    position: fixed;
    bottom: -10px;
    right: 10px;
    font-size: 13px;
    z-index: 100;
}

#PageTopBtn a {
    display: block;
    text-decoration: none;
    color: #fff;
    background: #373737;
    text-align: center;
    border-radius: 10px 10px 0 0;
    width: 100px;
    height: 70px;
    padding-top: 25px;
    box-sizing: border-box;
}



/* -------- / top移動 btn /-------- */












/* セクション全体のコンテナ */
.car-showcase {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 80px;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* ヘッダー部分（タイトルと注意書き） */
.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-header h2 {
    font-size: 2em;
    margin-bottom: 10px;
}

.section-header p {
    font-size: 0.9em;
    color: #666;
}

/* カードを並べるためのグリッドコンテナ */
.card-container {
    display: grid;
    /* モバイルでは1列 */
    grid-template-columns: 1fr;
    gap: 30px;
    /* カード間の隙間 */
}

/* 個々のカードのスタイル */
.card-style {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    overflow: hidden;
    /* 角丸を画像にも適用 */
    display: flex;
    flex-direction: column;
    /* コンテンツを縦に並べる */
}

.card:hover {}

/* カード内の画像 */
.card-image img {
    width: 100%;
    height: auto;
    display: block;
    /* 画像下の余分なスペースを削除 */
}

/* テキストとボタンをまとめるコンテンツエリア */
.card-content {
    padding: 20px 20px 30px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* カードの高さを揃えるために必要 */
}

.card-title {
    font-size: 1.4em;
    line-height: 1.2;
    margin: 0 0 40px 0;
}

.card-description {
    font-size: 1em;
    color: #555;
    margin: 0;
    flex-grow: 1;
    /* タイトルとボタンの間のスペースを埋める */
}

/* ボタンのスタイル */
.card-button {
    display: block;
    margin-top: 20px;
    /* 説明文との間にスペースを確保 */
    padding: 12px 20px;
    background-color: #0078d6;
    color: #fff;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .card-button:hover {
        background-color: #014980;
        /* マウスオーバーカラー */
    }
}


/* --- レスポンシブ対応 --- */

/* タブレットサイズ (幅768px以上) */
@media (min-width: 768px) {
    .card-container {
        /* 2列のグリッドレイアウト */
        grid-template-columns: repeat(2, 1fr);
    }
}

/* PCサイズ (幅1024px以上) */
@media (min-width: 1024px) {
    .card-container {
        /* 4列のグリッドレイアウト */
        grid-template-columns: repeat(4, 1fr);
    }
}















/* --- 分割レイアウト Lineup セクション --- */

.lineup-split-section {
    padding: 40px 0;
    /* セクション上下の余白 */
    margin-top: 40px;
    margin-bottom: 90px;
    /* 他セクションとの間隔 */
}

.lineup-split-container {
    display: grid;
    /* PCでは2列 (1frは利用可能なスペースを均等に分ける単位) */
    grid-template-columns: 1fr 1fr;
    align-items: center;
    /* 要素を垂直方向の中央に配置 */
    gap: 80px;
    /* 画像とテキストの間の隙間 */

    /* コンテンツの最大幅と中央揃え */
    width: 100%;
    margin: 0 auto;
}

/* 画像エリア */
.lineup-split-image img {
    width: 100%;
    height: auto;
    display: block;
    /* 画像下の余分なスペースを削除 */
}

/* テキストエリア */
.lineup-split-text {
    padding: 20px;
}

.lineup-split-text h2 {
    font-size: 2.2em;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 20px;
}

.lineup-split-text p {
    font-size: 1em;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* ボタンのスタイル */
.lineup-split-button {
    display: inline-block;
    background-color: #0078d6;
    color: #fff;
    padding: 15px 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .lineup-split-button:hover {
        background-color: #014980;
        /* マウスオーバーカラー */
    }
}


/* --- レスポンシブ対応 --- */

/* 幅が800px以下のデバイス (タブレット、スマートフォン) */
@media (max-width: 800px) {
    .lineup-split-container {
        /* 1列に変更して、要素を縦に積む */
        grid-template-columns: 1fr;
        text-align: center;
        /* テキストを中央揃えに */
    }

    .lineup-split-text {
        /* スマートフォン表示では画像が先に来るように順序を変更 */
        order: 2;
    }

    .lineup-split-image {
        order: 1;
    }
}