/* ==========================================
   タッチでポン！LP 精密再現スタイルシート
   ========================================== */

/* --- リセット & グローバルスタイル --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Open Sans', 'Lato', 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'BIZ UDPGothic', sans-serif;
  color: #212121;
  background-color: #ffffff;
  min-height: 100vh;
}

/* --- 背景色 & 背景パターンの定義 --- */
/* お悩みセクションと同じベース背景 */
.bg-light { 
  background-color: rgba(247, 244, 238, 1) !important; 
  background-image: url('../images/true-bg.png') !important;
  background-repeat: repeat;
}

/* 白背景用 */
.bg-white { 
  background-color: rgba(255, 255, 255, 1) !important; 
  background-image: url('../images/true-bg.png') !important;
  background-repeat: repeat;
}

/* フッター用オリーブ色 */
.bg-olive { background-color: rgba(130, 113, 83, 1) !important; }

/* 2カラムエリアの背景を画面幅（100vw）いっぱいに引き伸ばす（左右の余白の白飛び防止） */
.top-download-area,
.features-safety-area,
.bottom-download-area {
  position: relative;
  background-color: transparent !important;
  background-image: none !important;
}

.top-download-area::before,
.features-safety-area::before,
.bottom-download-area::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background-color: rgba(247, 244, 238, 1) !important;
  background-image: url('../images/true-bg.png') !important;
  background-repeat: repeat;
  z-index: -1;
}

/* 2カラムコンテナ内の子要素を完全に透明化（親の背景をそのまま見せるため） */
.two-column-container .bg-light,
.two-column-container .bg-white {
  background-color: transparent !important;
  background-image: none !important;
}

/* --- ヒーローセクションとフッターへの専用画像適用 --- */
/* ヒーローセクション */
#hero {
  background-image: url('../images/true-bg-top.png') !important;
  background-size: cover;
  background-position: center top;
}

/* フッター */
.site-footer {
  background-image: url('../images/true-bg-bottom.png') !important;
  background-size: cover;
  background-position: center bottom;
}
/* --- セクション共通設定 --- */
section {
  width: 100%;
  padding: 20px 0;
  margin: 0;
}

.section-inner {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

/* --- モバイル用ヘッダー (.site-header) --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, 1);
  border-bottom: 1px solid rgba(204, 204, 204, 1);
  display: block;
  width: 100%;
}

.header-inner {
  display: flex;
  align-items: center;
  padding: 8px 16px;
}

.header-ghost-icon {
  height: 40px;
  width: auto;
  display: block;
}



/* --- メインコンテンツラッパー (.content-wrapper) --- */
.content-wrapper {
  width: 100%;
}



/* --- 画像アスペクト比と見切れ防止設定 --- */
.image-container {
  width: 100%;
  position: relative;
  display: block;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 各画像の固有解像度に基づくアスペクト比指定 */
.hero-img-container {
  aspect-ratio: 1280 / 853; /* 1.5 */
}

.catchcopy-img-container {
  aspect-ratio: 1280 / 510; /* 2.51 */
}

.target-age-img-container {
  aspect-ratio: 1280 / 405; /* 3.16 */
}

.download-img-container {
  aspect-ratio: 1264 / 842; /* 1.5 */
}

.app-showcase-img-container {
  aspect-ratio: 984 / 1478; /* 0.67 */
}

.pain-points-img-container {
  aspect-ratio: 1246 / 758; /* 1.64 */
}

.resolve-img-container {
  aspect-ratio: 1054 / 81; /* 13.01 */
}

.features-img-container {
  aspect-ratio: 1280 / 853; /* 1.5 */
}

.safety-img-container {
  aspect-ratio: 1280 / 853; /* 1.5 */
}

.games-img-container {
  aspect-ratio: 1280 / 1026; /* 1.25 */
}

.company-img-container {
  aspect-ratio: 1264 / 796; /* 1.59 */
}

/* --- 2カラムレイアウト（PC/モバイル切り替え） --- */
.two-column-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0;
}

.two-column-container .left-col,
.two-column-container .right-col {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  .two-column-container {
    flex-direction: row;
    max-width: 1280px;
    margin: 0 auto;
  }

  /* 画像同士の横の間隔を広げる (中央に20pxの隙間) */
  .two-column-container .left-col {
    padding-right: 10px;
  }
  .two-column-container .right-col {
    padding-left: 10px;
  }

  /* 上部ダウンロードエリア (左カラム: 60.3%, 右カラム: 39.7%) */
  .top-download-area .left-col {
    width: 60.3%;
  }
  .top-download-area .right-col {
    width: 39.7%;
  }

  /* 特徴・安心設計エリア (左カラム: 50%, 右カラム: 50%) */
  .features-safety-area .left-col {
    width: 50%;
  }
  .features-safety-area .right-col {
    width: 50%;
  }

  /* 下部ダウンロードエリア (左カラム: 55.2%, 右カラム: 44.8%) */
  .bottom-download-area .left-col {
    width: 55.2%;
  }
  .bottom-download-area .right-col {
    width: 44.8%;
  }
}

/* --- フッターエリアレイアウト --- */
.site-footer {
  width: 100%;
  padding: 24px 16px;
  border-top: none;
}

.footer-inner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
}

.footer-left-col {
  width: 100%;
  display: flex;
  justify-content: center;
}

.footer-right-col {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-btn-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

@media only screen and (min-width: 768px) {
  .footer-inner-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
  }
  
  .footer-left-col {
    width: 50%;
    justify-content: flex-start;
  }
  
  .footer-right-col {
    width: 50%;
    align-items: center;
  }

  .footer-btn-group {
    align-items: center;
  }
}

/* --- 標準白背景ボタン --- */
.btn-std {
  display: block;
  width: 100%;
  max-width: 320px;
  padding: 10px 16px;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 12pt;
  font-weight: bold;
  line-height: 22px;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(133, 114, 81, 1);
  color: rgba(133, 114, 81, 1);
  border-radius: 4px;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.btn-std:hover {
  background-color: rgba(130, 113, 83, 0.1);
  opacity: 0.9;
}

/* --- X (Twitter) インラインボタン --- */
.x-button-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 6px;
  background-color: rgb(95, 99, 104);
  border-radius: 50%;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.x-button-inline:hover {
  background-color: rgb(75, 79, 84);
}

.x-icon {
  width: 16px;
  height: 16px;
  fill: #ffffff;
}

/* --- SEO: スクリーンリーダー向け非表示クラス ---
   視覚的には見えないが、検索エンジン・スクリーンリーダーには読み上げられる */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}