:root {
  --paper: #ecdcb8;
  --card: #faf5e8;
  --ink: #5b3a1a;
  --soft: #8a6a4a;
  --accent: #c8505a;
  --green: #5f9f45;
  --grain: none;
  --grain-card: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--grain), var(--paper);
  color: var(--ink);
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.8;
  overflow-x: hidden;
}
a { color: var(--accent); }
img.px { image-rendering: pixelated; }
.wrap { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }
header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
header img { width: 44px; height: 44px; border-radius: 11px; image-rendering: pixelated; }
header .name { font-family: "Mochiy Pop One", sans-serif; font-size: 18px; text-decoration: none; color: var(--ink); }
header .head-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
header .lang { font-size: 14px; color: var(--soft); }
h1 { font-size: 26px; margin: 8px 0 4px; }
h2 { font-size: 18px; margin: 32px 0 8px; }
p, li { font-size: 15px; font-weight: 500; }
.updated { color: var(--soft); font-size: 13px; }

/* 紙のカード: ふちが少しうねる(SVG のゆらぎ)。字はうねらせない */
.card { position: relative; padding: 20px; margin: 16px 0; isolation: isolate; }
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--card);
  filter: url(#wobble) drop-shadow(1.5px 2px 0 rgba(89, 56, 20, 0.14));
}
/* 紙のざらつきは、うねらせる効果の外に重ねる(一緒にうねらせると、点が引き伸ばされて短い茶色の線に見えた。2026-09-30 本人) */
.card::after {
  content: ""; position: absolute; inset: 4px; z-index: -1; pointer-events: none;
  background: var(--grain-card);
}
.card h2 { margin-top: 0; }

.hero { text-align: center; padding: 24px 0 8px; }
.hero img { width: 120px; height: 120px; border-radius: 26px; image-rendering: pixelated; }
.hero h1 { font-family: "Mochiy Pop One", sans-serif; font-weight: 400; font-size: 32px; margin: 12px 0 0; }
.hero .tag { color: var(--soft); font-size: 16px; margin: 4px 0 0; }

/* 小さな畑 */
/* 畑は紙のカードに載せず、画面の横幅いっぱいの草地の帯に(2026-09-29 本人: 紙の上の畑は変・上下のつなぎ方)。
   上下のふちはドットの草の房で、紙へぎざぎざになじませる(絵は farm.js が作る --tuft-top / --tuft-bottom) */
.farm { position: relative; text-align: center; padding: 22px 16px 26px; margin: 24px calc(50% - 50vw) 28px; width: 100vw;
  background: var(--grain-grass, none) 0 0 / 120px 120px, #7cc25a; image-rendering: pixelated; }
.farm::before, .farm::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background-repeat: repeat-x; background-size: 48px 12px; image-rendering: pixelated;
  z-index: 3; pointer-events: none; }  /* 房は朝昼夜の色かけより上(房の端が帯に1ドット重なり、夜の色が二重にかかって黒い線になった。2026-09-29) */
.farm::before { top: -11px; background-image: var(--tuft-top, none); }
.farm::after { bottom: -11px; background-image: var(--tuft-bottom, none); }
/* 朝・夜は、ふちの草の房も同じ色に(帯の色かけは房の外の紙にかけない) */
.farm.morning::before { background-image: var(--tuft-top-morning, none); }
.farm.morning::after { background-image: var(--tuft-bottom-morning, none); }
.farm.night::before { background-image: var(--tuft-top-night, none); }
.farm.night::after { background-image: var(--tuft-bottom-night, none); }
.farm .top { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; }
.farm .top img { width: 24px; height: 24px; }
#farm-coins { font-family: "Mochiy Pop One", sans-serif; font-size: 24px; min-width: 2ch; display: inline-block; transition: transform 0.1s;
  color: #fffaf0; text-shadow: 2px 0 #5b3a1a, -2px 0 #5b3a1a, 0 2px #5b3a1a, 0 -2px #5b3a1a, 1.5px 1.5px #5b3a1a, -1.5px -1.5px #5b3a1a, 1.5px -1.5px #5b3a1a, -1.5px 1.5px #5b3a1a; }
#farm-coins.bump { animation: bump 0.18s ease-out; }
@keyframes bump { from { transform: scale(1.3); } to { transform: scale(1); } }
#farm { display: block; margin: 0 auto; image-rendering: pixelated; touch-action: none; cursor: pointer; }
.guide { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin-top: 12px; min-height: 90px; }
.scarecrow { position: relative; width: 84px; height: 105px; flex: none; }
.scarecrow img { position: absolute; image-rendering: pixelated; }
.scarecrow .body { left: 0; top: 27px; width: 84px; height: 78px; }
.scarecrow .head { left: 15px; top: 0; width: 54px; height: 48px; }
/* 吹き出しは、かかしの頭の横(しっぽが口のあたりを指す) */
#farm-say { background: #fffaf0; border-radius: 10px; padding: 8px 12px; font-size: 14px; text-align: left; max-width: 240px; margin-top: 8px; position: relative;
  box-shadow: 0 2px 0 rgba(89, 56, 20, 0.12); }
#farm-say::before { content: ""; position: absolute; left: -6px; top: 14px; border: 6px solid transparent; border-right-color: #fffaf0; border-left: 0; }
#farm-say.show { animation: pop 0.25s ease-out; }
@keyframes pop { from { transform: scale(0.4); } to { transform: scale(1); } }

/* できること */
.feats { display: grid; grid-template-columns: 1fr; gap: 4px; }
@media (min-width: 640px) { .feats { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.feat { text-align: center; }
.feat img { height: 48px; image-rendering: pixelated; }
.feat h3 { font-size: 16px; margin: 6px 0 2px; }
.feat p { margin: 0; font-size: 14px; color: var(--soft); }

.section-title { font-family: "Mochiy Pop One", sans-serif; font-weight: 400; text-align: center; font-size: 20px; margin: 120px 0 12px; }  /* 区切りは線でなく余白で(2026-09-29 本人: 近すぎる) */

nav.links { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; margin-top: 40px; font-size: 14px; }
footer { text-align: center; color: var(--soft); font-size: 12px; margin-top: 32px; }

/* 読み込み中: 紙の上で小麦がそよぐ。そろったらふわっと消える */
#loader { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--grain), var(--paper); transition: opacity 0.45s ease, visibility 0.45s; }
body:not(.loading) #loader { opacity: 0; visibility: hidden; }
.ld-field { display: flex; gap: 2px; align-items: flex-end; }
.ld-w { width: 40px; height: 52px; transform-origin: 50% 100%; animation: sway 1.2s ease-in-out infinite; }
.ld-w.w2 { animation-delay: 0.15s; }
.ld-w.w3 { animation-delay: 0.3s; }
@keyframes sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.ld-text { color: var(--soft); font-size: 14px; letter-spacing: 0.08em; }

/* ふわっと出る(下から少し上がりながら) */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .ld-w, .scarecrow { animation: none !important; } }

/* アイコンとかかしのゆっくりした揺れ */
.scarecrow { transform-origin: 50% 100%; animation: lean 4s ease-in-out infinite; }
@keyframes lean { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }

/* 季節: ゲームの絵で作った小さな景色を4区画(スマホは2×2、広い画面は横に4つ)。木がそよぎ、季節の物が舞う */
.seasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 380px; margin: 0 auto; }
@media (min-width: 640px) { .seasons { grid-template-columns: repeat(4, 1fr); max-width: 760px; } }
.seasons figure { margin: 0; text-align: center; }
.seasons canvas { width: 100%; height: auto; aspect-ratio: 86 / 68; image-rendering: pixelated; border-radius: 12px; box-shadow: 0 3px 0 rgba(89, 56, 20, 0.16); display: block; }
.seasons figcaption { display: flex; align-items: center; justify-content: center; gap: 6px; font-family: "Mochiy Pop One", sans-serif; font-size: 15px; margin-top: 6px; }
.seasons figcaption img { width: 22px; height: 22px; image-rendering: pixelated; }

/* 草地の帯の中: 重なり順 = 畑・散らした作物・かかし(1) → 朝昼夜の色(2) → ホタル(3) → コインの数・吹き出し・時間の印(4) */
.farm > .top, #farm-say, .farm .time { position: relative; z-index: 4; }
.farm canvas, .farm .scarecrow { position: relative; z-index: 1; }
/* ほかの作物: 見出しの両わきと、ページの下の空いた所に散らす(育てられない。2026-09-29 本人: 畑のまわりではなく何もない所に) */
.crop { display: inline-block; height: auto; image-rendering: pixelated; vertical-align: middle; animation: bob 3.6s ease-in-out infinite; }
.section-title .crop { margin: 0 10px; }
.crops-row { display: flex; justify-content: center; align-items: center; gap: 22px; margin: 36px 0 0; }  /* align-items: 高さをそろえて縦に伸ばさない */
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.tint { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: multiply; background: transparent; transition: background-color 0.8s ease; }
.farm.morning .tint { background: rgb(255, 219, 209); }
.farm.night .tint { background: rgb(133, 148, 209); }
.flies { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.8s ease; }
.farm.night .flies { opacity: 1; }
.flies span { position: absolute; width: 6px; height: 6px; background: #fbff9a; box-shadow: 0 0 6px 3px rgba(220, 255, 120, 0.55); animation: fly 6s ease-in-out infinite, glow 2.4s ease-in-out infinite; }
@keyframes fly { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(10px, -8px); } 66% { transform: translate(-6px, 6px); } }
@keyframes glow { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.farm .time { position: absolute; top: 10px; right: 12px; display: flex; gap: 4px; z-index: 5; }  /* コインの数の行(横いっぱい)より上に。重なって押せなかった(2026-09-29) */
.farm .time button { border: 0; background: rgba(255, 250, 240, 0.55); border-radius: 10px; padding: 4px; cursor: pointer; line-height: 0; }
.farm .time button[aria-pressed="true"] { background: #fffaf0; box-shadow: 0 2px 0 rgba(89, 56, 20, 0.22); }
.farm .time img { width: 30px; height: 30px; }
@media (min-width: 640px) { .farm .time { right: calc(50% - 360px); } }
@media (prefers-reduced-motion: reduce) { .crop, .flies span { animation: none !important; } }

/* 並べ方のパズル(挑戦のステージ1と同じ決まり。小麦5・トマト4を3×3に) */
.puzzle { text-align: center; margin: 8px 0 12px; }
.puzzle .noa { display: flex; align-items: flex-start; justify-content: center; gap: 10px; margin-bottom: 6px; }
.puzzle .noa img { width: 52px; height: 62px; image-rendering: pixelated; flex: none; }
#pz-say { background: #fffaf0; border-radius: 10px; padding: 8px 12px; font-size: 14px; text-align: left; width: 250px; min-height: calc(2 * 1.8em + 16px); margin-top: 6px; position: relative;
  box-sizing: border-box;
  box-shadow: 0 2px 0 rgba(89, 56, 20, 0.12); }
#pz-say::before { content: ""; position: absolute; left: -6px; top: 14px; border: 6px solid transparent; border-right-color: #fffaf0; border-left: 0; }
#pz-say.show { animation: pop 0.25s ease-out; }
.meter { max-width: 320px; margin: 0 auto 10px; }
.meter .val { font-size: 13px; color: var(--soft); text-align: left; }
#pz-val { font-family: "Mochiy Pop One", sans-serif; font-size: 22px; color: var(--ink); }
.meter .bar { position: relative; height: 12px; background: rgba(89, 56, 20, 0.14); border-radius: 6px; margin: 6px 10px 0 0; }
#pz-fill { height: 100%; width: 0; background: #e9b23c; border-radius: 6px; transition: width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.meter .st { position: absolute; top: 50%; transform: translate(-50%, -52%); font-size: 20px; color: #cbb89a; text-shadow: 0 1px 0 #fffaf0; transition: color 0.2s; }
.meter .st.on { color: #f2c233; animation: bump 0.3s ease-out; }
#pz { display: block; margin: 0 auto; image-rendering: pixelated; touch-action: manipulation; cursor: pointer; }

/* 畑の右に札を2枚(同じ大きさ・同じ並べ方)。畑と札の組を真ん中に置き、左右の空きをそろえる(2026-09-29 本人) */
.pz-body { display: flex; gap: 14px; justify-content: center; align-items: center; width: fit-content; max-width: 100%; margin: 0 auto; }
.traits { display: grid; grid-auto-rows: 1fr; gap: 40px; width: 132px; flex: none; text-align: left; padding-top: 36px; }  /* 下の札の野菜の頭が、上の札に付かないよう間をあける */
/* 札は低めにして、野菜の頭を札の上のふちから出す(2026-09-29 本人: かわいく)。野菜と名前は真ん中、値段と一言は左 */
.trait { display: flex; flex-direction: column; align-items: stretch; gap: 2px; background: rgba(255, 250, 240, 0.7); border-radius: 12px; padding: 0 12px 10px; }
.trait .ic { height: 30px; margin-top: -22px; margin-bottom: 4px; display: flex; align-items: flex-end; justify-content: center; }
.trait .ic img { image-rendering: pixelated; }
.trait .tx > b { font-size: 15px; display: block; line-height: 1.4; text-align: center; margin-bottom: 2px; }
.trait .price { display: flex; align-items: center; gap: 5px; }
.trait .price .coin { width: 16px; height: 16px; image-rendering: pixelated; }
.trait .price b { font-family: "Mochiy Pop One", sans-serif; font-weight: 400; font-size: 16px; color: var(--ink); }
.trait em { display: block; font-style: normal; color: #c05a3a; font-weight: 700; font-size: 12px; line-height: 1.45; margin-top: 2px; }
.trait em.none { color: var(--soft); font-weight: 500; }
@media (min-width: 640px) { .traits { width: 170px; } }
#pz { touch-action: none; }
.meter .unit { font-size: 13px; color: var(--ink); }

/* 強化ツリー: ゲームの強化の画面と同じ夜空の帯(横幅いっぱい)。上のふちはドットの雲、下のふちは遠くの草の影で紙になじませる */
.tree-band { position: relative; height: 420px; margin: 34px calc(50% - 50vw) 40px; width: 100vw;
  background: transparent; }  /* 夜空は .sky の絵に描く(上のふちをドットでぎざぎざに抜くため) */
.tree-band::after { content: ""; display: none; position: absolute; left: 0; right: 0; height: 14px; background-repeat: repeat-x; background-size: 64px 14px; image-rendering: pixelated; pointer-events: none; z-index: 1; }
.tree-band::after { bottom: -13px; background-image: var(--grass-dark, none); }
.tree-band .sky { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.tree-band .threads { position: absolute; left: 50%; top: 60px; width: 320px; height: 300px; margin-left: -160px; overflow: visible; }
.node { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 0; padding: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle, #54432e 0 13px, #3d3223 13px 17px); display: flex; align-items: center; justify-content: center; z-index: 2; }
.node.owned { background: radial-gradient(circle, #f7cf5a 0 13px, #e9b23c 13px 17px); box-shadow: 0 0 0 7px rgba(255, 217, 89, 0.16); }
.node.milestone::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid rgba(255, 191, 115, 0.55); }
.node.next { animation: nextpulse 1.6s ease-in-out infinite; }
@keyframes nextpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 230, 160, 0.0); } 50% { box-shadow: 0 0 0 6px rgba(255, 230, 160, 0.35); } }
.node.far { opacity: 0.45; }
.node img { width: 20px; height: auto; image-rendering: pixelated; pointer-events: none; }
.node .nm { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; color: #fff6d8; background: rgba(20, 26, 54, 0.85);
  padding: 2px 8px; border-radius: 8px; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.node.show .nm { opacity: 1; }
.node.pop { animation: nodepop 0.3s ease-out; }
@keyframes nodepop { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* 図鑑の見本: 紙の上にじかに(箱で囲まない)。作物の絵が浮かび、数は「もと + 強化 = いま」 */
.zukan { display: flex; gap: 22px; align-items: center; justify-content: center; max-width: 560px; margin: 8px auto 0; flex-wrap: wrap; }
.zk-pic { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; }
.zk-pic img { width: 96px; image-rendering: pixelated; animation: bob 3s ease-in-out infinite; filter: drop-shadow(0 6px 0 rgba(89, 56, 20, 0.12)); }
.zk-body { flex: 1; min-width: 250px; max-width: 360px; }
.zk-head { display: flex; align-items: baseline; gap: 10px; }
.zk-head .no { font-family: "Mochiy Pop One", sans-serif; font-size: 13px; color: var(--soft); }
.zk-head b { font-family: "Mochiy Pop One", sans-serif; font-weight: 400; font-size: 22px; }
.zk-note { margin: 2px 0 10px; font-size: 13px; color: var(--soft); }
.zk-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 2px; background: linear-gradient(to right, rgba(89, 56, 20, 0.16) 50%, transparent 0) bottom / 6px 1px repeat-x; }
.zk-row .k { font-size: 13px; color: var(--soft); font-weight: 500; }
.zk-row .v { font-size: 15px; }
.zk-row em { font-style: normal; color: #4a9a3a; }
.zk-row b { font-family: "Mochiy Pop One", sans-serif; font-weight: 400; font-size: 17px; }
.zk-meter { margin-top: 14px; position: relative; }
.zk-meter .k { font-size: 13px; color: var(--soft); font-weight: 500; }
.zk-meter .cnt { position: absolute; right: 0; top: 0; font-family: "Mochiy Pop One", sans-serif; font-size: 15px; }
.zk-meter .bar { position: relative; height: 10px; background: rgba(89, 56, 20, 0.14); border-radius: 5px; margin: 8px 8px 0 0; }
.zk-meter .fill { height: 100%; background: #e9b23c; border-radius: 5px; }
.zk-meter .mk { position: absolute; top: 50%; width: 18px; transform: translate(-50%, -50%); image-rendering: pixelated; }
.zk-meter .ticks { position: relative; height: 16px; margin-right: 8px; }
.zk-meter .ticks span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--soft); top: 2px; }
.zk-meter .ticks span:last-child { transform: translateX(-80%); }

/* 見出しの下の説明の文(四季を作り替えた時に消えていたのを戻した) */
.lead { text-align: center; color: var(--soft); font-size: 14px; font-weight: 500; margin: 0 auto 22px; max-width: 560px; line-height: 1.8; }

/* 図鑑は本を開いた形(2026-09-29 本人)。スマホでも見開き(左に絵、右に数)。狭い画面は字と絵を少し小さく */
.zukan.book { position: relative; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 0; max-width: 620px; margin: 8px auto 0; padding: 7px 7px 11px;
  background: #8b5a2b; border-radius: 10px; box-shadow: 0 5px 0 #6b421f, 0 10px 18px rgba(89, 56, 20, 0.18); align-items: stretch; flex-wrap: nowrap; }
.zukan.book .page { background: #faf5e8; padding: 14px 12px; min-width: 0; max-width: none; }
.zukan.book .page.left { width: auto; height: auto; border-radius: 6px 0 0 6px; display: flex; align-items: center; justify-content: center; padding: 0;
  box-shadow: inset -14px 0 16px -14px rgba(89, 56, 20, 0.45); }
.zukan.book .page.right { border-radius: 0 6px 6px 0; box-shadow: inset 14px 0 16px -14px rgba(89, 56, 20, 0.45); }
.zukan.book .zk-pic img { width: 64px; }
.zukan.book .zk-head b { font-size: 18px; }
.zukan.book .zk-note { font-size: 11.5px; line-height: 1.55; }
.zukan.book .zk-row .k { font-size: 11.5px; }
.zukan.book .zk-row b { font-size: 15px; }
.zukan.book .zk-meter .k, .zukan.book .zk-meter .ticks span { font-size: 10.5px; }
@media (min-width: 640px) {
  .zukan.book { grid-template-columns: 1fr 1fr; padding: 8px 8px 12px; }
  .zukan.book .page { padding: 18px 20px; }
  .zukan.book .zk-pic img { width: 96px; }
  .zukan.book .zk-head b { font-size: 22px; }
  .zukan.book .zk-note { font-size: 13px; }
  .zukan.book .zk-row .k { font-size: 13px; }
  .zukan.book .zk-row b { font-size: 17px; }
  .zukan.book .zk-meter .k { font-size: 13px; }
  .zukan.book .zk-meter .ticks span { font-size: 11px; }
}
/* しおりのひも(上から垂れる) */
.zukan.book .ribbon { position: absolute; top: -6px; right: 28px; width: 10px; height: 46px; background: #c0533a; z-index: 2;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }

/* 共有(日野JAC・derivon.app と同じ作り): 押すと送る内容のプレビューと送り先。スマホは下から出るシート、広い画面はボタンに付く小窓 */
.share-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; font: inherit; color: var(--ink); }
/* 四角いアイコンだけ(字は出さない。2026-09-29 本人) */
.share-btn.pill, .share-btn.big { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 11px; background: var(--card); box-shadow: 0 3px 0 rgba(89, 56, 20, 0.2); }
.share-btn.big { width: 48px; height: 48px; border-radius: 13px; }
.share-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(89, 56, 20, 0.2); }
.share-foot { display: flex; justify-content: center; margin-top: 56px; }
.share-dim { position: fixed; inset: 0; z-index: 60; background: rgba(59, 36, 14, 0.4); animation: share-fade 0.2s ease; }
.share-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; background: var(--card); color: var(--ink); border-radius: 18px 18px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 40px rgba(89, 56, 20, 0.25); animation: share-up 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
.share-sheet.closing { transform: translateY(100%); opacity: 0.6; transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.22s; }
.share-dim.closing { opacity: 0; transition: opacity 0.22s ease; }
@keyframes share-up { from { transform: translateY(100%); opacity: 0.6; } to { transform: none; opacity: 1; } }
@keyframes share-fade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 768px) {
  .share-dim { background: transparent; }
  .share-sheet { position: absolute; left: auto; right: auto; bottom: auto; width: 330px; border-radius: 14px; padding: 12px; box-shadow: 0 12px 32px rgba(89, 56, 20, 0.2); animation: share-fade 0.2s ease; }
  .share-sheet.closing { transform: none; opacity: 0; transition: opacity 0.22s ease; }
}
.share-sheet .hd { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--soft); }
.share-sheet .hd button { border: 0; background: none; font-size: 18px; color: var(--soft); cursor: pointer; line-height: 1; padding: 4px 6px; border-radius: 6px; }
.share-sheet .pv { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; }
.share-sheet .pv img { width: 48px; height: 48px; border-radius: 11px; image-rendering: pixelated; flex: none; }
.share-sheet .pv b { display: block; font-size: 14px; line-height: 1.5; }
.share-sheet .pv span { display: block; font-size: 12px; color: var(--soft); word-break: break-all; font-weight: 500; }
.share-sheet .tiles { display: flex; justify-content: center; gap: 2px; margin-top: 12px; }
.share-sheet .tile { flex: 1; min-width: 54px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0; border-radius: 10px; font-size: 11px; font-weight: 700;
  color: var(--soft); text-decoration: none; border: 0; background: none; cursor: pointer; font-family: inherit; }
.share-sheet .tile:active { background: rgba(89, 56, 20, 0.08); }
.share-sheet .ib { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #efe2c3; color: var(--ink); }
.share-sheet .ib img { width: 44px; height: 44px; border-radius: 12px; }

/* 料金: 完全版の札。主役は広告なし(色面)、その下にさらに3つ */
.pricing .price-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pricing h3 { margin: 0; font-size: 18px; }
.pricing .price-val { font-family: "Mochiy Pop One", sans-serif; font-size: 22px; }
.pricing .perk-main { display: flex; align-items: center; gap: 16px; margin: 14px 0 6px; padding: 14px 16px; border-radius: 12px; background: #fff0c8; }
.pricing .perk-main b { display: block; font-size: 20px; }
.pricing .perk-main span:not(.noad) { color: var(--soft); font-size: 14px; }
.pricing .noad { position: relative; flex: none; width: 48px; height: 34px; border-radius: 8px; background: #8a7f74; color: #fffaf0; font-family: "Mochiy Pop One", sans-serif; font-size: 16px; display: grid; place-items: center; }
.pricing .noad::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 4px; border-radius: 2px; background: #d0484a; transform: rotate(-36deg); }
.pricing .plus { text-align: center; color: var(--soft); font-size: 14px; margin: 10px 0 4px; }
.pricing .perks { list-style: none; margin: 0; padding: 0; }
.pricing .perks li { display: flex; align-items: center; gap: 14px; padding: 8px 4px; }
.pricing .perks img { width: 36px; height: 36px; object-fit: contain; flex: none; }
.pricing .perks b { display: block; font-size: 16px; }
.pricing .perks span { color: var(--soft); font-size: 13px; }
.pricing .price-note { text-align: center; color: var(--soft); font-size: 13px; margin: 10px 0 0; }
.pricing .perk-main span:not(.noad), .pricing .perks span { display: block; line-height: 1.5; }
.pricing .perk-main span:not(.noad) { font-size: 13px; }
.pricing .perk-main b, .pricing .perks b { line-height: 1.5; }

/* 料金の段の頭: 基本無料 / 買い切り の札(色面、枠線なし) */
.price-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 4px 0 6px; }
.price-tags .ptag { font-family: inherit; font-weight: 800; font-size: 15px; letter-spacing: 0.06em; line-height: 1.4; padding: 7px 18px; border-radius: 999px; color: #fffaf0; }  /* 見出しの丸い字は小さい白抜きだとつぶれた */
.price-tags .ptag.free { background: var(--green); }
.price-tags .ptag.once { background: var(--accent); }

/* 値段: 真ん中に大きく(2026-10-01 本人: もっといい感じに) */
.pricing .price-head { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.pricing .price-head .plan { font-size: 15px; color: var(--soft); letter-spacing: 0.08em; }
.pricing .price-big { display: flex; align-items: baseline; gap: 4px; line-height: 1; margin: 4px 0 2px; }
.pricing .price-big .cur { font-family: "Mochiy Pop One", sans-serif; font-size: 24px; }
.pricing .price-big .num { font-family: "Mochiy Pop One", sans-serif; font-size: 52px; letter-spacing: 0.02em; }
.pricing .price-big .once { align-self: center; margin-left: 10px; font-size: 14px; font-weight: 800; letter-spacing: 0.06em; color: #fffaf0; background: var(--accent); padding: 4px 12px; border-radius: 999px; }
.pricing .price-head .price-sub { font-size: 13px; color: var(--soft); }

/* App Store へのボタン: Apple の公式バッジ + 「無料・iPhone」+ パソコンだけ QR(Derivon の LP と同じ形。2026-10-08 本人) */
.cta { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0 6px; flex-wrap: wrap; }
.badge img { height: 52px; width: auto; display: block; }
.cta-note { font-size: 13px; color: var(--ink); font-weight: 700; opacity: 0.85; }
.qr { display: none; align-items: center; gap: 10px; margin-left: 6px; }
.qr img { width: 72px; height: 72px; border-radius: 8px; background: #fff; padding: 4px; }
.qr span { font-size: 12px; color: var(--ink); opacity: 0.7; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) and (min-width: 861px) { .qr { display: flex; } }