@charset "UTF-8";

/* 
----------------------------------------*/

.sec01{
	margin-bottom: 6rem;
}


.sec02{
	background-image: url("../img/preparedness/preparedness_bg.png");
	background-size: cover;        
	background-position: center;  
	ackground-repeat: no-repeat;
	padding-bottom: 5rem;
}
.sec01 .sec01_inner,
.sec02 .sec02_inner{
	max-width: 100rem;
    margin: 0 auto;
}

figure figcaption {
	background: rgba(35, 24, 21, .5);
	font-size: .8rem;
	letter-spacing: .1em;
}

#sec02 {
	padding-top: 150px;
	margin-top: -150px;
}

.asterisk{
	font-size: 1.1rem;
	line-height: .2;
}
@media only screen and (max-width: 768px) {
	.sec01 .sec01_inner,
	.sec02 .sec02_inner,
	.sec03 .sec03_inner,
	.sec04 .sec04_inner{
		margin: 0 2rem;
	}
	
	p{
		font-size: 1.3rem;
        line-height: 1.5;
	}
       
}


/* 災害時対応・軟水装置
----------------------------------------*/

.preparedness_block .title{
	background: #1C4065;
	color: #fff;
	/*background: linear-gradient(to right, rgba(232, 244, 252, 1) 0%, rgba(215, 242, 246, 1) 70%, rgba(125, 229, 197, 1) 150%);
    color: #004177;*/
	padding: 2.5rem 0;
	text-align: center;
	font-size: 3.4rem;
	line-height: 1.2;	
	margin-bottom: 5rem;
}

.preparedness_block .title span{
	font-size: 1.6rem;	
}

@media only screen and (max-width: 768px) {
	.preparedness_block .title{
		padding: 2rem 0;
		text-align: center;
		font-size: 2.2rem;
		line-height: 1;
		margin-bottom: 4rem;
	}

	.preparedness_block .title span{
		font-size: 1.3rem;	
	}

}



/* 見出し
----------------------------------------*/
.title01_grad{
	background: #E8F4FC;
	background: -webkit-linear-gradient(left, rgba(232, 244, 252, 1) 0%, rgba(215, 242, 246, 1) 60%, rgba(223, 248, 193, 1) 100%);
	background: -o-linear-gradient(left, rgba(232, 244, 252, 1) 0%, rgba(215, 242, 246, 1) 60%, rgba(223, 248, 193, 1) 100%);
	background: linear-gradient(to right, rgba(232, 244, 252, 1) 0%, rgba(215, 242, 246, 1) 60%, rgba(223, 248, 193, 1) 100%);
	font-size: 1.8rem;
	padding: 1.5rem 0 1.5rem 1.5rem;
	margin-bottom: 3rem;
}

h3.en_sub{
	color: #BCB594;
	font-size: 1.6rem;
	text-align: center;
	padding: 8rem 0 2rem;
}

.catchcopy{
	font-size: 3rem;
	text-align: center;
	margin-bottom: 4rem;
}

.catchcopy.preparedness{
	font-size: 2rem;
	color:  #004177;
	text-align: left;
	margin: 3rem 0 2rem;
}


p.subcopy{
	font-size: 1.6rem;
	text-align: center;
	line-height: 2.4;
	margin-bottom: 5rem;
}

h4{
	
}

h5{
	font-size: 1.6rem;
	padding: 1.5rem 0 1.2rem;
}

h5.line{
	border-bottom: 1px solid #1A1A1A;
	margin-bottom: 1.5rem;
}

.border_txt{
	font-size: 1.2rem;
	border: 1px solid #ccc;
	padding: .7rem;
	text-align: center;
	margin-bottom: 2.2rem;
}


ul.water_filter_merit{
	font-size: 1.8rem;
	color: #004177;
}

ol.water_filter_system{
	list-style: none;
	padding-left: 0;
	counter-reset: number;
}

ol.water_filter_system li{
	counter-increment: number;	
	margin: 0 0 1rem 0;
	padding-left: 3rem;
	position: relative;	
}

ol.water_filter_system li::before {
	content: counter(number);
	position: absolute;
	left: 0;
	top: 0;
	width: 2rem;
	height: 2rem;
	color: #1a1a1a;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #1a1a1a;
}




@media only screen and (max-width: 768px) {
	.title01_grad{
		font-size: 1.5rem;
		padding: .8rem 0 .8rem .8rem;
		margin-bottom: 3rem;
	}

	h3.en_sub{
		color: #BCB594;
		font-size: 1.6rem;
		text-align: center;
		padding: 8rem 0 2rem;
	}

	.catchcopy{
		font-size: 2rem;
		text-align: center;
		margin-bottom: 2.4rem;
	}


	p.subcopy{
		font-size: 1.3rem;
		text-align: center;
		line-height: 1.6;
		margin-bottom: 3rem;
	}

	h4{

	}

	h5{
		font-size: 1.3rem;
		padding: 1.2rem 0 1.2rem;
	}
	
	
	
	ul.water_filter_merit{
		font-size: 1.5rem;
		color:  #004177;
	}



}



/* カラム
----------------------------------------*/



/* 2カラム
----------------------------------------*/
.grid_2{
	display: grid;
    gap: 3rem 3rem;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 3rem;	
}

.grid_2_txt{
	display: grid;
    gap: 0 3rem;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 3rem;	
}

.grid_2_txt .txt_block {
  grid-column: 1 / span 2; 
}

@media only screen and (max-width: 768px) {
.grid_2 {
		margin-bottom: 1rem;
		display: block;
		overflow: hidden;
	}
}	



/* 3カラム
----------------------------------------*/
.grid_3{
	display: grid;
    gap: 3rem 3rem;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 3rem;	
	
}

.grid_3 .long {
 	grid-column: span 2;
}


@media only screen and (max-width: 768px) {
.grid_3 {
		margin-bottom: 1rem;
		display: block;
		overflow: hidden;
	}
}


/* 4カラム
----------------------------------------*/
.grid_4 {
	display: grid;
	gap: 3rem 3rem;
	grid-template-columns: repeat(4, 1fr);
	margin-bottom: 4rem;
}

.grid_4 .long {
  grid-column: 1 / span 3;
}

@media only screen and (max-width: 768px) {
	.grid_4 {
		margin-bottom: 1rem;
		display: block;
		overflow: hidden;
	}
	.grid_4 div{
		margin-bottom: 2rem;
	}
}

/* 5カラム
----------------------------------------*/
.grid_5 {
	display: grid;
	gap: 3rem 3rem;
	grid-template-columns: repeat(5, 1fr);
	margin-bottom: 4rem;
}

.grid_5 .long {
  grid-column: 1 / span 4;
}

@media only screen and (max-width: 768px) {
	.grid_5 {
		margin-bottom: 1rem;
		display: block;
		overflow: hidden;
	}
	.grid_5 div{
		margin-bottom: 2rem;
	}
	
	.grid_5 img{
		width: 35%;
		display: block;
		margin: 0 auto;		
	}
}


@keyframes horizontal {
	0% {
		transform: translateX(-30%);
	}
	100% {
		transform: translateX(-70%);
	}
}


/* スワイプ
----------------------------------------*/
.slideBox .swipeIcon {
	display: none;
}
@media only screen and (max-width: 768px) {
	.swipe_img {
		overflow: auto;
	}
	.swipe_img > img {
		max-width: none;
		width: 90rem;
	}
	.slideBox {
		position: relative;
	}
	.slideBox .swipeIcon {
		display: block;
		background: rgba(0, 0, 0, 0.3);
		position: absolute;
		top: calc(50% - 2.5rem);
		left: 100px;
		z-index: 5;
		width: 5rem;
		aspect-ratio: 1 / 1;
		border-radius: 50%;
		animation: horizontal 1s ease-in-out infinite alternate;
	}
}