@charset "utf-8";

*{ box-sizing: border-box;
	--font1: "Noto Sans JP", sans-serif;
	--font_en:"League Gothic", "Noto Sans JP", sans-serif;
}

/* =base
------------------------------------------------------------------------------------------*/
body { text-align: center; font-family:var(--font1); font-weight: 500; font-size: 16px; line-height: 1.5em; color: #000; margin: 0; min-height:100%; overflow-x: hidden; background-color:#000000; }
body:before{ content:""; display: block; width: 100%; height: 100vh;  position: fixed; top: 0; left: 0; z-index: -2; background-image:url("../images/bg/bg.webp"); background-repeat:no-repeat; background-size:cover; background-position: center;}


.sp_only{display: none;}
.pc_only{display: initial;}

@media only screen and (max-width: 835px){
	body{ background-image:none;}

	.sp_only{display: initial;}
	.pc_only{display: none!important;}
}

html {overflow-y:scroll; height:100%;}
a {  text-decoration: none;  cursor: pointer; color:var(--c_link_color); outline:none; word-break: break-all;}
a:link {  text-decoration: none; }
a:hover {  color: var(--c_link_color);  text-decoration: none;}
a:active {  text-decoration: none;}
a img { outline:none;}
a:hover img {  opacity: .8;  -webkit-opacity: .8;  -moz-opacity: .8;  filter: alpha(opacity=80);  -ms-filter: "alpha(opacity=80)"; transition:0.3s;}


.youtube { overflow: hidden; padding-bottom: 56.25%; position: relative; height: 0px; width: 100%; }
.youtube iframe { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }

/* 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;
@media only screen and (max-width: 835px){
	&.top_news_width{width: unset; margin: unset; max-width: unset;}
}
}
.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;}


.mod_mb_0p3distance{margin-bottom: calc(var(--base_distance)*0.3);}
.mod_mb_0p5distance{margin-bottom: calc(var(--base_distance)*0.5);}
.mod_mb_1p0distance{margin-bottom: calc(var(--base_distance)*1);}
.mod_mb_1p5distance{margin-bottom: calc(var(--base_distance)*1.5);}
.mod_mb_2p0distance{margin-bottom: calc(var(--base_distance)*2);}
.mod_mb_0p5gap{margin-bottom: calc(var(--base_gap)*0.5);}
.mod_mb_1p0gap{margin-bottom: calc(var(--base_gap)*1);}
.mod_mb_1p5gap{margin-bottom: calc(var(--base_gap)*1.5);}
.mod_mb_2p0gap{margin-bottom: calc(var(--base_gap)*2);}


/*----------------------------------------
	header
------------------------------------------*/
header {
	.header_logo { position: fixed; top: .7vw; left: .7vw; width: min(100px, 19vw); height: auto; z-index: var(--z_nav); transition: 0.2s;
		img { display: block; width: 100%; height: auto; }
		&:hover { transform: translateX(-2px); }
	}
}

@media only screen and (max-width: 835px) {
	header {
		.header_logo{top:2vw; left:2vw;}
	}
}

/*----------------------------------------
	navigation
------------------------------------------*/
:root {
	--header_height: min(56px, 5.5vh);
}
@media only screen and (min-width: 835px) {
	#global_nav { position: fixed; top: 0; right: 0; display: flex; justify-content: flex-end; align-items: center; width: auto; height: var(--header_height); padding: 0 calc(var(--header_height) *0.3); z-index: var(--z_nav); background-color: var(--c_theme_color);
		&::before { position: absolute; display: block; content: ""; top: 0; left: 1px; width:min(56px, 5.5vh); height: 100%; background: no-repeat top right url(../images/parts/parts_header_side.svg); background-size: contain; transform: translateX(calc(-100% + 1px)); }
		&::after { position: absolute; display: block; content: ""; bottom: 0; right: 0; width: 100%; height: 2px; background-color: #D71F21; transform: translateY(0px); }
		.nav_links { display: flex; justify-content: flex-end; align-items: center; font-size: min(24px, 2vw); gap: 0.5em; line-height: 1.2em;
			li { position: relative; display: block;
				&::before { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--c_white_l); transform: scale(0, 1); transition: 0.2s; }
				.nav_link { position: relative; display: block; line-height: 1.2em; letter-spacing: 0.05em; white-space: nowrap; color: var(--c_white); padding: .3em .3em .6em .3em; text-align: left; transition: 0.2s; color: var(--c_white); font-family: var(--f_vina);
					&:hover,
					&.active { color: var(--c_link_color); &::after { color: var(--c_link_color); } }
					&.disactive { opacity: 0.5; pointer-events: none; }
				}
				&:hover { &::before { transform: scale(1, 1); } }
				&.sns_links { display: flex; justify-content: flex-end; align-items: flex-start; font-size: 16px; gap: 0.5em; margin-left: 0.5em; }
				.nav_link_icon { position: relative; display: block; width: 1.7em; height: 1.7em;
					&::before { display: none; }
					img { display: block; width: 100%; height: auto; transition: 0.2s; }
					&:hover { img { transform: translateY(-2px); } }
				}
			}
		}
	}
}

@media only screen and (max-width: 835px) {
	#global_nav { position: fixed; top: 0; left: 0; width: 100%; height: 100lvh; z-index: var(--z_nav); background-color: var(--c_black_d); overflow-y: scroll; overflow-x: hidden; padding-top: 60px; opacity: 0; visibility: hidden; pointer-events: auto; transition: 0.2s; 
		&::before { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background-color: #000;}
		.nav_links { position: relative; width: 80%; height: auto; margin: 0 auto; text-align: left; font-size: 25px; line-height: 1.2em; letter-spacing: 0.05em;
			li { opacity: 0; transform: translateX(-50px); transition: 0.2s;
				.nav_link,
				.sub_nav_link { position: relative; display: block; color: var(--c_font_color); white-space: nowrap; color: #fff; }
				.nav_link { padding: 0.5em 0; color: #fff; font-family: var(--f_vina);
					/* &::before { position: absolute; display: block; content: ""; left: 0; top: calc(0.6em + 0.5em); transform: translateY(-50%); width: 0.6em; height: 1em; background: no-repeat center url(../images/svg/parts_plus_white.svg); background-size: contain; } */
					&.disactive { opacity: 0.5; }
				}
				@for $step from 1 through 10 { &:nth-of-type(#{$step}) { transition-delay: calc(#{$step}* 0.05s + 0s); } }
				&.sns_links { display: flex; justify-content: flex-start; align-items: flex-start; font-size: 20px; gap: 0.5em; padding: 0.8em 0; }
				.nav_link_icon { position: relative; display: inline-block; width: 2em; height: 2em; overflow: hidden;
					img { display: block; width: 100%; height: auto; transition: 0.2s; }
					&:hover { img { opacity: 0.7; } }
				}
			}
		}
		&.active { opacity: 1; visibility: visible; pointer-events: initial; .nav_links { li { opacity: 1; transform: translateX(0px); } } }
	}
}

/* nav trigger
-------------------------------*/
:root {
	--nav_trigger_size: clamp(54px, 10vw, 80px);
}
.nav_trigger_outer { display: none; position: fixed; top: 0px; right: 0px; width: var(--nav_trigger_size); height: var(--nav_trigger_size); cursor: pointer; z-index: var(--z_nav_trigger); background-color: var(--c_theme_color);
	.nav_trigger_bar { position: absolute; width: 70%; height: 24%; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; transition: 0.6s; 
		span { position: absolute; left: 50%; transform: translate(-50%, -50%) rotateZ(0deg); width: 100%; height: clamp(2px, 0.5vw, 3px); display: block; transition: 0.2s;background-color: #ffffff; border-radius: 9999px;pointer-events: none;
			&:nth-last-of-type(1) { top: calc(50% - 50%); width: 100%; }
			&:nth-last-of-type(2) { top: calc(50% - 0%); width: 100%; }
			&:nth-last-of-type(3) { top: calc(50% + 50%); width: 100%; }
		}
	}
	&.type_text {
		.nav_trigger_bar {height: 24%;
			span { &:nth-last-of-type(1) { top: calc(50% - 80%); background-color: #ffffff;}
				&:nth-last-of-type(2) { top: calc(50% - 10%);background-color: #ffffff; }
				&:nth-last-of-type(3) { top: calc(50% + 60%); background-color: #ffffff;}
			}
		}
	}
	&.active {
		.nav_trigger_bar {
			span {
				&:nth-last-of-type(1) { transform: translate(-50%, -50%) rotateZ(-135deg); top: calc(50% - 0%); background-color: #ffffff;}
				&:nth-last-of-type(2) { transform: translate(-50%, -50%) rotateZ(135deg); top: calc(50% - 0%);background-color: #ffffff;
				}
				&:nth-last-of-type(3) { opacity: 0; }
			}
		}
	}
}

@media only screen and (max-width: 835px) {
	.nav_trigger_outer {
		display: block;outline: 2px solid #D71F21
	}
}

.cmn_link_btn_outer{
	.cmn_link_btn_img{max-width: 400px; width: 100%;
		img{height:100%; width:auto; max-width:100%; max-height:fit-content;}
	}
}

.head_tit{max-width: 646px; margin: 0 auto; width: 50%;
	&.in_page_head{margin:0 auto calc(var(--base_distance)*0.2); width: 70%; max-width: unset;}
	&.short_tit{margin:0 auto calc(var(--base_distance)*0.2);}
img{height:100%; width:auto; max-width:100%; max-height:fit-content;}}

@media only screen and (max-width: 835px){
	.head_tit{max-width: 646px; margin: 1em auto 0 ; width: 84%;
	&.in_page_head{ width: 77%; }
	&.short{width: 60%;}
	&.short_tit{width: 58%;}
}
}

/*-- list style --*/
:root {--cmn_list_color: var(--c_theme_color);}
ul {
	&.cmn_list_circle , &.cmn_list_kome , &.cmn_list_asterisk  { 
		li {position: relative; display: block; margin-bottom: 0.5em; padding-left: 1.2em;
			&:last-of-type {margin-bottom: 0;}
		}
	}
	&.cmn_list_circle {
		li { font-size: clamp(14px, 1.5vw, 16px);
			&::before {position: absolute; display: block; content: ""; top: 0; left: 0; width: 1em; height: 1em; transform: translateY(0.3em) scale(0.4); background-color: var(--cmn_list_color); border-radius: 9999px;}
		}
	}
	&.cmn_list_kome {
		li { padding-left: 1.2em;line-height:1.4em; font-size:clamp(14px, 1.5vw, 16px);
			&::before {position: absolute; display: block; content: ""; content: "※"; top: 0; left: 0; width: 1em; height: 1em; transform: translateY(0em); color: var(--cmn_list_color); background: initial;}
		}
	}
	&.cmn_list_asterisk {
		li { padding-left: 0.8em;line-height:1.4em; font-size: clamp(14px, 1.5vw, 16px);
			&::before {position: absolute; display: block; content: ""; content: "*"; top: 0; left: 0; width: 1em; height: 1em; transform: translateY(0em); color: var(--cmn_list_color); background: initial;}
		}
	}
	&.cmn_list_underline {
		li { line-height:1.4em; border-bottom: 1px solid var(--cmn_list_color); padding-top: 0.8em; padding-bottom: 0.8em; margin-bottom: 0; font-size: min(16px, 3.8vw);
			&::before {position: absolute; display: block; content: ""; top: 0; left: 0; width: 1em; height: 1em; transform: translateY(calc(0.3em + 0.8em)) scale(0.4); background-color: var(--cmn_list_color); border-radius: 9999px;}
		}
	}
}
/*-- list style --*/


main{
	&.in_page{padding: calc(var(--base_distance)*0.5) 0;}
	&.in_page_intro{padding: calc(var(--base_distance)*0.7) 0;}
}
/* =foot
-----------------------------------------------------------------------------------------*/
footer{ padding: 60px 0 6vw; font-size: 14px; line-height: 1.5em; position:relative;}



@media only screen and (max-width: 835px){
footer{ padding: 30px 0 60px;}


}


/* =video
------------------------------------------------------ */
video#bgvid {
 position: fixed; top: 0; left:0; min-width:100%; min-height:100%; z-index: -100; opacity:0.5;
}
@media only screen and (max-width: 835px){
video#bgvid { display:none;}
}



/* =clearfix
------------------------------------------------------------------------------------------*/
.clearfix:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}


/*----------------------------------------
	modal
------------------------------------------*/
.cmn_modal_layer{--modal_btn_size: clamp(50px , 5vw , 70px); position: fixed; top: 0px; left: 0; right: 0; bottom: 0; width: 100%; height:100dvh; z-index: var(--z_modal); opacity: 0; visibility: hidden; pointer-events: none;
	.modal_bg {position: fixed; top: 0px; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 0; transition: 0.6s;
		&::before { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--c_black_d); opacity: 0.6; }
	}
	.modal_inner { position: absolute; width: auto; height: auto; top:50%; left: 50%; transform: translateX(-50%) translateY(-50%); text-align: left; opacity: 0; transition: 0.6s;
		img {width: auto; height: auto; max-width: min(1400px, 94vw); max-height: 90vh; cursor: initial;
		}
		.modal_youtube_video_box {width: min(1200px, 94vw); padding-top: min( 90vh , calc(100% * 1080 / 1920) );
			iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
			img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;}
		}
		.modal_textbox {width: min(1000px, 94vw); max-height: calc(75vh); background-color: var(--c_white_l); color: var(--c_black_d); padding: clamp(12px , 4vw , 50px); text-align: left; overflow: hidden; font-size: clamp(13px , 2vw , 16px);
			&.scrollable {overflow-x: hidden; overflow-y: scroll; overscroll-behavior: contain;}
		}
	}	
	.modal_close_btn {position: absolute; top: 4px; right: 4px; width: var(--modal_btn_size); height: var(--modal_btn_size); background: no-repeat center url("../images/template_parts/btn_close_01.svg"); background-size: contain; cursor: pointer;}
	&.visible { opacity: 1; visibility: visible; pointer-events: auto;
		.modal_bg { opacity: 1; }
		.modal_inner { opacity: 1;}
	}
	
}
.cmn_slide_modal_layer {
	.modal_inner.slide_modal_content_box {
		.slide_modal_content {position: absolute; width: auto; height: auto; top:50%; left: 50%; transform: translateX(-50%) translateY(-50%); opacity: 0; visibility: hidden; transition: 0.2s; pointer-events: none;
			&.slide_visible {opacity: 1; visibility: visible; pointer-events: initial;}
		}
	}
	.modal_prev_btn , .modal_next_btn {position: absolute; top: 50%; transform: translateY(-50%); height: min(270px , 25vh); width: min(80px , 10vw); background-color: var(--c_black); cursor: pointer; transition: 0.2s; -webkit-tap-highlight-color:rgba(0,0,0,0);
		&::before { position: absolute; display: block; content: ""; top: 50%; left: 50%; transform: translate(-50% , -50%); width: 40%; height: 100%; background: no-repeat center url(../images/template_parts/icon_arrow_r.svg); background-size: contain; }
		&.disactive {opacity: 0.2; pointer-events: none;}
		&:focus {outline: none;}
	}
	.modal_prev_btn {left: 0; border-top-right-radius: 10px; border-bottom-right-radius: 10px;
		&::before {transform: translate(-50% , -50%) scale(-1,1);}
		&:hover {transform: translateY(-50%) translateX(-4px);}
	}
	.modal_next_btn {right: 0; border-top-left-radius: 10px; border-bottom-left-radius: 10px;
		&:hover {transform: translateY(-50%) translateX(4px);}
	}
}
@media only screen and (max-width: 835px){
	.slide_modal {
		.modal_prev_btn , .modal_next_btn { width: 12%; height: 20vh; background-size: 30% auto;}
		.modal_prev_btn {left: 0;}
		.modal_next_btn {right: 0;}
	}
}
.cmn_img_mono_modal_trigger {cursor: pointer;}


.fade-in-section {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.25, 1, 0.3, 1) 0.1s, filter 1s cubic-bezier(0.25, 1, 0.3, 1) 0.1s;
}
.fade-in-section.is-visible {
  opacity: 1;
}

.logo_pop { opacity: 0; transform: translateY(40px); transition: opacity 1s ease-out, transform 1s ease-out; }
.logo_pop.is-visible { opacity: 1; transform: translateY(0); }
.logo_pop.is-looping { animation: logo-silky-pop 2.5s cubic-bezier(0.4, 0, 0.2, 1); }

@keyframes logo-silky-pop {
  0% { transform: scale(1); }
  6% { transform: scale(1); }
  25% { transform: scale(1.15); }
  45% { transform: scale(1); }
  100% { transform: scale(1); }
}

.notfound{
	.head_tit{font-size: min(100px, 17vw); font-weight: bold; font-family: var(--f_vina); line-height: 2em;margin-bottom: calc(var(--base_distance)*.5);}
}