@charset 'UTF-8';
.pageTtl {
	font-size: 30px;
	margin-bottom: 75px;
	font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif!important;
}
.stepType {
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif;
	margin-top: 51px;
}
.titWrap {
	width: 100%;
	max-width: 820px;
	margin: 51px auto 0;
	position: relative;
	height: 30px;
}
.titWrap .tit01, .titWrap .tit02 {
	margin-top: 0;
	position: absolute;
	top: 0;
}
.titWrap .tit01 {
	left: 35%;
}
.titWrap .tit02 {
	left: 62%;
}
.stepContainer {
	width: 673px;
	margin: 0 auto;
	position: relative;
	padding-top: 40px;
	padding-bottom: 20px;
	margin-bottom: 104px;
}
.wide.stepContainer {
	width: 100%;
	max-width: 820px;
}
.stepListBox {
	overflow: hidden;
	position: relative;
	padding-bottom: 38px;
	clear: both;
}
.stepItemBox {
	position: relative;
}
.stepItemBox a {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	opacity: 0;
	-webkit-transition: 0.1s opacity linear;
	-o-transition: 0.1s opacity linear;
	transition: 0.1s opacity linear;
}
.stepItemBox a:hover {
	opacity: 0.25;
}
.howtoMassageCleanse #step-massage_cleanse a,
.howtoEnrichSoap #step-enrich_soap a,
.howtoBoosterSerum #step-booster_serum a,
.howtoGlossy #step-glossy_cream a,
.howtoHighTention #step-high_tention_mask a,
.howtoPlatinum #step-platinum_serum a,
.howtoCaxa #step-refa_face_caxa a,
.howtoRising #step-rising_lotion a,
.howtoHighTention #step-high_tention_mask_02 a {
	color: #fff;
	opacity: 0 !important;
}
.howtoMassageCleanse #step-massage_cleanse .stepTtlBox,
.howtoEnrichSoap #step-enrich_soap .stepTtlBox,
.howtoBoosterSerum #step-booster_serum .stepTtlBox,
.howtoGlossy #step-glossy_cream .stepTtlBox,
.howtoHighTention #step-high_tention_mask .stepTtlBox,
.howtoPlatinum #step-platinum_serum .stepTtlBox,
.howtoCaxa #step-refa_face_caxa .stepTtlBox,
.howtoRising #step-rising_lotion .stepTtlBox,
.howtoHighTention #step-high_tention_mask_02 .stepTtlBox {
	color: #b71254;
}
.howtoMassageCleanse #step-massage_cleanse .stepItemBox,
.howtoEnrichSoap #step-enrich_soap .stepItemBox,
.howtoBoosterSerum #step-booster_serum .stepItemBox,
.howtoGlossy #step-glossy_cream .stepItemBox,
.howtoHighTention #step-high_tention_mask .stepItemBox,
.howtoPlatinum #step-platinum_serum .stepItemBox,
.howtoCaxa #step-refa_face_caxa .stepItemBox,
.howtoRising #step-rising_lotion .stepItemBox,
.howtoHighTention #step-high_tention_mask_02 .stepItemBox {
	color: #fff;
	background-color: #b71254;
}
.howtoMassageCleanse #step-massage_cleanse .stepItemBox:after,
.howtoEnrichSoap #step-enrich_soap .stepItemBox:after,
.howtoBoosterSerum #step-booster_serum .stepItemBox:after,
.howtoGlossy #step-glossy_cream .stepItemBox:after,
.howtoHighTention #step-high_tention_mask .stepItemBox:after,
.howtoPlatinum #step-platinum_serum .stepItemBox:after,
.howtoCaxa #step-refa_face_caxa .stepItemBox:after,
.howtoRising #step-rising_lotion .stepItemBox:after,
.howtoHighTention #step-high_tention_mask_02 .stepItemBox:after {
	background-image: url(/images/common/icon_arrow_white_down2.png);
	background-size: 12px auto;
}
#step-high_tention_mask {
	display: none;
}
.howtoHighTention #step-high_tention_mask {
	display: block;
}
#step-high_tention_mask .stepTtlBox {
/* padding-top: 24px; */
}
.stepTtlBox {
	width: 157px;
	float: left;
	font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif;
}
.wide .stepTtlBox {
	width: 26.92%;
	/*width: 220px;*/
}
.stepIcoBox {
	display: block;
	margin-bottom: 5px;
	padding-left: 3px;
}
.stepItemBox:after {
	content: "";
	width: 11px;
	height: 9px;
	background: url(/images/common/icon_arrow.png) no-repeat;
	position: absolute;
	right: 18px;
	top: 50%;
	background-size: 6px auto;
	background-position: center center;
}
.stepListBox.active .stepItemBox:after {
	background: url(/images/common/icon_arrow_white_down2.png) no-repeat;
	background-size: 11px auto;
	background-position: center center;
}
.stepItemBox {
	padding: 5px 0;
	display: table;
	width: 510px;
	float: right;
	background: #e9ebeb;
	border-radius: 5px;
}
.wide .stepItemBox {
	padding: 5px 0 5px 38px;
}
.wide .width01 .stepItemBox {
	/*width: 339px;*/
	width: 41.34%;
}
.wide .width02 .stepItemBox {
	/*width: 562px;*/
	width: 68.33%;
}
.stepItemBox:after {
	clear: both;
}
.stepTtl {
	font-weight: bold;
	font-size: 22px;
	/* line-height: 5px; */
}
.wide .stepTtlBox .txtS {
	/* display: block; */
	font-size: 14px;
	margin-top: -10px;
}
#step-high_tention_mask .stepTtl {
	letter-spacing: -1.1px;
	/* text-indent: -7.1px; */
}
#stepSpecial .stepTtl {
	letter-spacing: -0.8px;
}
.stepTxt {
	font-size: 18px;
}
.stepNum {
	font-size: 32px;
}
.itemType {
	font-size: 16px;
	width: 110px;
	text-align: left;
	padding-left: 25px;
}
.wide .itemType {
	display: none;
}
.itemThumb {
	width: 80px;
}
.stepItemName {
	line-height: 1;
	padding-left: 20px;
	font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif;
}
.wide .stepItemName {
	padding-right: 30px;
}
.stepItemName .en {
	font-size: 18px;
	line-height: 1;
	display: inline-block;
	margin-bottom: 7px;
}
.stepItemName .ja {
	font-size: 14px;
	line-height: 1;
	display: inline-block;
}
.stepTtlSub {
	font-size: 18px;
	margin-left: -0.4em;
}
.itemType, .itemThumb, .stepItemName {
	vertical-align: middle;
	display: table-cell;
}
.itemThumb img {
	width: 80px;
	height: auto;
}
.stepArw {
	width: 4px;
	background: #e9ebeb;
	position: absolute;
	height: 100%;
	left: 50%;
	top: 0;
}
.stepArw.arw01 {
	left: 36.1%;
}
.stepArw.arw02 {
	left: 63.2%;
}
.stepArwHead img {
	width: 22px;
	height: auto;
}
.stepArwHead {
	line-height: 1;
	position: absolute;
	bottom: 0;
	left: -9px;
}

@media screen and (min-width: 767px) and (max-width:1279px) {
.stepType {
	margin-top: 30px;
}
}

@media screen and (max-width: 930px) {
.wide .width02 .stepItemBox {
	width: 63.53%;
}
.titWrap .tit01 {
	left: 39.7%;
}
.stepArw.arw01 {
	left: 41%;
}
}

@media screen and (max-width: 766px) {
.stepType {
	margin-top: 29px;
}
.stepContainer {
	width: auto;
	padding-top: 20px;
	margin-bottom: 85px;
	padding-bottom: 30px;
	max-width: 460px;
}
.stepListBox {
	margin-bottom: 0px;
	padding-bottom: 26px;
}
.stepTtlBox {
	float: none;
}
#step-high_tention_mask .stepTtlBox {
	padding-top: 0;
}
.stepItemBox {
	float: none;
	width: 100%;
	display: block;
	position: relative;
	padding: 5px 0 0 38px;
}
.itemType {
	display: block;
	text-align: center;
	width: auto;
}
.itemThumb {
	padding-left: 5px;
}
.stepItemName {
	padding-left: 8px;
}
.stepItemName .en {
	font-size: 15px;
}
.stepItemName .ja {
	font-size: 13px;
}
.stepIcoBox {
	margin-bottom: 0;
}
.itemType,
.itemThumb,
.stepItemName {
	font-size: 15px;
}
.wide .itemType {
	display: block;
	font-size: 13px;
	padding-left: 6px;
}
.wide.stepContainer {
	max-width: 460px;
}
.titWrap {
	max-width: 460px;
	margin-top: 30px;
}
.titWrap .tit01 {
	left: 55px;
}
.stepArw.arw01 {
	left: 65px;
}
.titWrap .tit02 {
	left: auto;
	right: 31px;
}
.stepArw.arw02 {
	left: auto;
	right: 39px;
}
.wide .stepItemBox {
	padding: 5px 6px 5px 0;
}
.wide .stepItemBox {
	box-sizing: border-box;
}
.wide .stepTtlBox {
	width: 100%;
	line-height: 1.5;
	margin-bottom: 5px;
}
.wide .stepTtl {
	font-size: 20px;
	line-height: 0;
	margin-bottom: 0;
}
.wide .width01 {
	width: 65.51%;
	float: right;
}
.wide .width01 .stepItemBox {
	width: 100%;
}
.wide .stepTtlBox .stepIcoBox {
	display: inline;
}
.wide .stepTtlBox .stepIcoBox.long {
	display: block;
	margin-bottom: 10px;
}
.wide .stepTtlBox .stepTtl {
	line-height:0;
 margin-bottom: 0px;
}
.wide .stepTtlBox .txtS {
	display: inline-block;
	line-height:0;
 margin-top: -20px;
}
.wide .width02 .stepItemBox {
	width: 100%;
	text-align: left;
}
/*.wide .stepItemName {
		width: 100%;
		text-align: center;
  background: url(/images/common/icon_arrow.png) no-repeat right center;
  background-size: 6px auto;
  padding-right: 20px;
	}*/
.wide .width01 .stepItemName {
	width: 100%;
	text-align: center;
	background: url(/images/common/icon_arrow.png) no-repeat right center;
	background-size: 6px auto;
	padding-right: 20px;
}
.wide .width02 .stepItemName {
	width: 100%;
	text-align: left;
	background: url(/images/common/icon_arrow.png) no-repeat right center;
	background-size: 6px auto;
	padding-left: 20px;
	padding-right: 20px;
}
.howtoBoosterSerum .wide #step-booster_serum .stepItemBox:after,
.howtoGlossy .wide #step-glossy_cream .stepItemBox:after,
.howtoHighTention .wide #step-high_tention_mask .stepItemBox:after,
.howtoPlatinum .wide #step-platinum_serum .stepItemBox:after,
.howtoCaxa .wide #step-refa_face_caxa .stepItemBox:after,
.howtoRising .wide #step-rising_lotion .stepItemBox:after,
.howtoHighTention #step-high_tention_mask_02 .stepItemBox:after {
	display: none;
}
.howtoBoosterSerum .wide #step-booster_serum .stepItemName,
.howtoGlossy .wide #step-glossy_cream .stepItemName,
.howtoHighTention .wide #step-high_tention_mask .stepItemName,
.howtoPlatinum .wide #step-platinum_serum .stepItemName,
.howtoCaxa .wide #step-refa_face_caxa .stepItemName,
.howtoRising .wide #step-rising_lotion .stepItemName,
.howtoHighTention #step-high_tention_mask_02 .stepItemName {
	background-image: url(/images/common/icon_arrow_white_down2.png);
	background-size: 12px auto;
}
.wide .stepItemName .ja {
	display: none;
}
.wide .stepItemName .en {
	margin-bottom: 0;
	vertical-align: middle;
	text-align: center;
}
.wide .stepItemBox:after {
	right: 6px;
}
.wide .stepNum {
	font-size: 25px;
}
.wide .stepItemBox:after {
	display: none;
}

}