@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;
	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まで  */
 
 
/* ボタンデザイン自由に変えてください  */
#container .buy_btn {
	background: #f6538d;
	background: -moz-linear-gradient(top, #f6538d 0%, #ea3d7b 100%);
	background: -webkit-linear-gradient(top, #f6538d 0%, #ea3d7b 100%);
	background: linear-gradient(to bottom, #f6538d 0%, #ea3d7b 100%);
	border: #ea3d7b 1px solid;
	border-radius: 3rem;
	color: #fff;
	display: block;
	font: normal 1.2rem/2 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	position: relative;
	margin: 5px auto;
	text-align: center;
	width: 95%;
	letter-spacing:0.5px;
}
#container .buy_btn a {
	color: #fff;
	display: block;
	text-decoration: none;
}
#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.2s;
}
/*-- 画面外にいる状態 --*/
.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;
}


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

.mainvisual{
	background-image:url(/contents/shop/sevenbeauty/img/freepage/homecare-biganki-choose/homecare-sp3.png),url(/contents/shop/sevenbeauty/img/freepage/homecare-biganki-choose/homecare-sp2.jpg),url(/contents/shop/sevenbeauty/img/freepage/homecare-biganki-choose/homecare-sp1.jpg);
	background-repeat:no-repeat;
	background-size:42%,55%,100%;
	background-position:right bottom,left bottom,top;
}
.mainvisual img{
	padding:38px 25% 75px 5%;
}

/*-------------------
   section 1
-------------------*/
#container .sec1{
	background-image:url(/contents/shop/sevenbeauty/img/freepage/homecare-biganki-choose/homecare_bg1.png);
	background-size:10%;
}

#container .wrapper .sec1 ul{
	background:none;
	display:flex;
	flex-flow:wrap;
	padding:10px 0;
}
#container .wrapper .sec1 ul li{
	width:47%;
	margin:4px 1.5%;
	position:relative;
}

#container .wrapper .sec1 ul li .arrow{
position:relative;
left:42%;
bottom:20px}

/*-------------------
   section 2
-------------------*/

#container .item_7days{
	display:inline-block;
	margin:2px 0;
	letter-spacing: 0rem;
	color:#f44f8a;
}

#container .sec2{
	background-image:url(/contents/shop/sevenbeauty/img/freepage/homecare-biganki-choose/homecare_2.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position: -80px bottom;
	padding:30px 0;

}
.sec2_1{
	width:75%;
	margin:0 12.5% -15px;

}
.sec2_2{
	background:rgba(255,255,255,0.8);
	padding:25px 5px 15px;
	text-align:center;
	font: normal 1.1rem/1.4 "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
	letter-spacing:-0.05rem;
	color:#555;
	width:94%;
	margin:0 3% 30px;
}

/*-------------------
   section 3
-------------------*/
.sec3 h2{
	background-image:url(/contents/shop/sevenbeauty/img/freepage/homecare-biganki-choose/homecare_4.png);
	background-repeat:no-repeat;
	background-position:center;
	background-size:82%;
	text-align:center;
	padding:30px;
	font: normal 1.3rem/1.8 "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
	color:#333;
	z-index:999;
	display:block;
	margin-top:-40px;
}

.ribbon{
	background-image:url(/contents/shop/sevenbeauty/img/freepage/homecare-biganki-choose/homecare_bg2.jpg);
	background-repeat:repeat-x;
	background-position:center;
	background-size:8%;
}

#container .wrapper h3{
	color:#333;
	background-image:none;
	background-color:#fff;
	text-align:center;
	font: normal 1.8rem/1.3 "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
	letter-spacing:-0.1rem;
	margin:0 0 10px;
}

#container .wrapper h3:before{
	content:"＼こんなお悩みに／""\A";
	font: normal 1.1rem/1.3 "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
	white-space:pre;
	color:#f6538d;
	letter-spacing:3px;
	
}

#container .wrapper ul{
background-image:url(/contents/shop/sevenbeauty/img/freepage/homecare-biganki-choose/homecare_5.png),url(/contents/shop/sevenbeauty/img/freepage/homecare-biganki-choose/homecare_bg3.png);
background-size:150%,10%;
background-position:center 0,0;
background-repeat:no-repeat,repeat;
padding:20px 0;
display:flex;
flex-flow:wrap;
}
#container .wrapper ul li{
	width:46%;
	margin:20px 2%;

}

#container .wrapper .item_img{
    background: rgba(255,255,255,.6);
    height: auto;
    width: 96%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

#container .item_function{
	display:inline-block;
	border:1px solid;
	padding:1px 2px;
	margin:1px 0;
	letter-spacing:0;
	font: normal 0.8rem/1.1 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	letter-spacing:-0.07rem;
}
#container .wrapper h4{
	color:#333;
	font: bold 1rem/1.4 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	letter-spacing:-0.05rem;
	margin:0.5em 0;
	word-break:keep-all;
}

#container .wrapper .item_price{
	font: normal 0.9rem/1.4 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	color:#dd0909;
	display:block;
	letter-spacing: -0.01rem;
	margin:0;
}
#container .wrapper .item_price em{
	font: bold 1.6rem/1.4 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	letter-spacing:0;

}


/*-------------------
   お悩みメニューに戻る
-------------------*/
#container .glo-navi {
	background-color: #614b53;
	bottom: 0;
	color: #fff;
	margin: 0;
	padding: 0;
	font: 1.1rem/1.5 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	-ms-filter: "alpha(opacity=80)";
	-moz-opacity: 0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
	position: fixed;
	z-index: 1000;
	width: 100%;
	text-align:center;
	padding:5px;
}

/*　共通のTOPへもどるボタンを非表示　*/
#footer #top img {
	display:none
}


@media screen and (min-width:350px) and ( max-width:480px) {
/*　スマホ縦　i6 / i6plus / i7  350pxから480pxまではここを読み込む　*/
.sec3 h2{
	background-size:82%;
	padding:30px;
	font: normal 1.6rem/2 "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
	letter-spacing:-0.05rem;
}
.mainvisual img{
	padding:50px 23% 80px 5%;
}

}

 @media screen and (min-width:480px) {
/*　スマホ横～タブレット 480pxからはここを読み込む　*/
#container  {
	margin:0 auto;
	max-width:1040px;
}
#container .item_7days{
	letter-spacing:0;
}


.mainvisual{
	background-image:url(/contents/shop/sevenbeauty/img/freepage/homecare-biganki-choose/mv_bg.jpg);
	background-repeat:no-repeat;
	background-size:100%;
	background-position:top;
}
.mainvisual img{
	padding:80px 27% 80px;
}
#container .sec1{
	background-image:url(/contents/shop/sevenbeauty/img/freepage/homecare-biganki-choose/homecare_bg1.png);
	background-size:5.54%;
	background-position:-20px
}

#container .wrapper .sec1 ul{
	background:none;
	display:flex;
	flex-flow:wrap;
	padding:15px;
}
#container .wrapper .sec1 ul li{
	width:24%;
	margin:5px 0.5%;
	position:relative;
}

.sec2_1{
	width:auto;
	margin:0 6% -15px;
}

.sec2_2{
	padding:35px 5px 35px 35px;
	font: normal 1.15rem/1.8 "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
	letter-spacing:-0.05rem;
	width:50%;
	margin:-250px 4% 80px 45%;
}


.sec3 h2{
	background-image:url(/contents/shop/sevenbeauty/img/freepage/homecare-biganki-choose/homecare_4.png);
	background-repeat:no-repeat;
	background-position:center;
	background-size:50%;
	text-align:center;
	padding:60px;
	font: normal 1.8rem/2 "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
	letter-spacing:-0.05rem;
	color:#333;
	z-index:999;
	display:block;
	margin-top:-50px;
}

.ribbon{
	background-image:url(/contents/shop/sevenbeauty/img/freepage/homecare-biganki-choose/homecare_bg2.jpg);
	background-repeat:repeat-x;
	background-position:center;
	background-size:5%;
}

#container .wrapper h3{
	font: normal 2.5rem/1.4 "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
	margin:0 0 12px;
}
#container .wrapper h3:before{
	font: normal 1.4rem/1.0 "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
}
#container .wrapper ul{
background-size:100%,5%;
padding:20px 3%;
}
#container .wrapper ul li{
	width:29%;
	margin:35px 2%;

}
}

 @media screen and (min-width:960px) {
/*　小・大画面デスクトップ　960pxからはここを読み込む　*/
#container  {
	margin:0 auto;
	max-width:1040px;
}
.mainvisual img{
	padding:110px 27% 300px;
	position:relative;
}
#container .sec1{
	background-image:none;
}

#container .wrapper .sec1 ul{
	background:none;
	display:flex;
	flex-flow:wrap;
	padding:15px 20px 0;
	position:relative;
	top:-210px;
	margin-bottom:-210px
}

#container .wrapper .sec1 ul li{
	width:224px;
	margin:0px 1.2%;
	position:relative;
}
#container .wrapper .sec1 ul li .arrow{
position:relative;
left:95px;
bottom: 23px;
}

#container .wrapper .sec1 ul li a:hover img{
position:relative;
left:0;
top:0;}

#container .wrapper .sec1 ul li a:hover .arrow{
position:absolute;
left:95px;
top: 67px;
}

#container .sec2{
	background-image:url(/contents/shop/sevenbeauty/img/freepage/homecare-biganki-choose/homecare_2.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position: 0 bottom;
	padding:30px 0;
}

.ribbon{
	background-size:auto;
}
#container .sec3 h2{
	background-size:auto;
	padding:50px 0;
	font: normal 2rem/2.5 "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
	color:#333;
	z-index:999;
	display:block;
	margin-top:-80px;
}
#container .wrapper h3{
	font: normal 2.6rem/1.3 "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
	margin:10px 0 15px;
}

.sec2_1{
	width:auto;
	margin:0 8% -10px;
}

.sec2_2{
	padding:20px 5px 20px 35px;
	font: normal 1.4rem/1.8 "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
	width:60%;
	margin:-200px 7% 80px 33%;
}
#container .wrapper ul{
background-size:100%,5%;
padding:20px 3%;
}

#container .wrapper ul li{
	width:18%;
	margin:35px 1%;

}


#container .wrapper .item_img:hover{
    background: rgba(255,255,255,1);
    transition: all ease-in 0.1s;
}

#container .glo-navi {
	background-color: #614b53;
	bottom: 0;
	color: #fff;
	margin: 0;
	padding: 0;
	font: 1.2rem/1.5 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	-ms-filter: "alpha(opacity=80)";
	-moz-opacity: 0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
	position: fixed;
	z-index: 1000;
	width: 1040px;
	text-align:center;
	padding:8px;
}

}


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