/* おもいでのとびら：アルバムのページを組む部品（見本・素材を送るページ・お届けアルバムで共通）。
   ページは縦長3:4、寸法はページ幅基準（cqw）。
   ・デザイン … data-style で、背景・写真の枠・テープ・シール・色を切り替える。
     表紙と同じ名前（dots / stripe / wreath / rainbow / night / fruit / balloon / stamp / blocks）は、表紙とそろいの中身。
     flower / colorful / pastel は前のデザイン（「シンプル」の表紙と、前に作ったアルバム用）
   ・文字 … data-font（koro / maru / pop / tegaki）で、見出しと本文の書体を切り替える */
:root {
  --ink: #5a3b33;
  --ink-soft: #8a6a60;
  --paper: #ffffff;
  --blue: #5aa7de;
  --ui: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", sans-serif;
}
/* ================= 文字（4種類） ================= */
[data-font="koro"]   { --f-title: "Hachi Maru Pop", "Zen Maru Gothic", sans-serif; --f-hand: "Yomogi", "Zen Maru Gothic", sans-serif; --tw: 400; --ts: 1; }
[data-font="maru"]   { --f-title: "Zen Maru Gothic", sans-serif; --f-hand: "Zen Maru Gothic", sans-serif; --tw: 900; --ts: 1; }
[data-font="pop"]    { --f-title: "Mochiy Pop One", "Zen Maru Gothic", sans-serif; --f-hand: "Kiwi Maru", "Zen Maru Gothic", sans-serif; --tw: 400; --ts: 0.9; }
[data-font="tegaki"] { --f-title: "Klee One", "Zen Maru Gothic", sans-serif; --f-hand: "Klee One", "Zen Maru Gothic", sans-serif; --tw: 600; --ts: 1.02; }

/* ================= デザイン（3種類） ================= */
[data-style="flower"] {
  --title: #e2709b; --accent: #f7a8c4; --accent-deep: #e2709b; --tint: #fde8f0;
  --st1: #f7a8c4; --st2: #ffd25e; --st3: #e2709b; --st4: #8ccbf0;
  --outer: #fff5f9;
  --outer-img: linear-gradient(90deg, transparent 25%, rgba(244, 150, 186, 0.36) 25% 75%, transparent 75%), linear-gradient(transparent 25%, rgba(244, 150, 186, 0.36) 25% 75%, transparent 75%);
  --outer-size: var(--t1x) var(--t1y);
  --frame-bg: #f7a8c4; --frame-pad: 1.8cqw; --frame-radius: 3.2cqw; --frame-shadow: none; --stitch: 1;
  --tape-a: #fff3f7; --tape-a-img: linear-gradient(90deg, rgba(244, 150, 186, 0.5) 50%, transparent 50%), linear-gradient(rgba(244, 150, 186, 0.5) 50%, transparent 50%); --tape-a-size: 2cqw 2cqw;
  --tape-b: #fffbe2; --tape-b-img: repeating-linear-gradient(90deg, rgba(255, 214, 90, 0.8) 0 1.4cqw, transparent 1.4cqw 2.8cqw); --tape-b-size: auto;
  --age-bg: #fde8f0; --age-ink: #e2709b; --card: #fde8f0; --card-title: #e2709b;
}
[data-style="colorful"] {
  --title: #f0507e; --accent: #4fb3f0; --accent-deep: #f0507e; --tint: #fff1c2;
  --st1: #ffc93c; --st2: #4fb3f0; --st3: #f0507e; --st4: #5fcf98;
  --outer: #fff6d8;
  --outer-img: repeating-linear-gradient(45deg, rgba(255, 201, 60, 0.45) 0 1.4%, transparent 1.4% 2.8%);
  --outer-size: auto;
  --frame-bg: #ffffff; --frame-pad: 1.4cqw; --frame-radius: 0.6cqw; --frame-shadow: 1.8cqw 1.8cqw 0 var(--shadow-c, #4fb3f0); --stitch: 0;
  --tape-a: #ffe0ea; --tape-a-img: repeating-linear-gradient(90deg, rgba(240, 80, 126, 0.75) 0 1.2cqw, transparent 1.2cqw 2.4cqw); --tape-a-size: auto;
  --tape-b: #dff1fd; --tape-b-img: radial-gradient(circle, rgba(79, 179, 240, 0.9) 0.5cqw, transparent 0.6cqw); --tape-b-size: 2cqw 2cqw;
  --age-bg: #ffc93c; --age-ink: #5a3b33; --card: #fff1c2; --card-title: #f0507e;
}
[data-style="pastel"] {
  --title: #4d4a52; --accent: #9fd3f2; --accent-deep: #5b9fd6; --tint: #e8f5fd;
  --st1: #9fd3f2; --st2: #f7b8cf; --st3: #7cc49a; --st4: #ffd977;
  --outer: #eef7fd;
  --outer-img: radial-gradient(circle closest-side, rgba(159, 211, 242, 0.55) 0 30%, transparent 36%);
  --outer-size: var(--t1x) var(--t1y);
  --frame-bg: #ffffff; --frame-pad: 1.3cqw; --frame-radius: 2.2cqw; --frame-shadow: 0 0 0 0.5cqw #bfe3f8; --stitch: 0;
  --tape-a: rgba(191, 227, 248, 0.85); --tape-a-img: none; --tape-a-size: auto;
  --tape-b: rgba(198, 238, 215, 0.85); --tape-b-img: none; --tape-b-size: auto;
  --age-bg: #e8f5fd; --age-ink: #3f7fb5; --card: #eef8fe; --card-title: #5b9fd6;
}

/* ================= 表紙とそろいの中身（9種類） ================= */
[data-style="dots"] {
  --title: #f1636e; --accent: #f8a5b8; --accent-deep: #f1636e; --tint: #fde9ee;
  --st1: #f1636e; --st2: #f8c3d4; --st3: #f1636e; --st4: #ffd25e;
  --outer: #ffffff;
  /* 表紙の水玉と同じ：うすいピンクの小さな水玉を、ずらしてならべる */
  --outer-img: radial-gradient(circle at 25% 25%, #fbcad8 0 0.8cqw, transparent 0.9cqw), radial-gradient(circle at 75% 75%, #fbcad8 0 0.8cqw, transparent 0.9cqw);
  --outer-size: 10cqw 10cqw;
  --frame-bg: #ffffff; --frame-pad: 1.4cqw; --frame-radius: 2.4cqw; --frame-shadow: 0 0 0 0.6cqw #f8c3d4; --stitch: 0;
  --tape-a: #fde9ee; --tape-a-img: radial-gradient(circle, rgba(241, 99, 110, 0.8) 0.45cqw, transparent 0.55cqw); --tape-a-size: 1.8cqw 1.8cqw;
  --tape-b: #fff; --tape-b-img: repeating-linear-gradient(90deg, rgba(241, 99, 110, 0.75) 0 1.2cqw, transparent 1.2cqw 2.4cqw); --tape-b-size: auto;
  --age-bg: #f1636e; --age-ink: #fff; --card: #fff2f5; --card-title: #f1636e;
}
[data-style="stripe"] {
  --title: #2f80cc; --accent: #8fc8f2; --accent-deep: #2f80cc; --tint: #fff7cf;
  --st1: #f6c544; --st2: #8fc8f2; --st3: #f37ca6; --st4: #7cc49a;
  --outer: #fff6cf;
  --outer-img: linear-gradient(90deg, transparent 25%, #f7d75a 25% 75%, transparent 75%);
  --outer-size: 6.83cqw 100%;
  --frame-bg: #ffffff; --frame-pad: 1.4cqw; --frame-radius: 0.6cqw; --frame-shadow: 1.4cqw 1.4cqw 0 #8fc8f2; --stitch: 0;
  --tape-a: #dff0fc; --tape-a-img: repeating-linear-gradient(90deg, rgba(47, 128, 204, 0.55) 0 1cqw, transparent 1cqw 2cqw); --tape-a-size: auto;
  --tape-b: rgba(251, 232, 141, 0.95); --tape-b-img: none; --tape-b-size: auto;
  --age-bg: #2f80cc; --age-ink: #fff; --card: #fff7cf; --card-title: #2f80cc;
}
[data-style="wreath"] {
  --title: #e86f96; --accent: #f3a0b8; --accent-deep: #e57d9c; --tint: #fdf0f3;
  --st1: #f3a0b8; --st2: #ffd25e; --st3: #f3a0b8; --st4: #8ccbf0;
  --outer: #f9fcf3;
  --outer-img: radial-gradient(circle at 50% 50%, rgba(243, 160, 184, 0.75) 0 1.1cqw, transparent 1.3cqw), radial-gradient(circle at 0 0, rgba(255, 210, 94, 0.75) 0 0.8cqw, transparent 1cqw), radial-gradient(circle at 100% 0, rgba(255, 210, 94, 0.75) 0 0.8cqw, transparent 1cqw), radial-gradient(circle at 0 100%, rgba(255, 210, 94, 0.75) 0 0.8cqw, transparent 1cqw), radial-gradient(circle at 100% 100%, rgba(255, 210, 94, 0.75) 0 0.8cqw, transparent 1cqw);
  --outer-size: var(--t2x) var(--t2y);
  --frame-bg: #ffffff; --frame-pad: 1.3cqw; --frame-radius: 2.2cqw; --frame-shadow: 0 0 0 0.5cqw #cfe8c4; --stitch: 0;
  --tape-a: rgba(253, 226, 234, 0.95); --tape-a-img: none; --tape-a-size: auto;
  --tape-b: rgba(214, 238, 205, 0.95); --tape-b-img: none; --tape-b-size: auto;
  --age-bg: #fdf0f3; --age-ink: #c9617f; --card: #fdf6f8; --card-title: #6e3f22;
}
[data-style="rainbow"] {
  --title: #f2879d; --accent: #6da6dd; --accent-deep: #f2879d; --tint: #fff1f4;
  --st1: #f2879d; --st2: #f6c544; --st3: #f2879d; --st4: #6da6dd;
  --outer: #fffaf6;
  --outer-img: linear-gradient(180deg, rgba(242, 135, 157, 0.28), rgba(246, 197, 68, 0.26) 35%, rgba(154, 214, 177, 0.26) 65%, rgba(109, 166, 221, 0.3));
  --outer-size: auto;
  --frame-bg: #ffffff; --frame-pad: 1.3cqw; --frame-radius: 2.6cqw; --frame-shadow: 0 0.8cqw 2cqw rgba(109, 166, 221, 0.28); --stitch: 0;
  --tape-a: #fff; --tape-a-img: linear-gradient(90deg, #f8b4c2 0 25%, #fbe08a 25% 50%, #bfe3c9 50% 75%, #bcd8f2 75%); --tape-a-size: auto;
  --tape-b: rgba(188, 216, 242, 0.9); --tape-b-img: none; --tape-b-size: auto;
  --age-bg: #fff1f4; --age-ink: #e06b85; --card: #f2f8fd; --card-title: #f2879d;
}
[data-style="night"] {
  --title: #3d8fe0; --accent: #9cc9ee; --accent-deep: #4f8fd6; --tint: #eaf4fd;
  --st1: #f6c544; --st2: #b9a6e8; --st3: #9cc9ee; --st4: #f6c544;
  --outer: #e1eefb;
  --outer-img: radial-gradient(circle at 50% 50%, #f6d977 0 1cqw, transparent 1.2cqw), radial-gradient(circle at 0 0, #fff 0 0.7cqw, transparent 0.9cqw), radial-gradient(circle at 100% 0, #fff 0 0.7cqw, transparent 0.9cqw), radial-gradient(circle at 0 100%, #fff 0 0.7cqw, transparent 0.9cqw), radial-gradient(circle at 100% 100%, #fff 0 0.7cqw, transparent 0.9cqw);
  --outer-size: var(--t2x) var(--t2y);
  --frame-bg: #ffffff; --frame-pad: 1.3cqw; --frame-radius: 3cqw; --frame-shadow: 0 0 0 0.6cqw #cfe4f8; --stitch: 0;
  --tape-a: #e3f0fc; --tape-a-img: radial-gradient(circle, rgba(246, 197, 68, 0.95) 0.45cqw, transparent 0.55cqw); --tape-a-size: 1.8cqw 1.8cqw;
  --tape-b: rgba(226, 218, 248, 0.95); --tape-b-img: none; --tape-b-size: auto;
  --age-bg: #4f8fd6; --age-ink: #fff; --card: #eef6fe; --card-title: #4f8fd6;
}
[data-style="fruit"] {
  --title: #f15f5f; --accent: #f6a3a3; --accent-deep: #f15f5f; --tint: #fff0ee;
  --st1: #f15f5f; --st2: #ffd25e; --st3: #f15f5f; --st4: #9ad6b1;
  --outer: #fffaf0;
  --outer-img: linear-gradient(90deg, transparent 25%, rgba(255, 196, 92, 0.32) 25% 75%, transparent 75%), linear-gradient(transparent 25%, rgba(255, 196, 92, 0.32) 25% 75%, transparent 75%);
  --outer-size: var(--t1x) var(--t1y);
  --frame-bg: #ffffff; --frame-pad: 1.4cqw; --frame-radius: 2cqw; --frame-shadow: 0 0 0 0.6cqw #ffd9a8; --stitch: 0;
  --tape-a: #fff; --tape-a-img: linear-gradient(90deg, rgba(241, 95, 95, 0.35) 50%, transparent 50%), linear-gradient(rgba(241, 95, 95, 0.35) 50%, transparent 50%); --tape-a-size: 2cqw 2cqw;
  --tape-b: #fffbe2; --tape-b-img: repeating-linear-gradient(90deg, rgba(124, 196, 154, 0.7) 0 1.2cqw, transparent 1.2cqw 2.4cqw); --tape-b-size: auto;
  --age-bg: #f15f5f; --age-ink: #fff; --card: #fff4ea; --card-title: #f15f5f;
}
[data-style="balloon"] {
  --title: #3d97dc; --accent: #a6dcf7; --accent-deep: #4aa6ea; --tint: #e9f6fd;
  --st1: #f37ca6; --st2: #f7c843; --st3: #f37ca6; --st4: #4aa6ea;
  --outer: #cfeafb;
  --outer-img: radial-gradient(ellipse 1.9cqw 1.2cqw at 50% 50%, #fff 0 92%, transparent 100%), radial-gradient(ellipse 1.3cqw 0.9cqw at 38% 42%, #fff 0 92%, transparent 100%), radial-gradient(ellipse 1.3cqw 0.9cqw at 62% 42%, #fff 0 92%, transparent 100%);
  --outer-size: var(--t3x) var(--t3y);
  --frame-bg: #ffffff; --frame-pad: 1.4cqw; --frame-radius: 2.6cqw; --frame-shadow: 0 0.8cqw 2cqw rgba(74, 166, 234, 0.28); --stitch: 0;
  --tape-a: rgba(253, 216, 230, 0.95); --tape-a-img: none; --tape-a-size: auto;
  --tape-b: rgba(255, 236, 160, 0.95); --tape-b-img: none; --tape-b-size: auto;
  --age-bg: #4aa6ea; --age-ink: #fff; --card: #eef8fe; --card-title: #3d97dc;
}
[data-style="stamp"] {
  --title: #3b8ad6; --accent: #f6a7b8; --accent-deep: #3b8ad6; --tint: #fdf0f3;
  --st1: #f37c8f; --st2: #3b8ad6; --st3: #f37c8f; --st4: #f6c544;
  --outer: #ffffff;
  --outer-img: repeating-linear-gradient(135deg, #f37c8f 0 2.2cqw, #ffffff 2.2cqw 4.4cqw, #3b8ad6 4.4cqw 6.6cqw, #ffffff 6.6cqw 8.8cqw);
  --outer-size: auto;
  --frame-bg: #ffffff; --frame-pad: 1.6cqw; --frame-radius: 0.3cqw; --frame-shadow: 0 0.5cqw 1.6cqw rgba(59, 70, 90, 0.18); --stitch: 0;
  --tape-a: #fff; --tape-a-img: repeating-linear-gradient(135deg, rgba(243, 124, 143, 0.8) 0 0.8cqw, transparent 0.8cqw 1.6cqw, rgba(59, 138, 214, 0.8) 1.6cqw 2.4cqw, transparent 2.4cqw 3.2cqw); --tape-a-size: auto;
  --tape-b: rgba(207, 228, 248, 0.95); --tape-b-img: none; --tape-b-size: auto;
  --age-bg: #3b8ad6; --age-ink: #fff; --card: #fdf6f8; --card-title: #3b8ad6;
}
[data-style="blocks"] {
  --title: #36a2ee; --accent: #f37ea1; --accent-deep: #f37ea1; --tint: #f4eefc;
  --st1: #f6b915; --st2: #36a2ee; --st3: #f37ea1; --st4: #b48be2;
  --outer: #fdf6fb;
  --outer-img: conic-gradient(#ffe7a6 0 25%, #d3eafc 0 50%, #fcd6e3 0 75%, #e7dcf8 0);
  --outer-size: 9.524cqw 9.524cqw; --outer-pos: 0 0;
  --frame-bg: #ffffff; --frame-pad: 1.4cqw; --frame-radius: 1cqw; --frame-shadow: 1.4cqw 1.4cqw 0 #c9b2ee; --stitch: 0;
  --tape-a: rgba(255, 231, 166, 0.95); --tape-a-img: none; --tape-a-size: auto;
  --tape-b: rgba(211, 234, 252, 0.95); --tape-b-img: none; --tape-b-size: auto;
  --age-bg: #f37ea1; --age-ink: #fff; --card: #f7f2fd; --card-title: #36a2ee;
}

[data-style="ichigo"] {
  --title: #b65073; --accent: #f4c4d5; --accent-deep: #b65073; --tint: #fff0f4;
  --st1: #ef5b6b; --st2: #f4a9bd; --st3: #ef7f9b; --st4: #ffd25e;
  --outer: #fff5f8;
  --outer-img: linear-gradient(90deg, transparent 25%, rgba(244, 169, 189, 0.38) 25% 75%, transparent 75%), linear-gradient(transparent 25%, rgba(244, 169, 189, 0.38) 25% 75%, transparent 75%);
  --outer-size: var(--t1x) var(--t1y);
  --frame-bg: #ffffff; --frame-pad: 1.3cqw; --frame-radius: 1.2cqw; --frame-shadow: 0 0.6cqw 1.8cqw rgba(160, 90, 100, 0.16); --stitch: 0;
  --tape-a: #fde3ec; --tape-a-img: linear-gradient(90deg, rgba(239, 127, 155, 0.45) 50%, transparent 50%), linear-gradient(rgba(239, 127, 155, 0.45) 50%, transparent 50%); --tape-a-size: 1.6cqw 1.6cqw;
  --tape-b: #e3f0fb; --tape-b-img: repeating-linear-gradient(90deg, rgba(140, 190, 230, 0.6) 0 1cqw, transparent 1cqw 2cqw); --tape-b-size: auto;
  --age-bg: #fdeef3; --age-ink: #6a4a40; --card: #fff4f7; --card-title: #e2668a;
}
/* いちご：ページごとに、ギンガム・水玉・ストライプをくりかえす */
.gpage[data-style="ichigo"][data-bg="2"] { --outer: #fff9fb; --outer-img: linear-gradient(90deg, transparent 25%, rgba(244, 169, 189, 0.4) 25% 75%, transparent 75%); --outer-size: 3.2cqw 100%; }
.gpage[data-style="ichigo"] .sheet { background: #fffdfc; border-radius: 4cqw; }
.gpage[data-style="ichigo"] .hc { font-family: "Klee One", "Zen Maru Gothic", sans-serif; font-weight: 600; letter-spacing: 0.08em; }
.hpill { background: #fdeef3; color: #6a4a40; font-weight: 500; letter-spacing: 0.04em; }
.hpill .hsep { font-style: normal; color: #ef7f9b; margin: 0 1cqw; }


/* ================= 水色のストライプ（白い紙に、上下だけ水色のストライプ。ピンクの線とリボン） ================= */
[data-style="ribbon"] {
  --title: #4f97d8; --accent: #e8a4bf; --accent-deep: #ee8fae; --tint: #eef5fc;
  --st1: #f4a9bd; --st2: #a9c8ea; --st3: #ee8fae; --st4: #ffd78a;
  --outer: #ffffff;
  --frame-bg: transparent; --frame-pad: 0cqw; --frame-radius: 2cqw; --frame-shadow: none; --stitch: 0;
  --age-bg: #a9c8ea; --age-ink: #fff; --card: #f3f8fd; --card-title: #5f86b8;
  --rb-stripe: repeating-linear-gradient(90deg, #cfe1f4 0 1.3cqw, #ffffff 1.3cqw 2.6cqw);
  --rb-bow: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2036%22%3E%3Cg%20fill%3D%22%23fde3ec%22%20stroke%3D%22%23ee8fae%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M32%2015%20C24%202%208%201%206%2010%20C4%2019%2020%2021%2032%2018z%22/%3E%3Cpath%20d%3D%22M32%2015%20C40%202%2056%201%2058%2010%20C60%2019%2044%2021%2032%2018z%22/%3E%3Cpath%20d%3D%22M29%2018%20L20%2034%20M35%2018%20L44%2034%22%20fill%3D%22none%22/%3E%3C/g%3E%3Cellipse%20cx%3D%2232%22%20cy%3D%2216.5%22%20rx%3D%224%22%20ry%3D%223.6%22%20fill%3D%22%23ee8fae%22/%3E%3C/svg%3E");
}
.gpage[data-style="ribbon"] { background-image: var(--rb-stripe), var(--rb-stripe); background-size: 100% 4.4cqw, 100% 4.4cqw; background-position: 0 0, 0 100%; background-repeat: no-repeat; }
.gpage[data-style="ribbon"] .sheet:not(.full) { inset: 4.4cqw 0; border-radius: 0; background: #fff; box-shadow: 0 -0.5cqw 0 #f4b7c9, 0 0.5cqw 0 #f4b7c9; }
.gpage[data-style="ribbon"] .pframe img { box-shadow: 0 0.5cqw 1.6cqw rgba(80, 110, 150, 0.16); }
.gpage[data-style="ribbon"] .hc, .gpage[data-style="frame"] .hc { font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; letter-spacing: 0.1em; }
.gpage[data-style="ribbon"] .hpill { background: #e3eefa; color: #4f6f99; }
.gpage[data-style="ribbon"] .folio { color: #8aa6c8; }

/* ================= なみなみフレーム（パステルの地に、ふちがなみなみの白い紙） ================= */
[data-style="frame"] {
  --title: #b95b7d; --accent: #e8a4bf; --accent-deep: #b95b7d; --tint: #fdf0f5;
  --st1: #f4a9bd; --st2: #c9b3e3; --st3: #a487c6; --st4: #ffd78a;
  --outer: #f9e1eb; --outer-img: none;
  --frame-bg: transparent; --frame-pad: 0cqw; --frame-radius: 2cqw; --frame-shadow: none; --stitch: 0;
  --age-bg: #fbe3ec; --age-ink: #9a4b68; --card: #fdf3f7; --card-title: #b95b7d;
  --fr-paper: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20912%201245%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M24%2024a27.00%2027.00%200%200%201%2054.00%200.00a27.00%2027.00%200%200%201%2054.00%200.00a27.00%2027.00%200%200%201%2054.00%200.00a27.00%2027.00%200%200%201%2054.00%200.00a27.00%2027.00%200%200%201%2054.00%200.00a27.00%2027.00%200%200%201%2054.00%200.00a27.00%2027.00%200%200%201%2054.00%200.00a27.00%2027.00%200%200%201%2054.00%200.00a27.00%2027.00%200%200%201%2054.00%200.00a27.00%2027.00%200%200%201%2054.00%200.00a27.00%2027.00%200%200%201%2054.00%200.00a27.00%2027.00%200%200%201%2054.00%200.00a27.00%2027.00%200%200%201%2054.00%200.00a27.00%2027.00%200%200%201%2054.00%200.00a27.00%2027.00%200%200%201%2054.00%200.00a27.00%2027.00%200%200%201%2054.00%200.00a26.02%2026.02%200%200%201%200.00%2052.04a26.02%2026.02%200%200%201%200.00%2052.04a26.02%2026.02%200%200%201%200.00%2052.04a26.02%2026.02%200%200%201%200.00%2052.04a26.02%2026.02%200%200%201%200.00%2052.04a26.02%2026.02%200%200%201%200.00%2052.04a26.02%2026.02%200%200%201%200.00%2052.04a26.02%2026.02%200%200%201%200.00%2052.04a26.02%2026.02%200%200%201%200.00%2052.04a26.02%2026.02%200%200%201%200.00%2052.04a26.02%2026.02%200%200%201%200.00%2052.04a26.02%2026.02%200%200%201%200.00%2052.04a26.02%2026.02%200%200%201%200.00%2052.04a26.02%2026.02%200%200%201%200.00%2052.04a26.02%2026.02%200%200%201%200.00%2052.04a26.02%2026.02%200%200%201%200.00%2052.04a26.02%2026.02%200%200%201%200.00%2052.04a26.02%2026.02%200%200%201%200.00%2052.04a26.02%2026.02%200%200%201%200.00%2052.04a26.02%2026.02%200%200%201%200.00%2052.04a26.02%2026.02%200%200%201%200.00%2052.04a26.02%2026.02%200%200%201%200.00%2052.04a26.02%2026.02%200%200%201%200.00%2052.04a27.00%2027.00%200%200%201%20-54.00%200.00a27.00%2027.00%200%200%201%20-54.00%200.00a27.00%2027.00%200%200%201%20-54.00%200.00a27.00%2027.00%200%200%201%20-54.00%200.00a27.00%2027.00%200%200%201%20-54.00%200.00a27.00%2027.00%200%200%201%20-54.00%200.00a27.00%2027.00%200%200%201%20-54.00%200.00a27.00%2027.00%200%200%201%20-54.00%200.00a27.00%2027.00%200%200%201%20-54.00%200.00a27.00%2027.00%200%200%201%20-54.00%200.00a27.00%2027.00%200%200%201%20-54.00%200.00a27.00%2027.00%200%200%201%20-54.00%200.00a27.00%2027.00%200%200%201%20-54.00%200.00a27.00%2027.00%200%200%201%20-54.00%200.00a27.00%2027.00%200%200%201%20-54.00%200.00a27.00%2027.00%200%200%201%20-54.00%200.00a26.02%2026.02%200%200%201%200.00%20-52.04a26.02%2026.02%200%200%201%200.00%20-52.04a26.02%2026.02%200%200%201%200.00%20-52.04a26.02%2026.02%200%200%201%200.00%20-52.04a26.02%2026.02%200%200%201%200.00%20-52.04a26.02%2026.02%200%200%201%200.00%20-52.04a26.02%2026.02%200%200%201%200.00%20-52.04a26.02%2026.02%200%200%201%200.00%20-52.04a26.02%2026.02%200%200%201%200.00%20-52.04a26.02%2026.02%200%200%201%200.00%20-52.04a26.02%2026.02%200%200%201%200.00%20-52.04a26.02%2026.02%200%200%201%200.00%20-52.04a26.02%2026.02%200%200%201%200.00%20-52.04a26.02%2026.02%200%200%201%200.00%20-52.04a26.02%2026.02%200%200%201%200.00%20-52.04a26.02%2026.02%200%200%201%200.00%20-52.04a26.02%2026.02%200%200%201%200.00%20-52.04a26.02%2026.02%200%200%201%200.00%20-52.04a26.02%2026.02%200%200%201%200.00%20-52.04a26.02%2026.02%200%200%201%200.00%20-52.04a26.02%2026.02%200%200%201%200.00%20-52.04a26.02%2026.02%200%200%201%200.00%20-52.04a26.02%2026.02%200%200%201%200.00%20-52.04z%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23f2b6c6%22%20stroke-width%3D%223%22%20vector-effect%3D%22non-scaling-stroke%22/%3E%3C/svg%3E");
  --fr-cover: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20900%201233%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M24%2024a26.62%2026.62%200%200%201%2053.25%200.00a26.62%2026.62%200%200%201%2053.25%200.00a26.62%2026.62%200%200%201%2053.25%200.00a26.62%2026.62%200%200%201%2053.25%200.00a26.62%2026.62%200%200%201%2053.25%200.00a26.62%2026.62%200%200%201%2053.25%200.00a26.62%2026.62%200%200%201%2053.25%200.00a26.62%2026.62%200%200%201%2053.25%200.00a26.62%2026.62%200%200%201%2053.25%200.00a26.62%2026.62%200%200%201%2053.25%200.00a26.62%2026.62%200%200%201%2053.25%200.00a26.62%2026.62%200%200%201%2053.25%200.00a26.62%2026.62%200%200%201%2053.25%200.00a26.62%2026.62%200%200%201%2053.25%200.00a26.62%2026.62%200%200%201%2053.25%200.00a26.62%2026.62%200%200%201%2053.25%200.00a26.93%2026.93%200%200%201%200.00%2053.86a26.93%2026.93%200%200%201%200.00%2053.86a26.93%2026.93%200%200%201%200.00%2053.86a26.93%2026.93%200%200%201%200.00%2053.86a26.93%2026.93%200%200%201%200.00%2053.86a26.93%2026.93%200%200%201%200.00%2053.86a26.93%2026.93%200%200%201%200.00%2053.86a26.93%2026.93%200%200%201%200.00%2053.86a26.93%2026.93%200%200%201%200.00%2053.86a26.93%2026.93%200%200%201%200.00%2053.86a26.93%2026.93%200%200%201%200.00%2053.86a26.93%2026.93%200%200%201%200.00%2053.86a26.93%2026.93%200%200%201%200.00%2053.86a26.93%2026.93%200%200%201%200.00%2053.86a26.93%2026.93%200%200%201%200.00%2053.86a26.93%2026.93%200%200%201%200.00%2053.86a26.93%2026.93%200%200%201%200.00%2053.86a26.93%2026.93%200%200%201%200.00%2053.86a26.93%2026.93%200%200%201%200.00%2053.86a26.93%2026.93%200%200%201%200.00%2053.86a26.93%2026.93%200%200%201%200.00%2053.86a26.93%2026.93%200%200%201%200.00%2053.86a26.62%2026.62%200%200%201%20-53.25%200.00a26.62%2026.62%200%200%201%20-53.25%200.00a26.62%2026.62%200%200%201%20-53.25%200.00a26.62%2026.62%200%200%201%20-53.25%200.00a26.62%2026.62%200%200%201%20-53.25%200.00a26.62%2026.62%200%200%201%20-53.25%200.00a26.62%2026.62%200%200%201%20-53.25%200.00a26.62%2026.62%200%200%201%20-53.25%200.00a26.62%2026.62%200%200%201%20-53.25%200.00a26.62%2026.62%200%200%201%20-53.25%200.00a26.62%2026.62%200%200%201%20-53.25%200.00a26.62%2026.62%200%200%201%20-53.25%200.00a26.62%2026.62%200%200%201%20-53.25%200.00a26.62%2026.62%200%200%201%20-53.25%200.00a26.62%2026.62%200%200%201%20-53.25%200.00a26.62%2026.62%200%200%201%20-53.25%200.00a26.93%2026.93%200%200%201%200.00%20-53.86a26.93%2026.93%200%200%201%200.00%20-53.86a26.93%2026.93%200%200%201%200.00%20-53.86a26.93%2026.93%200%200%201%200.00%20-53.86a26.93%2026.93%200%200%201%200.00%20-53.86a26.93%2026.93%200%200%201%200.00%20-53.86a26.93%2026.93%200%200%201%200.00%20-53.86a26.93%2026.93%200%200%201%200.00%20-53.86a26.93%2026.93%200%200%201%200.00%20-53.86a26.93%2026.93%200%200%201%200.00%20-53.86a26.93%2026.93%200%200%201%200.00%20-53.86a26.93%2026.93%200%200%201%200.00%20-53.86a26.93%2026.93%200%200%201%200.00%20-53.86a26.93%2026.93%200%200%201%200.00%20-53.86a26.93%2026.93%200%200%201%200.00%20-53.86a26.93%2026.93%200%200%201%200.00%20-53.86a26.93%2026.93%200%200%201%200.00%20-53.86a26.93%2026.93%200%200%201%200.00%20-53.86a26.93%2026.93%200%200%201%200.00%20-53.86a26.93%2026.93%200%200%201%200.00%20-53.86a26.93%2026.93%200%200%201%200.00%20-53.86a26.93%2026.93%200%200%201%200.00%20-53.86z%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23f2b6c6%22%20stroke-width%3D%223%22%20vector-effect%3D%22non-scaling-stroke%22/%3E%3C/svg%3E");
}
.gpage[data-style="frame"][data-bg="1"] { --outer: #f9e1eb; }
.gpage[data-style="frame"] .sheet:not(.full) { background: var(--fr-paper) center / 100% 100% no-repeat; border-radius: 0; box-shadow: none; }
.gpage[data-style="frame"] .pframe img { box-shadow: 0 0.5cqw 1.6cqw rgba(120, 90, 150, 0.16); }
.gpage[data-style="frame"] .hpill { background: #fbe3ec; color: #9a4b68; }
.gpage[data-style="frame"] .hpill .hsep { color: #e8a4bf; }

/* リボン・フレーム：エコー写真は、白いふちなし・まっすぐ・週数は小さなラベルに */
.gpage:is([data-style="ribbon"], [data-style="frame"]) .echo-cell { rotate: 0deg !important; }
.gpage:is([data-style="ribbon"], [data-style="frame"]) .echo-img { border: 0; border-radius: 1.6cqw; overflow: hidden; box-shadow: 0 0.6cqw 1.8cqw rgba(80, 90, 120, 0.18); }
.gpage:is([data-style="ribbon"], [data-style="frame"]) .ewk { left: 1.4cqw; bottom: 1.4cqw; font-family: "Zen Maru Gothic", sans-serif; font-size: 3.4cqw; background: rgba(255, 255, 255, 0.92); color: var(--title); text-shadow: none; padding: 0.5cqw 1.8cqw; border-radius: 9cqw; }
.gpage:is([data-style="ribbon"], [data-style="frame"]) .ewk small { font-size: 2.2cqw; margin-inline-start: 0.3cqw; }
/* 2026-10-15 見直し：マスキングテープと、中のページの小さなシールは使わない（見出しのアイコンと、手直しで足した飾りは残す） */
.ctape { display: none; }
.gpage:not([data-tpl="cover"]) .sheet > svg.stk:not(.hicon):not(.ost) { display: none; }
/* 夜空：まわりの水玉はやめて、無地の空色に */
.gpage[data-style="night"] { --outer-img: none; }
/* 花のリース：中のページは、表紙と同じ花の枠（絵は renderPages が入れる）。紙は透明にして、花にかからない内側に */
.gpage[data-style="wreath"]:not([data-tpl="cover"]) .sheet { background: transparent; inset: 4.4cqw; transform: scale(0.86); transform-origin: 50% 46%; }
.gpage[data-style="wreath"]:not([data-tpl="cover"]) .folio { inset-block-end: 3.6cqw; }
.gpage:is([data-style="ribbon"], [data-style="frame"]) .ewk { font-size: 3.4cqw !important; }
/* 題名の色をえらんだとき（表紙の題名も同じ色に） */
.gpage[data-tc] .ctitle, .gpage[data-tc] .g-title { color: var(--tc) !important; -webkit-text-stroke-color: var(--tc) !important; }
/* 文章の行の長さをそろえて、最後の行に1〜2文字だけ残らないように */
.hand, .bubble, .gmemo p, .enote, .letter p, .cs { text-wrap: balance; }
/* ================= 2026-10-15 新デザイン（白ベース・飾りはひとつ） ================= */
[data-style="check"] {
  --title: #76553e; --accent: #f2d475; --accent-deep: #d9a92c; --tint: #fff8dc;
  --st1: #f3d36b; --st2: #f4a9bd; --st3: #d9a92c; --st4: #a9c8ea;
  --outer: #ffffff; --outer-img: none;
  --frame-bg: transparent; --frame-pad: 0cqw; --frame-radius: 2cqw; --frame-shadow: none; --stitch: 0;
  --age-bg: #fff2bf; --age-ink: #7a5a2a; --card: #fffbea; --card-title: #b9861c;
  --ck-v: linear-gradient(90deg, rgba(242, 212, 117, 0.75) 50%, transparent 50%);
  --ck-h: repeating-linear-gradient(0deg, rgba(242, 212, 117, 0.75) 0 0.8cqw, transparent 0.8cqw 1.6cqw);
}
/* 黄色いチェック：表紙と同じギンガムを、ページのまわり全体に（2026-10-15） */
.gpage[data-style="check"] { background: #fff; }
/* cqw をページの幅にあわせるため、柄は ::before に描く（.gpage そのものに書くと画面の幅が基準になる） */
.gpage[data-style="check"]::before { content: ""; position: absolute; inset: 0; background-color: #fff; background-image: linear-gradient(90deg, rgba(242, 212, 117, 0.7) 50%, transparent 50%), linear-gradient(0deg, rgba(242, 212, 117, 0.7) 50%, transparent 50%); background-size: 3.4cqw 3.4cqw; pointer-events: none; }
.gpage[data-style="check"] .sheet:not(.full) { background: #fffaea; border-radius: 3cqw; box-shadow: 0 0 0 0.9cqw #fff; transform: scale(0.9); }
.gpage[data-style="check"]:not([data-tpl="cover"]) .folio { inset-block-end: 1cqw; color: #9a7a4a; font-weight: 700; }

[data-style="pink"] {
  --title: #6e4a3a; --accent: #f2b6c6; --accent-deep: #e58ea6; --tint: #fff1f5;
  --st1: #f2b6c6; --st2: #e58ea6; --st3: #f2b6c6; --st4: #ffd78a;
  --outer: #ffffff; --outer-img: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20300%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%22284%22%20height%3D%22384%22%20rx%3D%222%22%20fill%3D%22none%22%20stroke%3D%22%23f2b6c6%22%20stroke-width%3D%221.8%22/%3E%3Crect%20x%3D%2213%22%20y%3D%2213%22%20width%3D%22274%22%20height%3D%22374%22%20rx%3D%221%22%20fill%3D%22none%22%20stroke%3D%22%23f6cad6%22%20stroke-width%3D%22.9%22/%3E%3C/svg%3E"); --outer-size: 100% 100%;
  --frame-bg: transparent; --frame-pad: 0cqw; --frame-radius: 1.6cqw; --frame-shadow: none; --stitch: 0;
  --age-bg: #fde8ef; --age-ink: #9a5a6c; --card: #fff6f8; --card-title: #d97a95;
}
.gpage[data-style="pink"] .sheet:not(.full) { background: transparent; transform: scale(0.95); }

[data-style="flowers"] {
  --title: #70528e; --accent: #d8c8f0; --accent-deep: #9a82b8; --tint: #f6f1fc;
  --st1: #d8c8f0; --st2: #f4a9bd; --st3: #9a82b8; --st4: #ffd78a;
  --outer: #ffffff; --outer-img: none;
  --frame-bg: transparent; --frame-pad: 0cqw; --frame-radius: 1.6cqw; --frame-shadow: none; --stitch: 0;
  --age-bg: #f1eafb; --age-ink: #70528e; --card: #f8f4fd; --card-title: #70528e;
  --ps-stripe: repeating-linear-gradient(90deg, #d8c8f0 0 1.3cqw, #ffffff 1.3cqw 2.6cqw);
}
.gpage[data-style="flowers"] { background-image: var(--ps-stripe), var(--ps-stripe); background-size: 100% 4.4cqw, 100% 4.4cqw; background-position: 0 0, 0 100%; background-repeat: no-repeat; }
.gpage[data-style="flowers"] .sheet:not(.full) { inset: 4.4cqw 0; border-radius: 0; background: #fff; box-shadow: 0 -0.5cqw 0 #c9b3e8, 0 0.5cqw 0 #c9b3e8; }

[data-style="bear"] {
  --title: #715344; --accent: #c5ddf0; --accent-deep: #6f98c8; --tint: #eef5fc;
  --st1: #a9c8ea; --st2: #f7cf4a; --st3: #c89b72; --st4: #f4a9bd;
  --outer: #f4f9fe;
  --outer-img: linear-gradient(90deg, transparent 25%, rgba(197, 221, 240, 0.65) 25% 75%, transparent 75%), linear-gradient(transparent 25%, rgba(197, 221, 240, 0.65) 25% 75%, transparent 75%);
  --outer-size: var(--t1x) var(--t1y);
  --frame-bg: transparent; --frame-pad: 0cqw; --frame-radius: 2cqw; --frame-shadow: none; --stitch: 0;
  --age-bg: #e3eefa; --age-ink: #4f6f99; --card: #f3f8fd; --card-title: #5f86b8;
  --bear: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2048%22%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2213%22%20r%3D%228.5%22%20fill%3D%22%23c89b72%22/%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2213%22%20r%3D%224.4%22%20fill%3D%22%23f1d3b3%22/%3E%3Ccircle%20cx%3D%2246%22%20cy%3D%2213%22%20r%3D%228.5%22%20fill%3D%22%23c89b72%22/%3E%3Ccircle%20cx%3D%2246%22%20cy%3D%2213%22%20r%3D%224.4%22%20fill%3D%22%23f1d3b3%22/%3E%3Cellipse%20cx%3D%2230%22%20cy%3D%2229%22%20rx%3D%2221%22%20ry%3D%2218.5%22%20fill%3D%22%23c89b72%22/%3E%3Cellipse%20cx%3D%2230%22%20cy%3D%2236%22%20rx%3D%228.6%22%20ry%3D%226.6%22%20fill%3D%22%23f3dfc8%22/%3E%3Cellipse%20cx%3D%2230%22%20cy%3D%2233.4%22%20rx%3D%222.8%22%20ry%3D%222%22%20fill%3D%22%235a3b2e%22/%3E%3Cpath%20d%3D%22M27.4%2037.6%20Q30%2040.4%2032.6%2037.6%22%20stroke%3D%22%235a3b2e%22%20stroke-width%3D%221.1%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Ccircle%20cx%3D%2221.5%22%20cy%3D%2227%22%20r%3D%221.9%22%20fill%3D%22%235a3b2e%22/%3E%3Ccircle%20cx%3D%2238.5%22%20cy%3D%2227%22%20r%3D%221.9%22%20fill%3D%22%235a3b2e%22/%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2233.5%22%20r%3D%222.8%22%20fill%3D%22%23f4a9a0%22%20opacity%3D%22.6%22/%3E%3Ccircle%20cx%3D%2243%22%20cy%3D%2233.5%22%20r%3D%222.8%22%20fill%3D%22%23f4a9a0%22%20opacity%3D%22.6%22/%3E%3C/svg%3E");
  --bear-full: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2078%22%3E%3Cellipse%20cx%3D%2230%22%20cy%3D%2261%22%20rx%3D%2218%22%20ry%3D%2215%22%20fill%3D%22%23c89b72%22/%3E%3Cellipse%20cx%3D%2230%22%20cy%3D%2264%22%20rx%3D%2210%22%20ry%3D%229%22%20fill%3D%22%23f1d3b3%22/%3E%3Cellipse%20cx%3D%2213%22%20cy%3D%2256%22%20rx%3D%225%22%20ry%3D%228%22%20fill%3D%22%23c89b72%22%20transform%3D%22rotate%2830%2013%2056%29%22/%3E%3Cellipse%20cx%3D%2247%22%20cy%3D%2256%22%20rx%3D%225%22%20ry%3D%228%22%20fill%3D%22%23c89b72%22%20transform%3D%22rotate%28-30%2047%2056%29%22/%3E%3Cellipse%20cx%3D%2220%22%20cy%3D%2274%22%20rx%3D%226.5%22%20ry%3D%224.5%22%20fill%3D%22%23c89b72%22/%3E%3Cellipse%20cx%3D%2240%22%20cy%3D%2274%22%20rx%3D%226.5%22%20ry%3D%224.5%22%20fill%3D%22%23c89b72%22/%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2213%22%20r%3D%228.5%22%20fill%3D%22%23c89b72%22/%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2213%22%20r%3D%224.4%22%20fill%3D%22%23f1d3b3%22/%3E%3Ccircle%20cx%3D%2246%22%20cy%3D%2213%22%20r%3D%228.5%22%20fill%3D%22%23c89b72%22/%3E%3Ccircle%20cx%3D%2246%22%20cy%3D%2213%22%20r%3D%224.4%22%20fill%3D%22%23f1d3b3%22/%3E%3Cellipse%20cx%3D%2230%22%20cy%3D%2229%22%20rx%3D%2221%22%20ry%3D%2218.5%22%20fill%3D%22%23c89b72%22/%3E%3Cellipse%20cx%3D%2230%22%20cy%3D%2236%22%20rx%3D%228.6%22%20ry%3D%226.6%22%20fill%3D%22%23f3dfc8%22/%3E%3Cellipse%20cx%3D%2230%22%20cy%3D%2233.4%22%20rx%3D%222.8%22%20ry%3D%222%22%20fill%3D%22%235a3b2e%22/%3E%3Cpath%20d%3D%22M27.4%2037.6%20Q30%2040.4%2032.6%2037.6%22%20stroke%3D%22%235a3b2e%22%20stroke-width%3D%221.1%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Ccircle%20cx%3D%2221.5%22%20cy%3D%2227%22%20r%3D%221.9%22%20fill%3D%22%235a3b2e%22/%3E%3Ccircle%20cx%3D%2238.5%22%20cy%3D%2227%22%20r%3D%221.9%22%20fill%3D%22%235a3b2e%22/%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2233.5%22%20r%3D%222.8%22%20fill%3D%22%23f4a9a0%22%20opacity%3D%22.6%22/%3E%3Ccircle%20cx%3D%2243%22%20cy%3D%2233.5%22%20r%3D%222.8%22%20fill%3D%22%23f4a9a0%22%20opacity%3D%22.6%22/%3E%3Cpath%20d%3D%22M30%2048%20L22%2044%20L22%2052z%20M30%2048%20L38%2044%20L38%2052z%22%20fill%3D%22%23f7cf4a%22%20stroke%3D%22%23e6b52e%22%20stroke-width%3D%22.8%22%20stroke-linejoin%3D%22round%22/%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2248%22%20r%3D%222.4%22%20fill%3D%22%23f7cf4a%22%20stroke%3D%22%23e6b52e%22%20stroke-width%3D%22.8%22/%3E%3C/svg%3E");
  --yflowers: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cellipse%20cx%3D%2214%22%20cy%3D%2228%22%20rx%3D%223.08%22%20ry%3D%227.00%22%20fill%3D%22%239ccc8f%22%20transform%3D%22rotate%28-25%2014%2028%29%22/%3E%3Cellipse%20cx%3D%2226%22%20cy%3D%2230%22%20rx%3D%222.64%22%20ry%3D%226.00%22%20fill%3D%22%23b6dba9%22%20transform%3D%22rotate%2830%2026%2030%29%22/%3E%3Cpath%20d%3D%22M20%2038%20V22%22%20stroke%3D%22%238cc27e%22%20stroke-width%3D%221.4%22/%3E%3Cellipse%20cx%3D%2214%22%20cy%3D%2210.15%22%20rx%3D%221.82%22%20ry%3D%223.50%22%20fill%3D%22%23ffe17a%22%20stroke%3D%22none%22%20stroke-width%3D%220.6%22%20transform%3D%22rotate%280.0%2014%2014%29%22/%3E%3Cellipse%20cx%3D%2214%22%20cy%3D%2210.15%22%20rx%3D%221.82%22%20ry%3D%223.50%22%20fill%3D%22%23ffe17a%22%20stroke%3D%22none%22%20stroke-width%3D%220.6%22%20transform%3D%22rotate%2860.0%2014%2014%29%22/%3E%3Cellipse%20cx%3D%2214%22%20cy%3D%2210.15%22%20rx%3D%221.82%22%20ry%3D%223.50%22%20fill%3D%22%23ffe17a%22%20stroke%3D%22none%22%20stroke-width%3D%220.6%22%20transform%3D%22rotate%28120.0%2014%2014%29%22/%3E%3Cellipse%20cx%3D%2214%22%20cy%3D%2210.15%22%20rx%3D%221.82%22%20ry%3D%223.50%22%20fill%3D%22%23ffe17a%22%20stroke%3D%22none%22%20stroke-width%3D%220.6%22%20transform%3D%22rotate%28180.0%2014%2014%29%22/%3E%3Cellipse%20cx%3D%2214%22%20cy%3D%2210.15%22%20rx%3D%221.82%22%20ry%3D%223.50%22%20fill%3D%22%23ffe17a%22%20stroke%3D%22none%22%20stroke-width%3D%220.6%22%20transform%3D%22rotate%28240.0%2014%2014%29%22/%3E%3Cellipse%20cx%3D%2214%22%20cy%3D%2210.15%22%20rx%3D%221.82%22%20ry%3D%223.50%22%20fill%3D%22%23ffe17a%22%20stroke%3D%22none%22%20stroke-width%3D%220.6%22%20transform%3D%22rotate%28300.0%2014%2014%29%22/%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%222.10%22%20fill%3D%22%23f4b740%22/%3E%3Cellipse%20cx%3D%2228%22%20cy%3D%2215.25%22%20rx%3D%221.30%22%20ry%3D%222.50%22%20fill%3D%22%23fff1b0%22%20stroke%3D%22none%22%20stroke-width%3D%220.6%22%20transform%3D%22rotate%280.0%2028%2018%29%22/%3E%3Cellipse%20cx%3D%2228%22%20cy%3D%2215.25%22%20rx%3D%221.30%22%20ry%3D%222.50%22%20fill%3D%22%23fff1b0%22%20stroke%3D%22none%22%20stroke-width%3D%220.6%22%20transform%3D%22rotate%2860.0%2028%2018%29%22/%3E%3Cellipse%20cx%3D%2228%22%20cy%3D%2215.25%22%20rx%3D%221.30%22%20ry%3D%222.50%22%20fill%3D%22%23fff1b0%22%20stroke%3D%22none%22%20stroke-width%3D%220.6%22%20transform%3D%22rotate%28120.0%2028%2018%29%22/%3E%3Cellipse%20cx%3D%2228%22%20cy%3D%2215.25%22%20rx%3D%221.30%22%20ry%3D%222.50%22%20fill%3D%22%23fff1b0%22%20stroke%3D%22none%22%20stroke-width%3D%220.6%22%20transform%3D%22rotate%28180.0%2028%2018%29%22/%3E%3Cellipse%20cx%3D%2228%22%20cy%3D%2215.25%22%20rx%3D%221.30%22%20ry%3D%222.50%22%20fill%3D%22%23fff1b0%22%20stroke%3D%22none%22%20stroke-width%3D%220.6%22%20transform%3D%22rotate%28240.0%2028%2018%29%22/%3E%3Cellipse%20cx%3D%2228%22%20cy%3D%2215.25%22%20rx%3D%221.30%22%20ry%3D%222.50%22%20fill%3D%22%23fff1b0%22%20stroke%3D%22none%22%20stroke-width%3D%220.6%22%20transform%3D%22rotate%28300.0%2028%2018%29%22/%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%2218%22%20r%3D%221.50%22%20fill%3D%22%23f4b740%22/%3E%3C/svg%3E");
}
.gpage[data-style="bear"] .sheet:not(.full) { background: #fff; border-radius: 2cqw; }
.gpage[data-style="bear"]:not([data-tpl="cover"]) .sheet::before { content: ""; position: absolute; top: -4.8cqw; left: 50%; translate: -50% 0; inline-size: 10cqw; block-size: 8cqw; background: var(--bear) center / contain no-repeat; z-index: 2; pointer-events: none; }

[data-style="sun"] {
  --title: #e8845a; --accent: #fbd38a; --accent-deep: #e8a23a; --tint: #fff7e6;
  --st1: #ffd96a; --st2: #f8b6c2; --st3: #e8845a; --st4: #bcd8f2;
  --outer: #fffdf8; --outer-img: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20300%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2234%22%20fill%3D%22%23fde8a6%22/%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%22-8%22%20r%3D%2222%22%20fill%3D%22%23fde8a6%22/%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%220%22%20r%3D%2230%22%20fill%3D%22%23f9d6c8%22/%3E%3Cpath%20d%3D%22M262.0%2040%20A26.0%2026.0%200%200%201%20314.0%2040%22%20stroke%3D%22%23f6a9b8%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M264.5%2040%20A23.5%2023.5%200%200%201%20311.5%2040%22%20stroke%3D%22%23f9c48a%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M267.0%2040%20A21.0%2021.0%200%200%201%20309.0%2040%22%20stroke%3D%22%23fbe28a%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M269.5%2040%20A18.5%2018.5%200%200%201%20306.5%2040%22%20stroke%3D%22%23bfe0b5%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M272.0%2040%20A16.0%2016.0%200%200%201%20304.0%2040%22%20stroke%3D%22%23a9d0ef%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cg%20fill%3D%22%23ffffff%22%3E%3Ccircle%20cx%3D%22269.0%22%20cy%3D%2237.0%22%20r%3D%224.0%22/%3E%3Ccircle%20cx%3D%22274.0%22%20cy%3D%2235.0%22%20r%3D%225.0%22/%3E%3Ccircle%20cx%3D%22279.5%22%20cy%3D%2237.0%22%20r%3D%224.0%22/%3E%3Crect%20x%3D%22267.0%22%20y%3D%2237.0%22%20width%3D%2214.0%22%20height%3D%224.0%22%20rx%3D%222.0%22/%3E%3C/g%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%22412%22%20r%3D%2236%22%20fill%3D%22%23fde8a6%22/%3E%3Ccircle%20cx%3D%2262%22%20cy%3D%22418%22%20r%3D%2230%22%20fill%3D%22%23f9d6c8%22/%3E%3Ccircle%20cx%3D%22120%22%20cy%3D%22420%22%20r%3D%2230%22%20fill%3D%22%23fff3cf%22/%3E%3Ccircle%20cx%3D%22178%22%20cy%3D%22418%22%20r%3D%2230%22%20fill%3D%22%23fde8a6%22/%3E%3Ccircle%20cx%3D%22234%22%20cy%3D%22416%22%20r%3D%2230%22%20fill%3D%22%23f9d6c8%22/%3E%3Ccircle%20cx%3D%22292%22%20cy%3D%22412%22%20r%3D%2234%22%20fill%3D%22%23fde8a6%22/%3E%3Cpath%20d%3D%22M40%2055%20Q40%2058%2043%2058%20Q40%2058%2040%2061%20Q40%2058%2037%2058%20Q40%2058%2040%2055z%22%20fill%3D%22%23ffd96a%22/%3E%3Cpath%20d%3D%22M255%2079.4%20Q255%2082%20257.6%2082%20Q255%2082%20255%2084.6%20Q255%2082%20252.4%2082%20Q255%2082%20255%2079.4z%22%20fill%3D%22%23f6a9b8%22/%3E%3C/svg%3E"); --outer-size: 100% 100%;
  --sun-cover: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20300%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22300%22%20height%3D%22400%22%20fill%3D%22%23fffdf8%22/%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%2210%22%20r%3D%2260%22%20fill%3D%22%23fde8a6%22/%3E%3Ccircle%20cx%3D%22250%22%20cy%3D%22-20%22%20r%3D%2240%22%20fill%3D%22%23fde8a6%22/%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2222%22%20fill%3D%22%23fff3cf%22/%3E%3Cpath%20d%3D%22M174.0%2092%20A62.0%2062.0%200%200%201%20298.0%2092%22%20stroke%3D%22%23f6a9b8%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M177.8%2092%20A58.2%2058.2%200%200%201%20294.2%2092%22%20stroke%3D%22%23f9c48a%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M181.6%2092%20A54.4%2054.4%200%200%201%20290.4%2092%22%20stroke%3D%22%23fbe28a%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M185.4%2092%20A50.6%2050.6%200%200%201%20286.6%2092%22%20stroke%3D%22%23bfe0b5%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M189.2%2092%20A46.8%2046.8%200%200%201%20282.8%2092%22%20stroke%3D%22%23a9d0ef%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cg%20fill%3D%22%23ffffff%22%3E%3Ccircle%20cx%3D%22168.5%22%20cy%3D%2278.5%22%20r%3D%226.8%22/%3E%3Ccircle%20cx%3D%22177.0%22%20cy%3D%2275.1%22%20r%3D%228.5%22/%3E%3Ccircle%20cx%3D%22186.35%22%20cy%3D%2278.5%22%20r%3D%226.8%22/%3E%3Crect%20x%3D%22165.1%22%20y%3D%2278.5%22%20width%3D%2223.8%22%20height%3D%226.8%22%20rx%3D%223.4%22/%3E%3C/g%3E%3Cg%20fill%3D%22%23ffffff%22%3E%3Ccircle%20cx%3D%22275.5%22%20cy%3D%2287.5%22%20r%3D%226.0%22/%3E%3Ccircle%20cx%3D%22283.0%22%20cy%3D%2284.5%22%20r%3D%227.5%22/%3E%3Ccircle%20cx%3D%22291.25%22%20cy%3D%2287.5%22%20r%3D%226.0%22/%3E%3Crect%20x%3D%22272.5%22%20y%3D%2287.5%22%20width%3D%2221.0%22%20height%3D%226.0%22%20rx%3D%223.0%22/%3E%3C/g%3E%3Cpath%20d%3D%22M62.0%2042.0%20L67.0%2042.0%22%20stroke%3D%22%23ffc94a%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M57.8%2054.9%20L61.8%2057.9%22%20stroke%3D%22%23ffc94a%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M46.8%2062.9%20L48.3%2067.7%22%20stroke%3D%22%23ffc94a%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M33.2%2062.9%20L31.7%2067.7%22%20stroke%3D%22%23ffc94a%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M22.2%2054.9%20L18.2%2057.9%22%20stroke%3D%22%23ffc94a%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M18.0%2042.0%20L13.0%2042.0%22%20stroke%3D%22%23ffc94a%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M22.2%2029.1%20L18.2%2026.1%22%20stroke%3D%22%23ffc94a%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M33.2%2021.1%20L31.7%2016.3%22%20stroke%3D%22%23ffc94a%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M46.8%2021.1%20L48.3%2016.3%22%20stroke%3D%22%23ffc94a%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M57.8%2029.1%20L61.8%2026.1%22%20stroke%3D%22%23ffc94a%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2242%22%20r%3D%2219%22%20fill%3D%22%23ffd96a%22/%3E%3Cpath%20d%3D%22M32.02%2041.05%20q2.28%20-3.04%204.56%200%20M43.42%2041.05%20q2.28%20-3.04%204.56%200%22%20stroke%3D%22%238a5a3a%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M35.82%2046.75%20q4.18%204.56%208.36%200%22%20stroke%3D%22%238a5a3a%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Ccircle%20cx%3D%2229.549999999999997%22%20cy%3D%2246.18%22%20r%3D%222.66%22%20fill%3D%22%23f6a38f%22%20opacity%3D%22.7%22/%3E%3Ccircle%20cx%3D%2250.45%22%20cy%3D%2246.18%22%20r%3D%222.66%22%20fill%3D%22%23f6a38f%22%20opacity%3D%22.7%22/%3E%3Cpath%20d%3D%22M110%2030%20Q110%2034%20114%2034%20Q110%2034%20110%2038%20Q110%2034%20106%2034%20Q110%2034%20110%2030z%22%20fill%3D%22%23ffd96a%22/%3E%3Cpath%20d%3D%22M285%20136.6%20Q285%20140%20288.4%20140%20Q285%20140%20285%20143.4%20Q285%20140%20281.6%20140%20Q285%20140%20285%20136.6z%22%20fill%3D%22%23f6a9b8%22/%3E%3Cpath%20d%3D%22M16%20117%20Q16%20120%2019%20120%20Q16%20120%2016%20123%20Q16%20120%2013%20120%20Q16%20120%2016%20117z%22%20fill%3D%22%23a9d0ef%22/%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22420%22%20r%3D%2262%22%20fill%3D%22%23fde8a6%22/%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%22428%22%20r%3D%2250%22%20fill%3D%22%23f9d6c8%22/%3E%3Ccircle%20cx%3D%22160%22%20cy%3D%22430%22%20r%3D%2252%22%20fill%3D%22%23fff3cf%22/%3E%3Ccircle%20cx%3D%22232%22%20cy%3D%22426%22%20r%3D%2252%22%20fill%3D%22%23fde8a6%22/%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22418%22%20r%3D%2258%22%20fill%3D%22%23f9d6c8%22/%3E%3Cpath%20d%3D%22M244.0%20384%20A22.0%2022.0%200%200%201%20288.0%20384%22%20stroke%3D%22%23f6a9b8%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M246.5%20384%20A19.5%2019.5%200%200%201%20285.5%20384%22%20stroke%3D%22%23f9c48a%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M249.0%20384%20A17.0%2017.0%200%200%201%20283.0%20384%22%20stroke%3D%22%23fbe28a%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M251.5%20384%20A14.5%2014.5%200%200%201%20280.5%20384%22%20stroke%3D%22%23bfe0b5%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M254.0%20384%20A12.0%2012.0%200%200%201%20278.0%20384%22%20stroke%3D%22%23a9d0ef%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cg%20fill%3D%22%23ffffff%22%3E%3Ccircle%20cx%3D%2215.5%22%20cy%3D%22377.5%22%20r%3D%226.0%22/%3E%3Ccircle%20cx%3D%2223.0%22%20cy%3D%22374.5%22%20r%3D%227.5%22/%3E%3Ccircle%20cx%3D%2231.25%22%20cy%3D%22377.5%22%20r%3D%226.0%22/%3E%3Crect%20x%3D%2212.5%22%20y%3D%22377.5%22%20width%3D%2221.0%22%20height%3D%226.0%22%20rx%3D%223.0%22/%3E%3C/g%3E%3C/svg%3E"); --sun-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2050%2050%22%3E%3Cpath%20d%3D%22M41.0%2025.0%20L46.0%2025.0%22%20stroke%3D%22%23ffc94a%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M37.9%2034.4%20L42.0%2037.3%22%20stroke%3D%22%23ffc94a%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M29.9%2040.2%20L31.5%2045.0%22%20stroke%3D%22%23ffc94a%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M20.1%2040.2%20L18.5%2045.0%22%20stroke%3D%22%23ffc94a%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M12.1%2034.4%20L8.0%2037.3%22%20stroke%3D%22%23ffc94a%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M9.0%2025.0%20L4.0%2025.0%22%20stroke%3D%22%23ffc94a%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M12.1%2015.6%20L8.0%2012.7%22%20stroke%3D%22%23ffc94a%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M20.1%209.8%20L18.5%205.0%22%20stroke%3D%22%23ffc94a%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M29.9%209.8%20L31.5%205.0%22%20stroke%3D%22%23ffc94a%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M37.9%2015.6%20L42.0%2012.7%22%20stroke%3D%22%23ffc94a%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%2225%22%20r%3D%2213%22%20fill%3D%22%23ffd96a%22/%3E%3Cpath%20d%3D%22M19.54%2024.35%20q1.56%20-2.08%203.12%200%20M27.34%2024.35%20q1.56%20-2.08%203.12%200%22%20stroke%3D%22%238a5a3a%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M22.14%2028.25%20q2.86%203.12%205.72%200%22%20stroke%3D%22%238a5a3a%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Ccircle%20cx%3D%2217.85%22%20cy%3D%2227.86%22%20r%3D%221.8200000000000003%22%20fill%3D%22%23f6a38f%22%20opacity%3D%22.7%22/%3E%3Ccircle%20cx%3D%2232.15%22%20cy%3D%2227.86%22%20r%3D%221.8200000000000003%22%20fill%3D%22%23f6a38f%22%20opacity%3D%22.7%22/%3E%3C/svg%3E");
  --frame-bg: transparent; --frame-pad: 0cqw; --frame-radius: 2cqw; --frame-shadow: none; --stitch: 0;
  --age-bg: #fff0cf; --age-ink: #a0602f; --card: #fffaf0; --card-title: #e8845a;
}
.gpage[data-style="sun"] .sheet:not(.full) { background: transparent; }
.gpage[data-style="sun"]:not([data-tpl="cover"]) .sheet::before { content: ""; position: absolute; top: -4.2cqw; left: 50%; translate: -50% 0; inline-size: 9cqw; block-size: 9cqw; background: var(--sun-icon) center / contain no-repeat; pointer-events: none; }

.gpage:is([data-style="check"], [data-style="pink"], [data-style="flowers"], [data-style="bear"], [data-style="sun"], [data-style="mint"], [data-style="polka"], [data-style="lattice"], [data-style="lemon"], [data-style="hello"], [data-style="daisuki"], [data-style="days"], [data-style="band"])[data-tpl="cover"] .sheet.full { background: transparent; }
/* やわらかいデザイン共通：写真の枠は角を丸めて影だけ、エコー写真はまっすぐ・週数は小さなラベル */
.gpage:is([data-style="check"], [data-style="pink"], [data-style="flowers"], [data-style="bear"], [data-style="sun"], [data-style="mint"], [data-style="polka"], [data-style="lattice"], [data-style="lemon"], [data-style="hello"], [data-style="daisuki"], [data-style="days"], [data-style="band"]) .pframe img { box-shadow: 0 0.5cqw 1.6cqw rgba(90, 70, 60, 0.16); }
.gpage:is([data-style="check"], [data-style="pink"], [data-style="flowers"], [data-style="bear"], [data-style="sun"], [data-style="mint"], [data-style="polka"], [data-style="lattice"], [data-style="lemon"], [data-style="hello"], [data-style="daisuki"], [data-style="days"], [data-style="band"]) .hc { font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; letter-spacing: 0.1em; }
.gpage:is([data-style="check"], [data-style="pink"], [data-style="flowers"], [data-style="bear"], [data-style="sun"], [data-style="mint"], [data-style="polka"], [data-style="lattice"], [data-style="lemon"], [data-style="hello"], [data-style="daisuki"], [data-style="days"], [data-style="band"]) .hpill { background: var(--age-bg); color: var(--age-ink); }
.gpage:is([data-style="check"], [data-style="pink"], [data-style="flowers"], [data-style="bear"], [data-style="sun"], [data-style="mint"], [data-style="polka"], [data-style="lattice"], [data-style="lemon"], [data-style="hello"], [data-style="daisuki"], [data-style="days"], [data-style="band"]) .echo-cell { rotate: 0deg !important; }
.gpage:is([data-style="check"], [data-style="pink"], [data-style="flowers"], [data-style="bear"], [data-style="sun"], [data-style="mint"], [data-style="polka"], [data-style="lattice"], [data-style="lemon"], [data-style="hello"], [data-style="daisuki"], [data-style="days"], [data-style="band"]) .echo-img { border: 0; border-radius: 1.6cqw; overflow: hidden; box-shadow: 0 0.6cqw 1.8cqw rgba(80, 90, 120, 0.18); }
.gpage:is([data-style="check"], [data-style="pink"], [data-style="flowers"], [data-style="bear"], [data-style="sun"], [data-style="mint"], [data-style="polka"], [data-style="lattice"], [data-style="lemon"], [data-style="hello"], [data-style="daisuki"], [data-style="days"], [data-style="band"]) .ewk { left: 1.4cqw; bottom: 1.4cqw; font-family: "Zen Maru Gothic", sans-serif; font-size: 3.4cqw !important; background: rgba(255, 255, 255, 0.92); color: var(--title); text-shadow: none; padding: 0.5cqw 1.8cqw; border-radius: 9cqw; }
.gpage:is([data-style="check"], [data-style="pink"], [data-style="flowers"], [data-style="bear"], [data-style="sun"], [data-style="mint"], [data-style="polka"], [data-style="lattice"], [data-style="lemon"], [data-style="hello"], [data-style="daisuki"], [data-style="days"], [data-style="band"]) .ewk small { font-size: 2.2cqw; margin-inline-start: 0.3cqw; }
/* ================= ページの土台 ================= */
.gpage { container-type: inline-size; position: relative; aspect-ratio: 3 / 4; overflow: hidden; background-color: var(--outer); background-image: var(--outer-img); background-size: var(--outer-size); background-position: var(--outer-pos, 50% 50%); color: var(--ink); }
/* まわりの柄は、ページのまん中を基準にならべて左右・上下で対称にする。
   粒の中心が、ふち（4.4cqw）のまん中 2.2cqw に来る大きさ：よこ 47.8/k、たて 64.47/m */
.gpage { --t1x: 4.78cqw; --t1y: 4.605cqw; --t2x: 7.967cqw; --t2y: 8.058cqw; --t3x: 15.93cqw; --t3y: 16.12cqw; }
.sheet { position: absolute; inset: 4.4cqw; background: var(--paper); border-radius: 2.4cqw; }
.gpage[data-style="pastel"] .sheet { box-shadow: inset 0 0 0 0.5cqw #d6ecfa; }
.gpage[data-style="colorful"] .sheet { border-radius: 0.8cqw; }
.abs { position: absolute; }
.folio { position: absolute; inset-block-end: 1.3cqw; inset-inline: 0; text-align: center; font-size: 2.4cqw; color: var(--ink-soft); }

/* 文字 */
.g-title { font-family: var(--f-title); font-weight: var(--tw); color: var(--title); font-size: calc(7.6cqw * var(--ts)); line-height: 1.25; letter-spacing: 0.02em; }
.g-title.sm { font-size: calc(5.6cqw * var(--ts)); white-space: nowrap; }
.g-lead { font-family: var(--f-hand); font-size: 3.4cqw; line-height: 1.55; }
.hand { font-family: var(--f-hand); font-size: 3.1cqw; line-height: 1.6; word-break: auto-phrase; }
.center { text-align: center; }
.age { line-height: 1.5; display: inline-block; font-family: var(--ui); font-weight: 700; font-size: 2.8cqw; color: var(--age-ink); background: var(--age-bg); border-radius: 9cqw; padding: 0.5cqw 3cqw; letter-spacing: 0.06em; white-space: nowrap; }

/* 写真の枠（デザインごとに見た目が変わる） */
.pframe { background: var(--frame-bg); border-radius: var(--frame-radius); padding: var(--frame-pad); position: relative; box-shadow: var(--frame-shadow); margin: 0; }
.pframe::after { content: ""; position: absolute; inset: 0.8cqw; border: 0.45cqw dashed rgba(255, 255, 255, 0.9); border-radius: 2.6cqw; pointer-events: none; opacity: var(--stitch); }
.pframe img { display: block; inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: calc(var(--frame-radius) * 0.6); }
.pframe.sq img { aspect-ratio: 1; }
.alt-shadow { --shadow-c: #f0507e; }
.polaroid { background: #fff; padding: 1.4cqw 1.4cqw 5cqw; box-shadow: 0 0.8cqw 2.4cqw rgba(90, 59, 51, 0.2); }
.polaroid img { display: block; inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.polaroid .cap { position: absolute; inset-inline: 0; inset-block-end: 1cqw; text-align: center; font-family: var(--f-hand); font-size: 2.5cqw; white-space: nowrap; }
.artpaper { background: #fff; padding: 1.6cqw; box-shadow: 0 0.8cqw 2.6cqw rgba(90, 59, 51, 0.16); }
.gpage[data-style="colorful"] .artpaper { box-shadow: 1.6cqw 1.6cqw 0 #ffc93c; }
.artpaper img { display: block; inline-size: 100%; }
/* エコー写真：黒い写真に白いふち、週数を大きく重ねる */
.echo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.4cqw 5cqw; }
.echo-grid.one .echo-cell { grid-column: 1 / -1; inline-size: 82%; justify-self: center; }
.echo-img { position: relative; background: #111; border: 1.3cqw solid #fff; box-shadow: 0 0.8cqw 2.4cqw rgba(90, 59, 51, 0.2); }
.echo-img img { display: block; inline-size: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.enote { font-size: 3.3cqw; line-height: 1.6; }
.pframe.gvideo.tall img, .pframe.gvideo.tall video { aspect-ratio: 10 / 9; }
.echo-grid.two .echo-img img { aspect-ratio: 1; }
.ewk { position: absolute; left: 1.8cqw; bottom: 0.6cqw; color: #fff; font-family: var(--f-title); font-weight: 900; font-size: 8.4cqw; line-height: 1; text-shadow: 0 0 1.2cqw rgba(0, 0, 0, 0.7); }
.ewk small { font-size: 2.5cqw; margin-inline-start: 0.6cqw; }
.edate { position: absolute; right: 1.4cqw; top: 0.8cqw; color: #fff; font-size: 2.1cqw; opacity: 0.85; }
.echo-cell .hand { margin-block-start: 1.4cqw; font-size: 2.8cqw; line-height: 1.5; }
.round { border-radius: 50%; padding: 1.2cqw; background: var(--accent); }
.round img { display: block; inline-size: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 0.8cqw solid #fff; }

/* マスキングテープ */
.tape { position: absolute; block-size: 4.6cqw; inline-size: 16cqw; opacity: 0.9; background-color: var(--tape-a); background-image: var(--tape-a-img); background-size: var(--tape-a-size); box-shadow: 0 0.2cqw 0.6cqw rgba(0, 0, 0, 0.06); }
.tape.b { background-color: var(--tape-b); background-image: var(--tape-b-img); background-size: var(--tape-b-size); }

/* 吹き出し・カード */
.bubble { background: var(--tint); border-radius: 5cqw; padding: 2cqw 2.4cqw; font-family: var(--f-hand); font-size: 2.8cqw; line-height: 1.45; text-align: center; }
.bubble::after { content: ""; position: absolute; inset-block-end: -2.2cqw; inset-inline-start: 30%; inline-size: 4cqw; block-size: 3cqw; background: var(--tint); clip-path: polygon(0 0, 100% 0, 30% 100%); }
.card { background: var(--card); border-radius: 3cqw; padding: 3cqw 3.4cqw; }
.card h3 { font-family: var(--f-hand); font-size: 3.5cqw; font-weight: 600; color: var(--card-title); margin-block-end: 1.4cqw; }
.checks, .likes, .words { list-style: none; margin: 0; padding: 0; display: grid; }
.checks { gap: 1cqw; }
.checks li { display: flex; align-items: center; gap: 1.4cqw; font-family: var(--f-hand); font-size: 3.1cqw; line-height: 1.4; }
.checks svg { inline-size: 3.6cqw; block-size: 3.6cqw; flex: none; color: var(--accent-deep); }
.likes { gap: 1.6cqw; }
.likes li { display: flex; align-items: center; gap: 1.2cqw; font-family: var(--f-hand); font-size: 3cqw; white-space: nowrap; }
.likes svg { inline-size: 3.2cqw; block-size: 3.2cqw; color: var(--accent); flex: none; }
.words { gap: 1.6cqw; }
.words li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.8cqw; }
.words .q { font-family: var(--f-hand); font-size: 3.2cqw; line-height: 1.35; }
.words .q small { display: block; font-size: 2.3cqw; color: var(--ink-soft); }
.vbtn { inline-size: 6.4cqw; block-size: 6.4cqw; border-radius: 50%; border: 0; padding: 0; background: var(--blue); color: #fff; display: grid; place-items: center; cursor: pointer; }
.vbtn svg { inline-size: 2.6cqw; block-size: 2.6cqw; margin-inline-start: 0.3cqw; }
.vbtn.is-playing { background: var(--accent-deep); }

/* 身長のグラフ */
.growth { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3cqw; align-items: end; block-size: 100%; }
.growth .col { display: grid; justify-items: center; gap: 1cqw; align-self: end; }
.growth .val { font-family: var(--f-hand); font-size: 3cqw; white-space: nowrap; }
.growth .bar { inline-size: 70%; border-radius: 3cqw 3cqw 0.8cqw 0.8cqw; background: var(--accent); }
.growth .col:last-child .bar { background: var(--accent-deep); }
.growth .lab { font-size: 2.5cqw; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.growth .kg { font-family: var(--f-hand); font-size: 2.6cqw; color: var(--ink-soft); white-space: nowrap; }
.baseline { position: absolute; inset-inline: 0; block-size: 0.4cqw; background: var(--tint); border-radius: 1cqw; }

/* 手紙 */
.letter { background-color: #fff; background-image: repeating-linear-gradient(transparent 0 6.5cqw, var(--tint) 6.5cqw 6.8cqw); background-position: 0 4.2cqw; border-radius: 2cqw; padding: 4.4cqw 5cqw; box-shadow: 0 0.6cqw 2.4cqw rgba(90, 59, 51, 0.12); }
.letter p { font-family: var(--f-hand); font-size: 3.4cqw; line-height: 6.8cqw; }
.letter .sign { text-align: end; margin-block-start: 1cqw; }

/* シール */
.stk { position: absolute; pointer-events: none; }
/* 1冊だけの手直しで足した文字 */
.otx { color: var(--title); font-weight: 700; line-height: 1.3; pointer-events: none; z-index: 3; }
.ost { z-index: 3; }
.s1 { color: var(--st1); } .s2 { color: var(--st2); } .s3 { color: var(--st3); } .s4 { color: var(--st4); }

/* 動画・声のページ */
.pframe.wide img { aspect-ratio: 4 / 3; }
.gthumb { position: relative; display: block; inline-size: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.gplay { position: absolute; left: 50%; top: 50%; translate: -50% -50%; inline-size: 16cqw; block-size: 16cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.92); display: grid; place-items: center; box-shadow: 0 0.6cqw 2cqw rgba(0, 0, 0, 0.2); }
.gplay svg { inline-size: 6cqw; block-size: 6cqw; color: var(--accent-deep); margin-inline-start: 1cqw; }
.glen { position: absolute; inset-inline-end: 2cqw; inset-block-end: 2cqw; font-size: 2.6cqw; font-weight: 700; color: #fff; background: rgba(0, 0, 0, 0.45); border-radius: 2cqw; padding: 0.3cqw 1.6cqw; }
.gvideo video { display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--frame-radius) * 0.6); background: #222; }
.gvoice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 3cqw; }
.vbtn.big { inline-size: 12cqw; block-size: 12cqw; }
.vbtn.big svg { inline-size: 4.6cqw; block-size: 4.6cqw; }
.glabel { font-family: var(--f-hand); font-size: 3.4cqw; font-weight: 600; margin: 0 0 1cqw; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gvoice > div { min-inline-size: 0; }
.gwave { display: flex; align-items: center; gap: 0.5cqw; block-size: 6cqw; }
.gwave i { flex: 1; border-radius: 3cqw; background: var(--accent); block-size: calc(var(--h) * 100%); }
.glen2 { font-size: 2.8cqw; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ================= 表紙（正方形・ページ全体を使う） ================= */
.gpage.sq { aspect-ratio: 1 / 1; }
.sheet.full { inset: 0; border-radius: 0; background: transparent; box-shadow: none !important; }
.ctitle { font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; font-weight: 900; line-height: 1.14; letter-spacing: 0.02em; margin: 0; -webkit-text-stroke: 0.22cqw currentColor; paint-order: stroke fill; }
.csub { margin: 0; color: #4a3127; }
.csub.a { font-family: "Zen Maru Gothic", sans-serif; font-weight: 700; font-size: 2.9cqw; letter-spacing: 0.3em; padding-block-end: 1cqw; background: linear-gradient(#f6c31c, #f6c31c) center bottom / 70% 0.45cqw no-repeat; }
.csub.b { font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; font-size: 3.6cqw; color: #1f73c9; margin-top: 0.8cqw; letter-spacing: 0.06em; }
.csub.c { font-family: "Klee One", "Zen Maru Gothic", sans-serif; font-weight: 600; font-size: 3.6cqw; letter-spacing: 0.1em; margin-top: 1cqw; display: inline-block; padding-block-end: 1cqw; background: linear-gradient(#f6a2c4, #f6a2c4) center bottom / 100% 0.5cqw no-repeat; border-radius: 1cqw; }
.csub.c2 { font-family: "Klee One", "Zen Maru Gothic", sans-serif; font-weight: 600; font-size: 3.6cqw; letter-spacing: 0.14em; display: inline-block; padding-block-end: 0.8cqw; background: linear-gradient(#9fd0f4, #9fd0f4) center bottom / 100% 0.5cqw no-repeat; }
.cperiod { margin: 1.4cqw 0 0; font-family: "Zen Maru Gothic", sans-serif; font-weight: 700; font-size: 2.8cqw; letter-spacing: 0.16em; color: #4a3127; }
.cperiod.b { margin: 0; font-weight: 900; font-size: 4.6cqw; color: #1f73c9; letter-spacing: 0.12em; }
.cperiod.c { font-family: "Klee One", "Zen Maru Gothic", sans-serif; font-weight: 600; font-size: 3.4cqw; }
.cscrap { opacity: 0.92; }
.ctape { opacity: 0.88; box-shadow: 0 0.2cqw 0.6cqw rgba(0, 0, 0, 0.06); }
.cblobw { filter: drop-shadow(0 0.5cqw 1.4cqw rgba(90, 59, 51, 0.16)); }
.cblob { position: absolute; inset: 0; background: #fff; }
.cblob img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(0.955); }
.cdeckle { filter: drop-shadow(0 0.6cqw 1.2cqw rgba(90, 59, 51, 0.18)); }
.cdeckle > div { position: absolute; inset: 0; background: #fbf8f0; padding: 2.6cqw; }
.cdeckle img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.cartmain { background: #fff; padding: 1.4cqw; box-shadow: 0 0.8cqw 2cqw rgba(60, 100, 140, 0.18); }
.cartmain img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.cloud { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; filter: drop-shadow(0 0.5cqw 1cqw rgba(60, 120, 180, 0.15)); }
.cphoto { background: #fff; padding: 1.4cqw; border-radius: 2.4cqw; box-shadow: 0 0.6cqw 2cqw rgba(90, 59, 51, 0.16); }
.cphoto img { display: block; inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 1.4cqw; }
/* ================= 9つの表紙 ================= */
.ctitle.ow { -webkit-text-stroke: 1.5cqw #fff; paint-order: stroke fill; }
.cs, .cp { margin: 0; font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; font-weight: 700; letter-spacing: 0.18em; }
.cs.ow, .cp.ow { -webkit-text-stroke: 1cqw #fff; paint-order: stroke fill; }
.cp { font-size: 2.8cqw; margin-top: 1cqw; letter-spacing: 0.14em; }
.cp.lined { display: flex; align-items: center; justify-content: center; gap: 2cqw; }
.cp.lined::before, .cp.lined::after { content: ""; flex: 0 0 9cqw; border-top: 0.3cqw solid currentColor; opacity: 0.7; }
.cp.smile { padding-bottom: 1.6cqw; background: radial-gradient(60% 1.2cqw at 50% 0, transparent 92%, currentColor 94%, currentColor 100%, transparent) center bottom / 70% 1.4cqw no-repeat; }
.cp.bow { display: flex; align-items: center; justify-content: center; gap: 2cqw; }
.cp.bow::before, .cp.bow::after { content: ""; flex: 0 0 10cqw; border-top: 0.3cqw solid #f2a1a8; }
.cpola { background: #fff; padding: 2.4cqw; box-shadow: 0 0.6cqw 2cqw rgba(90, 59, 51, 0.18); }
.cpola.thin { padding: 1.2cqw; }
.cpola.small { padding: 1.4cqw 1.4cqw 1.4cqw; }
.cpola.fill { display: flex; }
.cpola.fill img { block-size: 100%; min-block-size: 0; }
.cpola img { display: block; inline-size: 100%; object-fit: cover; object-position: 50% 35%; }
.cart { background: #fff; padding: 1.4cqw; box-shadow: 0 0.6cqw 2cqw rgba(140, 110, 30, 0.18); }
.cart img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.cart.soft { box-shadow: none; padding: 0; background: transparent; }
.cframeimg { inset: 0; inline-size: 100%; block-size: 100%; display: block; pointer-events: none; }
.cslot { overflow: hidden; background: #eee; }
.cslot img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 35%; }
.cslot.art { background: #fff; }
.cslot.rr { border-radius: 3.4cqw; box-shadow: 0 0.6cqw 2cqw rgba(90, 59, 51, 0.14); }
.cslot.art img { object-fit: contain; object-position: 50% 50%; padding: 1.2cqw; box-sizing: border-box; }
.cbox { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.cround { border-radius: 3.4cqw; overflow: hidden; box-shadow: 0 0.6cqw 2cqw rgba(90, 59, 51, 0.14); }
.cround img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 35%; display: block; }
.crainbow { border-radius: 50%; opacity: 0.85; filter: blur(0.25cqw); background: radial-gradient(circle closest-side, transparent 0 60%, #cdb9ef 60% 64.5%, #a9d3f3 64.5% 69%, #bfe6b9 69% 73.5%, #fbe9a4 73.5% 78%, #f9cfae 78% 82.5%, #f6b6c7 82.5% 87%, transparent 87%); }
.cfade { -webkit-mask-image: radial-gradient(ellipse 50% 52% at 50% 46%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 50% 52% at 50% 46%, #000 62%, transparent 100%); }
.cfade img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.ccloudband { background: radial-gradient(circle at 50% 100%, #fff 70%, transparent 71%) 0 0 / 14cqw 8cqw repeat-x, linear-gradient(transparent 4cqw, #fff 4cqw); filter: drop-shadow(0 -0.4cqw 0.6cqw rgba(160, 190, 220, 0.25)); }
.ccloudpic { --cm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 84'%3E%3Cg fill='%23000'%3E%3Ccircle cx='22' cy='26' r='19'/%3E%3Ccircle cx='46' cy='17' r='17'/%3E%3Ccircle cx='70' cy='20' r='18'/%3E%3Ccircle cx='86' cy='40' r='14'/%3E%3Ccircle cx='80' cy='64' r='18'/%3E%3Ccircle cx='54' cy='70' r='14'/%3E%3Ccircle cx='28' cy='66' r='17'/%3E%3Ccircle cx='13' cy='46' r='13'/%3E%3Crect x='14' y='18' width='72' height='52' rx='8'/%3E%3C/g%3E%3C/svg%3E"); filter: drop-shadow(0 0.5cqw 1.2cqw rgba(80, 120, 180, 0.18)); }
.ccloudpic .cwhite, .ccloudpic img { position: absolute; -webkit-mask: var(--cm) center / 100% 100% no-repeat; mask: var(--cm) center / 100% 100% no-repeat; }
.ccloudpic .cwhite { inset: 0; background: #fff; }
.ccloudpic img { inset: 1.6cqw; inline-size: calc(100% - 3.2cqw); block-size: calc(100% - 3.2cqw); object-fit: cover; object-position: 50% 40%; }
.cframe { background: #fff; padding: 1.4cqw; }
.cframe img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 35%; display: block; }
.cstamp { --bg: #fffdfb; padding: 1.3cqw; filter: drop-shadow(0 0.3cqw 0.6cqw rgba(90, 59, 51, 0.14));
  background: radial-gradient(circle at 50% 0, var(--bg) 0.6cqw, transparent 0.65cqw) 0 0 / 2cqw 1cqw repeat-x, radial-gradient(circle at 50% 100%, var(--bg) 0.6cqw, transparent 0.65cqw) 0 100% / 2cqw 1cqw repeat-x, radial-gradient(circle at 0 50%, var(--bg) 0.6cqw, transparent 0.65cqw) 0 0 / 1cqw 2cqw repeat-y, radial-gradient(circle at 100% 50%, var(--bg) 0.6cqw, transparent 0.65cqw) 100% 0 / 1cqw 2cqw repeat-y, #fff; }
.cstamp.big { padding: 2.6cqw; background-size: 3.2cqw 1.6cqw, 3.2cqw 1.6cqw, 1.6cqw 3.2cqw, 1.6cqw 3.2cqw, auto; }
.cstamp.big { background: radial-gradient(circle at 50% 0, var(--bg) 0.9cqw, transparent 0.95cqw) 0 0 / 3.2cqw 1.6cqw repeat-x, radial-gradient(circle at 50% 100%, var(--bg) 0.9cqw, transparent 0.95cqw) 0 100% / 3.2cqw 1.6cqw repeat-x, radial-gradient(circle at 0 50%, var(--bg) 0.9cqw, transparent 0.95cqw) 0 0 / 1.6cqw 3.2cqw repeat-y, radial-gradient(circle at 100% 50%, var(--bg) 0.9cqw, transparent 0.95cqw) 100% 0 / 1.6cqw 3.2cqw repeat-y, #fff; }
.cstamp img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 40%; }
.cst { position: relative; inline-size: 100%; block-size: 100%; display: grid; place-items: center; overflow: hidden; }
.cst svg { inline-size: 80%; block-size: 80%; }
.cnum { position: absolute; right: 0.8cqw; bottom: 0.4cqw; font: 700 2.2cqw/1 "Zen Maru Gothic", sans-serif; color: #fff; text-shadow: 0 0 0.4cqw rgba(0, 0, 0, 0.25); }

/* このころのこと（あいたところのメモ） */
.gmemo { background: var(--card); border-radius: 2.4cqw; padding: 3.2cqw 3.4cqw 2cqw; box-shadow: inset 0 0 0 0.35cqw color-mix(in srgb, var(--accent) 45%, transparent); }
.gmemo-h { position: absolute; inset-block-start: -2.2cqw; inset-inline-start: 3cqw; font-family: var(--ui); font-weight: 700; font-size: 2.5cqw; color: var(--age-ink); background: var(--age-bg); border-radius: 9cqw; padding: 0.3cqw 2.4cqw; letter-spacing: 0.06em; white-space: nowrap; }
.gmemo .hand { margin: 0; font-size: 2.9cqw; line-height: 1.65; }

/* 表紙：絵の枠の透明なところ（写真のまわり）は白 */
.gpage[data-tpl="cover"] .sheet.full { background: #fff; }

/* エコー5〜6枚：ひとことは1行で */
.echo-cell.e6 .hand { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* エコー5〜6枚：まっすぐ並べたポラロイド */
.echo-pola { background: #fff; padding: 1.4cqw 1.4cqw 1cqw; border-radius: 1cqw; box-shadow: 0 0.6cqw 2cqw rgba(90, 59, 51, 0.14); text-align: center; }
.echo-pola img { display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #111; border-radius: 0.4cqw; }
.echo-pola .ecap { margin: 1cqw 0 0; font-family: var(--ui); font-weight: 700; font-size: 2.6cqw; color: var(--ink); letter-spacing: 0.04em; white-space: nowrap; }
.echo-pola .ecap i { font-style: normal; color: var(--accent-deep); margin: 0 0.8cqw; }
.echo-pola .enote1 { margin: 0.4cqw 0 0; font-size: 2.5cqw; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* うまれた日：時間・体重・身長 */
.gbirth { display: grid; gap: 1cqw; padding: 2.2cqw 2cqw; text-align: center; }
.gbirth span { display: block; font-family: var(--ui); font-size: 2.4cqw; font-weight: 700; color: var(--ink-soft); letter-spacing: 0.04em; }
.gbirth b { display: block; font-family: var(--f-title); font-weight: var(--tw); font-size: 4.2cqw; color: var(--title); line-height: 1.15; }

/* 表紙：題名の下の小さな見出し（♥ マタニティアルバム ♥）と、リボンの帯のサブタイトル */
.cbox.kick { position: absolute; }
.ckick { position: absolute; z-index: 2; top: calc(100% - 1.2cqw); left: 0; right: 0; inline-size: fit-content; margin: 0 auto; padding: 0.4cqw 2.6cqw; border-radius: 9cqw; background: rgba(255, 255, 255, 0.94); box-shadow: 0 0 1.2cqw 0.6cqw rgba(255, 255, 255, 0.8); font-family: "Zen Maru Gothic", sans-serif; font-weight: 700; font-size: 3.3cqw; letter-spacing: 0.14em; color: #6a4a40; white-space: nowrap; }
.ckick span { color: #f2879d; font-size: 0.8em; margin: 0 1.4cqw; }
.cribbon { display: inline-block !important; position: relative; background: #fde3ec; color: #6a4a40 !important; padding: 0.7cqw 5cqw !important; border-radius: 0.6cqw; letter-spacing: 0.16em !important; clip-path: polygon(0 0, 100% 0, 97% 50%, 100% 100%, 0 100%, 3% 50%); }
p.abs.cribbon { inset-inline: auto !important; left: 50% !important; transform: translateX(-50%); }

/* 写真5〜6枚 */
.gcap { margin: 0.8cqw 0 0; font-size: 2.6cqw; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* かわいいことば（言いまちがい）3〜4つ */
.mk-card { background: var(--tint); border-radius: 3cqw; display: grid; grid-template-columns: var(--d) minmax(0, 1fr); align-items: center; gap: 3.2cqw; padding: 0 3.4cqw; }
.mk-card.flip { grid-template-columns: minmax(0, 1fr) var(--d); }
.mk-card.flip .mk-pic { order: 2; }
.mk-pic { inline-size: var(--d); block-size: var(--d); border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.8cqw rgba(255, 255, 255, 0.9), 0 0.6cqw 1.6cqw rgba(90, 59, 51, 0.12); overflow: hidden; display: grid; place-items: center; }
.mk-pic img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.mk-ini { font-family: var(--f-hand); font-weight: 700; font-size: calc(var(--d) * 0.5); color: var(--accent-deep); line-height: 1; }
.mk-ai { font-size: 2.3cqw; line-height: 1.4; text-align: center; color: var(--ink-soft, #8a6a60); border: 0.4cqw dashed var(--accent); border-radius: 50%; inline-size: 100%; block-size: 100%; display: grid; place-content: center; }
.mk-txt { display: grid; gap: 0.8cqw; min-inline-size: 0; }
.mk-say { margin: 0; font-family: var(--f-hand); font-weight: 700; line-height: 1.3; color: var(--ink); }
.mk-say span { background: linear-gradient(transparent 58%, rgba(255, 255, 255, 0.85) 58%); }
.mk-means { margin: 0; font-size: 2.6cqw; line-height: 1.45; }
.mk-means b { font-size: 3cqw; }
.mk-foot { display: flex; align-items: center; gap: 1.6cqw; flex-wrap: wrap; }
.mk-meta { font-size: 2.2cqw; font-weight: 700; color: var(--ink-soft, #8a6a60); margin-inline-end: 1cqw; white-space: nowrap; }
.mk-play { inline-size: 5.4cqw; block-size: 5.4cqw; background: var(--accent-deep); }
.mk-play svg { inline-size: 2.2cqw; block-size: 2.2cqw; }
.mk-listen { font-size: 2.2cqw; font-weight: 700; color: var(--ink-soft, #8a6a60); }

/* マスキングテープは使わない（写真がすっきり見えるように） */
.gpage .tape { display: none; }
/* 左を向くふきだし（写真の右から話しかける） */
.bubble.l::after { inset-block-end: auto; inset-block-start: 38%; inset-inline-start: -2.4cqw; inline-size: 3cqw; block-size: 4cqw; clip-path: polygon(100% 0, 100% 100%, 0 30%); }
/* 素材を送るページ：まだ書いていないところの見本の文字（うすく） */
.phx { opacity: 0.38; }

/* ことばの区切り（スペース）で折り返す。スペースのない長い文は、はみ出さないところで切る（いちばん最後に置いて、ほかより強くする） */
.gpage .hand, .gpage .bubble, .gpage .gmemo p, .gpage .enote, .gpage .letter p { word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }

/* 第2弾の型：小さな声のボタン（声3つ・声の成長くらべ）、動画の小さな再生マーク、作品の台紙 */
.vrows { display: grid; gap: 2cqw; }
.vrow { display: flex; align-items: center; gap: 2.4cqw; background: var(--card); border-radius: 3cqw; padding: 1.4cqw 2.4cqw; min-inline-size: 0; }
.vrow .vbtn { inline-size: 8cqw; block-size: 8cqw; flex: none; }
.vrow .vbtn svg { inline-size: 3.2cqw; block-size: 3.2cqw; }
.vrow .vl { flex: 1; min-inline-size: 0; font-family: var(--f-hand); font-size: 3.1cqw; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vrow .vt { font-size: 2.5cqw; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.vrows.cmp { gap: 3cqw; }
.vstep { display: grid; grid-template-columns: 20cqw minmax(0, 1fr); align-items: center; gap: 2cqw; }
.vstep .age { justify-self: center; }
.vword { font-family: var(--f-title); font-weight: var(--tw); color: var(--title); font-size: calc(6cqw * var(--ts)); margin: 0; line-height: 1.3; }
.gplay.sm { inline-size: 11cqw; block-size: 11cqw; }
.gplay.sm svg { inline-size: 4.4cqw; block-size: 4.4cqw; }
/* 表紙の地の色と、写真の白いふち（2026-10-15） */
.gpage[data-tpl="cover"][data-style="check"] { background-color: #fff3d6; }
.gpage[data-tpl="cover"][data-style="bear"] .sheet > div.abs:first-child { background: #fff6ea !important; }
.gpage[data-tpl="cover"]:is([data-style="check"], [data-style="bear"]) .cslot { outline: 1.6cqw solid #fff; }

/* ================= 2026-10-16 シンプルな表紙（柄・一色・帯）。中のページは、まわりに同じ柄や色、白い台紙 ================= */
[data-style="mint"] {
  --title: #3f8f72; --accent: #bfe8d6; --accent-deep: #6fb197; --tint: #effaf5;
  --st1: #8fd6b8; --st2: #f4a9bd; --st3: #6fb197; --st4: #a9c8ea;
  --outer: #ffffff; --outer-img: none;
  --frame-bg: transparent; --frame-pad: 0cqw; --frame-radius: 2cqw; --frame-shadow: none; --stitch: 0;
  --age-bg: #dff4ea; --age-ink: #3f7f66; --card: #f1fbf6; --card-title: #4f9a7c;
}
[data-style="polka"] {
  --title: #c45b7d; --accent: #f7c3d2; --accent-deep: #de8ea8; --tint: #fff3f6;
  --st1: #f3a6bd; --st2: #f9d34a; --st3: #de8ea8; --st4: #a9c8ea;
  --outer: #ffffff; --outer-img: none;
  --frame-bg: transparent; --frame-pad: 0cqw; --frame-radius: 2cqw; --frame-shadow: none; --stitch: 0;
  --age-bg: #fde3eb; --age-ink: #a84e6c; --card: #fff5f8; --card-title: #d0688b;
}
[data-style="lattice"] {
  --title: #7a62b0; --accent: #d9cdf1; --accent-deep: #a08dd0; --tint: #f6f2fd;
  --st1: #b9a6e6; --st2: #f4a9bd; --st3: #a08dd0; --st4: #a9c8ea;
  --outer: #ffffff; --outer-img: none;
  --frame-bg: transparent; --frame-pad: 0cqw; --frame-radius: 2cqw; --frame-shadow: none; --stitch: 0;
  --age-bg: #ece5fa; --age-ink: #6a55a0; --card: #f8f5fe; --card-title: #8a72c4;
}
[data-style="lemon"] {
  --title: #9a7024; --accent: #fde9a6; --accent-deep: #d9b04a; --tint: #fffaea;
  --st1: #f6d66a; --st2: #f4a9bd; --st3: #d9b04a; --st4: #a9c8ea;
  --outer: #ffffff; --outer-img: none;
  --frame-bg: transparent; --frame-pad: 0cqw; --frame-radius: 2cqw; --frame-shadow: none; --stitch: 0;
  --age-bg: #fff2c4; --age-ink: #86621f; --card: #fffbea; --card-title: #b98a2a;
}
[data-style="hello"] {
  --title: #6a4a2a; --accent: #fbe27a; --accent-deep: #e0b93a; --tint: #fffbe6;
  --st1: #f8d84f; --st2: #f4a9bd; --st3: #e0b93a; --st4: #a9c8ea;
  --outer: #ffffff; --outer-img: none;
  --frame-bg: transparent; --frame-pad: 0cqw; --frame-radius: 2cqw; --frame-shadow: none; --stitch: 0;
  --age-bg: #fff1b5; --age-ink: #6a4a2a; --card: #fffbe6; --card-title: #b98a2a;
}
[data-style="daisuki"] {
  --title: #c9587a; --accent: #f4b6c4; --accent-deep: #e2829e; --tint: #fff3f6;
  --st1: #f4b6c4; --st2: #f9d34a; --st3: #e2829e; --st4: #a9c8ea;
  --outer: #ffffff; --outer-img: none;
  --frame-bg: transparent; --frame-pad: 0cqw; --frame-radius: 2cqw; --frame-shadow: none; --stitch: 0;
  --age-bg: #fde3eb; --age-ink: #a84e6c; --card: #fff5f8; --card-title: #d0688b;
}
[data-style="days"] {
  --title: #5a6aa8; --accent: #cfd8f6; --accent-deep: #8a99d6; --tint: #f3f5fd;
  --st1: #9fb0ec; --st2: #f4a9bd; --st3: #8a99d6; --st4: #f9d34a;
  --outer: #ffffff; --outer-img: none;
  --frame-bg: transparent; --frame-pad: 0cqw; --frame-radius: 2cqw; --frame-shadow: none; --stitch: 0;
  --age-bg: #e3e8fb; --age-ink: #4f5f9c; --card: #f5f7fe; --card-title: #6a7cc4;
}
[data-style="band"] {
  --title: #c24f66; --accent: #f3c4cc; --accent-deep: #e2687e; --tint: #fff6f2;
  --st1: #e2687e; --st2: #e3c48a; --st3: #f3a6bd; --st4: #a9c8ea;
  --outer: #ffffff; --outer-img: none;
  --frame-bg: transparent; --frame-pad: 0cqw; --frame-radius: 2cqw; --frame-shadow: none; --stitch: 0;
  --age-bg: #fbe1e5; --age-ink: #a8445a; --card: #fff7f4; --card-title: #d05a70;
}
/* 柄は ::before に描く（cqw をページの幅にあわせるため） */
.gpage[data-style="mint"] { background: #fff; }
.gpage[data-style="mint"]::before { content: ""; position: absolute; inset: 0; background:repeating-linear-gradient(-45deg,#cdeee0 0 5cqw,#fff 5cqw 10cqw); pointer-events: none; }
.gpage[data-style="polka"] { background: #fff; }
.gpage[data-style="polka"]::before { content: ""; position: absolute; inset: 0; background-color:#fff0f4;background-image:radial-gradient(circle,#f7c3d2 0 2.6cqw,transparent 2.7cqw),radial-gradient(circle,#f7c3d2 0 2.6cqw,transparent 2.7cqw);background-size:12cqw 12cqw;background-position:0 0,6cqw 6cqw; pointer-events: none; }
.gpage[data-style="lattice"] { background: #fff; }
.gpage[data-style="lattice"]::before { content: ""; position: absolute; inset: 0; background-color:#fff;background-image:repeating-linear-gradient(45deg,transparent 0 6cqw,#d9cdf1 6cqw 6.6cqw),repeating-linear-gradient(-45deg,transparent 0 6cqw,#d9cdf1 6cqw 6.6cqw); pointer-events: none; }
.gpage[data-style="lemon"] { background: #fff; }
.gpage[data-style="lemon"]::before { content: ""; position: absolute; inset: 0; background:repeating-linear-gradient(-45deg,#fde9a6 0 5cqw,#fff 5cqw 10cqw); pointer-events: none; }
.gpage[data-style="hello"] { background: #fff; }
.gpage[data-style="hello"]::before { content: ""; position: absolute; inset: 0; background:#fbe27a; pointer-events: none; }
.gpage[data-style="daisuki"] { background: #fff; }
.gpage[data-style="daisuki"]::before { content: ""; position: absolute; inset: 0; background:#f4b6c4; pointer-events: none; }
.gpage[data-style="days"] { background: #fff; }
.gpage[data-style="days"]::before { content: ""; position: absolute; inset: 0; background:#cfd8f6; pointer-events: none; }
.gpage[data-style="band"] { background: #fff; }
.gpage[data-style="band"]::before { content: ""; position: absolute; inset: 0; background:linear-gradient(transparent 92%,#e2687e 92%) #fdf3ec; pointer-events: none; }
.gpage:is([data-style="mint"], [data-style="polka"], [data-style="lattice"], [data-style="lemon"], [data-style="hello"], [data-style="daisuki"], [data-style="days"], [data-style="band"]) .sheet:not(.full) { background: #fff; border-radius: 2.4cqw; transform: scale(0.9); }
.gpage:is([data-style="mint"], [data-style="polka"], [data-style="lattice"], [data-style="lemon"], [data-style="hello"], [data-style="daisuki"], [data-style="days"], [data-style="band"]):not([data-tpl="cover"]) .folio { inset-block-end: 1cqw; font-weight: 700; color: var(--title); }
.gpage:is([data-style="hello"], [data-style="daisuki"], [data-style="days"], [data-style="band"]):not([data-tpl="cover"]) .folio { color: #fff; }
.gpage[data-style="hello"]:not([data-tpl="cover"]) .folio { color: #6a4a2a; }

/* ことばのページ：年齢の札を、題名とカードのまん中に */
.gpage[data-tpl="mistakes"] .pill-wrap { top: 15.2cqw !important; }