/* 私っぽい？の添削の見本（2026-11-15）。site.css の上に重ねる。 */
:root { --warm: #FFF7F1; --ink: #2A3D54; --line: #B9CCDA; }
/* C 配色：暖かい白を足し、空色と交互に。地にごく弱い上下の明暗 */
.g-warm > .sec-bg { background: linear-gradient(180deg, #FFFBF7, var(--warm) 40%, #FDF1E8); }
.g-sky > .sec-bg { background: linear-gradient(180deg, #F0F9FF, #E6F5FE 40%, #DDEFFA); }
.g-pink > .sec-bg { background: linear-gradient(180deg, #FDEDEF, #FBE3E6 40%, #F8DADF); }
/* D 装飾：縦の線は、ページを貫かず、最初の画面と各節の見出しのあたりだけ。淡い青灰 */
.grid-lines { display: none; }
.sec-mark { position: absolute; left: 7%; top: 0; width: 1px; height: 170px; background: var(--line); z-index: 2; }
.edge-line { border-top: 1px solid rgba(185, 204, 218, .9); }
.fv-gridline { background: var(--line); opacity: 1; }
/* 円：厚みのある素材。節の境目で切らず、中身の後ろに半分隠れる */
.deco-s04 { width: 56%; left: -22%; top: 40px; }
.deco-s07 { width: 52%; right: -18%; top: 70px; }
.deco-s11 { width: 54%; right: -20%; top: 40px; }
/* B 文字：本編の見出しを一段細く、字間を少し広げる（最初の画面と価格はそのまま） */
.sec:not(.fv) .h2 { font-weight: 500; letter-spacing: .045em; }
#s11 .h2 { font-size: 23px; }
.sec:not(.fv) .h3 { font-weight: 500; letter-spacing: .03em; }
/* E 写真：添える写真は角を大きく丸めた四角。光を少し暖かく */
.photo-c img, .photo-r img, .fv-photo img { filter: sepia(.1) saturate(1.06) brightness(1.02); }
.photo-r { border-radius: 22px; overflow: hidden; aspect-ratio: 1 / 1; box-shadow: 0 10px 24px rgba(42, 61, 84, .14); flex: none; }
.photo-r img { width: 100%; height: 100%; object-fit: cover; }
.morning .photo-r { width: 132px; }
.maker .photo-r { width: 128px; }
.photo-r.tiny { width: 104px; }
.stack { position: relative; margin-bottom: 44px; }
.stack .photo-c.big { width: calc(96% + var(--pad)); margin-left: auto; margin-bottom: 0; }
.stack .photo-r.over { position: absolute; width: 38%; left: 0; bottom: -28px; border: 5px solid #fff; z-index: 2; }
/* A 悩みの節：写真を左、右に見出しと札2つ（横） */
.morning { align-items: center; }
.morning .chips { flex-wrap: nowrap; gap: 10px; }
/* やらないこと：丸い札をやめ、しるし付きの短い帯に */
.tag { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 112px; min-height: 76px; flex: none;
  padding: 10px 8px; border-radius: 14px; background: #FDE7E2; text-align: center; box-shadow: 0 4px 10px rgba(180, 110, 100, .12); }
.tag .chip-ic { width: 30px; height: 30px; margin: 0; object-fit: contain; }
.tag .chip-t { font-size: 13px; font-weight: 700; line-height: 1.35; }
#s07 .pairs li { align-items: center; }
/* PC の帯も、新しい円に */

/* ボタン：案A 紙を重ねたピル（利用者が3案から選んだ。2026-11-15）。左右の丸い端を固定し、真ん中だけ伸ばす */
.btn { background: none; box-shadow: none; border-radius: 0; padding: 0; height: 66px; min-height: 0; line-height: 60px;
  border-style: solid; border-color: transparent; border-image: url("assets/btn-a.webp") 0 120 fill / 0 36px / 0 stretch;
  text-shadow: 0 1px 2px rgba(150, 60, 40, .35); }
.fv-btn { height: 10.4cqw; line-height: 9.6cqw; border-image-width: 0 5.7cqw; font-size: 4.8cqw; }

/* ロゴ：3 円と格子（利用者が選んだ。2026-11-16） */
.fv-logo { top: 8.4cqw; }
.fv-logo img { height: 10.4cqw; width: auto; }
/* 初回90分の円：箱を、スマホと同じ幅までにする（PCで線の端と名札が離れたため。2026-11-16） */
.pie { max-width: 350px; margin-left: auto; margin-right: auto; }