@charset "utf-8";

/*-------------------
   clearfix
-------------------*/
.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

/*-------------------
   common
-------------------*/
.wrapper {
    font-family: 'TsukuARdGothic-Regular', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体',
        sans-serif;
    font-weight: bold;
    font-feature-settings: "palt";
    padding: 0 0;
    position: relative;
}

.wrapper * {
    box-sizing: border-box;
}

.wrapper a {
    color: inherit;
    display: block;
}

.wrapper img {
    height: auto;
    max-width: 100%;
}

#container .flex {
    flex-wrap: wrap;
    /* 画面幅に合わせてカラム落ちさせる */
    display: flex;
    justify-content: flex-start;
    align-items: top
}

#container html {
    font-size: 62.5%;
    line-height: 1.5;
}

/*ブレイクポイントのルール*/
/* -スマホ基本設計 解像度に依存しない-
 *350pxまで：SP縦 i5 SE
 *350px〜480px：SP縦 i6-8　****一番重要****
 *480px〜960px：SP横からタブレット
 *960px〜小型PC　大型PC
 
/*  全体指定 スマホ縦 i5 i5SE　350pxまで  */
/* 購入ボタン */
#container .buy-btn a {
    background: #305641;
    border-radius: 20px;
    border: solid 1px #305641;
    color: #FFF;
    ;
    font: 1rem/2.5 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    position: relative;
    margin: 0 auto;
    text-align: center;
    width: 80%;
}

#container .buy-btn a:hover {
    background: #FFF;
    color: #305641;
    border: solid 1px #305641;
    opacity: 1;
}

#container .buy-btn em {
    margin: 0 5px 0 0;
}

/*-- 画面外にいる状態 --*/
.fadein {
    opacity: 0;
    transform: translate(0, 50px);
    transition: all 300ms;
}

/*-- 画面内に入った状態 --*/
.fadein.scrollin {
    opacity: 1;
    transform: translate(0, 0);
}

/* フェードイン用のCSS */
.slide-bottom {
    opacity: 0;
    transform: translateY(20px);
    transition: all 1.3s 0s ease-out;
}

/*----scroll----*/
.scroll {
    opacity: 0;
    transition: all 2s ease;
}

.scroll.show {
    opacity: 1;
    transform: none;
    animation: 2.5s fadeIn;
}

.s-bottom {
    transform: translate(0, 20px);
}

.s-scaleDown {
    transform: scale(1.2);
}

#container .wrapper {
    margin: 0 0 20%;
}

#container {
    color: #305641;
    font-size: 1.4rem;
}

/*-------------------
   mainvisual
-------------------*/
#container .mainvisual {
    background: url(/contents/shop/sevenbeauty/img/freepage/water_soluble_oil/2023_pc_mv.jpg) no-repeat center;
    background-size: contain;
    height: auto;
    margin: 0 auto;
    width: 100%;
}

#container .pict img {
    display: none;
}

#container .mainvisual .text-box {
    text-align: center;
    margin: 0px auto;
    width: 400px;
}

#container .mainvisual h2 {
    color: #CC0816;
    font-family: 'TsukuARdGothic-Regular', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体',
        sans-serif;
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: .2rem;
    text-shadow: 0 0 8px white;
    margin: 0 0 10px;
    padding: 140px 0 0;
}

#container h1 {
    font-size: 3.4rem;
    font-weight: bold;
    line-height: 3.6rem;
}

#container h1 p {
    font-weight: bold;
}

#container .text-box ul {
    margin: 0px auto 20px;
}

#container .text-box li {
    border-bottom: double;
    font-size: 0;
    margin: 0 auto;
    width: 250px;
}

#container .text-box li:last-child {
    border-bottom: none;
}

#container .liter {
    display: inline;
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: .1em;
}

#container .text-box li em {
    color: #CC0816;
    font-size: 1.6rem;
    font-weight: bold;
}

#container .zei {
    font-size: .9rem;
    font-weight: bold;
    display: inline;
    padding: 0px 0 0 -16px;
}

#container .repi {
    position: relative;
    right: -63%;
    top: -356px;
}

/*-------------------
   whats
-------------------*/
#container h2 {
    color: #305641;
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1.2;
    margin: 20px auto 0;
    text-align: center;
}

#container .eng {
    color: #73BFB1;
    font-size: 1rem;
    font-family: 'Segoe UI Black', 'Brush Script MT', 'Arial Rounded MT Bold', sans-serif;
    margin: 0 0 20px;
    text-align: center;
}

#container .whats_inner {
    background: url(/contents/shop/sevenbeauty/img/freepage/water_soluble_oil/bk_water.jpg) no-repeat right;
    margin: 0 auto;
    padding: 25px 0;
    width: 1400px;
}

#container .whats_inner .text-box {
    font-size: 1.4rem;
    font-weight: bold;
    line-break: strict;
    line-height: 2em;
    margin: 4% 0 4% 18%;
    text-align: center;
    width: 500px;
}

/*-------------------
   satisfied
-------------------*/
#container .satisfied_inner {
    width: 1400px;
    margin: 0 auto;
    padding: 5% 0;
    text-align: center;
}

#container .merit {
    margin: 36px auto 0;
    width: 890px;
}

#container .merit dl {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 15px;
}

#container .merit dt {
    display: flex;
    width: 40%;
}

#container .merit dd {
    text-align: left;
    width: 60%;
}

#container .merit_inner h3 {
    border-bottom: solid 1px #305641;
    font-size: 2rem;
    font-weight: bold;
    margin: 0 auto;
}

#container .merit_inner p {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0 auto;
}

#container .merit_inner em {
    color: #CC0816;
    font-size: 1.5rem;
    font-weight: bold;
}

/*-------------------
   points ポイント1
-------------------*/
#container .points_inner {
    background-color: #cdeae6;
    background-image: url(/contents/shop/sevenbeauty/img/freepage/water_soluble_oil/bk_bwater.png);
    padding: 40px 0;
    text-align: center;
    width: 100%;
}

#container .point-box_1,
#container .point-box_2,
#container .point-box_3 {
    background-color: rgba(255, 255, 255, .7);
    border: 2px solid #305641;
    border-radius: 30px;
    font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Sans', sans-serif;
    margin: 60px auto;
    width: 900px;
}

#container .point-box_1 .drop,
#container .point-box_2 .drop,
#container .point-box_3 .drop {
    position: relative;
    margin: -118px 0 -29px -98%;
}

#container .point-box_1 h3,
#container .point-box_2 h3,
#container .point-box_3 h3 {
    font-family: 'TsukuARdGothic-Regular', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;
    font-size: 2rem;
    font-weight: bold;
    margin: 0 0 30px;
}

#container .point-box_1 {
    padding: 0 0 290px;
}

#container .obi_grn {
    background-color: #305641;
    font-weight: bold;
    padding: 10px 0;
}

#container .point-box_1 h4,
#container .point-box_2 h4,
#container .point-box_3 h4 {
    color: white;
    font-size: 1.8rem;
}

#container .water_oil_grn {
    background-color: #dbe7e3;
    padding: 20px;
}

#container .hikaku {
    margin: 10px;
}

#container .point-box_1 p,
#container .point-box_2 p,
#container .point-box_3 p {
    color: black;
    font-size: 1.2rem;
    text-align: left;
    width: 700px;
}

#container .obi_gry {
    background-color: #848889;
    font-weight: bold;
    padding: 10px 0;
}

#container .water_oil_gry {
    background-color: #e3e3e3;
    padding: 20px;
}

#container .difference {
    color: black;
    padding: 20px;
}

#container .difference h3 {
    font-size: 1.7rem;
    font-weight: bold;
    margin: 16px 0;
}

#container .difference p {
    font-size: 1rem;
    margin: 20px auto;
}

#container .oil {
    margin: 0 auto;
}

#container .oil_inner {
    float: left;
    font-size: .8rem;
    width: 50%;
}

#container .oil_inner dd {
    margin: 10px auto;
    width: 315px;
}

#container .oil_inner dd p {
    font-size: .8rem;
}

/*-------------------
   points ポイント2
-------------------*/
#container .point-box_2,
#container .point-box_3 {
    padding: 0 0 60px;
}

#container .up {
    margin: 40px auto;
    width: 800px;
}

#container .up_inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 15px;
}

#container .up_inner dt {
    width: 20%;
}

#container .up_inner .text {
    color: black;
    font-size: 1.4rem;
    float: left;
    text-align: left;
    width: 32%;
}

#container .up_inner .picture {
    width: 48%;
}

#container .towel {
    color: black;
    font-size: 1.0rem;
    margin: 0 auto;
    text-align: left;
    width: 700px;
}

/*-------------------
   points ポイント3
-------------------*/
#container .natural img {
    padding: 0 20px 0 0;
}

/*-------------------
   question
-------------------*/
#container .question_inner {
    background: url(/contents/shop/sevenbeauty/img/freepage/water_soluble_oil/bk_oil.png) right top no-repeat;
    font-size: 1.2rem;
    margin: 0 auto;
    padding: 40px 0 0;
    text-align: center;
}

#container .questionnaire {
    font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Sans', sans-serif;
}

#container .qanda {
    background-color: #FFF;
    border: 1px solid #305641;
    box-shadow: 20px 20px 0 0 rgb(48, 86, 65);
    font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Sans', sans-serif;
    margin: 120px auto;
    padding: 0 30px 30px;
    width: 800px;
}

#container .qanda h3 {
    font-size: 1.8rem;
    line-height: 1.3;
    margin: 0 0 30px;
}

#container .hexagon {
    margin: -9% 90% 0 -97px;
    position: relative;
}

#container .qanda_flex {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 15px;
}

#container .qanda .graph {
    width: 50%;
}

#container .qanda .text {
    font-size: 1rem;
    text-align: left;
    width: 50%;
}

#container .qanda .text p {
    font-size: .8rem;
    text-align: right;
}

/*-------------------
    uservoice
-------------------*/
#container .uservoice_inner {
    background: url(/contents/shop/sevenbeauty/img/freepage/water_soluble_oil/bk_us.jpg) no-repeat;
    background-size: cover;
    margin: 0 auto;
    padding: 40px 0;
    text-align: center;
}

#container .user {
    margin: 40px auto;
    width: 1000px;
}

#container .user .voice_flex {
    display: -webkit-flex;
    flex-wrap: wrap;
}

#container .user li {
    background-color: #FFF;
    box-shadow: 0px 1px 7px 0 rgb(0 0 0 / 30%);
    font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Sans', sans-serif;
    font-size: .9rem;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: left;
    width: 280px;
}

#container .user img {
    margin: 0 0 20px;
}

#container .impressions {
    border-top: 1px solid #305641;
    line-height: 1.8;
    padding: 10px 0 0;
}

#container .impressions em {
    color: #CC0816;
    font-size: 1.1rem;
    font-weight: bold;
}

/*-------------------
    movie
-------------------*/
#container .movie_inner {
    width: 854px;
    margin: 0 auto;
    padding: 40px;
    text-align: center;
}

#container .video {
    height: 0;
    margin: 40px auto;
    padding-top: 75%;
    position: relative;
    width: 100%;
}

#container .video iframe {
    left: 0;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}

/*-------------------
    list
-------------------*/
#container .list_inner {
    width: 1100px;
    padding: 40px;
    margin: 0 auto;
    text-align: center;
}

#container .product_flex {
    display: -webkit-flex;
    flex-wrap: wrap;
}

#container .product_flex li {
    font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Sans', sans-serif;
    margin: 2% auto;
    width: 300px;
}

#container .product_flex dd {
    font-size: .8rem;
    height: 50px;
    margin: 10px;
    text-align: left;
}

#container .product_flex .sample {
    font-size: .8rem;
}

#container .allplice {
    margin: 20px auto;
    width: 1020px;
}

#container .price_flex li {
    border-right: 1px solid #305641;
    display: inline-block;
    font-size: 1rem;
    font-weight: bold;
    padding: 0 10px;
}

#container .price_flex li:last-child {
    border-right: none;
}

#container .price_flex p {
    display: inline;
    font-size: 2rem;
    font-weight: bold;
}

#container .price_flex em {
    color: #CC0816;
    font-size: 1.8rem;
    font-weight: bold;
}

#container .product_item {
    margin: 0 auto;
    width: 1000px;
}


@media screen and (min-width:320px) and (max-width:480px) {

    /*　スマホ縦　i6 / i6plus / i7  320pxから480pxまではここを読み込む　*/
    /*-------------------
   mainvisual
-------------------*/
    #container .mainvisual {
        background: url(/contents/shop/sevenbeauty/img/freepage/water_soluble_oil/2023_sp_mv.jpg) no-repeat center;
        background: cover;
        background-size: 100%;
        padding: 0px 0 74px;
        width: 100%;
    }

    #container h1 {
        font-size: 2.4rem;
        line-height: 2.6rem;
    }

    #container .mainvisual h2 {
        font-size: 1.2rem;
        letter-spacing: .1rem;
        padding: 10px 0 0;
    }

    #container .mainvisual .buy-btn {
        padding: 5px 0;
    }

    #container .liter {
        font-size: 1rem;
    }

    #container .zei {
        font-size: .6rem;
    }

    #container .text-box li em {
        font-size: 1.2rem;
    }

    #container .mainvisual .text-box {
        padding: 30px 0px 110px;
        width: 100%;
    }

    #container .text-box ul {
        margin: 0px auto 5px;
    }

    #container .repi {
        right: -55%;
        top: -100px;
        width: 67px;
    }

    /*-------------------
   whats
-------------------*/
    #container .whats_inner {
        background-size: 60%;
        width: 100%;
    }

    #container .whats_inner .text-box {
        font-size: 0.9rem;
        margin: 0 auto;
        width: 96%;
    }

    /*-------------------
   satisfied
-------------------*/
    #container h2 {
        font-size: 1.2rem;
        margin: 0 20px;
    }

    #container .eng {
        margin: 0 0 15px;
    }

    #container .satisfied_inner {
        width: 96%;
    }

    #container .merit {
        width: 100%;
    }

    #container .merit_inner .text {
        margin: 0 auto;
    }

    #container .merit_inner h3 {
        font-size: 1.2rem;
        line-height: 1.5;
    }

    #container .merit_inner p {
        font-size: .9rem;
        line-height: 1.5;
    }

    #container .merit dt {
        width: 38%;
        margin: 0 5px 0 0;
    }

    #container .merit_inner em {
        font-size: 1rem;
    }

    /*-------------------
   points ポイント1
-------------------*/
    #container .points_inner {
        padding: 40px 0 20px;
    }

    #container .water_oil_grn,
    #container .water_oil_gry {
        padding: 10px 20px;
    }

    #container .point-box_1,
    #container .point-box_2,
    #container .point-box_3 {
        margin: 40px auto;
    }

    #container .point-box_1 .drop,
    #container .point-box_2 .drop,
    #container .point-box_3 .drop {
        margin: -35px 3px -7px -87%;
        width: 53px;
    }

    #container .point-box_1,
    #container .point-box_2,
    #container .point-box_3 {
        width: 96%;
    }

    #container .point-box_1 p,
    #container .point-box_2 p,
    #container .point-box_3 p {
        font-size: .8rem;
        width: 100%;
    }

    #container .point-box_1 h3,
    #container .point-box_2 h3,
    #container .point-box_3 h3 {
        font-size: 1.3rem;
        margin: 0;
        padding: 10px;
    }

    #container .point-box_1 h4,
    #container .point-box_2 h4,
    #container .point-box_3 h4 {
        font-size: 1.2rem;
    }

    /*-------------------
   points ポイント2
-------------------*/
    #container .point-box_2,
    #container .point-box_3 {
        padding: 0 0 30px;
    }

    #container .up {
        margin: 10px 0;
        width: 100%;
    }

    #container .towel {
        font-size: .8rem;
        padding: 10px;
        width: 100%;
    }

    #container .up_inner .picture {
        width: 42%;
    }

    #container .oil_inner dd {
        width: 100%;
    }

    #container .up_inner .text {
        font-size: .8rem;
        width: 36%;
    }

    #container .up_inner dt {
        width: 15%;
        margin: 0 8px;
    }

    /*-------------------
   question
-------------------*/
    #container .question_inner {
        background-size: 43%;
        background-color: rgba(255, 255, 255, 0.7);
        background-blend-mode: lighten;
        width: 100%;
    }

    #container .question_inner .questionnaire {
        font-size: .9rem;
        margin: 0 15px;
    }

    #container .qanda {
        margin: 60px auto;
        width: 80%;
    }

    #container .qanda h3 {
        font-size: 1.2rem;
        font-weight: bold;
        margin: 0 0 20px;
    }

    #container .qanda .text {
        font-size: .8rem;
        margin: 0 auto;
        width: 100%;
    }

    #container .qanda .graph {
        margin: 0 auto 10px;
        width: 100%;
    }

    #container .hexagon {
        margin: -9% 90% 0 -70px;
        width: 30%;
    }

    /*-------------------
    uservoice
-------------------*/
    #container .user {
        width: 100%;
    }

    #container .user li {
        margin: 0 auto 15px;
        width: 320px;
    }

    #container .uservoice_inner {
        padding: 40px 0 5px;
    }

    /*-------------------
    movie
-------------------*/
    #container .movie_inner {
        padding: 0;
        margin: 30px 0;
        width: 100%;
    }

    /*-------------------
    list
-------------------*/
    #container .price_flex li {
        border-right: none;
        line-height: 1.2;
    }

    #container .list_inner {
        padding: 0px 20px 20px;
        width: 100%;
    }

    #container .allplice {
        width: 100%;
    }

    #container .product_item {
        width: 100%;
    }

    #container .price_flex p {
        font-size: 1.5rem;
    }

    #container .price_flex em {
        font-size: 1.6rem;
    }
}

@media screen and (min-width:480px) and (max-width:960px) {

    /*　スマホ横～タブレット 480pxから960pxまではここを読み込む　*/
    /*-------------------
   mainvisual
-------------------*/
    #container .mainvisual {
        background: url(/contents/shop/sevenbeauty/img/freepage/water_soluble_oil/tb_mv.jpg) no-repeat center;
        background: cover;
        background-size: 100%;
        padding: 0px 0 300px;
        width: 100%;
    }

    #container .mainvisual .text-box {
        padding: 50px 0 40px;
    }

    #container .repi {
        right: -77%;
        top: -345px;
    }

    #container .mainvisual h2 {
        padding: 0;
    }

    /*-------------------
   whats
-------------------*/
    #container .whats_inner {
        background-size: 63%;
        width: 100%;
    }

    /*-------------------
   satisfied
-------------------*/
    #container .satisfied_inner {
        width: 100%;
    }

    #container .merit dt {
        width: 38%;
        margin: 0 10px 0 0;
    }

    #container .merit {
        width: 90%;
    }

    /*-------------------
   points
-------------------*/
    #container .point-box_1,
    #container .point-box_2,
    #container .point-box_3 {
        width: 90%;
    }

    #container .point-box_1 p,
    #container .point-box_2 p,
    #container .point-box_3 p {
        width: 100%;
    }

    #container .towel {
        width: 90%;
    }

    #container .up {
        width: 100%;
    }

    /*-------------------
   question
-------------------*/
    #container .question_inner {
        background-size: 33%;
        background-color: rgba(255, 255, 255, 0.7);
        background-blend-mode: lighten;
    }

    #container .qanda {
        width: 90%;
    }

    #container .question_inner p {
        width: 90%;
    }

    #container .qanda .graph {
        width: 48%;
        margin: 0 10px 0 0;
    }

    /*-------------------
    uservoice
-------------------*/
    #container .user {
        width: 100%;
    }

    #container .user li {
        margin: 0 auto 24px;
        text-align: center;
        width: 480px;
    }

    #container .impressions {
        text-align: left;
    }

    /*-------------------
    movie
-------------------*/
    #container .movie_inner {
        width: 100%;
    }

    /*-------------------
    list
-------------------*/
    #container .allplice {
        width: 100%;
    }

    #container .list_inner {
        width: 100%;
    }

    #container .product_item {
        width: 100%;
    }

    @media screen and (min-width:960px) {

        /*　小・大画面デスクトップ　960pxからはここを読み込む　*/
        /*-------------------
   whats
-------------------*/
        #container .whats_inner .text-box {
            word-break: keep-all;
        }

        /*-------------------
   question
-------------------*/
        #container .qanda_flex {
            display: flex;
        }
    }