@charset "utf-8";

/*----------------------------------------------------------------
 MainLayout
 -----------------------------------------------------------------
 c/p
 <link href="./common/css/layout.css" rel="stylesheet" type="text/css" media="screen,print" />
----------------------------------------------------------------*/


/*----------------------------------------------------------------
 custom properties
----------------------------------------------------------------*/
:root {
	/* colors */
	--text-color		: #ffffff;
	--main-color		: #fff600;
	--sub-color			: #303030;
	--bg-color			: #1c1c1c;

	/* width */
	--content-width		: 90vw;

	/* height */
	--header-height		: 80px;

	/* font */
	--font-size			: 1.3rem;
	--font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro",'Hiragino Kaku Gothic Pro',"メイリオ", Verdana, "ＭＳ Ｐゴシック", sans-serif;

	--line-height		: 1.8;
}

@media screen and (min-width: 769px) {
:root {
	/* width */
	--content-width		: 710px;
	/* font */
	--font-size			: 1.6rem;
}
}

/*----------------------------------------------------------------
 base
----------------------------------------------------------------*/
html,body{
	font-size			: 62.5%; /* 10px */
}
body{
	line-height			: var(--line-height);
	font-size			: var(--font-size);
	font-family			: var(--font-family);
	font-weight: 500;
	color				: var(--text-color);
}


/* inline element
-----------------------------------------------------*/
/* ruby
----------------------------------*/
rt { font-size: 0.6em; }

/* link
----------------------------------*/
a{
	text-decoration		: underline;
	color				: inherit;
}
a:hover{ text-decoration: none; }

/* block element
-----------------------------------------------------*/
ul>li{ list-style: none; }

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

/* separater line
-----------------------------------------------------*/
hr.separater{ display: none; }

/* anchor(pagetop)
-----------------------------------------------------*/
p.anchor{
	visibility			: hidden;
	position			: absolute;
	top					: 0px;
	left				: 0px;
}
/* br
-----------------------------------------------------*/
@media screen and (min-width: 768px) { .br_sp{ display: none; } }

/* hide
-----------------------------------------------------*/
@media screen and (max-width: 767px) { [data-hide=sp]{ display: none; } }
@media screen and (min-width: 768px) { [data-hide=pc]{ display: none; } }

/* view
-----------------------------------------------------*/
@media screen and (max-width: 767px) { [data-show=sp]{ display: block; } }
@media screen and (min-width: 768px) { [data-show=pc]{ display: block; } }

/* ルビ
-----------------------------------------------------*/

/* onstage
-----------------------------------------------------*/
.onstage{
	position			: fixed;
	right				: 0;
	bottom				: 0;
	z-index				: 100;
}
.onstage>a{
	display				: block;
	width				: 100px;
	height				: 60px;
	background			: url(../images/onstage.png) left top /cover no-repeat;
	text-indent			: -9999px;
	overflow			: hidden;
}
@media screen and (min-width: 768px) {
.onstage>a{
	width				: 200px;
	height				: 120px;
}
}


/* row
-----------------------------------------------------*/
.row{
	display				: flex;
	flex-direction		: column;
}
@media screen and (min-width: 769px) {
.row{ flex-direction: row; }
}


/* btn
-----------------------------------------------------*/
.btn{
	display				: block;
	margin				: 20px auto 0 auto;
	border				: 1px solid transparent;
	border-radius		: 30px;
	padding				: 0.8em 1em;
	background			: var(--main-color);
	text-align			: center;
	text-decoration		: none;
	font-size			: 1.3rem;
	font-weight			: bold;
	color				: var(--sub-color);
	line-height: 1.4;
}
.btn:hover{ opacity: 0.8; }
.btn i{ margin: 0 5px 0 0; }
@media screen and (min-width: 769px) {
.btn{
	max-width			: 470px;
	font-size			: 1.8rem;
}
}

/* btn-nolink
-----------------------------------------------------*/
.btn-nolink{
	display				: block;
	margin				: 20px auto 0 auto;
	border				: 1px solid transparent;
	border-radius		: 30px;
	padding				: 0.8em 1em;
	background			: #666;
	text-align			: center;
	text-decoration		: none;
	font-size			: 1.3rem;
	font-weight			: bold;
	color				: #FFF;
	line-height: 1.4;
}
.btn-nolink i{ margin: 0 5px 0 0; }
@media screen and (min-width: 769px) {
.btn-nolink{
	max-width			: 470px;
	font-size			: 1.8rem;
}
}

/* select-lang
-----------------------------------------------------*/
.lang{
	position: fixed;
	right: 20px;
	top: 15px;
	z-index: 100;
}
.lang ul{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
}
.lang ul li{
	margin				: 0 0 0 5px;
	text-align			: center;
}
.lang ul li a,
.lang ul li span{
	display				: inline-block;
	border				: 1px solid var(--main-color);
	border-radius		: 15px;
	padding				: 4px 13px 3px 13px;
	text-decoration		: none;
	line-height			: 1;
	font-size			: 1.4rem;
	font-weight			: bold;
	color				: var(--main-color);
}
.lang ul li a:hover,
.lang ul li span{
	background			: var(--main-color);
	color				: var(--bg-color);
}
.lang ul li .disable{
	background: #999;
	border				: #999;
	opacity: 0.5;
}
@media screen and (min-width: 769px) {
.lang{
	right: 50px;
}
}


/*----------------------------------------------------------------
 layout
----------------------------------------------------------------*/
/*-----------------------------------------------------
 wrap
-----------------------------------------------------*/
.wrap{
	position			: relative;
}

#wrap{
	width				: 100%;
}

/*-----------------------------------------------------
 area
-----------------------------------------------------*/
.area{
	position			: relative;
	clear				: both;
}

#header{
	--header-height: 100vh;
	width				: 100%;
	height				: var(--header-height);
}
@media screen and (min-width: 768px) {
#header{
	--header-height: 100vh;
	min-height			: 800px;
}
}

#footer{
	background			: var(--sub-color);
	font-size			: 1.1rem;
}
@media screen and (min-width: 768px) {
#footer{
	text-align			: center;
	font-size			: 1.2rem;
}
}

/*-----------------------------------------------------
 container
-----------------------------------------------------*/
.container{
	position			: relative;
	clear				: both;
	margin				: 0 auto;
	width				: var(--content-width);
	padding: 1px;
}
@media screen and (min-width: 768px) {
.container.wide{ width: 92%; }
}
@media screen and (min-width: 1150px) {
.container.wide{ width: 1110px; }
}


/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/

/*-----------------------------------------------------
 header
-----------------------------------------------------*/
/* mv
-----------------------------------------------------*/
#header .mv{
	position			: absolute;
	left				: 0;
	top					: 0;
	z-index				: 1;
	width				: 100%;
	height				: var(--header-height);
}
#header .mv img{
	width				: 100vw;
	height				: var(--header-height);
	object-fit			: cover;
}
@media screen and (min-width: 768px) {
#header .mv img{
	min-height			: 800px;
}
}
/* theme
-----------------------------------------------------*/
#header .theme{
	position			: absolute;
	top					: 50%;
	z-index				: 2;
}
@media screen and (max-width: 767px) {
#header .theme{
	transform			: translateY(-50%);
	width				: 100%;
	text-align			: center;
	padding				: 0 5vw;
}
}
@media screen and (min-width: 768px) {
#header .theme{
	position			: absolute;
	top					: 50%;
	left				: 50%;
	transform			: translateY(-50%) translateX(-50%);
	padding				: 0 0 40px 0;
}
#header .theme img{
	width				: 80vw;
	max-width			: 1040px;
}
}

/* information
-----------------------------------------------------*/
#header .information{
	overflow			: hidden;
	position			: absolute;
	bottom				: 0;
	z-index				: 10;
	width				: 100%;
	background			: var(--sub-color);
	text-align			: center;
	line-height			: 40px;
	font-size			: 1.6rem;
	font-weight			: bold;
}
#header .information a{
	text-decoration		: none;
	border-bottom		: 1px dotted #FFF;
}
#header .information a:hover{ border-bottom: none; }

@media screen and (max-width: 767px) {
#header .information p:after {
	content				: "";
	white-space			: nowrap;
	padding-right		: 50px;
}

#header .information p {
	margin				: 0;
	display				: inline-block;
	padding-left		: 100%;
	white-space			: nowrap;
	-webkit-animation-name				: marquee;
	-webkit-animation-timing-function	: linear;
	-webkit-animation-duration			: 10s;
	-webkit-animation-iteration-count	:infinite;
	-moz-animation-name				: marquee;
	-moz-animation-timing-function	: linear;
	-moz-animation-duration			: 10s;
	-moz-animation-iteration-count	: infinite;
	-ms-animation-name				: marquee;
	-ms-animation-timing-function	: linear;
	-ms-animation-duration			: 10s;
	-ms-animation-iteration-count	: infinite;
	-o-animation-name				: marquee;
	-o-animation-timing-function	: linear;
	-o-animation-duration			: 10s;
	-o-animation-iteration-count	: infinite;
	animation-name				: marquee;
	animation-timing-function	: linear;
	animation-duration			: 10s;
	animation-iteration-count	: infinite;
}
}

@-webkit-keyframes marquee {
  from   { -webkit-transform: translate(0%);}
  99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
  from   { -moz-transform: translate(0%);}
  99%,to { -moz-transform: translate(-100%);}
}
@-ms-keyframes marquee {
  from   { -ms-transform: translate(0%);}
  99%,to { -ms-transform: translate(-100%);}
}
@-o-keyframes marquee {
  from   { -o-transform: translate(0%);}
  99%,to { -o-transform: translate(-100%);}
}
@keyframes marquee {
  from   { transform: translate(0%);}
  99%,to { transform: translate(-100%);}
}



/* information
-----------------------------------------------------*/
#information{
overflow: hidden;
		width: 100%;
}
#information .plus{
	background: var(--main-color);/* #575302; */
	padding: 10px 0;
	color			: #000000;
	font-size			: 1.6rem;
	text-align			: center;
}

@media screen and (max-width: 767px) {
#information .plus p {
	width: var(--content-width);
	display: block;
	margin: 0 auto;
	font-size: 1.3rem;
}
}
#information .news{
	background			: var(--sub-color);
	text-align			: center;
	line-height			: 40px;
	font-size			: 1.6rem;
	font-weight			: bold;
}
#information .news a{
	text-decoration		: none;
	border-bottom		: 1px dotted #FFF;
}
#information .news a:hover{ border-bottom: none; }

@media screen and (max-width: 767px) {
#information .news p:after {
	content				: "";
	white-space			: nowrap;
	padding-right		: 50px;
}

#information .news p {
	margin				: 0;
	display				: inline-block;
	padding-left		: 100%;
	white-space			: nowrap;
	-webkit-animation-name				: marquee;
	-webkit-animation-timing-function	: linear;
	-webkit-animation-duration			: 10s;
	-webkit-animation-iteration-count	:infinite;
	-moz-animation-name				: marquee;
	-moz-animation-timing-function	: linear;
	-moz-animation-duration			: 10s;
	-moz-animation-iteration-count	: infinite;
	-ms-animation-name				: marquee;
	-ms-animation-timing-function	: linear;
	-ms-animation-duration			: 10s;
	-ms-animation-iteration-count	: infinite;
	-o-animation-name				: marquee;
	-o-animation-timing-function	: linear;
	-o-animation-duration			: 10s;
	-o-animation-iteration-count	: infinite;
	animation-name				: marquee;
	animation-timing-function	: linear;
	animation-duration			: 10s;
	animation-iteration-count	: infinite;
}
}

@-webkit-keyframes marquee {
  from   { -webkit-transform: translate(0%);}
  99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
  from   { -moz-transform: translate(0%);}
  99%,to { -moz-transform: translate(-100%);}
}
@-ms-keyframes marquee {
  from   { -ms-transform: translate(0%);}
  99%,to { -ms-transform: translate(-100%);}
}
@-o-keyframes marquee {
  from   { -o-transform: translate(0%);}
  99%,to { -o-transform: translate(-100%);}
}
@keyframes marquee {
  from   { transform: translate(0%);}
  99%,to { transform: translate(-100%);}
}

/*-----------------------------------------------------
 background skew
-----------------------------------------------------*/
.section,#footer{
	position			: relative;
	padding				: 17.5vw 0 0 0;
}
.section{
	min-height: 500px;
}
.section:after{
	content				: '';
	position			: absolute;
	left				: 0;
	bottom				: -17.5vw;
	z-index				: -1;
	width				: 100%;
	height				: 100%;
	transform			: skewY(-10deg);
	transform-origin	: top left;
}

@media screen and (min-width: 768px) {
.section,#footer{ padding: 12vw 0 0 0; }
.section:after{
	transform			: skewY(-7deg);
	bottom				: -12vw;
}
}


/*-----------------------------------------------------
 contents
-----------------------------------------------------*/
#contents h2{
	text-align			: center;
	font-size			: 1.8rem;
	font-weight			: bold;
	color				: var(--main-color);
}
@media screen and (min-width: 768px) {
#contents h2{ font-size: 3rem; }
}


#contents h3{
	margin: 20px 0;
	line-height: 1.3;
	font-weight: bold;
	font-size: 1.8rem;
	text-align: center;
}
@media screen and (min-width: 768px) {
#contents h3{
	margin: 40px 0;
	font-size: 3rem;
}
}


/* outline-list
-----------------------------------------------------*/
#contents .outline-list		{ margin: 20px 0 40px 0; }
#contents .outline-list li	{ margin: 0 0 5px 0; }

#contents .outline-list dl{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
	justify-content		: flex-start;
}
#contents .outline-list dl>dt{ flex: 0 0 70px; }
#contents .outline-list dl>dt span{
	display				: block;
	margin				: 5px 0 0 0;
	padding				: 2px 0;
	border-radius		: 10px;
	background			: var(--text-color);
	text-align			: center;
	line-height			: 1;
	font-size			: 1rem;
	font-weight			: bold;
	color				: var(--bg-color);
}
#contents .outline-list dl>dd{ padding: 0 0 0 10px; }

#contents .outline-list small,
#contents .outline-list p	{ font-size: 1rem; }
#contents .outline-list img	{ margin: 0 5px 0 0; }

@media screen and (min-width: 768px) {
#contents .outline-list		{ margin: 40px 0; }
#contents .outline-list li	{ margin: 0 0 10px 0; }

#contents .outline-list dl{ align-items: flex-start; }
#contents .outline-list dl>dt{ flex: 0 0 80px; }
#contents .outline-list dl>dt span{
	margin				: 3px 0 0 0;
	border-radius		: 20px;
	padding				: 5px 0;
	font-size			: 1.4rem;
}
#contents .outline-list dl>dd{ padding: 0 0 0 15px; }
#contents .outline-list small,
#contents .outline-list p{ font-size: 1.4rem; }
}



/* return
-----------------------------------------------------*/
#contents .return{ margin: 50px 0 0 0; }
@media screen and (min-width: 768px) {
#contents .return{ margin: 100px 0 0 0; }
}

/* movie-wrap
-----------------------------------------------------*/
#contents .movie-wrap{ margin: 50px 0; }
#contents .movie-wrap iframe{
	width				: 100%;
	height				: 100%;
	aspect-ratio		: 16 / 9;
}

/* case-list
-----------------------------------------------------*/
#contents .case-list>ul{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
	justify-content		: flex-start;
	flex-wrap			: wrap;
	gap					: 15px;
}
#contents .case-list>ul>li{
	flex				: 0 0 calc(50% - 9px);
	margin				: 0 0 20px 0;
}
#contents .case-list>ul img{ border-radius: 10px; }
#contents .case-list>ul .main{
	margin				: 15px 0 4px 0;
	font-weight			: bold;
	font-size			: 1.5rem;
	line-height			: 1.5;
}
#contents .case-list>ul .sub{
	margin				: 0 0 5px 0;
	font-size			: 1.2rem;
	line-height			: 1.5;
}
#contents .case-list>ul .more{
	margin: 8px 0;
}
#contents .case-list>ul .icon{
	display				: inline-block;
	background			: var(--text-color);
	color				: var(--bg-color);
	border-radius		: 10px;
	padding				: 3px 8px;
	line-height			: 1;
	font-size			: 1rem;
	font-weight			: bold;
}
@media screen and (min-width: 768px) {
#contents .case-list>ul{
	gap					: 20px;
	justify-content		: center;
}
#contents .case-list>ul>li{
	flex				: 0 0 calc(33% - 20px);
	margin				: 0 0 40px 0;
}
#contents .case-list>ul .main{ font-size: 1.8rem; }
#contents .case-list>ul .sub{ font-size: 1.4rem; }
#contents .case-list>ul .icon{
	padding				: 3px 15px;
	border-radius		: 15px;
	font-size			: 1.4rem;
	margin: 0 8px 0 0;
}
}


/*-----------------------------------------------------
 footer
-----------------------------------------------------*/
#footer .container{ padding: 0 0 30px 0; }

/* data
-----------------------------------------------------*/
#footer .data dt,
#footer .data dd{ margin: 50px 0 30px 0; }

@media screen and (min-width: 768px) {
#footer .data dt,
#footer .data dd{ margin: 50px 0 40px 0; }
}


/* logo
-----------------------------------------------------*/
#footer .logo img{ max-width: 350px; }

@media screen and (max-width: 767px) {
#footer .logo{
	padding				: 20px 0 0 0;
	text-align			: center;
}
#footer .logo img{ width: 260px; }
}


/* sns-navi
-----------------------------------------------------*/
.sns-navi a:hover{ opacity: 0.7; }
.sns-navi .btn{margin: 0;}

.sns-navi .social{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	justify-content		: center;
	flex-direction		: row;
	text-align			: center;
}
.sns-navi .social>li a{
	display				: inline-block;
	margin				: 0 10px;
	border-radius		: 20px;
	width				: 40px;
	height				: 40px;
	background			: #FFF;
	line-height			: 42px;
	font-size			: 20px;
	color				: var(--sub-color);
}

.sns-navi .social>li a .fa-instagram{
	position			: relative;
	top					: 1px;
	font-size			: 26px;
}
@media screen and (min-width: 768px) {
.sns-navi .social>li a{
	border-radius		: 25px;
	width				: 50px;
	height				: 50px;
	line-height			: 52px;
	font-size			: 24px;
}
.sns-navi .social>li a .fa-instagram{
	top					: 2px;
	font-size			: 30px;
}
}

/* youtube
---------------------------------*/
.sns-navi .media{
	margin				: 20px 0;
	text-align			: center;
}
.sns-navi .media li{
	margin: 10px 0;
}
.sns-navi .media .btn{
	display				: inline-block;
	border-radius		: 20px;
	border				: 1px solid #fff;
	width				: 240px;
	background			: #fff;
	line-height			: 42px;
	font-size			: 16px;
	color				: var(--sub-color);
	text-decoration		: none;
	font-weight			: bold;
	padding: 0;
}
.sns-navi .media img,
.sns-navi .media .fab{ margin: 0 5px 0 0; }
.sns-navi .media img{
	max-height: 30px;
}
@media screen and (min-width: 768px) {
.sns-navi .media{ margin: 30px 0; }
.sns-navi .media .btn{ font-size: 20px; }
}

/* staff
-----------------------------------------------------*/
@media screen and (min-width: 768px) {
#footer .staff{ line-height: 2; }
}
@media screen and (max-width: 767px) {
#footer .data .staff{ margin: 0 0 20px 0; }
}

/* sponsored
-----------------------------------------------------*/
#footer .sponsored .sponsored_shizuoka{ width: 61px; }
#footer .sponsored .supported_bunkacho{
	margin				: 20px 0 0 0;
	width				: 105px;
}
@media screen and (min-width: 768px) {
#footer .sponsored{ line-height: 2; }
#footer .sponsored .supported_bunkacho{ margin:20px 0 0 0; }
}

/* banner
-----------------------------------------------------*/
#footer .banner{}
#footer .banner a:hover{ opacity: 0.7; }

/* copy
-----------------------------------------------------*/
#footer .copy{ text-align: center; }
#footer .copy>small{ font-size: inherit; }



/*-----------------------------------------------------
 modal
-----------------------------------------------------*/
/* modaal setting overwrite
-----------------------------------------------------*/

.modaal-close{
	position			: fixed;
	top					: 20px;
	right				: 10px;
	z-index				: 999;
}
.modaal-close span{
	cursor				: pointer;
	display				: block;
	width				: 36px;
	height				: 36px;
	background			: url(../../common/images/close.png) center center /cover no-repeat;
	text-indent			: -99999em;
}
@media screen and (min-width: 769px) {
.modaal-close{
	top					: 24px;
	right				: calc(calc(calc(100vw - 500px) / 2) - 60px);
}
.modaal-close span{
	width				: 48px;
	height				: 48px;
}
}
@media screen and (min-width: 992px) {
.modaal-close{
	right				: calc(calc(calc(100vw - 730px) / 2) - 60px);
}
}

.modaal-container{ background: transparent; }

@media screen and (max-height: 1000px) {
.modaal-content-container	{ padding: 0; }
.modaal-inner-wrapper		{ padding: 0;}
}
@media screen and (min-width: 769px) {
.modaal-container{
	max-width			: initial;
	width				: auto;
	padding				: 0 50px;
}
}

/* modal default view
-----------------------------------------------------*/
.modal{ display: none; }

/* content
-----------------------------------------------------*/
.modal_content{
	margin				: 40px auto;
	width				: calc(100vw - 20px);
	border-radius		: 15px;
	padding				: 55px 15px 15px 15px;
	color				: var(--bg-color);
	background			: var(--main-color);
}

@media screen and (min-width: 769px) {
.modal_content{
	margin				: 50px auto;
	width				: 500px;
	border-radius		: 10px;
	padding				: 30px;
}
}

@media screen and (min-width: 992px) {
.modal_content{ width: 730px; }
}

/* contents
-----------------------------------------------------*/
.modal_content rt{
	margin				: 0 0 -4px 0;
	font-size			: 10px;
	line-height			: 1;
}

/* outline
---------------------------------*/
.modal_content .outline{
	margin				: 0 0 15px 0;
	font-weight			: bold;
}


/* data
---------------------------------*/
.modal_content .data{ margin: 0 0 15px 0; }
.modal_content .data>li{ text-align: center; }
@media screen and (min-width: 769px) {
.modal_content .data{ margin: 0 0 35px 0; }
}

/* image ------------------------*/
.modal_content .data>.image			{ margin: 0 0 10px 0; }
.modal_content .data>.image>img		{ border-radius: 5px; }
.comment-modal .image>img			{ margin: 0 0 15px 0; }
@media screen and (min-width: 769px){
.modal_content .data>.image			{ margin: 0 0 20px 0; }
.modal_content .data>.image>img		{ border-radius: 10px; }
}

/* title & name -----------------*/
.modal_content .data>.title-jp{
	line-height			: 1.3;
	font-size			: 1.6rem;
	font-weight			: bold;
}
.modal_content .data>.title-jp>small{ font-size: 65%; }
.modal_content .data>.name-jp{
	font-size			: 2.4rem;
	font-weight			: bold;
}
.modal_content .data>.name-jp>small{
	display				: block;
	font-size			: 50%;
}
.modal_content .data>.post-jp{
	margin				: 0 0 -5px 0;
	font-weight			: bold;
}
@media screen and (min-width: 769px){
.modal_content .data>.title-jp{
	margin				: 0;
	font-size			: 2.4rem;
}
.modal_content .data>.name-jp{ font-size: 3.2rem; }
.modal_content .data>.post-jp{ margin: 0 0 -10px 0; }
}