@charset "UTF-8";

/*reset*/
/*-------------------------------------------------------*/
article,aside,figure,figcaption,footer,header,nav,section,main{ display: block; }
small{ font-size: inherit; line-height: inherit; }
body,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,div,figure,figcaption{ margin: 0; padding: 0; font-size: 100%; line-height: 1.5; }
ul,li,ol{ list-style: none; margin: 0; padding: 0; }
button{ background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; }
a img{ border: none; }
a{ color: #2d48d2; }
img{ vertical-align: bottom; max-width: 100%; height: auto; }
html{ font-size: 16px; line-height: 1.75; }
html,body,p,div{
	color: #004831;
	font-family: 'YakuHanJP', "Noto Sans JP", sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

@media screen and (max-width: 1360px) {
	html{ font-size: 1.1764vw; }
}
@media screen and (max-width: 767.5px) {
	html{ font-size: 3.7333vw; }
	img{ width: 100%; }
}




/*common*/
/*-------------------------------------------------------*/
.pc{ display: block; }
span.pc{ display: inline; }
.sp{ display: none; }
#wrapper{ max-width: 1360px; margin: 0 auto; position: relative; }
#wrapper .bg-overlay{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/common/bg01.webp) center center repeat; background-size: 250px; z-index: -1; }
#wrapper .bg-deco01{ position: absolute; left: 0; top: 0; width: 62.3529%; z-index: -50; margin: -32.5486% 0 0 -21.6135%; }
#header{ position: absolute; max-width: 1360px; width: 100%; z-index: 2000; left: 50%; transform: translateX(-50%); }
#header .logo{ position: absolute; left: 0; top: 0; margin: 1.9117% 0 0 2.5735%; width: 20.5882%; }
#header .menu-board .menu-logo{ display: none; }
#header .global-navi{ display: flex; display: -ms-flex; position: absolute; right: 0; top: 0; margin: 2.7941% 3.8235% 0 0; }
#header .global-navi .navi:nth-child(n+2){ margin-left: 25px; }
#header .global-navi .navi a{ display: block; font-size: 1.125rem; color: #004831; font-weight: 500; text-decoration: none; position: relative; }
#header .global-navi .navi a::before{ content: ""; position: absolute; left: 0; top: 100%; width: 100%; height: 2px; background: linear-gradient(to left, #00b9ef 0%, #ffcd00 100%); }
#header .global-navi .navi a .icon{ display: inline-block; vertical-align: middle; line-height: 0; margin-right: 0.2em; }
#footer{ position: relative; padding: 8.8235% 5% 0; }
#footer .split-view{ display: flex; display: -ms-flex; align-content: center; justify-content: space-between; }
#footer .split-view .item{ display: flex; display: -ms-flex; align-items: center; justify-content: space-between; }
#footer .split-view .item01{ width: 31.0457%; }
#footer .split-view .item02{ width: 35.7026%; }
#footer .split-view .item .logo01{ width: 100%; }
#footer .split-view .item .logo02{ width: 51.4874%; }
#footer .split-view .item .logo03{ width: 40.0457%; }
#footer .end-util{ padding: 3.2679% 0; display: flex; display: -ms-flex; justify-content: flex-end; }
#footer .end-util .navi{ margin-right: 2.9411%; }
#footer .end-util .navi a{ display: block; font-size: 0.875rem; color: #004831; }
#footer .end-util .copyright{ font-size: 0.875rem; }

@media screen and (max-width: 767.5px) {
	.pc{ display: none; }
	.sp{ display: block; }
	span.sp{ display: inline; }
	#wrapper .bg-deco01{ width: 107.1527%; margin: -51.5710% 0 0 -33.2881%; }
	#header{ position: absolute; width: 100%; left: 0; transform: none; }
	#header .logo{ margin: 4.2548% 0 0 4.9890%; width: 50.4721%; }
	#header .menu-btn{ width: 12.5333%; padding-top: 12.5333%; background-color: rgba(255,255,255,0); position: fixed; right: 0; top: 0; margin: 2.4% 3.4666% 0 0; cursor: pointer; z-index: 2000; }
	#header .menu-btn::before,
	#header .menu-btn::after{ content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); box-sizing: border-box; width: 74.4681%; }
	#header .menu-btn::before{ height: 38.2979%; border: solid #004831; border-width: 2px 0; }
	#header .menu-btn::after{ height: 2px; background-color: #004831; }
	#header .menu-btn.active::before{ height: 2px; background-color: #004831; border: none; transform: translate(-50%,-50%) rotate(45deg); }
	#header .menu-btn.active::after{ transform: translate(-50%,-50%) rotate(-45deg); }
	#header .menu-board{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; }
	#header .menu-board .overlay{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); }
	#header .menu-board .board-body{ width: 59.2%; box-sizing: border-box; padding: 13.3333% 0 16%; margin-left: auto; overflow-y: scroll; max-height: 100%; background: url(../images/common/bg01.webp) center center repeat #ffffff; background-size: 250px; border-radius: 0 0 0 5.3333vw; }
	#header .menu-board .menu-logo{ width: 49.5495%; margin: 0 auto; display: block; }
	#header .global-navi{ display: block; position: relative; right: auto; top: auto; margin: 9.3333vw auto 0; width: 56.3063%; }
	#header .global-navi .navi:nth-child(n+2){ margin-left: 0; margin-top: 5.3333vw; }
	#header .global-navi .navi a{ font-size: 1.1428rem; }
	#header .global-navi .navi a::before{ height: 0.5333vw; }
	#header .global-navi .navi a .icon{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 15.5172%; margin: 0; }
	#header .global-navi .navi a .icon-arrow{ position: absolute; right: 0; top: 50%; width: 15.5172%; padding-top: 15.5172%; background-color: #004831; border-radius: 50%; transform: translateY(-50%); }
	#header .global-navi .navi a .icon-arrow .arrow{ position: absolute; left: 50%; top: 50%; width: 53.8462%; height: 1px; transform: translate(-50%,-50%); }
	#header .global-navi .navi a .icon-arrow .arrow::before{ content: ""; position: absolute; left: 0; top: 50%; width: 80%; height: 100%; background-color: #ffffff; transform: translateY(-50%); }
	#header .global-navi .navi a .icon-arrow .arrow::after{ content: ""; position: absolute; right: 0; top: 50%; border: solid #ffffff; border-width: 1px 1px 0 0; width: 60%; padding-top: 60%; transform: translate(-10%,-50%) rotate(45deg); }
	#footer{ padding: 21.3333% 0 0; }
	#footer .split-view{ display: block; }
	#footer .split-view .item01{ width: 61.3333%; margin: 0 auto; }
	#footer .split-view .item02{ width: 76.1621%; margin: 10.6666% auto 0; }
	#footer .split-view .item .logo02{ width: 50.7688%; }
	#footer .split-view .item .logo03{ width: 40.6151%; }
	#footer .end-util{ padding: 10.6666% 0; display: block; text-align: center; }
	#footer .end-util .navi{ margin: 0 0 3%; }
	#footer .end-util .navi a{ font-size: 1rem; }
	#footer .copyright{ font-size: 1rem; }
}





/*modal*/
/*-------------------------------------------------------*/
.iziModal{ background-color: transparent; box-shadow: none; }
.iziModal-wrap{ z-index: 10; }
.iziModal-content *{ -webkit-font-smoothing: subpixel-antialiased; }
.iziModal-content{ position: relative; }
.modal-view{ max-width: none!important; border-radius: 0!important; z-index: 8000!important; }
.modal-view img{ max-width: 100%; height: auto; line-height: 0; vertical-align: middle; }
.iziModal-overlay{ z-index: 7998!important; }
.iziModal.hasShadow::after{ z-index: 8100; }
#modal-contact{ display: none; }
#modal-contact .modal-frame{ width: 100%; padding: 75px 0 40px; margin: 0 auto; position: relative; }
#modal-contact .modal-frame .close-btn{ position: absolute; right: 50%; top: 0; width: 64px; padding-top: 64px; background-color: #004831; border-radius: 50%; margin-top: 5px; margin-right: -340px; }
#modal-contact .modal-frame .close-btn .icon{ position: absolute; left: 50%; top: 50%; width: 65.625%; padding-top: 65.625%; transform: translate(-50%,-50%); }
#modal-contact .modal-frame .close-btn .icon::before,
#modal-contact .modal-frame .close-btn .icon::after{ content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 1px; background-color: #ffffff; }
#modal-contact .modal-frame .close-btn .icon::before{ transform: translate(-50%,-50%) rotate(45deg); }
#modal-contact .modal-frame .close-btn .icon::after{ transform: translate(-50%,-50%) rotate(-45deg); }
#modal-contact .modal-frame .contact-body{ width: 544px; background-color: #ebece1; margin: 0 auto; text-align: center; padding: 50px 0 40px; border-radius: 30px; }
#modal-contact .modal-frame .contact-body .head{ font-size: 1.625rem; line-height: 1.5; font-weight: 500; }
#modal-contact .modal-frame .contact-body .txt{ font-size: 1rem; line-height: 1.75; margin-top: 3.6765%; }
#modal-contact .modal-frame .contact-body .policy-body{ background-color: #ffffff; border-radius: 10px; width: 75%; margin: 3.6765% auto 0; padding: 3.6765% 0; }
#modal-contact .modal-frame .contact-body .policy-body .policy-link{ font-size: 1rem; line-height: 1.75; color: #004831; }
#modal-contact .modal-frame .contact-body .policy-body .agreement-body{ margin-top: 3.6765%; }
#modal-contact .modal-frame .contact-body .policy-body .agreement-body label{ cursor: pointer; }
#modal-contact .modal-frame .contact-body .policy-body .agreement-body .word{ font-size: 1.125rem; line-height: 1.5; font-weight: 500; padding-left: 0.5em; }
#modal-contact .modal-frame .contact-body .navi{ width: 45.9559%; margin: 3.6765% auto 0; }
#modal-contact .modal-frame .contact-body .navi a{ display: block; text-decoration: none; border-radius: 25px; position: relative; padding-top: 50px; overflow: hidden; }
#modal-contact .modal-frame .contact-body .navi a .word{ font-size: 1.25rem; line-height: 1.5; color: #ffffff; font-weight: 500; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; }

@media screen and (max-width: 1360px) {
	#modal-contact .modal-frame{ padding: 5.5147vw 0 2.9411vw; }
	#modal-contact .modal-frame .close-btn{ width: 4.7058vw; padding-top: 4.7058vw; margin-top: 0.3676vw; margin-right: -25vw; }
	#modal-contact .modal-frame .contact-body{ width: 40vw; padding: 3.6764vw 0 2.9411vw; border-radius: 2.2058vw; }
	#modal-contact .modal-frame .contact-body .navi a{ border-radius: 1.8382vw; padding-top: 3.6764vw; }
}
@media screen and (max-width: 767.5px) {
#modal-contact .modal-frame{ padding: 14.6666% 0 10.6666%; }
#modal-contact .modal-frame .close-btn{ right: 0; width: 10.6666%; padding-top: 10.6666%; margin-top: 0; margin-right: 1.8666%; }
#modal-contact .modal-frame .contact-body{ width: 88%; padding: 10.6666% 0; border-radius: 5.3333vw; }
#modal-contact .modal-frame .contact-body .head{ font-size: 1.4285rem; }
#modal-contact .modal-frame .contact-body .txt{ font-size: 1.1428rem; margin-top: 4%; }
#modal-contact .modal-frame .contact-body .policy-body{ border-radius: 2.6666vw; width: 89.3939%; margin: 6.0606% auto 0; padding: 4% 0; }
#modal-contact .modal-frame .contact-body .policy-body .policy-link{ font-size: 1.1428rem; }
#modal-contact .modal-frame .contact-body .policy-body .agreement-body .word{ font-size: 1.2857rem; }
#modal-contact .modal-frame .contact-body .navi{ width: 75.7575%; margin: 6.0606% auto 0; }
#modal-contact .modal-frame .contact-body .navi a{ border-radius: 6.6666vw; padding-top: 20%; }
#modal-contact .modal-frame .contact-body .navi a .word{ font-size: 1.4285rem; }
}







/*animation*/
/*-------------------------------------------------------*/
#header .global-navi .navi a::before{ transform: scaleX(0); transition: transform 0.2s; transform-origin: right 0; }
#header .global-navi .navi.current-page a::before{ transform: scaleX(1)!important; }
#modal-contact .modal-frame .contact-body .navi a{ background-color: #cdcfb4; pointer-events: none; transition: background-color 0.5s; }
#modal-contact .modal-frame .contact-body .navi.active a{ background-color: #004831; pointer-events: auto; }
@media screen and (max-width: 767.5px) {
	#header .menu-board{ pointer-events: none; }
	#header .menu-btn.active+.menu-board{ pointer-events: auto; }
	#header .menu-board .overlay{ opacity: 0; transition: opacity 0.5s; }
	#header .menu-btn.active+.menu-board .overlay{ opacity: 1; }
	#header .menu-board .board-body{ transform: translateX(100%); transition: transform 0.5s; }
	#header .menu-btn.active+.menu-board .board-body{ transform: translateX(0); }
}







/*hover*/
/*-------------------------------------------------------*/
#header .global-navi .navi a:active::before{ transform: scaleX(1); transform-origin: 0 0; }
#modal-contact .modal-frame .close-btn::before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #c4d700; transform: scale(0); transition: transform 0.6s cubic-bezier(.23, 1, .32, 1); border-radius: 50%; }
#modal-contact .modal-frame .close-btn:active::before{ transform: scale(1); }
#modal-contact .modal-frame .contact-body .navi.active a::before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #c4d700; transform: scaleX(0); transition: transform 0.6s cubic-bezier(.23, 1, .32, 1); transform-origin: right 0; }
#modal-contact .modal-frame .contact-body .navi.active a:active::before{ transform: scaleX(1); transform-origin: 0 0; }
@media (hover: hover){
	#header .global-navi .navi a:hover::before{ transform: scaleX(1); transform-origin: 0 0; }
	#modal-contact .modal-frame .close-btn:hover::before{ transform: scale(1); }
	#modal-contact .modal-frame .contact-body .navi.active a:hover::before{ transform: scaleX(1); transform-origin: 0 0; }
}