@charset "utf-8";

.title {
  font-size: 12px;
  height: 80px;
  line-height: 1.3;
  color: #ffffff;
  text-align: center;
  background-color: #0014ac;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%235661b5' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
  padding-top: 7px;
}

.title-intro {
  max-width: 450px;
  margin: 30px auto 0 auto;
  text-align: center;
}

.title-intro h2 {
  font-size: 2.0rem;
}

.title-intro p {
  font-size: 1.6rem;
  margin-top: 10px;
  padding-bottom: 5px;
}

.title-intro span {
  background: linear-gradient(transparent 70%, #f9b737 80%);
}

/* インター校マップ */

.school-map {
  width: 600px;
  margin: 40px auto 0 auto;
  position: relative;
}

.icon-dalat {
  width: 60px;
  position: absolute;
  top: 75px;
  left: 355px;
}

.icon-dalat:hover {
  transform: scale(1.1);
  transition-duration: 0.6s;
}

.icon-stonyhurst {
  width: 60px;
  position: absolute;
  top: 195px;
  left: 448px;
}

.icon-stonyhurst:hover {
  transform: scale(1.1);
  transition-duration: 0.6s;
}

.icon-perita {
  width: 60px;
  position: absolute;
  top: 103px;
  left: 425px;
}

.icon-perita:hover {
  transform: scale(1.1);
  transition-duration: 0.6s;
}

.icon-wesley {
  width: 60px;
  position: absolute;
  top: 265px;
  left: 470px;
}

.icon-wesley:hover {
  transform: scale(1.1);
  transition-duration: 0.6s;
}

.icon-fairview {
  width: 60px;
  position: absolute;
  top: 300px;
  left: 407px;
}

.icon-fairview:hover {
  transform: scale(1.1);
  transition-duration: 0.6s;
}

.icon-straits {
  width: 60px;
  position: absolute;
  top: 467px;
  left: 410px;
}

.icon-straits:hover {
  transform: scale(1.1);
  transition-duration: 0.6s;
}

.icon-powiis2 {
  width: 60px;
  position: absolute;
  top: 390px;
  left: 32px;
}

.icon-powiis2:hover {
  transform: scale(1.1);
  transition-duration: 0.6s;
}

.icon-powiis1 {
  width: 60px;
  position: absolute;
  top: 45px;
  left: 287px;
}

.icon-powiis1:hover {
  transform: scale(1.1);
  transition-duration: 0.6s;
}

.icon-tenby {
  width: 60px;
  position: absolute;
  top: 45px;
  left: 200px;
}

.icon-tenby:hover {
  transform: scale(1.1);
  transition-duration: 0.6s;
}

.icon-uplands {
  width: 60px;
  position: absolute;
  top: 95px;
  left: 135px;
}

.icon-uplands:hover {
  transform: scale(1.1);
  transition-duration: 0.6s;
}

.icon-stchristopher {
  width: 60px;
  position: absolute;
  top: 235px;
  left: 240px;
}

.icon-stchristopher:hover {
  transform: scale(1.1);
  transition-duration: 0.6s;
}

.map-endtext {
  font-size: 1.6rem;
  max-width: 680px;
  margin: 30px auto 0 auto;
  text-align: center;
  line-height: 1.5;
  padding: 0 15px;
}

.map-endtext span {
  background: linear-gradient(transparent 70%, #f9b737 80%);
}

/* なぜペナンのインター校に留学？ */
.fact-penang {
  max-width: 500px;
  margin: 50px auto 40px auto;
  padding: 0 10px;
}

.fact-penang h3 {
  font-size: 2.6rem;
  text-align: center;
  margin-bottom: 20px;
}

.fact-penang h3::after {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  background-color: #0014ac;
  margin-top: 12px;
  margin-left: auto;
  margin-right: auto;
}

.fact-penang p {
  font-size: 1.8rem;
  height: 22px;
  margin-top: 15px;
}

/* .fact-penang span {
  padding-left: 90px;
} */

.fact-penang-text1 {
  background-image: url(../images/school/point1.svg);
  background-repeat: no-repeat;
  background-size: 75px;
}

.fact-penang-text2 {
  background-image: url(../images/school/point2.svg);
  background-repeat: no-repeat;
  background-size: 75px;
}

.fact-penang-text3 {
  background-image: url(../images/school/point3.svg);
  background-repeat: no-repeat;
  background-size: 75px;
}

/* なぜペナン詳細 */

.fact-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 20px auto 0 auto;
}

.fact-details-wideimage span {
  background: linear-gradient(transparent 70%, #f9b737 80%);
}

.fact-details-img {
  width: 200px;
  margin: 0 15px 15px 15px;
  border-radius: 10px;
}

.fact-details-text {
  font-size: 1.6rem;
  width: 500px;
  line-height: 1.5;
  margin: 0 15px;
}

.fact-details-wideimage {
  font-size: 1.6rem;
  width: 750px;
  max-width: 90%;
  margin: 20px auto;
}

.fact-details-wideimage p {
  line-height: 1.5;
  margin-top: 15px;
}

.fact-details-wideimage img {
  border-radius: 10px;
  margin-top: 15px;
}

.fact-details-text1 {
  font-size: 1.8rem;
  margin-bottom: 10px;
  border-bottom: 2px solid rgb(237, 28, 36);
}

.fact-details-text2 {
  font-size: 1.8rem;
  margin-bottom: 10px;
  border-bottom: 2px solid rgb(0, 146, 69);
}

.fact-details-text3 {
  font-size: 1.8rem;
  margin-bottom: 10px;
  border-bottom: 2px solid #0014ac;
  text-align: center;
  padding-bottom: 5px;
}

/* サポート費用 */

.service-charge {
  width: 650px;
  max-width: 90%;
  margin: 40px auto 0 auto;
}

.service-charge-header {
  position: relative;
}

.check-icon {
  width: 50px;
  transform: rotate(20deg);
  position: absolute;
  top: -25px;
  left: calc(50% - 220px);
}

.service-charge-header h3 {
  font-size: 2.4rem;
  text-align: center;
}

.service-charge-header h3::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background-color: #0014ac;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}

.end-caution-text {
  font-size: 1.6rem;
  line-height: 1.3;
  margin: 15px 0;
}

.service-charge h4 {
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 15px;
}

.service-charge span {
  font-size: 2.8rem;
  background: linear-gradient(transparent 70%, #f9b737 70%);
}

.service-contents {
  width: 320px;
  max-width: 90%;
  margin: 20px auto 0 auto;
}

.service-contents h5 {
  color: #f3f3f4;
  background-color: #0014ac;
  font-size: 1.6rem;
  text-align: center;
  line-height: 1.3;
  padding: 10px 10px 8px 10px;
  border-radius: 10px 10px 0 0;
}

.service-contents-list {
  line-height: 1.5;
  padding: 10px 10px;
  border: 2px solid #0014ac;
  border-radius: 0 0 10px 10px;
}

.link-button-area {
  font-size: 20px;
  margin-top: 20px;
  text-align: center;
}

.link-button {
  display: inline-block;
  color: #ffffff;
  background-color: #0014ac;
  min-width: 250px;
  line-height: 25px;
  padding: 10px 0;
  border: 1px solid #0014ac;
  border-radius: 25px;
}

.link-button:hover {
  font-weight: bold;
}

/* ペナンのインター校一覧 */
.school-list-title {
  width: 780px;
  max-width: 90%;
  padding-left: 10px;
  padding-bottom: 5px;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 1px solid #0014ac;
  border-left: 5px solid #0014ac;
}

.school-list-title {
  font-size: 2.4rem;
}

.school-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 780px;
  max-width: 90%;
  margin: 40px auto 0 auto;
}

.school-list-tmb {
  display: block;
  width: 120px;
  border-radius: 12px;
  margin-bottom: 15px;
  overflow: hidden;
}

.school-list-tmb img {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16);
}

.school-list-tmb:hover img {
  transform: scale(1.1);
  transition-duration: 0.6s;
}

.school-list-text {
  width: 580px;
  margin-left: 25px;
}

.school-list-text h3 {
  font-size: 2.0rem;
}

.school-list-text h3 span {
  font-weight: normal;
  font-size: 1.6rem;
}

.school-list-text h4 {
  color: #0014ac;
  font-weight: normal;
  font-size: 1.4rem;
  margin-top: 7px;
}

.school-list-text p {
  font-size: 1.6rem;
  margin-top: 13px;
  line-height: 1.4;
}

.basicinfo-table {
  width: 780px;
  max-width: 90%;
  margin: 15px auto 30px auto;
  border-collapse: collapse;
}

.basicinfo-table th {
  background-color: #ececec;
  line-height: 1.3;
  font-size: 1.3rem;
  border-top: 1px solid #05173f;
  border-bottom: 1px solid #05173f;
  padding: 5px;
}

.basicinfo-table td {
  font-size: 1.4rem;
  line-height: 1.3;
  border-top: 1px solid #05173f;
  border-bottom: 1px solid #05173f;
  padding: 5px;
}

.col1 {
  width:120px;
}

.col2 {
  width:50px;
}

.col3 {
  width:auto;
}

.br-hidden {
  display: none;
}

@media (max-width: 768px) {

  html {
    font-size: 50%;
  }

  .title {
    font-size: 9px;
    height: 85px;
    padding-top: 5px;
  }

  .title-intro h2 {
    font-size: 1.8rem;
  }

  .school-map {
    width: 370px;
    margin-top: 30px;
  }

  .icon-dalat {
    width: 37px;
    position: absolute;
    top: 46px;
    left: 219px;
  }

  .icon-stonyhurst {
    width: 37px;
    position: absolute;
    top: 120px;
    left: 276px;
  }

  .icon-perita {
    width: 37px;
    position: absolute;
    top: 64px;
    left: 262px;
  }

  .icon-wesley {
    width: 37px;
    position: absolute;
    top: 164px;
    left: 290px;
  }

  .icon-fairview {
    width: 37px;
    position: absolute;
    top: 185px;
    left: 251px;
  }

  .icon-straits {
    width: 37px;
    position: absolute;
    top: 288px;
    left: 253px;
  }

  .icon-powiis2 {
    width: 37px;
    position: absolute;
    top: 241px;
    left: 20px;
  }

  .icon-powiis1 {
    width: 37px;
    position: absolute;
    top: 28px;
    left: 177px;
  }

  .icon-tenby {
    width: 37px;
    position: absolute;
    top: 28px;
    left: 123px;
  }

  .icon-uplands {
    width: 37px;
    position: absolute;
    top: 59px;
    left: 83px;
  }

  .icon-stchristopher {
    width: 37px;
    position: absolute;
    top: 145px;
    left: 148px;
  }

  .fact-penang h3 {
    font-size: 20px;
  }

  .fact-penang p {
    font-size: 16px;
  }

  .fact-penang {
    max-width: 400px;
  }

  .fact-penang h3 {
    font-size: 2.0rem;
  }

  .fact-penang p {
    font-size: 1.6rem;
    line-height: 14px;
    height: 14px;
  }

  .fact-penang span {
    padding-left: 55px;
  }

  .fact-penang-text1,
  .fact-penang-text2,
  .fact-penang-text3 {
    background-size: 50px;
  }

  .fact-details-text1,
  .fact-details-text2,
  .fact-details-text3 {
    font-size: 1.6rem;
  }

  .service-charge-header h3 {
    font-size: 2.0rem;
  }

  .service-charge h4 {
    font-size: 1.5rem;
  }

  .service-charge span {
    font-size: 1.8rem;
  }

  .check-icon {
    width: 40px;
    top: -20px;
    left: calc(50% - 155px);
  }

  /* ペナンのインター校一覧 */

  .school-list-title {
    font-size: 2.0rem;
  }

  .school-list {
    justify-content: center;
  }
  
  .school-list-tmb {
    width: 200px;
  }

  .school-list-text {
    margin-left: 0px;
  }

  .school-list-text h3 {
    font-size: 1.8rem;
  }

  .school-list-text h3 span {
    font-size: 1.4rem;
  }

  .school-list-text h4 {
    font-size: 1.3rem;
  }

  .school-list-text p {
    font-size: 1.5rem;
    margin-top: 12px;
  }

  .basicinfo-table th {
    font-size: 1.1rem;
  }

  .basicinfo-table td {
    font-size: 1.3rem;
  }

  .col1 {
    width:80px;
  }
  
  .col2 {
    width:35px;
  }
  
  .br-hidden {
    display: block;
  }

}