@charset "UTF-8";

:root {
  /* カラーパレット */
  --color-text: #00060f;
  --color-link: #0458D6;
  --color-accent: #ffa200;
  --color-main: #1031A5;
  --color-bg: #9de2f5;
  --color-white: #ffffff;
  --color-black: #121212;
  
  /* グレースケール */
  --color-extralightgray: #f2f2f2;
  --color-lightgray: #dddddd;
  --color-gray: #9d9d9d;
  --color-darkgray: #4e4e4e;
  
  /* ステータスカラー */
  --color-alert: #b7211f;
  --color-alert-bg: #fff1ed;
  --color-success: #346003;
  --color-success-bg: #f3fccd;
  --color-caution: #623f01;
  --color-caution-bg: #fcf5da;
  --color-note: var(--color-black);

  /* レスポンシブサイズ */
  --container-max-width: min(100vw, 420px);
  --slide-height: 100vh;
  --slide-height-mobile: 100dvh; /* Dynamic Viewport Height */
  --cta-height: clamp(60px, 8vh, 80px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);

  /* フォントサイズ（レスポンシブ対応） */
  --font-size-hero: clamp(2rem, 4vw, 3.25rem);
  --font-size-heading-1: clamp(1.75rem, 3.5vw, 3rem);
  --font-size-heading-2: clamp(1.5rem, 3vw, 2.5rem);
  --font-size-heading-3: clamp(1.25rem, 2.5vw, 1.875rem);
  --font-size-large: clamp(1rem, 2vw, 1.5rem);
  --font-size-base: clamp(0.875rem, 1.5vw, 1.25rem);
  --font-size-body: clamp(0.875rem, 1.5vw, 1.063rem);
  --font-size-small: clamp(0.75rem, 1.2vw, 1rem);
  --font-size-tiny: clamp(0.625rem, 1vw, 0.875rem);
  --font-size-caption: clamp(0.5rem, 0.8vw, 0.75rem);

  /* スペーシング */
  --space-sss: clamp(2px, 0.3vw, 4px);
  --space-ss: clamp(4px, 0.6vw, 8px);
  --space-ms: clamp(6px, 1vw, 12px);
  --space-m: clamp(8px, 1.5vw, 16px);
  --space-l: clamp(12px, 2vw, 24px);
  --space-xl: clamp(16px, 2.5vw, 32px);
  --space-xxl: clamp(20px, 3vw, 40px);
  --space-xxxl: clamp(40px, 3vw, 100px);

  /* ボーダー半径 */
  --size-border-radius: clamp(8px, 1vw, 12px);
  --size-border-radius-round: 50px;
}

@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+P+One&display=swap');

/* ================================================
   ベース
   ================================================ */
* {
  box-sizing: border-box;
}

html {
  height: 100%;
  height: 100dvh; /* Dynamic Viewport Height */
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: var(--color-text);
  overflow: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
  height: 100%;
  height: 100dvh;
  position: fixed;
  width: 100%;
  margin: 0;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}

body::-webkit-scrollbar {
  display: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

main {
  width: 100%;
  height: 100%;
  height: 100dvh;
  position: relative;
}

/* ================================================
   スライドコンテナ（全デバイス対応）
   ================================================ */
.swipe-container {
  width: 100%;
  height: 500vh;
  /* max-width: var(--container-max-width); */
  margin: 0 auto;
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  /* position: relative; */
}

/* デスクトップサイズでの調整 */
/* @media screen and (min-width: 768px) {
  .swipe-container {
    max-width: min(600px, 90vw);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  }
  
  main {
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
} */

.slide {
  width: 100%;
  height: var(--slide-height);
  /* height: var(--slide-height-mobile); */
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: var(--container-max-width);
  margin: auto;
    /* padding-bottom: calc(var(--space-l) + var(--safe-area-bottom)); */
}

/* スライドデザイン */
.slide.page {
  background-image: linear-gradient(135deg, #039aff 0%, #3723de 100%);
  padding-bottom: calc(var(--space-l) + var(--safe-area-bottom));
}

.slide.page.no1 {
  background-image: url('../img/bg.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* ================================================
   スライド内容レイアウト
   ================================================ */
.slide-inner {
  width: 100%;
  height: 100%;
  /* display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center; */
  text-align: center;
  padding-top: max(var(--space-l), env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--cta-height) + var(--space-l) + var(--safe-area-bottom));
  position: relative;
  overflow: hidden;
}

.slide-inner-float {
  position: absolute;
  /* top: min(60vh, calc(100vh - 120px)); */
  /* bottom: calc(var(--cta-height) + clamp(60px, 3vw, 100px) + var(--safe-area-bottom)); */
  bottom: calc(max(14%, 120px) + var(--safe-area-bottom));
  right: 2%;
  width: clamp(30%, 50vw, 40%);
  height: auto;
  z-index: 10;
  max-height: 40vh;
  object-fit: contain;
}
@media not all and (min-width: 361px) {
  /* 360px以下 */
  .slide-inner-float {
    bottom: calc(var(--cta-height) + clamp(100px, 3vw, 120px) + var(--safe-area-bottom));
  }
}

.slide-image {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.float-logo {
    margin: auto;
}
.float-logo {
  width: clamp(60%, 70vw, 80%);
  text-align: center;
}

/* ================================================
   固定CTA
   ================================================ */
.fixed-cta {
  position: fixed;
  bottom: var(--safe-area-bottom);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--container-max-width);
  padding: var(--space-xl) var(--space-xl);
  z-index: 200;
  text-align: center;
  background-image: linear-gradient(0deg, #00188f 0%,#00188f 60%, transparent 100%);
}

.fixed-cta-button {
  width: min(90%, 320px);
  min-height: 60px;
  display: inline-block;
  background: #ff7700;
  border: 2px solid #ff8800;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  border-radius: var(--size-border-radius);
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  z-index: 201;
}

.fixed-cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.fixed-cta-button:active {
  transform: translateY(0);
}

.cta-text {
  font-family: "Mochiy Pop P One", sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 26px);
  color: var(--color-white);
  text-shadow: #ce3700 0px 1px 4px;
  display: inline-block;
  line-height: 1.2;
}

.cta-sub {
  font-size: clamp(12px, 2.5vw, 14px);
  font-weight: bold;
  color: var(--color-text);
  background-color: #fbff00;
  padding: var(--space-sss) var(--space-m);
  border-radius: 1px;
  position: absolute;
  top: var(--space-ms);
  left: 50%;
  transform: translateX(-50%);
  z-index: 202;
}
@media screen and (max-width: 320px) {
  .cta-sub {
    font-size: 10px;
    padding: 2px 8px;
    top: 8px;
  }
}
@media screen and (orientation: landscape) and (max-height: 500px) {
  .cta-sub {
    font-size: 11px;
    padding: 1px 6px;
    top: 4px;
  }
}

/* ================================================
   プログレスバー
   ================================================ */
.progress-bar {
  position: fixed;
  bottom: calc(var(--cta-height) + var(--space-xl) + var(--safe-area-bottom));
  right: var(--space-l);
  width: 12px;
  display: flex;
  flex-direction: column;
  gap: var(--space-ss);
  z-index: 100;
}

.progress-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.progress-dot.active {
  background: var(--color-white);
  transform: scale(1.2);
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
}

/* ================================================
   アニメーション
   ================================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ================================================
   デバイス別最適化
   ================================================ */

/* 超高解像度対応 */
@media screen and (min-width: 1200px) {
  .swipe-container {
    max-width: 500px;
  }
}

/* タブレット縦向き */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  
  .slide-image {
    max-height: 60vh;
  }
}

/* タブレット横向き */
@media screen and (min-width: 768px) and (orientation: landscape) {

  .slide-inner-float {
    /* position: static; */
    max-width: 35%;
    max-height: 60vh;
  }
}

/* 非常に小さい画面 */
@media screen and (max-width: 320px) {
  .slide-inner {
    padding: var(--space-ms);
  }
  
  .cta-text {
    font-size: 14px;
  }
  
  .fixed-cta-button {
    padding: var(--space-ms);
  }
}

/* iPhone SE、古いAndroidなど */
@media screen and (max-height: 600px) {
  .slide-inner {
    padding-top: var(--space-ms);
    padding-bottom: calc(var(--cta-height) + var(--space-ms));
  }
  
  .slide-image {
    max-height: 50vh;
  }
  
  .slide-inner-float {
    max-height: 25vh;
    width: 40%;
  }
}

/* 横向き画面（スマホ） */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .slide-inner {
    /* flex-direction: row; */
    padding: var(--space-ss);
    padding-bottom: calc(var(--cta-height) + var(--space-ss));
  }
  
  .slide-image {
    max-width: 50%;
    max-height: 70vh;
  }
  
  .slide-inner-float {
    position: static;
    max-width: 40%;
    max-height: 50vh;
  }
  
  .fixed-cta {
    padding: var(--space-ss);
  }
  
  .progress-bar {
    right: var(--space-ms);
    bottom: calc(var(--cta-height) + var(--space-ms));
  }
}

/* フォールバック：Dynamic Viewport Heightが使えない場合 */
@supports not (height: 100dvh) {
  html, body {
    height: 100vh;
  }
  
  .slide {
    height: 100vh;
  }
  
  main {
    height: 100vh;
  }
}

/* ================================================
   追加
   ================================================ */
.logo-container {
  position: absolute;
  bottom: calc(max(20%, 180px) + var(--safe-area-bottom));
}
.content-inner {
  position: relative;
}
.slide-inner-float {
  bottom: calc(max(20%, 180px) + var(--safe-area-bottom));
}