@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 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-feature-settings: "palt";
    letter-spacing: .1em;
    margin: 0 0 5%;
    padding: 0 0 20px;
    position: relative;
}

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

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

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

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

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


/* ボタンデザイン自由に変えてください  */
#container .buy-btn a {
    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.2rem/2 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    position: relative;
    margin: 10px auto 0;
    text-align: center;
    text-decoration: none;
    width: 100%;
}

#container .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;
}

#container .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);
}

/*-------------------
   .mainvisual
-------------------*/
#container .mainvisual {
    background: url(/contents/shop/sevenbeauty/img/freepage/volumelash/mainvisual-bg-sp.jpg) no-repeat;
    background-size: 100%;
    padding: 10% 5% 8%;
    margin: 0;
}

#container .head-catch {
    color: #666;
    font: bold 1.5rem/1.2 "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
    margin: 5px auto;
    text-align: center;
}

#container .headtitle {
    color: #fd4b85;
    display: block;
    font: bold 2.4rem/1.2 "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
    letter-spacing: -2px;
    margin: 3% auto;
    text-align: center;
}

#container .head-name {
    color: #666;
    font: 1.2rem/1.2 "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
    letter-spacing: -1px;
    margin: 40% 0 0;
    text-align: center;
}

#container .head-name em {
    color: #666;
    display: block;
    font-size: 1.5rem;
}

/* about */
#container .about-wrap .about-title {
    font: 1.5rem/1.2 "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
    letter-spacing: -1px;
    margin: 8% 0 0;
    text-align: center;
}

#container .about-wrap .about-desc-txt {
    font: 0.9rem/1.6 'Ubuntu', "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, "遊ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ ゴシック', sans-serif;
    margin: 2% auto 0;
    width: 90%;
}

#container nav {
    border: dotted 2px #fd4b85;
    margin: 20px auto;
    padding: 5%;
    width: 90%;
}

#container nav .nav-title {
    color: #fd4b85;
    font: 1.3rem/1.2 'Ubuntu', "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, "遊ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ ゴシック', sans-serif;
    margin: 0 0 3%;
}

#container nav li {
    font: 0.9rem/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    margin: 0 0 3%;
}

#container nav li:last-child {
    margin: 0;
}

#container nav li a:before {
    content: "・";
}

/*------------------------
   section 共通
-------------------------*/
#container .section-title {
    border-bottom: solid 1px #000;
    color: #000;
    font: 0.9rem/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    margin: 10% auto 5%;
    padding: 0 5% 1%;
    text-align: center;
}

#container .section-title strong {
    display: block;
    font: bold 1.8rem/1.2 "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
    letter-spacing: -2px;
}

#container .sub-title {
    border-left: solid 7px #000;
    color: #000;
    font: bold 1.3rem/1.3 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    margin: 0 auto 3%;
    padding-left: 2%;
    width: 90%;
}


/*-------------------
   section1
--------------------*/
#container .lash-system {
    margin: 0 auto;
    width: 90%;
}

#container .lash-system li h3 {
    color: #000;
    font: bold 1.3rem/1.2 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    margin: 8% 0 0;
    text-align: center;
}

#container .lash-system li img {
    display: block;
    margin: 0 auto;
    width: 100%;
}

#container .lash-system li p {
    font: 0.9rem/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    width: 96%;
}

/* デザインイメージ */
#container #image .design {
    margin: 0 auto;
    width: 90%;
}

#container #image .design li {
    font: 0.9rem/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    margin: 5% 0 0;
    text-align: center;
    width: 100%;
}

#container #image .design li span {
    display: inline-block;
    text-align: center;
    width: 50%;
}

#container #image .design li img {
    display: block;
    margin: 0 auto 3%;
    width: 100%;
}

#container #image .buy-btn a {
    margin: 5% auto 0;
    width: 90%;
}

/* 本数の数え方 */
#container .check-list {
    margin: 10% auto;
    width: 90%;
}

#container .check-list .check-title {
    font: bold 1.1rem/1.2 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    margin: 0 0 3%;
    text-align: center;
}

#container .check-list .check-title strong {
    color: #fd4b85;
    display: block;
}

#container .check-list dt,
#container .check-list dd {
    float: right;
    margin: 0;
    width: 38%;
}

#container .check-list dl .left {
    float: left;
    width: 60%;
}

#container .check-list dt {
    background-color: #b5b5b5;
    color: #fff;
    font: bold 0.9rem/1.2 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    height: 48px;
    letter-spacing: -1px;
    padding: 2%;
    text-align: center;
}

#container .check-list dt:nth-child(2) {
    padding: 4.5% 0;
}

#container .check-list dd {
    border: solid 1px #b5b5b5;
    color: #666;
    font: 0.9rem/1.2 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    letter-spacing: -0.5px;
    margin: 1% 0 0;
    padding: 1%;
    text-align: center;
}

/*-------------------
   section2
--------------------*/
#container .merit,
#container .demerit {
    margin: 5% auto;
    width: 90%;
}

#container .merit {
    border: solid 1px #fd4b85;
}

#container .demerit {
    border: solid 1px #666;
}

#container .merit dt,
#container .demerit dt {
    color: #fff;
    font: bold 1.3rem/2 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center;
}

#container .merit dt {
    background-color: #fd4b85;
}

#container .demerit dt {
    background-color: #666;
}

#container .merit dd,
#container .demerit dd {
    font: 0.9rem/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    margin: 4% 5%;
}

#container .merit dd::before,
#container .demerit dd::before {
    content: "・";
}

#container .sec2 .text {
    font: 0.9rem/1.6 'Ubuntu', "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, "遊ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ ゴシック', sans-serif;
    margin: 0 auto;
    width: 90%;
}

/*-------------------
   section3
--------------------*/
#container .sec3 .text {
    font: 0.9rem/1.6 'Ubuntu', "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, "遊ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ ゴシック', sans-serif;
    margin: 5% auto;
    width: 90%;
}

#container .sec3 .text img {
    display: block;
    margin: 0 0 3%;
    width: 100%;
}

#container .sec3 ul {
    margin: 0 0 5%;
}

#container .sec3 ul li {
    font: 0.9rem/1.6 'Ubuntu', "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, "遊ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ ゴシック', sans-serif;
    margin: 0 auto;
    width: 90%;
}

#container .sec3 ul li:before {
    content: "・";
}

#container .sec3 dl {
    margin: 0 auto;
    padding: 8% 0 0;
    position: relative;
    width: 90%;
}

#container .sec3 dl:first-of-type:before {
    content: "たとえば";
    font: 1.5rem "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    position: absolute;
    top: 2px;
    left: 0;
    transform: rotate(-10deg);
}

#container .sec3 dt {
    border-bottom: solid 1px #000;
    font: 1.2rem/1.2 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    margin: 5% auto 3%;
    text-align: center;
}

#container .sec3 dd {
    font: 0.9rem/1.6 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#container .sec3 dl dd:first-of-type::after {
    content: url(/contents/shop/sevenbeauty/img/freepage/volumelash/arrow.png);
    display: block;
    margin: 0 auto;
    text-align: center;
}

/*-------------------
   section4
--------------------*/
#container .sec4 .left-img {
    display: block;
    margin: 0 auto;
    width: 90%;
}

#container .sec4 .right {
    margin: 5% auto 8%;
    width: 90%;
}

#container .sec4 .single,
#container .sec4 .volume {
    border-radius: 25px;
    color: #fff;
    display: block;
    font: 1.2rem/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    margin: 5% auto 3%;
    padding: 1%;
    text-align: center;
    width: 80%;
}

#container .sec4 .single {
    background-color: #666;
}

#container .sec4 .volume {
    background-color: #ed7694;
}

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

#container .long-list dl {
    margin: 5% auto;
    width: 90%;
}

#container .sec4 .long-list dt,
#container .sec4 .long-list dd {
    float: left;
    margin: 1%;
    width: 48%;
}

#container .sec4 .long-list dt {
    background-color: #b5b5b5;
    color: #fff;
    font: bold 1.1rem/2 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center;
}

#container .sec4 .long-list dd {
    border: solid 1px #b5b5b5;
    color: #666;
    font: 1.1rem/2 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center;
}

#container .sec4 .cauntion {
    background-color: #eef4e7;
    margin: 5% auto;
    padding: 5%;
    width: 90%;
}

#container .caunt {
    color: #C33;
    font: bold 1.2rem/1.2 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    margin: 0;
    padding: 0;
}

#container .cauntion li {
    font: 0.9rem/1.6 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    margin: 3% 0 0;
}

#container .cauntion li:before {
    content: "・";
}

/*-------------------
   section5
--------------------*/
#container .sec5 .left-img {
    display: block;
    margin: 3% auto;
    width: 90%;
}

#container .sec5 .right {
    font: 0.9rem/1.6 'Ubuntu', "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, "遊ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ ゴシック', sans-serif;
    margin: 0 auto 5%;
    width: 90%;
}

#container .sec5 .fan-wrap {
    margin: 0 auto;
    width: 94%;
}

#container .fan {
    font: 1.1rem/1.2 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    margin: 0 2% 3%;
    text-align: center;
    width: 46%;
}

#container .fan dt {
    background-color: #ed7694;
    border-radius: 30px;
    color: #fff;
    font: 1.1rem/1.6 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    margin: 5% 0;
}

#container .fan dd {
    background-color: #eef4e7;
    font: 0.9rem/1.2 'Ubuntu', "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, "遊ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ ゴシック', sans-serif;
    letter-spacing: -0.5px;
    padding: 5%;
}

#container .fan dd img {
    display: block;
    margin: 0 auto;
    width: 100%;
}

#container .fan dd strong {
    display: block;
    font-size: 2.5rem;
}

#container .sec5 .text {
    font: 0.9rem/1.6 'Ubuntu', "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, "遊ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ ゴシック', sans-serif;
    margin: 0 auto 5%;
    width: 90%;
}

/*-------------------
   section6
--------------------*/
#container .howto {
    background-color: #eef4e7;
    margin: 5% auto;
    padding: 5%;
    width: 90%;
}

#container .step-list img {
    display: block;
    margin: 0 auto 3%;
    width: 100%;
}

#container .step-list .title {
    color: #000;
    font: 1.2rem/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#container .step-list .title em {
    color: #000;
    letter-spacing: -0.5px;
    font-weight: bold;
    padding-right: 8px;
}

#container .step-list .text {
    font: 0.9rem/1.6 'Ubuntu', "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, "遊ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ ゴシック', sans-serif;
    margin: 1% 0 8%;
}

#container .step-list .text strong {
    color: #C30;
}

#container .sec6 .movie .show-movie {
    font: 1.2rem/1.2 'Ubuntu', "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, "遊ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ ゴシック', sans-serif;
    text-align: center;
}

#container .sec6 .movie iframe {
    height: auto;
    width: 100%;
}

/*-------------------
   section8
--------------------*/
#container .item-list {
    margin: 3% auto 5%;
    width: 95%;
}

#container .buy-wrap .item-name {
    border-left: solid 8px #999;
    color: #000;
    font: 0.9rem/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    margin: 0 0 3%;
    padding: 0 2%;
}

#container .buy-wrap .item-name em {
    color: #000;
    display: block;
    font-size: 1.3rem;
}

#container .buy-wrap .item-list th {
    background-color: #666;
    border: solid 1px #999;
    color: #fff;
    font: 0.8rem/1.2 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    margin: 0;
    padding: 2%;
    text-align: center;
}

#container .buy-wrap .item-list td {
    font: 0.8rem/1.2 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    padding: 2%;
    text-align: center;
    vertical-align: middle;
}

#container .buy-wrap .item-list .curl {
    width: 22%;
}

#container .buy-wrap .item-list .long {
    text-align: center;
    width: 40%;
}

#container .buy-wrap .item-list .buy-btn a {
    font-size: 1rem;
    margin: 0 auto;
}

#container .item-bnr li {
    margin: 0 auto 3%;
    width: 90%;
}

#container .item-bnr {
    margin: 0 auto 5%;
}

#container .relation-wrap {
    margin: 0 auto;
    width: 94%;
}

#container .relation-wrap li {
    margin: 3% 2%;
    width: 46%;
}

#container .relation-wrap .item-name {
    font: 0.9rem/1.4 'Ubuntu', "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, "遊ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ ゴシック', sans-serif;
    margin: 3% 0 0;
}

#container .relation-wrap .buy-btn a {
    font-size: 1rem;
}

/*-------------------
   section9
--------------------*/
#container .sec9 .ban-btn a {
    background: #f0ac2a;
    background: -moz-linear-gradient(top, #f0ac2a 0%, #c98e00 100%);
    background: -webkit-linear-gradient(top, #f0ac2a 0%, #c98e00 100%);
    background: linear-gradient(to bottom, #f0ac2a 0%, #c98e00 100%);
    border: #ffb21f 1px solid;
    border-radius: 5px;
    color: #fff;
    display: block;
    font: bold 1.2rem/2 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    position: relative;
    margin: 10px auto 0;
    text-align: center;
    text-decoration: none;
    width: 90%;
}

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

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

/*-------------------
   category(footer)
-------------------*/
#container footer {
    background: none;
}

#container .category-title {
    border-bottom: solid 1px #000;
    border-left: solid 5px #ab4430;
    font: bold 1.2rem/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    letter-spacing: -1px;
    margin: 10% auto 0;
    padding: 0 0 0 2%;
    text-align: left;
    width: 90%;
}

#container .category {
    font: 0.9rem/2.2 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    margin: 0 auto;
    padding: 0;
    position: relative;
    width: 90%;
}

#container .category li {
    background-color: #fefefe;
    border-bottom: solid 1px #ccc;
    border-left: solid 1px #ccc;
    border-right: solid 1px #ccc;
    display: block;
    margin: 0;
    padding: 10px;
    position: relative;
}

#container .category li::after {
    display: block;
    content: '';
    position: absolute;
    top: 1.6em;
    right: 20px;
    width: 6px;
    height: 6px;
    border-right: 1px solid #666;
    border-bottom: 1px solid #666;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

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

}

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

    /*　スマホ横～タブレット 480pxから960pxまではここを読み込む　*/
    #container .buy-btn a {
        font-size: 1.5rem;
        line-height: 3.2rem;
    }

    /*-------------------
   .mainvisual
-------------------*/
    #container .mainvisual {
        padding: 10% 5% 8%;
        margin: 0;
    }

    #container .head-catch {
        font-size: 2.5rem;
    }

    #container .headtitle {
        font-size: 4.5rem;
    }

    #container .head-name {
        font-size: 1.5rem;
        margin: 45% 0 0;
    }

    #container .head-name em {
        font-size: 2rem;
    }

    #container .mainvisual .buy-btn a {
        width: 80%;
    }

    /* about */
    #container .about-wrap .about-title {
        font-size: 2rem;
        margin: 5% 0 0;
    }

    #container .about-wrap .about-desc-txt {
        font-size: 1.1rem;
    }

    #container nav {
        padding: 3%;
    }

    #container nav .nav-title {
        font-size: 1.8rem;
    }

    #container nav li {
        font-size: 1.1rem;
    }

    /*------------------------
   section 共通
-------------------------*/
    #container .section-title {
        font-size: 1.1rem;
        margin: 10% auto 3%;
    }

    #container .section-title strong {
        font: bold 2.5rem/1.4 "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
    }

    #container .sub-title {
        font-size: 1.5rem;
        padding-left: 1%;
    }

    /*-------------------
   section1
--------------------*/
    #container .lash-system li h3 {
        font-size: 1.8rem;
        margin: 5% 0 0;
    }

    #container .lash-system li p {
        font-size: 1.1rem;
        text-align: center;
    }

    /* デザインイメージ */
    #container #image .design li {
        font-size: 1.1rem;
    }

    #container #image .design li img {
        margin: 0 auto 2%;
    }

    #container #image .buy-btn a {
        width: 80%;
    }

    /* 本数の数え方 */
    #container .check-list .check-title {
        font-size: 1.5rem;
        margin: 0 0 2%;
    }

    #container .check-list dt {
        font-size: 1.2rem;
        height: 70px;
    }

    #container .check-list dt:nth-child(2) {
        padding: 3.3% 0;
    }

    #container .check-list dd {
        font-size: 1.1rem;
    }

    /*-------------------
   section2
--------------------*/
    #container .merit,
    #container .demerit {
        margin: 3% auto;
        width: 90%;
    }

    #container .merit,
    #container .demerit {
        float: left;
        height: 400px;
        width: 43%;
    }

    #container .merit {
        margin: 3% 2% 0 5%;
    }

    #container .demerit {
        margin: 3% 5% 0 2%;
    }

    #container .merit dt,
    #container .demerit dt {
        font-size: 1.5rem;
    }

    #container .merit dd,
    #container .demerit dd {
        font-size: 1.1rem;
    }

    #container .sec2 .text {
        font-size: 1.1rem;
        margin: 3% auto;
    }

    /*-------------------
   section3
--------------------*/
    #container .sec3 .text {
        font-size: 1.1rem;
    }

    #container .sec3 ul li {
        font-size: 1.1rem;
    }

    #container .sec3 dl {
        padding: 3% 0 0;
    }

    #container .sec3 dl:first-of-type:before {
        font-size: 2rem;
    }

    #container .sec3 dt {
        font-size: 1.8rem;
        padding: 0 0 1%;
    }

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

    /*-------------------
   section4
--------------------*/
    #container .sec4 .single,
    #container .sec4 .volume {
        font-size: 1.3rem;
        margin: 3% auto 2%;
        width: 70%;
    }

    #container .sec4 .text {
        font-size: 1.1rem;
    }

    #container .sec4 .long-list dt,
    #container .sec4 .long-list dd {
        font-size: 1.3rem;
    }

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

    #container .cauntion li {
        font-size: 1.1rem;
    }

    /*-------------------
   section5
--------------------*/
    #container .fan dt {
        font-size: 1.5rem;
    }

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

    #container .fan dd strong {
        font-size: 3.5rem;
    }

    #container .sec5 .text {
        font-size: 1.1rem;
    }

    /*-------------------
   section6
--------------------*/
    #container .step-list .title {
        font-size: 1.5rem;
    }

    #container .step-list .text {
        font-size: 1.1rem;
    }

    #container .sec6 .movie .show-movie {
        font-size: 1.8rem;
    }

    #container .sec6 .movie iframe {
        height: 340px;
    }

    /*-------------------
   section8
--------------------*/
    #container .item-list {
        margin: 0 auto 5%;
    }

    #container .buy-wrap .item-list .long {
        text-align: center;
        width: 50%;
    }

    #container .buy-wrap .item-name {
        font-size: 1.2rem;
    }

    #container .buy-wrap .item-name em {
        font-size: 1.8rem;
    }

    #container .buy-wrap .item-list th,
    #container .buy-wrap .item-list td {
        font-size: 1.2rem;
        padding: 1.5%;
    }

    #container .buy-wrap .item-list .buy-btn a {
        font-size: 1.5rem;
    }

    #container .relation-wrap .item-name {
        font-size: 1.2rem;
        margin: 0;
    }

    #container .relation-wrap .buy-btn a {
        font-size: 1.5rem;
    }

    /*-------------------
   section9
--------------------*/
    #container .sec9 .ban-btn a {
        font-size: 1.5rem;
        line-height: 3.2rem;
        width: 70%;
    }

    /*-------------------
   category(footer)
-------------------*/
    #container .category-title {
        font-size: 1.5rem;
        margin: 5% auto 0;
        padding: 0 0 0 1%;
    }

    #container .category {
        font-size: 1.2rem;
    }
}

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

    /*　小・大画面デスクトップ　960pxからはここを読み込む　*/
    #container {
        margin: 0 auto;
        width: 1040px;
    }

    #container .buy-btn a {
        font-size: 1.3rem;
        line-height: 2.6rem;
    }

    /*-------------------
   .mainvisual
-------------------*/
    #container .mainvisual {
        background: url("/contents/shop/sevenbeauty/img/freepage/volumelash/mainvisual-bg-pc.jpg") no-repeat;
        height: 400px;
        padding: 0;
    }

    #container .head-catch {
        font-size: 1.8rem;
        padding: 5% 0 0 45%;
        text-align: left;
    }

    #container .headtitle {
        font-size: 3.8rem;
        margin: 0;
        padding: 0 0 3% 41%;
    }

    #container .head-name {
        font-size: 1.5rem;
        margin: 0;
        padding: 0 0 0 45%;
        text-align: left;
    }

    #container .head-name em {
        font-size: 1.8rem;
    }

    #container .mainvisual .buy-btn a {
        margin: 1% 5% 0 auto;
        width: 50%;
    }

    /* about */
    #container .about-wrap .about-title {
        font-size: 1.8rem;
        margin: 5% 0 0;
    }

    #container .about-wrap .about-desc-txt {
        margin: 1% auto 0;
    }

    #container nav {
        margin: 2% 0 0 5%;
        padding: 2%;
        width: 42%;
    }

    #container nav li {
        margin: 0 0 2%;
    }

    /*------------------------
   section 共通
-------------------------*/
    #container .section-title {
        margin: 8% auto 3%;
    }

    #container .section-title strong {
        font-size: 2.5rem;
        line-height: 3.5rem;
    }

    #container .sub-title {
        padding-left: 1%;
    }

    /*-------------------
   section1
--------------------*/
    #container .lash-system li {
        float: left;
        margin: 0 2.5%;
        width: 45%;
    }

    #container .lash-system li h3 {
        margin: 0;
    }

    #container .lash-system li p {
        width: 100%;
    }

    /* デザインイメージ */
    #container #image .design li {
        float: left;
        margin: 0 2.5% 3%;
        width: 45%;
    }

    #container #image .design li span {
        margin: 0 2.5%;
        width: 45%;
    }

    #container #image .buy-btn a {
        margin: 0 auto;
        width: 60%;
    }

    /* 本数の数え方 */
    #container .check-list {
        background: url("/contents/shop/sevenbeauty/img/freepage/volumelash/check_listbg.jpg") no-repeat;
        height: 344px;
        margin: 6% auto;
        width: 978px;
    }

    #container .check-list .check-title {
        margin: 4.5% 0 0;
    }

    #container .check-list dl {
        margin: 1% auto 0;
        width: 80%;
    }

    #container .check-list dt {
        font-size: 1rem;
        height: 45px;
        letter-spacing: 0;
        padding: 2%;
        text-align: center;
    }

    #container .check-list dt:nth-child(2) {
        padding: 2% 0;
    }

    #container .check-list dd {
        font-size: 1rem;
    }

    /*-------------------
   section2
--------------------*/
    #container .merit,
    #container .demerit {
        float: left;
        height: 310px;
        margin: 0 1.5% 2%;
        width: 47%;
    }

    #container .merit dd,
    #container .demerit dd {
        margin: 3% 5%;
    }

    #container .sec2 .text {
        width: 97%;
    }

    /*-------------------
   section3
--------------------*/
    #container .sec3 .text {
        width: 100%;
    }

    #container .sec3 .text img {
        display: inline-block;
        float: left;
        margin: 0 2% 0 0;
        width: 48%;
    }

    #container .sec3 ul {
        margin: -30% 0 15%;
    }

    #container .sec3 li {
        padding: 8px 0 0 470px;
    }

    #container .sec3 dl {
        float: left;
        margin: 3% 0 30px 5%;
        padding: 2% 0 0;
        width: 42%;
    }

    #container .sec3 dl:first-of-type::before {
        font-size: 2rem;
        top: -35px;
        left: -25px;
    }

    #container .sec3 dt {
        font-size: 1.5rem;
        margin: 3% auto;
    }

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

    /*-------------------
   section4
--------------------*/
    #container .sec4 .left-img {
        float: left;
        display: block;
        margin: 0 2.5% 5%;
        width: 45%;
    }

    #container .sec4 .right {
        float: left;
        margin: 5% 2.5% 0;
        width: 45%;
    }

    #container .sec4 .single,
    #container .sec4 .volume {
        font-size: 1.1rem;
        margin: 5% 0 2%;
        width: 50%;
    }

    #container .long-list img {
        float: left;
        display: block;
        margin: 0 2.5% 5%;
        width: 45%;
    }

    #container .long-list dl {
        float: right;
        margin: 0;
        width: 50%;
    }

    #container .sec4 .cauntion {
        margin: 0 auto;
        padding: 3%;
    }

    #container .cauntion li {
        margin: 1% 0 0;
    }

    /*-------------------
   section5
--------------------*/
    #container .sec5 .left-img {
        float: left;
        margin: 0 2% 5% 5%;
        width: 38%;
    }

    #container .sec5 .right {
        float: left;
        margin: 0;
        width: 50%;
    }

    #container .fan {
        margin: 0 1% 2%;
        width: 23%;
    }

    #container .fan dt {
        margin: 0;
    }

    #container .sec5 .text {
        margin: 0 auto 5%;
    }

    /*-------------------
   section6
--------------------*/
    #container .howto {
        margin: 3% auto;
        padding: 3%;
        width: 96%;
    }

    #container .step-list li {
        float: left;
    }

    #container .step-list .img {
        margin: 0 3% 3% 0;
        width: 47%;
    }

    #container .step-list .title {
        font-size: 1.8rem;
        margin: 0;
        width: 50%;
    }

    #container .step-list .title em {
        display: block;
    }

    #container .step-list .text {
        width: 50%;
    }

    #container .sec6 .movie .show-movie {
        font-size: 1.8rem;
    }

    #container .sec6 .movie iframe {
        display: block;
        margin: 0 auto;
        height: 310px;
        width: 60%;
    }

    /*-------------------
   section8
--------------------*/
    #container .buy-wrap {
        width: 92%;
    }

    #container .item-list {
        margin: auto;
        width: 60%;
    }

    #container .buy-wrap .item-list th,
    #container .buy-wrap .item-list td {
        font-size: 0.9rem;
    }

    #container .buy-wrap .item-list .long {
        text-align: center;
        width: 50%;
    }

    #container .buy-wrap .item-list .buy-btn a {
        font-size: 1.2rem;
    }

    #container .item-bnr li {
        float: left;
        margin: 3% 1% 3%;
        width: 48%;
    }

    #container .item-bnr {
        margin: 0 auto 5%;
        width: 92%;
    }

    #container .relation-wrap li {
        margin: 0 1%;
        width: 32%;
    }

    #container .relation-wrap .item-name {
        margin: 0;
    }

    #container .relation-wrap .buy-btn a {
        font-size: 1.2rem;
    }

    /*-------------------
   section9
--------------------*/
    #container .sec9 .ban-btn a {
        font-size: 1.5rem;
        margin: 0 auto;
        width: 70%;
    }

    /*-------------------
   category(footer)
-------------------*/
    #container .category-title {
        margin: 5% 0 0 0;
        padding: 0 0 0 10px;
        width: 100%;
    }

    #container .category {
        font-size: 1.1rem;
        margin: 10px auto;
        width: 96%;
    }

    #container .category li {
        border: none;
        display: inline-block;
        padding: 0 0 0 10px;
    }

    #container .category li:after {
        display: none;
    }

    #container .category .ver a:after {
        content: "|";
        display: inline-block;
        padding: 0 0 0 15px;
    }
}