/* #key .photo {
   position: relative;
}

#key .photo iframe {
   display: block;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   pointer-events: none;
} */

#key .photo {
   pointer-events: none;
   overflow: hidden;
   position: relative;
   height: 100%;
}

#key .photo iframe {
   width: 100%;
   height: 125%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

@media only screen and (max-width: 767px) {
   #key .photo {
      height: auto;
      padding-top: 56.25%;
   }
}

@media only screen and (min-width: 768px) {
   #key .photo {
      height: auto;
      padding-top: 56.25%;
      margin-left: 0;
   }
}

.txt {
   text-align: start;
}

@media only screen and (max-width: 767px) {
   .txt br {
      display: none;
   }
}

@media only screen and (min-width: 768px) {
   .txt-c .txt {
      text-align: center;
   }
}

#sec1 {
   position: relative;
}

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

   #sec1 .block1 {
      padding-bottom: 10vw;
   }

   #sec1 .block1 .logo {
      font-size: 8vw;
      letter-spacing: 0.2em;
      line-height: 1.5;
      text-align: center;
   }

   #sec1 .block1 .logo h3 {
      font-size: 5.3vw;
      letter-spacing: 0.025em;
   }

   #sec1 .block1 .logo img {
      width: 55vw;
   }

   #sec1 .block1 .text {
      text-align: center;
      padding-top: 8vw;
   }

   #sec1 .block1 .text h3 {
      background-color: #b72e00;
      color: #fff;
      border-radius: 50px;
      font-size: 6vw;
      line-height: 1.5;
      letter-spacing: 0.1em;
      text-align: center;
      padding-bottom: 1vw;
   }

   #sec1 .block1 .text .tel {
      padding: 4vw 0;
   }

   #sec1 .block1 .text .tel a {
      display: inline-block;
      font-size: 10.8vw;
      line-height: 1;
      letter-spacing: 0;
      background: url("../img/shared/icon-tel.png") no-repeat top 2vw left/6.4vw auto;
      padding-left: 8vw;
   }

   #sec1 .block1 .text .note {
      font-size: 12px;
      letter-spacing: 0;
      line-height: 20px;
   }

   #sec1 .block2 figure {
      padding-top: 10vw;
   }

   #sec1 .block2 .col {
      line-height: 28px;
   }

   #sec1 .block2 .col dl {
      display: table;
      width: 100%;
      border-bottom: 1px solid #555;
      padding: 15px 0;
   }

   #sec1 .block2 .col dl:first-child {
      padding-top: 0;
   }

   #sec1 .block2 .col dl>* {
      display: table-cell;
      vertical-align: top;
   }

   #sec1 .block2 .col dl dt {
      width: 32%;
   }
}

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

   #sec1 .wrap-sp {
      padding-left: 4%;
   }

   #sec1 .block1 {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px 67px;
      padding: 137px 0 92px;
   }

   #sec1 .block1 .logo {
      font-size: 40px;
      letter-spacing: 0.1em;
      line-height: 40px;
   }

   #sec1 .block1 .logo a {
      display: block;
      position: relative;
      padding-left: 305px;
   }

   #sec1 .block1 .logo h3 {
      font-size: 30px;
      letter-spacing: 0;
      position: absolute;
      top: 50px;
      left: 8px;
   }

   #sec1 .block1 .logo img {
      padding: 18px 0 13px;
   }

   #sec1 .block1 .text {
      width: 540px;
      line-height: 28px;
      letter-spacing: 0.05em;
      text-align: center;
   }

   #sec1 .block1 .text h3 {
      background-color: #b72e00;
      color: #fff;
      border-radius: 50px;
      font-size: 30px;
      line-height: 40px;
      letter-spacing: 0.1em;
      text-align: center;
      padding: 3px 0 7px;
   }

   #sec1 .block1 .text .tel {
      font-size: 70px;
      letter-spacing: 0;
      line-height: 100px;
      background: url("../img/shared/icon-tel.png") no-repeat top 40px left 17px/33px auto;
      padding: 4px 0 0 40px;
   }

   #sec1 .block1 .text .note {
      text-align: left;
      padding-left: 22px;
   }

   #sec1 .block2 {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
   }

   #sec1 .block2 figure {
      width: 48%;
      max-width: 600px;
      padding-top: 8px;
   }

   #sec1 .block2 .col {
      width: 47.1%;
      line-height: 28px;
   }

   #sec1 .block2 .col dl {
      display: table;
      width: 100%;
      border-bottom: 1px solid #555;
      padding: 27px 0;
   }

   #sec1 .block2 .col dl:first-child {
      padding-top: 0;
   }

   #sec1 .block2 .col dl>* {
      display: table-cell;
      vertical-align: top;
   }

   #sec1 .block2 .col dl dt {
      width: 31%;
   }
}

@media only screen and (min-width: 1460px) {
   #sec1 .block1 {
      justify-content: flex-start;
   }
}

#sec2 {
   position: relative;
}

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

   #sec2 .col {
      position: relative;
      padding-top: 12vw;
   }

   #sec2 .col:after {
      content: '';
      width: 100%;
      padding-top: 40%;
      background: url("../img/shop/sec2-deco.png") no-repeat center top/100% auto;
      position: absolute;
      top: -20vw;
      left: 0;
   }

   #sec2 h2 {
      font-size: 6vw;
      line-height: 1.5;
      letter-spacing: 0.1em;
   }

   #sec2 h2 span {
      font-size: 8vw;
   }

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

   #sec2 .txt p+p {
      padding-top: 4vw;
   }

   #sec2 ul {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding-top: 8vw;
   }

   #sec2 ul li {
      width: calc(50% - 5px);
   }
}

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

   #sec2 .wrap-sp {
      display: flex;
      flex-wrap: wrap;
      gap: 20px 5.4%;
   }

   #sec2 figure {
      width: 46.2%;
      padding-top: 10px;
   }

   #sec2 figure img {
      width: 100%;
      max-width: inherit;
      height: 100%;
      object-fit: cover;
   }

   #sec2 .col {
      width: 48.4%;
      position: relative;
   }

   #sec2 .col:before {
      content: '';
      width: 87.3%;
      padding-top: 34.2%;
      background: url("../img/shop/sec2-deco.png") no-repeat center top/100% auto;
      position: absolute;
      top: 120px;
      left: -47%;
   }

   #sec2 h2 {
      font-size: 30px;
      line-height: 45px;
      letter-spacing: 0.1em;
   }

   #sec2 h2 span {
      font-size: 50px;
   }

   #sec2 .txt {
      width: 82%;
      padding-top: 57px;
   }

   #sec2 .txt p+p {
      padding-top: 30px;
   }

   #sec2 ul {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      padding-top: 97px;
   }

   #sec2 ul li {
      width: calc(50% - 15px);
   }
}

#inside {
   position: relative;
}

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

   #inside h2 {
      font-size: 8vw;
      line-height: 1.2;
      letter-spacing: 0.1em;
   }

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

   #inside h3 {
      font-weight: 500;
      text-align: center;
   }

   #inside .txt {
      padding-top: 4vw;
   }

   #inside .block1 {
      padding-top: 8vw;
      position: relative;
   }

   #inside .block1 figure:before {
      content: '';
      width: 50%;
      padding-top: 25%;
      background: url("../img/shop/sec3-deco.png") no-repeat center top/100% auto;
      position: absolute;
      top: 8vw;
      right: 0;
      z-index: 1;
   }

   #inside .block1 .col figure {
      width: 80%;
      margin: 0 auto;
      padding-top: 4vw;
   }

   #inside .block2 {
      padding-top: 8vw;
   }

   #inside .block2 figure {
      width: 80%;
      margin: 0 auto;
      position: relative;
      padding-top: 4vw;
   }   
}

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

   #inside .wrap-sp {
      padding-left: 4%;
   }

   #inside h2 {
      font-size: 50px;
      line-height: 50px;
      letter-spacing: 0.1em;
   }

   #inside .block1 {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      padding-top: 70px;
   }

   #inside .block1 figure {
      width: calc(100% - 380px);
      max-width: 872px;
   }

   #inside .block1 .col {
      width: 330px;
      padding-top: 50px;
   }

   #inside .block1 h3 {
      font-weight: 500;
      font-size: 22px;
   }

   #inside .block1 .txt {
      padding-top: 20px;
   }

   #inside .block2 {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      position: relative;
   }

   #inside .block2 figure {
      width: calc(100% - 360px);
      position: relative;
      top: -40px;
   }

   #inside .block2 .col {
      width: 330px;
      text-align: right;
      padding-top: 220px;
   }

   #inside .block2 h3 {
      font-weight: 500;
      font-size: 22px;
   }

   #inside .block2 .txt {
      padding-top: 20px;
   }
}

#access {
   position: relative;
}

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

   #access .gmap {
      width: 100%;
      height: 480px;
   }

   #access .gmap iframe {
      display: block;
      width: 100%;
      height: 100%;
      filter: grayscale(100%);
   }

   #access .txt {
      line-height: 28px;
      padding-top: 8vw;
   }

   #access .txt dl {
      display: table;
      width: 100%;
      border-bottom: 1px solid #555;
      padding: 0 0 20px;
   }

   #access .txt dl+dl {
      padding-top: 20px;
   }

   #access .txt dl>* {
      display: table-cell;
      vertical-align: top;
   }

   #access .txt dl dt {
      width: 30%;
   }

   #access .btn-group {
      text-align: right;
      padding-top: 8vw;
   }

   #access .btn-group .button a {
      min-width: 43vw;
      text-align: left;
   }

   #access .btn-group .button .copy {
      letter-spacing: 0;
   }

   #access .btn-group .gmap_print {
      padding: 3vw 0;
   }

   #access .btn-group .gmap_print a {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      letter-spacing: 0.08em;
      position: relative;
   }

   #access .btn-group .gmap_print a:after {
      content: '';
      display: block;
      width: 10px;
      height: 0;
      border-top: 1px solid #555;
   }

   #access .btn-group .gmap_print a:hover {
      text-decoration: underline;
   }
}

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

   #access .gmap {
      width: 100%;
      height: 500px;
   }

   #access .gmap iframe {
      display: block;
      width: 100%;
      height: 100%;
      filter: grayscale(100%);
   }

   #access .wrap-sp {
      width: 84.4%;
      padding: 41px 4% 0;
   }

   #access .txt {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      line-height: 28px;
   }

   #access .txt dl {
      display: table;
      width: 45.2%;
      max-width: 500px;
      border-bottom: 1px solid #555;
      padding: 0 0 30px;
   }

   #access .txt dl>* {
      display: table-cell;
      vertical-align: top;
   }

   #access .txt dl dt {
      width: 100px;
   }

   #access .txt dl dd {
      text-align: justify;
   }

   #access .btn-group {
      text-align: right;
      padding-top: 93px;
   }

   #access .btn-group .button a {
      min-width: 133px;
      text-align: left;
   }

   #access .btn-group .button .copy {
      letter-spacing: 0;
   }

   #access .btn-group .gmap_print {
      padding: 3px 0 16px;
   }

   #access .btn-group .gmap_print a {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      letter-spacing: 0.08em;
      position: relative;
   }

   #access .btn-group .gmap_print a:after {
      content: '';
      display: block;
      width: 10px;
      height: 0;
      border-top: 1px solid #555;
   }

   #access .btn-group .gmap_print a:hover {
      text-decoration: underline;
   }
}