@charset "utf-8";
/* CSS Document */
.mt20{margin-top: 20px;}
.mb30{margin-bottom: 30px;}
.mb40{margin-bottom: 40px;}
.mb160{margin-bottom: 160px;}

.pc{display: block;}
.sp{display: none;}
ul {list-style: none;}
figure{line-height: 0;}
a img:hover{opacity: 0.9;}
.marker{background: linear-gradient(transparent 50%, #ddd95b 50%);}

#reason .list .detail h4,
#reason .list .detail h4 span,
#reason .list .detail p
{font-family: source-han-sans-japanese, sans-serif;
font-style: normal;
font-weight: 400;}
#challenge .txt ul li,
#solution ul li{font-family: source-han-sans-japanese, sans-serif;
font-style: normal;
font-weight: 500;}
h2{font-family: source-han-sans-japanese, sans-serif;
font-style: normal;
font-weight: 600;}
.requestbtn a,
#reason h2,
#reason h2 span,
#reason .list .detail h3,
#reason .list .detail h3 span{
font-family: "zen-maru-gothic", sans-serif;
font-weight: 700;
font-style: normal;}
#reason h2 .big{
font-family: "fot-tsukuardgothic-std", sans-serif;
font-weight: 700;
font-style: normal;}


h1 .mainbnr{
	text-align: center;
	background-color: #f7f7f7;
	line-height: 0;}
h1 img{max-width: 70%;margin: 0 auto;}
h2{line-height: 1;}

.inner{width: 1000px;margin: 0 auto;}



#challenge{margin: 0 auto; background-color: #faf6ef;}
#challenge .inner{
	text-align: center;
	margin: 0 auto; 
	padding: 60px 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;}
#challenge figure{width: 48%; text-align: center;}
#challenge .txt{width: 52%;}
#challenge .txt h2{font-size: 30px; color: #004ea2; text-align: left; margin-bottom: 20px;}
#challenge .txt ul li{
	font-size: 18px;
	text-align: left;
	line-height: 2.4;
	border-bottom: dashed 1px #000;
	position: relative;
	padding-left: 25px;}
#challenge .txt ul li:nth-child(n+2){margin-top: 15px;}
#challenge .txt ul li:before{
	content: "";
	background: url("../img/challenge-icon.webp")no-repeat;
	width: 20px;
	height: 23px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);}



#solution{margin: 0 auto;}
#solution .inner{
	margin: 0 auto; 
	padding: 60px 0;}
#solution h2{font-size: 30px; color: #000;margin-bottom: 20px; text-align: center; position: relative;}
#solution h2:before{
	content: "";
	background: url("../img/solution-subtitle.webp")no-repeat;
	background-size: contain;
	width: 366px;
	height: 100px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -80px;}
#solution  .flex{display: flex; flex-wrap: wrap; justify-content: space-between;}
#solution figure{width: 48%; text-align: center;}
#solution ul{width: 52%; align-content: center;}
#solution ul li{
	font-size: 18px;
	text-align: left;
	line-height: 2.4;
	border-bottom: dashed 1px #000;
	position: relative;
	padding-left: 25px;}
#solution ul li:nth-child(n+2){margin-top: 15px;}
#solution ul li:before{
	content: "";
	background: url("../img/solution-icon.webp")no-repeat;
	width: 20px;
	height: 23px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);}


.requestbtn{margin-bottom: 80px;}
.requestbtn .view{
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	position: relative;
	width: 600px;
	margin: 0 auto 50px;;
	padding: 20px 0;
	font-size: 30px;
	font-weight: bold;
	border-radius: 0.3rem;
	border: 2px dashed #4a4a4a;
	color: #4a4a4a;
	box-shadow: 7px 7px 0 #4a4a4a;
	transition: 0.3s ease-in-out;}
.requestbtn .view:hover{
	box-shadow: 0 0 0;
	transform: translate(5px, 5px);
	color: #4a4a4a;}
.requestbtn .request{
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	position: relative;
	width: 600px;
	margin: auto;
	padding: 20px 0;
	font-size: 30px;
	font-weight: bold;
	border-radius: 0.3rem;
	border: 2px dashed #004ea2;
	color: #004ea2;
	box-shadow: 7px 7px 0 #004ea2;
	transition: 0.3s ease-in-out;}
.requestbtn .request:hover{
	box-shadow: 0 0 0;
	transform: translate(5px, 5px);
	color: #004ea2;}



#reason{background-color: #faf6ef; margin-bottom: 80px;}
#reason .inner{padding: 80px 0;}
#reason h2{font-size: 32px; color: #161616; text-align: center; margin-bottom: 60px; letter-spacing: 2px;}
#reason h2 .mini{font-size: 55%; display: inline-block; position: relative;}
#reason h2 .mini:before{
	content: "";
	background: url("../img/emphasis-left.webp")no-repeat;
	width: 17px;
	height: 17px;
	background-size: contain;
	position: absolute;
	left: -20px;
	top: 50%;
	transform: translateY(-50%);}
#reason h2 .mini:after{
	content: "";
	background: url("../img/emphasis-right.webp")no-repeat;
	width: 17px;
	height: 17px;
	background-size: contain;
	position: absolute;
	right: -20px;
	top: 50%;
	transform: translateY(-50%);}
#reason h2 .big{font-size: 150%; color: #004ea2;}
#reason .list{display: flex; flex-wrap: wrap; justify-content: space-between;}
#reason .list .detail{width: 49%; display: flex; flex-direction: column; background-color: #fff; box-sizing: border-box; padding: 10px 40px 40px 40px;}
#reason .list .detail:nth-child(n+3){margin-top: 2%;}
#reason .list .detail h3 {font-size: 20px; text-align: center; padding-bottom: 35px;}
#reason .list .detail h3 span{
	font-size: 47px;
	color: #fff;
	text-shadow: 1px 1px 0 #004ea2, -1px -1px 0 #004ea2,
	-1px 1px 0 #004ea2,  1px -1px 0 #004ea2,
	1px 0 0 #004ea2, -1px  0 0 #004ea2,
	0 1px 0 #004ea2,  0 -1px 0 #004ea2;}
#reason .list .detail h4{font-size: 26px; text-align: center; padding: 20px 0; font-weight: 400; flex-grow: 1; line-height: 1.4;}
#reason .list .detail h4 span{color: #004ea2; font-weight: bold; line-height: 1;}
#reason .list .detail p{font-size: 16px;}
#reason .list .detail figure{text-align: center; flex-grow: 1; align-content: center;}


.catalogmove iframe{height: 550px;}


.spotlist_back {
	margin-top: 60px;
	text-align: center;}
.spotlist_back a {
	font-size: 20px;
	border: solid 2px;
	padding: 15px 80px;
	border-radius: 10px;}




@media only screen and (max-width: 768px) {}
@media (max-width: 1024px) {}
@media (max-width: 768px) {
	.pc{display: none;}
	.sp{display: block;}

	
	h1 img{max-width: 100%;}
	.inner{width: 90% !important;}
	
	#challenge .inner{padding: 40px 0 60px;}
	#challenge figure{width: 100%; margin-bottom: 30px;}
	#challenge figure img{height: 230px;}
	#challenge .txt{width: 100%;}
	#challenge h2{font-size: 25px; text-align: center; color: #004ea2; margin-bottom: 30px;}
	#challenge .txt ul li{font-size: 18px; line-height: 1.5; padding-left:35px; padding-bottom: 5px;}
	
	#solution h2{font-size: 25px; line-height: 1.4;}
	#solution figure{width: 100%; margin-bottom: 30px;}
	#solution figure img{height: 230px;}
	#solution ul{width: 100%;}
	#solution ul li{font-size: 18px; line-height: 1.5; padding-left:35px; padding-bottom: 5px;}
	
	.requestbtn .view{width: 100%; font-size: 25px;}
	.requestbtn .request{width: 100%; font-size: 25px;}
	
	#reason{margin-bottom: 60px;}
	#reason .inner{padding: 60px 0;}
	#reason h2{margin-bottom: 40px;}
	#reason .list .detail{width: 100%; padding: 10px 30px 30px 30px;}
	#reason .list .detail figure img{max-width:100%;}
	#reason .list .detail:nth-child(n+2){margin-top: 20px;}
	#reason .list .detail h4{font-size: 22px;}
	
	.catalogmove iframe{height: 200px;}

}