/* 販売トップページ用のスタイル */

/* --- ヒーローブロック --- */

.hero-block {
    padding: 150px 0; 
    background: linear-gradient(to right, #8b1102, #e70314);
    color: #fff;
    text-align:center;
}

.hero-inner {
    padding: 0 20px; /* 左右の余白はinnerで確保 */
}

.hero-block h2 {
    font-family: "Noto Serif JP";
    font-size: 36px;
    line-height:1.5;
    font-weight: bold;
    margin-bottom: 30px;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}

.hero-block h2 span {
    font-family: "Noto Serif JP";
    font-size: 48px;
}

.hero-block h2 .underline-yellow {
    background: linear-gradient(transparent 83%, #f7f000 83%, #f7f000 90%,transparent 90%);
    padding: 0 5px;
}

.hero-block p {
    font-size: 24px;
    color: #fff;
}



/* --- アピールブロック --- */
.appeal-block {
    padding: 60px 0; 
    background: linear-gradient(to right, #8b1102, #e70314);
    color: #fff;
}

.appeal-inner {
    padding: 0 20px; /* 左右の余白はinnerで確保 */
}

.appeal-heading {
    text-align: center;
    margin: 40px 0;
}

.appeal-heading h2 {
    font-family: "Noto Serif JP";
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 30px;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}

.appeal-heading h2 span {
    font-family: "Noto Serif JP";
    font-size: 48px;
}

.appeal-heading h2 .underline-yellow {
    background: linear-gradient(transparent 90%, #f7f000 90%);
    padding: 0 5px;
}

.appeal-heading p {
    font-size: 24px;
    color: #fff;
}

.appeal-content {
    display: flex;
    gap: 40px;
    align-items: center; /* 垂直方向中央揃え */
    max-width: 1000px;
    margin: 0 auto;
}

.appeal-main-photo {
    width: 40%;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    min-height: 500px;
    border-radius: 8px;
    border: 3px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.appeal-features {
    flex-grow: 1;
}

.appeal-block h3 {
    /*font-family: "Noto Serif JP";*/
    font-size: 48px;
    font-weight: bold;
    margin:0 auto 30px auto;
    border-bottom: 2px solid rgba(255,255,255,0.5);
    padding-bottom: 60px;
    color: #fff;
    text-align:center;
    /*background: linear-gradient(180deg, 
        #bf953f, #ddd366, #b38728, 
        #fbf5b7, #aa771c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;*/
}

.appeal-features ul {
    list-style: none;
    padding: 0;
}

.appeal-features ul li {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.appeal-features ul li::before {
    content: '✔';
    color: #f7f000;
    font-size: 42px;
    font-weight: bold;
    margin-right: 15px;
    text-shadow: 1px 1px 3px rgba(0,0,0,1);
}


.appeal-features p {
    font-size:20px;
}

.appeal-features p span {
    background: linear-gradient(transparent 85%, #f7f000 85%, #f7f000 90%,transparent 90%);
    font-weight:bold;
    padding: 0 5px;  
}



/* Slideshow for sub-photos */
.appeal-sub-photos {
    width: 100%;
    height: 400px;
    overflow: hidden;
    margin-top: 60px;
    position: relative;
}

.appeal-sub-photos::before,
.appeal-sub-photos::after {
    content: '';
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    z-index: 2;
}
.appeal-sub-photos::before {
    left: 0;
    background: linear-gradient(to right, white, transparent);
}
.appeal-sub-photos::after {
    right: 0;
    background: linear-gradient(to left, white, transparent);
}


.slideshow-track {
    display: flex;
    width: var(--track-width);
    animation: marquee var(--duration) linear infinite;
    gap: 20px;
}

.slideshow-track img {
    height: 400px;
    width: auto;
    border-radius: 8px;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(var(--transform-width));
    }
}

.bo-block {
    padding: 60px 20px;
    background:
        linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
        url('../images/boback.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.bo-block.black {
    background:none;
    background-color:black;    
}

.bo-block.white {
    background:none;
    background-color:white;
}

.bo-block .inner-simple {
    max-width:1000px;
    margin:0 auto;
}

.bo-inner.card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border: 1px solid #eee;
    max-width: 1000px; /* 指示された最大幅 */
    margin: 0 auto;    /* 中央揃え */
}

.bo-title {
    text-align:center;
    font-size: 36px;
    font-weight: bold;
    background: linear-gradient(45deg, #8b1102, #e70314);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    display: inline-block;
    margin-bottom:20px;
}

.bo-frame {
    border:solid 1px #e70314;
    border-radius: 8px;
    margin: 40px 20px 0 20px;
    overflow: hidden;
}

.bo-button-frame {
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.bo-button-frame .bo-button {
    padding: 20px 40px;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(45deg, #8b1102, #e70314);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-width:300px;
    text-align:center;
}

.bo-button-frame .bo-button.second {
    background:none;
    background-color:#fff;
    border:solid 1px #e70314;
    color: #e70314; /* グラデーション赤字 */
}

.bo-button-frame .bo-button:hover {
    box-shadow:none;
    text-decoration:underline;
}


/* --- おすすめ車種ブロック --- */
.recommend-block {
    padding: 60px 0; /* 上下の余白のみを管理 */
    background-color: #fff;
}

.recommend-inner {
    padding: 0 20px; /* 左右の余白のみを管理 */
}

.recommend-main-title {
    display: block;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin: 0 auto;
    max-width: 900px;
    color: #333;
    border-radius: 8px;
    line-height: 1.5;
}

.recommend-main-title span {
    display: block;
    font-size: 48px;
    color: #e70314;
    margin-bottom: 5px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}


.recommend-segment {
    margin-bottom: 50px;
    max-width: 1400px;
    margin: 0 auto;
    padding-bottom:20px;
}

.segment-title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 5px;
}

.segment-subtitle {
    font-size: 16px;
    margin-bottom: 20px;
    color: #555;
}

.car-item {
    position: relative; /* 重ね合わせのため */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
    background-color: transparent; /* テキストが画像に重なるため背景は不要 */
}

.car-image-container {
    position: relative;
    width: 100%;
    padding-top: 70%; /* 100:75の比率 */
    overflow: hidden;
}

.car-image {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    text-decoration: none;
}

.car-text-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%); /* 黒のグラデーション */
    color: #ffffff;
    padding: 15px;
}

.car-text-overlay .car-name {
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 5px 0;
}
.car-text-overlay .car-name a{
    color:white;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8);
    text-decoration:none;
}

.car-item:hover .car-text-overlay .car-name a{
    text-decoration:underline;
}

.car-item:active {
    box-shadow:none;
}

.car-item:active .car-text-overlay .car-name a{
    text-decoration:none;
}

.car-text-overlay .car-desc {
    font-size: 14px;
    margin: 0 0 5px 0;
}

.car-text-overlay .car-note {
    font-size: 12px;
    margin: 0;
    color: #e70314;
}

/* PC layout */
@media screen and (min-width: 640px) {
    .car-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

/* --- Stock List Button --- */
.stock-list-block {
    text-align: center;
    padding: 20px 0px;
}

.stock-list-button {
    display: inline-block;
    padding: 20px 40px;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(45deg, #8b1102, #e70314);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-width:300px;
}

.stock-list-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}



/* --- 情報ブロック --- */
.info-block {
    padding: 60px 20px;
}
.info-title {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 50px;
}

.price-reason-block .info-title {
    text-align: left;
    border-left: 10px solid #e70314;
    padding-left: 15px;
}

.assurance-reason-block .info-title {
    display: inline-block;
    border-top: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    padding: 10px 0;
}

/* 価格実現理由ブロック */
.price-reason-block .price-reason-inner {
    max-width: 800px;
    margin: 0 auto;
}

.price-reason-block .info-title {
    text-align: center; /* タイトルを中央寄せに変更 */
    border-left: none; /* 左ボーダーを削除 */
    padding-left: 0;
    margin-bottom: 40px; /* 下マージンを調整 */
    font-size: 32px; /* 少し大きく */
    color: #e70314; /* 赤色に */
}

.price-reason-block .reason-item {
    display: flex;
    align-items: flex-start; /* 上揃え */
    gap: 20px;
    margin-bottom: 30px;
    background-color: #fff; /* 背景色を追加 */
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.price-reason-block .reason-number {
    display: flex; /* 中央寄せのため */
    align-items: center;
    justify-content: center;
    background-color: #e70314;
    color: #fff;
    border-radius: 50%;
    width: 45px; /* 少し大きく */
    height: 45px; /* 少し大きく */
    font-size: 24px; /* 数字も大きく */
    font-weight: bold;
    flex-shrink: 0; /* 縮まない */
}

.price-reason-block .reason-text {
    flex-grow: 1; /* 領域いっぱいに広がる */
}

.price-reason-block .reason-text h3 {
    font-size: 24px; /* 見出しを大きく */
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.price-reason-block .reason-text p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

.price-reason-block .closing-text {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-top: 50px; /* 上マージンを調整 */
    color: #e70314; /* 赤色に */
}

/* 安心できる理由ブロック */
.anshin-block {
    background-color: #f5f5f5; /* 背景色を変更 */
    text-align: center;
    padding: 60px 20px; /* パディングを調整 */
}

.anshin-block .anshin-inner {
    max-width: 800px;
    margin: 0 auto;
}

.anshin-block .info-title {
    display: block; /* block要素にする */
    border-top: none; /* 上ボーダーを削除 */
    border-bottom: 3px solid #e70314; /* 下ボーダーのみに */
    padding: 10px 0 15px 0; /* パディングを調整 */
    margin-bottom: 40px;
    font-size: 32px; /* 大きめに */
    color: #333; /* 色を調整 */
    font-weight: bold;
}

.anshin-block p {
    font-size: 18px; /* フォントサイズを調整 */
    line-height: 1.8;
    margin-bottom: 15px; /* マージンを調整 */
    color: black;
}

/* 新しいスタイル */
.anshin-item {
    border: 2px solid #e70314;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px; /* マージン調整 */
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.anshin-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: #e70314;
    border: 2px solid #e70314;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 24px;
    font-weight: bold;
    flex-shrink: 0;
}

.anshin-text {
    flex-grow: 1;
    /* h3の代わりのpタグを太字にする */
}

.anshin-text p {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin: 0; /* デフォルトのpマージンをリセット */
    line-height: 1.5; /* アイコンと高さを合わせる */
    padding-top: 5px; /* 微調整 */
}

.anshin-block .closing-text {
    font-size: 40px;
    font-weight: bold;
    margin-top: 0px;
    color: #e70314; /* 赤色に */
}

/* 実績ブロック */
.achievement-block-wrapper {
    background-color: #f5f5f5; /* カードの外側の背景色 */
    padding:20px;
}

.achievement-block {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    background-color: #000;
    color: #fff;
    min-height: 600px;
    display: flex;
    align-items: center;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.achievement-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 75%;
    height: 100%;
    background-image: url('../images/shojiki.jpg');
    background-size: cover;
    background-position: 0% 25%;
}

.achievement-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0) 10%, rgba(0,0,0,1) 100%);
}

.achievement-content {
    position: relative;
    width: 55%;
    margin-left: 45%;
    padding: 40px;
}

.achievement-content h3 {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 40px;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}

.achievement-content p {
    font-size: 20px;
    line-height: 1.8;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}

.achievement-content p.right {
    text-align:right;
}

.achievement-content p span {
    font-size: 40px;
    font-family:"Hachi Maru Pop";
}

/* --- FAQブロック --- */
.faq-block {
    background-color: #fff; /* 背景色 */
    padding: 60px 20px;
}

.faq-block .faq-inner {
    max-width: 800px;
    margin: 0 auto;
}

.faq-block .info-title {
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 40px;
    color: #333;
}

.faq-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden; /* 角丸のため */
}

.faq-question {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 20px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    background-color: #f9f9f9;
    border: none;
    cursor: pointer;
    position: relative;
    gap: 15px; /* Qとテキストの間隔 */
}

.faq-question:hover {
    background-color: #f1f1f1;
}

.faq-question span {
    font-size: 24px;
    color: #e70314;
    font-weight: bold;
}

.faq-question p {
    flex-grow: 1;
    margin: 0;
}

.faq-arrow {
    width: 12px;
    height: 12px;
    border-left: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(-45deg);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-question.active .faq-arrow {
    transform: rotate(135deg); /* 上向き矢印 */
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease; /* paddingのアニメーションを削除 */
    background-color: #fff;
    font-size: 16px;
    line-height: 1.7;
    color: #555;
}

.faq-answer.open {
    /* padding: 20px; */ /* paddingを削除 */
}

.faq-answer-inner {
    display: flex;
    gap: 15px;
    padding: 20px; /* innerにpaddingを移動 */
}

.faq-answer span {
    font-size: 24px;
    color: #e70314;
    font-weight: bold;
}

.faq-answer p {
    margin: 0;
    flex-grow: 1;
    min-width: 0; /* フレックスアイテムのはみ出しを防止 */
}

/* --- Message Block --- */
.message-block {
    position: relative;
    padding: 100px 20px; /* 適度な余白 */
    overflow: hidden; /* ぼかしがはみ出さないように */
}

.message-block::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background:
      linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
      url('../images/message.jpg') center / cover no-repeat;
    filter: blur(10px);
    z-index: 0;
}

.message-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px; /* 指定された幅 */
    margin: 0 auto;
    background-image:
        linear-gradient(
            to right,
            rgba(0,0,0,0.2),
            rgba(0,0,0,0)
        ),
        url('../images/message.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 120px 40px;
    border-radius: 8px;
    text-align: left; /* テキストは左寄せ */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* 立体感を出す影 */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 左寄せ */
}

.message-inner .message-title {
    font-size: 54px;
    font-weight: bold;
    margin-bottom:40px;
    padding:15px 15px 22px 15px;
}

.message-inner p {
    font-size: 18px;
    font-weight:600;
    line-height: 1;
    padding:8px 15px 11px 15px;
    margin-bottom:-3px;
    background-color:#fff;
    color:#000;
    border-radius:3px;
}

.message-inner p.spacer {
    margin-bottom: 30px;
}

.message-inner p.spacer.mid {
    margin-bottom: 30px;
    font-size:36px;
    line-height:1.3;
}

.message-inner p:last-of-type {
    margin-bottom: 0;
}



/* 
==============================================
SP Styles (max-width: 639px)

$$$$$$$\  $$\   $$\  $$$$$$\  $$\   $$\ $$$$$$$$\ 
$$  __$$\ $$ |  $$ |$$  __$$\ $$$\  $$ |$$  _____|
$$ |  $$ |$$ |  $$ |$$ /  $$ |$$$$\ $$ |$$ |      
$$$$$$$  |$$$$$$$$ |$$ |  $$ |$$ $$\$$ |$$$$$\    
$$  ____/ $$  __$$ |$$ |  $$ |$$ \$$$$ |$$  __|   
$$ |      $$ |  $$ |$$ |  $$ |$$ |\$$$ |$$ |      
$$ |      $$ |  $$ | $$$$$$  |$$ | \$$ |$$$$$$$$\ 
\__|      \__|  \__| \______/ \__|  \__|\________|
                                                  
==============================================
*/
@media screen and (max-width: 639px) {
    /* SP layout */
    .car-list {
        display: flex;
        overflow-x: auto;
        gap: 15px;
        padding-bottom: 15px; /* for scrollbar */
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    .car-list::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
    .car-item {
        flex: 0 0 80%; /* 画面幅の80%を各カードの幅にする */
        max-width: 300px;
    }


    .hero-block {
        text-align:left;
        padding: 120px 0; 
    }

    .hero-inner {
        padding: 0 10px;    
    }
    

    .hero-block h2 {
        font-size: clamp(12px, 4.5vw, 24px);
        transform: scaleY(1.1);
    }

    .hero-block h2 span {
        font-size: clamp(18px, 6.4vw, 36px);
    }

    .hero-block h2 .underline-yellow {
    }

    
    .hero-block p {
        font-size: clamp(9px, 3.5vw, 18px);
    }




    .appeal-block {
        padding:40px 0px;
    }

    .appeal-block h3 {
        font-size: clamp(18px, 5.5vw, 24px);
        text-align: center;
        padding-bottom:10px;
    }

    .appeal-content {
        flex-direction: column;
        padding:0 10px;
    }
    .appeal-main-photo {
        width: 75%;
    }

    .appeal-sub-photos {
        height: 240px;
    }
    .slideshow-track img {
        height: 240px;
    }
    .appeal-sub-photos::before,
    .appeal-sub-photos::after {
        width: 50px;
    }

    .appeal-heading h2, .appeal-heading h2 span {
        font-size: clamp(20px, 5.5vw, 36px);
        margin-bottom: 20px;
    }
    .appeal-features ul li {
        font-size: clamp(12px, 4.5vw, 22px);
        border-bottom: solid 1px #f75d72;
    }
    .appeal-features ul li::before {
        font-size: 24px;
        margin-right: 10px;
    }
        .appeal-block p {
        font-size: clamp(8px, 3.2vw, 24px);
    }







    .recommend-block { /* New rule */
        padding: 0;
        margin: 0;
    }
    .recommend-inner {
        padding: 20px 10px;
    }



    /* price-reason-block */
    .price-reason-block .info-title {
        font-size: 26px;
    }
    .price-reason-block .reason-item {
        flex-direction: row; /* スマホでも横並びを維持 */
        align-items: flex-start;
        padding: 20px;
    }
    .price-reason-block .reason-number {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    .price-reason-block .reason-text h3 {
        font-size: 20px;
    }
    .price-reason-block .reason-text p {
        font-size: 14px;
    }
    .price-reason-block .closing-text {
        font-size: 18px;
        margin-top: 40px;
    }
    
    /* anshin-block */

    .anshin-block {
        padding: 40px 10px; /* パディングを調整 */
    }
    .anshin-block .info-title {
        font-size: clamp(20px, 4.5vw, 28px);
        margin-bottom: 30px;
    }
    .anshin-block p {
        font-size: clamp(8px, 3.5vw, 16px);
    }
    .anshin-block .closing-text {
        font-size: clamp(16px, 4.8vw, 24px);
    }
    
    /* achievement-block */
    .achievement-block {
        flex-direction: column;
        max-width: 90%;
        margin: 0;
        max-width:100%;
        min-height: 540px;
    }
    .achievement-bg {
        width: 100%;
        height:75%
    }
    .achievement-bg::after {
        background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 50%);
    }
    .achievement-content {
        width: 100%;
        margin-left: 0;
        height: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding: 20px;
        margin-top: 80%;/* Push to the bottom */
        margin-bottom:5%
    }

    .achievement-content h3 {
        font-size: clamp(18px, 5vw, 32px);
    }
    .achievement-content p {
        font-size: clamp(12px, 3vw, 20px);
        text-align:left;
    }
    .achievement-content p span{
        font-size: clamp(20px, 5vw, 36px);
    }







    .recommend-main-title {
        padding: 20px 15px;
        font-size: clamp(16px, 4.5vw, 22px);
    }
    .recommend-main-title span {
        font-size: clamp(28px, 8vw, 42px);
    }

    .car-text-overlay .car-name {
        font-size: clamp(20px, 3vw, 28px);
    }




    .segment-title {
        font-size: clamp(16px, 4.8vw, 22px);
    }
    .segment-subtitle {
        font-size: clamp(12px, 3.6vw, 16px);
    }

    .submit-button {
        font-size: clamp(16px, 4.5vw, 18px);
    }
    .info-title {
        font-size: clamp(20px, 5.5vw, 28px);
    }
    .price-reason-block .reason-text p {
        font-size: clamp(8px, 3vw, 18px);
    }
    .price-reason-block .closing-text {
        font-size: clamp(16px, 4.8vw, 20px);
    }
    .assurance-reason-block p {
        font-size: clamp(14px, 4vw, 16px);
    }

    .bo-button-frame {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .bo-button-frame .bo-button {
        width: 100%;
        min-width: unset;
    }
    .anshin-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
    }
    .anshin-text p {
        padding-top: 0;
    }



    
    /* faq-block */
    .faq-block .info-title {
        font-size: 26px;
    }
    .faq-question {
        font-size: 16px;
        padding: 15px;
    }
    .faq-question span, .faq-answer span {
        font-size: 20px;
    }
    .faq-answer-inner { /* 追加 */
        padding: 15px; /* スマートフォン用のpadding */
    }
    .faq-answer p {
        font-size: 14px;
    }
    
    /* message-block */
    .message-block {
        padding: 60px 0;
    }

    .message-block::before {
        filter: blur(0px);
        top:0;
        right:-20px;
        bottom:0;
        left:0;
        background-image:
            linear-gradient(
                to right,
                rgba(0,0,0,0.3),
                rgba(0,0,0,0)
            ),
            url('../images/message.jpg');
    }
    .message-inner {
        padding: 25px;
        background:none;
        box-shadow:none;
        margin:0;
    }
    .message-inner .message-title {
        font-size: 54px;
        margin-bottom: 60px;
    }
    .message-inner p {
        font-size: clamp(8px, 2.5vw, 14px);
        padding: 10px;
        margin-bottom:-6px;
        border-radius:2px;
    }
    .message-inner p.spacer {
            margin-bottom:60px;
    }
    .message-inner p.spacer.mid {
        font-size: clamp(8px, 4.5vw, 36px);
        margin-bottom:60px;
    }


}