@charset "utf-8";
/*============================
共通
============================*/
/* フォント */
.f_jost {
	font-family: "Jost", serif;
}

.f_inter {
	font-family: "Inter Tight", serif;
}

/* タイトル */
.sec_title {
	font-size: 1.11rem;
	font-weight: bold;
	text-align: center;
	position: relative;
	font-family: "Inter Tight", serif;
}
@media screen and (max-width: 640px) {
	.sec_title {
		font-size: 0.40rem;
	}
}

.sec_title span {
  display: inline-block;
}

.sec_title::after {
	content: '';
	display: block;
	width: 1px;
	height: 0.50rem;
	background: #000;
	margin: 0.3rem auto;
}
@media screen and (max-width: 640px) {
	.sec_title::after {
		height: 0.30rem;
		margin: 0.2rem auto;
	}
}

/*============================
ヘッダー
============================*/
header {
	/* transition: transform 0.5s 0.3s; */
	position: fixed;
	z-index: 10;
	width: 100%;
	top: 0.3rem;
}

@media screen and (max-width: 640px) {
	header {
		top: 0.1rem;
	}
	header .in {
		padding: 0 0.10rem;
	}
}

header .wrap {
	display: flex;
	justify-content: space-between;
	background: #fff;
	border-radius: 0.07rem;
	box-sizing: border-box;
	padding: 0.2rem 0.25rem;
	align-items: center;
	box-shadow: 0 0.02rem 0.12rem rgba(0,0,0,0.06);
	background-color: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
@media screen and (max-width: 640px) {
	header .wrap {
		border-radius: 0.06rem;
		padding: 0.15rem;
	}
}

header .wrap .logo_wrap {
	display: flex;
	align-items: center;
}
@media screen and (max-width: 640px) {
	header .wrap .logo_wrap {
		/* display: block;
		align-items: center; */
	}
}

header .wrap .logo {
	width: 2.1rem;
	padding-right: 0.1rem;
}
@media screen and (max-width: 640px) {
	header .wrap .logo {
		width: 1.6rem;
		padding-right: 0.1rem;
	}
}

header .wrap .jigyo {
	font-size: 0.12rem;
	font-weight: bold;
	color: #044BB7;
}
@media screen and (max-width: 640px) {
	header .wrap .jigyo {
		font-size: 0.09rem;
		display: block;
		letter-spacing: 0;
	}
}

@media screen and (max-width: 640px) {
	header .wrap .glo_navi {
		position: absolute;
		width: 100%;
		top: 0.50rem;
		left: 0;
		border-radius: 0 0 0.06rem 0.06rem;
		overflow: hidden;
		display: none;
	}
	header .wrap .glo_navi::before {
		content: "";
		width: 100%;
		height: 100%;
		background-color: rgb(4, 75, 183 , 0.95);
		/* background-color: rgba(0,0,0, 0.95); */
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(20px);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}
}

header .wrap .glo_navi .list {
	display: flex;
	gap: 0 0.4rem;
}
@media screen and (max-width: 640px) {
	header .wrap .glo_navi .list {
		display: block;
		padding: 0.15rem 0.20rem 0.20rem;
		position: relative;
		z-index: 1;
	}
}

header .wrap .glo_navi .list a {
	color: #000;
	font-family: "Inter Tight", serif;
	font-size: 0.14rem;
	font-weight: bold;
}
@media screen and (max-width: 640px) {
	header .wrap .glo_navi .list a {
		color: #FFF;
		display: block;
		font-size: 0.15rem;
		line-height: 2.5;
	}
	header .wrap .glo_navi .list a::before {
		content: "";
		width: 0.08rem;
		height: 1px;
		background-color: #FFF;
		display: inline-block;
		position: relative;
		margin-right: 0.10rem;
		top: -0.05rem;
		opacity: 0.5;
	}
}

header .wrap .glo_navi .list a:hover {
	color: #044BB7;
}

#SPnaviBtn {
	right: 0.10rem;
}
#SPnaviBtn.menu-trigger span:nth-of-type(1) {
	top: 35%;
}
#SPnaviBtn.menu-trigger.active span:nth-of-type(1) {
	top: calc(50% - 1px);
}
#SPnaviBtn.menu-trigger span:nth-of-type(3) {
	bottom: 35%;
}
#SPnaviBtn.menu-trigger.active span:nth-of-type(3) {
	bottom: 50%;
}

/*============================
オープニング
============================*/
.p-opening{
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-opening__logo {
  color: #fff;
  font-size: 50px;
  display: block;
  z-index: 1;
  position: absolute;
  top: 50%;
	transform: translateY(-50%);
}

.p-opening__mask{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top right;
  background-color: #DEEBF5;
  z-index: 1;
}
/*============================
mv
============================*/
#mv {
	padding-top: 2.5rem;
	padding-bottom: 2rem;
	background: url(../img/mv.jpg) no-repeat center;
	background-size: cover;
	text-align: center;
}
@media screen and (max-width: 640px) {
	#mv {
		padding-top: 1.5rem;
		padding-bottom: 1rem;
	}
}

#mv .in {
	position: relative;
  clip-path: inset(0 100% 0 0);
  overflow: hidden;
  /* margin-right: calc(50% - 50vw); */
}

#mv .title {
	font-size: 0.7rem;
	font-weight: bold;
	color: #044BB7;
	line-height: 1.2;
	margin-bottom: 0.2rem;
	


}
@media screen and (max-width: 640px) {
	#mv .title {
		font-size: 9.6vw;
		letter-spacing: 0;
		margin: 0 -0.20rem 0.20rem;
	}
}

#mv .lead {
	font-size: 0.36rem;
	font-weight: 300;
	letter-spacing: 0.1em;
	line-height: 1.47;
	margin-bottom: 0.3rem;
}
@media screen and (max-width: 640px) {
	#mv .lead {
		font-size: 0.22rem;
		letter-spacing: 0.05em;
		margin-bottom: 0.2rem;
	}
}

#mv .text {
	font-size: 0.16rem;
	font-weight: 400;
	line-height: 1.7;
}
@media screen and (max-width: 640px) {
	#mv .text {
		font-size: 0.14rem;
	}
}

/*============================
mission
============================*/
#mission {
	padding: 1.1rem 0;
	background: url(../img/mission_bg.jpg) no-repeat center;
	background-size: cover;
	color: #fff;
	text-align: center;
}
@media screen and (max-width: 640px) {
	#mission {
		padding: 0.6rem 0;
	}
}

#mission .sec_title::after{
	background: #fff;
}

#mission .lead {
	font-size: 0.30rem;
	font-weight: bold;
	line-height: 1.5;
	margin-bottom: 0.30rem;
}
@media screen and (max-width: 640px) {
	#mission .lead {
		font-size: 0.2rem;
		line-height: 1.75;
		margin-bottom: 0.20rem;
	}
}

#mission .text {
	font-size: 0.16rem;
	line-height: 2;
}
@media screen and (max-width: 640px) {
	#mission .text {
		font-size: 0.14rem;
		line-height: 2;
		text-align: justify;
		padding: 0 0.10rem;
	}
}

/*============================
FEATURE
============================*/
#feature {
	background: #DEEBF5;
	padding: 1.1rem 0 2rem;
}
@media screen and (max-width: 640px) {
	#feature {
		padding: 0.6rem 0 0.3rem;
	}
}

#feature .lead {
	text-align: center;
	font-size: 0.3rem;
	font-weight: 800;
	margin-bottom: 0.20rem;
}
@media screen and (max-width: 640px) {
	#feature .lead {
		font-size: 0.2rem;
	}
}

#feature .top_text {
	text-align: center;
	font-size: 0.2rem;
	font-weight: bold;
	margin-bottom: 0.85rem;
	line-height: 2;
}
@media screen and (max-width: 640px) {
	#feature .top_text {
		font-size: 0.15rem;
		letter-spacing: 0;
		margin-bottom: 0.40rem;
	}
}

#feature  {
	display: flex;
	gap: 0 0.40rem;
	justify-content: space-between;
	align-items: center;
}
@media screen and (max-width: 640px) {
	#feature {
		display: block;
	}
}

#feature  .img_box {
	width: 50%;
	position: relative;
}
@media screen and (max-width: 640px) {
	#feature  .img_box {
		width: 100%;
	}
}

#feature  .img_box .ph_wrap {
	position: sticky;
}
@media screen and (max-width: 640px) {
	#feature  .img_box .ph_wrap {
		position:relative;
	}
}

#feature  .text_box {
	width: 50%;
}
@media screen and (max-width: 640px) {
	#feature  .text_box {
		width: 100%;
	}
}

#feature  .text_wrap .en {
	font-family: "Inter Tight", serif;
	font-size: 0.14rem;
	font-weight: bold;
	color: #868686;
	margin-bottom: 0.1rem;
}
@media screen and (max-width: 640px) {
	#feature  .text_wrap .en {
		font-size: 0.12rem;
		text-align: center;
		margin-bottom: 0.10rem;
	}
}

#feature  .text_wrap .jp {
	font-size: 0.3rem;
	font-weight: 800;
	color: #044BB7;
	margin-bottom: 0.15rem;
}
@media screen and (max-width: 640px) {
	#feature  .text_wrap .jp {
		font-size: 0.20rem;
		text-align: center;
		line-height: 1.5;
		margin-bottom: 0.1rem;
	}
}

#feature  .text_wrap .text {
	font-size: 0.16rem;
	line-height: 2;
	margin-bottom: 0.2rem;
}
@media screen and (max-width: 640px) {
	#feature  .text_wrap .text {
		font-size: 0.14rem;
		text-align: justify;
	}
}

#feature  .text_wrap .list {
	background: #fff;
	padding: 0.18rem;
	box-sizing: border-box;
	border-radius: 0.05rem;
}
@media screen and (max-width: 640px) {
	#feature  .text_wrap .list {
		background: #fff;
		padding: 0.15rem 0.18rem;
		box-sizing: border-box;
		border-radius: 0.05rem;
		margin-bottom: 0.40rem;
	}
}

#feature  .text_wrap .list .item {
	font-size: 0.14rem;
	line-height: 1.5;
	padding-bottom: 0.05rem;
}
@media screen and (max-width: 640px) {
	#feature  .text_wrap .list .item {
		text-indent: -0.18rem;
		margin-left: 0.18rem;
	}
}

#feature  .text_wrap .list .item span {
	color: #01ABDE;
}







.wrap {
  position: relative;
  /* max-width: 1000px;
  margin-inline: auto;
  padding-inline: 60px;
  padding-block: 220px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 80px; */
	display: flex;
	gap: 0 0.40rem;
}
@media screen and (max-width: 640px) {
	.wrap {
		position: relative;
		/* max-width: 1000px;
		margin-inline: auto;
		padding-inline: 60px;
		padding-block: 220px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 80px; */
		display: block;
	}
}

.text-wrap > * + * {
  margin-top: 200px;
}
@media screen and (max-width: 640px) {
	.text-wrap > * + * {
		margin-top: 0.20rem;
	}
}

.text-wrap {
	width: 50%;
}
@media screen and (max-width: 640px) {
	.text-wrap {
		width: 100%;
	}
}

.text-body {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media screen and (max-width: 640px) {
	.text-body {
		gap: 0.20rem;
	}
}

.text-body h2 {
  font-size: 32px;
}

.img-wrap {
  position: relative;
	width: 50%;
}
@media screen and (max-width: 640px) {
	.img-wrap {
		position: relative;
		width: 100%;
	}
}
.img-wrap .img {
  position: sticky;
  top: 20%;
  opacity: 0;
  /* aspect-ratio: 4/3; */
	width: 100%;
	height: 4rem;
}
@media screen and (max-width: 640px) {
	.img-wrap .img {
		position: relative;
		top: 20%;
		opacity: 0;
		/* aspect-ratio: 4/3; */
		width: 100%;
		height: 4rem;
	}
}

.img-wrap .img img {
	width: 100%;
  height: 100%;
  object-fit: cover;
}

/*============================
PARTNER
============================*/
#partner {
	padding: 1rem 0;
}
@media screen and (max-width: 640px) {
	#partner {
		padding: 0.6rem 0;
	}
}

#partner .come {
	font-size: 0.20rem;
	font-weight: bold;
	text-align: center;
}

/*============================
セパレート画像
============================*/
/* #sepa .ph_wrap {
	width: 100%;
} */

#sepa {
	background: url(../img/separate_img.jpg) no-repeat center;
	background-size: cover;
	background-attachment: fixed;
	height: 4rem;

}
@media screen and (max-width: 640px) {
	#sepa {
		background-position: center;
		background-attachment: scroll;
		height: 2.4rem;
	
	}
		/* #sepa .ph_wrap {
		height: 50vw;
		overflow: hidden;
	}
	#sepa .ph_wrap img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	} */
}

/*============================
contact
============================*/
#contact {
	background: #F1F1F1;
	padding: 1.1rem 0;
}
@media screen and (max-width: 640px) {
	#contact {
		padding: 0.6rem 0;
	}
}

#contact .lead {
	font-size: 0.20rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.75;
}
@media screen and (max-width: 640px) {
	#contact .lead {
		font-size: 0.15rem;
	}
}

#contact .btn {
	text-align: center;
	margin-top: 0.7rem;
}
@media screen and (max-width: 640px) {
	#contact .btn {
		margin-top: 0.4rem;
	}
}

#contact .btn a {
	display: inline-block;
	width: 3.5rem;
	font-size: 0.20rem;
	font-weight: 700;
	color: #fff;
	background: #044BB7;
	border: 1px solid #044BB7;
	box-sizing: border-box;
	padding: 0.32rem 0 0.34rem;
	border-radius: 0.50rem;
	box-shadow: 0px 0px 15px -5px #777777;
	position: relative;
}
@media screen and (max-width: 640px) {
	#contact .btn a {
		width: calc(100% - 0.40rem);
		font-size: 0.18rem;
		padding: 0.20rem 0 0.22rem;
	}
}

#contact .btn a:hover {
	color: #044BB7;
	background: #fff;
}

#contact .btn a::after {
	content: '';
	display: block;
	width: 0.30rem;
	height: 1px;
	background: #fff;
	position: absolute;
	top: 50%;
	right: 0.22rem;
	transform: translateY(-50%);
	transition: all .3s;
}
@media screen and (max-width: 640px) {
	#contact .btn a::after {
		width: 0.20rem;
	}
}

#contact .btn a:hover::after {
	background: #044BB7;
	width: 0.22rem;
}
@media screen and (max-width: 640px) {
	#contact .btn a:hover::after {
		background-color: #044BB7;
		width: 0.20rem;
	}
}


/*============================
footer
============================*/
footer {
	background: #F1F1F1;
}

footer .copy {
	display: block;
	font-size: 0.11rem;
	font-family: "Inter Tight", serif;
}
@media screen and (max-width: 640px) {
	footer .copy {
		font-size: 0.10rem;
		padding-left: 0.10rem;
	}
}

footer .wrap {
	border-top: 1px solid #707070;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	flex-direction: row-reverse;
	box-sizing: border-box;
	padding: 0.30rem 0;
	align-items: center;
}
@media screen and (max-width: 640px) {
	footer .wrap {
		display: block;
	}
}

footer .wrap nav .list {
	display: flex;
	gap: 0 0.4rem;
}

@media screen and (max-width: 640px) {
	footer .wrap nav .list {
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 0.10rem 0;
		padding: 0 0.10rem 0.30rem;
	}
	footer .wrap nav .list .item {
		width: 50%;
	}
}

footer .wrap nav .list .item a {
	font-size: 0.14rem;
	font-weight: bold;
	line-height: 2;
	color: #000;
	font-family: "Inter Tight", serif;
}
@media screen and (max-width: 640px) {
	footer .wrap nav .list .item a::before {
		content: "";
		width: 0.07rem;
		height: 2px;
		background-color: #044BB7;
		display: inline-block;
		margin-right: 0.06rem;
		position: relative;
		top: -0.05rem;
	}
}

footer .wrap nav .list .item a:hover {
	color: #044BB7;
}

@media screen and (max-width: 640px) {
	#page_top {
			bottom: 0.10rem;
			right: 0.10rem;
	}
}