@charset "UTF-8";

/* --------------------------------------------------
	topInfo
-------------------------------------------------- */
.topInfo {
	margin: 0 auto 30px;
	text-align: center;
	border: solid 1px #EB6EA5;
}

.topInfo dt {
	background: #EB6EA5;
	color: #fff;
	font-size: 130%;
	font-weight: bold;
}

.topInfo dd {
	padding: 1.5em;
}

@media screen and (max-width: 480px) {
	.topInfo {
		margin: 0 0 25px;
	}

	.topInfo dd {
		padding: 1.5em 2%;
		text-align: left;
	}
}

/* index */
.topInfo.indexInfo {
	margin-top: 2em;
	max-width: 940px;
	width: 90%;
}

@media screen and (max-width: 768px) {
	.topInfo.indexInfo {
		margin: 2em 20px 0;
		width: calc(100% - 40px);
	}
}

/* --------------------------------------------------
	Content Parts
-------------------------------------------------- */
.contentWrap {
	margin-bottom: 2em;
}

.contentTitle {
	margin-bottom: 1em;
	line-height: 1;
	font-size: 17px;
	font-weight: bold;
}

@media screen and (max-width: 768px) {
	.contentTitle {
		padding: 0 !important;
		line-height: 1.5;
	}
}

/*
	link
------------------------------ */
/* linkText */
.linkText {
	margin-bottom: 1em;
}

.linkText a {
	color: #FF6EBB;
	font-weight: normal;
	text-decoration: underline;
}

.linkText a:hover {
	text-decoration: none;
}

span.noteText,
.list.note li {
	margin-left: 1em;
	font-size: 13px;
	text-indent: -1em;
}

span.noteText::before,
.list.note li::before {
	content: "※";
}

@media screen and (max-width: 480px) {}

/* linkBtn */
.linkBtn {
	margin-top: 1em;
}

.linkBtn a {
	background: #EB6EA5;
	margin: 0 auto;
	padding: 0.5em 1em;
	width: 100%;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}

@media screen and (max-width: 480px) {}

.indexInfo .linkBtn a {
	max-width: 50%;
}

/*
	comingSoon
------------------------------ */
.comingSoon {
	height: 50vh;
	height: calc(100vh - 230px - 100px);
	display: flex;
	justify-content: center;
	align-items: center;
}

.comingSoon img {
	width: 272px;
}

@media screen and (max-width: 768px) {
	.comingSoon {
		height: calc(100vh - 47.46667vw - 50px);
	}
}

/* --------------------------------------------------
	tabBox
-------------------------------------------------- */
.tabBox {
	padding-bottom: 2em;
	position: relative;
}

.tabBox .note {
	color: #323232;
	font-size: 13px;
	position: absolute;
	right: 0;
	bottom: 1em;
}

.tabSwitch {
	display: flex;
}

.tabSwitch__item {
	margin-right: 2em;
	line-height: 1;
}

.tabSwitch__item span {
	padding: 0 0.5em 0.5em;
	color: #888;
	font-size: 23px;
	display: inline-block;
	position: relative;
	cursor: pointer;
}

.tabSwitch__item span::before {
	background: #888;
	width: 100%;
	height: 3px;
	position: absolute;
	bottom: 0;
	left: 0;
	content: "";
}

.tabSwitch__item:hover span,
.tabSwitch__item.active span {
	color: #233572;
}

.tabSwitch__item:hover span::before,
.tabSwitch__item.active span::before {
	background: #233572;
}

@media screen and (max-width: 768px) {
	.tabBox {
		padding-bottom: 3em;
		position: relative;
	}

	.tabBox .note {
		font-size: 11px;
	}

	.tabSwitch__item span {
		font-size: 18px;
	}
}

/* --------------------------------------------------
	tabContent
-------------------------------------------------- */
.tabMain {
	margin-bottom: 4rem;
	display: flex;
	flex-wrap: wrap;
}

.tabContent {
	width: 100%;
	width: calc((100% - 4%) / 3);
}

.tabContent:not(:last-of-type) {
	margin-right: 2%;
}

.tabContent__month {
	width: 100%;
	font-size: 1.5em;
}

@media screen and (max-width: 768px) {
	.tabContent:not(:last-of-type) {
		margin-right: 0;
		margin-bottom: 1em;
	}

	.tabContent {
		width: 100%;
	}

	.tabContent__month {
		padding: 10px 0 !important;
	}
}

/* --------------------------------------------------
	table
-------------------------------------------------- */
/*
	共通
------------------------------ */
.contentTable,
.calendarTable {
	width: 100%;
}

.contentTable th,
.contentTable td,
.calendarTable th,
.calendarTable td {
	line-height: 1;
	text-align: center;
	border: solid 1px #C8C9CA;
	position: relative;
}

.sched-yel,
.contentTable .typeA,
.calendarTable .typeA {
	/* background: #FFF8D8; */
	background: #DFD9FF;
}

.sched-grn,
.contentTable .typeB,
.calendarTable .typeB {
	background: #D5F1DD;
}

.sched-pnk,
.contentTable .typeC,
.calendarTable .typeC {
	/* background: #F7E1EE; */
	background: #FFF8D8;
}

.charge .calendarTable .typeC {
	background: #F7E1EE;
}

.sched-ppl,
.contentTable .typeD,
.calendarTable .typeD {
	/* background: #DFD9FF; */
	background: #F7E1EE;
}

.sched-orn,
.contentTable .typeE,
.calendarTable .typeE {
	background: #FFE8C5;
}

.sched-wrap {
	display: flex;
	align-items: center;
}

.sched {
	width: 1.25em;
	height: 1.25em;
	text-indent: -9999px;
	border: solid 1px #C8C9CA;
}

.sched:not(:first-of-type) {
	margin-left: 1em;
}

@media screen and (max-width: 768px) {
	.sched-wrap {
		font-size: 13px;
		letter-spacing: -0.005em;
	}

	.sched {
		width: 1em;
		height: 1em;
	}
}

/*
	contentTable
------------------------------ */
.contentTable {
	margin-bottom: 1em;
	width: 100%;
}

.contentTable th,
.contentTable td {
	vertical-align: middle;
}

.contentTable th {
	padding: 1em;
	font-size: 16px;
	text-align: left;
}

.contentTable td {
	font-size: 18px;
}

.contentTable .typeTitle {
	padding: 0.5em 0;
	line-height: 1;
	font-size: 22px;
	text-align: center;
}

.contentTable .besideTitle small {
	font-size: 13px;
}

.contentTable .besideTitle2 {
	width: 15%;
}

.contentTable .day {
	padding: 1em 0;
	text-align: center;
	white-space: nowrap;
}

.contentTable .price1 {
	padding: 1em 2em 1em 0;
	text-align: right;
}

.contentTable .price2 {
	width: 50%;
}

@media screen and (max-width: 768px) {
	.contentTable th {
		font-size: 14px;
	}

	.contentTable td {
		font-size: 16px;
	}

	.contentTable .typeTitle {
		font-size: 18px;
	}

	.contentTable .besideTitle small {
		font-size: 11px;
	}

	.contentTable .price1 {
		padding: 1em;
		text-align: right;
	}

	.contentWrap .scroll-x {
		width: 100%;
		height: auto;
	}

	.contentWrap .scroll-x {
		margin-bottom: 1em;
		width: 100%;
		height: auto;
		overflow-x: auto;
	}

	.contentWrap .scroll-x .contentTable {
		margin-bottom: 0;
		min-width: 800px;
	}

	.contentWrap .scroll-x.small .contentTable {
		margin-bottom: 0;
		min-width: 600px;
	}
}

/* charge */
.chargeTab .contentTable .typeTitle {
	width: 15%;
}

.chargeTab .contentTable .besideTitle {
	width: 20%;
}

/* parasol */
.parasolTab .contentTable .typeTitle {
	width: 11%;
}

.parasolTab .contentTable .besideTitle {
	width: 37%;
}

/*
	calendarTable
------------------------------ */
.calendarTable th,
.calendarTable td {
	font-size: 16px;
}

.calendarTable th {
	background: #EEEEEF;
	padding: 0.5em;
	width: calc(100% / 7);
}

.calendarTable th.sun {
	color: #E3007F;
}

.calendarTable th.sat {
	color: #2CA6E0;
}

.calendarTable td {
	padding: 0;
	font-size: 36px;
	font-size: 24px;
}

.calendarTable td .date {
	color: #717071;
	/* font-size: 14px; */
	font-size: 9px;
	position: absolute;
	top: 0.25em;
	left: 0.25em;
}

/*
	modalSwitch
------------------------------ */
.noModal,
.modalSwitch {
	/* padding: 1em 0; */
	display: block;

	padding: 2.5em 0;
	font-size: 10px;
	/* font-weight: bold; */

}

.modalSwitch {
	text-decoration: underline;
	cursor: pointer;
}

.modalSwitch:hover {
	text-decoration: none;
}

@media screen and (max-width: 480px) {}

/*
	modalContent
------------------------------ */
.modalContent {
	background: #fff;
	width: 90%;
	max-width: 480px;
	border: solid 10px #233572;
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 1100;
	transform: translate(-50%, -50%);
}

.modalContent .modalInner {
	padding: 30px 0 0;
	line-height: 1;
	position: relative;
}

.modalContent .modalInner .scroll {
	max-height: 80vh;
	overflow-y: scroll;
}

.modalContent .modalInner .scroll::-webkit-scrollbar {
	background: #fff;
	width: 5px;
	border-radius: 0;
}

.modalContent .modalInner .scroll::-webkit-scrollbar-thumb {
	background: #C9C9C9;
	border-radius: 0;
}

@media screen and (max-width: 480px) {}

/*
	modalClose
------------------------------ */
.modalClose {
	width: 50px;
	height: 50px;
	position: absolute;
	top: -30px;
	right: -30px;
}

.modalClose button {
	background: #233572;
	width: 100%;
	height: 100%;
	vertical-align: middle;
	outline: none;
	border: none;
	border-radius: 100%;
	position: relative;
	z-index: 1101;
	transform: rotate(45deg);
	cursor: pointer;
}

.modalClose button::before,
.modalClose button::after {
	background: #fff;
	width: 60%;
	height: 1px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	content: "";
}

.modalClose button::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

@media screen and (max-width: 480px) {}

/*
	modalOverlay
------------------------------ */
.modalOverlay {
	background: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 100vh;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1099;
	cursor: pointer;
}

body.modalOn {
	overflow: hidden;
}

/*
	modal
------------------------------ */
.modalTitle {
	background: #233572;
	margin-bottom: 0.5em;
	padding: 0.5em 0;
	color: #fff;
	font-size: 24px;
	font-weight: bold;
}

.modalDate {
	margin-bottom: 0.5em;
	color: #233572;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
}

.modalDate .time {
	margin-top: 0.5em;
	color: #000;
	font-size: 16px;
	font-weight: normal;
	display: block;
}

.modalDetail {
	margin: 0 auto 0.5em;
	width: 90%;
}

.modalDetail dt {
	background: #233572;
	margin-bottom: 1em;
	padding: 0.5em 0 0.5em 0.5em;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	text-align: left;
}

.modalDetail dd {
	margin-bottom: 0.5em;
}

.modalDetail dd .ticket {
	margin-bottom: 0;
	line-height: 1.5;
	font-size: 16px;
	font-weight: bold;
	text-align: left;
}

.modalDetail dd table {
	margin-bottom: 0.5em;
	width: 100%;
}

.modalDetail dd table tr {
	background: url(../../common/img/dot.jpg) left center repeat-x;
	position: relative;
}

.modalDetail dd table th,
.modalDetail dd table td {
	padding: 0.25em 0;
	font-size: 16px;
	border: none;
}

.modalDetail dd table th {
	background: none;
	text-align: left;
}

.modalDetail dd table td {
	text-align: right;
}

.modalDetail dd table th span,
.modalDetail dd table td span {
	background: #fff;
	white-space: nowrap;
	display: inline-block;
}

.modalDetail dd table th span {
	padding-right: 1em;
}

.modalDetail dd table td .price {
	padding-left: 1em;
}

.modalInner .noteTitle {
	margin-bottom: 0.5em;
	padding: 0 1.5em;
	line-height: 1.5;
	font-size: 13px;
	font-weight: bold;
	text-align: left;
}

.modalInner .list.note {
	margin: 0 auto 1.5em;
	width: 90%;
}

.modalInner .list.note li {
	line-height: 1.2;
	text-align: left;
}

.modalInner .modalDetail dd .list.note {
	margin: 0.5em 0 !important;
	width: 100%;
}

.modalInner .modalDetail dd .list.note li {
	margin-left: 0;
	text-indent: 0;
}

.modalInner .modalDetail dd .list.note li::before {
	display: none;
}

.modalInner .linkBtn {
	margin: 0 auto 30px;
	width: 90%;
}

.modalInner .linkBtn a {
	padding: 1em 0;
	line-height: 1;
	font-size: 24px;
	border-radius: 4px;
	transition: all 0.5s ease 0s;
}

.modalInner .linkBtn a:hover {
	text-decoration: none;
	opacity: 0.8;
}

@media screen and (max-width: 480px) {

	.modalTitle,
	.modalDate {
		font-size: 20px;
	}

	.modalDate .time,
	.modalDetail dt,
	.modalDetail dd .ticket,
	.modalDetail dd table th,
	.modalDetail dd table td {
		font-size: 14px;
	}

	.modalInner .list.note li {
		font-size: 12px;
	}

	.modalInner .linkBtn a {
		font-size: 18px;
	}
}

.bgBlue {
	background: #2CA6E0;
}

.paraspl-figcaption {
	margin: 10px 0;
	line-height: 1.5;
	font-size: 24px;
	font-weight: bold;
}

.paraspl-figcaption small {
	font-size: 18px;
	display: block;
}

@media screen and (max-width: 768px) {
	.paraspl-figcaption {
		font-size: 20px;
	}

	.paraspl-figcaption small {
		font-size: 14px;
	}
}