@charset "utf-8";
body{
    position: relative;
    margin :0 auto;
	text-align: justify;
	text-justify: inter-ideograph;
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
	font-family: 'ZenKakuGothicNew';
}

a,a img{transition: all .3s ease!important;}
a[href^="tel:"] {pointer-events: none;}
@media (any-hover: hover){
	a:hover{
		transition-property: all;
		transition: 0.3s linear;
		opacity: 0.6;
	}
}
@font-face{
	src:  url('../font/Montserrat-Medium.woff') format('woff');
	font-family: 'Montserrat-Medium';
	font-style: normal;
	font-display: swap;
}
@font-face{
	src:  url('../font/ZenKakuGothicNew-Regular.woff') format('woff');
	font-family: 'ZenKakuGothicNew';
	font-weight: normal;
	font-display: swap;
}
@font-face{
	src:  url('../font/ZenKakuGothicNew-Bold.woff') format('woff');
	font-family: 'ZenKakuGothicNew';
	font-weight: bold;
	font-display: swap;
}

/* 共通 */
.fs14{font-size: 14px;}
.fs18{font-size: 18px;}
.fs20{font-size: 20px;}
.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb30{margin-bottom: 30px;}
.mb40{margin-bottom: 40px;}
.mb50{margin-bottom: 50px;}
.mb60{margin-bottom: 60px;}
.mb70{margin-bottom: 70px;}
.mb80{margin-bottom: 80px;}
.ffm{font-family: 'Montserrat-Medium';}
.fcn{color: #033b7c;}
.fcw{color: #fff;}
.wb{font-weight: bold;}
.lh{line-height: 1.8;}
.ls{letter-spacing: 0.1em;}
.ls2{letter-spacing: 0.08em;}
.center,.center_l{text-align: center;}
.tb_non,.sp_non{display: block;}
.sp_on{display: none;}

/*ヘッダー
------------------------------------------------------------*/
header{
	padding-top: 20px;
	width: 94%;
	margin: 0 auto 30px;
}
header h1{
	font-size: 12px;
	margin-bottom: 10px;
}
.header_wrap{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/*フッター
------------------------------------------------------------*/
footer{
	background: linear-gradient(to bottom,transparent 352px,#033b7c 352px);
	position: relative;
	overflow: hidden;
}
footer::before{
	content: "";
	width: 100vw;
	height: 243px;
	position: absolute;
	left: 0;
	top: 110px;
	background: url("../images/bg_dot_n.webp") center top / cover no-repeat;
	z-index: -1;
}
#contact{
	width: 94%;
	margin: 0 auto;
	padding: 110px 0;
	background: url("../images/contact_bg.webp") center / cover no-repeat;
	border-radius: 30px;
}
.contact_tel{
	display: flex;
	justify-content: center;
	background: #fff;
	width: 580px;
	padding: 20px 0;
	margin: 0 auto;
	border-radius: 8px;
}
.footer_wrap{padding: 150px 0 100px;}
.footer_logo{
	display: block;
	margin-bottom: 30px;
}

.footer_wrap > ul li a{
	color: #fff;
	letter-spacing: 0.1em;
	border-bottom: solid 1px #fff;
}
.footer_wrap > ul li:last-child a{
	display: flex;
	align-items: center;
}
.footer_wrap > ul li:last-child a::after{
	content: "";
	width: 16px;
	aspect-ratio: 19 / 16;
	background: url("../images/arrow_w.webp") center / contain no-repeat;
	transform: rotate(-90deg);
	margin-left: 10px;
}
.copy{padding-bottom: 30px;}

/* ナビゲーション
------------------------------------------------------------*/
.pc-nav{width: 100%;}
.pc-nav ul{
	display: flex;
	align-items: center;
	width: 100%;
}
.pc-nav ul li:not(:nth-last-child(-n+2)){margin-right: 30px;}
.pc-nav ul li:last-child,.drawer-nav ul li:last-child{
	background: #033b7c;
	padding: 8px 10px;
	width: 320px;
	border-radius: 8px;
	display: flex;
	justify-content: center;
}
.pc-nav ul li:last-child{margin-left: 45px;}
.pc-nav ul li a{font-size: 20px;}

/* ドロワー */
.drawer-hamburger {display: none !important;}
.drawer-hamburger {
	width: auto!important;
	padding: 26px 15px 12px!important;
	position: fixed;
	z-index: 99!important;
	background: #033b7c!important;
	border-radius: 8px;
}
.drawer-hamburger > p{color: #fff;}
.drawer-hamburger-icon,.drawer-hamburger-icon:after,.drawer-hamburger-icon:before {
	background-color: #fff !important;
	height: 2px !important;
	width: 25px!important;
	border-radius: 2px;
}
.drawer-hamburger-icon{margin: 0 auto 15px!important;}
.drawer-open .drawer-hamburger-icon {background-color: transparent !important;}
.drawer-hamburger-icon:after {top: 8px !important;}
.drawer-hamburger-icon:before {top: -8px !important;}
.drawer-open .drawer-hamburger-icon:after, .drawer-open .drawer-hamburger-icon:before {top: 0 !important;}
.drawer-overlay{z-index: 2!important;}
.drawer--top .drawer-hamburger, .drawer--top.drawer-open .drawer-hamburger{
	top: 1%;
	right: 1%;
}

/* ドロワーをふわっと表示↓ */
.drawer--top .drawer-nav{
	opacity: 0!important;
	transition: opacity .3s linear, visibility .3s linear !important;
	visibility: hidden;
	top: 3%!important;
	left: 50%!important;
	transform: translateX(-50%)!important;
	height: 90vh;
	width: 90%;
	border-radius: 20px;
}
.drawer--top .drawer-nav a{pointer-events: none!important;}
.drawer--top.drawer-open .drawer-nav{
	opacity: 1!important;
	visibility: visible;
}
.drawer--top.drawer-open .drawer-nav a{pointer-events: auto!important;}

/* この下でデザイン */
.drawer-nav {
	padding: 40px 20px !important;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
	z-index: 3;
}
.drawer-nav {
	display: flex;
	justify-content: center;
	align-items: center;
}
.drawer-nav li {width: 100%;}
.drawer-nav li:not(:nth-last-child(-n+2)){
	border-bottom: dotted 1px #b9c3c9;
	margin-bottom: 20px;
}
.drawer-nav li:not(:last-child){margin-bottom: 30px;}
.drawer-nav li:not(:nth-last-child(-n+2)){padding-bottom: 20px;}
.drawer-nav li:not(:last-child) a{
	display: block;
	font-size: 18px!important;
}

/* コンテンツ
------------------------------------------------------------*/
.content{padding: 150px 0;}
.content_top{padding-top: 150px;}
.content_btm{padding-bottom: 150px;}
.bg_dot{
	padding: 243px 0;
	position: relative;
	background: linear-gradient(to bottom,transparent 242px,#edf0f1 242px,#edf0f1 calc(100% - 242px),transparent calc(100% - 242px));
	overflow: hidden;
}
.bg_dot::before,.bg_dot::after{
	content: "";
	width: 100vw;
	height: 243px;
	position: absolute;
	left: 0;
	background: url("../images/bg_dot_g.webp") center top / cover no-repeat;
}
.bg_dot::before{top: 0;}
.bg_dot::after{
	transform: scaleY(-1);
	bottom: 0;
}
div:has( + .bg_dot){padding-bottom: 55px;}
.bg_dot + div{padding-top: 55px;}
.bg_line{background: url("../images/bg_line.webp") left top 55px / 30% no-repeat;}
.inner_box01,.inner_box02{
	width: 90%;
	margin: 0 auto;
}
.inner_box01{max-width: 1200px;}
.inner_box02{max-width: 1400px;}

/*flex_box*/
.flex_between,.flex_start{
	display: flex;
	flex-wrap: wrap;
}
.flex_between{justify-content: space-between;}
.flex_start{justify-content: flex-start;}
.c2 > *{width: 48%;}
.c3 > *{width: 31%;}
/*btn*/
.btn{
	display: block;
	max-width: 260px;
	width: 90%;
	color: #fff;
	font-weight: bold;
	font-size: clamp(18px,1.1vw,20px);
	padding: 18px 0 18px 25px;
	position: relative;
	background: #033b7c;
	border-radius: 8px;
	letter-spacing: 0.08em;
}
.btn::after{
	content: "";
	display: block;
	width: 19px;
	aspect-ratio: 19 / 16;
	background: url("../images/arrow_w.webp") center / contain no-repeat;
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
}
/*title*/
.contact_title > *{
	color: #fff;
	text-shadow: 0 0 5px rgba(32,41,86,0.4);
}
.title p,.contact_title p{
	font-family: "Montserrat-Medium";
	position: relative;
	width: fit-content;
	letter-spacing: 0.1em;
	margin: 0 auto 25px;
}
.title p{
	font-size: 46px;
	color: #003894;
}
.contact_title p{font-size: 62px;}
.title p::before,.title p::after,.contact_title p::before,.contact_title p::after{
	content: "";
	aspect-ratio: 1 / 1;
	display: block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.title p::before,.title p::after{width: 20px;}
.contact_title p::before,.contact_title p::after{width: 25px;}
.title p::before{
	background: url("../images/h2_deco_b.webp") center / contain no-repeat;
	left: -50px;
}
.title p::after{
	background: url("../images/h2_deco_g.webp") center / contain no-repeat;
	right: -50px;
}
.contact_title p::before{
	background: url("../images/h2_deco_w.webp") center / contain no-repeat;
	left: -60px;
}
.contact_title p::after{
	background: url("../images/h2_deco_w.webp") center / contain no-repeat;
	right: -60px;
}
.title h2,.contact_title h2{
	font-weight: bold;
	text-align: center;
	font-size: 24px;
	letter-spacing: 0.1em;
}

/*img_box*/
.img_box,.img_box2{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.img_box > img,.img_box2 > img{max-width: 520px;}
.img_box > img{width: 44%;}
.img_box2 > img{width: 39%;}
.img_box > div{width: 50%;}
.img_box2 > div{width: 57%;}

/* 下層コンテンツ
------------------------------------------------------------*/
#inner_title{
	padding: 80px 0 127px;
	background: url("../images/bg_dot_g.webp") center bottom / contain no-repeat;
}
#pankuzu,#pankuzu li:not(:first-child){
	display: flex;
	align-items: center;
}
#pankuzu li:not(:first-child)::before{
	content: "";
	width: 15px;
	height: 1px;
	background: #0062d1;
	margin: 0 10px;
}
.page_title p:first-child{
	font-family: 'Montserrat-Medium';
	color: #003894;
	font-size: 56px;
	margin-bottom: 15px;
	letter-spacing: 0.1em;
	padding-left: 50px;
	position: relative;
}
.page_title p:first-child::before{
	content: "";
	width: 30px;
	aspect-ratio: 1 / 1;
	background: url("../images/h2_deco_b.webp") center / contain no-repeat;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
.page_title p:last-child{font-size: 20px;}

/*list*/
.list > *{
	padding-left: 20px;
	position: relative;
}
.list > *::before{
	content: "";
	background: url("../images/list_deco.webp") center / contain no-repeat;
	width: 12px;
	aspect-ratio : 6 / 5;
	display: block;
	position: absolute;
	left: 0;
	top: 0.3rem;
}
.li_mb10 > *:not(:last-child){margin-bottom: 10px;}

/* 1300px以下から
------------------------------------------*/
@media only screen and (max-width:1300px){
	a[href^="tel"]{pointer-events: auto;}

	/* 共通 */
	.fs18{font-size: 16px;}
	.fs20{font-size: 18px;}
	.mb30{margin-bottom: 20px;}
	.mb40{margin-bottom: 30px;}
	.mb50{margin-bottom: 40px;}
	.mb60{margin-bottom: 50px;}
	.mb70{margin-bottom: 60px;}
	.mb80{margin-bottom: 70px;}

	/*ヘッダー
	------------------------------------------------------------*/
	header{
		padding-top: 15px;
		margin-bottom: 20px;
	}
	header .logo{width: 280px;}
	
	/*フッター
	------------------------------------------------------------*/
	footer{background: linear-gradient(to bottom,transparent 244px,#033b7c 244px);}
	footer::before{
		height: 165px;
		top: 80px;
	}
	#contact{
		padding: 65px 0;
		border-radius: 20px;
	}
	.contact_tel{
		width: 450px;
		padding: 15px 0;
		border-radius: 5px;
	}
	.contact_tel img{width: 320px;}
	.footer_wrap{padding: 80px 0 50px;}
	.footer_logo{
		width: 280px;
		margin-bottom: 20px;
	}
	.footer_wrap > ul li:last-child a::after{
		width: 14px;
		margin-left: 8px;
	}
	.copy{padding-bottom: 20px;}
	
	/* ナビゲーション
	------------------------------------------------------------*/
	.pc-nav ul li:not(:nth-last-child(-n+2)){margin-right: 20px;}
	.pc-nav ul li:last-child,.drawer-nav ul li:last-child{
		padding: 8px 25px;
		width: 260px;
		border-radius: 8px;
	}
	.pc-nav ul li:last-child{margin-left: 30px;}
	.pc-nav ul li a{font-size: 16px;}
	
	/* コンテンツ
	------------------------------------------------------------*/
	.content{padding: 100px 0;}
	.content_top{padding-top: 100px;}
	.content_btm{padding-bottom: 100px;}
	.bg_dot{
		padding: 165px 0;
		background: linear-gradient(to bottom,transparent 164px,#edf0f1 164px,#edf0f1 calc(100% - 164px),transparent calc(100% - 164px));
	}
	.bg_dot::before,.bg_dot::after{height: 165px;}
	div:has( + .bg_dot){padding-bottom: 35px;}
	.bg_dot + div{padding-top: 35px;}
	
	/*btn*/
	.btn{
		max-width: 240px;
		font-size: 16px;
		padding: 16px 0 16px 20px;
		border-radius: 5px;
	}
	.btn::after{
		width: 16px;
		right: 15px;
	}
	
	/*title*/
	.title p,.contact_title p{margin-bottom: 10px;}
	.title p{font-size: 40px;}
	.contact_title p{font-size: 46px;}
	.title p::before,.title p::after{width: 15px;}
	.contact_title p::before,.contact_title p::after{width: 20px;}
	.title p::before{left: -40px;}
	.title p::after{right: -40px;}
	.contact_title p::before{left: -50px;}
	.contact_title p::after{right: -50px;}
	.title h2,.contact_title h2{font-size: 20px;}
	
	/* 下層コンテンツ
	------------------------------------------------------------*/
	#inner_title{padding: 60px 0 80px;}
	#pankuzu li:not(:first-child)::before{
		width: 10px;
		margin: 0 6px;
	}
	.page_title p:first-child{
		font-size: 44px;
		margin-bottom: 15px;
		padding-left: 35px;
	}
	.page_title p:first-child::before{width: 20px;}
	.page_title p:last-child{font-size: 18px;}
	
	/*list*/
	.list > *{padding-left: 15px;}
	.list > *::before{width: 10px;}

/* 950px以下から
------------------------------------------------------------*/
@media only screen and (max-width:950px){
	
	/* 共通 */
	.tb_non{display: none;}
	
	/* ヘッダー
	------------------------------------------------------------*/
	header h1{padding-right: 60px;}
	header > div{margin-bottom: 20px;}
	.header_top{
		padding-bottom: 10px;
		margin-bottom: 15px;
	}
	.header_btm{margin-bottom: 0;}
	.header_tel{display: none;}

	/*フッター
	------------------------------------------------------------*/
	#contact > div > p{font-size: 16px;}
	.contact_tel{width: 380px;}
	.contact_tel img{width: 300px;}
	
	/* コンテンツ
	------------------------------------------------------------*/
	.c2 > *{width: 100%;}
	.c3 > *{width: 100%;}
	
	/*img_box*/
	.img_box,.img_box2 {justify-content: center;}
	.img_box > img,.img_box2 > img{
		max-width: 380px;
		width: 100%;
		margin-bottom: 30px;
	}
	.img_box > div,.img_box2 > div{
		max-width: 700px;
		width: 100%;
		order: 2;
	}
	
	/* ナビゲーション
	------------------------------------------------------------*/
	.drawer-hamburger{display: block!important;}
	
	/* 下層コンテンツ
	------------------------------------------------------------*/
	#inner_title{background-size: auto 50%;}
}

/* 500px以下から
------------------------------------------*/
@media only screen and (max-width:500px){
	body {min-width: inherit!important;width: 100%;}
	
	/* 共通 */
	.sp_non{display: none;}
	.sp_on{display: block;}
	
	/*ヘッダー
	------------------------------------------------------------*/
	header .logo{width: 240px;}
	
	/*フッター
	------------------------------------------------------------*/
	#contact{padding: 55px 0;}
	.contact_title{margin-bottom: 30px;}
	.contact_tel{width: 300px;}
	.contact_tel img{width: 240px;}
	.footer_logo{width: 240px;}
	
	/* コンテンツ
	------------------------------------------------------------*/
	/*title*/
	.title p{font-size: 30px;}
	.contact_title p{font-size: 30px;}
	.contact_title p::before,.contact_title p::after{width: 15px;}
	.title p::before{left: -30px;}
	.title p::after{right: -30px;}
	.contact_title p::before{left: -30px;}
	.contact_title p::after{right: -30px;}
	.title h2,.contact_title h2{font-size: 18px;}
	
	/* 下層コンテンツ
	------------------------------------------------------------*/
	.page_title p:first-child{
		font-size: 31px;
		margin-bottom: 10px;
		padding-left: 25px;
	}
	.page_title p:first-child::before{width: 15px;}
	.page_title p:last-child{font-size: 18px;}

}