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

/* Color */
/* ベースカラー #3071B7 rgba(48,113,183,1) */
/* 心理 #56A8C8 rgba(86,168,200,1)　：　hover #1D6F9D */
/* ビジコミ #F2971B rgba(242,151,27,1)　：　hover #E65903 */
/* 健康栄養 #8DC21F rgba(141,194,31,1)　：　hover #4E9404 */
/* 子ども教育 #EC6D80 rgba(236,109,128,1)　：　hover #DA2F40 */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face { font-family: 'Noto Sans Japanese Light'; src: url('../fonts/NotoSansJpLight.woff2') format('woff'); font-style: normal; font-weight: 300; }
@font-face { font-family: 'Noto Sans Japanese Regular'; src: url('../fonts/NotoSansJpRegular.woff2') format('woff'); font-style: normal; font-weight: 400; }
@font-face { font-family: 'Noto Sans Japanese Bold'; src: url('../fonts/NotoSansJpBold.woff2') format('woff'); font-style: normal; font-weight: 600; }
.noto-l { font-family: "Noto Sans Japanese Light", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; }
.noto-r { font-family: "Noto Sans Japanese Regular", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; }
.noto-b { font-family: "Noto Sans Japanese Bold", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; font-weight: bold; }


/* Reset */
* { zoom: 1; }
html, body, header, footer, h1, h2, h3, h4, h5, h6, p, pre, address, ul, ol, li, dl, dt, em, dd, caption, img, form
{ margin: 0; padding: 0; border: none; font-style: normal; font-weight: normal; font-size: 100%; text-align: left; list-style-type: none; }
html { }
img { vertical-align: bottom; width: 100%; height: auto; }
hr { display: none; }
a { color: #06C; text-decoration: none; transition: .4s; }
a:hover { color: #C00; }


/* Common */
html, body { height: 100%; }
html.active-menu { overflow-y: hidden; }
body { font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; font-size: 16px; line-height: 1.8em; color: #333; -webkit-text-size-adjust: none; }
#wrap { height: 100%; min-height: 100%; margin: 0 auto; position: relative; }
body > #wrap { height: auto; min-height: 100%; }
#container { padding-bottom: 180px; zoom: 1; overflow: hidden; }
#container:after { content: ""; display: block; clear: both; }
#shinri #container, #bizcomm #container, #kenko #container, #kodomo #container { padding-bottom: 300px; }
#pagetop { position: absolute; left: 0; top: 0; }
noscript p { line-height: 1.2em; text-align: center; font-weight: bold; color: #FFF; padding: .8em 0; background: #C00; }
.inner-box { width: min(92%,960px); margin: 0 auto; padding: 2rem 0; }
.column { width: min(92%,960px); margin: 0 auto; padding: 2rem 0; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #container, #shinri #container, #bizcomm #container, #kenko #container, #kodomo #container { padding-bottom: 0; }
}


/* Header */
header { width: 100%; box-shadow: 0 0 .5rem rgba(0,0,0,.2); }
#header-box { width: min(92%,960px); height: 80px; margin: 0 auto; display: flex; align-items: center; position: relative; }
#head-logo { width: 210px; }

/* Hambarger Menu */
#gmenu { width: 660px; position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 10; }
#gmenu ul { width: 100%; display: flex; justify-content: space-between; }
#gmenu ul li { width: 24%; position: relative; }
#gmenu ul li a { width: calc(100% - 4px - .4rem); height: 46px; padding: 0 .2rem; border-radius: .5rem; display: block; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#gmenu ul li a .sp-menu { display: none; visibility: hidden; }
#gmenu ul li#menu-shinri a { border: solid 2px #56A8C8; background: rgba(86,168,200,.2); }
#gmenu ul li#menu-shinri a:hover { background: rgba(86,168,200,.4); }
#gmenu ul li#menu-shinri a img { filter: invert(63%) sepia(36%) saturate(564%) hue-rotate(151deg) brightness(91%) contrast(89%); }
#gmenu ul li#menu-bizcomm a { border: solid 2px #F2971B; background: rgba(242,151,27,.2); }
#gmenu ul li#menu-bizcomm a:hover { background: rgba(242,151,27,.4); }
#gmenu ul li#menu-bizcomm a img { filter: invert(65%) sepia(76%) saturate(1233%) hue-rotate(346deg) brightness(96%) contrast(97%); }
#gmenu ul li#menu-kenko a { border: solid 2px #8DC21F; background: rgba(141,194,31,.2); }
#gmenu ul li#menu-kenko a:hover { background: rgba(141,194,31,.4); }
#gmenu ul li#menu-kenko a img { filter: invert(73%) sepia(8%) saturate(3950%) hue-rotate(35deg) brightness(95%) contrast(86%); }
#gmenu ul li#menu-kodomo a { border: solid 2px #EC6D80; background: rgba(236,109,128,.2); }
#gmenu ul li#menu-kodomo a:hover { background: rgba(236,109,128,.4); }
#gmenu ul li#menu-kodomo a img { filter: invert(53%) sepia(56%) saturate(2182%) hue-rotate(315deg) brightness(109%) contrast(85%); }
#gmenu ul li#menu-shinri a.active { background: rgba(86,168,200,1); }
#gmenu ul li#menu-bizcomm a.active { background: rgba(242,151,27,1); }
#gmenu ul li#menu-kenko a.active { background: rgba(141,194,31,1); }
#gmenu ul li#menu-kodomo a.active { background: rgba(236,109,128,1); }
#gmenu ul li#menu-shinri a.active img, #gmenu ul li#menu-bizcomm a.active img, #gmenu ul li#menu-kenko a.active img, #gmenu ul li#menu-kodomo a.active img { filter: invert(100%) sepia(93%) saturate(0%) hue-rotate(200deg) brightness(106%) contrast(106%); }
#gmenu ul li ul { width: 100%; max-height: 0; display: block; position: absolute; overflow: hidden; transition: .5s; }
#gmenu ul li ul.show { max-height: 15rem; }
#gmenu ul li ul li { font-size: .9rem; line-height: 1.3; width: 100%; padding-top: .2rem; }
#gmenu ul li ul li a { width: calc(100% - 2px - .6rem); height: auto; padding: .3rem .3rem; border-radius: .5rem; display: block; }
#gmenu ul li ul li a strong { font-weight: normal; }
#gmenu ul li ul li a span::before { content: "\A"; white-space: pre; }
#gmenu ul li#menu-shinri ul li a { color: #56A8C8; border: solid 1px #56A8C8; background: rgba(255,255,255,0.8); }
#gmenu ul li#menu-shinri ul li a:hover { background: rgba(204,229,238,.8); }
#gmenu ul li#menu-bizcomm ul li a { color: #F2971B; border: solid 1px #F2971B; background: rgba(255,255,255,0.8); }
#gmenu ul li#menu-bizcomm ul li a:hover { background: rgba(251,224,186,.8); }
#gmenu ul li#menu-kenko ul li a { color: #8DC21F; border: solid 1px #8DC21F; background: rgba(255,255,255,0.8); }
#gmenu ul li#menu-kenko ul li a:hover { background: rgba(221,237,187,.8); }
#gmenu ul li#menu-kodomo ul li a { color: #EC6D80; border: solid 1px #EC6D80; background: rgba(255,255,255,0.8); }
#gmenu ul li#menu-kodomo ul li a:hover { background: rgba(249,211,217,.8); }

#toggle-btn { width: 0; height: 0; position: fixed; top: 10px; right: 0; display: none; z-index: 1001; }
#overlay { display: none; }
#overlay.active-menu { width: 100%; height: 100%; background: rgba(0,0,0,.7); display: block; position: fixed; top: 0; left: 0; z-index: 999; }
@media only screen and (max-width: 960px) {
  #toggle-btn { width: 60px; height: 60px; padding-right: 5px; display: block; position: fixed; top: 10px; right: 0; z-index: 1001; }
  #toggle-btn ul { width: 100%; height: 100%; max-height: auto; position: relative; }
  #toggle-btn ul li { width: 70%; height: 4px; background: #693; display: block; position: absolute; left: 50%; }
  #toggle-btn ul li:first-child { top: 25%; transform: translate(-50%,-50%); transition: .3s; }
  #toggle-btn ul li:nth-child(2) { top: 50%; transform: translate(-50%,-50%); transition: .3s }
  #toggle-btn ul li:last-child { top: 75%; transform: translate(-50%,-50%); transition: .3s }
  #toggle-btn ul.active-menu li:first-child { top: 50%; transform: translate(-50%,-50%) rotate(-45deg); }
  #toggle-btn ul.active-menu li:nth-child(2) { opacity: 0; }
  #toggle-btn ul.active-menu li:last-child { top: 50%; transform: translate(-50%,-50%) rotate(45deg); }

  #gmenu { width: min(85%,350px); height: calc(100% - 80px); padding: 80px 5px 0 5px; background: rgba(255,255,255,.9); box-shadow: 0 0 .5rem rgba(0,0,0,.3); position: fixed; top: 0; right: -100%; transform: translateX(0); z-index: 1000; transition: .5s; }
  #gmenu.active-menu { right: 0; }
  #gmenu ul { width: 100%; padding: 0; flex-direction: column; }
  #gmenu ul li { width: 100%; margin-bottom: 10px; }
  #gmenu ul li a { width: 100%; height: auto; padding: 0; border: none; border-radius: .5rem; display: block; }
  #gmenu ul li a .pc-menu { display: none; visibility: hidden; }
  #gmenu ul li a .sp-menu { display: block; visibility: visible; }
  #gmenu ul li a.main-link { color: #FFF; width: calc(100% - 1rem); padding: .3rem .5rem .2rem .5rem; }
  #gmenu ul li a.main-link span { font-size: .9rem; line-height: 1.2; display: block; }
  #gmenu ul li a.main-link strong { font-size: min(1.2rem,5vw); line-height: 1.2; }
  #gmenu ul li#menu-shinri a.main-link { border: none; background: rgba(86,168,200,1); }
  #gmenu ul li#menu-shinri a.main-link:hover { background: rgba(86,168,200,.7); }
  #gmenu ul li#menu-bizcomm a.main-link { border: none; background: rgba(242,151,27,1); }
  #gmenu ul li#menu-bizcomm a.main-link:hover { background: rgba(242,151,27,.7); }
  #gmenu ul li#menu-kenko a.main-link { border: none; background: rgba(141,194,31,1); }
  #gmenu ul li#menu-kenko a.main-link:hover { background: rgba(141,194,31,.7); }
  #gmenu ul li#menu-kodomo a.main-link { border: none; background: rgba(236,109,128,1); }
  #gmenu ul li#menu-kodomo a.main-link:hover { background: rgba(236,109,128,.7); }
  #gmenu ul li ul { max-height: 15rem; margin-top: .2rem; display: block; position: relative; }
  #gmenu ul li ul li { margin: 0; padding: 0; }
  #gmenu ul li ul li a { width: 100%; height: auto; padding: .2rem 0; border-radius: 0; }
  #gmenu ul li ul li a strong { padding-left: .8rem; position: relative; }
  #gmenu ul li ul li a strong::before { content: ""; width: .4rem; height: .6rem; position: absolute; top: 50%; left: .3rem; transform: translateY(-50%); }
  #gmenu ul li ul li a span::before { content: ""; }
  #gmenu ul li#menu-shinri ul li a { background: none; border: none; border-bottom: dotted 1px #56A8C8; }
  #gmenu ul li#menu-shinri ul li a strong::before { background: #56A8C8; clip-path: polygon(0 0,100% 50%,0 100%); }
  #gmenu ul li#menu-bizcomm ul li a { background: none; border: none; border-bottom: dotted 1px #F2971B; }
  #gmenu ul li#menu-bizcomm ul li a strong::before { background: #F2971B; clip-path: polygon(0 0,100% 50%,0 100%); }
  #gmenu ul li#menu-kenko ul li a { background: none; border: none; border-bottom: dotted 1px #8DC21F; }
  #gmenu ul li#menu-kenko ul li a strong::before { background: #8DC21F; clip-path: polygon(0 0,100% 50%,0 100%); }
  #gmenu ul li#menu-kodomo ul li a { background: none; border: none; border-bottom: dotted 1px #EC6D80; }
  #gmenu ul li#menu-kodomo ul li a strong::before { background: #EC6D80; clip-path: polygon(0 0,100% 50%,0 100%); }
}



/* Footer */
footer { width: 100%; height: 180px; position: absolute; bottom: 0; }
#college-data { color: #666; width: min(92%,960px); height: 150px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#college-data h2 { font-size: 1.8rem; line-height: 1.2; text-align: center; padding-bottom: .5rem; }
#college-data p { font-size: .9rem; line-height: 1.4; text-align: center; }
#college-data p i { font-style: normal; padding-left: 1rem; }
#copyright { width: 100%; height: 30px; background: #693; display: flex; align-items: center; justify-content: center; }
#copyright p { color: #FFF; }
#copyright p small { font-size: .75rem; }
#copyright p a { color: #FFF; }
#copyright p a:hover { color: #FFF; text-decoration: underline; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  footer { position: relative; }
  #college-data p i { padding-left: 0; }
  #college-data p i::before { content: "\A"; white-space: pre; }
}


/* Return Button */
#returnbtn { width: 50px; height: 50px; position: fixed; bottom: 10px; right: 10px; z-index: 3; }
#returnbtn a img { opacity: .6; transition: .2s; }
#returnbtn a:hover img { opacity: .8; }


/* ---------- Contents ---------- */

/* Page Title */
#page-title { width: 100%; height: 240px; position: relative; }
#page-title.page-title2 { height: 270px; }
#page-title h1 { width: calc(960px + ((100% - 960px) / 2)); background: #000; position: absolute; right: 0; bottom: 3rem; }
#page-title h1 strong { font-size: 1.5rem; line-height: 1.2; text-align: center; color: #FFF; width: min(calc(96% - 1rem),calc(960px - 1rem)); padding: .5rem calc(.5rem + 4%) .5rem .5rem; display: block; }
#page-title h1 strong span { font-size: 1.2rem; line-height: 1.3; text-align: center; display: block; }
#page-title h1 strong i { font-style: normal; }
#page-title .inner-box { height: 6rem; display: flex; align-items: center; justify-content: center; }
#page-title #course-name { color: #FFF; width: 100%; }
#page-title #course-name span { font-size: min(1.2rem,4svw); line-height: 1.3; text-align: center; display: block; }
#page-title #course-name strong { font-size: 2.4rem; line-height: 1.3; letter-spacing: .5rem; text-align: center; padding-left: .5rem; display: block; }
#bizcomm #page-title #course-name strong { font-size: min(2.4rem,5.5svw); line-height: 1.3; letter-spacing: 0; paddin-left: 0; }
#page-title .base { content: ""; width: 100%; height: 100%; background: #CCC; clip-path: polygon(0 0,100% 0,100% 60%,0 100%); position: absolute; top: 0; z-index: -1; }
#page-title.page-title2 .base { clip-path: polygon(0 0,100% 0,100% 55%,0 100%); }
@media only screen and (max-width: 960px) {
  #page-title h1 { width: 96%; }
}
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #page-title { height: 160px; }
  #page-title.page-title2 { height: 200px; }
  #page-title h1 { bottom: 1.5rem; }
  #page-title h1 strong { font-size: 4svw; line-height: 1.2; }
  #page-title h1 strong span { font-size: 3.5svw; line-height: 1.3; }
  #page-title h1 strong i::before { content: "\A"; white-space: pre; }
  #page-title .inner-box { height: 2.4rem; }
  #page-title #course-name strong { letter-spacing: 0; paddin-left:0; }
  #page-title .base { clip-path: polygon(0 0,100% 0,100% 55%,0 100%); }
  #page-title.page-title2 .base { clip-path: polygon(0 0,100% 0,100% 50%,0 100%); }
}

/* Course Index */
#index-column { width: min(92%,960px); margin: -5rem auto 0 auto; padding-bottom: 4rem; }
#main-visual { width: min(80%,520px); margin: 0 auto; }
#index-column p { font-size: 1.1rem; line-height: 1.8; text-align: center; padding: 2rem 0; }
#index-column p span::before { content: "\A"; white-space: pre; }
#index-column ul { display: flex; align-items: stretch; justify-content: space-between; }
#index-column ul li { width: 48%; }
#index-column ul li a { font-size: 1.4rem; line-height: 1.4; text-align: center; color: #FFF; width: 92%; height: 7rem; padding: 0 4% 1rem 4%; border-radius: 1rem; background: #CCC; display: flex; align-items: center; justify-content: center; position: relative; }
#index-column ul li a::after { content: ""; width: 1.4rem; height: .8rem; background: #FFF; clip-path: polygon(0 0,100% 0,50% 100%); position: absolute; bottom: .8rem; left: 50%; transform: translateX(-50%); }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #index-column { margin: -3.5rem auto 0 auto; padding-bottom: 2rem; }
  #index-column p { font-size: 1rem; line-height: 1.6; text-align: justify; padding: 1rem 0; }
  #index-column p span::before { content: ""; }
  #index-column ul { flex-direction: column; }
  #index-column ul li { width: 100%; margin-bottom: .5rem; }
  #index-column ul li:last-child { margin-bottom: 0; }
  #index-column ul li a { font-size: 1.1rem; line-height: 1.4; height: 4rem; padding: 0 1.5rem 0 .5rem; }
  #index-column ul li a::after { width: .7rem; height: 1.2rem; clip-path: polygon(0 0,100% 50%,0 100%); top: 50%; right: .5rem; bottom: auto; left: auto; transform: translate(0,-50%); }
}

/* Course Link */
#course-link { width: 100%; position: absolute; bottom: 180px; }
#course-link ul { display: flex; flex-wrap: wrap; }
#course-link ul li { width: 25%; }
#course-link ul li a { width: 100%; height: 120px; display: block; position: relative; overflow: hidden; }
#course-link ul li#panel-shinri a { background: rgba(86,168,200,1); }
#course-link ul li#panel-shinri a:hover { background: rgba(86,168,200,.7); }
#course-link ul li#panel-bizcomm a { background: rgba(242,151,27,1); }
#course-link ul li#panel-bizcomm a:hover { background: rgba(242,151,27,.7); }
#course-link ul li#panel-kenko a { background: rgba(141,194,31,1); }
#course-link ul li#panel-kenko a:hover { background: rgba(141,194,31,.7); }
#course-link ul li#panel-kodomo a { background: rgba(236,109,128,1); }
#course-link ul li#panel-kodomo a:hover { background: rgba(236,109,128,.7); }
#course-link ul li a .panel-box { width: calc(100% - 2rem); height: 100%; padding: 0 1rem; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#course-link ul li a .panel-box h2 { color: #FFF; width: 100%; z-index: 2; }
#course-link ul li a .panel-box h2 span { font-size: 1rem; line-height: 1.2; text-align: center; padding-bottom: .2rem; display: block; }
#course-link ul li a .panel-box h2 span i { font-style: normal; }
#course-link ul li a .panel-box h2 strong { font-size: 1.4rem; line-height: 1.2; letter-spacing: .5rem; padding-left: .5rem; text-align: center; display: block; }
#course-link ul li#panel-bizcomm a .panel-box h2 strong { font-size: min(1.4rem,1.8svw); line-height: 1.2; letter-spacing: 0; padding-left: 0; }
#course-link ul li a .panel-box div { width: 100%; height: 120px; position: absolute; overflow: hidden; }
#course-link ul li a .panel-box div img { width: 60%; height: auto; mix-blend-mode: multiply; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: .3; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #course-link { position: relative; bottom: 0; }
  #course-link ul li { width: 50%; }
  #course-link ul li a { width: 100%; height: 100px; }
  #course-link ul li a .panel-box { width: 92%; padding: 0 4%; }
  #course-link ul li a .panel-box h2 span { font-size: 3.5svw; line-height: 1.2; }
  #course-link ul li a .panel-box h2 span i::before { content: "\A"; white-space: pre; }
  #course-link ul li a .panel-box h2 strong { font-size: 5.5svw; line-height: 1.2; letter-spacing: 0; padding-left: 0; }
  #course-link ul li#panel-bizcomm a .panel-box h2 strong { font-size: 4svw; line-height: 1.2; }
  #course-link ul li a .panel-box div img { width: 80%; height: auto; }
}

#subconte-link { padding-bottom: 2rem; background: #EFEFEF; background: linear-gradient(0deg, #FFF 0%, #EFEFEF 100%); }
#subconte-link ul { width: min(100%,960px); margin: 0 auto; display: flex; align-items: stretch; justify-content: space-between; }
#subconte-link ul li { width: 48%; }
#subconte-link ul li a { line-height: 1.2; text-align: center; padding: .6rem 1.4rem .6rem .4rem; border: solid 1px #999; border-radius: 1.5rem; display: block; position: relative; }
#subconte-link ul li a::after { content: ""; width: .6rem; height: 1rem; background: #999; clip-path: polygon(0 0,100% 50%,0 100%); position: absolute; top: 50%; right: .4rem; transform: translateY(-50%); transition: .3s; }
#subconte-link ul li a:hover {  }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #subconte-link { padding-bottom: 2rem; }
  #subconte-link ul { flex-direction: column; }
  #subconte-link ul li { width: 100%; margin-bottom: .5rem; }
  #subconte-link ul li:last-child { margin-bottom: 0; }
}