@charset "utf-8";

.spray {
	font-size: 150%;
}

.spray div,
.spray section {
	box-sizing: border-box;
}

.spray img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* *********************************
 box-list-item
********************************* */
.cart-spray {
	margin-bottom: 1em;
	padding: 2% 2% 0;
	border: 1px solid #0c0d4e;
}

.cart-120 {
	background: #e6e6e6;
	border: none;
}

.ttl-cart-01 {
	width: 100%;
	margin-bottom: .25em;
	padding: .5em 0;
	background: #0c0d4e;
	color: #fff;
	text-align: center;
}

.ttl-cart-01 span {
	display: block;
	width: 90%;
	margin: auto;
	padding: .1em;
	background: #fff;
	color: #0c0d4e;
	font-weight: bold;
}

@media screen and (min-width: 768px) {
	.ttl-cart-01 span {
		display: inline-block;
		width: auto;
		margin: auto 1em auto auto;
		padding: .25em;
		line-height: 1;
		font-size: 75%;
	}
}

.box-list-item {
	padding-bottom: 5%;
}

.ttl-item-name {
	padding: .25em 0;
	background: #0683EA;
	color: #fff;
	text-align: center;
}

.txt-list-price {
	margin-bottom: .5em;
	padding: .25em 0;
	background: #FF0000;
	font-size: 75%;
	color: #fff;
	text-align: center;
}

.btn-cart-01 {
	display: block;
	width: 100%;
	padding: 15px 0;
	background: -moz-linear-gradient(top, #246900, #21480D);
	background: -webkit-linear-gradient(top, #246900, #21480D);
	background: linear-gradient(to bottom, #246900, #21480D);
	font-size: 167%;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	color: #fff !important;
	line-height: 1;
	position: relative;
	border-radius: 30px;
}

.btn-cart-02 {
	display: block;
	width: 100%;
	padding: 15px 0;
	background: -moz-linear-gradient(top, #246900, #21480D);
	background: -webkit-linear-gradient(top, #246900, #21480D);
	background: linear-gradient(to bottom, #246900, #21480D);
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	color: #fff !important;
	line-height: 1;
	position: relative;
	border-radius: 30px;
}

.btn-cart-01:after,
.btn-cart-02:after {
	position: relative;
	content: "\f07a";
	font-family: FontAwesome;
}

.cart-regular .btn-cart-01 {
	background: -moz-linear-gradient(top, #650700, #4A0100);
	background: -webkit-linear-gradient(top, #650700, #4A0100);
	background: linear-gradient(to bottom, #650700, #4A0100);
}

/* *********************************
 notice
********************************* */
.notice {
	background: #ffffff;
	font-size: 75%;
}

.list-notice {
	padding-left: 1.5em;
	list-style: inside;
}

.list-item-notice {
	position: relative;
	margin-bottom: .25em;
}

.list-item-notice strong,
.list-item-notice em {
	color: #cc0000;
	font-weight: bold;
}

.list-item-notice em {
	text-decoration: underline;
}

.list-item-notice:before {
	content: "※";
	position: absolute;
	left: -1.5em;
	top: 3px;
	text-align: center;
	line-height: 1.1;
}

/* *********************************
 spray
********************************* */
.ttl-spr-01 {
	margin-bottom: 0;
	padding: .5em 0;
	background-color: #00a0e9;
	font-size: 77.8%;
	font-size: 3.733vw;
	font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	color: #fff;
	text-align: center;
}

.ttl-spr-01 em {
	font-size: 100%;
	font-size: 4.8vw;
}

.ttl-spr-01 small {
	font-size: 75%;
}

@media screen and (min-width : 768px) {
	.ttl-spr-01 {
		font-size: 100%;
		font-size: 3.125vw;
	}

	.ttl-spr-01 em {
		font-size: 150%;
		font-size: 4.688vw;
	}
}

@media screen and (min-width : 1024px) {
	.ttl-spr-01 {
		font-size: 24px
	}

	.ttl-spr-01 em {
		font-size: 150%;
	}
}

.ttl-spr-02 {
	width: 100%;
	height: auto;
	margin-bottom: 0.25em;
	padding: calc(41% - 3em) 0 1em 30%;
	background: url(/html/template/million01/assets/img/goods/disinfection-spray/bg_ttl_spr_02_sp.png) left top no-repeat;
	background-size: 100% 100%;
	box-sizing: border-box;
	font-size: 150%;
	font-size: 7.2vw;
	line-height: 1.2;
	font-weight: bold;
	font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

.ttl-spr-02.txt-small {
	font-size: 116.7%;
	font-size: 5.6vw;
}

.ttl-spr-02 strong {
	font-size: 125%;
	font-weight: bold;
}

.area-cmn-01 {
	margin-bottom: 2em;
}

/* *********************************
 PK2とは
********************************* */
.list-spr-pnt,
.list-spr-case {
	margin-bottom: 2em;
}

.box-list-spr-pnt {
	margin-bottom: 1em;
	padding-left: 25%;
	background: #fff left top no-repeat;
	background-size: 22% auto;
	font-size: 4.8vw;
}

.box-list-spr-pnt:first-of-type {
	background-image: url(/html/template/million01/assets/img/goods/disinfection-spray/ico_spray_about_01@2x.png);
}

.box-list-spr-pnt:nth-of-type(2) {
	background-image: url(/html/template/million01/assets/img/goods/disinfection-spray/ico_spray_about_02@2x.png);
}

.box-list-spr-pnt:nth-of-type(3) {
	background-image: url(/html/template/million01/assets/img/goods/disinfection-spray/ico_spray_about_03@2x.png);
}

.ttl-list-spr-pnt {
	margin-bottom: .25em;
	font-weight: bold;
	letter-spacing: -.1em;
}

.ttl-list-spr-pnt strong {
	color: #f00;
	font-size: 125%;
	font-weight: bold;
}

.txt-list-spr-pnt {
	line-height: 1.33;
}

.box-list-spr-case {
	margin-bottom: 2em;
}

.box-list-spr-case:first-of-type {
	padding-bottom: 33%;
	background: url(/html/template/million01/assets/img/goods/disinfection-spray/img_spr_case_01_sp.jpg) center bottom no-repeat;
	background-size: 100% auto;
}

.box-list-spr-case:nth-of-type(2) {
	padding-bottom: 42%;
	background: url(/html/template/million01/assets/img/goods/disinfection-spray/img_spr_case_02_sp.jpg) center bottom no-repeat;
	background-size: 100% auto;
}

.ttl-list-spr-case {
	margin-bottom: .25em;
	color: #2824b9;
	font-size: 166.7%;
	font-size: 8vw;
	font-weight: bold;
	line-height: 1.2;
	letter-spacing: -.1em;
}

.txt-list-spr-case {
	line-height: 1.33;
	font-size: 133.4%;
	font-size: 6.4vw;
}

/* *********************************
 ほかの代表的な消毒剤との比較
********************************* */
.area03 {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: stretch;
	align-items: stretch;
	width: 100%;
}

.img-area03-01 {
	width: 25%;
	margin: 1em 0;
}

.txt-area03-01 {
	width: 70%;
	margin: 1em 0;
}

.img-area03-02 {
	width: 100%;
	text-align: center;
}

.img-area03-02 img {
	width: 15%;
}

.txt-area03-02 {
	width: 100%;
	margin: 1em 0;
}

.txt-area03-02 em {
	font-size: 125%;
	font-weight: bold;
	color: #0F70B8;
}

.box-area03-01 {
	width: 100%;
	margin: 1em auto;
	padding: 5%;
	background-color: #ffffdc;
	box-sizing: border-box;
}

.ttl-area03-01 {
	margin-bottom: .25em;
	padding: .5em;
	background-color: #00a0e9;
	color: #fff;
	font-size: 100%;
	font-weight: bold;
	text-align: center;
}

.ttl-area03-02 {
	margin-bottom: .5em;
	font-size: 88.9%;
}

.ttl-area03-02::before {
	padding: 0 .25em;
	background-color: #0c0d4e;
	color: #fff;
	margin-right: .25em;
	display: block;
	text-align: center;
}

.ttl-area03-mov::before {
	content: "参考動画";
}

.ttl-area03-site::before {
	content: "参考サイト";
}

.mov-area03-01 {
	position: relative;
	width: 100%;
	height: 0;
	margin: 0 0 1em;
	padding-top: 56.25%;
}

.iframe-area03-01 {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

/* *********************************
 使用用途
********************************* */
.list-spr-use {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: stretch;
	align-items: stretch;
	width: 100%;
}

.box-list-spr-use {
	width: 46%;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: stretch;
	align-items: stretch;
}

.ttl-list-spr-use {
	order: 2;
	width: 100%;
	padding: .25em 0;
	font-weight: bold;
	text-align: center;
}

.ttl-list-spr-use.txt-small {
	font-size: 90%;
}

.img-list-spr-use {
	order: 1;
	width: 100%;
}

.box-area07-01 {
	background-color: #0c0d4e;
	padding: 1em;
	width: 100%;
	font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

.ttl-spr-03 {
	margin-bottom: .25em;
	color: #ffa800;
	font-size: 111.2%;
	font-size: 5.34vw;
	text-align: center;
}

.txt-area07-01 {
	color: #fff;
	letter-spacing: -.1em;
}

/* *********************************
 ？？？
********************************* */
.ttl-area05-01 {
	margin-bottom: 0;
	background-color: #0F70B8;
	text-align: center;
	padding: .5em 0;
	color: #fff;
	font-size: 150%;
}

/* *********************************
 お客様の声
********************************* */
.area04 {
	background-color: #fff;
}

.ttl-area-04-01,
.ttl-area-05-01 {
	text-align: center;
	font-size: 166.67%;
	font-size: 8vw;
}

.txt-area04-01 {
	padding: 5% 0;
}

.txt-area04-01 p {
	margin-bottom: 1em;
}

.txt-area04-01 em {
	color: #f00;
	font-weight: bold;
}

.reviewer {
	text-align: right;
}

/* *********************************
 Q＆A
********************************* */
.area06 {}

.list-area06-01 {
	counter-reset: item02;
}

.box-list-area06 {
	padding: 1em 0;
	border-bottom: 2px dashed #707070;
}

.box-list-area06:last-child {
	border-bottom: none;
}

.q-list-area06 {
	padding-left: 3em;
	margin-bottom: 1em;
	position: relative;
}

.q-list-area06:before {
	counter-increment: item02;
	content: "Q" counter(item02);
	color: #fff;
	background: #0E168E;
	border-radius: 1em;
	width: 2em;
	height: 2em;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	text-align: center;
	line-height: 2;
}

.a-list-area06 {
	padding-left: 3em;
	margin-bottom: 1em;
	position: relative;
}

.a-list-area06:before {
	content: "A" counter(item02);
	color: #fff;
	background: #8E0E0E;
	border-radius: 1em;
	width: 2em;
	height: 2em;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	text-align: center;
	line-height: 2;
}

@media screen and (min-width: 768px) {
	.mv {
		margin-bottom: 20px;
	}

	.ttl-spr-02 {
		height: auto;
		margin-bottom: 0.25em;
		padding: calc(12.5% - .5em) 0 calc(12.5% - .5em) 20%;
		background-image: url(/html/template/million01/assets/img/goods/disinfection-spray/bg_ttl_spr_02_pc@2x.png);
		background-size: 100% 100%;
		font-size: 150%;
		font-size: 4.69vw;
		line-height: 1;
	}

	.ttl-spr-02.txt-small {
		/* padding: calc( 25% - 3.6em ) 0 1em 20%; */
		font-size: 133.4%;
		font-size: 4.17vw;
	}

	.ttl-spr-02 strong {
		font-size: 125%;
		font-weight: bold;
	}

	.box-list-spr-pnt {
		padding-left: 17%;
		background-size: 17% auto;
		font-size: 100%;
		font-size: 3.125vw;
		min-height: 5em;
	}

	.list-spr-case {
		position: relative;
		width: 100%;
		padding-top: 60%;
		background-image: url(/html/template/million01/assets/img/goods/disinfection-spray/img_spr_case_01_pc.jpg);
		background-size: 100% 100%;
	}

	.box-list-spr-case:first-of-type {
		padding-bottom: 0;
		background: none;
		position: absolute;
		width: 75%;
		right: 0;
		top: 0;
	}

	.box-list-spr-case:nth-of-type(2) {
		width: 100%;
		padding-bottom: 0;
		background: none;
		background-size: 100% auto;
		position: absolute;
		left: 0;
		bottom: 0;
		margin: 0;
	}

	.ttl-list-spr-case {
		font-size: 116.7%;
		font-size: 3.646vw;
	}

	.txt-list-spr-case {
		line-height: 1.33;
		font-size: 100%;
		font-size: 3.125vw;
	}

	.box-list-spr-use {
		width: 23%;
	}

	.ttl-list-spr-use.txt-small {
		font-size: 75%;
		letter-spacing: -.1em;
	}

	.ttl-list-spr-use {
		line-height: 1;
		font-size: 80%;
	}

	.list-item {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-align-items: stretch;
		align-items: stretch;
	}

	.box-list-item {
		width: 49%;
		padding-bottom: 3%;
	}

	.item-60-12 {
		/* width: 100%; */
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-align-items: stretch;
		align-items: stretch;
	}

	.item-60-12 .ttl-item-name {
		width: 90%;
		margin: auto;
	}

	.item-60-12 .txt-list-price {
		width: 38%;
		margin: 0;
		font-size: 100%;
		padding: .5em 0;
	}

	.item-60-12 .img-list-price {
		width: 90%;
		margin: 0 auto;
	}

	.box-btn-order {
		width: 90%;
		margin: auto;
	}

	.btn-cart-01 {
		font-size: 100%;
	}

	.box-mukin {
		padding: 3.5% 0 0;
		order: 6;
		font-stretch: semi-expanded;
	}

	.tbl-area03-01 {
		order: 1;
		width: 100%;
		padding: 0 12.5%;
	}

	.img-area03-01 {
		order: 2;
		margin: 0;
	}

	.txt-area03-01 {
		order: 3;
		font-size: 80%;
	}

	.img-area03-02 {
		order: 6;
		width: 10%;
	}

	.img-area03-02 img {
		width: 100%;
	}

	.txt-area03-02 {
		order: 5;
		width: 80%;
		font-size: 80%;
	}

	.box-area03-01 {
		order: 4;
	}

	.ttl-area03-02 {
		margin: .5em 0;
		font-size: 100%;
	}

	.ttl-area03-02::before {
		padding: 0 .5em;
		display: inline-block;
	}

	.area04 {}

	.ttl-area-04-01,
	.ttl-area-05-01 {
		font-size: 250%;
	}

	.sec-area05-01 {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-align-items: stretch;
		align-items: stretch;
	}

	.box-area04-01 {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-align-items: stretch;
		align-items: stretch;
		padding: 5% 0;
		border-bottom: 2px dashed #707070;
	}

	.box-area04-01:last-child {
		border-bottom: none;
	}

	.img-area04-01 {
		width: 38%;
		order: 1;
	}

	.txt-area04-01 {
		width: 55%;
		order: 2;
		box-sizing: border-box;
		padding: 0;
	}

	.sec-area05-01 {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-align-items: stretch;
		align-items: stretch;
	}

	.txt-area05-01 {
		width: 50%;
		padding: 3%;
	}

	.img-area05-01 {
		width: 50%;
	}

	.reviewer {
		font-size: 75%;
	}

	.txt-area07-01 {
		font-size: 75%;
	}
}

@media screen and (min-width: 1024px) {
	.cart-regular {
		width: 88%;
		margin: auto;
	}

	.ttl-spr-02,
	.ttl-spr-02.txt-small {
		font-size: 180%;
	}

	.txt-area03-01,
	.txt-area03-02,
	.box-mukin {
		font-size: 116.7%;
	}

	.box-list-spr-pnt {
		font-size: 125%;
		min-height: 7em;
	}

	.ttl-list-spr-case {
		font-size: 175%;
	}

	.txt-list-spr-case {
		font-size: 125%;
	}

	.box-list-spr-case:first-of-type {
		width: 70%;
	}

	.list-spr-use {
		margin-bottom: 2em;
	}

	.box-area07-01 {
		width: 100%;
		padding: 1.5em;
	}

	.ttl-spr-03 {
		font-size: 200%;
	}

	.txt-area07-01 {
		font-size: 125%;
		line-height: 1.3;
	}
}