@charset "utf-8";

:root {
/* ブランドカラー */
--color-primary: #0d65a4;
--color-secondary: #09a9ad;
--color-accent: #e09b20;

/* テキストカラー */
--text-primary: #232e42;
--text-secondary: #4d93ba;

/* 境界・背景カラー */
--border-color: #4d93ba;
--bg-blue:#dbeaf2;
--bg-orange: #f8e8cc;
--bg-green:#c8ebec;

/* フォントファミリー */
--font-primary:"Zen Kaku Gothic New", sans-serif;
--font-secondary:"Roboto Condensed", sans-serif;
--font-tertiary:"Abel", sans-serif;

/* フォントサイズ */
--font-size-sm: 1.4rem;
--font-size-base: 1.6rem;
--font-size-md: 1.8rem;
--font-size-lg: 2.2rem;
--font-size-xl: 2.6rem;

/* 装飾 */
--shadow-primary:drop-shadow(5px 5px 0 rgba(48, 64, 75, 0.2));
--shadow-light:drop-shadow(1px 1px 2px #fff);
}

/* Body
========================================== */
html, body {
	width: 100%;
	font-size: 62.5%;
	scroll-behavior: smooth;
}
body {
	line-height: 1.8;
	font-size: var(--font-size-base);
	font-family: var(--font-primary);
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	color: var(--text-primary);
}
@media screen and (max-width: 840px) {
}
@media screen and (max-width: 599px) {
	body {word-wrap: break-word;}
}

/*pc*/
@media screen and (min-width: 769px) {
	.sp {display: none !important;}
}
/*sp*/
@media screen and (max-width: 768px) {
	.pc {display: none !important;}
}

/* header
========================================== */
.headerArea {
	position: relative;
	z-index: 1200;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color:rgba(255,255,255,0.9)
}
.headerArea .inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 20px;
}
.headerLogo {}
.headerLogo a {
	line-height: 1.5;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	font-size: 1.4rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--color-primary);
}
.headerLogo .en{
	display: block;
	font-size: 1.7rem;
	font-family: var(--font-tertiary);
}
.headerLogo .logo img {
	max-width: 60px;
	height: auto;
}
.headerLogo a:hover{opacity: 0.7;transition: 0.3s;}

.headerInfo{display: flex;gap: 0 50px;}
.headerNavi {}
.headerNavi ul {
	display: flex;
	gap: 1em 3em;
	margin: 0 auto;
	list-style: none;
}
.headerNavi ul li a {
	line-height: 1.2;
	display: block;
	width: 100%;
	padding: 1em 0;
	color: var(--color-primary);
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	transition: 0.3s;
	cursor: pointer;
}
.headerNavi  ul li.current a,
.headerNavi  ul li a:hover {color: var(--color-secondary);text-decoration: underline;}

.headerContact{
	line-height: 1.2;
	text-align: center;
	color: var(--color-primary);}
.headerContact a{
	display: block;
	color: var(--color-primary);
	font-family: var(--font-tertiary);
	font-size: 3rem;
}

.spBtn,
.spContact,
.drawerMenu,
.overlay {
	display: none;
}

@media screen and (max-width:1024px){
	.headerLogo a {font-size:min(1.367vw,1.4rem);}
	.headerLogo .en{font-size:min(1.660vw,1.7rem);}
	.headerInfo{display: flex;gap: 0 30px;}
	.headerNavi ul {gap: 1em 2em;}
	.headerNavi ul li a {font-size: 1.4rem;}
	.headerContact a{font-size: 2rem;}
}

@media screen and (max-width:840px){
	.headerArea{position: absolute;background: none;}
	.headerArea .inner{
		padding: 0 10px;
		height: 50px;
	}
	.headerLogo{padding-top: 10px;}
	.headerLogo img{width: 45px;height: auto;}
	.headerLogo a {font-size: 1.2rem;gap: 1em;}
	.headerLogo .en{font-size: 1.4rem;}

	.headerNavi{display: none;}
	.headerInfo{display: none;}
	.overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 999;
		opacity: 0;
		visibility: hidden;
		transition: transform 0.5s ease;
	}
	.overlay.active {
		opacity: 1;
		visibility: visible;
	}
	.drawerMenu{
		visibility: hidden;
		display: block;
		overflow-y: auto;
		position: fixed;
		top: 0;
		right: 0;
		transition: transform 0.5s ease;
		width: 100%;
		height: 100%;
		background-color: var(--bg-green);
		z-index: 1000;
		padding: 70px 20px 30px;
	}
	.drawerMenu.open {
		opacity: 1;
		visibility: visible;
	}

	.drawerMenu::-webkit-scrollbar{width: 10px;}
	.drawerMenu::-webkit-scrollbar-track{background: var(--main-color);}
	.drawerMenu::-webkit-scrollbar-thumb {background: var(--main-color);}
	.gnavSp{
		margin-bottom: 30px;
		border-radius: 10px;
		padding:2em 1em;
		background-color: #fff;}

	.gnavSp li{text-align: center;}
	.gnavSp li + li{margin-top: 1.5em;}
	.gnavSp li a{
		position: relative;
		color: var(--text-primary);
		font-optical-sizing: auto;
		font-size: 1.6rem;
		font-weight: 600;
		text-decoration: none;
		text-align: center;
	}
	.spHeaderLogo{margin-bottom: 20px;text-align: center;}
	.spHeaderLogo img{
		width: 200px;height: auto;
	}
	.spAddress{
		margin-bottom: 10px;
		line-height: 1.2;
		text-align: center;}
	.spTel{text-align: center;margin-top: 1em;}
	.spTel a{
		display: block;
		font-weight:500;
		font-size: 3rem;
		font-family: var(--font-tertiary);
		text-decoration: none;
		color: var(--color-primary)}

	.spBtn{
		position:fixed;
		top: 5px;
		right: 5px;
		display: inline-block;
		width: 50px;
		height:50px;
		padding: 20px 13px 15px;
		border-radius: 5px;
		background-color: var(--color-primary);
		cursor: pointer;
		z-index: 2000;
	}
	.spBtn::after{
		position: absolute;
		left: 0;
		top: 3px;
		content: "MENU";
		text-align: center;
		width: 50px;
		font-size: 8px;
		color: #fff;
	}
	.spBtn.open::after{content: "CLOSE";}

	.spBtn div {position: relative;}
	.spBtn span {
		display: block;
		position: absolute;
		height: 2px;
		width: 100%;
		background:#fff;
		left: 0;
		-webkit-transition: .3s;
		-moz-transition: .3s;
		transition: .3s;
	}
	.spBtn span:nth-child(1) {top: 0;}
	.spBtn span:nth-child(2) {top: 8px;}
	.spBtn span:nth-child(3) {top: 16px;}
	.spBtn.open span:nth-child(1) {
		top: 8px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.spBtn.open span:nth-child(2) {
		width: 0;
		left: 50%;
	}
	.spBtn.open span:nth-child(3) {
		top: 8px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.headerLogoSp {
		width: fit-content;
		margin: 0 auto;
	}
	.headerLogoSp a {
		line-height: 1.5;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 20px;
		font-size: 1.4rem;
		font-weight: 600;
		text-decoration: none;
		color: var(--text-primary);
	}
	.headerLogoSp .en{
		display: block;
		font-size: 1.7rem;
		font-family: var(--font-tertiary);
	}
	.headerLogoSp .logo img {
		max-width: 60px;
		height: auto;
	}
	.headerLogoSp a:hover{opacity: 0.7;transition: 0.3s;}
}

/* contents
========================================== */
.wrap{overflow: hidden;}
.contents {
	margin: 0 auto;
	width: 100%;
}
.contents p+p {margin-top: 1.5em;}
.contentsInner {
	margin: 0 auto;
	padding: 30px 0 60px;
	width: 1200px;
}

@media screen and (max-width:1200px) {
	.contentsInner {
		width: 100%;
		padding: 30px 30px 60px;
	}
}

@media screen and (max-width:599px) {
	.contentsInner {
		padding: 50px 20px;
	}
}

/* mv
========================================== */
.mvArea {
	position: relative;
	padding-top: 100px;
	width: 100%;
}
.mvArea::before{
	z-index: -1;
	position: absolute;
	top: 60%;
	left: 0;
	content: "";
	background: url(images/mv_bg.jpg) left top /cover no-repeat;
	aspect-ratio: 1600 / 1379;
	width: 100%;
	height: auto;
}
.mvArea .mvText{
	z-index: 10;
	position: absolute;
	top: 56%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.mvArea .mvText img{
	max-width: 100%;
	height: auto;
}

/*スライダー*/
.scroll-container {
	overflow: hidden;
	width: 100%;
}
.column {
	display: flex;
	margin: 30px 0;
	width: 100%;
}
.column .image {
	position: relative;
	display: flex;
	gap: 30px;
	margin: 0 1%;
	width: 160vw;
}
.column img {
	display: block;
	width: 160vw;
	height: auto;
}
.column.left .image{animation: scroll-x 50s linear infinite;}
.column.right .image{animation: scroll-x-reverse 50s linear infinite;}

@keyframes scroll-x {
	0%   { transform: translateX(0);}
	100% { transform: translateX(-100%);}
}

@keyframes scroll-x-reverse {
	0%   { transform: translateX(-100%);}
	100% { transform: translateX(0);}
}

@media screen and (max-width:840px) {
	.mvArea {padding-top: 60px;}
	.column {margin: 10px 0;}
}

@media screen and (max-width:599px) {
	.column .image {width: 220vw;}
	.column img {width: 220vw;}
	.mvArea .mvText {width: 70%;top: 63%;}
}

/* 私たちについて
========================================== */
.aboutArea{
	margin-top: 23vw;
	margin-bottom: 80px;
}

.aboutTitle{
	margin-bottom: 2.5em;
	text-align: center;
	font-weight: 900;
	font-size:clamp(var(--font-size-md), 2.857vw, var(--font-size-lg));
	color: var(--color-primary);
}
.aboutText{
	margin-bottom: 2.5em;
	line-height: 2.5;
	text-align: center;
}

.aboutText .textBlock{display: inline-block;}

.aboutMovieWrap{
	max-width: 960px;
	margin: 0 auto 80px;
}
.movie {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.movie iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.aboutLink{
	display: flex;
	justify-content: center;
	gap: 50px;
}
.aboutLink li {
	width: calc((100% - 50px *2)/3);
}
.aboutLink li a{
	position: relative;
	display: block;
	padding:1em 40px;
	background-color: var(--bg-blue);
	color: var(--color-primary);
	text-decoration: none;
	border-radius: 20px;
	font-size: var(--font-size-xl);
	font-size: clamp(2rem, 2.381vw,2.6rem);
	font-weight: 600;
	text-align: center;
	filter: var(--shadow-primary);
}
.aboutLink li a::before{
	position: absolute;
	right: 30px;
	top: 50%;
	transform: translateY(-50%);
	content: "";
	background: url(images/icn_pdf.svg)left top/contain no-repeat;
	width:34px;
	height: 40px;
}
.aboutLink li a:hover{
	background-color: var(--color-secondary);
	color: #fff;
	transition: 0.3s;
}

@media screen and (max-width:1200px) {
	.aboutLink{gap: 20px;}
	.aboutLink li {width: calc((100% - 20px *2)/3);}
}

@media screen and (max-width:840px) {
	.aboutMovieWrap{margin: 0 auto 40px;}
	.aboutLink li a::before{
		right: 20px;
		width:25px;
		height: 30px;
	}
}

@media screen and (max-width:599px) {
	.aboutArea{margin-top: 12vw;}
	.aboutLink{gap: 20px;flex-direction: column;align-items: center;}
	.aboutLink li {width: 300px;}
}



/* 課題と取り組み
========================================== */
.issuesArea{
}

.issuesArea .issuesText{
	margin-bottom: 2em;
	text-align: center;
}
.issuesArea picture img{max-width: 100%;height: auto;margin-bottom: 60px;}

.issuesBox{
	margin-bottom: 60px;
	padding: 5%;
	box-sizing: border-box;
	border: 1px solid var(--border-color);
	border-radius: 20px;
}

.issuesBox .issuesTitleWrap{
	display: flex;
	justify-content: space-between;
	margin-bottom: 50px;
}
.issuesTitle div{
	line-height: 1.2;
	display: flex;
	gap: 10px;
	font-family: var(--font-secondary);}
.issuesTitle .number{
	line-height: 1;
	font-size: clamp(2.6rem, 3.095vw,3.6rem);
	color: var(--text-secondary);
}
.issuesTitle .en{
	color: var(--bg-blue);
	font-size: clamp(2.6rem, 3.095vw,3.6rem);
}
.issuesTitle h3{
	line-height: 1.3;
	margin-top: 10px;
	font-size: 4.2rem;
	font-size: clamp(3.2rem, 3.81vw,4.2rem);
	font-weight: 900;
}
.issuesTitle div{
	display: flex;
	align-items: center;
}

.issuesBox .issuesTitleWrap .imageBlock{
	width: 30%;
}
.issuesBox .issuesTitleWrap .imageBlock img{
	max-width: 100%;
	height: auto;
}

.issuesBoxWrap{
	display: flex;
	gap: 80px;
}

.issuesBoxWrap .box{
	position: relative;
	width: calc((100% - 80px)/2);
}
.issuesBoxWrap .box dl{
	margin-bottom: 30px;
}

.issuesBoxWrap .box dt{
	margin-bottom: 30px;
	text-align: center;
	font-size: clamp(2.6rem, 3.095vw,3.6rem);
	font-weight: 900;
	color: var(--color-accent);
}
.issuesBoxWrap .box dt{background:linear-gradient(transparent 65%, var(--bg-orange) 65%);}
.issuesBoxWrap .box dd{color: var(--color-accent);font-size: var(--font-size-md);}
.issuesBoxWrap .box:nth-child(2) dt{
	background:linear-gradient(transparent 65%, var(--bg-green) 65%);
	color: var(--color-secondary);
}
.issuesBoxWrap .box:nth-child(2) dd{color: var(--color-secondary);}

.issuesBoxWrap .box:nth-child(1)::after{
	content: "";
	position: absolute;
	right: -90px;
	top: 15%;
	width: 0;
	height: 0;
	border-top: solid 50px transparent;
	border-right: solid 30px transparent;
	border-bottom: solid 50px transparent;
	border-left: solid 30px var(--border-color);
}

@media screen and (max-width: 840px) {
	.issuesBox{margin-bottom: 30px;}
		.issuesBoxWrap{
			flex-direction: column;
			gap: 80px;
		}
	.issuesBoxWrap .box{width:100%;}
	.issuesBoxWrap .box:nth-child(1)::after{
		right: auto;
		top: auto;
		left: 50%;
		transform: translateX(-50%);
		bottom: -100px;
		border-top: solid 35px  var(--border-color);
		border-right: solid 80px transparent;
		border-bottom: solid 35px transparent;
		border-left: solid 80px transparent;
	}

}
@media screen and (max-width: 840px) {
	.issuesBox{padding: 20px;}
}


/* 描く未来地図
========================================== */
.futureFooterWrap{
	overflow: hidden;
}
.futureArea{
	position: relative;
	height: 100%;
}
.futureArea::before{
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	background: url(images/footer_bg.jpg) left top /cover no-repeat;
	width: 100%;
	height: 200%;
}

.futureArea .ttlMain{
	position: relative;
	width: fit-content;
	margin: 0 auto 6rem;
}
.futureArea .ttlMain::before,
.futureArea .ttlMain::after{
	content: "";
	position: absolute;
}
.futureArea .ttlMain::before{
	top: -50px;
	left: -220px;
	background: url(images/future_img01.png) left top/contain no-repeat;
	width: 170px;
	height: 150px;
}
.futureArea .ttlMain::after{
	bottom: 0;
	right: -200px;
	background: url(images/future_img02.png) left top/contain no-repeat;
	width: 140px;
	height: 65px;
}

.futureTitle{
	position: relative;
}
.futureText{
	margin-bottom: 2.5em;
	line-height: 2;
	text-align: center;
	font-size: clamp(1.6rem, 1.905vw,1.8rem);
	text-shadow :3px 3px 5px #fff,
	-3px 3px 5px #fff,
	3px -3px 5px #fff,
	-3px -3px 5px #fff,
	0 0 8px #fff,0 0 10px #fff;
}

.futureText .textBlock{display: inline-block;}

.contactWrap{
	margin: 60px auto 60px;
	padding:40px 30px 30px;
	max-width: 700px;
	background-color: rgba(255,255,255,0.8);
	border-radius: 20px;
	text-align: center;
}

.contactWrap .title{
	font-size: clamp(2.2rem,2.619vw,2.6rem);
	font-weight: 900;
}
.contactWrap p{
	margin: 1em 0;
	font-size: clamp(1.8rem,2.143vw,2.2rem);
	color: var(--color-secondary);
}
.contactWrap a{
	line-height: 1.3;
	display:block;
	width: fit-content;
	margin: 0 auto;
	text-decoration: none;
	font-size: clamp(4rem, 4.762vw,6rem);
	font-family: var(--font-tertiary);
	color: var(--color-secondary);
}

@media screen and (max-width: 840px) {
	.futureArea .ttlMain::before{
		left: -60%;
		background-size: 60%;
	}
	.futureArea .ttlMain::after{
		right: -85%;
		background-size: 60%;
	}
	.futureArea::before{
		background: url(images/footer_bg_sp.jpg) left top /contain no-repeat;
		width:100%;
		height: 5000px;
	}
	.contactWrap{margin: 60px auto 0;}
}
@media screen and (max-width: 599px) {
	.futureArea .contentsInner{overflow: hidden;}
	.futureArea .ttlMain::before{
		top: -30px;
		left: -50%;
		background-size: 50%;
	}
	.futureArea .ttlMain::after{
		right: -110%;
		bottom: -30%;
		background-size: 40%;
	}
}

/* footer
========================================== */
footer {
	width: 100%;
	padding-bottom: 30px;}
.footerWrap {
	margin: 0 auto;
	padding:60px 30px 30px;
	max-width: 1200px;
	background-color: rgba(255,255,255,0.8);
	border-radius: 20px;
	text-align: center;
}

.footerLogo {margin-bottom: 50px;}
.footerLogo a{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
	text-decoration: none;
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--text-primary);
}
.footerLogo .en{
	display: block;
	font-size: 1.7rem;
	font-family: var(--font-tertiary);
	color: #4d93ba;
	text-align: left;
}
.footerLogo .logo img {
	max-width: 60px;
	height: auto;
}
.footerLogo a:hover{opacity: 0.7;transition: 0.3s;}

.footerNavi{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap:1em 3em;
	margin-bottom: 30px;
}
.footerNavi li a{
	text-decoration: none;
	font-weight: 900;
	color: var(--color-primary);
}
.footerNavi li a:hover{
	text-decoration: underline;
}

.footerContact{
	margin: 0 auto 30px;
}
.footerContact a{
	display:block;
	width: fit-content;
	margin: 0 auto;
	text-decoration: none;
	font-size: clamp(4rem, 4.762vw,6rem);
	font-family: var(--font-tertiary);
	color: var(--color-secondary);
}
.copyright {
	margin: 0 auto;
	max-width: 1200px;
	text-align: center;
	font-size: 1.2rem;
}

@media screen and (max-width: 1200px) {
	footer {padding: 0 30px 30px;}
}

@media screen and (max-width: 840px) {
}

@media screen and (max-width: 599px) {
	footer {padding: 0 20px 20px;}
	.footerWrap {padding:60px 20px 30px;}
}


/* pageTop
========================================== */
.pagetop {
	position: fixed;
	bottom: 20px;
	right: 10px;
	width: 48px;
	height: 48px;
	border-radius:5px;
	background: var(--color-secondary) url(images/icn_pagetop.svg) no-repeat center;
	background-size:50%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 1000;
}
.pagetop:hover{background-color: var(--color-primary);transition: 0.3s;}

.pagetop.show {
	opacity: 1;
	pointer-events: auto;
}
@media screen and (max-width: 840px) {
	.pagetop {
		display: none !important
	}
}