@charset "utf-8";

body {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
}

  .unique-page a {
    color: #2693ff;/* 独自のリンクカラー */
    text-decoration: none;
}

.voltex-lp-container {
    width: 100%; 
    max-width: 1200px;
    margin: 0 auto;
    background-color: #ffffff;
    font-family: "Yu Gothic", "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
    color: #000;
    line-height: 1.8;
}

.main-visual {
    position: relative;
    width: 100%;
    height: 680px;
    background-image: url('https://toyoking.co.jp/products/images/yaris.jpg'); /* メイン画像パス */
    background-size: cover;
    background-position: center;
}


.lang0417-switch {
    position: absolute;
    top: 30px;      /* 上からの距離 */
    right: 40px;    /* 右からの距離 */
    z-index: 10;    /* 画像より前面に出す */
    display: flex;
    align-items: center;
}

/* ボタンのスタイル */
.lang0417-btn {
    color: #ffffff !important;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif; /* 以前設定したかっこいい書体 */
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 5px 10px;
    transition: opacity 0.3s, color 0.3s;
}

.lang0417-btn:hover {
    color: #fcf9f9; /* トヨタレッドに光る */
    opacity: 0.8;
}


/* 区切り線（|）のスタイル */
.lang0417-separator {
    color: #ffffff;
    font-size: 12px;
    opacity: 0.5;
    margin: 0 5px;
}


.main-copy-en {
    position: absolute;
    top: 30px;
    left: 40px;
    color: #ffffff;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
    line-height: 50px;
    font-family: 'Montserrat', sans-serif; /* 洗練されたスタイル */
}


/* キャッチコピーエリア */
.section-title-box {
    padding: 80px 0;
    text-align: center;
}


.section-title-text {
    font-size: 42px;
    font-weight: bold;
    letter-spacing: 0.15em;
   font-family: "Noto Serif JP", "MS P明朝", "MS PMincho", "Hiragino Mincho ProN", serif;
}


/* 商品タイトルバー */
.product-bar {
    width: 100%;
    background-color: #000000;
    color: #ffffff;
    padding: 18px 40px;
    box-sizing: border-box;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 40px;
    text-align: center;
}

/* 商品コンテンツレイアウト */
.product-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 60px 80px 60px;
    gap: 60px;
}

/* 画像を右にするためのクラス */
.product-content.reverse {
    flex-direction: row-reverse;
}

.product-image {
    width: 550px;
}

.product-image img {
    width: 100%;
    height: auto;
    display: block;
}

.product-description {
    width: 500px;
    font-size: 20px;
    font-weight: 500;
    text-align: left;
}


   .product-price {
    margin-top: 20px;     /* 説明文との間隔 */
    font-size: 20px;      /* 説明文と同じ大きさ */
    font-weight: 800;     /* しっかりした太字 */
    color: #000;          /* 黒で引き締める */
    display: block;
}

.button0417-area {
    text-align: center;
    padding-bottom: 50px;
}

.cta0417-button {
    display: inline-block;
    width: 650px;
    padding: 25px 0;
    background-color: #c7e3f0; /* ブランドレッド */
    color: #ffffff;
    text-decoration: none;
    font-size: 26px;
    font-weight: bold;
    border-radius: 4px;
    transition: 0.3s;
}

.cta0417-button:hover {
    background-color: #235083;
    filter: brightness(1.1);
}

.voltex-cta-container {
    padding: 0px 20px;
    text-align: center;
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
    background-color: #ffffff; /* 必要に応じて背景色を変更してください */
}

/* キャッチコピーのスタイル */
.catchphrase-0417 {
    font-size: 1.8rem;
    color: #333;
    letter-spacing: 0.15em;
    margin-bottom: 30px;
    font-weight: 500;
}


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

.voltex-lp-container {
        width: 100% !important;
        min-width: 100% !important;
    }

    
    .lang0417-btn {
        font-size: 12px;
    }

    .main-copy-en {
        font-size: 14px;
        top: 20px;
        left: 20px;
    }

   

     .product-price {
        margin-top: 15px;
        font-size: 20px;
        border-left: 4px solid #be000e; /* 左側に赤いアクセントライン */
        padding-left: 10px;
    }

    .product-bar {
        font-size: 16px;
        padding: 12px 20px;
    }

    
    .product-image, 
    .product-description {
        width: 100%;
        box-sizing: border-box;
    }

    .product-description {
        font-size: 16px;
        text-align: left;
        line-height: 1.6;
    }

     .button0417-area {
        padding: 0 20px 60px;
    }

    .cta0417-button {
        width: 100%; /* ボタンを横いっぱいに */
        font-size: 20px;
        padding: 20px 0;
    }

    .main-visual {
        min-height: 400px; /* スマホでは高さを抑える */
    }

    .lang0417-switch {
        top: 10px;
        right: 10px;
        padding: 4px 10px;
    }

    .section-title-box {
        padding: 40px 15px;
    }
    
    /* 改行をスマホで調整したい場合 */
.section-title-text  {
        font-size: 25px;
    }

     
    .section-title-text br {
        display: none; /* 小さい画面では改行を解除して流し込む */
    }
    .section-title-text br::after {
        content: " "; /* 改行の代わりにスペースを入れる */
    }

 .voltex-lp-container {
        width: 100% !important;
        max-width: 100vw !important; /* 画面幅を超えないようにする */
        overflow: hidden; /* 万が一の中身のはみ出しをカット */
    }

    /* 2. 画像とテキストを縦並びに強制変更 */
    .product-content, 
    .product-content.reverse {
        display: flex !important;
        flex-direction: column !important; /* 縦並び */
        padding: 20px !important;
        gap: 20px !important;
    }

    /* 3. 画像を横幅100%に広げる */
    .product-image {
        width: 100% !important;
        margin: 0 !important;
    }

    .product-image img {
        width: 100% !important;
        height: auto !important;
    }

    /* 4. テキストエリアも横幅100%に */
    .product-description {
        width: 100% !important;
        font-size: 16px !important;
        text-align: left !important;
    }

    /* 5. 商品タイトルの調整 */
    .product-bar {
        width: 100% !important;
        font-size: 16px !important;
        padding: 12px 15px !important;
        margin-bottom: 20px !important;
        box-sizing: border-box;
    }

    .lang0417-switch {
        position: relative !important; /* 絶対配置を解除 */
        top: 20px !important;         /* 上部に余白を作る */
        right: auto !important;        /* 右固定を解除 */
        left: auto !important;
        justify-content: center !important; /* 中身の文字を中央へ */
        margin: 0 auto !important;     /* 全体を中央へ */
        width: 100% !important;        /* 横幅いっぱい使って中央寄せ */
    }

    /* メインコピーがある場合、重ならないよう位置を調整 */
    .main-copy-en {
        position: relative !important;
        top: 40px !important;
        left: auto !important;
        text-align: center !important;
        width: 100% !important;
        font-size: 20px;
    }

    .main-visual {
        width: 100% !important;
        height: auto !important; /* 高さを固定せず中身に合わせる */
        min-height: 300px;       /* 最低限の高さだけ確保 */
        background-size: cover;  /* 画像を枠内に収める */
        background-position: center;
    }

    .catchphrase-0417 {
    font-size: 1.3rem;
    margin-top: 30px;
    margin-bottom: 30px;
    font-weight: 500;
}

}