@charset "UTF-8";
@import url('style.css');

/* ベースレイアウト */


div#main-visual{
  position: relative;
  background-color: #e2e2e2;
  background-image: url(..//image/school/main-visual.jpg);
  background-size: contain;
  width:100%;
  height:auto;
  aspect-ratio: 1919 / 1279;
}

div#main-visual img.main-visual{
  width:100%;
  height:auto;
  aspect-ratio: 1919 / 1279;
}

ul.txt-main-visual{
  width:80.78vw;
  position: absolute;
  bottom:45%;
  left:0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  transition-delay: .65s;
}

ul.txt-main-visual.ready {
  opacity: 1;
}

ul.txt-main-visual li{
  width:fit-content;
  margin-bottom:34px;
  padding:4px 0;
  font-size:clamp(16px,1.562vw,20px);
  text-indent: 0.5em;
  letter-spacing: 0.2em;
  white-space: nowrap;
  background-color: rgba(255,255,255,0.8);
}

p.main-visual-caption {
  width:100%;
  padding:40px 0;
  font-size:1em;
  text-align: center;
  background-color: #e2e2e2;
}

main section#school-info{
  width:75vw;
  margin:50px auto 0;
  padding-bottom:0;
}

div.address-area{
  width:100%;
  margin:0;
  padding:0;
  font-size: 1em;
}

div.address-area div.address{
  width:100%;
  font-size: 1em;
  text-align: center;
}

div.address-area iframe{
  width:80%;
  max-width:900px;
  aspect-ratio: 80 / 51;
  margin:25px auto 0;
  display: block;
}

div.address-area p{
  width:100%;
  margin-top:40px;
  font-size:1em;
  text-align: center;
}

div.address-area p a{
  color:#000;
  text-decoration: underline;
}

div.address-area p a:hover{
  text-decoration: none;
}

div.tel-area,div.schedule-area,div.tuition-fee-area{
  width:100%;
  margin-top:120px;
  font-size: 1em;
}

section#school-info h2{
  /*width:395px;*/
  /*width:20.57vw;*/
  width:10em;
  margin:0 auto 0;
  font-size:2em;
  letter-spacing: 0.2em;
  line-height:2.5em;
  text-align: center;
  border:5px solid #c6c6c6;
}

ul.tel-list{
  width:fit-content;
  margin:50px auto 0;
  font-size:1em;
  display: flex;
  column-gap: 6.51vw;
}

ul.tel-list li{
  text-align: center;
  line-height:1.7em;
}

ul.tel-list li span{
  display: block;
}

ul.schedule-list{
  width:fit-content;
  margin:50px auto 0;
  font-size:1em;
}

ul.schedule-list li{
 margin-bottom:10px;
}

ul.schedule-list li:nth-last-of-type(1){
  text-align: center;
}

div.tuition-fee-area p{
  width:fit-content;
  margin:50px auto 0;
  font-size:1em;
  text-align: center;
  line-height:1.7em;
}

section#contact{
  margin:140px auto 0;
  padding:10vh;
  font-size:1.562vw;
  text-align: center;
  font-size: 1em;
}

a.contact-link{
  width:55vw;
  margin:40px auto 0;
  font-size:2em;
  color:#fff;
  text-align: center;
  line-height:2.6em;
  background-color: #9facbc;
  border:5px solid #c6c6c6;
  display:block;
  transition: 400ms ease;
}

a.contact-link:hover{
  background-color: #5a7896;
}

div.other-school{
  margin-top:125px;
}

div.other-school ul.other-school-list{
  width:55vw;
  margin:50px auto 0;
  display: flex;
  column-gap: 13.85vw;
  justify-content: center;
}

div.other-school ul.other-school-list li{
  width:37.4%;
}

a.other-school-link{
  width:100%;
  margin:0;
  font-size:2vw;
  color:#fff;
  text-align: center;
  line-height:2.6em;
  background-color: #ba9eab;
  border:5px solid #c6c6c6;
  display:block;
  transition: 400ms ease;
}

a.other-school-link:hover{
  background-color: #996d83;
}

div.instructor-name{
  margin-top:30px;
}



/* 調整用 */
@media screen and (max-width: 1240px) {

}
@media screen and (max-width: 900px) {

}


/* SP */

@media screen and (max-width: 750px) {
  div#main-visual {
    aspect-ratio: auto;
    background-size: cover;
  }

  ul.txt-main-visual {
    width: 100%;
    position: static;
    padding: 80px 1em;
  }

  ul.txt-main-visual li {
    white-space: unset;
    margin: 0 0 60px;
    padding: 1em;
  }
  ul.txt-main-visual li:last-child {
    white-space: unset;
    margin: 0;
  }

  p.main-visual-caption {
    font-size: 1em;
    text-align: justify;
    padding: 40px 1em;
  }

  main section#school-info {
    width: 100%;
    margin: 50px auto 0;
  }

  div.address-area div.address {
    font-size: 1em;
  }

  div.address-area iframe {
    width: 95%;
  }

  div.address-area p {
    font-size: 5vw;
  }

  section#school-info h2 {
    font-size: 5vw;
  }

  ul.tel-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: 1em;
  }

  ul.schedule-list {
    font-size: 1em;
  }

  div.tuition-fee-area p {
    font-size: 1em;
  }

  section#contact {
    font-size: 1em;
    width: 100%;
    padding: 10vh 1em;
  }

  a.contact-link {
    font-size: 2em;
    width: 80%;
  }

  div.other-school ul.other-school-list {
    width: 80%;
    flex-direction: column;
    gap: 40px;
  }

  div.other-school ul.other-school-list li {
    width: 100%;
  }

  a.other-school-link {
    font-size: 5vw;
  }

  div.instructor-name {
    margin-top: 5px;
  }
}