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


/* Font Include */
@font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 300; src: url('../fonts/NotoSansJpLight.woff2.woff') format('woff2'); font-display: swap; }
@font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 400; src: url('../fonts/NotoSansJpRegular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 700; src: url('../fonts/NotoSansJpBold.woff2') format('woff2'); font-display: swap; }


/* Reset */
* { zoom: 1; }
:root { --vw: 1vw; }
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; }
img { width: 100%; height: auto; vertical-align: bottom; }
sup, sub { font-size: 70%; height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative; }
sup { bottom: 1ex; }
sub { top: .5ex; }
hr { display: none; }
a { color: #06C; text-decoration: none; transition: .4s; }
a:hover { color: #C00; }

/* Base */
html { height: -webkit-fill-available; }
body { font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; font-size: 15px; line-height: 1.8em; color: #333; min-height: 100vh; min-height: -webkit-fill-available; -webkit-text-size-adjust: none; -webkit-print-color-adjust: exact; position: relative;  overflow: auto;}
body.show { overflow: hidden; }
noscript p { line-height: 1.2em; text-align: center; font-weight: bold; color: #FFF; padding: .8em 0; background: #C00; }
#pagetop { position: absolute; left: 0; top: 0; }
.noto-l { font-family: "Noto Sans JP"; font-style: light; font-weight: 300; }
.noto-r { font-family: "Noto Sans JP"; font-style: Regular; font-weight: 400; }
.noto-b { font-family: "Noto Sans JP"; font-style: bold; font-weight: 700; }
.clearfix { zoom: 1; overflow: hidden; }
.clearfix:after { content: ""; display: block; clear: both; }

/* Header */
header { width: 100%; background: rgba(255,255,255,.8); box-shadow: 0 0 .5em rgba(0,0,0,.3); position: fixed; top: 0; transition: .4s; z-index: 10; }
#header-box { width: calc(100% - 40px); height: auto; margin: 0 auto; padding: 20px 0; display: flex; align-items: center; justify-content: flex-start; transition: .4s; }
#lecture-head #header-box { justify-content: space-between; }
#header-box h1 { width: 270px; transition: .4s; }
#header-box h1 a:hover { opacity: .8; }
#header-box ul { width: 330px; display: flex; justify-content: space-between; }
#lecture-head #header-box ul { margin-right: 60px; }
#header-box ul li { width: 160px; }
#header-box ul li:first-child a { background: #1E72A2; display: block; }
#header-box ul li:last-child a { background: #004375; display: block; }
#header-box ul li a:hover { opacity: .8; }
header.is-animation { background: rgba(255,255,255,.95); }
header.is-animation #header-box { padding: 10px 0; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  header #header-box { width: 92%; padding: 15px 0; }
  header.is-animation #header-box { padding: 8px 0; }
  #lecture-head #header-box { flex-direction: column; align-items: flex-start; }
  #lecture-head #header-box h1 { width: min(85%,440px); margin-bottom: .5em; }
  #header-box ul { width: min(85%,440px); }
  #lecture-head #header-box ul { width: 100%; margin-right: 0; }
  #header-box ul li { width: 49%; }
}


/* Hamburger Menu */
#toggle-box { width: 56px; height: 80px; display: flex; align-items: center; position: fixed; top: 0; right: 0; transition: .3s; z-index: 1000; }
#toggle-box.is-animation { height: 60px; }
#toggle { width: 36px; height: 30px; cursor: pointer; }
.nav_toggle { width: 100%; height: 100%; position: relative; display: block; z-index: 1001; }
.nav_toggle i { width: 100%; height: 4px; background-color: #004375; position: absolute; display: block; transition: transform .3s, opacity .3s; }
.nav_toggle i:nth-child(1) { top: 0; }
.nav_toggle i:nth-child(2) { top: 0; bottom: 0; margin: auto; }
.nav_toggle i:nth-child(3) { bottom: 0; }
.nav_toggle.show i:nth-child(1) { background-color: #FFF; transform: translateY(13px) rotate(-45deg); }
.nav_toggle.show i:nth-child(2) { opacity: 0; }
.nav_toggle.show i:nth-child(3) { background-color: #FFF; transform: translateY(-13px) rotate(45deg); }

#hamburger .nav { width: 100vw; height: 100vh; background: rgba(0,67,117,0.9); display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; z-index: 999; }
#hamburger .nav ul {  }
#hamburger .nav ul li { font-size: 2.5vw; line-height: 1.2; text-align: center; }
#hamburger .nav ul li a { color: #FFF; padding: 1vw 0; display: block; }
#hamburger .nav ul li a:hover { color: #999; }
#hamburger .nav ul li.active a { color: #F93; }
#hamburger .nav ul li.active a:hover { color: #F93; }
#hamburger .nav.show { opacity: 1; visibility: visible; }
@media screen and (max-width: 768px) {
  #hamburger .nav ul li { font-size: 5vw; line-height: 1.2; }
  #hamburger .nav ul li a { padding: 2vw 0; }
}
@media screen and (max-width: 520px) and (orientation: portrait) {
  #toggle-box { width: 45px; height: 16.5vw; }
  #toggle-box.is-animation { height: 13vw; }
  #toggle { width: 30px; height: 24px; padding-top: 0; top: 15px; right: 4%; }
  .nav_toggle.show i:nth-child(1) { transform: translateY(10px) rotate(-45deg); }
  .nav_toggle.show i:nth-child(3) { transform: translateY(-10px) rotate(45deg); }
}
@media screen and (max-width: 320px) {
  #toggle-box { width: 50px; height: 18vw; }
  #toggle-box.is-animation { height: 14vw; }
}

/* Key Visual */
#keyvisual { width: 100%; height: 60svh; background: url("../images/common/main_bg.gif") center center; }
#keyvisual-box { width: min(92%,800px); height: calc(60svh - 180px); margin: 0 auto; padding-top: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#keyvisual-box h1 strong { width: 340px; margin: 0 auto; padding-bottom: 3em; display: block; }
#keyvisual-box h1 span { display: none; }
#keyvisual-box dl { width: min(100%,660px); margin: 0 auto; padding-top: 3em; display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; }
#keyvisual-box dl dt { width: 100px; }
#keyvisual-box dl dd { width: calc(100% - 120px); display: flex; align-items: center; justify-content: space-between; }
#keyvisual-box dl dd h2 { width: 52.5%; }
#keyvisual-box dl dd h3 { width: 44.5%; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #keyvisual { background-size: 96px 87px; }
  #keyvisual-box { height: calc(60svh - 230px); padding-top: 110px; }
  #keyvisual-box h1 strong { width: min(100%,280px); padding-bottom: 2em; }
  #keyvisual-box h1 i { display: none; }
  #keyvisual-box h1 span { display: block; }
  #keyvisual-box dl { flex-direction: column; }
  #keyvisual-box dl dt { width: 80px; }
  #keyvisual-box dl dd { width: 100%; flex-direction: column; }
  #keyvisual-box dl dd h2 { width: min(100%,280px); padding: 1em 0 .5em 0; }
  #keyvisual-box dl dd h3 { width: min(90%,240px); }
}
@media only screen and (max-width: 750px) and (orientation: landscape) {
  #keyvisual-box { width: 80%; }
  #keyvisual-box h1 strong { padding-bottom: 1.5em; }
  #keyvisual-box dl { padding-top: 1.5em; }
  #keyvisual-box dl dt { width: 80px; }
  #keyvisual-box dl dd { width: calc(100% - 100px); }
}

/* Read */
#read { border-bottom: solid 1px #005A8E; }
#main-read { width: min(92%,960px); margin: 0 auto; padding: 2.5em 0 1.8em 0; }
#main-read h1 { font-size: 160%; line-height: 1.2; text-align: center; color: #005A8E; padding-bottom: .5em; }
#main-read h1 strong { position: relative; }
#main-read h1 strong::before { content: ""; width: 2em; height: 1px; background: #005A8E; position: absolute; top: 50%; left: -2.5em; }
#main-read h1 strong::after { content: ""; width: 2em; height: 1px; background: #005A8E; position: absolute; top: 50%; right: -2.5em; }
#main-read p { font-size: 115%; line-height: 1.8; text-align: center; padding-bottom: .8em; }
#main-read p span::before { content: "\A"; white-space: pre; }
#sub-read { background: #D9E6EE; }
#sub-read dl { width: min(92%,960px); margin: 0 auto; padding: .8em 0; }
#sub-read dl dt { font-size: 105%; line-height: 1.6; color: #005A8E; }
#sub-read dl dd { line-height: 1.6; text-align: justify; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #main-read { padding: 2em 0 1em 0; }
  #main-read h1 { font-size: 150%; line-height: 1.2; }
  #main-read h1 strong::before, #main-read h1 strong::after { display: none; }
  #main-read p { font-size: 105%; line-height: 1.6; text-align: justify; }
  #main-read p span::before { content: ""; }
  #sub-read dl dd { line-height: 1.4; }
}
@media only screen and (max-width: 750px) and (orientation: landscape) {
  #main-read h1 { font-size: 150%; line-height: 1.2; }
  #main-read p { font-size: 105%; line-height: 1.8; }
}

article { padding-bottom: 4em; display: flex; justify-content: space-between; }
main { width: calc(((100% - 960px) / 2) + 700px); }
aside { width: calc(((100% - 960px) / 2) + 200px); padding-top: 12em; background: url("../images/common/aside_bg.png") no-repeat top left; background-size: 380px; }
@media only screen and (max-width: 960px) {
  main { width: 74%; }
  aside { width: 22%; padding-top: 8em; background-size: 220px; }
}
@media only screen and (max-width: 520px) and (orientation: portrait) {
  article { flex-direction: column; }
  main { width: 96%; padding-bottom: 3em; }
  aside { width: 100%; padding-top: 35%; border-top: solid 1px #005A8E; background-size: 75%; background-position: top right 2%; }
}

main .column { margin-top: -3em; padding-top: 6em; display: flex; flex-direction: column; align-items: flex-end; }
main .column .column-title { width: 100%; margin-bottom: 1.2em; background: url("../images/common/main_bg.gif") center center; background-size: 64px 58px; display: flex; justify-content: flex-end; }
main .column h1 { width: 700px; display: flex; align-items: center; justify-content: space-between; }
main .column h1 strong { width: 160px; display: block; }
main .column h1 span { font-size: 100%; line-height: 1.2; font-weight: bold; color: #FFF; padding-right: .5em; }
main .column .column-box { width: 700px; }
@media only screen and (max-width: 960px) {
  main .column h1 { width: 100%; }
  main .column h1 strong { padding-left: .5em; }
  main .column .column-box { width: calc(100% - .5em); }
}
@media only screen and (max-width: 520px) and (orientation: portrait) {
  main .column { margin-top: -4em; padding-top: 6em; }
  main .column .column-title { margin-bottom: .8em; }
  main .column h1 strong { padding-left: 4%; }
  main .column .column-box { width: 96%; }
}

#news ul { height: 8em; overflow: auto; }
#news ul li { line-height: 1.4; text-align: justify; padding: .4em 0 .4em 6em; border-bottom: dotted 1px #CCC; position: relative; }
#news ul li:first-child { padding-top: 0; }
#news ul li:last-child { padding-bottom: 0; border-bottom: none; }
#news ul li h3 { color: #999; position: absolute; left: 0; }
#news ul li ul { height: auto; }
#news ul li ul li { padding: 0 0 .2em .7em; border-bottom: none; }
#news ul li ul li::before { content: ""; width: 0; height: 0; border-style: solid; border-width: .3em .4em; border-color: transparent transparent transparent #005A8E; position: absolute; top: .4em; left: 0; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #news ul li { line-height: 1.4; padding: .4em 0 .4em 0; }
  #news ul li h3 { padding-bottom: .3em; position: relative; }
}

#keynote p.notes { line-height: 1.4; text-align: justify; color: #F63; margin-bottom: .5em; padding-left: .8em; position: relative; }
#keynote p.notes::before { content: ""; width: 0; height: 0; border-style: solid; border-width: .4em .6em; border-color: transparent transparent transparent #F63; position: absolute; top: .7em; left: 0; transform: translateY(-50%); }
#keynote h2 { line-height: 1.2; margin-bottom: .6em; border-bottom: solid 1px #D9E6EE; display: flex; align-items: center; justify-content: flex-start; }
#keynote h2 strong { line-height: 1.2; text-align: center; color: #005A8E; width: 6em; margin-right: 1.5em; padding: .4em 0; background: #D9E6EE; display: block; position: relative; }
#keynote h2 strong::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 1em 1em; border-color: transparent transparent transparent #D9E6EE; position: absolute; top: 50%; right: -1.95em; transform: translateY(-50%); }
#keynote h3 { font-size: 150%; line-height: 1.4; text-align: justify; padding-bottom: .4em; }
#keynote h3 span { padding-left: .5em; }
#keynote h3 span::before { content: ""; }
#keynote p { text-align: justify; padding-bottom: .8em; }
#keynote h4 { font-size: 85%; line-height: 1.2; }
#keynote h4 strong { font-size: 200%; line-height: 1.2; vertical-align: baseline; padding-left: .5em; }
#keynote dl { padding-top: 1.2em; display: flex; align-items: stretch; justify-content: space-between; }
#keynote dl dt { width: 26%; overflow: hidden; position: relative; }
#keynote dl dt img { width: auto; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
#keynote dl dd { width: 70%; }
#keynote dl dd h5 { line-height: 1.2; margin-bottom: .5em; padding: .3em .4em; background: #D9E6EE; }
#keynote dl dd p { font-size: 93%; line-height: 1.5; padding-bottom: 0; }
@media only screen and (max-width: 768px) {
  #keynote dl dt { width: 30%; }
  #keynote dl dd { width: 66%; }
  #keynote dl dd p { font-size: 85%; line-height: 1.4; }
}
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #keynote h3 { font-size: 123%; line-height: 1.4; padding-bottom: .4em; }
  #keynote h3 span { padding-left: 0; }
  #keynote h3 span::before { content: "\A"; white-space: pre; }
  #keynote p { line-height: 1.6; padding-bottom: .8em; }
  #keynote h4 span::before { content: "\A"; white-space: pre; }
  #keynote h4 strong { padding-left: 0; display: block; }
  #keynote dl { padding-top: .8em; flex-direction: column; }
  #keynote dl dt { width: 100%; height: auto; padding-bottom: .8em; }
  #keynote dl dt img { width: 100%; height: auto; position: relative; top: 0; left: 0; transform: translate(0,0); }
  #keynote dl dd { width: 100%; }
}

#program p.notes { line-height: 1.4; text-align: justify; color: #F63; margin-bottom: 1.5em; padding-left: .8em; position: relative; }
#program p.notes::before { content: ""; width: 0; height: 0; border-style: solid; border-width: .4em .6em; border-color: transparent transparent transparent #F63; position: absolute; top: .7em; left: 0; transform: translateY(-50%); }
#program1 { margin-bottom: 2em; }
#program h2 { line-height: 1.2; border-bottom: solid 1px #D9E6EE; display: flex; align-items: center; justify-content: flex-start; }
#program h2 strong { line-height: 1.2; text-align: center; color: #005A8E; width: 6em; margin-right: 1.5em; padding: .4em 0; background: #D9E6EE; display: block; position: relative; }
#program h2 strong::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 1em 1em; border-color: transparent transparent transparent #D9E6EE; position: absolute; top: 50%; right: -1.95em; transform: translateY(-50%); }

#program dl a { padding: 1em 0; border-bottom: dotted 1px #CCC; display: flex; align-items: center; justify-content: space-between; }
#program dl a dt { width: 26%; }
#program dl a dd { width: 70%; }
#program dl a dd h3 { font-size: 123%; line-height: 1.3; text-align: justify; color: #005A8E; word-break: break-all; font-weight: bold; padding-bottom: .2em; transition: .3s; }
#program dl a:hover dd h3 { color: #F63; }
#program dl a dd h3 span { font-size: 85%; line-height: 1.3; }
#program dl a dd h4 { font-size: 93%; line-height: 1.3; color: #333; transition: .3s; }
#program dl a:hover dd h4 { color: #F63; }
#program p.attention { font-size: 93%; line-height: 1.4; text-align: justify; text-indent: -1em; padding: .8em 0 0 1em; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #program dl a { padding: .8em 0 .7em 0; flex-direction: column; align-items: flex-start; }
  #program dl a dt { width: 60%; padding-bottom: .5em; }
  #program dl a dd { width: 100%; }
  #program dl a dd h3 { font-size: 115%; line-height: 1.3; padding-bottom: .1em; }
  #program dl a dd h4 { font-size: 85%; line-height: 1.3; }
  #program p.attention { font-size: 85%; line-height: 1.4; }
}

#overview ul li { line-height: 1.4; text-align: justify; padding: .8em 0 .8em 7em; border-bottom: dotted 1px #CCC; position: relative; }
#overview ul li:first-child { padding-top: 0; }
#overview ul li:last-child { padding-bottom: 0; border-bottom: none; }
#overview ul li h3 { color: #005A8E; position: absolute; left: 0; }
#overview ul li ul.attention li { font-size: 93%; line-height: 1.4; text-indent: -1em; padding: 0 0 .2em 1em; border-bottom: none; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #overview ul li { line-height: 1.3; padding: .8em 0 .8em 0; }
  #overview ul li h3 { line-height: 1.3; padding-bottom: .2em; position: relative; }
  #overview ul li h3::before { content: "■"; }
}

#banner-box { width: 200px; }
#banner-box h1 { font-size: 105%; line-height: 1.2; height: 1.2em; margin-bottom: 1em; position: relative; }
#banner-box h1 strong { text-align: center; font-weight: normal; color: #005A8E; width: 6em; background: #FFF; display: block; position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; }
#banner-box h1::after { content: ""; width: 100%; height: 1px; background: #005A8E; display: block; position: absolute; top: 50%; }
#banner-box ul li { padding-bottom: .8em; }
#banner-box ul li a { display: block; box-shadow: 0 0 .3em rgba(0,0,0,.3); }
#banner-box ul li a:hover { opacity: .8; }
@media only screen and (max-width: 960px) {
  #banner-box { width: calc(100% - .5em); }
}
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #banner-box { width: 92%; margin: 0 auto; }
  #banner-box h1 { height: auto; }
  #banner-box h1 strong { text-align: center; width: 100%; padding: .4em 0; background: #D9E6EE; position: relative; }
  #banner-box h1::after { display: none; }
  #banner-box ul { display: flex; flex-wrap: wrap; justify-content: space-between; }
  #banner-box ul li { width: 48.5%; padding-bottom: 3%; }
}

#faq { margin-top: -6em; padding-top: 6em; }
#faq-inner { padding: 8em 0 1em 0; background: #EFEFEF; background: linear-gradient(120deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.1) 100%); position: relative; }
#faq h1 { color: #FFF; width: 120px; height: 120px; border-radius: 50%; background: #005A8E; display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); }
#faq h1 strong { font-size: 200%; line-height: 1.2; }
#faq h1 span { font-size: 85%; line-height: 1.2; padding: .3em 0; }
.faq-box { width: min(92%,960px); margin: 0 auto; padding-bottom: 3em; }
#faq h2 { font-size: 135%; line-height: 1.2; text-align: center; color: #005A8E; margin-bottom: .3em; padding: .5em 0; background: #FFF; }
#faq dl { border-bottom: solid 1px #999; }
#faq dl dt.question { font-family: "Noto Sans JP"; font-size: 123%; line-height: 1.3; font-style: bold; font-weight: 700; min-height: 5rem; padding: .5rem 3rem; display: flex; align-items: center; position: relative; transition: .3s; }
#faq dl dt.question::before { content: "Q"; font-size: 1.2rem; line-height: 1.4rem; text-align: center; color: #FFF; width: 2rem; padding: .2rem 0 .4rem 0; border-radius: 50%; background: #005A8E; display: block; position: absolute; top: 50%; left: .2rem; transform: translateY(-50%); }
#faq dl dt.question::after { content: ""; width: .8em; height: .8em; border-right: solid 1px #005A8E; border-bottom: solid 1px #005A8E; display: block; position: absolute; top: 50%; right: 1em; transform: translateY(-70%) rotate(45deg); transition: transform .3s ease-in-out, top .3s ease-in-out; }
#faq dl dt.question.open::after { transform: rotate(-135deg); }
#faq dl dt.question:hover { color: #005A8E; cursor: pointer; }
#faq dl dd.answer { line-height: 1.3; font-style: light; font-weight: 300; padding: .2rem 0 1rem 3rem; position: relative; display: none; }
#faq dl dd.answer::before { content: "A"; font-family: "Noto Sans JP"; font-size: 1.2rem; line-height: 1.4rem; font-style: bold; font-weight: 700; text-align: center; color: #FFF; width: 2rem; padding: .2rem 0 .4rem 0; border-radius: 50%; background: #E87967; display: block; position: absolute; top: 0; left: .2rem; }
#faq dl dd.answer p { line-height: 1.8; text-align: justify; }
#faq dl dd.answer h3 { padding-top: .8em; }
#faq dl dd.answer ul li { line-height: 1.4; text-align: justify; text-indent: -1em; padding: .2em 0 0 1em; }
#faq dl dd.answer ol { padding-top: .4em; }
#faq dl dd.answer ol li { line-height: 1.4; text-align: justify; text-indent: -1em; padding: .4em 0 0 1em; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #faq { margin-top: -10em; padding-top: 10em; }
  #faq-inner { padding: 8em 0 0 0; }
  .faq-box { padding-bottom: 2em; }
  #faq h2 { font-size: 115%; line-height: 1.2; }
  #faq dl dt.question { font-size: 105%; line-height: 1.3; padding: .5rem 2.5rem .5rem 3rem; }
  #faq dl dd.answer p { line-height: 1.4; }
}

#privacy { margin-bottom: 2em; padding: 3em 0 2em 0; border-bottom: solid 1px #EDEDED; }
#privacy-box { width: min(92%,960px); margin: 0 auto; }
#privacy h1 { font-size: 123%; line-height: 1.2; font-weight: bold; text-align: center; color: #005A8E; padding-bottom: .8em; }
#privacy p { line-height: 1.6; text-align: justify; padding-bottom: .8em; }
#privacy p.attention { text-indent: -1em; padding-left: 1em; }

#access { margin-top: -5em; padding-top: 5em; }
#access h1 { font-size: 123%; line-height: 1.2; font-weight: bold; text-align: center; color: #005A8E; padding: 1em 0 .8em 0; }
#access iframe { width: 100%; height: 560px; }
#access-box { width: min(92%,960px); margin: 0 auto 2em auto; }
#access ul li { text-indent: -1em; line-height: 1.4; text-align: center; padding: 0 0 .4em 1em; }
#access ul li span { color: #005A8E; }
#access ul.attention li { font-size: 93%; line-height: 1.4; text-align: center; color: #C00; padding: .5em 0 0 1em; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #access { margin-top: -8em; padding-top: 8em; }
  #access iframe { height: 360px; }
  #access ul li, #access ul.attention li { text-align: justify; }
}


/* Footer */
footer { width: 100%; height: 20em; padding-top: 4em; position: relative; }
footer.lecture-foot { border-top: solid 1px #CCC; }
footer h1 { width: min(92%,450px); margin: 0 auto; padding-bottom: 1.5em; }
footer h2 { font-size: 105%; line-height: 1.2; font-weight: bold; text-align: center; color: #005A8E; padding-bottom: .3em; }
footer p { line-height: 1.4; text-align: center; }
footer ul#sns { margin-top: 1.5em; display: flex; align-items: center; justify-content: center; }
footer ul#sns li { width: 40px; margin: 0 5px; }
footer ul#foot-img { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; position: absolute; bottom: 0; background: url("../images/common/building_c.png") no-repeat bottom; background-size: 100% 30px; z-index: -1; }
footer ul#foot-img li:first-child { width: 450px; }
footer ul#foot-img li:last-child { width: 300px; }

ul#foot-img { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; position: absolute; bottom: 0; background: url("../images/common/building_c.png") no-repeat bottom; background-size: 100% 30px; z-index: -1; }
ul#foot-img li:first-child { width: 450px; }
ul#foot-img li:last-child { width: 300px; }



@media only screen and (max-width: 960px) {
  footer ul#foot-img li:first-child { width: 45%; }
  footer ul#foot-img li:last-child { width: 30%; }

  ul#foot-img li:first-child { width: 45%; }
  ul#foot-img li:last-child { width: 30%; }
}
@media only screen and (max-width: 520px) and (orientation: portrait) {
  footer { height: 18em; padding-top: 1.5em; }
  footer p span::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; }
@media only screen and (max-width: 520px) {
  #returnbtn { right: 5px; }
}



/* Lecture */
#lecture-title { width: 100%; height: 8em; padding-top: 100px; background: url("../images/common/main_bg.gif") center center; display: flex; align-items: center; justify-content: center; }
#lecture-title h1 { font-size: 200%; line-height: 1.2; letter-spacing: .2em; color: #FFF; text-shadow: 0 0 .2em rgba(0,0,0,.5); margin-left: .2em; }
@media only screen and (max-width: 520px) {
  #lecture-title { height: 6em; padding-top: 33vw; }
  #lecture-title h1 { font-size: 160%; line-height: 1.2; }
}

#lecture-contents { width: min(92%,800px); margin: 0 auto; display: block; }
.lecture-column { padding-top: 4em; }
#lecture { padding-bottom: 3em; border-bottom: dotted 1px #CCC; }
#lecture h1 { font-size: 150%; line-height: 1.3; font-weight: bold; text-align: justify; color: #005A8E; padding: .4em 0; border-top: solid 1px #005A8E; border-bottom: solid 1px #CCC; }
#lecture ul { margin-bottom: 1em; border-bottom: solid 1px #005A8E; }
#lecture ul li { font-size: 93%; line-height: 1.2; padding: .5em 0 .5em 4.5em; border-bottom: dotted 1px #CCC; position: relative; }
#lecture ul li:last-child { border-bottom: none; }
#lecture ul li h3 { text-align: center; color: #FFF; width: 3em; padding: .2em 0; background: #005A8E; display: block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
#lecture ul li h3::after { content: ""; width: 0; height: 0; border-style: solid; border-width: .8em .8em; border-color: transparent transparent transparent #005A8E; position: absolute; top: 50%; right: -1.6em; transform: translateY(-50%); }
#lecture ul li strong { font-size: 123%; line-height: 1.2; }
#lecture ul li span { line-height: 1.2; padding-left: 1em; }
#lecture dl { display: flex; justify-content: space-between; }
#lecture dl dt { width: 30%; }
#lecture dl dd { width: 66%; }
#lecture dl dd p { text-align: justify; }

#college dl { display: flex; flex-direction: row-reverse; justify-content: space-between; }
#college dl.no-img { flex-direction: row; }
#college dl dt { width: 36%; }
#college dl dd { width: 60%; }
#college dl.no-img dd { width: 100%; }
#college dl dd h1 { padding-bottom: 1em; }
#college dl dd h1.short img { width: 240px; }
#college dl dd h1.middle img { width: min(100%,360px); }
#college dl dd p { line-height: 1.6; text-align: justify; }
#college p.link-btn { margin-top: 3em; }
#college p.link-btn a { line-height: 1.2; text-align: center; color: #FFF; width: 14em; margin: 0 auto; padding: .6em 0; border-radius: 1.2em; background: #005A8E; display: block; position: relative; }
#college p.link-btn a::after { content: ""; width: .6em; height: .6em; border-top: solid 2px #FFF; border-left: solid 2px #FFF; position: absolute; top: 50%; left: 1em; transform: translateY(-50%) rotate(-45deg); }
#college p.link-btn a:hover { opacity: .8; }

.no-justify { text-align: left !important; }

@media only screen and (max-width: 520px) {
  .lecture-column { padding-top: 2em; }
  #lecture { padding-bottom: 2em; }
  #lecture h1 { font-size: 135%; line-height: 1.3; }
  #lecture ul li span { padding-left: 0; display: block; }
  #lecture dl { flex-direction: column; }
  #lecture dl dt { width: 60%; margin: 0 auto 1em auto; }
  #lecture dl dd { width: 100%; }
  #lecture dl dd p { line-height: 1.4; }
  #college dl { flex-direction: column-reverse; }
  #college dl dt { width: 100%; }
  #college dl dd { width: 100%; padding-bottom: 1em; }
  #college dl dd h1 { text-align: center; }
  #college dl dd p { line-height: 1.4; }
}

/*2024　add*/

.mypageTitle{
	font-weight: bold;
    font-size: 1.5em;
    padding: 5px 10px;
    border: 1px solid #d7d7d7;
    border-radius: 3px;
    background: linear-gradient(to bottom, #ffffff -2%, #DAEFF9 80%);
    margin-bottom: 20px;
}
.tableDiv {
    background: aliceblue;
    padding: 7px;
	border: 1px solid #d7d7d7;
}
.left_tableDiv{
	color:#002244;
	font-weight: bold;
	width: 100%;
}
.right_tableDiv{
	width: 100%;
}

.buttonStyle{
	border: 1px solid #0049CC;
    font-weight: 300;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    background: linear-gradient(to bottom, #0084CC -2%, #0049CC 100%);
    display: inline-block;
	position: relative;
}

.buttonStyle:hover{
	opacity: .8;
}

/*右側に「＞」*/
.btn_nextIcon{
	padding: 5px 30px 5px 20px;
}
.btn_nextIcon:after{
	position: absolute;
    top: 10px;
    right: 13px;
    content: "\e5e1";
    font-family: "Material Icons";
    transition: 0.4s;
    font-size: 11px;
    font-weight: bold;
}

/*左側に「＜」*/
.btn_backIcon{
	padding: 5px 20px 5px 30px;
}
.btn_backIcon:before{
	position: absolute;
    top: 10px;
    left: 13px;
    content: "\e5e0";
    font-family: "Material Icons";
    transition: 0.4s;
    font-size: 11px;
    font-weight: bold;
}


.blue{
	background: #F0F9FD
}
.ftBold{font-weight: 600;}
.textCenter{text-align: center;}

.flex_block {
    display: flex;
    flex-wrap: wrap;
}

.statusList{
	background: #F0F9FD;
    padding: 5px 10px;
    border-radius: 3px;
    margin: 25px 0 15px;
    display: flex;
    flex-wrap: wrap;
}
.statusActive{
	color: #333;
}
.statusNone{
	color: #adaaaa;
}

.footer_box{
	width: 100%;
    height: 3em;
    margin-top: 4em;
    position: relative;
    text-align: right;
    border-top: 1px solid #d7d7d7;
    padding: 0;
}



/* 幅が 767px 以下であれば(最大値が767pxであれば) */
@media (min-width: 826px) {
	.left_tableDiv{max-width: 220px;}
	.right_tableDiv{max-width: 648px;}
	.topLf_tableDiv{border-radius: 5px 0px 0px 0px;}
	.topRt_tableDiv{border-radius: 0px 5px 0px 0px;}
	.btmLf_tableDiv{border-radius: 0px 0px 0px 5px;}
	.btmRt_tableDiv{border-radius: 0px 0px 5px 0px;}
}

@media (max-width: 825px) {
	.left_tableDiv{border-bottom:none;}
	.right_tableDiv{border-top:none;}
	.topLf_tableDiv{border-radius: 5px 5px 0px 0px;}
	.topRt_tableDiv{border-radius: 0px 0px 0px 0px;}
	.btmLf_tableDiv{border-radius: 0px 0px 0px 0px;}
	.btmRt_tableDiv{border-radius: 0px 0px 5px 5px;}
}