/* 
git add .
git commit -m "update"
git push

git pull
*/

/* ============================
   全体の基本設定
   ============================ */

/* 全要素の余白・パディングをリセットし、ボックスサイズを制御 */
* {
  box-sizing: border-box;  /* 幅や高さに padding/border を含める */
  margin: 0;               /* 外側の余白をリセット */
  padding: 0;              /* 内側の余白をリセット */
}

/* body 全体の文字設定や背景色設定 */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* システム標準フォント */
  line-height: 1.6;          /* 行間調整 */
  background-color: #f5f5f5; /* 全体背景色（薄いグレー） */
  color: #333;               /* 基本文字色（濃いグレー） */
}


/* ============================
   Header（ヘッダー）
   ============================ */

/* ヘッダー全体の背景色・中央揃え */
.site-header {
  background-color: #f0c16a93;  /* 淡いオレンジ */
  color: #3b2e07;               /* 文字色（焦げ茶） */
  padding: 16px;                /* 内側余白 */
  text-align: center;           /* ヘッダー全体を中央寄せ */
}

/* タイトル（h1）のスタイル */
.site-header h1 {
  margin-bottom: 8px;
  font-family: 'Cinzel', serif;
}


/* ナビゲーションの位置を右寄せにする */
.site-header nav {
  font-family: 'playfair display', serif ;
  text-align: right;            /* 右寄せ */
  margin-top: 8px;              /* 少し余白 */
}

/* ナビゲーションリンク */
.site-header nav a {
  color: #3b2e07;               /* リンク色（焦げ茶） */
  text-decoration: none;        /* 下線なし */
  margin-left: 16px;            /* 左に余白（リンク間の間隔） */
}

/* ホバー時に下線を表示 */
.site-header nav a:hover {
  text-decoration: underline;
}


/* ============================
   section（メインセクション）
   ============================ */

/* 各セクションボックスの装飾 */
.section {
  max-width: 800px;             /* 最大幅 800px */
  margin: 32px auto;            /* 中央寄せ＋上下余白 */
  padding: 24px;                /* 内側余白 */
  background-color: #fff;       /* 白背景 */
  border-radius: 8px;           /* 角丸 */
}


/* ============================
   中央の画像（地図＋島アイコン）
   ============================ */

/* 画像を重ねるための親コンテナ */
.image-stack {
  position: relative;           /* 子要素の absolute 位置指定が可能に */
  width: 100%;                  /* 横幅いっぱい */
  max-width: 800px;             /* 最大幅をセクションと合わせる */
  margin: 0 auto;               /* 中央寄せ */
}

/* BaseImage（地図画像）のサイズ */
.image-stack img.BaseImage {
  width: 100%;                  /* 地図画像は横幅いっぱい表示 */
  display: block;               /* 画像下の余白を消しておく */
}

/* 地図（BaseImage）のレイヤー設定 */
.BaseImage {
  position: relative;           /* 通常配置（z-indexのためにrelative） */
  z-index: 1;                   /* 下に表示（島より下） */
}

/* 島アイコン共通設定（Islands 内の全ての img） */
.Islands img {
  position: absolute;                               /* 地図の上に重ねる */
  z-index: 2;                                       /* 地図より上に表示 */
  opacity: 0.9;                                     /* 少し透明 */
  transition: transform 0.3s ease, filter 0.3s ease;/* 拡大＆グローのアニメーション */
}

/* 島アイコン共通のホバー効果（爆光グロー） */
.Islands img:hover {
  transform: scale(1.2);                            /* 拡大 */
  filter:
    drop-shadow(0 0 30px rgba(255, 255, 215, 1))    /* 内側寄りの強い光 */
    drop-shadow(0 0 50px rgba(255, 255, 255, 0.8)); /* 外側に広がる柔らかい光 */
}

/* ---- 各島ごとのサイズと位置設定 ---- */

/* Fukue のサイズと位置 */
.Fukue {
  width: 20%;    /* 大きさ */
  bottom: 5%;    /* 下からの距離 */
  left: 1.5%;    /* 左からの距離 */
}

/* Hisaka のサイズと位置 */
.Hisaka {
  width: 5%;
  bottom: 24%;
  left: 17.5%;
}

/* Naru のサイズと位置 */
.Naru {
  width: 6%;
  bottom: 28.5%;
  left: 20%;
}

/* Momiji のサイズと位置 */
.Momiji {
  width: 4%;
  bottom: 21%;
  left: 25%;
}

/* Wakamatsu のサイズと位置 */
.Wakamatsu {
  width: 6%;
  bottom: 32.5%;
  left: 24%;
}

/* Nakadoori のサイズと位置 */
.Nakadoori {
  width: 16.8%;
  bottom: 31%;
  left: 27.5%;
}

/* Ojika のサイズと位置 */
.Ojika {
  width: 5%;
  bottom: 66%;
  left: 29%;
}

/* Uku のサイズと位置 */
.Uku {
  width: 6.5%;
  bottom: 72%;
  left: 32%;
}


/* ============================
   ボタン
   ============================ */

/* ボタン全般のデザイン */
button {
  padding: 8px 16px;            /* 内側余白 */
  border-radius: 4px;           /* 角丸 */
  border: none;                 /* 枠線なし */
  cursor: pointer;              /* マウスカーソルを指マークへ */
}

/* ホバー時に少し暗くする */
button:hover {
  opacity: 0.9;
}

/* Contact ボタン独自の色 */
#contactButton {
  background-color: #007bff;    /* 青色 */
  color: #fff;                  /* 白文字 */
}


/* ============================
   Footer（フッター）
   ============================ */

/* フッターの中央揃え・背景色 */
.site-footer {
  text-align: center;           /* 中央寄せ */
  padding: 16px;                /* 内側余白 */
  background-color: #333;       /* 濃い背景色 */
  color: #fff;                  /* 白文字 */
  margin-top: 32px;             /* 上に余白 */
}

.about-text {
  text-align: center;
}
.section p {
  margin-bottom: 16px;   /* ← 段落の下に余白を追加 */
  padding: 0 40px; 
}
.copy-email {
  color: #0066cc;          /* 青色 */
  text-decoration: underline;
  cursor: pointer;
}

.copy-email {
  color: #0099ff;           /* 明るめの青 */
  text-decoration: underline;
  font-weight: bold;        /* 太字にする */
  cursor: pointer;
}

.copy-email:hover {
  color: #0077cc;           /* ホバー時は少しだけ濃く */
}


.toast {
  position: fixed;
  bottom: 100px;                  /* ← 画面下からの距離 */
  left: 50%;                     /* ← 画面中央に配置 */
  transform: translateX(-50%) translateY(20px); 
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 9999;
}