/* ランディングページ専用スタイル */
/* 共通変数とベーススタイルはvariables.cssで定義済み */

/* シンプルなランディングページ構造 */
.landing-container {
  width: 100vw;
  height: 100vh; /* モバイル: フルビューポート */
  position: relative;
  background: var(--primary); /* 直接緑背景を適用 */
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* デスクトップ版: Figma準拠サイズ（フルスクリーン、余白無し） */
@media (min-width: 1200px) {
  .landing-container {
    width: 100vw; /* フルスクリーン幅 */
    height: 100vh; /* フルスクリーン高さ */
    max-width: none; /* 最大幅制限を削除 */
    margin: 0; /* 余白を完全削除 */
    padding: 0; /* パディングを完全削除 */
  }
}

/* ロゴコンテナ（中央配置） */
.logo-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 20px; /* ロゴ間の間隔 */
  z-index: 10;
}

/* 白い犬のメインロゴ（コンテナ内配置） - モバイルファースト */
.main-logo {
  width: min(260px, 48vw); /* モバイル版をデフォルトに */
  height: auto;
  flex-shrink: 0; /* サイズ維持 */
}

/* ライムグリーンのアクセント犬（コンテナ内配置） - モバイルファースト */
.accent-dog {
  width: min(150px, 33vw); /* モバイル版をデフォルトに */
  height: auto;
  flex-shrink: 0; /* サイズ維持 */
}

/* スタートボタン（直接配置） */
.svg-button-container {
  position: absolute; /* デスクトップ版は親要素基準 */
  left: 50%;
  bottom: 88px; /* Figma準拠の位置 */
  transform: translateX(-50%);
  cursor: pointer;
  width: 550px; /* 横幅をさらに拡大: 450px → 550px */
  height: 55px; /* イントロページと同じサイズ */
  z-index: 10;
}

/* ボタンの影部分 */
.button-shadow {
  position: absolute;
  top: 5.29px;
  left: 0;
  width: 100%;
  height: 45px; /* イントロページと同じサイズ */
  background: #9C7B13;
  border-radius: 8px;
  z-index: 1;
}

/* ボタンのメイン部分 */
.button-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 45px; /* イントロページと同じサイズ */
  background: #F4C223;
  border-radius: 8px;
  z-index: 2;
  transition: all 0.3s ease;
  /* テキスト中央配置 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.svg-button-container:hover .button-main {
  background: #F7C73E;
  transform: translateY(-1px);
}

.svg-button-container:active .button-main {
  transform: translateY(1px);
  transition: all 0.1s ease;
}

.button-text {
  color: white;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 18px; /* イントロページと同じサイズ */
  text-decoration: none;
  pointer-events: none;
  position: relative;
  z-index: 3;
}

/* ローディング状態のスタイル */
.svg-button-container.loading {
  pointer-events: none;
  opacity: 0.7;
}

.svg-button-container.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: buttonSpinner 1s linear infinite;
  z-index: 10;
}

@keyframes buttonSpinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.svg-button-container.loading .button-text {
  opacity: 0.3;
}

/* レスポンシブ */
@media (max-width: 768px) { 
  /* モバイルでの確実なオーバーフロー制御 */
  html, body {
    overflow-x: hidden;
    width: 100%;
    height: 100%;
  }
  
  /* iOS Safari対応: 動的viewport heightを使用 */
  .landing-container {
    height: 100vh; /* フォールバック（JavaScript無効時） */
    height: calc(var(--vh, 1vh) * 100); /* JavaScriptで設定された実際の高さ */
  }
  
  /* モバイルでも同じFigma背景を使用 */
  .hero-background-container {
    background-attachment: scroll; /* モバイルでは scroll に変更 */
  }

  /* モバイル用ロゴコンテナ調整 */
  .logo-container {
    flex-direction: column; /* 縦並びに変更 */
    gap: 25px; /* モバイル版：ロゴ間のマージンを調整 30px→25px（画面に収めるため） */
    top: 45%; /* 50% → 45%（少し上に配置） */
  }
  
  /* ロゴサイズはデフォルトスタイルを使用（重複削除） */

  /* モバイルでのボタン位置調整 */
  .hero-content {
    bottom: 80px !important; /* Figmaデザインに合わせて下部に配置 */
    height: auto !important;
    padding: 0 !important;
  }
  
  /* モバイル対応ボタン */
  .svg-button-container {
    position: absolute !important; /* 親要素基準で配置 */
    width: min(400px, calc(100vw - 40px)) !important; /* 横幅を拡大: 348px → 400px */
    height: 54.14px !important; /* イントロページと同じサイズ */
    margin: 0 !important;
    left: 50% !important; /* 確実に中央配置 */
    bottom: 20px !important; /* 親要素の下から20px */
    transform: translateX(-50%) !important; /* 中央配置のためのオフセット */
    /* アニメーション削除 - 即座に表示 */
    opacity: 1;
    z-index: 1000 !important; /* 最前面に表示 */
  }

  .button-shadow {
    width: 100% !important;
    height: 45.21px !important; /* イントロページと同じサイズ */
    border-radius: 8px !important;
  }

  .button-main {
    width: 100% !important;
    height: 45.21px !important; /* イントロページと同じサイズ */
    border-radius: 8px !important;
  }
  
  .button-text {
    font-size: 16px !important;
  }
  
  /* モバイル版タッチフィードバック */
  .svg-button-container:active .button-main {
    transform: translateY(2px) !important;
  }
}

/* タッチデバイス専用スタイル */
@media (hover: none) {
  .svg-button-container:hover .button-main {
    background: #F4C223;
    transform: none;
  }
}

/* デスクトップ版: フルスクリーン表示（余白完全削除） */
@media (min-width: 1200px) {
  /* ボディレベルでの余白削除 */
  body {
    margin: 0;
    padding: 0;
    overflow: hidden; /* スクロール完全無効 */
  }
  
  /* HTMLレベルでも余白削除 */
  html {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  /* ボタンサイズはイントロページと統一 */
  .svg-button-container {
    width: 400px; /* 横幅をさらに拡大: 300px → 400px */
    height: 68px; /* イントロページと同じサイズ */
  }
  
  .button-shadow {
    width: 400px; /* 横幅をさらに拡大: 300px → 400px */
    height: 68px; /* イントロページと同じサイズ */
  }

  .button-main {
    width: 400px; /* 横幅をさらに拡大: 300px → 400px */
    height: 68px; /* イントロページと同じサイズ */
  }

  /* デスクトップ版ロゴコンテナ調整 */
  .logo-container {
    flex-direction: row; /* 横並びを明示的に指定 */
    gap: 25px; /* デスクトップでは間隔を少し幅く */
  }
  
  .main-logo {
    width: 200px;
    height: 83px;
  }

  .accent-dog {
    width: 110px;
    height: 101px;
  }
  
  /* デスクトップ版ボタンテキストサイズ */
  .button-text {
    font-size: 24px !important; /* イントロページと同じサイズ */
    line-height: 34.75px !important;
  }
}

/* タブレット版レスポンシブ調整 */
@media (min-width: 769px) and (max-width: 1199px) {
  .svg-button-container {
    width: 550px; /* 横幅をさらに拡大: 450px → 550px */
    height: 55px; /* イントロページと同じサイズ */
  }
  
  .button-shadow {
    width: 550px; /* 横幅をさらに拡大: 450px → 550px */
    height: 45px; /* イントロページと同じサイズ */
  }

  .button-main {
    width: 550px; /* 横幅をさらに拡大: 450px → 550px */
    height: 45px; /* イントロページと同じサイズ */
  }
  
  .button-text {
    font-size: 18px;
  }

  /* タブレット版ロゴコンテナ調整 */
  .logo-container {
    flex-direction: row; /* 横並びを明示的に指定 */
    gap: 20px;
  }
  
  .main-logo {
    width: 220px;
    height: auto;
  }

  .accent-dog {
    width: 120px;
    height: auto;
  }
}

@media (max-width: 480px) {
  /* 小画面用ロゴコンテナ調整 */
  .logo-container {
    flex-direction: column; /* 縦並びに変更 */
    gap: 20px; /* モバイル小画面：ロゴ間のマージンを縮小 25px→20px（画面に収めるため） */
    top: 43%; /* さらに上に配置 */
  }
  
  /* モバイル小画面：ロゴサイズを少し縮小 */
  .main-logo {
    width: min(230px, 46vw) !important; /* デフォルトより少し小さく */
    height: auto !important;
  }

  .accent-dog {
    width: min(130px, 30vw) !important; /* デフォルトより少し小さく */
    height: auto !important;
  }
  
  .svg-button-container {
    position: absolute !important; /* 親要素基準で配置 */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(400px, calc(100vw - 40px)) !important; /* 横幅を拡大: 348px → 400px */
    height: 54.14px !important; /* イントロページと同じサイズ */
    bottom: 20px !important; /* 親要素の下から20px */
    z-index: 1000 !important; /* 最前面に表示 */
  }
  
  .button-shadow {
    width: 100% !important;
    height: 45.21px !important; /* イントロページと同じサイズ */
    border-radius: 8px !important;
  }

  .button-main {
    width: 100% !important;
    height: 45.21px !important; /* イントロページと同じサイズ */
    border-radius: 8px !important;
  }
}