@charset "UTF-8";

/* =========================================
   ベーススタイル
   ========================================= */
:root {
    /* メインカラー：濃紺(#00263E) */
    --primary-color: #00263E;
    --dark-bg: #1a1a1a;
    --text-dark: #333;
    --text-light: #fff;
    --accent-gold: #c5a059;
    --gray-light: #f4f4f4;
}

body {
    font-family: "Century Gothic", "Meiryo UI", sans-serif;
    margin: 0;
    padding: 0;
    color: var(--text-dark);
    line-height: 1.6;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; padding: 0; }
img { max-width: 100%; height: auto; display: block; }

/* =========================================
   ヘッダー
   ========================================= */
header {
    background: #fff;
    padding: 15px 0;
    border-bottom: 1px solid #ddd;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-inner {
    width: 100%;
    padding: 0 40px; 
    box-sizing: border-box;
    display: flex;
    justify-content: space-between; /* 左右に配置 */
    align-items: center;
}

/* ロゴ画像の調整 */
.logo {
    display: flex;
    align-items: center;
}
.logo img {
    height: 40px;
    width: auto;
}

/* 右側エリア */
.header-right {
    display: flex;
    align-items: center;
}

/* ヘッダーボタンのデザイン */
.header-btn {
    background: var(--primary-color);
    color: white;
    padding: 12px 30px;
    border-radius: 0; 
    font-weight: bold;
    display: inline-block;
    white-space: nowrap;
    transition: opacity 0.3s;
}
.header-btn:hover {
    opacity: 0.8;
}

/* スマホ対応の修正箇所 
   ロゴとボタンを横並び（row）のまま維持し、サイズを小さくします
*/
@media (max-width: 768px) {
    header {
        padding: 10px 0; /* ヘッダー自体の高さを少し抑える */
    }

    .header-inner {
        /* flex-direction: column; を削除し、デフォルトのrow(横並び)を採用 */
        flex-direction: row; 
        padding: 0 15px; /* 左右の余白を調整 */
        align-items: center;
    }

    .header-right {
        width: auto; /* 幅100%を解除 */
        margin-top: 0; /* 上の余白を削除 */
    }

    .header-btn {
        width: auto; /* 横幅いっぱいを解除 */
        padding: 8px 12px; /* ボタンを小さく */
        font-size: 0.75rem; /* 文字サイズを小さく */
        text-align: center;
    }

    .logo img {
        height: 24px; /* スマホではロゴを少し小さくしてバランスを取る */
    }
}

/* style.css の .hero 部分 */

/* =========================================
   ヒーローセクション
   ========================================= */
.hero {
    background-color: var(--dark-bg); /* 画像が読み込まれるまでの背景色 */
    color: white;
    text-align: center;
    padding: 100px 20px; /* 少し高さを出してリッチに */

    /* ▼▼▼ ここを変更 ▼▼▼ */
    background-image: 
        /* 1枚目（手前）：文字を読みやすくするための濃紺フィルター（透明度0.7） */
        linear-gradient(rgba(0, 38, 62, 0.7), rgba(0, 38, 62, 0.7)),
        /* 2枚目（奥）：背景画像（ここに実際のフェラーリの画像URLを指定します） */
        url('https://news.cornesmotors.com/static-news/lp/cornes/introductioncampaign/main.jpg');
    /* ▲▲▲ ここまで変更 ▲▲▲ */

    background-size: cover;   /* 領域いっぱいに画像を広げる */
    background-position: center; /* 画像の中央を表示 */
    background-repeat: no-repeat;
    
    /* オプション：スクロール時に背景を固定してパララックス効果を出す場合 */
    /* background-attachment: fixed; */
}

.hero h1 {
    font-size: 2rem;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    letter-spacing: 0.05em;
}

.hero h1 span {
    color: #fff;
    display: block;
    font-size: 0.6em;
    margin-bottom: 10px;
    font-weight: normal;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 40px;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-primary {
    background: #fff;
    color: var(--primary-color);
    padding: 15px 40px;
    border-radius: 2px;
    font-size: 1.1rem;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
}

.btn-primary:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* =========================================
   共通コンポーネント
   ========================================= */
.section-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 40px;
    border-bottom: 2px solid var(--primary-color);
    display: inline-block;
    padding-bottom: 10px;
    color: var(--primary-color);
    letter-spacing: 0.05em;
}

.section-header {
    text-align: center;
}

.white-border {
    border-color: #fff !important;
    color: #fff !important;
}

/* =========================================
   3つの理由セクション
   ========================================= */
.reasons {
    background: var(--gray-light);
    padding: 60px 20px;
}

.reasons-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.reason-card {
    background: white;
    padding: 30px;
    text-align: center;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.reason-number {
    font-size: 3rem;
    color: var(--accent-gold);
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
    font-family: "Century Gothic", sans-serif;
}

.reason-title {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--primary-color);
}

/* =========================================
   コンテンツ文章エリア
   ========================================= */
.content-area {
    max-width: 900px;
    margin: 60px auto;
    padding: 0 20px;
    line-height: 1.8;
}

.content-area h3 {
    font-size: 1.5rem;
    border-left: 5px solid var(--primary-color);
    padding-left: 15px;
    margin-top: 50px;
    color: var(--text-dark);
}

.highlight-box {
    background: #fffbea;
    border: 1px solid #e0c060;
    padding: 30px;
    margin: 30px 0;
    border-radius: 4px;
}

/* =========================================
   買取強化スライダーセクション
   ========================================= */
.slider-section {
    background: #f4f4f4;
    padding: 40px 20px;
    overflow: hidden;
}

.slider-box {
    max-width: 1500px;
    margin: 0 auto;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 20px;
}

.slider-info {
    flex-shrink: 0;
    width: 200px;
    text-align: center;
    border-right: 1px solid #eee;
    padding-right: 20px;
}

.slider-title {
    color: var(--primary-color);
    font-size: 1.8rem;
    font-weight: bold;
    margin: 0;
    line-height: 1.2;
}

.slider-subtitle {
    font-size: 1rem;
    color: #333;
    margin: 5px 0 0 0;
    font-weight: bold;
}

.slider-wrapper {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.slider-arrow {
    background: var(--primary-color);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    z-index: 2;
    flex-shrink: 0;
}
.slider-arrow.prev { margin-right: 10px; }
.slider-arrow.next { margin-left: 10px; }

/* PC版の計算:
   画像幅(300px) + 左右マージン(20px) = 1アイテム幅 320px
   8枚分 = 2560px
*/
.slider-track {
    display: flex;
    /* 幅は全16枚が収まるように設定 */
    width: calc(320px * 16);
    /* PC用アニメーション */
    animation: scroll-loop-pc 30s linear infinite;
}

.slide-item {
    width: 300px;
    height: 225px;
    margin: 0 10px; /* 左右に10px = 合計余白20px */
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    flex-shrink: 0;
    padding: 0;
}

.slide-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* PC用アニメーション定義: 8枚分(2560px)だけ移動 */
@keyframes scroll-loop-pc {
    0% { transform: translateX(0); }
    100% { transform: translateX(-2560px); }
}

@media (max-width: 768px) {
    .slider-box {
        flex-direction: column;
        padding: 20px 10px;
    }
    .slider-info {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #eee;
        padding-right: 0;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
    .slider-arrow { display: none; }
    
    .slider-wrapper {
        width: 100%;
    }

    /* スマホ版の計算:
       画像幅(150px) + 左右マージン(20px) = 1アイテム幅 170px
       8枚分 = 1360px
    */
    .slider-track {
        /* スマホ用アニメーションに上書き */
        animation-name: scroll-loop-mobile;
        width: calc(170px * 16);
    }

    .slide-item {
        width: 150px;
        height: 100px;
        padding: 0;
        /* marginはPC版の 0 10px を継承しているので計算通り */
    }
    .slide-item img {
        max-width: 90%;
        max-height: 90%;
        object-fit: contain;
    }
}

/* スマホ用アニメーション定義: 8枚分(1360px)だけ移動 */
@keyframes scroll-loop-mobile {
    0% { transform: translateX(0); }
    100% { transform: translateX(-1360px); }
}

/* style.css の一番下 */

@media (max-width: 768px) {
    .slider-box {
        flex-direction: column;
        padding: 20px 10px;
    }
    .slider-info {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #eee;
        padding-right: 0;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
    .slider-arrow { display: none; }
    
    /* ▼▼▼ ここを追加してください ▼▼▼ */
    .slider-wrapper {
        width: 100%; /* 横幅を親要素(白い箱)に合わせる */
    }
    /* ▲▲▲ 追加ここまで ▲▲▲ */

    .slide-item {
        width: 150px;
        height: 100px;
        padding: 0;
    }
    .slide-item img {
        max-width: 90%;
        max-height: 90%;
        object-fit: contain;
    }
}

/* =========================================
   フッター
   ========================================= */
footer {
    background: #000;
    color: #888;
    padding: 40px 20px;
    text-align: center;
    font-size: 0.8rem;
}

.footer-links {
    margin-bottom: 20px;
}

.footer-links a {
    margin: 0 10px;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #fff;
}