@charset "UTF-8";
/* =base
------------------------------------------------------------------------------------------*/
* { box-sizing: border-box; }

html.html_clear { margin: 0 !important; padding: 0 !important; }

body { height: 100%; overflow-y: scroll; background-color: #fff; text-align: center; color: #000; font-family: YakuHanJP, 'Noto Sans JP', "メイリオ","Meiryo","MS PGothic",sans-serif; font-size: 14px; line-height: 1.5em; background-image: url("../images/svg/bg.svg"); background-size: 100%; background-repeat: no-repeat; background-position: -200px -300px; background-attachment: fixed; }

main { overflow: hidden; }

a { color: #FF60D4; text-decoration: none; outline: none; }
a:hover { text-decoration: none; }

img { vertical-align: bottom; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

.scroller { padding-top: 200vh; }

/* =change
------------------------------------------------------------------------------------------*/
.pc_only { display: block; }

.sp_only { display: none !important; }

@media only screen and (max-width: 769px) { .pc_only { display: none !important; }
  .sp_only { display: block !important; } }
/* =op anime
------------------------------------------------------------------------------------------*/
.op_anim { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: linear-gradient(0deg, #046eff 0%, #9c58f8 35%, #ff81a1 100%); z-index: 20000; -webkit-transition: 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955); pointer-events: none; opacity: 1; }
.op_anim.open { opacity: 0; }
.op_anim .center_box { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: min(300px, 70%); height: auto; }
.op_anim .center_box .mark { position: relative; width: min(100px, 30vw); height: min(100px, 30vw); margin: 0 auto min(50px, 17vw); }
.op_anim .center_box .mark img { width: 100%; height: auto; -webkit-animation: 20s linear infinite rotation3; animation: 20s linear infinite rotation3; }
.op_anim .center_box .bar { width: 100%; height: 6px; }
.op_anim .center_box .bar .bar_inner { position: relative; width: 100%; height: 100%; background: #4465fc; overflow: hidden; border-radius: 10px; }
.op_anim .center_box .bar .bar_inner .progress.domload.onload { width: 100%; -webkit-transition: 0.5s cubic-bezier(0.87, 0, 0.13, 1); transition: 0.5s cubic-bezier(0.87, 0, 0.13, 1); }
.op_anim .center_box .bar .bar_inner .progress.domload { width: 60%; }
.op_anim .center_box .bar .bar_inner .progress { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background-color: #fff; -webkit-transition: 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955); }

/* =header
------------------------------------------------------------------------------------------*/
header .header_logo { position: fixed; top: 30px; left: calc(50% - 60px); width: 120px; transition: 0.2s; z-index: 100; }
header .header_logo h1 img { width: 100%; }
header .header_logo:hover { transform: translateY(-2px); }
header .header_logo.top_header_logo { opacity: 0; pointer-events: none; transition: 0.2s; }
header .header_logo.top_header_logo.scroll_in { opacity: 1; pointer-events: inherit; }
header .sns_icon { position: fixed; top: 24px; right: 30px; width: 30px; z-index: 100; }
header .sns_icon img { width: 100%; }

@media only screen and (max-width: 769px) { header .header_logo { top: 20px; left: calc(50% - 45px); width: 90px; }
  header .header_logo.top_header_logo { opacity: 1; }
  header .sns_icon { width: 24px; top: 18px; right: 16px; } }
/*=============================
.nav_trigger
=============================*/
.nav_trigger_outer { display: block; position: fixed; top: 10px; left: 10px; width: 100px; height: 100px; z-index: 9999; transition: 0.4s cubic-bezier(0.87, 0, 0.13, 1); }
.nav_trigger_outer .nav_trigger { position: absolute; width: 40px; height: 32px; cursor: pointer; top: calc(24px); left: calc((100px - 40px)/2 + 1px); display: inline-block; transition: all .5s; }
.nav_trigger_outer .nav_trigger span { position: absolute; left: 0; width: 100%; height: 1px; background-color: #000; display: inline-block; transition: all .5s; border-radius: 10px; }
.nav_trigger_outer .nav_trigger span:nth-last-of-type(1) { top: 0; width: 100%; }
.nav_trigger_outer .nav_trigger span:nth-last-of-type(2) { opacity: 0; }
.nav_trigger_outer .nav_trigger span:nth-last-of-type(3) { top: 9px; width: 30px; }
.nav_trigger_outer .nav_trigger.active span:nth-last-of-type(1) { transform: translateY(6px) rotate(-315deg); background-color: #fff; }
.nav_trigger_outer .nav_trigger.active span:nth-last-of-type(2) { opacity: 0; background-color: #fff; }
.nav_trigger_outer .nav_trigger.active span:nth-last-of-type(3) { transform: translateY(-4px) rotate(315deg); width: 100%; background-color: #fff; }

@media only screen and (max-width: 769px) { .nav_trigger_outer { width: 52px; height: 52px; top: 5px; left: 5px; }
  .nav_trigger_outer .nav_trigger { width: 36px; height: 28px; top: 20px; left: 10px; }
  .nav_trigger_outer .nav_trigger span:nth-last-of-type(1) { top: 0; width: 100%; }
  .nav_trigger_outer .nav_trigger span:nth-last-of-type(2) { top: 12px; width: 100%; }
  .nav_trigger_outer .nav_trigger span:nth-last-of-type(3) { bottom: 0; width: 50%; }
  .nav_trigger_outer .nav_trigger.active span:nth-last-of-type(1) { transform: translateY(12px) rotate(-315deg); top: -8px; }
  .nav_trigger_outer .nav_trigger.active span:nth-last-of-type(2) { opacity: 0; }
  .nav_trigger_outer .nav_trigger.active span:nth-last-of-type(3) { transform: translateY(-12px) rotate(315deg); top: 15px; }
  .nav_trigger_outer::before { top: -8px; } }
/* =navi CSS
------------------------------------------------------------------------------------------*/
#gloval_nav { position: fixed; top: 0; right: 0; width: 100%; height: 100%; z-index: 9995; transition: 0.4s; opacity: 0; pointer-events: none; }
#gloval_nav .nav_header_logo { position: fixed; top: 30px; left: calc(50% - 60px); width: 120px; transition: 0.2s; z-index: 100; }
#gloval_nav .nav_header_logo img { width: 100%; }
#gloval_nav .nav_sns_icon { position: fixed; top: 24px; right: 30px; width: 30px; z-index: 100; }
#gloval_nav .nav_sns_icon img { width: 100%; }
#gloval_nav nav { position: absolute; top: 0; left: 0; width: 50%; height: 100vh; background-color: #046eff; z-index: 20; }
#gloval_nav nav::before { content: ""; position: absolute; background-image: url("../images/svg/star_nomal.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; width: 200px; height: 80px; left: 16%; bottom: 5%; }
#gloval_nav nav::after { content: ""; position: absolute; background-color: #fff; height: 1px; width: calc(76% - 200px); left: calc(16% + 220px); bottom: calc(5% + 40px); }
#gloval_nav nav ul { position: absolute; top: 50%; left: 16%; transform: translateY(-50%); }
#gloval_nav nav ul li { transition: 0.4s; transform: translateY(-50px); opacity: 0; margin-bottom: min(60px, calc( 100vw * 1 / 8 )); }
#gloval_nav nav ul li:last-of-type { margin-bottom: 0; }
#gloval_nav nav ul li a { display: block; text-align: left; transition: 0.2s; color: #fff; font-family: "Syne", "Noto Sans JP", serif; font-size: 36px; font-weight: bold; line-height: 1em; }
#gloval_nav nav ul li a:hover { transform: translateY(-3px); }
#gloval_nav nav ul li a img { height: calc( 100vw * 1 / 7.3 ); max-height: min(70px, 9vh); }
#gloval_nav nav ul li a img.top { transform: scale(1.2); }
#gloval_nav nav ul li a img.info { transform: translateX(10%); }
#gloval_nav nav ul li:nth-of-type(1) { transition-delay: calc(1* 0.06s); }
#gloval_nav nav ul li:nth-of-type(2) { transition-delay: calc(2* 0.06s); }
#gloval_nav nav ul li:nth-of-type(3) { transition-delay: calc(3* 0.06s); }
#gloval_nav nav ul li:nth-of-type(4) { transition-delay: calc(4* 0.06s); }
#gloval_nav nav ul li:nth-of-type(5) { transition-delay: calc(5* 0.06s); }
#gloval_nav nav ul li:nth-of-type(6) { transition-delay: calc(6* 0.06s); }
#gloval_nav nav ul li:nth-of-type(7) { transition-delay: calc(7* 0.06s); }
#gloval_nav nav ul li:nth-of-type(8) { transition-delay: calc(8* 0.06s); }
#gloval_nav nav ul li:nth-of-type(9) { transition-delay: calc(9* 0.06s); }
#gloval_nav nav ul li:nth-of-type(10) { transition-delay: calc(10* 0.06s); }
#gloval_nav.active { opacity: 1; pointer-events: inherit; }
#gloval_nav.active nav ul li { transform: translateY(0px); opacity: 1; }
#gloval_nav .bg { background: linear-gradient(0deg, #046eff 0%, #9c58f8 35%, #ff81a1 100%); width: 50%; height: 100vh; position: absolute; top: 0; right: 0; opacity: 0.7; z-index: 10; }
#gloval_nav .bg_slide { -webkit-animation: loop 40s infinite linear; animation: loop 40s infinite linear; transition: 0.2s; position: relative; }
#gloval_nav .bg_slide div { background-image: url("../images/kv_menu.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100vh; }

@keyframes loop { 0% { transform: translateX(50%); }
  50% { transform: translateX(0); }
  100% { transform: translateX(50%); } }
@media only screen and (max-width: 769px) { #gloval_nav .nav_header_logo { top: 20px; left: calc(50% - 45px); width: 90px; }
  #gloval_nav .nav_sns_icon { width: 24px; top: 18px; right: 16px; }
  #gloval_nav nav { background-color: transparent; width: 100%; }
  #gloval_nav nav::before { width: 100px; height: 40px; left: 10%; bottom: 3%; }
  #gloval_nav nav::after { width: calc(76% - 100px); left: calc(10% + 120px); bottom: calc(3% + 20px); }
  #gloval_nav nav ul { left: 10%; }
  #gloval_nav nav ul li a { font-size: 24px; }
  #gloval_nav .bg { width: 100%; }
  #gloval_nav .bg_slide { -webkit-animation: loop_sp 40s infinite linear; animation: loop_sp 40s infinite linear; transition: 0.2s; position: relative; }
  #gloval_nav .bg_slide div { width: 300%; height: 100vh; } }
@keyframes loop_sp { 0% { transform: translateX(-200%); }
  50% { transform: translateX(0); }
  100% { transform: translateX(-200%); } }
/* =foot
-----------------------------------------------------------------------------------------*/
footer { position: relative; padding: 54px 0; background-color: #fff; text-align: center; }
footer .container .link_flex { display: flex; justify-content: center; margin-bottom: 40px; }
footer .container .link_flex a { display: block; width: 170px; margin-right: 30px; }
footer .container .link_flex a img { width: 100%; height: auto; }
footer .container .link_flex a:last-of-type { margin-right: 0; }
footer .container .kyosan { margin-bottom: 40px; }
footer .container .kyosan p { color: #000; font-size: 14px; font-weight: bold; margin-bottom: 0.5em; }
footer .container .kyosan a { display: block; width: 170px; margin: 0 auto; }
footer .container .kyosan a img { width: 100%; height: auto; }
footer .container .copywrite { color: #000; font-size: 12px; margin-bottom: 0; }

@media only screen and (max-width: 769px) { footer { padding: 35px 0; }
  footer .container .link_flex { margin-bottom: 15px; }
  footer .container .link_flex a { margin-right: 10px; width: 140px; }
  footer .container .kyosan { margin-bottom: 22px; }
  footer .container .kyosan p { font-size: 12px; }
  footer .container .kyosan a { width: 130px; } }
/** frame sample **/
.frame { --fmgn:15px; }

.frame { z-index: 9996; position: fixed; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100%; height: 100%; pointer-events: none; border: 8px solid #046EFF; }

.frame_bottom { position: fixed; display: block; left: calc(var(--fmgn)/2); bottom: calc(var(--fmgn)/2); width: calc(100% - var(--fmgn)); height: 1px; background-color: #e5bd8a; }

.frame .corner { background-repeat: no-repeat; width: 135px; height: 135px; background-size: 100%; position: fixed; }

.frame .tl { background-image: url("../images/svg/frame_corner_bl.svg"); top: 0; left: 0; transform: rotate(90deg); }

.frame .tr { background-image: url("../images/svg/frame_corner_bl.svg"); top: 0; right: 0; transform: rotate(180deg); }

.frame .bl { background-image: url("../images/svg/frame_corner_bl.svg"); bottom: 0; left: 0; }

.frame .br { background-image: url("../images/svg/frame_corner_bl.svg"); bottom: 0; right: 0; transform: rotate(270deg); }

@media only screen and (max-width: 769px) { .frame { --fmgn:5px; border: 5px solid #046EFF; }
  .frame .corner { width: 60px; height: 60px; } }
/* font
------------------------------------------------------ */
/* =op_anim
------------------------------------------------------------------------------------------*/
/*.op_anim {position: fixed;top: 0; left: 0; width: 100%; height: 100%; display: flex; pointer-events: none; z-index: $op_anim_z; background-color: $black; transition: 1.2s;
	img {position: absolute; pointer-events: none; top: 50%; left: 50%; transform: translate(-50% , -50%);width: 30vw; height: auto; transition: 1.2s cubic-bezier(0.87, 0, 0.13, 1);}
	&.open { opacity: 0;
		img {opacity: 0;}
	}
}

body {pointer-events: none;
	&.active {pointer-events: auto;}
	&.scroll_stop {overflow: hidden;}
}


@media only screen and (max-width: 769px){
	.op_anim {
		img {width: auto; width: calc(90%);}
		&.open {
			img {}
		}
	}
}*/
/* =IE killer
------------------------------------------------------------------------------------------*/
.IEblock { display: none; }

@media (-ms-high-contrast: none), (-ms-high-contrast: active) { .IEblock { position: fixed; display: block !important; z-index: 30000; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: #ee768e; }
  .IEblock .comment_block { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border-radius: 10px; text-align: center; height: 90%; width: 90%; max-height: 400px; max-width: 600px; }
  .IEblock .comment_block p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; color: #111; font-size: 20px; font-weight: bold; }
  .IEblock .comment_block p span { font-size: 0.8em; } }
/* =clearfix
------------------------------------------------------------------------------------------*/
.clearfix:after { clear: both; display: block; height: 0; line-height: 0; visibility: hidden; font-size: 0.1em; content: "."; }