html{
  height: 100%;
  box-sizing: border-box;
  font-size: 100%;
}
body{
  margin: 0; padding: 0;
  font-family: 'Noto Sans JP', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 16px; line-height: 1.5; font-weight: 400; color: #333;
  background-color: #FFF;
}
img, video{
  width: 100%; max-width: 100%; height: auto;
  display: block;
  vertical-align: bottom;
}
*, *::before, *::after{
  box-sizing: inherit;
}
#wrap{
  width: 100%; min-height: 100vh;
  position: relative;
  padding-bottom: 225px;
}
main{
  width: 1280px;
  margin: 0 auto; padding: 0 40px;
  overflow: hidden;
}
section{
  width: 100%;
  padding: 0 0 72px;
  position: relative;
}
h1,h2,h3,h4,h5,h6,ol,ul,li,p,form{
  margin: 0; padding: 0;
}
#header a,
#footer a{
  text-decoration: none;
}
main a{
  color: #003B8F; text-decoration: underline;
}
main a:hover{
  color: #809DC7;
}
@media (max-width: 767px){
  body{
    font-size: 4.267vw;
  }
  #wrap{
    padding-bottom: 64.56267vw;
  }
  main{
    width: 92vw;
    margin: 0 auto; padding: 23.2vw 0 0 0;
  }
  #home main{
    padding: 20.8vw 0 0 0;
  }
  section{
    padding: 0 0 12.8vw;
  }
}
*{
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: #ffffff !important;
  }
}

/* -------------------------------
 * #header
---------------------------------*/
#header{
  font-weight: 500; color: #FFF;
}
#header .container{
  width: 1200px; height: 92px;
  margin: 0 auto;
  position: relative;
  background-color: #FFF;
}
#header .header-logo {
  padding-top: 16px;
}
#header .header-logo a{
  width: 134px; height: 60px;
  display: block;
}
#header .header-logo img{
  width: 100%; height: 100%;
}
#header a.btn_contact{
  padding: 0 32px 0 60px;
  position: absolute; right: 0; top: 23px;
  display: inline-block;
  border-radius: 4px;
  background-color: #003B8F;
  font-size: 15px; line-height: 46px; color: #FFF; font-weight: 500; white-space: nowrap;
}
#header a.btn_contact::before{
  width: 24px; height: 24px;
  position: absolute; left: 28px; top: 50%;
  display: block;
  content: '';
  transform: translate(0, -50%);
  background-image: url("../image/header/icon_message.svg");
  background-size: 100% 100%;
}
#header #triger{
  display: none;
}
#gnav{
  width: 100%;
  background-color: #003B8F;
  transform: none;
}
#gnav ul{
  width: 1200px;
  margin: 0 auto; padding: 0;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
}
#gnav ul::before{
  width: 1px; height: 100%;
  content: '';
  position: absolute; left: -1px; top: 0;
  background: linear-gradient(to bottom, #809DC7, #406CAB);
}
#gnav li{
  position: relative;
  flex: 1 1 0;
  white-space: nowrap;
}
#gnav li::before{
  width: 1px; height: 100%;
  content: '';
  position: absolute; right: -1px; top: 0; z-index: 1;
  background: linear-gradient(to bottom, #809DC7, #406CAB);
}
#gnav li a{
  width: 100%;
  padding: 20px 0;
  display: block;
  font-size: 16px; color: #FFF; text-align: center;
}
#gnav li a:hover{
  background-color: #406CAB;
}
#home       #gnav li.gnav-home,
#news       #gnav li.gnav-news,
#about      #gnav li.gnav-about,
#lecturers  #gnav li.gnav-lecturers,
#curriculum #gnav li.gnav-curriculum,
#insights   #gnav li.gnav-insights,
#voice      #gnav li.gnav-voice,
#staff      #gnav li.gnav-staff,
#home       #gnav li.gnav-home a:hover,
#news       #gnav li.gnav-news a:hover,
#about      #gnav li.gnav-about a:hover,
#lecturers  #gnav li.gnav-lecturers a:hover,
#curriculum #gnav li.gnav-curriculum a:hover,
#insights   #gnav li.gnav-insights a:hover,
#voice      #gnav li.gnav-voice a:hover,
#staff      #gnav li.gnav-staff a:hover{
  background-color: #001D47;
}
#home       #gnav li.gnav-home::after,
#news       #gnav li.gnav-news::after,
#about      #gnav li.gnav-about::after,
#lecturers  #gnav li.gnav-lecturers::after,
#curriculum #gnav li.gnav-curriculum::after,
#insights   #gnav li.gnav-insights::after,
#voice      #gnav li.gnav-voice::after,
#staff      #gnav li.gnav-staff::after{
  width: 20px; height: 8px;
  content: '';
  position: absolute; left: 50%; bottom: -8px;
  transform: translate(-50%, 0);
  background: url("../image/header/parts_balloon.svg") center top no-repeat;
  background-size: 100% auto;
}
#gnav li.gnav-sp{
  display: none;
}
#header .ft{
  width: 100%; height: 32px;
  background: linear-gradient(to bottom, rgba(235, 235, 235, 1), rgba(255, 255, 255, 0));
}

@media (max-width: 767px){
  #header{
    width: 100vw;
    position: fixed; left: 0; top: 0; z-index: 60000;
  }
  #header .container{
    width: 100vw; height: 16.8vw;
    border-bottom: #003B8F 0.8vw solid;
    margin: 0 auto;
    position: relative; z-index: 60001;
  }
  #header .header-logo{
    padding: 2.67vw 0 0 3.2vw ;
  }
  #header .header-logo a{
    width: 24vw; height: 10.67vw;
  }
  #header a.btn_contact{
    display: none;
  }
  #header #triger{
    width: 16vw; height: 16vw;
    padding: 4.8vw 4.8vw 0 4.8vw;
    position: absolute; right: 0; top: 0;
    display: block;
    border-left: #DCDCDC 1px solid;
  }
  #header #triger .box{
    width: 6.4vw; height: 6.4vw;
    position: relative;
    font-size: 0;
  }
  #header #triger .box span{
    width: 100%; height: 2px;
    background-color: #333;
    position: absolute; left: 0;
    transition: transform 0.3s, opacity 0.3s;
  }
  #header #triger .box span:nth-child(1){ top: 0; }
  #header #triger .box span:nth-child(2){ top: 1.867vw; }
  #header #triger .box span:nth-child(3){ top: 3.734vw; }
  #header.active #triger .box span:nth-child(1){
    transform: rotate(45deg) translate(1.33vw, 1.33vw);
  }
  #header.active #triger .box span:nth-child(2){
    opacity: 0;
  }
  #header.active #triger .box span:nth-child(3){
    transform: rotate(-45deg) translate(1.33vw, -1.33vw);
  }
  #header #triger .label{
    font-size: 2.133vw; color: #333;
    font-family: 'Roboto';
  }
  #gnav{
    width: 100vw; height: 100vh;
    padding-top: 16.8vw;
    position: absolute; left: 0; top: 0;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    -webkit-overflow-scrolling: touch;
  }
  #header.active #gnav{
    transform: translateX(0);
  }
  #gnav ul{
    width: 100%;
    margin: 0 auto; padding: 0;
    overflow-y: auto;
    display: block;
  }
  #gnav ul::before{
    display: none;
  }
  #gnav li{
    flex: initial;
    border-bottom: #406CAB 1px solid;
  }
  #gnav li::before,
  #gnav li::after{
    display: none;
  }
  #gnav li a,
  #gnav li p{
    width: 100%;
    padding: 4vw;
    position: relative;
    display: block;
    background-color: #003b8f;
    font-size: 4.267vw; color: #FFF; text-align: left;
    user-select: none;
  }
  #gnav li a:hover{
    background-color: #003b8f
  }
  #gnav li a::before{
    width: 5.6vw; height: 5.6vw;
    position: absolute; right: 4vw; top: 50%;
    display: block;
    content: '';
    transform: translate(0, -50%);
    background-image: url("../image/common/icon_arrow-line.svg");
    background-size: 100% 100%;
  }
  #gnav li.gnav-sp{
    display: block;
    border-bottom: #284E82 1px solid;
  }
  #gnav li.gnav-sp.line1{
    border-bottom: #406CAB 1px solid;
  }
  #gnav li.gnav-sp.line2{
    border-bottom: none;
  }
  #gnav li.gnav-sp a{
    background-color: #002c6b;
  }
  #gnav li.gnav-sp p{
    background-color: #003b8f;
  }
  #gnav li.gnav-sp a:hover{
    background-color: #002c6b;
  }
  #gnav li.gnav-sp a::before{
    background-image: url("../image/common/icon_arrow-line_blue2.svg");
  }
  #header .ft{
    height: 4vw;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0));
  }
}

/* -------------------------------
 * #footer
---------------------------------*/
#footer{
  width: 100%;
  padding: 32px 0 24px;
  position: absolute; left: 0; bottom: 0;
  background-color: #003B8F;
}
#footer .sns{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}
#footer .sns li{
  width: 48px; height: 48px;
  list-style: none;
}
#footer .sns li img{
  width: 100%; height: 100%;
}
#footer .fnav{
  width: 100%;
  margin: 32px 0 48px;
  display: flex;
  justify-content: center;
  font-size: 14px; font-weight: 500; color: #BFCEE3;
}
#footer .fnav li{
  padding: 0 1.5em;
  position: relative;
  list-style: none;
}
#footer .fnav li::before{
  position: absolute; top: 0; left: -0.5em;
  display: block;
  content: "｜"
}
#footer .fnav li:nth-child(1)::before{
  display: none;
}
#footer .fnav li a{
  color: #FFF;
}
#footer .fnav li a:hover{
  text-decoration: underline;
}
#footer p{
  font-size: 13px; color: #BFCEE3; text-align: center;
}
@media (max-width: 767px){
  #footer{
    width: 100%;
    padding: 6.4vw 0 6.67vw;
  }
  #footer .sns{
    gap: 6.4vw;
  }
  #footer .sns li{
    width: 9.6vw; height: 9.6vw;
  }
  #footer .fnav{
    width: 100%;
    margin: 6.4vw 0;
    display: grid;
    grid-template-columns: 50% 50%;
    justify-content: center;
    font-size: 3.733vw; line-height: 2;
  }
  #footer .fnav li{
    padding: 0 1.5em;
  }
  #footer .fnav li:nth-child(1),
  #footer .fnav li:nth-child(3){
    text-align: right;
  }
  #footer .fnav li:last-child {
    grid-column: span 2;
    text-align: center;
  }
  #footer .fnav li:nth-child(odd)::before{
    display: none;
  }
  #footer p{
    font-size: 3.2vw;
  }
}
/* -------------------------------
 * #pagetop
---------------------------------*/
#pagetop{
  width: 56px; height: 56px;
  position: fixed; right: 24px; bottom: 24px; z-index: 200;
  border: #406CAB 1px solid;
  background-color: #003B8F;
  background-image: url("../image/common/btn_pagetop.svg");
  background-size: 100% 100%;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  font-size: 0;
}
#pagetop.active{
  opacity: 1;
  visibility: visible;
}
#pagetop:hover{
  background-color: #406CAB;
}
@media (max-width: 767px){
  #pagetop{
    width: 12.8vw; height: 12.8vw;
    right: 4vw; bottom: 4vw;
    border-radius: 4px;
  }
}

/* -------------------------------
 * common
---------------------------------*/
.clearfix::after{
  content: '';
  display: block;
  clear: both;
}
.sp-only,
.sp-only-inline{
  display: none;
}
.m{
  font-weight: 500;
}
.b{
  font-weight: 700;
}
.lh{
  line-height: 1.75;
}
.space::before{
  content: "\00a0"
}
.update_date{
  text-align: right;
}
@media (max-width: 767px){
  .pc-only{
    display: none !important;
  }
  .sp-only{
    display: block;
  }
  .sp-only-inline{
    display: inline-block;
  }
  .space::before{
    content: "\2002"
  }
}
/* .table1 */
.table1{
  width: 100%; 
  border-collapse: collapse; 
}
.table1 th,
.table1 td{
  margin: 0;
  border: 1px solid #CCC;
}
.table1 th{
  width: 300px;
  background-color: #F5F5F5;
  font-size: 18px; font-weight: 500; text-align: center;
}
.table1 td{
  padding: 32px 48px;
}
.table1 td p{
  margin-top: 12px;
}
.table1 td p:first-child{
  margin-top: 0;
}
@media (max-width: 767px){
  .table1 th,
  .table1 td{
    width: 100%;
    display: block;
  }
  .table1 th{
    margin-top: 4vw; padding: 2.4vw 4vw;
    border-bottom: none;
    font-size: 4.267vw; text-align: left;
  }
  .table1 tr:first-child th{
    margin-top: 0;
  }
  .table1 td{
    padding: 4.8vw 4vw;
  }
  .table1 td p{
    margin-top: 2.67vw;
    font-size: 4.267vw;
  }
}
/* .table2 */
.table2{
  width: 100%; 
  border-collapse: collapse; 
}
.table2 th,
.table2 td{
  margin: 0;
  border: 1px solid #CCC;
}
.table2 th{
  width: 174px;
  background-color: #F5F5F5;
  font-weight: 400; text-align: center;
}
.table2 td{
  padding: 16px 24px;
}
.table2 td div{
  margin-top: 12px;
}
.table2 td div:first-child{
  margin-top: 0;
}
@media (max-width: 767px){
  .table2 th,
  .table2 td{
    width: 100%;
    display: block;
  }
  .table2 th{
    margin-top: 4vw; padding: 2.4vw 4vw;
    border-bottom: none;
    font-size: 4.267vw; text-align: left;
  }
  .table2 tr:first-child th{
    margin-top: 0;
  }
  .table2 td{
    padding: 4.8vw 4vw;
  }
  .table2 td p{
    margin-top: 2.67vw;
    font-size: 4.267vw;
  }
}