/* =========================================================
   /blackout/stalker
   カーテンレール光漏れ対策ページ 専用CSS
   最終統合版
   ========================================================= */


/* =========================================================
   基本設定
   ========================================================= */

#main .content-block,
#main .content-block * {
    box-sizing: border-box;
}#main .content-block img {
    max-width: 100%;
    height: auto;
}/* CMSがbrを自動挿入した場合の対策 */
#main .content-block .grid3 > br,
#main .content-block .points > br,
#main .content-block .btnrow > br,
#main .content-block .compare > br,
#main .content-block .twocol > br,
#main .content-block .steps > br,
#main .content-block .samples > br {
    display: none !important;
}/* =========================================================
   セクション共通
   ========================================================= */

#main .content-block section {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin:45px 0 !important;
    padding: 48px 0 0 !important;

    float: none !important;
    clear: both !important;
}/* 英字小見出し */
#main .content-block .kicker,
#main .content-block .rail-kicker {
    display: block !important;

    margin: 0 0 6px !important;
    padding: 0 !important;

    color: #31576a !important;

    font-size: 12px !important;
    font-weight: bold !important;
    line-height: 1.5 !important;

    letter-spacing: 0.12em !important;
}/* セクションh2 */
#main .content-block section > h2,
/* セクションh2 */
#main .content-block section > h1.as-h2,
#main .content-block h2.rail-section-title,
#main .content-block h1.as-h2.rail-section-title {
    display: block !important;

    clear: both !important;

    margin: 18px 0 18px !important;
    padding: 0 0 10px !important;

    background: none !important;

    border: none !important;
    border-bottom: 3px solid #31576a !important;
    border-radius: 0 !important;

    color: #27323a !important;

    font-size: 25px !important;
    font-weight: bold !important;
    line-height: 1.5 !important;
}/* =========================================================
   HERO
   カーテンレール光漏れ対策
   ========================================================= */

#main .content-block .hero {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 44px !important;
    padding: 32px 26px 34px !important;

    float: none !important;
    clear: both !important;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #edf4f7 65%,
            #f8f2ea 100%
        ) !important;

    border: 1px solid #dce5e9 !important;
    border-radius: 18px !important;

    box-sizing: border-box !important;
}/* CMSがbrを自動挿入した場合 */
#main .content-block .hero > br,
#main .content-block .hero .points > br,
#main .content-block .hero .btnrow > br {
    display: none !important;
}/* ---------------------------------------------------------
   小見出し
   --------------------------------------------------------- */

#main .content-block .hero .eyebrow {
    display: inline-block !important;

    width: auto !important;

    margin: 0 0 14px !important;
    padding: 6px 12px !important;

    background: #ffffff !important;

    border: 1px solid #d5e1e5 !important;
    border-radius: 999px !important;

    color: #31576a !important;

    font-size: 13px !important;
    font-weight: bold !important;
    line-height: 1.5 !important;
}/* ---------------------------------------------------------
   リード文
   --------------------------------------------------------- */

#main .content-block .hero .lead {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 20px !important;
    padding: 0 !important;

    float: none !important;

    color: #4f5d64 !important;

    font-size: 17px !important;
    font-weight: normal !important;
    line-height: 1.9 !important;

    text-align: left !important;
}/* =========================================================
   3つの特徴
   ========================================================= */

#main .content-block .hero .points {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 9px !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 20px 0 24px !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;

    box-sizing: border-box !important;
}#main .content-block .hero .points > div {
    display: block !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 12px 8px !important;

    float: none !important;

    background: #ffffff !important;

    border: 1px solid #dce5e9 !important;
    border-radius: 11px !important;

    color: #30434c !important;

    font-size: 13px !important;
    font-weight: bold !important;
    line-height: 1.6 !important;

    text-align: center !important;

    box-sizing: border-box !important;
}/* =========================================================
   CTAボタン
   ========================================================= */

#main .content-block .hero .btnrow {
    display: flex !important;

    flex-direction: row !important;
    flex-wrap: wrap !important;

    gap: 10px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;
}#main .content-block .hero .btnrow .btn {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: auto !important;

    margin: 0 !important;
    padding: 13px 18px !important;

    border-radius: 9px !important;

    font-size: 14px !important;
    font-weight: bold !important;
    line-height: 1.5 !important;

    text-decoration: none !important;

    box-sizing: border-box !important;
}/* メインボタン */
#main .content-block .hero .btnrow .btn.primary {
    background: #31576a !important;

    border: 1px solid #31576a !important;

    color: #ffffff !important;
}/* サブボタン */
#main .content-block .hero .btnrow .btn.secondary {
    background: #ffffff !important;

    border: 1px solid #bfcdd3 !important;

    color: #244759 !important;
}/* hover */
#main .content-block .hero .btnrow .btn:hover {
    opacity: 0.88 !important;
    text-decoration: none !important;
}


/* =========================================================
   スマートフォン
   ========================================================= */

@media screen and (max-width: 787px) {#main .content-block .hero {
        display: block !important;

        width: 94% !important;
        max-width: none !important;

        margin: 0 auto 34px !important;
        padding: 24px 16px 26px !important;

        float: none !important;
        clear: both !important;

        border-radius: 14px !important;
    }#main .content-block .hero .eyebrow {
        margin-bottom: 12px !important;

        font-size: 12px !important;
    }#main .content-block .hero .lead {
        width: 100% !important;

        margin-bottom: 18px !important;

        font-size: 16px !important;
        line-height: 1.8 !important;
    }/* 3ポイントはスマホでは縦並び */
    #main .content-block .hero .points {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 18px 0 20px !important;
        padding: 0 !important;
    }#main .content-block .hero .points > div {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 0 8px !important;
        padding: 11px 10px !important;

        float: none !important;
        clear: both !important;
    }#main .content-block .hero .points > div:last-child {
        margin-bottom: 0 !important;
    }/* ボタンも縦並び */
    #main .content-block .hero .btnrow {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }#main .content-block .hero .btnrow .btn {
        display: flex !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 9px !important;
        padding: 13px 12px !important;

        float: none !important;
        clear: both !important;
    }#main .content-block .hero .btnrow .btn:last-child {
        margin-bottom: 0 !important;
    }

}/* =========================================================
   リード文
   ========================================================= */

#main .content-block .intro {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 20px !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;

    color: #5d6970 !important;

    font-size: 15px !important;
    line-height: 1.9 !important;
}/* =========================================================
   3カード
   朝日・夜の光・遮光カーテンだけでは足りない
   ========================================================= */

#main .content-block .grid3 {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 13px !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 32px !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;
}/* カード */
#main .content-block .grid3 > .card {
    display: block !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 18px !important;

    float: none !important;
    clear: none !important;

    background: #ffffff !important;

    border: 1px solid #e1e7e9 !important;
    border-radius: 15px !important;

    box-shadow:
        0 8px 22px rgba(39, 66, 79, 0.05) !important;
}/* 1・2・3 */
#main .content-block .grid3 > .card > .num {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    height: 34px !important;

    margin: 0 0 10px !important;
    padding: 0 !important;

    float: none !important;

    background: #edf4f7 !important;

    border: none !important;
    border-radius: 50% !important;

    color: #31576a !important;

    font-size: 15px !important;
    font-weight: bold !important;
    line-height: 1 !important;
}/* カード内h3
   標準 #main h3 の装飾を完全解除 */
#main .content-block .grid3 > .card > h3 {
    display: block !important;

    clear: none !important;

    margin: 0 0 7px !important;
    padding: 0 !important;

    background: none !important;

    border: none !important;
    border-radius: 0 !important;

    color: #27323a !important;

    font-size: 18px !important;
    font-weight: bold !important;
    line-height: 1.5 !important;

    text-align: left !important;
}#main .content-block .grid3 > .card > h3::first-letter {
    border-left: none !important;
    padding-left: 0 !important;
}/* カード本文 */
#main .content-block .grid3 > .card > p {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #657078 !important;

    font-size: 14px !important;
    line-height: 1.8 !important;

    text-align: left !important;
}/* =========================================================
   光漏れ説明画像
   ========================================================= */

#main .content-block .rail-light-section {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 50px !important;
    padding: 48px 0 0 !important;

    float: none !important;
    clear: both !important;
}#main .content-block .rail-light-image {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 22px !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #ffffff !important;

    border: 1px solid #dce5e9 !important;
    border-radius: 16px !important;

    box-shadow:
        0 10px 26px rgba(39, 66, 79, 0.07) !important;
}#main .content-block .rail-light-image img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
}/* =========================================================
   光漏れ画像下説明
   ========================================================= */

#main .content-block .rail-light-copy {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 22px 22px 20px !important;

    background: #f7fafb !important;

    border: 1px solid #dce5e9 !important;
    border-radius: 16px !important;
}#main .content-block .rail-light-subtitle {
    display: block !important;

    margin: 0 0 10px !important;
    padding: 0 !important;

    background: none !important;
    border: none !important;

    color: #244759 !important;

    font-size: 20px !important;
    font-weight: bold !important;
    line-height: 1.5 !important;
}#main .content-block .rail-light-copy p {
    display: block !important;

    margin: 0 0 12px !important;
    padding: 0 !important;

    color: #5c686f !important;

    font-size: 15px !important;
    line-height: 1.9 !important;
}#main .content-block .rail-light-copy p:last-of-type {
    margin-bottom: 0 !important;
}#main .content-block .rail-light-emphasis {
    color: #31576a !important;
    font-weight: bold !important;
}#main .content-block .rail-light-note {
    display: block !important;

    margin: 18px 0 0 !important;
    padding: 15px 17px !important;

    background: #fff7eb !important;

    border: none !important;
    border-left: 5px solid #b88446 !important;
    border-radius: 0 12px 12px 0 !important;

    color: #5e5952 !important;

    font-size: 14px !important;
    line-height: 1.8 !important;
}/* =========================================================
   商品説明 2カラム
   ========================================================= */

#main .content-block .solution {
    display: grid !important;

    grid-template-columns:
        minmax(0, 0.9fr) minmax(0, 1.1fr) !important;

    gap: 18px !important;

    align-items: center !important;

    width: 100% !important;

    margin: 0 0 30px !important;
    padding: 0 !important;
}/* =========================================================
   写真カード
   ========================================================= */

#main .content-block .photo {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #ffffff !important;

    border: 1px solid #e1e7e9 !important;
    border-radius: 16px !important;
}#main .content-block .photo img {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}#main .content-block .photo .body {
    display: block !important;

    margin: 0 !important;
    padding: 16px !important;
}/* =========================================================
   商品タグ
   ========================================================= */

#main .content-block .tag {
    display: inline-block !important;

    margin: 0 5px 6px 0 !important;
    padding: 5px 10px !important;

    background: #edf4f7 !important;
    border-radius: 999px !important;

    color: #31576a !important;

    font-size: 12px !important;
    font-weight: bold !important;
}/* =========================================================
   注意書き
   ========================================================= */

#main .content-block .note {
    display: block !important;

    margin: 16px 0 0 !important;
    padding: 16px 18px !important;

    background: #fff7eb !important;

    border: none !important;
    border-left: 5px solid #b88446 !important;
    border-radius: 0 13px 13px 0 !important;

    color: #5f5a53 !important;

    font-size: 14px !important;
    line-height: 1.8 !important;
}/* =========================================================
   BEFORE / AFTER
   ========================================================= */

#main .content-block .compare {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 10px !important;

    width: 100% !important;

    margin: 0 0 30px !important;
    padding: 0 !important;
}#main .content-block .compare > .photo {
    min-width: 0 !important;
}#main .content-block .compare .body {
    padding: 12px !important;
}#main .content-block .compare strong {
    color: #27323a !important;
    font-size: 14px !important;
}#main .content-block .compare small {
    color: #617078 !important;

    font-size: 12px !important;
    line-height: 1.6 !important;
}/* =========================================================
   開発ストーリー
   ========================================================= */

#main .content-block .story {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 23px !important;

    background: #f3f7f6 !important;

    border: 1px solid #dae7e2 !important;
    border-radius: 18px !important;
}#main .content-block .story p {
    margin: 0 0 13px !important;
    padding: 0 !important;

    color: #56646a !important;

    font-size: 15px !important;
    line-height: 1.9 !important;
}#main .content-block .story p:last-child {
    margin-bottom: 0 !important;
}#main .content-block .story strong {
    color: #31576a !important;
}/* =========================================================
   向いている方 / 注意点
   ========================================================= */

#main .content-block .twocol {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 14px !important;

    width: 100% !important;
}#main .content-block .ok,
#main .content-block .ng {
    display: block !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 18px !important;

    background: #ffffff !important;

    border: 1px solid #e1e7e9 !important;
    border-radius: 15px !important;
}#main .content-block .ok {
    border-top: 5px solid #527b6b !important;
}#main .content-block .ng {
    border-top: 5px solid #b88446 !important;
}#main .content-block .ok h3,
#main .content-block .ng h3,
#main .content-block .solution h3 {
    clear: none !important;

    margin: 0 0 8px !important;
    padding: 0 !important;

    background: none !important;

    border: none !important;
    border-radius: 0 !important;

    color: #27323a !important;

    font-size: 19px !important;
    font-weight: bold !important;
    line-height: 1.5 !important;
}#main .content-block .ok h3::first-letter,
#main .content-block .ng h3::first-letter,
#main .content-block .solution h3::first-letter {
    border-left: none !important;
    padding-left: 0 !important;
}#main .content-block .ok ul,
#main .content-block .ng ul {
    margin: 8px 0 0 !important;
    padding: 0 0 0 22px !important;

    list-style-type: disc !important;
}#main .content-block .ok li,
#main .content-block .ng li {
    display: list-item !important;

    margin: 0 0 7px !important;
    padding: 0 !important;

    color: #5f6b72 !important;

    font-size: 14px !important;
    line-height: 1.8 !important;

    list-style-type: disc !important;
}/* =========================================================
   取付3ステップ
   ========================================================= */

#main .content-block .steps {
    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 10px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}#main .content-block .step {
    display: grid !important;

    grid-template-columns:
        42px minmax(0, 1fr) !important;

    gap: 12px !important;

    align-items: start !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 15px !important;

    float: none !important;

    background: #ffffff !important;

    border: 1px solid #e1e7e9 !important;
    border-radius: 13px !important;
}#main .content-block .stepnum {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #31576a !important;

    border-radius: 50% !important;

    color: #ffffff !important;

    font-weight: bold !important;
    line-height: 1 !important;
}/* =========================================================
   生地サンプル
   ========================================================= */

#main .content-block .samples {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 10px !important;

    width: 100% !important;
}#main .content-block .swatch {
    display: block !important;

    min-width: 0 !important;

    overflow: hidden !important;

    margin: 0 !important;
    padding: 0 0 7px !important;

    background: #ffffff !important;

    border: 1px solid #e1e7e9 !important;
    border-radius: 12px !important;

    color: #27323a !important;

    text-align: center !important;

    font-size: 12px !important;
    font-weight: bold !important;
}#main .content-block .swatch img {
    display: block !important;

    width: 100% !important;

    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;

    margin: 0 0 6px !important;
}/* =========================================================
   価格表
   ========================================================= */

#main .content-block .price {
    display: block !important;

    width: 100% !important;

    overflow-x: auto !important;

    background: #ffffff !important;

    border: 1px solid #e1e7e9 !important;
    border-radius: 14px !important;
}#main .content-block .price table {
    width: 100% !important;
    min-width: 620px !important;

    margin: 0 !important;

    border-collapse: collapse !important;
}#main .content-block .price th,
#main .content-block .price td {
    padding: 11px !important;

    border-right: 1px solid #e1e7e9 !important;
    border-bottom: 1px solid #e1e7e9 !important;

    text-align: center !important;

    font-size: 13px !important;
}#main .content-block .price th {
    background: #edf4f7 !important;
}/* =========================================================
   FAQ
   ========================================================= */

#main .content-block .faq {
    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 9px !important;

    width: 100% !important;
}#main .content-block .faq details {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 14px 16px !important;

    background: #ffffff !important;

    border: 1px solid #e1e7e9 !important;
    border-radius: 12px !important;
}#main .content-block .faq summary {
    cursor: pointer !important;

    color: #27323a !important;

    font-size: 15px !important;
    font-weight: bold !important;
}#main .content-block .faq details p {
    margin: 10px 0 0 !important;
    padding: 0 !important;

    color: #5f6b72 !important;

    font-size: 14px !important;
    line-height: 1.8 !important;
}/* =========================================================
   動画
   ========================================================= */

#main .content-block .iframe-content {
    position: relative !important;

    width: 100% !important;
    height: 0 !important;

    overflow: hidden !important;

    padding: 0 0 56.25% !important;

    background: #000000 !important;
}#main .content-block .iframe-content iframe {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    border: 0 !important;
}


/* =========================================================
   スマートフォン
   ========================================================= */

@media screen and (max-width: 787px) {#main .content-block section {
    margin: 30px 0 !important;
        padding-top: 38px !important;
    }#main .content-block section > h2,
#main .content-block section > h1.as-h2,
#main .content-block h2.rail-section-title,
#main .content-block h1.as-h2.rail-section-title {
        font-size: 22px !important;
        line-height: 1.5 !important;
    }/* リード文 */
    #main .content-block .intro {
        width: 94% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        font-size: 14px !important;
        line-height: 1.85 !important;
    }/* =====================================
       3カードを確実に縦1列
       ===================================== */

    #main .content-block .grid3 {
        display: block !important;

        width: 94% !important;
        max-width: none !important;

        margin: 0 auto 25px !important;
        padding: 0 !important;
    }#main .content-block .grid3 > .card {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 0 12px !important;
        padding: 18px !important;

        float: none !important;
        clear: both !important;
    }#main .content-block .grid3 > .card:last-child {
        margin-bottom: 0 !important;
    }/* 光漏れ説明 */
    #main .content-block .rail-light-section {
        width: 94% !important;
        max-width: none !important;

        margin: 0 auto 40px !important;
        padding-top: 38px !important;
    }#main .content-block .rail-light-image {
        width: 100% !important;

        margin: 0 0 18px !important;

        border-radius: 12px !important;
    }#main .content-block .rail-light-copy {
        width: 100% !important;

        padding: 18px 16px !important;

        border-radius: 13px !important;
    }#main .content-block .rail-light-subtitle {
        font-size: 18px !important;
    }#main .content-block .rail-light-copy p {
        font-size: 14px !important;
        line-height: 1.85 !important;
    }/* 2・3・4列レイアウトを1列へ */
    #main .content-block .solution,
#main .content-block .compare,
#main .content-block .twocol,
#main .content-block .samples {
        display: block !important;

        width: 94% !important;
        max-width: none !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }#main .content-block .solution > *,
#main .content-block .compare > .photo,
#main .content-block .twocol > .ok,
#main .content-block .twocol > .ng,
#main .content-block .samples > .swatch {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 0 12px !important;

        float: none !important;
        clear: both !important;
    }/* ステップ */
    #main .content-block .steps {
        width: 94% !important;

        margin: 0 auto !important;
    }#main .content-block .step {
        grid-template-columns:
            42px minmax(0, 1fr) !important;

        width: 100% !important;

        padding: 14px !important;
    }/* FAQ */
    #main .content-block .faq {
        width: 94% !important;

        margin: 0 auto !important;
    }

}