.howto h4,
.howto .sub,
.howto .capacity,
#supoprt li,
#howto-osusume p,
#step1, #step2,
#howto-osusume2 dl,
#howto-osusume3 dl,
#howto-osusume3 p,
#howto-osusume4 dl,
#howto-osusume4 p {font-family: 'Hiragino Kaku Gothic Pro', "游ゴシック", YuGothic, 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;}

/* ===================== pc ===================== */

@media print, screen and (min-width: 769px) {
	
	#howto-title p {display: none;}
	#howto-title {position: relative;}
	#howto-title ul {position: absolute; right: calc((100% - 1000px)/2); top: 33px; height: 34px; margin: 0; padding: 0; list-style-type: none;}
	#howto-title li {
		display: inline-block; vertical-align: middle; width: 170px; margin-left: 10px; font-size: 15px; line-height: 36px; border: solid 1px #707070; border-radius: 17px; text-align: center;
		background: #ffffff url("/common/images/common/icon5.svg") no-repeat 20px center; background-size: 6px 12px;
		transition: background-color .15s linear;
		-webkit-transition: background-color .15s linear;
		-moz-transition: background-color .15s linear;
		-ms-transition: background-color .15s linear;
	}
	#howto-title li a {display: block; width: 100%; height: 100%;}
	
	#howto-title li:hover,
	.step #howto-title li:nth-of-type(1),
	.osusume #howto-title li:nth-of-type(2) {
		background: url("/common/images/common/icon6.svg") no-repeat 20px center #707070; background-size: 6px 12px;
	}
	#howto-title li:hover a,
	.step #howto-title li:nth-of-type(1) a,
	.osusume #howto-title li:nth-of-type(2) a {
		color: #fff;
	}
	
	#howto nav {width: 1000px; height: 280px; margin: 0 auto;}
	#howto nav ul {margin: 0; padding: 0; list-style-type: none;}
	#howto nav li {
		display: inline-block; vertical-align: top; width: calc(100%/2); height: 280px; text-align: center; opacity: .7; box-sizing: border-box;
		transition: opacity .15s linear, background-color .15s linear;
		-webkit-transition: opacity .15s linear, background-color .15s linear;
		-moz-transition: opacity .15s linear, background-color .15s linear;
		-ms-transition: opacity .15s linear, background-color .15s linear;
	}
	#howto nav li img {width: auto; height: 100%;}
	
	#howto nav li:hover,
	#howto.clarity nav li:nth-of-type(1),
	#howto.whitening nav li:nth-of-type(2) {
		opacity: 1;
		background-color: #fff;
	}
	#howto nav li span {display: none;}
	
	main {
		box-sizing: border-box;
		background-image:
			url("/common/images/common/contents_bg2.png"),
			url("/common/images/common/contents_bg1.jpg");
		background-repeat: repeat-y, repeat-y;
		background-position: center center, center top;
		background-size: 100%, 100%;
		background-attachment: fixed, fixed;
	}

	main.whitening {
		box-sizing: border-box;
		background: url("/common/images/common/contents_whitening_bg.jpg") repeat-y center top;
		background-size: cover;
		background-attachment: fixed;
	}
	
	#howto-contents {width: 1000px; margin: 0 auto; background-color: #fff; text-align: center;
		padding-bottom: 30px;
	}
	#read {padding: 30px 0; font-size: 20px; text-align: center;}
	#read small{font-size: 13px; color: #666;}
	
	#howto-contents {text-align: center;}
	#howto-contents img {width: 100%; height: auto;}
	
	#morning,
	#night {display: inline-block; vertical-align: top; margin: 0 30px;
		position: relative;
		z-index: 10;
	}
	
	.item {position: relative; margin-top: 30px;}
	#morning .item:after,
	#night .item:after {content: ''; display: block; position: absolute; left: 50%; top: 0; width: 6px; height: 100%; margin-left: -3px; z-index: -10;}
	#morning .item:after {background-color: #ffd278;}
	#night .item:after {background-color: #b9d4ef;}
	
	#morning {
		width: 300px;
		z-index: 100;
	}
	
	.item {position: initial; z-index: 10;}
	.time {width: 70px; height: 100px; margin: 0 auto;}
	.block {margin-bottom: 30px;}
	
	.non-display{display: none;}
	#non-display_1{height: 344px;}
	#non-display_2{height: 368px;}
	#non-display_3{height: 400px;}
	#non-display_4{height: 406px;}
	#non-display_5{height: 404px;}
	#non-display_6{height: 340px;}
	#non-display_7{height: 330px;}
	#non-display_8{height: 316px;}
	#non-display_9{height: 380px;}
	#non-display_10{height: 403px;}
	#non-display_11{height: 376px;}
	#clearemulsion_w{height: 422px;}

	#non-display_1 img, #non-display_1 a,
	#non-display_2 img, #non-display_2 a,
	#non-display_3 img, #non-display_3 a,
	#non-display_4 img, #non-display_4 a,
	#non-display_5 img, #non-display_5 a,#non-display_5 h3,
	#non-display_6 img, #non-display_6 a,#non-display_6 h3,
	#non-display_7 img, #non-display_7 a,#non-display_7 h3,
	#non-display_8 img, #non-display_8 a,
	#non-display_9 img, #non-display_9 a,#non-display_9 h3,
	#non-display_10 img, #non-display_10 a,#non-display_10 h3,
	#non-display_11 img, #non-display_11 a,#non-display_11 h3{
		display: none;
	}
	
	
	#sengan{ /*margin-top: 360px;*/ margin-top: 30px; position: relative;}
	#sengan,
	#lotion,
	#serum,
	#emulsion,
	#w_lotion,
	#w_essence,
	#w_emulsion,
	#skinbarrier-mist,
	#wwr,
	#whitening_wrinklerepair,
	#clearlotion_w,
	#clearemulsion_w,
	#clear_cream_w {
		width: 660px;
	}
	
	#cream-pack,
	#morning #w_emulsion,
	#w_cream,
	#skinbarrier-mist{margin: 0 auto 30px;}
	
	#skinbarrier-uv{
		margin-top: 50px;
		position: relative;
		z-index: 10;
	}
	#skinbarrier-bb{
		margin-top: 0;
		margin-bottom: 0;
		background: ;
	}
	
	#cream-pack{
		margin-top: 134px;
		margin-bottom: 0;
	}
	
	#pc_space{
		display: block;
		width: 300px;
		height: 373px;
		margin: 0;
		padding: 0;
	}

	.block h3 {width: auto; height: 38px; margin-bottom: 5px; text-align: left;}
	
	#sengan h3,
	#lotion h3,
	#serum h3,
	#emulsion h3,
	#w_lotion h3,
	#w_essence h3,
	#w_emulsion h3,
	#wwr h3,
	#whitening_wrinklerepair h3,
	#clearlotion_w h3,
	#clearemulsion_w h3,
	#clear_cream_w h3 {text-align: center;}
	
	#cream h3{width: 80px; /*display: inline-block;*/}
	#cream-pack h3{width: 120px; /*display: inline-block;*/}
	
	p.comment{
		width: ;
		/*background: #ffffff;*/
		font-size: 12px;
		text-align: right;
		display: block;
		vertical-align: middle;
		margin: 0 0 0 0px;
	}
	#cream p.comment,
	#w_cream p.comment {
		/*width: 200px;*/
		margin: -42px 0 0 0;
		/*float: right;*/
		font-size: 12px;
		/*-webkit-transform:scale(0.7);
		-moz-transform:scale(0.7);
		-ms-transform:scale(0.7);
		-o-transform:scale(0.7);
		transform:scale(0.7);*/
		letter-spacing: -0.05em;
	}
	#cream-pack p.comment{
		width: 110px;
		margin: -30px 0 0 0px;
		float: right;
	}
	#w_cream{
		float: none;
	}
	
	#howto-contents .block h3 img {width: auto; height: 100%;}
	.item .box {background: url("/common/images/howto/or.svg") no-repeat center center #fff; background-size: 40px 40px; #fff; box-shadow: 0 0 6px rgba(0,0,0,.2);}
	.item .box.one {background: none; background-color: #fff;}
	.item .box p {display: inline-block; vertical-align: top; width: 150px; height: auto;}
	
	.item .box_left,
	.item .box_right {background: url("/common/images/howto/or.svg") no-repeat center center #fff; background-size: 40px 40px; #fff; box-shadow: 0 0 6px rgba(0,0,0,.2);}
	
	.item .no-or{background-image: none;}

	.item #skinbarrier-bb .box p{
		display: block;
		width: 300px;
	}
	p.or{
		width: 40px;
		margin: 0 auto;
		background: ;
		padding: 20px 0 10px;
		position: relative;
		z-index: 1;
	}
	
	#skinbarrier-bb .box p img.uv{
		padding-bottom: 30px;
	}
	#skinbarrier-bb .box p img.bb{
		padding-top: 30px;
	}

	#sengan .item .box p,
	#lotion .item .box p{
		width: px;
	}
	#lotion .box_left,
	#lotion .box_right {
		width: 320px;
		display: inline-block;
		box-shadow: none;
		background: url(/common/images/howto/or.svg) no-repeat center center;
		background-size: 40px 40px;
	}
	#emulsion .box_right {
		width: 320px;
		display: inline-block;
		box-shadow: none;
		background: url(/common/images/howto/or.svg) no-repeat center center;
		background-size: 40px 40px;
		vertical-align: middle;
	}
	#emulsion .box {
		background: url(/common/images/howto/or.svg) no-repeat center center #fff;
		background-size: 40px 40px;
		padding: 10px 0;
	}
	#emulsion .box_left {
		width: 320px;
		display: inline-block;
		box-shadow: none;
		background: none;
		background-size: 40px 40px;
		vertical-align: middle;
	}
	
	#cream .box_left,
	#cream .box_right {
		width: 148px;
		display: inline-block;
	}
	#cream {
		margin: 100px 0 30px 0;
	}
	
	.item .box p.name{width: 300px; height: 54px;}
	.item .box.one p {width: 300px; height: auto;}
	
	#morning .block:nth-of-type(1) .box {background-position: 50% center;}
	#morning .block:nth-of-type(5) .box{background-position: center 60%;}
	#night .block:nth-of-type(2) .box {background-position: 55% center;}
	#night .block:nth-of-type(1) .box {background-position: center 60%;}
	
	#supoprt {width: 1000px; height: auto; margin: 0 auto; padding-bottom: 3%;}
	#supoprt h2, #supoprt ul, #supoprt li {display: inline-block; vertical-align: top;}
	#supoprt h2 {width: 336px; height: 280px;}
	#supoprt h2 img {width: auto; height: 100%;}
	#supoprt ul {margin: 0; padding: 0; list-style-type: none;}
	#supoprt li {width: 166px; heihgt: auto; text-align: center;}
	#supoprt li .pic {width: 120px; margin: 0 auto;}
	#supoprt li .pic img {width: 100%; height: auto;}
	#supoprt li h3 {font-size: 15px; font-weight: normal; color: #707070; line-height: 1.4em;}
	#supoprt li p {text-align: center; color: #ea6d5e; font-size: 12px;}
	#supoprt li p.txt {margin-top: 20px; text-align: center; color: #707070; font-size: 11px;}
	
	#howto_spMenu {display: none;}
	
	
	/*howto-osusume*/
	.osusume #howto-contents {width: 100%; padding-top: 50px; background: none;}
	.osusume #howto-contents h2 {font-size: 28px; line-height: 1.4em;}
	.howto-osusume-body {position: relative; width: 1000px; margin: 0 auto; padding: 50px 0;}
	/*#howto-osusume*/
	#howto-osusume {width: 1000px; margin: 20px auto 50px; padding: 0 30px 30px; background-color: #fff; box-sizing: border-box;}
	#howto-osusume h2 {position: relative; top: -20px;}
	#howto-osusume p {font-size: 15px; text-align: center; color: #242424;}
	
	/*howto-osusume1 / howto-osusume2 / howto-osusume3 / howto-osusume4*/
	#howto-osusume1 h2, #howto-osusume2 h2, #howto-osusume3 h2, #howto-osusume4 h2 {position: relative; padding-bottom: 80px; text-align: left;}
	.howto-osusume-body h2:after {content: ''; display: block; position: absolute; left: -80px; bottom: 0; width: 100%; height: 102px;}
	#howto-osusume1 h2 span, #howto-osusume2 h2 span {display: inline-block; margin: 0 3px; color: #808080; font-size: 23px;}
	
	/*#howto-osusume1*/
	#howto-osusume1 {background-color: #fff;}
	#howto-osusume1 .howto-osusume-body h2:after {background: url("/common/images/howto/title_bg1.png") no-repeat left bottom; background-size: auto 100%;}
	#step1, #step2 {display: inline-block; vertical-align: top; width: calc(100%/2); padding: 0 35px; box-sizing: border-box;}
	#step1 {border-right: solid 1px #707070;}
	#step1 h3, #step2 h3 {width: 430px; margin-bottom: 30px; font-size: 17px; line-height: 1.6em; font-weight: normal;}
	#step1 h3 img, #step2 h3 img,
	#step1 h3 span, #step2 h3 span,
	#step1 dt, #step2 dt, #step1 dd, #step2 dd {display: inline-block; vertical-align: middle;}
	#step1 h3 img, #step2 h3 img {width: 100px; height: 100px;}
	#howto-contents #step1 h3 span, #howto-contents #step2 h3 span {width: 330px; padding-left: 20px; box-sizing: border-box; text-align: left;}
	
	#step1 dl, #step2 dl {width: 386px; margin: 30px auto 0; padding-bottom: 40px; background: url("/common/images/common/icon8.svg") no-repeat center bottom; background-size: 24px 12px;}
	#step1 dl:last-child, #step2 dl:nth-of-type(2) {padding-bottom: 0; background: none;}
	#step1 dt, #step2 dt {width: 114px;}
	#step1 dd, #step2 dd {width: 272px; padding-left: 30px; box-sizing: border-box; font-size: 14px; line-height: 1.8em; text-align: left;}
	#step2 .kouka {width: 100%; margin: 40px 0 30px; padding: 8px 10px; border: solid 1px #ed7700; font-size: 14px; color: #ed7700; box-sizing: border-box;}
	#step2 .ex {font-size: 12px; color: #808080; text-align: right;}
	
	/*#howto-osusume2*/
	#howto-osusume2 .howto-osusume-body h2:after {background: url("/common/images/howto/title_bg1.png") no-repeat left bottom; background-size: auto 100%;}
	#howto-osusume2 .box, #howto-osusume2 .pic, #howto-osusume2 dl {display: inline-block; vertical-align: middle;}
	#howto-osusume2 .box {width: 50%; padding: 0 5px; box-sizing: border-box;}
	#howto-osusume2 .pic {width: 230px;}
	#howto-osusume2 dl {width: 240px; margin-left: 10px; text-align: left; line-height: 2em;}
	#howto-osusume2 dt {margin-bottom: 10px; padding: 0 0 10px; border-bottom: solid 1px #707070; font-size: 16px; color: #707070;}
	#howto-osusume2 dd {font-size: 14px; text-align: justify; color: #707070;}
	
	/*#howto-osusume3*/
	#howto-osusume3 {background-color: #fff;}
	#howto-osusume3 .howto-osusume-body h2:after {background: url("/common/images/howto/title_bg2.png") no-repeat left bottom; background-size: auto 100%;}
	#howto-osusume3 h2 {color: #ea6d5e;}
	#howto-osusume3 p {position: absolute; right: 50px; top: 50px; width: 420px; padding: 0 10px 10px 20px; box-sizing: border-box; border-left: solid 1px #ea6d5e; border-bottom: solid 1px #ea6d5e; font-size: 15px;}
	#howto-osusume3 p img {position: absolute; right: -50px; top: 0; width: 42px; height: 130px;}
	#howto-osusume3 dl {width: calc(100%/3); display: inline-block; vertical-align: top; padding: 0 2%; box-sizing: border-box;}
	#howto-osusume3 dt {width:148px; height: 190px; margin: 0 auto 20px;}
	#howto-osusume3 dd {text-align: justify; font-size: 14px; color: #707070; line-height: 1.8em;}
	
	/*#howto-osusume4*/
	#howto-osusume4 .howto-osusume-body h2:after {background: url("/common/images/howto/title_bg2.png") no-repeat left bottom; background-size: auto 100%;}
	#howto-osusume4 h2 span, #howto-osusume4 h2 img {display: inline-block; vertical-align: middle; margin-right: 10px;}
	#howto-osusume4 h2 img {width: 92px; height: 98px;}
	#howto-osusume4 h2 span:nth-of-type(1) {font-size: 25px; color: #ea6d5e;}
	#howto-osusume4 dl, #howto-osusume4 p {display: inline-block; vertical-align: top; width: calc(100%/3); padding: 0 2%; box-sizing: border-box;}
	#howto-osusume4 dt {width:148px; height: 190px; margin: 0 auto 20px;}
	#howto-osusume4 dd {text-align: justify; font-size: 14px; color: #707070; line-height: 1.8em;}
	#howto-osusume4 p {padding: 0 10px 20px 20px; box-sizing: border-box; border-left: solid 1px #ea6d5e; border-bottom: solid 1px #ea6d5e; font-size: 15px;}

	.small {
		font-family: 'Hiragino Kaku Gothic Pro', "游ゴシック", YuGothic, 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
		font-size: 11px;
		text-align: center;
		color: #666666;
		margin-top: 10px;
	}
}

@media all and (-ms-high-contrast: none) {
	main {
		display: block;
		background-position: center top, center top;
		background-attachment: scroll, scroll;
	}
}

/* ===================== sp ===================== */

@media screen and (max-width: 768px) {
	
	#howto-title {position: relative;}
	#howto-title p {width: 100%; height: 4rem; background-color: #f7f6f5; border-bottom: solid 1px #b2b2b2;}
	#howto-title ul {width: 100%; margin: 0 auto; padding: 0; list-style-type: none; text-align: center;}
	#howto-title li {line-height: 4rem; font-size: 16px; box-sizing: border-box;}
	#howto-title li a {display: block; width: 100%; height: 100%;}
	#howto-title p {position: relative; height: 4rem; line-height: 4rem; font-size: 16px; color: #333; text-align: center;}
	#howto-title {position: relative; width: 100%; z-index: 10;}
	#howto-title p:before,
	#howto-title p:after {content: ''; position: absolute; background-color: #707070;}
	#howto-title p:before {right: 1.4rem; top: 1.8rem; width: 16px; height: 2px;}
	#howto-title p:after {right: 2.1rem; top: 1.1rem; width: 2px; height: 16px;}
	#howto-title ul {display: none; box-shadow: 0 3px 2px 2px rgba(0,0,0,.1); background-color: #fff;}
	#howto-title li {
		line-height: 5rem; font-size: 13px; font-weight: bold; box-sizing: border-box; border-top: solid 1px #ccc;
		background: url("/common/images/common/icon1.svg") no-repeat right 2rem center;
		background-size: 6px 10px;
	}
	#howto-title li a {padding-left: 1rem; color: #000; box-sizing: border-box;}
	#howto-title.opened p:after {display: none;}
	
	
	#howto nav {width: 100%; height: auto; margin: 0 auto; background-color: #fff;}
	#howto nav ul {margin: 0; padding: 0; list-style-type: none;}
	#howto nav li {width: 100%; height: auto; border-bottom: solid 1px #eee;}
	#howto nav li img {width: 100%; height: auto;}
	#howto nav li span {
		display: block; height: 4rem; padding-left: 2rem; line-height: 4rem; font-size: 15px; box-sizing: border-box;
		background: url("/common/images/common/icon1.svg") no-repeat right 2rem center;
		background-size: 6px 10px;
	}
	
	#howto.clarity nav li:nth-of-type(1) span,
	#howto.clarity nav li:nth-of-type(2) img,
	#howto.whitening nav li:nth-of-type(1) img,
	#howto.whitening nav li:nth-of-type(2) span {
		display: none;
	}
	
	#howto {width: 100%; background: url("/common/images/common/contents_bg_sp.jpg") repeat-y center top; background-size: 100%; background-attachment: fixed;}
	
	#howto-contents {width: 100%; margin: 0 auto; padding: 5% 5% 1%; background-color: #fff; text-align: center; box-sizing: border-box;} 
	#read {margin-bottom: 2rem; padding: 0; font-size: 15px; text-align: justify;}
	
	#howto-contents {text-align: center;}
	#howto-contents img {width: 100%; height: auto;}
	
	.item {position: relative; margin-top: 1rem;}
	#morning .item:after,
	#night .item:after {content: ''; display: block; position: absolute; left: 50%; top: 0; width: 6px; height: 100%; margin-left: -3px; z-index: -10;}
	#morning .item:after {background-color: #ffd278;}
	#night .item:after {background-color: #b9d4ef;}
	
	#morning {width: 100%;}
	
	.item {position: relative; z-index: 10;}
	.time {width: 70px; height: 100px; margin: 0 auto;}
	.block {margin-bottom: 30px;}
	.block h3 {width: auto; height: 38px; margin-bottom: 5px; text-align: left;}
	p.comment{
		width: 100%;
		background: #ffffff;
		font-size: 12px;
		text-align: right;
		margin: 0 0 0 0;
		display: block;
	}
	#cream-pack p.comment{
		background: none;
		margin: -20px 0 0 0;
	}
	#cream p.comment,
	#w_cream p.comment {
		margin: -42px 0 0 0;
		/*float: right;*/
		font-size: 12px;
		/*-webkit-transform:scale(0.7);
		-moz-transform:scale(0.7);
		-ms-transform:scale(0.7);
		-o-transform:scale(0.7);
		transform:scale(0.7);
		letter-spacing: -0.05em;*/
		background: none;
		display: ;
	}
	
	#pc_space{
		display: none;
	}

	
	#howto-contents .block h3 img {width: auto; height: 100%;}
	.item .box {background: url("/common/images/howto/or.svg") no-repeat center center #fff; background-size: 40px 40px; #fff; box-shadow: 0 0 6px rgba(0,0,0,.2);}
	.item .box.one {background: none; background-color: #fff;}
	.item .box p {display: inline-block; vertical-align: top; width: 150px; height: auto;}
	.item .box.one p {width: 300px; height: auto;}
	.item .box p.name{width: 90%;}
	
	.item .no-or{background-image: none;}
	
	p.or{
		width: 40px;
		margin: 0 auto;
		background: ;
		padding: 10% 0 5%;
		position: relative;
		z-index: 1;
	}
	
	#night #non-display_2 .box_left,
	#night #non-display_4 .box_left {
		margin-bottom: 15%;
	}
	#night #non-display_2 .box_right,
	#night #non-display_4 .box_right {
		margin-top: 15%;
	}
	#night #non-display_8 p {
		width: 100%;
	}
	#lotion .box_leftt p,
	#emulsion .box_left p {
		margin-bottom: 15%;
	}


	#skinbarrier-uv{
		position: relative;
		z-index: 10;
	}
	#skinbarrier-bb{
		background: ;
	}
	
	#morning .block:nth-of-type(1) .box {background-position: 48% 60%;}
	#morning .block:nth-of-type(5) .box{background-position: 50% 60%;}
	#night .block:nth-of-type(1) .box {background-position: 50% 60%;}
	#night .block:nth-of-type(2) .box {background-position: 48% 60%;}
	
	#supoprt {width: 100%; margin: 0 auto; padding-bottom: 5%;}
	#supoprt li {display: inline-block; vertical-align: top;}
	#supoprt h2 {width: 100%; height: auto; margin: 0 auto;}
	#supoprt h2 img {width: 100%; height: auto;}
	#supoprt ul {margin: 0; padding: 0; list-style-type: none;}
	#supoprt li {width: 49%; heihgt: auto; text-align: center;}
	#supoprt li:nth-child(odd) {margin-right: 2%;}
	#supoprt li .pic {width: 12rem; margin: 0 auto;}
	#supoprt li .pic img {width: 100%; height: auto;}
	#supoprt li h3 {font-size: 13px; font-weight: normal; color: #707070; line-height: 1.4em;}
	#supoprt li p {text-align: center; color: #ea6d5e; font-size: 12px;}
	#supoprt li p.txt {margin-top: 20px; text-align: center; color: #707070; font-size: 11px;}
	
	#howto_spMenu {margin: 0; padding: 0; background-color: #eee;}
	#howto_spMenu li {display: inline-block; vertical-align: middle; line-height: 1em; width: calc(100%/2); text-align: center; font-size: 13px; box-sizing: border-box; background: url("/common/images/common/icon8.svg") no-repeat center bottom 1rem; background-size: 12px 6px;}
	#howto_spMenu li a {display: block; width: 100%; height: 100%; padding: 1rem 0 2.4rem; box-sizing: border-box;}
	#howto_spMenu li:nth-of-type(2) {border-left: solid 1px #ccc; border-right: solid 1px #ccc;}
	
	
	
	/*howto-osusume*/
	.osusume #howto-contents {width: 100%; padding: 5% 0; background: none;}
	.osusume #howto-contents h2 {font-size: 20px; line-height: 1.3em; text-align: center;}
	.howto-osusume-body {position: relative; width: 90%; margin: 0 auto; padding: 5% 0;}
	/*#howto-osusume*/
	#howto-osusume {width: 90%; margin: 2rem auto; padding: 0 5% 5%; background-color: #fff; box-sizing: border-box;}
	#howto-osusume h2 {position: relative; top: -1.5rem;}
	#howto-osusume p {margin-top: 1rem; font-size: 13px; color: #242424;}
	#howto-osusume p br {display: none;}
	
	/*howto-osusume1 / howto-osusume2 / howto-osusume3 / howto-osusume4*/
	#howto-osusume1 h2, #howto-osusume2 h2, #howto-osusume3 h2, #howto-osusume4 h2 {position: relative; padding-bottom: 4rem; text-align: left;}
	.howto-osusume-body h2:after {content: ''; display: block; position: absolute; left: -5%; bottom: 0; width: 110%; height: 6rem;}
	#howto-osusume1 h2 span, #howto-osusume2 h2 span {display: block; margin: 3px 0 0; color: #808080; font-size: 15px;}
	
	/*#howto-osusume1*/
	#howto-osusume1 {background-color: #fff;}
	#howto-osusume1 .howto-osusume-body h2:after {background: url("/common/images/howto/title_bg1.png") no-repeat left bottom; background-size: auto 100%;}
	#step1, #step2 {margin: 0 auto; padding: 0; box-sizing: border-box;}
	#step2 {margin-top: 3rem; padding-top: 3rem; border-top: solid 1px #707070;}
	#step1 h3, #step2 h3 {width: 100%; margin-bottom: 3rem; font-size: 14px; line-height: 1.6em; font-weight: normal;}
	#step1 h3 img, #step2 h3 img,
	#step1 h3 span, #step2 h3 span,
	#step1 dt, #step2 dt, #step1 dd, #step2 dd {display: inline-block; vertical-align: middle;}
	#step1 h3 img, #step2 h3 img {width: 8rem; height: 8rem;}
	#howto-contents #step1 h3 span, #howto-contents #step2 h3 span {width: calc(100% - 8rem); padding-left: 2rem; text-align: left; box-sizing: border-box;}
	
	#step1 dl, #step2 dl {width: 100%; margin: 3rem auto 0; padding-bottom: 3rem; background: url("/common/images/common/icon8.svg") no-repeat center bottom; background-size: 24px 12px;}
	#step1 dl:last-child, #step2 dl:nth-of-type(2) {padding-bottom: 0; background: none;}
	#step1 dt, #step2 dt {width: 30%; padding-left: 5%; box-sizing: border-box;}
	#step1 dd, #step2 dd {width: 70%; padding-left: 5%; box-sizing: border-box; font-size: 13px; line-height: 1.8em; text-align: left;}
	#step2 .kouka {width: 100%; margin: 3rem 0 1rem; padding: 8px 10px; border: solid 1px #ed7700; font-size: 13px; color: #ed7700; box-sizing: border-box;}
	#step2 .ex {font-size: 11px; color: #808080; text-align: right;}
	
	/*#howto-osusume2*/
	#howto-osusume2 .howto-osusume-body h2:after {background: url("/common/images/howto/title_bg1.png") no-repeat left bottom; background-size: auto 100%;}
	#howto-osusume2 .pic, #howto-osusume2 dl {display: inline-block; vertical-align: middle;}
	#howto-osusume2 .box {width: 100%; margin-top: 2rem;}
	#howto-osusume2 .pic {width: 40%;}
	#howto-osusume2 dl {width: 60%; padding-left: 5%; text-align: left; line-height: 1.8em; box-sizing: border-box;}
	#howto-osusume2 dt {margin-bottom: 1rem; padding: 0 0 .5rem; border-bottom: solid 1px #707070; font-size: 14px; color: #707070;}
	#howto-osusume2 dd {font-size: 13px; text-align: justify; color: #707070;}
	
	/*#howto-osusume3*/
	#howto-osusume3 {background-color: #fff;}
	#howto-osusume3 .howto-osusume-body h2:after {background: url("/common/images/howto/title_bg2.png") no-repeat left bottom; background-size: auto 100%;}
	#howto-osusume3 h2 {color: #ea6d5e;}
	#howto-osusume3 p {position: relative; width: 90%; padding: 5%; box-sizing: border-box; border-left: solid 1px #ea6d5e; border-bottom: solid 1px #ea6d5e; font-size: 13px;}
	#howto-osusume3 p img {position: absolute; right: -3.5rem; top: 0; width: auto; height: 9rem;}
	#howto-osusume3 dl {width: 100%; margin-top: 2rem;}
	#howto-osusume3 dt, #howto-osusume3 dd {display: inline-block; vertical-align: middle;}
	#howto-osusume3 dt {width: 30%; height: auto; margin: 0 auto 20px;}
	#howto-osusume3 dd {width: 70%; padding-left: 5%; text-align: justify; font-size: 13px; color: #707070; line-height: 1.8em; box-sizing: border-box;}
	
	/*#howto-osusume4*/
	#howto-osusume4 .howto-osusume-body h2:after {background: url("/common/images/howto/title_bg2.png") no-repeat left bottom; background-size: auto 100%;}
	#howto-osusume4 h2 span, #howto-osusume4 h2 img {display: inline-block; vertical-align: middle; margin-right: 10px;}
	#howto-osusume4 h2 img {width: auto; height: 7rem;}
	#howto-osusume4 h2 span:nth-of-type(1) {font-size: 18px; color: #ea6d5e;}
	#howto-osusume4 dt, #howto-osusume4 dd {display: inline-block; vertical-align: middle;}
	#howto-osusume4 dt {width: 30%; height: auto; margin: 0 auto 20px;}
	#howto-osusume4 dd {width: 70%; padding-left: 5%; text-align: justify; font-size: 13px; color: #707070; line-height: 1.8em; box-sizing: border-box;}
	#howto-osusume4 p {padding: 0 10px 20px 20px; box-sizing: border-box; border-left: solid 1px #ea6d5e; border-bottom: solid 1px #ea6d5e; font-size: 13px;}
	
	/*横向きの際に適用*/
	@media only screen and (orientation : landscape) {
		.list-title p.copy {left: 50%;}
		.lineup:before {height: 15rem;}
	}

	.small {
		font-family: 'Hiragino Kaku Gothic Pro', "游ゴシック", YuGothic, 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
		font-size: 70%;
		color: #666666;
		margin-bottom: 20px;
	}
	
}

#uvcare .box {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #c7e6f8;
}

#uvcare .box p {
	text-align: center;
	color: #0d3b66;
}

@media print, screen and (min-width: 769px) {
	
	#uvcare .box {
		height: 266px;
	}

	#uvcare .box p {
		font-size: 24px;
	}
}

@media screen and (max-width: 768px) {
	#uvcare .box p {
		padding: 5% 0;
		font-size: 18px;
	}
}