.f_orange {
  color: #ff6f2f;
}
.f_blue {
  color: #23bbf0;
}
.dots {
  -webkit-text-emphasis: filled;
  text-emphasis: filled;
}
span.supText {
	font-size: 70%;
	vertical-align: top;
	position: relative;
	top: 0;
	left: 0;
}
.pkhighlight {
	background-color:#fcf1db;
	padding:0 4px;
}
.f_lightgray {
	color:#ababab;
}
.W90 {
  width: 90%;
  display: inline-block;
}
.f26 {
  font-size: 26px;
}
.pcOnly {display: block;}
.spOnly {display: none;}

@media (max-width: 768px) {
	.pcOnly {display: none;}
	.spOnly {display: block;}
    .W40,.W50,.W60,.W67,.W90,.W1030 {
        width: 100%;
    }
    #_product > div.W100 {
	    padding: 0;
    }
}


.point {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}


.video_wrap {
	background-image: none !important;
}
.video_wrap .W100 {
	position: relative;
}

.add-button button {
	padding: 5px;
	min-height: 50px;
	margin-top: 5px;
	margin-bottom: 5px;
}
.add-button button img {
	vertical-align: middle;
	width: 40px;
	margin-top: -5px;
}

.add-button button.btn_red:hover {
	border: 1px solid #d70146;
}
.add-button button.bg_orange:hover {
	border: 1px solid #cb9b37;
}
.bg_grey2 {
  background-color: #999899;
}
.btn_red {
	border: solid 1px #e10046;
	color:#e10046;
}
.btn_orange {
	border: solid 1px #cb9b37;
	color:#cb9b37;
}
.bg_orange {
	background: #cb9b37 !important;
}
.btn_red img, .btn_orange img {
	margin-top: -6px;
	margin-left: -5px;
}
.add-button button.btn_orange:hover {
	border: 1px solid #cb9b37;
}
.add-button button.btn_orange::before {
	background-color: rgba(255, 180, 22, 0.20);
}
@media (max-width: 414px) {
    .awrd_area img:first-child {
        top: 0;
        margin: 0;
    }
}
@media (max-width: 768px) {
    .awrd_area {
        position: absolute;
        width: 125px;
        left: 30px;
        top: 30px;
        display: block;
        right: auto;
    }

	.sec1 > .W50.poA {
        position: initial;
    }
 }
.teiki_box {
	background-color: #fde5ec;
	text-align: center;
}
.teiki_box .price_area {
	margin-top: 0;
}
@media (min-width: 769px) {
	.add-button {
		width: 100%;
	}
	.teiki_box {
		padding: 2% 3% 0;
		margin-bottom: 2%;
	}
	.teiki_box .price_area .price_title {
		font-size: 1vw;
	}
	.teiki_box .price_area .price_title span {
		font-size: 2vw;
	}
	.teika {
		min-width: 80%;
	}
}
@media (max-width: 768px) {
	.sec1 > .W40 {
		width: 100%;
	}
	.sec1 > .W40.poA {
        position: initial;
        
        left: inherit;
        padding: 20px 0 40px;
        transform: inherit;
        text-align: center;
    }
	.add-button {
		width: 100%;
	}
	.add-button span {
		text-wrap: nowrap;
		font-size: 4.5vw;
	}
	.teiki_box {
		padding: 2% 0 0;
		margin-bottom: 2%;
	}
	.teiki_box .price_area {
		width: 80% !important;
	}
	.teiki_box .price_area .price_title {
		text-align: center;
		font-size: 3vw;
	}
	.teiki_box .price_area .price_title span {
		font-size: 5vw;
	}
	.teiki_box .price_area .t_left{
		text-align: center;
	}
	.teika {
		width: 80%;
		margin-left: auto;
		margin-right: auto;
	}
	.teika .add-button .btn_black span {
		font-size: 3vw;
	}
	.teika .add-button .btn_black font {
		font-size: 4.5vw;
	}
	.add-product form {
		margin-bottom: 10px;
	}
	.add-button button {
		width: 100%;
		max-width: 100%;
	}
}

.banner {
	width: 100%;
	background-color: #f3f4f9;
	padding: 20px;
}
.banner p {
	padding: 0;
}

@media (min-width: 769px) {
	.product_pic img {
		width: 120px;
		margin-top: 7%;
		margin-left: 62%;
	}

}
@media (max-width: 768px) {
	.product_pic img {
		width: 12%;
		margin-top: 4%;
		margin-left: 63%;
	}
}

@media (max-width: 599px) {
	.sec1 > .product_pic {
		height: 82vw;
	}
}
.sec2 {
	padding: 0 !important;
	background: none;
}
.sec2:before {
	height:0;
}
.sec2 .des1 {
	position: relative;
	background-repeat: no-repeat;
	background-position: center top;
}
.sec2 .des1 .dest1,
.sec2 .des1 .dest2 {
	display: inline-block;
	position: absolute;
}
.sec2 .des1 .dest1 .txt1 {
	background-size: auto 75% !important;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url(../img/product/wh/description1_txtbg1.png);
	padding-bottom: 0;
}
.sec2 .des1 .dest2 .txt1 {
	background-size: auto 75% !important;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url(../img/product/wh/description1_txtbg2.png);
	padding-bottom: 0;
}
@media (min-width: 769px) {
	.sec2 .des1 {
		background-image: url(../img/product/wh/description1bg.png);
		background-size: 100%;
		background-size: cover;
	}
	.sec2 .des1 .desr1 {
		display: inline-block;
		margin: 17% 0 0;
	}
	.sec2 .des1 .desr1 img {
		width: 11%;
		display: inline-block;
	}
	.sec2 .des1 .dest1 .txt1,
	.sec2 .des1 .dest2 .txt1 {
		line-height: 1.5;
		font-size: 2vw;
		padding-bottom: 0.25em;
		padding-top: 0.25em;
	}
	.sec2 .des1 .dest1 .txt2,
	.sec2 .des1 .dest2 .txt2 {
		line-height: 1.2;
		font-size: 3vw;
	}
	.sec2 .des1 .dest1 .txt1 {
	}
	.sec2 .des1 .dest1 {
		left: 17.8vw;
		top: 28vw;
		width: 35%;
	}
	.sec2 .des1 .dest2 {
		right: 18.5vw;
		top: 29vw;
		width: 35%;
	}
	.sec2 .des1 .dest3 {
		display: inline-block;
		position: absolute;
	}
	.sec2 .des1 .dest3 {right: 5%;top: 65%;}
	.sec2 .des1 .dest3 p {font-size: 1vw;}
}
@media (max-width: 768px) {
	.sec2 .des1 {
		background-image: url(../img/product/wh/description1bg_sp.png);
		background-size: auto 100%;
		background-size: cover;
	}
	.sec2 .des1 .desr1 {
		display: inline-block;
		margin: 33% 0 0;
		width: 17%;
	}
	.sec2 .des1 .desr1 img {
		padding-left: 38%;
		width: 100%;
		padding-left: 0%;
		margin-bottom: 10%;
	}
	.sec2 .des1 .dest1 .txt1,
	.sec2 .des1 .dest2 .txt1 {
		line-height: 1.5;
		font-size: 3vw;
		padding-bottom: 0.25em;
		padding-top: 0.25em;
	}
	.sec2 .des1 .dest1 .txt2,
	.sec2 .des1 .dest2 .txt2 {
		line-height: 1.2;
		font-size: 4vw;
	}
	.sec2 .des1 .dest1 {
		left: 11vw;
		top: 49%;
		width: 32vw;
	}
	.sec2 .des1 .dest2 {
		right: 11vw;
		top: 51%;
		width: 34vw;
	}
	.sec2 .des1 .dest3 p {
		font-size: 2vw;
	}
}
@media (max-width: 390px) {
	.sec2 .des1 .dest1 {
		top: 48%;
	}
	.sec2 .des1 .dest2 {
		top: 50%;
	}
}

.sec2 .des2 {
	position: relative;
	background-image: url(../img/product/wh/description2bg.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
}
.sec2 .des2 .dest1 {
	display: inline-block;
	margin: 5% 0;
}
.sec2 .des2 .dest1 img {
	display: inline-block;
}

.sec2 .des2 .dest1 p {
	color: #801b2f;
	text-align: left;
	padding-left: 0;
}
.sec2 .des2 .dest1 ul {
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}
.sec2 .des2 .dest1 ul li {
	margin-bottom: 10px;
}
.sec2 .des2 .dest1 ul li span {
	background-color: #fff;
	background-image: url(../img/product/wh/check.png);
	background-repeat: no-repeat;
	background-position: 0.5em center;
	background-size: 1em;
	padding: 4px 10px 4px 1.8em;
	height: 1em;
	line-height: 1em;
	box-shadow: 3px 3px 3px #dfc6c1;
	-moz-box-shadow: 3px 3px 3px #dfc6c1;
	-webkit-box-shadow: 3px 3px 3px #dfc6c1;
}


.point_box {
	position: relative;
	background-image: url(../img/product/wh/point-bg.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
}
.point_block .point3 .title {
	margin: 0 auto 2%;
}
.seven {
	position: relative;
	background-image: url(../img/product/wh/seven-bg.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	padding-top: 40px;
	padding-bottom: 40px;
}
.seven .point_poison li {
	background-image: url(../img/product/wh/bg-round-bg.png);
}
.seven .point_block .point4 .point_poison li span {
	color: #4e4234;
}

.point_block img.W20 {
	width: 20%;
}
@media (min-width: 769px) {
	.point_block .points {
		width: 100%;
		margin-bottom: 2vh;
	}
	.point_box .point_subttl img {
		width: auto;
		height: 4vh !important;
	}
	.point_box .point_title {
		font-size: 36px;
	}
	.point_box .point_title span {
		font-size: 30px;
	}
	.seven .point_poison {
		margin-left: auto;
		margin-right: auto;
	}
	.seven .point_poison li {
		width: 14vw;
		height: 14vw;
		margin: 5px;
		font-size: 2vw;
	}
}
@media (max-width: 768px) {
	#_product > div.point_box {
		padding-left: 0;
		padding-right: 0;
	}
	.point_box .point_subttl img {
		width: auto;
		height: 20px;
	}
	.point_box .point_title {
		font-size: 28px;
	}
	.point_box .point_title span {
		font-size: 21px;
	}
	.point_box .point_txt {
		text-align: center;
	}
	.point_box .point5 .point_img img {
		width: 70%;
	}
	.point_info2 {
		width: 35%;
	}
	.seven .point_poison li {
		width: 20vw;
		height: 20vw;
		margin: 5px;
	}
	.seven .point_poison li span {
		font-size: 3vw;
	}
	.point_block .point5 .point_fl img {
		width: 100%;
	}
	.point_block .point5 .point_fl.f_left {
		clear: both;
		padding-left: 6%;
	}
	.point_block .point5 .point_fl.f_right {
		clear: both;
		padding-right: 5%;
	}
	.point_block .points {
		width: 90%;
	}
}



/* movie */
.movie {
	position: relative;
	background-image: url(../img/product/wh/movie-bg.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
}
@media (min-width: 769px) {
	.movie {
		padding: 40px 0;
	}
}
@media (max-width: 768px) {
	#_product > div.movie {
		padding: 7%;
	}
	.movie iframe {
		width: 100%;
	}
	#YouTubeVideoPlayerAPI {
		width:100%;
		padding-right: 10%;
	}
}

/* howto */
.howto {
	position: relative;
	background-image: url(../img/product/wh/howtobg.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
}
.howto-inner {
	position: relative;
	margin: 0 auto;
	background-color: #fff;
}
.howto-titleImg {
	position: absolute;
	z-index: 1;
}
.howto-subTitle {
	position: relative;
	background-image: url(../img/product/wh/howto-cream.png);
	background-repeat: no-repeat;
}
.howto-subTitle::after {
  content: '';
  height: 1px;
  display: inline-block;
  background-color: #cccccc;
  position: absolute;
  bottom: 0;
}
@media (min-width: 769px) {
	.howto {
		padding: 40px 20px;
		line-height: 1.5;
	}
	.howto-inner {
		max-width: 1030px;
		min-width: 769px;
		padding: 5% 2%;
	}
	.hpwto-titleImg {
		top: 9vw;
		left: 3vw;
	}
	.howto-titleImg img {
		width: 170px;
	}
	.howto-titleImg {
		top: 7%;
		left: 6%;
	}
	.howto-subTitle {
		background-position: 95% bottom;
		background-size: 100px;
		padding-bottom: 2vw;
		line-height: 2em;
	}
	.howto-subTitle::after {
		width: 200px;
		left: calc(50% - 100px);
	}
	.howto-block01 {
		margin-left: auto;
		margin-right: auto;
	}
	.howto-block01 .f_lightgray {
		font-size: 21px;
	}
	.step1-txt {
		padding-top: 10%;
	}
	.step2-txt {
		padding-top: 30%;
	}
	.step3-txt {
		padding-top: 25%;
		margin-bottom: 10px;
	}
}
@media (max-width: 768px) {
	#_product > div.howto {
		padding: 7%;
	}
	.howto-inner.W1030 {
		padding: 7% 8%;
	}
	.howto-inner .f14 {
		font-size: 2.5vw;
	}
	.howto-inner .f21 {
		font-size: 3vw;
	}
	.howto-inner .f55 {
		font-size: 7vw;
	}
	.howto-inner .f21.howto-enttl {
		font-size: 2vw;
	}
	.howto .f_separator {
		font-size: 3vw;
	}
	.howto-titleImg {
		top: 7%;
		left: 6%;
	}
	.howto-titleImg img {
		width: 15vw;
	}
	.howto-block01 {
		width: 100% !important;
	}
	.howto-block01 .W50 {width: 55%;}
	.howto-block01 .W40 {width: 35%;}
	.howto-block01 .W40.howto-step1-img {width: 45%}
	
	.howto-block01 .f_left p {
		margin-bottom: 20px;
	}
	.howto-subTitle {
		background-position: 80% bottom;
		background-size: 10vw;
		padding-bottom: 5vw;
		width: 100% !important;
	}
	.howto-subTitle::after {
		width: 100px;
		left: calc(50% - 50px);
	}
}
.howto-point {
  position: relative;
  background-color: #f0f0f0;
}
.howto-point p {
	padding: 0;
}
.howto-point:before {
  position: absolute;
  font-weight: bold;
  color: #fff;
  background-color: #9a9a9a;
}
.howto-point:before {
  top: 0;
  left: 0;
  padding: 0 10px;
  content: attr(data-before);
}

@media (min-width: 769px) {
	.howto-point {
		padding: 2em 1em 1.5em;
	}
}
@media (max-width: 768px) {
	.howto-point {
		font-size: 2.5vw;
		padding: 2em 2em 1em;
	}
	.howto-point .f21 {
		font-size: 2.5vw;
	}
	.howto-point .f14 {
		font-size: 2vw;
	}
}


.howto .f_separator {
	position: relative;
	z-index: 1;
}
.howto .f_separator::before {
	content: "";
	border-top: 1px solid #ababab;
	margin: 0 auto;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	bottom: 0;
	width: 90%;
	z-index: -1;
}
.howto .f_separator span {
	background: #fff;
	padding: 0 25px;
	letter-spacing: 0.1em;
}






/* day_night */
.day_night h5 {
	padding-bottom: 0;
}
.day_night li .day_night_icon_pink,
.day_night li .day_night_icon_blue {
	color: #fff;
}
.day_night li .day_night_icon_pink {
	background-color: #e78496;
}
.day_night li .day_night_icon_blue {
	background-color: #8eb0db;
}
.day_night li p {
	padding: 0;
}
.day_night li .icon.icon_dobble {
	left: 90%;
}

@media (min-width: 769px) {
	.day_night {
		min-width: 980px;
	}
	.day_night li .day_night_icon_pink,
	.day_night li .day_night_icon_blue {
		padding: 2px 5px;
		border-radius: 10px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
	}
	.day_night li .f13,
	.day_night li .f14 {
		font-size: 10px
	}
}
@media (max-width: 768px) {
	.day_night li .day_night_icon_pink,
	.day_night li .day_night_icon_blue {
		padding: 2px 5px;
		border-radius: 8px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
	}
	.day_night {
		background-color: transparent;
		padding-left: 7%;
		padding-right: 7%;
	}
	.day_night > div {
		max-width: 100%;
	}
	.day_night h5 {
		font-size: 5vw;
	}
	.day_night .W40 li.W33 {
		width: 32%;
		padding-bottom: 20px;
	}
	.day_night > div.W60 {
		background-color: #fbeff3;
	}
	.day_night .W40 > div {
		float: left;
		width: 50%;
	}
	.day_night .W40 > div .img_wrapper {
		width: 30%;
	}
	.day_night .W40 .f_left.W60 {
		width: 50%;
	}
	.or-icon {
		width: 15%;
		padding-top: 20%;
	}
	.day_night li .or-icon img {
		height: auto;
	}
	.day_night li.W25,
	.day_night li.W20 {
		width: 33%;
		float: left;
	}
	.arrow-down {
		width: 100%;
		clear: both;
	}
	.day_night li.arrow-down img {
		height: auto;
		padding-right: 35%;
	}
	.day_night li .f13,
	.day_night li .f14 {
		font-size: 1.3vw;
	}
	.day_night li .f15,
	.day_night li .f18 {
		font-size: 11px;
	}
}
