@charset "UTF-8";
body { background: #f4efe8; }

html #spBtn { position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; top: 0; line-height: 44px; text-align: center; z-index: 999; display: none; }
@media only screen and (max-width: 1024px) { html #spBtn { display: block; } }
html #spBtn a.mburger { position: absolute; top: 0; right: 0; color: #0A97E3; --mb-button-size: 5.5em; --mb-bar-spacing: 1em; }
@media only screen and (max-width: 1024px) { html #spBtn a.mburger { --mb-button-size: 5em; --mb-bar-spacing: 0.9em; } }
@media only screen and (max-width: 768px) { html #spBtn a.mburger { --mb-button-size: 4.5em; --mb-bar-spacing: 0.8em; } }
@media only screen and (max-width: 576px) { html #spBtn a.mburger { --mb-button-size: 4em; --mb-bar-spacing: 0.6em; } }

header#page { width: 100%; background: rgba(255, 255, 255, 0.9); padding: clamp(1em, 3vw, 1.25em) 1em; display: flex; }
@media only screen and (max-width: 1024px) { header#page { justify-content: flex-start; padding: 1.25em 1em; } }
@media only screen and (max-width: 576px) { header#page { padding: 1em; } }
header#page h1 img { height: clamp(1.6em, 5vw, 2.8em); }

#gNav { width: 100%; background: linear-gradient(145deg, rgba(227, 3, 128, 0.9) 0%, rgba(10, 151, 227, 0.9) 100%); }
@media only screen and (max-width: 1024px) { #gNav { display: none; } }
#gNav ul { display: flex; justify-content: center; flex-wrap: wrap; }
#gNav ul li { text-align: center; font-size: 0.95em; font-weight: bold; }
@media only screen and (max-width: 1540px) { #gNav ul li { font-size: 0.85em; } }
@media only screen and (max-width: 1280px) { #gNav ul li { font-size: 0.7em; } }
#gNav ul li a { padding: 1em 0.75em; display: block; text-decoration: none; color: #fff; }
@media only screen and (max-width: 1540px) { #gNav ul li a { padding: 1em 0.6em; } }
#gNav ul li a:hover { background: rgba(0, 0, 0, 0.15); }
#gNav ul li a [class^="icon-"] { padding-left: 0.25em; font-size: 1em; }

/* spMenu
---------------------------------------------------------------------*/
#spMenu a { color: inherit; }
#spMenu a:link { color: inherit; }
#spMenu a:visited { color: inherit; }
#spMenu ul { line-height: 2; display: none; }
#spMenu ul li#spEn { display: none; }
#spMenu #reserve { background: #FFE33F; color: #333; font-weight: bold; }
#spMenu #public { background: #E8506E; color: #fff; font-weight: bold; }

/* pageTitle
---------------------------------------------------------------------*/
#pageTitle { padding: clamp(3.5em, 6vw, 8em) 2em; margin-bottom: 5em; background-image: url("../img/bg_pageTitle01.webp"); background-color: #f1eae1; background-position: right center; background-repeat: no-repeat; background-size: contain; }
@media only screen and (max-width: 576px) { #pageTitle { padding-left: 1em; } }
#pageTitle__inner { width: 100%; max-width: calc(1700px + (5em * 2)); padding-left: 5em; padding-right: 5em; margin: 0 auto; }
@media only screen and (max-width: 1540px) { #pageTitle__inner { padding-left: 4em; padding-right: 4em; } }
@media only screen and (max-width: 1280px) { #pageTitle__inner { padding-left: 3em; padding-right: 3em; } }
@media only screen and (max-width: 1024px) { #pageTitle__inner { padding-left: 2em; padding-right: 2em; } }
@media only screen and (max-width: 768px) { #pageTitle__inner { padding-left: 1.5em; padding-right: 1.5em; } }
@media only screen and (max-width: 576px) { #pageTitle__inner { padding-left: 1em; padding-right: 1em; } }
#pageTitle__inner h1 { font-size: clamp(1.4em, 3.5vw, 2.4em); font-weight: 700; }

/* container
---------------------------------------------------------------------*/
.container { width: 100%; max-width: calc(1700px + (5em * 2)); padding-left: 5em; padding-right: 5em; margin: 0 auto; padding-bottom: 3em; }
@media only screen and (max-width: 1540px) { .container { padding-left: 4em; padding-right: 4em; } }
@media only screen and (max-width: 1280px) { .container { padding-left: 3em; padding-right: 3em; } }
@media only screen and (max-width: 1024px) { .container { padding-left: 2em; padding-right: 2em; } }
@media only screen and (max-width: 768px) { .container { padding-left: 1.5em; padding-right: 1.5em; } }
@media only screen and (max-width: 576px) { .container { padding-left: 1em; padding-right: 1em; } }
.container main { width: calc(100% - (300px + 3em)); padding-bottom: 3em; }
@media only screen and (max-width: 1280px) { .container main { width: calc(100% - (220px + 2em)); } }
@media only screen and (max-width: 1024px) { .container main { width: 100% !important; } }
.container main.full { width: 100% !important; }
.container #side { width: 300px; position: relative; }
@media only screen and (max-width: 1280px) { .container #side { width: 220px; } }
@media only screen and (max-width: 1024px) { .container #side { display: none; } }
.container #side .fixnav { position: sticky; top: 0; width: 300px; }
@media only screen and (max-width: 1280px) { .container #side .fixnav { width: 220px; } }
.container #side .fixnav p.sideTitle { font-weight: bold; font-size: 1rem; padding-bottom: 0.25em; }
.container #side .fixnav p.sideTitle a { color: #333; }
.container #side .fixnav ul { border-top: 2px solid #333; margin-bottom: 2em; font-size: 0.85rem; }
.container #side .fixnav ul li { border-bottom: 1px solid #999; }
.container #side .fixnav ul li a { padding: 1em 1em; display: block; color: #333; }
.container #side .fixnav ul li a:hover { background: #f1eae1; text-decoration: none; }
.container #side .fixnav ul li a.active { background: #ebe0d3; font-weight: bold; cursor: default; }
.container #side .fixnav ul li a.active a:hover { transition: none; background: #e4decd; cursor: default; }
.container #side .fixnav ul.js-scrollspy-nav { border-top: 1px solid #999; font-size: 1rem; }
.container #side .fixnav ul.js-scrollspy-nav ul.js-sub-scrollspy-nav { font-size: 0.85rem; }
.container #side .fixnav ul.js-scrollspy-nav ul.js-sub-scrollspy-nav li a.active { background: #ebe0d3; font-weight: bold; cursor: default; }
.container #side .fixnav img:hover { opacity: 0.8; }
.container #side img { width: 100%; }

/* mainFull
---------------------------------------------------------------------*/
/* mainWide
---------------------------------------------------------------------*/
/* main
---------------------------------------------------------------------*/
.mainIn { padding: 0 10px; }

/* 写真横並び
---------------------------------------------------------------------*/
.secPhotoRow { display: flex; justify-content: space-between; flex-wrap: wrap; }
@media only screen and (max-width: 576px) { .secPhotoRow { display: inherit; } }
.secPhotoRow figure { margin-top: 1em; width: calc((100% - 1.5em) / 2); }
@media only screen and (max-width: 1280px) { .secPhotoRow figure { width: calc((100% - 1em) / 2); } }
@media only screen and (max-width: 1024px) { .secPhotoRow figure { width: calc((100% - 1.5em) / 2); } }
@media only screen and (max-width: 768px) { .secPhotoRow figure { width: calc((100% - 1em) / 2); } }
@media only screen and (max-width: 576px) { .secPhotoRow figure { width: 90%; margin: 1em auto; } }

.subTitle01 { background: #0A97E3; color: #fff; border-radius: 0.25em; font-size: clamp(1em, 3vw, 1.1em); font-weight: bold; padding: 0.5em 1em; margin-bottom: 1em; }

.subTitle02 { position: relative; background: #fff; font-size: clamp(1.1em, 3vw, 1.2em); font-weight: 700; border-top: 2px solid #774db2; border-bottom: 2px solid #774db2; padding: 0.5em 1em 0.5em 2em; color: #333; margin-bottom: 1em; }
.subTitle02::after { position: absolute; top: 50%; left: 1em; transform: translateY(-50%); content: ''; width: 0.3em; height: 1em; border-radius: 0.15em; background-color: rgba(119, 77, 178, 0.8); }

.subTitle03 { color: #fff; padding: 1em 1.5em; background-color: #774db2; margin-bottom: 2em; font-size: clamp(1.1em, 3vw, 1.2em); font-weight: 800; box-shadow: 0 1em 1em -0.75em rgba(0, 0, 0, 0.5); }
@media only screen and (max-width: 1024px) { .subTitle03 { padding: 1em 1.25em; } }
@media only screen and (max-width: 576px) { .subTitle03 { padding: 1em 1em; } }

.subTitle04 { font-size: clamp(1.1em, 3vw, 1.2em); font-weight: bold; border-bottom: 1px solid #666; padding-bottom: 0.5em; margin-bottom: 1em; padding-left: 1.5em; text-indent: -1.5em; }
.subTitle04::before { content: "●"; color: #E30380; padding-right: 0.5em; }

.subTitle05 { margin-top: 2em; margin-bottom: 0.5em; font-weight: 700; font-size: 1.1em; }
@media only screen and (max-width: 576px) { .subTitle05 { font-size: 1em; } }
.subTitle05::before { content: "●"; color: #0A97E3; padding-right: 0.5em; }

.subTitle06 { font-size: 1.1em; font-weight: bold; border-bottom: 1px solid #666; padding-bottom: 0.5em; margin-bottom: 1em; padding-left: 1.5em; text-indent: -1.5em; }
.subTitle06::before { content: "■"; color: #E30380; padding-right: 0.5em; }

.subTitle07 { font-weight: bold; font-size: 1.1em; color: #fff; padding: 0.25em 1em; margin-top: 1em; margin-bottom: 1em; display: block; background: #E30380; vertical-align: middle; border-radius: 2em; }
@media only screen and (max-width: 576px) { .subTitle07 { font-size: 1em; } }
.subTitle07::before { content: "●"; color: #f4efe8; margin-right: 1em; }

.subTitle08 { margin-top: 2em; margin-bottom: 0.5em; border-bottom: 1px solid #999; padding-bottom: 0.5em; }
.subTitle08::before { content: "■"; padding-right: 0.5em; }

/* カレンダー
---------------------------------------------------------------------*/
ul + .cal, ul + .pageCal { margin-top: 1em; }

.cal + .cal, .pageCal + .cal, .cal + .pageCal, .pageCal + .pageCal { margin-top: 2em; }
.cal > p, .pageCal > p { font-weight: bold; font-size: 1em; border-bottom: 1px solid #CCC; margin-bottom: 1em; padding-bottom: 0.25em; }
.cal > p:not(:first-child), .pageCal > p:not(:first-child) { margin-top: 2em; }
.cal table, .pageCal table { border-collapse: separate; border-spacing: 3px; font-size: 0.9em; width: 100%; table-layout: fixed; }
.cal table thead tr th, .pageCal table thead tr th { text-align: center; font-weight: bold; }
.cal table thead tr th.sat, .pageCal table thead tr th.sat { color: #0077E3; }
.cal table thead tr th.sun, .pageCal table thead tr th.sun { color: #E20003; }
.cal table tbody tr td, .pageCal table tbody tr td { text-align: center; }
.cal table tbody tr td.next, .pageCal table tbody tr td.next { color: #AAAAAA; }
.cal table tbody tr td.day, .pageCal table tbody tr td.day { color: #FFF !important; background: #FF8082; border-radius: 5px; font-weight: bold; padding: 0.5em 0; }

.pageCal { float: left; margin-right: 20px; }
.pageCal > p { font-size: 1em; }
.pageCal table { max-width: 280px; font-size: 0.8em; }

#breadcrumbs { width: 100%; max-width: calc(1700px + (5em * 2)); padding-left: 5em; padding-right: 5em; margin: 0 auto; overflow-x: auto; word-break: keep-all; white-space: nowrap; -webkit-overflow-scrolling: touch; }
@media only screen and (max-width: 1540px) { #breadcrumbs { padding-left: 4em; padding-right: 4em; } }
@media only screen and (max-width: 1280px) { #breadcrumbs { padding-left: 3em; padding-right: 3em; } }
@media only screen and (max-width: 1024px) { #breadcrumbs { padding-left: 2em; padding-right: 2em; } }
@media only screen and (max-width: 768px) { #breadcrumbs { padding-left: 1.5em; padding-right: 1.5em; } }
@media only screen and (max-width: 576px) { #breadcrumbs { padding-left: 1em; padding-right: 1em; } }
#breadcrumbs ol { width: 100%; padding: 1em 0; font-size: 0.9em; display: flex; }
@media only screen and (max-width: 768px) { #breadcrumbs ol { font-size: 0.85em; } }
#breadcrumbs ol li { color: #666; }
#breadcrumbs ol li:before { content: ""; font-family: engekisai; font-size: 0.9em; font-weight: normal !important; display: inline-block; color: #999; padding-right: 1em; padding-left: 1em; }
@media only screen and (max-width: 576px) { #breadcrumbs ol li:before { padding-right: 0.5em; padding-left: 0.5em; } }
#breadcrumbs ol li:first-child::before { content: none; }
#breadcrumbs ol li:last-child { padding-right: 1em; }
#breadcrumbs ol li a { font-weight: 600; text-decoration: underline; color: #333; }
#breadcrumbs ol li a:hover { text-decoration: none; }

/* breadcrumbs
---------------------------------------------------------------------*/
/* footer
---------------------------------------------------------------------*/
#footerTop { width: 100%; background: #fff; padding-top: 3em; padding-bottom: 3em; }
#footerTop #footerTopIn { width: 100%; max-width: calc(1700px + (5em * 2)); padding-left: 5em; padding-right: 5em; margin: 0 auto; position: relative; }
@media only screen and (max-width: 1540px) { #footerTop #footerTopIn { padding-left: 4em; padding-right: 4em; } }
@media only screen and (max-width: 1280px) { #footerTop #footerTopIn { padding-left: 3em; padding-right: 3em; } }
@media only screen and (max-width: 1024px) { #footerTop #footerTopIn { padding-left: 2em; padding-right: 2em; } }
@media only screen and (max-width: 768px) { #footerTop #footerTopIn { padding-left: 1.5em; padding-right: 1.5em; } }
@media only screen and (max-width: 576px) { #footerTop #footerTopIn { padding-left: 1em; padding-right: 1em; } }
#footerTop #footerTopIn a { text-decoration: underline; color: #333; font-weight: 500; }
#footerTop #footerTopIn a:hover { text-decoration: none; }
#footerTop #footerTopIn .sec01 { border-bottom: 1px dashed #333; margin-bottom: 1em; padding-bottom: 1em; }
#footerTop #footerTopIn .sec01 p { font-size: 0.9em; }
#footerTop #footerTopIn dl { font-size: 0.9em; }
#footerTop #footerTopIn dl dt { clear: left; float: left; width: 6.5em; padding: 0; text-justify: inter-ideograph; text-align-last: justify; }
#footerTop #footerTopIn dl dt::before { content: "【"; }
#footerTop #footerTopIn dl dt::after { content: "】"; }
#footerTop #footerTopIn dl dd { margin-left: 0; padding-left: 6.5em; }
#footerTop #footerTopIn dl dd ul { display: flex; flex-wrap: wrap; }
#footerTop #footerTopIn dl dd ul li:not(:last-child)::after { content: "、"; }
@media only screen and (max-width: 576px) { #footerTop.en #footerTopIn > p:first-child { margin-bottom: 1em; } }
#footerTop.en #footerTopIn dl dt { width: 5em; }
#footerTop.en #footerTopIn dl dt::before { content: "[ "; }
#footerTop.en #footerTopIn dl dt::after { content: " ]"; }
#footerTop.en #footerTopIn dl dd { padding-left: 6em; }
#footerTop.en #footerTopIn dl dd ul li:not(:last-child)::after { content: ","; padding: 0 0.5em; }
#footerTop.en #footerTopIn dl dd ul li:has(.logo)::after { content: none; }

footer { width: 100%; background: #E30380; padding-top: 3em; padding-bottom: 3em; }
footer #footerIn { width: 100%; max-width: calc(1700px + (5em * 2)); padding-left: 5em; padding-right: 5em; margin: 0 auto; color: #fff; display: flex; justify-content: space-between; }
@media only screen and (max-width: 1540px) { footer #footerIn { padding-left: 4em; padding-right: 4em; } }
@media only screen and (max-width: 1280px) { footer #footerIn { padding-left: 3em; padding-right: 3em; } }
@media only screen and (max-width: 1024px) { footer #footerIn { padding-left: 2em; padding-right: 2em; } }
@media only screen and (max-width: 768px) { footer #footerIn { padding-left: 1.5em; padding-right: 1.5em; } }
@media only screen and (max-width: 576px) { footer #footerIn { padding-left: 1em; padding-right: 1em; } }
@media only screen and (max-width: 768px) { footer #footerIn { display: inherit; } }
footer #footerIn a { text-decoration: underline; color: #fff; }
footer #footerIn a:hover { text-decoration: none; }
footer #footerIn .sec01 { width: 80%; }
@media only screen and (max-width: 768px) { footer #footerIn .sec01 { width: 100%; } }
footer #footerIn .sec01 h1 { font-size: 1.1em; font-weight: bold; margin-bottom: 1em; }
@media only screen and (max-width: 768px) { footer #footerIn .sec01 h1 { text-align: center; } }
@media only screen and (max-width: 768px) { footer #footerIn .sec01 ul { text-align: center; } }
footer #footerIn .sec01 ul.sec01__01 { display: flex; flex-wrap: wrap; }
@media only screen and (max-width: 768px) { footer #footerIn .sec01 ul.sec01__01 { display: inherit; text-align: center; } }
footer #footerIn .sec01 ul.sec01__01 li { margin-right: 1em; }
@media only screen and (max-width: 768px) { footer #footerIn .sec01 ul.sec01__01 li { margin-right: 0; } }
footer #footerIn .sec01 ul.sec01__01 li:last-child { margin-right: 0; }
footer #footerIn .sec01 ul.sec01__02 a { font-weight: 500; }
@media only screen and (max-width: 768px) { footer.en #footerIn .sec01 h1 { text-align: left; } }
@media only screen and (max-width: 768px) { footer.en #footerIn .sec01 ul { text-align: left; } }
@media only screen and (max-width: 768px) { footer.en #footerIn .sec01 ul.sec01__01 { text-align: left; } }

#sticky-container { height: auto; position: relative; }
#sticky-container #bnrFooter { position: sticky; bottom: 0; width: 100%; background: rgba(10, 151, 227, 0.9); padding: 0.75em; z-index: 9; display: flex; justify-content: center; align-items: center; }
@media only screen and (max-width: 576px) { #sticky-container #bnrFooter { justify-content: flex-start; } }
#sticky-container #bnrFooter .sec01 { margin: 0 1em; }
@media only screen and (max-width: 1024px) { #sticky-container #bnrFooter .sec01 { margin: 0 0.75em; } }
@media only screen and (max-width: 768px) { #sticky-container #bnrFooter .sec01 { margin: 0 0.5em; } }
#sticky-container #bnrFooter .sec01 p { text-align: center; }
@media only screen and (max-width: 768px) { #sticky-container #bnrFooter .sec01 p { font-size: 0.9em; } }
#sticky-container #bnrFooter .sec01 p a { text-decoration: none; display: block; background: #FFE33F; color: #333; font-weight: bold; padding: 0.5em 1.5em; margin: 0 auto; border-radius: 3em; transition: background 0.2s, color 0.2s; }
#sticky-container #bnrFooter .sec01 p a:hover { background: #E30380; color: #fff; }
#sticky-container #bnrFooter .sec02 { margin: 0 1em; }
@media only screen and (max-width: 1024px) { #sticky-container #bnrFooter .sec02 { margin: 0 0.75em; } }
@media only screen and (max-width: 768px) { #sticky-container #bnrFooter .sec02 { margin: 0 0.5em; } }
#sticky-container #bnrFooter .sec02 ul { display: flex; }
#sticky-container #bnrFooter .sec02 ul li { line-height: 1; }
#sticky-container #bnrFooter .sec02 ul li + li { margin-left: 0.5em; }
#sticky-container #bnrFooter .sec02 ul li a { display: block; text-decoration: none; }
#sticky-container #bnrFooter .sec02 ul li a:hover img { opacity: 1; }
#sticky-container #bnrFooter .sec02 ul li a img { width: 2.5em; }
@media only screen and (max-width: 768px) { #sticky-container #bnrFooter .sec02 ul li a img { width: 2em; } }
#sticky-container #bnrFooter .sec03 { margin: 0 1em; }
@media only screen and (max-width: 1024px) { #sticky-container #bnrFooter .sec03 { margin: 0 0.75em; } }
@media only screen and (max-width: 768px) { #sticky-container #bnrFooter .sec03 { display: none; } }
#sticky-container #bnrFooter .sec03 ul li { font-weight: 500; }
#sticky-container #bnrFooter .sec03 ul li + li { margin-top: 0.15em; }
#sticky-container #bnrFooter .sec03 ul li a { font-size: 0.9em; color: #333; background: #fff; border-radius: 3em; display: inline-block; padding: 0 1em 0 0.75em; text-decoration: none; transition: background 0.2s, color 0.2s; }
#sticky-container #bnrFooter .sec03 ul li a::before { content: ""; font-family: engekisai; font-size: 1em; font-weight: normal !important; display: inline-block; color: #E30380; padding-right: 0.25em; }
#sticky-container #bnrFooter .sec03 ul li a:hover { background: #E30380; color: #fff; }
#sticky-container #bnrFooter .sec03 ul li a:hover::before { content: ""; font-family: engekisai; font-size: 1em; font-weight: normal !important; display: inline-block; color: #fff; }

/* tag
---------------------------------------------------------------------*/
/* pagetop
---------------------------------------------------------------------*/
#page-top { position: fixed; right: 1em; bottom: 1em; z-index: 10; opacity: 0; transform: translateY(calc(1em + 4em)); }
@media only screen and (max-width: 768px) { #page-top { right: 0.5em; bottom: 0.5em; } }
#page-top.UpMove { animation: UpAnime 0.5s forwards; }
#page-top.DownMove { animation: DownAnime 0.5s forwards; }
#page-top a { display: flex; justify-content: center; align-items: center; background-color: rgba(119, 77, 178, 0.9); border-radius: 0.25em; width: 4em; height: 4em; color: #fff; text-align: center; text-transform: uppercase; text-decoration: none; font-size: 1rem; transition: all 0.3s; }
@media only screen and (max-width: 768px) { #page-top a { width: 3em; height: 3em; } }
#page-top a:hover { background: #6b45a0; }

@keyframes UpAnime { from { opacity: 0; transform: translateY(calc(1em + 4em)); }
  to { opacity: 1; transform: translateY(0); } }
@keyframes DownAnime { from { opacity: 1; transform: translateY(0); }
  to { opacity: 1; transform: translateY(calc(1em + 4em)); } }
body.mm-wrapper_opened #page-top .move-page-top { display: none !important; }