#key {
   background: url("../img/about/key.jpg") no-repeat center right -30vw / cover;
}
@media only screen and (min-width: 768px) {
   #key {
      background-position: center center;
   }
}

#lead {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #lead {
      padding: 20vw 0;
   }

   #lead h2 {
      font-size: 5.5vw;
      padding-top: 10vw;
   }

   #lead .txt {
      padding-top: 6vw;
   }
}

@media only screen and (min-width: 768px) {
   #lead {
      padding: 180px 0 263px;
   }

   #lead .wrap {
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
   }

   #lead h2 {
      width: 120px;
      height: 450px;
      padding: 143px 17px 0 0;
      order: 3;
   }

   #lead .txt {
      width: 288px;
      height: 590px;
      padding: 213px 57px 0 0;
      order: 2;
   }

   #lead figure {
      width: 627px;
      order: 1;
      flex: 1 0 0;
      position: relative;
      left: -27px;
   }
}

#course {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #course {
      padding-bottom: 12vw;
   }

   #course h2 {
      width: 39.6vw;
      height: 70vw;
      line-height: 2;
      margin: 0 auto;
   }

   #course .box-1 figure {
      height: 60vw;
      padding-top: 6vw;
   }

   #course .box-1 .txt {
      padding-top: 6vw;
   }

   #course .box-2 {
      padding-top: 16vw;
   }

   #course .box-2 figure {
      height: 60vw;
   }

   #course .box-2 .txt {
      padding-top: 6vw;
   }

   #course .box-3 {
      padding-top: 16vw;
   }

   #course .box-3 h3 {
      width: 50vw;
      height: 50vw;
      line-height: 2.5;
      margin: 0 auto;
   }

   #course .box-3 h3 span {
      display: inline-block;
      border: 1px solid #ababab;
      line-height: 1.5;
      padding: 4vw 0 2vw;
   }

   #course .box-3 .txt {
      padding-top: 6vw;
   }

   #course .box-3 figure {
      padding-top: 6vw;
   }

   #course .button {
      padding-top: 12vw;
   }
}

@media only screen and (min-width: 768px) {
   #course {
      padding-bottom: 240px;
   }

   #course h2 {
      width: 180px;
      height: 220px;
      margin: 0 auto;
      padding-bottom: 196px;
   }

   #course .box-1 {
      position: relative;
      padding-bottom: 340px;
   }

   #course .box-1 .photo-1 {
      width: 601px;
      margin-left: -170px;
   }

   #course .box-1 .photo-2 {
      width: 581px;
      position: absolute;
      top: 250px;
      right: -140px;
   }

   #course .box-1 .txt {
      width: 420px;
      padding: 240px 0 0 25px;
   }

   #course .box-2 {
      position: relative;
      padding-bottom: 393px;
   }

   #course .box-2 .txt {
      width: 370px;
      margin-left: auto;
      padding-top: 173px;
   }

   #course .box-2 figure {
      width: 652px;
      position: absolute;
      top: 0;
      left: -100px;
   }

   #course .box-3 {
      position: relative;
   }

   #course .box-3 h3 {
      width: 180px;
      height: 180px;
      margin: 0 auto;
   }

   #course .box-3 h3 span {
      display: inline-block;
      border: 1px solid #ababab;
      box-sizing: border-box;
      line-height: 42px;
      position: relative;
      left: -3px;
      padding: 10px 0 3px;
   }

   #course .box-3 .photo {
      width: 700px;
      position: absolute;
      top: 370px;
      left: -180px;
   }

   #course .box-3 .photo figure+figure {
      margin-top: 3px;
   }

   #course .box-3 .txt {
      width: 435px;
      margin-left: auto;
      padding-top: 813px;
   }

   #course .button {
      padding-top: 293px;
   }
}

@media only screen and (min-width: 1241px) {
   #course .box-1 .photo-1 {
      margin-left: -70px;
   }

   #course .box-1 .photo-2 {
      right: -40px;
   }

   #course .box-1 .txt {
      padding-left: 125px;
   }

   #course .box-2 figure {
      left: 4px;
   }

   #course .box-2 .txt {
      padding-right: 45px;
   }

   #course .box-3 .photo {
      left: -78px;
   }

   #course .box-3 .txt {
      padding-right: 0;
   }
}

#owner {
   background-color: #efefe7;
   position: relative;
}

@media only screen and (max-width: 767px) {
   #owner {
      padding: 20vw 0;
   }

   #owner .col {
      padding-top: 8vw;
   }

   #owner h2 {
      font-weight: 400;
      font-size: 6.6vw;
      letter-spacing: 0.3em;
      line-height: 2;
   }

   #owner h2 small {
      font-size: 4vw;
      letter-spacing: 0.2em;
   }

   #owner h2 span {
      display: inline-block;
      vertical-align: middle;
      font-weight: 500;
      font-size: 3.2vw;
      letter-spacing: 0.1em;
      padding-left: 3vw;
   }

   #owner .txt {
      padding-top: 6vw;
   }

   #owner .txt p+p {
      padding-top: 6vw;
   }
}

@media only screen and (min-width: 768px) {
   #owner {
      padding: 136px 0 185px;
   }

   #owner figure {
      width: 538px;
      position: absolute;
      top: 0;
      right: 0;
   }

   #owner .col {
      padding: 53px 0 0;
   }

   #owner h2 {
      font-weight: 400;
      font-size: 24px;
      letter-spacing: 0.3em;
      line-height: 45px;
   }

   #owner h2 small {
      font-size: 16px;
      letter-spacing: 0.2em;
   }

   #owner h2 span {
      display: inline-block;
      vertical-align: middle;
      font-weight: 500;
      font-size: 12px;
      letter-spacing: 0.1em;
      padding-left: 15px;
   }

   #owner .txt {
      width: 400px;
      padding-top: 30px;
   }

   #owner .txt p+p {
      padding-top: 36px;
   }
}

@media only screen and (min-width: 1241px) {
   #owner figure {
      right: 10px;
   }
}

#floor {
   position: relative;
}

#floor .photos {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
}

@media only screen and (max-width: 767px) {
   #floor {
      padding: 20vw 0 0;
   }

   #floor h2 {
      width: 12vw;
      height: 30vw;
      margin: 0 auto;
   }

   #floor .wrap>figure {
      margin: 0 -8.6vw;
   }

   #floor .box {
      padding-top: 16vw;
   }

   #floor .box .txt {
      padding-top: 8vw;
   }

   #floor .box .button {
      padding-top: 8vw;
   }

   #floor .photos {
      margin: 0 -8.6vw;
      padding-top: 16vw;
   }
}

@media only screen and (min-width: 768px) {
   #floor {
      padding: 172px 0 306px;
   }

   #floor h2 {
      width: 60px;
      height: 202px;
      margin: 0 auto;
   }

   #floor .box {
      position: relative;
      margin-top: 160px;
      padding-bottom: 300px;
   }

   #floor .box figure {
      width: 726px;
      position: absolute;
      top: 0;
      left: -250px;
   }

   #floor .box .col {
      width: 460px;
      margin-left: auto;
      padding: 63px 30px 20px 0;
   }

   #floor .box .button {
      padding-top: 58px;
   }
}

@media only screen and (min-width: 1241px) {
   #floor .box figure {
      left: -100px;
   }
}