@charset "utf-8";
/*====================================
キープッシュ
0.汎用
    0.1 カラー
    0.2 レイアウト
    0.3 テキスト
    0.4 リンク
1.メイン
2.商品紹介
3.FEATURE 商品特徴
    3.1 TECHNOLOGY 01
    3.1 TECHNOLOGY 02
4.PRODUCT 商品情報
5.ご購入はこちら
6.サラヤについて
7.フッター
8.メディアクエリ
    8.1 画面サイズが578pxから1024pxまでのCSSを記述
    8.2 画面サイズが577pxまでのCSSを記述
====================================*/
/* レスポンシブ
========================================================================*/
#keepush {
    width: 100%;
    background: #fff;
    font-family: "TBUDゴシック E", "TBUDGothic E", "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",  Verdana, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: -0.02em;
    color: #004593;
    text-align: justify;
    font-weight: bold;
}
/*====================================

 0.汎用

====================================*/
/*
 	0.1 カラー
====================================*/
/*
 	0.2 レイアウト
====================================*/
section#contents {
    width: 100% !important;
    margin-right: auto;
    margin-left: auto;
    padding-top: 0;
    margin-top: 6rem;
}
.topicpath {
    padding: 5px 0;
    z-index: 99;
    position: relative;
    background: #fff;
    width: 100%;
}
#contents-footer {
    position: relative;
    z-index: 2;
    background: #fff;
    width: 100% !important;
    margin: 0 !important;
}
footer {
    background: #EDE9E4;
    padding-top: 10px;
    position: relative;
    z-index: 20;
}

/*画像*/
#keepush img {
    width: 100%;
    vertical-align: bottom;
}
#keepush div,
#keepush p,
#keepush figure {
    margin: 0;
    padding: 0;
}
#keepush h1,
#keepush h2,
#keepush h3,
#keepush h4,
#keepush h5,
#keepush h6 {
    margin: 0;
    padding: 0;
    font-weight: bold;
}

/*デバイスごとに要素を表示・非表示*/
#keepush .pc-v { display: block !important; }
#keepush .pc-no { display: none !important; }
#keepush .tablet-v { display: none !important; }
#keepush .sp-v { display: none !important; }

/*Flex*/
#keepush .flex-d-row { display: flex; }
#keepush .flex-d-row-reverse { display: flex; flex-direction: row-reverse;
}
#keepush .flex-wrap { flex-wrap: wrap; }
#keepush .justify-flex-start { justify-content: flex-start; }
#keepush .justify-end { justify-content: end; }
#keepush .justify-center { justify-content: center; }
#keepush .justify-between { justify-content: space-between; }
#keepush .justify-around { justify-content: space-around; }
#keepush .items-flex-end { align-items: flex-end; }
#keepush .items-center { align-items: center; }

/*
 	0.3 テキスト
====================================*/
#keepush span.emphasis {
    color: #F7781F;
}
#keepush span.marker {
    /*background: linear-gradient(transparent 65%, #F3EF8D 65%);*/
    background-image: linear-gradient(#F3EF8D, #F3EF8D);
    background-repeat: no-repeat;
    background-size: 100% 40%; /* 黄色部分の高さを固定 */
    background-position: bottom; /* 下から配置 */
}
/*
 	0.4 リンク
====================================*/

/*====================================

 1.メイン

====================================*/
#keepush .main-content {
    width: 100%;
}
/*アンカーボタン*/
.btn-shop-link {
    position: fixed;
    top: 108px;
    right: 0;
    width: 40px;
    z-index: 999;
}
#keepush .main-content-lead {
    width: 100%;
    padding: 24px 0 40px;
    font-size: 32px;
    background: url(/themes/family/keepush/images/bg-gradation-pc.png) no-repeat;
    background-size: cover;
    text-align: center;
}
#keepush .main-content-lead .text-box {
    display: inline-block;  /* 中身に合わせた幅で中央に配置 */
    text-align: left;       /* 中身は左寄せ */
}
#keepush .main-content-lead .lead-text {
    line-height: 1.3;
}
#keepush .main-content-lead span.emphasis {
    font-size: 56px;
    color: #F7781F;
}
#keepush .main-content-lead span.marker {
            /*background: linear-gradient(transparent 65%, #F3EF8D 65%);*/
            background-image: linear-gradient(#F3EF8D, #F3EF8D);
            background-repeat: no-repeat;
            background-size: 100% 40%; /* 黄色部分の高さを固定 */
            background-position: bottom; /* 下から配置 */
}
#keepush .main-content-lead .sub-text {
    margin: 20px 0 0;
    font-size: 20px;
    text-align: right;
}
#keepush .main-content-lead .note {
    margin: 8px 0 0;
    font-size: 10px;
    text-align: right;
}
/*====================================

 2.商品紹介

====================================*/
#keepush .concept-content {
    margin: 64px 0 48px;
    text-align: center;
    font-size: 20px;
}
#keepush .concept-content .logo-keepush {
    max-width: 352px;
    margin: 48px auto;
}
#keepush .concept-content .concept-large-text {
    font-size: 24px;
}
/*====================================

 3.FEATURE 商品特徴

====================================*/
#keepush .feature-bg {
    width: 100%;
    padding: 64px 0;
    background: url(/themes/family/keepush/images/bg-triangle.png) repeat-y top center;
    background-size: 100%;
}
#keepush .feature-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
#keepush .feature-content h2 {
    font-size: 48px;
}
#keepush .feature-content .heading-sub-text {
    margin: 0 0 48px;
    font-size: 20px;
}
#keepush .feature-content .feature-lead {
    font-size: 32px;
    margin: 0 0 64px;
}
/*
 	3.1 TECHNOLOGY 01
====================================*/
#keepush .technology-area {
    background: #fff;
    margin: 64px 0 0;
}
#keepush .technology-heading {
    width: 100%;
    padding: 24px 0;
    background: url(/themes/family/keepush/images/bg-gradation-head-pc.png) no-repeat;
    background-size: cover;
    text-align: center;
    font-size: 24px;
    line-height: 1;
}
#keepush .technology-heading span {
    font-size: 40px;
}
#keepush .technology-box {
    padding: 48px 56px 64px;
}
#keepush .technology-box h3 {
    font-size: 48px;
}
#keepush .technology-box .technology-lead {
    font-size: 22px;
    margin: 40px 0 20px;
}
#keepush .technology-box .technology-note {
    font-size: 12px;
    text-align: right;
}

/*クロルヘキシジングルコン酸塩（CHG）とは？*/
#keepush .technology-column {
    margin: 24px 0 0;
    padding: 48px 120px;
    border: 1px solid #004593;
    text-align: left;
}
#keepush .icon-6hours {
    max-width: 140px;
    margin: 0 96px 0 0;
}
#keepush .technology-column h4 {
    font-size: 24px;
    margin: 0 0 24px;
}
#keepush .technology-column .column-note {
    font-size: 12px;
    margin: 40px 0 0;
}

/*
 	3.2 TECHNOLOGY 02
====================================*/
#keepush ul.moisturizer {
    margin: 40px 0 0;
    line-height: 1.5;
}
#keepush ul.moisturizer figure {
    max-width: 180px;
    margin: 0 48px 20px;
}

/*====================================

 4.PRODUCT 商品情報

====================================*/
#keepush .product-bg {
    width: 100%;
    padding: 64px 0;
    background: linear-gradient(to right, #FAFBFC 0%, #FAFBFC 50%, #FAFBFC 100%);
}
#keepush .product-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
#keepush .product-content h2 {
    font-size: 48px;
}
#keepush .product-content .heading-sub-text {
    margin: 0 0 24px;
    font-size: 20px;
}
#keepush .img-keepush {
    max-width: 390px;
    margin: 0 120px 0 0;
}
#keepush .product-text-area {
    margin: 88px 0 0;
    text-align: left;
}
#keepush .product-text-area h3 {
    font-size: 36px;
    margin: 0 0 24px;
}
#keepush .product-content .quasi-drug {
    font-size: 14px;
    line-height: 1;
    border: 1px solid #004593;
    padding: 4px 4px 2px;
    margin: 0 8px 0 0;
}
#keepush .product-content .spec {
    margin: 32px 0 0;
}
#keepush .product-content ul.product-feature {
    margin: 40px 0 0;
    font-size: 22px;
}
.product-content ul.product-feature {
    list-style: none; /* デフォルトの・を消す */
    padding: 0;
    margin: 0;
}
.product-content ul.product-feature li {
    position: relative;
    padding-left: 1em; /* ・の分だけ余白を作る */
}
.product-content ul.product-feature li::before {
    content: "・"; /* 任意の記号 */
    position: absolute;
    left: 0; /* li の左端に配置 */
}
#keepush a.date-link {
    display: inline-block;
    border-bottom: 1px solid #004593;
    margin: 8px 0 0;
    padding: 0 0 0;
    color: #004593;
    text-decoration: none;
}
#keepush a.date-link:hover {
	opacity: 0.5;
    transition: all 0.5s;
}
#keepush a.attention-link {
    display: inline-block;
    border-bottom: 1px solid #004593;
    padding: 0 0 0;
    color: #004593;
    text-decoration: none;
}
#keepush a.attention-link:hover {
	opacity: 0.5;
    transition: all 0.5s;
}
#keepush .product-feature-note {
    font-size: 12px;
    margin: 20px 0 32px;
}

/*====================================

 5.ご購入はこちら

====================================*/
#keepush .shop-bg {
    width: 100%;
    background: #004593;
    padding: 64px 0 64px;
}
#keepush #shop-link {
    scroll-margin-top: 96px; /* ヘッダーの高さ分だけ余白を残してスクロール */
}
#keepush .onlineshop-contents {
    position: relative;
    z-index: 20;
    width: 100%;
    text-align: center;
}
#keepush .onlineshop-contents h2 {
    margin: 0 0 40px;
    font-size: 40px;
    color: #fff;
}
#keepush .onlineshop-text {
    margin: 0 0 32px;
    color: #fff;
}
#keepush ul.onlineshop-area {
    display: flex;
    justify-content: center;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
#keepush ul.onlineshop-area li {
    margin: 0 16px; /* 通販リンク2つの場合 */
}
#keepush ul.onlineshop-area li a {
    display: block;
    width: 100%;
    min-width: 352px;
    min-height: 96px;
    padding: 22px 0;
    background: #fff;
}
#keepush ul.onlineshop-area li a img {
    width: 100%;
    max-width: 150px;
}
/*販売店舗検索*/
#keepush ul.onlineshop-area li a.store-search {
    display: block;
    width: 100%;
    min-width: 352px;
    min-height: 96px;
    padding: 22px 0;
    background: #fff;
    text-decoration: none;
    color: #00428b;
    font-size: 28px;
}

/*====================================

 6.サラヤについて

====================================*/
#keepush .saraya-bg {
    width: 100%;
    background: #F7F9FA;
    padding: 72px 0;
}
#keepush .saraya-content {
    max-width: 1200px;
    margin: 0 auto;
}
#keepush .image-saraya {
    max-width: 486px;
}
#keepush .saraya-text-area {
    max-width: 646px;
    font-size: 18px;
}
#keepush .saraya-content h4 {
    font-size: 38px;
    margin: 0 0 32px;
}

/*====================================

 7.フッター

====================================*/
#keepush .footer-content {
    max-width: 1200px;
    margin: 64px auto 0;
}
#keepush .banner-tearai-project {
    max-width: 600px;
    margin: 0 auto;
}

















/*====================================

 8.メディアクエリ

====================================*/
@media screen and (max-width: 767px) {
    section#contents {
        width: 100% !important;
        margin-right: auto;
        margin-left: auto;
        padding: 0 0 0 0;
        box-shadow: none;
    }
}

/*
    8.1 画面サイズが578pxから1024pxまでのCSSを記述
========================================================================*/
@media screen and (min-width: 578px) and (max-width: 1024px)  {
    /*====================================

    0.汎用

    ====================================*/
    /*
        0.1 レイアウト
    ====================================*/
    #contents {
        width: 100% !important;
    }
    #keepush {
        width: 100%;
    }
    #keepush .pc-v { display: block !important; }
    #keepush .pc-no { display: none !important; }
    #keepush .sp-v { display: none !important; }
    #keepush .tablet-v { display: block !important; }
    #keepush .tablet-no { display: none !important; }
}



/*
    8.2 画面サイズが577pxまでのCSSを記述
========================================================================*/
@media screen and (max-width: 577px)  {
        /*====================================

        0.汎用

        ====================================*/
        /*
            0.1 レイアウト
        ====================================*/
        #contents {
            width: 100% !important;
        }
        section#contents {
            width: 100% !important;
            margin-right: auto;
            margin-left: auto;
            padding: 10px 0 0 0;
            margin-top: 3rem;
        }
        #keepush {
            width: 100%;
        }
        #keepush img { vertical-align: bottom; }
        #keepush .pc-v { display: none !important; }
        #keepush .pc-no { display: none !important; }
        #keepush .tablet-v { display: none !important; }
        #keepush .sp-v { display: block !important; }
        #keepush .sp-no { display: none !important; }

        /*Flex*/
        #keepush .flex-d-row { display: block; }

        /*====================================

        1.メイン

        ====================================*/
        #keepush .main-content {
            width: 100%;
        }
        /*アンカーボタン*/
        .btn-shop-link {
            position: fixed;
            top: 80px;
            right: 0;
            width: 27px;
            z-index: 999;
        }
        #keepush .main-content-lead {
            width: 100%;
            padding: 24px 5% 24px;
            font-size: 20px;
            background: url(/themes/family/keepush/images/bg-gradation-sp.png) no-repeat;
            background-size: cover;
            text-align: center;
        }
        #keepush .main-content-lead .text-box {
            display: inline-block;  /* 中身に合わせた幅で中央に配置 */
            text-align: left;       /* 中身は左寄せ */
        }
        #keepush .main-content-lead .lead-text {
            line-height: 1.3;
        }
        #keepush .main-content-lead span.emphasis {
            font-size: 36px;
            color: #F7781F;
        }
        #keepush .main-content-lead span.marker {
            /*background: linear-gradient(transparent 65%, #F3EF8D 65%);*/
            background-image: linear-gradient(#F3EF8D, #F3EF8D);
            background-repeat: no-repeat;
            background-size: 100% 40%; /* 黄色部分の高さを固定 */
            background-position: bottom; /* 下から配置 */
        }
        #keepush .main-content-lead .sub-text {
            margin: 20px 0 0;
            font-size: 16px;
            line-height: 1.3;
            text-align: right;
        }
        #keepush .main-content-lead .note {
            margin: 8px 0 0;
            font-size: 10px;
            text-align: right;
        }

        /*====================================

        2.商品紹介

        ====================================*/
        #keepush .concept-content {
            margin: 40px 0 24px;
            text-align: center;
            font-size: 16px;
        }
        #keepush .concept-content .logo-keepush {
            max-width: 240px;
            margin: 32px auto;
        }
        #keepush .concept-content .concept-large-text {
            font-size: 18px;
        }

        /*====================================

        3.FEATURE 商品特徴

        ====================================*/
        #keepush .feature-bg {
            width: 100%;
            padding: 48px 6%;
            background: url(/themes/family/keepush/images/bg-triangle.png) repeat-y top center;
            background-size: 200%;
            overflow: hidden;
        }
        #keepush .feature-content {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
        }
        #keepush .feature-content h2 {
            font-size: 40px;
        }
        #keepush .feature-content .heading-sub-text {
            margin: 0 0 24px;
            font-size: 16px;
        }
        #keepush .feature-content .feature-lead {
            font-size: 20px;
            margin: 0 0 20px;
        }
        #keepush .feature-img {
            width: 120%;
            margin-left: -10%;
        }

        /*
            3.1 TECHNOLOGY 01
        ====================================*/
        #keepush .technology-area {
            background: #fff;
            margin: 20px 0 0;
        }
        #keepush .technology-heading {
            width: 100%;
            padding: 16px 0;
            background: url(/themes/family/keepush/images/bg-gradation-head-sp.png) no-repeat;
            background-size: cover;
            text-align: center;
            font-size: 18px;
            line-height: 1;
        }
        #keepush .technology-heading span {
            font-size: 24px;
        }
        #keepush .technology-box {
            padding: 24px 5% 24px;
        }
        #keepush .technology-box h3 {
            font-size: 24px;
            line-height: 1.4;
        }
        #keepush .technology-box .technology-lead {
            font-size: 16px;
            line-height: 1.5;
            margin: 20px 0 20px;
        }
        #keepush .technology-box .technology-note {
            font-size: 12px;
            text-align: right;
        }

        /*クロルヘキシジングルコン酸塩（CHG）とは？*/
        #keepush .technology-column {
            margin: 20px 0 0;
            padding: 20px 5%;
            border: 1px solid #004593;
            text-align: left;
        }
        #keepush .icon-6hours {
            max-width: 104px;
            margin: 16px auto 0;
        }
        #keepush .technology-column h4 {
            font-size: 18px;
            margin: 0 0 16px;
        }
        #keepush .technology-column .column-text {
            font-size: 12px;
        }
        #keepush .technology-column .column-note {
            font-size: 10px;
            margin: 16px 0 0;
        }

        /*
            3.2 TECHNOLOGY 02
        ====================================*/
        #keepush ul.moisturizer {
            display: flex;
            justify-content: center;
            flex-wrap: wrap; /* 折り返しを許可 */
            margin: 40px 0 0;
            line-height: 1.3;
            font-size: 14px;
        }
        #keepush ul.moisturizer figure {
            max-width: 112px;
            margin: 0 auto 16px;
        }
        #keepush ul.moisturizer li {
            width: 50%; /* 基本は2列 */
        }

        #keepush ul.moisturizer li:first-child {
            width: 100%; /* 最初だけ1列 */
            margin: 0 0 24px;
        }

        /*====================================

        4.PRODUCT 商品情報

        ====================================*/
        #keepush .product-bg {
            box-sizing: border-box;
            width: 100%;
            padding: 48px 6%;
            background: linear-gradient(to right, #FAFBFC 0%, #EDF2F5 100%);
        }
        #keepush .product-content {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
        }
        #keepush .product-content h2 {
            font-size: 40px;
        }
        #keepush .product-content .heading-sub-text {
            margin: 0 0 24px;
            font-size: 16px;
        }
        #keepush .img-keepush {
            box-sizing: border-box;
            max-width: 224px;
            margin: 20px auto 0;
            padding: 0 20px 0 0;
        }
        #keepush .product-text-area {
            margin: 32px 0 0;
            text-align: left;
        }
        #keepush .product-text-area h3 {
            font-size: 24px;
            margin: 0 0 20px;
        }
        #keepush .product-content .quasi-drug {
            display: inline-block;
            font-size: 14px;
            line-height: 1;
            border: 1px solid #004593;
            padding: 4px 4px 4px;
            margin: 0 0 8px;
        }
        #keepush .product-content .spec {
            margin: 16px 0 0;
            line-height: 1.5;
        }
        #keepush .product-content ul.product-feature {
            margin: 24px 0 0;
            font-size: 16px;
            line-height: 1.5;
        }
        #keepush a.date-link {
            display: inline-block;
            border-bottom: 1px solid #004593;
            margin: 20px 0 0;
            padding: 0 0 0;
            color: #004593;
            text-decoration: none;
            font-size: 14px;
        }
        #keepush a.date-link:hover {
            opacity: 0.5;
            transition: all 0.5s;
        }
        #keepush a.attention-link {
            display: inline-block;
            border-bottom: 1px solid #004593;
            padding: 0 0 0;
            color: #004593;
            text-decoration: none;
            font-size: 14px;
        }
        #keepush a.attention-link:hover {
            opacity: 0.5;
            transition: all 0.5s;
        }
        #keepush .product-feature-note {
            font-size: 12px;
            margin: 20px 0 20px;
        }

       /*====================================

        5.ご購入はこちら

        ====================================*/
        #keepush .shop-bg {
            width: 100%;
            background: #004593;
            padding: 40px 0 40px;
        }
        #keepush .onlineshop-contents {
            width: 100%;
            background: url(/themes/keepush@family//themes/family/keepush/images/onlineshop-bg.png) no-repeat;
            background-size: cover;
            background-position: top center;
            padding: 0;
            text-align: center;
        }
        #keepush .onlineshop-contents h2 {
            margin: 0 0 20px;
            color: #fff;
            font-size: 24px;
        }
        #keepush ul.onlineshop-area {
            display: block;
            justify-content: center;
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0;
            list-style: none;
        }
        #keepush ul.onlineshop-area li a {
            display: block;
            width: 100%;
            max-width: 352px;
            max-height: 80px;
            min-width: auto;
            min-height: auto;
            margin: 0 auto 16px;
            padding: 16px 0;
            background: #fff;
        }
        #keepush ul.onlineshop-area li a img {
            width: 40%;
            max-width: 150px;
        }
        /*販売店舗検索*/
        #keepush ul.onlineshop-area li a.store-search {
            display: block;
            width: 100%;
            max-width: 352px;
            max-height: 80px;
            min-width: auto;
            min-height: auto;
            margin: 0 auto 16px;
            padding: 16px 0;
            background: #fff;
            text-decoration: none;
            color: #00428b;
            font-size: 20px;
        }

        /*====================================

        6.サラヤについて

        ====================================*/
        #keepush .saraya-bg {
            width: 100%;
            background: #F7F9FA;
            padding: 48px 6%;
        }
        #keepush .saraya-content {
            max-width: 1200px;
            margin: 0 auto;
        }
        #keepush .image-saraya {
            max-width: 486px;
        }
        #keepush .saraya-text-area {
            max-width: 646px;
            font-size: 14px;
        }
        #keepush .saraya-content h4 {
            font-size: 24px;
            margin: 40px 0 16px;
        }

        /*====================================

        7.フッター

        ====================================*/
        #keepush .footer-content {
            width: 100%;
            max-width: 1200px;
            margin: 20px auto 0;
            padding: 6%;
        }
        #keepush .banner-tearai-project {
            max-width: 600px;
            margin: 0 auto;
        }

}