:root {
  --color-c1 :rgba(80,80,80,1);
  --color-c2 :rgba(232,226,215,1);
  --color-c3 :rgba(40,31,32,1);
  --color-c4 :rgba(232,222,212,1);
  --color-c5 :rgba(216,196,169,1);
  --color-tp :rgba(255,255,255,0);
  --swiper-theme-color :rgba(150,150,150,1);
  --swiper-navigation-size :20px;
}

/* bt5 */
.modal-header { border: none }
.modal-content { border: none; background-color: rgba(255,255,255,0.95)}

/* swiper */
.swiper-button-prev { background-size: 10px }
@-webkit-keyframes zoomUp { 0% { -webkit-transform: scale(1); transform: scale(1)}
  100% { -webkit-transform: scale(1.15); transform: scale(1.15)}}
@keyframes zoomUp { 0% { -webkit-transform: scale(1); transform: scale(1)}
  100% { -webkit-transform: scale(1.15); transform: scale(1.15)}}
.swiper-slide-active .slide-img, .swiper-slide-duplicate-active .slide-img, .swiper-slide-prev .slide-img {
-webkit-animation: zoomUp 12s linear 0s; animation: zoomUp 12s linear 0s; -webkit-animation-fill-mode: both; animation-fill-mode: both }
.swiper-slide { overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden }

.mvslider1 { overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden }
.slider1 { width: 100%; height: 420px }
.slider1-img1 { width: 100%; height: 100%; background: url("../img/pickup-img1.jpg") center center / cover no-repeat }
.slider1-img2 { width: 100%; height: 100%; background: url("../img/pickup-img2.jpg") center center / cover no-repeat }
.slider1-img3 { width: 100%; height: 100%; background: url("../img/pickup-img3.jpg") center center / cover no-repeat }
.slider1-img4 { width: 100%; height: 100%; background: url("../img/pickup-img4.jpg") center center / cover no-repeat }
.slider1-img5 { width: 100%; height: 100%; background: url("../img/pickup-img5.jpg") center center / cover no-repeat }
.slider1-img6 { width: 100%; height: 100%; background: url("../img/pickup-img6.jpg") center center / cover no-repeat }
.slider1-img7 { width: 100%; height: 100%; background: url("../img/pickup-img7.jpg") center center / cover no-repeat }
.slider1-img8 { width: 100%; height: 100%; background: url("../img/pickup-img8.jpg") center center / cover no-repeat }
.slider1-img9 { width: 100%; height: 100%; background: url("../img/pickup-img9.jpg") center center / cover no-repeat }

.slider2 { width: 100%; height: auto }

/* custom */
body { color: var(--color-c1); background-color: var(--color-c4)}
#wrapper { background-color: var(--color-c4)}
.logo-c1 { width: 150px; padding: 12px 0 0 10px }
@media ( min-width: 992px ){ .logo-c1 { width: 230px; padding: 0 }}
.logo-c2 { width: 320px }
.bgc-c1 { background-color: var(--color-c3)}
.bgc-grad-c1 { background: -webkit-linear-gradient( -135deg, rgba(255,255,255,1), var(--color-c2)); background: linear-gradient( -135deg, rgba(255,255,255,1), var(--color-c2))}
.underline-nc1 { background: linear-gradient(transparent 70%, var(--color-c5) 70%)}

.tt-c1 { font-size: calc(48px + 60 * ((100vw - 375px) / 825))} @media screen and ( min-width: 1200px ) { .tt-c1 { font-size: 108px }}
.tt-c2 { font-size: calc(36px + 60 * ((100vw - 375px) / 825))} @media screen and ( min-width: 1200px ) { .tt-c2 { font-size: 108px }}
.px-c1 { padding-right: 25px !important; padding-left: 25px !important }
@media ( min-width: 1200px ){ .px-c1 { padding-right: 0 !important; padding-left: 0 !important }}

.px-c2 { padding-right: 0 !important; padding-left: 0 !important }
@media ( min-width: 768px ){ .px-c2 { padding-right: 25px !important; padding-left: 25px !important }}
@media ( min-width: 1200px ){ .px-c2 { padding-right: 0 !important; padding-left: 0 !important }}

.mt-50 { margin-top: 50px } @media ( min-width: 992px ){ .mt-50 {margin-top: 0 }}
@media ( min-width: 992px ){ .nmt-c1 { margin-top: -80px }}
.lh-c1 { line-height: 3 }
.opa-50 { opacity: 50% }

/* bg mv */
.bgc-layout-c1 { background-image: linear-gradient( 90deg, var(--color-tp)  0%,var(--color-tp)  40%,rgba(255,255,255,1) 40%,rgba(255,255,255,1) 100%)}
.bgc-layout-c1-end { background-image: linear-gradient( 90deg, rgba(255,255,255,1)  0%,rgba(255,255,255,1)  60%,var(--color-tp) 60%,var(--color-tp) 100%)}

.bgi-c1 { height: 200px; background: url("../img/miyako-bgi1.jpg") top center / cover no-repeat }
@media ( min-width: 768px ){ .bgi-c1 { height: 340px; background: url("../img/miyako-bgi1.jpg") bottom center / cover no-repeat }}

.mv-copy { line-height: 0.9; font-size: 32px; position: absolute; bottom: 10px; right: 10px; mix-blend-mode: overlay; z-index: 13  }
@media ( min-width: 992px ){ .mv-copy { line-height: 0.9; font-size: 120px; position: absolute; bottom: 60px; left: 0; mix-blend-mode: overlay; z-index: 13 }}

.mv-c2-1 { width: 100%; height: 100vh; background: url("../img/mv1.jpg") bottom center / cover no-repeat }
@media ( min-width: 992px ){ .mv-c2-1 { height: 700px; background: url("../img/mv1.jpg") top center / cover no-repeat }}
.mv-c2-2 { width: 100%; height: 100vh; background: url("../img/mv2.jpg") bottom center / cover no-repeat }
@media ( min-width: 992px ){ .mv-c2-2 { height: 700px; background: url("../img/mv2.jpg") top center / cover no-repeat }}
.mv-c2-3 { width: 100%; height: 100vh; background: url("../img/mv3.jpg") bottom center / cover no-repeat }
@media ( min-width: 992px ){ .mv-c2-3 { height: 700px; background: url("../img/mv3.jpg") top center / cover no-repeat }}

.style-c1 { width: 100%; height: 480px; background: url("../img/img2-1.jpg") bottom center / cover no-repeat }
@media ( min-width: 992px ){ .style-c1 { height: 580px; background: url("../img/img2-1.jpg") top center / cover no-repeat }}
.style-c2 { width: 100%; height: 480px; background: url("../img/img3-1.jpg") bottom center / cover no-repeat }
@media ( min-width: 992px ){ .style-c2 { height: 580px; background: url("../img/img3-1.jpg") top center / cover no-repeat }}
.modal-btn-c1 { position: absolute; bottom: 15px; right: 15px }
.style-icon-c1 { width: 32px; margin: 10px 0 0 5px }
.style-icon-c2 { width: 18px; margin-top: 2px }

/* header */
.header-c2-sp { position: fixed; top: 0; left: 0; right: 0; height: 0; z-index: 10 }
.hbg-c1 { display: flex; width: 50px; height: 50px; padding-right: 15px;
  justify-content: flex-end; align-items: center; z-index: 11; cursor: pointer }
.hbg-c1 span,
.hbg-c1 span:before,
.hbg-c1 span:after { content: ''; display: block; height: 2px; width: 25px; background: var(--color-c1); transition: .3s; position: absolute; z-index: 12 }
.hbg-c1 span:before { bottom: 8px }
.hbg-c1 span:after { top: 8px }
.hbg-c1.op span { background: rgba(255,255,255,0)}
.hbg-c1.op span::before { bottom: 0; transform: rotate(45deg)}
.hbg-c1.op span::after { top: 0; transform: rotate(-45deg)}
.gnav-c1 { position: absolute; top:100%; right: 0; background-color: rgba(255,255,255,0.95); height: 100vh; width: 100%; transition: .3s ease-in-out; border-top: solid 1px rgba(255,255,255,0.05); opacity: 0; visibility: hidden }
.gnav-c1.active { right: 0; opacity: 1; visibility: visible }
.gnav-c1 ul li { margin-bottom: 20px; white-space: nowrap }

/* footer */
.footer-nav-c1 li { margin-bottom: 20px; white-space: nowrap }
@media ( min-width: 768px ){ .footer-nav-c1 li { margin-bottom: 0; margin-right: 20px; padding-right: 20px; border-right: solid 1px #fff }}
@media ( min-width: 768px ){ .footer-nav-c1 li:last-child { border-right: none }}