@charset "utf-8";
/* ===================================================================
     BASE CSS
=================================================================== */
/* global */
:root {
	--font-family-notosans: "Noto Sans JP", sans-serif;
	--font-family-ZenMaruGothic: "Zen Maru Gothic", sans-serif;
	--color-forest-text: #435e49;
	--color-forest-enText: #79a089;
	--color-forest-bg: #e5e8e1;
	--color-forest-deco: #8ba68e;
	--color-forest-btn: #9ac590;
	--color-sea-text: #496A88;
	--color-sea-enText: #7DA6B5;
	--color-sea-bg: #CFE3EB;
	--color-sea-deco: #8ba68e;
	--color-sea-btn: #7DA6B5;
}
html {
	font-size: 62.5%;
}
body {
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	color: #2c2d2d;
	font-size: 150%;
	font-family: var(--font-family-ZenMaruGothic);
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 0.05em;
	font-feature-settings: "palt";
	position: relative;
}
a {
	color: #2c2d2d;
	text-decoration: none;
	transition: opacity .3s ease-in-out;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
body {
}
}
@media screen and (max-width: 767px) {
body {
	font-size: 140%;
	line-height: 1.6;
}
}

/* = Selected Text
----------------------------------------------- */
::selection {
	background:#F4B17F; /* Safari */
}
::-moz-selection {
	background:#F4B17F; /* Firefox */
}

/* -----------------------------------------------------------
	汎用
----------------------------------------------------------- */
.fadein,
.fadein_journey {
	opacity: 0;
	filter: blur(6px);
}
.opfadein {
	opacity: 0;
	filter: blur(6px);
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
}
@media screen and (max-width: 767px) {
}

/* -----------------------------------------------------------
	keyframes
----------------------------------------------------------- */
@keyframes sway-front {
  0% { transform: translateX(0); }
  100% { transform: translateX(-140px); } /* 150pxだけずらす */
}

/* 奥の波のキーフレーム */
@keyframes sway-back {
  0% { transform: translateX(0); }
  100% { transform: translateX(290px); } /* 300px大きくずらす */
}

/* -----------------------------------------------------------
	waraper / bg_wrap
----------------------------------------------------------- */
.waraper {
	/*overflow: hidden;*/
}
.bg_wrap {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100vh;
	background: #d4f0ff;
	z-index: -1;
}
.bg_wrap .cloud {
	position: absolute;
	width: 1285px;
    height: 85px;
    top: 35px;
    left: 50%;
	transform: translateX(-50%);
}
.bg_wrap .name {
	position: absolute;
	width: 46px;
    height: 495px;
}
.bg_wrap .name._sty_1 {
    top: 2px;
    left: -2px;
}
.bg_wrap .name._sty_2 {
    bottom: 6px;
    right: -2px;
	transform: rotate(180deg);
}
.bg_wrap .wave {
	width: 100%;
	height: 104px;
	position: absolute;
	left: 0;
	bottom: 0;
	overflow: hidden;
}
.bg_wrap .wave-layer {
	position: absolute;
	width: 200%;
	height: 100%;
	bottom: 0;
	background-repeat: repeat-x;
	background-position: 0 bottom;
}
.bg_wrap .wave-layer._front {
	background-image: url('../img/bg_wrap_wave_front.svg');
	background-size: 1440px 104px;
	animation: sway-front 7s ease-in-out infinite alternate;
	left: 0;
}
.bg_wrap .wave-layer._back {
	background-image: url('../img/bg_wrap_wave_back.svg');
	background-size: 1440px 104px;
	animation: sway-back 11s ease-in-out -2s infinite alternate;
	right: 0;
}
.sublogo {
	max-width: 202px;
	position: absolute;
	top: 50%;
	left: calc((50vw - 219px) / 2);
	transform: translate(-50%, -50%);
	transition: all .5s ease-in-out;
	
	opacity: 0;
  visibility: hidden;
}
.sublogo.active {
	opacity: 1;
  visibility: visible;
}
@media (max-width: 1001px) {
.sublogo {
	display: none;
}
}
.waraper_inner {
	width: 100%;
	margin: 0 auto;
	position: relative;
}
.main_waraper {
	max-width: 438px;
	/*max-width: 562.5px;*/
	/*max-width: 375px;*/
	margin: 0 auto;
	background: #fff;
	border-left: 3px solid #004196;
	border-right: 3px solid #004196;
	container-type: inline-size;
	container-name: mainWaraper;
	position: relative;
	z-index: 11;
}
.main_waraper.active {
	z-index: 9;
}
.main_content {
	font-size: 13px;
	font-size: 3.466666667cqw;
}
@media screen and (max-width: 767px) {
.bg_wrap {
	display: none;
}
.main_waraper {
	max-width: 100%;
	border: none;
}
}

/* -----------------------------------------------------------
	header
----------------------------------------------------------- */
header {
	/*max-width: 1180px;*/
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	/*right: calc(50% + 590px);*/
	z-index: 11;
	transition: all .5s ease-in-out;
}
header .header_inner {
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
header {
	
}
header .header_inner {
	
}
}
@media screen and (max-width: 767px) {
header {
	top: 0;
}
}

/* -----------------------------------------------------------
	nav
----------------------------------------------------------- */
.menu_trigger {
	width: 18.4vw;
    height: 18.4vw;
    position: fixed;
	top: 1.8cqw;
	left: calc(50% + 219px - 1.8vw);
	transform: translateX(-100%) translateZ(0);
	transition: all .5s ease-in-out;
	display: none;
	z-index: 13;
	cursor: pointer;
}
.menu_trigger button {
	transition: all .5s ease-in-out;
}
.menu_trigger button:hover {
	transform: scale(1.1);
	transition: transform .3s cubic-bezier(0.65, 1.8, 0.5, 0.8) 0s, opacity .3s cubic-bezier(0.55, 0.05, 0.22, 0.99) 0s;
}
.menu_trigger.active {
	display: none;
}
.menu_trigger.active button:hover {
	opacity: 0;
}
.g_nav_cover {
	width: 100vw;
	height: 100dvh;
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0;
	visibility: hidden;
	background-color: rgba(255, 255, 255, 0.9);
	transition: opacity 0.3s;
}
.g_nav_cover.active {
	opacity: 1;
	visibility: visible;
}
.g_nav {
	width: 100%;
	max-width: 184px;
	position: absolute;
	top: 50%;
	right: calc((50vw - 219px) / 2);
	left: auto;
	transform: translate(50%, -50%);
	pointer-events: none;
}
.g_nav.active {
	visibility: visible;
    opacity: 1;
}
.g_nav .nav_area {
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: auto;
}
.g_nav .nav_area .nav_ttl {
	max-width: 142px;
	margin: 0 auto 38px;
}
.g_nav .nav_area .header_nav_list {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	gap: 22px;
}
.g_nav .nav_area .header_nav_list > li a {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 35px;
	text-align: center;
	box-sizing: border-box;
	border-radius: 50px;
	color: #ffffff;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0;
	background-color: #ff6600;
	z-index: 1;
	transition: all 0.1s;
	transform-style: preserve-3d;
}
.g_nav .nav_area .header_nav_list > li a::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	border: 1.5px solid #f56400;
	border-radius: 50px;
	z-index: -1;
	transform: translate(3px, 5px) translateZ(-1px);
	box-sizing: border-box;
	opacity: 1;
	transition: all 0.1s;
}
.g_nav .nav_area .header_nav_list > li:nth-child(2n) a {
	background-color: #004196;
}
.g_nav .nav_area .header_nav_list > li:nth-child(2n) a::after {
	border: 1.5px solid #004196;
}
.g_nav .nav_area .header_nav_list > li a:hover {
	transform: translate(3px, 5px);
}
.g_nav .nav_area .header_nav_list > li a:hover::after {
	opacity: 0;
}
.g_nav .nav_area .header_nav_list > li.nav_program a {
	letter-spacing: -0.07em;
}
.close_trigger {
	width: 18.4cqw;
    height: 18.4cqw;
	position: absolute;
    right: 1cqw;
    top: 1.5cqw;
	z-index: 1;
	opacity: 0;
    visibility: hidden;
	display: none;
}
.close_trigger button {
	transition: opacity .3s ease-in-out;
}
.close_trigger {
	visibility: visible;
    opacity: 1;
}
@media screen and (max-width: 1001px) {
.menu_trigger {
	display: block;
	max-width: 79.486px;
        max-height: 79.486px;
        top: 7.776px;
        left: calc(50% + 219px - 0.8vw);
}
.g_nav {
	visibility: hidden;
	opacity: 0;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	max-width: 438px;
	container-type: inline-size;
	display: flex;
	justify-content: center;
	align-items: center;
}
.g_nav .nav_area {
	width: 57.93cqw;
}
.g_nav .nav_area .nav_ttl {
	width: 22.89cqw;
	margin-bottom: 9cqw;
}
.g_nav .nav_area .header_nav_list {
	gap: 5.5cqw;
}
.g_nav .nav_area .header_nav_list > li a {
	font-size: 5.2cqw;	
	height: 9.16cqw;
}
.close_trigger {
    width: 18.4cqw;
    height: 18.4cqw;
    max-width: 79.486px;
    max-height: 79.486px;
    top: 7.776px;
    left: calc(50% + 219px - 1.8cqw);
    transform: translateX(-100%);
    transition: all .5s ease-in-out;
    z-index: 2;
    cursor: pointer;
	display: block;
}
}
@media screen and (max-width: 767px) {
.g_nav_cover {
	width: 100%;
}
.g_nav {
	max-width: 100%;
}
.close_trigger {
    width: 18.4cqw;
    height: 18.4cqw;
    max-width: 100%;
    max-height: 100%;
    top: 1.5cqw;
	left: auto;
	right: 1cqw;
    transform: none;
}
.menu_trigger {
	top: 1.5vw;
	left: auto;
	right: 1vw;
	transform: none;
	max-width: 100%;
	max-height: 100%;
}
.main_waraper {
	max-width: 100%;
	border: none;
}
}



/* -----------------------------------------------------------
	footer
----------------------------------------------------------- */
footer {
	background: #fff;
	display: flex;
    justify-content: center;
    align-items: center;
	height: 10.67cqw;
}
footer .footer_text {
	width: 50.13cqw;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
}
@media screen and (max-width: 767px) {

}


/* -----------------------------------------------------------
	efect
----------------------------------------------------------- */
.ef_sl {
	position: relative;
	/*overflow-x: hidden;*/
	overflow: hidden;
}
.ef_sl:before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   right: 0;
   top: 0;
   z-index: 1;
   background-color: #111;
   -webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
   -moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
   -o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
   transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
   -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
   -moz-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
   -o-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
   transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
   -webkit-transition-delay: .2s;
   -moz-transition-delay: .2s;
   -ms-transition-delay: .2s;
   -o-transition-delay: .2s;
   transition-delay: .2s;
}
.ef_sl:after {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   right: 0;
   top: 0;
   background-color: #fff;
   z-index: 2;
   -webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
   -moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
   -o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
   transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
   -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
   -moz-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
   -o-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
   transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}
.ef_sl.sc_active::before,
.ef_sl.sc_active::after  {
	right: -100%;
}
.ef_su {
	opacity: 0;
	transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
	transform: translateY(80px);
}
.ef_su.sc_active {
	opacity: 1;
	transform: translateY(0px);
	transform: translate3d(0,0,0);
}
.ef_sr {
	opacity: 0;
	transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
	transform: translateX(-80px);
}
.ef_sr.sc_active {
	opacity: 1;
	transform: translateX(0px);
	transform: translate3d(0,0,0);
}
.open_fadein {
	animation: open_fadein 0.5s ease 1s 1 forwards;
	transform: translate3d(0,0,0);
	transform: translateX(-80px);
	opacity: 0;
}
@keyframes open_fadein {
100% {
    opacity: 1;
    transform: translateX(0);
}
}