/* =======================================

	subpage

========================================== */

/* パンくず
========================================== */
#topicPath{
	margin: 0 auto;
	padding:10px 20px;
}
#topicPath li{
	display: inline;
	list-style-type: none;
	color: #333;
	font-size: 1.2rem;}

#topicPath li:before {
	content: ">";
	padding: 0 10px;}
#topicPath li:first-child:before {content: none;}
#topicPath li a{
	text-decoration: none;
	color: #333;}
#topicPath li a:hover{text-decoration: underline;}

@media screen and (max-width: 1200px) {
	#topicPath{padding:10px 20px;}
}

@media screen and (max-width: 599px) {
	#topicPath li{font-size: 1.2rem;}
}


/* subpage common
========================================== */
.sub_box{margin-bottom: 60px;}
.sub_box:last-of-type{margin-bottom:0;}

@media screen and (max-width: 599px) {
	.sub_box{margin-bottom: 50px;}
}

/* 混雑予想
========================================== */
.prediction_label{margin: 50px auto 30px;text-align: center;}
.prediction_box{display: flex;justify-content: space-between;flex-direction: row-reverse;}
.prediction_box .box{
	width:calc((100% - 40px)/2);}

.prediction_box .box .ttl{margin-bottom: 1em;font-weight: 600;text-align: center;}
.timetable{
	margin-bottom: 40px;
	width: 100%;
	table-layout: fixed;
	word-break: break-all;
	word-wrap: break-word;}
.timetable th,
.timetable td{width: 2em; font-weight: normal;font-size: 1rem; vertical-align: bottom;text-align: center;}
.timetable .saturday,.timetable .sunday{vertical-align: middle; color: #fff;font-size: 100%;}
.timetable .saturday span{background-color:#2c9dd2;padding: 5px;}
.timetable .sunday span{background-color:#f0446c;padding: 5px;}
.timetable tr.border{border-bottom: 2px solid #b3b3b3;}
.timetable td img{width: 100%;height: auto;}


@media screen and (max-width:840px) {
	.scroll{
		overflow: auto;
		white-space: nowrap;
	}
	.scroll::-webkit-scrollbar{
		height: 10px;
	}
	.scroll::-webkit-scrollbar-track{
		background: #F1F1F1;
	}
	.scroll::-webkit-scrollbar-thumb {
		background: var(--border-color);
	}
}

@media screen and (max-width:599px) {
	.prediction_box{flex-direction: column-reverse;}
	.prediction_box .box{width: 100%;}
	.prediction_box .box:last-child{padding-top: 30px;}
}


/* 施設紹介
========================================== */
.facility_box{
	display: flex;
	justify-content: space-between;
}
.facility_box .movie_box{width: 66.66666%;}
.facility_box .link_box{width: 31.66666%}

.movie_wrap{
	position: relative;
	padding-top: 56.25%;
	width: 100%;
}
.movie_wrap video{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}

.facility_link li{margin-bottom: 15px;}
.facility_link a{
	line-height: 1;
	position: relative;
	display: block;
	padding: 1.8em 50px 1.8em 95px;
	background-color: var(--main-color);
	color: #fff;
	text-decoration: none;
	font-size: 2.2rem;
	transition: 0.3s;
}
#soga .facility_link a{background-color: var(--sub-color);}

.facility_link span{
	position: absolute;
	top: 50%;
	left: 25px;
	transform: translateY(-50%);
}
.facility_link span img{
	width: 40px;
	height: 40px;
}
.facility_link li:not(.link) a::after{
	content: "";
	position: absolute;
	top:50%;
	right: 40px;
	transform: translateY(-50%) rotate(45deg);
	width: 12px;
	height: 12px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transition: 0.3s;
}
.facility_link li.link a::after{
	content: "";
	position: absolute;
	top:50%;
	right: 32px;
	transform: translateY(-50%);
	width: 23px;
	height: 23px;
	background: url(../images/icon_link_w.svg)left top no-repeat;
}

.facility_link a:hover,
#soga .facility_link a:hover{background-color: var(--point-color);}
.facility_link li:not(.link) a:hover::after{right: 30px;}

/* soga */
.facility_box_soga{
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 30px;
}
.facility_box_soga .movie_box{width: 76%;}
.facility_box_soga .movie_short{width: 24%}
.movie_short .inner {
	position: relative;
	width: 100%;
	max-width: 300px;
	margin: 0 auto;
	aspect-ratio: 9 / 16;
}
.movie_short .inner iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.facility_link.soga{
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 20px;
}
.facility_link.soga li{margin-bottom: 0;}
.facility_link.soga li a{
	padding: 1.8em 40px 1.8em 80px;
	font-size: 2rem;
}
.facility_link.soga span{
	left: 20px;
}
.facility_link.soga span img{
	width: 35px;
	height: 35px;
}

.facility_link.soga li:not(.link) a::after{
	right: 30px;
}
.facility_link.soga .link a::after{
	right: 20px;
}



@media screen and (max-width:1200px){
	.facility_link a,
	.facility_link.soga li a{
		padding: 1em 50px 1em 70px;
		font-size: 2rem;
	}
	.facility_link span img{
		width: 30px;
		height: 30px;
	}
	.facility_link.soga{grid-template-columns: repeat(2,1fr);}
}

@media screen and (max-width:768px){
	.facility_box{
		display: block;
	}
	.facility_box .movie_box{width: 100%;margin-bottom: 20px;}
	.facility_box .link_box{width: 100%}

	.facility_link{
		display: flex;
		flex-wrap: wrap;}
	.facility_link li{
		margin-right: 10px;
		margin-bottom: 10px;
		width: calc((100% - 10px)/2);
	}
	.facility_link li:nth-child(even){margin-right: 0;}
	.facility_link li a,
	.facility_link.soga li a{font-size: 1.8rem;}
	.facility_link.soga{gap: 10px;}
	.facility_link.soga li{
		width: 100%;
		margin: 0;
	}
}
@media screen and (max-width:599px){
	.facility_box_soga{flex-wrap: wrap;}
	.facility_box_soga .movie_box{width:100%;}
	.facility_box_soga .movie_short{width: 100%}
	.movie_short .inner {max-width: 240px;}
	.facility_link li a,
	.facility_link.soga li a{
		padding: 1em 10px 1em 40px;
		font-size: 1.6rem;
	}
	.facility_link span,
	.facility_link.soga span{
		left: 10px;
	}
	.facility_link span img,
	.facility_link.soga span img{
		width: 20px;
		height: 20px;
	}
	.facility_link li a::after{display: none;}
}

@media screen and (max-width:320px){
	.facility_link{
		display: block;}
	.facility_link li{
		margin-right: 0;
		width:100%;
	}
	.facility_link li a::after{display:block;}
	.facility_link.soga{grid-template-columns: repeat(1,1fr);}
}


/* アクセス
========================================== */
.access_box{
	display: flex;
	justify-content: space-between;
}
.access_box .info_box{width: 50%;}
.access_box .map_box{width: 45.8333%;}

.access_box .address{
	position: relative;
	margin-bottom: 20px;
	padding-left: 60px;}
.access_box .info_box dl{
	display: table;
	margin-bottom: 20px;
	width: 100%;
	border: 1px solid var(--border-color);
}
.access_box .info_box dt,
.access_box .info_box dd{
	display: table-cell;
	padding:1.5em 1.5em;
	font-weight: 500;
}
.access_box .info_box dt{
	position: relative;
	padding-left: 60px;
	background-color: var(--c-grey);
	width: calc(10em + 60px);
}
/*icon*/
.access_box .address::before,
.access_box .info_box dt::before{
	content: "";
	position: absolute;
	top: 23px;
	left: 15px;
	width: 30px;
	height: 30px;
	background-size: contain;
}
.access_box .address::before{top:0px;background-image: url(../images/icon_map.svg);}
.access_box .info_box .car dt::before{background-image: url(../images/icon_car.svg);}
.access_box .info_box .train dt::before{background-image: url(../images/icon_train.svg);}
.access_box .info_box .bus dt::before{background-image: url(../images/icon_bus.svg);}

#soga .access_box .address::before{top:5px;background-image: url(../images/icon_map_b.svg);}
#soga .access_box .info_box .car dt::before{background-image: url(../images/icon_car_b.svg);}
#soga .access_box .info_box .train dt::before{background-image: url(../images/icon_train_b.svg);}
#soga .access_box .info_box .bus dt::before{background-image: url(../images/icon_bus_b.svg);}

@media screen and (max-width:840px){
	.access_box .info_box dt,
	.access_box .info_box dd{
		display: block;
		width: 100%;
		padding:1em;
	}
	.access_box .info_box dt,
	.access_box .address{padding-left: 50px;}
	.access_box .address::before,
	.access_box .info_box dt::before{
		top: 21px;
		left: 15px;
		width: 20px;
		height: 20px;
	}
	.access_box .address::before{top:5px;}
}

@media screen and (max-width:798px){
	.access_box{display: block;}
	.access_box .info_box{width:100%;}
	.access_box .map_box{width:100%;}
}

/* 関連施設
========================================== */
.related_list{
	display: flex;
	flex-wrap: wrap;
}
.related_list dl{
	margin-right:5%;
	width: 30%;
}
.related_list dl:last-child{margin-right: 0;}
.related_list dt{
	position: relative;
	margin-bottom: 15px;}
.related_list dt .cat{
	position: absolute;
	top: 1em;
	left: 0;
	padding: 0 0.6em;
	background-color:#f0446c;
	color: #fff;}
.related_list dt img{
	width: 100%;
	height: auto;}

.related_list .link{
	margin-bottom:15px;
}
.related_list .link a{
	position: relative;
	padding-left: 25px;
	text-decoration: none;
	color: var(--txt-color);
	font-size: 1.8rem;
	transition: 0.3s;
}
.related_list .link a::before{
	content: "";
	position: absolute;
	top:10px;
	left: 5px;
	border-top: 2px solid var(--main-color);
	border-right: 2px solid var(--main-color);
	width: 10px;
	height: 10px;
	transform: rotate(45deg);
}
.related_list a:hover img{
	opacity: 1;
}
.related_list .link a:hover{
	color: var(--main-color);
	text-decoration: underline;
}

#soga .related_list .link a::before{border-color: var(--sub-color);}

@media screen and (max-width:599px){
	.related_list dl{
		width:100%;
		margin: 0 0 15px;
	}
}

/* price
========================================== */
.price_txt{
	margin-bottom: 2em!important;
	text-align: center;
}
.price_menu{
	display: flex;
	justify-content: center;
	margin-bottom: 50px;
	
}
.price_menu li:first-child{margin-right: 30px;}
.price_menu li a{
	letter-spacing: 1px;
	position: relative;
	line-height: 1.5;
	display:block;
	padding: 0.6em 3em;
	background-color: #fff;
	box-sizing: border-box;
	border: 1px solid #666;
	text-align: center;
	text-decoration: none;
	color: var(--txt-color);
	font-size:clamp(1.8rem, 2.1vw, 2.2rem);
	transition: 0.3s;}
.price_menu li a .sub{font-size: 80%;}
.price_menu li a:hover,
.price_menu li a.active{
	border-color: var(--main-color);
	background-color: var(--main-color);
	color: #fff;}
.price_menu li a.active::after{
	position: absolute;
	content: "";
	left: 50%;
	bottom:-40px;
	transform: translateX(-50%);
	border-top: 20px solid  var(--main-color);
	border-right: 20px solid transparent;
	border-bottom:20px solid transparent;
	border-left: 20px solid transparent;
}
#soga .price_menu li a:hover,
#soga .price_menu li a.active{background-color: var(--sub-color);border-color: var(--sub-color);}
#soga .price_menu li a.active::after{border-top-color: var(--sub-color)}

.price_panels .panel{display: none;}
.price_panels .panel.active{display: block;}

@media screen and (max-width:599px){
	.price_menu li a{
		padding: 0.6em 1em;
		font-size:100%;}
}

.qrcard_box{display: flex;margin: 20px 0 30px;align-items: center;}
.qrcard_box .imgBox{width: 40%;text-align: center;}
.qrcard_box .imgBox img{max-width: 100%;height: auto;}
.qrcard_box .txtBox{width: 60%;padding-left: 5%;}


.qrcard_txt{text-align: center;}
.txt_otoku{
	line-height: 1.5;
	margin-bottom: 1em!important;
	text-align: center;
	color: var(--c-red);
	font-weight: bold;
	font-size:clamp(1.8rem, 3vw, 2.2rem);
}

.qrcard_point{
	display: flex;
	justify-content: center;
	margin-bottom: 2.5em;
}
.qrcard_point li{
	line-height: 1;
	padding: 0.3em 0.6em;
	background-color: var(--c-red);
	text-align: center;
	color: #fff;
}
.qrcard_point li:first-child{margin-right: 1em;}

.table_type01.qrcard{width: 100%;}
.table_type01.qrcard td{font-size: clamp(1.6rem, 2.1vw,1.8rem);}
.table_type01.qrcard .toku{
	display: inline-block;
	font-size: 1.4rem;
	margin-left: 1em;
	width: 8em;
	background-color: var(--c-red);
	text-align: center;
	color: #fff;}

@media screen and (max-width:840px){
	.qrcard_box{display: block;}
	.qrcard_box .imgBox{width: 100%;margin-bottom: 20px;}
	.qrcard_box .txtBox{width: 100%;padding-left:0;}
	.qrcard_box .imgBox img{max-width: 80%;height: auto;}
}
@media screen and (max-width:599px){
	.qrcard_txt{text-align: left;}
}
.merit_ttl{
	margin:0 auto 1.5em;
	text-align: center;
	font-size: clamp(2rem, 2.6vw, 2.4rem);
	font-weight: 600;
}
.merit_ttl .txt{
	position: relative;
	display: inline-block;
	padding: 0 2.5em;}
.merit_ttl .txt:before, .merit_ttl .txt:after {
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 4rem;
	height: 3px;
	background-color:var(--main-color);
}
.merit_ttl .txt:before {left:0;transform: rotate(60deg);}
.merit_ttl .txt:after {right: 0;transform: rotate(-60deg);}

#soga .merit_ttl .txt:before,#soga .merit_ttl .txt:after {background-color: var(--sub-color);}

.merit_list{
	display: flex;
	flex-wrap: wrap;}
.merit_list .box{
	line-height: 1.5;
	margin-bottom: 20px;
	padding:1.5em 0.6em;
	text-align: center;
	box-sizing: border-box;
	border: 1px solid var(--border-color);
	font-size: 1.8rem;
}
.merit_list .box:not(:last-child){margin-right: 20px;}
.merit_list.col-4 .box{width: calc((100% - 60px)/4);}
.merit_list.col-4 .box:nth-child(4n){margin-right: 0;}
.merit_list .img{margin-bottom: 20px;}
.merit_list .img img{max-width: 60%;height: auto;}

@media screen and (max-width:599px){
	.merit_list{flex-wrap: wrap;}
	.merit_list.col-4 .box{margin-bottom: 20px;}
	.merit_list.col-4 .box,
	.merit_list.col-5 .box{width: calc((100% - 20px)/2);font-size: 1.6rem;}
	.merit_list.col-4 .box:nth-child(even),
	.merit_list.col-5 .box:nth-child(even){margin-right: 0;}
}


/* FAQ
========================================== */
.faq_list{
	display: flex;
	flex-wrap: wrap;
}
.faq_list dl{
	width: calc((100% - 30px)/2);
	margin-right: 30px;
	margin-bottom: 30px;
	padding: 1.5em;
	border: 1px solid var(--border-color);
}
.faq_list dl:nth-child(even){margin-right: 0;}
.faq_list dl dt,
.faq_list dl dd{
	position: relative;
	padding-left:3em;
}
.faq_list dl dt::before,
.faq_list dl dd::before{
	line-height: 2;
	position: absolute;
	left: 0em;
	text-align: center;
	width: 2em;
	color: #fff;
}

.faq_list dl dt::before{
	content: "Q";
	background-color: var(--main-color);
}
.faq_list dl dd::before{
	content: "A";
	background-color: var(--point-color);
}

.faq_list dl dt{
	line-height: 1.5;
	margin-bottom: 1.8em;
	font-weight: 500;
}

#soga .faq_list dl dt::before{background-color: var(--sub-color);}
@media screen and (max-width:840px){
	.faq_list dl{
		width:100%;
		margin-right: 0;
		margin-bottom: 20px;
	}
}

@media screen and (max-width:599px){
	.faq_list dl{padding: 1em;}
}

/* 施設案内写真
========================================== */
.facility_pic_list{
	display: flex;
	flex-wrap: wrap;
}
.facility_pic_list figure{
	margin-right: 2.5%;
	margin-bottom: 20px;
	width: calc((100% - 7.5%)/4)
}

.facility_pic_list figure:nth-child(4n){margin-right: 0;}

.facility_pic_list figure img.popup{
	margin-bottom: 10px;
	width: 100%;
	height: auto;
	cursor: pointer;
}
.facility_pic_list figure .name{
	margin-bottom: 5px;
	text-align: center;
	font-weight: bold;}

.facility_pic_list figcaption p{
	line-height: 1.6;
	font-size: 1.4rem;}

.modal {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	z-index: 3000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.8);
	opacity: 0; 
	visibility: hidden;
	transition: opacity 0.5s, visibility 0.5s;
}

/* モーダルの画像スタイル */
.modal-content {
	display: block;
	width: 80%;
	max-width: 700px;
}

/* モーダルの閉じるボタン */
#close {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	cursor: pointer;
}

@media screen and (max-width:768px){
	.facility_pic_list figure{
		margin-right: 2.5%;
		width: calc((100% - 2.5%)/2)
	}
	.facility_pic_list figure:nth-child(even){margin-right: 0;}
}


/* post
========================================== */
.post_box{
	margin-bottom: 20px;
	padding: 30px;
	border: 1px solid var(--border-color);
}
.post_box ul,.post_box ol{margin-left: 1.2em;margin-bottom: 1em;}
.post_box ul{list-style-type: disc;}
.post_box ul li{list-style-type: inherit;}
.post_box ol {list-style-type: decimal}
.post_box ol li{list-style-type: inherit;}

.post_ttl{
	margin-bottom: 1em;
	padding:0.2em 0.5em 0.5em;
	border-bottom: 1px solid var(--border-color);
	border-left: 6px solid var(--main-color);
	font-size: 2rem;
}
#soga .post_ttl{border-left-color: var(--sub-color);}
.post_info{
	line-height: 1;
	display:flex;
	justify-content: flex-end;
}
.post_info ul li{list-style-type: none;}
.post_info .date{
	font-size: 90%;
}
.post_info .category a{
	padding: 0 0.5em 0.2em;
	color: #fff;
	text-decoration:none;
	font-size: 90%;
	transition: 0.3s;}
.post_info .category a:hover{opacity: 0.7;}
.post_info .category .hours a{background-color:#0fb295;}
.post_info .category .event a{background-color:#f39a00;}
.post_info .category .important a{background-color:#f30000}
.post_info .category .other a{background-color:#898989;}

.post_txt{
	padding: 1.5em 0;}

.post_signature{
	padding:20px;
	box-sizing: border-box;
	background-color: var(--c-grey);
}
.post_signature .name{
	margin-bottom: 10px;
	font-weight: bold;
}
.post_signature p:last-child{margin-bottom: 0;}

@media screen and (max-width:768px){
	.post_box{
		padding: 20px;}
}

@media screen and (max-width:599px){
	.post_box{
		margin-bottom: 20px;
		padding: 0 0 20px;
		border: none;
		border-bottom: 1px solid var(--border-color);
	}
}