@charset "UTF-8";
/*===============================
	基本
================================*/
:root {
  --white: #FFF;
  --black: #000;
}
h1,h2,h3,p {
	font-weight: 300;
}


* {
	box-sizing: border-box;
}
html {
	height: 100%;
	font-size: 62.5%;
	scroll-behavior:smooth;
	overflow-y: scroll;
}
body {
	display: block;
	margin: 0 auto;
	background-color: var(--white);
	color: var(--black);
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.6rem;
	overflow-x: hidden;
}
main {
	width: min(90%, 1720px);
	margin: 0 auto;
}
address {
	font-style: normal;
}
ul {
	list-style: none;
}
img {
	display: block;
	width:100%;
	max-width: 100%;
	height: auto;
	vertical-align: top;
	object-fit: cover;
}
a {
	color: var(--black);
	text-decoration: none;
}
a:hover {
	color: #D71718;
}
p {
	line-height: 1.75;
}


/* 表示・非表示 */
.sp-only {
	display: none;
}

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

	main {
		width: 100%;
	}
	/* 表示・非表示 */
	.sp-only {
		display: inherit;
	}
	.pc-only {
		display: none;
	}
}



/*===============================
	メインビジュアル
================================*/
.mainVisual-pc {
		margin: clamp(1px, 1vw, 50px);
}
.mainVisual-sp, .mainVisual-tb {
	display: none;
}

@media screen and (max-width:1024px) {
	.mainVisual-pc {
		display: none;
	}
	.mainVisual-tb {
		display: inherit;
	}
}

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

	/* メインビジュアル */
	.mainVisual-sp {
		display: inherit;
	}
	.mainVisual-pc, .mainVisual-tb {
		display: none;
	}
}



/*===============================
	header
================================*/
/*  PCナビ */
#g-nav-pc {
	display: none;
	position: fixed;
	top: 0;
	right: 1%;
	z-index: 9999;
}
nav {
	padding-top: 30px;
	text-align: right;
}
nav li {
	padding: 5px 0;
}
.nav ul {
	background-color: #0092ab;
	border-radius: 10px;
	padding: 20px;
	transparent: none;
}
.nav li a {
  	position: relative;
  	display: inline-block;
  	text-decoration: none;
	color: var(--white);
}
.nav li a::after {
  	position: absolute;
  	bottom: -4px;
  	left: 0;
  	content: '';
  	width: 100%;
  	height: 2px;
  	background: var(--white);
  	transform: scale(0, 1);
  	transform-origin: center top;
  	transition: transform .3s;
}
.nav li a:hover::after {
  	transform: scale(1, 1);
}

.navBtn.active {
  color:var(--white);
  border-bottom: solid #FFF 4px;
}


@media screen and (max-width:1024px) {
	/* SPナビ */
	#g-nav-sp {
		position:fixed;
		z-index: 999;
		top:0;
		right: -120%;
		width: 80%;
		height: 50vh;
		background: #FFF;
		border: solid 1px #707070;
		transition: all 0.6s;
	}
	#g-nav-sp.panelactive  {
		right: 10px;
	}
	#g-nav-sp ul {
		position: absolute;
		z-index: 999;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
		white-space: nowrap;
	}

	#g-nav-sp li {
		list-style: none;
		text-align: center;
	}
	#g-nav-sp li a {
		color: #000;
		text-decoration: none;
		display: block;
		letter-spacing: 0.1em;
		font-weight: bold;
		font-size: 2rem;
		text-align: left;
	}
	.openbtn{
		display: none;
		position:fixed;
		z-index: 9999;/*ボタンを最前面に*/
		top:10px;
		right: 10px;
		cursor: pointer;
		width: 50px;
		height:50px;
		background-color: #C6B55A;
	}
	/*×に変化*/	
	.openbtn span{
		display: inline-block;
		transition: all .4s;
		position: absolute;
		left: 14px;
		height: 3px;
		border-radius: 2px;
		background-color: #FFF;
		width: 45%;
	}
	.openbtn span:nth-of-type(1) {
		top:15px;	
	}
	.openbtn span:nth-of-type(2) {
		top:23px;
	}
	.openbtn span:nth-of-type(3) {
		top:31px;
	}
	.openbtn.active span:nth-of-type(1) {
		top: 18px;
		left: 18px;
		transform: translateY(6px) rotate(-45deg);
		width: 30%;
	}
	.openbtn.active span:nth-of-type(2) {
		opacity: 0;
	}
	.openbtn.active span:nth-of-type(3){
		top: 30px;
		left: 18px;
		transform: translateY(-6px) rotate(45deg);
		width: 30%;
	}
}



/*===============================
	main
================================*/
/* 共通
--------------------------------*/
/* 見出し */
.heading {
	color: #008EA8;
	font-family: 'DM Serif Display', serif;
	font-size: clamp(2rem, 4.65vw, 8rem);
}
/* 見出し下アンダーライン */
.underLine {
	text-align: center;
	border-bottom: solid 1px #008EA8;
}

/* 見出し（h3） */
.title {
	color: #234C5F;
	font-size: clamp(2rem, 3.5vw, 6rem);
	line-height: 1.8;
}

/* テキスト */
.text {
	font-size: clamp(1rem, 1.04vw, 2rem);
	margin: 0 auto;
}

/* 見出し下アンダーライン */
.underLine {
	text-align: center;
	border-bottom: solid 1px #008EA8;
}

/* 背景マーク */
.markleft {
	background-image: url("../img/markleft.png");
	background-repeat: no-repeat;
	background-size: 8%;
	background-position: top 4% left 2%;
}
.markright {
	background-image: url("../img/markright.png");
	background-repeat: no-repeat;
	background-size: 8%;
	background-position: top 3% right 2%;
}
.marktop {
	background-position: top 30px left 5%;
}
.markbottom {
	background-position: top 14% left 2%;
}

/* 余白 */
.inner {
	padding-top: clamp(63px, 14.5vw, 250px);
	padding-bottom: clamp(63px, 14.5vw, 250px);
}

/* フレックスコンテナー */
.flex {
  	display: flex;
  	gap: clamp(10px, 2.3vw, 40px);
	width: 100%;
	justify-content: flex-start;
}
.fBox-A {
  	width: 60%;
}
.fBox-B {
  	width: 40%;
}



@media screen and (max-width:1024px) {
	
	/* 見出し（h3） */
	.title {
		text-align: center;
	}
	
	/* 背景マーク */
	.markleft {
		background-size: 10%;
		background-position: top 2% left 2%;
	}
	.markright {
		background-size: 10%;
		background-position: top 2% right 2%;
	}
	.marktop {
		background-position: top 20px left 10px;
	}
	.markbottom {
		background-position: top 14% left 2%;
	}

	/* フレックスコンテナー */
	.flex-container {
		margin-right: 0;
	}
	.flex {
		flex-direction: column;
	}
	.fBox-A {
		width: 100%;
	}
	.fBox-B {
		width: 100%;
	}
}

/* project
--------------------------------*/
.project {
	padding-left: 20%;
	padding-right: 20%;
	padding-top: 10%;
}



/* Purpose
--------------------------------*/
.Purpose {
	padding-left: 20%;
	padding-right: 20%;
}

/* レフトライン */
.Purpose .leftLine {
  	position: relative;
  	display: inline-block;
  	padding: 0 45px;
}
.Purpose .leftLine:before {
  	content: '';
  	position: absolute;
  	top: 50%;
  	display: inline-block;
  	width: 40px;
  	height: 3px;
  	background-color: #008EA8;
}
.Purpose .leftLine:before {
  	left:0;
}

/* 地域に活力を〜 */
.Purpose h1 {
	padding-top: clamp(20px, 8.72vw, 150px);
	padding-bottom: clamp(20px, 8.72vw, 150px);
	color: #234C5F;
	font-size: clamp(2.5rem, 2.9vw, 5rem);
	line-height: 2;
}
.Purpose .lead {
	font-size: clamp(1.4rem, 1.56vw, 3rem);
	line-height: 1.5;
}


@media screen and (max-width:560px) {
	.Purpose {
		padding-left: 10%;
		padding-right: 10%;
	}
	.Purpose h1 {
		line-height: 1.5;
	}
}



/* Business
--------------------------------*/
.Business .pickUp {
	font-size: clamp(1.6rem, 2.9vw, 5rem);
	line-height: 2;
	text-align: center;
}

/* フレックスコンテナー */
.Business .flex:first-child {
	padding-bottom: clamp(80px, 14.5vw, 250px);
}

/* 実施する事業3つ */
.project-box {
	width: 100%;
	margin: 0 auto;
	padding-top: clamp(80px, 14.5vw, 250px);
	padding-bottom: clamp(80px, 14.5vw, 250px);
	font-size: clamp(1.2rem, 2.6vw, 5rem);
	white-space: nowrap;
}
.project-box .flex {
	justify-content: center;
	gap: 0;	
}
.project-box img {
	max-width: 600px;
	height: auto;
	margin: 0 auto;
}

.project-box .slogan-box {
	position: relative;
}
.project-box .slogan-top {
	position: absolute;
	top: 50%;
  	left: 50%;
  	transform: translateY(-50%) translateX(-50%);
  	-webkit- transform: translateY(-50%) translateX(-50%);
  	margin: auto;
	font-weight: 700;
}
.project-box .slogan-left {
	position: absolute;
	top: 50%;
  	left: 50%;
  	transform: translateY(-50%) translateX(-50%);
  	-webkit- transform: translateY(-50%) translateX(-50%);
  	margin: auto;
	font-weight: 700;
}
.project-box .slogan-right {
	position: absolute;
	top: 50%;
  	left: 50%;
  	transform: translateY(-50%) translateX(-50%);
  	-webkit- transform: translateY(-50%) translateX(-50%);
  	margin: auto;
	font-weight: 700;
}

@media screen and (max-width:1600px) {
	.project-box img {
		width: 450px;
	}
}
@media screen and (max-width:1300px) {
	.project-box img {
		width: 310px;
	}
}
@media screen and (max-width:1024px) {
	.Business .title {
 	   padding-bottom: 10px;
	}
	.Business .text {
		width: min(83%, 400px);	
	}
	.project-box .flex {
		flex-direction: row;
	}
}
@media screen and (max-width:560px) {
	.project-box img {
		width: 150px;
	}
}



/* Project
--------------------------------*/
/* フレックスコンテナー */
.Project .flex-container {
	padding-bottom: clamp(80px, 13vw, 250px);
}
.Project .flex {
	padding-bottom: clamp(80px, 13vw, 250px);
}
.Project .flex:last-child {
	padding-bottom: 0;
}

.Box-item {
	max-width: 720px;
	margin: 0 auto;
}



@media screen and (max-width:1024px) {
	.Project .title {
		padding-bottom: 10px;
	}
	.Project .text {
		max-width: 400px;
		width: 96%;
	}
	.Project .text-A {
		width: 90%;
	}
	.Project .flex:first-child {
    	padding-bottom: clamp(80px, 13vw, 250px);
	}
	.Box-item {
		width: 100%;
	}
}



/* Company Portrait
--------------------------------*/
/* フレックスコンテナー */
.Company .flex-container {
	padding-bottom: clamp(80px, 13vw, 250px);
}

.Company .area {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-left: 5%;
}
.Company .area .fBox-A {
	width: 48%;
}
.Company .area .fBox-B {
	width: 51%;
}
.Company .area .title {
	padding-bottom: 0;
  	border-bottom: solid 1px #234C5F;
	text-align: left;
	line-height: 1.3;
}
/* 英文字 */
.Company .area .lead {
	display: block;
  	font-size: clamp(.8rem, 1.3vw, 2.5rem);
  	color: rgba(35, 76, 95,.4);	
	padding: 0;
}
.Company .area .text {
	font-size: clamp(1rem, 1.3vw, 2.5rem);
}
.Company .text {
	padding-top: clamp(10px, 0.8vw, 14px);
}

/* 代表理事 */
.Company .area-B  {
	padding-top: clamp(80px, 23vw, 400px);
  	padding-bottom: clamp(80px, 13vw, 250px);
	align-items: center;
}
.Company .area-B img {
  	width: 65%;
	margin-left: 15%;
}
.Company .area-B .title:before {
  	content: "代表理事";
	font-size: clamp(1rem, 2.08vw, 4rem);
	letter-spacing: 0.1em;
	padding-right: 10%;
}
/* 旧字体 */
.Company .area-B .name {
	font-family: 'Noto Sans SC', sans-serif;
	font-weight: 400;
	font-style: normal;
}

/* 地域創生〜*/
.Company .area-C .title {
	padding-bottom: 0;
	font-size: clamp(2rem, 2.08vw, 4rem);
	border-bottom: solid 1px #234C5F;
}



@media screen and (max-width:1024px) {
	.Company .area {
		margin-left: 0;
	}

	/* 理念 */
	.Company .area-A {
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		width: 90%;
		margin: 0 auto;
	}
	.Company .area-B {
		width: 90%;
		margin: 0 auto;
	}
	.Company .area-C .fBox-B {
    	width: min(75%, 400px);
		margin: 0 auto;
	}
}

@media screen and (max-width:960px) {
	.Company .area .area-A {
		flex-direction: row;
	}
	.Company .area-A .fBox-B {
		width: 100%;
	}
}


/* 会社概要 */
.info {
	width: min(90%, 600px);
	margin: 0 auto;
  	border-left: solid 3px #008EA8;
}
.info .title {
  	padding-bottom: clamp(10px, 1.04vw, 20px);
	padding-left: clamp(20px, 3.64vw, 70px);
	color: var(--black);
	font-size: clamp(2rem, 1.4vw, 2.5rem);
	text-align: left;
	border-bottom:none;
}
.info dl {
  	padding-left: clamp(10px, 3.64vw, 70px);
	font-size: clamp(1.2rem, 1.16vw, 2rem);
}
.info dt {
  	padding-top: clamp(20px, 1.56vw, 30px);	
}
.info dd {
	padding-top: 10px;
	padding-left: clamp(20px, 1.56vw, 30px);
	line-height: 1.7;
}
@media screen and (max-width:960px) {
	.info {
		max-width: 500px;
		width: 90%;
	}
}



/* Contact
--------------------------------*/
.Contact p {
	padding-bottom: clamp(50px, 8.72vw, 150px);
	font-size: clamp(1.4rem, 1.56vw, 3rem);
	text-align: center;
}

/* ボタン */
.Contact .button a {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	position: relative;
  	margin: 0 auto;
  	padding: 13px 37px 13px 43px;
  	width: min(20%, 144px);
  	color: #FFF;
  	font-size: 1.6rem;
	border-radius: 50px;
  	text-decoration: none;
  	background-color: #000;
  	transition: 0.3s;
}
.Contact .button a:hover {
	color: #000;
	border: solid 1px #000;
  	text-decoration: none;
  	background-color: #FFF;
}
.Contact .button i {
	margin-top: 2px;
  	margin-left: clamp(7px, 0.52vw, 10px);;
}

@media screen and (max-width:480px) {
	.Contact .button a {
		padding: 8px 27px;
		font-size: 1rem;
	}
}



/*===============================
	footer
================================*/
footer {
	position: relative;
	background-image: url("../img/footer.jpg");
	background-repeat: no-repeat;
	background-size:cover;
	background-position: center;
	height: 100vh;
    padding-top: min(100vh, 75%);
	text-align: center;
}
footer p {
	position: absolute;
	bottom: 50px;
  	left: 0;
	right: 0;
	margin: auto;
	color: var(--white);
	font-size: 1.4rem;
}

@media screen and (max-width:960px) {
	footer {
		height: 50vh;
	}
	footer p {
		bottom: 30px;
	}
}

@media screen and (max-width:480px) {
	footer p {
		bottom: 20px;
		font-size: 1rem;
	}
}


/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  text-align:center;
  color:#fff;
}

/* Loading画像中央配置　*/
#splash_text {
  position: absolute;
  top: 50%;
  left: 50%;
    z-index: 999;
  transform: translate(-50%, -50%);
  color: #fff;
  width: 100%;
}

/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
#splash_text svg{
    height: 2px;
}

/*割れる画面のアニメーション*/
.loader_cover {
    width: 100%;
    height: 50%;
    background-color: #333;
    transition: all .2s cubic-bezier(.04, .435, .315, .9);
    transform: scaleY(1);
}
/*上の画面*/
.loader_cover-up {
    transform-origin: center top;
}

/*下の画面*/
.loader_cover-down {
    position: absolute;
    bottom: 0;
    transform-origin: center bottom;
}
/*クラス名がついたらY軸方向に0*/
.coveranime {
    transform: scaleY(0);
}