@charset "UTF-8";
/***************************************
01.Reset
***************************************/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
html {
	/*overflow-x: hidden;*/;
}
body {
	line-height: 1;
	text-align: left;
	overflow-x: hidden;
	position: relative;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
:root {
  --green: #1A6F00;
  --lime: #C8EB84;
  --cream: #fafbf5;
  --pale: #e3f4cb;
  --ink: #1E2417;
  --content-width: 73%;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  line-height: 1.8;
}
a {
  color: inherit;
}
a:hover {
  color: #52E7E7;
}
img {
  display: block;
  max-width: 100%;
}
h2 img {
  width: auto !important;
  height: 60px !important;
  max-width: 100%;
  object-fit: contain;
}
.sp-only {
	display: none;
}
.narrow {
  width: var(--content-width);
  margin-inline: auto;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 5vw;
  background: #FAFBF5;
}
.global-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 42px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.global-nav a {
  position: relative;
  display: block;
  text-decoration: none;
}
.global-nav img {
  width: auto;
  height: 20px;
}
.global-nav .nav-image, .global-nav .nav-image-hover {
  display: block;
  transition: opacity .25s ease;
}
.global-nav .nav-image-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.global-nav a:hover .nav-image, .global-nav a:focus-visible .nav-image {
  opacity: 0;
}
.global-nav a:hover .nav-image-hover, .global-nav a:focus-visible .nav-image-hover {
  opacity: 1;
}
.site-header > .ticket-stub {
  display: block;
  position: fixed;
  z-index: 45;
  right: 28px;
  bottom: 36px;
}
.ticket-stub {
	display: block;
	width: 168px;
	height: 72px;
	overflow: hidden;
	background: url(../img/ticket-img-off.png) center/contain no-repeat;
	color: transparent;
	text-decoration: none;
	font-size: 0;
	transition: filter .25s ease;
}
.ticket-stub:hover, .ticket-stub:focus-visible {
  	background-image: url(../img/ticket-img-on.png);
}
.ticket-stub:before, .ticket-stub:after {
  	display: none;
}
.menu-button {
	font-family: "Noto Serif JP", serif;
	display: none;
	border: 2px solid var(--green);
	border-radius: 99px;
	background: #fff;
	color: var(--green);
	padding: 4px 27px;
	font-size: 18px;
	font-weight: 900;
	transition: color .25s ease, background-color .25s ease;
}
.menu-button:hover, .menu-button:focus-visible {
	background: var(--green);
	color: #fff;
}
.hero {
	position: relative;
	z-index: 1;
	aspect-ratio: 2732/1536;
	background: url(../img/pc-mv.png) center/cover no-repeat;
}
.hero::after {
	content: "";
	position: absolute;
	left: 4.5%;
	bottom: -70px;
	width: 190px;
	aspect-ratio: 376/434;
	background: url(../img/mv-deco-01.png) center/contain no-repeat;
	pointer-events: none;
}
.intro {
	min-height: 650px;
	padding: 150px 0 20px;
	text-align: center;
	font-size: 22px;
}
.intro-lead {
	margin: 0 0 30px;
}
.intro p:not(.intro-lead) {
	text-align: left;
	margin: 0 auto 50px;
}
.scenic {
	position: relative;
	padding: 70px 0 95px;
	background: #fffef9 url(../img/pc-bg-left.png) left top/45% auto no-repeat;
}
.scenic:after {
	content: "";
	position: absolute;
	inset: 0;
	background: url(../img/pc-bg-right.png) right center/44% auto no-repeat;
	pointer-events: none;
}
.cast > * {
	position: relative;
	z-index: 1;
}
.cast h2, .news h2, .panel h2, .goods h2, .access > h2 {
	display: flex;
	justify-content: center;
	margin: 0 0 24px;
}
.cast h2 img {
	width: 250px;
}
.cast-grid {
	display: grid;
	grid-template-columns: repeat(2, 40%);
	justify-content: center;
	gap: 55px 24px;
}
.cast-grid figure {
	margin: 0;
	text-align: center;
	font-size: 32px;
}
.cast-grid img {
	width: 100%;
	aspect-ratio: 800/529;
	object-fit: cover;
	border-radius: 8px;
}
.cast-grid .cast-main {
	grid-column: 1/-1;
	width: 53%;
	justify-self: center;
}
.cast-note {
	text-align: center;
	font-size: 22px;
	margin: 24px auto;
}
.news {
	width: 60%;
	margin: 0 auto;
}
.news-list.is-scrollable {
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
}

.news-list li {
	font-size: 16px;
	display: flex;
	gap: 25px;
	padding: 8px 0;
	border-bottom: 1px solid var(--lime);
	text-decoration: none;
}
.radio {
	width: 60%;
	margin: 16px auto 0;
	padding: 15px;
	background: var(--pale);
	display: flex;
	justify-content: space-around;
	align-items: center;
	color: var(--green);
}
.sp-flex {
	display: flex;
	justify-content: space-around;
	align-items: center;
	gap: 15px;
}
.radio img {
	width: 55px;
}
.radio strong {
	flex: 1;
	font-size: 22px;
	font-weight: 900;
	line-height: 1.4em;
}
.radio strong span {
	margin-left: -0.5em;
}
.radio small {
	display: block;
	font-size: 16px;
	font-weight: bold;
}
.outline-button, .solid-button {
	display: inline-block;
	padding: 8px 30px;
	border: 2px solid var(--green);
	border-radius: 99px;
	text-decoration: none;
	color: var(--green);
	font-size: 18px;
	font-weight: 900;
	background: #fff;
	transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}
.outline-button:hover, .outline-button:focus-visible {
	background: var(--green);
	color: #fff;
}
.season-bg {
	background: transparent;
}
.sp-bg-season {
	background: url(../img/pc-bg-ticket.jpg) center top / 100% auto no-repeat;
}
.winter-bg {
	padding: 80px 0 0;
	background: none;
}
.panel {
	width: var(--content-width);
	margin: 0 auto 70px;
	padding: 30px 0;
	background: #fff;
	border: 1px solid var(--lime);
	outline: 16px solid #fff;
	box-shadow: 0 6px 24px #acca79;
	text-align: center;
}
.panel h2 img {
	width: auto;
	height: 60px;
}
.event h3 {
	font-size: 32px;
	color: var(--ink);
	font-weight: bold;
}
.ticket h3 {
	font-size: 32px;
	color: var(--ink);
	font-weight: bold;
	line-height: 1em;
}
.event .sub-ttl {
	font-size: 20px;
	font-weight: bold;
	line-height: 1em;
	margin-bottom: 8px;
}
.event-date {
	font-size: 26px;
}
.event-date small {
	font-size: 22px;
	font-weight: bold;
}
.open-time {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 16px;
}
.venue {
	font-size: 22px;
	color: var(--green);
}
.venue::before, .access > h3 a::before {
	content: "";
	display: inline-block;
	width: .8em;
	height: 1em;
	margin-right: .18em;
	background: url(../img/map-pin-off.svg) center/contain no-repeat;
	vertical-align: -.12em;
}
.venue:hover, .venue:focus-visible, .access > h3 a:hover, .access > h3 a:focus-visible {
	color: #52e7e7;
}
.venue:hover::before, .venue:focus-visible::before, .access > h3 a:hover::before, .access > h3 a:focus-visible::before {
	background-image: url(../img/map-pin-on.svg);
}
.price {
	font-size: 18px;
	font-weight: bold;
}
.price strong {
	font-size: 32px;
}
.price small {
	font-size: 16px;
}
.annotation {
	line-height: 1.7em;
	font-weight: bold;
	margin-bottom: 32px;
}
.ticket > .solid-button {
	background: var(--green);
	color: #fff;
	min-width: 240px;
	margin-bottom: 48px;
}
.ticket > .solid-button:hover, .ticket > .solid-button:focus-visible {
	background: #fff;
	color: var(--green);
}
.first-served {
	font-size: 18px;
	font-weight: 900;
}
#ticket dl {
	font-size: 18px;
	font-weight: 900;
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-bottom: 10px;
}
.notes h3 {
	text-align: center;
	color: var(--green);
}
.notes {
  text-align: left;
}
.note-area {
	display: flex;
	justify-content: center;
}
.notes ul li, .request ul li {
	margin: 8px 0;
	list-style: disc;
}
.contact {
  margin-top: 48px;
}
.contact h4 {
	font-size: 22px;
	color: var(--green);
	font-weight: bold;
	margin-bottom: 16px;
}
.contact strong {
	font-size: 18px;
	font-weight: bold;
}
.contact .phone {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.2em;
}
.contact a {
	font-size: 18px;
	color: var(--green);
	font-weight: bold;
}

.contact a:hover {
  color: #52E7E7;
}
.goods {
	text-align: center;
	padding: 50px 20px;
}
.goods h2 {
	margin-bottom: 0;
}
.goods h2 img {
	width: 250px;
}
.goods p {
	font-size: 28px;
	margin-top: 0;
}
.access {
	padding: 50px 0 0;
}
.access > h2 img {
	width: 300px;
}
.access > h3, .access > p {
	text-align: center;
}
.access > h3 a {
	font-size: 32px;
	color: var(--green);
}
.access-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 24px;
}
.access-grid h3 {
	font-size: 22px;
	text-align: center;
	font-weight: bold;
	margin-top: 0;
}
.access-grid strong {
	font-size: 18px;
	font-weight: bold;
}
.access-grid p {
	font-size: 16px;
}
.map {
	display: block;
	width: 100%;
	height: 360px;
	border: 0;
}
.access ul li {
	list-style: disc;
}
.access ul {
	padding-left: 1.5em;
}
.request {
	margin-top: 0;
	padding: 70px 0 40px;
	background: #fafbf5;
	box-shadow: 0 0 0 100vmax #fafbf5;
	clip-path: inset(0 -100vmax);
}
.request h3 {
	text-align: center;
	font-size: 32px;
}
.credits {
	text-align: center;
}
.credits p {
	margin: 0 0 28px;
}
footer {
	position: relative;
	isolation: isolate;
	min-height: 197px;
	padding: 85px 20px 35px;
	text-align: center;
	background: #fafbf5;
}
footer::before {
	content: "";
	position: absolute;
	z-index: -1;
	right: 0;
	bottom: 0;
	left: 0;
	height: 197px;
	background: linear-gradient(180deg, rgba(250, 251, 245, 0) 0%, #e3f4cb 100%);
	pointer-events: none;
}
footer small {
	display: block;
}
.mobile-menu, .menu-backdrop {
	display: none;
}


@media(max-width:780px) {
	:root {
	--content-width: 92%;
	}
	html {
		scroll-padding-top: 60px;
	}
	body {
		font-size: 14px;
	}
	.pc {
		display: none;
	}
	.sp-only {
		display: block;
	}
	h2 img {
		height: 40px !important;
	}
	.cast h2, .news h2, .panel h2, .goods h2, .access > h2 {
		display: flex;
		justify-content: center;
		margin: 0 0 14px;
	}
	.ticket-stub {
		width: 92px;
		height: 30px;
		background: url(../img/sp-ticket-img.png) center/contain no-repeat;
	}
	.narrow {
		width: var(--content-width);
	}
	.site-header {
		height: 60px;
		justify-content: space-between;
	}
	.site-header > .ticket-stub {
		display: block;
		position: static;
		width: 92px;
        height: 30px;
		padding: 0;
	}
	.global-nav {
		display: none;
	}
	.menu-button {
		display: block;
		padding: 4px 0;
    	width: 104px;
	}
	.hero {
		aspect-ratio: 780/1352;
		background-image: url(../img/sp-mv.png);
	}
	.hero::after {
		display: none;
	}
	.intro {
		min-height: 0;
		padding: 35px 0 8px;
	}
	.intro-lead {
		margin: 0 0 40px;
	}
	.intro-lead {
		margin-bottom: 22px;
	}
	.intro p:not(.intro-lead) {
		text-align: center;
		margin-bottom: 45px;
	}
	.scenic {
		padding: 0 0 24px;
		background-size: 100% auto;
	}
	.scenic:after {
		background: none;
	}
	.cast-grid {
		display: block;
	}
	.cast-grid .cast-main {
		width: auto;
	}
	.cast-grid figure {
		margin-bottom: 6px;
	}
	.cast-note {
		margin: 0 auto;
		line-height: 1.5em;
	}
	.cast-grid img {
		aspect-ratio: 1.5;
	}
	.news {
		padding: 40px 0 10px;
	}
	.news h2 img {
		width: 190px;
	}
	.news-list a {
		display: grid;
		grid-template-columns: 85px 1fr;
		gap: 5px;
		font-size: 16px;
	}
	.radio {
		width: 95%;
		margin-top: 5px;
		display: block;
		padding: 16px 8px 16px 13px;
	}
	.radio img {
		width: 47px;
		height: 40px;
		/*margin-top: -130px;*/
	}
	.radio strong {
		/*margin-left: -50px;*/
		padding-top: 10px;
		font-size: 18px;
		font-weight: 900;
	}
	.sp-flex {
		display: flex;
        justify-content: space-around;
        align-items: center;
		gap: 10px;
	}
	.radio-img {
		width: 47px;
        height: 40px;
	}
	.radio-img img {
		width: 100%;
	}
	.radio span {
		margin-left: -0.5em;
		font-size: 19px;
	}
	.radio strong small {
		font-size: 16px;
		font-weight: 700;
	}
	.radio .outline-button {
		padding: 10px 30px;
		display: block;
		justify-self: center;
		margin-top: 16px;
	}
	.season-bg {
		background: transparent;
	}
	.winter-bg {
		padding: 88px 0 0;
		background: none;
	}
	.panel {
		padding: 40px 5px;
		width: var(--content-width);
		outline-width: 7px;
		margin-bottom: 55px;
	}
	.panel h2 img {
		height: auto;
		max-height: none;
	}
	.event h2 img {
		width: 235px;
	}
	.ticket h2 img {
		width: 260px;
	}

	.event h3 {
		font-size: 32px;
		line-height: 1.35;
	}
	.event-date small {
		font-size: 22px;
	}
	.annotation {
		font-size: 16px;
	}
	.event-date small.sp-18 {
		font-size: 18px;
	}
	.first-served {
		margin-top: 8px;
	}
	#ticket dl {
		display: block;
		margin-top: 12px;
	}
	#ticket dl dt {
		margin-bottom: 3px;
	}
	#ticket dl dt,
	#ticket dl dd {
		line-height: 1.25em;
	}
	.ticket h3 {
		font-size: 22px;
	}
	.notes {
		font-size: 16px;
	}
	.notes ul, .request ul {
		padding-left: 20px;
		margin-top: 20px;
		font-size: 16px;
	}
	.goods {
		padding: 90px 20px;
	}
	.goods h2 img {
		width: 165px;
	}
	.goods p {
		font-size: 24px;
	}
	.access {
		padding: 10px 0 0;
	}
	.access > h2 img {
		width: 200px;
	}
	.access > h3 a {
		font-size: 22px;
	}
	.access > h3, .access > p {
		font-size: 16px;
	}
	.access-grid {
		display: block;
	}
	.map {
		min-height: 238px;
		height: 238px;
		margin: 20px 0 10px;
	}
	.request {
		padding: 70px 0 30px; 
	}
	.request h3 {
		line-height: 1.2;
	}
	.credits {
		font-size: 16px;
	}
	.credits p {
		margin: 0 0 22px;
	}
	footer {
		padding: 0;
		min-height: 80px;
	}
	footer::before {
		height: 80px;
	}
	
/************************
スマホ　ナビ
************************/
	.mobile-menu {
		display: block;
		position: fixed;
		z-index: 51;
		inset: 0;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		padding: 15px 5vw 60px;
		background: #fafbf5;
		overflow-y: auto;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-100%);
		transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .35s ease, visibility 0s linear .55s;
		will-change: transform;
	}
	.mobile-menu.is-open {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
		transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .35s ease, visibility 0s;
	}
	.mobile-menu__top {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.menu-close {
		border: 2px solid var(--green);
		border-radius: 99px;
		background: #fff;
		color: var(--green);
		font-family: "Noto Serif JP", serif;
		font-size: 18px;
    	font-weight: 900;
		padding: 4px 0;
    	width: 104px;
	}
	.mobile-menu nav {
		margin-top: 50px;
	}
	.mobile-menu nav ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.mobile-menu nav a {
		display: block;
		padding: 18px 0;
		border-bottom: 1px solid #72c62b;
		text-decoration: none;
	}
	.mobile-menu nav img {
		width: auto;
		height: 22px;
	}
	.menu-backdrop {
		display: none;
	}
}
/* Intro through news uses one continuous background layer. */

@media(max-width:390px) {
	.radio span {
		font-size: 18px;
	}
}



.story-bg {
	position: relative;
	isolation: isolate;
	background: #fafbf5 url(../img/pc-bg-intro-full.jpg) center top/100% auto no-repeat;
}
.story-bg::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: url(../img/pc-bg-intro-2.png) center top/100% auto no-repeat;
	opacity: .22;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 48%, transparent 86%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 48%, transparent 86%);
	pointer-events: none;
}
.story-bg::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background-image: url(../img/deco-01.png) , url(../img/cast-deco.png);
	background-position: left 38% top 42%, right 4% top 58%;
	background-size: 240px auto, 220px auto;
	background-repeat: no-repeat;
	opacity: .4;
	pointer-events: none;
}
.story-bg > .intro, .story-bg > .scenic {
	background: none;
}
.story-bg > .scenic::after {
	display: none;
}

@media(min-width:701px) {
  .story-bg::before, .story-bg::after {
		display: none;
	}
}

@media(max-width:700px) {
  .story-bg {
	  	background: #fafbf5 url(../img/sp-bg-intro.png) center top / 100% auto no-repeat;
	}

	.sp-bg-season {
		background-image: url("../img/sp-bg-ticket.jpg");
	}
}