/* グローバルCSSファイル - しまのくま */
/* LandingPageと同じカラースキーム、フォント、基本スタイル */

/* デバッグ用：Tailwind CDNが読み込まれなくても最低限表示されるようにする */
#regionModal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  background-color: rgba(255, 249, 240, 0.98) !important; /* ベージュ系の背景色 */
  backdrop-filter: blur(10px) !important;
  /* display: flex !important; ← 削除: JavaScriptで制御 */
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
}

/* モーダルが表示されている時のスタイル */
#regionModal[style*="display: flex"] {
  display: flex !important;
}

/* モーダルが非表示の時 */
#regionModal[style*="display: none"] {
  display: none !important;
}

#regionModal button {
  cursor: pointer !important;
  transition: transform 0.2s !important;
}

#regionModal button:hover {
  transform: scale(1.1) !important;
}

#regionModal img {
  max-width: 100% !important;
  height: auto !important;
}

/* カラースキーム定義 */
:root {
  --main-color: #F5E6D3;
  --accent-soft-green: #B8D4A8;
  --accent-soft-pink: #F4C4C4;
  --accent-soft-blue: #C4D7F2;
  --accent-warm-orange: #FFD4A3;
  --text-primary: #5A5A5A;
  --text-dark: #3D3D3D;
  --bg-cream: #FFF9F0;
  --bg-beige: #FAF5EF;
  --shadow-soft: 0 3px 15px rgba(0, 0, 0, 0.08);
}

/* グローバルなレスポンシブ設定 */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 基本フォント設定 */
body {
  font-family: 'Hiragino Maru Gothic ProN', 'ヒラギノ丸ゴ ProN', 'メイリオ', Meiryo, 'MS PGothic', sans-serif;
  color: var(--text-primary);
  line-height: 2;
  background: var(--bg-cream);
  letter-spacing: 0.05em;
}

/* レスポンシブ対策用のクラス */
.break-keep {
  word-break: normal;
  overflow-wrap: break-word;
  line-break: auto; /* 自動で適切な改行位置を判断 */
  text-wrap: pretty; /* 段落用: 最後の行が短すぎるのを防ぐ */
}

.text-balance {
  text-wrap: balance; /* 見出し用: 各行の長さを均等に */
}

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

.fade-in-up {
  animation: fadeInUp 0.8s ease-out;
}

/* FOUC防止: ページ全体を非表示にして、Tailwind読み込み後に表示 */
body {
  opacity: 0;
  transition: opacity 0.15s ease-in;
}

body.loaded {
  opacity: 1;
}

/* 地域選択モーダルだけは即座に表示 */
#regionModal {
  opacity: 1 !important;
}

/* 地域選択モーダル表示時のメインコンテンツ制御 */
.js-enabled main,
.js-enabled header {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.js-enabled.region-selected main,
.js-enabled.region-selected header {
  opacity: 1;
}

.js-enabled main.visible,
.js-enabled header.visible {
  opacity: 1;
}

/* 地域別コンテンツの表示制御 */
html[data-region="overseas"] .region-fukushima,
html[data-region="overseas"] .region-nationwide {
  display: none !important;
}

html[data-region="fukushima"] .region-overseas,
html[data-region="fukushima"] .region-nationwide {
  display: none !important;
}

html[data-region="nationwide"] .region-overseas,
html[data-region="nationwide"] .region-fukushima {
  display: none !important;
}

/* 共通のナビゲーション要素スタイル */
.nav-item {
  position: relative;
  transition: color 0.3s;
}

.nav-item::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 3px;
  background-color: currentColor;
  border-radius: 99px;
  transition: width 0.3s;
}

.nav-item:hover::after {
  width: 100%;
}

/* ポップシャドウエフェクト */
.box-shadow-pop {
  box-shadow: 5px 5px 0px rgba(251, 191, 36, 0.4);
}

/* マーカーハイライト */
.marker-yellow {
  background: linear-gradient(transparent 60%, #fde047 60%);
}

/* ペーパーテクスチャ背景 */
.texture-paper {
  background-color: rgba(255, 255, 255, 0.6);
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23f9a8d4' fill-opacity='0.15' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* 波線アンダーライン */
.wavy-line {
  text-decoration: underline wavy #fda4af;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

/* 地域選択コンテンツのデフォルト表示制御 */
/* JavaScriptで制御するため、CSSでは何もしない */
/* region-toggle.jsがデフォルトで'nationwide'を設定し、display制御を行う */