/*
 * トップページだけの見た目（style.css の上に重ねる）。2026-10-05 に cheese に合わせて作り直し（オーナー「全面的に改修して」）、
 * 同じ日にアプリの画面の見本を足した（「もっとアプリのサンプル動作内容画像とかたくさんやりようあるよね？」）。
 * スマホの枠と画面の中身は demo.css、動きは demo.js。
 * キャラの置き方はアプリの型にそろえる: 札の上の縁に立つ子（.peek、style.css）、見出しの両脇、いちばん下の大きな子。
 */
header.site.wide, footer.site.wide { max-width: 1040px; }
main.home { max-width: 1040px; padding-top: 8px; }

/* ---- 見出しの帯 ---- */
/* 下の縁はゆるい波（帯の終わりを柔らかくするだけ）。波の絵は帯と同じ黄 */
.top { background: var(--yellow); position: relative; padding-bottom: 40px; }
.top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -23px; height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0h120v6c-20 0-20 18-40 18S60 6 40 6 20 24 0 24z' fill='%23ffd23f'/%3E%3C/svg%3E") 0 0 / 120px 24px repeat-x;
}
.top nav.site a { color: var(--ink); }
.hero { text-align: center; padding: 24px 20px 0; max-width: 1040px; margin: 0 auto; }
/* 幅 760: 外側の子（0〜76）と内側の子（13% = 99〜203）、真ん中のチーズ（240〜520）が重ならない幅。
   680 で内側を 9% にしたら外側と内側が重なった（2026-10-05） */
.hero-art { position: relative; height: 290px; max-width: 760px; margin: 0 auto 10px; }
/* チーズのキャラ（cheese-chara.png、744×699 でほぼ正方形）。箱は正方形のまま、絵は下に揃えて収める */
.hero-icon { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; width: 280px; height: 280px; object-fit: contain; object-position: bottom; animation: bob 3.4s ease-in-out infinite; }
.hero-art .side { position: absolute; bottom: 0; animation: bob 3.4s ease-in-out infinite; }
.near-l, .near-r { width: 104px; height: 104px; }
.far-l, .far-r { width: 76px; height: 76px; }
.near-l { left: 13%; animation-delay: -0.8s; }
.near-r { right: 13%; animation-delay: -1.6s; }
.far-l { left: 0; bottom: 60px; animation-delay: -2.2s; }
.far-r { right: 0; bottom: 60px; animation-delay: -0.4s; }
.hero h1 { font-size: 56px; line-height: 1.2; margin: 0 0 16px; }
.hero .lead { max-width: 580px; margin: 0 auto 26px; color: var(--ink); }
.cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.cta .pill + .pill { margin-left: 0; }
.pill.soon { background: var(--ink); color: #fff; cursor: default; }
.top .pill.ghost { background: transparent; }

/* ---- 段 ---- */
.block { margin-top: 110px; }
.block.first { margin-top: 84px; }
.block h2 { text-align: center; font-size: 32px; margin: 0 0 10px; }
/* 見出しの下にチーズの穴の色の短い線 */
.block h2::after { content: ""; display: block; width: 44px; height: 6px; border-radius: 3px; background: var(--hole); margin: 12px auto 0; }
.center { text-align: center; color: var(--ink-2); }
.sub { margin: 0 auto 34px; max-width: 620px; }

/* ---- あそびかた: 動くスマホと手順 ---- */
.flow { display: flex; gap: 56px; align-items: center; justify-content: center; }
.demo-phone { --s: 0.84; }
.flow-steps { list-style: none; margin: 0; padding: 0; max-width: 430px; }
.flow-steps li {
  display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; margin: 0 0 8px; border-radius: 20px;
  cursor: pointer; transition: background 0.3s, box-shadow 0.3s; border: 2px solid transparent;
}
.flow-steps li:hover { background: rgba(255, 255, 255, 0.6); }
.flow-steps li.on { background: var(--sheet); border-color: var(--ink); box-shadow: 0 5px 0 var(--ink); }
.flow-steps h3 { margin: 2px 0 4px; font-size: 19px; }
.flow-steps p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.75; }
.num {
  flex: none; display: inline-flex; width: 36px; height: 36px; border-radius: 50%; align-items: center; justify-content: center;
  background: var(--yellow); color: var(--ink); font-family: "Archivo", sans-serif; font-weight: 900; font-size: 17px;
}
.flow-steps li.on .num { background: var(--ink); color: var(--yellow); }

/* ---- お題と、みんなの答え ---- */
.answers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ans { position: relative; margin: 0; aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; background: #ddd; box-shadow: 0 10px 24px rgba(80, 56, 0, 0.14); }
.ans > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ans figcaption { position: absolute; left: 10px; right: 10px; bottom: 10px; min-height: 92px; display: flex; align-items: center; justify-content: center; padding: 12px 10px; text-align: center; }
.ans figcaption .q { position: static; display: flex; flex-direction: column; align-items: center; }
.ans .q .verb { font-size: 15px; line-height: 20px; letter-spacing: 1px; }
.mini-fusen { background: #ffec70; color: #26221e; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25); }
.mini-card { background: #fff; color: #2b2328; border-radius: 16px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25); transform: rotate(-1.5deg); }

/* ---- カードと付箋 ---- */
.pair { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; }
.pair figure { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 300px; }
.pair figcaption { margin-top: 18px; color: var(--ink-2); font-size: 15px; text-align: center; }
.pair figcaption b { display: block; color: var(--ink); font-size: 18px; margin-bottom: 2px; }

/* ---- まとめを、作品に ---- */
.recap-phone { --s: 0.84; }
.recap-list { max-width: 440px; }
.recap-list .now { font-size: 14px; color: var(--ink-2); margin: 0 0 14px; }
.recap-list .now b { color: var(--ink); background: var(--yellow); border-radius: 999px; padding: 3px 12px; margin-left: 4px; }
.chips { list-style: none; margin: 0; padding: 0; }
.chips li { background: var(--sheet); border: 2px solid var(--line); border-radius: 16px; padding: 10px 14px; margin: 0 0 8px; font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.chips li b { display: block; color: var(--ink); font-size: 15px; }
.recap-list .note { font-size: 14px; color: var(--ink-2); margin: 14px 0 0; }

/* ---- 着せかえ: テーマの札（demo.js が themes.js から作る） ---- */
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 12px 10px; }
.sw { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.sw-g { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 16px; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.sw-c { width: 56%; aspect-ratio: 256 / 356; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; font-family: var(--serif), serif; font-weight: 800; font-size: 10px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18); transform: rotate(-1.5deg); }
.sw-g i { position: absolute; right: 6px; bottom: 6px; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7); }

/* ---- できること ---- */
.features, .safe { --peek: 64px; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 76px 20px; padding-top: 56px; }
.features .card { margin: 0; }
.features h3 { font-size: 18px; margin: 2px 0 6px; }
.features p { color: var(--ink-2); font-size: 15px; margin: 0; }
.safe { margin-top: 76px; padding: 26px 28px 20px; }
.safe ul { margin: 0 0 12px; }
.safe li { margin-bottom: 10px; }
.safe .more { color: var(--ink-2); font-size: 14px; margin: 0; }

/* よくある質問 */
details.card { margin: 12px 0; padding: 0; }
details.card summary { cursor: pointer; list-style: none; padding-block: 18px; padding-inline: 22px 52px; font-weight: 700; position: relative; }
details.card summary::-webkit-details-marker { display: none; }
details.card summary::after {
  content: ""; position: absolute; inset-inline-end: 22px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2.5px solid var(--ink-3); border-bottom: 2.5px solid var(--ink-3); transform: rotate(45deg); transition: transform 0.2s;
}
details.card[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
details.card p { padding: 0 22px 18px; margin: 0; color: var(--ink-2); }

/* 写真の出典 */
.credits { margin-top: 64px; font-size: 12px; color: var(--ink-3); }
.credits summary { cursor: pointer; font-weight: 700; color: var(--ink-2); }
.credits ul { margin: 8px 0; padding-inline-start: 1.2em; }
.credits li { margin: 0 0 2px; }
.credits a { color: var(--ink-2); }

/* いちばん下のチーズのキャラと、下の帯（黄）。子は帯より先に描き、帯が足もと（一辺の 12%）を隠す */
.ground { margin-top: 48px; height: 250px; position: relative; }
.ground .big { position: absolute; left: 50%; bottom: -30px; width: 260px; height: 260px; margin-left: -130px; object-fit: contain; object-position: bottom; }
.band { position: relative; background: var(--yellow); padding-top: 28px; }
.band footer.site { padding-bottom: 40px; color: var(--ink-2); }
.band footer.site a { color: var(--ink); }

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-icon, .hero-art .side { animation: none; }
}

@media (max-width: 960px) {
  .flow { flex-direction: column; gap: 28px; }
  .flow-steps, .recap-list { max-width: 560px; }
  .answers { grid-template-columns: repeat(3, 1fr); }
  .features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  /* スマホ幅では両脇 64 を端に寄せ、外側の二体は出さない（2026-09-27 に両脇が真ん中にかかった件）。
     真ん中は 180 まで、ただし両脇との間に 8 ずつ残る幅（100% − 64×2 − 8×2）に縮める。
     画面 330（見出しの幅 290）で 146、360 で 176、390 から 180 */
  .hero-art { height: 196px; }
  .hero-icon { width: min(180px, calc(100% - 144px)); height: 180px; }
  .near-l, .near-r { width: 64px; height: 64px; }
  .near-l { left: 0; }
  .near-r { right: 0; }
  /* style.css の img.chara { display: block }（詳しさ 0,1,1）に .far-l（0,1,0）が負けるので .hero-art を足して勝たせる */
  .hero-art .far-l, .hero-art .far-r { display: none; }
  .hero h1 { font-size: 40px; }
  .block { margin-top: 84px; }
  .block.first { margin-top: 64px; }
  .block h2 { font-size: 25px; }
  /* 枠の幅は 390 × --s + 22。画面 330 で 290 に収まる 0.68 */
  .demo-phone, .recap-phone { --s: 0.68; }
  .pair { gap: 28px; }
  .pair .phone { --s: 0.68 !important; }
  .flow-steps li { padding: 12px 12px; gap: 12px; }
  /* 答えの写真は横に流す（2 列だと字が小さすぎた） */
  .answers { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -20px; padding: 4px 20px 16px; }
  .ans { flex: none; width: 70%; scroll-snap-align: center; }
  /* 65 種を縦に並べると 1800px を超えたので、スマホでは三段の帯にして横に流す */
  .themes { grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(3, auto); grid-auto-columns: 68px; overflow-x: auto; margin: 0 -20px; padding: 2px 20px 12px; }
  .features { grid-template-columns: 1fr; }
  .ground { height: 200px; }
  .ground .big { width: 200px; height: 200px; margin-left: -100px; bottom: -24px; }
}