@charset "utf-8";
/* 共通
==========================*/
body{font-family: 'Noto Sans JP', sans-serif;
	color: #000; font-size: 14px; font-weight: 400; line-height: 1.5;}

@media screen and (max-width: 640px){
	body{font-size: 13px;}
}
img{width: auto; max-width: 100%; vertical-align: bottom;}
a{color: #21282d; text-decoration: none; transition: 0.3s ease;}
a:hover{opacity: 0.7;}
ul,li,ol{list-style: none;}
sup{font-size: 50%; vertical-align: top;}
.flex{display: flex; flex-wrap: wrap;}
.en{font-family: 'Anton', sans-serif;}
.inner{max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 15px;}

.fead{opacity: 0; transform: translateY(40px); transition: 0.3s ease 0.5s;}
.fead.show{opacity: 1; transform: translateY(0);}

/* 表示・非表示 */
.pc_only{display: block;}
.pc_tab_only{display: block;}
.tab_only{display: none;}
.sp_tab_only{display: none;}
.sp_only{display: none;}

@media screen and (max-width: 960px){
	.pc_only{display: none;}
	.pc_tab_only{display: block;}
	.tab_only{display: block;}
	.sp_tab_only{display: block;}
	.sp_only{display: none;}
}

@media screen and (max-width: 640px){
	.pc_only{display: none;}
	.pc_tab_only{display: none;}
	.tab_only{display: none;}
	.sp_tab_only{display: block;}
	.sp_only{display: block;}
}

/* header
==========================*/
#header{position: fixed; top: 0; left: 0; z-index: 10;
	width: 100%; padding: 10px 35px 0 50px; transition: 0.3s ease;}
#header.scroll{background: #fff;}
.h_inner{justify-content: space-between; align-items: center;}
#h_logo{width: 280px; margin-bottom: 15px; position: relative; z-index: 2;}
#h_logo a{display: block;}

#h_nav_area{width: calc(100% - 280px);}
#h_menuBtn{display: none;}
#h_nav{}
#h_nav ul.flex{justify-content: flex-end;}
#h_nav a{font-weight: bold;}
#h_nav > ul > li{position: relative; margin: 0 5px;}
#h_nav > ul > li > a{padding: 15px; position: relative; display: inline-block;}
#h_nav > ul > li > a::after{content: ""; width: 0; height: 2px; transition: 0.3s ease;
	position: absolute; bottom: 0; left: 0;
	background: linear-gradient(to right,  rgba(142,201,164,1) 0%,rgba(94,153,201,1) 100%);}
#h_nav > ul > li.current > a:after,
#h_nav > ul > li > a:hover:after{width: 100%;}
#h_nav > ul > li > ul{position: absolute; bottom: 0; left: 0; transform: translateY(100%); width: calc(100% + 100px); background: rgba(255,255,255,0.7);
	visibility: hidden; opacity: 0; transition: 0.3s ease;}
#h_nav > ul > li > ul > li{display: inline-block;}
#h_nav > ul > li > ul > li > a{font-size: 13px; display: inline-block; padding: 8px 15px;}

@media screen and (min-width: 1201px){
	#h_nav > ul > li:hover > ul{visibility: visible; opacity: 1;}
}
@media screen and (max-width: 1200px){
	#header{padding: 0 0 0 50px; height: 50px;}
	#h_logo{margin-bottom: 0;}
	#h_nav_area{width: 50px;}
	#h_menuBtn{display: block; position: relative; z-index: 2;
		display: block; margin: 0 0 0 auto; width: 50px; height: 50px; background: #1663a1;}
	#h_menuBtn span,
	#h_menuBtn::before,
	#h_menuBtn::after{position: absolute; top: 50%; left: 0; right: 0; margin: auto; transform: translateY(-50%); transition: 0.3s ease;
		width: 80%; height: 2px; display: block; background: #fff;}
	#h_menuBtn::before{content: ""; transform: translateY(-50%) translateY(-10px); transform-origin: left;}
	#h_menuBtn::after{content: ""; transform: translateY(-50%) translateY(10px); transform-origin: left;}
	#h_menuBtn.is-open span{opacity: 0;}
	#h_menuBtn.is-open::before{transform: translateY(-50%) translateY(-10px) rotate(30deg); left: 3px;}
	#h_menuBtn.is-open::after{transform: translateY(-50%) translateY(10px) rotate(-30deg); left: 3px;}

	#h_nav{position: fixed; top: 0; left: 0; display: none;
		width: 100%; height: 100%; background: rgba(255,255,255,0.9);}

	#h_nav{}
	#h_nav ul.flex{flex-direction: column; padding: 60px 30px 0;}
	#h_nav > ul > li > a{display: block;}
	#h_nav > ul > li > ul{position: static; visibility: visible; opacity: 1;
		transform: translateY(0); width: 100%; margin-left: 15px;}
	#h_nav > ul > li > ul > li{display: block;}
}

@media screen and (max-width: 960px){
	#header{padding: 0 0 0 30px;}
}
@media screen and (max-width: 640px){
	#header{padding: 0 0 0 15px;}
	#h_logo{width: 180px;}
}


/* footer
==========================*/
#footer{}
.f_inquiry_area{background: #2371b1 url(../../img/elements/line_01.png); text-align: center; padding: 40px 0 50px;}
.f_inquiry_text{color: #fff; font-size: 18px; font-weight: 700; line-height: 2;}
.f_inquiry_btn{max-width: 840px; width: 100%; margin: 20px auto 0; justify-content: center;}
.f_inquiry_btn > div{width: 48%;}
.f_inquiry_btn > div a{border-radius: 5px; font-size: 22px; font-weight: 700; padding: 18px 5px;}
.f_inquiry_btn .cvbtn_blue a{background: #fff; color: #40ab68; box-shadow: 0 2px 0 rgba(0,0,0,0.3);}
.f_inquiry_btn .cvbtn_green a{background: #fff; color: #4280b2; box-shadow: 0 2px 0 rgba(0,0,0,0.3);}
.f_inquiry_btn .cvbtn_blue a::after{border-left:5px solid #40ab68;}
.f_inquiry_btn .cvbtn_green a::after{border-left:5px solid #4280b2;}

.f_copy{text-align: center; background: #306189; padding: 24px 0;}
.f_copy .flex{justify-content: space-between;}
.f_copy p,
.f_copy p a{color: #fff; font-size: 15px;}
.f_company a{position: relative; padding-left: 16px;}
.f_company a::before{content: ""; width: 6px; height: 6px; display: block; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); position: absolute; top: 7px; left: 0;}

@media screen and (max-width: 640px){
	.f_inquiry_area{padding: 40px 0 30px;}
	.f_inquiry_text{font-size: 16px; line-height: 1.6;}
	.f_inquiry_btn > div{width: 100%; margin: 5px 0;}
	.f_inquiry_btn > div a{font-size: 18px; padding: 14px 5px;}

	.f_copy{padding: 16px 0;}
	.f_copy p,
	.f_copy p a{font-size: 12px;}
}

/* main
==========================*/
main{padding-top: 60px;}

.cvbtn_blue,
.cvbtn_green{width: 100%;}
.cvbtn_blue a,
.cvbtn_green a{display: block; box-shadow: 0 1px 10px #a6b0b0; color: #fff; text-align: center; font-size: 18px; font-weight: 500; position: relative;}
.cvbtn_blue a:hover,
.cvbtn_green a:hover{transform: scale(0.97); opacity: 1;}
.cvbtn_blue a::after,
.cvbtn_green a::after{content: ""; width: 0; display: block;
	border-left: 5px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
	position: absolute; top: 50%; right: 10px; transform: translateY(-50%);}
.cvbtn_blue a{background: #5899ce;}
.cvbtn_green a{background: #67d08e;}

.page_title{text-align: center; height: 200px; display: flex; justify-content: center; align-items: center;
	background: linear-gradient(to right,  rgba(214,241,224,1) 0%,rgba(182,214,239,1) 100%);}
.page_title h1{font-size: 40px; font-weight: 500; color: #080b0d; letter-spacing: 1px;}

.title_style{text-align: center; font-size: 40px; font-weight: 700; letter-spacing: 2px; margin-bottom: 40px;}
.title_style::after{content: ""; width: 100px; height: 4px; display: block; margin: 25px auto 0;
	background: linear-gradient(to right,  rgba(142,201,164,1) 1%,rgba(94,153,201,1) 100%);}

.popup_image{position: relative; transition: 0.3s ease;}
.popup_image::after{content: "";
	background: url(../../img/elements/finger.svg) no-repeat center center;
	background-size: contain;
	width: 30px; height: 40px; display: block;
	position: absolute; top: 10px; right: 10px; z-index: 3;
	animation: expansion 0.8s ease 0s infinite alternate;
	display: none;
}
.popup_image:hover{cursor: pointer; transform: scale(1.03);}
.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close{cursor: pointer;}
@keyframes expansion{
	from{transform: scale(1,1);}
	to{transform: scale(1.2,1.2);}
}

@media screen and (max-width: 1200px){
	main{padding-top: 50px;}
}
@media screen and (max-width: 960px){
	.cvbtn_blue a,
	.cvbtn_green a{font-size: 16px;}
	
	.title_style{font-size: 30px; letter-spacing: 1px;}
}
@media screen and (max-width: 640px){
	.page_title{height: 110px;}
	.page_title h1{font-size: 25px;}

	.title_style{font-size: 24px; letter-spacing: 0; margin-bottom: 20px;}
	.title_style::after{width: 50px; margin: 15px auto 0;}
}

.scroll_icon{display: none;}
@media screen and (max-width: 640px){
	.scroll_wrap{width: 100%; overflow-x: scroll; position: relative;}
	.scroll_icon{width: 80px; display: block; position: absolute; top: 50px; left: 40%; z-index: 2;
		animation: scroll_icon 1s ease-in-out infinite alternate;}
	.scroll_img{width: 800px;}
	@keyframes scroll_icon{
		0% { transform:translate(-30%,0); }
		100% { transform:translate(-70%,0); }
	}
  }