/* ==========================================================================
   ふぁんぐ 下層ページ（トップの「絵本の物語」と同じ部品で組む）
   ========================================================================== */

/* ---------- 見出し：絵本のページの上に、縦棒の英字ラベル・見出し・ワンちゃん ---------- */
/* 本の絵は高さを固定（画面の高さで伸びると、V字のくぼみが文字にかかるため）。その下は白いページ */
.fg-p-hero { position: relative; overflow: hidden; background: linear-gradient(var(--fg-pink) 0 100px, var(--fg-white) 100px); }
.fg-p-hero__book { position: absolute; top: 0; left: 0; width: 100%; height: 220px; }
.fg-p-hero__inner { position: relative; z-index: 1; max-width: calc(var(--fg-max) + var(--fg-gutter) * 2); margin: 0 auto; padding: 96px var(--fg-gutter) 72px; display: flex; flex-direction: column; align-items: center; gap: var(--fg-s3); text-align: center; }
@media (min-width: 1024px) { .fg-p-hero__inner { min-height: 360px; padding-top: 110px; padding-bottom: 120px; justify-content: center; } }
.fg-p-hero .fg-l3-h { margin-bottom: 0; font-size: 30px; }
@media (min-width: 1024px) { .fg-p-hero .fg-l3-h { font-size: 42px; } }
.fg-p-hero__lead { max-width: 620px; margin: var(--fg-s3) auto 0; color: var(--fg-muted); }
.fg-p-hero__dog { width: 104px; }
.fg-p-hero__dog .fg-illust { width: 100%; }
@media (min-width: 1024px) { .fg-p-hero__dog { position: absolute; right: 6%; bottom: 70px; width: 200px; } }
.fg-p-hero .fg-l3-curve { z-index: 2; }

/* 見出しまわりの余白 */
.fg-sec-head { margin-bottom: var(--fg-s5); }
.fg-sec-head .fg-l3-h { margin-bottom: 0; }
.fg-sec-head + .fg-sec-lead { margin-top: calc(var(--fg-s4) * -1); }

/* 区切りの形を置くセクション */
.fg-p-sec { position: relative; padding: var(--fg-s6) 0; }
@media (min-width: 1024px) { .fg-p-sec { padding: var(--fg-s7) 0; } }
.fg-p-sec--tint { background: var(--fg-pink-tint); }
.fg-p-sec--white { background: var(--fg-white); }
.fg-p-sec--pad-top { padding-top: 120px; }
.fg-p-sec--pad-bottom { padding-bottom: 120px; }

/* ---------- 罫線のノート（記事・規約・サイズ表など） ---------- */
.fg-p-paper {
  position: relative; margin-left: 26px; padding: var(--fg-s5) var(--fg-s4) var(--fg-s5) 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-p-paper::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-p-paper::after { content: ""; position: absolute; left: -13px; top: 18px; bottom: 18px; width: 8px; background: radial-gradient(circle at 4px 12px, var(--fg-base) 4px, transparent 4.5px) 0 0 / 8px 44px repeat-y; }
.fg-p-sec--tint .fg-p-paper::after { background-image: radial-gradient(circle at 4px 12px, var(--fg-pink-tint) 4px, transparent 4.5px); }
@media (min-width: 1024px) { .fg-p-paper { padding: var(--fg-s6) var(--fg-s6) var(--fg-s5); } }
.fg-p-paper.fg-prose { line-height: 36px; }
.fg-p-paper.fg-prose p, .fg-p-paper.fg-prose li { line-height: 36px; }
.fg-p-paper.fg-prose h2 { line-height: 1.5; padding: 4px 0 4px 14px; background: var(--fg-white); }

/* ---------- ステッチのカード（文章を読ませるところ） ---------- */
.fg-p-stitch { position: relative; background: var(--fg-white); border-radius: 28px; padding: var(--fg-s5) var(--fg-s4); box-shadow: var(--fg-shadow); outline: 2px dashed var(--fg-pink); outline-offset: -12px; }
@media (min-width: 700px) { .fg-p-stitch { padding: var(--fg-s6); } }
.fg-p-stitch__dog { position: absolute; width: 190px; top: -112px; left: 50%; margin-left: -95px; }
.fg-p-stitch__dog .fg-illust { width: 100%; }
.fg-p-stitch--peek { margin-top: 110px; }

/* ---------- 付箋（納期・お支払い・送料など） ---------- */
.fg-p-notes { display: grid; gap: var(--fg-s5) var(--fg-s4); list-style: none; margin: 0; padding: 0; }
@media (min-width: 700px) { .fg-p-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fg-p-note { --note: #FFE3EC; --tilt: -1.5deg; position: relative; padding: var(--fg-s5) var(--fg-s4) var(--fg-s4); background: var(--note); border-radius: 2px 2px 16px 2px; box-shadow: 0 8px 18px rgba(74, 44, 41, .10); transform: rotate(var(--tilt)); }
.fg-p-note:nth-child(3n+2) { --note: #FFF1C9; --tilt: 1.2deg; }
.fg-p-note:nth-child(3n+3) { --note: #DDF3EA; --tilt: -1deg; }
.fg-p-note::before { content: ""; position: absolute; top: -10px; left: 50%; width: 70px; height: 22px; margin-left: -35px; background: rgba(255, 255, 255, .7); border: 1px dashed rgba(194, 48, 107, .35); transform: rotate(-3deg); }
.fg-p-note__title { display: flex; align-items: center; gap: 8px; font-size: var(--fg-fs-h3); color: var(--fg-pink-deep); margin-bottom: var(--fg-s2); }
.fg-p-note p { margin: 0; }
.fg-js .fg-p-notes[data-stagger] > .fg-p-note { transform: translateY(24px) scale(.92) rotate(var(--tilt)); }
.fg-js .fg-p-notes[data-stagger].is-in > .fg-p-note { transform: rotate(var(--tilt)); }

/* ---------- よくある質問：お客さんの吹き出しと、ワンちゃんの答え ---------- */
.fg-p-faq { display: grid; gap: var(--fg-s5); list-style: none; margin: 0; padding: 0; }
.fg-p-faq__q { position: relative; margin: 0 0 var(--fg-s3) auto; max-width: 88%; padding: var(--fg-s3) var(--fg-s4); background: var(--fg-pink-deep); color: var(--fg-white); font-weight: 700; border-radius: 22px 22px 4px 22px; }
.fg-p-faq__q::before { content: "Q. "; font-family: var(--fg-font-latin); }
.fg-p-faq__a { display: flex; gap: var(--fg-s3); align-items: flex-end; }
.fg-p-faq__face { flex: none; width: 74px; height: 74px; border-radius: 50%; background: var(--fg-white); box-shadow: var(--fg-shadow); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.fg-p-faq__face .fg-illust { width: 120%; margin-bottom: -18%; }
.fg-p-faq__a p { position: relative; margin: 0; padding: var(--fg-s3) var(--fg-s4); background: var(--fg-white); border-radius: 22px 22px 22px 4px; box-shadow: var(--fg-shadow); border: 2px dashed var(--fg-line); }

/* ---------- 品質・安心のくわしい説明：ポラロイドの写真と、チェックのカード ---------- */
.fg-p-qrows { display: grid; gap: var(--fg-s6); }
.fg-p-qrow { display: grid; gap: var(--fg-s4); align-items: center; }
@media (min-width: 1024px) {
  .fg-p-qrow { grid-template-columns: 1fr 1.1fr; gap: var(--fg-s6); }
  .fg-p-qrow:nth-child(even) .fg-p-polaroid { order: 2; }
}
.fg-p-polaroid { padding: 12px 12px 40px; background: var(--fg-white); border-radius: 6px; box-shadow: 0 12px 28px rgba(74, 44, 41, .15); transform: rotate(var(--rot, -2deg)); }
.fg-p-polaroid__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; }
.fg-p-polaroid__img img, .fg-p-polaroid__img .fg-ph { width: 100%; height: 100%; object-fit: cover; }
.fg-p-polaroid__cap { margin: 10px 0 0; text-align: center; font-family: var(--fg-font-latin); font-style: italic; color: var(--fg-pink-deep); }
.fg-p-qcard { position: relative; padding: var(--fg-s4); background: var(--fg-white); border: 2px solid var(--fg-ink); border-radius: var(--fg-r-q); color: var(--fg-ink); }
.fg-p-qcard__head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--fg-s2); }
.fg-p-qcard__title { margin: 0; font-size: var(--fg-fs-h3); }
.fg-p-qcard__list { list-style: none; margin: var(--fg-s3) 0 0; padding: 0; display: grid; gap: 8px; }
.fg-p-qcard__list li { display: flex; gap: 10px; align-items: flex-start; padding-bottom: 8px; border-bottom: 1px dashed var(--fg-line); }
.fg-p-qcard__list .fg-icon { color: var(--fg-pink-deep); margin-top: 6px; }

/* ---------- 一覧の絞り込み（作品の種類）：ピルのボタン ---------- */
.fg-filter a { border: 2px solid var(--fg-pink-deep); color: var(--fg-pink-deep); }
.fg-filter a.is-current, .fg-filter a:hover { background: var(--fg-pink-deep); color: var(--fg-white); }

/* ---------- 詳細ページ（型・作品）の写真：ポラロイド ---------- */
.fg-detail__media .fg-gallery__main { padding: 12px 12px 44px; border-radius: 6px; aspect-ratio: auto; transform: rotate(-1.5deg); box-shadow: 0 14px 32px rgba(74, 44, 41, .16); }
.fg-detail__media .fg-gallery__main img, .fg-detail__media .fg-gallery__main .fg-ph { aspect-ratio: 1 / 1; height: auto; border-radius: 3px; }
.fg-detail__media .fg-gallery__thumbs { margin-top: var(--fg-s4); }
.fg-detail__media .fg-gallery__thumb { border-radius: 4px; background: var(--fg-white); padding: 3px; box-shadow: var(--fg-shadow); }
.fg-detail__price { display: inline-block; position: relative; padding: 6px 22px 6px 34px; background: var(--fg-white); border: 2px solid var(--fg-pink-deep); border-radius: 6px 22px 22px 6px; }
.fg-detail__price::before { content: ""; position: absolute; left: 12px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--fg-base); box-shadow: inset 0 0 0 2px var(--fg-pink-deep); }
.fg-detail .fg-tags li { border: 2px dashed var(--fg-pink); background: var(--fg-white); }
.fg-detail .fg-size-table { border: 2px solid var(--fg-pink-tint); }
.fg-detail__dog { width: 200px; margin: var(--fg-s4) auto 0; }
.fg-detail__dog .fg-illust { width: 100%; }

/* ---------- 相談フォーム：ステッチの枠と付箋 ---------- */
.fg-form-card { border-radius: 28px; outline: 2px dashed var(--fg-pink); outline-offset: -12px; }
.fg-side-card { position: relative; background: #FFF1C9; border-radius: 2px 2px 16px 2px; transform: rotate(1deg); box-shadow: 0 8px 18px rgba(74, 44, 41, .10); }
.fg-side-card + .fg-side-card { background: #DDF3EA; transform: rotate(-1deg); margin-top: var(--fg-s5); }
.fg-side-card::before { content: ""; position: absolute; top: -10px; left: 50%; width: 70px; height: 22px; margin-left: -35px; background: rgba(255, 255, 255, .7); border: 1px dashed rgba(194, 48, 107, .35); transform: rotate(-3deg); }
.fg-contact__dog { width: 200px; margin: var(--fg-s5) auto 0; }
.fg-contact__dog .fg-illust { width: 100%; }

/* ---------- お知らせの一覧（罫線ノートの中に、線で区切った行） ---------- */
.fg-p-paper .fg-post-list { gap: 0; }
.fg-p-paper .fg-post-card { background: transparent; box-shadow: none; border-radius: 0; padding: 14px 0; border-bottom: 1px solid var(--fg-text); }
.fg-p-paper .fg-post-card__date { font-style: italic; color: var(--fg-pink-deep); }
.fg-article__date { display: inline-block; margin-top: var(--fg-s2); font-family: var(--fg-font-latin); font-style: italic; color: var(--fg-pink-deep); }

/* ---------- 404 ---------- */
.fg-p-404 { text-align: center; }
.fg-p-404__dog { width: 300px; margin: 0 auto var(--fg-s4); }
.fg-p-404__dog .fg-illust { width: 100%; }

/* 戻るリンク・ボタンの並び */
.fg-p-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fg-s3); margin-top: var(--fg-s5); }

@media (prefers-reduced-motion: reduce) {
  .fg-js .fg-p-notes[data-stagger] > .fg-p-note { transform: rotate(var(--tilt)) !important; }
}

/* ---------- 作品集の一覧：写真の大きさをそろえて、きれいに並べる ---------- */
.fg-p-works { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fg-s3); }
@media (min-width: 700px) { .fg-p-works { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fg-s4); } }
@media (min-width: 1024px) { .fg-p-works { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fg-p-work a { display: flex; flex-direction: column; height: 100%; background: var(--fg-white); border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--fg-text); box-shadow: var(--fg-shadow); transition: transform .3s, box-shadow .3s; }
.fg-p-work a:hover, .fg-p-work a:focus-visible { transform: translateY(-4px); box-shadow: var(--fg-shadow-hover); color: var(--fg-text); }
.fg-p-work__img { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.fg-p-work__img img, .fg-p-work__img .fg-ph { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.fg-p-work a:hover img { transform: scale(1.05); }
.fg-p-work__body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px 16px; }
.fg-p-work__type { 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; }
.fg-p-work__title { font-weight: 700; font-size: 15px; line-height: 1.5; }

/* ---------- コンセプト：章ごとに左右交互、作り手はプロフィールの形 ---------- */
.fg-p-story .fg-container { display: grid; gap: var(--fg-s6); }
@media (min-width: 1024px) { .fg-p-story .fg-container { gap: var(--fg-s7); } }
.fg-p-story__ch { display: grid; gap: var(--fg-s4); align-items: center; }
@media (min-width: 1024px) {
  .fg-p-story__ch { grid-template-columns: 0.8fr 1.2fr; gap: var(--fg-s6); }
  .fg-p-story__ch--rev { grid-template-columns: 1.2fr 0.8fr; }
  .fg-p-story__ch--rev .fg-p-story__visual { order: 2; }
}
.fg-p-story__visual { position: relative; display: flex; justify-content: center; align-items: center; aspect-ratio: 1 / 1; max-width: min(360px, 62vw); width: 100%; margin: 0 auto; border-radius: 50%; background: var(--fg-pink-tint) var(--fg-dots); }
.fg-p-story__visual .fg-illust { width: 74%; }
.fg-p-story__no { margin: 0; font-family: var(--fg-font-latin); font-style: italic; font-weight: 600; color: var(--fg-pink-deep); letter-spacing: .08em; }
.fg-p-story__title { font-size: 24px; line-height: 1.5; margin: 4px 0 var(--fg-s3); padding-bottom: var(--fg-s2); background: linear-gradient(transparent 70%, rgba(244, 143, 177, .35) 70%) no-repeat left bottom / auto 100%; display: inline; }
@media (min-width: 1024px) { .fg-p-story__title { font-size: 30px; } }
.fg-p-story__text .fg-prose { margin-top: var(--fg-s3); }

/* 作り手のこと：丸い写真枠と、ステッチのカード */
.fg-p-story__ch--maker { position: relative; margin-top: var(--fg-s4); padding: var(--fg-s5) var(--fg-s4); background: var(--fg-white); border-radius: 28px; outline: 2px dashed var(--fg-pink); outline-offset: -12px; box-shadow: var(--fg-shadow); }
@media (min-width: 1024px) { .fg-p-story__ch--maker { grid-template-columns: 260px 1fr; padding: var(--fg-s6); } }
.fg-p-story__photo { width: 200px; aspect-ratio: 1 / 1; margin: 0 auto; border-radius: 50%; overflow: hidden; border: 6px solid var(--fg-white); box-shadow: 0 0 0 3px var(--fg-pink), var(--fg-shadow); }
@media (min-width: 1024px) { .fg-p-story__photo { width: 240px; } }
.fg-p-story__photo img, .fg-p-story__photo .fg-ph { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.fg-p-story__card .fg-l3-no { margin-bottom: 4px; }
.fg-p-story__card .fg-l3-h { text-align: left; font-size: 24px; margin-bottom: var(--fg-s3); }
@media (max-width: 1023px) { .fg-p-story__card { text-align: center; } .fg-p-story__card .fg-l3-h { text-align: center; } .fg-p-story__card .fg-prose { text-align: left; } }

/* 相談フォーム：最初のひと言（ハードルを下げる） */
.fg-form-card .fg-form-intro { margin-bottom: var(--fg-s4); padding: 12px 16px; border-radius: 14px; background: var(--fg-pink-tint); color: var(--fg-pink-deeper); font-weight: 700; text-align: center; }
.fg-form-card textarea[name="message"] { min-height: 220px; }

/* コンセプトの章の写真（本文の中の最初の画像）：やわらかい角の写真に、ポラロイドの白い枠 */
.fg-p-story__visual--photo { aspect-ratio: 4 / 3; max-width: none; border-radius: 6px; background: var(--fg-white); padding: 12px 12px 40px; box-shadow: 0 14px 32px rgba(74, 44, 41, .15); transform: rotate(-2deg); }
.fg-p-story__ch--rev .fg-p-story__visual--photo { transform: rotate(2deg); }
.fg-p-story__visual--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
/* 作り手のプロフィール（本文の箇条書き）を、表のように */
.fg-p-story__card .fg-prose ul { list-style: none; padding: 0; margin: var(--fg-s3) 0; display: grid; gap: 6px; }
.fg-p-story__card .fg-prose ul li { padding: 8px 14px; border-radius: 12px; background: var(--fg-pink-tint); font-size: 15px; }
.fg-p-story__card .fg-prose ul li strong { color: var(--fg-pink-deep); margin-right: 6px; }
.fg-p-story__card .fg-prose .fg-maker-name { font-size: 20px; font-weight: 900; }