@charset "utf-8";

#content_wrap{border-top:1px solid #ccc;}
#content_wrap img{border-radius:20px;}
.borderradius0{border-radius: 0 !important;}
.page_title{
	max-width:1210px;
	padding:30px 20px 35px;
	margin:auto;
	font-size:2.6rem;
	font-weight:bold;
	letter-spacing:1.56px;
	line-height:3.7rem;
}
h2{
	margin-bottom:25px;
	color:#216B9E;
	font-size:4.2rem;
	font-weight:bold;
	letter-spacing:2.52px;
	line-height:6.1rem;
	text-align:center;
}
h2 br{display:none;}
h3{
	font-size:2rem;
	font-weight:bold;
	letter-spacing:1.2px;
	line-height:3rem;
}
p{
	font-size:1.8rem;
	letter-spacing:1.08px;
	line-height:3.2rem;
}
p.aligncenter{text-align:center;}

.mv_area{
	display:block;
	max-width:1366px;
	padding:0 20px;
	margin:0 auto 90px;
}
.content_area{
	max-width:1140px;
	padding:0 20px;
	margin:0 auto 105px;
}
.content_area h2{text-align:center;}
.content_area p{margin-bottom:40px;}
.column_2 {
	display: grid;
	grid-template-columns:1fr 1fr;
	gap:30px;
}
.column_3{
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	gap:45px 30px;
	margin-bottom:45px;
}
.content_area .column_3{
	padding-bottom:60px;
	border-bottom:2px dotted #333;
}
.column_3 div{
	display:flex;
	flex-direction:column;
}
.column_3 h3{margin:12px 0 5px;}
.column_3 p{
	margin:0 !important;
	font-size:1.6rem;
	letter-spacing:0.96px;
	line-height:2.9rem;
}
.column_3 img{order:-1;}
.column_5{
	display:grid;
	grid-template-columns:repeat(5, 1fr);
	gap:20px;
}
.column_5 li{
	font-size:2rem;
	font-weight:bold;
	letter-spacing:1.2px;
	line-height:2.9rem;
	text-align:center;
}
.column_5 img{margin-bottom:15px;}
.text_center{text-align: center;}
table{
	table-layout: fixed;
	width: 100%;
	border-top: 1px solid #CCC;
	border-left: 1px solid #CCC;
	margin-bottom: 40px;
}
tr{
	border-bottom: 1px solid #CCC;
}
th{
	font-weight: bold;
	background: #EAF0F1;
	text-align: left;
}
.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 20px;
	vertical-align: top;
}
.table_evenly tr:first-of-type th:not(:last-child){width: calc((100% - 35%) / 3);}
.table_center{margin-bottom: 20px !important;}
.table_center th,.table_center td{text-align: center;font-weight: bold;}
.th_blue{
	background: #216B9E;
	color: #fff;
}
.td_blue{background: #C9DBE7;}
.scroll-hint-icon{width: 150px;}
/* 「ウォーターシャッター」が水害から守ります */
.bg_blue{
	padding:65px 0 100px;
	margin:0 20px;
	background:#216B9E;
	border-radius:20px;
}
.bg_blue .content_area{margin:auto;}
.bg_blue h2{
	margin-bottom:50px;
	color:#fff;
}
.bg_blue h2 br{display:block;}
.movie_wrap{
	position:relative;
	max-width:740px;
	padding-bottom:calc(740px * 0.58);
	margin:0 auto 50px;
	border-radius:20px;
	overflow:hidden;
}
.movie_wrap iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border:none;
}
.bg_blue .column_3{
	padding:50px 0 0 !important;
	margin-bottom:55px;
	border-top:2px dotted #fff;
	border-bottom:none;
	color:#fff;
}
.bg_white{
	padding:35px 40px 40px;
	margin-bottom:70px;
	background:#fff;
	border-radius:20px;
}
.bg_white ul{
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	gap:5px 50px;
	padding-left:30px;
}
.bg_white li{
	list-style:disc;
	color:#216B9E;
	font-size:2rem;
	font-weight:bold;
	letter-spacing:1.2px;
	line-height:3rem;
}
.pickup_h3{
	font-size: 3.2rem;
	letter-spacing: 1.92px;
	line-height: 4.6rem;
	color: #fff;
	padding-bottom: 20px;
	margin-bottom: 50px;
	position: relative;
}
.pickup_h3::after{
	position: absolute;
	display: block;
	content: '';
	width: 100%;
	height: 2px;
	background: #fff;
	bottom:0;
}
.bg_blue .column_2{color: #fff;}
.bg_blue h4{
	font-size: 2.4rem;
	letter-spacing: 1.44px;
	line-height: 3.5rem;
	color: #fff;
	margin-bottom: 20px;
}
.pickup_btn{
	display:block;
	position:relative;
	width:260px;
	padding:22px 50px 22px 30px !important;
	margin:40px auto 0;
	background:#DB0000 url(/img/disaster-prevention/common/popup_white.svg) no-repeat center right 20px;
	border-radius:35px;
	color:#fff !important;
	font-size:1.8rem;
	letter-spacing:1.08px;
	font-weight:bold;
	line-height:2.6rem;
	text-decoration:none !important;
	transition:background-color 0.3s;
}
.pickup_btn:hover{background-color:#A40000;}

/* 「ウォーターシャッター」とは */
.bg_gray{
	background: #EAF0F1;
	margin: 30px 20px 85px;
	padding: 90px 20px 1px;
	border-radius: 20px;
}
.bg_gray h2{
	color: #333333;
	margin-bottom: 42px;
}
.bg_gray h3{
	font-size: 3.2rem;
	letter-spacing: 1.92px;
	line-height: 4.6rem;
	padding-bottom: 20px;
	margin: 54px 0 50px;
	position: relative;
}
.bg_gray h3::after{
	content: '';
	position: absolute;
	display: inline-block;
	width: 100%;
	height: 2px;
	background: #216B9E;
	bottom: 0;
	left: 0;
}
.column_movie{margin-bottom: 40px;}
.bg_gray .movie_wrap {
	max-width: 535px;
	padding-bottom: calc(535px * 0.58);
	margin: 0;
}

/* 止水性能 */
.strength_box{
	border: 3px solid #216B9E;
	border-radius: 20px;
	padding:20px;
	margin: 52px 0 30px;
}
.strength_box p{
	font-size: 2.2rem;
	letter-spacing: 1.32px;
	line-height: 4rem;
	margin-bottom: 0 !important;
	color: #216B9E;
}
.column_test{align-items: stretch;}
.column_test > div {
	position: relative;
	padding-bottom: 46px;
}
.test_item{
   display: flex;
	flex-direction: column;
	border-radius: 20px;
	height: auto;
	background: #EAF0F1;
	height: 100%;
}
.test_item img{
	border-radius: 20px 20px 0 0 !important;
	order: 1;
}
.test_txt{
	padding: 30px;
	order: 2;
	flex-grow: 1;
}

.test_txt h3{
	font-size: 2.8rem;
	letter-spacing: 1.68px;
	line-height: 4rem;
	text-align: center;
	margin-bottom: 18px;
}
.test_txt p{margin-bottom: 0 !important;}
.test_caption{
	font-size: 1.5rem;
	letter-spacing: 0.9px;
	line-height: 3.2rem;
	margin: 0 !important;
	position: absolute;
}

/* 製品ラインナップ */
.lineup_area{margin-top: 60px;}
.page_link{
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 60px 0 80px;
	gap: 30px;
}
.page_link li{
	border-radius: 20px;
	overflow: hidden;
}
.page_link a{
	display: block;
	height: 100%;
	width: 100%;
	font-size: 0;
	aspect-ratio: 535 / 186;
	position: relative;
	overflow: hidden;
}
.page_link img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:opacity 0.3s,visibility 0.3s;
}
.page_link li a img.hover{opacity: 0;visibility: hidden;}
.page_link li a:hover img.hover{opacity: 1;visibility: visible;}

.lineup_area h3{
	font-size: 3.2rem;
	letter-spacing: 1.92px;
	line-height: 4.6rem;
	margin: 0 0 30px;
	color: #216B9E;
}
.lineup_area .column_3{
	border-bottom: none;
	margin-bottom: 0;
}
.lineup_area h4{
	font-size: 2.6rem;
	letter-spacing: 1.56px;
	line-height: 3.7rem;
	margin: 73px 0 18px;
	color: #216B9E;
	font-weight: bold;
}
.lineup_area h4:first-of-type{margin-top: 55px;}
.feature_h4{margin-top: 70px;}
.feature_h4 span{
	display: block;
	font-size: 5.4rem;
	letter-spacing:3.26px;
	line-height: 7.9rem;
	color: #216B9E;
	margin-bottom: 13px;
}
.lineup_area h5{
	font-size: 2.2rem;
	letter-spacing: 1.32px;
	line-height: 3.69rem;
	font-weight: bold;
	color: #216B9E;
	margin:40px 0 25px;
}
.lineup_area .column_2 p{margin:20px 0  0 !important;}
.lineup_area .column_2 .feature_case{
	margin: 23px 0 3px !important;
	font-size: 2rem;
	letter-spacing: 1.2px;
	line-height: 3.2rem;
	font-weight: bold;
}
.lineup_area .column_2 .feature_txt{margin-top: 8px !important;}
.lineup_area .column_3{padding-bottom: 0;}
.lineup_area .column_3 p{
	margin-top: 15px !important;
	font-size: 1.8rem;
	letter-spacing: 1.08px;
}
.download_box{
	background: #EAF0F1;
	border-radius: 20px;
	padding: 40px;
}
.download_list{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.download_list li{
	width: calc((100% - 60px) / 3);
	min-width: 230px;
}
.download_list li:not(:last-child){margin-right: 30px;}
.download_list li a{
	display: block;
	width: 100%;
	height: 100%;
	font-size: 2rem;
	letter-spacing: 1.2px;
	line-height: 3.2rem;
	font-weight: bold;
	color: #216B9E;
	border: 3px solid #216B9E;
	background: #fff;
	border-radius: 20px;
	background: #fff url(/img/disaster-prevention/common/icon_download.svg)no-repeat center right 26px / 15px;
	padding: 21px 50px 22px 27px;
	text-decoration: none;
	transition: background 0.3s;
}
.download_list li a:hover{background-color: #D2EDFF;}
.lineup_area .cta_area{margin-bottom: 60px;}
/* お問い合わせから設置までの流れ */
.flow_area{margin-top: 90px;}
.flow_list{
	margin-top: 40px;
	border-top: 1px solid #CCCCCC;
}
.flow_list li{
	border-bottom: 1px solid #CCCCCC;
	padding: 40px 20px 40px 170px;
	min-height: 220px;
	position: relative;
}
.flow_list li h3{
	font-size: 2.8rem;
	letter-spacing: 1.6px;
	line-height: 4rem;
	padding-bottom: 10px;
	margin-bottom: 0;
}
.flow_list li::before{
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	content: attr(data-en);
	width: 140px;
	height: 140px;
	font-size: 2.6rem;
	letter-spacing: 1.56px;
	line-height: 3.7rem;
	color: #fff;
	background: #216B9E;
	border-radius: 20px;
	left: 0;
	top:40px;
}
.flow_list li p{
	line-height: 3.2rem;
	margin-bottom: 0;
}
/* メンテナンスとフォロー体制 */
.follow_area{
	background: #EAF0F1;
	margin: 0 20px 85px;
	padding: 60px 20px 80px;
	border-radius: 20px;
}
.follow_box{
	max-width: 1100px;
	margin: 45px auto 0;
	padding: 45px;
	background: #fff;
	border-radius: 20px;
}
.follow_box ul{
	padding-left: 20px;
	list-style: disc;
}
.follow_box ul li{
	font-size: 1.8rem;
	letter-spacing: 1.08px;
	line-height: 3.2rem;
	margin-bottom: 15px;
}
/* よくある質問 */
.qa_list{
	border-top: 1px solid #CCCCCC;
	margin-top: 45px;
}
.qa_list li{
	padding: 35px 0;
	border-bottom: 1px solid #ccc;
}
.qa_list li h3{
	font-size: 2.4rem;
	letter-spacing: 1.44px;
	line-height: 3.5rem;
	margin-bottom: 10px;
}
.qa_list li p{margin-bottom: 0;}

@media screen and (max-width:1024px){

h2{
	margin-bottom:20px;
	font-size:2.6rem;
	letter-spacing:1.56px;
	line-height:3.7rem;
}

}

@media screen and (min-width:768px) and (max-width:1024px){
.mv_area{margin-bottom:70px;}
.content_area p{margin-bottom:35px;}
.column_3{gap:40px 20px;}
.column_5{gap:15px;}
.bg_blue{padding:55px 0 75px;}
.bg_blue h2{margin-bottom:40px;}
.movie_wrap{
	max-width:680px;
	padding-bottom:calc(680px * 0.58);
	margin-bottom:45px;
}
.bg_blue .column_3{padding-top:40px !important;}
.bg_white{padding:30px 20px 35px;}
.bg_white ul{gap:5px 40px;}
.pickup_btn{
	width:240px;
	padding-top:18px !important;
	padding-bottom:18px !important;
	border-radius:30px;
	font-size:1.6rem;
	letter-spacing:0.96px;
	line-height:2.4rem;
	margin-top: 0;
}

.bg_gray .movie_wrap{
	max-width:435px;
	padding-bottom:calc(435px * 0.58);
}

}
@media screen and (max-width:1024px){
.content_area{margin-bottom:50px;}
.page_title{
	padding-top:35px;
	font-size:2.2rem;
	letter-spacing:1.32px;
	line-height:3.2rem;
}
h3{
	font-size:1.6rem;
	letter-spacing:0.96px;
	line-height:2.4rem;
}
p{
	font-size:1.5rem;
	letter-spacing:0.9px;
	line-height:3.2rem;
}
.column_3 p{
	font-size:1.4rem;
	letter-spacing:0.84px;
	line-height:2.4rem;
}
.column_5 li{
	font-size:1.4rem;
	letter-spacing:0.84px;
	line-height:2rem;
}
th, td{
	font-size: 1.4rem;
	letter-spacing: 0.84px;
	line-height: 2rem;
	padding: 15px;
}
.pickup_h3{
	font-size: 2.2rem;
	letter-spacing: 1.32px;
	line-height: 3.2rem;
	margin-bottom: 20px;
	padding-bottom: 14px;
}
.bg_blue h4{
	font-size: 1.8rem;
	letter-spacing: 1.08px;
	margin-bottom: 0;
}
.bg_white li{
	font-size:1.4rem;
	letter-spacing:0.84px;
	line-height:2rem;
}
/* 「ウォーターシャッター」とは */
.bg_gray{margin-bottom: 60px;}
.bg_gray h2{
	font-size: 2.6rem;
	letter-spacing: 1.56px;
	line-height: 3.7rem;
}

.bg_gray h3{
	font-size: 2.2rem;
	letter-spacing: 1.32px;
	margin: 0 0 20px;
	padding-bottom: 6px;
}
/* 止水性能 */
.strength_box{margin-top: 30px;}
.strength_box p{
	font-size: 1.6rem;
	letter-spacing: 0.96px;
	line-height: 2.6rem;
}
.test_txt h3{
	font-size: 1.8rem;
	letter-spacing: 1.08px;
	line-height: 3rem;
	margin-bottom: 4px;
}
.test_txt p{line-height: 2.4rem;}
.test_caption{
	font-size: 1.3rem;
	letter-spacing: 0.7px;
	line-height: 2rem;
	margin: 15px 0 0 !important;
}
/* 製品ラインナップ */
.page_link{margin: 40px 0 60px;}
.lineup_area h3{
	font-size: 2.2rem;
	letter-spacing: 1.32px;
	line-height: 3.2rem;
	margin-bottom: 15px;
}
.lineup_area h4{
	font-size: 2.2rem;
	letter-spacing: 1.32px;
	line-height: 3.2rem;
	margin: 54px 0 21px;
}
.feature_h4 {
	font-size: 1.6rem !important;
	letter-spacing: 0.96px !important;
	line-height: 2.4rem !important;
}
.feature_h4 span{
	font-size: 3.6rem;
	letter-spacing: 2.16px;
	line-height: 3.9rem;
	margin-bottom: 15px;
}
.feature_case{
	margin: 10px 0 !important;
	font-size: 1.6rem;
	letter-spacing: 0.96px;
	line-height: 3.2rem;
}
.lineup_area .column_2 .feature_case{
	font-size: 1.6rem;
	letter-spacing: 0.96px;
	line-height: 3.2rem;
	margin: 12px 0 4px !important;
}
.lineup_area .column_2 .feature_txt{
	font-size: 1.4rem;
	letter-spacing: 0.84px;
	line-height: 2.4rem;
	margin-top: 4px !important;
}
p,.lineup_area .column_3 p{
	font-size:1.5rem;
	letter-spacing:0.9px;
}
.download_list li a {
	display: block;
	height: auto;
	font-size: 1.8rem;
	letter-spacing: 1.02px;
	line-height: 3.2rem;
	color: #216B9E;
	border: 2px solid #216B9E;
	border-radius: 10px;
	background: #fff url(/img/disaster-prevention/common/icon_download.svg) no-repeat center right 21px / 15px;
	padding: 19px 50px 17px 27px;
}
.lineup_area h5{
	font-size: 1.6rem;
	letter-spacing: 0.96px;
	line-height: 2.4rem;
	margin-bottom: 16px;
}

/* お問い合わせから 設置までの流れ */
.flow_area{margin: 60px 20px;}
.flow_list li{
	padding: 30px 0 30px 105px;
	min-height: 140px;
}
.flow_list li h3 {
	font-size: 1.6rem;
	letter-spacing: 0.96px;
	line-height: 2.4rem;
	padding-bottom:8px;
}
.flow_list li::before {
	width: 90px;
	height: 90px;
	font-size: 1.8rem;
	letter-spacing: 1.08px;
	line-height: 2.6rem;
	border-radius: 10px;
	top: 30px;
}
.flow_list li p {
	line-height: 2.4rem;
}
/* メンテナンスとフォトー体制 */
.follow_box{
	margin-top: 30px;
}
.follow_box ul li{
	font-size: 1.4rem;
	letter-spacing: 0.84px;
	line-height: 2.4rem;
	margin-bottom: 10px;
}
.follow_box p{
	font-size: 1.3rem;
	line-height: 2rem;
}
/* よくあるご質問 */
.qa_list li h3{
	font-size: 1.6rem;
	letter-spacing: 0.96px;
	line-height: 3.2rem;
}
.qa_list li{padding: 23px 0;}
.qa_list li p{
	font-size: 1.4rem;
	letter-spacing: 0.84px;
	line-height: 2.4rem;
	margin-top: 5px;
}
}

@media screen and (max-width:767px){

#content_wrap img{border-radius:10px;}
.page_title{
	padding-top:35px;
	font-size:2.2rem;
	letter-spacing:1.32px;
	line-height:3.2rem;
}
h2 br{display:block;}
.mv_area{margin-bottom:55px;}
.content_area p{margin-bottom:30px;}
.column_2{gap:28px;}
.column_3{gap:30px 10px;}
.content_area .column_3{padding-bottom:40px;}
.column_5{gap:25px 10px;}
.column_5 img{margin-bottom:10px;}
table{min-width: 800px;table-layout: auto;}
table.specs_table{min-width: auto;}
table.specs_table tr:first-child th:first-child{width: 100px;}
.scroll-hint-shadow-wrap{margin-bottom: 20px;}
.table_center{margin-bottom: 0 !important;}
.bg_blue{
	padding:45px 0 50px;
	margin:0;
	border-radius:0;
}
.bg_blue h2{margin-bottom:25px;}
.bg_blue h2 br{display:block;}
.movie_wrap{
	padding-bottom:58% !important;
	margin-bottom:40px;
	border-radius:10px;
}
.bg_blue .column_3{padding-top:30px !important;}
.bg_white{
	padding:25px 10px 30px;
	margin-bottom:44px;
	border-radius:10px;
}
.bg_white ul{
	gap:5px 30px;
	padding-left:20px;
}
.pickup_btn{
	width:220px;
	padding-top:15px !important;
	padding-bottom:15px !important;
	border-radius:27px;
	font-size:1.4rem;
	letter-spacing:0;
	line-height:2.4rem;
}
.bg_gray .column_2{grid-template-columns: 1fr;}
.bg_gray .movie_wrap{
	max-width: none;
	margin-bottom: 5px;
}
.bg_gray .movie_wrap:last-child{margin-bottom:30px;}
.pickup_btn{margin-top: 0;}

/* 「ウォーターシャッター」とは */
.bg_gray{
	margin: 0 0 50px;
	padding: 50px 0 10px;
	border-radius: 0;
}
.bg_gray h2{
	margin-bottom: 25px;
}
.bg_gray .column_2:first-of-type div:nth-child(1){order: 2;}
.bg_gray .column_2:first-of-type div:nth-child(2){order: 1;}
.bg_gray h3{
	font-size: 2.2rem;
	letter-spacing: 1.32px;
	margin: 0 0 20px;
	padding-bottom: 6px;
}
.column_movie{margin-bottom: 0;}

/* 止水性能 */
.strength_box{
	padding: 13px 20px;
	margin: 25px 0 22px;
	border-radius: 10px;
}
.column_test{
	grid-template-columns: 1fr;
	gap: 40px;
}
.column_test > div{padding-bottom: 53px;}
.column_test > div:first-child{padding-bottom: 0;}
.test_item{
	border-radius: 10px;
	height: auto;
}
.test_item img{border-radius: 10px 10px 0 0 !important;}
.test_txt{
	padding: 11px 20px;
}


/* 製品ラインナップ */
.lineup_area{margin-top: 50px;}
.page_link{gap: 20px;}
.lineup_area .column_2 .feature_case{
	margin-top: 5px!important;
}
.lineup_area .column_3 p,.lineup_area .column_2 p {
	margin-top: 5px !important;
}
.download_box{
	padding: 30px 20px;
	border-radius: 10px;
}
.download_list{display: block;}
.download_list li{
	margin-right: 0 !important;
	width: 100%;
}
.download_list li:not(:last-child){margin-bottom: 13px;}

.setup_colum{grid-template-columns: 1fr !important;}

.table_center tr:first-of-type th:not(:last-child){width: auto;}

/* お問い合わせから 設置までの流れ */
.flow_area{margin: 53px 0;}
.flow_list{margin-top: 25px;}


/* メンテナンスとフォロー体制 */
.follow_area{
	margin: 0 0 50px;
	padding: 50px 20px 60px;
	border-radius: 0;
}
.follow_box{
	padding: 25px 15px;
	border-radius: 10px;
	border-radius: 0;
}

/* よくあるご質問 */
.qa_list{margin-top: 26px;}

}


@media screen and (max-width:600px){
.column_2{grid-template-columns: 1fr;}
.column_3, .bg_white ul{grid-template-columns:1fr 1fr;}
.column_5{grid-template-columns:1fr 1fr 1fr;}

.page_link{
	margin: 28px 0 45px;
	grid-template-columns: 1fr;
}

}

html {
  scroll-behavior: smooth;
}