@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Oswald:wght@200..700&display=swap');
/* ######################################################################################

　お客さまに選ばれたポイント

###################################################################################### */
/* ====================================================
  共通
==================================================== */
.pagePoint .wallBelt.topZero{
    padding-top: 0;
}

/*ハザードマップ*/
.hzardmap{ background: #f7f5f2;}
.hzardmap .main {
	background: url("../../images/hazardmap/img01.webp") no-repeat top center;
	background-size: cover;
	min-height: 600px;
}
.hzardmap .main h3 {
	width: 55%;
    text-align: left;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hzardmap .main h3 img {
	/*position: absolute;
	left: 10%;
	width: 50%;*/
	height: 60%;
}

.hzardmap .hpoint_title {
	display: flex;
	justify-content: center;
	flex-wrap:wrap;
	align-items: center;
}
.hzardmap .hpoint_title .nun {
	font-size: 7.5em;
	font-family: "EB Garamond", serif;
	font-optical-sizing: auto;
	font-weight: 200;
	font-style: normal;
	color: #cbbea5;
}
.hzardmap .hpoint_title .nun:after {
	content: "";
	background: url(../../images/hazardmap/slash.svg) no-repeat center;
    padding: 0 60px;
    background-size: 45%;
}
.hzardmap .hpoint_title .hpoint {
	font-size: 300%;
	line-height: 1.25;
	color: #9d8556;
	letter-spacing: 0.2em;
}
.hzardmap .hpoint_title .hpoint span {
	display: block;
	font-family: "Oswald", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-size: 55%;
}
.hpoin01.contents,
.hpoin02.contents{
	border-bottom: double 4px #9d8556;
}
.hpoin01 p,
.hpoin02 p,
.hpoin03 p{ font-size: 25px;}

.hzardmap .linkbtn { margin-top: 60px;}
.hzardmap .linkbtn a {
	background: -webkit-linear-gradient(left, #705d39, #9d8556);
	background: -o-linear-gradient(left, #705d39, #9d8556);
	background: linear-gradient(to right, #705d39, #9d8556);
	line-height: 3em;
	font-size: 180%;
	position: relative;
	box-shadow: 0 8px 15px rgba(0, 0, 0, .2);
	transition: .5s box-shadow,.5s filter;
	padding: 10px;
	color: #fff;
	text-decoration: none;
	width: 40%;
	margin: auto;
	display: block;
}
.hzardmap .linkbtn a:hover{
	box-shadow: none;
	background: -webkit-linear-gradient(left, #9d8556, #705d39);
	background: -o-linear-gradient(left, #9d8556, #705d39);
	background: linear-gradient(to right, #9d8556, #705d39);	
}
.hzardmap .linkbtn a:before{ content: ""; display: block; position: absolute; left: 5px; top: 5px; width: calc(100% - 12px); height: calc(100% - 12px); z-index: 1; border: 1px solid rgba(255, 255, 255, .3); }
.hzardmap .linkbtn a:after {
    content: ">";
    color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 2%;
    line-height: 3em;
    padding: 10px;
}

.hpoin01 ul {
	display: flex;
	justify-content: space-between;
	margin-top: 60px;
}
.hpoin01 ul li { height: 350px; text-align: left;}
.hpoin01 ul li:nth-child(2) { text-align: right;}
.hpoin01 ul li span { font-size: 80%; display: block;}
.hpoin01 ul li img { height: 100%; width: auto;}

.hpoin02 ul {
	display: flex;
	justify-content: space-between;
	gap: 15px;
	margin-top: 60px;
}
.hpoin02 ul li { width: 32%; text-align: left; font-size: 120%; }
.hpoin02 ul li:first-child {width: 70%;}
.hpoin02 ul li:first-child span { font-size: 65%; display: block;}

.hpoin03 .flex {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 60px;
}
.hpoin03 .flex .photolist { width: 45%;}
.hpoin03 .flex .map { width: 55%;}

.hpoin03 .flex .photolist ul li {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 40px;
}
.hpoin03 .flex .photolist ul li .photo {
	width: 50%;
}
.hpoin03 .flex .photolist ul li .photo span { font-size: 80%; display: block; text-align: right;}
.hpoin03 .flex .photolist ul li .text { width: 48%; text-align: left;}
.hpoin03 .flex .photolist ul li .text h4 { color: #9d8556; font-size: 150%; font-weight: normal;}
.hpoin03 .flex .photolist ul li .text h4 span {
	border: solid 1px #fff;
	background: #9d8556;
    color: #fff;
    padding:4px 12px;
	margin-right: 15px;
}
.hpoin03 .flex .photolist ul li .text p { font-size: 110%; margin-top: 10px;}

.iconlist {
	background: url("../../images/hazardmap/bg.jpg") no-repeat;
	 color: #fff;
	 margin-top: 50px;
}

.iconlist p { font-size: 25px; letter-spacing: 0.05em;}
.iconlist ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 60px;
}
.iconlist ul li { width: 27%;}
.iconlist ul li img { width: 40%; margin-bottom: 20px;}
.iconlist ul li h4 { font-size: 200%; font-weight: normal; margin-bottom: 15px; letter-spacing: 0.5em;}
.iconlist ul li p { font-size: 125%; letter-spacing: 0.2em;}

@media screen and (max-width: 767px) {
	.hzardmap .linkbtn a { width: 100%;}
	
	.hzardmap .main { min-height: inherit;}
	.hzardmap .main h3 {
		width: 68%;
		height: 335px;
	}
	.hzardmap .hpoint_title .nun {	font-size: 5.5em;}
	.hzardmap .hpoint_title .nun:after{ padding: 0 45px; background-size: 35%;}
	.hzardmap .hpoint_title .hpoint {font-size: 250%;}
	.hpoin01 p, .hpoin02 p, .hpoin03 p { font-size: 20px;}
	.hpoin01 ul { display: block;}
	.hpoin01 ul li { width: 100%; margin-bottom: 30px; height: inherit;}
	.hpoin02 ul { flex-wrap: wrap;}
	.hpoin02 ul li { margin-bottom: 30px; width: 45%;}
	.hpoin02 li:first-child { width: 100% !important;}
	
	.hpoin03 .flex .photolist { order: 2; width: 100%;}	
	.hpoin03 .flex .map { order: 1; width: 100%;}
	
	.iconlist { background-repeat: repeat-y;}
	.iconlist p { font-size: 20px;}
	.iconlist ul li { width: 100%; margin-bottom: 20px;}
	.iconlist ul li img { width: 30%; margin-bottom: 5px;}
	.iconlist ul li h4 { margin-bottom: auto;}
	

}

/* ====================================================
  attention
==================================================== */
.pagePoint .att {font-size: 70%; line-height: 1.7;}
@media screen and (max-width: 767px) {
	.pagePoint .att { text-align: left;}
}


/* end */