@charset "utf-8";

/*-------------------
   商品詳細共通
-------------------*/
#container .detail{
	margin: 8% 0 0;
}
#container .detail .detail-maintitle{
	display: block;
	margin: 0 auto 3%;
	width: 100%;
}
#container .detail .detail-mv{
	display: block;
	margin: 0 auto;
	width: 100%;
}
/* 商品一覧ボタン */
#container .detail .detail-allitem-btn a{
	border: solid 1px #231f20;
	color: #231f20;
	display: block;
	font: 1.1rem/1.6 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	margin: 8% auto 5%;
	padding: 4%;
	position: relative;
	text-align: center;
	width: 80%;
}
#container .detail .detail-allitem-btn a:after{
	content: url(https://www.7esthe.com/img/pages/premedi-series/btn-arrow-big_black.png);
	position: absolute;
	right: 3%;
}
/* 商品詳細タイトル */
#container .detail .detail-title{
	background: #231f20;
	margin: 8% 0 5%;
	padding: 1% 0;
}
/* 矢印 */
#container .detail .vertical-arrow{
	display: block;
	margin: 3% auto;
	width: 11px;
}
/*-------------------
   Cleansing
-------------------*/
#container .detail-cleansing .cleansing-point{
	margin: 0 auto;
	width: 92%;
}
#container .detail-cleansing .cleansing-point li{
	margin: 0 1% 2%;
	width: 48%;
}
#container .detail-cleansing .cleansing-common,
#container .detail-cleansing .cleansing-free{
	display: block;
	margin: 0 auto;
	width: 90%;
}
#container .detail-cleansing .cleansing-homecare{
	background: #fdedee;
	margin: 8% 0 3%;
	padding: 5%;
}
#container .detail-cleansing .cleansing-homecare .homecare-title img,
#container .detail-cleansing .cleansing-homecare .homecare-flow{
	display: block;
	margin: 0 auto 3%;
	width: 100%;
}
#container .detail-cleansing .cleansing-homecare .lashfoam{
	color: #231f20;
	font: 0.9rem/1.4 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	margin: 5% 0 3%;
	text-align: center;
}
#container .detail-cleansing .cleansing-homecare .lashfoam em{
	color: #231f20;
	display: block;
	font-size: 1.2rem;
	line-height: 1.5rem;
}
#container .detail-cleansing .cleansing-homecare .lashfoam-pht{
	display: block;
	margin: 0 auto;
	width: 80%;
}

/*-------------------
   serum
-------------------*/
#container .detail-serum .serum-component-title{
	display: block;
	margin: 0 auto;
	width: 90%;
}
#container .detail-serum .serum-component{
	margin: 5% auto 0;
	width: 94%;
}
#container .detail-serum .serum-component li{
	font: 0.9rem/1.6 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	margin: 0 2%;
	text-align: center;
	width: 46%;
}
#container .detail-serum .serum-component li img{
	display: block;
	margin: 0 auto 3%;
	width: 100%;
}
#container .detail-serum .serum-component-txt{
	font: 0.9rem/1.6 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	margin: 3% auto 5%;
	width: 90%;
}
#container .detail-serum .rowth-cycle{
	display: block;
	margin: 0 auto;
	width: 80%;
}
#container .detail-serum .serum-component-detail{
	margin: 5% auto 0;
	width: 94%;
}
#container .detail-serum .serum-component-detail dl{
	margin: 0 2%;
	width: 46%;
}
#container .detail-serum .serum-component-detail dt{
	background: #f6d1cc;
	border-radius: 25px;
	color: #e35e4c;
	font: 1.1rem/1.6 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	margin: 0 0 7%;
	padding: 3% 2%;
	text-align: center;
}
#container .detail-serum .serum-component-detail dd{
	font: 0.9rem/1.6 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}
#container .detail-serum .serum-lastcatch{
	color: #231f20;
	font: 1rem/1.4 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	margin: 5% 0 3%;
	text-align: center;
}
#container .detail-serum .serum-lastcatch em{
	color: #e35e4c;
	font-size: 1.3rem;
	line-height: 2rem;
}
#container .detail-serum .serum-free{
	display: block;
	margin: 0 auto;
	width: 90%;
}
#container .detail-serum .serum-free-txt{
	color: #231f20;
	font: 1.2rem/1.4 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	margin: 5% auto 0;
	text-align: center;
	width: 90%;
}
#container .detail-serum .serum-type{
	margin: 0 auto;
	width: 94%;
}
#container .detail-serum .serum-type li{
	margin: 0 auto;
	width: 50%;
}
#container .detail-serum .serum-type .serum-type-title{
	border: solid 2px #e35e4c;
	border-radius: 25px;
	color: #e35e4c;
	font: bold 1rem/1.6 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	margin: 0 0 5%;
	padding: 3% 2%;
	text-align: center;
}
#container .detail-serum .serum-type .serum-type-read{
	font: 00.9rem/1.6 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    margin: 0 0 3%;
    min-height: 110px;
}
#container .detail-serum .serum-type .serum-type-eye img{
	display: block;
	margin: 0 auto 5%;
	width: 90%;
}
#container .detail-serum .serum-type .serum-type-form{
	display: block;
	margin: 0 auto 8%;
	width: 100%;
}
#container .detail-serum .serum-type .serum-type-txt{
	font: 0.9rem/1.6 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}
#container .detail-serum .serum-attention{
	border: solid 1px #f6d1cc;
	margin: 5% auto 3%;
	width: 90%;
}
#container .detail-serum .serum-attention .serum-attention-title{
	background: #f6d1cc;
	color: #231f20;
	font: 1.1rem/1.6 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	padding: 2%;
	text-align: center;
}
#container .detail-serum .serum-attention .serum-attention-pht{
	display: block;
	margin: 3% auto;
	width: 90%;
}
#container .detail-serum .serum-attention .serum-attention-txt{
	font: 0.9rem/1.6 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    margin: 0 auto 3%;
    width: 90%;
}
#container .detail-serum .product-list .product-list_33142{
	margin: 0 auto;
}

/*-------------------
   coating
-------------------*/
#container .detail-coating .coating-point{
	margin: 0 auto;
	width: 92%;
}
#container .detail-coating .coating-point li{
	margin: 0 1% 2%;
	width: 31.3%;
}
#container .detail-coating .coating-point-txt{
	font: 0.9rem/1.6 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	margin: 3% auto 0;
	width: 90%;
}
#container .detail-coating .coating-component{
	margin: 0 auto;
	width: 92%;
}
#container .detail-coating .coating-component li{
	margin: 0 1% 2%;
	font: 0.9rem/1.6 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	text-align: center;
	width: 31.3%;
}
#container .detail-coating .coating-component li img{
	display: block;
	margin: 0 auto 3%;
	width: 100%;
}
#container .detail-coating .coating-component-txt{
	color: #231f20;
	font: 1.2rem/1.4 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	margin: 5% auto 0;
	text-align: center;
	width: 90%;
}
#container .detail-coating .coating-howto-sp{
	display: block;
	margin: 0 auto;
	width: 100%;
}
#container .detail-coating .coating-howto-pc{
	display: none;
}
#container .detail-coating .coating-howto-txt{
	font: 0.9rem/1.6 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	margin: 3% auto 0;
	width: 90%;
}
#container .detail-coating .coating-chart{
	background: #fdedee;
	margin: 8% 0 3%;
	padding: 5%;
}
#container .detail-coating .coating-chart .chart-title img,
#container .detail-coating .coating-chart .yesnochart{
	display: block;
	margin: 0 auto 3%;
	width: 100%;
}
#container .detail-coating .coating-chart .coating-chart-txt{
	font: 0.9rem/1.6 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	margin: 5% 0 0;
}

@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 .detail{
	margin: 5% 0 0;
}
/* 商品一覧ボタン */
#container .detail .detail-allitem-btn a{
	font-size: 1.4rem;
	margin: 5% auto 0;
	padding: 3%;
}
/*-------------------
   Cleansing
-------------------*/
#container .detail-cleansing .cleansing-homecare .lashfoam{
	font-size: 1.3rem;
}
#container .detail-cleansing .cleansing-homecare .lashfoam em{
	font-size: 1.8rem;
	line-height: 2.5rem;
}
/*-------------------
   serum
-------------------*/
#container .detail-serum .serum-component li{
	font-size: 1.1rem;
}
#container .detail-serum .serum-component-txt{
	font-size: 1.1rem;
	text-align: center;
}
#container .detail-serum .serum-component-detail{
	margin: 5% auto 0;
	width: 94%;
}
#container .detail-serum .serum-component-detail dt{
	font-size: 1.3rem;
	margin: 0 0 3%;
}
#container .detail-serum .serum-component-detail dd{
	font-size: 1.1rem;
}
#container .detail-serum .serum-lastcatch{
	font-size: 1.8rem;
	margin: 3% 0;
}
#container .detail-serum .serum-lastcatch em{
	font-size: 2.2rem;
	line-height: 2.5rem;
}
#container .detail-serum .serum-free-txt{
	font-size: 1.5rem;
}
#container .detail-serum .serum-type{
	margin: 0 auto;
	width: 94%;
}
#container .detail-serum .serum-type li{
	margin: 0 2%;
	width: 46%;
}
#container .detail-serum .serum-type .serum-type-title{
	font-size: 1.3rem;
}
#container .detail-serum .serum-type .serum-type-read,
#container .detail-serum .serum-type .serum-type-txt{
	font-size: 1.1rem;
}
#container .detail-serum .serum-attention .serum-attention-title{
	font-size: 1.5rem;
}
#container .detail-serum .serum-attention .serum-attention-txt{
	font-size: 1.1rem;
}

/*-------------------
   coating
-------------------*/
#container .detail-coating .coating-point-txt,
#container .detail-coating .coating-component li{
	font-size: 1.1rem;
}
#container .detail-coating .coating-component-txt{
	font-size: 1.5rem;
}
#container .detail-coating .coating-howto-txt,
#container .detail-coating .coating-chart .coating-chart-txt{
	font-size: 1.1rem;
}
}

@media screen and (min-width:960px) {
/*　小・大画面デスクトップ　960pxからはここを読み込む　*/
.wrapper {
	padding: 0;
}
/*-------------------
   商品詳細共通
-------------------*/
#container .detail{
	margin: 3% 0 0;
}
#container .detail .detail-maintitle{
	margin: 0 auto 1%;
	width: 640px;
}
#container .detail .detail-mv{
	width: 640px;
}
/* 商品一覧ボタン */
#container .detail .detail-allitem-btn a{
	margin: 5% auto 3%;
	padding: 2%;
	width: 50%;
}
/* 商品詳細タイトル */
#container .detail .detail-title img{
	display: block;
	margin: 0 auto;
	width: 640px;
}

/*-------------------
   Cleansing
-------------------*/
#container .detail-cleansing .cleansing-point li{
	width: 23%;
}
#container .detail-cleansing .cleansing-common{
	width: 540px;
}
#container .detail-cleansing .cleansing-free{
	width: 480px;
}
#container .detail-cleansing .cleansing-homecare{
	margin: 5% 0 3%;
}
#container .detail-cleansing .cleansing-homecare .homecare-title img{
	width: 640px;
}
#container .detail-cleansing .cleansing-homecare .lashfoam{
	font-size: 1.2rem;
	margin: 5% 0 2%;
}
#container .detail-cleansing .cleansing-homecare .lashfoam em{
	font-size: 1.5rem;
}
#container .detail-cleansing .cleansing-homecare .lashfoam-pht{
	width: 500px;
}

/*-------------------
   serum
-------------------*/
#container .detail-serum .serum-component-title{
	width: 460px;
}
#container .detail-serum .serum-component{
	width: 500px;
}
#container .detail-serum .serum-component-txt{
	text-align: center;
}
#container .detail-serum .rowth-cycle{

	width: 490px;
}
#container .detail-serum .serum-component-detail{
	width: 600px;
}
#container .detail-serum .serum-component-detail dt{
	font-size: 1.2rem;
	margin: 0 0 5%;
	padding: 2%;
}
#container .detail-serum .serum-lastcatch{
	margin: 3% 0;
}
#container .detail-serum .serum-free{
	width: 350px;
}
#container .detail-serum .serum-type .serum-type-title{
	border-radius: 30px;
	margin: 0 0 3%;
	padding: 2%;
}
#container .detail-serum .serum-type .serum-type-read{
    min-height: 70px;
}
#container .detail-serum .serum-type .serum-type-eye img{
	margin: 0 2% 5%;
	width: 46%;
}
#container .detail-serum .serum-type .serum-type-form{
	width: 350px;
}
#container .detail-serum .serum-type .buy-btn{
	display: block;
	margin: 5% auto;
	width: 70%;
}
#container .detail-serum .serum-attention .serum-attention-title{
	font-size: 1.3rem;
	padding: 1%;
}
#container .detail-serum .serum-attention .flex{
	align-items: center;
}
#container .detail-serum .serum-attention .serum-attention-pht{
	display: block;
	margin: 3% 1% 3% 3%;
	width: 46%;
}
#container .detail-serum .serum-attention .serum-attention-txt{
    margin: 3% 3% 3% 1%;
    width: 46%;
}

/*-------------------
   coating
-------------------*/
#container .detail-coating .coating-point li{
	width: 18%;
}
#container .detail-coating .coating-point-txt{
	margin: 0 auto;
}
#container .detail-coating .coating-component{
	width: 600px;
}
#container .detail-coating .coating-component-txt{
	margin: 3% auto 0;
}
#container .detail-coating .coating-howto-sp{
	display: none;
}
#container .detail-coating .coating-howto-pc{
	display: block;
}
#container .detail-coating .coating-howto-txt{
	margin: 0 auto;
	width: 70%;
}
#container .detail-coating .coating-chart .chart-title img{
	width: 640px;
}
#container .detail-coating .coating-chart .yesnochart{
	width: 860px;
}
}