/*=======================
overwrite
=========================*/

.bread .inner {
  width: 98% !important;
  max-width: 1600px;
  /* border: #f00 thin solid; */
}


.mw-1200 {
  max-width: 1200px;
}







/*=======================
font
=========================*/


.zen-old-mincho-regular {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

.zen-old-mincho-medium {
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-style: normal;
}

.zen-old-mincho-semibold {
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-style: normal;
}

.zen-old-mincho-bold {
  font-family: "Zen Old Mincho", serif;
  font-weight: 700;
  font-style: normal;
}

.zen-old-mincho-black {
  font-family: "Zen Old Mincho", serif;
  font-weight: 900;
  font-style: normal;
}



/*=======================
color
=========================*/

.pink {
  color: #e73656;
}

.gray-666 {
  color: #666;
}

.gray-555 {
  color: #555;
}

.gray-333 {
  color: #333;
}

.brown {
  color: #692c07;
}



.blue_1 {
  color: #4693bd;
}


/* background */


.bg-666 {
  background-color: #666;
}


.bg-pink {
  background-color: #e73656;
}

.bg-pink2 {
  background-color: #ffe8ec;
}

.bg-gold {
  background-color: #a08c6d;
}


/* border */

.border-tb-pink {
  border-top: #e73656 thin solid;
  border-bottom: #e73656 thin solid;
}

.border-b-pink {
  border-bottom: #e73656 thin solid;
}


.border-pink {
  border: #e73656 thin solid;
}

.border-b-brown {
  border-bottom: #692c07 thin solid;
}

.border-b-blue {
  border-bottom: #79afcc thin solid;
}

/*=======================
layout
=========================*/

.all {
  background: #cee8e3;
  background: #bfd4e2 url(../img/bg-mobile.jpg);
  /* background-attachment: fixed; */
  background-size: contain;
}


/* .bg-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #cee8e3;
  background: #bfd4e2 url(../img/bg-mobile.jpg);
  background-attachment: fixed;
  background-size: contain;
  z-index: -1;
} */

.lv-02 {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}


#title {
  position: relative;
  /* border: #f00 thin solid; */
}

.teacher_mv {
  width: 70%;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  /* border: #f00 thin solid; */
}

.title-logo.mob,
.teacher-mob,
.lead_mob {
  display: block;
}

.title-logo.pc,
.teacher-pc,
#lead_pc {
  display: none;
}

#title .lead.mob {
  display: block;
}


main h3 {
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  text-align: center;
  padding: 10px 0;
  color: #fff;
  background: rgba(9, 89, 129, 0.5);
  background: linear-gradient(to right, rgba(0, 90, 137, 0) 5%, rgba(0, 90, 137, 0.6) 40%, rgba(0, 90, 137, 0.6) 60%, rgba(0, 90, 137, 0) 95%);
}

main h3.small {
  font-size: 24px;
}

#outline {
  max-width: 1200px;
}

.mapbox iframe {
  height: 400px;
}


#fairy_pc {
  display: none;
}

/* 
@media screen and (min-width:640px) and (max-width:900px) {
  .all {
    background: #cee8e3;
    background: #bfd4e2 url(../img/bg-mobile.jpg);
    background-attachment: fixed;
    background-size: cover;
  }
} */



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


  .all {
    background: #cee8e3;
    background: #bfd4e2 url(../img/bg-pc.jpg) repeat-y;
    /* background-attachment: fixed; */
    background-size: contain;
  }


  /* .all {
    background: none;
  } */


  .bread {
    background-color: #fff;
  }

  /* .bg-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #cee8e3;
    background: #bfd4e2 url(../img/bg-pc.jpg);
    background-attachment: fixed;
    background-size: cover;
    z-index: -1;
  } */

  #title {
    width: 83.3%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
  }

  .title-pc-flex {
    display: flex;
    /* justify-content: center; */
    justify-content: flex-start;
    align-items: center;
  }

  #title h1 {
    /* width: 45.2%;
    max-width: 721px; */
    width: 55.2%;
    max-width: 883px;
    /* border: #f00 thin solid; */
  }

  #title figure.teacher_mv {
    width: 31.25%;
    max-width: 500px;
    margin-left: 2.5%;
    margin-right: 0;
    /* border: #f00 thin solid; */
  }

  .title-logo.pc,
  .teacher-pc {
    display: block;
  }

  #lead_pc {
    display: block;
  }

  #lead_mob,
  .teacher-mob {
    display: none;
  }

  .title-logo.mob {
    display: none;
  }


  .title-pc-flex #fairy_pc {
    width: 31.25%;
    max-width: 400px;
    position: absolute;
    bottom: 8%;
    left: 0;
    z-index: 2;
    display: block;
  }



  main h3 {
    font-size: 28px;
    padding: 10px 0;
  }



  .mapbox iframe {
    aspect-ratio: 16 / 9;
    display: block;
    height: auto;
    width: 100%;
  }


}