@charset "UTF-8";


/* コーティングページ */
.coating-bg{
    background-color: #ffffff;
    background-image: radial-gradient(circle, #06b6d4 25px, transparent 25px), radial-gradient(circle, #f59e0b 25px, transparent 25px);
    background-position: 0 0, 100px 200px;
    background-size: 200px 400px;
}
.coating-top-text{
    font-weight: 700;
    padding: 30px;
    line-height: 3;
}
.short-bar{
    width: 750px;
    text-align: right;
    padding-right: 30px;
}
.coating-top{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.coating-top img{
    max-width: 250px;
}
.coating-menu{
    width: 100%;
    text-align: center;
    margin-top: 80px;
}
.coating-menu img{
    width: 30%;
    border-radius: 10px;
}
.coating-menu a:hover{
    opacity: 0.5;
}

#quartz-coating,
#keeper-coating,
#option{
    margin-top: 80px;
    background-color: #333;
    color: #ffffff;
    padding-bottom: 20px;

}
#quartz-coating .quartz-flex img,
#keeper-coating .keeper-flex img,
#option .option-flex img{
    max-width: 400px;
    margin: 40px;
}
.quartz-flex,
.keeper-flex,
.option-flex{
    display: flex;
    align-items: center;
}
h5{
    font-size: 2rem;
    background-color: rgb(141,200,217,0.8);
    padding: 10px;

}
.quartz-text,
.keeper-text,
.option-text{
    line-height: 2.5;
    margin-left: 40px;
    color: #FFF;
    margin-block: 30px;
}

/* セクション全体の余白 */
.features {
    margin: 0 auto;
    padding: 10px 20px 40px 20px;
    background-color: #333;
}

/* 2カラムのグリッド設定 */
.feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 横に2つ並べる */
    gap: 20px; /* パネル同士の隙間 */
}

/* 各カードのスタイル */
.feature-card {
    display: flex; /* テキストと画像を横に並べる */
    background-color: #000000; /* 黒系の背景色 */
    color: #fff;
    overflow: hidden;
    height: 350px;
}

/* テキスト部分 */
.feature-text {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.feature-text h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    border-bottom: 2px solid #fff; /* 見出し下の線（任意） */
    display: inline-block;
    width: fit-content;
}

.feature-text p {
    font-size: 0.9rem;
    line-height: 1.6;
}

/* 画像部分 */
.feature-image {
    flex: 1;
    position: relative;
    min-height: 200px;
}

.feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像を枠いっぱいに収める */
    display: block;
}

/* 右下の番号 */
.number {
    position: absolute;
    bottom: 10px;
    right: 15px;
    font-size: 2rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
}

/* スマホ対応：1カラムにする */
@media (max-width: 768px) {
    .feature-grid {
        grid-template-columns: 1fr;
    }
    
    .feature-card {
        flex-direction: column; /* スマホでは縦に並べる */
    }
}


.keeper{
    color: #fff;
}

/*-------キーパーコーティング表--------*/

/* 親要素：flex-wrap: wrap で折り返しを有効化 */
.keeper-comparison-section {
    display: flex;
    flex-wrap: wrap; 
    gap: 20px;
    max-width: 1100px;
    margin: 40px auto;
    font-family: "Helvetica Neue", Arial, sans-serif;
    box-sizing: border-box;
}

  .keeper-comparison-section * {
    box-sizing: border-box;
    }

  /* カード：PCでは2列並び（幅を約半分に） */
    .keeper-comparison-section .keeper-card {
    flex: 0 0 calc(50% - 10px);
    border: 1px solid #eeeeee;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    }

/* ロゴ */
    .keeper-comparison-section .logo-area {
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    }
.keeper-comparison-section .logo-area img {
    max-width: 200px;
    height: auto;
    }

  /* 各メニューのテーマカラー */
    .keeper-comparison-section .title-label { color: #fff; text-align: center; padding: 12px; font-weight: bold; }
    .keeper-comparison-section .crystal-box .title-label { background-color: #0099cc; }
    .keeper-comparison-section .diamond-box .title-label { background-color: #b8a05e; }
    .keeper-comparison-section .ex-box .title-label { background-color: #002d62; }
    .keeper-comparison-section .eco-box .title-label { background-color: #24a148; }

  /* テキストエリア：高さを揃えるための min-height */
    .keeper-comparison-section .body-area { text-align: center; padding-top: 20px; flex-grow: 1; }

    .keeper-comparison-section .catch-text { font-weight: bold; font-size: 1.1rem; margin-bottom: 5px; }
    .keeper-comparison-section .blue-text { color: #0099cc; }
    .keeper-comparison-section .gold-text { color: #b8a05e; }
    .keeper-comparison-section .navy-text { color: #002d62; }
    .keeper-comparison-section .green-text { color: #24a148; }

    .keeper-comparison-section .desc-text {
    padding: 0 15px;
    min-height: 3.5em; 
    color: #333;
    }
    strong{
        color: #a62b2b;
    }

    /* 画像 */
    .keeper-comparison-section .car-visual img { width: 100%; display: block; }

  /* スペック表 dl/dt/dd */
    .keeper-comparison-section dl.spec-list { margin: 0; padding: 15px; }
    .keeper-comparison-section dl.crystal-bg { background-color: #5bb3d1; }
    .keeper-comparison-section dl.diamond-bg { background-color: #c4b07a; }
    .keeper-comparison-section dl.ex-bg { background-color: #1a3a5a; }
    .keeper-comparison-section dl.eco-bg { background-color: #3cb371; }

    .keeper-comparison-section .spec-item { display: flex; margin-bottom: 2px; }

    .keeper-comparison-section dt {
    margin: 0; width: 100px; color: #fff; font-size: 0.75rem; padding: 8px; text-align: left;
    background-color: rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .keeper-comparison-section dd {
    margin: 0 0 0 2px; flex: 1; color: #fff; font-size: 0.85rem; font-weight: bold; padding: 8px; text-align: left;
    background-color: rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* スマホ対応：1列に切り替え */
@media (max-width: 768px) {
    .keeper-comparison-section .keeper-card {
        flex: 0 0 100%;
    }
}


/* オプションの表 */


/* 親要素：横幅いっぱいに使う設定 */
.option-menu-section {
    display: flex;
    flex-direction: column; /* 縦に1つずつ並べる */
    gap: 30px; /* カード同士の上下の隙間 */
    max-width: 1200px; /* サイトの最大幅に合わせて調整してください */
    margin: 40px auto;
    font-family: sans-serif;
    box-sizing: border-box;
}

/* .option-menu-section * {
    box-sizing: border-box;
} */

  /* カード：横幅100%に広げる */
.option-menu-section .menu-card {
    width: 90%;
    margin: 0 auto;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    background: #fff;
}

  /* ヘッダー */
.option-menu-section .menu-header {
    background-color: #000;
    color: #fff;
    padding: 12px 20px;
    font-weight: bold;
    font-size: 1.2rem;
}

/* ボディ部分：PCでは横並びにしたい場合はここを調整しますが、
    元のサイトのように縦に要素を並べる形式にします */
.option-menu-section .menu-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    }

/* 赤文字のキャッチコピー */
.option-menu-section .catch-text {
    color: #c00;
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 1.1rem;
    text-align: left;
}

  /* 説明文 */
.option-menu-section .description-text {
    font-size: 0.95rem;
    line-height: 1.7;
    text-align: left;
    margin-bottom: 25px;
    color: #333;
}

  /* 画像エリア：横いっぱい、または中央寄せ */
.option-menu-section .visual-area {
    display: flex;
    text-align: center;
    margin-bottom: 10px;
}

.option-menu-section .visual-area img {
    width: 100%; /* 横幅いっぱいに広げる */
    height: 150px;
    object-fit: cover;
}

/* スペック表 dl/dt/dd：これも横に長く使う */
.option-menu-section .spec-area {
    width: 100%;
}

.option-menu-section dl.spec-list {
    display: flex;
    border: 1px solid #ccc;
    margin: 0 0 -1px 0;
    color: #333;
}

.option-menu-section dt {
    width: 150px; /* 横幅に合わせて少し広くしました */
    background-color: #78c0fb;
    padding: 15px;
    font-size: 0.9rem;
    font-weight: bold;
    border-right: 1px solid #ccc;
    display: flex;
    align-items: center;
}

.option-menu-section dd {
    margin: 0;
    padding: 15px;
    font-size: 1rem;
    flex: 1;
    background-color: #fff;
    line-height: 1.5;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .option-menu-section dt {
      width: 100px; /* スマホではdtを少し狭く */
    font-size: 0.8rem;
    }
    .option-menu-section dd {
    font-size: 0.9rem;
    }

    /* 1. 背景ドットの密度を下げる（スマホだと目がチカチカするため） */
    .coating-bg {
        background-size: 100px 200px; /* サイズを半分にしてスッキリさせる */
    }

    /* 2. トップの導入文 */
    .short-bar {
        width: 100%; /* 750px固定を解除 */
        text-align: center;
        padding-right: 0;
        font-size: 1.2rem;
    }

    .coating-top {
        flex-direction: column; /* 画像とテキストを縦並び */
    }

    .coating-top-text {
        padding: 20px;
        line-height: 1.8; /* 3はスマホでは広すぎるので調整 */
        text-align: left;
        br { display: none; } /* PC用の改行を無効化 */
    }

    .coating-top img {
        max-width: 200px;
        margin-top: 20px;
    }

    /* 3. メニュー（3つの丸い画像） */
    .coating-menu img {
        width: 80%; /* 30%だと小さすぎるので1つずつ見せる */
        margin-bottom: 20px;
    }

    /* 4. セクション見出しとFlexエリア */
    .quartz-flex, .keeper-flex, .option-flex {
        flex-direction: column; /* 画像とテキストを縦に */
    }

    #quartz-coating .quartz-flex img, 
    #keeper-coating .keeper-flex img, 
    #option .option-flex img {
        max-width: 90%; /* 400px固定を解除 */
        margin: 20px auto;
    }

    .quartz-text, .keeper-text, .option-text {
        margin-left: 0; /* 左余白をリセット */
        padding: 0 20px;
        line-height: 1.8;
        font-size: 0.95rem;
    }

    /* 5. グリッドパネル (feature-card) */
    .feature-card {
        height: auto; /* 350px固定を解除して中身に合わせる */
    }
    
    .feature-text h3 {
        font-size: 1.2rem;
    }

    /* 6. オプションのスペック表 */
    .option-menu-section dl.spec-list {
        flex-direction: column; /* 項目名(dt)と内容(dd)を上下に */
    }

    .option-menu-section dt {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #ccc;
        padding: 8px 15px;
    }

    .option-menu-section .visual-area {
        flex-direction: column; /* 説明文と画像を縦に */
    }
    
    .option-menu-section .visual-area img {
        height: auto; /* 150px固定を解除 */
        margin-top: 15px;
    }
}