@charset "utf-8";
/* ===================================================
	Home CSS
====================================================== */
#facilities #gnav #nav_04 { border-bottom: 2px solid #78962D;}
#facilities #main_img { background-image: url(../../../facilities/img/facilities_main.jpg);}

#facilities #contents_wrap { padding-bottom: 100px;}

#facilities .inner > [id^="sec"] { text-align: center; padding: 120px 0 50px;}
#facilities .inner > [id^="sec"] h2 { font-size: 36px; position: relative;}
#facilities .inner > [id^="sec"] h2::before { content: ''; display: inline-block; width: 130px; border-top: 4px solid #c7ae77; position: absolute; left: calc(50% - 65px); top: -35px;}
#facilities .inner > [id^="sec"] h2 span { display: block; letter-spacing: 0.3em; text-indent: 0.3em;}
#facilities .inner > [id^="sec"] h2 span:last-of-type { font-size: 16px; color: #ae8221; letter-spacing: normal; text-indent: 0;}
#facilities .inner > [id^="sec"] h2 + p { margin-top: 20px;}
#facilities .inner > [id^="sec"] > img { width: 100%; margin-top: 30px;}
#facilities .inner > [id^="sec"] > img + p { margin: 20px auto;}
#facilities .inner > [id^="sec"] .photo { display: flex; justify-content: space-between;}
#facilities .inner > [id^="sec"] .photo > li { width: calc(50% - 5px);}

@media screen and (max-width: 600px) {
  #facilities #gnav #nav_04 { border-bottom: 1px dashed #ccc;}

  #facilities .inner > [id^="sec"] { padding: 100px 0 0;}
  #facilities .inner > [id^="sec"] h2 { font-size: 26px;}
  #facilities .inner > [id^="sec"] h2::before { top: -20px;}
  #facilities .inner > [id^="sec"] h2 + p { margin-top: 10px;}
  #facilities .inner > [id^="sec"] > img { margin-top: 15px;}
  #facilities .inner > [id^="sec"] > img + p { text-align: left;}
}


/* ---------------------------------------------------
sec1
------------------------------------------------------ */
#facilities #sec1 h2 { letter-spacing: normal;}
#facilities #sec1 .photo p { width: calc(38% - 2px);}
#facilities #sec1 .photo ul { width: calc(62% - 2px); display: flex; flex-wrap: wrap; justify-content: space-between;}
#facilities #sec1 .photo ul li:not(:last-of-type) { width: calc(50% - 2px); margin-bottom: 4px;}
#facilities #sec1 .photo ul li:last-of-type { width: 100%;}
#facilities #sec1 .photo img { width: 100%;}

@media screen and (max-width: 600px) {
  #facilities #sec1 { padding: 80px 0 0;}
}

/* ---------------------------------------------------
sec3
------------------------------------------------------ */
#facilities #sec3 h2 + p { font-size: 26px; letter-spacing: 0.3em;}

@media screen and (max-width: 600px) {
  #facilities #sec3 h2 + p { font-size: 20px;}
}

/* ---------------------------------------------------
sec4
------------------------------------------------------ */
#facilities #sec4 > a { display: block; width: 400px; border: 1px solid #cccccc; padding: 10px 0; margin: 35px auto 0; box-sizing: border-box;}
#facilities #sec4 > a span::after { content: ''; display: inline-block; width: 10px; height: 10px; background: url(../../img/arrow4.png) no-repeat center/contain; padding-left: 15px;}

@media screen and (max-width: 600px) {
  #facilities #sec4 > a { width: 100%; margin: 15px auto 0;}
}

/* ---------------------------------------------------
sec5
------------------------------------------------------ */
#facilities #sec5 { display: flex; flex-wrap: wrap; justify-content: space-between;}
#facilities #sec5 section { width: 49%;}
#facilities #sec5 section img { margin-top: 10px;}
#facilities #sec5 h2 { font-size: 27px; letter-spacing: normal;}
#facilities #sec5 h2 + p { min-height: 55px;}

@media screen and (max-width: 600px) {
  #facilities #sec5 section { width: 100%;}
  #facilities #sec5 h2 + p { min-height: auto;}
  #facilities #sec5_2 { padding-top: 80px;}
}