/* ベース */
* { box-sizing: border-box; }

:root{
  --bg: #52B7B3;        /* 画像の青緑に合わせたつもり：違ったらここだけ変える */
  --text: rgba(255,255,255,0.55);
  --link: #4B3F9C;      /* newsの紫っぽい色 */
}

html, body { height: 100%; }

body{
  margin: 0;
  background: var(--bg);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, -apple-system, "Noto Sans JP", sans-serif;
}

.page{
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 36px 18px 48px;
}

.notice-area{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 30px;
}

/* 2カラムにする */
.notice-wrap{
  width: min(900px, 92vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 45px;              /* ← 中央の空き 45px */
  align-items: start;
}

/* 左：アイコンは「左側の文字の上」に置く */
.notice-left{
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 12px;
}

/* テキスト共通 */
.notice-left p,
.notice-right p{
  margin: 0 0 10px;
  color: rgba(255,255,255,0.35);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
}

/* 左は右寄せ（デザイン通り） */
.notice-left{
  text-align: right;
}

/* 右は左寄せ */
.notice-right{
  text-align: left;
}

/* ありがとう文は少し詰める */
.thanks{
  margin-top: 6px;
}


/* news */
.news{
  width: min(520px, 86vw);
  text-align: center;
}

.news-title{
  margin: 600 0 8px;
  font-size: 34px;
  font-weight: 800;
  color: var(--link);
  letter-spacing: 0.02em;
}

/* 背景色は変えない＝透明のまま。枠線だけ */
.news-box{
  height: 92px;                 /* ここを変えると見える行数が変わる */
  overflow-y: auto;
  padding: 6px 10px;
  border-top: 2px solid rgba(75, 63, 156, 0.35);
  border-bottom: 2px solid rgba(75, 63, 156, 0.35);
}

/* スクロールバーが邪魔なら、ここは後で調整 */
.news-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-list li{
  margin: 6px 0;
  font-size: 14px;
  font-weight: 700;
}

.news a{
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.title-wrapper{
  position: relative;      /* 重ねるための基準 */
  width: min(860px, 92vw);
  margin: 0 auto;
}

/* 魚GIF：実寸1920pxをそのまま使う */
.fish-bg{
  position: absolute;
  left: 50%;
  bottom: -54px;
  transform: translateX(-50%);
  width: 1920px;        /* ← 拡大しない。固定 */
  height: auto;
  max-width: none;
  z-index: 1;
  pointer-events: none;
}

/* タイトル画像（上） */
.title-img{
  position: relative;
  max-width: 90vw;
  width: 900px;
  height: auto;
  z-index: 2;
  display: block;
}

.banner-wrap {
  width: 100%;
  text-align: center;
  margin-top: 12px;
}

.site-banner {
  width: 200px;
  height: 66px;
  object-fit: contain;
}

.friend-banner-wrap {
  width: 100%;
  text-align: center;
  margin-top: 6px;
}

.friend-banner {
  width: 200px;
  height: 66px;
  object-fit: contain;
  transition: opacity 0.2s ease;
}

.friend-banner:hover {
  opacity: 0.8;
}