@charset "utf-8";

body{font-family: "Manrope", "Noto Sans JP", sans-serif; font-feature-settings: "palt"; color: #000;
    font-size: var(--f32); line-height: 1.5; letter-spacing: 1px;
}
a{transition: 0.3s ease; color: #000;}
.flex{display: flex; flex-wrap: wrap;}
.inner{max-width: 1800px; width: 98%; margin: 0 auto; padding: 0 20px;}
.blue{color: var(--blue);}

.fade{
	animation: fadeIn 0.7s ease 0s 1 normal;
	-webkit-animation: fadeIn 0.7s ease 0s 1 normal;
}
@keyframes fadeIn{
	0% {opacity: 0}
	100% {opacity: 1}
}

@-webkit-keyframes fadeIn{
	0% {opacity: 0}
	100% {opacity: 1}
}


/* 表示・非表示 */
.pc_only{display: block;}
.pc_tab_only{display: block;}
.tab_only{display: none;}
.sp_tab_only{display: none;}x
.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{width: 100%; height: 100px; background: rgba(255, 255, 255, 0.9); /*display: flex; align-items: flex-end;*/
	position: fixed; top: 0; left: 0; z-index: 10; padding-bottom: 0px;
}
#header .header_wrap{width: 100%; height: 100%; justify-content: space-between;}

#header #h_logo{width: 200px; padding-top: 40px;}
#header #h_nav{width: calc(100% - 200px);}
#header .inner,
#header #h_nav > #h_nav_inner,
#header #h_nav > #h_nav_inner > nav,
#header #h_nav > #h_nav_inner > nav > ul{height: 100%;}
#header #h_nav > #h_nav_inner > nav > ul{display: flex; flex-wrap: wrap; justify-content: flex-end;}
#header #h_nav > #h_nav_inner > nav > ul > li{padding: 40px 0 0 0; margin-left: 30px; line-height: 2;}
#header #h_nav > #h_nav_inner > nav > ul > li > a{font-size: 20px; line-height: 1; font-weight: 700;}
#header #h_nav > #h_nav_inner > nav > ul > li > a:hover{opacity: 1; color: var(--blue);}
#header #h_nav > #h_nav_inner > nav > ul > li.current-menu-item > a{color: var(--blue);}
#header #h_menuBtn{display: none; transition: 0.3s ease; transform-origin: center;}

#header #h_nav .sub-menu{visibility: hidden; display: none;}
#header #h_nav > #h_nav_inner > nav > ul > li{position: relative;}
#header #h_nav > #h_nav_inner > nav > ul > li > a{height: 100%; display: flex; align-items: flex-end; padding-bottom: 15px;}
#header #h_nav > #h_nav_inner > nav > ul > li > .sub-menu{position: absolute; bottom: 0; left: 0; width: 100%; transform: translateY(100%); background: #fff; border-top: 2px solid var(--blue); width: 220px;}
#header #h_nav > #h_nav_inner > nav > ul > li > .sub-menu > li{line-height: 1.2; position: relative;}
#header #h_nav > #h_nav_inner > nav > ul > li > .sub-menu > li > a{font-size: 14px; display: block; padding: 10px;}
#header #h_nav > #h_nav_inner > nav > ul > li > .sub-menu > .menu-item-has-children > a::after{content: "";
	width: 10px; aspect-ratio: 1 / 1; border: 2px solid var(--blue); border-bottom: none; border-left: none;
	display: block; transform: rotate(45deg); position: absolute; top: 14px; right: 10px;
}

#header #h_nav > #h_nav_inner > nav > ul > li > ul > li > .sub-menu{position: absolute; top: 0; right: 0; transform: translateX(100%); background: #fff; border-top: 2px solid var(--blue); width: 220px;}
#header #h_nav > #h_nav_inner > nav > ul > li > ul > li > .sub-menu a{font-size: 14px; display: block; padding: 10px;}

#header .submenu-toggle{display: none;}

@media screen and (max-width: 1300px){
	#header #h_nav > #h_nav_inner > nav > ul > li > a{font-size: 18px;}
	#header #h_nav > #h_nav_inner > nav > ul > li{margin-left: 20px;}
}

@media screen and (max-width: 1200px){
	#header{height: 100px; padding-bottom: 20px;}
	#header #h_menuBtn{display: block; width: 48px; margin-top: 40px;aspect-ratio: 1 / 1;}
	#header #h_menuBtn:hover{cursor: pointer; transform: rotate(45deg);}
	#header #h_menuBtn.is-open{transform: rotate(45deg);}

	#header #h_nav{position: fixed; top: 100px; left: 0; background: rgba(255, 255, 255, 0.9);
		width: 100%; height: calc(100svh - 100px);
		opacity: 0; visibility: hidden; transition: 0.3s ease;
	}
	body.menu-open #header #h_nav{opacity: 1; visibility: visible;}
	
	#header #h_nav > #h_nav_inner{width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; padding: 20px 0;}
	#header #h_nav > #h_nav_inner > nav,
	#header #h_nav > #h_nav_inner > nav > ul{width: 100%; height: 100%; overflow-y: auto;}
	#header #h_nav > #h_nav_inner > nav > ul{display: block; border-top: 1px solid #b1b1b1;
		scrollbar-width: thin;
		scrollbar-color: #8cb5bb #f5f5f5;
	}
	#header #h_nav > #h_nav_inner > nav > ul > li{width: 100%; padding-left: 0; margin-top: 0; margin-left: 0;}
	#header #h_nav > #h_nav_inner > nav > ul > li{padding: 0; border-bottom: 1px solid #b1b1b1;}
	#header #h_nav > #h_nav_inner > nav > ul > li.menu-item-has-children{position: relative;}
	#header #h_nav > #h_nav_inner > nav > ul > li > a{height: 60px; padding: 20px;}
	/*#header #h_nav > #h_nav_inner > nav > ul > li > a{font-size: var(--f30);}*/
	#header #h_nav > #h_nav_inner > nav > ul > li > .sub-menu{background: none;}
	#header #h_nav > #h_nav_inner > nav > ul > li > .sub-menu > li{border-top: 1px solid #b1b1b1;}
	#header #h_nav > #h_nav_inner > nav > ul > li > .sub-menu > li > a{height: 60px; padding: 20px;}
	#header #h_nav > #h_nav_inner > nav > ul > li > ul > li > .sub-menu{background: none;}
	#header #h_nav > #h_nav_inner > nav > ul > li > ul > li > .sub-menu > li{border-top: 1px solid #b1b1b1;}
	#header #h_nav > #h_nav_inner > nav > ul > li > ul > li > .sub-menu > li > a{height: 60px; padding: 20px;}

	#header #h_nav > #h_nav_inner > nav > ul > li > .sub-menu,
	#header #h_nav > #h_nav_inner > nav > ul > li > ul > li > .sub-menu{position: static; transform: translate(0); width: 100%; visibility: visible; border-top: none;}

	#header .submenu-toggle{display: block; width: 60px; aspect-ratio: 1 / 1; background: var(--blue);
		position: absolute; top: 0; right: 0;
	}
	#header .submenu-toggle::before{content: "";
		display: block; width: 60px; aspect-ratio: 1 / 1;
		position: absolute; top: 0; right: 0; z-index: 3;
		background-image: url(../../img/elements/icon_arrow.svg);
		background-position: center center;
		background-size: 20px;
		background-repeat: no-repeat;
		filter: brightness(0) invert(1); transform: rotate(90deg); transition: 0.3s ease;
	}
	#header .menu-item-has-children.is-open > .submenu-toggle::before{transform: rotate(-90deg);}

}

@media screen and (max-width: 640px){
	#header{height: 80px; padding-bottom: 20px;}
	#header #h_logo{max-width: 140px;}
	#header #h_menuBtn{width: 34px; margin-top:38px;}
	body.menu-open #header #h_nav{top: 80px; height: calc(100svh - 80px);}
}


/*====================
footer
====================*/
#footer{background: #F0F0F0; padding: 120px 0;}
#footer .f_logo{width: 200px; margin-bottom: 120px;}

#footer .f_contact{margin-bottom: 100px;}
#footer .f_contact .f_title{font-size: 50px; margin-bottom: 30px;}
#footer .f_contact ul li a{font-size: 16px;}
#footer .f_contact ul li a:hover{color: var(--blue);}

#footer .f_pageLink_wrap{margin-bottom: 30px;}
#footer .f_pageLink_box{max-width: 600px; width: 100%; margin-bottom: 60px;}
#footer .f_pageLink_box a{font-size: 50px; font-weight: 700;}
#footer .f_pageLink_box a:hover{color: var(--blue);}

#footer .f_copy p{font-size: 20px; font-weight: 700;} 


@media screen and (max-width:1280px){
	#footer .f_pageLink_wrap{margin: 0 -15px;}
	#footer .f_pageLink_box{max-width: 100%; width: calc(100% / 2); padding: 0 15px;}

}

@media screen and (max-width: 640px){
	#footer{padding: 55px 0;}
	#footer .f_logo{max-width: 140px; margin-bottom: var(--space80);}
	
	#footer .f_contact{margin-bottom: var(--space100);}
	#footer .f_contact .f_title{font-size: 24px; font-weight: 600; margin-bottom: var(--space40);}
	#footer .f_contact ul li{line-height: 1.3;}
	#footer .f_contact ul li a{font-size: 12px;}

	#footer .f_pageLink{margin-bottom: 30px;}
	#footer .f_pageLink_box{margin-bottom: var(--space100);}
	#footer .f_pageLink_box a{font-size: 24px; font-weight: 700;}
	
	#footer .f_copy p{font-size: 16px;}
}


#footer .f_contentNav{margin-bottom: 30px;}
#footer .f_contentNav_inner{}
#footer .f_contentNav_column{width: calc(100% / 4);}
#footer .f_contentNav_column ul{line-height: 1.5;}
#footer .f_contentNav_column ul li a{font-size: 15px;}
#footer .f_contentNav_column ul li a:hover{color: var(--blue);}
#footer .f_contentNav_column > ul > li::before{content: "■"; font-size: 15px; padding-right: 5px; color: #008b9c;}
#footer .f_contentNav_column > ul > li > a{font-weight: 600;}
#footer .f_contentNav_column > ul > li > ul{margin-left: 20px;}
#footer .f_contentNav_column > ul > li > ul > li > ul{margin-left: 20px;}
#footer .f_contentNav_column .sub-menu li::before{content: "-"; vertical-align: middle; padding-left: 5px;}

@media screen and (max-width: 991px){
	#footer .f_contentNav_column{width: calc(100% / 2); margin-bottom: 15px;}
}
@media screen and (max-width: 640px){
	#footer .f_contentNav_column{width: 100%; margin-bottom: 0;}
}

/*====================
main
====================*/
main{display:block; overflow: hidden; padding-top: 80px; padding-bottom: 120px;}

.h2_title{/*font-size: var(--f80);*/ font-size: 46px; color: var(--blue);}

@media screen and (max-width: 640px){
	main{padding-top: 50px;}
	.h2_title{font-size: var(--f48);}
}


/* Informationリスト */

.information_content {
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 40px;
}
.information_content .info_box {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0px;
	grid-auto-flow: row dense;
}
.information_content .info_box a {
	display: block;
}
.information_content .info_image {
	width: 100%;
	aspect-ratio: 1 / 0.692;
	overflow: hidden;
}
.information_content .info_image > div {
	width: 100%;
	height: 100%;
	transition: 0.3s ease;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.information_content .info_box a:hover .info_image > div{transform: scale(1.1);}
.information_content .info_day{font-size: 18px; font-weight: 700; margin-top: 10px;}
.information_content .info_box h3{font-size: 20px;}
.information_content .info_box dl{margin-top: 12px; line-height: 1;}
.information_content .info_box dl dd{font-size: 16px; font-weight: 600; color: var(--blue);}
.information_content .info_box dl dd + dd{margin-top: 8px;}

.read_more{display: flex; justify-content: flex-end; margin-top: 60px;}
.read_more a{font-size: 26px; font-weight: 700; display: inline-block; position: relative; padding-right: 50px;}
.read_more a::after{content: ""; width: 30px; height: 30px; display: block;
	border: 4px solid #000; border-left: none; border-bottom: none; transition: 0.3s ease;
	position: absolute; top: 50%; right: 15%; transform: rotate(45deg) translateY(-70%);
}
.read_more a:hover{color: var(--blue);}
.read_more a:hover::after{border-color: var(--blue); right: 10%;}

@media screen and (max-width:960px){
	.information_content{}
	.information_content .info_box{}	
}

@media screen and (max-width: 640px){
	.information_content{margin: 0;}
	.information_content .info_box{padding: 0; width: 100%;}
	.information_content .info_day{margin: var(--space16) 0 0;}
	.information_content .info_box dl dd + dd{margin-top: 8px;}

	.read_more a{font-size: var(--f26); padding-right: 40px;}
	.read_more a::after{width: 20px; height: 20px; border-width: 2px;}
}


/* Projectリスト */
.project_content {
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 40px;
	margin-bottom: 100px;
}
.project_content .project_box {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0px;
	grid-auto-flow: row dense;
}
.project_content .project_box a {
	display: block;
}
.project_content .project_image{
	width: 100%;
	aspect-ratio: 1 / 0.692;
	overflow: hidden;
}
.project_content .project_image > div {
	width: 100%;
	height: 100%;
	transition: 0.3s ease;
	background-position: center center; 
	background-size: cover;
	background-repeat: no-repeat;
}
.project_content .project_box a:hover .project_image > div{transform: scale(1.1);}
.project_content .project_box h3{font-size: var(--f28); color: var(--blue); margin: var(--space20) 0;}


@media screen and (max-width:960px){
	.project_content{}
	.project_content .project_box{}
}

@media screen and (max-width: 640px){
	.project_content{margin: 0;}
	.project_content .project_box{width: 100%; padding: 0;}	
}

p.js-text span{display: inline-block;}