@charset "UTF-8";
/*==================
==== access ====
==================*/

/*======================================================
  page header
========================================================*/

.header__page-title {
    margin: 50px 0 20px;
}

.header__page-title--ja {
  color: #FFAC26;
}

@media screen and (min-width:768px) {
  .header__area {
      padding: 35px 0 50px;
  }
}

@media screen and (max-width:1280px) {
  .header__page-title--ja {
    font-size: clamp(3.8rem, 6.3vw, 7.4rem);
  }
}

/*======================================================
  main area
========================================================*/
.main__area {
  padding-top: 60px;
  background: url("../../img/access/bg-orange.jpg") repeat left top / 200px;
}

h3 {
  line-height: 1.3;
  font-weight: 700;
}

@media screen and (min-width:768px) {
  .main__area {
    padding-top: 80px;
  }
}
@media screen and (min-width:1024px) {
  .main__area {
    padding-top: 110px;
  }
}

/*
intro
----------------------------*/

#intro {
  margin-bottom: 60px;
  padding: 0 10px;
}

#intro h3 {
  display: inline-block;
  margin-bottom: 1em;
  padding-bottom: .5em;
  font-size: clamp(2rem, 3vw, 3.4rem);
  border-bottom: solid 3px #ffffffde;
}

.fs-110 {
  font-size: 110%;
  font-weight: 900;
}

@media screen and (min-width:768px) {
  #intro {
    margin-bottom: 80px;
    padding: 0;
  }
}
@media screen and (min-width:1024px) {
  #intro {
    margin-bottom: 100px;
  }

  #intro h3 {
    border-bottom: solid 5px #ffffffde;
  }
}

/*
info（共通）
----------------------------*/

.info {
  margin-bottom: 40px;
}

.info h3 {
  position: relative;
  margin: 0 10px .7em;
  padding-left: .7em;
  font-size: clamp(1.8rem, 2.4vw, 2.8rem);
}

.info h3::before {
  content: "";
  position: absolute;
  top: .2em;
  left: 0;
  width: .3em;
  height: 1em;
  background: #202D58;
}

.bg-white {
  padding: 1em 1.7em;
  background: #fff;
  border-radius: 15px;
}

@media screen and (min-width:768px) {
  .info {
    margin-bottom: 60px;
  }

  .info h3 {
    margin: 0 0 .7em;
  }

  .bg-white {
    padding: 2em 2.7em;
    }
}
@media screen and (min-width:1024px) {
  .info {
    margin-bottom: 80px;
  }
}

/*
交通機関
----------------------------*/

#transportation .bg-white {
  padding: 1.5em 1.7em;
}

#transportation li:not(:last-child) {
  margin-bottom: 30px;
}

#transportation dt {
  margin-bottom: .2em;
  padding: 0 0 .2em 1em;
  font-size: clamp(1.6rem, 2vw, 2rem);
}

#transportation li:first-child dt {
  color: #f58b00;
  background: url(../../img/access/subway-icon-orange.svg) no-repeat left center / 1em;
  border-bottom: solid 1px #f58b00;
}

#transportation li:nth-child(2) dt,
#transportation li:last-child dt {
  color: #0091df;
  background: url(../../img/access/subway-icon-blue.svg) no-repeat left center / 1em;
  border-bottom: solid 1px #0091df;
}

#transportation dd {
  max-width: 400px;
}

#transportation .movie {
  margin: .5em 0 0;
}

@media screen and (min-width:768px) {
  #transportation .bg-white {
    padding: 2.5em 2.7em;
  }

  #transportation li:not(:last-child) {
    margin-bottom: 40px;
  }
}

/*
住所
----------------------------*/

.google-map {
  margin-top: .5em;
  padding-left: 1em;
  font-weight: 700;
  text-decoration: underline;
  background: url(../../img/access/map-icon.svg) no-repeat left center / .8em;
}

/*
お問い合わせ
-------------------------------*/

#contact {
  margin-bottom: 100px;
}

.university-logo {
  margin-bottom: .3em;
  width: 160px;
}

@media screen and (min-width:768px) {
  #contact {
    margin-bottom: 120px;
  }

  .university-logo {
    width: 220px;
  }
}
@media screen and (min-width:1024px) {
    #contact {
    margin-bottom: 150px;
  }
}


/*======================================================
  page footer
========================================================*/

.mug path:first-child {
  fill: #FF6C50;
}

.footer__senior-wrap {
  width: 65%;
  max-width: 250px;
  transform: translate(-10%, 50px);
}

.footer__senior-wrap .speech-bubble {
  right: 75%;
}


@media screen and (min-width:768px) {
  .footer__senior-wrap {
    max-width: 320px;
    transform: translate(-10%, 61px);
  }
}

@media screen and (min-width:1024px) {
  .footer__senior-wrap {
    right: 53%;
    max-width: 360px;
    transform: translate(0, 68px);
  }

  .footer__senior-wrap .speech-bubble {
    right: -40%;
  }
}