@charset "utf-8";
/*BASE*/
main {
	background-color:#FFF;
}
#spring, #summer, #autumn, #winter { position:relative; overflow:hidden;}
.spring .en { color:#F9C !important; } .spring .ja { color:#F9C !important; }
.summer .en { color:#01afd4 !important; } .summer .ja { color:#01afd4 !important; }
.autumn .en { color:#e5a323 !important; } .autumn .ja { color:#e5a323 !important; }
.winter .en { color:#8da0a9 !important; } .winter .ja { color:#8da0a9 !important; }

.spring .ja::before, .spring .ja::after { background-color:#F9C; }
.summer .ja::before, .summer .ja::after { background-color:#01afd4; }
.autumn .ja::before, .autumn .ja::after { background-color:#e5a323; }
.winter .ja::before, .winter .ja::after { background-color:#8da0a9; }

.container .content-box > .schedule {
	/*width:calc(50% - 2em);
	padding-bottom:2em;*/
}
.container .content-box > .schedule li {
	display:flex;
	align-items:center;
}
.container .content-box > .schedule li p {
	display:flex;
	justify-content:space-between;
	align-items:center;
	width:100%;
}
.container .content-box > .schedule li .icon img {
	width:100%;
	height:auto;
}
.container .content-box > .schedule li:not(.pc) {
	border-bottom:dotted 4px #666;
}
.container .content-box > .schedule li:not(.pc)::before {
	content:"★";
	display:inline-block;
	margin-right:.5em;
}
#spring .schedule li:not(.pc)::before { color:#F9C; }
#summer .schedule li:not(.pc)::before { color:#01afd4; }
#autumn .schedule li:not(.pc)::before { color:#e5a323; }
#winter .schedule li:not(.pc)::before { color:#8da0a9; }

/*DEVICE：SP*/
@media not screen and (min-width: 768px) {
/*BASE*/
.keyvisual .title-box {
	background-color:#FFF;
}
.keyvisual h1 {
	color:rgba(1,175,212,1);
}
#keymenu .txt-box {
	text-align:justify;
	padding:2rem 1.5rem 0;
}
#spring, #summer, #autumn, #winter { padding:4rem 1.5rem; }

/*BASE CONTENTS*/
.container .content-box {
	background-color: rgba(255,255,255,.8);
	backdrop-filter: blur(12px);
	padding:3rem 1.5rem;
	border-radius:20px;
	position:relative;
	z-index:1;
}

/*BASE INFO*/
.container .content-box > .info {
}
.info .title-box {
	padding-bottom:1rem;
}
.info .title-box h1 {
	display:flex;
	flex-flow:column-reverse nowrap;
	justify-content:flex-end;
	align-items:center;
}
.info .title-box h1 .en {
	display:block;
	font-family:"AR CHRISTY Regular", sans-serif;
	font-size:40px;
	letter-spacing:.1em;
	color:rgba(1,175,212,1);
	text-shadow: .05em 0 0px #FFF, .065em 0 0px rgba(0,55,194,1);
}
.info .title-box h1 .ja {
	display:flex;
	align-items: center;
	gap:.5em;
	font-family:"Kosugi Maru", sans-serif;
	font-weight: bold;
	font-size:18px;
	color: rgba(0,55,194,1);
}
.info .title-box h1 .ja::before,
.info .title-box h1 .ja::after {
	content: "";
	height: 2px;
}
.info .title-box h1 .ja::before,
.info .title-box h1 .ja::after {
	width:1em;
}
.info .txt-box {
}
.container .content-box > .schedule li {
	font-size:16px;
	padding:1rem .5rem;
}
.container .content-box > .schedule li .icon {
	width:3.5rem;
}

/*毎月*/
#monthly .content-box {
	padding: 2rem 1rem;
	background-color:rgba(0,153,102,.2);
	border:solid 4px rgba(0,153,102,1);
}
#monthly .content-box .img-box {
	text-align:center;
	margin-bottom:1rem;
}
#monthly .content-box .txt-box {
}
#monthly .content-box .txt-box h1 {
	font-family: "Kosugi Maru";
	font-size:18px;
	line-height:1.6;
	margin-bottom:1em;
}
#monthly .content-box dl {
	display:flex;
}
#monthly .content-box dl dt {
	white-space:nowrap;
}

.container .content-box > .gallery {
	width:100%;
}
.gallery ul {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:1em 1em;
	width:100%;
}
.gallery ul li {
	width:100%;
	height:auto;
	aspect-ratio:4 / 3;
	background-color:#FFF;
	border-radius:6px;
	border:solid 1px #CCC;
}

/*KeyVisual*/
.keyvisual {
	background-color:rgba(1,175,212,8);
}
.keyvisual .title-box {
	/*mix-blend-mode:multiply;*/
}
.keyvisual h1 {
	color:rgba(1,175,212,8);
}

/*ContentNav*/
menu.content-nav {
	padding-bottom:2rem;
}
menu.content-nav li {
	border-radius:1em;
	aspect-ratio:4 / 3;
}
menu.content-nav li > a {
	display:flex;
	flex-flow:column nowrap;
	justify-content:center;
	align-items:center;
	gap:.5em;
	width:100%;
	height:auto;
	aspect-ratio:4 / 3;
	line-height:1;
	position:relative;
}
menu.content-nav li > a .en {
	display:block;
	font-family:"AR CHRISTY Regular", sans-serif;
	font-size:max(2.4vw,28px);
	letter-spacing:.1em;
	text-shadow: .05em 0 0px #FFF, .075em 0 0px rgba(0,55,194,1);
	transition:transform ease .2s;
}
menu.content-nav li > a:hover .en {
	transform: scale(1.2);
}
menu.content-nav li > a .ja {
	display:block;
	font-family:"Kosugi Maru", sans-serif;
	font-weight:bold;
	font-size:max(1.8vw,20px);
	text-shadow: .05em 0 0px #FFF, .065em 0 0px rgba(0,55,194,1);
	padding-bottom:.5em;
}
menu.content-nav li > a .ja {
	display:flex;
	align-items: center;
	gap:.5em;
	font-family:"Kosugi Maru", sans-serif;
	font-weight: bold;
	font-size:max(1.8vw,20px);
	color: rgba(0,55,194,1);
}
}


/*DEVICE：PC TAB*/
@media screen and (min-width: 768px) {
/*BASE*/
#keymenu .txt-box { font-size:max(1.5vw,18px); padding:80px; }
#spring, #summer, #autumn, #winter { padding:80px; }
#header menu.pc li.event a .en {
	color:rgba(1,181,56,1);
}
article:nth-child(1) {
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
    "keymenu keymenu"
    "spring summer"
    "autumn winter"
	"monthly monthly";
}
#keymenu { grid-area: keymenu; }
#spring { grid-area: spring; }
#summer { grid-area: summer; }
#autumn { grid-area: autumn; }
#winter { grid-area: winter; }
#monthly { grid-area: monthly; }

/*BASE CONTENTS*/
.container .content-box {
	/*display:flex;
	flex-flow:row wrap; 
	justify-content:space-between;
	align-items:center;*/
	background-color: rgba(255,255,255,.75);
	backdrop-filter: blur(12px);
	padding:3em 4em 4em;
	border-radius:20px;
	position:relative;
	z-index:1;
}

/*BASE INFO*/
.container .content-box > .info {
	/*width:calc(50% - 2em);*/
}
.info .title-box {
	/*padding-top:2em;
	padding-bottom:2em;*/
	margin-bottom:2em;
}
.info .title-box h1 {
	display:flex;
	flex-flow:column-reverse nowrap;
	justify-content:flex-end;
	align-items:center;
	gap:1em;
}
.info .title-box h1 .en {
	display:block;
	font-family:"AR CHRISTY Regular", sans-serif;
	font-size:max(4.8vw,56px);
	letter-spacing:.1em;
	color:rgba(1,175,212,1);
	text-shadow: .05em 0 0px #FFF, .065em 0 0px rgba(0,55,194,1);
}
.info .title-box h1 .ja {
	display:flex;
	align-items: center;
	gap:.5em;
	font-family:"Kosugi Maru", sans-serif;
	font-weight: bold;
	font-size:max(1.8vw,20px);
	color: rgba(0,55,194,1);
}
.info .title-box h1 .ja::before,
.info .title-box h1 .ja::after {
	content: "";
	height: 2px;
}
.info .title-box h1 .ja::before,
.info .title-box h1 .ja::after {
	width:1em;
}
.container .content-box > .schedule li {
	font-family:"Kosugi Maru", sans-serif;
	font-size:max(1.5vw,18px);
	padding:.5em;
}
.container .content-box > .schedule li .icon {
	width:3.5em;
}
.container .content-box > .schedule li:not(.pc) {
	border-bottom:dotted 4px #666;
}

.container .content-box > .gallery {
	width:100%;
}
.gallery ul {
	display:flex;
	flex-flow:row nowrap;
	align-items:center;
	gap:1em 1em;
	width:100%;
}
.gallery ul li {
	flex-grow:1;
	width:100%;
	height:auto;
	aspect-ratio:4 / 3;
	background-color:#FFF;
	border-radius:6px;
	border:solid 1px #CCC;
}

/*KeyVisual*/
.keyvisual {
	background-color:rgba(1,175,212,8);
}
.keyvisual .title-box {
	/*mix-blend-mode:multiply;*/
}
.keyvisual h1 {
	color:rgba(1,175,212,8);
}

/*ContentNav*/
menu.content-nav {
	padding-bottom:80px;
}
menu.content-nav li {
	border-radius:1em;
	aspect-ratio:4 / 3;
}
menu.content-nav li > a {
	display:flex;
	flex-flow:column nowrap;
	justify-content:center;
	align-items:center;
	gap:.5em;
	width:100%;
	height:auto;
	aspect-ratio:4 / 3;
	line-height:1;
	position:relative;
}
menu.content-nav li > a .en {
	display:block;
	font-family:"AR CHRISTY Regular", sans-serif;
	font-size:max(2.4vw,28px);
	letter-spacing:.1em;
	text-shadow: .05em 0 0px #FFF, .075em 0 0px rgba(0,55,194,1);
	transition:transform ease .2s;
}
menu.content-nav li > a:hover .en {
	transform: scale(1.2);
}
menu.content-nav li > a .ja {
	display:block;
	font-family:"Kosugi Maru", sans-serif;
	font-weight:bold;
	font-size:max(1.8vw,20px);
	text-shadow: .05em 0 0px #FFF, .065em 0 0px rgba(0,55,194,1);
	padding-bottom:.5em;
}
menu.content-nav li > a .ja {
	display:flex;
	align-items: center;
	gap:.5em;
	font-family:"Kosugi Maru", sans-serif;
	font-weight: bold;
	font-size:max(1.8vw,20px);
	color: rgba(0,55,194,1);
}

#keymenu menu.content-nav {
	display:none;
}

/*毎月*/
#monthly .content-box {
	display:flex;
	align-items:center;
	column-gap:2em;
	padding:2em 2em;
	background-color:rgba(0,153,102,.2);
	border:solid 4px rgba(0,153,102,1);
}
#monthly .content-box .img-box {
	flex-grow:1;
}
#monthly .content-box .txt-box {
	width:calc(100% - 40%);
}
#monthly .content-box .txt-box h1 {
	font-family: "Kosugi Maru";
	font-size:max(1.8vw,24px);
	line-height:1.6;
	margin-bottom:1em;
}
#monthly .content-box dl {
	display:flex;
}
#monthly .content-box dl dt {
	white-space:nowrap;
}
}


menu.content-nav li > a .ja::before, menu.content-nav li > a .ja::after { content: ""; height: 2px; }
menu.content-nav li > a .ja::before, menu.content-nav li > a .ja::after { width:1em; }
menu.content-nav li.spring > a { background-color:rgba(255,153,204,.2); }
menu.content-nav li.spring > a:hover { background-color:rgba(255,153,204,.3); }
menu.content-nav li.summer > a { background-color:rgba(1,175,212,.2); }
menu.content-nav li.summer > a:hover { background-color:rgba(1,175,212,.3); }
menu.content-nav li.autumn > a { background-color:rgba(229,163,35,.2); }
menu.content-nav li.autumn > a:hover { background-color:rgba(229,163,35,.3); }
menu.content-nav li.winter > a { background-color:rgba(141,160,169,.2); }
menu.content-nav li.winter > a:hover { background-color:rgba(141,160,169,.3); }

/*SPRING 4-6月*/
#spring {
	background-color:rgba(251,219,219,1);
}
#spring .bgimg {
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left:0;
}
#spring .bgimg > div {
	width: 2vw;
	min-width:20px;
	position: absolute;
	top: -50px;
	animation: sakura 4s linear infinite, sakura-rotate1 2s ease-in-out infinite alternate;
}
@keyframes sakura {
	to { top: 120%; }
}
@keyframes sakura-rotate1 {
	from { transform: translateX(0px) rotate(0deg); }
	to { transform: translateX(200px) rotate(-80deg) rotateX(180deg); }
}
@keyframes sakura-rotate2 {
	from { transform: translateX(200px) rotate(-45deg); }
	to { transform: translateX(0px) rotate(0deg); }
}
#spring .bgimg > div:nth-child(1) {
	left: 0;
	animation: sakura 10s linear infinite, sakura-rotate1 3s ease-in-out infinite alternate;
}
#spring .bgimg > div:nth-child(2) {
	left: 5%;
	animation: sakura 15s linear infinite, sakura-rotate1 2s ease-in-out infinite alternate;
}
#spring .bgimg > div:nth-child(3) {
	left: 15%;
	animation: sakura 9s linear infinite, sakura-rotate1 3.5s ease-in-out infinite alternate;
}
#spring .bgimg > div:nth-child(4) {
	left: 30%;
	animation: sakura 8s linear infinite, sakura-rotate2 4s ease-in-out infinite alternate;
}
#spring .bgimg > div:nth-child(5) {
	left: 40%;
	animation: sakura 10s linear infinite, sakura-rotate1 4s ease-in-out infinite alternate;
}
#spring .bgimg > div:nth-child(6) {
	left: 55%;
	animation: sakura 11s linear infinite, sakura-rotate2 3s ease-in-out infinite alternate;
}
#spring .bgimg > div:nth-child(7) {
	left: 65%;
	animation: sakura 7s linear infinite, sakura-rotate2 3.5s ease-in-out infinite alternate;
}
#spring .bgimg > div:nth-child(8) {
	left: 50%;
	animation: sakura 7s linear infinite, sakura-rotate1 3s ease-in-out infinite alternate;
}
#spring .bgimg > div:nth-child(9) {
	left: 95%;
	animation: sakura 8s linear infinite, sakura-rotate2 4s ease-in-out infinite alternate;
}
#spring .bgimg > div:nth-child(10) {
	left: 80%;
	animation: sakura 10s linear infinite, sakura-rotate1 4s ease-in-out infinite alternate;
}

/*SUMMER 7-9月*/
#summer {
	background-color:rgba(1,175,212,.6);
}
#summer .bgimg {
	display:block;
	background:url(../images/event/summer/sea-01.svg) repeat-x top center;
	width:120%;
	height:100px;
	position:absolute;
	animation: cloudmove 1s infinite alternate forwards;
	bottom:0;
	left: 0;
	right: 0;
}
@keyframes cloudmove {
	0% { transform: translate(-20px, 20px); }
	100% { transform: translate(-20px, 32px); }
}

/*AUTUMN 10-12月*/
#autumn {
	background-color:rgba(241,199,144,.8);
}
#autumn .bgimg {
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left:0;
}
#autumn .bgimg > div {
	width: 3.6vw;
	min-width:20px;
	position: absolute;
	top: -50px;
	animation: leaf 4s linear infinite, leaf-rotate1 2s ease-in-out infinite alternate;
}
@keyframes leaf {
	to { top: 120%; }
}
@keyframes leaf-rotate1 {
	from { transform: translateX(0px) rotate(0deg); }
	to { transform: translateX(200px) rotate(-80deg) rotateX(180deg); }
}
@keyframes leaf-rotate2 {
	from { transform: translateX(200px) rotate(-45deg); }
	to { transform: translateX(0px) rotate(0deg); }
}
#autumn .bgimg > div:nth-child(1) {
	left: 0;
	animation: leaf 10s linear infinite, leaf-rotate1 3s ease-in-out infinite alternate;
}
#autumn .bgimg > div:nth-child(2) {
	left: 5%;
	animation: leaf 15s linear infinite, leaf-rotate1 2s ease-in-out infinite alternate;
}
#autumn .bgimg > div:nth-child(3) {
	left: 15%;
	animation: leaf 9s linear infinite, leaf-rotate1 3.5s ease-in-out infinite alternate;
}
#autumn .bgimg > div:nth-child(4) {
	left: 30%;
	animation: leaf 8s linear infinite, leaf-rotate2 4s ease-in-out infinite alternate;
}
#autumn .bgimg > div:nth-child(5) {
	left: 40%;
	animation: leaf 10s linear infinite, leaf-rotate1 4s ease-in-out infinite alternate;
}
#autumn .bgimg > div:nth-child(6) {
	left: 55%;
	animation: leaf 11s linear infinite, leaf-rotate2 3s ease-in-out infinite alternate;
}
#autumn .bgimg > div:nth-child(7) {
	left: 65%;
	animation: leaf 7s linear infinite, leaf-rotate2 3.5s ease-in-out infinite alternate;
}
#autumn .bgimg > div:nth-child(8) {
	left: 50%;
	animation: leaf 7s linear infinite, leaf-rotate1 3s ease-in-out infinite alternate;
}
#autumn .bgimg > div:nth-child(9) {
	left: 95%;
	animation: leaf 8s linear infinite, leaf-rotate2 4s ease-in-out infinite alternate;
}
#autumn .bgimg > div:nth-child(10) {
	left: 80%;
	animation: leaf 10s linear infinite, leaf-rotate1 4s ease-in-out infinite alternate;
}

/*WINTER 1-3月*/
#winter {
	background-color:rgba(220,229,243,1);
}
#winter .bgimg {
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left:0;
}
#winter .bgimg > div {
	width: 3vw;
	min-width:20px;
	position: absolute;
	top: -50px;
	animation: snow 4s linear infinite, snow-rotate1 2s ease-in-out infinite alternate;
}
@keyframes snow {
	to { top: 120%; }
}
@keyframes snow-rotate1 {
	from { transform: translateX(0px) rotate(0deg); }
	to { transform: translateX(200px) rotate(-80deg) rotateX(180deg); }
}
@keyframes snow-rotate2 {
	from { transform: translateX(200px) rotate(-45deg); }
	to { transform: translateX(0px) rotate(0deg); }
}
#winter .bgimg > div:nth-child(1) {
	left: 0;
	animation: snow 10s linear infinite, snow-rotate1 3s ease-in-out infinite alternate;
}
#winter .bgimg > div:nth-child(2) {
	left: 5%;
	animation: snow 15s linear infinite, snow-rotate1 2s ease-in-out infinite alternate;
}
#winter .bgimg > div:nth-child(3) {
	left: 15%;
	animation: snow 9s linear infinite, snow-rotate1 3.5s ease-in-out infinite alternate;
}
#winter .bgimg > div:nth-child(4) {
	left: 30%;
	animation: snow 8s linear infinite, snow-rotate2 4s ease-in-out infinite alternate;
}
#winter .bgimg > div:nth-child(5) {
	left: 40%;
	animation: snow 10s linear infinite, snow-rotate1 4s ease-in-out infinite alternate;
}
#winter .bgimg > div:nth-child(6) {
	left: 55%;
	animation: snow 11s linear infinite, snow-rotate2 3s ease-in-out infinite alternate;
}
#winter .bgimg > div:nth-child(7) {
	left: 65%;
	animation: snow 7s linear infinite, snow-rotate2 3.5s ease-in-out infinite alternate;
}
#winter .bgimg > div:nth-child(8) {
	left: 50%;
	animation: snow 7s linear infinite, snow-rotate1 3s ease-in-out infinite alternate;
}
#winter .bgimg > div:nth-child(9) {
	left: 95%;
	animation: snow 8s linear infinite, snow-rotate2 4s ease-in-out infinite alternate;
}
#winter .bgimg > div:nth-child(10) {
	left: 80%;
	animation: snow 10s linear infinite, snow-rotate1 4s ease-in-out infinite alternate;
}