/* ==========================================================================
   ふぁんぐ 絵本の物語（トップ・下層ページ共通の部品）
   2026-10-08 に「組み合わせ案」で確定。クラス名の fg-l1- / fg-l3- / fg-l4- は、
   検討したときの案1（ワッペン）・案3（絵本）・案4（組み合わせ）の名残
   ========================================================================== */

/* ---- layout-1.css から ---- */
@keyframes fg-l1-bounce { 0%, 100% { transform: translateY(0) scale(1, 1); } 40% { transform: translateY(-40px) scale(.95, 1.05); } 55% { transform: translateY(0) scale(1.12, .88); } 70% { transform: translateY(-8px); } }
@keyframes fg-l1-jump { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-10px); } }
@keyframes fg-l1-wag { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.fg-l1-concept { padding-top: var(--fg-s7); }
.fg-l1-bubble { position: relative; background: var(--fg-white); border-radius: 32px; padding: var(--fg-s6) var(--fg-s4) var(--fg-s5); text-align: center; box-shadow: var(--fg-shadow); outline: 2px dashed var(--fg-pink); outline-offset: -12px; }
@media (min-width: 700px) {
  .fg-l1-bubble { padding-left: var(--fg-s6); padding-right: var(--fg-s6); }
}
.fg-l1-bubble__peek { position: absolute; top: -78px; left: 50%; width: 150px; margin-left: -75px; }
.fg-l1-bubble__peek .fg-illust { width: 100%; }
.fg-l1-bubble__copy { font-weight: 900; font-size: 20px; color: var(--fg-muted); margin: var(--fg-s2) 0; }
.fg-l1-bubble__copy s .fg-ib { text-decoration: line-through; text-decoration-thickness: 2px; }
.fg-l1-bubble__copy--big { font-size: 26px; color: var(--fg-pink-deep); line-height: 1.5; }
@media (min-width: 1024px) {
  .fg-l1-bubble__copy--big { font-size: 34px; }
}

/* ---- layout-3.css から ---- */
.fg-l3-opening { background: none; overflow: hidden; }
.fg-l3-opening span { position: absolute; inset: -20%; transition: transform .9s cubic-bezier(.7, 0, .2, 1); }
.fg-l3-opening__a { background: var(--fg-pink-deep); clip-path: polygon(0 0, 100% 0, 100% 35%, 0 75%); }
.fg-l3-opening__b { background: var(--fg-pink); clip-path: polygon(0 75%, 100% 35%, 100% 100%, 0 100%); }
.is-opening .fg-l3-opening__a { animation: fg-l3-in .5s ease both; }
.fg-l3-opening.is-done { opacity: 1; visibility: visible; transition: visibility 0s .9s; }
.fg-l3-opening.is-done .fg-l3-opening__a { transform: translate(-30%, -60%); }
.fg-l3-opening.is-done .fg-l3-opening__b { transform: translate(30%, 60%); }
@keyframes fg-l3-in { from { transform: translateY(-10%); } to { transform: none; } }
.fg-l3-catch { writing-mode: vertical-rl; margin: 0; font-size: 40px; line-height: 1.5; letter-spacing: .12em; font-weight: 900; }
@media (min-width: 1024px) {
  .fg-l3-catch { font-size: 60px; }
}
.fg-l3-catch__line { display: block; }
.fg-l3-catch__line--mark { position: relative; color: var(--fg-pink-deep); margin-top: 1em; }
.fg-l3-catch__circle { position: absolute; top: -8%; left: -22%; width: 144%; height: 112%; pointer-events: none; }
.fg-l3-catch__circle svg { width: 100%; height: 100%; }
.fg-l3-catch__circle .fg-draw { stroke-width: 2.5; }
.fg-l3-hero__text { writing-mode: vertical-rl; margin: 2.4em 0 0; font-size: 15px; line-height: 2.2; letter-spacing: .2em; }
.fg-l3-curve { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 60px; fill: var(--fg-base); z-index: 3; }
@media (min-width: 1024px) {
  .fg-l3-curve { height: 120px; }
}
.fg-l3-tear { position: absolute; top: -39px; left: 0; width: 100%; height: 40px; fill: var(--fg-pink-tint); }
.fg-l3-chapter { position: relative; padding: var(--fg-s6) 0; text-align: center; }
@media (min-width: 1024px) {
  .fg-l3-chapter { padding: var(--fg-s7) 0; }
}
.fg-l3-no { display: inline-block; margin: 0 0 var(--fg-s2); padding: 0 1.2em; font-size: 14px; letter-spacing: .3em; color: var(--fg-pink-deep); border-left: 1px solid var(--fg-pink-deep); border-right: 1px solid var(--fg-pink-deep); }
.fg-l3-h { font-size: 28px; letter-spacing: .1em; margin-bottom: var(--fg-s5); }
@media (min-width: 1024px) {
  .fg-l3-h { font-size: 38px; }
}
.fg-l3-link { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; margin-top: var(--fg-s4); text-decoration: none; color: var(--fg-text); font-weight: 700; font-style: italic; letter-spacing: .1em; }
.fg-l3-link__needle { width: 200px; }
.fg-l3-link__needle .fg-thread { stroke-dasharray: 260; stroke-dashoffset: 140; transition: stroke-dashoffset .6s ease; }
.fg-l3-link__needle .fg-needle-body { transition: transform .6s ease; }
.fg-l3-link:hover .fg-thread, .fg-l3-link:focus-visible .fg-thread { stroke-dashoffset: 0; }
.fg-l3-link:hover .fg-needle-body, .fg-l3-link:focus-visible .fg-needle-body { transform: translateX(10px); }
.fg-l3-link:hover { color: var(--fg-pink-deep); }
.fg-l3-chapter--works { background: var(--fg-pink-tint); }
.fg-l3-models { list-style: none; margin: 0; padding: 0; text-align: left; border-top: 1px solid var(--fg-text); }
.fg-l3-models a { display: grid; grid-template-columns: 40px 96px 1fr; grid-template-rows: auto auto; align-items: center; gap: 4px var(--fg-s3); padding: var(--fg-s3) 0; border-bottom: 1px solid var(--fg-text); text-decoration: none; color: var(--fg-text); transition: background .3s, padding .3s; }
@media (min-width: 700px) {
  .fg-l3-models a { grid-template-columns: 60px 160px 1fr auto; grid-template-rows: auto; }
}
.fg-l3-models a:hover { background: var(--fg-pink-tint); padding-left: var(--fg-s3); padding-right: var(--fg-s3); }
.fg-l3-models__no { font-family: var(--fg-font-latin); font-style: italic; font-size: 24px; color: var(--fg-pink-deep); }
.fg-l3-models__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; }
.fg-l3-models__img img, .fg-l3-models__img .fg-ph { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.fg-l3-models__name { display: block; font-size: 20px; font-weight: 900; }
.fg-l3-models__text { display: block; font-size: 13px; color: var(--fg-muted); line-height: 1.7; }
.fg-l3-models__price { grid-column: 3; font-family: var(--fg-font-latin); font-weight: 600; color: var(--fg-pink-deep); font-size: 18px; }
@media (min-width: 700px) {
  .fg-l3-models__price { grid-column: auto; font-size: 22px; }
}
.fg-l3-chapter--order { background: var(--fg-pink-tint); }
.fg-l3-news { text-align: left; border-top: 1px solid var(--fg-text); }
.fg-l3-news a { display: flex; flex-wrap: wrap; gap: 4px var(--fg-s4); padding: var(--fg-s3) 0; border-bottom: 1px solid var(--fg-text); text-decoration: none; color: var(--fg-text); }
.fg-l3-news time { font-family: var(--fg-font-latin); font-style: italic; color: var(--fg-pink-deep); }
.fg-l3-news a:hover span { color: var(--fg-pink-deep); }
@media (prefers-reduced-motion: reduce) {
  .fg-l3-link__needle .fg-thread { stroke-dashoffset: 0; }
}

/* ---- layout-4.css から ---- */
.fg-l4-hero { position: relative; overflow: hidden; background: var(--fg-pink); height: 600px; }
@media (min-width: 700px) {
  .fg-l4-hero { height: 720px; }
}
@media (min-width: 1024px) {
  .fg-l4-hero { height: max(640px, calc(100vh - 72px)); }
}
.fg-l4-book, .fg-l4-book-line { position: absolute; inset: 0; width: 100%; height: 100%; }
.fg-l4-book-line { z-index: 2; pointer-events: none; }
.fg-l4-pageL { position: absolute; left: 0; top: 0; width: 50%; height: 100%; z-index: 1; clip-path: url(#fg-l4-pageclip); background: var(--fg-pink-tint); }
.fg-l4-slides { position: absolute; inset: 0; }
.fg-l4-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateX(14%) scale(1.06); transition: opacity 1.1s ease, transform 1.6s cubic-bezier(.2, .8, .2, 1); }
.fg-l4-slide.is-active { opacity: 1; transform: none; z-index: 2; }
.fg-l4-slide.is-leaving { opacity: 0; transform: translateX(-8%) scale(1.02); z-index: 1; }
.fg-l4-slide img { width: 100%; height: 100%; object-fit: cover; }
@keyframes fg-l4-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
.fg-l4-slide.is-active img { animation: fg-l4-zoom 6s ease-out both; }
.fg-l4-dots { position: absolute; z-index: 3; left: 0; width: 50%; bottom: 80px; display: flex; justify-content: center; gap: 8px; }
@media (min-width: 1024px) {
  .fg-l4-dots { bottom: 140px; }
}
.fg-l4-dots button { width: 26px; height: 8px; padding: 0; border: 0; border-radius: var(--fg-r-pill); background: var(--fg-white); cursor: pointer; opacity: .75; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); transition: width .3s, background .3s, opacity .3s; }
.fg-l4-dots button[aria-pressed="true"] { width: 44px; background: var(--fg-pink-deep); opacity: 1; }
.fg-l4-pageR { position: absolute; z-index: 2; left: 50%; right: 0; top: 0; bottom: 0; display: flex; flex-direction: row-reverse; justify-content: center; align-items: center; gap: var(--fg-s3); padding: 22% 4% 70px 2%; }
@media (min-width: 1024px) {
  .fg-l4-pageR { gap: var(--fg-s5); padding: 9% 6% 120px 3%; }
}
.fg-l4-pageR .fg-l3-catch { font-size: 30px; }
@media (min-width: 700px) {
  .fg-l4-pageR .fg-l3-catch { font-size: 44px; }
}
@media (min-width: 1024px) {
  .fg-l4-pageR .fg-l3-catch { font-size: 56px; }
}
.fg-l4-pageR .fg-l3-hero__text { margin-top: 2.4em; }
@media (max-width: 1023px) {
  .fg-l4-pageR .fg-l3-hero__text { display: none; }
}
.fg-l4-sp-lead { margin: 0; padding: 0 var(--fg-gutter) var(--fg-s3); text-align: center; font-weight: 700; }
@media (min-width: 1024px) {
  .fg-l4-sp-lead { display: none; }
}
.fg-l4-works-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--fg-s4) var(--fg-s3); text-align: left; }
@media (min-width: 1024px) {
  .fg-l4-works-list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--fg-s5) var(--fg-s4); }
  .fg-l4-work { grid-column: span 2; }
  .fg-l4-work--big { grid-column: span 3; grid-row: span 2; }
  .fg-l4-work--wide { grid-column: span 3; }
}
.fg-l4-work--big { grid-column: span 2; }
@media (min-width: 1024px) {
  .fg-l4-work--big { grid-column: span 3; }
}
.fg-l4-work a {
  display: block; padding: 10px 10px 14px; background: var(--fg-white); border-radius: 6px; text-decoration: none; color: var(--fg-text);
  box-shadow: 0 10px 24px rgba(160, 37, 90, .14); transform: rotate(var(--rot, 0deg));
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s;
}
.fg-l4-work a:hover, .fg-l4-work a:focus-visible { transform: rotate(0deg) scale(1.03); box-shadow: 0 16px 34px rgba(160, 37, 90, .22); color: var(--fg-text); }
.fg-l4-work__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; }
.fg-l4-work--big .fg-l4-work__img { aspect-ratio: 4 / 4.6; }
.fg-l4-work--wide .fg-l4-work__img { aspect-ratio: 16 / 10; }
.fg-l4-work__img img, .fg-l4-work__img .fg-ph { width: 100%; height: 100%; object-fit: cover; }
.fg-l4-work__no { display: block; margin-top: 8px; font-family: var(--fg-font-latin); font-style: italic; color: var(--fg-pink-deep); font-size: 13px; }
.fg-l4-work__title { display: block; font-weight: 700; line-height: 1.5; }
.fg-l4-work__type { display: inline-block; margin-top: 4px; font-size: 12px; padding: 0 10px; border-radius: var(--fg-r-pill); background: var(--fg-pink-tint); color: var(--fg-pink-deep); font-weight: 700; }
@keyframes fg-l4-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.fg-l4-work.is-pop { animation-name: fg-l4-pop; }
.fg-l4-works .fg-tabs { margin-top: calc(var(--fg-s3) * -1); }
.fg-l4-lead { color: var(--fg-muted); margin: calc(var(--fg-s4) * -1) 0 var(--fg-s4); }
.fg-l4-note {
  position: relative; margin: 110px 0 0 26px; padding: var(--fg-s5) var(--fg-s4) var(--fg-s4) var(--fg-s5);
  background: var(--fg-white) repeating-linear-gradient(transparent 0 35px, var(--fg-line) 35px 36px);
  border-radius: 6px 14px 14px 6px; border-left: 22px solid var(--fg-pink); box-shadow: var(--fg-shadow);
}
.fg-l4-note::before { content: ""; position: absolute; left: -38px; top: 22px; bottom: 22px; width: 32px; background: repeating-linear-gradient(transparent 0 8px, #6B7C93 8px 13px, transparent 13px 44px); border-radius: 4px; }
.fg-l4-note::after { content: ""; position: absolute; left: -13px; top: 18px; bottom: 18px; width: 8px; background: radial-gradient(circle at 4px 12px, var(--fg-pink-tint) 4px, transparent 4.5px) 0 0 / 8px 44px repeat-y; }
@media (min-width: 1024px) {
  .fg-l4-note { padding: var(--fg-s6) var(--fg-s6) var(--fg-s5); }
}
.fg-l4-note__dog { position: absolute; top: -150px; right: 16px; width: 140px; z-index: 2; }
@media (min-width: 1024px) {
  .fg-l4-note__dog { top: -170px; width: 160px; }
}
.fg-l4-note__dog .fg-illust { width: 100%; }
.fg-l4-flow { position: relative; margin-bottom: var(--fg-s4); }
.fg-l4-wave { display: none; }
.fg-l4-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 56px; }
@media (min-width: 1024px) {
  .fg-l4-wave { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
  .fg-js .fg-l4-note .fg-l4-wave { clip-path: inset(0 0 100% 0); transition: clip-path 2s ease .4s; }
  .fg-js .fg-l4-note.is-in .fg-l4-wave { clip-path: inset(0 0 0 0); }
  .fg-l4-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 72px 48px; }
  .fg-l4-steps > li { grid-column: span 2; }
  .fg-l4-steps > li:nth-child(4) { grid-column: 2 / span 2; }
  .fg-l4-steps > li:nth-child(5) { grid-column: 4 / span 2; }
}
.fg-l4-sticky { --note: #FFE3EC; --tilt: -1.5deg; position: relative; z-index: 1; display: grid; grid-template-columns: 56px 1fr; column-gap: var(--fg-s3); align-items: start; padding: var(--fg-s4) var(--fg-s3) var(--fg-s3); background: var(--note); border-radius: 2px 2px 14px 2px; box-shadow: 0 6px 14px rgba(74, 44, 41, .10); transform: rotate(var(--tilt)); text-align: left; }
.fg-l4-sticky:nth-child(2) { --note: #FFF1C9; --tilt: 1.2deg; }
.fg-l4-sticky:nth-child(3) { --note: #DDF3EA; --tilt: -1deg; }
.fg-l4-sticky:nth-child(4) { --note: #E6E4FA; --tilt: 1.5deg; }
.fg-l4-sticky:nth-child(5) { --note: #FFE3D2; --tilt: -1.2deg; }
.fg-l4-sticky::before { content: ""; position: absolute; top: -10px; left: 50%; width: 64px; height: 20px; margin-left: -32px; background: rgba(255, 255, 255, .7); border: 1px dashed rgba(194, 48, 107, .35); transform: rotate(-3deg); }
@media (min-width: 1024px) {
  .fg-l4-sticky { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: var(--fg-s4); }
}
.fg-js .fg-l4-steps[data-stagger] > .fg-l4-sticky { transform: translateY(24px) scale(.92) rotate(var(--tilt)); }
.fg-js .fg-l4-steps[data-stagger].is-in > .fg-l4-sticky { transform: rotate(var(--tilt)); }
.fg-l4-sticky:not(:last-child)::after {
  content: ""; position: absolute; left: 34px; top: 100%; width: 20px; height: 56px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 28'%3E%3Cpath d='M10 0 Q20 7 10 14 T10 28' fill='none' stroke='%23C2306B' stroke-width='2.5' stroke-dasharray='5 4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 20px 28px repeat-y;
}
@media (min-width: 1024px) {
  .fg-l4-sticky:not(:last-child)::after { display: none; }
}
.fg-l4-step__num { grid-row: 1 / 3; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--fg-pink-deep); color: var(--fg-white); font-family: var(--fg-font-latin); font-weight: 600; font-size: 26px; outline: 3px dashed var(--fg-white); outline-offset: -7px; }
.fg-l4-step__title { font-size: 18px; padding-top: 4px; }
@media (min-width: 1024px) {
  .fg-l4-step__title { padding-top: 0; }
}
.fg-l4-step__text { font-size: 14px; color: var(--fg-text); line-height: 1.8; }
.fg-l4-note .fg-l3-link { display: flex; width: max-content; margin: 0 auto; }
@media (prefers-reduced-motion: reduce) {
  .fg-js .fg-l4-steps[data-stagger] > .fg-l4-sticky { transform: rotate(var(--tilt)) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .fg-l4-slide { transition: none; }
  .fg-l4-work a { transition: none; }
}
.fg-l4-pageR .fg-l3-catch__circle { top: -6%; height: 100%; }
.fg-l3-no { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fg-font-latin); font-weight: 600; text-transform: uppercase; letter-spacing: .24em; }
.fg-l1-bubble .fg-l3-no { margin-bottom: var(--fg-s2); }
.fg-cta__en { display: inline-flex; align-items: center; gap: 8px; padding: 0 1.2em; border-left: 1px solid currentColor; border-right: 1px solid currentColor; }
@media (max-width: 699px) {
  .fg-l1-bubble__copy--big { font-size: 21px; }
}
.fg-cta__en .fg-icon { background: var(--fg-white); border-radius: 50%; padding: 2px; width: 20px; height: 20px; }
.fg-l3-chapter, .fg-l4-band, .fg-l4-quality { position: relative; }
.fg-divider { position: absolute; left: 0; width: 100%; height: 40px; z-index: 3; pointer-events: none; }
@media (min-width: 1024px) {
  .fg-divider { height: 64px; }
}
.fg-divider--top { top: -39px; }
@media (min-width: 1024px) {
  .fg-divider--top { top: -63px; }
}
.fg-divider--bottom { bottom: -39px; transform: scaleY(-1); }
@media (min-width: 1024px) {
  .fg-divider--bottom { bottom: -63px; }
}
.fg-fixedbg { position: absolute; inset: 0; z-index: 0; clip-path: inset(0); }
.fg-fixedbg__img { position: fixed; inset: 0; background-size: cover; background-position: center; }
.fg-fixedbg::after { content: ""; position: absolute; inset: 0; background: rgba(59, 37, 35, .55); }
.fg-l4-quality { background: var(--fg-ink); padding-top: 120px; padding-bottom: 120px; }
.fg-l4-quality > .fg-container { position: relative; z-index: 1; }
.fg-l4-quality .fg-l3-h, .fg-l4-quality .fg-sec-lead { color: var(--fg-white); }
.fg-l4-quality .fg-l3-no { color: var(--fg-white); border-color: rgba(255, 255, 255, .8); }
.fg-l4-quality .fg-q-item { box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.fg-l4-quality__dog { position: relative; z-index: 1; width: 220px; margin: var(--fg-s4) auto 0; }
@media (min-width: 1024px) {
  .fg-l4-quality__dog { position: absolute; right: 3%; bottom: 40px; width: 260px; margin: 0; }
}
.fg-l4-quality__dog .fg-illust { width: 100%; }
.fg-l4-band { display: flex; align-items: center; justify-content: center; min-height: 380px; padding: 100px var(--fg-gutter); background: var(--fg-ink); text-align: center; color: var(--fg-white); }
@media (min-width: 1024px) {
  .fg-l4-band { min-height: 520px; }
}
.fg-l4-band .fg-fixedbg::after { background: linear-gradient(rgba(59, 37, 35, .25), rgba(59, 37, 35, .5)); }
.fg-l4-band__inner { position: relative; z-index: 1; }
.fg-l4-band__copy { font-size: 30px; font-weight: 900; line-height: 1.6; margin: 0 0 var(--fg-s3); text-shadow: 0 2px 12px rgba(0, 0, 0, .3); }
@media (min-width: 1024px) {
  .fg-l4-band__copy { font-size: 48px; }
}
.fg-l4-band__sub { margin: 0; font-weight: 700; text-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.fg-l4-models { padding-bottom: 120px; }
.fg-l4-models__dog { width: 230px; margin: 0 auto var(--fg-s3); }
@media (min-width: 1024px) {
  .fg-l4-models__dog { position: absolute; top: 70px; right: 6%; width: 280px; margin: 0; }
}
.fg-l4-models__dog .fg-illust { width: 100%; }
.fg-l4-order { padding-top: 120px; }
.fg-l4-order .fg-l4-note { margin-top: 160px; }
.fg-l4-news { padding-bottom: 120px; }
.fg-l4-news__dog { width: 200px; margin: 0 auto var(--fg-s3); }
@media (min-width: 1024px) {
  .fg-l4-news__dog { display: block; position: absolute; left: 4%; bottom: 90px; width: 230px; }
}
.fg-l4-news__dog .fg-illust { width: 100%; }
.fg-l1-concept { padding-top: 150px; }
.fg-l1-bubble__peek.fg-l4-peek { width: 230px; margin-left: -115px; top: -128px; }