/* ------------------------------------ */
/* 1. リセットと基本設定 (黒基調へ変更) */
/* ------------------------------------ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}

header, section {
    margin-top: 0;
    margin-bottom: 0;
}

body {
    /* 2枚の画像をカンマ区切りで指定（先に書いたほうが手前に来ます） */
    background-image: 
        url('wallpaper_left.jpg'),  /* 左側に置きたい画像 */
        url('wallpaper_right.jpg'); /* 右側に置きたい画像 */

    /* それぞれの画像の位置を指定 */
    background-position: 
        left top,   /* 1枚目は左上 */
        right top;  /* 2枚目は右上 */

    /* 画像の繰り返し設定 */
    background-repeat: 
        no-repeat, 
        no-repeat;

    /* コンテンツを邪魔しないサイズ感に調整 */
    /* 画面幅の30%程度にすると中央が空きやすいです */
    background-size: auto 100%;

    /* スクロールしても背景を固定したい場合 */
    background-attachment: fixed;
    
    /* 背景色（画像がない部分や読み込み中の色） */
    background-color: #000000;
}

/* リンクの装飾をリセット */
a {
    color: inherit;
    text-decoration: none;
}

/* 汎用的なコンテナ */
.container {
    /* 幅をスマホ縦表示の一般的なサイズに固定 */
    margin: 0 auto; 
    padding: 0; /* スマホでは左右の余白を少し減らします */
}

img {
    max-width: 100%;
    height: auto;
    display: block; /* 画像がインライン要素として持つ余計なスペースを防ぐ */
}

/* ------------------------------------ */
/* 2. 固定のお問い合わせボタン (シンプルな右上に再配置) */
/* ------------------------------------ */
.fixed-contact-button {
    /* 画面全体に固定 */
    position: fixed; 
    top: 20px; 
    z-index: 1000; 
    left: auto; /* 左の設定を無効に保つ */
}

.fixed-contact-button a {
    /* display: inline-block; とその他のスタイルはそのまま */
    display: flex; 
    align-items: center; /* ★追加 */
    background-color: #535353; 
    color: #ffffff; 
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 12px;
    transition: background-color 0.3s;
}

.fixed-contact-button a:hover {
    background-color: #f1f1f1;
    color: #000000;
}

.fixed-contact-button a .contact-icon {
    /* ★アイコン画像のサイズとマージンを設定 */
    width: 18px; /* アイコンの幅 (調整してください) */
    height: 18px; /* アイコンの高さ (調整してください) */
    margin-right: 8px; /* アイコンとテキストの間にスペースを空ける */
    
    /* 画像がベースラインでずれないように */
    vertical-align: middle; 
}
/* ------------------------------------ */
/* 2. ヘッダー/ナビゲーション */
/* ------------------------------------ */

.main-header {
    position: absolute;   /* ★ヘッダーを浮かせる */
    top: 0;
    left: 0;
    width: 100%;          /* 横幅いっぱい */
    z-index: 100;         /* 画像より手前に表示 */
    background: transparent; /* ★背景を透明にする（必要に応じて） */
}

.main-header .container {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 30px 30px; 
}

.logo {
    font-size: 14px; /* 少し小さく */
    font-weight: 200; /* ロゴは少し太めに */
    color: #ffffff; 
}

/* ナビゲーションを右端から少し離す */
.main-nav {
    /* お問い合わせボタンの配置 (right: 50%; margin-right: -187.5px) より左側に配置するため、
       コンテナの右端から適切なオフセットを設定します。 */
    margin-right: 160px; /* ボタンの幅と余白を考慮した値 */
}

.main-nav ul {
    list-style: none;
    display: flex; 
}

.main-nav li {
    margin-left: 12px; /* 項目間のスペースを微調整 */
}

.main-nav a {
    color: #ffffff;
    font-size: 16px;
    opacity: 0.7; 
    font-weight: 300; 
    /* 下線のアニメーションのためにtransitionを追加 */
    transition: all 0.3s ease; 
    padding-bottom: 2px; /* 下線と文字の間に少し隙間を空ける */
}

/* ★ 選択中のページ（.active）のスタイル */
.main-nav a.active {
    opacity: 1; /* 濃く表示 */
    font-weight: 700; /* 太字 */
    text-decoration: underline; /* 下線を引く */
    text-underline-offset: 4px; /* 下線と文字の間に少しスペースを空ける */
    
    /* ホバー時の装飾を上書き */
    border-bottom: none; 
}

/* ホバー時のスタイルもアクティブでないリンクにのみ適用 */
.main-nav a:not(.active):hover {
    opacity: 1; 
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ★区切り線（|）のスタイルを設定 */
.main-nav .separator {
    color: #ffffff; /* 白い文字色 */
    font-size: 16px; 
    /* 区切り線がリンクと縦に揃うように調整 */
    line-height: 28px; 
    margin: 1 1px; /* 左右に少しスペースを確保 */
    opacity: 0.7;
}

/* ------------------------------------ */
/* 3. ヒーローセクション (XDのレイアウトを再現) */
/* ------------------------------------ */
.hero-section {
    /* 画面いっぱいの高さを確保 (XDのファーストビューの縦長な雰囲気を再現) */
    min-height: 90vh;
    padding-top: 0; 
    margin-top: 0;
    display: flex;
    align-items: center; /* 垂直方向の中央揃え */
    flex-direction: column;
    justify-content: center;
    background-color: transparent !important;
}

.hero-section .container {
    /* 1. コンテナの左右パディングを強制的にゼロにする */
    padding-left: 0 !important;
    padding-right: 0 !important;
    
    /* 2. PCなどでコンテナ自体を中央に寄せる */
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* 3. 中の要素を中央に配置する */
    display: flex;
    flex-direction: column;
    align-items: center; /* 左右中央 */

    background-color: transparent !important;
}

.hero-content{
    max-width: 100%; /* 幅を100%にする */
    margin-bottom: 30px;
    text-align: left;
}

.hero-content h1 {
    font-size: 24px; 
    font-weight: 700;
    color: #ffffff;
    /* ★ 上部のマージンをゼロに設定 */
    margin-top: 0; 
    margin-bottom: 20px; 
    line-height: 1.3;
}

.hero-content p {
    font-size: 16px;
    margin-bottom: 40px;
}

/* リンクになっている画像の設定 */
.hero-section a {
    display: inline-block; /* 画像のサイズに合わせる */
    line-height: 0;        /* 下側に変な隙間が出るのを防ぐ */
    text-decoration: none; /* 枠線を消す */
}

.hero-section a img {
    transition: opacity 0.3s ease; /* ホバー時にふわっとさせる */
    cursor: pointer;               /* マウスを乗せると指マークにする */
}

/* マウスを乗せた時に少し薄くして「押せる」ことを伝える */
.hero-section a:hover img {
    opacity: 1;
}

/* CTAボタン */
.cta-button {
    display: inline-block;
    /* ボタンもXDのデザインに合わせて黒と白のコントラストを出す */
    background-color: #ffffff; /* 白い背景 */
    color: #000000; /* 黒い文字 */
    padding: 14px 28px; /* ボタンを少しコンパクトに */
    border-radius: 50px; /* 角を丸くしてモダンなデザインに */
    font-weight: bold;
    font-size: 16px;
    transition: all 0.3s;
}

.cta-button:hover {
    background-color: #f1f1f1; 
    opacity: 0.9;
}

/* ヒーローセクションのロゴのスタイル */
.hero-logo {
    /* pタグを囲むdivも左寄せ */
    text-align: left; 
}
.hero-logo p {
    font-size: 14px;
    color: #cccccc; 
    font-weight: 400;
    margin-bottom: 40px; 
}
/* (太字)タイヤ点検DX ｜ タイヤプロファイラー */
.main-title {
    margin-bottom: 5px; 
    font-size: 20px; /* 親のサイズを設定 */
}

.bold-text {
    font-weight: 700;
}

.small-text {
    font-size: 14px; 
    font-weight: 300;
}

.separator-line {
    opacity: 0.5;
    margin: 0 5px;
}

/* (通常フォント)AIを活用した革新的なタイヤ撮影・測定装置 */
.hero-sub-text {
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 30px;
}

/* (太字)簡単操作... (太字)瞬時に... */
.hero-key-features .key-feature {
    font-size: 18px;
    line-height: 1.5;
}
.hero-key-features {
    margin-bottom: 30px;
}

/* ヒーローセクションの画像 */
.hero-image {
    width: 100%;
    margin-bottom: 40px;
}

/* (フォント小さく・グレー) 活用事例を見る */
.link-group {
    margin-bottom: 60px;
}

a.small-gray-link {
    display: block;
    font-size: 14px;
    color: #aaaaaa; /* グレー */
    margin-bottom: 8px;
    transition: color 0.2s;
}

a.small-gray-link:hover {
    color: #ffffff;
}

.hero-design-image {
    /* 4. 画像を囲む枠をコンテナ幅いっぱいに */
    width: 100%;
    text-align: center; /* 万が一のための保険 */
    position: relative;
    z-index: 1; /* ヘッダーの100より低い値にする */
}

.hero-design-image img {
    /* 5. 画像が幅100%になるように強制 */
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    display: block;
}
.hero-design-image a {
    display: block;
}
/* ------------------------------------ */
/* 4. その他のセクション (黒基調の共通スタイル) */
/* ------------------------------------ */
/* 画像（画像２、３など） */
.image-full-width, .image-row {
    width: 100%;
    margin: 40px 0;
}
.image-full-width img, .image-row img {
    width: 100%;
    height: auto;
}

/* AI解析の強みテキスト */
.ai-strength-text {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 60px;
    color: #cccccc;
}

/* 手作業での点検業務を大幅に効率化... */
.value-text {
    font-size: 16px;
    line-height: 1.6;
    margin: 30px 0 60px 0;
}

/* (右揃え・フォント小さく) ※当社比較のデータです、図はイメージです。 */
.caption-right {
    text-align: right;
    margin-top: -30px; /* 画像と重ねるため */
    margin-bottom: 40px;
}
.small-text-gray {
    font-size: 12px;
    color: #aaaaaa;
}
.image-full-width img, .image-row img {
    /* この設定もmax-width: 100%に置き換えるか、上記imgセレクタで統一する */
    width: 100%;
    height: auto;
}
/* ------------------------------------ */
/* 6. 活用事例セクション */
/* ------------------------------------ */
.usecases-section .container {
    padding: 80px 20px; /* 上下のパディングを再調整 */
}

/* (大きく)活用事例 */
.large-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 30px;
    margin-top: 30px;
    text-align: left;
}

/* 各事例のタイトル */
.usecase-title {
    font-size: 20px;
    font-weight: 700;
    margin: 30px 0 20px 0;
    text-align: left;
}

/* 事例アイテム */
.usecase-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
}

.checkbox-icon {
    width: 24px; /* チェックボックス画像のサイズ */
    height: 24px;
    margin-right: 15px;
    margin-top: 5px; /* テキストとの高さ調整 */
}

.usecase-description {
    font-size: 18px;
    margin-bottom: 5px;
    line-height: 1.4;
}

.usecase-sub-description {
    font-size: 14px;
    color: #cccccc;
}

/* ------------------------------------ */
/* 区切り線（セクション間） */
/* ------------------------------------ */

/* ------------------------------------ */
/* ヒーローセクション/フッター以外のセクションのコンテナにボーダーを追加 */
/* ------------------------------------ */
/* ★新規追加: コンテナの下部にボーダーを設定し、横幅を375pxに制限 */
.features-section .container,
.value-section .container,
.usecases-section .container:not(:last-child) { /* 最後のセクションのコンテナは除く */
    border-bottom: 1px solid #333333;
}

/* ------------------------------------ */
/* 5. フッター */
/* ------------------------------------ */
.main-footer {
    color: #cccccc;
    text-align: center;
    padding: 0;
    font-size: 16px;
    width: 100%;             /* ブラウザの横幅いっぱいに広げる（背景色用） */
}

.main-footer .container {
    /* ここに PC用の最大幅と中央寄せを明示する */
    max-width: 960px;        /* PC時の最大幅 */
    margin: 0 auto;          /* 左右の余白を自動にして中央へ */
    padding: 30px 20px;
    
    /* 中の文字も中央に寄せたい場合 */
    text-align: center;

    background-color: #000000;
}

/* ★フッターリンクのスタイル */
.footer-links {
    display: flex;            /* 横並びにする */
    justify-content: center;  /* 中央に寄せる */
    gap: 20px;                /* リンク同士の間の隙間 */
    margin-bottom: 20px;      /* 下のコピーライトとの隙間 */
}

.footer-links a {
    display: inline-flex;    /* 文字とアイコンを並列にする */
    align-items: center;     /* 上下中央を揃える */
    color: #cccccc;
    font-size: 14px;
    text-decoration: none;
}

/* ★外部リンクアイコンの調整 */
.footer-links .ext-icon {
    width: 12px;             /* アイコンのサイズ（文字より少し小さめが綺麗です） */
    height: 12px;
    margin-left: 4px;        /* 文字との間の隙間 */
    opacity: 0.7;            /* 少し薄くして主張を抑える（お好みで） */
}

.footer-links a:hover .ext-icon {
    opacity: 1;              /* ホバー時にアイコンも明るくする */
}

.footer-links a:hover {
    color: #ffffff;           /* ホバー時に白くする */
    text-decoration: underline;
}

/* ------------------------------------ */
/* 5. YouTube動画セクション */
/* ------------------------------------ */
.video-section {
    padding: 60px 0; /* 上下の余白 */
    background-color: #000000; /* 背景色 */
    max-width: 960px;        /* PC時の最大幅 */
    margin: 0 auto;          /* 左右の余白を自動にして中央へ */
}

/* 動画をレスポンシブにするための枠 */
.video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 の比率を維持する計算 (9 / 16 = 0.5625) */
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}
/* ------------------------------------ */
/* フッター前画像セクション（他のエリアと同じ設定） */
/* ------------------------------------ */
.footer-before-section {
    width: 100%;
    background-color: transparent; /* ★背景を透明にして壁紙を見せる */
    padding: 0;                   /* 上下の余白はお好みで（0なら画像が繋がる） */
}

.footer-before-section .container {
    max-width: 960px;
    margin: 0 auto;
    background-color: #000000;    /* ★中央だけ黒く塗りつぶす */
    line-height: 0;               /* 画像下の隙間防止 */
    display: block;
}

.footer-bottom-img {
    display: block;
    width: 100%;      /* 親要素（container）の幅いっぱいに広げる */
    max-width: 100%;  /* コンテナを絶対に突き破らない */
    height: auto;     /* 縦横比を維持する */
}

/* ==================================== */
/* 7. レスポンシブデザインの定義 */
/* ==================================== */

/* ------------------------------------ */
/* A. PC/タブレット環境 (ブレイクポイント: 769px以上) */
/* ------------------------------------ */
@media (min-width: 769px) { 
    
    /* 1. コンテンツの最大幅と中央揃え */
    .container {
        width: 100%; /* 親要素の幅を使う */
        max-width: 960px; /* ★ PCで表示したい最大幅 */
        padding: 0 20px;
    }

    /* 2. PC専用の背景画像を表示 */
    .hero-section {
        background-size: cover; 
    }

    /* 3. 固定ボタンをコンテンツの右端に合わせる（再計算） */
    .fixed-contact-button {
        right: 50%; /* 画面中央に配置 */
        margin-right: -480px; /* 最大幅の半分 (960px / 2 = 480px) だけ右へ */
        transform: translateX(-20px); /* containerのpadding分を内側へ */
    }
}
/* ------------------------------------ */
/* B. スマホ環境 (ブレイクポイント: 768px以下) */
/* ------------------------------------ */
@media (max-width: 768px) {
    
    /* 1. スマホでは幅を画面いっぱいに */
    .container {
        width: 100%; 
        max-width: none;
        padding: 0 15px; /* 画面端に少し余白 */
    }

    /* 2. スマホではPC用の背景画像を非表示 */
    .hero-section {
        background-image: none;
    }
    
    /* 3. 固定ボタンを画面の右端に固定 */
    .fixed-contact-button {
        right: 15px; /* containerのpaddingと合わせる */
        margin-right: 0; 
        transform: none;
    }

    /* 4. スマホでの文字サイズの調整 */
    .hero-content h1 {
        font-size: 32px;
    }
}
/* ------------------------------------ */
/* リンク集セクション（下線なし・淡い青・区切り線あり） */
/* ------------------------------------ */
.links-section {
    background-color: #ffffff;
    color: #333333;
    padding: 0px 0; /* 上下の余白をさらにタイトに */
    width: 100%;
}

.links-section .container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 0px; /* 左側にしっかりスペースを確保 */
    box-sizing: border-box;
}

.links-section .section-title {
    text-align: left;
    color: #111;
    margin-bottom: 25px;
    font-size: 1.4rem;
}

/* リスト全体のスタイル */
.link-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* リンク項目のスタイル（区切り線の設定） */
.link-list li {
    padding: 15px 0;          /* 区切り線の内側に余白を作る */
    border-bottom: 1px solid #eeeeee; /* ★薄いグレーの区切り線 */
}

/* 最後の項目の下線だけ消す（見た目が綺麗になります） */
.link-list li:last-child {
    border-bottom: none;
}

/* リンクのデザイン */
.link-list a {
    color: #4a7eba;           /* ★淡く落ち着いた青色 */
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;    /* ★下線を消す */
    transition: color 0.2s ease;
    display: inline-block; /* 余白を有効にするために必要 */
    margin-left: 20px;     /* ★左側に20pxの空き（インデント）を作る */
    margin-bottom: 5px;    /* 説明文との縦の間隔を少し空ける */
}

.link-list a:hover {
    color: #2a5e9a;           /* ホバー時に少しだけ濃く */
    text-decoration: underline; /* ホバーした時だけ下線を出す（親切設計） */
}

/* 説明文のデザイン */
.link-list p {
    margin: 5px 0 0 0;
    color: #777;              /* 説明文も少し淡い色に */
    font-size: 0.9rem;
    line-height: 1.5;
}

/* 外部リンクアイコンの色調整（淡い青に合わせる） */
.links-section .ext-icon-css::after {
    color: #4a7eba;
    font-size: 0.8em;
    margin-left: 6px;
}