#key {
   width: auto;
   height: auto;
   position: relative;
   z-index: 2;
}

@media only screen and (max-width: 767px) {
   #key {
      margin: 0 4vw;
   }

   #key h1 {
      height: 190vw;
      position: absolute;
      top: 8vw;
      right: 4vw;
      color: #fff;
   }

   #key .photo {
      width: 100%;
      height: 198vw;
      background: url("../img/index/key_sp.jpg") no-repeat center top/cover;
      border-radius: 12px;
      position: absolute;
      top: 0;
      left: 0;
   }

   #key .crow {
      width: 40vw;
      margin: 0 auto;
      padding-top: 5.6vw;
   }

   #key .bnr {
      display: none;
   }

   #key h2 {
      width: 40vw;
      margin: 0 auto;
   }

   #key .logo {
      width: 69.6vw;
      margin: 0 auto;
      filter: drop-shadow(0 0 61px rgba(0, 0, 0, 0.31));
   }

   #key .box {
      padding: 16vw 6vw 0;
      position: relative;
   }

   #key .box [class*='col'] {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2vw;
      background: url("../img/shared/bg-pattern-02.jpg") repeat center top;
      height: 35.6vw;
   }

   #key .box [class*='col']:not(:last-child) {
      margin-bottom: 4vw;
   }

   #key .box .year {
      font-size: 4vw;
      letter-spacing: 0.14em;
      line-height: 1;
   }

   #key .box .units,
   #key .box .exp {
      font-size: 5.3vw;
      line-height: 10vw;
      letter-spacing: 0.14em;
   }

   #key .box .units .num,
   #key .box .exp .num {
      font-weight: 700;
      font-size: 10vw;
   }

   #key .box .units .udl,
   #key .box .exp .udl {
      border-bottom: 2px solid;
   }

   #key .box .col-1 h3 {
      display: flex;
      justify-content: center;
      font-weight: 500;
      font-size: 8vw;
      line-height: 10vw;
      letter-spacing: 0;
   }

   #key .box .col-1 h3>span {
      display: flex;
      font-size: 5.3vw;
   }

   #key .box .col-1 h3>span span {
      width: 6.4vw;
      border: 1px solid;
      box-sizing: border-box;
   }

   #key .box .col-1 h3>span span+span {
      border-left: 0;
   }

   #key .box .col-1 h3>strong {
      display: flex;
      font-weight: 700;
   }

   #key .box .col-1 h3>strong span {
      width: 9vw;
      background: url("../img/shared/bg-pattern-01.jpg") repeat center top;
      color: #fff;
   }

   #key .box .col-1 h3>strong span+span {
      margin-left: 1px;
   }

   #key .box .col-1 .in {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2vw;
   }

   #key .box .col-1 .icon {
      width: 18vw;
   }

   #key .box .col-2 h3 {
      display: flex;
      justify-content: center;
      font-weight: 700;
      font-size: 7.2vw;
      line-height: 10vw;
      letter-spacing: 0;
   }

   #key .box .col-2 h3 span {
      background: url("../img/shared/bg-pattern-01.jpg") repeat center top;
      color: #fff;
      padding: 0 1vw;
   }

   #key .box .col-2 h3 span+span {
      margin-left: 1px;
   }

   #key .box .col-2 .in {
      position: relative;
      margin-top: 2vw;
   }

   #key .box .col-2 .icon {
      width: 11.2vw;
      position: absolute;
      top: 2vw;
      left: 13.5vw;
   }

   #key .box .col-2 .exp .udl {
      margin-left: 15vw;
   }

   #key .box .col-3 .ttl {
      display: inline-block;
      font-weight: 500;
      font-size: 5.3vw;
      letter-spacing: 0.2em;
      line-height: 1;
      border-bottom: 2px solid;
   }

   #key .box .col-3 .in {
      display: flex;
      align-items: baseline;
      gap: 2vw;
      padding-top: 2vw;
   }

   #key .box .col-3 .icon {
      width: 12vw;
      align-self: center;
   }

   #key .box .col-3 h3 {
      display: flex;
      justify-content: center;
      font-weight: 700;
      font-size: 8vw;
      line-height: 10vw;
      letter-spacing: 0;
   }

   #key .box .col-3 h3 span {
      width: 10vw;
      background: url("../img/shared/bg-pattern-01.jpg") repeat center top;
      color: #fff;
   }

   #key .box .col-3 h3 span+span {
      margin-left: 1px;
   }

   #key .box .col-3 h4 {
      font-weight: 500;
      font-size: 6vw;
      line-height: 1;
      letter-spacing: 0.14em;
   }
}

@media only screen and (min-width: 768px) {
   #key {
      margin: 0 30px;
   }

   #key .photo {
      background: url("../img/index/key.jpg") no-repeat center top/cover;
      border-radius: 15px;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 132px;
      left: 0;
   }

   #key h1 {
      position: absolute;
      top: 0;
      bottom: 132px;
      left: 30px;
      color: #fff;
      text-align: center;
   }

   #key .crow {
      width: 250px;
      position: absolute;
      top: 30px;
      right: 30px;
   }

   #key .bnr {
      width: 203px;
      position: absolute;
      top: 212px;
      right: 55px;
   }

   #key .bnr img {
      filter: drop-shadow(0 0 9px rgba(0, 0, 0, 0.42));
   }

   #key h2 {
      width: 180px;
      margin: 0 auto;
      padding-top: 58px;
   }

   #key .logo {
      width: 420px;
      margin: -90px auto 0;
      position: relative;
   }

   #key .box {
      display: grid;
      grid-template-columns: repeat(3, 328px);
      justify-content: center;
      gap: 20px;
      padding-top: 100px;
      position: relative;
   }

   #key .box [class*='col'] {
      background: url("../img/shared/bg-pattern-02.jpg") repeat center top;
   }

   #key .box .year {
      font-size: 22px;
      letter-spacing: 0.14em;
   }

   #key .box .units,
   #key .box .exp {
      font-size: 30px;
      line-height: 55px;
      letter-spacing: 0.14em;
   }

   #key .box .units .num,
   #key .box .exp .num {
      font-weight: 700;
      font-size: 55px;
   }

   #key .box .units .udl,
   #key .box .exp .udl {
      border-bottom: 2px solid;
   }

   #key .box .col-1 {
      padding: 28px 0 36px;
   }

   #key .box .col-1 h3 {
      display: flex;
      justify-content: center;
      font-weight: 500;
      font-size: 43px;
      line-height: 48px;
      letter-spacing: 0;
      padding-top: 7px;
   }

   #key .box .col-1 h3>span {
      display: flex;
      font-size: 30px;
   }

   #key .box .col-1 h3>span span {
      width: 40px;
      border: 1px solid;
      box-sizing: border-box;
   }

   #key .box .col-1 h3>span span+span {
      border-left: 0;
   }

   #key .box .col-1 h3>strong {
      display: flex;
      font-weight: 700;
   }

   #key .box .col-1 h3>strong span {
      width: 55px;
      background: url("../img/shared/bg-pattern-01.jpg") repeat center top;
      color: #fff;
   }

   #key .box .col-1 h3>strong span+span {
      margin-left: 1px;
   }

   #key .box .col-1 .icon {
      padding-top: 22px;
   }

   #key .box .col-1 .units {
      padding-top: 7px;
   }

   #key .box .col-2 {
      padding: 48px 0 36px;
   }

   #key .box .col-2 h3 {
      display: flex;
      justify-content: center;
      font-weight: 700;
      font-size: 40px;
      line-height: 54px;
      letter-spacing: 0;
   }

   #key .box .col-2 h3 span {
      background: url("../img/shared/bg-pattern-01.jpg") repeat center top;
      color: #fff;
      width: 44px;
   }

   #key .box .col-2 h3 span+span {
      margin-left: 1px;
   }

   #key .box .col-2 .icon {
      padding-top: 20px;
   }

   #key .box .col-3 {
      padding: 38px 0 36px;
   }

   #key .box .col-3 .ttl {
      display: inline-block;
      font-weight: 500;
      font-size: 30px;
      letter-spacing: 0.2em;
      line-height: 30px;
      border-bottom: 2px solid;
   }

   #key .box .col-3 .icon {
      padding-top: 20px;
   }

   #key .box .col-3 h3 {
      display: flex;
      justify-content: center;
      font-weight: 700;
      font-size: 43px;
      line-height: 51px;
      letter-spacing: 0;
      padding-top: 18px;
   }

   #key .box .col-3 h3 span {
      width: 55px;
      background: url("../img/shared/bg-pattern-01.jpg") repeat center top;
      color: #fff;
   }

   #key .box .col-3 h3 span+span {
      margin-left: 1px;
   }

   #key .box .col-3 h4 {
      font-weight: 500;
      font-size: 35px;
      line-height: 35px;
      letter-spacing: 0.14em;
      padding-top: 7px;
   }
}

#sec1 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec1 {
      background: #e5e4e2;
   }

   #sec1:after {
      content: '';
      width: 100%;
      height: 130vw;
      background: url("../img/shared/bg-pattern-01.jpg") repeat center top;
      position: absolute;
      top: -110vw;
      left: 0;
      transform: skewY(-13deg);
   }

   #sec1 .wrap {
      z-index: 1;
      padding-top: 12vw;
      padding-bottom: 16vw;
   }

   #sec1 .photos {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec1 .photos .img-1 {
      width: 28.2vw;
      position: absolute;
      top: 40vw;
      left: 0;
   }

   #sec1 .photos .img-2 {
      width: 21.3vw;
      position: absolute;
      top: -4vw;
      right: 0;
   }

   #sec1 .photos .img-3 {
      width: 40.6vw;
      position: absolute;
      bottom: 50px;
      left: 0;
   }

   #sec1 .photos .img-4 {
      width: 28.3vw;
      position: absolute;
      bottom: 11.5vw;
      right: 0;
   }

   #sec1 .logo {
      width: 66.4vw;
      margin: 0 auto;
      padding-top: 6vw;
   }

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

   #sec1 .txt br {
      display: none;
   }
}

@media only screen and (min-width: 768px) {
   #sec1 {
      padding: 90px 0 133px;
   }

   #sec1:before {
      content: '';
      width: 100%;
      padding-top: 162%;
      background: url("../img/index/sec1-bg.webp") no-repeat center top/cover;
      position: absolute;
      top: -292px;
      left: 0;
   }

   #sec1:after {
      content: '';
      width: 100%;
      height: 485px;
      background: url("../img/shared/bg-pattern-01.jpg") repeat center top;
      position: absolute;
      top: -322px;
      left: 0;
      transform: skewY(-13deg);
   }

   #sec1 .wrap {
      z-index: 1;
   }

   #sec1 .photos {
      width: 100%;
      position: absolute;
      top: 0;
      bottom: -133px;
      left: 0;
   }

   #sec1 .photos .img-1 {
      width: 253px;
      position: absolute;
      top: 452px;
      left: -170px;
   }

   #sec1 .photos .img-2 {
      width: 170px;
      position: absolute;
      bottom: 150px;
      left: -100px;
   }

   #sec1 .photos .img-3 {
      width: 327px;
      position: absolute;
      top: 538px;
      right: -250px;
   }

   #sec1 .photos .img-4 {
      width: 253px;
      position: absolute;
      bottom: 10px;
      right: -120px;
   }

   #sec1 figure {
      width: 1100px;
      margin: 0 -50px;
      position: relative;
   }

   #sec1 figure:before {
      content: '';
      width: 1100px;
      height: 390px;
      background: url("../img/index/sec1-photo-1-shadow.png") no-repeat center top/cover;
      position: absolute;
      top: 100%;
      left: 0;
   }

   #sec1 figure img {
      position: relative;
      z-index: 1;
   }

   #sec1 h2 {
      margin-top: -207px;
      position: relative;
      z-index: 1;
   }

   #sec1 .logo {
      padding-top: 20px;
   }

   #sec1 .txt {
      padding-top: 70px;
   }
}

#sec2 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec2 .wrap {
      background: url("../img/index/sec2-bg-img_sp.jpg") no-repeat center top/cover;
      color: #fff;
      padding-top: 14vw;
      padding-bottom: 17.6vw;
   }

   #sec2 .wrap:before {
      content: '';
      border: 1px solid rgba(255, 255, 255, 0.61);
      position: absolute;
      top: 1vw;
      right: 1vw;
      bottom: 1vw;
      left: 1vw;
   }

   #sec2 h2 {
      font-weight: 500;
      letter-spacing: 0.2em;
      font-size: 5.6vw;
      text-align: center;
      line-height: 1.6;
   }

   #sec2 h2 strong {
      font-weight: 700;
      font-size: 8vw;
   }

   #sec2 h2 strong b {
      font-weight: 700;
      font-size: 9vw;
   }

   #sec2 h2 span {
      font-size: 9vw;
      letter-spacing: 0.16em;
      line-height: 1;
      border-bottom: 1px solid;
   }

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

   #sec2 .txt br {
      display: none;
   }

   #sec2 .banner {
      margin-top: 6.8vw;
   }

   #sec2 .banner a {
      display: grid;
      overflow: hidden;
      border-radius: 20px;
      box-shadow: 0 0 9px rgba(0, 0, 0, 0.42);
      text-align: center;
   }

   #sec2 .banner a>* {
      grid-area: 1/1;
      margin: auto;
   }

   #sec2 .banner .text {
      font-weight: 500;
      font-size: 5.6vw;
      letter-spacing: 0.1em;
      line-height: 1.8;
      position: relative;
      top: 5vw;
      padding-top: 1vw;
   }

   #sec2 .banner .text:before {
      content: '';
      width: 9vw;
      height: 5vw;
      background: url("../img/index/sec2-icon.png") no-repeat center top/cover;
      position: absolute;
      top: -8vw;
      left: 50%;
      transform: translateX(-50%);
   }

   #sec2 .banner .text:after {
      content: '';
      width: 36vw;
      height: 0;
      border-top: 1px solid rgba(255, 255, 255, 0.38);
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
   }

   #sec2 .banner .text strong {
      background-color: #fff;
      color: #253641;
      font-weight: 700;
      font-size: 7.3vw;
      letter-spacing: 0.16em;
      margin: 0 5px;
      padding: 0 5px;
   }

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

   #sec2 .button a {
      border: 1px solid #fff;
      background: transparent;
   }
}

@media only screen and (min-width: 768px) {
   #sec2 {
      display: flex;
      justify-content: center;
   }

   #sec2 .wrap {
      background: url("../img/index/sec2-bg-img.jpg") no-repeat center top/cover;
      width: 1274px;
      color: #fff;
      padding-top: 114px;
      padding-bottom: 114px;
   }

   #sec2 .wrap:before {
      content: '';
      border: 1px solid rgba(255, 255, 255, 0.61);
      position: absolute;
      top: 10px;
      right: 10px;
      bottom: 10px;
      left: 10px;
   }

   #sec2 .box {
      display: flex;
      justify-content: center;
      gap: 40px;
      padding-left: 40px;
   }

   #sec2 h2 {
      font-weight: 500;
      letter-spacing: 0.2em;
      font-size: 30px;
      text-align: center;
      line-height: 70px;
      padding-top: 7px;
   }

   #sec2 h2 strong {
      font-weight: 700;
      font-size: 43px;
   }

   #sec2 h2 strong b {
      font-weight: 700;
      font-size: 56px;
   }

   #sec2 h2 span {
      font-size: 60px;
      letter-spacing: 0.16em;
      line-height: 60px;
      border-bottom: 1px solid;
   }

   #sec2 .txt {
      width: 621px;
   }

   #sec2 .banner {
      max-width: 850px;
      margin: 0 auto;
      padding-top: 70px;
   }

   #sec2 .banner a {
      display: grid;
      overflow: hidden;
      border-radius: 20px;
      box-shadow: 0 0 9px rgba(0, 0, 0, 0.42);
      text-align: center;
   }

   #sec2 .banner a>* {
      grid-area: 1/1;
      margin: auto;
   }

   #sec2 .banner img {
      transition: 0.5s all ease-in-out;
   }

   #sec2 .banner .text {
      font-weight: 500;
      font-size: 28px;
      letter-spacing: 0.1em;
      line-height: 47px;
      position: relative;
      padding-left: 20px;
      left: 30px;
   }

   #sec2 .banner .text:before {
      content: '';
      width: 47px;
      height: 26px;
      background: url("../img/index/sec2-icon.png") no-repeat center top/cover;
      position: absolute;
      top: 16px;
      left: -65px;
   }

   #sec2 .banner .text:after {
      content: '';
      width: 0;
      height: 28px;
      border-left: 1px solid rgba(255, 255, 255, 0.38);
      position: absolute;
      top: calc(50% - 14px);
      left: 0;
   }

   #sec2 .banner .text strong {
      background-color: #fff;
      color: #253641;
      font-weight: 700;
      font-size: 37px;
      letter-spacing: 0.16em;
      margin: 0 5px;
      padding: 0 5px;
   }

   #sec2 .banner a:hover {
      opacity: 1;
   }

   #sec2 .banner a:hover img {
      transform: scale(1.05);
   }

   #sec2 .button {
      padding-top: 43px;
   }

   #sec2 .button a {
      background: transparent;
      width: 618px;
      height: 92px;
      border: 1px solid #fff;
      font-size: 24px;
   }

   #sec2 .button a:after {
      width: 22px;
      height: 22px;
      right: 50px;
   }
}

#sec3 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec3 {
      background: url("../img/index/sec3-deco_sp.png") no-repeat center bottom/100% auto;
      padding: 16vw 0 20vw;
   }

   #sec3 h2 {
      display: flex;
      font-weight: 500;
      font-size: 8vw;
      letter-spacing: 0;
      line-height: 1.5;
      padding-bottom: 8vw;
   }

   #sec3 h2 strong {
      display: inline-flex;
      gap: 1px;
      font-weight: 700;
      text-align: center;
      padding-right: 1vw;
   }

   #sec3 h2 strong span {
      background: url("../img/shared/bg-pattern-01.jpg") repeat center top;
      color: #fff;
      width: 10vw;
   }

   #sec3 h2 .sub {
      font-weight: 400;
      font-size: 3vw;
      font-style: italic;
      letter-spacing: 0.1em;
      line-height: 1;
      border-bottom: 2px solid #253641;
      flex: 1 0 0;
      align-self: flex-end;
      text-align: right;
      color: rgba(37, 54, 54, 0.26);
      background: url("../img/index/sec3-deco.png") no-repeat top right/5vw auto;
      padding: 0 6vw 2vw 0;
   }

   #sec3 .button {
      padding-top: 10vw;
   }

   #sec3 .button a {
      border: 1px solid #fff;
   }

   #sec3 .box .slick-track {
      display: flex;
   }

   #sec3 .box .slick-track:before,
   #sec3 .box .slick-track:after {
      display: none;
   }

   #sec3 .box .col {
      display: flex;
      flex-direction: column;
      margin-right: 2.5vw;
      float: none;
      height: auto;
   }

   #sec3 .box figure {
      width: 100%;
      padding-top: 85.9%;
      border-radius: 10px 10px 0 0;
      overflow: hidden;
      position: relative;
   }

   #sec3 .box figure img {
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec3 .box figure figcaption {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 14vw;
      font-size: 4.4vw;
      letter-spacing: 0.06em;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      color: #fff;
   }

   #sec3 .box figure figcaption:before {
      content: '';
      border-top: 1px solid rgba(255, 255, 255, 0.6);
      border-bottom: 1px solid rgba(255, 255, 255, 0.6);
      position: absolute;
      top: 3px;
      right: 0;
      bottom: 3px;
      left: 0;
   }

   #sec3 .box figure figcaption.sold {
      background-color: rgba(170, 32, 32, 0.7);
   }

   #sec3 .box figure figcaption.under-negotiation {
      background-color: rgba(19, 71, 101, 0.7);
   }

   #sec3 .box .text {
      background: url("../img/shared/bg-pattern-02.jpg") repeat center top;
      text-align: center;
      padding: 8vw 5vw;
      flex: 1 0 0;
   }

   #sec3 .box h3 {
      font-weight: 700;
      font-size: 4vw;
      letter-spacing: 0.06em;
      line-height: 1;
   }

   #sec3 .box .price {
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.1em;
      line-height: 1;
      padding-top: 2vw;
   }

   #sec3 .box .price .num {
      font-size: 6vw;
   }

   #sec3 .box .year {
      display: grid;
      grid-template-columns: 45px 1fr;
      border: 1px solid;
      font-weight: 700;
      letter-spacing: 0.1em;
      line-height: 20px;
      margin-top: 4vw;
   }

   #sec3 .box .year span {
      background-color: #134765;
      color: #fff;
      font-size: 13px;
   }

   #sec3 .box .button {
      padding-top: 5vw;
   }

   #sec3 .box .button a {
      width: 44vw;
      height: 12.8vw;
      font-size: 4vw;
      border: 0;
   }

   #sec3 .box .button a:after {
      width: 3.3vw;
      height: 3.3vw;
      right: 4vw;
   }

   #sec3 .slider-nav {
      padding-top: 8vw;
      position: absolute;
      top: 43%;
      width: 100%;
      justify-content: space-between;
      left: 0;
      opacity: .8;
   }
}

footer .f_aki_banner {
   margin: 0 0 9vw 0;
}

footer .f_aki_banner img {
   width: 75%;
}

@media only screen and (min-width: 768px) {
   footer .f_aki_banner {
      margin: -20px 0 40px 0;
   }

   footer .f_aki_banner img {
      width: 29%;
   }
}

@media only screen and (min-width: 768px) {
   #sec3 {
      background: url("../img/index/sec3-deco-1.png") no-repeat center bottom/100% auto;
      padding: 120px 0 265px;
   }

   #sec3 h2 {
      display: flex;
      font-weight: 500;
      font-size: 50px;
      line-height: 76px;
      letter-spacing: 0.14em;
      padding-left: 10px;
   }

   #sec3 h2 strong {
      display: inline-flex;
      gap: 1px;
      font-weight: 700;
      font-size: 62px;
      letter-spacing: 0;
      text-align: center;
      padding-right: 10px;
   }

   #sec3 h2 strong span {
      background: url("../img/shared/bg-pattern-01.jpg") repeat center top;
      color: #fff;
      width: 75px;
   }

   #sec3 h2 .sub {
      font-weight: 400;
      font-size: 20px;
      font-style: italic;
      letter-spacing: 0.1em;
      line-height: 30px;
      border-bottom: 2px solid #253641;
      flex: 1 0 0;
      align-self: flex-end;
      text-align: right;
      color: rgba(37, 54, 54, 0.26);
      background: url("../img/index/sec3-deco.png") no-repeat top right/47px auto;
      padding: 0 61px 12px 0;
   }

   #sec3 .button {
      padding-top: 55px;
   }

   #sec3 .button a {
      border: 1px solid #fff;
   }

   #sec3 .box {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      padding-top: 66px;
   }

   #sec3 .box figure {
      width: 100%;
      height: 208px;
      border-radius: 10px 10px 0 0;
      overflow: hidden;
      position: relative;
   }

   #sec3 .box figure img {
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec3 .box figure figcaption {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 59px;
      font-size: 19px;
      letter-spacing: 0.06em;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      color: #fff;
   }

   #sec3 .box figure figcaption:before {
      content: '';
      border-top: 1px solid rgba(255, 255, 255, 0.6);
      border-bottom: 1px solid rgba(255, 255, 255, 0.6);
      position: absolute;
      top: 3px;
      right: 0;
      bottom: 3px;
      left: 0;
   }

   #sec3 .box figure figcaption.sold {
      background-color: rgba(170, 32, 32, 0.7);
   }

   #sec3 .box figure figcaption.under-negotiation {
      background-color: rgba(19, 71, 101, 0.7);
   }

   #sec3 .box .text {
      background: url("../img/shared/bg-pattern-02.jpg") repeat center top;
      text-align: center;
      padding: 28px 20px 38px;
   }

   #sec3 .box h3 {
      font-weight: 700;
      letter-spacing: 0.06em;
      line-height: 26px;
   }

   #sec3 .box .price {
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.1em;
   }

   #sec3 .box .price .num {
      font-size: 26px;
   }

   #sec3 .box .year {
      display: grid;
      grid-template-columns: 45px 1fr;
      border: 1px solid;
      font-weight: 700;
      letter-spacing: 0.1em;
      line-height: 24px;
      margin-top: 10px;
   }

   #sec3 .box .year span {
      background-color: #134765;
      color: #fff;
      font-size: 15px;
   }

   #sec3 .box .button {
      padding-top: 27px;
   }

   #sec3 .box .button a {
      width: 100%;
      max-width: 186px;
      height: 40px;
      font-size: 16px;
      border: 0;
   }

   #sec3 .box .button a:after {
      width: 15px;
      height: 15px;
      right: 13px;
   }
}

#sec4 {
   position: relative;
}

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

   #sec4:before {
      content: '';
      width: 100%;
      height: 100%;
      background: url("../img/shared/bg-pattern-02.jpg") repeat center top;
      position: absolute;
      top: 0;
      right: 0;
      opacity: 0.5;
   }

   #sec4:after {
      content: '';
      width: 100%;
      height: 36vw;
      background: url("../img/index/sec4-bg-img.jpg") no-repeat center top/cover;
      position: absolute;
      top: 0;
      right: 0;
   }

   #sec4 .wrap {
      z-index: 1;
   }

   #sec4 h2 {
      font-weight: 500;
      font-size: 4.8vw;
      line-height: 1.5;
      color: #fff;
      padding: 4vw 0;
   }

   #sec4 h2 .en {
      font-weight: 400;
      font-style: italic;
      font-size: 12.8vw;
   }

   #sec4 h2 .ja {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2vw;
   }

   #sec4 h2 .ja:before,
   #sec4 h2 .ja:after {
      content: '';
      width: 4vw;
      border-top: 1px solid rgba(255, 255, 255, 0.55);
   }

   #sec4 .box {
      padding-top: 14vw;
   }

   #sec4 .box .item {
      background: url("../img/shared/bg-pattern-02.jpg") repeat center top;
      border-radius: 20px;
      padding: 7vw 4vw;
      position: relative;
   }

   #sec4 .box .item:not(:last-child) {
      margin-bottom: 6vw;
   }

   #sec4 .box figure {
      width: 26.4vw;
      height: 26.4vw;
      position: absolute;
      top: 7vw;
      left: 9vw;
   }

   #sec4 .box figure img {
      width: 100%;
      max-width: inherit;
      height: 100%;
      /* border-radius: 50%; */
      object-fit: cover;
   }

   #sec4 .box h3 {
      display: flex;
      align-items: center;
      height: 26.4vw;
      font-weight: 700;
      font-size: 4.1vw;
      line-height: 1.5;
      letter-spacing: 0.06em;
      padding-left: 36vw;
   }

   #sec4 .box dl {
      border-top: 1px solid rgba(37, 54, 65, 0.5);
      margin-top: 4vw;
      padding-top: 4vw;
   }

   #sec4 .box dl dt br {
      display: none;
   }

   #sec4 .box dl dd {
      display: none;
   }

   #sec4 .button {
      padding-top: 10vw;
   }
}

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

   #sec4:before {
      content: '';
      width: calc(50% + 595px);
      height: 100%;
      background: url("../img/shared/bg-pattern-02.jpg") repeat center top;
      position: absolute;
      top: 0;
      right: 0;
      opacity: 0.5;
   }

   #sec4:after {
      content: '';
      width: calc(50% + 595px);
      height: 293px;
      background: url("../img/index/sec4-bg-img.jpg") no-repeat center top/cover;
      position: absolute;
      top: -154px;
      right: 0;
   }

   #sec4 .wrap {
      z-index: 1;
   }

   #sec4 h2 {
      color: #fff;
      position: relative;
      top: -68px;
      padding-bottom: 110px;
   }

   #sec4 h2 span {
      display: flex;
      justify-content: center;
   }

   #sec4 h2 .en {
      font-weight: 400;
      font-style: italic;
      font-size: 80px;
      letter-spacing: 0.1em;
      line-height: 80px;
   }

   #sec4 h2 .ja {
      align-items: center;
      gap: 10px;
      font-weight: 500;
      font-size: 25px;
      line-height: 45px;
      letter-spacing: 0.14em;
      padding-top: 3px;
   }

   #sec4 h2 .ja:before,
   #sec4 h2 .ja:after {
      content: '';
      width: 22px;
      border-top: 1px solid rgba(255, 255, 255, 0.55);
   }

   #sec4 .box {
      padding-left: 17px;
   }

   #sec4 .box .item {
      display: grid;
      grid-template-columns: 174px 1fr;
      align-items: center;
      gap: 60px;
   }

   #sec4 .box .item:not(:last-child) {
      margin-bottom: 26px;
   }

   #sec4 .box figure {
      width: 174px;
      height: 174px;
   }

   #sec4 .box figure img {
      width: 100%;
      max-width: inherit;
      height: 100%;
      /* border-radius: 50%; */
      object-fit: cover;
   }

   #sec4 .box .text {
      background: url("../img/shared/bg-pattern-02.jpg") repeat center top;
      border-radius: 10px;
      padding: 29px 25px 23px 35px;
      box-sizing: border-box;
      position: relative;
   }

   #sec4 .box .text:before {
      content: '';
      width: 33px;
      height: 20px;
      background: url("../img/index/sec4-arrow.png") no-repeat center top/cover;
      position: absolute;
      top: 50%;
      right: 100%;
      transform: translateY(-50%);
   }

   #sec4 .box .text h3 {
      font-weight: 700;
      font-size: 18px;
      letter-spacing: 0.06em;
      border-bottom: 1px solid rgba(37, 54, 65, 0.5);
      padding-bottom: 11px;
   }

   #sec4 .box .text dl {
      /* display: grid; */
      grid-template-columns: 1fr 104px;
      gap: 20px;
      line-height: 30px;
      padding-top: 10px;
   }

   #sec4 .button {
      padding-top: 50px;
   }
}

#sec5 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec5 {
      background: url("../img/index/sec5-deco.png") no-repeat bottom right/40% auto;
      padding: 15vw 0;
   }

   #sec5 h2 {
      font-weight: 500;
      font-size: 8vw;
      line-height: 2;
      letter-spacing: 0.1em;
      text-align: center;
   }

   #sec5 .list {
      padding-top: 10vw;
   }

   #sec5 .list li {
      display: grid;
      grid-template-columns: 80px 1fr;
      gap: 10px;
      padding-bottom: 15px;
      position: relative;
      border-bottom: 1px solid rgba(37, 54, 65, 0.2);
   }

   #sec5 .list li+li {
      padding-top: 15px;
   }

   #sec5 .list li a {
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      overflow: hidden;
      position: relative;
   }

   #sec5 .button {
      padding-top: 10vw;
   }

   #sec5 .button a {
      border: 1px solid #fff;
   }
}

@media only screen and (min-width: 768px) {
   #sec5 {
      background: url("../img/index/sec5-deco.png") no-repeat bottom right/22.4% auto;
      padding: 80px 0 75px;
   }

   #sec5 .wrap {
      display: grid;
      grid-template-columns: 227px 1fr;
      gap: 30px;
   }

   #sec5 h2 {
      font-weight: 500;
      font-size: 35px;
      letter-spacing: 0.1em;
      line-height: 70px;
      text-align: center;
      padding-top: 20px;
   }

   #sec5 .list {
      padding-right: 15%;
   }

   #sec5 .list li {
      display: grid;
      grid-template-columns: 90px 1fr;
      gap: 10px;
      padding-bottom: 13px;
      position: relative;
   }

   #sec5 .list li:before {
      content: '';
      width: 10000px;
      height: 0;
      border-bottom: 1px solid rgba(37, 54, 65, 0.2);
      position: absolute;
      bottom: 0;
      left: 0;
   }

   #sec5 .list li+li {
      padding-top: 13px;
   }

   #sec5 .list li a {
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      display: -webkit-box;
      overflow: hidden;
      position: relative;
      padding-right: 50px;
   }

   #sec5 .list li a:after {
      content: '';
      width: 19px;
      height: 19px;
      background: url("../img/index/news-arrow.png") no-repeat center top/cover;
      position: absolute;
      top: 10px;
      right: 10px;
   }

   #sec5 .list li a:hover {
      text-decoration: underline;
   }

   #sec5 .button {
      position: absolute;
      top: 95px;
      left: 17px;
   }

   #sec5 .button a {
      width: 186px;
      height: 40px;
      font-size: 16px;
   }

   #sec5 .button a:after {
      width: 15px;
      height: 15px;
      right: 13px;
   }
}

@media only screen and (min-width: 1500px) {
   #sec5 {
      background-size: inherit;
   }

   #sec5 .list {
      padding-right: 0;
   }
}