/* ▼ Google Fontsの読み込み */ 
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* ▼ 共通スタイル（PC・スマホ共通） */
html {
  height: 100vh;
  overflow: hidden;
}

 body {
  height: 100vh;
  overflow: visible;
  margin: 0;
  padding: 0;
  background-color: #8ab6d1;
  font-family: 'Helvetica Neue', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.container {
  position: relative;
  overflow: visible;
  width: 100%;
  max-width: 1500px;
  margin: 40px auto 0 auto;
}

.image-frame {
      display: block;
      outline: 2px solid white;
      outline-offset: 12px;
      width: 100%; /* コンテナいっぱい */
    }

    .main-image {
      width: 2000px;
      height: 700px; /* ← ここで縦を短く、横長に見せる */
      object-fit: cover;
      object-position: center;
      display: block;
      object-fit: cover;
    }


/* ▼ サイト名とサブタイトル */
.text-overlay {
  position: absolute;
  top: -6%;
  left: -2%;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.text-overlay h1 {
  font-family: 'Krona One', serif;
  font-size: 5em;
  font-weight: 600;
  margin: 0;
  line-height: 1;
}

.text-overlay p {
  font-family: 'Caveat', serif;
  font-size: 1.8em;
  margin-top: 0.4em;
  letter-spacing: 1px;
}

/* ▼ ナビゲーション（画像の下に重ねて表示） */
.nav-overlay.bottom {
  position: absolute;
  bottom: 16%;
  left: 0;
  display: flex;
  gap: 20px;
  z-index: 2;
padding-left: 50px;
}

.nav-overlay.bottom a {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.30);
  padding: 6px 18px;
  border-radius: 0px;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s ease;
}

.nav-overlay.bottom a:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

/* ▼ 更新日表示 */
.update-info {
  position: absolute;
  bottom: 10%;
  left: 2.5%;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.date-button {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.25);
  padding: 3px 10px;
  text-decoration: none;
  border: none;
  border-radius: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s ease;
}

.date-button:hover {
  background-color: rgba(255, 255, 255, 0.4);
}


/* ▼ クレジット表示（画像の外、右下） */
.credit-text {
  text-align: right;
  font-size: 0.9em;
  margin-top: 15px;
  margin-right: 12px;
  color: rgba(255, 255, 255, 0.75);
  font-family: 'Montserrat', sans-serif;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}