@charset "utf-8";
h2{
	font-size: 3.2rem;
	letter-spacing: 1.92px;
	line-height: 4.6rem;
	font-weight: bold;
	text-align: center;
	margin: 90px 0 40px;
}
h3{
	font-size: 2.4rem;
	letter-spacing: 1.44px;
	line-height: 3.5rem;
	font-weight: bold;
	margin: 55px 0 15px;
}
h4{
	font-size: 2.6rem;
	letter-spacing: 1.56px;
	line-height: 3.7rem;
	font-weight: bold;
	margin: 35px 0 30px;
}
p{
	font-size: 2rem;
	letter-spacing: 1.2px;
	line-height: 4.2rem;
	margin-bottom: 15px;
}
ul{
	list-style: disc;
}
ul li{
	font-size: 1.8rem;
	letter-spacing: 1.08px;
	line-height: 2.6rem;
	margin-bottom: 13px;
}

.page_title {
	max-width: 1120px;
	padding: 30px 20px 35px;
	margin: auto;
	font-size: 2.6rem;
	font-weight: bold;
	letter-spacing: 1.56px;
	line-height: 3.7rem;
}
.content_area{
	max-width: 1140px;
	margin: auto;
	padding: 0 20px;
}

table{
	width: 100%;
	border-top: 1px solid #CCC;
	border-left: 1px solid #CCC;
	margin-bottom: 60px;
}
tr{
	border-bottom: 1px solid #CCC;
}
th{
	font-weight: bold;
	background: #EAF0F1;
	text-align: left;
	width: 240px;
}
.specs_table tr:first-child th:first-child{width: 240px;}
th,td{
	border-right: 1px solid #CCC;
	font-size: 1.6rem;
	letter-spacing: 0.96px;
	line-height: 2.4rem;
	padding: 17px 13px 17px 20px;
	vertical-align: top;
}
/* mv */
.mv_area{
	background: url(/img/disaster-prevention/toilet/bg.png) center / auto;
	padding: 60px 0 130px;
}
.mv_box{
	max-width: 1190px;
	padding: 0 20px;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.mv_box h2{
	margin: 0 0 0 25px;
	text-align: left;
}
.mv_box h2 span{
	background: #fff;
	line-height: calc(5.3rem + 7px);
	padding: 3px 20px;
}
.mv_img{
	max-width: 460px;
	width: 100%;
}

/* さまざまな備蓄ニーズに応えています */
.needs_area{
	max-width: 1140px;
	margin: -95px auto 0;
	padding: 0 20px;
}
.needs_box{
	border: 1px solid #216B9E;
	border-radius: 5px;
	overflow: hidden;
	background: #fff;
}
.needs_box h2{
	font-size: 2.4rem;
	letter-spacing: 1.44px;
	line-height: 3.5rem;
	color: #fff;
	text-align: center;
	padding: 13px 10px;
	margin: 0;
	background: #216B9E;
}
.needs_list{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 25px 18px;
	margin-left: 30px;
}
.needs_list li{width: calc(50% - 30px);}

/* 非常時に本当に必要なのは、 “備えている”だけではなく、“すぐに使える”こと。 */
.follow_area{margin-bottom:100px;}
.follow_area h2{
	color: #216B9E;
	margin: 80px 0 40px;
}
.follow_area p{
	text-align: center;
	margin-bottom: 37px;
}
.follow_area img{
	max-width: 724px;
	margin: auto;
	width: 100%;
}

/* 「ニコニコ スチレット」とは */

.nikoniko_area{
	background: url(/img/disaster-prevention/toilet/bg.png) center / auto;
	padding: 80px 0;
}
.nikoniko_area h2{
	font-size: 4.2rem;
	letter-spacing: 2.52px;
	line-height: 6.1rem;
	margin: 0 0 23px;
}
.nikoniko_catch{
	font-size: 2rem;
	letter-spacing: 1.2px;
	line-height: 3.8rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 50px;
}
.nikoniko_box{
	background: #fff;
	border-radius: 5px;
	border-top: 5px solid #216B9E;
	padding: 35px 50px;
	margin-bottom: 28px;
}
.nikoniko_box h3{
	font-size: 3.2rem;
	letter-spacing: 1.9px;
	line-height: 4.6rem;
	color: #216B9E;
	margin: 0 0 30px;
}
.nikoniko_box p:last-child{margin-bottom: 0;}
.nikoniko_box img{margin-bottom: 30px;}
.design_box{
	display: grid;
	grid-template-columns: 1fr 457px;
	grid-gap: 50px;
}
.design_box img{margin-bottom: 0;}
.construction_box h3,.construction_box h4,.set_box h3{text-align: center;}
.movie_wrap{
	position: relative;
	max-width: 640px;
	padding-bottom: calc(640px * 0.58);
	margin: 0 auto;
}
.movie_wrap iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border:none;
}
.nikoniko_column{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 50px;
}
.nikoniko_column h3{min-height: 9.2rem;}

/* 商品説明 */
.features_box{
	border: 1px solid #216B9E;
	border-radius: 5px;
	padding: 20px 30px 23px;
}
.features_box h3{
	margin: 0 0 25px;
	text-align: center;
}
.feature_list li{
	margin-bottom: 16px;
	margin-left: 22px;
}

.spec_table ol li{
	font-size: 1.6rem;
	letter-spacing: 0.96px;
	line-height: 3.2rem;
	margin-left: 20px;
	list-style: decimal;
}

.price_box{
	display: flex;
	align-items: center;
	border: 1px solid #216B9E;
}
.price_box h3{
	font-size: 2rem;
	letter-spacing: 1.2px;
	line-height: 2.9rem;
	width: 240px;
	background: #216B9E;
	color: #fff;
	height: 80px;
	padding: 25px 30px;
	margin: 0;
}
.price_box p{
	font-size: 2.4rem;
    letter-spacing: 1.44px;
    margin: 0;
    font-weight: bold;
    padding: 0 30px;
}
.price_box p span{font-size: 1.6rem;}

/* よくあるご質問 */
.qa_list{
	list-style: none;
    border-top: 1px solid #CCCCCC;
}
.qa_list li{
	margin: 0;
	padding: 35px 0;
	border-bottom: 1px solid #CCCCCC;
}
.qa_list li h3{margin: 0 0 11px;}
.qa_list li p{
    font-size: 1.8rem;
	line-height: 3.2rem;
    letter-spacing: 1.08px;
}
.qa_list li p:last-child{margin-bottom: 0;}

@media screen and (max-width: 1150px){
/* MV */
.mv_box h2{margin-left: 0;}
.mv_img{max-width: 400px;}
}
@media screen and (max-width: 1075px){
.nikoniko_column h3{min-height: 13.8rem;}
}
@media screen and (max-width: 1024px){
h2{
	font-size: 2.2rem;
	letter-spacing: 1.32px;
	line-height: 3.2rem;
	margin: 70px 0 30px;
}
h3{
	font-size: 1.6rem;
	letter-spacing: 0.96px;
	line-height: 2.4rem;
	margin: 35px 0 15px;
}
p{
	font-size: 1.4rem;
	letter-spacing: 0.84px;
	line-height: 2.52rem;
	margin-bottom: 5px;
}
ul li{
	font-size: 1.4rem;
	letter-spacing: 0.84px;
	line-height: 2.8rem;
	margin-bottom: 0;
}
th, td{
	font-size: 1.4rem;
	letter-spacing: 0.84px;
	line-height: 2.8rem;
}
.page_title {
	padding-top: 35px;
	font-size: 2.2rem;
	letter-spacing: 1.32px;
	line-height: 3.2rem;
}
/* MV */
.mv_box h2{font-size: 2.8rem;}
.mv_img{max-width: 350px;}

/* さまざまな備蓄ニーズに応えています */
.needs_box h2{
	font-size: 1.6rem;
	letter-spacing: 0.96px;
	line-height: 2.4rem;
}
.needs_lis{margin-left: 20px;}
.needs_list li{width: calc(50% - 20px);}

/* 非常時に本当に必要なのは、 “備えている”だけではなく、“すぐに使える”こと。 */
.follow_area h2{margin: 55px 0 15px;}
.follow_area p{margin-bottom: 15px;}

/* 「ニコニコ スチレット」とは */
.nikoniko_area h2{
	font-size: 3.5rem;
}
.nikoniko_catch{
	font-size: 1.4rem;
	letter-spacing: 0.84px;
	line-height: 2.52rem;
	margin-bottom: 40px;
}
.nikoniko_box{
	background: #fff;
	border-radius: 5px;
	border-top: 5px solid #216B9E;
	padding: 35px 50px;
	margin-bottom: 28px;
}
.nikoniko_box h3{
	font-size: 2rem;
	letter-spacing: 1.2px;
	line-height: 2.9rem;
}
.nikoniko_box img{margin-bottom: 20px;}
.design_box{
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px;
}
.nikoniko_column{
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px;
}
.nikoniko_column h3{min-height: 5.8rem;}

/* 商品説明 */
.feature_list li{margin-bottom: 0;}
.spec_table ol li{
	font-size: 1.4rem;
	letter-spacing: 0.84px;
	line-height: 2.8rem;
}

.price_box{
	display: flex;
	align-items: center;
	border: 1px solid #216B9E;
}

/* よくあるご質問 */
.qa_list li{padding: 20px 0;}
.qa_list li h3{margin-bottom: 5px;}
.qa_list li p{
    font-size: 1.4rem;
	letter-spacing: 0.84px;
	line-height: 2.8rem;
}

/* お役立ちコラム */
.column_ttl{
	font-size: 1.6rem;
	letter-spacing: 0.96px;
}

}
@media screen and (max-width: 920px){
/* mv */
.mv_box{flex-direction: column;}
.mv_box h2{margin-bottom: 26px;}
.mv_img{
	max-width: 440px;
	padding: 0 20px;
}
}
@media screen and (max-width: 767px){
th{
	width: 100px;
}
.specs_table tr:first-child th:first-child{width: 240px;}
th,td{
	font-size: 1.4rem;
	letter-spacing: 0.84px;
	line-height: 2rem;
	padding: 15px;
}
/* mv */
.mv_area{
	background-size: 108px;
	padding: 47px 0 130px;
}
.mv_box h2 span {
    line-height: calc(5rem + 10px);
    padding: 2px 10px;
}
/* さまざまな備蓄ニーズに応えています */
.needs_list{
	padding: 11px 20px;
	margin-left: 20px;
}

/* 「ニコニコ スチレット」とは */
.nikoniko_area{
	background-size: 108px;
	padding: 55px 0;
}
.nikoniko_area h2{
	font-size: 2.2rem;
	letter-spacing: 1.32px;
	line-height: 3.2rem;
}
.nikoniko_box{
	padding: 20px;
	margin-bottom: 15px;
}
.nikoniko_box h3{margin-bottom: 15px;}
.design_box{grid-template-columns: 1fr}
.design_box img{margin-bottom: 0;}
.nikoniko_box h3{text-align: center;}
.nikoniko_column h3{min-height: 0;}

.nikoniko_column{display: block;}

/* 商品説明 */
.features_box{padding: 20px 15px 23px;}
.price_box h3{
	font-size: 1.6rem;
	height: 60px;
	padding: 15px;
	width: 100px;
}
.price_box p{
	font-size: 1.6rem;
	padding: 0 15px;
}
}
@media screen and (max-width: 620px){
/* さまざまな備蓄ニーズに応えています */
.needs_list{
	display: block;
}
.needs_list li{width: 100%;}
}
@media screen and (max-width: 550px){
/* MV */
.mv_box h2{
	font-size: 2.3rem;
    letter-spacing: 0;
}
.mv_box h2 span {
    line-height: calc(3.5rem + 10px);
}
/* 「ニコニコ スチレット」とは */
.nikoniko_box h3{text-align: left;}

}
@media screen and (max-width: 440px){
.mv_box {align-items: baseline;}
.mv_box h2{
	font-size: 1.8rem;
}
.mv_box h2 span {
    line-height: calc(3rem + 10px);
}
}