@charset "UTF-8";
/* CSS Document */

#unit-access { width: 100%; max-width: 1340px; background: #FFF; display: flex; }
#unit-access .txt-box { width: calc(66% - 10em); padding: 2.5em 5em; position: relative; }
#unit-access .img-box { width: 34%; }
#unit-access .txt-box p a { text-decoration: underline; }
#unit-access .txt-box p.read { margin-bottom: 1em; padding-bottom: 1em; border-bottom: solid 1px #CCC; }
#unit-access .txt-box p.attention { font-size: 90%; line-height: 1.5; text-indent: -1em; padding: 0 0 .8em 1em; }
#unit-access .txt-box dl { padding-top: .5em; }
#unit-access .txt-box dl dt { font-size: 105%; line-height: 1.6; font-weight: bold; }
#unit-access .txt-box dl dd ul.attention li { font-size: 93%; line-height: 1.4; text-indent: -1em; padding: .3em 0 0 1em; }
#unit-access .txt-box dl dd p span.br { padding-left: 1em; }
#unit-access .img-box iframe { width: 100%; height: 100%; }
@media only screen and (max-width: 768px) and (orientation: portrait), only screen and (max-width: 736px) {
  #unit-access { display: block; }
  #unit-access .txt-box { width: calc(100% - 4em); padding: 2em 2em; position: relative; }
  #unit-access .img-box { width: 100%; height: 15em; }
  #unit-access h1 { font-size: 200%; line-height: 1.2; }
}
@media only screen and (max-width: 736px) and (orientation: portrait) {
  #unit-access .txt-box { width: 94%; padding: 3% 3%; position: relative; }
  #unit-access .txt-box dl dd p span.br { padding-left: 0; }
  #unit-access .txt-box dl dd p span.br:before { content: "\A"; white-space: pre; }
}

#unit-schedule { background: #F50; }
#unit-schedule .inner-box { background: url("../images/common/pc_icon.png") no-repeat right 5% center; }
#unit-schedule h1 { color: #FFF; }
#unit-schedule p { padding-bottom: 1em; color: #FFF; }
#unit-schedule p a { color: #FFF; text-decoration: underline; }
#unit-schedule ul.attention { padding-bottom: 1em; color: #FFF; }
#unit-schedule ul.attention li { text-indent: -1em; padding-left: 1em; }
#unit-schedule-menu { padding-bottom: 2em; display: flex; justify-content: space-between; }
#unit-schedule-menu dl { width: 48%; }
#unit-schedule-menu dl a { color: #FFF; }
#unit-schedule-menu dl dt { font-size: 105%; line-height: 1.4; font-weight: bold; }
#unit-schedule-menu dl dd { text-align: justify; }
#unit-schedule p.link-btn {  }
#unit-schedule p.link-btn a { line-height: 1.2; text-align: center; text-decoration: none; color: #FFF; width: 15em; padding: .8em 0; border: solid 1px #FFF; display: block; }
#unit-schedule p.link-btn a:hover { color: #F50; border-color: #FFF; background: #FFF; }
@media only screen and (max-width: 768px) and (orientation: portrait), only screen and (max-width: 736px) {
  #unit-schedule .inner-box { background: none; }
}
@media only screen and (max-width: 736px) and (orientation: portrait) {
  #unit-schedule-menu { padding-bottom: 0; display: block; }
  #unit-schedule-menu dl { width: 100%; margin-bottom: 1em; }
  #unit-schedule p.link-btn a { width: calc(100% - 2px); }
}

#unit-training { background: #FFF; display: flex; }
#unit-training .txt-box { width: calc(66% - 10em); padding: 2.5em 5em; position: relative; }
#unit-training .txt-box p.link-btn { line-height: 1.2; margin-top: 1em; }
#unit-training .txt-box p.link-btn a { text-align: center; width: 12em; padding: 1em 0; border: solid 1px #000; display: block; }
#unit-training .txt-box p.link-btn a:hover { color: #FFF; border-color: #C10358; background: #C10358; }
#unit-training .img-box { width: 34%; overflow: hidden; position: relative; }
#unit-training .img-box img { width: auto; height: 100%; position: absolute; left: 50%; transform: translate(-50%,0); }
#unit-training .img-box a:hover img { opacity: .8; }
@media only screen and (max-width: 768px) and (orientation: portrait), only screen and (max-width: 736px) {
  #unit-training { display: block; }
  #unit-training .txt-box { width: calc(100% - 4em) !important; padding: 2em 2em; position: relative; }
  #unit-training .txt-box p.link-btn { margin-top: 0; }
  #unit-training .img-box { width: 100% !important; height: 15em; }
  #unit-training .img-box img { width: 100%; height: auto; top: 50%; transform: translate(-50%,-50%); }
}
@media only screen and (max-width: 736px) and (orientation: portrait) {
  #unit-training { margin: 0 auto 1em auto; }
  #unit-training .txt-box { width: 94% !important; padding: 3% 3%; }
  #unit-training .txt-box p.link-btn a { width: calc(100% - 2px); }
  #unit-training .img-box { height: 8em !important; }
}


#unit-thanks { background: #FFB90D; }
#unit-thanks h1 { font-size: 240%; line-height: 1.2; font-weight: bold; padding-bottom: .2em; }
#thanks-result { padding-bottom: 2em; display: flex; }
#thanks-result dl { width: 20%; margin-right: 5%; }
#thanks-result dl dt { font-size: 240%; line-height: 1.3; padding-bottom: .2em; }
#unit-thanks p.link-btn { line-height: 1.2; margin-top: 1em; }
#unit-thanks p.link-btn a { text-align: center; width: 18em; padding: 1em 0; border: solid 1px #000; display: block; }
#unit-thanks p.link-btn a:hover { color: #FFF; border-color: #C10358; background: #C10358; }
@media only screen and (max-width: 768px) and (orientation: portrait), only screen and (max-width: 736px) {
  #thanks-result { justify-content: space-between; }
  #thanks-result dl { width: 30%; margin-right: 0; }
}
@media only screen and (max-width: 736px) and (orientation: portrait) {
  #unit-thanks h1 { font-size: 200%; line-height: 1.2; }
  #thanks-result { padding-bottom: 1em; display: block; }
  #thanks-result dl { width: 100%; margin: 0 0 1em 0; }
  #thanks-result dl dt { font-size: 180%; padding-bottom: 0; }
  #unit-thanks p.link-btn { margin-top: 0; }
  #unit-thanks p.link-btn a { width: calc(100% - 2px); }
}