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


#keyvisual { margin-bottom: 3rem; position: relative; }
#keyvisual h1 { width: min(80%, 470px); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
#keyvisual ul { width: 100%; height: 500px; display: flex; justify-content: space-between; }
#keyvisual ul li { width: 25%; height: 500px; }
#keyvisual ul li img { height: 100%; object-fit: cover; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #keyvisual { margin-bottom: 1px; }
  #keyvisual ul { height: calc(100svh - 80px); flex-wrap: wrap; }
  #keyvisual ul li { width: 50%; height: 50%; }
}

#course-panel ul { display: flex; flex-wrap: wrap; }
#course-panel ul li { width: 50%; }
#course-panel ul li a { width: 100%; height: 280px; display: block; position: relative; }
#course-panel ul li#panel-shinri a { background: rgba(86,168,200,1); }
#course-panel ul li#panel-shinri a:hover { background: rgba(86,168,200,.7); }
#course-panel ul li#panel-bizcomm a { background: rgba(242,151,27,1); }
#course-panel ul li#panel-bizcomm a:hover { background: rgba(242,151,27,.7); }
#course-panel ul li#panel-kenko a { background: rgba(141,194,31,1); }
#course-panel ul li#panel-kenko a:hover { background: rgba(141,194,31,.7); }
#course-panel ul li#panel-kodomo a { background: rgba(236,109,128,1); }
#course-panel ul li#panel-kodomo a:hover { background: rgba(236,109,128,.7); }
#course-panel ul li a .panel-box { width: min(92%,480px); height: 280px; display: flex; align-items: center; }
#course-panel ul li a .panel-box h2 { color: #FFF; position: absolute; top: 50%; transform: translateY(-40%); z-index: 2; }
#course-panel ul li a .panel-box h2 span { font-size: 1.4rem; line-height: 1.2; padding-bottom: .2rem; display: block; }
#course-panel ul li a .panel-box h2 strong { font-size: 2.5rem; line-height: 1.2; display: block; }
#course-panel ul li a .panel-box p { font-size: .8rem; line-height: 1.2; color: #FFF; position: absolute; top: 2rem; z-index: 2; }
#course-panel ul li a .panel-box div { width: auto; height: 90%; }
#course-panel ul li a .panel-box div img { width: auto; height: 100%; mix-blend-mode: multiply; opacity: .5; }
#course-panel ul li#panel-shinri a .panel-box { justify-content: flex-start; position: absolute; right: 0; }
#course-panel ul li#panel-bizcomm a .panel-box { justify-content: flex-end; position: absolute; left: 0; }
#course-panel ul li#panel-kenko a .panel-box { justify-content: flex-start; position: absolute; right: 0; }
#course-panel ul li#panel-kodomo a .panel-box { justify-content: flex-end; position: absolute; left: 0; }
#course-panel ul li#panel-shinri a .panel-box p, #course-panel ul li#panel-kenko a .panel-box p { text-align: right; right: 2rem; }
#course-panel ul li#panel-bizcomm a .panel-box p, #course-panel ul li#panel-kodomo a .panel-box p { text-align: left; left: 2rem; }
#course-panel ul li#panel-shinri a .panel-box h2, #course-panel ul li#panel-kenko a .panel-box h2 { text-align: right; right: 2rem; }
#course-panel ul li#panel-bizcomm a .panel-box h2, #course-panel ul li#panel-kodomo a .panel-box h2 { text-align: left; left: 2rem; }
#course-panel ul li#panel-bizcomm a .panel-box h2 strong { font-size: 2rem; line-height: 1.2; }
@media only screen and (max-width: 768px) {
  #course-panel ul li a .panel-box h2 span { font-size: 1.2rem; line-height: 1.2; }
}
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #course-panel ul li { width: 100%; margin-bottom: 1px; }
  #course-panel ul li a { height: 200px; }
  #course-panel ul li a .panel-box { width: 100%; height: 200px; margin: 0 auto; }
  #course-panel ul li#panel-shinri a .panel-box, #course-panel ul li#panel-bizcomm a .panel-box, #course-panel ul li#panel-kenko a .panel-box, #course-panel ul li#panel-kodomo a .panel-box { justify-content: flex-end; position: absolute; right: auto; left: auto; }
  #course-panel ul li#panel-shinri a .panel-box h2, #course-panel ul li#panel-bizcomm a .panel-box h2, #course-panel ul li#panel-kenko a .panel-box h2, #course-panel ul li#panel-kodomo a .panel-box h2 { text-align: left; left: 4%; right: auto; }
  #course-panel ul li a .panel-box h2 span { font-size: 1.1rem; line-height: 1.2; }
  #course-panel ul li a .panel-box h2 strong { font-size: 2rem; line-height: 1.2; }
  #course-panel ul li#panel-bizcomm a .panel-box h2 strong { font-size: 7.5vw; line-height: 1.2; }
  #course-panel ul li#panel-shinri a .panel-box p, #course-panel ul li#panel-bizcomm a .panel-box p, #course-panel ul li#panel-kenko a .panel-box p, #course-panel ul li#panel-kodomo a .panel-box p { text-align: left; right: auto; left: 4%; }

}