@charset "utf-8";

/* ===== Theme Colors ===== */
:root {
  --ink: #232323;           /* 本文色（黒） */
  --accent-red: #b93a3a;    /* 落ち着いた赤 */
  --accent-blue: #2f8fbf;   /* 深めの水色 */
  --edge: #e8f1f6;          /* 淡い枠線 */
  --card: #ffffff;          /* カード背景 */
  --bg-top: #ffffff;        /* 背景上 */
  --bg-bottom: #f3f9fc;     /* 背景下 */
}

/* ===== Base ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 画面全体を使用・スクロール禁止 */
html, body {
  height: 100dvh;
  overflow: hidden;
}

/* 背景グラデーション */
html {
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}

/* 中央寄せ配置 */
body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: transparent;
  font-family: 'Noto Sans JP', system-ui, sans-serif;
  text-align: center;
  color: var(--ink);
  line-height: 1.7;
}

/* ===== Layout ===== */
.wrap {
  max-width: min(980px, 92vw);
  margin: 0 auto;
  padding: 0 16px;
}

/* ===== Key Visual ===== */
.kv {
  margin: 0 auto 24px;
  padding: 20px;
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 6px 20px rgba(35, 35, 35, .08);
}
.kv img {
  display: block;
  width: 80%;
  max-width: 600px;
  height: auto;
  border-radius: 12px;
  margin: 0 auto;
}

/* ===== Note Text ===== */
.note {
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.8;
  color: var(--accent-blue);
  margin-top: 12px;
}
.note a {
  color: var(--accent-red);
  text-decoration: underline;
}
.note a:hover {
  opacity: 0.8;
}

.norap{
	display: inline-block;
}
/* ===== Mobile (幅600px以下) ===== */
@media (max-width: 600px){
  body {
    padding: 4vh 0;          /* 少し上下に余裕をとる */
  }
  .wrap {
    padding: 0 12px;
  }
  .kv {
    border-radius: 14px;
    padding: 10px;
  }
  .kv img {
    border-radius: 10px;
  }
  .note {
    font-size: 15px;
    margin-top: 20px;
  }
}

/* ===== 画面が極端に低い端末（高さ600px以下） ===== */
@media (max-height: 600px) {
  body {
    overflow-y: auto;       /* 内容が入りきらない場合だけスクロールを許可 */
  }
  .kv { padding: 10px; }
}

/* ===== iOSビュー調整 ===== */
@supports (-webkit-touch-callout: none){
  html, body {
    min-height: -webkit-fill-available;
  }
}

/* ===== タップ強調を弱める ===== */
a {
  -webkit-tap-highlight-color: rgba(0,0,0,.06);
}
/* ===== バナー追加 ===== */
.banner {
  margin-top: 45px;
}
.banner img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transition: transform 0.2s ease;
}
.banner img:hover {
  transform: scale(1.02);
}

@media (max-width: 600px){
 .banner {
  margin: 45px 20px 0px;
	}
}