/*
Theme Name: LUCANOR 2026 WEBLOG
Theme URI: https://lucanor.jp/weblog/
Author: Neold Inc.
Author URI: https://www.neold.jp/
Description: LUCANOR 2026 テーマ（編集部ブログ）。デザインの実体は /assets/common.css を共有しています。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
License: Proprietary
Text Domain: lucanor2026_weblog
*/
/*
このファイルにスタイルは書きません。
見た目は静的サイトと同じ /assets/common.css を読み込んで共有しています
（functions.php の wp_enqueue_scripts を参照）。
テーマ側にCSSを複製すると、静的ページとWPページで見た目がずれるためです。
WPだけに必要な微調整が出た場合に限り、ここへ追記してください。
その場合も functions.php で common.css の後に読み込まれるので、上書きが効きます。
*/
/* ---------------------------------------------------------------
本文中のリンクボタン（.more）
記事本文には昔から `…
` という書き方で、
ルカノールストアーや公式サイトへのリンクが置かれている。
トピックス2記事・編集部ブログ34記事、合わせて88か所。
ここに何のスタイルも当たっておらず、素のテキストリンクのままだった。
テーマが出す「詳しくはこちら」（lucanor_more_link）も同じ `.more` なので、
ひとつの指定で両方に効く。
静的ページ側の `.read .more` は `` を使う別の作りなので、
ここでは `.art` の中だけに絞って、そちらには影響させない。
------------------------------------------------------------- */
.art .more {
margin: clamp(22px, 3vw, 32px) 0;
}
/* 連続して並ぶとき（1記事に22個ある例がある）は間を詰める */
.art .more + .more {
margin-top: 8px;
}
.art .more a {
display: inline-flex;
align-items: center;
gap: 11px;
max-width: 100%;
min-height: 46px;
padding: 10px 20px;
border: 1px solid var(--hair);
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-weight: var(--sansw);
font-size: 13px;
letter-spacing: .06em;
line-height: 1.7;
transition: .35s var(--ease);
}
.art .more a:hover {
border-color: var(--brass);
color: var(--brass);
}
/* ---------------------------------------------------------------
アイコン
本文には Font Awesome のタグ（）が
82か所入っているが、**2026サイトは Font Awesome を読み込んでいない**。
そのため今は幅0の空要素になり、何も出ていない。
ライブラリを1本増やすためだけに70KB読ませるのは割に合わないので、
使われている4種類だけをCSSのマスク画像として持つ。
色は currentColor なので、ホバーで文字と一緒に真鍮色へ変わる。
内訳：shopping-cart 53 / arrow-right 24 / external-link 4 / pencil 1
------------------------------------------------------------- */
.art .more .fa {
flex: none;
width: 15px;
height: 15px;
background: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.art .more .fa-shopping-cart {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='20' r='1.3'/%3E%3Ccircle cx='18' cy='20' r='1.3'/%3E%3Cpath d='M2 3h2.6l2.6 12.4h11.3L21.4 7.4H6.1'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='20' r='1.3'/%3E%3Ccircle cx='18' cy='20' r='1.3'/%3E%3Cpath d='M2 3h2.6l2.6 12.4h11.3L21.4 7.4H6.1'/%3E%3C/svg%3E");
}
.art .more .fa-arrow-right {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.art .more .fa-external-link {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 4 19V8a1.5 1.5 0 0 1 1.5-1.5H10'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 4 19V8a1.5 1.5 0 0 1 1.5-1.5H10'/%3E%3C/svg%3E");
}
.art .more .fa-pencil {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1-4L16.5 4.5a2 2 0 0 1 3 3L8 19l-4 1z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1-4L16.5 4.5a2 2 0 0 1 3 3L8 19l-4 1z'/%3E%3C/svg%3E");
}
/* アイコンの無いリンク（テーマが出す「詳しくはこちら」など）にも
同じ矢印を添えて、ボタンとしての見え方を揃える */
.art .more a:not(:has(.fa))::before {
content: "";
flex: none;
width: 15px;
height: 15px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* ---------------------------------------------------------------
記事本文の小見出し（トピックス／編集部ブログ）
共通CSSでは .art h2 だけがしっかり作り込まれていて（上罫線＋真鍮色の連番）、
.art h3 は文字サイズの指定のみ、.art h4 にいたっては未定義だった。
そのため記事内の階層が見た目で伝わらない。
h2 が「章」、h3 が「節」、h4 が「項」と分かるよう、
既存の意匠（ヘアライン・真鍮色・回転した小さな四角）の語彙で段差を付ける。
`.lc-topics` `.lc-weblog` は body_class フィルタで付けている独自クラス。
お問い合わせや特集（lc-index）には影響しない。
------------------------------------------------------------- */
/* h3 … 左に真鍮色の縦罫 */
.lc-topics .art h3,
.lc-weblog .art h3 {
position: relative;
margin: clamp(30px, 3.8vw, 46px) 0 14px;
padding-left: 15px;
font-family: var(--min);
font-weight: 500;
font-size: clamp(1.04rem, 1.5vw, 1.24rem);
line-height: 1.8;
letter-spacing: .07em;
color: var(--ink);
}
.lc-topics .art h3::before,
.lc-weblog .art h3::before {
content: "";
position: absolute;
left: 0;
top: .42em;
bottom: .42em;
width: 2px;
background: var(--brass);
}
/* h4 … 真鍮色の小さな菱形＋サンセリフ。h3より一段軽く */
.lc-topics .art h4,
.lc-weblog .art h4 {
margin: clamp(22px, 2.8vw, 32px) 0 10px;
font-family: var(--sans);
font-weight: 600;
font-size: 13px;
letter-spacing: .13em;
line-height: 1.95;
color: var(--ink-2);
}
.lc-topics .art h4::before,
.lc-weblog .art h4::before {
content: "";
display: inline-block;
width: 5px;
height: 5px;
margin-right: 9px;
background: var(--brass);
transform: rotate(45deg);
vertical-align: middle;
}
/* h5 … これ以上は深くしない前提の、控えめな指定 */
.lc-topics .art h5,
.lc-weblog .art h5 {
margin: clamp(18px, 2.2vw, 26px) 0 8px;
font-family: var(--sans);
font-weight: 600;
font-size: 11.5px;
letter-spacing: .16em;
line-height: 1.9;
color: var(--ink-3);
}
/* 見出しの直後の段落は、上の余白を詰めて見出しと一体に見せる */
.lc-topics .art h3 + p,
.lc-weblog .art h3 + p,
.lc-topics .art h4 + p,
.lc-weblog .art h4 + p { margin-top: 0; }
/* ---------------------------------------------------------------
目次が無い記事は、本文を全幅で使う
共通CSSの .artwrap は「本文＋右の目次」の2カラム固定。
ニュース記事のように見出し（h2）が無い投稿では目次を作れないため、
右の240pxが空いたまま本文だけが窮屈になる。
目次を出さないときはテーマ側で .no-toc を付け、1カラムに戻す。
------------------------------------------------------------- */
.artwrap.no-toc { grid-template-columns: minmax(0, 1fr); }
/* ---------------------------------------------------------------
特集ページ（/special/nudie-jeans/ /special/saxx/）
この2ページは静的HTMLを持たず、WordPressの固定ページとしてだけ存在する。
本文は _src/wp-pages/special-*.html にあり、全体を .sp-feature で包んでいる。
共通CSSのモジュールでほぼ組めているが、次の3点だけ足りないので補う。
スコープを .sp-feature に絞っているので、他のページには影響しない。
------------------------------------------------------------- */
/* 1. h3 に添える欧文・補足ラベル。
.art h2 .en は共通CSSで定義済みだが、h3 用は無いので同じ調子で作る。
中身が日本語のこともあるので、.en の大文字化は打ち消す。 */
.sp-feature .art h3 .en,
.art .sp-feature h3 .en {
display: block;
margin-top: 3px;
font-family: var(--en);
font-weight: var(--enw);
font-size: 11.5px;
letter-spacing: .16em;
text-transform: none;
color: var(--ink-3);
}
/* 2. コレクション一覧の素材表記とカテゴリー名。
定義リストの項目名（dt）にカテゴリー、説明（dd）の先頭に混率を置いている。
本文と同じ級数だと読みづらいので、仕様の行として一段落とす。 */
.sp-feature .mod-defs dd .mtl {
display: block;
margin-bottom: 5px;
font-family: var(--sans);
font-weight: var(--sansw);
font-size: 11px;
letter-spacing: .1em;
line-height: 1.9;
color: var(--ink-3);
}
.sp-feature .mod-defs dt .cat {
display: block;
margin-top: 2px;
font-family: var(--en);
font-weight: var(--enw);
font-size: 10.5px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--brass);
}
/* 3. 画像の縦横比。
共通CSSは .mod-term .im を 16/9、.art .fig を 16/9 に固定して
object-fit:cover で切り抜く。写真ならそれでよいが、
このページの図版は 680×627（比 1.08）や 332×449（縦長）で、
切り抜くと図の意味が失われる。元の比率のまま出す。 */
.sp-feature .mod-term .im {
aspect-ratio: auto;
background: none;
}
.sp-feature .mod-term .im img {
width: 100%;
height: auto;
object-fit: contain;
}
/* Fair Wear Foundation の労働規範カード（縦長・332×449） */
.sp-feature .fig.fwf {
display: block;
aspect-ratio: auto;
max-width: 220px;
margin: 0 0 14px;
}
.sp-feature .fig.fwf img {
width: 100%;
height: auto;
object-fit: contain;
}
/* SDGsのアイコン。どの目標の話かを見出しの横に置く */
.sp-feature .mod-defs dt .sdg {
width: 34px;
height: 34px;
margin: 0 6px 4px 0;
vertical-align: middle;
}
/* ---------------------------------------------------------------
一覧ページのカテゴリー絞り込み
共通CSS（common.css）は静的モックに合わせて `.lst-chips button` を
対象にしている。一方WP側は、ページ送りと併用できるよう
カテゴリーアーカイブへの実リンク（）で出しているため、
そのままではスタイルがまったく当たらない。ここで同じ見た目に揃える。
選択中の印は、ボタンの aria-pressed ではなくリンクの aria-current を使う。
------------------------------------------------------------- */
.lst-chips a {
min-height: 34px;
display: inline-flex;
align-items: center;
padding: 0 14px;
border: 1px solid var(--hair);
background: var(--paper);
color: var(--ink-2);
font-family: var(--sans);
font-weight: var(--sansw);
font-size: 12px;
letter-spacing: .08em;
white-space: nowrap;
transition: .35s var(--ease);
}
.lst-chips a:hover { border-color: var(--ink-3); }
.lst-chips a[aria-current="page"] {
background: var(--ink);
border-color: var(--ink);
color: var(--bone);
}
/* ---------------------------------------------------------------
Contact Form 7 対応
CF7は各入力を で包むため、
静的モックの想定（label と input が直接並ぶ）とズレる箇所が出る。
ここではその差だけを埋めている。
（.wpcf7-* はトピックス／編集部ブログには現れないので、共通で持っていて害はない）
------------------------------------------------------------- */
/* グリッド／フレックスの子として正しく振る舞わせる */
.cform .wpcf7-form-control-wrap { display: block; }
/* 画像認証の行：ラッパーがフレックスアイテムになるので、伸縮指定を移す */
.cap-row .wpcf7-form-control-wrap { flex: 1 1 180px; display: block; }
.cap-row .wpcf7-form-control-wrap input { width: 100%; }
.cap-row img.wpcf7-captchac { display: block; border: 1px solid var(--hair); }
/* 入力欄ごとのエラー表示 */
.wpcf7-not-valid-tip {
display: block;
margin-top: 6px;
font-size: 13px;
line-height: 1.7;
color: #b3261e;
}
.cform input.wpcf7-not-valid,
.cform textarea.wpcf7-not-valid { border-color: #b3261e; }
/* 送信後のメッセージ */
.wpcf7-response-output {
margin: 18px 0 0;
padding: 14px 16px;
border: 1px solid var(--hair);
font-size: 14px;
line-height: 1.9;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output { border-color: #b3261e; }
.wpcf7 form.sent .wpcf7-response-output { border-color: currentColor; }
/* 送信中のスピナー位置 */
.wpcf7-spinner { vertical-align: middle; margin-left: 10px; }
/* 「任意」の目印。必須の .req-mark（common.css）と対になるもの */
.any-mark {
font-family: var(--sans);
font-size: 10.5px;
letter-spacing: .1em;
color: var(--ink-3);
}
/* 送信完了メッセージ
現行フォームの .complete-display を引き継いでいる。
送信が成功したときだけ表示し、入れ替わりにフォーム本体を隠す。
送信してもページは遷移しないので、「送れたのかどうか」が伝わるように
枠で囲んだパネルにしている。位置までのスクロールは theme.js が行う。 */
.complete-display { display: none; }
.wpcf7 form.sent .complete-display { display: block; }
.wpcf7 form.sent .cform-inner { display: none; }
.complete-display {
border: 1px solid var(--hair);
background: var(--paper);
padding: clamp(26px, 4vw, 44px) clamp(20px, 3.4vw, 40px);
outline: none;
}
/* 先頭に丸いチェックを出して、ひと目で「送れた」と分かるようにする */
.complete-display::before {
content: "✓";
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin: 0 0 20px;
border: 1px solid var(--brass);
border-radius: 50%;
color: var(--brass);
font-size: 17px;
line-height: 1;
}
.complete-display p {
margin: 0 0 1em;
font-size: 15px;
line-height: 2.1;
}
/* 1文目だけ大きくして、結論が先に目に入るようにする */
.complete-display p:first-of-type {
font-size: clamp(17px, 2.2vw, 21px);
line-height: 1.95;
color: var(--ink);
margin-bottom: 1.2em;
}
.complete-display p:last-child { margin-bottom: 0; }