@charset "utf-8";

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

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

/*-------------------
   common
-------------------*/
.wrapper {
    font-family: 'Ubuntu', "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, "遊ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ ゴシック', sans-serif;
    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まで  */

/*-- 画面外にいる状態 --*/
.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: #313131;
    font-size: 1.5rem;
}

/*-------------------
   mainvisual
-------------------*/
#container .mainvisual_inner {
    background: url(/contents/shop/sevenbeauty/img/freepage/sheetmask/mv_pc.jpg) no-repeat center;
    background-size: cover;
    margin: 0 auto;
    padding: 1% 0;
    text-align: center;
}

#container h1 {
    margin: 20px auto;
    text-align: center;
}

/*-------------------
   media-area 
-------------------*/
#container .media-area {
    padding: 0;
    margin: auto;
    width: 1000px;
}
#container .neumo {
    background-color: #FFF; 
    border: 1px solid #83DAC9;
    border-radius: 10px;
    margin:7% 6%;
    transition: all .2s ease-in-out;
}
#container .neumo h2 {
    background: none;
    color: #565656;
    line-height: 1.5rem;
    font-size: 1.2rem;
    margin: 3% 7%;
    font-family: 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', sans-serif;
    font-weight: normal;
    padding: 3% 0;
    position: relative;
    text-align: center;
    font-feature-settings: "palt";
    letter-spacing: .1em;
}
#container .neumo .br-pc {
    display: none;
}
#container .neumo dt {
    margin: 3% auto;
    text-align: center;
    width: 100%;  
}
#container .media-area img {
    width: 90%;  
    text-align: center;
}
#container .btn-area {
    justify-content: center;
    display: flex;
    flex-flow: nowrap;
    margin: 10px auto 20px;
    position: relative;
    max-width: 1170px;
}
.btn-area .button {
    position: relative;
    display: inline-block;
    padding: 0.8em 2em;
    border: 1px solid #c3c3c3;
    border-radius: 10px;
    color: #7c858e;
    margin: 10px 10px 0;
    text-align: center;
    text-decoration: none;
    transition: all .3s;
    width: 90%;
}
.btn-area .button::after {
    right: 1em;
    position: absolute;
    top: 50%;
    content: '';
    margin-top: -5px;
    width: 6px;
    height: 6px;
    border: 0px;
    border-top: solid 2px #7c858e;
    border-right: solid 2px #7c858e;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-left-color: #fff;
    transition: all .3s;}
.btn-area .button:hover{
    box-shadow: 1px 1px 10px rgba(80, 80, 80, 0.65);
    background-color: #83DAC9;
    } 


/*-------------------
   navi
-------------------*/
#container .navi_inner {
    margin: 10px auto 30px;
    text-align: center;
    width: 1000px;
}

#container .obi {
    font-size: 1rem;
    letter-spacing: 5px;
    line-height: 2;
    margin: 0 auto;
    text-align: center;
    width: 1000px;
}

#container .obi em {
    font-size: 1.5rem;
    font-weight: bold;
}

#container .navibtn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    padding: 0 0 15px;
    width: 84%;
}

#container .btn {
    background-color: #FFF;
    border: 1px solid #aeaeae;
    border-radius: 10px;
    display: block;
    line-height: 2;
    margin: 0 auto 10px;
    transition: all .2s ease-in-out;
    width: 270px;
}

#container .btn img {
    margin: 0 5px 0 0;
    vertical-align: middle;
}

#container .btn a {
    display: block;
    font-size: 1.1rem;
    letter-spacing: 3px;
    margin: 0 auto;
    padding: 0 0 0 25px;
    position: relative;
    text-align: left;
}

#container .btn:hover {
    box-shadow: 1px 1px 10px rgba(80, 80, 80, 0.65);
}

#container .btn p {
    display: inline-block;
}

#container .triangle {
    color: #333;
    display: inline-block;
    padding-left: 20px;
    position: relative;
    text-decoration: none;
}

#container .triangle:before {
    background: #333;
    border-radius: 50%;
    content: '';
    height: 20px;
    left: -6px;
    margin-top: -18px;
    position: absolute;
    top: 50%;
    width: 20px;
}

#container .triangle:after {
    border: 0;
    border-bottom: solid 2px #FFF;
    border-right: solid 2px #FFF;
    content: '';
    height: 6px;
    left: 0;
    margin-top: -13px;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
    width: 6px;
}

#container .lpk {
    color: #ce91b5;
}

#container .org {
    color: #d6682f;
}

#container .lblu {
    color: #0669c4;
}

#container .mnt {
    color: #3aa0a7;
}

#container .pnk {
    color: #f26cbc;
}

#container .bld {
    color: #b3164b;
}

#container .nvy {
    color: #263f7b;
}

#container .gry {
    color: #858585;
}

#container .grn {
    color: #009fb4;
}

#container .blu {
    color: #3243c2;
}

#container .yel {
    color: #ca9915;
}
#container .lem {
    color: #ecbd45;
}
#container .tea {
    color: #774138;
}
#container .pur {
    color: #747195;
}

/*-------------------
    list
-------------------*/
#container .list_inner {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    text-align: center;
    width: 800px;
}

#container .inner_box {
    margin: 30px auto;
}

#container .title {
    font-size: 1.5rem;
    line-height: 1.5;
    letter-spacing: 3px;
    margin: 8px auto;
    padding: 10px;
    transform: skew(-15deg);
    width: 50%;
}

#container .pic {
    display: inline-block;
    margin: auto 0;
    width: 41%;
}

#container .pic li {
    margin: 4px 0;
}

#container .text {
    display: inline-block;
    padding: 24px 16px 16px 0px;
    width: 58%;
}

#container dt {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 1.2rem;
    text-align: left;
}

#container dt a {
    font-weight: bold;
    line-height: 1.2;
    margin: 0 0 5px;
}

#container dt em {
    font-size: 1.5rem;
    font-weight: bold;
}

#container dd {
    font-size: 1rem;
    text-align: left;
    line-height: 1.5;
}

#container hr {
    margin: 36px 0 10px;
}

#container .kome {
    display: inline-block;
    font-size: .7rem;
}

#container .caution {
    font-size: .7rem;
    text-align: right;
    margin: 4px 0 0;
}

#container .explanation {
    width: 90%;
}

#container .box {
    border: solid 2px black;
    float: left;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    height: 86px;
    margin: 16px 5px;
    padding: 6px;
    text-align: center;
    width: 86px;
}

#container .top {
    border-bottom: solid 2px black;
    font-size: 1rem;
    font-weight: bold;
    margin: 4px 0;
}

#container .top p {
    font-size: .9rem;
    font-weight: bold;
    line-height: 1;
    margin: 8px 0 0;
}

#container .under {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 4px 0;
}

#container .under p {
    font-size: .9rem;
    font-weight: bold;
    line-height: 1;
    margin: 8px 0 0;
}

#container .buy {
    border-radius: 30px;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 3px;
    line-height: 2.5;
    margin: 10px auto 20px;
    width: 70%
}

#container .buy:hover {
    opacity: 0.7;
}

#container .arrow {
    display: inline-block;
    padding-left: 20px;
    position: relative;
}

#container .arrow::after {
    content: '';
    height: 6px;
    border: 0px;
    border-top: solid 2px white;
    border-right: solid 2px white;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    left: 5px;
    margin-top: -10px;
    width: 6px;
}

/*-- ヒト幹細胞エキス --*/
#container .cellogy .title {
    color: #ce91b5;
    background: #f7e3ee;
}

#container .cellogy .buy {
    background-color: #ce91b5;
}

/*-- 馬油 --*/
#container .horseoil .title {
    color: #d6682f;
    background: #f9e6dd;
}

#container .horseoil .buy {
    background-color: #d6682f;
}

/*-- 高濃度水素 --*/
#container .hydrogen .title {
    color: #0669c4;
    background: #d9e6f3;
}

#container .hydrogen .buy {
    background-color: #0669c4;
}

/*-- ビタミンC --*/
#container .vitamin-c .title {
    color: #e1bd3c;
    background: #f9f6bf;
}

#container .vitamin-c .buy {
    background-color: #e5ce0e;
}

/*-- CICA --*/
#container .cica .title {
    color: #1a6446;
    background: #d9e6e0;
}

#container .cica .buy {
    background-color: #1a6445;
}
/*-- プラセンタ --*/
#container .placenta .title {
    color: #3aa0a7;
    background: #c8e1e3;
}

#container .placenta .buy {
    background-color: #3aa0a7;
}

/*-- コラーゲン --*/
#container .collagen .title {
    color: #f26cbc;
    background: #f7e7f1;
}

#container .collagen .buy {
    background-color: #f26cbc;
}

/*-- スーパーフード --*/
#container .superfood .title {
    color: #b3164b;
    background: #f1e1e7;
}

#container .superfood .buy {
    background-color: #b3164b;
}

/*-- 多機能 --*/
#container .multi .title {
    color: #000;
    background: rgb(223, 223, 223);
}

#container .multi .buy {
    background-color: #000;
}

#container .multi_line {
    border-top: #000 1px dashed;
}

/*-- ス―ジングマスク --*/
#container .soothing .title {
    color: #747194;
    background: #dcdbe4;
}

#container .soothing .buy {
    background-color: #83819a;
}

/*-- シワ改善 --*/
#container .wrinkle .title {
    color: #613b32;
    background: #d7cecc;
}

#container .wrinkle .buy {
    background-color: #7e5e57;
}

/*-- 高保湿 --*/
#container .moistur .title {
    color: #263f7b;
    background: #dde1ed;
}

#container .moistur .buy {
    background-color: #263f7b;
}

#container .moistur_line {
    border-top: #263f7b 1px dashed;
}

/*-- リフトアップ --*/
#container .lihting .title {
    color: #858585;
    background: #e4e4e4;
}

#container .lihting .buy {
    background-color: #858585;
}

/*-- ニキビ予防 --*/
#container .ni-kibi .title {
    color: #009fb4;
    background: #d2e5e7;
}

#container .ni-kibi .buy {
    background-color: #009fb4;
}

/*-- 美白ケア --*/
#container .b-haku .title {
    color: #3243c2;
    background: #d9dbeb;
}

#container .b-haku .buy {
    background-color: #3243c2;
}

/*-- エイジングケア --*/
#container .golden .title {
    color: #ca9915;
    background: #f1e9d4;
}

#container .golden .buy {
    background-color: #ca9915;
}

#container .golden_line {
    border-top: #ca9915 1px dashed;
}

/*-- ミックスセラム --*/
#container .mixserum-vc .buy {
    background-color: #f2ca53;
}
#container .mixserum-cica .buy {
    background-color: #489672;
}
#container .mixserum-niacinamide .buy {
    background-color: #ec84a7;
}
#container .mixserum-hyaluronic .buy {
    background-color: #4bcbef;
}
#container .mixserum-lactic .buy {
    background-color: #e93453;
}

/*-------------------
    graph
-------------------*/
#container .graph h2 {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 1.9rem;
    font-weight: bold;
    margin: 40px auto 0;
    text-align: center;
}

#container .graph_box {
    margin: 20px auto 0;
}

#container .graph_inner {
    border: #cccccc solid 2px;
    margin: 0 auto;
    width: 800px;
}

#container .graph_inner .ttl {
    height: 40px;
}

#container .ttl_1,
#container .ttl_2,
#container .ttl_3 {
    background-color: #eef1f4;
    color: #333333;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}

#container .graph_1 {
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    width: 30%;
}

#container .graph_2 {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    width: 40%;
}

#container .graph_3 {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    width: 30%;
}

#container .graph_1 p {
    font-size: .9rem;
    line-height: 1.5;
    margin: 0 auto;
    text-align: center;
}

#container .graph_1 .buy {
    border-radius: 20px;
    color: white;
    font-size: .9rem;
    font-weight: bold;
    letter-spacing: 3px;
    line-height: 1.5;
    padding: 5px 5px 5px 14px;
    width: 90%;
}

#container .brown {
    border-radius: 20px;
    background-color: #522c0e;
    margin: 0 auto;
    width: 90%;
}

#container .dgreen {
    border-radius: 20px;
    background-color: #426112;
    margin: 0 auto;
    width: 90%;
}

/*-------------------
    all
-------------------*/
#container .all {
    margin: 0 auto;
    text-align: center;
}

#container .all .all_btn {
    font-size: 1.2rem;
    color: #888888;
    border: #aeaeae 1px solid;
    background-color: #FFF;
    display: block;
    line-height: 1.5;
    border-radius: 10px;
    padding: 10px;
    margin: 60px auto 0;
    text-align: center;
    width: 80%;
}

#container .all .all_btn:hover {
    box-shadow: 1px 1px 10px rgba(80, 80, 80, 0.65);
}

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

    /*　スマホ縦　i6 / i6plus / i7  320pxから480pxまではここを読み込む　*/
    /*-------------------
   mainvisual
-------------------*/
    #container .mainvisual {
        padding: 0;
        width: 100%;
    }

    #container .mainvisual_inner {
        background: url(/contents/shop/sevenbeauty/img/freepage/sheetmask/mv_sp.jpg) no-repeat center;
        background-size: cover;
        padding: 20px;
    }

    #container h1 {
        margin: 0 0 0 40%;
    }

    /* ----------------
media-area
-------------------*/
#container .media-area {
    width: 100%;
}

    /*-------------------
   navi
-------------------*/
    #container .navi_inner {
        width: 100%;
    }

    #container .btn img {
        margin: 0 auto 0 6px;
        width: 30%;
    }

    #container .btn {
        padding: 0;
        margin: 0 3px 10px;
        width: 168px
    }

    #container .btn a {
        font-size: .9rem;
        padding: 0;
        margin: 0 auto;
        letter-spacing: 0px;
    }

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

    #container .navibtn {
        padding: 0;
        width: 100%;
    }

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

    #container .inner_box {
        margin: 14px auto;
        width: 96%;
    }

    #container .title {
        width: 77%;
    }

    #container dd {
        font-size: .9rem;
    }

    #container .pic {
        width: 100%;
    }

    #container .text {
        padding: 16px;
        width: 100%;
    }

    #container .explanation {
        width: 100%;
    }

    #container .box {
        margin: 16px 3px;
    }

    #container .pic li {
        margin: 0 auto;
        width: 65%;
    }

    /*-------------------
    graph
-------------------*/
    #container .graph_box {
        border: #858585 solid 2px;
        height: 520px;
        width: 96%;
        overflow: scroll;
    }

    #container .graph_inner {
        border: none;
        max-width: 600px;
        margin: 0 auto;
    }

    #container .ttl_1,
    #container .ttl_2,
    #container .ttl_3 {
        font-size: .9rem;
        letter-spacing: -1px;
    }

    #container .graph_1 .buy {
        letter-spacing: 0;
        padding: 5px 5px 5px 10px;
        margin: 10px auto;
    }

    #container .ttl_1 {
        position: sticky;
        top: 0;
        left: 0;
        z-index: 2;
    }

    #container .ttl_2,
    #container .ttl_3,
    #container .graph_1 {
        position: sticky;
        top: 0;
        left: 0;
        z-index: 1;
    }

    #container .ttl_2:before,
    #container .ttl_3:before,
    #container .graph_1:before {
        content: "";
        position: absolute;
        top: -1px;
        left: -1px;
        width: 100%;
        height: 100%;
        border: 1px solid #ccc;
    }

    #container .graph_1 {
        width: 28%;
        padding: 0;
    }

    #container .graph_1 p {
        line-height: 1.3;
        margin: 0 auto;
        font-size: .8rem;
        padding: 0 2px;
    }

    #container .graph_1 img {
        width: 70%;
    }

    #container .graph_2,
    #container .graph_2 {
        width: 36%;
    }

    #container .graph_2 img,
    #container .graph_3 img {
        width: 90%;
    }

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

    #container .all .all_btn {
        margin: 40px auto 0;
        width: 90%;
    }
}

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

    /*　スマホ横～タブレット 480pxから1024pxまではここを読み込む　*/
    /*-------------------
   mainvisual
-------------------*/
    #container .mainvisual {
        padding: 0;
        width: 100%;
    }

    #container .mainvisual_inner {
        background-size: cover;
        height: auto;
        width: 100%;
    }

    /* ----------------
media-area
-------------------*/
#container .media-area {
    width: 100%;
}
#container .neumo .br-sp {
    display: none;
}
#container .neumo .br-pc {
    display: block;
}
#container .neumo h2 {
    line-height: 2.0rem;
    font-size: 1.7rem;
}

    /*-------------------
   navi
-------------------*/
    #container .navi_inner {
        width: 100%;
    }

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

    #container .navibtn {
        padding: 16px 47px;
    }

    #container .obi {
        margin: 0 0 5px;
        width: 100%;
    }

    /*-------------------
    graph
-------------------*/
    #container .graph_box {
        display: flex;
    }

    @media screen and (min-width:375px) and (max-width:480px) {
        /*　スマホ縦　i6 / i6plus / i7  320pxから480pxまではここを読み込む　*/
    }

    @media screen and (min-width:320px) and (max-width:374px) {
        /*　ihone5/5E　320pxから374pxはここを読み込む　*/
    }
}

@media screen and (min-width:960px) {
    /*　小・大画面デスクトップ　960pxからはここを読み込む　*/

    #container .navibtn {
        justify-content: flex-start;
    }

    #container .btn {
        margin: 0 5px 10px;
    }

        /* ----------------
    media-area
    -------------------*/
    #container .all {
        width: 1000px;
    }
    #container .br-sp {
        display: none;
    }
    #container .width {
        margin: 0 auto;
        width: 1040px;
    }
    #container .br-sp {
        display: none;
    }
    #container .neumo {
        margin: 7% 6%;
    }
    #container .neumo .br-pc {
        display: block;
    }
    #container .btn-area .button {
        padding: 1em 2em;
        margin: 20px 10px 20px;
        font-size: 1.2rem;
        width: 85%;
    }
    #container .media-area img {
        width: 450px;
    } 
    #container .neumo h2 {
        line-height: 2.0rem;
        font-size: 1.7rem;
        margin: 5% 5% 0;
        padding: 1% 0;
    }
    
}