#product-body h3,
#product-body .sub,
#product-body .capacity,
#product-body ._hover,
#setumei,
#seibun,
#product-body .ex,
#howto,
#note,
#lineup_other li .name {font-family: 'Hiragino Kaku Gothic Pro', "游ゴシック", YuGothic, 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;}
#product-body .sub span {font-family: 'A1 Mincho';}
.pink {color: #ea6d5e;}

.up {position: relative!important; top: -4px!important; font-size: 80%!important;}

.clarity #product h4 {color: #ea6d5e; border-bottom: solid 1px #ea6d5e;}
.clarity #note,
.clarity #howto,
.clarity #setumei,
.clarity #product-body .sub span {border: solid 1px #ea6d5e;}
.clarity #howto h5,
.clarity #note h5 {background-color: #ea6d5e;}
.clarity #product-body .sub,
.clarity #setumei dt {color: #ea6d5e;}

#setumei img.tested{
		width: 120px;
	}


.whitening #product h4 {color: #dd81b1; border-bottom: solid 1px #dd81b1;}
.whitening #howto,
.whitening #setumei,
.whitening #product-body .sub span {border: solid 1px #dd81b1;}
.whitening #howto h5 {background-color: #dd81b1;}
.whitening #product-body .sub,
.whitening #setumei dt {color: #dd81b1;}

.support #product h4 {color: #f29600; border-bottom: solid 1px #f29600;}
.support #howto,
.support #setumei,
.support #product-body .sub span {border: solid 1px #f29600;}
.support #howto h5 {background-color: #f29600;}
.support #product-body .sub,
.support #setumei dt {color: #f29600;}

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

@media print, screen and (min-width: 769px) {
	
	#product {width: 1000px; margin: 0 auto;}
	#product h4 {margin: 0 0 40px; padding-bottom: 6px; font-size: 22px; line-height: 1.4em;}
	#product-body, #product-shosai {display: inline-block; vertical-align: top; margin: 0 10px;}
	#product-body {width: 330px; text-align: center;}
	#product-shosai {width: 630px;}
	#product-body h3 {position: relative; font-size: 25px; color: #707070; line-height: 1.4em;}
	#product-body h3 img {position: absolute; right: 0; top: 0; width: 64px; height: 64px;}
	#product-body .sub {margin: 5px 0 10px; font-size: 14px; text-align: center;}
	#product-body .sub span {display: inline-block; vertical-align: middle; height: 24px; margin-left: 10px; padding: 0 10px; line-height: 24px; font-size: 12px;}
	#product-body .pic {width: 100%;}
	#product-body .pic img {width: 100%; height: auto;}
	#product-body .capacity {width: 180px; height: 48px; margin: 0 auto 10px; padding: 5px 10px 0 10px; background-color: #969696; font-size: 14px; color: #fff; text-align: right; font-weight: bold; line-height: 1.5em;}
	#product-body .ex {width: 200px; margin: 20px auto; font-size: 11px; color: #969696; line-height: 1.4em;}
	
	.step_link {
		width: 200px; height: 36px; margin: 0 auto 10px; line-height: 36px; border: solid 1px #707070; font-size: 15px; text-align: center;
		background: url(/common/images/common/icon2.svg) no-repeat right 10px center; background-size: 10px 12px;
	}
	.voice_link {
		width: 200px; height: 30px; margin: 0 auto; line-height: 30px; border-radius: 15px; font-size: 15px; text-align: center;
		background: url(/common/images/common/icon4.svg) no-repeat right 10px center #707070; background-size: 10px 12px;
	}
	.buy_online button {
		appearance: none;
		border: 0;
		display: block;
		margin: 50px auto 0;
		width: 210px;
		aspect-ratio: 1263 / 300;
		background: url(/common/images/common/button_buy_online.png) no-repeat center;
		background-size: contain;
		font-size: 0;
		cursor: pointer;
	}
	.buy_online button:before {
		content: '';
		display: block;
		padding-top: 25.2%;
	}
	.step_link a, .voice_link a {display: block; width: 100%; height: 100%;}
	.voice_link a {color: #fff;}
	
	#product-shosai #copy {margin: 0 0 20px; font-size: 18px; color: #707070; line-height: 1.8em;}
	#product-shosai #end {margin: 0 0 20px; font-size: 14px; color: #707070; line-height: 1.8em;
		text-indent : -1em;
		padding-left : 1em;
	}
	
	/*howto*/
	#howto {position: relative; margin-bottom: 20px; background-color: #fff; box-sizing: border-box;}
	#howto ul {margin: 0 0 0 110px; padding: 10px 10px 10px 10px; list-style-type: none;}
	#howto li {position: relative; margin: 0 0 3px; padding-left: 15px; line-height: 1.6em; font-size: 12px; color: #707070;}
	#howto li:last-child {margin-bottom: 0;}
	#howto li span {position: absolute; left: 0;}
	#howto h5 {position: absolute; width: 110px; height: 30px; line-height: 30px; color: #fff; text-align: center; font-size: 14px;}
	#howto li img {float: right; width: 150px; height: auto; margin: 0 0 0 10px;}

	/*note*/
	/*#note {position: relative; margin-bottom: 20px; padding: 10px 10px 10px 10px; background-color: #fff; box-sizing: border-box;}
	#note p{
		position: relative; margin: 0 0 3px; padding-left: 0px; line-height: 1.6em; font-size: 12px; color: #707070;
		font-family: 'Hiragino Kaku Gothic Pro', "游ゴシック", YuGothic, 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
	}*/
	#note {position: relative; margin-bottom: 20px; background-color: #fff; box-sizing: border-box;}
	#note ul {margin: 0 0 0 110px; padding: 10px 10px 10px 10px; list-style-type: none;}
	#note li {position: relative; margin: 0 0 3px; padding-left: 15px; line-height: 1.6em; font-size: 12px; color: #707070;}
	#note li:last-child {margin-bottom: 0;}
	#note li span {position: absolute; left: 0;}
	#note h5 {position: absolute; width: 110px; height: 30px; line-height: 30px; color: #fff; text-align: center; font-size: 14px;}
	#note li img {float: right; width: 150px; height: auto; margin: 0 0 0 10px;}

	/*function*/
	#function {margin-top: 30px; padding-bottom: 10px; background-color: #fff4f0; border-radius: 10px;}
	#function h5 {position: relative; top: -15px; width: 230px; height: 30px; line-height: 30px; margin: 0 auto; background-color: #f9d8cc; border-radius: 15px; text-align: center; color: #eb6d5e; font-size: 16px; }
	#function p{text-align: center;}
	#function p img {display: inline-block; vertical-align: middle; width: 80px; height: 80px; margin: 0 5px;}
	#function img.eight {display: inline-block; vertical-align: middle; width: 66px; height: 66px; margin: 0 3px;}

	
	/*setumei*/
	#setumei {margin-bottom: 20px; padding: 0 15px 20px; background-color: #fff; box-sizing: border-box;}
	#setumei dl {display: inline-block; vertical-align: top; width: 280px; margin: 20px 0 0;}
	#setumei dl.one {display: block; width: 100%;}
	#setumei dl:nth-child(odd) {margin-right: 36px;}
	#setumei dt {position: relative; margin-bottom: 10px; padding-left: 18px; font-size: 18px; line-height: 1.5em; box-sizing: border-box;}
	#setumei dt span {position: absolute; left: 0;}
	#setumei dt span.tested {position: relative; left: 0; padding: 2px 5px; font-size: 12px; font-weight: normal; border: solid 1px #ea6d5e;}
	#setumei dd {padding-left: 18px; line-height: 1.5em; text-align: justify; font-size: 13px;}
	#setumei dd a {color: #ea6d5e; text-decoration: underline;}
	#setumei dd a:hover {text-decoration: none;}
	#setumei dt span.up {position: relative; top: -4px;}
	#setumei .ex {margin: 20px 0 0; padding: 10px 0 0; list-style-type: none; border-top: solid 1px #c4c4c1; font-size: 11px;}
	#setumei .ex li {position: relative; margin: 5px 0 0; padding-left: 25px; color: #707070;}
	#setumei .ex li span {position: absolute; left: 0;}
	#seibun {margin-top: 20px;}
	#seibun h5 {margin: 0 0 5px; font-size: 13px; color: #707070;}
	#seibun p {padding: 5px 10px; font-size: 11px; box-sizing: border-box; border: solid 1px #707070; color: #707070;}
	
	/*lineup_other*/
	#lineup_other p.top {display: none;}
	#lineup_other {width: 1000px; margin: 0 auto;}
	#lineup_other ul {margin: 0; padding: 0; list-style-type: none;
		display: inline-table;
		*display: inline; /*IE*/
		*zoom: 1; /*IE*/
	}
	#lineup_other li {display: inline-block; vertical-align: top; width: 326px; height: 150px; margin-top: 22px; padding: 0 20px; background-color: #fff; box-sizing: border-box;}
	#lineup_other li:nth-child(3n+2) {margin-left: 11px; margin-right: 11px;}
	#lineup_other li .pic {width: 90px; height: 150px;}
	#lineup_other li .pic img {width: auto; height: 100%;}
	#lineup_other li .pic, #lineup_other li .name {display: inline-block; vertical-align: middle;}
	#lineup_other li .name {width: calc(100% - 90px); padding-left: 30px; box-sizing: border-box; font-size: 14px; background: url("/common/images/common/icon5.svg") no-repeat 20px center; background-size: 6px 12px;}
	#lineup_other li a {display: block; width: 100%; height: 100%;}
	#lineup_other li a .name {color: #707070;}
	
	#tokucho {margin: 30px 0;}
	#tokucho .pic {width: 100%; height: auto;}
	#tokucho .pic img {width: 100%; height: auto;}

	/*movie*/
	#movie{margin-top: 40px;}
	video{width: 100%;}
}


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

@media screen and (max-width: 768px) {
	
	#product {width: 100%; margin: 0 auto; padding: 5%; box-sizing: border-box;}
	#product h4 {margin: 0 0 3rem; padding-bottom: 6px; font-size: 16px; line-height: 1.4em; text-align: center;}
	#product-body {text-align: center;}
	#product-body h3 {position: relative; font-size: 20px; color: #707070; line-height: 1.4em;}
	#product-body h3 img {position: absolute; right: 0; top: -1rem; width: 64px; height: 64px;}
	#product-body .sub {margin: 5px 0 10px; font-size: 14px; text-align: center;}
	#product-body .sub span {display: inline-block; vertical-align: middle; height: 24px; margin-left: 10px; padding: 0 10px; line-height: 24px; font-size: 12px;}
	#product-body .pic {width: 20rem; margin: 0 auto;}
	#product-body .pic img {width: 100%; height: auto;}
	#product-body .capacity {width: 50%; height: 48px; margin: 0 auto 1rem; padding: 3% 3% 0 3%; background-color: #969696; font-size: 13px; color: #fff; text-align: right; font-weight: bold; line-height: 1.8rem;}
	#product-body .ex {width: 80%; margin: 1rem auto; font-size: 11px; color: #969696; line-height: 1.4em;}
	
	.step_link {
		display: inline-block; vertical-align: top;
		width: 40%; height: 3rem; margin: 0 1rem 1rem; line-height: 3rem; border: solid 1px #707070; font-size: 13px; text-align: center;
		background: url(/common/images/common/icon2.svg) no-repeat right 10px center; background-size: 10px 12px;
	}
	.voice_link {
		width: 80%; height: 3rem; margin: 0 auto; line-height: 3rem; border-radius: 1.5rem; font-size: 13px; text-align: center;
		background: url(/common/images/common/icon4.svg) no-repeat right 10px center #707070; background-size: 10px 12px;
	}
	.buy_online button {
		appearance: none;
		border: 0;
		display: block;
		margin: 30px auto 0;
		width: 55vw;
		aspect-ratio: 1263 / 300;
		background: url(/common/images/common/button_buy_online.png) no-repeat center;
		background-size: contain;
		font-size: 0;
	}
	.buy_online button:before {
		content: '';
		display: block;
		padding-top: 25.2%;
	}
	.step_link a, .voice_link a {display: block; width: 100%; height: 100%;}
	.voice_link a {color: #fff;}
	
	#product-shosai #copy {margin: 2rem 0; font-size: 14px; color: #707070; line-height: 1.8em;}
	#product-shosai #copy br {display: none;}

	#product-shosai #end {margin: 2rem 0; font-size: 12px; color: #707070; line-height: 1.8em;
		text-indent : -1em;
		padding-left : 1em;
	}
	
	/*howto*/
	#howto {position: relative; margin-bottom: 2rem; background-color: #fff; box-sizing: border-box;}
	#howto ul {margin: 0; padding: 3%; list-style-type: none;}
	#howto li {position: relative; margin: 0 0 3px; padding-left: 15px; line-height: 1.6em; font-size: 12px; color: #707070;}
	#howto li:last-child {margin-bottom: 0;}
	#howto li span {position: absolute; left: 0;}
	#howto h5 {width: 110px; height: 30px; line-height: 30px; color: #fff; text-align: center; font-size: 13px;}
	#howto li img {float: right; width: 100px; height: auto;}
	
	/*note*/
	/*#note{position: relative;
		margin-bottom: 2rem;
		padding: 3%;
		background-color: #fff;
		box-sizing: border-box;
	}
	#note p{
		position: relative; margin: 0 0 3px; padding-left: 0px; line-height: 1.6em; font-size: 12px; color: #707070;
		font-family: 'Hiragino Kaku Gothic Pro', "游ゴシック", YuGothic, 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
	}*/
	#note {position: relative; margin-bottom: 2rem; background-color: #fff; box-sizing: border-box;}
	#note ul {margin: 0; padding: 3%; list-style-type: none;}
	#note li {position: relative; margin: 0 0 3px; padding-left: 15px; line-height: 1.6em; font-size: 12px; color: #707070;}
	#note li:last-child {margin-bottom: 0;}
	#note li span {position: absolute; left: 0;}
	#note h5 {width: 110px; height: 30px; line-height: 30px; color: #fff; text-align: center; font-size: 13px;}
	#note li img {float: right; width: 100px; height: auto;}

	/*function*/
	#function {margin: 2rem 0 1rem; padding-bottom: 1rem; background-color: #fff4f0; border-radius: 10px;}
	#function h5 {position: relative; top: -15px; width: 80%; height: 30px; line-height: 30px; margin: 0 auto; background-color: #f9d8cc; border-radius: 15px; text-align: center; color: #eb6d5e; font-size: 14px;}
	#function p {text-align: center;}
	#function p img {display: inline-block; vertical-align: middle; width: 4.2rem; height: 4.2rem; margin: .2rem;}
	
	/*setumei*/
	#setumei {margin-bottom: 2rem; padding: 3%; background-color: #fff; box-sizing: border-box;}
	#setumei dt {position: relative; margin-bottom: 1rem; padding-left: 18px; font-size: 14px; line-height: 1.5em; box-sizing: border-box; text-align: justify;}
	#setumei dt span {position: absolute; left: 0;}
	#setumei dt span.tested {position: relative; left: 0; padding: 2px 5px; font-size: 12px; border: solid 1px #ea6d5e; font-weight: normal;}
	#setumei dd {margin-bottom: 2rem; padding-left: 18px; line-height: 1.5em; text-align: justify; font-size: 12px;}
	#setumei dd a {color: #ea6d5e; text-decoration: underline;}
	#setumei dd a:hover {text-decoration: none;}
	#setumei dt span.up {position: relative; top: -4px;}
	#setumei .ex {margin: 20px 0 0; padding: 10px 0 0; list-style-type: none; border-top: solid 1px #c4c4c1; font-size: 11px;}
	#setumei .ex li {position: relative; margin: 5px 0 0; padding-left: 25px; color: #707070;}
	#setumei .ex li span {position: absolute; left: 0;}
	#seibun {margin-top: 20px;}
	#seibun h5 {margin: 0 0 5px; font-size: 13px; color: #707070;}
	#seibun p {padding: 5px 10px; font-size: 11px; box-sizing: border-box; border: solid 1px #707070; color: #707070;}
	
	/*lineup_other*/
	#lineup_other {width: 100%; margin: 0 auto;}
	#lineup_other ul {margin: 0; padding: 0; list-style-type: none;}
	#lineup_other li .pic,
	#lineup_other li .name br {display: none;}
	#lineup_other p.top,
	#lineup_other li {border-bottom: solid 1px #ccc;}
	#lineup_other p.top,
	#lineup_other li .name {padding: 3% 0 3% 4rem; box-sizing: border-box; font-size: 12px; background: url("/common/images/common/icon5.svg") no-repeat 20px center; background-size: 6px 12px;}
	#lineup_other a {display: block; width: 100%; height: 100%;}
	#lineup_other a {color: #707070;}
	
	/*movie*/
	#movie{margin-top: 5%;}
	video{width: 100%;}
	
}

#product-shosai .atention {margin: 0 0 20px; list-style-type: none; font-size: 11px;}
#product-shosai .atention li {position: relative; margin: 5px 0 0; padding-left: 25px; color: #707070;}
#product-shosai .atention li span {position: absolute; left: 0;}