@charset "utf-8";
/*-------------------
   common
-------------------*/
#container .wrapper {
	color: #231815;
	font: 0.9rem/1.6 'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
	font-feature-settings: "palt";
	letter-spacing: .1em;
	padding: 0 0 50px;
}
#container .wrapper * {
	box-sizing: border-box;
}
#container .flex {
	align-items: flex-start;
	display: flex;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	flex-wrap: wrap;
	margin: 0 auto;
}
#container .wrapper p{
    margin: 0;
}
#container .wrapper a:hover{
	opacity: 1;
}
#container .wrapper img{
	display: block;
}
/*ブレイクポイントのルール*/
/* -スマホ基本設計 解像度に依存しない-
 *350pxまで：SP縦 i5 SE
 *350px〜480px：SP縦 i6-8　****一番重要****
 *480px〜960px：SP横からタブレット
 *960px〜小型PC　大型PC
 
/*-------------------
   mainvisual
-------------------*/
#container .mainvisual{
	background: url(/contents/shop/sevenbeauty/img/freepage/omd-perfect3waygel/mainvisual-sp-bg.jpg) no-repeat;
	background-size: 100%;
	padding: 3% 5% 0;
}
#container .mainvisual .mv-inner{
	position: relative;
}
#container .mainvisual .mv-logo{
	width: 90px;
}
#container .mainvisual .use-list{
	margin: 5% 0 0;
	width: 80%;
}
#container .mainvisual .use-list li{
	background: #8b807c;
	border-radius: 30px;
	color: #FFF;
	font-size: 0.8rem;
	letter-spacing: -0.3px;
	margin-right: 5px;
	padding: 1% 0;
	text-align: center;
	width: calc(90% / 3 - 5px);
}
#container .mainvisual .use-list li:last-child{
	margin-right: 0;
}
#container .mainvisual .mv-catch{
	color: #8b807c;
	font: bold 1.5rem/1.1 '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	letter-spacing: -0.5px;
	margin: 1.5% 0 0;
	text-align: center;
	width: 70%;
}
#container .mainvisual .mv-catch em{
	font-size: 2rem;
	font-weight: bold;
}
#container .mainvisual .mv-catch span{
	font-style: italic;
	font-weight: bold;
}
#container .mainvisual .use-pht{
	margin: 5% 0;
	width: 80%;
}
#container .mainvisual .use-pht li{
	margin-right: 5px;
	width: calc(90% / 3 - 5px);
}
#container .mainvisual .use-pht li:last-child{
	margin-right: 0;
}
#container .mainvisual .mv-item{
	position: absolute;
	top: 6%;
	right: 0;
	width: 24%;
}
#container .mainvisual .mvIcon-sp{
	margin: 8% auto 3%;
	width: 70%;
}
#container .mainvisual .mvIcon-pc{
	display: none;
}
#container .mainvisual h1{
	font-size: 1.1rem;
	line-height: 1.2rem;
	text-align: center;
}

/*-------------------
   section共通
-------------------*/
#container .secTitle{
	text-align: center;
}
#container .secTitle .title-en{
	font: bold 1.2rem/1 "hypatia-sans-pro", sans-serif;
}
#container .secTitle h2{
	font: bold 1.5rem/1.1 '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	letter-spacing: -0.5px;
	margin-top: 1.5%;
}

/*-------------------
   features
-------------------*/
#container .features{
	background: #fdf6f3;
	margin-top: 15%;
	padding-bottom: 20%;
}
#container .features .secTitle{
	background: #8b807c;
	color: #FFF;
	padding: 5% 0;
}
#container .features .secTitle-inner{
	position: relative;
}
#container .features .secTitle-inner .deco-right,
#container .features .secTitle-inner .deco-left{
	position: absolute;
	width: 25%;
}
#container .features .secTitle-inner .deco-right{
	top: -110%;
	right: 0;	
}
#container .features .secTitle-inner .deco-left{
	left: 0;
}
#container .features h3{
	border-bottom: solid 1px #8b807c;
	color: #8b807c;
	font-size: 1.2rem;
	line-height: 1.4rem;
	margin: 10% auto 0;
	padding-bottom: 1.5%;
	text-align: center;
	width: 90%;
}
#container .features h3 em{
	font-size: 1.8rem;
}
#container .features h3 span{
	color: #ff5525;
}
#container .features .featuresBox{
	margin: 5% auto 0;
	position: relative;
}
#container .features .featuresPht{
	width: 90%;
}
#container .features .featuresTxt{
	background: rgb(255, 255, 255, 0.6);
	border: solid 1px #8b807c;
	color: #8b807c;
	margin: -8% 5% 0 auto;
	padding: 0 5% 5%;
	position: relative;
	width: 85%;
	z-index: 1;
}
#container .features .featuresTxt .featuresList-txt{
	font-size: 1rem;
	line-height: 1rem;
	margin-top: 6%;
	padding-left: 25px;
	position: relative;
}
#container .features .featuresTxt .featuresList-txt::before{
	background: url(/contents/shop/sevenbeauty/img/freepage/omd-perfect3waygel/features-check.png) no-repeat;
	background-size: contain;
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	position: absolute;
	top: -5%;
	left: 0;
}
#container .features .featuresTxt .featuresList-txt-Sup{
	line-height: 1.2rem;
	margin-top: 3%;
	padding-left: 28px;
}
#container .features .deco-allinone,
#container .features .tip-pht{
	position: absolute;
}
#container .features .deco-allinone{
	bottom: -18%;
	left: 3%;
	width: 60%;
	z-index: 3;
}
#container .features .tip-pht{
	bottom: -13%;
	right: 0;
	width: 40%;
	z-index: 2;
}

/*-------------------
   howtouse
-------------------*/
#container .howtouse{
	background: url(/contents/shop/sevenbeauty/img/freepage/omd-perfect3waygel/howto-bg.jpg);
	background-size: 100%;
	padding: 15% 0;
}
#container .howtouse .howtouseBox{
	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .2);
	background: #FFF;
	margin: 0 auto; 
	padding: 10% 5%;
	width: 90%;
}
#container .howtouse .secTitle{
	color: #8b807c;
}
#container .howtouse .howtouse-jump{
	margin: 5% auto 0;
}
#container .howtouse .howtouse-jump li{
	background: #8b807c;
	display: inline-block;
	line-height: 1.2rem;
	margin: 1.5%;
	position: relative;
	text-align: center;
	transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
	width: 30.3%;
}
#container .howtouse .howtouse-jump li::before{
	content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #8b807c;
}
#container .howtouse .howtouse-jump li a{
	color: #FFF;
	display: block;
	font-weight: bold;
	padding: 15% 2%;
}
#container .howtouse .howtouse-jump li a span{
	display: block;
	font: bold 0.9rem/1 "hypatia-sans-pro", sans-serif;
}
#container .howtouse .howtouse-jump li:hover{
	transform: translateY(5px);
}
#container .howtouse .useBox{
	margin: 20% auto 0;
}
#container .howtouse .useBox .useTile-pc{
	display: none;
}
#container .howtouse .useBox .useBox-inner{
	margin-top: 8%;
}
#container .howtouse .useBox .change{
	flex-wrap: wrap-reverse;
}
#container .howtouse .useTxt h3{
	color: #8b807c;
	font-size: 1.3rem;
	font-weight: bold;
	line-height: 1.8rem;
	margin-top: 8%;
	text-align: center;
}
#container .howtouse .useTxt h3 br{
	display: none;
}
#container .howtouse .useTxt .pickup{
	margin: 5% auto;
}
#container .howtouse .useTxt .pickup li{
	background: #ff5525;
	border-radius: 30px;
	color: #FFF;
	font-size: 1rem;
	line-height: 1.3rem;
	margin-top: 3%;
	padding: 3% 3% 3% 28px;
	position: relative;
}
#container .howtouse .useTxt .pickup li::before{
	background: url(/contents/shop/sevenbeauty/img/freepage/omd-perfect3waygel/howto-pickup.png) no-repeat;
	background-size: contain;
	content: '';
	display: inline-block;
	width: 12px;
	height: 13px;
	position: absolute;
	top: 11px;
	left: 10px;
}
#container .howtouse .useTxt .useTxt-desc{
	border-bottom: solid 1px #8b807c;
	margin-bottom: 5%;
	padding-bottom: 5%; 
}
#container .howtouse .onepointBox{
	background: #ffebe5;
	font-size: 1rem;
	line-height: 1.4rem;
	margin: 12% auto 0;
	padding: 10% 5% 5%;
}
#container .howtouse .onepointBox h4{
	margin: -40px auto 3%;
	width: 60%;
}
#container .howtouse .onepointBox .onepoint-txt span{
	font-size: 0.8rem;
}
#container .howtouse .onepointBox .onepointBox-inner img{
	margin: 5% auto 0;
	width: 80%;
}
#container .howtouse .buy-btn a{
	background: #8b807c;
	border: solid 1px #8b807c;
	color: #FFF;
	display: block;
	font-size: 1.1rem;
	font-weight: bold;
	margin: 8% auto 0;
	padding: 3%;
	position: relative;
	text-align: center;
	width: 80%;
}
#container .howtouse .buy-btn a::after{
	border: solid 6px transparent;
	border-left: solid 8px #FFF;
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	position: relative;
	top: -1px;
	right: -10px;
}





#container .howtouse .buy-btn a:hover{
	background: #FFF;
	border: solid 1px #8b807c;
	color: #8b807c;
}
#container .howtouse .buy-btn a:hover::after{
	border-left: solid 8px #8b807c;
}

/*-------------------
   related
-------------------*/
#container .related{
	margin: 0 auto;
	width: 90%;
}
#container .related h2{
	font-size: 1.3rem;
	font-weight: bold;
	margin: 10% 0 5%;
	padding-left: 40px;
	position: relative;
}
#container .related h2 span{
	font: bold 1rem/1 "hypatia-sans-pro", sans-serif;
	margin-left: 10px;
}
#container .related h2::before{
	background: #ff5525;
	content: '';
	height: 5px;
	width: 30px;
	position: absolute;
	top: 13px;
	left: 0;
}
#container .related .itemList li{
	margin: 0 2% 8%;
	text-align: center;
	width: 46%;
}
#container .related .itemList li .item-catch{
	line-height: 1.3rem;
}
#container .related .itemList li .item-catch br{
	display: none;
}
#container .related .itemList li .item-name{
	font-weight: bold;
	line-height: 1.2rem;
}
#container .related .itemList li .buy-btn{
	border: solid 1px #8b807c;
	color: #8b807c;
	display: block;
	margin: 8% auto 0;
	padding: 5%;
	position: relative;
	text-align: center;
	width: 100%;
}
#container .related .itemList li .buy-btn::after{
	border: solid 4px transparent;
	border-left: solid 6px #8b807c;
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	position: relative;
	top: -1px;
	right: -5px;
}
#container .related .itemList li a:hover .buy-btn{
	background: #8b807c;
	color: #FFF;
}
#container .related .itemList li a:hover .buy-btn::after{
	border-left: solid 6px #FFF;
}

@media screen and (min-width:480px) and ( max-width:960px) {
/*　スマホ横～タブレット 480pxから960pxまではここを読み込む　*/
/*-------------------
   mainvisual
-------------------*/
#container .mainvisual .mv-logo{
	width: 125px;
}
#container .mainvisual .use-list{
	margin-top: 8%;
}
#container .mainvisual .use-list li{
	font-size: 1.1rem;
	letter-spacing: 0;
	margin-right: 10px;
	width: calc(90% / 3 - 10px);
}
#container .mainvisual .mv-catch{
	font-size: 2.5rem;
	margin-top: 2.5%;
	width: 70%;
}
#container .mainvisual .mv-catch em{
	font-size: 3.8rem;
}
#container .mainvisual .use-pht li{
	margin-right: 10px;
	width: calc(90% / 3 - 10px);
}
#container .mainvisual .mvIcon-sp{
	width: 400px;
}
#container .mainvisual h1{
	font-size: 1.8rem;
}

/*-------------------
   section共通
-------------------*/
#container .secTitle .title-en{
	font-size: 1.5rem;
}
#container .secTitle h2{
	font-size: 2.5rem;
	margin-top: 1%;
}

/*-------------------
   features
-------------------*/
#container .features{
	padding-bottom: 10%;
}
#container .features .secTitle-inner .deco-right{
	top: -150%;
}
#container .features .secTitle-inner .deco-left{
	bottom: -170%;
}
#container .features h3{
	font-size: 1.8rem;
	line-height: 2.5rem;
	margin-top: 12%;
	padding-bottom: 1%;
}
#container .features h3 em{
	font-size: 2.5rem;
}
#container .features .featuresBox{
	width: 90%;
}
#container .features .featuresPht{
	width: 50%;
}
#container .features .featuresTxt{
	margin: -40% 0 0 auto;
	padding: 0 3% 3%;
	width: 55%;
}
#container .features .deco-allinone{
	bottom: -32%;
	left: 0;
	width: 50%;
}
#container .features .tip-pht{
	bottom: -21%;
	width: 23%;
}

/*-------------------
   howtouse
-------------------*/
#container .howtouse{
	padding: 10% 0;
}
#container .howtouse .howtouseBox{ 
	padding: 8% 5%;
	width: 90%;
}
#container .howtouse .howtouse-jump li{
	line-height: 1.6rem;
}
#container .howtouse .howtouse-jump li a{
	font-size: 1.2rem;
	padding: 10% 2%;
}
#container .howtouse .howtouse-jump li a span{
	font-size: 1rem;
}
#container .howtouse .useBox{
	margin-top: 10%;
}
#container .howtouse .usePht{
	margin: 0 auto;
}
#container .howtouse .useTxt{
	margin: 0 auto;
	width: 90%;
}
#container .howtouse .useTxt h3{
	font-size: 1.8rem;
	line-height: 2.4rem;
}
#container .howtouse .useTxt h3 br{
	display: inline-block;

}
#container .howtouse .useTxt .pickup{
	margin: 2% auto 5%;
}
#container .howtouse .useTxt .pickup li{
	font-size: 1.2rem;
	padding-left: 40px;
}
#container .howtouse .useTxt .pickup li::before{
	width: 15px;
	height: 16px;
	top: 18px;
	left: 18px;
}
#container .howtouse .useTxt .useTxt-desc{
	margin-bottom: 3%;
	padding-bottom: 3%; 
}
#container .howtouse .onepointBox{
	line-height: 1.6rem;
	margin-top: 8%;
	padding: 5% 5% 3%;
	text-align: center;
	width: 90%;
}
#container .howtouse .onepointBox h4{
	width: 205px;
}
#container .howtouse .buy-btn a{
	font-size: 1.5rem;
	padding: 2%;
	width: 60%;
}
#container .howtouse .buy-btn a::after{
	top: -3px;
}

/*-------------------
   related
-------------------*/
#container .related h2{
	font-size: 1.8rem;
	margin: 10% 0 3%;
	padding-left: 50px;
}
#container .related h2 span{
	font-size: 1.2rem;
}
#container .related h2::before{
	height: 7px;
	width: 40px;
	top: 18px;
}
#container .related .itemList li{
	font-size: 1rem;
}
#container .related .itemList li .item-catch br{
	display: inline-block;
}
#container .related .itemList li img{
	margin: 0 auto;
}
#container .related .itemList li .buy-btn{
	margin-top: 5%;
	padding: 3%;
	width: 80%;
}
#container .related .pageList{
	width: 515px;
}
}

 @media screen and (min-width:960px) {
/*　小・大画面デスクトップ　960pxからはここを読み込む　*/
/*-------------------
   mainvisual
-------------------*/
#container .mainvisual{
	background: url(/contents/shop/sevenbeauty/img/freepage/omd-perfect3waygel/mainvisual-pc-bg.jpg) no-repeat;
	background-size: 2000px;
	height: 545px;
	padding: 20px 0 0;
}
#container .mainvisual .mv-inner{
	margin: 0 auto;
	width: 1040px;
}
#container .mainvisual .mv-logo{
	width: 125px;
}
#container .mainvisual .use-list{
	margin: 0;
	position: absolute;
	top: 70px;
	left: 130px;
	width: 550px;;
}
#container .mainvisual .use-list li{
	font-size: 1.3rem;
	letter-spacing: 2px;
	margin-right: 10px;
	width: calc(90% / 3 - 10px);
}
#container .mainvisual .mv-catch{
	font-size: 3.5rem;
	margin: 85px 0 0;
	width: 70%;
}
#container .mainvisual .mv-catch em{
	font-size: 5rem;
}
#container .mainvisual .use-pht{
	margin: 40px 0 0 70px;
	width: 750px;
}
#container .mainvisual .mv-item{
	top: 60px;
	right: 70px;
	width: 180px;
}
#container .mainvisual .mvIcon-sp{
	display: none;
}
#container .mainvisual .mvIcon-pc{
	display: block;
	position: absolute;
	top: 10px;
	right: 245px;
}
#container .mainvisual h1{
	font-size: 1.5rem;
	margin: 35px 0 0 140px;
	text-align: left;
}

/*-------------------
   section共通
-------------------*/
#container .secTitle .title-en{
	font-size: 1.5rem;
}
#container .secTitle h2{
	font-size: 3.2rem;
	margin-top: 1%;
}

/*-------------------
   features
-------------------*/
#container .features{
	margin-top: 10%;
	padding-bottom: 155px;
}
#container .features .secTitle{
	padding: 2% 0;
}
#container .features .secTitle-inner{
	margin: 0 auto;
	width: 1040px;
}
#container .features .secTitle-inner .deco-right,
#container .features .secTitle-inner .deco-left{
	width: 270px;
}
#container .features .secTitle-inner .deco-right{
	top: -150px;
	right: -180px;	
}
#container .features .secTitle-inner .deco-left{
	bottom: -150px;
	left: -180px;
}
#container .features h3{
	font-size: 2rem;
	margin-top: 100px;
	padding-bottom: 15px;
	width: 950px;
}
#container .features h3 em{
	font-size: 3.2rem;
}
#container .features h3 br{
	display: none;
}
#container .features .featuresBox{
	margin-top: 3%;
	width: 1100px;
}
#container .features .featuresTxt{
	margin: -430px 0 0 auto;
	padding: 0 5% 5% 8%;
	width: 580px;
}
#container .features .featuresTxt .featuresList-txt{
	font-size: 1.5rem;
	margin-top: 45px;
	padding-left: 30px;
}
#container .features .featuresTxt .featuresList-txt::before{
	width: 20px;
	height: 20px;
	top: -6%;
}
#container .features .featuresTxt .featuresList-txt-Sup{
	padding-left: 30px;
}
#container .features .deco-allinone{
	bottom: -200px;
	left: -160px;
	width: 650px;
}
#container .features .tip-pht{
	bottom: -155px;
	right: 0;
	width: 285px;
}

/*-------------------
   howtouse
-------------------*/
#container .howtouse{
	padding: 120px 0;
}
#container .howtouse .howtouseBox{
	padding: 80px;
	width: 1200px;
}
#container .howtouse .howtouse-jump{
	margin-top: 2%;
	width: 900px;
}
#container .howtouse .howtouse-jump li::before{
	border: 15px solid transparent;
	border-top: 15px solid #8b807c;
}
#container .howtouse .howtouse-jump li a{
	display: block;
	font-size: 1.3rem;
	padding: 8% 2%;
}
#container .howtouse .howtouse-jump li a span{
	display: inline-block;
	font-size: 1.3rem;
	margin-left: 10px;
}
#container .howtouse .howtouse-jump li:hover{
	transform: translateY(8px);
}
#container .howtouse .useBox{
	margin-top: 10%;
}
#container .howtouse .useBox .useTile-sp{
	display: none;
}
#container .howtouse .useBox .useTile-pc{
	display: block;
}
#container .howtouse .useBox .useBox-inner{
	align-items: start;
	margin-top: 5%;
}
#container .howtouse .useTxt{
	margin-left: 70px;
	width: 520px;
}
#container .howtouse .change .useTxt{
	margin-right: 70px;
	margin-left: 0;
}
#container .howtouse .useTxt h3{
	font-size: 1.8rem;
	line-height: 2.4rem;
	margin-top: 0;
	text-align: left;
}
#container .howtouse .useTxt h3 br{
	display: inline-block;
}
#container .howtouse .useTxt .pickup{
	margin: 5% auto;
}
#container .howtouse .useTxt .pickup li{
	font-size: 1.2rem;
	padding-left: 38px;
}
#container .howtouse .useTxt .pickup li::before{
	width: 15px;
	height: 16px;
	top: 17px;
	left: 15px;
}
#container .howtouse .useTxt .useTxt-desc{
	margin-bottom: 3%;
	padding-bottom: 3%; 
}
#container .howtouse .onepointBox{
	font-size: 1.2rem;
	line-height: 1.8rem;
	margin-top: 60px;
	padding: 25px 0;
	text-align: center;
}
#container .howtouse .onepointBox h4{
	margin: -35px auto 20px;
	width: 205px;
}
#container .howtouse .onepointBox .onepointBox-inner{
	text-align: left;
	width: 860px;
}
#container .howtouse .onepointBox .onepointBox-inner .onepoint-txt{
	width: 590px;
}
#container .howtouse .onepointBox .onepointBox-inner img{
	margin: 0 auto;
	width: 230px;
}
#container .howtouse .buy-btn a{
	font-size: 1.5rem;
	margin-top: 4%;
	padding: 1.5%;
	width: 550px;
}
#container .howtouse .buy-btn a::after{
	border: solid 7px transparent;
	border-left: solid 9px #FFF;
	top: -2px;
}

/*-------------------
   related
-------------------*/
#container .related{
	width: 1040px;
}
#container .related h2{
	font-size: 2.2rem;
	font-weight: 100;
	margin: 8% 0 2%;
	padding-left: 55px;
}
#container .related h2 span{
	font-size: 1.3rem;
}
#container .related h2::before{
	height: 8px;
	width: 45px;
	top: 22px;
}
#container .related .itemList li{
	margin: 0 2% 3%;
	width: 21%;
}
#container .related .itemList li .item-name{
	font-size: 1rem;
	min-height: 40px;
}
#container .related .itemList li .buy-btn{
	margin-top: 5%;
}
#container .related .itemList li .buy-btn::after{
	border: solid 5px transparent;
	border-left: solid 7px #8b807c;;
	top: 0;
}
}