@charset "utf-8";
/*
 * メニィーナSP ND 専用スタイル（page-nd.php でのみ読み込み）
 * 配色・文言は「メニィーナNDリーフレット」に準拠。
 * サイト全体は width:970px 固定・Bootstrap3 の .container を使用。
 */

.nd {
    color: #1c1c1c;
    font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

.nd .nd-mincho,
.nd h2.nd-title,
.nd h3.nd-lead {
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
}

/*
 * 見出し・本文のフォントサイズは #contents h2 / #contents h3 / #contents p
 * （ID セレクタ）に負けるため、セレクタを #contents から始めて詳細度で上回る。
 */
#contents .nd h2.nd-title {
    margin: 0 0 34px;
    padding: 0 !important;
    color: #0d1a33 !important;
    font-size: 27px !important;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    letter-spacing: 0.12em;
}

.nd h2.nd-title::after {
    content: "";
    display: block;
    width: 48px;
    height: 2px;
    margin: 18px auto 0;
    background: #18a5b6;
}

/* 製品情報セクション内の第2見出し（ラインナップ） */
#contents .nd h2.nd-title--lineup {
    margin: 72px 0 20px;
}

.nd-price {
    margin: 0 0 6px !important;
    color: #33383f;
    font-size: 17px !important;
    text-align: left;
    letter-spacing: 0.06em;
}

.nd .nd-section {
    padding: 62px 0 66px;
}

.nd .nd-section--beige {
    background: #f5f2eb;
}

/* ---------- 1. ファーストビュー ---------- */

.nd-hero {
    position: relative;
    height: 440px;
    min-width: 970px;
    background: #03060f url(../images/nd/hero-night.jpg) center 38% no-repeat;
    background-size: cover;
}

.nd-hero__scrim {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(3, 7, 18, 0.55) 0%, rgba(3, 7, 18, 0.12) 42%, rgba(3, 7, 18, 0.62) 100%);
}

.nd-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.nd-hero__logo {
    display: block;
    width: 463px;
    height: auto;
}

.nd-hero__lead {
    margin-top: 26px !important;
    color: #fff;
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
    font-size: 17px !important;
    letter-spacing: 0.42em;
    /* letter-spacing が末尾にも入るぶんを相殺して光学的に中央へ */
    text-indent: 0.42em;
    /* 背後の光跡が明るいため、白文字を沈ませない */
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85), 0 0 3px rgba(0, 0, 0, 0.7);
}

/* ---------- 2. 夜間運転でこのようなお悩みはありませんか？ ---------- */

.nd-worry__list {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nd-worry__item {
    width: 296px;
    padding: 30px 20px 26px;
    border: 1px solid #e2dccf;
    border-radius: 3px;
    background: #fff;
    text-align: center;
}

.nd-worry__icon {
    display: block;
    width: 62px;
    height: 62px;
    margin: 0 auto 16px;
    color: #0f7f8c;
}

.nd-worry__text {
    font-size: 16px !important;
    font-weight: bold;
    line-height: 1.75;
}

/* ---------- 3. メニィーナSP NDの特長 ---------- */

.nd-features__list {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nd-feature {
    position: relative;
    overflow: hidden;
    width: 465px;
    padding: 32px 34px 36px;
    border-radius: 2px;
    background: linear-gradient(100deg, #0b3a68 0%, #001233 100%);
    color: #fff;
}

.nd-feature__glow {
    position: absolute;
    top: -46px;
    right: -52px;
    width: 230px;
    height: 230px;
    opacity: 0.45;
    pointer-events: none;
}

.nd-feature__num {
    position: relative;
    display: block;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    color: rgba(255, 255, 255, 0.5);
    font-family: "Times New Roman", "Hiragino Mincho ProN", serif;
    font-size: 42px;
    line-height: 1;
    letter-spacing: 0.06em;
}

.nd-feature__title {
    position: relative;
    margin: 0 0 14px;
    font-size: 19px !important;
    font-weight: bold;
    line-height: 1.6;
}

.nd-feature__desc {
    position: relative;
    color: rgba(255, 255, 255, 0.88);
    font-size: 15px !important;
    line-height: 1.85;
}

/* ---------- 4. 効果をグラフで紹介 ---------- */

.nd-graph__grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nd-graph__text {
    width: 400px;
}

#contents .nd-graph h3.nd-lead {
    margin: 0 0 22px !important;
    padding-left: 16px;
    border-left: 4px solid #12294d;
    color: #0d1a33 !important;
    font-size: 23px !important;
    font-weight: bold;
    line-height: 1.6;
}

.nd-graph__method-title {
    margin: 0 0 8px !important;
    font-size: 16px !important;
    font-weight: bold;
}

.nd-graph__method {
    font-size: 15px !important;
    line-height: 1.9;
}

.nd-graph__figure {
    width: 520px;
    margin: 0;
    padding: 14px 16px;
    border-radius: 2px;
    background: #eae9e6;
}

.nd-graph__figure img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- 5. 見え方比較 ---------- */

.nd-compare__row {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nd-compare__col {
    width: 430px;
}

.nd-compare__label {
    padding: 9px 0;
    color: #fff;
    font-size: 17px !important;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.06em;
}

.nd-compare__col img {
    display: block;
    width: 100%;
    height: auto;
    border-style: solid;
    border-width: 0 8px 8px;
}

.nd-compare__col--clear .nd-compare__label,
.nd-compare__col--clear img {
    background: #2fa8b4;
    border-color: #2fa8b4;
}

.nd-compare__col--nd .nd-compare__label,
.nd-compare__col--nd img {
    background: #0c2340;
    border-color: #0c2340;
}

.nd-compare__arrow {
    width: 40px;
    flex: 0 0 40px;
    text-align: center;
    color: #12294d;
    font-size: 26px;
    line-height: 1;
}

.nd-compare__caption {
    margin-top: 22px !important;
    color: #33383f;
    font-size: 17px !important;
    text-align: center;
    letter-spacing: 0.06em;
}

/* ---------- 6. 製品情報 ---------- */

#contents .nd-product h3.nd-lead {
    margin: 0 0 40px !important;
    color: #0d1a33 !important;
    font-size: 26px !important;
    font-weight: normal;
    line-height: 1.7;
    text-align: center;
    letter-spacing: 0.06em;
}

.nd-lens {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 34px;
}

.nd-lens__body {
    width: 640px;
}

.nd-lens__figure {
    width: 240px;
    margin: 0;
    text-align: center;
}

.nd-lens__figure img {
    width: 186px;
    height: auto;
}

.nd-subtitle {
    margin: 0 0 14px;
    color: #0d1a33;
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
    font-size: 22px !important;
    letter-spacing: 0.08em;
}

.nd-lens__text {
    font-size: 16px !important;
    line-height: 1.95;
}

.nd-jis {
    margin-bottom: 52px;
    padding: 24px 28px;
    border: 1px solid #c9c3b5;
    background: #fbfaf7;
}

.nd-jis__title {
    margin: 0 0 10px !important;
    color: #0d1a33;
    font-size: 18px !important;
    font-weight: bold;
    letter-spacing: 0.04em;
}

.nd-jis__text {
    font-size: 15px !important;
    line-height: 1.9;
}

.nd-frame__list {
    display: flex;
    justify-content: space-between;
    margin: 0 0 56px;
    padding: 0;
    list-style: none;
}

.nd-frame__panel {
    display: flex;
    width: 465px;
    padding: 26px;
    border-radius: 2px;
    background: linear-gradient(135deg, #123a63 0%, #04173a 100%);
    color: #fff;
}

.nd-frame__body {
    width: 196px;
    margin-right: 20px;
    flex: 0 0 196px;
}

.nd-frame__title {
    margin: 0 0 12px;
    font-size: 17px !important;
    font-weight: bold;
    line-height: 1.6;
}

.nd-frame__text {
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px !important;
    line-height: 1.85;
}

.nd-frame__figure {
    margin: 0;
    align-self: center;
}

.nd-frame__figure img {
    display: block;
    width: 100%;
    height: auto;
}

/* ND01 / ND02 スペック — 既存 .product 系スタイルを流用 */
.nd .nd01_ttl h2,
.nd .nd02_ttl h2 {
    margin: 0;
    padding-left: 0 !important;
    padding-bottom: 2px !important;
    color: #fff !important;
}

.nd .nd01_ttl p,
.nd .nd02_ttl p {
    color: #fff;
    font-size: 15px !important;
}

.nd .nd01 .product_box h3 {
    color: #001c55 !important;
}

.nd .nd02 .product_box h3 {
    color: #ab66d9 !important;
}

.nd .product_sumne_nd li {
    margin-right: 10px;
}

.nd .product_sumne_nd a {
    display: block;
    border: 2px solid transparent;
}

.nd .product_sumne_nd a.is-active {
    border-color: #12294d;
}

.nd .product_box > p:last-child {
    margin-top: 14px;
    font-size: 15px !important;
    line-height: 1.8;
}

/* ---------- 7. よくある質問（アコーディオン） ---------- */

.nd-faq__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nd-faq__item {
    margin-bottom: 12px;
    border: 1px solid #e2dccf;
    background: #fff;
}

.nd-faq__q {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 20px 58px 20px 60px;
    border: 0;
    background: none;
    color: #12294d;
    font-size: 17px;
    font-weight: bold;
    line-height: 1.65;
    text-align: left;
    cursor: pointer;
}

.nd-faq__q::before {
    content: "Q";
    position: absolute;
    top: 15px;
    left: 24px;
    color: #2b4a7d;
    font-family: "Times New Roman", serif;
    font-size: 28px;
    font-weight: normal;
    line-height: 1;
}

.nd-faq__q::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 26px;
    width: 10px;
    height: 10px;
    margin-top: -8px;
    border-right: 2px solid #2b4a7d;
    border-bottom: 2px solid #2b4a7d;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.nd-faq__item.is-open .nd-faq__q::after {
    margin-top: -2px;
    transform: rotate(-135deg);
}

.nd-faq__a {
    position: relative;
    padding: 0 26px 24px 60px;
    font-size: 16px !important;
    line-height: 1.95;
}

.nd-faq__a::before {
    content: "A";
    position: absolute;
    top: -4px;
    left: 26px;
    color: #a9a49a;
    font-family: "Times New Roman", serif;
    font-size: 26px;
    line-height: 1;
}

/* JS が有効なときだけ折りたたむ（無効時は全文表示） */
.nd-faq__list.nd-js .nd-faq__a {
    display: none;
}

.nd-faq__list.nd-js .nd-faq__item.is-open .nd-faq__a {
    display: block;
}