/* ===== ベース ===== */
:root {
  --blue: #29a3dc;
  --blue-dark: #1f8ac0;
  --ink: #333333;
  --ink-soft: #555555;
  --line: #e6e6e6;
  --bg-alt: #f5fafd;
  --yellow: #f0b21f;
  --red: #cc2329;
  --step1-bg: #bce6fb;
  --step2-bg: #7dcff7;
  --footer-bar: #0645d8;
  --serif: "Sawarabi Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
  --max: 960px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
  line-height: 1.9;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--blue-dark); }

/* ===== スクロール表示アニメーション ===== */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}
[data-reveal="up"]    { transform: translateY(42px); }
[data-reveal="right"] { transform: translateX(-48px); }
[data-reveal="fade"]  { transform: none; }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ===== ヒーロー ===== */
.hero {
  position: relative;
  text-align: center;
  padding: 88px 20px 72px;
  background: url("../images/first-view-background.jpg") center center / cover no-repeat;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.55) 40%, rgba(255,255,255,0.4) 100%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

.hero__logo {
  width: min(320px, 72vw);
  margin: 0 auto 26px;
}

.hero__tagline {
  font-size: clamp(1rem, 3.6vw, 1.35rem);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 30px;
  letter-spacing: 0.02em;
}

/* ===== ストアボタン ===== */
.store-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
}

.store-buttons__link {
  display: inline-block;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.store-buttons__link:hover { transform: translateY(-2px); opacity: 0.9; }
.store-buttons__link img { height: 52px; width: auto; }

/* ===== コンセプト（全面背景画像） ===== */
.concept {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 68vh;
  padding: 80px 24px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.concept::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.18) 45%, rgba(0,0,0,0) 70%);
  pointer-events: none;
}
.concept--top    { background-image: url("../images/body-top-background.jpg"); }
.concept--center { background-image: url("../images/body-center-background.jpg"); }

.concept__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
}
.concept__text {
  max-width: 540px;
  margin: 0 0 24px;
  color: #ffffff;
  font-family: var(--serif);
  font-size: clamp(1rem, 2.9vw, 1.2rem);
  line-height: 2.1;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}
.concept__text:last-child { margin-bottom: 0; }

/* ===== 手順セクション ===== */
.step {
  padding: 64px 24px;
  background: var(--step1-bg);
}
.step > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.step--alt { background: var(--step2-bg); }

/* 手順: 2カラム（スマホ左 / 内容右） */
.step__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(28px, 5vw, 60px);
}
.step__phone { margin: 0; flex: 0 0 auto; }
.step__phone img { width: min(250px, 62vw); filter: drop-shadow(0 12px 24px rgba(0,0,0,0.14)); }

.step__content { flex: 1 1 400px; min-width: 300px; max-width: 560px; }

.step__title {
  text-align: left;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 4.8vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 24px;
  color: #1a1a1a;
}
.step__num { color: #1a1a1a; font-weight: 800; margin-right: 4px; }

/* グリッド説明図 + 説明文 の横並び */
.step__explain {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 3vw, 28px);
  margin-bottom: 30px;
}
.step__grid { width: clamp(140px, 34%, 180px); height: auto; flex: 0 0 auto; }
.step__desc { flex: 1 1 auto; }
.step__desc-text {
  margin: 0 0 14px;
  color: #111111;
  font-family: var(--serif);
  font-size: clamp(0.95rem, 2.3vw, 1.05rem);
  letter-spacing: 0.1em;
  line-height: 2;
}
.step__desc-text:last-child { margin-bottom: 0; }
.step__note {
  margin: 6px 0 0;
  color: #333333;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

/* 凡例: 縦並び（本アイコン + 色付きラベル） */
.legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.legend__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.legend__icon { width: 36px; height: auto; flex: 0 0 auto; }
.legend__label {
  font-family: var(--serif);
  font-size: clamp(0.95rem, 2.4vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.12em;
}
.legend__label--blue   { color: #108ce6; }
.legend__label--yellow { color: #e5a315; }
.legend__label--red    { color: #aa081a; }

/* 手順2: 書き込みボタン + 説明 */
.step__explain--write { align-items: center; }
.write-info__button { width: 72px; height: auto; flex: 0 0 auto; }

/* ===== フッター ===== */
.footer__main {
  text-align: center;
  padding: 60px 24px 52px;
  background: #ffffff;
}
.footer__logo { width: min(220px, 56vw); margin: 0 auto 28px; }
.footer__main .store-buttons { margin-bottom: 0; }

.footer__bar {
  background: var(--footer-bar);
  padding: 20px clamp(20px, 6vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer__contact {
  color: #ffffff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer__contact:hover { opacity: 0.85; }
.footer__copy {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.8);
}

/* ===== レスポンシブ ===== */
.sp-only { display: none; }
@media (max-width: 600px) {
  .sp-only { display: inline; }
  .store-buttons__link img { height: 46px; }
  .step__content { max-width: 100%; }
  .step__title { text-align: center; }
}
@media (max-width: 420px) {
  .step__explain { flex-direction: column; align-items: center; text-align: center; }
  .step__grid { width: 200px; }
}