@charset "utf-8";
/* ==========================================================================
   CORECOLOR 2026 — トップページ
   --------------------------------------------------------------------------
   カンプ「CORECOLOR 0901.pdf」の実装。すべて .p-cc 配下にスコープしてあるので、
   レガシーの style.css を読み込む下層ページには一切影響しない。

   カンプのデザイン言語は次の4つの反復でできている。ここでもそれを部品化している。
     ① 円          .c-circle
     ② 弧の区切り  各セクションの ::before（横長の楕円で境界を作る）
     ③ 弧に沿う文字 .c-arc（SVG textPath）
     ④ ピル/角丸   .c-pill / .c-pencil-btn / .c-card / .c-arch

   単位は em に統一（~/dev の共通ルール）。基準の font-size はビューポート幅から
   算出しているので、em で組んだ寸法がそのまま画面幅に追従して縮む。
   ========================================================================== */

/* --------------------------------------------------------------------------
   base
   --------------------------------------------------------------------------
   枠線・罫線の太さはサイト全体で1pxにそろえる（2026-10-06 児島指示）。
   CSSの枠線は 0.0625em（ブラウザが1pxに丸める）、SVGの線は stroke-width:1 ＋
   vector-effect:non-scaling-stroke（拡大縮小しても1pxのまま）で描く。
   アイコンの線（虫めがね・ページ送りの山形など）は図柄の一部なので対象外。 */
.p-cc {
	margin: 0;
	font-size: clamp(0px, calc(100vw / 80), 16px);
	font-family: var(--font-jp);
	/* 既定はミディアム。Poppins は 400 を読み込んでいないので、
	   英字も 500 を基準にしたほうが合成太字にならず字形が正しく出る。 */
	font-weight: 500;
	line-height: 1.6;
	color: var(--c-ink);
	background: var(--c-base);
	-webkit-font-smoothing: antialiased;
}
.p-cc *,
.p-cc *::before,
.p-cc *::after { box-sizing: border-box; }

/* リセットは :where() で包んで詳細度を 0 にする。
   こうしないと `.p-cc img { height:auto }` のような素の要素セレクタが
   `.c-circle__img { height:100% }` のようなクラス指定に勝ってしまい、
   コンポーネント側の指定が黙って効かなくなる（実際に3箇所で踏んだ）。 */
.p-cc :where(img) { max-width: 100%; height: auto; }
.p-cc :where(a) { color: inherit; text-decoration: none; }
.p-cc a:hover { opacity: .7; }
.p-cc :where(ul) { margin: 0; padding: 0; list-style: none; }
.p-cc :where(h1, h2, h3, p, figure) { margin: 0; }
/* 見出しのブラウザ既定サイズ（h2=1.5em / h3=1.17em）を打ち消す。
   これが残っていると、font-size を指定していない見出しの中の span に em を使ったとき
   16px ではなく既定値が基準になり、意図の1.5倍の大きさになる（実際 .c-heading__jp が
   30px のつもりで 45px になっていた）。 */
.p-cc :where(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; }
.p-cc :focus-visible { outline: 0.125em solid var(--c-ink); outline-offset: 0.25em; }

.u-visually-hidden {
	position: absolute; width: 0.0625em; height: 0.0625em; margin: -0.0625em;
	padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.u-skip {
	position: absolute; left: 0.5em; top: -3em; z-index: 100;
	padding: 0.5em 1em; background: var(--c-ink); color: var(--c-base); border-radius: 0.25em;
}
.u-skip:focus { top: 0.5em; }

.l-main { display: block; overflow: hidden; }

/* セクションは 100% 幅（背景と弧が画面いっぱいに出る）。
   中身は必ず __inner のコンテナに入れる（~/dev ルール: min(92%, 80em) 中央揃え）。 */
.p-hero, .p-marquee, .p-pickup, .p-column, .p-special, .p-writer,
.l-header, .l-footer { width: 100%; }

.l-header__inner,
.p-pickup__inner,
.p-column__inner,
.p-special__inner,
.p-writer__inner,
.l-footer__inner { width: min(92%, 80em); margin-inline: auto; }

/* --------------------------------------------------------------------------
   ヘッダー
   -------------------------------------------------------------------------- */
.l-header { position: relative; padding-top: 1.75em; background: var(--c-base); }

.l-header__inner {
	display: flex; align-items: flex-start; gap: 2em;
}

.c-brand { flex: none; font-size: 1em; font-weight: 400; }
.c-brand__link { display: block; }
/* ロゴはタグラインまで含んだ一体データ。カンプ実測で幅156px */
.c-brand__mark { display: block; width: 9.75em; height: auto; }

/* 上のアキは「ホバー／滞在中の円（5.5em）がロゴの上端より上へ出ない」位置で決めている。
   文字の行だけで詰めると円が直径ぶん上へはみ出し、ページ上端で欠けて見える。 */
.c-nav-main { flex: 1 1 auto; min-width: 0; padding-top: 1.8125em; }
/* space-between だと左右の端（ロゴ側・検索側）にぴったり付いて広がりすぎるので、
   中央寄せにして項目間のアキで間隔を作る */
.c-nav-main__list { display: flex; flex-wrap: wrap; align-items: center;
	justify-content: center; gap: 0.5em 3em; }
.c-nav-main__item { font-size: 0.9375em; font-weight: 500; }
/* カンプの丸はホバー時の表現（2026-09-03 児島さん確認）。
   リンク自体を円にすると長い項目の文字が折り返してしまうので、
   円は ::before として文字の背面に置き、文字は1行のまま保つ。 */
/* isolation で <a> 自身に重なりの文脈を作る。こうすると円を z-index:-1 で
   文字の背面に置いても、ヘッダーの背景より下には回らない。 */
.c-nav-main__item > a { position: relative; display: inline-block; white-space: nowrap;
	isolation: isolate; }
.c-nav-main__item > a::before {
	content: ""; position: absolute; left: 50%; top: 50%; z-index: -1;
	/* ロゴの中の円と同じ大きさ（2026-10-06 児島指示）。ロゴ画像は幅1001pxで円の直径465px、
	   表示幅9.75em → 円は 9.75 × 465/1001 ≒ 4.53em（基準16px）。この要素の基準は
	   項目の文字サイズ0.9375em（15px）なので 4.53 ÷ 0.9375 ≒ 4.83em */
	width: 4.83em; aspect-ratio: 1; transform: translate(-50%, -50%);
	background: transparent;
	border: 0.0625em solid transparent; border-radius: 50%;
	transition: border-color .15s ease, background-color .15s ease; pointer-events: none;
}
/* 円の中はまわりより少しだけ明るい地色 */
.c-nav-main__item > a:hover::before,
.c-nav-main__item > a:focus-visible::before { border-color: var(--c-ink); background: var(--c-surface); }
.c-nav-main__item > a:hover { opacity: 1; }

.l-header__utility { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 0.9em; }
/* カンプ実測: ヘッダーの検索は幅131px・SNSアイコンは22px（フッターより一回り大きい） */
/* カンプ実測: ヘッダーの検索は幅154px */
.l-header__utility .c-search { width: 9.625em; }
.c-social--header .c-social__link svg { width: 1.375em; height: 1.375em; }

/* SNSアイコンはインラインSVG（塗りの円・角丸四角など形が異なるためマスクでは表現できない） */
.c-social { display: flex; gap: 0.75em; align-items: center; }
.c-social__link { display: block; line-height: 0; }
.c-social__link svg { display: block; width: 1.125em; height: 1.125em; fill: var(--c-ink); }
.c-social__link:hover { opacity: .65; }

/* カンプ実測（1280px換算）: 幅112px / 高さ24px / 虫めがねは左端 */
.c-search {
	display: flex; align-items: center; gap: 0.35em;
	width: 7em; padding: 0.2em 0.75em 0.2em 0.3em;
	background: var(--c-white); border: 0.0625em solid var(--c-ink); border-radius: 999em;
}
.c-search__submit { flex: none; width: 1.5em; height: 1.5em; padding: 0; border: 0;
	background: transparent; cursor: pointer; display: grid; place-items: center; }
.c-search__icon { width: 1em; height: 1em; border: 0.125em solid var(--c-ink-muted);
	border-radius: 50%; position: relative; }
.c-search__icon::after { content: ""; position: absolute; right: -0.28em; bottom: -0.22em;
	width: 0.34em; height: 0.125em; background: var(--c-ink-muted); transform: rotate(45deg); }
.c-search__input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent;
	font: inherit; font-size: 0.75em; color: var(--c-ink); }
.c-search__input:focus { outline: none; }

.c-menu-toggle { display: none; }

/* --------------------------------------------------------------------------
   弧のカテゴリーナビ
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   弧のカテゴリーナビ（SVG textPath）
   --------------------------------------------------------------------------
   カンプは文字自体が弧に沿って傾いているため、CSSの位置調整では再現できない。
   弧の塗り・線・TOPの半円・文字をすべて1つの SVG に入れ、textPath で文字を
   パスに載せている。画面幅が変わっても全体が同じ比率で伸縮するので、
   文字と弧の位置関係がずれない。
   -------------------------------------------------------------------------- */
/* SVGは 80em(=1280px) で頭打ちにする（児島判断）。そのまま画面幅いっぱいに
   拡大するとナビの文字だけがサイト全体の基準サイズを超えて大きくなるため。
   1280px より広い画面では両脇に色が残るので、同じ位置に線が来るグラデーションで
   帯を延長し、弧が途切れて見えないようにしている。
   （viewBox を切り詰めたので割合は .c-nav-arc 側のコメント参照） */
.c-nav-arc {
	position: relative; margin-top: 0.25em;
	/* 弧の内側の色は「弧のすぐ下に来るセクションの色」と同じでなければ、
	   境目に3色目の帯が見えてしまう。トップは下がヒーロー（surface）だが、
	   記事一覧は地色（base）なので、ページ側から差し替えられるようにしておく。 */
	--cc-arc-below: var(--c-glow);
	/* viewBox を 0 60 1280 150 に切り詰めたので、線の位置は (154-60)/150 = 62.67%、
	   線1pxぶんが 1/150 = 0.67% */
	background: linear-gradient(to bottom,
		var(--c-base) 0 62.67%,
		var(--c-line-arc) 62.67% 63.34%,
		var(--cc-arc-below) 63.34% 100%);
}
/* 記事一覧（カテゴリー/タグ/検索ほか）の下は地色 */
/* 記事一覧も弧の下は明るい面から始まる（2026-10-08 カンプ） */
.c-nav-arc__inner { position: relative; }
/* overflow:visible … 滞在中の項目のかまぼこは文字幅に合わせて大きくなり、「本とかアートとか」のような
   長い項目では切り詰めた viewBox の上端を越える。枠で切らずにそのまま描く（上は地色なので重なっても問題ない） */
.c-nav-arc__svg { display: block; width: min(100%, 80em); height: auto; margin-inline: auto; overflow: visible; }

.c-nav-arc__fill { fill: var(--cc-arc-below, var(--c-glow)); }
.c-nav-arc__line { stroke: var(--c-line-arc); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* TOPの半円。弧の上に載り、塗りは弧の上側と同じ地色 */
/* TOPの半円もホバー時の表現 */
/* 中は明るい面の色（2026-10-06 児島支給の見本）。記事一覧は弧の下が地色なので、
   弧の下の色に合わせると塗りが見えなくなる。どのページでも明るい色で塗る */
.c-nav-arc__dome { fill: var(--c-glow); stroke: var(--c-line-arc); stroke-width: 1; vector-effect: non-scaling-stroke;
	opacity: 0; transition: opacity .15s ease; }
.c-nav-arc__svg a:hover .c-nav-arc__dome,
.c-nav-arc__svg a:focus-visible .c-nav-arc__dome { opacity: 1; }
/* 滞在中のカテゴリーは常時表示。d は nav.js が弧上の実座標から組み立てる */
.c-nav-arc__dome.is-current,
.c-nav-arc__dome--current { opacity: 1; }
/* 描く対象が無いページでは d が空のままなので、何も出ない */
.c-nav-arc__dome--current[d=""] { display: none; }

/* 文字は 17 → 15（viewBox単位・2026-10-06 児島指示でかまぼこと一緒に小さく） */
.c-nav-arc__label,
.c-nav-arc__top {
	font-family: var(--font-jp); font-size: 15px; font-weight: 700;
	letter-spacing: 0.02em; fill: var(--c-ink);
}
.c-nav-arc__svg a { cursor: pointer; }
.c-nav-arc__svg a:hover text { opacity: .65; }

/* 鉛筆型の「お仕事のご依頼」。カンプでは文字の下に図形が別に置かれている */
/* 「お仕事のご依頼」は文字と鉛筆が一体の支給SVG。傾きも2色も文字もSVGに入っているので、
   CSSでは大きさと位置だけ決める。PCは検索窓の下（2026-10-06 児島指示）に、検索窓と中心をそろえて置く
   （検索窓 9.625em − ボタン 7.1875em）÷ 2 ≒ 1.22em を右に空ける）。 */
.c-order-btn { display: block; width: 7.1875em; margin-right: 1.22em; }
.c-order-btn img { display: block; width: 100%; height: auto; }
.c-order-btn:hover { opacity: .7; }
/* SPだけの部品（ヘッダー上段のツール・検索窓・鉛筆・横書きのカテゴリーナビ） */
.c-sp-tools, .c-sp-search, .c-order-btn--sp, .c-nav-sp { display: none; }

/* 鉛筆付きのピルボタン（書き手の一覧はこちら）。
   鉛筆は支給SVG（assets/images/pencil.svg）をそのまま使う。
   実測で 長さ:軸の太さ = 7.08:1、傾きも先端の2色もSVGに入っているので
   こちらでは回転もグラデーションも掛けない。
   SVGの高さの50%が軸の太さなので、軸を1em弱に見せるには高さ1.88em。 */
.c-pencil-btn {
	position: relative; display: inline-block;
	padding: 1.2em 2.5em; font-size: 1.375em; font-weight: 700; line-height: 1.4;
	background: var(--c-surface-2); border-radius: 999em;
}
/* カンプ実測（ピル610×150 / 鉛筆の見え方）:
     鉛筆の長さ  = ピル幅の約36%
     先端の食い込み = ピル幅の約13%
     上下位置     = ピルの中心より少し下（ピル高さの約10%）*/
.c-pencil-btn::after {
	content: ""; position: absolute; left: 100%; top: 50%;
	width: 5.4em; height: 1.51em;
	transform: translate(-2em, calc(-50% + 0.35em));
	background: url("../images/pencil.svg") no-repeat center / contain;
}
.c-pencil-btn:hover { opacity: 1; background: var(--c-white); }

/* ドロワー（SP） */
.c-drawer { display: none; }

/* --------------------------------------------------------------------------
   共通パーツ
   -------------------------------------------------------------------------- */
.c-circle { display: block; overflow: hidden; border-radius: 50%; background: var(--c-sunken); }
.c-circle__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.c-card__figure img,
.c-arch__figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.c-circle__label { position: absolute; width: 0.0625em; height: 0.0625em; overflow: hidden; clip: rect(0 0 0 0); }

/* 弧に沿う文字（SVG textPath） */
.c-arc { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.c-arc__text { font-family: var(--font-jp); font-size: 5px; font-weight: 700; fill: var(--c-ink); }

/* カンプ実測（1280px換算）: 高さ32px / 文字15px / 枠は濃い線 / ピル間19px */
.c-pill {
	display: inline-block; padding: 0.4em 1.15em; white-space: nowrap;
	font-size: 0.9375em; line-height: 1.4;
	background: var(--c-white);
	border: 0.0625em solid var(--c-ink); border-radius: 999em;
}
/* カンプは # と文字の間にすき間がある */
.c-pill__hash { margin-right: 0.3em; }

.c-heading { text-align: center; font-size: 1em; font-weight: 700; line-height: 1.35; }
/* Pickup! の見出し。2026-10-06 児島指示で約75%に（3.5625em → 2.6875em・SPは 2.5em → 1.875em） */
.c-heading--en { font-family: var(--font-en); font-size: 2.6875em; font-weight: 800; letter-spacing: -0.01em; }
.c-heading__jp { display: block; font-size: 1.375em; letter-spacing: 0.08em; }
.c-heading__en { display: block; font-family: var(--font-en); font-size: 1.25em; font-weight: 700; }
/* 支給の画像タイトル（SVG・viewBox 210×50 で英語と日本語が一体）。幅で大きさを決める */
.c-heading--img { line-height: 0; }
.c-title-img { display: block; width: 16em; height: auto; margin-inline: auto; }
/* TAGS は文字の部分だけに切り詰めた SVG。以前のテキスト見出し（24px）と同じくらいの字面にする */
.c-tagpanel__title { line-height: 0; }
.c-tagpanel__title .c-title-img { width: 4.6em; margin: 0; }
.c-heading--pill { display: inline-block; padding: 1.0625em 5.1875em; background: var(--c-surface-2); border-radius: 999em; }

.c-tags { display: flex; flex-wrap: wrap; gap: 0.5em 1em; }
.c-tags > li { font-size: 0.9375em; font-weight: 700; }

/* 円形の「一覧へ」リンク。カンプでは円の上に見出しが弧を描いて載り、円の中に細い矢印が入る。
   弧に沿う文字は CSS では作れないので、円・矢印ごと1つの SVG で描いている
   （別々に組むと拡大縮小で位置関係が崩れるため）。 */
.c-morelink { margin-top: 2.5em; text-align: right; }
.c-morelink__link { display: inline-block; width: 11em; }
.c-morelink__svg { display: block; width: 100%; height: auto; }
/* 弧に沿う小さい文字は700だと細く見えるので、最も太い900を使う
   （Webフォントの読み込みに900を含めてある） */
.c-morelink__text {
	font-family: var(--font-jp); font-size: 7.5px; font-weight: 900;
	letter-spacing: 0.04em; fill: var(--c-ink);
}
.c-morelink__ring { fill: var(--c-surface-2); stroke: var(--c-ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.c-morelink__arrow { stroke: var(--c-ink); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.c-morelink__link:hover .c-morelink__ring { fill: var(--c-white); }

/* --------------------------------------------------------------------------
   ヒーロー
   --------------------------------------------------------------------------
   カンプでは前後のスライドが左右に見切れて薄く表示される（slick の centerMode）。
   -------------------------------------------------------------------------- */
/* 上の余白は padding で取ること。子の margin-top にすると、上パディングが無いぶん
   マージン相殺でヒーローの外へ抜け、その高さだけ背面の地色が帯になって見える。 */
.p-hero { position: relative; padding: 1.5em 0; background: var(--g-glow); }

/* 左端に固定して追従するシェアの帯。下層ページの .c-share-rail と同じ寸法（カンプ実測） */
.p-hero__share {
	/* 全体を約80%に（2026-10-06 児島指示）。中の寸法はすべて em なので基準を縮めるだけで比率を保つ */
	font-size: 0.8em;
	/* スクロールに追従して画面の左に固定する（児島さん指示）。高さは画面の30%（2026-10-06 児島指示で50%から変更） */
	position: fixed; top: 30%; transform: translateY(-50%); left: 0; z-index: 30; width: 3.125em;
	display: flex; flex-direction: column; align-items: center; gap: 1.0625em;
	padding: 1.875em 0 3.125em; background: var(--c-surface);
	border: 0.0625em solid var(--c-ink); border-left: 0; border-radius: 0 3.125em 3.125em 0;
}
/* 矢印とShareの間だけ詰める（カンプでは約7px） */
.p-hero__share-arrow { display: block; width: 0.75em; height: auto; margin-bottom: -0.625em; }
.p-hero__share .c-social--vertical { gap: 1.0625em; }
.p-hero__share-label { font-family: var(--font-en); font-size: 0.9375em; font-weight: 700;
	letter-spacing: 0.04em; writing-mode: vertical-rl; }
.c-social--vertical { flex-direction: column; gap: 0.55em; }
/* LINE の吹き出しは中の文字が小さく見えるので一回り大きく（2026-10-08 児島指示） */
.c-social--vertical .c-social__link--line svg { width: 1.5em; height: 1.5em; }

/* ヒーローだけは画面いっぱい。中央スライドの幅は JS が centerPadding で決める
   （min(92%,80em) のコンテナに入れると、広い画面で左右のスライドが出なくなる） */
.p-hero__slider { width: 100%; }

/* 中央以外のスライドは薄く。カンプの見え方に合わせる */
.p-hero .slick-slide { opacity: .28; transition: opacity .4s ease; }
.p-hero .slick-center { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .p-hero .slick-slide { transition: none; } }

/* 円は 22.75em → 28em（約123%・2026-10-06 児島指示「もっと大きくてもOK」）。列幅も円に合わせる。
   これ以上大きくすると右の本文の欄が狭くなりすぎる（中央のスライドは 57.625em で頭打ち） */
.p-hero__inner { display: grid; grid-template-columns: 28em 1fr; gap: 3em; align-items: center;
	padding-inline: 1.5em; }
.p-hero__visual { display: flex; justify-content: center; }
/* カンプでは写真の外側に余白（実測13px）があり、その外周を細い線の円が回る。
   .c-circle は overflow:hidden なので、内側の写真にも border-radius が要る。 */
.c-circle--hero { width: 28em; height: 28em; padding: 1em;
	background: var(--c-panel-light); border: 0.0625em solid var(--c-ink-muted); }
.c-circle--hero .c-circle__img { border-radius: 50%; }

/* 前後の記事へ送る「←」「→」（2026-10-06 児島指示・SPカンプ）。slick が .js-hero の中に入れる。
   PCは中央のスライドの左右の端、SPは円の左右に、どちらも円の中心の高さで置く */
.c-hero-arrow {
	position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
	display: grid; place-items: center; width: 3.25em; height: 3.25em; padding: 0;
	background: var(--c-panel-light); border: 0.0625em solid var(--c-ink); border-radius: 50%;
	color: var(--c-ink); cursor: pointer; transition: background-color .15s ease;
	/* button は文字サイズを親から継がない（既定13.33px）。em の基準をそろえる */
	font: inherit;
}
.c-hero-arrow svg { display: block; width: 1.9em; height: auto; overflow: visible; }
.c-hero-arrow:hover { background: var(--c-white); }
/* 中央のスライドの幅は min(92vw, 57.625em)（home.js の HERO_SLIDE_EM と同じ） */
.c-hero-arrow--prev { left: calc(50% - min(46vw, 28.8125em) - 1.625em); }
.c-hero-arrow--next { right: calc(50% - min(46vw, 28.8125em) - 1.625em); }

.p-hero__date { display: block; font-family: var(--font-en); font-size: 1em; font-weight: 700; }
/* カンプの見出しは「〜〜」の主題が大きく、続く副題が一回り小さく字下げされる */
.p-hero__title { margin-top: 0.6em; font-size: 1em; font-weight: 700; }
.p-hero__title-main { display: block; font-size: 1.4em; line-height: 1.5; text-wrap: balance; }
.p-hero__title-sub { display: block; margin-top: 0.55em; padding-left: 0.9em;
	font-size: 1em; line-height: 1.75; }
/* 抜粋は白地に細い枠 */
.p-hero__lead { margin-top: 1.2em; padding: 1.4em 1.6em; font-size: 0.9375em; line-height: 1.9;
	background: var(--c-white); border: 0.0625em solid var(--c-ink); border-radius: 0.75em; }
.p-hero__credit { margin-top: 1.35em; display: flex; flex-wrap: wrap; align-items: baseline;
	gap: 0.3em 0.75em; font-size: 0.875em; color: var(--c-ink-muted); }
.p-hero__credit b { margin-left: 0.75em; font-weight: 400; color: var(--c-ink); }
.p-hero__credit span + span::before { content: "／"; margin-right: 0.75em; }
.p-hero .c-tags { margin-top: 1.4em; gap: 0.4em 1.1em; }
.p-hero .c-tags > li { font-size: 0.9375em; letter-spacing: 0.08em; }
/* カンプではタグの下にごく小さい行がある */
.p-hero__word { margin-top: 1.1em; font-size: 0.625em; font-weight: 700; letter-spacing: 0.06em; }

/* --------------------------------------------------------------------------
   タグのマーキー
   -------------------------------------------------------------------------- */
/* 帯の色は上下のセクションに合わせる。
   トップはヒーローとPickupに挟まれるので surface、
   アーカイブ・記事詳細では前後が地色なのでそのまま透過させる。 */
.p-marquee { width: 100%; padding: 3em 0; overflow: hidden; }
.p-cc.home .p-marquee { background: var(--c-base); }
.p-marquee__row { display: flex; width: max-content; }
.p-marquee__list { display: flex; gap: 1.2em; padding-right: 1.2em; }
.p-marquee__row--0 { animation: cc-marquee 60s linear infinite; }
.p-marquee__row--1 { margin-top: 1.2em; animation: cc-marquee 75s linear infinite reverse; }
@keyframes cc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* 一言は記事へのリンク。流れていると押しにくいので、マウスを載せた段・フォーカス中は止める */
.p-marquee__row:hover, .p-marquee__row:focus-within { animation-play-state: paused; }
.p-marquee .c-pill { transition: background-color .15s ease, color .15s ease; }
.p-marquee .c-pill:hover, .p-marquee .c-pill:focus-visible { opacity: 1; background: var(--c-ink); color: var(--c-white); }
@media (prefers-reduced-motion: reduce) {
	.p-marquee__row { animation: none; }
}

/* --------------------------------------------------------------------------
   Pickup!
   -------------------------------------------------------------------------- */
/* 弧より上の三日月部分に出る色。前のセクションと同じ色にして境目に3色目を出さない */
/* Pickupの上に弧は入れない（児島さん指示 2026-09-08）。
   マーキーと同じ色でつながる一枚の面にする。 */
.p-pickup { position: relative; padding: 4em 0 6em; background: var(--c-base); }
.p-pickup .c-heading { margin-bottom: 2em; }
/* カンプの赤枠どおり、16枠を絶対配置する。
   位置も大きさも配置枠に対する％なので、画面幅が変わっても相似で伸縮し
   円の重なり方が崩れない。座標は corecolor_pickup_slots()（PHP）にある。 */
.p-pickup__field { position: relative; width: 100%; aspect-ratio: 1220.8 / 1204.0; }
.p-pickup__item { position: absolute; left: var(--x); top: var(--y); width: var(--d); aspect-ratio: 1; }
/* オンマウス画像を inset:0 で重ねるので、円自体を位置の基準にしておく。
   登録画像は「円＋周囲の弧文字」が入った透過PNG。こちらで丸く切り抜くと
   弧の文字が欠け、地色を敷くと透過部分にその色が出るので、どちらもしない。 */
.c-circle--pickup { position: relative; display: block; width: 100%; height: 100%;
	background: none; border-radius: 0; overflow: visible; }
/* 画像は縦横比を保って枠内に収める（cover だと端の弧文字が切れる） */
.c-circle--pickup .c-circle__img { object-fit: contain; }
/* オンマウスで2枚目に差し替える。重ねてから不透明度だけ動かすので画像がちらつかない */
.c-circle__img--hover {
	position: absolute; inset: 0; opacity: 0; transition: opacity .25s ease;
}
.c-circle--pickup.has-hover:hover .c-circle__img--hover,
.c-circle--pickup.has-hover:focus-visible .c-circle__img--hover { opacity: 1; }
/* 2枚目を出している間は1枚目を消す。2枚目に透過部分があると1枚目が透けて混ざって見えるため */
.c-circle--pickup.has-hover .c-circle__img:not(.c-circle__img--hover) { transition: opacity .25s ease; }
.c-circle--pickup.has-hover:hover .c-circle__img:not(.c-circle__img--hover),
.c-circle--pickup.has-hover:focus-visible .c-circle__img:not(.c-circle__img--hover) { opacity: 0; }
/* 全体の .p-cc a:hover{opacity:.7} を打ち消す。.p-cc を付けないと詳細度で負けて、2枚目が70%に薄くなっていた */
.p-cc .c-circle--pickup:hover { opacity: 1; }

/* 記事・書き手の画像は、マウスが乗るとモノクロにする（2026-10-03 児島指示。記事一覧のカードと同じ）。
   画像だけでなく見出しなど同じまとまりのどのリンクに乗っても反応するよう、まとまり単位で :has で判定する。
   Pickup は独自のオンマウス画像があるので対象外（.c-circle--pickup は下のどのまとまりにも入っていない）。 */
.p-cc :is(.c-circle__img, .c-card__figure img, .c-arch__figure img, .p-writers__avatar img) { transition: filter .4s ease; }
/* 書き手（流れるカード・ライター一覧の顔写真）は、既定カラー・マウスが乗るとモノクロのまま */
.p-cc :is(.c-arch, .p-writers__item):has(a:hover, a:focus-visible)
	:is(.c-arch__figure img, .p-writers__avatar img) { filter: grayscale(1); }
/* 記事のサムネイルは全ページ「既定モノクロ・マウスが乗るとカラー」（2026-10-08 児島指示）。
   トップのFV・連載コラム・特集。記事一覧のカードは pages.css */
.p-cc :is(.p-hero__slide, .p-column__item, .c-card) :is(.c-circle__img, .c-card__figure img) { filter: grayscale(1); }
.p-cc :is(.p-hero__slide, .p-column__item, .c-card):has(a:hover, a:focus-visible)
	:is(.c-circle__img, .c-card__figure img) { filter: grayscale(0); }
/* 画像のリンクは全体の a:hover{opacity:.7} で薄くしない（モノクロだけで反応を見せる） */
.p-cc :is(.c-circle--hero, .c-circle--column, .c-card__link, .c-arch__link, .p-writers__avatar):hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.p-cc :is(.c-circle__img, .c-card__figure img, .c-arch__figure img, .p-writers__avatar img) { transition: none; }
}
@media (prefers-reduced-motion: reduce) { .c-circle__img--hover { transition: none; } }

/* --------------------------------------------------------------------------
   連載コラム
   -------------------------------------------------------------------------- */
/* 自分の背景は「ひとつ上のセクションの色」にする。弧より上に見える三日月部分が
   その色で塗られるので、上との境目が出ない。弧の中は ::before の色。
   2026-10-08 カンプ合わせ: 上（Pickup）は地色、弧の中は明るい面→地色のグラデーション（特集も同じ） */
.p-column { position: relative; padding: 4em 0 5em; background: var(--c-base); }
.p-column::before {
	content: ""; position: absolute; left: 50%; top: 0; z-index: 0;
	width: 160%; height: 100%; transform: translateX(-50%);
	background: var(--g-glow); border-radius: 50% 50% 0 0 / 13em 13em 0 0;
	border-top: 0.0625em solid var(--c-line-arc);
}
/* TAGSパネルは連載コラムと特集をまたいで画面左端に張り付く（カンプ）。
   両セクションを .l-tagrail で包み、その中で絶対配置している。
   セクション側は弧を切るため overflow:hidden なので、パネルは必ずセクションの外に置くこと。 */
.l-tagrail { position: relative; }

.p-column__layout { margin-top: 2.5em; padding-left: 12.5em; }
/* 見出しも記事の並び（左のTAGSパネルのぶん右に寄っている）の中央に置く（2026-10-08 児島指示）。
   並びと同じだけ左を空ける。SPはパネルが上に来て並びが全幅なので空けない */
.p-column > .p-column__inner > .c-heading,
.p-special > .p-special__inner > .c-heading { padding-left: 12.5em; }
/* 特集の並びもパネルに重ならないよう同じだけ空ける（見出しは画面中央のまま） */
.p-special__slider { padding-left: 12.5em; }
/* grid/flex の子は min-width:auto が既定なので「中身の最小幅」より狭くなれない。
   スライダーは全スライドを横一列に並べるため、これが無いとセルがその全長まで
   膨れ上がってレイアウトが破綻する。スライダーを入れる箱には必ず付ける。 */
.p-column__slider { min-width: 0; }

.c-tagpanel {
	position: absolute; left: 0; top: 5.5em; z-index: 3;
	/* 書き手セクションに侵入させない。100% は .l-tagrail（連載コラム＋特集）の高さ。
	   タグが増えても、はみ出す分はパネル内でスクロールさせて枠の外に出さない。 */
	width: 12em; max-height: calc(100% - 8.5em);
	display: flex; flex-direction: column;
	padding: 1.75em 1.5em 2em;
	/* カンプ実測: 横方向のグラデーション（左 #ECEDE8 → 右 #F8F9F7）と、周囲の細い線 */
	background: linear-gradient(to right, var(--c-surface), var(--c-panel-light));
	border: 0.0625em solid var(--c-ink-muted);
	/* 画面の左端に張り付くので左の罫線は出さない */
	border-left: 0;
	border-radius: 0 1.5em 1.5em 0;
}
.c-tagpanel__title { font-family: var(--font-en); font-size: 1.5em; font-weight: 800; }
/* overflow-y:auto を指定すると横方向も自動でクリップされる。ホバー枠が
   はみ出して切れるので、リストの箱を左右に広げておく（負のマージンで
   パネルの余白に食い込ませ、内側の padding で文字位置を元に戻す）。 */
.c-tagpanel__list { margin-top: 1.25em; margin-inline: -1em; display: grid; gap: 0.05em;
	min-height: 0; overflow-y: auto; padding-inline: 0.15em;
	font-size: 0.875em; font-weight: 700; line-height: 1.5; }
/* 横スクロール用の箱はSPでだけ使う。PCでは無いものとして扱い、リストをパネル直下の子にする */
.c-tagpanel__scroll { display: contents; }
/* カンプでは # と文字の間にすき間がある */
.c-tagpanel__hash { margin-right: 0.3em; }

/* ホバー時はピル型の枠で囲む（カンプの「#能登のいま」の状態）。
   枠の分だけ文字がずれないよう、あらかじめ透明の枠と余白を持たせておく。 */
.c-tagpanel__list a {
	display: inline-block;
	padding: 0.2em 0.85em;
	border: 0.0625em solid transparent;
	border-radius: 999em;
	transition: border-color .15s ease, background-color .15s ease;
}
.c-tagpanel__list a:hover,
.c-tagpanel__list a:focus-visible {
	border-color: var(--c-ink);
	background: var(--c-white);
	opacity: 1;                 /* 全体の a:hover{opacity:.7} を打ち消す */
}
@media (prefers-reduced-motion: reduce) {
	.c-tagpanel__list a { transition: none; }
}

.p-column__item { text-align: center; padding-inline: 0.75em; }
/* SPは slick が1行に2個を inline-block で並べる。タイトルが2行の項目だけ円が上にずれないよう上端で揃える */
.js-column .p-column__item { vertical-align: top; }
/* カンプ実測: 円は列幅の80%（列247px に対して直径197px） */
/* 白っぽい画像でも円の形が分かるよう、細い線で縁取る（カンプ） */
/* 列幅いっぱい近くまで（2026-10-06 児島指示で 80%/14em → 96%/17em） */
.c-circle--column { width: 96%; max-width: 17em; aspect-ratio: 1; margin-inline: auto;
	border: 0.0625em solid var(--c-ink-muted); }

/* slick の2段モード（rows）は行を隙間なく積むので、ここで行間を作る。
   スライド内の行は class の無い div なので直接の子で指定する。 */
.js-column .slick-slide > div + div { margin-top: 2.75em; }
.p-column__title { margin-top: 1em; font-size: 1em; font-weight: 700; line-height: 1.6; }
.p-column__writer { margin-top: 0.25em; font-size: 0.875em; color: var(--c-ink-muted); }

/* --------------------------------------------------------------------------
   特集
   -------------------------------------------------------------------------- */
.p-special { position: relative; padding: 4em 0 5em; background: var(--c-base); }
.p-special::before {
	content: ""; position: absolute; left: 50%; top: 0; z-index: 0;
	width: 160%; height: 100%; transform: translateX(-50%);
	background: var(--g-glow); border-radius: 50% 50% 0 0 / 13em 13em 0 0;
	border-top: 0.0625em solid var(--c-line-arc);
}
.p-special__slider { margin-top: 2.5em; }
/* 特集は画像だけを並べる。カード状の地色や角丸は画像側に含まれている
   （児島さん指示 2026-09-19。こちらで背景を敷くと二重になる） */
.c-card { padding-inline: 0.75em; }
.c-card__link { display: block; }
.c-card__figure { overflow: hidden; border-radius: 1em; aspect-ratio: 16 / 10; }
.c-card__figure img { width: 100%; height: 100%; object-fit: cover; }
.c-card__title { margin-top: 1em; font-size: 1.0625em; font-weight: 700; line-height: 1.6; }

/* slick の2段モード（rows）は行を隙間なく積むので、ここで行間を作る */
.js-special .slick-slide > div + div { margin-top: 2.5em; }

/* --------------------------------------------------------------------------
   書き手
   -------------------------------------------------------------------------- */
.p-writer { padding: 4em 0 5em; text-align: center; }
/* 書き手の列はコンテナに収めず全幅で流す */
.p-writer__rail { width: 100%; margin-top: 3em; }
/* スライドは stretch で伸びるが、その中の <a> に height:100% を指定しても
   親の高さが auto 扱いで解決されない。スライド自体を flex にして伸ばす。 */
/* slick はスライドに display:inline-block をインラインで当てるため、CSSからは
   flex にできず高さ揃えが効かない。カンプはカードの高さが揃っているので、
   最も高いカード（氏名3文字＋英字2行）に合わせた最低高さで揃える。 */
/* カードの幅は固定（10em = カード140px ＋ 左右の余白20px）。
   画面が広がったときはカードを伸ばさず、表示枚数が増える。 */
.c-arch { width: 10em; padding-inline: 0.625em; height: auto; }
/* slick はスライドの高さを揃えないので、名前が2行になるカードだけ背が高くなる。
   トラックを flex にして伸ばす。 */
.js-writer .slick-track,
.js-column .slick-track,
.js-special .slick-track { display: flex; align-items: stretch; }
/* slick が入れるクリアフィックス用の擬似要素が flex アイテムになって
   高さ揃えを壊すので消す */
.js-writer .slick-track::before, .js-writer .slick-track::after,
.js-column .slick-track::before, .js-column .slick-track::after,
.js-special .slick-track::before, .js-special .slick-track::after { display: none; }
.js-writer .slick-slide,
.js-column .slick-slide,
.js-special .slick-slide { height: auto; }
/* カンプのカードは上下とも丸い縦長のカプセル形 */
.c-arch__link {
	display: flex; flex-direction: column; align-items: center; height: 100%;
	padding: 1.25em 0.25em 1.5em; background: var(--c-surface-2); border-radius: 999em;
}
.c-arch__figure {
	width: 7.625em; height: 7.625em; margin: 0 auto; overflow: hidden;
	border-radius: 50%; background: var(--c-white);
}
.c-arch__figure img { width: 100%; height: 100%; object-fit: cover; }
/* 氏名はカンプどおり、姓と名をそれぞれ縦書きにして上下に積む（横並びではない）。
   縦書きなので文字数がそのまま高さになる。いちばん長い人に合わせて高さを固定し、
   英字名とタグの位置を全カードで揃える（--cc-* はPHPが実データから出す）。
   1文字ぶんの高さ = 行送り1.1 + 字間0.12（縦書きでは字間も高さに乗る）。 */
.c-arch__name {
	display: flex; flex-direction: column; align-items: center; gap: 0.85em;
	margin-top: 1.2em; font-size: 1.625em; font-weight: 700;
	min-height: calc(var(--cc-name-chars, 5) * 1.22em + (var(--cc-name-parts, 2) - 1) * 0.85em);
}
/* --cc-name-fit は上限の高さ（6文字ぶん）に収まらない長い名前のときだけ writer-rail.php が入れる */
.c-arch__col {
	font-size: calc(1em * var(--cc-name-fit, 1));
	writing-mode: vertical-rl; text-orientation: upright;
	line-height: 1.1; letter-spacing: 0.12em;
}
/* 英字名は2行（姓・名）で中央揃え。行数の多い人に合わせて高さを固定する */
.c-arch__en {
	display: flex; flex-direction: column; align-items: center;
	margin-top: auto; padding-top: 1.1em; font-family: var(--font-en); font-size: 0.8125em;
	font-weight: 600; line-height: 1.4;
	min-height: calc(var(--cc-en-lines, 2) * 1.4em + 1.1em);
}
/* カンプではカードの下のタグが円弧に沿って1文字ずつ傾いている。
   CSSの回転では再現できないので SVG の textPath に載せている（PHP側で生成）。
   viewBox の座標はカンプ実測の px（1280px幅時）なので、幅を em で決めれば
   画面幅に合わせてそのまま縮む。 */
/* viewBox は実際に文字が載る範囲ぴったりなので、この margin がそのまま見た目の間隔 */
.c-arch__tags { width: 9.5em; margin: 0 auto; }
.c-arch__tags-svg { display: block; width: 100%; height: auto; overflow: visible; }
.c-arch__tag-text { font-family: var(--font-jp); font-size: 14px; font-weight: 700; fill: var(--c-ink); }
.c-arch__tags-svg a { cursor: pointer; }
.c-arch__tags-svg a:hover { opacity: .65; }

.p-writer__more { margin-top: 4em; }

/* --------------------------------------------------------------------------
   フッター
   --------------------------------------------------------------------------
   カンプでは帯の上端は直線で、TOPボタンがその上端をまたぐ。
   帯の下部を横切る弧の上に2段目のカテゴリーナビが並ぶ（ヘッダーと同じ考え方）。
   文字が接線に沿って傾くため、弧・塗り・線・文字を1つのSVGにまとめている。
   -------------------------------------------------------------------------- */
.l-footer { position: relative; margin-top: 4em; padding-top: 1.75em; background: var(--c-footer); overflow-x: clip; }

.l-footer__inner {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: 16em 1fr auto; gap: 2.5em; align-items: start;
}
/* 下の弧ナビ（.c-footnav）は負のマージンでこの箱の下に潜り込んでいる。箱は透明でも
   クリックを受け止めてしまい、弧の左側の「すべて」〜「連載コラム」が押せなかった。
   箱自体はクリックを素通りさせ、中のリンクやフォームだけで受け止める */
.l-footer__inner { pointer-events: none; }
.l-footer__inner :where(a, button, input, form, label) { pointer-events: auto; }
.l-footer__brand .c-brand__mark { width: 9.5em; }

.c-nav-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75em 2em;
	padding-top: 0.5em; padding-right: 2em; font-size: 0.875em; font-weight: 500; }

/* カンプ（フッター右の一群）実測。「お仕事のご依頼」の文字幅を基準に換算している。
   ・3つは右端ぞろえではなく、同じ中心軸の上に積む
   ・罫線とSNSの間だけ大きく空く（SNSと検索の間の約2.5倍）
   ・アイコン16px／アイコン間12px／虫めがね13px
   検索の幅だけは児島指示でカンプより長い144px（地は白） */
.l-footer__utility { display: flex; flex-direction: column; align-items: center; }
.c-footer-order { font-size: 0.875em; font-weight: 700;
	border-bottom: 0.0625em solid var(--c-ink); padding-bottom: 0.35em; }
.c-social--footer { margin-top: 2em; }
.c-social--footer .c-social__link svg { width: 1em; height: 1em; }
/* フッターの検索はヘッダーのものとは別寸法。中心はSNSの3つと同じ軸にそろえる（親が align-items:center） */
.l-footer__utility .c-search {
	width: 9em; margin-top: 0.8em; padding: 0.1875em 0.75em 0.1875em 0.5em;
	background: var(--c-white);
}
.l-footer__utility .c-search__submit { width: 1.25em; height: 1.25em; }
/* 虫めがねは支給SVG（輪＋左下の玉）。半透明の塗りと線の二重なので
   CSSマスクでは出せず、背景画像として置いている。比率は 16.24 : 17.2。
   ⚠️ 親は button なので em の基準はUA既定の13.33px（16pxではない）→ 実寸 12.5×13.3px */
.l-footer__utility .c-search__icon {
	width: 0.9375em; height: 1em; border: 0; border-radius: 0;
	background: url("../images/search-footer.svg") center / contain no-repeat;
}
.l-footer__utility .c-search__icon::after { content: none; }

/* ページ上部へ戻るボタン。左の Share の帯と同じく画面に固定して常に出す（2026-10-09 児島指示）。
   黒い円に白の「↑」 */
.c-totop {
	position: fixed; right: min(3%, 2.5em); bottom: 1.5em; z-index: 40;
	display: grid; place-items: center; width: 3.75em; height: 3.75em;
	background: var(--c-ink); border-radius: 50%;
}
.p-cc .c-totop:hover { opacity: .75; }
.c-totop > span[aria-hidden] {
	font-family: var(--font-en); font-size: 1.5em; font-weight: 700;
	line-height: 1; color: var(--c-white);
}

/* 弧の上に並ぶカテゴリーナビ。
   SVGはヘッダーと同じく 80em で頭打ち（全幅にすると文字だけが大きくなるため）。
   1280pxより広い画面では、両脇を同じ色と線のグラデーションで延長して帯を繋ぐ。
   （弧の端は viewBox 260 のうち y=188 → 72.3%、線1pxぶんが 0.39%） */
.c-footnav {
	position: relative; margin-top: -7em;
	background: linear-gradient(to bottom,
		var(--c-footer) 0 72.3%,
		var(--c-ink-muted) 72.3% 72.69%,
		var(--c-footer-low) 72.69% 100%);
}
.c-footnav__svg { display: block; width: min(100%, 80em); height: auto; margin-inline: auto; }
/* SP用の代替リスト。PCでは出さない */
.c-footnav__list { display: none; }
.c-footnav__fill { fill: var(--c-footer-low); }
.c-footnav__line { stroke: var(--c-ink-muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.c-footnav__label {
	font-family: var(--font-jp); font-size: 17px; font-weight: 700;
	letter-spacing: 0.02em; fill: var(--c-ink);
}
/* SVGの文字は既定だと字の形の上でしか押せず、字間や濁点のすき間で空振りする。
   文字を囲む四角全体で受け止める（見た目は変わらない） */
.c-nav-arc__label,
.c-nav-arc__top,
.c-footnav__label { pointer-events: bounding-box; }
.c-footnav__svg a:hover text { opacity: .65; }

/* コピーライトは弧の内側に重ねる。こうするとフッターの下端＝弧の下端になり、
   全幅に伸ばした背景がフッターの最後まで途切れない。 */
.l-footer__copy {
	position: absolute; left: 0; right: 0; bottom: 1.5em; z-index: 1;
	text-align: center; font-size: 0.75em; color: var(--c-ink);
}

/* slick の見た目をカンプに合わせる */
.p-cc .slick-dots { display: flex; justify-content: center; gap: 1em; margin-top: 2em; padding: 0; }
.p-cc .slick-dots li { width: auto; height: auto; margin: 0; }
.p-cc .slick-dots li button { width: 0.8125em; height: 0.8125em; padding: 0; border: 0.0625em solid var(--c-ink);
	border-radius: 50%; background: transparent; text-indent: -999em; overflow: hidden; }
.p-cc .slick-dots li button::before { display: none; }
.p-cc .slick-dots li.slick-active button { background: var(--c-ink); }
/* カンプのヒーローはドットが本文のすぐ下（間隔25px）。
   .p-cc .slick-dots と同じ詳細度なので、必ずこの位置＝後ろに置くこと */
.p-cc .p-hero .slick-dots { gap: 1.55em; margin-top: 0.25em; }


/* 弧の面（::before）と中身の重なり順を明示する。
   z-index:-1 だと親が重ね合わせ文脈を作らないとき body の背景の裏に回ってしまうため、
   面を 0、中身を 1 に固定している。 */
/* 弧は画面より大きい楕円なので、はみ出す分はセクションで切る（横スクロール防止） */
.p-pickup, .p-column, .p-special { isolation: isolate; overflow: hidden; }
.p-pickup__inner, .p-column__inner, .p-special__inner { position: relative; z-index: 1; }


/* --------------------------------------------------------------------------
   スライダーが初期化される前（およびJSが失敗したとき）の保険
   --------------------------------------------------------------------------
   slick は初期化して初めて横並びになる。それまでは全スライドが縦に積まれるため、
   円形サムネイルの分だけページが極端に伸びる。初期化前は横並びにし、
   画面に入らない分は隠しておく。 */
.js-hero:not(.slick-initialized),
.js-column:not(.slick-initialized),
.js-special:not(.slick-initialized),
.js-writer:not(.slick-initialized) { display: flex; gap: 1em; overflow: hidden; }
.js-hero:not(.slick-initialized) > * { flex: 1 1 100%; }
.js-column:not(.slick-initialized) > * { flex: 1 1 25%; min-width: 0; }
.js-special:not(.slick-initialized) > * { flex: 1 1 33.333%; min-width: 0; }
.js-writer:not(.slick-initialized) > * { flex: 1 1 12.5%; min-width: 0; }
.js-hero:not(.slick-initialized) > *:nth-child(n+2),
.js-column:not(.slick-initialized) > *:nth-child(n+5),
.js-special:not(.slick-initialized) > *:nth-child(n+4),
.js-writer:not(.slick-initialized) > *:nth-child(n+9) { display: none; }

/* --------------------------------------------------------------------------
   SP（~/dev ルールによりブレークポイントはこの1点のみ）
   -------------------------------------------------------------------------- */
@media (max-width: 769px) {
	.p-cc { font-size: clamp(0px, calc(100vw / 25), 14px); }

	/* ── SPヘッダー ─────────────────────────────────────────────
	   2026-09-28 支給のSPカンプ: 上段にロゴ／SNS・検索／メニュー、その下に鉛筆、
	   さらに下に弧の上へ水平に並ぶカテゴリーナビ。
	   背が高いのでヘッダーは追従させず、メニューボタンだけ画面右上に固定する
	   （スクロールしてもメニューはいつでも開ける）。 */
	.l-header { position: relative; z-index: 60; padding-top: 0; background: var(--c-base);
		transition: background-color .3s ease; }
	.l-header__inner { position: relative; align-items: flex-start; gap: 1em; padding-block: 0.8em 0; }
	.c-brand__mark { width: 8em; }
	.c-nav-main, .l-header__utility { display: none; }

	/* PC用の弧ナビ（文字が弧に沿って傾く）は390px幅だと潰れるので、SPは .c-nav-sp に差し替える */
	.c-nav-arc { display: none; }
	.c-order-btn { display: none; }

	/* 上段: SNSと虫めがね。右側はメニューボタンのぶん空ける */
	.c-sp-tools { position: absolute; top: 1.35em; right: 4.2em;
		display: flex; align-items: center; gap: 0.8em; }
	.c-social--sp { gap: 0.8em; }
	.c-social--sp .c-social__link svg { width: 1.35em; height: 1.35em; }
	.c-sp-tools__search { display: block; width: 1.35em; height: 1.35em; padding: 0;
		border: 0; background: transparent; cursor: pointer; }
	.c-sp-tools__search img { display: block; width: 100%; height: 100%; }
	/* 虫めがねで開く検索窓。アイコン列の下に重ねて出す */
	.c-sp-search { position: absolute; top: 3.3em; right: 0; z-index: 3; width: min(100%, 16em); }
	.c-sp-search[hidden] { display: none; }
	.c-sp-search:not([hidden]) { display: block; }
	.c-sp-search .c-search { width: 100%; padding-block: 0.45em; }
	.c-sp-search .c-search__input { font-size: 1em; }
	/* お仕事のご依頼（鉛筆）: 右端にそろえてアイコン列の下 */
	.c-order-btn--sp { display: block; position: absolute; top: 4.9em; right: 0; width: 5.75em; margin: 0; }

	/* 開いている間はロゴとボタン以外を消し、その下をドロワーが滑り込む */
	.c-sp-tools, .c-sp-search, .c-order-btn--sp, .c-nav-sp { transition: opacity .25s ease, visibility .25s; }
	html.is-drawer-open .l-header { background: transparent; }
	html.is-drawer-open :is(.c-sp-tools, .c-sp-search, .c-order-btn--sp, .c-nav-sp) { opacity: 0; visibility: hidden; }

	/* ── SPのカテゴリーナビ ────────────────────────────────────
	   文字は水平のまま、弧（.c-nav-sp__arc）の上に並べる。
	   弧は SVG の2次ベジェ（端が y56・頂点が y3／100）を高さ1.6emに縦伸縮したもの。
	   項目ごとに「その位置での弧の高さ＋0.6em」だけ持ち上げて、文字の下端を弧に沿わせる
	   （x位置はカンプの配置: 左から約14/27/49/65/78/90%）。 */
	/* 上の余白は滞在中の半円の頂点がナビの上端で切れないため（overflow:hidden で切っている） */
	.c-nav-sp { display: block; position: relative; isolation: isolate; overflow: hidden;
		padding-top: 1.1em; --cc-arc-below: var(--c-glow); }
	/* 右端の「今日もコレカラ」に半円が付いても画面の右で切れないよう、右も少し空ける */
	.c-nav-sp__list { display: flex; justify-content: space-between; align-items: flex-end;
		padding: 0 5% 0 5.5%; }
	.c-nav-sp__item { position: relative; text-align: center; }
	.c-nav-sp__item:nth-child(1) { margin-bottom: 1.7em; }
	.c-nav-sp__item:nth-child(2) { margin-bottom: 1.97em; }
	.c-nav-sp__item:nth-child(3) { margin-bottom: 2.15em; }
	.c-nav-sp__item:nth-child(4) { margin-bottom: 2.07em; }
	.c-nav-sp__item:nth-child(5) { margin-bottom: 1.89em; }
	.c-nav-sp__item:nth-child(6) { margin-bottom: 1.61em; }
	.c-nav-sp__item > a { display: block; font-size: 0.8125em; font-weight: 700; line-height: 1.25;
		letter-spacing: 0.04em; white-space: nowrap; }
	/* 滞在中の項目: 弧の上に半円を出す。
	   直径（--cc-dome）は nav.js が文字の幅と高さから計算する（2行の項目も文字が円に収まるように）。
	   弧は曲がっているので下端を弧より0.3em下まで伸ばし、はみ出しは弧の塗り（z-index 上）で隠す。
	   丸ごとの円にすると下半分の線が塗りの外（ナビの下端）で見切れて出るので、上半分だけ描く */
	.c-nav-sp__item.is-current::before {
		content: ""; position: absolute; left: 50%; bottom: -0.9em; z-index: -1;
		width: var(--cc-dome, 4.5em); height: calc(var(--cc-dome, 4.5em) / 2 + 0.3em);
		transform: translateX(-50%);
		/* 中は「縁ほど明るく、中心は地色」の内側に光る塗り（2026-10-08 児島支給の見本を実測）。
		   円の中心は弧の上（下端から0.3em上）、半径は直径の半分 */
		background: radial-gradient(calc(var(--cc-dome, 4.5em) / 2) at 50% calc(100% - 0.3em),
			var(--c-base) 45%, var(--c-glow) 100%);
		border: 0.0625em solid var(--c-ink); border-bottom: 0;
		border-radius: calc(var(--cc-dome, 4.5em) / 2) calc(var(--cc-dome, 4.5em) / 2) 0 0;
	}
	/* 下端を1pxぶんはみ出させ、ナビの下端に塗り残しの細い帯が出ないようにする（はみ出しは overflow で切れる） */
	.c-nav-sp__arc { position: absolute; left: 0; bottom: -0.0625em; width: 100%; height: 1.6625em; }
	.c-nav-sp__fill { fill: var(--cc-arc-below); }
	.c-nav-sp__line { stroke: var(--c-line-arc); stroke-width: 1; }

	/* ハンバーガー: 輪郭だけの円に2本線（下の線は少し右へずらす）。画面右上に固定 */
	.c-menu-toggle {
		display: block; position: fixed; top: 0.95em; right: 4%; z-index: 70;
		width: 3.2em; height: 3.2em; padding: 0;
		border: 0.0625em solid var(--c-ink); border-radius: 50%; background: var(--c-base); cursor: pointer;
	}
	.c-menu-toggle__bar { position: absolute; left: 50%; top: 50%; display: block; width: 1.45em; height: 0;
		transform: translate(-50%, -50%); }
	.c-menu-toggle__bar::before,
	.c-menu-toggle__bar::after { content: ""; position: absolute; left: 0; width: 100%; height: 0.1em;
		background: var(--c-ink); }
	.c-menu-toggle__bar::before { top: -0.4em; left: -0.1em; }
	.c-menu-toggle__bar::after  { top: 0.35em; left: 0.1em; }
	/* 開いている間は同じボタンが × に変わる（別の閉じるボタンに差し替えない） */
	.c-menu-toggle__bar::before,
	.c-menu-toggle__bar::after { transition: top .25s ease, left .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1); }
	.c-menu-toggle[aria-expanded="true"] .c-menu-toggle__bar::before { top: 0; left: 0; transform: rotate(45deg); }
	.c-menu-toggle[aria-expanded="true"] .c-menu-toggle__bar::after  { top: 0; left: 0; transform: rotate(-45deg); }
	@media (prefers-reduced-motion: reduce) {
		.c-menu-toggle__bar::before, .c-menu-toggle__bar::after,
		.c-sp-tools, .c-sp-search, .c-order-btn--sp, .c-nav-sp { transition: none; }
	}

	/* ドロワーを開いている間は背面を固定する。
	   body にも overflow:hidden を当てると body がスクロールの箱になり、sticky のヘッダーが
	   ページ上端の本来の位置へ飛んでいってしまう（スクロール後に開くとロゴとボタンが消える）。
	   html だけに当てればビューポートのスクロールが止まり、ヘッダーはその場に残る */
	html.is-drawer-open { overflow: hidden; }

	/* ── ドロワー ────────────────────────────────────────────── */
	.c-drawer {
		display: block; position: fixed; inset: 0; z-index: 50;
		overflow-y: auto; -webkit-overflow-scrolling: touch;
		/* 上はロゴの下端まで空ける（上の余白0.8em＋ロゴ 8em×719/1001） */
		padding: 7.2em min(6%, 2em) 3em; background: var(--c-surface);
	}
	/* hidden のときは必ず消す（これが無いと閉じていてもタップを奪う） */
	.c-drawer[hidden] { display: none; }
	/* 上からスライドして降りてくる（児島指示）。終わりぎわにゆっくり止まるイージングで「ぬるっと」させる。
	   中身は幕より少し遅れて浮かび上がる。開閉のクラス付け外しは nav.js */
	.c-drawer { transform: translateY(-100%); transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
	.c-drawer.is-open { transform: none; }
	.c-drawer > * { opacity: 0; transform: translateY(-0.75em);
		transition: opacity .35s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
	.c-drawer.is-open > * { opacity: 1; transform: none; transition-delay: .2s; }
	@media (prefers-reduced-motion: reduce) {
		.c-drawer, .c-drawer > * { transition: none; }
	}
	.c-drawer__list { margin-top: 1em; }
	/* 指で押しやすい高さを確保し、項目の区切りに細い線を入れる */
	.c-drawer__list > li { border-bottom: 0.0625em solid var(--c-line); }
	.c-drawer__list > li > a { display: flex; align-items: center; min-height: 3.5em;
		font-size: 1.125em; font-weight: 700; }
	.c-drawer__list > li.is-current > a { color: var(--c-ink-muted); }
	.c-drawer__list > li > a::after { content: ""; width: 0.45em; height: 0.45em; margin-left: auto;
		border-top: 0.125em solid var(--c-ink); border-right: 0.125em solid var(--c-ink);
		transform: rotate(45deg); }

	.c-drawer__nav--cat { margin-top: 2em; }
	.c-drawer__title { font-family: var(--font-en); font-size: 0.75em; font-weight: 700;
		letter-spacing: 0.08em; color: var(--c-ink-muted); }
	.c-drawer__cats { display: flex; flex-wrap: wrap; gap: 0.6em; margin-top: 0.8em; }
	.c-drawer__cats > li > a { display: block; padding: 0.55em 1.1em; font-size: 0.875em; font-weight: 700;
		background: var(--c-base); border-radius: 999em; }
	.c-drawer__cats > li.is-current > a { background: var(--c-ink); color: var(--c-base); }

	.c-drawer__foot { display: flex; flex-direction: column; align-items: center; gap: 1.5em;
		margin-top: 2.5em; }
	.c-order-btn--drawer { position: static; display: block; width: 11em; margin: 0; }
	.c-order-btn--drawer img { display: block; width: 100%; height: auto; }
	.c-drawer__foot .c-search { width: 100%; max-width: 20em; padding-block: 0.5em; }
	.c-social--drawer { gap: 1.5em; }
	.c-social--drawer .c-social__link svg { width: 1.5em; height: 1.5em; }

	.p-hero { padding: 2em 0 3em; }
	/* Shareの帯はSPでも出す（2026-10-06 児島指示・SPカンプ）。画面が狭いので少し小さめに */
	.p-hero__share { font-size: 0.7em; }
	/* グリッドは .p-hero__inner にある。.p-hero__slide を指定しても効かない
	   （スライド構造を変えたときの直し忘れで、SPだけ2カラムのまま崩れていた） */
	.p-hero__inner { grid-template-columns: 1fr; gap: 1.5em; padding-inline: 1.25em; }
	/* SPカンプどおり画面幅の約8割 */
	.c-circle--hero { width: 22em; height: 22em; padding: 0.7em; }
	/* SPは円の左右の画面端寄りに、円の中心の高さ（円の半分 11em）で置く。カンプどおり円の縁に少し重なる */
	.c-hero-arrow { top: 11em; width: 2.6em; height: 2.6em; }
	.c-hero-arrow svg { width: 1.6em; }
	/* 左端には Share の帯（幅約2.2em）が来るので、その右に置く。右も左右対称に同じだけ空ける */
	.c-hero-arrow--prev { left: 2.7em; }
	.c-hero-arrow--next { right: 2.7em; }
	.p-hero__title-main { font-size: 1.25em; }
	.p-hero__title-sub { padding-left: 0; font-size: 0.9375em; }
	.p-hero__lead { padding: 1em 1.1em; font-size: 0.875em; line-height: 1.9; }
	.p-hero .c-tags > li { font-size: 0.875em; }
	.p-hero__word { font-size: 0.6875em; }

	/* SPで16枠を重ねると小さすぎて読めないので絶対配置をやめる。
	   ただしグリッドで2列に並べると整列しすぎてPCの散らばった印象と変わるうえ、
	   小さい枠も1マス分の高さを占めて大きな余白ができる。
	   段組（column）にすると各枠が自分の高さぶんだけ詰まるので、上下が自然にばらつく。
	   大きさと左右位置は --sp-*（PHPがカンプの座標から算出）で振る。 */
	.p-pickup__field { position: static; aspect-ratio: auto; display: block;
		column-count: 2; column-gap: 0.75em; }
	.p-pickup__item {
		position: static; left: auto; top: auto;
		/* 余った幅の中だけで左右に動かすので、段からはみ出さない */
		width: calc(var(--sp-scale, 1) * 100%);
		margin-left: calc((100% - var(--sp-scale, 1) * 100%) * var(--sp-pos, 0.5));
		margin-block: var(--sp-gap, 0.6em);
		break-inside: avoid;
	}
	/* home.js が円を詰めて配置したら段組をやめ、JSの座標で置く（JSが無いときは段組のまま） */
	.p-pickup__field.is-packed { position: relative; column-count: auto; }
	.p-pickup__field.is-packed .p-pickup__item { position: absolute; margin: 0; }

	.p-column__layout { padding-left: 0; }
	/* 「一覧」への弧リンクはSPでは中央に置く（右端だと画面外に寄りすぎる） */
	.p-column .c-more, .p-special .c-more, .p-writer__more { margin-inline: auto; text-align: center; }
	.p-writer__more { margin-top: 2.5em; }
	/* 書き手カードはSPだとカード1枚が画面の4割近くを占めるので、約70%に縮める（児島指示）。
	   カードの寸法はすべて em なので、レールの基準サイズを変えるだけで全体が同じ比率で縮む */
	.p-writer__rail { font-size: 0.6875em; }
	/* 「書き手の一覧はこちら」も小さめに（児島指示）。鉛筆もピルに対する比率のまま縮む */
	.p-writer__more .c-pencil-btn { font-size: 1em; }
	.p-special__slider { padding-left: 0; }
	.p-column > .p-column__inner > .c-heading,
	.p-special > .p-special__inner > .c-heading { padding-left: 0; }
	/* SPでは重ねずに、連載コラム（記事一覧）の前に通常の流れで置く。
	   縦に並べると数件しか見えないうえ場所を取るので、ピル型のタグを2段にして横へ流す。
	   右端は角丸の枠で切れるので、続きがあることが見て分かる。
	   グリッドで2段にすると列ごとに幅がそろって短いタグの横が空くため、
	   PHPが見積もった1段ぶんの幅（--tag-row）の中で折り返させて各段を詰めている。 */
	.c-tagpanel { position: static; width: auto; max-height: none; margin: 0 1em 2em 0;
		padding: 1em 0 1.1em 1.25em; border-radius: 0 1.25em 1.25em 0; overflow: hidden; }
	.c-tagpanel__title { font-size: 1em; letter-spacing: 0.04em; }
	.c-tagpanel__scroll { display: block; margin-top: 0.6em; overflow-x: auto; scrollbar-width: none; }
	.c-tagpanel__scroll::-webkit-scrollbar { display: none; }
	.c-tagpanel__list { box-sizing: content-box; width: var(--tag-row, 40em); margin: 0;
		padding: 0 1.25em 0.1em 0; display: flex; flex-wrap: wrap; gap: 0.5em;
		overflow: visible; font-size: 0.8125em; }
	.c-tagpanel__list a { padding: 0.35em 0.9em; border-color: var(--c-ink-muted); background: var(--c-white); }

	.c-heading--en { font-size: 1.875em; }
	.c-heading__jp { font-size: 1.5em; }

	/* フッターはSPだと3カラムが入らないので縦に積む */
	.l-footer { padding-bottom: 0; }
	.l-footer__inner { grid-template-columns: 1fr; gap: 1.75em; padding-bottom: 2em; text-align: center; }
	.l-footer__brand { display: flex; justify-content: center; }
	.c-nav-foot { justify-content: center; gap: 0.75em 1.5em; padding-right: 0; }
	.l-footer__utility { align-items: center; }

	/* 弧のSVGは幅390pxだと文字が潰れて重なるので、SPでは普通のリストに置き換える */
	.c-footnav { margin-top: 0; padding: 1.5em 0 1.25em;
		background: var(--c-footer-low); border-top: 0.0625em solid var(--c-ink-muted); }
	.c-footnav__svg { display: none; }
	.c-footnav__list { display: flex; flex-wrap: wrap; justify-content: center;
		gap: 0.75em 1.25em; width: min(92%, 40em); margin-inline: auto;
		font-size: 0.875em; font-weight: 700; }
	.l-footer__copy { position: static; padding: 0 0 1.5em; text-align: center;
		background: var(--c-footer-low); }
}

/* 管理画面から登録した画像は、円や角丸が画像自体に含まれている。
   こちらで切り抜くと端が欠け、地色を敷くと透過部分にその色が出る。 */
.c-circle--flat { background: none; border-radius: 0; overflow: visible; }
.c-circle--flat .c-circle__img { object-fit: contain; }
.c-card__figure--flat { background: none; border-radius: 0; overflow: visible; aspect-ratio: auto; }
.c-card__figure--flat img { width: 100%; height: auto; object-fit: contain; }

/* ==========================================================================
   SPトップ（2026-10-08 支給の SPカンプ「CORECOLOR_0826_mobile.pdf」）
   ========================================================================== */
/* PCでは出さない部品 */
.p-marquee--sp-only { display: none; }

@media (max-width: 769px) {
	/* ── 流れるタグ帯: 1段だけ、上下が波線の明るい帯に文字を流す ───────── */
	.p-marquee--sp-only { display: block; }
	/* .p-cc.home .p-marquee（PC用の地色指定）より強くするため .p-cc.home も付ける */
	.p-cc .p-marquee, .p-cc.home .p-marquee { position: relative; margin: 3em 0; padding: 0.4em 0; background: #F1F2ED; overflow: visible; }
	.p-cc .p-marquee { padding: 0.65em 0; }
	/* 上下は直線の罫線（2026-10-08 児島指示で波線から変更） */
	.p-cc .p-marquee { border-top: 0.0625em solid var(--c-ink); border-bottom: 0.0625em solid var(--c-ink); }
	.p-marquee__row--1 { display: none; }
	.p-marquee .c-pill { padding: 0.3em 0.35em; border: 0; background: none; font-size: 1.0625em; font-weight: 500; }
	.p-marquee__list { gap: 0.6em; padding-right: 0.6em; }

	/* ── TAGS: トップは特集の後ろ、記事一覧は記事とページ送りの後ろに、2列の一覧として全幅で出す（SPカンプ p1・p3） ─────────────── */
	.p-cc:is(.home, .p-archive-page) .l-tagrail { display: flex; flex-direction: column; }
	.p-cc:is(.home, .p-archive-page) .l-tagrail > .c-tagpanel {
		order: 3; margin: 1em 4% 0; padding: 1.75em 1.5em 2em;
		border: 0.0625em solid var(--c-ink-muted); border-radius: 0.75em;
	}
	.p-cc:is(.home, .p-archive-page) .c-tagpanel__title .c-title-img { width: 7em; }
	.p-cc:is(.home, .p-archive-page) .c-tagpanel__scroll { margin-top: 1.4em; overflow: visible; }
	.p-cc:is(.home, .p-archive-page) .c-tagpanel__list {
		width: auto; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.3em 0.8em;
		font-size: 0.9375em;
	}
	.p-cc:is(.home, .p-archive-page) .c-tagpanel__list a { padding: 0.3em 0.7em; border-color: transparent; background: none; }
	.p-cc:is(.home, .p-archive-page) .c-tagpanel__list a:hover,
	.p-cc:is(.home, .p-archive-page) .c-tagpanel__list a:focus-visible { border-color: var(--c-ink); background: var(--c-white); }

	/* ── フッター: 左にロゴ、右に TOP と「お仕事のご依頼」→ 弧のカテゴリー → SNS と検索 ── */
	.l-footer { display: grid; grid-template-columns: 1fr auto; padding: 2em 4% 0; column-gap: 1em;
		grid-template-areas: "brand order" "nav nav" "sns search" "copy copy"; }
	.l-footer__inner, .l-footer__utility { display: contents; }
	.l-footer__brand { grid-area: brand; display: block; }
	.l-footer__brand .c-brand__mark { width: 8.5em; }
	.l-footer__nav, .c-footnav { display: none; }
	.c-footer-order { grid-area: order; align-self: end; justify-self: end; width: auto; margin-bottom: 0.4em; padding: 0 0.2em 0.35em; font-size: 1em; }
	.c-totop { right: 4%; bottom: 1em; width: 3.4em; height: 3.4em; }
	/* 右下に常にある「↑」が検索窓やコピーライトに重ならないよう、ページの最後に余白を取る */
	.l-footer__copy { padding-bottom: 4.5em; }
	.c-nav-sp--foot { grid-area: nav; display: block; margin: 1.5em -4.35% 0; padding-top: 1.1em;
		--cc-arc-below: var(--c-footer-low); }
	.c-nav-sp--foot .c-nav-sp__line { stroke: var(--c-ink-muted); }
	.c-social--footer { grid-area: sns; align-self: center; gap: 1.1em; }
	.c-social--footer .c-social__link svg { width: 1.75em; height: 1.75em; }
	.l-footer__utility .c-search { grid-area: search; align-self: center; width: 13em; margin: 1.4em 0; }
	.l-footer__copy { grid-area: copy; margin: 0 -4.35%; }
	/* SNSと検索、コピーライトの行は弧の内側の色 */
	.l-footer::after { content: ""; grid-row: 3 / 5; grid-column: 1 / -1; margin: 0 -4.35%;
		background: var(--c-footer-low); z-index: -1; }
	.l-footer { isolation: isolate; }
}

/* ==========================================================================
   SPの背景の円弧とグラデーション（2026-10-08 児島支給「CORECOLOR_0826_mobile.pdf」を実測）
   ==========================================================================
   375px幅で、各円弧は中央と両端の落差が約12px。
   円弧の下は #F1F2EE が約100px続き、そこから約290px下で地色 #E6E7DF になる。
   （PCの値 14em / 39em をそのまま使うとSPでは約200px / 550px になり、
     グラデーションが画面の外まで伸びて「無い」ように見えていた） */
@media (max-width: 769px) {
	.p-cc { --g-glow: linear-gradient(to bottom, var(--c-glow) 0, var(--c-glow) 7em, var(--c-base) 20.5em); }
	/* 楕円は画面の1.6倍幅。縦半径4emで両端の落差がほぼ12px（PCの13emのままだと約40px落ちていた） */
	.p-column::before,
	.p-special::before { border-radius: 50% 50% 0 0 / 4em 4em 0 0; }
}