@charset "UTF-8";
@font-face {
	font-family: 'GUJPCorporate';
	src: url('/jp/ja/corp/fonts/GUJPCorporate-Kana-Light_v2.0.woff2') format('woff2'),
	url('/jp/ja/corp/fonts/GUJPCorporate-Kana-Light_v2.0.woff') format('woff'),
	url('/jp/ja/corp/fonts/GUJPCorporate-Kana-Light_v2.0.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'GUJPCorporate';
	src: url('/jp/ja/corp/fonts/GUJPCorporate-Kana-Regular_v2.0.woff2') format('woff2'),
	url('/jp/ja/corp/fonts/GUJPCorporate-Kana-Regular_v2.0.woff') format('woff'),
	url('/jp/ja/corp/fonts/GUJPCorporate-Kana-Regular_v2.0.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'GUJPCorporate';
	src: url('/jp/ja/corp/fonts/GUJPCorporate-Kana-Bold_v2.0.woff2') format('woff2'),
	url('/jp/ja/corp/fonts/GUJPCorporate-Kana-Bold_v2.0.woff') format('woff'),
	url('/jp/ja/corp/fonts/GUJPCorporate-Kana-Bold_v2.0.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
/* common class
--------------------------------------------------*/
.clearfix {zoom:1;}
.clearfix:after{content: "";display: block;clear: both; overflow:hidden;}

#feature {
	max-width: 750px;
	margin: 0 auto 15.5%;
	background: #fff;
	font-family: 'GUJPCorporate', 'Avenir Next', Roboto, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'メイリオ', Meiryo, sans-serif;
	font-weight: 400;
	letter-spacing: 0.05rem;
	font-feature-settings: 'palt';
}

#feature .imgWidthFull {
	width:100%;
	display: block;
}
#feature a {
	-webkit-touch-callout : none !important;
	-webkit-tap-highlight-color : rgba(0,0,215,0.40) !important;
}
#feature a.dpBlock {
	display: block;
}
#feature .btn_simple > span:after {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-top: solid #1b1b1b 1px;
	border-right: solid #1b1b1b 1px;
	transform: rotate(45deg);
	content: "";
	margin-left: 1%;
	vertical-align: top;
	margin-top: 0.8%;
}
#feature .txtCenter {
	text-align: center!important;
}
#feature .flexWrapCenter {
	display: -webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	-ms-flex-wrap:wrap;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	-webkit-justify-content:center;
	justify-content:center;
}
#feature .flexSpacearound {
	-webkit-justify-content:space-around;
	justify-content:space-around;
}
#feature .flexStart {
	-webkit-justify-content:flex-start;
	justify-content:flex-start;
}
#feature .alias-view {
	background: #fff;
}
#feature .addColor {
	color: #f00;
}

/* mainVisual
---------------------------------------------------*/
#feature .mainVisual {
	margin: 7.5% auto 6.5%;
}
#feature .mainVisual .mainImg {
	width: 100%;
	margin: 0 auto 7%;
	position: relative;
}

/* mainLead
--------------------------------------------------*/
#feature .mainLead {
	font-size: 14px;
	font-size: 3.73vw;
	margin: 0 5% 11%;
	line-height: 1.45;
	text-align: center;
	font-weight: bold;
}

#feature .anchor {
	letter-spacing: -.5em;
	text-align: center;
	border: solid 1px #dadada;
	margin: 8% auto 0;
}
#feature .anchor li {
	letter-spacing: normal;
	display: inline-block;
	width: calc(100% / 3);
	border-right: solid 1px #dadada;
}
#feature .anchor li:last-child {
	border-right: none;
}
#feature .anchor li a {
	display: block;
	padding: 14% 0;
	font-size: 13px;
	font-size: 3.49vw;
	font-weight: bold;
	color: #1b1b1b;
	line-height: 1.3;
}

#feature .ttl {
	font-size: 20px;
	font-size: 5.3vw;
	font-weight: bold;
	color: #12298c;
	text-align: center;
}
#feature .subttl {
	font-size: 17px;
	font-size: 4.7vw;
	text-align: center;
	font-weight: bold;
	margin: 11% auto 8%;
}
#feature .list {
	text-align: center;
	margin: 0 4%;
}
#feature .usage .list {
	margin-top: 8.3%;
	margin-bottom: 12%;
}
#feature .list li {
}
#feature .usage .list li {
	letter-spacing: -.5em;
	text-align: left;
	margin-bottom: 7.3%;
}
#feature .step .list li {
	margin-bottom: 12.3%;
}
#feature .usage .list li > * {
	letter-spacing: normal;
	display: inline-block;
	vertical-align: middle;
}
#feature .usage .list li .img {
	width: 45.8%;
	margin-right: 4.5%;
}
#feature .list li .text {
	font-size: 14px;
	font-size: 3.73vw;
	line-height: 1.6;
}
#feature .usage .list li .text {
	width: 47%;
	text-align: left;
}
#feature .step .list li .text {
	margin-top: 7%;
	text-align: left;
	line-height: 1.5;
}
#feature .list li .ancTtl {
	text-align: center;
	margin-bottom: 9%;
	letter-spacing: 2px;
	font-size: 16px;
	font-size: 4.27vw;
	font-weight: bold;
}
#feature .list li .ancTtl .circle {
	display: inline-block;
	border-radius: 50%;
	width: 12vw;
	height: 12vw;
	background-color: #12298c;
	color: #fff;
	font-size: 24px;
	font-size: 6.2vw;
	font-weight: bold;
	letter-spacing: normal;
	text-align: center;
	box-sizing: border-box;
	padding: 3% 0;
	margin: 0 auto 4.4%;
}

#feature .note {
	text-align: left;
	margin: 14.3% 4% 0;
}
#feature .note p {
	font-size: 12px;
	line-height: 1.7;
	text-indent: -1em;
	margin-left: 1em;
}
#feature .note p a {
	text-decoration: underline;
	color: #000;
}
#feature .order {
	margin-top: 10.5%;
}
#feature .order .title {
	color: #12298c;
	font-weight: 700;
	font-size: 20px;
	font-size: 5.33vw;
	text-align: center;
	margin-bottom: 3%;
	line-height: 1.5;
}
#feature .order .text {
	font-weight: 700;
	font-size: 14px;
	font-size: 3.73vw;
	text-align: center;
	margin-bottom: 7%;
	line-height: 1.5;
}


@media screen and (min-width:750px) {
	#feature #mainVisual .ttl {
		font-size: 44px;
	}
	#feature #mainVisual .ttl span.txt {
		font-size: 24px;
	}
	#feature #mainVisual .ttl span.sub {
		font-size: 26px;
	}
	#feature .genderMenuArea .ancMenu li a {
		font-size: 32px;
	}
	#feature .styling .model .ttl {
		font-size: 36px;
	}
	#feature .styling .model .aliasArea .aliasTtl {
		font-size: 32px;
	}
	#feature .textBanner .bnr p {
		font-size: 24px;
	}
	#feature .textBanner .bnr p span {
		font-size: 20px;
	}
	#feature .lookbookArea .ttl {
		font-size: 36px;
	}
	#feature .lookbookArea .ttlSub {
		font-size: 28px;
	}
	#feature .lookbookArea .featureLink a {
		font-size: 32px;
	}
	#feature .lookbookArea .featureLink a span {
		font-size: 24px;
	}
	#feature .coordArea .ttlSub {
		font-size: 28px;
	}
	#feature .coordArea .codeBanner a,
	#feature .codeBanner a {
		font-size: 24px;
	}
	#feature .itemArea .ttl {
		font-size: 36px;
	}
	#feature .recommendedArea .ttl {
		font-size: 36px;
	}
	#feature .recommendedArea .smallTxt {
		font-size: 28px;
	}
	#feature .recommendedArea .recoTtl .subTtl {
		font-size: 28px;
	}
	#feature .recommendedArea .lead {
		font-size: 28px;
	}
	#feature .movieArea .ttl {
		font-size: 36px;
	}
	#feature .movieArea .lead {
		font-size: 28px;
	}
	#feature #mainVisual.insert .ttl {
		width: 750px;
		height: 500px;
	}
	#feature .order .title {
		font-size: 40px;
	}
	#feature .order .text {
		font-size: 28px;
	}
}