@charset "UTF-8";
/* CSS Document */
html {
    scroll-behavior: smooth;
}
body{
	font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	color:#375079;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.85;
	animation: bodyfadein 0.5s forwards;
}
@keyframes bodyfadein {
	0% {opacity: 0}
	100% {opacity: 1}
}
@media screen and (max-width:1600px){
	body{
		font-size: 14px;
	}
}


/*header*/
:root {
	--header: 78px;
	scroll-padding: var(--header);
}
header{
	width: 100%;
	height: var(--header);
	margin: 0 auto;
	background: #fff;
	padding: 14px 40px;
	position: fixed;
	top:0;
	display: flex;
	align-items: center;
	z-index: 999;
}
header h1{
	width: 250px;
}
header nav.pc-nav{
	margin: 0 0 0 auto;
	display: flex;
	align-items: center;
	grid-column-gap: 12px;
}
header nav.pc-nav .nav-service-brock{
	border:1px solid #37507966;
	border-radius: 100px;
	padding: 5px 12px 4px 12px;
	position: relative;
}
header nav.pc-nav .nav-other-brock li{
	border:1px solid #37507966;
	padding: 5px 12px 4px 12px;
	border-radius: 100px;
	color:#375079;
}
header nav.pc-nav ul{
	font-family: YakuHanJP, 'Montserrat',"Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: center;
	grid-column-gap: 12px;
	color:#375079;
}
header na.pc-navv a{
	transition: 0.5s;
}
header nav.pc-nav a:hover{
	color:#37507966;
}
/* ドロップダウンメニュー */
.drop-menu {
  position: relative;
}
.drop-menu-list {
  background-color: #375079; /* ドロップダウンメニューの背景色 */
	color:#fff;
	padding:5px 32px 4px 32px;
	left: 0;
	border-radius: 100px;
	opacity: 0; /* 不透明度を最小に */
	position: absolute;
	top:calc(100% + 14px) ;
	transition: opacity .3s, visibility .3s; /* アニメーション設定 */
	visibility: hidden; /* 下層メニューを非表示 */
	width: max-content;
	z-index: 999;
}
.menu-item:hover .drop-menu-list {
  opacity: 1; /* 不透明度を最大に */
  transition: opacity .3s, visibility .3s; /* アニメーション設定 */
  visibility: visible; /* 下層メニューを表示 */
}
.menu-item:hover .drop-menu-list a{
	transition:.3s;
	color:#fff;
}
.menu-item:hover .drop-menu-list a:hover{
	color:rgba(255,255,255,0.60);
}

/*タブレット*/
@media screen and (max-width:1024px){
	header nav.pc-nav{
		display: none;
	}
}

/*スマホ*/
@media screen and (max-width:600px){
	header{
		padding: 10px 20px;
	}
	header h1{
		width:180px;
	}
}

/* ====================
   下層ページタイトル部分
==================== */
.page-head{
	margin: 0 auto;
	width: 100%;
	padding: 80px;
	display: flex;
	flex-wrap: wrap;
}
.page-head .title{
	background: transparent linear-gradient(124deg, var(--unnamed-color-1266e5) 0%, #0D4EAF 100%) 0% 0% no-repeat padding-box;
	background: transparent linear-gradient(124deg, #1266E5 0%, #0D4EAF 100%) 0% 0% no-repeat padding-box;
	border-radius: 20px;
	opacity: 1;
	padding: 40px;
	position: relative;
	display: flex;
	align-items: center;
	height: 335px;
	width: 75%;
}
.page-head .title img{
	position: absolute;
	top:40px;
	left:40px;
	width: 30px;
	height: auto;
}
.page-head .title h2{
	margin-left: 80px;
	font-size: 40px;
	font-weight: 600;
	color:#fff;
}
.page-head .title-img{
	position: relative;
	z-index: 10;
	width: 40%;
	margin-left: auto;
	margin-top: -15%;
}
.page-head .title-img img{
	height: 335px;
	object-fit: cover;
	box-shadow: 20px 20px 20px #37507929;
	border-radius: 20px;
}

/*タブレット*/
@media screen and (max-width:1024px){
	.page-head{
		padding:80px 40px 40px 40px;
	}
	.page-head .title{
		height: 200px;
		width: 90%;
	}
	.page-head .title img{
		top:20px;
		left:20px;
		width: 18px;
	}
	.page-head .title h2{
		margin-left: 20px;
		font-size:3.4vw;
	}
	.page-head .title-img{
		width: 34%;
	}
	.page-head .title-img img{
		height: 200px;
	}
}

/*スマホ*/
@media screen and (max-width:600px){
	.page-head{
		padding:80px 20px 40px 20px;
	}
	.page-head .title{
		height: 180px;
		width: 92%;
		padding: 20px;
	}
	.page-head .title img{
		left:10px;
	}
	.page-head .title h2{
		font-size:5.4vw;
	}
	.page-head .title-img{
		width: 70%;
		margin-top: -10%;
	}
	.page-head .title-img img{
		height: 160px;
	}
}

/*footer*/
footer .footer-wrapper{
	background: #375079;
	color:#fff;
	padding:60px 80px 80px 80px;
	font-size: 14px;
}
footer .footer-inner{
	margin: 0 auto;
	max-width: 1366px;
	display: flex;
	justify-content: space-between;
}
footer .footer-inner .company{
	display: flex;
	flex-direction: column;
	grid-row-gap: 20px;
}
footer .footer-inner .company h3{
	font-size: 18px;
	color:#fff;
}
footer .footer-inner .company p{
	color:#fff;
}
footer .footer-inner .company p.permission-number{
	font-size: 12px;
}
footer .footer-inner .sitemap > ul{
	color:#fff;
	display: flex;
	column-gap: 50px;
}
footer .footer-inner .sitemap > ul > li{
	font-size: 16px;
	font-weight: 700;
}
footer .footer-inner .sitemap > ul > li > ul > li{
	font-size: 14px;
	color:#FFFFFFCC;
	font-weight: 400;
}
footer .footer-inner .sitemap .footer-service-box li{
	font-size: 12px;
	color:#FFFFFFCC;
	font-weight: 400;
}
footer .footer-inner .sitemap > ul li a{
	transition: 0.5s;
}
footer .footer-inner .sitemap > ul li a:hover{
	color:rgba(255, 255, 255, 0.6)
}
footer .copyright-wrapper{
	width: 100%;
	background: #F0F4FA;
	padding: 12px 80px;
}
footer .copyright-inner{
	margin: 0 auto;
	max-width: 1366px;
	display: flex;
	justify-content: flex-end;
}
footer .copyright-inner p{
	color:rgba(55, 80, 121, 0.6);
	font-size: 12px;
}
footer .footer-privacy-mark{
	width: 60px;
}

@media screen and (max-width:1024px){
	footer .footer-wrapper{
		padding: 30px;
	}
	footer .footer-inner{
		justify-content: flex-start;
		flex-direction: column;
		grid-row-gap: 40px;
	}
	footer .footer-inner .company{
		grid-row-gap: 12px;
	}
	footer .footer-inner .sitemap > ul{
		flex-direction: column;
	}
	footer .footer-inner .sitemap > ul > li{
		font-size: 14px;
	}
	footer .copyright-wrapper{
		padding: 12px 30px;
	}
	footer .copyright-inner{
		justify-content: flex-start;
	}
	footer .copyright-inner p{
		font-size: 10px;
	}
}