@charset "utf-8";
@font-face {
  font-family: "SnnmN";
  src: url("../font/JF-Dot-Shinonome14.woff2") format('woff2'),
	   url("../font/JF-Dot-Shinonome14.woff")  format('woff');
}
@font-face {
  font-family: "SnnmB";
  src: url("../font/JF-Dot-Shinonome14B.woff2") format('woff2'),
	   url("../font/JF-Dot-Shinonome14B.woff")  format('woff');
}
@font-face {
  font-family: "CpPrd";
  src: url("../font/cp_period_subset.woff2") format('woff2'),
	   url("../font/cp_period_subset.woff")  format('woff');
}
@font-face {
  font-family: "tanuki";
  src: url("../font/tanuki_magic_subset.woff2") format('woff2'),
	   url("../font/tanuki_magic_subset.woff")  format('woff');
}
/*-------------カスタムプロパティ------------*/
:root {
	--max-width: min(90vw,1260px);
	--logo-width:min(35%, 320px);
	--color-white: #fefefe;
	--color-black: #000;
	--color-orange: #fb8b2d;
	--color-yellow: #f6f241;
	--color-red: #ff1900  ;
	--color-green: #00d500;
	--color-lightgreen: #b3d518;
	--font-normal: "SnnmN", sans-serif;
	--font-bold: "SnnmB", sans-serif;
	--font-cp: "CpPrd", sans-serif;
	--font-tanuki: "tanuki", sans-serif;
	--font-size-s: min(2.8vw, 0.8em);
	--font-size-m: min(3.2vw, 1.4em);
	--font-size-l: min(4.6vw, 1.6em);
	--line-height-s: min(3vw, 1.2em);
	--line-height-m: min(4vw, 1.4em);
	--line-height-l: min(5vw, 1.6em);
	--line-height-ll: min(8vw, 1.8em);
	--border-thick: min(0.7vw, 0.25em);
	--border-thin: min(0.25vw, 0.1em);
	--border-radius: min(1.5vw, 0.4em);
	--spacing-s: min(0.5vw,0.2em);
	--spacing-m: min(3vw, 1.2em);
	--spacing-l: min(5vw, 2em);
	--spacing-ll: min(8vw, 4em);
	--letter-spacing-s: 0.05em;
	--letter-spacing-m: 0.08em;
	--letter-spacing-l: 0.1em;
}
/*-------------------------*/
/*Reset*/
html{margin:0; padding:0; border:0;scroll-behavior: smooth;}
*{border:0; box-sizing: border-box; margin:0; padding:0;}
body{
    background-color: var(--color-black);
	font-family: var(--font-normal);
	color: var(--color-white);
	line-height:1;
	-webkit-text-size-adjust:100%;
	width:100%;
	height: auto !important;
}
body::before {
	content: "";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: -1;
	background: var(--color-black);
}
h1,h2,h3,h4,h5,h6,p,span,table,a,img,dl,dt,dd,ul,li,ol,iframe,nav,small{
margin:0;	padding:0; font-size:100%;font-weight:normal; background:transparent;
vertical-align:baseline; border:none;}
img{vertical-align:top;width:100%;}
ol, ul{list-style:none; list-style-type:none;}
a:link{color:var(--color-yellow); text-decoration:none;}
a:visited{color:var(--color-orange); text-decoration:none;}
a:hover{color:#ffffa8; text-decoration:none;}
.inline_block { display: inline-block; }
.text_center { text-align: center; }
.text_yellow { color: var(--color-yellow); } 
.text_red { color: var(--color-red); } 
.onlyPc{}
.onlySp{display: none;}
/*-------------スクリーンリーダー専用（非表示）------------*/
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

/*-- カーソル -----------------------*/

/* 通常はハート */
html,
body {
	cursor: url("../img/icon_heart.svg") 17 17, auto;
}

/* マウスイベントのある要素は青く */
a,
button,
input,
select,
textarea,
summary,
label,
[role="button"],
[onclick],
[tabindex]:not([tabindex="-1"]),
#btn_top,
.page-top-inu {
	cursor: url("../img/icon_heart_blue.svg") 17 17, pointer;
}
a,
button,
input[type="button"],
input[type="submit"],
summary,
[role="button"],
.page-top-inu,
.bnr a {
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

a:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
summary:hover,
[role="button"]:hover,
.page-top-inu:hover,
.bnr:hover {
	transform: translateY(calc(var(--spacing-s) * -1)) !important;
	color: var(--color-yellow);
}
#item_box a:hover .news_title {
	text-decoration: underline;
}
a:active,
button:active,
input[type="button"]:active,
input[type="submit"]:active,
summary:active,
[role="button"]:active,
.page-top-inu:active {
	transform: translateY(calc(var(--spacing-s) * -1)) !important;
}
button.page-top-inu:hover {
	transform: initial !important;
}
.page-top-inu:hover span {
	top: calc(var(--font-size-l) * -1);
}
/*--------------------------------------------------------*/
/*--パンくず--*/
#pan_box {
	background: #333;
	color: #fff;
	font-size: 0.8em;
	min-height: 24px;
	overflow-x: auto;
	padding: 8px 0 8px 10px;
	width: 100%;
}
#pan_box .in {
	color: #fff;
	display: flex;
	gap: 0.5em;
	margin: 0 auto;
	max-width: 1400px;
	white-space: nowrap;
}
#pan_box .in li + li::before {
	content: ">";
	padding-right: 0.5em;
}
#pan_box a:link{color:#ffffff; text-decoration:none;}
#pan_box a:visited{color:#dddddd; text-decoration:none;}
#pan_box a:hover{color:#fffd4b; text-decoration:underline;}

/*-- SNS ----------------------*/
#area-share {
display: flex;
justify-content: center;
align-items: center;
margin-top: var(--spacing-ll);
}
.ttl_share {
display: inline-block;
}

/*--buttonの見た目リセット--*/
button.btn_sns {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	line-height: 1;
	cursor: pointer;
	appearance: none;
	color: #f6f241;
}

button.btn_sns img {
	display: block;
}
/*----*/
#sns_button_sp{
display: none;
}
#sns_button_pc .btn_sns img{height: 50px;width: 50px;margin: 0 5px;}

#sns_button{
width:30%;
height:40px;
margin: 20px auto;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}
#sns_button a{
display:block;
width:40px;
height:40px;
margin:0 !important;
}
#sns_button img{
width:40px !important;
height:40px !important;
margin:0 !important;
}
/*--------------ページトップボタンここから------------*/
#btn_top {
	position: fixed;
	right: max(var(--spacing-m), env(safe-area-inset-right));
	bottom: 0;
	z-index: 1000;
	margin: 0;
}

.page-top-inu {
	padding: 0;
	border: 0;
	background-color: transparent;
	color: var(--font-color-white);
	font-size: 1em;
	font-family: var(--font-snnmN);
}

.page-top-inu span {
	color: var(--color-black);
	background-color: var(--color-white);
	font-family: var(--font-bold);
	padding: var(--border-radius);
	border-radius: var(--border-radius);
	font-size: var(--font-size-s);
	position: relative;
	top: calc(var(--font-size-m) * -1);
	left: var(--font-size-s);
}

/* 吹き出しの色がついた部分 */
.page-top-inu span::before {
	content: "";
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	left: 10%;
	bottom: -10px;
	border-radius: 36%;
	border-left: 5px solid transparent;
	border-top: 14px solid var(--color-white);
	border-right: 40px solid transparent;
	border-bottom: 48px solid transparent;
	transform: translateX(-61%) rotate(135deg);
	z-index: -1;
}

.page-top-inu img {
	display: block;
	width: 45px;
	height: 35px;
	pointer-events: none;
}

#btn_top.inu-hidden {
	visibility: hidden;
	pointer-events: none;
}

#btn_top.inu-entering {
	visibility: visible;
	pointer-events: none;
	animation: inu-enter 1.2s linear forwards;
}

@keyframes inu-enter {
	from {
		transform: translateX(calc(100% + var(--spacing-m) + 50px));
	}

	to {
		transform: translateX(0);
	}
}

.page-top-inu:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.page-top-inu.inu-running {
	pointer-events: none;
}

#btn_top.inu-entering {
	visibility: visible;
	animation: inu-enter 1.2s linear forwards;
}

@keyframes inu-enter {
	from {
		transform: translateX(calc(100% + var(--spacing-m) + 50px));
	}

	to {
		transform: translateX(0);
	}
}
/*--------------ページトップボタンここまで------------*/

/* 読み上げ用テキスト */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
/*-- footer/PC	-------------------*/
footer {
background: #333;
display: flex;
align-items: center;
justify-content: center;
margin-top: var(--spacing-ll);
padding: var(--spacing-l);
flex-wrap: wrap;
}
.link_bnr {
max-width: 800px;
display: flex;
justify-content: center;
}
.bnr {
margin: var(--spacing-l);
padding: var(--spacing-m);
font-size: var(--font-size-m);
text-align: center;
width: var(--logo-width);
}
footer a{
color: #d00;
text-decoration: none;
}

/*-- 緊急テキスト ----------------------*/
#rp_textbox {
background: rgba(255, 255, 255, 1);
border: solid var(--border-thick) var(--color-red);
font-size: var(--font-size-m);
margin: var(--spacing-m) auto;
line-height: var(--line-height-ll);
text-align: left;
max-width: var(--max-width);
color: var(--color-black);
padding: var(--spacing-m);
}
.txt_title {
font-weight: bold;
border-bottom: solid 1px #000;
margin-bottom: var(--spacing-s);
padding-bottom: var(--spacing-s);
font-size: var(--font-size-m);
}
#rp_textbox .pop_text{
background:#fff;
-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;
border: #c9c9c9 solid 1px;
font-size:0.9em;
line-height:1.5em;
margin:0 auto;
padding:20px;
text-align:left;
max-width: 900px;
word-break: break-all;
width:75%;
}
#rp_textbox .pop_text .popup_title{
border-bottom: #999 dotted 1px;
font-size:1.1em;
line-height:1.5em;
font-weight:bold;
margin:0 0 15px 0;
padding-bottom:5px;
text-align:center;
width:100%;
}
#rp_textbox .ema_img {
display: block;
text-align: center;
width: 100%;
}
#rp_textbox .ema_img img{
margin: 0 auto 10px;
max-width: 100%;
}
#rp_textbox a{
color:#d00;
text-decoration:underline;
}
#rp_textbox .txt_text {
background: transparent;
border: none;
line-height: inherit;
font-size: inherit;
margin: 0;
padding: 0;
width: 100% !important;
max-width: initial;
}
/* 動画囲いタグ ----------------------　<div class="video-container"></div> */
.video-container {
padding: 56.25% 0 0;
position: relative;
width: 100%;
margin: min(3vw, 1em) auto;
}
.video-container iframe{
height: 100% !important;
position: absolute;
right: 0;
top: 0;
width: 100% !important;
}

/*-- google翻訳 ----------------------*/
.skiptranslate.goog-te-gadget,
a.goog-logo-link{color:#fff !important;}

/*-- ローディング ----------------------*/
#loader{background-color:var(--color-black);position:fixed;width:100%;height:100%;z-index: 1000;top: 0;bottom: 0;left: 0;right: 0;}/*背景*/
.loader,.loader:before,.loader:after {
background: #aaa;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
height: 4em;
width: 1em;
top: 50%;
}
.loader {
color: #aaa;
text-indent: -9999em;
margin: auto;
position: relative;
font-size: 11px;
-webkit-transform: translateZ(0);-ms-transform: translateZ(0);transform: translateZ(0);
-webkit-animation-delay: -0.16s;animation-delay: -0.16s;
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
}
.loader:before,.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;animation-delay: -0.32s;
}
.loader:after {
left: 1.5em;
}
@-webkit-keyframes load1 {
	0%,80%,100% {
	box-shadow: 0 0;
	height: 4em;
	}
	40% {
	box-shadow: 0 -2em;
	height: 5em;
	}
	}
	@keyframes load1 {
	0%,80%,100% {
	box-shadow: 0 0;
	height: 4em;
	}
	40% {
	box-shadow: 0 -2em;
	height: 5em;
	}
}


/* -- main ------------------------------------------------------*/
main,
header,
nav {
	position: relative;
	z-index: 1; 
}
main {
	width: var(--max-width);
	margin: auto;
}
section, nav {
	transform: rotate(0.01deg);
}

.contents {
	letter-spacing: var(--letter-spacing-l);
	word-break: break-all;
}

.title {
	margin: var(--spacing-l) auto;
	text-align: center;
}
.title img {
	width: min(100%, 1000px);
	height: auto;
	margin: auto;
	display: block;
}
.title_s img{
	width: min(50%,400px);
}
.logo_cr {
	font-size: var(--font-size-s);
	letter-spacing: var(--letter-spacing-l);
	text-align: center;
	opacity: 0.8;
	width: 100%;
}
/*-----------------------------------*/
/* nav */
#box_menu {
	align-items: center;
	background-color: var(--color-black);
	font-size: var(--font-size-m);
	position: sticky;
	padding: var(--spacing-m) 0;
	top: 0;
	transition: padding 0.2s ease;
	z-index: 998;
	font-family: var(--font-cp);
	color: var(--color-orange);
	letter-spacing: var(--letter-spacing-l);
	margin-right: calc(var(--letter-spacing-l) * -1);
}
#box_menu ul {
	align-items: center;
	display: flex;
	width: var(--max-width);
	justify-content: center;
	margin: auto;
	gap: var(--spacing-m);
	flex-wrap: wrap;
}
#box_menu.is-sticky {
	padding: min(2.5vw, 0.5em) 0;
}
#box_menu img {
	width: 100%;
}
.btn_news a,
.btn_about a,
.btn_tickets a,
.btn_exh a,
.btn_goods a,
.btn_sns a
{
	color: var(--color-orange);
	font-size: var(--font-size-m);
	text-align: center;
	display: block;
	border: solid  var(--border-thin) var(--color-orange);
	padding: var(--spacing-s);

}

.btn_news a:hover,
.btn_about a:hover,
.btn_tickets a:hover,
.btn_exh a:hover,
.btn_goods a:hover,
.btn_sns a:hover,
a.btn_more:hover,
.event-address a:hover {
	color: var(--color-yellow) !important;
	border: solid var(--border-thin) var(--color-yellow) !important;
	box-sizing: border-box;
}

[id^="area-"] {
  scroll-margin-top: 10em; /* メニュー分の余白 */
}

/*-----告知動画ここから-----*/
#area-pr {
	width: var(--max-width);
	margin: min(10vw, 5em) auto;
	display: flow-root;
}
/*-----告知動画ここまで-----*/

.area-box {
	border: solid var(--border-thick) var(--color-white);
	font-size: var(--font-size-m);
	line-height: var(--line-height-m);
	margin: var(--spacing-ll) auto 0;
	padding: var(--spacing-l);
	display: flow-root;
	position: relative;
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1s ease, transform 1s ease;
}

.area-box.is-show {
	opacity: 1;
	transform: translateY(0);
}

#area-news, #area-about, #area-tickets, #area-exh, #area-goods {
	width: calc(100% - calc(var(--border-radius) + var(--spacing-l)));
	margin-right: 0;
}

.area-box h2 {
	background: var(--color-white);
	border-radius: var(--border-radius);
	box-sizing: border-box;
	color: var(--color-black);
	display: grid;
	font-family: var(--font-tanuki);
	padding: var(--border-radius);
	place-items: center;
	position: absolute;
	top: 0;
	left: calc((var(--spacing-l) + var(--font-size-l)) * -1);
	position: absolute !important;
}

/* 吹き出しの三角 */
.area-box h2::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 90%;
	width: 0;
	height: 0;
	border-top: var(--border-radius) solid transparent;
	border-bottom: var(--border-radius) solid transparent;
	border-left: var(--font-size-m) solid #fff;
	transform: translateY(-50%);
}

.title_main {
	font-size: var(--font-size-l);
	margin-bottom: calc(var(--letter-spacing-s) * -1);
	writing-mode: vertical-rl;
	text-orientation: upright;
}

#area-lead {
	line-height: var(--line-height-ll);
	word-break: keep-all;
	letter-spacing: var(--letter-spacing-l);
}

.text_catch {
	font-size: var(--font-size-l);
	line-height: var(--line-height-ll);
	margin-bottom: 0.5em;
}

.icon-asterisk,
.icon-disc {
	display: block;
	padding-left: 1.5em;
	position: relative;
}
.icon-asterisk::before {
	content: "＊";
	position: absolute;
	left: 0;
}
.icon-disc::before {
	content: "・";
	position: absolute;
	left: 0;
}

.contents_cs {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 5em;
}

#item_box li {
	margin-bottom: var(--spacing-m);
}

.news_in_wrap {
	display: flex;
	gap: var(--spacing-m);
	background-color: rgba(255, 255, 255, 0.2);
	padding: var(--font-size-s);
	margin-bottom: var(--spacing-m);
}

.news_top_img {
	width: min(20vw, 300px);
	border: solid 1px rgba(255, 255, 255, 0.2);
}

.news_date {
	color: var(--color-white);
	font-size: var(--font-size-s);
	font-family: var(--font-bold);
}

#item_box a:hover .news_date {
	text-decoration: none !important;
}

.news_title {
	font-weight: initial;
	display: block;
}
a:hover .news_title {
	text-decoration: underline;
}

#news-link {
	width: 100%;
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	margin: var(--spacing-m) auto 0;
	justify-content: space-evenly;
	gap: var(--spacing-m);
}

.btn_more {
	background-color: var(--color-black);
	padding: var(--spacing-s);
	font-family: var(--font-cp);
	color: var(--color-orange) !important;
	text-align: center;
	border: solid var(--border-thin) var(--color-orange);

	display: flex;
	align-items: center;
	justify-content: center;
}

.event_item_title {
	font-size: var(--font-size-m);
	font-weight: bold;
	line-height: var(--line-height-s);
	margin: 0 0 var(--spacing-m);

	text-align: center;
}

.event_location {
	font-size: var(--font-size-l);
}

.event_location::before,
.event_location::after {
	content: "";
	background-image: url(../img/icon_star.svg);
	height: var(--font-size-s);
	display: inline-block;
	aspect-ratio: 1 / 1;
}

.event-set {
	margin-bottom: var(--spacing-l);
	border-bottom: 1px solid rgb(255 255 255 / 50%);
	padding-bottom: var(--line-height-m);
}

.event_item_title::before { margin-right: var(--spacing-s); }
.event_item_title::after { margin-left: var(--spacing-s); }

.list_flex {
	display: flex;
	flex-wrap: wrap;
	gap: var(--font-size-s) 0;
	margin-top: var(--spacing-m);
}

.item_term {
	width: min(18vw, 6em);
}
.item_detail {
	width: calc(100% - min(18vw, 6em));
	border-left: solid 1px rgba(255, 255, 255, 0.5);
	padding-left: var(--spacing-m);
}

.event-access {
	padding-right: calc(var(--letter-spacing-s) * -1) !important;
}

.event-venue {
	display: block;
}

.event-address {
	font-size: var(--font-size-s);
	line-height: var(--line-height-s);
}

.event-address a, .event-address a:visited,
.event-address button {
	border: solid var(--border-thick) var(--color-orange);
	background: transparent;
	padding: var(--spacing-s);
	color: var(--color-orange);
	background-color: transparent;
	font-style: var(--font-cp);
	font-weight: bold;
}

.event-address a:hover {
	color: var(--color-yellow) !important;
	border: solid var(--border-thick) var(--color-yellow) !important;
	box-sizing: border-box;
}

.event-organizers li {
	list-style-type: none;
}

.event-organizers {
	display: flex;
	gap: var(--spacing-s);
	flex-wrap: wrap;
}

.event-organizers li:not(:last-child)::after {
	content: "／";
}
.sns-btn {
	--icon-size: var(--font-size-m);
	color: #fff !important;
	text-decoration: none;
	line-height: 1;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	padding: var(--spacing-s);
	display: flex;
	align-items: center;
	gap: var(--font-size-s);
}
.sns-btn:hover, .btn_tweet:hover {
	transform: translateY(calc(var(--spacing-s) * -1));
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.sns-icon {
	flex: 0 0 auto;
	width: var(--icon-size);
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
}
.sns-x {
	background: #000;
	border: var(--border-thin) solid rgba(255, 255, 255, 1);
	letter-spacing: var(--letter-spacing-m);
}

/* NEWS	-------------------------------------------------- */
#box_menu figure {
	max-width: var(--logo-width);
	margin: var(--spacing-s) auto var(--spacing-m);
}
.kijitit {
	font-family: var(--font-bold);
	border-bottom: solid 1px var(--color-white);
	padding-bottom: var(--font-size-s);
	margin-bottom: var(--spacing-m);
	margin-top: var(--spacing-s);
	font-size: var(--font-size-m);
}
.kijitext {
	margin: var(--spacing-ll) 0;
}
.news_top_img {
	align-self: flex-start;
	width: min(30vw, 300px);
	border: solid 1px rgba(255, 255, 255, 0.2);
}
.news_top_text {
	width: max(70vw, calc(100vw - 300px));
}
#area-news #news-link {
	border-top: solid 1px rgb(255 255 255 / 50%);
	padding-top: var(--spacing-l);
}
/* TAB	-------------------------------------------------- */
@media screen and (max-width:900px) {

	/*-- SNS -----------------------*/
	/*
	#sns_button_pc{
	display: none;
	}
	*/
	#sns_button_sp{
	display: block;
	padding: 0;
	text-align: center;
	}
	#sns_button_sp .btn_sns{
	margin: 0 2px;
	}
	#sns_button_sp .btn_sns img{
	height: min(10vw,30px); width: min(10vw,30px);
	}

}
/* SP	-------------------------------------------------- */
@media screen and (max-width:640px) {
	#pan_box {
		overflow-x: auto;
	}
	#box_menu.is-sticky {
		font-size: min(3vw, 1.8em);
		padding: min(4vw, 1.5em) 0;
	}
	#box_menu ul {
		justify-content: center;
		gap: var(--spacing-m) var(--spacing-l);
	}
	.list_btn li {
		flex-basis: 100%;
	}
	#areaCorner dl {
		width: 100% !important;
	}
	.list_video .video-container {
		width: 100%;
		margin-top: min(3vw, 1em);
	}/*
	.item_term {
		width: min(40vw, 5em);
	}
	.item_detail {
		width: calc(100% - min(40vw, 5em));
	}*/
	footer {
		padding-bottom: min(15vh, 100px);
	}
}