@charset "UTF-8";

/* =========================================================
   ぼくのもじ LP
   アプリ（iOS/Bokumozi）のデザイントークンをそのまま持ち込む。
   - 色      : AppColor（Assets.xcassets）／AppTheme のきいろセット
   - 文字    : Klee One（AppTypography と同じ教科書体）
   - 角丸    : Radius
   - 余白    : Spacing
   これらの数値はアプリ側の定義が出どころ。アプリを変えたらここも合わせる。
   ========================================================= */

/* ---------- フォント（アプリ同梱の Klee One / SIL Open Font License） ---------- */
@font-face {
  font-family: "Klee One";
  src: url("fonts/KleeOne-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Klee One";
  src: url("fonts/KleeOne-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/* ---------- トークン ---------- */
:root {
  /* AppColor */
  --bg:        #FFFFFF;
  --surface:   #FFFFFF;
  --text:      #1C1C1E;
  --text-2:    #8A8A8E;
  --border:    #E5E5EA;
  --field:     #F2F2F7;
  /* 色の付いた面（「見本のもじにも、理由があります」「広告は出しません」）。
     テーマの黄色をごく薄く敷いたもの。灰色より、アプリの世界に近い。 */
  --tint:      #FFF8E6;

  /* AppTheme.yellow（アプリアイコンと同じセット） */
  --primary:   #F4B400;
  --secondary: #FFD84D;
  --tertiary:  #A8D84B;
  --accent:    #5FD0A8;
  --dec-1:     #5BD1E6;
  --dec-2:     #FF9F43;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-xxl: 28px;
  --r-pill: 999px;

  /* Spacing */
  --s-xs: 4px;
  --s-s: 8px;
  --s-m: 12px;
  --s-l: 16px;
  --s-xl: 20px;
  --s-xxl: 24px;
  --s-xxxl: 32px;
  --s-huge: 40px;

  --wrap: 1120px;

  /* 影は「浮かせたい所だけ」に絞って使う。枠線と併用すると濁るため、
     写真やウィジェットなど、面として立たせたいものに限る。 */
  --shadow-soft: 0 18px 40px rgba(28, 28, 30, .10);
  --shadow-lift: 0 10px 24px rgba(28, 28, 30, .12);

  /* ライト固定。端末がダークでもブラウザに勝手に反転させない。 */
  color-scheme: light;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Klee One", "Hiragino Mincho ProN", serif;
  font-size: 17px;              /* AppFont.body */
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  letter-spacing: .01em;
}

p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-xl);
}

/* 日本語は1文字だけ最終行に落ちると読みにくい。
   auto-phrase は文節の切れ目で折り返してくれる。 */
.lead, .section__lead, .feature__body,
.safety__body, .hero__tagline, .quote__sub {
  text-wrap: pretty;
  word-break: auto-phrase;
}

.lead {
  color: var(--text-2);
  font-size: 17px;
  margin-block: var(--s-l) 0;
}

.note {
  color: var(--text-2);
  font-size: 13px;               /* AppFont.footnote */
  margin-top: var(--s-m);
}

/* セクションの小見出し。本文より先に「何の話か」を示す。 */
/* ---------- ボタン（PrimaryButton と同じ：高さ56 / 角丸20 / 塗り） ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding-inline: var(--s-xxxl);
  border-radius: var(--r-xl);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:active { transform: scale(.98); }

.btn--primary {
  background: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(244, 180, 0, .32);
}
.btn--primary:hover {
  box-shadow: 0 12px 26px rgba(244, 180, 0, .42);
}

.btn--ghost {
  height: 40px;
  padding-inline: var(--s-xl);
  font-size: 15px;
  background: var(--field);
  color: var(--text);
}
.btn--ghost:hover { background: #E8E8EE; }

/* 公開前の「準備中」。押せないので、リンク（a）ではなく span で置く。
   色をそのまま使うと押せそうに見えるので、彩度を落として陰も消す。 */
.btn--soon {
  background: color-mix(in srgb, var(--primary) 38%, var(--field));
  color: color-mix(in srgb, var(--text) 55%, var(--text-2));
  box-shadow: none;
  cursor: default;
}
.btn--soon:hover { background: color-mix(in srgb, var(--primary) 38%, var(--field)); }

/* ヘッダーの「まもなく公開」。ボタンに見えないよう、枠だけの札にする。 */
.badge {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding-inline: var(--s-xl);
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 15px;
  white-space: nowrap;
}

.btn--large {
  height: 60px;
  padding-inline: var(--s-huge);
  font-size: 18px;
}

/* ---------- カード ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-xxl);
}

/* ---------- ヘッダー ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-l);
  padding: var(--s-m) var(--s-xl);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: var(--s-m);
  text-decoration: none;
}
.site-header__logo img:first-child { border-radius: 9px; }
.site-header__wordmark { height: 19px; width: auto; }

/* ---------- 幾何学装飾（アプリの DecorationBackground と同じ考え方） ---------- */
.deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: .85;
}
.deco img { width: 100%; }

/* 画面幅に対する % で置くと、幅がラップ幅（1120px）を少し超えたあたりで
   本文の左端に食い込む。ラップ枠の左外側（余白）を基準に置いて、
   どの幅でも文字に重ならないようにする。 */
.deco--flower {
  width: 92px;
  top: 6%;
  left: calc(50% - var(--wrap) / 2 - 74px);
  rotate: -12deg;
}
/* 写真とボタンが主役なので、大きな円は端に逃がして薄く添えるだけにする。 */
.deco--circle { width: 132px; bottom: -2%; left: -6%; opacity: .5; }
.deco--tulip  { width: 76px;  top: 14%;   left: 6%;   rotate: -8deg; }
.deco--dots   { width: 104px; bottom: 10%; right: 5%; border-radius: var(--r-lg); overflow: hidden; }

@media (max-width: 900px) {
  .deco--flower { width: 52px; top: 18px; left: 2%; }
  .deco--circle { width: 74px; bottom: 1%; left: -7%; }
  .deco--tulip  { width: 48px; top: 3%; left: 3%; }
  .deco--dots   { width: 58px; bottom: 4%; right: 3%; }
}

/* ---------- ヒーロー ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(40px, 6vw, 80px) clamp(56px, 9vw, 112px);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* 左端いっぱいに寄せると、左の飾りとぶつかるうえ写真との間が空きすぎる。
   文字とボタンのかたまりを、左端と写真のあいだで中央に置く。 */
.hero__text { justify-self: center; }

.hero__wordmark { width: min(252px, 60vw); margin-bottom: var(--s-xxl); }

.hero__tagline {
  font-size: clamp(30px, 4.8vw, 46px);
  line-height: 1.45;
}

/* 見出しの直後にボタンが来るので、間はやや広めに取る。 */
.hero__cta { margin-top: var(--s-huge); }

/* 写真の上にウィジェットを重ねて、「書いた字が時計になる」を1枚で見せる。 */
.hero__figure {
  position: relative;
  margin: 0;
  padding-bottom: 34px;
  padding-left: 34px;
}

.hero__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 38% 50%;
  border-radius: var(--r-xxl);
  box-shadow: var(--shadow-soft);
}

.hero__widget {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(46%, 230px);
  padding: var(--s-xl) var(--s-l);
  background: var(--surface);
  border-radius: var(--r-xxl);
  box-shadow: var(--shadow-soft);
}

@media (max-width: 900px) {
  .hero { padding-block: 72px 56px; }
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__wordmark { margin-inline: auto; }
  .hero__figure { max-width: 460px; margin-inline: auto; }
}

/* ---------- セクション共通 ---------- */
.section {
  position: relative;
  padding-block: clamp(64px, 9vw, 112px);
}
.section, .cta, .hero, .quote { scroll-margin-top: 72px; }

.section--tinted { background: var(--tint); }

.section__title {
  font-size: clamp(25px, 3.4vw, 35px);
  text-align: center;
  /* Klee One には Regular(400) と SemiBold(600) しか無く、600 が最も太い。
     font-weight:700 を指定するとブラウザが太らせる（合成ボールド）ことになり、
     日本語だとにじんで見える。代わりに、文字のふちを少しだけ太らせて
     見た目の太さを出す。em で指定して、字の大きさに追従させる。 */
  -webkit-text-stroke: 0.02em currentColor;
  paint-order: stroke fill;
}
.section__title--left { text-align: left; }

.section__lead {
  color: var(--text-2);
  text-align: center;
  font-size: 16px;
  margin-top: var(--s-l);
}

/* ---------- 3つの特徴 ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-xl);
  margin-top: clamp(36px, 5vw, 60px);
}

.feature { transition: transform .2s ease, box-shadow .2s ease; }
.feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.feature__shot {
  margin: 0 0 var(--s-l);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg);
}

/* 画面写真は3枚とも同じ大きさ・同じ形なので、そのまま並べれば高さがそろう。 */
.feature__shot img {
  display: block;
  width: 100%;
  height: auto;
}

.feature__title {
  font-size: 20px;
  margin-bottom: var(--s-s);
}

.feature__body {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .features { grid-template-columns: 1fr; }

  /* 1列のときは、見出しと説明を先に読ませてから写真を見せる
     （写真が縦に長いので、上に置くと説明まで遠くなる）。 */
  .feature { display: flex; flex-direction: column; text-align: center; }
  .feature__title { order: 1; }
  .feature__body { order: 2; }

  /* 1列になると画面写真が横いっぱいに伸びて、実機よりずっと大きく見える。
     スマホの画面らしい幅で止めて、カードの中で中央に置く。 */
  .feature__shot {
    order: 3;
    max-width: 280px;
    margin: var(--s-l) auto 0;
  }
}

/* ---------- 情緒帯（写真の上に一言） ---------- */
.quote {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(320px, 42vw, 460px);
  overflow: hidden;
}

.quote__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  z-index: -2;
}

/* 文字は写真の被写体の上にくるので、膜は濃いめにかける。
   中央をいちばん暗くして、写真の明暗にかかわらず白文字が浮くようにする。 */
.quote::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 78% 62% at 50% 50%, rgba(28,28,30,.62), rgba(28,28,30,.30) 70%),
    linear-gradient(180deg, rgba(28,28,30,.34), rgba(28,28,30,.52));
  z-index: -1;
}

.quote__inner { text-align: center; color: #FFFFFF; }

.quote__text {
  font-size: clamp(24px, 3.8vw, 38px);
  font-weight: 600;
  line-height: 1.6;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
}

.quote__sub {
  margin-top: var(--s-l);
  font-size: 16px;
  color: rgba(255, 255, 255, .94);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
}

/* ---------- 2カラム（しゃしん） ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.split__text .lead + .lead { margin-top: var(--s-xl); }

/* アプリは写真を正方形で保存するので、ここも正方形にそろえる。 */
.photo-card {
  margin: 0;
  max-width: 400px;
  margin-inline: auto;
  background: var(--surface);
  border-radius: var(--r-xxl);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.photo-card img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  /* 1列になったら、見出しだけでなく本文も中央にそろえる
     （見出しが中央・本文が左のままだと、行の頭がずれて落ち着かない）。
     .section__title--left は左寄せを指定しているので、こちらでも上書きする。 */
  .split__text { text-align: center; }
  .split__text .section__title--left { text-align: center; }
}

/* ---------- 教科書体の比較 ---------- */
.compare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-xl);
  margin-top: clamp(36px, 5vw, 60px);
}

/* 比較の2枚は、他のカードより角を大きく丸める。
   四角い枠だと「見比べる表」に見えて、アプリの柔らかさと合わないため。
   2枚は対で見せるので、片方だけ丸めず、必ず同じ形にする。 */
.compare__item {
  background: var(--surface);
  text-align: center;
  border-radius: 36px;
}

.compare__label { color: var(--text-2); font-size: 13px; }

.compare__glyphs {
  font-size: clamp(52px, 9vw, 82px);
  line-height: 1.5;
  margin-block: var(--s-m);
}

/* 比較のため、こちらだけ端末標準の日本語フォントで描く。 */
.compare__glyphs--system {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

.compare__note { font-size: 15px; color: var(--text-2); }
.compare__item--good {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  box-shadow: var(--shadow-lift);
}
.compare__item--good .compare__note {
  color: color-mix(in srgb, var(--primary) 82%, var(--text));
  font-weight: 600;
}

@media (max-width: 640px) {
  .compare { grid-template-columns: 1fr; }
}

/* ---------- テーマ ---------- */
.themes {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--s-l);
  margin-top: clamp(36px, 5vw, 60px);
}

.theme {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-l) var(--s-s);
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.theme:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

/* 実際に背景で使っている図形をそのまま見せる。色見本より、
   画面がどう変わるのかが伝わる。 */
.theme__shapes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: var(--s-s);
  margin-bottom: var(--s-m);
}
.theme__shapes img { width: 100%; height: auto; }

.theme__name { font-size: 14px; }

@media (max-width: 900px) { .themes { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 460px) { .themes { grid-template-columns: repeat(3, 1fr); } }

/* ---------- あんしん ---------- */
.safety__photo {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-xxl);
  margin-inline: auto;
  box-shadow: var(--shadow-soft);
}

/* ---------- 最後のCTA ---------- */
.cta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(72px, 10vw, 128px);
  background: color-mix(in srgb, var(--secondary) 20%, var(--bg));
}

.cta__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  display: grid;
  justify-items: center;
}

.cta__icon {
  border-radius: 20px;
  margin-bottom: var(--s-xxl);
  box-shadow: var(--shadow-lift);
}

.cta__title { font-size: clamp(25px, 3.6vw, 36px); }
.cta .lead { max-width: 34em; }
.cta .btn { margin-top: var(--s-xxxl); }

/* ---------- フッター ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding-block: var(--s-huge);
}

.site-footer__inner {
  display: grid;
  justify-items: center;
  gap: var(--s-l);
  text-align: center;
}

.site-footer__copy, .site-footer__credit {
  color: var(--text-2);
  font-size: 13px;
}
.site-footer__credit { margin-top: calc(var(--s-m) * -1); }

/* 制作元へのリンク。フッターの文字と同じ見た目にして、
   下線はマウスを乗せたときだけ出す（控えめに置くため）。 */
.site-footer__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.site-footer__link:hover {
  color: var(--text);
  border-bottom-color: currentColor;
}

}