@charset "utf-8";/* -------（リセットCSS）-----------------------------------------------*/ 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td,header, section, article, footer, article, aside, time ,nav,a,figure{margin:0;padding:0;}
fieldset,img{border:0;height: auto;width: auto;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;margin: 0;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
p{text-justify:inter-ideograph;margin: 0 0 1em 0;}
header, section, article, footer, article, aside, time ,nav{display: block;}
figure{ line-height:0;}
*{ box-sizing: border-box;}


/* =custom style
------------------------------------------------------------------------------------------*/
:root{
	--keyc:#DAA21F;
	--keyc2:#000;
	--font1: "Oswald","Noto Sans JP", sans-serif;
}

:root {
	--base_distance: min(110px , 11vw);
	--base_gap: clamp(12px , 2vw , 20px);
	--base_wrap_width: 94%;
	--base_font_size: clamp(13px , 2vw , 15px);
	--base_line_height: 1.7em;
}


/* =base
------------------------------------------------------------------------------------------*/
body{overflow-x: hidden;text-align: center;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;font-size: 16px;line-height: 1.7em;background-color: #fff;color: #000;}

body:before{ content: "";display: block;position: fixed;height: 100vh;width: 100%;background-image: url("../images/bg_pc.webp");background-repeat: no-repeat;background-position: center;background-size: cover;z-index: -2;top: 0;left: 0; opacity: 1;}
/*
body:after{ content: "";display: block;position: fixed;height:50vh;width: 100%;background-image: url("../images/bg_txt.svg");background-repeat: no-repeat;background-position: bottom;background-size: 100%;z-index: -1;bottom: -0.5vw;right: 0; opacity: 0.05;} 
*/
html {overflow-y:scroll;height:100%;}

a {color: var(--keyc);text-decoration:none;outline:none;transition: 0.1s;}
a:hover{opacity: 0.8;}

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

#container{ position:relative;}

@media only screen and (max-width: 768px){
    body:before{ background-image: url("../images/bg_sp.webp") }
    
    .pc_only{ display:none;}
    .sp_only{ display:block !important;}
}


#over_frame{position: fixed;z-index: 9996;pointer-events: none;width: 100%;height: 100svh;}
#over_frame .border{position: absolute;border: 1px solid var(--keyc);width: 98%;height: 98%;left: 1%;top: 1%;}
#over_frame .corner {position: absolute;width: 100%;height: 100svh;}
#over_frame .corner span{position: absolute;display: block;background-image: url("../images/bg_corner.png");width: 150px;height: 150px;background-size: contain;background-repeat: no-repeat;left: 0;top: 0;}
#over_frame .corner span:nth-of-type(3){ left: auto;right: 0;top: auto;bottom: 0;transform: rotate(180deg);}
#over_frame .corner span:nth-of-type(2){background-image: url("../images/bg_corner2.png");top: auto;bottom: 0;transform: rotate(180deg);}

@media only screen and (max-width: 768px){
	#over_frame .border{width: 98%;height: 99%;left: 1%;top: 0.5%;}
	#over_frame .corner span{ width: 20%;height: 20%;}
}

/* =video
------------------------------------------------------ */
.fix_bg {position: fixed;width: 100%;height: 100vh;height: 100lvh;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: -1; opacity: 0.5;mix-blend-mode: overlay;}
.fix_bg video {position: absolute;width: 100%;height: 100%;top: 50%;left: 50%;transform: translate(-50%, -50%);object-fit: cover}


@media screen and (max-width:768px) {
.fix_bg {opacity: 0.4;}
}


/* write box
-------------------------------*/
.cmn_write_box_outer {position: relative; display: block; padding: calc(var(--base_gap)*2); margin-bottom: calc(var(--base_gap)*2);}
@media only screen and  (max-width:768px){
	.cmn_write_box_outer  {padding: calc(var(--base_gap)*2.5) calc(var(--base_gap)*1.5);}
}
:root {--cmn_write_box_theme_color: #{var(var(--keyc))};}
.cmn_write_box {position: relative; text-align: left; font-size: clamp(13px , 2vw , 16px); line-height: 1.5em;  width: 100%; background-color: #fff; border-radius: 20px; padding: 3%;
	@media only screen and  (max-width:768px){padding: 5%;border-radius: 10px;}
	.title_box {position: relative; display: block; padding-bottom: calc(clamp(17px , 2vw , 24px)*0.8) ; margin-bottom: 2em; border-bottom: 4px double var(--keyc); }
	.date { font-size: clamp(12px , 2vw , 14px); line-height: 1.4em; font-weight: bold; margin-bottom: 0.7em; letter-spacing: 0.1em; }
	.box_title { position: relative; display: block; width: 100%; font-size: clamp(19px , 2vw , 24px);  line-height: 1.4em; font-weight: bold;}
	.border_box {position: relative; display: block; width: 100%; height: auto; background-color: var(--c_black_d); border: 1px solid var(--keyc); padding: min( calc(var(--base_gap)*2) , 5vw) min( calc(var(--base_gap)*2) , 4vw); margin-bottom: 1.5em;}
	iframe {width: 100%;}
	figure { margin-bottom: 1.5em;}
	img {display: block; max-width: 100%; height: auto; margin: 0 auto; margin-bottom: 1.5em;
		&.app_badge {width: 170px!important; padding-top: 5px;}
	}
	p {line-height: 1.7em;}
	a {overflow-wrap: break-word; text-decoration: underline; font-weight: bold;}
	ul {margin-bottom: 1em;
		li {position: relative; display: block; margin-bottom: 0.5em; padding-left: 1.2em; 
			&::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;}
			&:last-of-type {margin-bottom: 0;}
		}
	}
	blockquote{padding: 24px;background: rgb(0 0 0 / 4%);margin: 20px 0;
		p{
			&:last-of-type{margin-bottom: 0;}
		}
	}
	hr {border-top: 1px solid var(--cmn_write_box_theme_color); border-right: none;border-bottom: none;border-left: none; margin-bottom: 3em; margin-top: 3em;}
	strong {font-weight: 900; color: var(--cmn_write_box_theme_color);}
	&.single h2 , &.in_page h3 {position: relative; display: block; padding-bottom: 0.4em; padding-left: 1.1em; font-size: clamp(17px , 2vw , 19px); font-weight: bold; margin-bottom: 0.7em; margin-top: 3em; line-height: 1.4em; border-bottom: 1px solid var(--keyc); border-style: dashed; border-top: none; border-left: none; border-right: none; color:#323348;
		&::before {position: absolute; display: block; content: ""; left: 0; top: 0.4em; width: 0.6em; height: 0.6em; background-color: var(--keyc); transform: rotateZ(45deg);}
	}
	&.single h3 , &.in_page h4 {position: relative; display: inline-block; font-size: clamp(15px , 2vw , 17px); font-weight: bold; margin-bottom: 0.7em; margin-top: 1em; line-height: 1.4em; padding: 0.1em 0.7em 0.2em; border: 1px solid var(--keyc); color: var(--keyc);}
	&.single h4 , &.in_page h5 {position: relative; display: block; margin-top: 1.2em; margin-bottom: 0.2em; font-size: 1.05em; line-height: 1.4em; font-weight: bold; color: var(--keyc); padding-left: 0.7em;
		&::before { position: absolute; display: block; content: ""; top: 0.75em; left: 0; width: 0.3em; height: 0.6em; background-color: var(--keyc); transform: translateY(-50%); clip-path: polygon(0 0, 0% 100%, 100% 50%);}
	}
}

/*-- list style --*/
:root {--cmn_list_color: var(--keyc);}
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 {
			&::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; font-size:0.95em; line-height:1.4em;
			&::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; font-size:0.95em; line-height:1.4em;
			&::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;
			&::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 --*/

/* 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.4) 0;}

/* 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%;}
}



/* =header
-----------------------------------------------------------------------------------------*/
header{text-align:left;position:fixed;z-index:99;top:0;width:100%;display: flex;align-items: center;justify-content: flex-end; font-family: var(--font1);}

.headlogo{ position: absolute;left: 1.5%;top: 10px;width: 9%;z-index: 10;}
.headlogo img{ width: 100%;}

.toggle_nav,.nav,.global,.nav li,.nav li a{ height: 100%;}
.global{ width: 100%;margin-right:1.5vw;display: flex;}

.nav li a{ line-height:1em;font-size:20px; font-weight: 500; text-align:center;padding:20px 1em 15px ;position:relative;text-decoration: none;color: #000;display: flex;align-items: center;}

.nav li.sns a{ padding: 12px 1em 0;}
.nav li.sns a img{ width: 35px;}

.nav li a:hover,
.nav li a.active{ border-bottom: 2px solid #000;}

.nav li a.disactive {color: #999;}
.nav_trigger{display: none;}


@media only screen and (max-width: 768px){
	header {padding: 0;}
	header .headlogo{width: 20%;left: 4%;top: 11px;}	
	header .headlogo img{max-width: 100%;max-height: 100%;}
    
	.global{width:100%;position:fixed;z-index:10;top:0;left:0;overflow-y: hidden;padding-top:0;height:0;background-color:rgba(255,255,255,0.9);box-sizing: border-box;display: inherit;-webkit-transition: 1s ease;-moz-transition: 0.5s ease;-o-transition: 0.5s ease;-ms-transition: 0.5s ease;transition:0.5s ease;}
	.global li{width: 100%;display:inherit;}
	.nav-active .global{ height:100vh;padding-top:47px;}
	.nav li.sp_top{ display: inherit;}

	.toggle_nav{ height: auto;-webkit-transition: 0.2s ease;-moz-transition: 0.2s ease;-o-transition: 0.2s ease;-ms-transition: 0.2s ease;transition: 0.2s ease;}
	.nav{ margin-bottom:0;width:100%;height:inherit;}
	.nav li{ padding-right: 0;height: auto;}
	.nav li a:hover,nav li a.at{  border-bottom: none;}
	.nav li a{ width:100%;max-width:inherit;text-align:center;padding: 0.75em 7%;height: auto; font-size: 24px;}
    .nav li.sns a{ padding: 1em 7%;}
    .nav li.sns a img{ width: 30px;}
	.nav li a:hover,
	.nav li a.active{ color:#000;background-color:rgba(255,255,255,0.7);}

	/* Default navigation icon */
	.nav_trigger{display: block;position: fixed;width: 30px;height: 25px;right:3vw;top: 7px;z-index: 200;}
	.nav-active .nav_trigger{opacity: 0.7;}
	.nav_icon{display: inline-block;position: relative;width: 30px;height: 2px;background-color:var(--keyc2);-webkit-transition-property: background-color, -webkit-transform;transition-property: background-color, -webkit-transform;transition-property: background-color, transform;transition-property: background-color, transform, -webkit-transform;-webkit-transition-duration: 300ms;transition-duration: 300ms;}
	.nav_icon:before,
	.nav_icon:after{content: '';display: block;width: 30px;height: 2px;position: absolute;background:var(--keyc2);-webkit-transition-property: margin, -webkit-transform;transition-property: margin, -webkit-transform;transition-property: margin, transform;transition-property: margin, transform, -webkit-transform;-webkit-transition-duration: 300ms;transition-duration: 300ms;}
	.nav_icon:before{margin-top: -9px;}
	.nav_icon:after{margin-top: 9px;}
	.nav-active .nav_icon{background: rgba(0, 0, 0, 0);}
	.nav-active .nav_icon:before{margin-top: 0;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
	.nav-active .nav_icon:after{margin-top: 0;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}

	.nav li a:hover span.btm,
	.nav li a.active span.btm{ display:none;}
	.nav li a span.jp{ font-size:3vw;}
}


/* =foot
-----------------------------------------------------------------------------------------*/
footer{font-size:12px;position: relative;color: #fff; margin-top: 15vw;}
footer small{line-height: 1.5em;font-size: 12px;font-weight: bold;display: block;padding: 4vw 0;background-color:rgba(0,0,0,0.4);}

footer .bnr_box{font-size: 0;line-height: 0;padding: 60px 0;background-color: rgba(255,255,255,0.7);}
footer .bnr_box li{display: inline-block;margin: 3px 6px;width: 22%;max-width: 202px;}
footer .bnr_box li img{width:100%;/* border: 1px solid #fff; */}

footer .bnr_box li.fes_bnr{ border-left: 1px solid #3e5509;padding-left: 20px; margin-left: 20px;}

@media only screen and (max-width: 768px){
	footer{ margin-top: 75px;}

	footer .bnr_box{ padding:5% ; text-align: left;}
	footer .bnr_box li{ width: 48%; margin:0 1% 8px;}
	footer .bnr_box li:last-child{ margin-bottom: 0;}
	footer .bnr_box li a{}
	footer .bnr_box li img{}

    footer .bnr_box li.fes_bnr{ display: block; border-left: 0;  margin: 0 1%; padding: 10px 0 0; border-top: 1px solid #3e5500;width: 100%; max-width: initial;}
    footer .bnr_box li.fes_bnr a{width: 40%; display: block;}
        
	footer small{ font-size: 10px; padding:30px 0;}
}

/* =ページトップ
------------------------------------------------------------------------------------------*/
.page_top{margin: 0;text-align:center;position:fixed;right:3vw;bottom:2vw;z-index:10;transition: 0.3s;}
.page_top a{background-color:#e85799;border-radius: 50%;height:12vw;width:12vw;line-height:1.3em;color:#fff;font-size:1.2vw;text-decoration: none;display: flex;align-items: center;justify-content: center;font-weight: bold;filter: drop-shadow(0px 0px 0.4vw rgba(0,0,0,0.4));border: 0.4vw solid #fff;}
.page_top a:hover{text-decoration:none;opacity: 1;transform: scale(1.1);}
.page_top.off{bottom: -16vw;}


@media only screen and (max-width: 768px){
	.page_top a{height:22vw;width:22vw;line-height:1.3em;font-size:2.7vw;}
	.page_top.off{bottom: -24vw;}
}


/********************** ローダー *******************************/
/* アニメーション */
.loader_bg{ background-color:#fff; width:100%; height:100vh; position:fixed; top:0; left:0; z-index: 1000;}
.loader{background-image:url(../images/logo.webp);background-repeat : no-repeat; background-size:16%; background-position : 50% 46%; z-index:1001; position:fixed; top:0; left:0; width: 100%; height: 100%; opacity:.scheblock0; animation: anime_loader 1s; animation-fill-mode:both;}

.intro_loader .top_tit{  -ms-filter: blur(40px); filter: blur(40px);}
body.intro_loader:before{ transform: scale(1.5)}

@keyframes anime_loader {
    0%  { opacity:0;}
    100%  { opacity:1;}
}
.intro_on .loader{ animation:none; animation-fill-mode: inherit;}
.intro_on .top_tit{  -ms-filter: blur(0); filter: blur(0);}
body.intro_on:before{ transform: scale(1)}

/* 00 */

@media only screen and (max-width: 768px){
    .loader{ background-size:40%;}
}
/******* youtube *******/
.youtube{position:relative;width:100%;margin:0 auto;padding-top:56.25%;}
.youtube iframe{position:absolute;top:0;right:0;width:100%;height:100%;}


/* =共通
------------------------------------------------------------------------------------------*/
main{ width: 100%; } 
main img{ max-width: 100%;}

.container{ width:88%;max-width: 1100px;margin: 0 auto;}
.bg_filter{/*background-color: rgba(0,0,0,0.5);*/ padding: 5vw 0 0;}

@media only screen and (max-width: 768px){
	.bg_filter{  padding: 50px 0 0;}
}

/******* ボタン *******/
/*
.btn{ display: block;background-color: var(--keyc2);color:#fff;line-height: 1em;font-size: 20px;position: relative;text-align: center;padding: 1.5em 0;text-decoration: none;}
.btn::after{content: "";position: absolute;top: calc(50% - 3px);right: 4%;width: 4px;height: 4px;border: 1px solid;border-color: transparent #fff #fff transparent;transform: rotate(-45deg);}
*/
    .button { display: inline-flex; align-items: center; justify-content: center; background-color: black; border-radius: 100px; font-size: 30px; padding: 0.75em 5em; margin-top: 1em;font-family: var(--font1);  color: white;  }
    .button p { margin: 0;}
	.arrow{ position: relative;}

	.arrow:after{ display: block; content: ""; background-image:  url("../images/arrow_w.svg"); background-size: contain; width: 1em; height: 1em; position: absolute; right: 10%; top: 0; height: 100%; background-position: center; background-repeat: no-repeat;}

@media only screen and (max-width: 768px){
/*    .btn{ padding: 1.2em 0;font-size: 16px;}*/
	.button{ display: block; padding: 0.75em 0; font-size: 20px;}
}

/******* 見出し *******/
.tit{color: #e85799;line-height: 1em;font-size: 9vw;margin-bottom: 0.25em;}
.stit{ font-family: var(--font1); font-size: 5vw;line-height: 1.7em;;margin-bottom: 1em;font-weight: 500; border-bottom: 4px solid #000; display: inline-block;}

@media only screen and (max-width: 768px){
    .tit{ text-align: center;}
    .stit{ font-size:38px;line-height: 1.5em; margin-bottom: 1em;}
}


/* = page contents
------------------------------------------------------------------------------------------*/

/******* mainimg *******/
.top{ margin-bottom:5vw; position: relative;  line-height: 0; display: flex; justify-content: center;}
.top p{ margin: 0;}
.top_l{ width: 45%; position: relative;}
.top_l .photo img{ }

.top_r{ width:50%; min-width: 95vh; line-height: 0; position: relative; height: 100vh;}
.top_tit{ width: 100%; transition: 2s;position: absolute; width: 100%; top: 50%; transform: translate(0,-50%);}
.top_tit .subtit{ text-align: center; line-height: 1.5em; font-size: 0.9vw}
.top_tit .tit{ width:100%; margin: 0 auto 2vw;}
.top_tit .date{ width:95%; margin: 0 auto 2vw;}
.top_tit img{ width: 100%;}


@media only screen and (max-width: 768px){
    .top{  display: inherit; margin-bottom: 0px;position: inherit; overflow: inherit; height:auto;}
    .top_l{ width: 100%;}
    .top_l .photo{ position: inherit; transform: none;}
    .top_r{ width: 100%; position: inherit; margin:0; display: inherit; height:100vh; max-height: inherit; position: relative; z-index: 20; min-width: inherit;}
    .top_r .top_tit .add{ width: 90%; margin: 4em auto 2em;}
	.top_r .top_tit .add .btn{font-size: 16px; }
	
    .top_r .top_tit{}
	
    .top_r .tit{ width: 90%; margin: 0 auto 6vw; }
    .top_r .date{ width: 70%;}
}


/******* news *******/
.top_link{ display: flex;}
.news{ width: 100%;text-align: left;margin-bottom: 10vw;}
.news ul{ margin-bottom: 30px;}
.news li{ position: relative;margin-bottom: 0;transition:0.2s; border-bottom: 1px solid #333;font-size: 18px; line-height: 1.5em;}
.news li a{ padding: 1.5em 0;display: flex;color: #fff;}
.news li a p {margin-bottom: 0;}
.news li a p.news_date{color: var(--keyc); width: 7em;}
.news li a p.txt{ width: calc(100% - 7em);}

.news .news_more { display: block;width: 100%;padding: 20px;border: 1px solid var(--keyc);text-align: center;color:var(--keyc);letter-spacing: 0.1em;transition:0.2s;}
.news .news_more:hover{ opacity:0.8;}
.news li:hover{ opacity: 0.8;transition:0.2s;}
.news li{}

#news{
	.title_block{}
}

@media only screen and (max-width: 768px){
	.top_link{ display: inherit;margin-top: 0;margin-bottom: 70px;}
	.news{ width: 100%;padding: 0;margin: 0 0 100px;}
	.news ul{ margin-bottom: 10px;}
	.news li{ font-size: 16px; line-height: 1.5em;}
	
	.news li a {padding: 1em 0; display: inherit;}
	.news li a p.news_date{width: 100%;}
	.news li a p.txt{ width: 100%;}
	
	.news .news_more{ padding: 18px;position: inherit;display: block;}
	
}

/******* about *******/
.about{ text-align: center;margin-bottom: 10vw; background-color: rgba(199,141,192,0.1); padding: 7vw 0; line-height: 2.5em;font-size: 18px;}
.about .stit{ width: 94%;margin: 0 auto 3vw;}
.about .lead{font-weight: bold; font-size: 1.4em;}
.about .container p{ margin-bottom: 2em;}

@media only screen and (max-width: 768px){
    .bgw .container{ }
    .about{ text-align: left;margin-bottom: 60px; padding: 50px 0; font-size: 15px;}
	.about .lead{ font-size: 1.1em; text-align: center; padding-top:1em;}
    .about .container{  line-height: 2em;font-size: 16px;}
}

/******* story *******/
.story{ text-align: center;margin-bottom: 10vw;padding: 15vw 0;font-size: 1.5vw;line-height: 2em;}
.story .stit{  margin: 0 auto 1em;font-size: 1.5vw;}
.story p{ margin-bottom: 2em;}
.story p:last-of-type{ margin-bottom: 0;}

@media only screen and (max-width: 768px){
	.story{ padding: 60px 0;font-size: 16px;line-height: 2em;width: 90%;margin: 0 auto 100px;text-align: center;}
	.story .stit{ margin-bottom: 10px;}
	.story .container{ font-size: 15px;text-align: left;}
}
/******* story *******/

/******* cast *******/
.cast{position: relative;z-index: 1;text-align: center;margin-bottom: 15vw;}
.cast .container{ font-weight: bold;line-height: 2em;font-size: 16px;max-width: 1400px;}
.cast .cast_wrap{ margin-bottom: 9vw;}
.cast .cblock{ font-size: 18px;line-height: 2em; margin-bottom: 2em;}
.cast .cblock.pin{ margin-bottom: 0.5em;}
.cast .cblock.director{ font-size: 1.3em;}
.cast .yel{ color: var(--keyc);font-size: 0.8em;}
.cast .role{ font-size: 18px;}
.cast .txts{font-size: 0.75em;}

.cast_block{ display: flex; grid-gap: 3%; justify-content: center;flex-wrap: wrap;font-size: 20px;line-height: 1.5em;margin-bottom: 5vw;}
.cast_block figure{ line-height: 0;margin-bottom: 10px;}
.cast_block img{ width: 100%;}
.cast_block li{ width: 22.75%;font-size:20px;line-height: 1.5em;}
.cast_block li span{ font-size: 0.7em;display: block; line-height: 1.5em;}

.cast_comment{ border: 5px solid #666;padding: 3% 5%;width: 100%;max-width: 1100px;margin: 0 auto;}
.cast_comment h3{ font-size: 1.3em;line-height: 1.7em;margin-bottom: 1em;}
.cast_comment .txt{ text-align: left;}

.cast_note{margin-top: 3em;font-size: 0.8em;}

.cast_txt{ font-size: max(20px, 2vw) ;line-height: 2.5em; margin-bottom: 0;}

@media only screen and (max-width: 768px){
    .cast{ margin-bottom: 50px;}
	.cast .container{ font-size: 14px;}
	.cast .cast_wrap{margin-bottom: 8em;}
    .cast_block{ margin-bottom: 2em;}
    .cast_block li{ width: 48.5%;margin-bottom: 6%; font-size: 16px;}
	.cast .cblock{ font-size: 16px; line-height: 2em;}
	.cast_note{margin-top: 0em;font-size: 0.8em;}
	.cast .staff_row{ display: block;line-height: 1.7em;font-size: 0.9em;}
	.cast_comment{ padding: 5%;}
}

/*colorbox*/
.pop_block{   padding: 50px;text-align:left;line-height:1.7em;}
.pop_block .tit{ font-size: 26px;line-height: 1.5em;color: var(--keyc2);margin-bottom: 1em;}
.pop_block .txt_box{ margin-bottom:80px;}
.pop_block .txt_box:last-of-type{ margin-bottom:0;}
.pop_block img{ max-width:100%;}
.pop_block .txt_box .txts{ font-size: 0.7em;}

.prof_pop{ display:block;border:1px solid var(--keyc);color:var(--keyc);font-size:14px;line-height:1em;padding:0.7em 0;margin:1em auto 0;transition: 0.3s;text-decoration: none;}
.prof_pop:hover{ opacity: 0.7;}

@media only screen and (max-width: 769px){
    .pop_block{ padding: 20px 12px;}
    .pop_block .tit{ font-size: 20px;margin-bottom:0.5em;}
    .pop_block .txt_box{ margin-bottom: 28px;}
    
    .prof_pop{ margin-top: 0.3em;}
}

/******* tickets *******/
#tickets{background-color: rgba(114,38,42,0.05); padding: 5vw 0;}
#tickets .notes{ font-size: 14px;line-height: 1.7em;text-align: right;}

.scheblock{  margin-bottom: 20px; /*color: #fff;*/}

.scheblock h2{ width: 100%;max-width: 650px;margin: 0 auto 45px;}
.scheblock .lead{ text-align: center;}

.scheblock .date{ font-size: 80px;text-align: center;line-height: 1.2em;margin: 0;}
.scheblock .venue{ font-size: 35px;text-align: center;line-height: 1.5em;margin: 0 0 1.2em;}
.scheblock  span{ font-size: 0.5em;}
.scheblock .venue .maplink{ font-size: 0.5em; border: 1px solid var(--keyc2);padding: 0.25em 1em;
    margin-left: 1em;}

.hyougen{ border: 3px solid var(--keyc2); padding:3% 5%; margin-top: 2em;}
.hyougen h3{ color: var(--keyc2); font-weight: 500; font-size: 1.4em; line-height: 1.5em; text-align: center; margin-bottom: 1em;}

@media only screen and (max-width: 768px){
    .scheblock h2{ margin-bottom: 10px;}
	
	.scheblock .date{ font-size: 36px;}
	.scheblock .venue{font-size: 18px;line-height: 1.7em;}
	.scheblock .address{ font-size: 16px;}
}


/***** table *****/
.demo01{width:100%;font-size:18px;line-height:1em;overflow: hidden;border-radius: 1px;border-spacing: 0;border-collapse: collapse;margin-bottom: 30px;table-layout: fixed;}
.demo01.pc_only{ display: inline-table;}
.demo01 th{font-weight: bold;line-height: 1.5em;background-color: rgba(114,38,42,0.2);vertical-align: middle;padding: 1em 0;text-align: center;border-color: #ddd;}
.demo01 td{text-align: center;padding: 0.75em 0;font-weight: bold;line-height:1.5em;border-color: #ddd;background-color: rgba(255,255,255,0.2);vertical-align: middle;}
.demo01 .sat{ background-color:rgba(0,73,100,0.5);}
.demo01 .sun{ background-color:rgba(130,0,0,0.5);}
.demo01 th.month{ font-size: 24px;width: 20%;}
.demo01 th.date{width: 1.8%;border-left-width: 0;}
.demo01 td.time{  background-color:rgba(255,255,255,0.3);}
.demo01 td.off{ background-color: rgba(30,30,30,0.2);}

.demo01 .txts{ font-size: 0.7em;}

@media only screen and (max-width: 768px){
    .demo01{ margin-bottom: 10px;}
    .demo01.pc_only{ display: none;}
	.demo01.sp_only{ display: inline-table!important;}
	.demo01{ margin-bottom: 20px;}
	.demo01 tr{ border-color: #ddd;}	
	.demo01 th{border-right: 1px solid #ddd;padding: 5px 0;font-size: 16px;line-height: 1.5em;width: 18%;}
	.demo01 td{border-left: 1px solid #ddd;border-right: 1px solid #ddd;border-top-width: 1px;border-bottom-width: 0;padding: 16px 0;font-size: 16px;line-height: 1.3em;}
	.demo01 th.month{ font-size: 20px;width: 28%;line-height: 1.5em;}
	.demo01 .txts{ font-size: 13px;}
    
}

/***** price *****/
#tickets .note{ font-weight: 400;font-size: 14px;line-height: 1.7em;}

#tickets .price{margin: 60px auto 5vw;}
#tickets .price .price_block{ display: flex; justify-content: space-between;}

#tickets .price .price_list{ display: table;width:100%;margin-bottom: 40px;}
#tickets .price .price_list:first-of-type{ border-top: 1px solid #666;}
#tickets .price .price_list .price_l{ display: table-cell;vertical-align: middle;border-bottom: 1px solid #666;text-align: center;font-size: 20px;line-height: 1.5em;width: 50%;color: var(--keyc);}
#tickets .price .price_list .price_l h2{ font-weight: bold;}
#tickets .price .price_list .price_l span{font-size: 0.7em;line-height: 1.5em;}
#tickets .price .price_list .price_r{ display: table-cell;}

#tickets .price .block{width: 100%;display: flex;align-items: center;padding: 20px 0;border-bottom: 1px solid #666;font-weight: bold;}
#tickets .price .block .left{ width: 0%;font-size: 24px;line-height: 1.5em;text-align: left;}
#tickets .price .block .left span{ font-size: 0.8em;}
#tickets .price .block .right{width: 100%;text-align: center;font-size: 26px;line-height: 1.5em;}
#tickets .price .block .right span{ font-size: 0.6em;line-height: 1.5em;}

#tickets .price .areamap{ width: 24%;}

.ticket_link{ background-color: #fff;text-align: center;color: #000;padding: 3% 5%;margin-bottom: 40px;font-size: 20px;line-height: 1.5em;font-weight: bold;display: flex;justify-content: space-between;align-items: center;}

.ticket_link .ticket_l{ width:65%;text-align: left;line-height: 1.7em;}
.ticket_link .ticket_l strong{ font-size: 24px;line-height: 1.7em;display: block;color: var(--keyc2);}
.ticket_link .ticket_l span{ font-size: 12px; display: block; line-height: 1.6em; padding-top: 0.5em;} 
.ticket_link .ticket_r{ width:30%;max-width: 400px;background-color: var(--keyc2);}
.ticket_link .ticket_r a{ display: block;text-align: center;padding: 1.5em 0;text-decoration: none;color:#fff;font-size: 18px;font-weight: bold;display: block;}

.ticket_link.cs{ background-color: transparent;border: 1px solid #ccc;color: #ccc;font-size: 20px;}
.ticket_link.cs .ticket_l{color: #666;}
.ticket_link.cs .ticket_l strong{ color: #666;}
.ticket_link.cs a{ background-color: #ccc;color: #999;}
.ticket_link.cs a{pointer-events: none;}

.ticket_link.end{ filter: grayscale(1) brightness(0.5);pointer-events: none;}

#tickets .t_buy{padding: 30px 20px;border: 1px solid #600;}
#tickets .playguide{margin-bottom:30px;word-break: break-all;}
#tickets .playguide .stit{ color: #600;font-weight: bold;font-size: 24px;margin-bottom: 1em;}
#tickets .playguide .sstit{ font-size:20px;font-weight:bold;line-height:1.5em;margin-bottom:0.5em;text-align: center;background-color: #600;color: #fff;padding: 0.5em 0;}
#tickets .playguide .playg_box{ margin-bottom: 30px;}
#tickets .playguide .playg_box:last-of-type{ margin-bottom: 0;}
#tickets .playguide dl{ display: flex;flex-wrap: wrap;width: 100%;margin-bottom:10px;font-weight:bold;}
#tickets .playguide dt{background-color: #fff;width: 30%;display: flex;align-items: center;justify-content: center;margin-bottom: 4px;}
#tickets .playguide dd{background-color: rgba(255,255,255,0.5);padding:20px 30px;text-align:left;width: 70%;margin-bottom: 4px;}

.guide_btn{ display: block;text-align: center;margin: 3em auto;width: 100%;max-width: 400px;background-color:var(--keyc2);color: #fff;text-decoration: none;border-radius: 20vw;padding: 1em 0;}

.ticket_list{ margin-bottom: 10vw;padding: 60px 0 0;}

.ticket_note{font-size:14px;line-height: 1.6em;}

#tickets ul li.goods_block{margin: 20px 0 60px;background: #666;}
#tickets ul li.goods_block .flex_box{display: flex;gap: 5%;padding: 3%;}
#tickets ul li.goods_block .flex_box .left{width: 45%;}
#tickets ul li.goods_block .flex_box .left img{max-width: 500px;width: 100%;}
#tickets ul li.goods_block .flex_box .right{width: 50%;text-align: right;}
#tickets ul li.goods_block .right p{font-size: 16px;}
#tickets ul li.goods_block .right p:last-child{margin-bottom:0;}
#tickets ul li.goods_block .right .head_3{text-align: left;border-bottom: 1px solid #666;padding-bottom: 4px;display: block;font-size:20px;line-height: 1.7em;margin-bottom: 1em;}

@media only screen and (max-width: 768px){
	#tickets ul li.goods_block .flex_box {flex-direction: column;}
	#tickets ul li.goods_block .flex_box .left{width: 100%;}
	#tickets ul li.goods_block .flex_box .left img{max-width: 768px;width: 100%;}
	#tickets ul li.goods_block .flex_box .right{width: 100%;margin: 1em 0 0;}
	#tickets ul li.goods_block .right .head_3{ font-size: 18px;line-height: 1.7em;}
	#tickets ul li.goods_block p{ font-size: 14px;line-height: 1.6em;}
	
	
	.ticket_list{ margin-bottom: 60px;padding: 0;}
	#tickets .price .price_list:first-of-type{ border-top: none;}
}

@media only screen and (max-width: 768px){
    #tickets .price{ margin: 30px auto 50px;}
	
	#tickets .price .price_block{ display: inherit;}
	
    #tickets .price .price_list{ display: inherit;margin-bottom: 15px; width: 100%;}
    #tickets .price .price_list .price_l{display: inherit;width: 100%;font-size: 20px;padding: 0.5em 0;}
    #tickets .price .price_list .price_l span{ display: inline-block;}
    #tickets .price .price_list .price_r{display: inherit;}    
    #tickets .price .block{ padding: 10px 0;}
    #tickets .price .block .left{ font-size: 18px;}
    #tickets .price .block .right{ font-size: 20px;}
	
	#tickets .t_buy{ padding: 10px;}
	#tickets .playguide .stit{ font-size: 19px;margin:0.2em 0 0.5em 0;}
	#tickets .playguide dl{ display: inherit;width: 100%;margin-bottom:10px;font-weight:bold;}
	#tickets .playguide dt{width: 100%;display: inherit;padding: 10px;margin-bottom: 0;}
	#tickets .playguide dd{width: 100%;padding:10px;margin-bottom: 10px;}
	
	.ticket_link{ font-size: 16px;margin-bottom: 20px;padding: 15px;display: inherit;}
	.ticket_link .ticket_l{width:100%;}
	.ticket_link .ticket_l strong{ font-size: 18px;}
	.ticket_link .ticket_r{ width: 100%;max-width: initial;}
	.ticket_link .ticket_r a{ padding: 1em 0;margin-top: 15px;}
    
    .ticket_link.end{ font-size: 16px;}
    
    .iwaigi{ padding: 5%;}
    .iwaigi h2{ text-align: left;}
	
	#tickets .price .areamap{ width: 65%; margin: 0 auto 1em;}
}

/***** notice *****/
#notice{padding: 60px 0;}
#notice ul{list-style: disc;padding-left: 1.5em;}
#notice li{ margin-bottom: 1em;}

/***** FAQ *****/
#faq dl{ display: flex;flex-wrap: wrap;margin-bottom: 1em;}
#faq dt{ width: 2em;}
#faq dd{ width: calc(100% - 2em);}



/* NEWS */

#news_in{ padding: 10vw 0;}

#news_in .news_area dl{ background-color: rgba(13,14,19,0.5);margin-bottom: 3vw;padding: 5%;}
#news_in .news_area dt{ border-bottom: 1px solid var(--keyc);color: var(--keyc);font-weight: bold;font-size: 24px;line-height: 1.5em;margin-bottom: 1em;padding-bottom: 0.7em;}

#news_in .news_area img{ max-width: 100%;}

@media only screen and (max-width: 768px){
	#news_in .news_area{ margin-bottom:25px;}
	#news_in .news_area dl{}
	#news_in .news_area dt{ padding-left:0;font-size:16px;line-height:1.3em;margin-bottom:5px;}
	#news_in .news_area dt span{  width:6.4em;letter-spacing:0.02em;position:relative;left:0;top:0;font-size:16px;margin-bottom:8px;}
}


    /* メインコンテナ */

    /* === About セクション === */
    .about-section {margin-bottom: 15vw; }
    .about-title {  font-weight: 800;width: 100%;font-size:6vw; margin-bottom: 1em; }
    .about-title-main{ line-height: 1.7em; margin-bottom:0.3em;  letter-spacing:0.2em;  display: inline-block; position: relative;}
.about-title-main:after{ display: block; content: ""; width: 100%; border-bottom: 0.3vw solid var(--keyc); position: absolute; bottom: 0;}
    .about-title-sub { line-height: 1.7em; margin-bottom: 0.6em; font-size:0.4em;}
    .about-title-sub2{ line-height: 1.7em; font-size: 0.4em;}
    .about-title-sub2 .large { font-size:2em;}

    .about-description { font-weight: 600; line-height: 2em; font-size: 1.5vw; }
    .about-description p { }
    .about-description p:last-child { margin-bottom: 1em;}

@media only screen and (max-width: 768px){
    .about-section {margin-bottom: 120px; }
	
	.about-content{ width: 90%; margin: 0 auto; }
	.about-title { font-size: 9vw;}
	.about-title-main{}
	.about-title-main:after{ border-width: 1px;}
	.about-title-sub{ font-size: 0.57em; margin-bottom: 0.2em; line-height:2em;}
	.about-title-sub2{font-size: 0.57em;}
    .about-title-sub2 .large { font-size:1.5em;}
	
	.about-description{ text-align: left; font-size: 16px;}	
}

    /* === News セクション === */
    .news-section { margin-bottom: 15vw;  }

    .news-card { background-color: white; border-radius: 20px; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 3.5% 5%; margin-bottom: 20px;
	&.disactive{pointer-events: none;}
&.news_single{padding: 3%;}}
    .news-card-content { display: flex; align-items: center; gap: 30px; width: 90%;text-align: left; color: #000;}
    .news-date { font-family: var(--font1); color: var(--keyc); font-size: 30px; line-height: 1em;;}
    .news-date-year { margin-bottom: 0; font-size: 0.7em;}
    .news-date-day {  margin: 0;}
	.news-text { font-weight: 500; font-size: 20px; line-height: 1.7em;  margin: 0; }
    .news-arrow {  width: 5%;}


@media only screen and (max-width: 768px){
	.news-section{ margin-bottom: 150px;}
	
	.news-card{ padding: 5%; border-radius: 10px; margin-bottom: 10px;
		&.news_single{padding: 5%;}}
    .news-card-content{ display: block;}
	.news-date{ display: flex; align-items: baseline; font-size: 20px;margin-bottom: .5em;
	&.top-news{margin-bottom: .2em;}}
	.news-date-year{ margin-right: 0.2em; font-size: 0.8em;}
	.news-text{ font-size: 16px;line-height: 1.4em;}
    .news-arrow {  width: 7%;}	
}


    /* === Cast & Staff セクション === */
    .cast-staff-section { margin-bottom: 15vw; margin-top: -100px; padding-top: 100px;}

    /* Cast セクション */
    .cast-section { margin-bottom: 8em; }
    .cast-title { font-family: var(--font1); font-size:45px; font-weight: 500; line-height: 1.7em; margin-bottom: 1.5em; display: flex; align-items: center; gap:1em; justify-content: center;}
	.cast-title:before,
	.cast-title:after{ display: block; content: ""; border-bottom: 2px solid #000; width: 2em;}

    .cast-group { margin-bottom: 6em;  }
    .cast-group-title {  font-size: 25px;  text-align: center; margin: 0 0 1em; font-weight: 600;}
    .cast-members { display: flex; gap: 90px; justify-content: center; flex-wrap: wrap;}
    .cast-members-row { display: flex; flex-direction: column; gap: 1.5em;}
    .cast-member-role {  margin-bottom: 0; font-size: 18px; line-height: 1em; }
    .cast-member-name {  font-weight: 500; font-size: 30px; line-height: 1.5em; margin: 0;}

    /* Staff セクション */
    .staff-section { }
    .staff-credit { font-weight: 500; line-height: 60px; font-size: 20px; line-height: 1.7em; margin-bottom: 2em;}
    .staff-credit p { margin: 1em 0;}

	.xlink .button{ font-size: 3vw;}

@media only screen and (max-width: 768px){
	.cast-staff-section{ margin-bottom: 100px; margin-top: -80px; padding-top: 80px;}
	
	.cast-title{ font-size: 25px;}	

	.cast-members{ gap: 1.5em;}
	.cast-members.sp_four .cast-member{ width: 40%;}
	.cast-group{ margin-bottom: 4em;}
	.cast-group-title{ font-size: 18px;}
	.cast-member-role { font-size: 14px;}	
	.cast-member-name { font-size: 20px;}
	
	.staff-credit{ font-size: 16px;}
	
	
	.xlink .button{ font-size: 1.5em;}
}

/* =colorbox
------------------------------------------------------------------------------------------*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;}
#cboxOverlay{position:fixed;width:100%;height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;}
.cboxIframe{width:100%;height:100%;display:block;border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}
/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:var(--keyc2);}
#colorbox{outline:none;}
   /* #cboxContent{margin-bottom:60px;overflow:visible;}*/
    #cboxContent{margin-right:60px;overflow:visible;margin-bottom:0;}
        .cboxIframe{background:#000;}
        #cboxError{padding:50px;border:1px solid #ccc;}
        #cboxLoadedContent{ /*background-color: var(--keyc2);*/ position:relative;z-index:10000;}
        #cboxLoadingGraphic{ /*background:url(../images/loading.gif) no-repeat center center;*/}
        #cboxLoadingOverlay{/*background:var(--keyc2);*/}
        #cboxTitle{position:absolute;top:-22px;left:0;color:#000;}
        #cboxCurrent{position:absolute;top:-22px;right:205px;text-indent:-9999px;}
        #cboxSlideshow, #cboxClose{text-indent:-9999px;width:40px;height:100%;position:absolute;top:0;background:url(../images/controls2.png) no-repeat 0 0;}
		
        #cboxClose{background-position:7px 0;right:-50px;border:0;outline:none;}
        #cboxClose:hover{background-position:-40px 0;}


@media screen and (max-width: 768px){#cboxContent{ margin-right:0;margin-bottom:50px;}
#cboxClose{ right:0;top:inherit;bottom:-35px;height: 22px;}
}


@media screen and (max-width: 768px){.goods_notice{ 
    margin-bottom: 60px;font-size: 18px;margin-top: -4vw;}
}

/************* ANIMATIONS ***************/

.anime{ position:relative;opacity:0;}
@keyframes imageAnimation{0%{opacity: 0;animation-timing-function: ease-in;}
  10%{opacity: 1;animation-timing-function: ease-out;}
  25%{opacity: 1;}
  37%{opacity: 0;}
  100%{opacity: 0;}
}

/* SLIDE BOX ANIMATION */
@keyframes play{from {transform: translateX(-100%);opacity: 0;}
  to {transform: translateX(0);opacity: 1;}
}
@keyframes maskOut{from {transform: translateX(0);}  
  to {transform: translateX(101%);}
}

.play.blkin{animation-name: play;animation-duration: .4s;animation-fill-mode: forwards;animation-timing-function: cubic-bezier(.8,0,.5,1);position: relative;}
.play.blkin:before{animation-name: maskOut;animation-duration: .4s;animation-delay: .4s;animation-fill-mode: forwards;animation-timing-function: cubic-bezier(.8,0,.5,1);content: '';position: absolute;top: 0;left: 0;z-index: 1000;width: 100%;height: 100%;background: #333;}

.play.fade_up {animation-fill-mode:both;animation-duration:1.5s;animation-name: fadeInUp;visibility: visible !important;}

@-webkit-keyframes fadeInUp{0%{opacity: 0;-webkit-transform: translateY(100px);} 
    100%{opacity: 1;-webkit-transform: translateY(0);}
}
@keyframes fadeInUp{0%{opacity: 0;-webkit-transform: translateY(100px);-ms-transform: translateY(100px);transform: translateY(100px);}
 100%{opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
}

.play.fade_in{animation-fill-mode:both;animation-duration:3s;animation-name: fadeIn;visibility: visible !important;}
@-webkit-keyframes fadeIn{0%{opacity: 0;}
 100%{opacity: 1;}
}
@keyframes fadeIn{0%{opacity: 0;}
 100%{opacity: 1;}
}



  /******* guide *******/
  #guide{margin-bottom: 15vw;}
  #guide{background-color: rgba(0, 0, 0, 0.50);}
  #guide ul li.block:not(:last-of-type){margin-bottom: 3em;}
  #guide ul li.block p:last-child{margin-bottom:0;}
  #guide ul li.block .head_3{padding-bottom: 4px;border-bottom: 1px solid #666;display: block;font-size: 1.3em;line-height: 1.7em;margin-bottom: 1em;}
  
  @media only screen and (max-width: 768px){
    #guide{margin-bottom: 90px;}
    #guide ul li.block .head_3{ font-size: 18px;line-height: 1.7em;}
    #guide ul li.block p{ font-size: 14px;line-height: 1.6em;}
}