/*----------------------------------------
	base
------------------------------------------*/
html.html_reset {margin: 0!important; padding: 0!important;}
body {position: relative; height:100%; width: 100%; overflow-y: scroll; overflow-x: hidden; background-color: var(--c_bg_color); text-align: center; color: var(--c_font_color); font-family: var(--font_base_setting); font-size: var(--base_font_size); font-optical-sizing: auto; font-weight: 500; line-height: var(--base_line_height); word-break: break-word; /* word-break: auto-phrase; */
}

main {position: relative; overflow: clip;}
a { color: var(--c_link_color); }
img {max-width: 100%; height: auto;}
@media only screen and (max-width: 835px){
body {overflow: hidden; min-height: 100%;
	&.scroll_on { overflow-y: scroll; overflow-x: hidden; pointer-events: auto;}
}
}

/*----------------------------------------
	module
------------------------------------------*/
.pc_only {display: block;}
.sp_only {display: none!important;}
@media only screen and (max-width: 835px){
	.pc_only {display: none!important;}
	.sp_only {display: block!important;}
}

.mod_mb_0{margin-bottom: 0!important;}
.mod_mb_0p5distance{margin-bottom: calc(var(--base_distance)*0.5)!important;}
.mod_mb_1p0distance{margin-bottom: calc(var(--base_distance)*1)!important;}
.mod_mb_1p5distance{margin-bottom: calc(var(--base_distance)*1.5)!important;}
.mod_mb_2p0distance{margin-bottom: calc(var(--base_distance)*2)!important;}
.mod_mb_2p5distance{margin-bottom: calc(var(--base_distance)*2.5)!important;}
.mod_mb_3p0distance{margin-bottom: calc(var(--base_distance)*3)!important;}
.mod_mb_3p5distance{margin-bottom: calc(var(--base_distance)*3.5)!important;}
.mod_mb_4p0distance{margin-bottom: calc(var(--base_distance)*4)!important;}
.mod_mb_4p5distance{margin-bottom: calc(var(--base_distance)*4.5)!important;}
.mod_mb_0p5gap{margin-bottom: calc(var(--base_gap)*0.5)!important;}
.mod_mb_1p0gap{margin-bottom: calc(var(--base_gap)*1)!important;}
.mod_mb_1p5gap{margin-bottom: calc(var(--base_gap)*1.5)!important;}
.mod_mb_2p0gap{margin-bottom: calc(var(--base_gap)*2)!important;}
.mod_mb_2p5gap{margin-bottom: calc(var(--base_gap)*2.5)!important;}
.mod_mb_3p0gap{margin-bottom: calc(var(--base_gap)*3)!important;}
.mod_mb_3p5gap{margin-bottom: calc(var(--base_gap)*3.5)!important;}
.mod_mb_4p0gap{margin-bottom: calc(var(--base_gap)*4)!important;}
.mod_mb_4p5gap{margin-bottom: calc(var(--base_gap)*4.5)!important;}

.mod_text_bold{font-weight: bold;}
.mod_text_center{text-align: center;}
.mod_text_left{text-align: left;}
.mod_text_right{text-align: right;}
.mod_text_base{font-size: var(--base_font_size); line-height: var(--base_line_height);}
.mod_text_small {font-size: 0.6em; line-height: 1em;}
.mod_mb_0p5em{margin-bottom: 0.5em;}
.mod_mb_1p0em{margin-bottom: 1em;}
.mod_mb_1p5em{margin-bottom: 1.5em;}
.mod_mb_2p0em{margin-bottom: 2em;}
.mod_text_underline{text-decoration: underline;}

.mod_flex_box_01 , .mod_flex_box_02 , .mod_flex_box_03 , .mod_flex_box_04 { display: flex; flex-wrap:wrap; gap:var(--base_gap); justify-content: space-between;
	&.jst_center {justify-content: center; }
	&.ali_center {align-items: center; }
}
.mod_flex_box_01 { div , li {width: 100%;} }
.mod_flex_box_02 { div , li {width: calc((100% - var(--base_gap)*1)/2);} }
.mod_flex_box_03 { div , li {width: calc((100% - var(--base_gap)*2)/3);} }
.mod_flex_box_04 { div , li {width: calc((100% - var(--base_gap)*3)/4);} }
@media only screen and (max-width: 835px){
	.mod_flex_box_01 { div , li {width: 100%;} }
	.mod_flex_box_02 { div , li {width: 100%;} }
	.mod_flex_box_03 { div , li {width: calc((100% - var(--base_gap)*1)/2);} }
	.mod_flex_box_04 { div , li {width: calc((100% - var(--base_gap)*1)/2);} }
}

.mod_text_slide_anim_box {display: flex; height: 100px;
	img {display: block; width: auto; max-width: initial; height: 100%; animation: hor_move_l 40s linear infinite;}
	&.reverse {animation: hor_move_r 40s linear infinite;}
}

.mod_youtube_iframe_size {position: relative; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;}
.mod_disactive { pointer-events: none; }
.mod_negative_margin_top {margin-top: -20vh; padding-top: 20vh;}
.mod_scroll_bar_delete {-ms-overflow-style: none; scrollbar-width: none;}
.mod_scroll_bar_delete::-webkit-scrollbar {display:none;}

/* wrap settings
-------------------------------*/
.wrap_100px  { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 100px;}
.wrap_200px  { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 200px;}
.wrap_300px  { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 300px;}
.wrap_400px  { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 400px;}
.wrap_500px  { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 500px;}
.wrap_600px  { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 600px;}
.wrap_700px  { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 700px;}
.wrap_800px  { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 800px;}
.wrap_900px  { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 900px;}
.wrap_1000px { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 1000px;}
.wrap_1100px { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 1100px;}
.wrap_1200px { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 1200px;}
.wrap_1300px { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 1300px;}
.wrap_1400px { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 1400px;}
.wrap_1500px { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 1500px;}
.wrap_1600px { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 1600px;}
.wrap_1700px { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 1700px;}
.wrap_1800px { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 1800px;}
.wrap_1900px { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 1900px;}
.wrap_100px , .wrap_200px , .wrap_300px , .wrap_400px , .wrap_500px , .wrap_600px , .wrap_700px , .wrap_800px , .wrap_900px , .wrap_1000px , .wrap_1100px , .wrap_1200px , .wrap_1300px , .wrap_1400px , .wrap_1500px , .wrap_1600px , .wrap_1700px , .wrap_1800px , .wrap_1900px {
	&.w_100 {width: 100%;}
} 

/*----------------------------------------
	loading / opening animation
------------------------------------------*/
#loading {position: fixed; top: 0; left: 0; display: block; width: 100%; height: 100vh; height: 100svh; background-color: var(--c_bg_color);z-index: var(--z_loading);
	&.is_loaded {display: none;}
	&.load_open { animation: fade_out 1.4s forwards; pointer-events: none;}
	.logo {position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); width: min(240px , 40%);
		img {width: 100%;}
	}
}

/*----------------------------------------
	common class
------------------------------------------*/

/* common parts
-------------------------------*/
.cmn_section {position: relative; display: block; width: 100%; height: auto; margin: 0 auto; padding: calc(var(--base_distance)*1) 0;}
.cmn_in_page_main {position: relative; display: block; width: 100%; height: auto; margin: 0 auto; padding: calc(var(--base_distance)*1) 0;}

.cmn_bg_layer {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.cmn_main_layer {position: relative;}


.cmn_h_title {position: relative; color: var(--c_font_color); font-size: min(28px , 4.6vw); letter-spacing: 0.45em; line-height: 1.6em; font-weight: 500; margin-bottom: 0.5em; margin-bottom: 0; transition: 0.2s;}
.cmn_sub_text {font-size: clamp(12px , 2vw , 14px); line-height: 1.5em; letter-spacing: 0.2em; color: var(--c_gray); font-weight: 600; margin-bottom: 1em; transition: 0.2s;}
.cmn_event_title {position: relative; color: var(--c_font_color); font-size: clamp(13px, 1.5vw , 16px); letter-spacing: 0.2em; line-height: 1.8em; font-weight: 500; margin-bottom: 0; transition: 0.2s;
	span {font-size: 0.8em;}
}

.cmn_section_title_outer {position: relative; display: block; text-align: left; margin-bottom: calc(var(--base_distance)*0.5);
	@media screen and (max-width: 835px) {margin-bottom: calc(var(--base_distance)*0.25);}
}

/*----- cmn link btn -----*/
.cmn_link_btn_outer {position: relative; display: block; text-align: center; width: 100%; max-width: var(--base_wrap_width); height: auto; margin: 0 auto;}
.cmn_link_btn_a {position: relative; display: inline-block; margin: 0 auto; padding: 0.5em 1.5em; height: auto; width: auto; min-width: min(340px , 100%); background-color: var(--c_white); line-height: 1.4em; color: var(--c_link_color); font-size: clamp( 16px , 5.5vw , 26px ); text-decoration: initial!important; transition: 0.2s;
	img {position: relative; height: 1.4em; width: auto;}
	span {position: relative;}
	&::before {position: absolute; display: block; content: ""; background-color: var(--c_theme_color); width: 100%; height: 100%; left: 0; top: 0; transform-origin: right top; transform: scale(0, 1); transition: transform 0.4s;}
	&:hover {color: var(--c_white);
		&::before {transform-origin: left top; transform: scale(1,1);}
	}
	&.w_100 {width: 100%;}
	&.disactive {pointer-events: none; filter: grayscale(1); opacity: 0.5;}
}
/*----- cmn link btn -----*/

.cmn_link_arrow { position: absolute; display: block; content: ""; top: 50%; right: 0; transform: translateY(-50%); width: var(--cmn_link_arrow_size); height: var(--cmn_link_arrow_size); border: 1px solid var(--c_black_d); border-radius: 50%; overflow: hidden; transition: 0.2s;
	&::after { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat center url(../images/svg/icon_dot_arrow_r_b.svg); background-size: 30%; transition: 0.2s;}
}

.cmn_coming_soon_img{position: relative;background: var(--c_gray);aspect-ratio:16/9;display: flex;justify-content: center;align-items: center;
    &::before {content: 'COMING SOON';position: absolute;color: var(--c_white_l);font-size: 2em;}
}


/*----------------------------------------
	header
------------------------------------------*/
:root {--header_height: min(56px , 14vw);}
header{
	/* &::before { position: fixed; display: block; content: ""; top: 0; left: 0; width: 100%; height: calc(var(--header_height) + var(--over_frame_size)); border: 1px solid var(--c_white_l); z-index: var(--z_nav); backdrop-filter: blur(10px); background-color: rgba(255,255,255,0.6);} */
	.header_title {position: fixed; top: var(--over_frame_size); left: calc(var(--header_height)*0.5 + var(--over_frame_size)); display: block; width: auto; height: var(--header_height); z-index: var(--z_header_logo); font-size: clamp(11px, 2vw , 13px); font-weight: 300; line-height: 1.4em; letter-spacing: 0.2em; text-align: left;  transition: 0.2s; mix-blend-mode: difference;
		a {position: relative; display: flex; justify-content: center; align-items: center; width: auto; height: 100%; color: var(--c_white_l); transition: 0.5s;
			span {position: relative; display: inline-block;}
			&[data-scroll="fv_scroll_hide"]{transform: scale(2)translateY(20%);transform-origin:left;
				&.fv_scroll_show{transform: scale(1)translateY(0%);}
			}
		}
		&:hover {
			a {opacity: 0.5;}
		}
	}
	.header_sns_links {position: fixed; top: var(--over_frame_size); right: calc(var(--header_height)*0.5 + var(--over_frame_size)); display: flex; justify-content: flex-end; align-items: center; gap: calc(var(--header_height)*0.15); width: auto; height: var(--header_height); z-index: var(--z_header_logo);
		a { display: block; width: calc(var(--header_height)*0.6); height: calc(var(--header_height)*0.6); transition: 0.2s;
			img {display: block; width: 100%; height: 100%; object-fit: contain;}
			&:hover {opacity: 0.7;}
		}
	}
}
@media only screen and (max-width: 835px){
	header{
		.header_title {left: calc(var(--header_height)*0.3 + var(--over_frame_size)); font-weight: 500;  
			a{
				&[data-scroll="fv_scroll_hide"]{transform: scale(1)translateY(0%);transform-origin:left;
					&.fv_scroll_show{transform: scale(1)translateY(0%);}
				}
			}
		}
		.header_sns_links { right: calc(var(--header_height)*0.2 + var(--over_frame_size));}
	}
}

/*----------------------------------------
	footer
------------------------------------------*/
footer{position: relative; display: block; width: 100%; height: auto; padding: calc(var(--base_gap)*1) 0 calc(var(--base_gap)*1 + var(--over_frame_size)); border-top: 1px solid var(--c_gray_l); background-color: var(--c_white_l);
	.copy {font-size: 12px; margin-bottom: 0;}
}
@media only screen and (max-width: 835px){
footer{ }
}

/*----------------------------------------
	bg
------------------------------------------*/
.cmn_bg {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: no-repeat top center url(../images/holo_portable_fv1.jpg); background-size:cover; }

/*----------------------------------------
	frame
------------------------------------------*/
:root { --over_frame_size: clamp(8px , 2vw , 20px);}
#over_frame { position: fixed; top: 0; left: 0; width: 100%; height: 100lvh; z-index: var(--z_frame); filter: drop-shadow(0 0 calc(var(--over_frame_size)*0.5) rgba(0, 168, 255, 0.35)); pointer-events: none;
	.frame {
		span {position: fixed; display: block; background-color: var(--c_white_l);
			&:nth-of-type(1) {top: 0; left: 0; width: 100%; height: var(--over_frame_size);}
			&:nth-of-type(2) {top: 0; right: 0; width: var(--over_frame_size); height: 130lvh;}
			&:nth-of-type(3) {bottom: 0; left: 0; width: 100%; height: var(--over_frame_size);}
			&:nth-of-type(4) {top: 0; left: 0; width: var(--over_frame_size); height: 130lvh;}
		}
	}
	.corner {
		span {position: fixed; display: block; background: no-repeat top left url(../images/svg/overframe_corner_tl.svg); background-size: contain; width: max(20px, calc(var(--over_frame_size)*1.5)); height: max(20px, calc(var(--over_frame_size)*1.5));
			&:nth-of-type(1) { top: calc(var(--over_frame_size) - 1px); left: calc(var(--over_frame_size) - 1px); }
			&:nth-of-type(2) { top: calc(var(--over_frame_size) - 1px); right: calc(var(--over_frame_size) - 1px); transform: rotate(90deg);}
			&:nth-of-type(3) { bottom: calc(var(--over_frame_size) - 1px); right: calc(var(--over_frame_size) - 1px); transform: rotate(180deg);}
			&:nth-of-type(4) { bottom: calc(var(--over_frame_size) - 1px); left: calc(var(--over_frame_size) - 1px); transform: rotate(270deg);}
		}
	}
}

/*----------------------------------------
	step delay
------------------------------------------*/
.cmn_step_delay_box {
	li,div,p,span  {
		&:nth-of-type(1) {--step_delay: 0;}
		&:nth-of-type(2) {--step_delay: 1;}
		&:nth-of-type(3) {--step_delay: 2;}
		&:nth-of-type(4) {--step_delay: 3;}
		&:nth-of-type(5) {--step_delay: 4;}
		&:nth-of-type(6) {--step_delay: 5;}
		&:nth-of-type(7) {--step_delay: 6;}
		&:nth-of-type(8) {--step_delay: 7;}
		&:nth-of-type(9) {--step_delay: 8;}
		&:nth-of-type(10) {--step_delay: 9;}
		&:nth-of-type(11) {--step_delay: 10;}
		&:nth-of-type(12) {--step_delay: 11;}
		&:nth-of-type(13) {--step_delay: 12;}
		&:nth-of-type(14) {--step_delay: 13;}
		&:nth-of-type(15) {--step_delay: 14;}
		&:nth-of-type(16) {--step_delay: 15;}
		&:nth-of-type(17) {--step_delay: 16;}
		&:nth-of-type(18) {--step_delay: 17;}
		&:nth-of-type(19) {--step_delay: 18;}
		&:nth-of-type(20) {--step_delay: 19;}
		&:nth-of-type(21) {--step_delay: 20;}
		&:nth-of-type(22) {--step_delay: 21;}
		&:nth-of-type(23) {--step_delay: 22;}
		&:nth-of-type(24) {--step_delay: 23;}
		&:nth-of-type(25) {--step_delay: 24;}
		&:nth-of-type(26) {--step_delay: 25;}
		&:nth-of-type(27) {--step_delay: 26;}
		&:nth-of-type(28) {--step_delay: 27;}
		&:nth-of-type(29) {--step_delay: 28;}
		&:nth-of-type(30) {--step_delay: 29;}
	}
}

/*----------------------------------------
	404
------------------------------------------*/




/* =404
------------------------------------------------------------------------------------------*/
.error_404{max-width: 470px;width: calc(var(--base_wrap_width) * 0.9);margin: 270px auto 140px;}
.error_404 .stit{font-size: 64px;font-weight: bold;letter-spacing: 0.1em;margin-bottom: 30px;line-height: 1em;text-align: center;color: var(--c_theme_color);}
.error_404 p{font-size: 16px;line-height: 1.5em;}
.error_404 a{background-color: var(--c_theme_color);display: block;color: #fff;text-align: center;line-height: 1em;font-size: 20px;padding: 16px 0;width: 100%;margin: 34px auto 0;letter-spacing: 0.1em;border-radius: 5px;font-weight: bold;position: relative;}

@media (max-width: 768px){
.error_404{ margin: 120px auto 50px;}
.error_404 .stit{ font-size: 40px; margin-bottom: 24px;}
.error_404 p{ font-size: 13px; text-align: left;}
.error_404 a{ margin: 22px auto 0; font-size: 16px; padding: 10px 0;}
}