@charset "utf-8";

/*----------------------------------------------------------------
 MainLayout
 -----------------------------------------------------------------
 c/p
 <link href="./common/css/layout.css" rel="stylesheet" type="text/css" media="screen,print" />
----------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');



/*----------------------------------------------------------------
 custom properties
----------------------------------------------------------------*/
:root {
	/* colors */

	--bgcolor-y			: #faca00;
	--bgcolor-b			: #62c3d1;
	--bgcolor-g			: #9fb11c;
	--bgcolor-o			: #dd571c;

	--textcolor-y		: #ae8c00;
	--textcolor-b		: #62c3d1;
	--textcolor-g		: #9fb11c;
	--textcolor-o		: #dd571c;

	--text-color		: #FFF;
	--bg-color			: #516e34;

	--item-bg			: #FFF;
	--item-text			: #000;

	--btn-bg			: #FFF;

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

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

	/* font */
	--font-size			: 14px;
	--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		: 768px;

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

	/* font */
	--font-size			: 16px;
}
}
@media screen and (min-width: 1000px) {
:root {
	/* width */
	--content-width		: 960px;
}
}

@media screen and (min-width: 1200px) {
:root {
	/* width */
	--content-width		: 1110px;
}
}
/*----------------------------------------------------------------
 base
----------------------------------------------------------------*/

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

/* inline element
-----------------------------------------------------*/

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

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

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

/* anchor(pagetop)
-----------------------------------------------------*/
p.anchor{
	visibility			: hidden;
	position			: absolute;
	top					: 0px;
	left				: 0px;
}

/* sensor
-----------------------------------------------------*/
.sensor{
	display				: none;
	visibility			: hidden;
	position			: absolute;
	top					: 0px;
	left				: 0px;
}
@media screen and (min-width: 769px) { .sensor{ display: block; } }

/* br
-----------------------------------------------------*/
@media screen and (min-width: 769px) { .br_sp{ display: none; } }

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

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


/*----------------------------------------------------------------
 layout
----------------------------------------------------------------*/
/*-----------------------------------------------------
 loader
-----------------------------------------------------*/
#loader-bg {
	display				: none;
	position			: fixed;
	width				: 100%;
	height				: 100%;
	top					: 0;
	left				: 0;
	background			: var(--bgcolor-o);
	z-index				: 1000;
}
#loader {
	display				: none;
	position			: absolute;
	top					: 50%;
	left				: 50%;
	transform			: translateY(-50%) translateX(-50%);
	z-index				: 101;
}
@media screen and (max-width: 768px) {
#loader-bg { width: 100vw; }
#loader img{ width: 100px; }
}

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

#wrap{
	width				: 100%;
}

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

/*-----------------------------------------------------
 container
-----------------------------------------------------*/
.container{
	position			: relative;
	clear				: both;
	margin				: 0 auto;
	width				: var(--content-width);
}

/*-----------------------------------------------------
 section
-----------------------------------------------------*/
.section{
	position			: relative;
	clear				: both;
	margin				: 0 auto;
	padding				: 0 0 50px 0;
}
@media screen and (min-width: 769px) {
.section{ padding: 0 0 80px 0; }
}


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

/*-----------------------------------------------------
 header
-----------------------------------------------------*/
#header{
	background			: url(../images/header_bg.png) left top /30px auto repeat-x;
	position			: fixed;
	top					: 0;
	z-index				: 10;
	height				: var(--header-height);
	padding				: 20px 0 0 0;
}
#header>.container{ height: 100%; }

@media screen and (min-width: 769px) {
#header{ display: none; }
}

/* logo
-----------------------------------------------------*/
#header .logo>a{ display: block; }
#header .logo>a>img{ height: 39px; }

/*-----------------------------------------------------
 navigation
-----------------------------------------------------*/
@media screen and (min-width: 769px) {
#navigation{
	position			: fixed;
	top					: var(--header-height);
	left				: 10px;
	z-index				: 10;
	width				: 110px;
	text-align			: center;
}
#navigation>.container{ width: 110px; }
}

/* logo
-----------------------------------------------------*/
#navigation .logo{
	margin				: 10px auto 20px auto;
	width				: 100px;
}
@media screen and (min-width: 769px) {
#navigation .logo{
	margin				: 20px auto;
	width				: 78px;
}
}

/* navi
-----------------------------------------------------*/
#navigation .navi{
	display				: flex;
	flex-direction		: column;
	gap					: 10px;
	margin				: 0 auto;
	max-width			: 275px;
	font-size			: 16px;
}
#navigation .navi a{
	display				: block;
	border-radius		: 15px;
	text-align			: center;
	padding: 1px 0;
	line-height: 1.6;
}
#navigation .navi a:hover{
	outline: 3px solid var(--btn-bg);
}
#navigation .navi a>i{
	font-size: 20px;
	line-height: 1;
	margin: 5px 0 0 0;
}

#navigation .navi .about a		{ background: var(--bgcolor-o); }
#navigation .navi .higashi a	{ background: var(--bgcolor-b); }
#navigation .navi .nishi a		{ background: var(--bgcolor-g); }
#navigation .navi .member a		{ background: var(--textcolor-y); }
#navigation .navi .youtube a	{
	background: var(--btn-bg);
	color: #dd571c;
}

@media screen and (max-width: 768px) {
#navigation .navi a{
	padding				: 6px 0;
	border-radius		: 20px;
}
#navigation .navi .youtube a	{
	padding				: 3px 0;
}
#navigation .navi a>i{
	font-size: 25px;
}
}
@media screen and (min-width: 769px) {
#navigation .navi{ gap: 5px; }
}

/*-----------------------------------------------------
 main
-----------------------------------------------------*/
#main{
	position			: relative;
	clear				: both;
	padding				: var(--header-height) 0 0 0;
	background			: var(--bgcolor-y);
}
@media screen and (min-width: 769px) {
#main::before{
	content				: "";
	position			: fixed;
	left				: 0;
	top					: 0;
	z-index				: 10;
	display				: block;
	width				: 100%;
	height				: var(--header-height);
	background			: url(../images/header_bg.png) left top /60px auto repeat-x;
}
}

/* title
-----------------------------------------------------*/
#main .title{
	padding				: 15px 0;
	text-align			: center;
}
#main .title>img{ max-width: 90px; }
@media screen and (min-width: 769px) {
#main .title		{ padding: 45px 0; }
#main .title>img	{ max-width: 180px; }
}

/* subtitle
-----------------------------------------------------*/
#main .subtitle{
	margin				: 0 0 20px 0;
	text-align			: center;
	font-size			: 20px;
	font-weight			: 700;
}
@media screen and (min-width: 769px) {
#main .subtitle{
	margin				: 0 0 40px 0;
	font-size			: 32px;
}
}

/* item
-----------------------------------------------------*/
#main .item>a{
	--item-padding: 10px;
	--item-radius: 8px;
	--thumbnail-radius: 5px;
	display				: block;
	border-radius		: var(--item-radius);
	height				: 100%;
	padding				: var(--item-padding);
	background			: var(--item-bg);
	color				: var(--item-text);
}
#main .item>a:hover{
	outline: 3px solid var(--bgcolor-y);
}
#main .item>a>.thumbnail{
	margin				: 0 0 var(--item-padding) 0;
	border-radius		: var(--thumbnail-radius);
}
#main .item>a>time{
	display				: block;
	margin				: 0 0 calc(var(--item-padding) / 2) 0;
	font-size			: 10px;
	font-weight			: 400;
}
#main .item>a>strong{
	display				: block;
	line-height			: 1.5;
}
@media screen and (min-width: 769px) {
#main .item>a{
	--item-padding: 15px;
	--item-radius: 15px;
	--thumbnail-radius: 10px;
}
#main .item>a>time{ font-size: 12px; }
}

/* stage-pickup
-----------------------------------------------------*/
@media screen and (min-width: 769px) {
#main .stage-pickup{
	margin				: 0 auto;
	max-width			: 330px;
}
}

/* stage-list
-----------------------------------------------------*/
#main .stage-list>ul{
	--item-gap: 15px;
	--item-num: 2;
	display				: flex;
	flex-direction		: row;
	flex-wrap			: wrap;
	align-items			: flex-start;
	align-items			: stretch;
	gap					: var(--item-gap);
	margin				: var(--item-gap) 0;
}
#main .stage-list>ul>li{ flex: 0 0 calc(calc(100% - calc(calc(var(--item-num) - 1) * var(--item-gap))) / var(--item-num)); }
@media screen and (min-width: 769px) {
#main .stage-list>ul{
	--item-num: 4;
}
}
@media screen and (min-width: 1000px) {
#main .stage-list>ul{
	--item-gap: 30px;
}
}

/* btn
-----------------------------------------------------*/
#main .btn{
	display				: inline-block;
	border-radius		: 30px;
	width				: 100%;
	max-width			: 300px;
	padding				: 10px 20px;
	background			: var(--btn-bg);
	text-align			: center;
	font-size			: calc(var(--font-size) + 2px);
	opacity: 1;
}
#main .btn>i{
	margin				: 0 5px 0 0;
	vertical-align		: -1px;
	font-size			: 1.5em;
}
#main .btn svg{
	width				: 50px;
	height				: 20px;
}
#main .btn:hover{
	outline: 3px solid var(--bgcolor-y);
}

/* more
-----------------------------------------------------*/
#main .more{
	text-align			: center;
	margin				: 20px 0;
}
@media screen and (min-width: 769px) {
#main .more{ margin: 30px 0; }
}

/* sns-link
-----------------------------------------------------*/
#main .sns-link{
	display				: flex;
	flex-direction		: column;
	align-items			: center;
	text-align			: center;
	gap					: 10px;
	margin				: 20px 0 0 0;
}
#main .sns-link>li{ width: 80%; }
@media screen and (min-width: 769px) {
#main .sns-link{
	flex-direction		: row;
	justify-content		: center;
	flex-wrap			: wrap;
}
#main .sns-link>li{
	flex				: 0 1 auto;
	width				: calc(25% - 8px);
}
}
@media screen and (min-width: 769px) and (max-width: 999px){
#main .sns-link .btn{
	line-height: 1.3;
}
#main .sns-link .btn svg,
#main .sns-link .btn i{
	display: block;
	margin: 0 auto;
}
}

/*-----------------------------------------------------
 footer
-----------------------------------------------------*/
#footer{
	background			: url(../images/footer_bg-sp.png) center center /cover no-repeat;
	height: 66vw;
	aspect-ratio		: 3 / 2;
}
#footer>.container{ height: 100%; }
@media screen and (min-width: 769px) {
#footer{ 
	background: url(../images/footer_bg-pc.png) center center /cover no-repeat;
}
}

/* copy
-----------------------------------------------------*/
#footer .copy{
	position			: absolute;
	bottom				: 30px;
	width				: 100%;
	text-align			: center;
}
@media screen and (min-width: 769px) {
#footer .copy{ text-indent: -4em; }
}