@charset "utf-8";

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

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

/*-------------------
   common
-------------------*/
.wrapper {
    font: 1.0em/1.2 'Ubuntu', "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, "遊ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ ゴシック', sans-serif;
    font-feature-settings: "palt";
    letter-spacing: .1em;
    padding: 0 0 40px;
    position: relative;
}

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

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

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

/*---7esthe_mobile.css リセットOP対策----*/
#container h3,
#container h4,
#container h5 {
    background: none;
    color: #000;
    cursor: auto;
    float: none;
}

#container h3 span,
#container h4 span,
#container h5 span {
    background: none;
    color: #000;
    cursor: auto;
    float: none;
}

#container .flex {
    align-items: flex-start;
    display: flex;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    flex-wrap: wrap;
    margin: 0 auto;
}

/*--7esthe_mobile.css 商品ページ用リセットOP対策　----*/
.write_box {
    margin: 0;
    padding: 0;
}

#mobile_detail_content {
    font-size: 1.0em;
}

.item_explanation .cont {
    margin: 0;
    padding: 0;
}

/*ブレイクポイントのルール*/
/* -スマホ基本設計 解像度に依存しない-
 *350pxまで：SP縦 i5 SE
 *350px〜480px：SP縦 i6-8　****一番重要****
 *480px〜960px：SP横からタブレット
 *960px〜小型PC　大型PC
 
 /*  全体指定 スマホ縦 i5 i5SE　350pxまで  */


/* ボタンデザイン自由に変えてください  */
.buy-btn {
    background: #9dd53a;
    background: -moz-linear-gradient(top, #9dd53a 0%, #7cbc0a 100%);
    background: -webkit-linear-gradient(top, #9dd53a 0%, #7cbc0a 100%);
    background: linear-gradient(to bottom, #9dd53a 0%, #7cbc0a 100%);
    border: #99b61e 1px solid;
    border-radius: 5px;
    color: #fff;
    display: block;
    font: bold 1.6rem/2.6 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    position: relative;
    margin: 20px auto 40px;
    text-align: center;
    width: 60%;
}

.buy-btn a {
    color: #fff;
    display: block;
    text-decoration: none;
}

.buy-btn a::before {
    border: solid 5px transparent;
    border-left: solid 7px #fff;
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    position: relative;
    top: -1px;
}

.buy-btn:hover {
    filter: alpha(opacity=90);
    opacity: 0.7;
    transition: all ease-in 0.4s;
}

/*-- 画面外にいる状態 --*/
.fadein {
    opacity: 0;
    transform: translate(0, 30px);
    transition: ease-in 400ms;
}

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

#container section {
    margin: 10px auto 0;
    padding: 10px 10px 0;
}


/*-------------------
   mainvisual
-------------------*/

#container .wrapper .mainvisual {
    display: block;
    position: relative;
    background: url(/contents/shop/sevenbeauty/img/freepage/h_typebed/sp_typebed_top.jpg) no-repeat;
    background-size: 100%;
    height: 200px;
}

#container .mainvisual .sub-title {
    display: none;
}

#container .mainvisual .headtitle {
    display: none;
}

#container .mainvisual .title-desc {
    display: none;
}

#container .mainvisual .price {
    display: none;
}

#container .sec1 .sec1_box {
    border-radius: 10px;
    border: solid 1px #b6a49a;
    height: auto;
    margin: 10px 1%;
}

#container .sec1 .sec1_box .s_title {
    border-radius: 10px 10px 0 0;
    background-color: #b6a49a;
    color: #fff;
    font: bold 1.2em/1.4 'Ubuntu', "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, "遊ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ ゴシック', sans-serif;
    padding: 0 20px;
}

#container .sec1 .sec1_box .s_title span {
    color: #f5f19a;
    font-size: 1.4 em;
}

#container .sec1 .sec1_box .s_title em {
    font-size: 1.2em;
    color: #fff;
}

#container .sec1 .sec1_box .text {
    z-index: 50;
    padding: 10px 20px;
    font: 1.0em/1.5 'Ubuntu', "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, "遊ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ ゴシック', sans-serif;
}

#container .sec1 .sec1_box .img {
    margin: -35px 0 0 0;
}

#container h2 {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.94, #f2f6f9), color-stop(0.00, #fff));
    background: -webkit-linear-gradient(top, #fff 0%, #f2f6f9 94%);
    background: linear-gradient(to bottom, #fff 0%, #f2f6f9 94%);
    border-bottom: solid 2px #cdd4d8;
    border-left: solid 6px #b8a69d;
    color: #692a00;
    font: normal 1.3em/1.3 'Ubuntu', "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, "遊ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ ゴシック', sans-serif;
    padding: 5px 0 0 5px;
    margin-top: 20px;
}

.sec2 .sec2_1::before {
    content: '';
    display: inline-block;
    width: 35px;
    height: 27px;
    background: url(/contents/shop/sevenbeauty/img/freepage/h_typebed/sec2_1.png) no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin: 0 5px 0 0;
}

.sec2 .sec2_2::before {
    content: '';
    display: inline-block;
    width: 35px;
    height: 27px;
    background: url(/contents/shop/sevenbeauty/img/freepage/h_typebed/sec2_2.png) no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin: 0 5px 0 0;
}

#container .wrapper .sec3 ul {
    margin: 10px 0;
}

#container .wrapper .sec3 li {
    margin: 5px;
}

#container .wrapper .sec3 .no {
    color: #fff;
    background-color: #666;
    text-align: left;
    width: 62px;
    line-height: 22px;
    border: solid 1px #666;
    padding: 0 0px 0 5px;
}

#container .wrapper .sec3 .price {
    text-align: right;
    font: bold 1.5em/1 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color: #ec008c;
    letter-spacing: -2px;
}

#container .wrapper .sec3 .btn {
    display: block;
    border-radius: 5px;
    margin: 5px auto;
    text-align: center;
    width: 70%;
    line-height: 25px;
    font-weight: bold;
    font-size: 1.2em;
    border: solid 1px #ec008c;
    color: #ec008c;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.94, #f2f6f9), color-stop(0.00, #fff));
    background: -webkit-linear-gradient(top, #fff 0%, #f2f6f9 94%);
    background: linear-gradient(to bottom, #fff 0%, #f2f6f9 94%);
}

.item-movie {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.item-movie iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}

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

    /*　スマホ縦　i6 / i6plus / i7  350pxから480pxまではここを読み込む　*/
    #container .wrapper .mainvisual {
        height: 240px;
    }
}

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

    /*　スマホ横～タブレット 480pxから960pxまではここを読み込む　*/
    #container .wrapper .mainvisual {
        height: 445px;
    }

    #container .sec1 .sec1_box {
        width: calc(95% / 2);
    }

    #container .wrapper .sec3 ul {
        margin: 10px 5px;
    }
}

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

    /*　小・大画面デスクトップ　960pxからはここを読み込む　*/
    #container .wrapper .mainvisual {
        background: url(/contents/shop/sevenbeauty/img/freepage/h_typebed/pc_top.jpg) no-repeat;
        height: 623px;
        width: 1040px;
        margin: 0 auto;
    }

    #container .mainvisual .sub-title {
        display: contents;
        color: #fff;
        background-color: #692a00;
        border-radius: 10px;
        display: inline-block;
        font: bold 2em/.8 "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
        padding: 8px 20px;
        position: absolute;
        left: 520px;
        top: 40px;
    }

    #container .mainvisual .headtitle {
        display: contents;
        color: #692a00;
        font: bold 3em/1 "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
        display: inline-block;
        position: absolute;
        left: 530px;
        top: 120px;
    }

    #container .mainvisual .headtitle span {
        font-size: 3.5em;
    }

    #container .mainvisual .title-desc {
        display: contents;
        font: 1.2em/1.5 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
        position: absolute;
        left: 520px;
        display: inline-block;
        top: 340px;
        width: 460px;
    }

    #container .mainvisual .price {
        display: contents;
    }

    #container .mainvisual .price img {
        position: absolute;
        top: 430px;
        left: 500px;
    }

    #container .wrapper section {
        width: 1040px;
        clear: both;
    }

    #container .sec1 .sec1_box {
        width: calc(95% / 2);
    }

    #container .sec1 .sec1_box .img {
        margin: -70px 0 0 0;
    }

    #container .sec1 .sec1_box .s_title {
        font: bold 1.9em/1.4 'Ubuntu', "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, "遊ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ ゴシック', sans-serif;
    }

    #container .sec1 .sec1_box .s_title span {
        font-size: 1.4em;
    }

    #container .sec1 .sec1_box .text {
        font: 1.4em/1.5 'Ubuntu', "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, "遊ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ ゴシック', sans-serif;
    }

    #container h2 {
        font: normal 2.3em/1.3 'Ubuntu', "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, "遊ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ ゴシック', sans-serif;
    }

    .sec2 .sec2_1::before {
        width: 66px;
        height: 48px;
    }

    .sec2 .sec2_2::before {
        width: 66px;
        height: 48px;
    }

    .contents p,
    .contents .table,
    #footer .section_wrap p {
        margin: 0 auto 0.5em auto;
        font: 1.3em/1.5 'Ubuntu', "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, "遊ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ ゴシック', sans-serif;
        margin: 20px 5px;
    }

    #container .sec2 .img {
        float: left;
    }

    #container .sec3 .item img {
        float: left;
        margin: 20px 40px 60px 10px;
        width: 60%;
    }

    #container .sec3 .item ul {
        display: block;
        float: right;
        margin: 10px;
        width: 320px;
    }

    #container .sec3 .item-last img {
        float: left;
        margin: 20px 40px 60px 10px;
        width: 60%;
    }

    #container .sec3 .item-last ul {
        display: block;
        float: right;
        margin: 10px;
        width: 320px;
    }

    #container .wrapper .sec3 .btn {
        width: 95%;
        line-height: 70px;
        font-size: 2.0em;
    }

    #container .wrapper .sec3 .size {
        font: bold 1.5em/1 'Ubuntu', "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, "遊ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ ゴシック', sans-serif;
    }

    #container .wrapper .sec3 .price {
        font: bold 2.2em/1 'Ubuntu', "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, "遊ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ ゴシック', sans-serif;
    }

    #container .sec4 .combibed {
        text-align: center;
    }

    /*-------------------
   footer
-------------------*/
    #container .page-top {
        display: block;
        margin: 30px auto;
        text-align: center;
    }

    .item-movie {
        position: relative;
        width: 100%;
        padding-top: 56.25%;
    }

    .item-movie iframe {
        position: absolute;
        top: 0;
        right: 0;
        width: 100% !important;
        height: 100% !important;
    }