/* -- -- */
@media only screen and (max-width: 767px) {
   #key {
      height: auto;
   }

   #key figure {
      padding: 0 4vw 6.4vw;
   }

   #key .slider-fade {
      width: 53.33vw;
      margin: 0 auto;
   }

   #key .slider-fade .slick-list {
      overflow: visible;
      margin: 0 -1vw;
   }

   #key .slider-fade .slick-slide {
      height: 62.67vw;
      margin: 0 1vw;
   }

   #key .slide-item1 {
      background: url("../img/index/key-left-img-1.jpg") no-repeat center top/cover;
   }

   #key .slide-item2 {
      background: url("../img/index/key-left-img-2.jpg") no-repeat center top/cover;
   }

   #key .slide-item3 {
      background: url("../img/index/key-left-img-3.jpg") no-repeat center top/cover;
   }
}

@media only screen and (min-width: 768px) {
   header {
      padding-left: 0;
   }

   #menu-toggle {
      gap: 113px 0;
      padding-bottom: 0;
      padding-left: calc(50% - 187px);
   }

   #menu-toggle .nav-logo {
      padding-top: 15px;
      order: 1;
   }

   #menu-toggle .nav {
      width: calc(100% - 252px);
      order: 2;
      gap: 20px;
   }

   #menu-toggle .tel {
      position: absolute;
      top: 80px;
      right: 0;
   }

   #menu-toggle .btn-store {
      flex: inherit;
      order: 4;
   }

   #menu-toggle .sns-icon {
      order: 3;
      flex: 1 0 0;
      align-self: flex-end;
   }

   #key {
      height: auto;
      padding-top: 20px;
      position: static;
   }

   #key .slider-fade {
      width: calc(50% - 230px);
      height: calc(100% - 47px);
      position: absolute;
      top: 0;
      left: 0;
   }

   #key figure {
      width: calc(50% + 187px);
      height: 530px;
      margin-left: auto;
   }

   #key .slide-item1 {
      background: url("../img/index/key-left-img-1.jpg") no-repeat center top/cover;
   }

   #key .slide-item2 {
      background: url("../img/index//key-left-img-2.jpg") no-repeat center top/cover;
   }

   #key .slide-item3 {
      background: url("../img/index//key-left-img-3.jpg") no-repeat center top/cover;
   }
}

@media only screen and (min-width: 1400px) {
   #menu-toggle .nav {
      gap: 41px;
   }
}

/* -- -- */
#sec1 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec1 {
      background: url("../img/index/sec1-bg-img.jpg") no-repeat center top/cover;
      margin-top: 12.8vw;
      padding: 22vw 6.6vw;
   }

   #sec1 h2 {
      background: url("../img/shared/heading-icon.png") no-repeat center top/12vw auto;
      padding-top: 15vw;
   }

   #sec1 .txt {
      text-align: justify;
      padding-top: 10vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec1 {
      background: url("../img/index/sec1-bg-img.jpg") no-repeat center top/cover;
      margin: 157px 30px 0;
      padding: 180px 0 250px;
   }

   #sec1 .ttl-sub {
      font-weight: 500;
      font-size: 15px;
      line-height: 20px;
      letter-spacing: 0.1em;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 20px;
      border-left: 1px solid;
   }

   #sec1 .ttl-sub .txt-latin {
      display: inline-block;
      vertical-align: bottom;
      border-left: 3px solid;
      padding: 13px 0;
   }

   #sec1 h2 {
      background: url("../img/shared/heading-icon.png") no-repeat center top/56px auto;
      padding: 96px 0 35px;
   }

   #sec1 .txt {
      max-width: 790px;
      line-height: 50px;
      margin: 0 auto;
   }
}

/* -- -- */
#sec2 {
   position: relative;
}

#sec2 h2 {
   color: #541316;
}

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

   #sec2 h2 {
      padding: 0 4vw;
   }

   #sec2 h2 .en {
      display: inline-block;
      font-weight: 400;
      font-size: 21.2vw;
      letter-spacing: 0;
      line-height: 1;
      text-align: right;
   }

   #sec2 h2 .ja {
      display: block;
      font-size: 6.6vw;
      padding: 0 0 4.8vw;
   }

   #sec2 .row {
      background-color: #541316;
      color: #fff;
      padding: 20vw 0;
      position: relative;
   }

   #sec2 .row:before {
      content: '';
      width: 48vw;
      height: 100%;
      background: #3d070a url("../img/index/sec2-deco.jpg") no-repeat center top 84vw / 100% auto;
      position: absolute;
      top: 0;
      right: 0;
   }

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

   #sec2 .row .photo-1 {
      width: 66vw;
      margin-left: -6.6vw;
      padding-top: 8vw;
   }

   #sec2 .row .photo-2 {
      width: 86.4vw;
      margin-right: -6.6vw;
      margin-left: auto;
      padding-top: 10vw;
   }

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

@media only screen and (min-width: 768px) {
   #sec2 h2 {
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
      align-items: flex-end;
      padding: 88px 10px 25px;
   }

   #sec2 h2 .en {
      font-weight: 400;
      font-size: 190px;
      letter-spacing: 0;
      line-height: 150px;
      text-align: right;
   }

   #sec2 h2 .ja {
      position: relative;
      bottom: 5px;
   }

   #sec2 .row {
      background-color: #541316;
      color: #fff;
      position: relative;
      padding: 148px 0 94px;
   }

   #sec2 .row:before {
      content: '';
      width: 350px;
      height: 100%;
      background: #3d070a url("../img/index/sec2-deco.jpg") no-repeat center top/100% auto;
      position: absolute;
      top: 0;
      right: 0;
   }

   #sec2 .row .col {
      width: 480px;
      margin-left: auto;
      padding: 58px 94px 0 0;
   }

   #sec2 .row .txt {
      padding-top: 33px;
   }

   #sec2 .row .photo-1 {
      width: 610px;
      position: absolute;
      top: 0;
      left: -200px;
   }

   #sec2 .row .photo-2 {
      width: 800px;
      position: absolute;
      bottom: 0;
      right: -250px;
   }

   #sec2 .row .button {
      padding: 438px 0 90px;
      position: relative;
      left: -30px;
   }
}

@media only screen and (min-width: 1241px) {
   #sec2 h2 {
      padding: 88px 30px 25px 50px;
   }

   #sec2 .row .photo-1 {
      left: -100px;
   }

   #sec2 .row .photo-2 {
      right: -150px;
   }
}

/* -- -- */
#sec3 {
   position: relative;
}

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

   #sec3 .row-1 .col {
      padding: 10vw 2.6vw 0;
   }

   #sec3 .row-1 .txt,
   #sec3 .row-1 .button {
      padding-top: 8vw;
   }

   #sec3 .row-1 .button a {
      gap: 3vw;
   }

   #sec3 .row-1 .button a:before {
      content: '';
      display: block;
      width: 5.3vw;
      height: 4.8vw;
      background: url("../img/shared/icon-cart.png") no-repeat center top/cover;
   }

   #sec3 .row-2 {
      padding-bottom: 20vw;
   }

   #sec3 .row-2 .col {
      padding: 12vw 2.6vw 0;
   }

   #sec3 .row-2 .txt {
      padding-top: 4vw;
   }

   #sec3 .row-2 .button {
      padding-top: 8vw;
   }

   #sec3 .row-2 .list {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 5.6vw 12vw;
      background: url("../img/shared/bg-pattern-1.jpg") repeat center top;
      margin: 12vw 5.3vw 0;
      padding: 10vw 4vw;
   }

   #sec3 .row-2 .list h4 {
      width: 100%;
   }

   #sec3 .row-3 {
      padding-bottom: 20vw;
   }

   #sec3 .row-3 .wrap {
      display: flex;
      flex-direction: column;
      gap: 8vw;
   }

   #sec3 .row-3 .col {
      background-color: #541316;
      color: #fff;
   }

   #sec3 .row-3 .col h3 {
      background-color: #3d070a;
      padding: 8vw 0;
   }

   #sec3 .row-3 .col .txt {
      padding: 10vw 8vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec3 .row-1 {
      padding: 130px 0 120px;
   }

   #sec3 .row-1 .col {
      width: 480px;
      margin-left: auto;
      padding: 73px 0px 62px;
   }

   #sec3 .row-1 .txt {
      padding-top: 34px;
   }

   #sec3 .row-1 .button {
      padding-top: 74px;
   }

   #sec3 .row-1 .button a {
      gap: 15px;
   }

   #sec3 .row-1 .button a:before {
      content: '';
      display: block;
      width: 29px;
      height: 27px;
      background: url("../img/shared/icon-cart.png") no-repeat center top/cover;
   }

   #sec3 .row-1 figure {
      width: 720px;
      position: absolute;
      top: 0;
      left: -240px;
   }

   #sec3 .row-2 {
      padding-bottom: 131px;
   }

   #sec3 .row-2 figure {
      width: 720px;
      position: absolute;
      top: 0;
      right: -220px;
   }

   #sec3 .row-2 .col {
      width: 460px;
      padding: 50px 0 0;
   }

   #sec3 .row-2 .txt {
      padding-top: 34px;
   }

   #sec3 .row-2 .list {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 18px 95px;
      background: url("../img/shared/bg-pattern-1.jpg") repeat center top;
      margin-top: 53px;
      padding: 36px 36px;
   }

   #sec3 .row-2 .list h4 {
      width: 100%;
   }

   #sec3 .row-2 .list ul {
      line-height: 40px;
   }

   #sec3 .row-3 {
      padding-bottom: 215px;
   }

   #sec3 .row-3 .wrap {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 42px;
   }

   #sec3 .row-3 .col {
      background-color: #541316;
      color: #fff;
   }

   #sec3 .row-3 .col h3 {
      background-color: #3d070a;
      padding: 65px 0 50px;
   }

   #sec3 .row-3 .col h3 .sub-en {
      padding-bottom: 5px;
   }

   #sec3 .row-3 .col .txt {
      padding: 54px 0 66px;
   }
}

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

   #sec3 .row-2 figure {
      right: -100px;
   }

   #sec3 .row-2 .col {
      padding-left: 24px;
   }
}

/* -- -- */
#sec4 {
   position: relative;
}

#sec4 h2 {
   color: #541316;
}

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

   #sec4:before {
      content: '';
      width: 100%;
      background-color: #f1f1f1;
      position: absolute;
      top: 8vw;
      bottom: 0;
      left: 0;
   }

   #sec4 h2 {
      border-bottom: 1px solid;
      position: relative;
      padding-bottom: 2vw;
   }

   #sec4 h2 .en {
      display: inline-block;
      font-weight: 400;
      font-size: 19vw;
      letter-spacing: 0;
      line-height: 1;
   }

   #sec4 h2 .ja {
      display: block;
      font-size: 6.6vw;
      position: absolute;
      bottom: 0;
      right: 0;
      border-bottom: 3px solid;
      padding-bottom: 2vw;
   }

   #sec4 .box {
      padding: 12vw 2.6vw 24vw;
   }

   #sec4 .box .txt-info {
      line-height: 25px;
   }

   #sec4 .box .txt-info dl {
      display: grid;
      grid-template-columns: 110px 1fr;
      gap: 0px;
      border-bottom: 1px solid #bbbbbb;
      padding: 15px 0;
   }

   #sec4 .box .gmap {
      width: 76vw;
      height: 480px;
      margin: 0 auto;
      padding-top: 16vw;
   }

   #sec4 .box .gmap iframe {
      display: block;
      width: 100%;
      height: 100%;
   }

   #sec4 .box .list-btn {
      display: none;
   }

   #sec4 .recruit {
      background-color: #fff;
      position: relative;
      padding: 16vw 8vw 10vw;
   }

   #sec4 .recruit h3 {
      line-height: 0.6;
      position: absolute;
      bottom: 100%;
      right: 0;
   }

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

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

   #sec4 .recruit .button a {
      width: 48.8vw;
      height: 48.8vw;
      border-radius: 50%;
   }

   #sec4 .recruit .button a:after {
      top: auto;
      right: auto;
      bottom: 8vw;
      left: 50%;
      transform: translate(-50%, 0);
   }
}

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

   #sec4:before {
      content: '';
      width: 100%;
      background-color: #f1f1f1;
      position: absolute;
      top: 80px;
      bottom: 0;
      left: 0;
   }

   #sec4 h2 {
      border-bottom: 1px solid;
      position: relative;
      padding-bottom: 22px;
   }

   #sec4 h2 .en {
      display: inline-block;
      font-weight: 400;
      font-size: 190px;
      letter-spacing: 0;
      line-height: 150px;
   }

   #sec4 h2 .ja {
      display: inline-block;
      border-bottom: 3px solid;
      position: absolute;
      bottom: 0;
      right: 0;
      padding-bottom: 26px;
   }

   #sec4 .box {
      display: flex;
      justify-content: space-between;
      gap: 0px;
      line-height: 40px;
      padding: 87px 0 120px;
   }

   #sec4 .box .txt-info {
      width: 460px;
   }

   #sec4 .box .txt-info dl {
      display: grid;
      grid-template-columns: 135px 1fr;
      gap: 0px;
      border-bottom: 1px solid #bbbbbb;
      padding: 15px 0 19px;
   }

   #sec4 .box .txt-info dl+dl {
      padding-top: 20px;
   }

   #sec4 .box #gmap {
      width: 500px;
   }

   #sec4 .box .gmap {
      width: 100%;
      height: 510px;
   }

   #sec4 .box .gmap iframe {
      display: block;
      width: 100%;
      height: 100%;
   }

   #sec4 .box .list-btn {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 15px;
      padding-top: 40px;
      font-family: "Shippori Mincho", serif;
      font-weight: 400;
   }

   #sec4 .box .list-btn .btn-gmap a {
      display: inline-block;
      width: 180px;
      border: 1px solid #000;
      text-align: center;
      box-sizing: border-box;
      text-align: center;
      line-height: 43px;
   }

   #sec4 .box .list-btn .btn-gmap a:hover {
      background-color: #000;
      color: #fff;
      opacity: 1;
   }

   #sec4 .box .list-btn .btn-print {
      font-size: 14px;
   }

   #sec4 .box .list-btn .btn-print a:hover {
      text-decoration: underline;
   }

   #sec4 .recruit {
      max-width: 1000px;
      background-color: #fff;
      margin: 0 auto;
      padding: 60px 0 70px 140px;
      position: relative;
      box-sizing: border-box;
   }

   #sec4 .recruit h3 {
      text-align: center;
      letter-spacing: 0;
      line-height: 0.6;
      position: absolute;
      top: 30px;
      bottom: 0;
      left: 0;
   }

   #sec4 .recruit .txt {
      width: 406px;
      line-height: 40px;
      padding-top: 19px;
   }

   #sec4 .recruit .button {
      position: absolute;
      top: 70px;
      right: 70px;
   }

   #sec4 .recruit .button a {
      width: 282px;
      height: 282px;
      border-radius: 50%;
   }

   #sec4 .recruit .button a:after {
      top: auto;
      right: auto;
      bottom: 53px;
      left: 50%;
      transform: translate(-50%, 0);
   }

   #sec4 .recruit .button a:hover:after {
      transform: translate(-30%, 0);
   }
}

@media only screen and (min-width: 1241px) {
   #sec4 .box #gmap {
      width: 580px;
   }
}