/* ==========================================================
milk portfolio — pages.css（下層3ページ専用：about / works / contact ＋ 作品ページ works/*.html）
2026-09-13 作り直し：SERVICEページを廃止し、3ページを「今日整えたTOP（PCカンプ反映版）」に揃えた。
方針＝TOPの部品を“そのまま”使う（見た目の数値は style.css が持つ）。ここに書くのは下層だけの並べ方と、下層にしかない部品だけ。
- TOPと共有：.sec-title（見出し＋ちょんちょん）/ .about__inner・.bracket-title・.about__body・.check-pill（プロフィール）/
.clients__title・.clients__deco（実績企業の見出し）/ .tag・.polaroid__frame・.ig-pill（作品）/
.flow__icon の円（ご依頼の流れ）/ .contact 帯・.btn / .footer（PCは紹介文つき3列）
- 文字サイズ＝style.css の --fs-* トークン（1024px以上だけ定義＝1024時85%→1440時100%）。未定義の幅では var() の第2引数が効く
TOP（index.html）には読み込まない。WPテーマは build_wp_theme.py が css/ ごとコピーする
========================================================== */
/* 和文見出し用のクラフト明朝サブセット（下層の見出し語だけ・20KB）。語を足すときは
python3 -m fontTools.subset assets/fonts/CraftMincho.otf --text="…" --flavor=woff2 で再生成し unicode-range も足す */
@font-face {
font-family: "Craft Mincho";
src: url("../assets/fonts/CraftMincho-jasub-pages.woff2") format("woff2");
font-weight: 400; font-display: swap;
unicode-range: U+3042, U+3044, U+304A, U+304F, U+3054, U+305B, U+3064, U+3066, U+306A, U+306B, U+306E, U+3088, U+308B, U+308C, U+308F, U+30A3, U+30BD, U+30C8, U+30D5, U+30D7, U+30EB, U+30ED, U+30FB, U+30FC, U+4E00, U+4E3B, U+4F01, U+4F5C, U+4F7F, U+4F9D, U+5408, U+554F, U+57DF, U+5883, U+5B9F, U+5BFE, U+5FDC, U+6599, U+696D, U+6D41, U+74B0, U+7528, U+7E3E, U+89A7, U+8CEA, U+91D1, U+9818, U+983C;
}
.sub { --text-body: #524C45; --pink-soft: #F5ECE8; } /* 本文色は1本・タグと同じ薄ピンク */
.header__nav a[aria-current="page"] { opacity: .55; }
/* ---------- 共通：出現 ---------- */
.js .sub .reveal { opacity: 0; transform: translateY(12px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.js .sub .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .sub .reveal, .wcard__peek, .page-head__il, .faq[open] .faq__a { animation: none !important; transition: none !important; opacity: 1; transform: none; } }
/* ---------- ページ見出し（英字＝TOPと同じ見出し＋ちょんちょん／和文＝クラフト明朝／本人イラストが1点のぞく） ---------- */
.page-head { position: relative; padding: 104px 20px 36px; text-align: center; background: var(--white); }
.page-head__inner { position: relative; display: inline-block; padding: 0 30px; }
.page-head .sec-title { margin-bottom: 0; }
.page-head__ja { display: block; margin-top: 10px; font-family: var(--font-en); font-weight: 400; font-size: 18px; letter-spacing: 0.16em; color: var(--brown); font-feature-settings: "palt"; }
.page-head__lead { margin-top: 14px; font-size: 13px; line-height: 1.8; letter-spacing: 0.06em; color: var(--text-body); text-wrap: balance; } /* 1文字だけ次の行に落ちるのを防ぐ */
/* 2026-09-15 イラストを英字（.sec-title__en）の中に移した＝以前はリード文まで含む箱の右端基準で、ABOUTだけ犬が見出しから遠く離れていた。
位置は「英字の最後の文字の端」から決める。100% には字間(0.18em)の余りが含まれるので -0.18em で文字の端に戻す。
画像は正方形キャンバスで透明の余白が絵ごとに違う＝ --il-pl / --il-pb（左・下の余白の割合 × 表示幅）を引いて、絵の実体で揃える
（13＝左26.7%・下19.8%／14＝左12.3%・下7.9%×縦長1.54／21b＝左16.2%・下16.8%。getbbox 実測） */
.page-head__il { --il-w: 54px; position: absolute; width: var(--il-w); height: auto; z-index: 1; pointer-events: none; animation: pop-in .55s cubic-bezier(.34,1.56,.64,1) .15s both;
left: calc(100% - 0.18em + 0.02em - var(--il-w) * var(--il-pl)); bottom: calc(0.98em - var(--il-w) * var(--il-pb)); }
/* SPは最後の文字の右肩に腰かける（横に出すと390px幅で画面端に切れる） */
.page-head__il--about { --il-pl: .267; --il-pb: .198; transform: rotate(4deg); }
.page-head__il--works { --il-pl: .123; --il-pb: .1215; --il-w: 50px; transform: rotate(-3deg); }
.page-head__il--contact { --il-pl: .162; --il-pb: .168; --il-w: 50px; transform: rotate(6deg); }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(.85); } }
/* ---------- 共通の面 ---------- */
.sub-sec { position: relative; background: var(--white); padding: 56px 20px 64px; }
.sub-sec__inner { max-width: 340px; margin: 0 auto; }
.sub-sec__inner--wide { max-width: 360px; }
.sub .sec-title { margin-bottom: 28px; }
.sub .sec-title__ja { font-feature-settings: "palt"; }
.sub .contact--sub { margin-top: calc(var(--badge-d) / 2 + 16px); } /* 丸の半径ぶん＋余白。丸の大きさを変えても上の内容に当たらない（別セッションの式・維持） */
/* 丘の弧（TOPのABOUTと同じ .about::before の形） */
.arch-sec { position: relative; padding: 40px 20px 90px; overflow-x: clip; }
.arch-sec::before { --arch-r: 85vw; content: ""; position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%); width: calc(var(--arch-r) * 2); border-radius: var(--arch-r) var(--arch-r) 0 0; background: linear-gradient(180deg, #FBF5F4 0%, #F7F1ED calc(var(--arch-r) * 0.5), #F7F1ED 100%); pointer-events: none; }
.arch-sec > * { position: relative; }
/* 方眼（TOPの .works::before と同じ格子。SP=20pxピッチ／768px以上=みなみ実測の40pxピッチ・線2px） */
.paper { position: relative; background: var(--white); padding: 56px 12px 72px; overflow-x: clip; }
.paper::before { content: ""; position: absolute; left: 8px; right: 8px; top: 0; bottom: 0; pointer-events: none;
background-image:
linear-gradient(rgba(220,185,174,0.42) 1px, transparent 1px),
linear-gradient(90deg, rgba(220,185,174,0.42) 1px, transparent 1px),
linear-gradient(rgba(220,185,174,0.12) 1px, transparent 1px),
linear-gradient(90deg, rgba(220,185,174,0.12) 1px, transparent 1px);
background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px;
background-position: 0 0, 0 0, 0 10px, 10px 0;
}
.paper__inner { position: relative; max-width: 340px; margin: 0 auto; }
.paper__inner--wide { max-width: 360px; }
.paper__clip { position: absolute; right: 24px; top: 0; width: 54px; z-index: 2; } /* TOPの .works__clip と同じ位置。top:0＝.paper の overflow-x:clip が iOS Safari で縦にも効いて上端が切れるのを避ける（2026-09-16） */
.paper .sec-title__en, .paper .sec-title__ja { position: relative; } /* 格子より前 */
/* 手描き枠のカード（TOPのポラロイドと同じ線） */
.note-card { position: relative; background: var(--white); padding: 24px 22px; }
.note-card h3 { font-family: var(--font-maru); font-weight: 700; font-size: 14px; letter-spacing: 0.14em; color: var(--coral); margin-bottom: 8px; }
.note-card p { font-size: 14px; line-height: 1.9; color: var(--text-body); letter-spacing: 0.04em; }
/* 枠は傾けない（2026-09-13 みどり「斜めの枠はなくしたい」）。線の向きだけ左右反転して同じ線に見せない */
.note-card--r .polaroid__frame { transform: scaleX(-1); }
/* ==========================================================
ABOUT
========================================================== */
/* プロフィール＝TOPの .about__inner をそのまま使う。下層は見出し(h2)を持たないので、グリッドの行番号だけずらす */
.sub-profile .about__inner { padding-top: 8px; }
.profile { text-align: center; }
.icon-scallop { width: 200px; aspect-ratio: 1 / 1; margin: 0 auto; background: url("../assets/img/scallop.svg") no-repeat center / 100% 100%; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 4px 12px rgba(105,92,82,.08)); }
.icon-scallop img { width: 58%; height: auto; }
.profile figcaption { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.profile__role { font-size: 13px; letter-spacing: 0.06em; color: var(--brown); }
.profile__name { width: 84px; height: auto; }
.sub-profile .about__figure { width: auto; margin: 32px auto 28px; }
.pt-label, .pt-more { display: none; } /* 強み3つの英字ラベルと補足はPC(1024px〜)だけ。SPは従来のチェックのピル＝文言がそのままつながる */
/* スマホのABOUTページ＝アイコン→強み3つ→タイトル→本文→Instagram の順（2026-09-15 みどり「携帯はアイコン、3つの強み、タイトルと文章の流れの方がいい」）。
先に「誰か」（顔と名前）と「頼んで大丈夫な理由」を見せてから、じっくり読む本文へ。旧＝タイトル→本文→アイコン→強み（顔が長文の後にしか出なかった）。
Instagramは強みの直後ではなく最後＝本文を読む前にアプリへ抜けないように。HTMLの順番は変えず order で並べ替え（PC・タブレットのグリッドはそのまま）。TOPのABOUTは対象外 */
@media (max-width: 767px) {
.sub-profile .about__inner { display: flex; flex-direction: column; }
.sub-profile .about__figure { order: 1; margin: 12px auto 26px; }
.sub-profile .about__points { order: 2; margin-top: 0; }
.sub-profile .bracket-title { order: 3; margin-top: 64px; }
.sub-profile .about__body { order: 4; }
.sub-profile .about__inner .btn-wrap { order: 5; }
}
/* 実績企業＝TOPの見出し（花瓶＋蝶・波線）＋社名を一覧で */
.sub-clients { position: relative; background: var(--white); padding: 70px 0 64px; }
.clients-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 22px 0 18px;
background: url("data:image/svg+xml;utf8,") repeat-x left bottom; background-size: 12px 4px; }
.clients-grid li { text-align: center; font-size: 15px; font-weight: 500; letter-spacing: 0.06em; line-height: 2.1; color: var(--brown); }
.sub-clients .clients__note { margin-top: 10px; font-size: 11px; }
.sub-clients .clients__title { justify-content: center; } /* 下層はほかの見出しがすべて中央＝ここだけ左だと浮く（TOPは左のまま・2026-09-15） */
/* 対応領域（波形カード＝TOPのSTRENGTHと同じ scallop.svg） */
.field { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* 2026-09-15 方眼に溶けて押せる物に見えなかった＝プロフィールのアイコン丸と同じ淡い影で紙から浮かせ、下に「作品をみる →」を添える */
.scallop-card { position: relative; aspect-ratio: 1 / 1; background: url("../assets/img/scallop.svg") no-repeat center / 100% 100%; color: var(--brown); transition: transform .3s ease, filter .3s ease; container-type: inline-size; filter: drop-shadow(0 4px 12px rgba(105,92,82,.10)); }
.scallop-card:hover { transform: translateY(-4px); filter: drop-shadow(0 10px 18px rgba(105,92,82,.16)); }
.scallop-card__link:focus-visible { outline: 2px solid var(--coral); outline-offset: -10%; border-radius: 50%; }
.scallop-card__link { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 14%; color: inherit; text-decoration: none; }
.scallop-card__no { font-family: var(--font-en); font-size: 9cqw; letter-spacing: 0.06em; color: var(--coral); line-height: 1; }
.scallop-card h3 { margin-top: 4cqw; font-family: var(--font-maru); font-weight: 700; font-size: 8.6cqw; letter-spacing: 0.04em; line-height: 1.35; font-feature-settings: "palt"; }
.scallop-card p { margin-top: 3cqw; font-size: 6.6cqw; line-height: 1.55; color: var(--text-body); letter-spacing: 0.02em; }
.scallop-card__more { display: inline-flex; align-items: center; gap: 1.6cqw; margin-top: 4.5cqw; padding-bottom: 1cqw; font-family: var(--font-maru); font-weight: 700; font-size: 6.4cqw; letter-spacing: 0.06em; color: var(--coral); border-bottom: 1px solid currentColor; line-height: 1.3; }
.scallop-card__more::after { content: ""; width: 3.2cqw; height: 5.2cqw; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; transition: transform .3s ease; }
.scallop-card:hover .scallop-card__more::after { transform: translateX(3px); }
.scallop-card__img, .field-dots, .field-sep { display: none; } /* 画像とドットはスマホのスライダーだけ */
/* 対応領域＝スマホは横スワイプのスライダー（2026-09-15 みなみ「画像付きスライダーにすると見る人がイメージしやすい」→みどり「携帯だけ」）。
ライブラリなし＝CSSの scroll-snap。カード幅76vw＝次のカードの端がのぞいて「横に続く」と分かる。ドットは pages.js が作る */
@media (max-width: 767px) {
.field { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; margin-inline: calc(50% - 50vw); padding: 8px 24px 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.field::-webkit-scrollbar { display: none; }
.scallop-card { flex: none; width: 76vw; max-width: 320px; aspect-ratio: auto; scroll-snap-align: start; background: var(--white); border-radius: 14px; filter: none; box-shadow: 0 4px 14px rgba(105,92,82,.10); }
.scallop-card:hover { transform: none; filter: none; }
.scallop-card__link { position: relative; inset: auto; display: flex; padding: 10px 10px 18px; }
.scallop-card__link:focus-visible { outline-offset: 2px; border-radius: 14px; }
.scallop-card__img { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--ph); margin-bottom: 14px; }
.scallop-card__img img { width: 100%; height: 100%; object-fit: cover; }
.scallop-card__no { font-size: 13px; }
.scallop-card h3 { margin-top: 6px; font-size: 16px; }
.scallop-card p { margin-top: 4px; font-size: 12.5px; }
.scallop-card p br { display: none; } /* 丸の中の改行はカードでは不要＝「・」で区切って1行に */
.scallop-card p .field-sep { display: inline; }
.scallop-card__more { margin-top: 10px; gap: 6px; padding-bottom: 2px; font-size: 13px; }
.scallop-card__more::after { width: 7px; height: 11px; }
.field-dots { display: flex; justify-content: center; gap: 8px; margin-top: 6px; position: relative; }
.field-dots span { width: 7px; height: 7px; border-radius: 50%; background: #E3D6CF; transition: background .25s, transform .25s; }
.field-dots span.is-on { background: var(--coral); transform: scale(1.15); }
}
/* 作業環境 */
.env-wrap { margin-top: 64px; }
.env { display: grid; gap: 40px; max-width: 300px; margin: 0 auto; } /* 28pxだと上のカードの下線と下のカードの上線が二重線に見えた（2026-09-15） */
.env__note { position: relative; margin-top: 24px; text-align: center; font-size: 12.5px; line-height: 1.8; color: var(--text-body); letter-spacing: 0.04em; }
.sub-next { position: relative; margin-top: 56px; } /* プロフィールの次の一歩＝WORKSへ（2026-09-15） */
/* ==========================================================
WORKS
========================================================== */
.paper--works .paper__inner { padding-top: 10px; }
/* 絞り込み＝TOPのタグと同じ薄ピンクのピル。選択中は茶 */
.filter { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.filter__btn { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--pink-soft); color: var(--brown); font-family: var(--font-maru); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; cursor: pointer; transition: background .25s, color .25s; }
.filter__btn:hover { background: #EDDDD6; }
.filter__btn.is-active { background: var(--brown); color: var(--white); }
.filter__btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.filter__count { position: relative; margin-top: 12px; text-align: center; font-size: 12px; letter-spacing: 0.1em; color: var(--text-body); min-height: 1.6em; }
/* 作品カード＝TOPのポラロイドと同じ作り（白カード＋手描きの線＋角丸写真＋タグ）。
クラス名 wcard は WPの mw_render_wgrid() と tools/build_works_pages.py が出力する名前なので変えない */
/* 2026-09-15 grid→flex の中央寄せ。22件を3列に並べると最後の段が1枚だけ左に取り残されていた（絞り込みで件数が変わっても端数の段は中央に来る） */
.wgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px 16px; margin-top: 30px; }
.wcard { position: relative; width: calc(50% - 8px); transition: opacity .18s ease-out, transform .18s ease-out; }
.wcard.is-hidden { display: none; }
.wcard.is-out { opacity: 0; transform: scale(.96); }
.wcard__link { position: relative; z-index: 2; display: block; background: var(--white); padding: 9px 9px 12px; color: inherit; text-decoration: none; transition: transform .3s ease; }
a.wcard__link { cursor: pointer; }
.wcard__link:hover { transform: translateY(-6px); }
/* カードは傾けない（2026-09-13 みどり「斜めの枠はなくしたい」）。手描き線の向きだけカードごとに変える */
.wcard:nth-child(4n+2) .polaroid__frame { transform: scaleX(-1); }
.wcard:nth-child(4n+3) .polaroid__frame { transform: scaleY(-1); }
.wcard:nth-child(4n) .polaroid__frame { transform: scale(-1, -1); }
.wcard__img { aspect-ratio: 4 / 3.1; background: var(--ph); border-radius: 8px; overflow: hidden; }
.wcard__img img { width: 100%; height: 100%; object-fit: cover; }
/* カードの主役は作品名（2026-09-15）＝以前はタグの方が大きく目立っていた。タグは小さく薄く＝分類のラベルに戻す */
.wcard .tag { margin-top: 10px; padding: 2px 9px; font-size: 10px; letter-spacing: 0.06em; }
.wcard__title { margin-top: 7px; font-family: var(--font-maru); font-weight: 700; font-size: 12.5px; line-height: 1.5; color: var(--brown); letter-spacing: 0.02em; font-feature-settings: "palt"; } /* SPは12.5pxのまま＝13.5pxにすると「阪急」の途中で改行された（2026-09-15） */
.wcard__meta { margin-top: 2px; font-size: 11px; line-height: 1.5; color: var(--text-body); letter-spacing: 0.04em; }
/* 覗きイラスト＝TOPのポラロイドと同じ演出（出現0.45秒後にひょこっと） */
.wcard__peek { position: absolute; z-index: 3; pointer-events: none; opacity: 0; transition: transform .75s cubic-bezier(.34,1.56,.64,1) .45s, opacity .35s ease .45s; transform-origin: 50% 100%; }
.wcard__peek--tl { left: -15px; top: -58px; width: 81px; transform: translateY(58px) scale(.8); } /* 犬＝TOPと同じく1.5倍（54→81・2026-09-15 みなみ）。足元と左端は据え置き */
.wcard__peek--r { right: -12px; top: 38%; width: 54px; transform: translateX(-40px) scale(.8); transform-origin: 0 50%; }
.wcard__peek--bl { left: -14px; bottom: -4px; width: 60px; z-index: 1; transform: translateX(60px); transform-origin: 100% 50%; }
.wcard__peek--tr { right: -14px; top: -40px; width: 56px; transform: translateY(40px) scale(.8); }
.wcard.is-in .wcard__peek { opacity: 1; transform: none; }
/* 絞り込み中は横にはみ出す子（スケボー＝右／猫＝左）を出さない（2026-09-15 みなみ「その他でスケーターとわんこが被っている」）。
横の子は「全件表示で左右の端の列に来る」前提で置いているので、件数が変わると隣のカードの子とぶつかる。上に出る犬・走る人は残す */
.wgrid.is-filtered .wcard__peek--r, .wgrid.is-filtered .wcard__peek--bl { display: none; }
.paper--works .btn-wrap { position: relative; margin-top: 56px; }
/* 実績一覧＝TOPの実績企業と同じ波線で上下を区切る */
.list { padding: 18px 0; background:
url("data:image/svg+xml;utf8,") repeat-x left top,
url("data:image/svg+xml;utf8,") repeat-x left bottom; background-size: 12px 4px; }
.list li { position: relative; padding-left: 16px; font-size: 13px; line-height: 1.95; color: var(--text-body); letter-spacing: 0.04em; }
.list li::before { content: ""; position: absolute; left: 2px; top: 0.85em; width: 5px; height: 5px; border-radius: 50%; background: var(--coral); }
.list-note { margin-top: 10px; text-align: right; font-size: 11px; letter-spacing: 0.1em; color: var(--text-light); }
/* 実績一覧の折りたたみ（2026-09-15）。ボタン＝Instagramピルと同じ作り（白＋茶1px枠＋ずらし影）＝「開く」は案内なので副次の見た目 */
.list-lead { margin-top: -12px; text-align: center; font-size: 13px; line-height: 1.8; letter-spacing: 0.04em; color: var(--text-body); }
.list-fold { margin-top: 24px; }
.list-fold__btn { list-style: none; position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 264px; min-height: 52px; margin: 0 auto; padding: 0 44px 0 24px; background: var(--white); border: 1px solid var(--brown); border-radius: 8px; box-shadow: 3px 4px 0 var(--brown); font-family: var(--font-maru); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; color: var(--brown); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.list-fold__btn::-webkit-details-marker { display: none; }
.list-fold__btn::after { content: ""; position: absolute; right: 22px; top: 50%; width: 8px; height: 8px; border-right: 1.4px solid var(--brown); border-bottom: 1.4px solid var(--brown); transform: translateY(-70%) rotate(45deg); transition: transform .3s; }
.list-fold[open] .list-fold__btn::after { transform: translateY(-30%) rotate(-135deg); }
/* 押し込み＝サイト共通のボタンと同じ（style.css「ボタンの押し込み」） */
@media (hover: hover) { .list-fold__btn:hover { transform: translate(3px, 4px); box-shadow: 0 0 0 var(--brown); } }
.list-fold__btn:active { transform: translate(3px, 4px); box-shadow: 0 0 0 var(--brown); }
.list-fold__btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.list-fold__count { font-size: 12px; font-weight: 500; color: var(--coral); letter-spacing: 0.04em; }
.list-fold__close, .list-fold[open] .list-fold__open { display: none; }
.list-fold[open] .list-fold__close { display: inline; }
.list-fold .list { margin-top: 32px; }
.list-fold[open] .list { animation: faq-in .3s ease-out both; }
/* ==========================================================
CONTACT
========================================================== */
.paper__inner--form { max-width: 360px; }
/* ご依頼の流れ（ひと目版）＝TOPのSERVICEと同じ白丸＋茶の輪郭のアイコン */
.mini-flow { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 10px; counter-reset: step; }
.mini-flow__step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mini-flow__icon { width: 72px; height: 72px; border-radius: 50%; background: var(--white); border: 1px solid var(--brown); display: flex; align-items: center; justify-content: center; }
.mini-flow__icon img { width: 90%; max-width: none; flex: none; } /* 絵の実寸をそろえる比率＝TOPの .flow__icon と同じ（17=90/18=107/19=97/20=88%） */
.mini-flow__step:nth-child(2) .mini-flow__icon img { width: 107%; }
.mini-flow__step:nth-child(3) .mini-flow__icon img { width: 97%; }
.mini-flow__step:nth-child(4) .mini-flow__icon img { width: 88%; }
.mini-flow__no { margin-top: 10px; font-family: var(--font-maru); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; color: var(--coral); line-height: 1; }
.mini-flow__title { margin-top: 6px; font-family: var(--font-maru); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; color: var(--brown); }
.mini-flow__note { position: relative; margin-top: 26px; text-align: center; font-size: 12.5px; line-height: 1.8; color: var(--text-body); letter-spacing: 0.04em; }
/* 手紙の枠＋フォーム */
.letter { position: relative; margin-top: 60px; background: var(--white); padding: 32px 20px 30px; }
.letter__plane { position: absolute; right: -10px; top: -32px; width: 70px; transform: rotate(-8deg); z-index: 2; }
.hint { position: relative; margin-bottom: 30px; padding: 18px 18px 16px; background: var(--pink-soft); border-radius: 12px; }
.hint__title { font-family: var(--font-maru); font-weight: 700; font-size: 13.5px; letter-spacing: 0.04em; color: var(--brown); margin-bottom: 8px; }
.hint__list li { position: relative; padding-left: 14px; font-size: 13px; line-height: 1.85; color: var(--text-body); letter-spacing: 0.03em; }
.hint__list li::before { content: ""; position: absolute; left: 1px; top: 0.85em; width: 5px; height: 5px; border-radius: 50%; background: var(--coral); }
.hint__note { margin-top: 6px; font-size: 12px; color: var(--text-body); letter-spacing: 0.04em; }
.form__row { margin-bottom: 20px; }
.form__label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-family: var(--font-maru); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; color: var(--brown); }
.badge { font-size: 11px; letter-spacing: 0.08em; padding: 2px 9px; border-radius: 999px; background: var(--coral); color: var(--white); font-weight: 700; }
.badge--opt { background: #E9E2DC; color: var(--brown); }
.form input:not([type="submit"]), .form select, .form textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 13px 14px; background: #FDFBFA; box-shadow: inset 0 1px 2px rgba(105,92,82,.06); font: inherit; font-size: 16px; color: var(--text); letter-spacing: 0.03em; -webkit-appearance: none; appearance: none; transition: border-color .25s, background .25s, box-shadow .25s; } /* 16px未満だとiOSが入力時に拡大する */
.form input:not([type="submit"]):focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--brown); background: var(--white); box-shadow: 0 0 0 3px rgba(226,128,114,.16); }
.form select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; background-size: 10px 16px; padding-right: 36px; }
.form textarea { min-height: 170px; resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: #A39588; }
.form__submit { text-align: center; margin-top: 28px; }
.form__submit .btn { margin: 0 auto; }
/* 送信ボタン＝サイトの「お問い合わせ」系ボタンと同じコーラル（2026-09-15。以前は茶で、ここだけ色が違った）。
白地の上なので枠と影は茶＝SPドロワーの「お問い合わせへ」（.gnav__cta）と同じ作り。CF7の にも同じクラスが付く */
.btn--submit { background: var(--coral); color: var(--white); border: 1px solid var(--brown); border-radius: 8px; box-shadow: 3px 4px 0 var(--brown); cursor: pointer; }
/* 押し込みの動きは style.css「ボタンの押し込み」で共通 */
input.btn--submit { justify-content: center; font: inherit; font-family: var(--font-maru); font-weight: 700; letter-spacing: 0.1em; }
.form__note { margin-top: 16px; font-size: 12px; line-height: 1.8; color: var(--text-body); }
/* よくあるご質問＝方眼の上に置くので白い面にのせる（2026-09-15 フォームの前へ移動） */
.faq-wrap { position: relative; margin-top: 64px; }
.faq-list { position: relative; background: var(--white); border-radius: 12px; padding: 2px 18px; box-shadow: 0 4px 14px rgba(105,92,82,.06); }
.faq:last-child { background: none; }
.faq { background: url("data:image/svg+xml;utf8,") repeat-x left bottom; background-size: 12px 4px; }
.faq summary { list-style: none; cursor: pointer; padding: 18px 30px 18px 0; position: relative; font-family: var(--font-maru); font-weight: 700; font-size: 14px; line-height: 1.6; color: var(--brown); letter-spacing: 0.04em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q."; font-family: var(--font-en); margin-right: 8px; color: var(--coral); }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px; border-right: 1.2px solid var(--brown); border-bottom: 1.2px solid var(--brown); transform: translateY(-70%) rotate(45deg); transition: transform .3s; }
.faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.faq p { position: relative; padding: 0 0 20px 24px; font-size: 13px; line-height: 1.9; color: var(--text-body); letter-spacing: 0.04em; }
.faq[open] .faq__a { animation: faq-in .24s ease-out both; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } }
.faq__a::before { content: "A."; position: absolute; left: 0; top: 0; font-family: var(--font-en); color: var(--brown); }
/* ==========================================================
768px〜（タブレット＋PC）
========================================================== */
@media (min-width: 768px) {
.page-head { padding: 150px 40px 56px; }
.page-head__ja { font-size: 20px; margin-top: 12px; }
.page-head__lead { font-size: 15px; margin-top: 16px; }
/* 768px〜は英字の右隣に「立たせる」＝絵の足元を英字のベースラインにそろえる。3ページとも文字の端から同じ間隔 */
.page-head__il { --il-w: 96px; left: calc(100% - 0.18em + 0.6em - var(--il-w) * var(--il-pl)); bottom: calc(0.2em - var(--il-w) * var(--il-pb)); }
.page-head__il--works { --il-w: 84px; }
.page-head__il--contact { --il-w: 88px; }
.sub-sec { padding: 80px 40px 96px; }
.sub-sec__inner { max-width: 760px; }
.sub-sec__inner--wide { max-width: 880px; }
.sub .sec-title { margin-bottom: 44px; }
.arch-sec { padding: 80px 40px 130px; }
.arch-sec::before { --arch-r: 75vw; }
.sub-profile .about__figure { grid-row: 2 / span 2; margin: 0; } /* style.css は見出し行を数えて3行目から＝下層は見出し(h2)が無いので2行目から */
.icon-scallop { width: 240px; }
.sub-clients { padding: 96px 0 90px; }
.clients-grid { grid-template-columns: repeat(5, 1fr); gap: 8px 12px; padding: 34px 0 30px; }
.clients-grid li { font-size: 17px; }
.paper { padding: 96px 40px 110px; }
.paper::before { left: 16px; right: 16px;
background-image:
linear-gradient(#F0DED7 2px, transparent 2px),
linear-gradient(90deg, #F0DED7 2px, transparent 2px),
linear-gradient(#F4EEE8 2px, transparent 2px),
linear-gradient(90deg, #F4EEE8 2px, transparent 2px);
background-size: 40px 40px, 40px 40px, 40px 40px, 40px 40px;
background-position: 0 0, 0 0, 0 20px, 20px 0;
}
.paper__inner { max-width: 760px; }
.paper__inner--wide { max-width: var(--w-pc); }
.paper__clip { right: 5%; top: 0; width: 66px; }
.note-card { padding: 32px 36px; }
.note-card h3 { font-size: 15px; }
.note-card p { font-size: 16px; }
.field { grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 920px; margin: 0 auto; }
.env-wrap { margin-top: 110px; }
.env { grid-template-columns: 1fr 1fr; gap: 40px; max-width: 760px; }
.env__note { font-size: 14px; margin-top: 32px; }
.filter { gap: 10px; }
.filter__btn { min-height: 44px; padding: 0 20px; font-size: 14px; }
.wgrid { gap: 64px 48px; margin-top: 56px; max-width: 688px; margin-inline: auto; }
.wcard { width: calc(50% - 24px); }
.wcard__link { padding: 14px 14px 18px; }
.wcard__img { border-radius: 12px; }
.wcard .tag { margin-top: 14px; padding: 3px 12px; font-size: 11px; }
.wcard__title { margin-top: 10px; font-size: 17px; }
.wcard__meta { margin-top: 4px; font-size: 13px; }
.wcard__peek--tl { left: -15px; top: -70px; width: 96px; } /* 64→96（1.5倍） */
.wcard__peek--r { right: -46px; width: 72px; }
.wcard__peek--bl { left: -60px; width: 80px; }
.wcard__peek--tr { right: -16px; top: -48px; width: 66px; }
.paper--works .btn-wrap { margin-top: 80px; }
.list { columns: 2; column-gap: 48px; padding: 30px 0; }
.list li { break-inside: avoid; font-size: 15px; }
.list-note { font-size: 13px; }
.list-lead { font-size: 15px; margin-top: -20px; }
.list-fold { margin-top: 32px; }
.list-fold__btn { min-height: 60px; font-size: 15px; }
.paper__inner--form { max-width: 760px; }
.mini-flow { grid-template-columns: repeat(4, 1fr); gap: 0 12px; max-width: 720px; margin: 0 auto; }
/* 丸と丸を細い点線でつなぐ（TOPのフローの点線と同じ語彙） */
.mini-flow__step:not(:last-child)::after { content: ""; position: absolute; top: 45px; left: calc(50% + 54px); right: calc(-50% + 54px - 12px); border-top: 2px dotted var(--brown); opacity: .55; }
.mini-flow__icon { width: 90px; height: 90px; }
.mini-flow__no { margin-top: 14px; font-size: 12px; }
.mini-flow__title { margin-top: 8px; font-size: 17px; }
.mini-flow__note { margin-top: 36px; font-size: 15px; }
.faq-wrap { margin-top: 100px; }
.faq-list { max-width: 760px; margin: 0 auto; padding: 4px 40px; }
/* フォーム＝短い項目は2列（名前/会社・メール/依頼内容・納期/予算）。縦の長さをほぼ半分にする（2026-09-15） */
.form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.form > * { grid-column: 1 / -1; }
.form > .form__row--half { grid-column: auto; }
.letter { margin-top: 90px; padding: 54px 60px 50px; }
.letter__plane { width: 96px; right: -26px; top: -44px; }
.hint { margin-bottom: 40px; padding: 24px 30px 20px; }
.hint__title { font-size: 16px; }
.hint__list li, .hint__note { font-size: 15px; }
.form__row { margin-bottom: 26px; }
.form__label { font-size: 15px; }
.form__note { font-size: 13px; }
.faq summary { font-size: 17px; padding: 24px 40px 24px 0; }
.faq p { font-size: 16px; padding-left: 30px; padding-bottom: 26px; }
}
/* ==========================================================
1024px〜＝PCカンプの組み（TOPと同じ文字サイズのトークンを使う）
========================================================== */
@media (min-width: 1024px) {
.page-head { padding: 176px 40px 72px; }
.page-head__ja { font-size: var(--fs-foot-name); }
.page-head__lead { font-size: var(--fs-lead); }
.page-head__il { --il-w: 112px; }
.page-head__il--works { --il-w: 96px; }
.page-head__il--contact { --il-w: 100px; }
.sub-profile .about__figure { grid-row: 2; margin-top: 10px; }
.sub-profile .about__body { grid-row: 2; }
/* 強み3つ＝本文の下に全幅で横並び（2026-09-15 みどり「PCのaboutのここの表現を変えたい・横並び？」）。
A 白ピルを横に3つ（幅が足りず文字がはみ出す）／B 白カード3枚（押せるボタンに見える・下の対応領域のカードと似る）／
C 1枚の白い面を縦線で3区切り → C採用。比較＝_案_ABOUT強み3つ_A横ピル_Bカード_C1枚の面_2026-09-15.png。
右の列だけ縦に長く、強みが本文に埋もれていたのも解消。TOPのABOUT（みなみカンプ）は対象外＝.sub-profile の中だけ */
.sub-profile .about__points { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: none; margin: 64px 0 0; padding: 34px 0 32px; background: var(--white); border-radius: 20px; box-shadow: 0 4px 14px rgba(105,92,82,.06); }
.sub-profile .check-pill { justify-content: center; min-height: 0; padding: 0 16px; background: none; box-shadow: none; border-radius: 0; white-space: normal; }
.sub-profile .check-pill + .check-pill { border-left: 1px solid var(--line); }
.sub-profile .check-pill__mark { display: none; }
.sub-profile .check-pill__text { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; text-align: center; }
.sub-profile .pt-label { display: block; order: 0; font-family: var(--font-en); font-weight: 400; font-size: 13px; letter-spacing: 0.3em; color: var(--brown); }
.sub-profile .pt-key { order: 1; font-size: 21px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; color: var(--brown); white-space: nowrap; }
.sub-profile .pt-sub { order: 2; font-size: 15px; font-weight: 500; letter-spacing: 0.06em; color: #524C45; }
.sub-profile .pt-more { display: inline; }
.sub-profile .about__inner .btn-wrap { grid-column: 1 / -1; grid-row: 4; margin-top: 48px; }
.icon-scallop { width: 300px; }
.profile figcaption { margin-top: 22px; gap: 16px; }
.profile__role { font-size: var(--fs-foot-name); }
.profile__name { width: 110px; }
.arch-sec { padding: 100px 40px 150px; }
.clients-grid li { font-size: calc(var(--fs-logo) * 0.8); } /* TOPのマーキーの社名(30px)の8割＝一覧で5つ並べても詰まらない大きさ */
.sub-clients .clients__note { font-size: 13px; }
.scallop-card h3 { font-size: 8.4cqw; }
.note-card h3 { font-size: 16px; }
.note-card p { font-size: var(--fs-note); }
.env__note { font-size: var(--fs-btn); }
.filter__btn { font-size: var(--fs-tag); padding: 0 22px; min-height: 46px; }
.filter__count { font-size: 14px; }
.wgrid { gap: 64px 40px; max-width: calc(315px * 3 + 40px * 2); } /* TOPのポラロイド幅(315)×3列 */
.wcard { width: 315px; }
/* タグはTOPのポラロイド（タグだけのカード）より小さく＝一覧のカードは作品名が主役（2026-09-15） */
.wcard .tag { font-size: 13px; padding: 4px 14px; margin-top: 16px; }
.wcard__title { margin-top: 12px; font-size: var(--fs-pill); }
.wcard__meta { font-size: 14px; }
.list li { font-size: var(--fs-btn); }
.mini-flow__icon { width: 100px; height: 100px; } /* TOPのフローの丸(100px)と同じ */
.mini-flow__step:not(:last-child)::after { top: 50px; left: calc(50% + 60px); right: calc(-50% + 60px - 12px); }
/* STEP番号＝TOPのフローと同じ袋文字の画像（みなみ書き出し） */
.mini-flow__no { width: 68px; height: 15px; margin-top: 16px; font-size: 0; background: no-repeat center / contain; }
.mini-flow__step:nth-child(1) .mini-flow__no { background-image: url("../assets/img/step-1.png"); }
.mini-flow__step:nth-child(2) .mini-flow__no { background-image: url("../assets/img/step-2.png"); }
.mini-flow__step:nth-child(3) .mini-flow__no { background-image: url("../assets/img/step-3.png"); }
.mini-flow__step:nth-child(4) .mini-flow__no { background-image: url("../assets/img/step-4.png"); }
.mini-flow__title { font-size: var(--fs-pill); }
.mini-flow__note { font-size: var(--fs-btn); }
.hint__title { font-size: var(--fs-pill); }
.hint__list li, .hint__note { font-size: var(--fs-btn); }
.form__label { font-size: var(--fs-btn); }
.form__note { font-size: 14px; }
.faq summary { font-size: var(--fs-pill); }
.sub-next { margin-top: 96px; }
.faq p { font-size: var(--fs-btn); }
}
/* 1024〜1199px は横幅が足りないのでTOPと同じだけ詰める（TOPのポラロイドも288px） */
@media (min-width: 1024px) and (max-width: 1199px) {
.wgrid { gap: 56px 24px; max-width: calc(288px * 3 + 24px * 2); }
.wcard { width: 288px; }
}
/* iPad幅（768〜1023px）だけ（2026-09-17 みどり「iPadぐらいのサイズの見え方が微妙・他は崩さないように」）。SP・PCは不変 */
@media (min-width: 768px) and (max-width: 1023px) {
/* ABOUT 対応領域：4つ横並びだと丸が約150pxで説明文が読めなかった→2×2で丸を約220pxに（中の文字はcqwなので一緒に大きくなる） */
.field { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 460px; gap: 24px; }
}
/* ---------- WORKS 作品ページ（works/*.html／WordPress単一記事 single-milk_works.php） ---------- */
.paper--single .paper__inner { max-width: 340px; }
.wsingle { position: relative; background: var(--white); padding: 28px 20px 30px; }
.wsingle__head { text-align: center; }
.wsingle__head .tag { margin: 0 0 14px; }
.wsingle__title { font-family: var(--font-maru); font-size: 18px; font-weight: 700; line-height: 1.6; color: var(--brown); font-feature-settings: "palt"; }
.wsingle__client { margin-top: 8px; font-size: 13px; letter-spacing: 0.08em; color: var(--text-body); }
.wsingle__meta { margin-top: 2px; font-size: 12px; color: var(--text-light); }
.wsingle__body { margin-top: 28px; font-size: 14px; line-height: 1.9; color: var(--text); }
.wsingle__body p { margin: 0 0 1em; }
.wsingle__body a { color: var(--coral); word-break: break-all; text-decoration: underline; }
.wsingle__body figure { margin: 18px 0; }
.wsingle__body img { display: block; width: 100%; height: auto; border-radius: 10px; }
.wsingle__body figcaption { margin-top: 6px; font-size: 11px; color: var(--text-light); text-align: center; }
.wsingle__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 36px; font-size: 12px; line-height: 1.5; }
.wsingle__nav-link { color: var(--brown); text-decoration: none; }
.wsingle__nav-link--next { text-align: right; }
.wsingle .btn-wrap { margin-top: 30px; }
@media (min-width: 768px) {
.paper--single .paper__inner { max-width: 820px; }
.wsingle { padding: 56px 64px 52px; }
.wsingle__title { font-size: 24px; }
.wsingle__client { font-size: 15px; }
.wsingle__body { font-size: 16px; margin-top: 40px; }
.wsingle__body figure { margin: 28px 0; }
.wsingle__nav { font-size: 14px; margin-top: 52px; }
}
@media (min-width: 1024px) {
.wsingle__title { font-size: var(--fs-lead); }
.wsingle__body { font-size: var(--fs-btn); }
}