/* かぞくにっき 公開サイト共通スタイル (ランディング / プライバシーポリシー / サポート) */
:root {
  color-scheme: light;
  --coral: #f47e72;
  --coral-deep: #d85f59;
  --brown: #b97845;
  --ink: #3e2d25;
  --soft: #806e64;
  --ivory: #fff9f2;
  --blush: #fff0e9;
  --card: #ffffff;
  --line: #eadfd6;
  --mint: #bfe6d3;
  --sky: #cde9f7;
  --purple: #8b7cc2;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: var(--coral-deep); }
.page-shell { overflow: hidden; }
.container { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.narrow { width: min(720px, calc(100% - 40px)); }

header.site {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  z-index: 5;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: .02em;
}
.brand img { width: 42px; height: 42px; object-fit: contain; }
header.site nav { display: flex; align-items: center; gap: 28px; }
header.site nav a { color: var(--soft); font-size: 14px; font-weight: 650; text-decoration: none; }
header.site nav a:hover { color: var(--coral-deep); }

.hero {
  min-height: 770px;
  display: grid;
  grid-template-columns: 1.03fr .97fr;
  align-items: center;
  gap: 50px;
  padding-block: 54px 72px;
}
.eyebrow {
  margin: 0 0 12px;
  color: var(--coral-deep);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
}
.hero h1 {
  margin: 0;
  font-size: clamp(43px, 5.2vw, 72px);
  line-height: 1.17;
  letter-spacing: -.04em;
}
.hero h1 span { color: var(--coral-deep); }
.lead {
  max-width: 610px;
  margin: 30px 0 0;
  color: var(--soft);
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.95;
}
.hero-actions { display: flex; align-items: center; gap: 18px; margin-top: 34px; flex-wrap: wrap; }
.store-badge {
  min-width: 176px;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border-radius: 15px;
  background: var(--ink);
  color: white;
  padding: 9px 20px;
  text-decoration: none;
  font-size: 18px;
  font-weight: 750;
  line-height: 1.15;
  box-shadow: 0 12px 30px rgb(62 45 37 / 15%);
}
.store-badge[aria-disabled="true"] { cursor: default; }
.store-badge small { display: block; font-size: 10px; font-weight: 500; opacity: .8; }
.apple-mark {
  width: 25px;
  height: 29px;
  display: grid;
  place-items: center;
  font-size: 22px;
  color: white;
}
.availability { color: var(--soft); font-size: 13px; }
.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.hero-points li {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(255 255 255 / 70%);
  padding: 7px 12px;
  color: var(--soft);
  font-size: 12px;
  font-weight: 650;
}
.hero-copy { position: relative; z-index: 3; }
.hero-copy .lead { max-width: 460px; }
.hero-points li::before { content: "✓"; margin-right: 5px; color: var(--coral-deep); font-weight: 900; }
.hero-visual { position: relative; align-self: end; min-height: 670px; display: grid; place-items: end center; }
.hero-visual > img:first-of-type {
  position: relative;
  z-index: 2;
  width: auto;
  height: min(680px, 72vh);
  max-width: 92%;
}
.hero-glow {
  position: absolute;
  inset: 7% -11% 1%;
  border-radius: 48% 52% 44% 56%;
  background: linear-gradient(145deg, #ffe8d9, #f7b8ad);
  transform: rotate(-5deg);
}
.hero-mascot {
  position: absolute;
  z-index: 3;
  width: 142px;
  right: -3%;
  bottom: 4%;
  filter: drop-shadow(0 14px 18px rgb(62 45 37 / 18%));
}

.trust-strip { background: var(--card); border-block: 1px solid var(--line); }
.trust-items { display: grid; grid-template-columns: repeat(3, 1fr); }
.trust-items p { margin: 0; padding: 22px 34px; display: flex; align-items: baseline; gap: 12px; }
.trust-items p + p { border-left: 1px solid var(--line); }
.trust-items strong { color: var(--ink); font-size: 14px; }
.trust-items span { color: var(--soft); font-size: 12px; }

.intro { max-width: 760px; padding-block: 112px 90px; text-align: center; }
.intro h2,
.showcase h2,
.privacy-section h2,
.closing h2,
.feature-cards > h2 {
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.35;
  letter-spacing: -.035em;
}
.intro > p:last-child { max-width: 620px; margin: 24px auto 0; color: var(--soft); font-size: 17px; }

.showcase { display: grid; gap: 78px; }
.showcase-row {
  min-height: 650px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
}
.showcase-row.reverse .showcase-copy { order: 2; }
.showcase-row.reverse .showcase-shot { order: 1; }
.showcase-copy { position: relative; padding: 20px 0; }
.showcase-copy .number {
  position: absolute;
  top: -28px;
  right: 4%;
  color: var(--coral);
  font-size: 92px;
  font-weight: 900;
  line-height: 1;
  opacity: .08;
}
.showcase-copy > p:not(.eyebrow) { margin: 24px 0 0; color: var(--soft); font-size: 16px; }
.mint-text { color: #4a9d82; }
.purple-text { color: var(--purple); }
.showcase-shot {
  height: 650px;
  display: grid;
  place-items: end center;
  overflow: hidden;
  border-radius: 42px;
}
.showcase-shot.peach { background: linear-gradient(145deg, #fff2e8, #f7c8ad); }
.showcase-shot.mint { background: linear-gradient(145deg, #effbf5, #bfe6d3); }
.showcase-shot img { width: 360px; height: auto; transform: translateY(96px); }

.feature-cards { padding-block: 120px; }
.feature-cards > h2 { margin-bottom: 42px; text-align: center; font-size: clamp(30px, 3vw, 42px); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card {
  min-height: 270px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--card);
  padding: 32px;
  box-shadow: 0 12px 40px rgb(62 45 37 / 5%);
}
.card-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  font-size: 27px;
  font-weight: 800;
}
.card-icon.coral { background: var(--blush); color: var(--coral-deep); }
.card-icon.blue { background: var(--sky); color: #4388a7; }
.card-icon.yellow { background: #fff3c4; color: #9d7839; }
.card h3 { margin: 24px 0 10px; font-size: 20px; }
.card p { margin: 0; color: var(--soft); font-size: 14px; }

.privacy-section { background: #f4f0fb; }
.privacy-inner {
  min-height: 760px;
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  align-items: center;
  gap: 80px;
  padding-block: 94px;
}
.privacy-copy > p:not(.eyebrow) { margin: 25px 0; color: var(--soft); font-size: 16px; }
.privacy-copy ul { margin: 24px 0; padding: 0; list-style: none; }
.privacy-copy li { position: relative; margin: 12px 0; padding-left: 28px; color: var(--ink); font-size: 14px; font-weight: 650; }
.privacy-copy li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--purple);
  font-weight: 900;
}
.text-link { display: inline-block; margin-top: 12px; color: var(--ink); font-weight: 750; text-decoration: none; border-bottom: 1px solid currentColor; }
.privacy-shot {
  height: 590px;
  display: grid;
  place-items: start center;
  overflow: hidden;
  border-radius: 42px;
  background: linear-gradient(145deg, #fff, #ddd3f2);
}
.privacy-shot img { width: 350px; height: auto; transform: translateY(56px); }

.closing { padding-block: 120px; text-align: center; }
.closing img { margin: 0 auto 4px; }
.closing h2 { margin-bottom: 32px; }
.closing .store-badge { margin: 0 auto; }
.closing .availability { display: block; margin-top: 14px; }

footer.site {
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--line);
  color: var(--soft);
  font-size: 12px;
}
.footer-brand { color: var(--ink); font-weight: 800; font-size: 15px; }
.footer-brand small { color: var(--soft); font-weight: 500; }
footer.site nav { display: flex; gap: 24px; }
footer.site a { color: var(--soft); text-decoration: none; }

main.doc { padding: 26px 0 80px; }
main.doc h1 { margin-top: 30px; padding-bottom: 14px; border-bottom: 2px solid var(--coral); font-size: 30px; line-height: 1.4; }
main.doc h2 { margin-top: 42px; font-size: 21px; }
main.doc h3 { margin-top: 28px; font-size: 17px; }
main.doc p, main.doc li { color: var(--soft); }
main.doc ul, main.doc ol { padding-left: 1.25rem; }
main.doc li { margin-bottom: 6px; }
main.doc li > ul { margin-top: 6px; }
main.doc strong { color: var(--ink); }

@media (max-width: 860px) {
  header.site { min-height: 70px; }
  header.site nav a:first-child,
  header.site nav a:nth-child(2) { display: none; }
  .hero { grid-template-columns: 1fr; gap: 40px; padding-block: 48px 0; text-align: center; }
  .hero-copy { max-width: 660px; margin-inline: auto; }
  .hero-copy .lead { max-width: none; }
  .hero-actions, .hero-points { justify-content: center; }
  .hero-visual { min-height: 610px; }
  .hero-visual > img:first-of-type { height: min(600px, 62vh); max-width: 76vw; }
  .hero-mascot { right: 8%; }
  .trust-items { grid-template-columns: 1fr; }
  .trust-items p { justify-content: center; padding: 14px 12px; }
  .trust-items p + p { border-left: 0; border-top: 1px solid var(--line); }
  .showcase-row,
  .privacy-inner { grid-template-columns: 1fr; gap: 42px; }
  .showcase-row.reverse .showcase-copy,
  .showcase-row.reverse .showcase-shot { order: initial; }
  .showcase-copy { text-align: center; }
  .showcase-shot { height: 560px; }
  .privacy-inner { padding-block: 76px 0; text-align: center; }
  .privacy-copy li { width: fit-content; margin-inline: auto; text-align: left; }
  .privacy-shot { width: 100%; max-width: 560px; margin-inline: auto; height: 550px; }
  .grid { grid-template-columns: 1fr; }
  .card { min-height: 0; }
}

@media (max-width: 560px) {
  .container, .narrow { width: min(100% - 28px, 1120px); }
  header.site nav { gap: 0; }
  .brand img { width: 36px; height: 36px; }
  .hero { min-height: auto; padding-top: 40px; }
  .hero h1 { font-size: 43px; }
  .lead { font-size: 15px; }
  .hero-actions { flex-direction: column; }
  .hero-visual { min-height: 540px; }
  .hero-mascot { width: 105px; right: 0; }
  .intro { padding-block: 84px 65px; }
  .intro h2, .showcase h2, .privacy-section h2, .closing h2 { font-size: 32px; }
  .showcase { gap: 70px; }
  .showcase-shot { height: 500px; border-radius: 30px; }
  .showcase-shot img { width: 310px; transform: translateY(84px); }
  .feature-cards { padding-block: 84px; }
  .card { padding: 26px; }
  .privacy-inner { gap: 34px; }
  .privacy-shot { height: 490px; border-radius: 30px; }
  .privacy-shot img { width: 305px; transform: translateY(48px); }
  .closing { padding-block: 88px; }
  footer.site { padding-block: 28px; flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}