@charset "UTF-8";
/* ------------------------------------------------------------
   Variables
------------------------------------------------------------ */
/* ----- Breakpoint ----- */
/* ----- Font family ----- */
/* ----- Font family ----- */
/* ------------------------------------------------------------
   mixin
------------------------------------------------------------ */
/* ----- Media Queries ----- */
/* ----- image filter ----- */
/* ----- diagonal filter ----- */
/* ------------------------------------------------------------
   Function
------------------------------------------------------------ */
/* ------------------------------------------------------------
   Top
------------------------------------------------------------ */
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #2B3440;
}

.app {
  /* =====================================================
     メイン縦スライダー（outer）
     → 画面全体を縦に占有
  ===================================================== */
  /* =====================================================
     9:16 コンテンツエリア
     画面の高さ基準で幅を計算。画面が横幅余ったら両脇は黒。
  ===================================================== */
  /* 画面の縦が長い場合（モバイル縦持ち）は幅100%基準に切り替え */
  /* =====================================================
     通常スライド（横展開なし）の画像
  ===================================================== */
  /* =====================================================
     横展開スライド：内側スワイパーをコンテンツ幅内に収める
  ===================================================== */
  /* 内側横スライダー（コンテンツ幅内のみでスクロール）*/
  /* =====================================================
     横インジケーター（上部固定）
     横展開があるスライドのみ表示
  ===================================================== */
  /* =====================================================
     縦ページインジケーター（左側）
  ===================================================== */
  /* =====================================================
     下部固定CTA
  ===================================================== */
  /* =====================================================
     右下 十字ナビゲーション
  ===================================================== */
  /* 上下ボタン：端に達したとき半透明＋操作不可 */
  /* 左右ボタン：横展開なし → 上下と同様に半透明＋操作不可（非表示にしない） */
  /* =====================================================
     両脇背景（コンテンツ幅が100%未満のとき）
  ===================================================== */
  /* content-area は side-bg より前面 */
  /* スワイプヒント */
}
.app .swiper-outer {
  width: 100%;
  height: 100dvh;
}
.app .swiper-outer > .swiper-wrapper > .swiper-slide {
  width: 100%;
  height: 100%;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden;
  background: #111;
}
.app .content-area {
  position: relative;
  /* 高さ = 画面高さ 100%、幅 = 高さ × (9/16) */
  height: 100%;
  width: 56.25dvh;
  /* 画面幅より大きくなるケースは幅100%に収める */
  max-width: 100%;
  overflow: hidden;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.app .slide-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
  -webkit-transition: -webkit-filter 0.3s ease;
  transition: -webkit-filter 0.3s ease;
  transition: filter 0.3s ease;
  transition: filter 0.3s ease, -webkit-filter 0.3s ease;
}
.app .swiper-outer > .swiper-wrapper > .swiper-slide.has-inner {
  /* content-area を中央に */
}
.app .swiper-inner {
  width: 100%;
  height: 100%;
  overflow: hidden; /* コンテンツ外にはみ出さない */
}
.app .swiper-inner .swiper-slide {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.app .swiper-inner .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
}
.app #h-indicator {
  position: fixed;
  top: 16px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 100;
  display: none; /* JS で表示切替 */
  gap: 8px;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.app #h-indicator.visible {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.app .h-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  -webkit-transition: background 0.25s, width 0.25s, -webkit-transform 0.25s;
  transition: background 0.25s, width 0.25s, -webkit-transform 0.25s;
  transition: background 0.25s, transform 0.25s, width 0.25s;
  transition: background 0.25s, transform 0.25s, width 0.25s, -webkit-transform 0.25s;
}
.app .h-dot.active {
  background: #fff;
  -webkit-transform: scale(1.35);
  transform: scale(1.35);
  width: 18px;
  border-radius: 4px;
}
.app #page-indicator {
  position: fixed;
  left: 16px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 100;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
}
.app .page-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  -webkit-transition: background 0.3s, height 0.25s, -webkit-transform 0.3s;
  transition: background 0.3s, height 0.25s, -webkit-transform 0.3s;
  transition: background 0.3s, transform 0.3s, height 0.25s;
  transition: background 0.3s, transform 0.3s, height 0.25s, -webkit-transform 0.3s;
  cursor: pointer;
}
.app .page-dot.active {
  background: #fff;
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  height: 18px;
  border-radius: 3px;
}
.app .fixed-cta {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 300;
  width: min(92vw, 430px);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
  pointer-events: auto;
  /* Swiperの十字ナビと被る場合の調整 */
  /* スマホ幅でサンプル画像に近いサイズ感に調整 */
  /* 極端に狭い端末向け */
}
.app .fixed-cta__btn {
  position: relative;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 7px;
  height: 48px;
  min-width: 0;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
  padding: 0 18px;
  border-radius: 999px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  -webkit-box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  -webkit-transition: -webkit-transform 0.18s ease, -webkit-filter 0.18s ease, -webkit-box-shadow 0.18s ease;
  transition: -webkit-transform 0.18s ease, -webkit-filter 0.18s ease, -webkit-box-shadow 0.18s ease;
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease, -webkit-transform 0.18s ease, -webkit-filter 0.18s ease, -webkit-box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.app .fixed-cta__btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.22)), color-stop(58%, rgba(255, 255, 255, 0)));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 58%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 58%);
  pointer-events: none;
}
.app .fixed-cta__btn:hover {
  -webkit-filter: brightness(1.06);
  filter: brightness(1.06);
  -webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}
.app .fixed-cta__btn:active {
  -webkit-transform: scale(0.96);
  transform: scale(0.96);
}
.app .fixed-cta__btn--tel {
  background: -webkit-gradient(linear, left top, left bottom, from(#0b8e48), to(#047138));
  background: -webkit-linear-gradient(top, #0b8e48 0%, #047138 100%);
  background: linear-gradient(180deg, #0b8e48 0%, #047138 100%);
}
.app .fixed-cta__btn--mail {
  background: -webkit-gradient(linear, left top, left bottom, from(#ff8517), to(#f15a00));
  background: -webkit-linear-gradient(top, #ff8517 0%, #f15a00 100%);
  background: linear-gradient(180deg, #ff8517 0%, #f15a00 100%);
}
.app .fixed-cta__icon {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  color: #fff;
}
.app .fixed-cta__text {
  display: inline-block;
}
.app #cross-nav {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 40px 40px 40px;
  grid-template-columns: 40px 40px 40px;
  -ms-grid-rows: 40px 40px 40px;
  grid-template-rows: 40px 40px 40px;
  gap: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.app .nav-btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  cursor: pointer;
  -webkit-transition: background 0.18s, opacity 0.18s, -webkit-transform 0.12s;
  transition: background 0.18s, opacity 0.18s, -webkit-transform 0.12s;
  transition: background 0.18s, transform 0.12s, opacity 0.18s;
  transition: background 0.18s, transform 0.12s, opacity 0.18s, -webkit-transform 0.12s;
  color: #fff;
}
.app .nav-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}
.app .nav-btn:active {
  -webkit-transform: scale(0.88);
  transform: scale(0.88);
}
.app .nav-btn.disabled {
  opacity: 0.2;
  pointer-events: none;
}
.app .nav-up {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 1;
  grid-row: 1;
}
.app .nav-left {
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 2;
  grid-row: 2;
}
.app .nav-center {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 2;
  grid-row: 2;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
.app .nav-right {
  -ms-grid-column: 3;
  grid-column: 3;
  -ms-grid-row: 2;
  grid-row: 2;
}
.app .nav-down {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 3;
  grid-row: 3;
}
.app .nav-left.disabled,
.app .nav-right.disabled {
  opacity: 0.2;
  pointer-events: none;
}
.app .side-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: #2B3440;
  z-index: 0;
  pointer-events: none;
}
.app .side-bg.left {
  left: 0;
}
.app .side-bg.right {
  right: 0;
}
.app .content-area {
  z-index: 1;
}
.app .swipe-hint-v {
  position: absolute;
  bottom: 72px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 20;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 4px;
  opacity: 1;
  -webkit-animation: bounce-y 1.8s ease-in-out infinite;
  animation: bounce-y 1.8s ease-in-out infinite;
  pointer-events: none;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.app .swipe-hint-v span {
  font-size: 9px;
  letter-spacing: 0.15em;
  color: #fff;
  font-family: sans-serif;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
@-webkit-keyframes bounce-y {
  0%, 100% {
    -webkit-transform: translateX(-50%) translateY(0);
    transform: translateX(-50%) translateY(0);
  }
  50% {
    -webkit-transform: translateX(-50%) translateY(6px);
    transform: translateX(-50%) translateY(6px);
  }
}
@keyframes bounce-y {
  0%, 100% {
    -webkit-transform: translateX(-50%) translateY(0);
    transform: translateX(-50%) translateY(0);
  }
  50% {
    -webkit-transform: translateX(-50%) translateY(6px);
    transform: translateX(-50%) translateY(6px);
  }
}
.app .swipe-hint-h {
  position: absolute;
  right: 14px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 20;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 7px;
  opacity: 1;
  -webkit-animation: bounce-x 1.8s ease-in-out infinite;
  animation: bounce-x 1.8s ease-in-out infinite;
  pointer-events: none;
  color: #ffd54a;
  -webkit-filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.78)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.55));
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.78)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.55));
}
.app .swipe-hint-h svg {
  width: 30px;
  height: auto;
}
.app .swipe-hint-h span {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: currentColor;
  font-family: sans-serif;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.88), 0 0 3px rgba(0, 0, 0, 0.55);
}
@-webkit-keyframes bounce-x {
  0%, 100% {
    -webkit-transform: translateY(-50%) translateX(0);
    transform: translateY(-50%) translateX(0);
    opacity: 0.85;
  }
  50% {
    -webkit-transform: translateY(-50%) translateX(7px);
    transform: translateY(-50%) translateX(7px);
    opacity: 1;
  }
}
@keyframes bounce-x {
  0%, 100% {
    -webkit-transform: translateY(-50%) translateX(0);
    transform: translateY(-50%) translateX(0);
    opacity: 0.85;
  }
  50% {
    -webkit-transform: translateY(-50%) translateX(7px);
    transform: translateY(-50%) translateX(7px);
    opacity: 1;
  }
}
@media (max-aspect-ratio: 9/16) {
  .app .content-area {
    width: 100%;
    height: 177.7777777778vw;
    max-height: 100%;
  }
}
@media (hover: hover) {
  .app .slide-img:hover {
    -webkit-filter: brightness(1.1);
    filter: brightness(1.1);
  }
}
@media (max-width: 639px) {
  .app .fixed-cta {
    width: min(94vw, 360px);
    gap: 7px;
  }
  .app .fixed-cta__btn {
    height: 46px;
    padding: 0 14px;
  }
  .app .fixed-cta__icon svg {
    width: 20px;
    height: 20px;
  }
  .app #cross-nav {
    display: none;
  }
}
@media (max-width: 340px) {
  .app .fixed-cta {
    width: 96vw;
    gap: 6px;
  }
  .app .fixed-cta__btn {
    height: 44px;
    padding: 0 10px;
    gap: 5px;
  }
}
/*# sourceMappingURL=../../map/object/project/app.css.map */