@charset "utf-8";

/*----------------------------------------------------------------
 MainLayout
 -----------------------------------------------------------------
 c/p
 <link href="./common/css/layout.css" rel="stylesheet" type="text/css" media="screen,print" />
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 font settings
----------------------------------------------------------------*/
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 100; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 200; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 300; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 400; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Bold"); font-weight: bold; }
@font-face { font-family: "Yu Mincho"; src: local("Yu Mincho Regular"); font-weight: 500; }

/*----------------------------------------------------------------
 custom properties
----------------------------------------------------------------*/
:root {
	/* colors */
	--text-color			: #000;
	--base-color			: #f9e937;
	--main-color			: #1c1c1c;
	
}


/*----------------------------------------------------------------
 あとから表示させたくなった時に各々の項目をコメントアウトしてください
----------------------------------------------------------------*/

/* 言語選択 */
/* .select-lang{
	display: none!important;
} */


/*----------------------------------------------------------------
 base
----------------------------------------------------------------*/
html,body{
	font-size			: 62.5%; /* 10px */
}
body{
	line-height			: 1.8;
	font-size			: 1.3rem;
	font-family			: "Yu Gothic", YuGothic,-apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ Pro",'Hiragino Kaku Gothic Pro', Verdana, Meiryo, "M+ 1p", sans-serif;
	color				: var(--text-color);
}
@media screen and (min-width: 768px) {
body{ font-size: 1.6rem; }
}

/* inline element
-----------------------------------------------------*/
/* link
----------------------------------*/
a:link{
	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; } }



/*----------------------------------------------------------------
 layout
----------------------------------------------------------------*/
/*-----------------------------------------------------
 loader
-----------------------------------------------------*/
#loader-bg {
	display				: none;
	position			: fixed;
	width				: 100%;
	height				: 100%;
	top					: 0;
	left				: 0;
	background			: var(--base-color);
	z-index				: 1000;
}
#loader {
	display				: none;
	position			: absolute;
	top					: 50%;
	left				: 50%;
	transform			: translateY(-50%) translateX(-50%);
	z-index				: 101;
}
#loader img{
	-webkit-animation: animation 1s infinite;
	animation: animation 1s infinite;
}
@media screen and (max-width: 767px) {
#loader-bg { width: 100vw; }
#loader img{ width: 50px; }
}


@-webkit-keyframes animation {
	0% { transform: scale(1.05); }
	5% { transform: scale(1); }
	95% { transform: scale(1); }
	100% { -webkit-transform: scale(1.05); }
}
@keyframes animation {
	0% { transform: scale(1.05); }
	5% { transform: scale(1); }
	95% { transform: scale(1); }
	100% { transform: scale(1.05); }
}

/*-----------------------------------------------------
 onstage
-----------------------------------------------------*/
.onstage{
	position			: fixed;
	right				: 0;
	bottom				: 0;
	z-index				: 10;
}
.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;
}
}

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

#wrap{
	width				: 100%;
	padding				: 100px 0 0 0;
	margin				: 0 0 -5px 0;
}
@media screen and (min-width: 768px) {
#wrap{ padding: 110px 0 0 0; }
}

/*-----------------------------------------------------
 area
-----------------------------------------------------*/
.area{
	position			: relative;
	clear				: both;
}
#attention{
	position			: fixed;
	top					: 0;
	z-index				: 10;
	width				: 100%;
	background			: var(--main-color);
}
#header{
	position			: fixed;
	top					: 35px;
	z-index				: 8;
	width				: 100%;
	background			: var(--base-color);
}
@media screen and (min-width: 768px) {
#header{ top: 50px; }
}
@media screen and (min-width: 768px) {
#side-navi{ display: none; }
}
@media screen and (max-width: 767px) {
#side-navi{
	opacity				: 0;
	pointer-events		: none;
	position			: fixed;
	top					: 0;
	z-index				: 9;
	width				: 100%;
	height				: 100%;
	background			: var(--main-color);
	padding				: 50px 0 0 0;
}
.open#side-navi{ pointer-events: auto; }
}

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

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


/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/
/*-----------------------------------------------------
 common
-----------------------------------------------------*/
/* select-lang
-----------------------------------------------------*/
.select-lang{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
}
.select-lang li{
	margin				: 0 0 0 5px;
	text-align			: center;
}
.select-lang li a{
	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);
}
.select-lang li a:hover,
html[lang="ja"] .select-lang li.ja a,
html[lang="en"] .select-lang li.en a{
	background			: var(--main-color);
	color				: var(--base-color);
}


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


.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(--main-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(--main-color);
	text-decoration		: none;
	font-weight			: bold;
}
.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; }
}


/* navi-opener
-----------------------------------------------------*/
@media screen and (max-width: 767px) {
.navi-opener{
	position			: fixed;
	top					: 40px;
	right				: 10px;
	z-index				: 100;
	cursor				: pointer;
	width				: 50px;
	height				: 50px;
	padding				: 0 2rem 0 0;
	text-align			: left;
	line-height			: 1;
	color				: var(--main-color);
}
.navi-opener .opener:after{
	content				: "MENU";
	position			: absolute;
	bottom				: 0;
	display				: block;
	width				: 50px;
	padding				: 0 0 0 2px;
	text-align			: center;
	font-family			: 'Hind', sans-serif;
	font-weight			: bold;
	font-size			: 1.1rem;
	letter-spacing		: 0.7px;
}
.navi-opener.open .opener:after{
	content				: "CLOSE";
	color				: #FFF;
}

.navi-opener .bar::before,
.navi-opener .bar::after,
.navi-opener .bar{
	transition			: all 0.2s ease 0s;
	display				: block;
	position			: absolute;
	top					: 50%;
	right				: 8px;
	width				: 32px;
	height				: 1px;
	background			: var(--main-color);
}

.navi-opener .bar{
	top					: 20px;
	margin				: 0 0 0 -7px;
}
.navi-opener .bar::before,
.navi-opener .bar::after{
	content				: " ";
	right				: 0;
}
.navi-opener .bar::before	{ margin-top: -10px; }
.navi-opener .bar::after	{ margin-top: 8px; }

/* open */
.navi-opener.open .bar { background: transparent; }
.navi-opener.open .bar::before,
.navi-opener.open .bar::after{
	margin-top			: 0;
	background			: #FFF;
}
.navi-opener.open .bar::before	{ transform: rotate(-45deg); }
.navi-opener.open .bar::after	{ transform: rotate(-135deg); }
}


/* marquee
-----------------------------------------------------*/
.marquee:after {
	content				: "";
	white-space			: nowrap;
	padding-right		: 50px;
}

.marquee {
	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;
}
@media screen and (max-width: 767px) {
.marquee-sp:after {
	content				: "";
	white-space			: nowrap;
	padding-right		: 50px;
}

.marquee-sp{
	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%);}
}


/*-----------------------------------------------------
 attention
-----------------------------------------------------*/
#attention .container{
	overflow			: hidden;
	height				: 35px;
}
@media screen and (min-width: 768px) {
#attention .container{ height: 50px; }
}

#attention p{
	line-height			: 1;
	font-weight			: bold;
	font-size			: 1.1rem;
}
#attention p>a{
	position			: relative;
	display				: block;
	padding				: 11px 0 8px 0;
	text-decoration		: none;
	color				: #FFF;
}
#attention p strong{
	padding				: 0 3px;
	color				: var(--base-color);
}

@media screen and (min-width: 768px) {
#attention p{
	text-align			: right;
	font-size			: 1.4rem;
}
#attention p>a{ padding: 15px 0 10px 0; }
#attention p strong{ font-size: 2rem; }
}
@media screen and (min-width: 1050px) {
#attention p{ text-align: center; }
}
/* btn
---------------------------------*/
#attention .btn{
	display				: inline-block;
	margin				: 0 0 0 15px;
	line-height			: 1;
	border-radius		: 15px;
	font-weight			: bold;
	border				: 1px solid transparent;
	padding				: 4px 10px;
	font-size			: 1.1rem;
	background			: var(--base-color);
	color				: var(--main-color);
}
#attention a:hover .btn{
	border				: 1px solid var(--base-color);
	background			: transparent;
	color				: var(--base-color);
}
@media screen and (max-width: 767px) {
#attention .btn{
	font-size			: 1.2rem;
	position			: absolute;
	right				: 0;
	top					: 8px;
}
}
@media screen and (min-width: 768px) {
#attention .btn{
	font-size			: 1.4rem;
	position			: relative;
	top					: -3px;
}
}

#attention .logo{
	position			: absolute;
	z-index				: 10;
	padding				: 5px 0 0 0;
	width				: 160px;
}

/*-----------------------------------------------------
 header
-----------------------------------------------------*/
#header .container{ height: 65px; }
@media screen and (min-width: 768px) {
#header .container{ height: 60px; }
}

/* logo
-----------------------------------------------------*/
#header .logo{
	position			: relative;
	z-index				: 10;
	padding				: 10px 0 0 0;
	width				: 180px;
}
@media screen and (max-width: 767px) {
#header .logo{ display: inline-block; }
}

/* navigation
-----------------------------------------------------*/
@media screen and (min-width: 768px) {
#header .navigation{
	z-index				: 9;
	width				: 100%;
}
#header .navigation .g-navi{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	justify-content		: flex-start;
	align-items			: flex-start;
}
#header .navigation .g-navi li{ padding: 0 3px; }
#header .navigation .g-navi>li{
	position			: relative;
	text-align			: center;
	line-height			: 1.1;
}
#header .navigation .g-navi>li>span,
#header .navigation .g-navi>li>a{
	display				: block;
	text-decoration		: none;
	font-size			: 1.2rem;
	font-weight			: bold;
	color				: var(--text-color);
	height				: 60px;
	display				: grid;
	place-content		: center;
	cursor				: pointer;
}
#header .navigation .g-navi>li>span{
	position: relative;
}
#header .navigation .g-navi>li>span::after{
	font-family: "Font Awesome 6 Free";
	content: "\f0dd";
	display: inline-block;
	position: absolute;
	bottom: 7px;
	width: 100%;
}
}
@media screen and (min-width: 960px) {
#header .navigation .g-navi>li{ padding: 0 8px; }
#header .navigation .g-navi>li>span,
#header .navigation .g-navi>li>a{ font-size: 1.4rem; }
}
@media screen and (min-width: 1150px) {
#header .navigation .g-navi>li{ padding: 0 12px; }
}


@media screen and (min-width: 768px) {
#header .navigation .submenu{
	position			: absolute;
	top					: 55px;
	left				: -55px;
	z-index				: 12;
	visibility			: hidden;
	opacity				: 0;
	margin				: 0;
	transition			: opacity 0.5s ease-out;
	background			: #FFF;
	width				: 200px;
	padding				: 10px;
}
#header .navigation li:hover .submenu{
	visibility			: visible;
	opacity				: 1;
}
#header .navigation .submenu li{ margin: 0 0 5px 0; }
#header .navigation .submenu a{
	display				: block;
	padding				: 7px 8px;
	background			: var(--sub-color);
	line-height			: 1;
	font-size			: 1.3rem;
	color				: var(--main-color);
	font-weight			: bold;
	text-decoration		: none;
}
}
/* select-lang
-----------------------------------------------------*/
#header .navigation .select-lang{
	position			: absolute;
	right				: 0;
	top					: 50%;
	transform			: translateY(-50%);
}


/*-----------------------------------------------------
 side-navi
-----------------------------------------------------*/
#side-navi .container{ padding: 0 3vw; }

/* select-lang
-----------------------------------------------------*/
#side-navi .select-lang li a{
	border				: 1px solid var(--base-color);
	color				: var(--base-color);
}

#side-navi .select-lang li a:hover,
html[lang="ja"] #side-navi .select-lang li.ja a,
html[lang="en"] #side-navi .select-lang li.en a{
	background			: var(--base-color);
	color				: var(--main-color);
}

/* g-navi
-----------------------------------------------------*/
#side-navi .g-navi{ margin: 20px 0; }
#side-navi .g-navi li{ margin: 8px 0; }
#side-navi .g-navi span,
#side-navi .g-navi a{
	text-decoration		: none;
	font-weight			: bold;
	font-size			: 1.5rem;
	color				: #FFF;
}
#side-navi .g-navi a .fas{ margin: 0 10px 0 0; }

#side-navi .g-navi .submenu li{
	margin				: 2px 0;
	padding				: 0 0 0 18px;
}

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

#contents .coming-soon{
	padding				: 50px 0;
	font-size			: 150%;
	text-align			: center;
	font-weight			: bold;
}

/*-----------------------------------------------------
 title
-----------------------------------------------------*/
#title{
	position			: relative;
	background			: url(../images/mv_bg.jpg) center top /cover no-repeat;
	height				: 80px;
}
@media screen and (min-width: 768px) {
#title{ height: 180px; }
}

#title h1{
	position			: absolute;
	top					: 50%;
	left				: 50%;
	transform			: translateY(-50%) translateX(-50%);
	font-size			: 1.6rem;
	font-weight			: bold;
	text-align			: center;
	width: 100%;
}
@media screen and (min-width: 768px) {
#title h1{ font-size: 3rem; }
}

/*-----------------------------------------------------
 toc
-----------------------------------------------------*/
.toc{ background: var(--main-color); }
.toc ul{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	text-align			: center;
	justify-content		: center;
	padding				: 13px 0;
}
.toc ul li{ margin: 0 5px; }
.toc ul a{
	display				: inline-block;
	border-radius		: 20px;
	border				: 1px solid transparent;
	padding				: 5px 15px;
	background			: #FFF;
	text-decoration		: none;
	line-height			: 1;
	font-weight			: bold;
	color				: var(--main-color);;
}
.toc ul a:hover{
	border				: 1px solid #FFF;
	background			: transparent;
	color				: #FFF;
}

.toc ul span{
	display				: inline-block;
	border-radius		: 20px;
	border				: 1px solid #FFF;
	padding				: 5px 15px;
	text-decoration		: none;
	line-height			: 1;
	font-weight			: bold;
	color				: #FFF;
}

@media screen and (min-width: 768px) {
.toc ul{ padding: 30px 0; }
.toc ul a{
	width				: 200px;
	padding				: 10px;
}
}

@media screen and (min-width: 768px) {
.toc ul{ padding: 30px 0; }
.toc ul span{
	width				: 200px;
	padding				: 10px;
}
}



/*-----------------------------------------------------
 outline
-----------------------------------------------------*/
#outline{ background: url(../images/mv-sp.jpg) center bottom /cover no-repeat; }
#outline .container{
	height				: 500px;
	text-align			: center;
}
@media screen and (min-width: 768px) {
#outline{ background: url(../images/mv.jpg) center top /cover no-repeat; }
#outline .container{
	height				: 600px;
	text-align			: left;
}
}

/* title
-----------------------------------------------------*/
#outline .title{
	position			: relative;
	display				: inline-block;
	line-height			: 1;
	font-weight			: bold;
}

@media screen and (max-width: 767px) {
#outline .title{
	top					: 50px;
	border-bottom		: 1px solid var(--text-color);
	padding				: 0 0 13px 0;
	font-size			: 1.3rem;
}
}
@media screen and (min-width: 768px) {
#outline .title{
	top					: 23px;
	left				: 35px;
	border-bottom		: 2px solid var(--text-color);
	padding				: 0 0 18px 0;
	font-size			: 1.6rem;
}
}

/* text
-----------------------------------------------------*/
#outline .text{
	position			: absolute;
	top					: 50%;
	transform			: translateY(-50%);
	width				: 100%;
	text-align			: center;
}
#outline .text p{
	font-size			: 1.3rem;
	font-weight			: bold;
	line-height			: 1.7;
}
#outline .text p.main{
	margin				: 0 0 30px 0;
	font-size			: 1.6rem;
}

@media screen and (min-width: 768px) {
#outline .text p{ font-size: 2.2rem; }
#outline .text p.main{
	margin				: 0 0 20px 0;
	font-size			: 3.2rem;
}
}

/*-----------------------------------------------------
 footer
-----------------------------------------------------*/
#footer .container{ padding: 30px 0 30px 0; }
@media screen and (max-width: 767px) {
#footer .container{ width: 90vw; }
}
@media screen and (min-width: 768px) {
#footer .container{ padding: 90px 0 30px 0; }
}

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

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


/* logo
-----------------------------------------------------*/
#footer .logo img{ 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
-----------------------------------------------------*/
#footer .sns-navi ul>li a{ color: #333333; }
#footer .sns-navi .youtube .btn{
	border				: none;
	background			: #FFF;
	color				: #333333;
}

/* ad
-----------------------------------------------------*/
#footer .ad{
	--item-gap: 20px;
	--size-l: 100%;
	--size-m: calc(50% - calc(var(--item-gap) / 2));
	--size-s: calc(33% - calc(var(--item-gap) / 3));
	padding				: 0 15px;
	text-align			: center;
	color				: #FFF;
}
#footer .ad h3{
	margin				: 0 0 -10px 0;
	text-align			: center;
	font-weight			: bold;
	font-size			: 1.6rem;
}
#footer .ad .sponsor-banner-l{ display: none; }
@media screen and (min-width: 768px) {
#footer .ad h3{
	margin				: 0 0 -30px 0;
	font-size			: 1.8rem;
}
}
#footer .ad .sponsor-list{ margin: var(--item-gap) 0; }
#footer .ad .sponsor-list>ul{
	display				: flex;
	flex-direction		: row;
	justify-content		: center;
	flex-wrap			: wrap;
}
#footer .ad .sponsor-list>ul>li{ flex: 0 1 auto; }
#footer .ad .sponsor-list>ul a{
	opacity				: 1;
	color				: #FFF;
	transition			: opacity 0.1s ease-in-out;
	text-decoration: underline;
}
#footer .ad .sponsor-list>ul a:hover	{
	text-decoration		: none;
	opacity				: 0.8;
}
#footer .ad .sponsor-list>ul img		{ border-radius: 10px; }


/* banner-l */
#footer .ad .sponsor-banner-l>ul{
	flex-direction		: column;
	gap					: calc(var(--item-gap) / 2);
}
#footer .ad .sponsor-banner-l>ul li{ flex: 1 0 var(--size-l); }

/* banner-m */
#footer .ad .sponsor-banner-m>ul	{ gap: calc(var(--item-gap) / 2); }
#footer .ad .sponsor-banner-m>ul li	{ flex: 0 1 var(--size-m); }

/* banner-s */
#footer .ad .sponsor-banner-s>ul	{ gap: calc(var(--item-gap) / 2); }
#footer .ad .sponsor-banner-s>ul li	{ flex: 0 1 var(--size-s); }

@media screen and (min-width: 768px) {
#footer .ad{
	--item-gap: 50px;
	--size-l: 420px;
	--size-m: 310px;
	--size-s: 190px;

	padding: 0 30px;
}

/* banner-l */
#footer .ad .sponsor-banner-l>ul li		{ flex: 1 0 auto; }
#footer .ad .sponsor-banner-l>ul img	{ max-width: var(--size-l); }

/* banner-m */
#footer .ad .sponsor-banner-m>ul{ gap: 30px 60px; }
}

/* text */
#footer .ad .sponsor-text li::after{
	content				: "/";
	display				: inline-block;
	margin				: 0 0.5em;
}
#footer .ad .sponsor-text a{
	display				: inline-block;
	text-decoration		: none;
}

/* 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
-----------------------------------------------------*/
@media screen and (min-width: 768px) {
#footer .sponsored{ line-height: 2; }
}

#footer .sponsored .sponsored_shizuoka{ width: 61px; }

#footer .sponsored .supported_bunkacho{
	margin				: 20px 0 0 0;
	width				: 266px;
}
@media screen and (min-width: 768px) {
#footer .sponsored .supported_bunkacho{ margin:20px 0 0 0; }
}

/* banner
-----------------------------------------------------*/
#footer .banner{ text-align: center; }
#footer .banner a{display: inline-block;}
#footer .banner a:hover{ opacity: 0.7; }
#footer .banner img{ max-height: 165px; }

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

/* 検討中の赤字
-----------------------------------------------------*/
.attention{ color: #000;font-weight:bold; }