@charset "utf-8";
/* ===================================================
	Facilities CSS
====================================================== */
#contents_wrap { line-height: 2;}

@media screen and (max-width: 600px) {
	#contents_wrap { line-height: 1.6;}
}

/* ---------------------------------------------------
lead
------------------------------------------------------ */

.lead { padding: 65px 0 95px; text-align: center;}
.lead .cap { margin: 0 0 25px; font-size: 28px; font-weight: bold;}

@media screen and (max-width: 600px) {
	.lead { padding: 40px 0;}
	.lead .cap { margin-bottom: 15px; font-size: 22px; line-height: 1.6;}
	.lead p:not([class]) { text-align: left; }
}


/* ---------------------------------------------------
施設説明
------------------------------------------------------ */
.facility { display: flex; align-items: center;}
.facility + .facility { margin-top: 60px;}
.facility .img { width: 61%;}
.facility .img .ofi { width: 100%; min-height: 580px;}
.facility .detail_col { width: 39%; padding: 0 0 0 5.5%; box-sizing: border-box;}
.facility h2 { margin: 0 0 15px;}
.facility h2 span { display: block; margin: 30px 0 0; font-size: 30px; font-weight: bold;}
.facility h2 .en { margin: 0 0 0 calc( (100vw - 120px) * -0.055 - 130px ); color: #9daab1; font-size: 75px; font-weight: normal; letter-spacing: 10px; line-height: 1;}
.facility .lr_link { width: 260px; padding: 8px 10px; margin: 30px 0 0; border: 1px solid #d4d4d4; font-size: 17px;}
.facility .lr_link::before { background: #f1f1e8;}

#sec1 { margin-bottom: 105px;}

@media screen and (max-width: 1200px) {
	.facility h2 .en { margin: 0 0 0 -190px;}
}
@media screen and (max-width: 600px) {
	.facility { display: block; width: 92%;}
	.facility + .facility { margin-top: 50px;}
	.facility .img { width: auto;}
	.facility .img .ofi { min-height: 0;}
	.facility .detail_col { width: auto; padding: 0; margin: 20px 0 0;}
	.facility h2 span { margin-top: 10px; font-size: 22px;}
	.facility h2 .en { margin: 0; font-size: 36px; letter-spacing: 10px;}
	.facility .lr_link { width: 100%; padding: 5px 10px; margin-top: 20px;}

	#sec1 { margin-bottom: 60px;}
}


/* ---------------------------------------------------
その他施設情報等
------------------------------------------------------ */
.summary { display: flex; align-items: flex-start; justify-content: space-between; padding: 100px 0; position: relative; border-top: 1px solid #d4d4d4;}
.summary h2 { flex-shrink: 0; width: 300px; margin: 0 3% 0 0; position: sticky; top: 100px; font-size: 22px;}
.summary h2 span { display: block;}
.summary h2 .en { margin: 0 0 10px; color: #9daab1; font-size: 65px; letter-spacing: 10px; line-height: 1;}
.summary .detail_col { flex-grow: 1;}

@media screen and (max-width: 1300px) {
	.summary { display: block;}
	.summary h2 { width: auto; margin: 0 0 50px; position: static; text-align: center;}
}
@media screen and (max-width: 600px) {
	.summary { width: 92%; padding: 50px 0;}
	.summary h2 { margin-bottom: 30px; font-size: 18px;}
	.summary h2 .en { font-size: 36px; letter-spacing: 10px;}
}


/* sec2 */
#sec2 table { width: 100%; table-layout: fixed;}
#sec2 th,
#sec2 td { border-top: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4; box-sizing: border-box; vertical-align: top;}
#sec2 th { width: 220px; padding: 30px 40px; background: #f4f4f4; border-right: 1px solid #d4d4d4; font-weight: bold; text-align: left;}
#sec2 td { font-size: 16px;}
#sec2 td:not(.information) { padding: 30px 10px 30px 40px;}
#sec2 li { padding: 0 0 0 1em; text-indent: -0.6em;}
#sec2 li::before { content: '・';}
#sec2 dl { display: flex; flex-wrap: wrap; margin: 0 0 15px; font-size: 18px;}
#sec2 dt { width: 160px; padding: 0 1em 0 0; position: relative; font-weight: bold; box-sizing: border-box;}
#sec2 dt::after { content: '：'; position: absolute; top: 0; right: 0;}
#sec2 dd { width: calc(100% - 160px);}

#sec2 .information th,
#sec2 .information td { border-style: dashed; border-right-style: solid;}
#sec2 .information tr:first-child th,
#sec2 .information tr:first-child td { border-top: none;}
#sec2 .information tr:last-child th,
#sec2 .information tr:last-child td { border-bottom: none;}
#sec2 .information th { width: 200px; padding: 10px 40px; background: #fbfbfb; font-weight: normal;}
#sec2 .information td { padding: 10px 10px 10px 40px;}

@media screen and (max-width: 600px) {
	#sec2 table,
	#sec2 tbody,
	#sec2 tr,
	#sec2 th,
	#sec2 td { display: block; width: 100% !important;}
	#sec2 tr:not(:first-child) th,
	#sec2 td { border-top: none !important;}
	#sec2 th { padding: 10px; border-right: none !important;}
	#sec2 td:not(.information) { padding: 15px 10px;}
	#sec2 dl { font-size: 16px;}
	#sec2 dt { width: 150px;}
	#sec2 dd { width: calc(100% - 150px);}

	#sec2 .information th,
	#sec2 .information td { padding: 10px;}
	#sec2 .information tr:last-child th { border-bottom: 1px dashed #d4d4d4;}
}


/* sec3 */
#sec3 .faq_col > dt,
#sec3 .faq_col > dd { display: flex; align-items: center; padding: 0 10px;}
#sec3 .faq_col > dt::before,
#sec3 .faq_col > dd::before { align-self: flex-start; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 25px 0 0; border: 1px solid #9daab1; border-radius: 50%; font-family: 'Poiret One', sans-serif; font-size: 20px; line-height: 1; }
#sec3 .faq_col > dt { padding-top: 35px; margin: 0 0 20px; border-top: 1px solid #d4d4d4; font-weight: bold;}
#sec3 .faq_col > dt:first-child { padding-top: 0; border-top: none;}
#sec3 .faq_col > dt::before { content: 'Q'; background: #9daab1; color: #fff; font-weight: normal;}
#sec3 .faq_col > dd { padding-bottom: 35px;}
#sec3 .faq_col > dd:last-child { padding-bottom: 0;}
#sec3 .faq_col > dd::before { content: 'A'; background: #fff; color: #9daab1;}
#sec3 .faq_col > dd ul.li_attention li::before { content: '※';}
#sec3 .faq_col > dd a { color: #214d8d; text-decoration: underline;}
#sec3 .faq_col > dd a:hover { text-decoration: none;}

@media screen and (max-width: 600px) {
	#sec3 .faq_col > dt,
	#sec3 .faq_col > dd { padding-left: 0;}
	#sec3 .faq_col > dt::before,
	#sec3 .faq_col > dd::before { width: 35px; height: 35px; margin-right: 15px; font-size: 18px;}
	#sec3 .faq_col > dt { padding-top: 20px; margin-bottom: 15px;}
	#sec3 .faq_col > dt span { flex-grow: 1; padding: 5px 25px 5px 0; position: relative;}
	#sec3 .faq_col > dt span::before,
	#sec3 .faq_col > dt span::after { content: ''; position: absolute; top: 50%; background: #5f7d94; transform: translateY(-50%); transition: transform 0.5s, opacity 0.5s;}
	#sec3 .faq_col > dt span::before { width: 15px; height: 1px; right: 0;}
	#sec3 .faq_col > dt span::after { width: 1px; height: 15px; right: 7px;}
	#sec3 .faq_col > dt.active span::before,
	#sec3 .faq_col > dt.active span::after { transform: translateY(-50%) rotate(-90deg);}
	#sec3 .faq_col > dt.active span::before { opacity: 0;}
	#sec3 .faq_col > dd { padding-bottom: 20px;}
	#sec3 .faq_col > dd > div { padding: 5px 0;}
}


/* sec4 */
#sec4 .bnr_col,
#sec4 .bnr_col a,
#sec4 dl { display: flex;}
#sec4 .bnr_col { justify-content: space-between; margin: 45px 0 0;    width: 1000px;}
#sec4 .bnr_col li { width: calc((100% - 12px) / 2);margin: 0 auto;}
#sec4 .bnr_col a { align-items: center; justify-content: center; height: 100px; padding: 5px 35px; background: url(../../facilities/img/bnr_icon.png) no-repeat right 10px bottom 10px; border: 1px solid #ccc; border-radius: 3px; box-sizing: border-box; transition: opacity 0.5s;}
#sec4 .bnr_col a:hover { opacity: 0.7;}
#sec4 .bnr_col a:hover img { opacity: 1;}
#sec4 dl { margin: 55px 0 0; font-weight: bold;}
#sec4 dt { align-self: flex-start; width: 160px; background: #214d8d; color: #fff; text-align: center;}
#sec4 dd { align-self: center; margin: 0 0 0 20px;}
#sec4 dd span { color: #214d8d;}

@media screen and (max-width: 600px) {
	#sec4 { padding-bottom: 70px;}
	#sec4 .bnr_col,
	#sec4 dl { display: block;}
	#sec4 .bnr_col { margin-top: 25px;}
	#sec4 .bnr_col li { width: auto;}
	#sec4 .bnr_col li + li { margin: 10px 0 0;}
	#sec4 .bnr_col a { height: 80px; overflow: hidden;}
	#sec4 .bnr_col a img { transform: scale(0.8);}
	#sec4 dl { margin-top: 30px;}
	#sec4 dt { width: auto; padding: 5px;}
	#sec4 dd { margin: 10px 0 0;}
	#sec4 .bnr_col{width: initial;}
}