@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;
	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 {
    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 {
    background: #000;
    border: solid 2px #000;
    color: #fff;
    display: block;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 2.0;
    position: relative;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    text-decoration: none;
}
#container .buy-btn:hover {
	filter: alpha(opacity=90);
    background: #00000000;
	border: solid 2px #000;
    color: #000;
	text-decoration: none;
}
#container .buy-btn a:hover {
	text-decoration: none;
	opacity: 1;
}
#container .buy-btn a::after {
    border: solid 5px transparent;
    border-left: solid 7px #FFF;
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    position: relative;
    top: -1px;
    left: 8px;
}
#container .buy-btn a:hover::after {
    border-left: solid 7px #000;
}
/*-- 画面外にいる状態 --*/
.fadein {
	opacity : 0;
	transform : translate(0, 30px);
	transition: ease-in 400ms;
}
/*-- 画面内に入った状態 --*/
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}
#container section {
	margin: 0 auto;
	padding: 0 0;
}
/*----scroll----*/
.scroll {
    opacity: 0;
    transition: all 1.0s ease;
}
.scroll.show {
    opacity: 1;
    transform: none;
    animation: 1.0s fadeIn;
}
.s-top { /*上からふわっと*/
    transform: translate(0, -20px);
}
.s-bottom { /*下からふわっと*/
    transform: translate(0, 20px);
}
.s-right { /*右からふわっと*/
    transform: translate(50px, 0);
}
.s-left { /*左からふわっと*/
    transform: translate(-50px, 0);
}
/*----------
 mainvisual
----------*/
#container {
    overflow: hidden;
}
#container .wrapper {
    font-family: "Roboto", "源真ゴシック", "源ノ角ゴシック", "Koruri", sans-serif !important;
}
#container .mainvisual,
#container .sec4 {
    background: url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/back-tile.jpg) repeat;
    background-size: contain;
    position: relative;
}
#container .mainvisual .top-line {
    background-color: rgb(0 0 0 / 60%);
    text-align: center;
    position: relative;
    z-index: 2;
}
#container .mainvisual .top-line img {
    margin: 0 auto;
    padding: 5px 0;
    width: 17%;
}
#container .mainvisual .width  {
    background: url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/awa.png),
                url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/awa.png);
    background-repeat: no-repeat, no-repeat;
    background-position: 
    top -60px right -60px, bottom -160px left -90px;
    background-size: 70%, 70%;
    margin: 0;
    padding: 10px 0;
    position: relative;
}
#container .mainvisual-img {
    position: absolute;
    top: -20px;
    left: -10%;
    width: 160%;
}
#container .title-box {
    background-color: #000;
    color: #fff;
    text-align: center;
    margin: 0 0 60%;
    padding: 10px;
    position: relative;
    z-index: 2;
}
#container .title-box .text1 .border-box {
    border: solid 1px #fff;
    font-size: 1.2rem;
    margin: 0 5px 0 0;
    padding: 1px 6px;
}
#container .title-box .text1 {
    font-size: 1.8rem;
    font-weight: bold;
    margin: 0 0 5px;
}
#container .title-box .text2 {
    font-size: 1.2rem;
    font-weight: bold;
}
#container .img-pc {
    display: none;
}
#container .name-box {
    text-align: center;
    margin: 0 0 10px;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}
#container .name-box h1, 
#container .name-box p.name {
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: -0.01rem;
    margin: 0 0 5px;
}
#container .name-box .buy-box {
    display: flex;
}
#container .name-box .buy-box .shipping {
    background-color: #086f78;
    border-radius: 50px;
    color: #fff;
    font-size: 1.0rem;
    margin: 2px 5px 2px 0;
    padding: 10px 5px;
    width: 45%;
}
/*----section----*/
#container .sec1 {
    background: url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/mizu.jpg) bottom 10% left 50% no-repeat;
    background-size: 170%;
    margin: 0 0 10px;
    padding: 10px 0;
    position: relative;
}
#container .sec1 .img {
    margin: 0 0 10px -30px;
    width: 120%;
}
#container .sec1 .text-box {
    text-align: center;
}
#container .sec1 .text-box .sub-catch {
    color: #000;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: -0.01rem;
    margin: 0 0 5px;
}
#container .sec1 .text-box .main-catch {
    background-color: #000;
    color: #fff;
    font-size: 1.8rem;
    font-weight: bold;
    margin: 0 20px 80%;
    padding: 5px 0;
}
#container .sec1 .sheetmask {
    top: 40%;
    left: 3%;
    position: absolute;
    width: 70%;
}
#container .sec1 .lease-icon {
    top: 37%;
    right: 3%;
    position: absolute;
    width: 35%;
}
#container .sec1 .icon {
    padding: 0 20px;
    width: 100%;
}
#container .sec2 .width {
    margin: 0;
    padding: 0 20px 10px;
}
#container .sec2 .box1 {
    background: url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/back-sec2.jpg) top 20px left 50% no-repeat;
    background-size: 220%;
    margin: 0 0 20px;
    padding: 0;
    position: relative;
}
/*--back-arrow--*/
#container .back-arrow  {
    background: #086f78;
    position: relative;
}
#container .back-arrow :after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 50vw 0 50vw;
    border-color: #086f78 transparent transparent transparent;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
}
#container .back-arrow .width {
    text-align: center;
    padding: 10px 0 0;
}
#container .back-arrow h2 {
    color: #fff;
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.5;
}
#container .back-arrow h2 .color-box {
    background-color: #fff;
    color: #086f78;
    font-size: 1.3rem;
    font-weight: bold;
    margin: 0;
    padding: 0 15px;
}
/*----*/
#container .sec2 .box1 .img {
    top: 40%;
    left: 20px;
    margin: 0;
    position: absolute;
    width: 60%;
}
#container .sec2 .box1 .name {
    background-color: #000;
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    margin: 70% 0 0;
    padding: 5px 0;
}
#container .sec2 h3,
#container .sec3 h2 {
    color: #000;
    font-size: 1.0rem;
    font-weight: bold;
    text-align: center;
    letter-spacing: -0.05rem;
    margin: 0 0 20px;
}
#container .sec2 h3 .big,
#container .sec3 h2 .big {
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 0rem;
}
#container .text-topdot {
    font-weight: bold;
    text-emphasis: filled dot #0f9b98;
    -webkit-text-emphasis: filled dot #0f9b98;
}
#container .sec2 .box2 .img {
    text-align: center;
    margin: 0 auto 20px;
    width: 100%;
}
#container .sec2 .box2 ul.des {
    color: #000;
    font-size: 0.9rem;
    text-align: center;
    letter-spacing: -0.01rem;
    margin: 0 0 10px;
}
#container .sec2 .box2 ul.des li {
    font-weight: bold;
    margin: 0 0 5px;
}
#container .sec3 {
    background-color: #e5e5e6;
    padding: 10px 0;
}
#container .point {
    margin: 0 0 20px;
    padding: 0;
}
#container .point .po-title {
    position: relative;
    margin: 0;
    padding: 20px 0;
}
#container .point .po-title p {  
    top: -15px;
    left: 0px;
    position: absolute;
}
#container .po1 .po-title p {
    width: 45%;
}
#container .po2 .po-title p {
    width: 35%;
}
#container .po3 .po-title p {
    width: 40%;
}
#container .po4 .po-title p {
    width: 50%;
}
#container .point .po-title h3,
#container .sec5 h3 {
    background-color: #000;
    color: #fff;
    text-align: center;
    font-size: 1.3rem;
    font-weight: bold;
    margin: 0;
    padding: 10px 0;
}
/*-point1-*/
#container .po1 {
    background: url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/back-po1.png) top 60% left 50% no-repeat;
    background-size: 80%;
    padding: 0 0 30px;
    position: relative;
}
#container .po1 .text-box {
    display: flex;
    justify-content: space-between;
    margin: 10% 0 5%;
}
#container .po1 .text-box div {
    background: url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/back-grada.png) top 0px left -25px no-repeat;
    background-size: 100%;
    color: #000;
    position: relative;
}
#container .po1 .text-box .text-left {
    text-align: left;
    padding: 10px;
}
#container .po1 .text-box .text-right {
    transform: scale(-1, 1);
    text-align: right;
    padding: 10px;
}
#container .po1 .text-box .text-right p {
    transform: scale(-1, 1);
}
#container .po1 .text-box .color-box {
    background-color: #000;
    color: #fff;
    display: table;
    font-size: 0.9rem;
    margin: 0;
    padding: 2px 5px;
}
#container .po1 .text-box .component {
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: -0.01rem;
    margin: 0 0 5px;
}
#container .po1 .text-box .main-text {
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.01rem;
}
/*-point2-*/
#container .po2 {
    background: url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/back-po2.jpg) top 10% left 50% no-repeat;
    background-size: 150%;
    padding: 0 0 20px;
    position: relative;
}
#container .po2 .box {
    display: flex;
    margin: 40% 0 0;
    padding: 0 10px;
}
#container .po2 .box dl {
    border: solid 1px #086f78;
    margin: 3px;
    width: calc(100% / 2);
}
#container .po2 .box dt {
    background-color: #086f78;
    color: #fff;
    font-size: 0.9rem;
    text-align: center;
    padding: 5px 0;
    position: relative;
}
#container .po2 .box dd {
    margin: -27px 0 0;
}
/*-point3-*/
#container .po3 {
    background: url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/back-po3.jpg) top 0px left 50% no-repeat;
    background-size: 230%;
    position: relative;
}
#container .po3 .box {
    margin: 35% 0 30px;
    padding: 0 10px;
}
#container .come {
    color: #777;
    font-size: 0.9rem;
    text-align: left;
}
/*-point4-*/
#container .po4 .img-sp {
    margin: -20px 0 0;
}
#container .sec4 h2 {
    background-color: #086f78;
    color: #fff;
    font-size: 1.3rem;
    font-weight: bold;
    text-align: center;
    margin: 0 0 10px;
    padding: 10px 0;
}
#container .sec4 .width {
    background: url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/awa.png) top 50px right 0px no-repeat;
    background-size: 110%;
    margin: 0;
    padding: 5px 0 20px;
    position: relative;
}
/*--scroll-box--*/
#container .scroll-box {
    background-color: #fff;
    overflow: scroll;
    font-family: 'Hiragino Kaku Gothic ProN','Hiragino Sans','Meiryo',sans-serif;
    margin: 0 auto;
    padding: 5px;
    width: 90%;
    height: 360px;
}
#container .scroll-box::-webkit-scrollbar {
    width: 15px;
}
#container .scroll-box::-webkit-scrollbar-track {
    border-radius: 10px;
	background: #fff;
}
#container .scroll-box::-webkit-scrollbar-thumb {
    border-radius: 10px;
	background:#a6a6a6;
}
#container .scroll-box ul {
    border-bottom: 1px solid #d2d2d2;
    margin: 0;
    padding: 10px;
}
#container .scroll-box ul:last-child {
    border-bottom: none;
}
#container .scroll-box li {
    color: #000;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: justify;
    text-justify: inter-ideograph;
    margin: 0 0 5px;
}
#container .scroll-box li:nth-child(1) {
    font-weight: bold;
}
#container .scroll-box li .star {
    color: #f39800;
    display: block;
    margin: 0;
    padding: 0;
}
#container .scroll-box li .marker {
    background-color: #fffbd5;
}
#container .sec5 {
    background: url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/sheetmask02.png), url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/back-media.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: top 0px right -70px, bottom 0px left 50%;
    background-size: 70%, 210%;
    text-align: center;
    margin: 0;
    padding: 20px 0 20%;
    position: relative;
}
#container .sec5 .width {
    background: url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/awa.png) no-repeat top 70% left -130%;
    background-size: 70%;
    margin: 0;
    padding: 0;
    position: relative;
}
#container .sec5 h2 {
    color: #000;
    font-size: 1.5rem;
    font-weight: bold;
}
#container .sec5 h2 .marker {
    background-color: #7bd1cf;
    font-weight: bold;
}
#container .sec5 .img-sp {
    margin: 0 20px;
}
#container .sec5 .come {
    text-align: center;
}
#container .sec5 .img {
    margin: 20px 0 0;
}
#container .sec6 {
    width: 100%;
    background-color: #c1c1c3;
    background-image: linear-gradient(#cfcfd1 1px, transparent 0),linear-gradient(90deg, #cfcfd1 1px, transparent 0);
    background-size: 40px 40px;
    padding: 30px 10px;
}
#container .sec6 .width {
    position: relative;
}
#container .sec6 .attention {
    top: -15px;
    left: -5px;
    position: absolute;
    width: 60%;
    z-index: 3;
}
#container .sec6 .back-fff {
    background-color: #fff;
    margin: 0;
    padding: 5px 0 10%;
    position: relative;
    overflow: hidden;
}
#container .sec6 .text-left .title-box {
    margin: 20px 0;
    padding: 10px 50px 10px 5px;
}
#container .sec6 .text-right .title-box {
    margin: 13% 0 30px;
    padding: 10px 0 10px 33%;
}
#container .sec6 .title-box {
    background-color: #000;
}
#container .sec6 .title-box h2 {
    color: #fff;
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: -0.05rem;
    text-align: left;
}
#container .sec6 .title-box h2 .small {
    font-size: 1.0rem;
    font-weight: bold;
}
#container .sec6 .title-box h2 .color {
    color: #7bd1cf;
    font-weight: bold;
}
#container .sec6 .text-left .img {
    top: 0px;
    right: 0px;
    position: absolute;
    width: 60%;
    z-index: 2;
}
#container .sec6 .des-box {
    display: flex;
    margin: 0 0 20px;
    padding: 5px;
}
#container .sec6 .des-box dl {
    width: calc(100% / 3);
}
#container .sec6 .des-box dl.arrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 10px;
    border-color: transparent transparent transparent #0f9b98;
    margin: 10% 1%;
}
#container .sec6 .des-box dt {
    margin: 0 0 5px;
}
#container .sec6 .des-box dd {
    color: #000;
    font-size: 0.7rem;
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: -0.01rem;
    text-align: center;
    margin: auto;
    padding: 0;
}
#container .sec6 .text-right .img {
    top: 45%;
    left: -20px;
    position: absolute;
    width: 52%;
    z-index: 2;
}
#container .sec6 .text-box ul {
    text-align: center;
    margin: 0 0 20px;
}
#container .sec6 .text-box li {
    color: #000;
    font-size: 0.9rem;
    font-weight: bold;
    margin: 0 0 5px;
    padding: 0 5px;
}
#container .sec6 .text-box p {
    color: #000;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1;
    text-align: center;
}
#container .sec6 .text-box p .marker {
    background-color: #7bd1cf;
    display: inline-block;
    font-weight: bold;
}
#container .sec7 .width {
    background: url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/awa.png), url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/awa.png);
    background-repeat: no-repeat, no-repeat;
    background-position: top -100px right -90px, bottom 40px left -120px;
    background-size: 60%, 80%;
    text-align: center;
    margin: 0;
    padding: 20px 0;
    position: relative;
}
#container .sec7 h2 {
    border-bottom: solid 2px #0f9b98;
    text-align: center;
    margin: 0 auto;
    padding: 10px 0;
    position: relative;
    width: 50%;
}
#container .sec7 h2:before,
#container .sec7 h2:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
#container .sec7 h2:before {
    border: solid 12px transparent;
    border-top: solid 12px #0f9b98;
}
#container .sec7 h2:after {
    border: solid 14px transparent;
    border-top: solid 14px #fff;
    margin-top: -5px;
}
#container .use-box {
    display: flex;
    margin: 30px 0;
    padding: 0;
}
#container .use-box dl {
    margin: 5px;
    width: calc(100% / 3);
}
#container .use-box dt {
    mix-blend-mode: multiply;
}
#container .use-box dd {
    color: #000;
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    margin: 0;
    padding: 0;
}
#container .use-box dd .color {
    color: #0f9b98;
    font-weight: bold;
}
#container .sec7 .img-box p {
    margin: 5px 0;
}
#container .sec8 {
    background: url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/mizu.jpg) top 20px left 75% no-repeat;
    background-size: 190%;
    position: relative;
    transform: scale(-1, 1);
}
#container .sec8 .width {
    transform: scale(-1, 1);
}
#container .sec8 h2 {
    color: #000;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.2;
    margin: 0 20px 45%;
}
#container .sec8 .sheetmask {
    top: 5%;
    right: -10px;
    position: absolute;
    width: 60%;
}
#container .sec8 .icon {
    top: 54%;
    left: 20px;
    position: absolute;
    width: 21%;
}
#container .sec9 {
    background-color: #dfe2e3;
    padding: 20px 10px;
}
#container .sec9 .back-fff {
    background-color: #fff;
    margin: 0;
    padding: 10px 5px;
}
#container .sec9 h2 {
    background-color: #086f78;
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
    margin: 0 0 20px;
    padding: 5px 0;
}
#container .lineup-box {
    margin: 0 0 30px;
}
#container .sec9 .box1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#container .sec9 .box1 dl {
    display: flex;
    flex-wrap: wrap;
    margin: 0 5px 10px;
    width: calc(92% / 2);
}
#container .sec9 .flex {
    display: block;
    margin: 0;
}
#container .sec9 dt.flex {
    width: 35%;
}
#container .sec9 dd.flex {
    width: 65%;
}
#container .sec9 dd {
    width: 100%;
}
#container .sec9 .catch {
    color: #0f9b98;
    font-size: 0.7rem;
    letter-spacing: -0.01rem;
    margin: 10px 0;
    text-align: justify;
    text-justify: inter-ideograph;
}
#container .sec9 .catch .bold {
    font-weight: bold;
}
#container .sec9 dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 5px 10px;
}
#container .sec9 .box2 dt.flex {
    width: 30%;
}
#container .sec9 .box2 dd.flex {
    width: 70%;
}
#container .br-pc {
    display: none;
}
#container .sec9 h3 {
    color: #000;
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: -0.01rem;
    margin: 0;
    padding: 0;
}
#container .sec9 .color-box {
    background-color: #0f9b98;
    color: #fff;
    display: inline-block;
    font-size: 0.9rem;
    margin: 0;
    padding: 2px 5px;
}
#container .sec9 .made-Japan li {
    color: #000;
    font-size: 1.0rem;
    font-weight: bold;
    margin: 0 0 5px;
    padding: 0;
}
/*----*/
#container .buy-btn2 {
    border: solid 1px #266765;
    color: #266765;
    display: block;
    font-size: 0.8rem;
    line-height: 2.3;
    position: relative;
    margin: 7px auto;
    text-align: center;
    width: 100%;
    text-decoration: none;
}
#container .buy-btn2:hover {
	filter: alpha(opacity=90);
    background: #266765;
    border: solid 1px #266765;
    color: #fff;
	text-decoration: none;
}
#container .buy-btn2 a::after {
    border: solid 6px transparent;
    border-left: solid 6px #266765;
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    position: relative;
    top: 0px;
    left: 2px;
}
#container .buy-btn2 a:hover::after {
    border-left: solid 6px #fff;
}
@media screen and (min-width:350px) and ( max-width:480px) {
/*　スマホ縦　i6 / i6plus / i7  350pxから480pxまではここを読み込む　*/
#container .title-box .text1 {
    font-size: 2.2rem;
}
#container .title-box .text1 .border-box {
    font-size: 1.6rem;
}
#container .title-box .text2 {
    font-size: 1.5rem;
}
#container .title-box {
    margin: 0 0 65%;
}
#container .name-box h1, #container .name-box p.name {
    font-size: 1.7rem;
}
#container .sec1 .img {
    margin: 0 0 10px -37px;
}
#container .sec2 .box1 .img {
    top: 36%;
}
#container .sec2 .box1 .name {
    font-size: 1.4rem;
}
#container .sec2 h3, #container .sec3 h2 {
    font-size: 1.2rem;
}
#container .sec2 h3 .big, #container .sec3 h2 .big {
    font-size: 1.75rem;
}
#container .point .po-title h3, #container .sec5 h3 {
    font-size: 1.5rem;
    padding: 13px 0;
}
#container .po1 .text-box div {
    background: url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/back-grada.png) top 0px left -10px no-repeat;
    background-size: 100%;
}
#container .po1 .text-box .color-box {
    font-size: 1.0rem;
    margin: 0 0 5px;
}
#container .po1 .text-box .main-text {
    font-size: 1.5rem;
}
#container .po2 .box dt {
    padding: 5px 15px;
}
#container .sec6 .attention {
    top: -20px;
}
#container .sec6 .back-fff {
    padding: 30px 0 10%;
}
#container .sec6 .text-left .title-box {
    padding: 0px 50px 10px 5px;
}
#container .sec6 .text-right .title-box {
    margin: 13% 0 50px;
    padding: 5px 0 15px 33%;
}
#container .sec6 .title-box h2 {
    font-size: 1.5rem;
}
#container .sec6 .title-box .br-sp {
    display: none;
}
#container .sec6 .des-box dd {
    font-size: 0.9rem;
    line-height: 1.2;
}
#container .sec6 .text-right .img {
    top: 47%;
    left: -10px;
    width: 49%;
}
#container .sec6 .text-box p {
    font-size: 1.8rem;
}
#container .sec7 .width {
    background: url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/awa.png), url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/awa.png);
    background-repeat: no-repeat, no-repeat;
    background-position: top -120px right -110px, bottom 60px left -100px;
    background-size: 60%, 70%;
}
#container .use-box dd {
    line-height: 1.5;
}
#container .sec8 {
    background: url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/mizu.jpg) top 30px left 80% no-repeat;
    background-size: 190%;
}
#container .sec8 h2 {
    font-size: 1.8rem;
}
#container .sec8 .icon {
    width: 23%;
}
#container .sec9 .catch {
    font-size: 0.8rem;
}
#container .sec9 h3 {
    font-size: 1.0rem;
    margin: 0 0 15px;
}
}
 @media screen and (min-width:480px) {
/*　スマホ横～タブレット 480pxから960pxまではここを読み込む　*/
#container .mainvisual, #container .sec4 {
    background-size: 70%;
}#container .mainvisual .width {
    background: url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/awa.png), url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/awa.png);
    background-repeat: no-repeat, no-repeat;
    background-position: top -30px right -90px, bottom 20px left -20px;
    background-size: 40%, 40%;
    margin: 0 auto;
}
#container .mainvisual-img {
    top: -30px;
    left: 7%;
    width: 105%;
}
#container .title-box {
    margin: 0 10% 40%;
    padding: 10px;
}
#container .title-box .text1 {
    font-size: 3.5rem;
}
#container .title-box .text1 .border-box {
    font-size: 2.5rem;
    margin: 0 10px 0 0;
    padding: 0px 15px;
}
#container .title-box .text2 {
    font-size: 2.5rem;
}
#container .img-sp {
    display: none;
}
#container .img-pc {
    display: block;
}
#container .mainvisual .img-pc {
    float: left;
    margin: 0 5px 0 5%;
    width: 40%;
}
#container .name-box {
    margin: 0 0 20px;
    padding: 0 5%;
}
#container .name-box h1, #container .name-box p.name {
    font-size: 2.0rem;
}
#container .name-box .buy-box .shipping {
    font-size: 1.3rem;
    margin: 0 15px 0 0;
    padding: 12px 5px;
    width: 42%;
}
#container .buy-btn {
    font-size: 1.3rem;
}
#container .sec1 {
    padding: 30px 0;
}
#container .sec1 .img {
    margin: 0 0 20px;
    width: 100%;
}
#container .sec1 .text-box .sub-catch {
    font-size: 2.0rem;
}
#container .sec1 .text-box .main-catch {
    font-size: 3.5rem;
    margin: 0 10% 50%;
}
#container .sec1 .sheetmask {
    top: 42%;
    left: 15%;
}
#container .sec1 .lease-icon {
    top: 42%;
    right: 5%;
    width: 30%;
}
#container .sec1 .icon {
    text-align: center;
}
#container .back-arrow h2 {
    font-size: 2.3rem;
}
#container .back-arrow h2 .color-box {
    font-size: 2.3rem;
}
#container .sec2 .width {
    margin: 0 auto;
    padding: 10px 10%;
}
#container .sec2 .box1 {
    background-size: 190%;
}
#container .sec2 .box1 .img {
    top: 35%;
    left: 80px;
}
#container .sec2 .box1 .name {
    font-size: 2.5rem;
    margin: 70% 0 20px;
}
#container .sec2 h3, #container .sec3 h2 {
    font-size: 2rem;
}
#container .sec2 h3 .big, #container .sec3 h2 .big {
    font-size: 3.2rem;
}
#container .sec2 .box2 ul.des {
    font-size: 1.5rem;
}
#container .sec3 {
    padding: 40px 0;
}
#container .sec3 h2 {
    margin: 0 0 40px;
}
#container .point {
    margin: 0 0 70px;
}
#container .point .po-title {
    margin: 0 10%;
}
#container .point .po-title p {
    top: -30px;
    left: -60px;
}
#container .point .po-title h3, #container .sec5 h3 {
    font-size: 2.5rem;
    padding: 20px 0;
}
#container .po1 {
    background-size: 60%;
    padding: 30px 0;
}
#container .po1 .text-box {
    margin: 10% 10% 5%;
}
#container .po1 .text-box div {
    background: url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/back-grada.png) top 50% left 0px no-repeat;
    background-size: 100%;
}
#container .po1 .text-box .color-box {
    font-size: 1.2rem;
    margin: 0 0 5px;
    padding: 2px 5px;
}
#container .po1 .text-box .component {
    font-size: 1.4rem;
    margin: 0 0 10px;
}
#container .po1 .text-box .main-text {
    font-size: 2.0rem;
}
#container .po2 .box {
    margin: 40% 10% 0;
}
#container .po2 .box dt {
    font-size: 1.2rem;
    padding: 8px 0;
}
#container .po2 .box dd {
    margin: -30px 0 0;
}
#container .po3 {
    background-size: 190%;
}
#container .po3 .box {
    text-align: center;
    margin: 35% 10% 30px;
}
#container .sec4 h2 {
    font-size: 1.8rem;
}
#container .sec4 .width {
    background: url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/awa.png) top 220px right -50px no-repeat;
    background-size: 50%;
    padding: 30px 0 50px;
}
#container .scroll-box li {
    font-size: 1.2rem;
}
#container .scroll-box {
    padding: 30px;
    height: 520px;
}
#container .sec5 {
    background-size: 50%, 170%;
    padding: 50px 0 20%;
}
#container .sec5 .width {
    background: url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/awa.png) no-repeat top 50% left -45%;
    background-size: 50%;
}
#container .sec5 h2 {
    font-size: 2.2rem;
    margin: 0 0 20px;
}
#container .sec5 .img-pc {
    width: 90%;
}
#container .sec5 .come {
    margin: 0 0 40px;
}
#container .br-sp {
    display: none;
}
#container .sec6 {
    padding: 40px 10%;
}
#container .sec6 .attention {
    top: -20px;
    left: -10px;
}
#container .sec6 .text-left .title-box {
    margin: 60px 0;
    padding: 20px 10px;
}
#container .sec6 .text-left .img {
    right: -10px;
}
#container .sec6 .title-box h2 {
    font-size: 2.4rem;
}
#container .sec6 .title-box h2 .small {
    font-size: 1.8rem;
}
#container .sec6 .des-box {
    padding: 10px;
}
#container .sec6 .des-box dl.arrow {
    border-width: 20px 0 20px 15px;
    margin: 12% 1%;
}
#container .sec6 .des-box dd {
    font-size: 1.1rem;
}
#container .sec6 .text-right .title-box {
    margin: 13% 0 70px;
    padding: 20px 0 30px 33%;
}
#container .sec6 .text-right .img {
    left: 0px;
    top: 53%;
    width: 120%;
}
#container .sec6 .text-right .img img {
    width: 35%;
}
#container .sec6 .text-box li {
    font-size: 1.3rem;
}
#container .sec6 .text-box p {
    font-size: 2.5rem;
}
#container .sec7 .width {
    background-position: top -100px right -90px, bottom -10px left -150px;
    background-size: 35%, 40%;
}
#container .use-box {
    margin: 50px 010%;
}
#container .use-box dd {
    font-size: 1.3rem;
}
#container .sec7 .img-box {
    display: flex;
}
#container .sec7 .img-box p {
    margin: 5px;
}
#container .sec8 h2 {
    font-size: 2.8rem;
    margin: 20px 10% 35%;
}
#container .sec8 .icon {
    top: 69%;
    left: 70px;
    width: 15%;
}
#container .sec8 .name-box {
    margin: 0 10% 20px;
    padding: 0;
}
#container .sec9 {
    padding: 40px 10px;
}
#container .sec9 .back-fff {
    padding: 20px 5px;
}
#container .sec9 h2 {
    font-size: 1.8rem;
}
#container .sec9 dl {
    margin: 0 10px 20px;
}
#container .sec9 .box1 {
    margin: 0 0 20px;
}
#container .sec9 .box1 dl {
    width: calc(92% / 4);
}
#container .sec9 .catch {
    font-size: 0.9rem;
}
#container .sec9 h3 {
    font-size: 1.1rem;
}
#container .sec9 .box2 {
    display: flex;
}
#container .sec9 .box2 dl.flex {
    width: calc(100% / 2);
}
#container .sec9 .made-Japan ul {
    margin: 40px auto;
}
#container .sec9 .made-Japan li {
    font-size: 1.5rem;
}
#container .buy-btn2 {
    font-size: 0.9rem;
    line-height: 2.6;
}
}
 @media screen and (min-width:960px) {
/*　小・大画面デスクトップ　960pxからはここを読み込む　*/
#container .width {
    margin: 0 auto;
    width: 1040px;
}
#container .mainvisual .top-line img {
    width: 150px;
}
#container .mainvisual, #container .sec4 {
    background-size: 1000px;
}
#container .mainvisual .width {
    background: url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/awa.png), url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/awa.png);
    background-repeat: no-repeat, no-repeat;
    background-position: top -30px right 0px, bottom 0px left 0px;
    background-size: 40%, 35%;
    margin: 0 auto;
}
#container .name-box {
    padding: 0 10%;
}
#container .mainvisual .img-pc {
    margin: 0 10px 0 10%;
    width: 32%;
}
#container .name-box h1, #container .name-box p.name {
    font-size: 2.5rem;
    text-align: left;
}
#container .sec1 {
    background-size: 1500px;
    padding: 30px 0 50px;
}
#container .sec1 .sheetmask {
    left: 34%;
}
#container .sec2 .width {
    padding: 30px 7% 20px;
}
#container .back-arrow :after {
    content: "";
    border-width: 60px 50vw 0 50vw;
}
#container .back-arrow h2 {
    font-size: 2.5rem;
}
#container .sec2 .box1 {
    background: url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/back-sec2.jpg) bottom 0px left 10% no-repeat;
    /*background-size: 1600px;*/
    background-position: 70% 120%; 
    background-color: #f1eff0;
}
#container .sec2 .box1 .img {
    top: 40%;
    left: 30%;
}
#container .sec2 .box1 .name {
    font-size: 2.8rem;
    margin: 440px 0 20px;
}
#container .sec2 h3, #container .sec3 h2 {
    font-size: 2.3rem;
}
#container .sec2 h3 .big, #container .sec3 h2 .big {
    font-size: 3.6rem;
}
#container .po1 {
    background-size: 500px;
}
#container .po1 .text-box .text-left,
#container .po1 .text-box .text-right {
    padding: 10px 40px;
}
#container .po1 .text-box .main-text {
    font-size: 2.6rem;
}
#container .po2 {
    background-size: 1200px;
}
#container .po2 .box {
    justify-content: center;
}
#container .po2 .box dl {
    margin: 3px 5px;
    width: auto;
}
#container .po2 .box dd {
    text-align: center;
}
#container .po3 {
    background-size: 1400px;
}
#container .po3 .box {
    margin: 30% 10% 30px;
}
#container .img-pc {
    text-align: center;
}
#container .sec4 h2 {
    font-size: 2.3rem;
}
#container .sec4 .width {
    background: url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/awa.png) top 220px right 0px no-repeat;
    background-size: 400px;
    margin: 0 auto;
}
#container .sec5 {
    background: url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/sheetmask02.png), url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/back-media.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: top 0px right 10%, bottom 0px left 50%;
    background-size: 400px, 1400px;
    padding: 50px 0 120px;
}
#container .sec5 .width {
    background: url(/contents/shop/sevenbeauty/img/freepage/md-nikibi-sheetmask/awa.png) no-repeat top 40% left 0px;
    background-size: 300px;
    margin: 0 auto;
}
#container .sec6 .width {
    width: 860px;
}
#container .sec6 .title-box h2 {
    font-size: 2.8rem;
}
#container .sec6 .text-left .img {
    right: 0px;
    width: 360px;
}
#container .sec6 .text-left .title-box {
    margin: 70px 0 30px;
    padding: 0px 80px 10px;
}
#container .sec6 .des-box {
    padding: 10px 70px;
}
#container .sec6 .des-box dt {
    margin: 0 0 10px;
    text-align: center;
}
#container .sec6 .des-box dl.arrow {
    margin: 10% 1%;
}
#container .sec6 .text-right .title-box {
    padding: 0px 0 20px 38%;
}
#container .sec6 .text-right .img {
    left: 0px;
    top: 50%;
    width: 100%;
}
#container .sec6 .text-box ul {
    margin: 0 0 60px;
}
#container .sec6 .text-box li {
    font-size: 1.4rem;
}
#container .sec7 .width {
    background-position: top -100px right 0px, bottom 121px left 0px;
    background-size: 25%, 20%;
    margin: 0 auto;
}
#container .sec8 {
    background-size: 1500px;
}
#container .sec8 h2 {
    font-size: 2.8rem;
    margin: 30px 10% 30%;
}
#container .sec8 .sheetmask {
    top: 0%;
    right: -10px;
    position: absolute;
    width: 65%;
}
#container .sec8 .icon {
    top: 68%;
    left: 110px;
    width: 13%;
}
#container .sec8 .name-box {
    margin: 0 20% 20px;
}
#container .sec8 .name-box p.name {
    text-align: center;
}
#container .sec9 .back-fff {
    padding: 30px 80px;
}
#container .sec9 h2 {
    margin: 0 0 40px;
}
#container .sec9 .catch {
    font-size: 1.0rem;
}
#container .sec9 h3 {
    font-size: 1.2rem;
    margin: 0 0 30px;
}
}