/** * craftcos-archive.css ── CRAFT・COS カテゴリページ（タブUI）専用CSS * Version: 20261013_v24（指示書BN BN-8: スマホの一覧の商品を一回り大きく） * 【v24 変更点（20261013・指示書BN BN-8）】@media (max-width:640px) の .cc-arch-grid の1行だけ（gap 7px → 10px 6px・padding 12px 11px 0 → 12px 2px 0）。 * .cc-archive の padding（16px 4px 40px）は今のまま（タブや見出しの位置は動かない）。名前・値段の文字の大きさの決まりは今のまま。 * PC（641px 以上）は1バイトも変えていない。カテゴリ・タグ・検索の結果はこのファイルなので一緒に変わる。 * (旧)Version: 20261011_v23（司令塔パッチ: 360px 以下の大タブの左右を 9px に＝360 でも5つが横に入りきる） * 【v23 変更点（20261011・司令塔パッチ）】@media (max-width:360px) のブロックを1つ足しただけ（.cc-arch-tab の padding 10px 9px 11px）。 * 司令塔の箱（Chromium・日本語フォント）では v22 の 360px で 5px だけ横に動いていたため。390・375 は v22 のまま。ほかは1バイトも変えていない。 * (旧)Version: 20261011_v22（指示書BM BM-1: ♡ を絵（SVG）に／BM-3: スマホの大タブの下のはしの色の段・5つが横に入りきらない） * 【v22 変更点（20261011・指示書BM）】★v22 の印の所だけ。PC（641px 以上）の見た目は ♡ の絵のほか変えていない。 * BM-1: 一覧の ♡（.cc-arch-card-wrap .cc-fav-btn--loop .cc-fav-btn__ic）の font-size → 絵の大きさ --cc-hs（PC 21px／640px 以下 14px・今と同じ数）。 * ボタンの丸（40／26px）・位置（写真の右下）・影は変えていない。検索の結果（craftcos-search.php）も同じクラスなので一緒に変わる。 * BM-3: @media (max-width:640px) の中だけ: * ・.cc-arch-tab.is-active の background を linear-gradient(180deg, var(--tabc2), var(--tabc))（上が薄く・下が帯と同じ色）。PC は今の 135deg のまま。 * ・@media (max-width:400px) の .cc-arch-tab の padding 10px 13px 11px → 10px 11px 11px・.cc-arch-tabs の gap 6px → 4px（390・375・360 で横に動かない）。 * ・v19 の影の余白（padding:14px 4px 3px; margin:-14px -4px -3px）・is-active の padding-bottom 15px・margin-bottom（スマホ -3px）・z-index はそのまま。 * (旧)Version: 20261010_v21（指示書BH BH-3: 枠なし・右上の帯・♡ を写真の右下へ） * 【v21 変更点（20261010・指示書BH）】★ファイルの末尾に「★v21」のブロックを足しただけ（既存の行は1バイトも変えていません。上書きは後ろの規則で）。 * ・枠なし: .cc-arch-card の白・線・影・角丸をやめ、写真（.cc-arch-card-img）の角だけ丸く（PC 16px／640px 以下 12px）。 * ・帯: .cc-card-band（inc/craftcos-card-swatches.php v4 の cc_card_band_html が出す）。写真の右上の角に 45° の帯。ピンク＝数量割引・金色＝同色まとめ割。 * ・♡: 写真の右下（cqw が使えるブラウザだけ。使えないブラウザは今までどおり右上）。 * ・★パーツの線（::after）は四隅とも角丸に。--cc-cardfs の式・列・gap・SALE の札は変えていない。 * (旧)Version: 20261001_v20（指示書AJ AJ-8: 一覧（子タブ）の説明文） * 【v20 変更点（20261001・指示書AJ）】★ファイルの末尾に AJ-8 のブロックを足しただけ（既存の行は1バイトも変えていません）。 * ・.cc-arch-desc（taxonomy-product_cat.php v5 が見出しの下に出す）＝枠なし・本文の見た目（13px/1.9・#6B5A60・左右は見出しと同じ PC 24px／スマホ 16px）。 * 3行（max-height 5.7em）で切って下をうすくフェード。「続きを読む ▾」は枠なし・#b8446a・700。 * Hello の button 既定（hover/focus で背景ピンク）を background:none !important／box-shadow:none で打ち消す。 * ・.cc-arch-desc__link「セミオーダー料金表はこちら →」＝下線・#b8446a・700。 * ・3行に収まる短い説明（.is-fit）はフェードとボタンを出さない。 * (旧)Version: 20260927_v19（指示書AF AF-7: PC の一覧の ♡ を 40px／AF-8: スマホの大タブの上の「色がちがう帯」） * 【v19 変更点（20260927・指示書AF）】値を変えた・足したのは下の3か所だけ（★v19 の印）。 * AF-7: 一覧のカードの ♡（.cc-arch-card-wrap .cc-fav-btn--loop）30px → 40px・中のハート 16px → 21px。 * 640px 以下の 26px／14px はそのまま。検索結果（craftcos-search.php）も同じクラスなので一緒に変わる。トップのカードは別クラス（変えていない）。 * AF-8: 640px 以下の .cc-arch-tabs（横スクロールの箱）に、タブの上の影のぶんの余白を箱の中に作って同じだけ戻す * （padding 14px 4px 3px／margin -14px -4px -3px）。タブの位置・大きさは今のまま。 * ※指示書は下を 0 にしていたが、正のプレビュー（スマホ v1 の①）は下も 3px（選んでいるタブの margin-bottom:-3px が * 箱のふちで切れず、PC と同じくパネルの色の帯に重なる）なので、プレビューに合わせた。 * (旧)Version: 20260925_v18（指示書AB AB-7: ♡の大きさをトップとそろえる／AB-9: サブタブの文字の始まりを見出しとそろえる） * 【v18 変更点（20260925・指示書AB）】値を変えたのは下の4か所だけ（★v18 の印）。 * AB-7: 一覧のカードの ♡（.cc-arch-card-wrap .cc-fav-btn--loop）を PC 30px（ハート 16px）・640px 以下 26px（ハート 14px）・ * 角から 6px に（トップの新商品カードと同じ）。640px 以下の transform:scale(.85) はやめた（大きさは width/height で決める）。 * 「押したあと濃いピンク」の直しは craftcos.php v65（cc-fav-css）。 * AB-9: .cc-arch-subtabs の左の余白 22px → 6px（PC）／640px 以下 16px → 4px。 * ＝サブタブの文字の始まりが 見出し・並び替えの箱 の左端と同じ 24px（スマホ 16px）。下線はタブに付いて動く。 * (旧)Version: 20260925_v17（指示書Z Z-2・Z-3: ★パーツの作り方の色の線／「作り方」のプルダウン） * 【v17 変更点（20260925・指示書Z）】足しただけ（既存の規則は1バイトも変えていない）。いちばん下の ★v17 の2ブロック。 * Z-2: .cc-arch-card-img に cc-make-A〜D が付いたカードだけ、写真の上に ::after で線（4px・上だけ角丸）。 * カードの角丸 16px（スマホ 12px）・枠 1px に合わせて線は 15px（スマホ 11px・3.5px）。img は無変更。 * SALE の帯（.cc-arch-badge）は線の上（z-index:1・線の付いたカードだけ）。♡ は元から z-index:3 で上。 * 色は inc/craftcos-make-style.php が :root に出す --cc-make-A…（無くても下の既定色で出る）。 * Z-3: 「作り方」のプルダウン（.cc-make-filter）。見た目は .orderby と同じ（角丸 999・同じ余白・同じ文字サイズ）。 * 選んでいるとき（.is-on）は枠ピンク #b8446a・左に色の点。スマホも並び替えの右（同じ行）。 * (旧)Version: 20260826_v16（司令塔パッチ・商品名を2行表示に） * 【v16 変更点（20260826・司令塔パッチ）】.cc-arch-card-name を1行→2行まで表示に。 * v10のコメントに残してあった「2行に戻すなら line-clamp:2」の手順のうち、 * **行数だけ**を戻した（--cc-cardfs の式・下限・上限は v13/v14 のまま1バイトも変えない * ＝文字サイズは今の見た目のまま）。min-height を 0→2.6em にして2行ぶん高さを予約し、 * 金額の縦位置が揃うようにしている。 * 理由: 3Dパーツの商品名が長く（例「煌上下長四芒星パーツ(フレーム)」）、1行だと * 作り方が「…」で消えるため（実測: カテゴリ一覧カードは14字が限界）。 * (旧)Version: 20260819_v15 * 【v15 変更点（20260819・司令塔パッチ）】丸カテゴリのタイルに background-color を1行追加しただけ。 * 背景を透過で書き出した線画アイコンを設定したとき、その下に淡いピンク(#FBEFEE)が出る。 * ＝アイコン画像を作り直さなくても、この1行の色を変えるだけで全カテゴリの背景色が変わる。 * 写真サムネ（不透明）を設定したカテゴリの見た目は1ピクセルも変わらない。 * サムネ未設定の空タイルも従来どおりグラデのまま（グラデが色の上に乗るため）。 * 【v14 変更点（20260801・司令塔パッチ）】商品名と金額のすき間を詰めただけ（サイズ不変）。 * name の line-height 1.45→1.3・margin-bottom 4px→1px（スマホは 3px→0）。 * 文字サイズ・13文字基準・名前:金額=1:1.08 は v13 のまま1バイトも変えていない。 * 【v13 変更点（20260801・司令塔パッチ）】★v12（14文字基準）を撤回し、**v11のサイズに戻した**。 * ななみちゃん決定＝「14文字を入れるために7%小さくするより、今の大きさのほうが良い」。 * したがって基準は 13文字＝1行。14文字以上は「…」で省略される（仕様として確定）。 * 割る数 11.0（スマホ）／11.3（PC）・上限13px/20px・名前:金額=1:1.08 は v11 と同一。 * 【v11（20260801）】C案のまま文字を約2割アップ（実機の余白から逆算）。 * 【v11 変更点（20260801・司令塔パッチ／実機フィードバック）】C案のまま文字だけ約2割大きく。 * - 実機(iPhone/ヒラギノ)は検品環境のフォントより字幅が狭く、13文字が横幅の約74%までしか * 伸びていなかった（＝右に余白が残っていた）。割る数を 13.35 → 11.0（スマホ）/ 11.3（PC）に * 詰めて、13文字がカード幅いっぱいに近づくよう再計算。上限もスマホ11→13px・PC18→20pxへ。 * - 字間を -0.02em → -0.03em に（数%ぶんの余白を稼いで、字幅の広い端末での折返しを防ぐ保険）。 * ※14文字以上が「…」になる挙動・名前と金額のサイズ連動（1 : 1.08）は v10 のまま不変。 * 【v10 変更点（20260801・司令塔パッチ／ C案に変更）】ななみちゃん決定。 * - 商品名を**1行・13文字ちょうど**に戻し（カード幅連動）、**金額を名前に合わせて小さく**した * （名前 : 金額 = 1 : 1.08 の関係は維持＝サイズ源は --cc-cardfs 1本のまま）。 * - 2行表示・下限12pxは撤回（v9で入れたもの）。14文字以上は「…」で省略される。 * ※読みやすさ重視に戻したくなったら、--cc-cardfs の式を (100cqw-24px)/7.2・下限12px にして * .cc-arch-card-name を2行clamp（-webkit-line-clamp:2）へ戻すだけ＝v9に戻せる。 * 【v9 変更点（20260801・司令塔パッチ／購入者目線の可読性）】 * - 商品名と金額の大きさを揃えた（名前 : 金額 = 1 : 1.08＝ほぼ同じで金額がわずかに勝つ）。 * カード幅連動は維持しつつ**下限12px**にして「読めない文字」を撤廃（旧v8はスマホで約7.7px）。 * - 商品名は**2行まで表示**（13文字どころか約26文字まで全部見える）。3行ぶんの高さ予約はせず、 * 2行ぶんだけ確保して価格の位置を揃える。 * - サイズはカスタムプロパティ --cc-cardfs 1本に集約（名前と金額が絶対にズレない） * 【v8 変更点（20260801・司令塔パッチ）】PC/タブレット幅でも商品名を「13文字がカード幅いっぱい」に: * - 1行＋…省略とカード幅連動サイズを全幅共通に（これまではスマホ640px以下だけだった）。 * 広い画面ではカードが大きいぶん文字も大きくなる（上限18px）。3行ぶんの高さ予約(min-height:2.9em)を撤去 * 【v7 変更点（20260801・司令塔パッチ）】 * - スマホの左右余白を合計30pxに調整（片側15px＝一覧4px＋グリッド11px） * - 子カテゴリ丸の行の左端を商品グリッドの左端と揃えた（16px→11px） * 【v6 変更点（20260801・司令塔パッチ）】スマホの商品カードを大きく（ななみちゃん赤線指定）: * - 一覧の左右余白 10→4px・グリッド左右 10→6px ＝ カードが画面幅ほぼいっぱいに（1枚あたり約+12px拡大） * - 文字はカード幅連動なので自動で少し大きくなる（13文字1行ルールは維持） * 【v5 変更点（20260801・司令塔パッチ）】商品名を「1行に13文字」入るサイズ感に（ななみちゃん指定）: * - カード幅に連動する自動サイズ（container query単位cqw）で、どの端末幅でも13文字がちょうど収まる * （13文字＝「ハートチャーム（テスト2）」級の名前）。フォールバックは8px（古い端末は末尾数文字が…になる）。下限7.1px＝幅375px端末でも13文字が入る * - 余白を少し詰めて文字の取り分を拡大（一覧余白14→10px・グリッド12→10px・間隔8→7px・カード内6px） * - 字間-0.02em＋palt（対応フォントではカッコ類が詰まってさらに入りやすく） * 【v4 変更点（20260801・司令塔パッチ）】スマホ3列カードの文字をモック準拠に: * - 商品名は1行＋はみ出しは「…」省略（3行ぶんの空きを予約していた min-height を撤去→縦長感を解消） * - 商品名11px/価格13pxに戻して読みやすく。税込サフィックスは9px * 【v3 変更点（20260801・司令塔パッチ）】見た目のみ・構造/セレクタ追加なし * - スマホ(≤640px)の商品グリッドを2列→3列（gap/カード内余白/文字サイズを3列向けに圧縮、♡ボタン位置を微調整） * - 子カテゴリ丸のラベルを画像に近づけた（margin-bottom 8→4px、スマホ 6→3px） * （v2: 商品カードの♡お気に入り用ラッパーCSSを追加） * ─────────────────────────────────────────────── * 設置: テーマ直下（hello-elementor-child/craftcos-archive.css） * 読込: inc/craftcos.php v3 が is_product_category() 時のみ enqueue * 依存: --cc-* 変数は craftcos.php の wp_head CSS が定義 * --cc-tab / --cc-tab2 はテンプレがアクティブ大タブ色で注入 * デザイン: モック craftcos-search-tabs v8.1 準拠（大タブはテキストのみ） */ .cc-archive { max-width: 1180px; margin: 0 auto; padding: 22px 22px 50px; color: var(--cc-ink, #6B5A60); } /* ===== 大タブ（4つ・各専用色） ===== */ .cc-arch-tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-end; position: relative; z-index: 2; } .cc-arch-tab { display: inline-flex; align-items: center; padding: 15px 26px 16px; font-size: 15px; font-weight: 700; color: #8a7a80; text-decoration: none; border-radius: 18px 18px 0 0; background: #fff; box-shadow: 0 -3px 10px rgba(0, 0, 0, .04); transition: transform .2s, color .2s; position: relative; } .cc-arch-tab:hover { transform: translateY(-2px); color: var(--tabc, #f58bb6); } .cc-arch-tab.is-active { color: #fff; background: linear-gradient(135deg, var(--tabc, #f58bb6), var(--tabc2, #f7a3c4)); padding-bottom: 20px; margin-bottom: -4px; box-shadow: 0 -4px 14px rgba(0, 0, 0, .07); z-index: 3; } /* ===== パネル（大タブ色帯と一体化） ===== */ .cc-arch-panel { background: #fff; border-radius: 0 18px 18px 18px; border-top: 4px solid var(--cc-tab, #f58bb6); box-shadow: 0 6px 22px rgba(201, 164, 106, .10); padding-bottom: 30px; position: relative; z-index: 1; overflow: hidden; } /* ===== 小タブ（子カテゴリ・下線式） ===== */ .cc-arch-subtabs { display: flex; gap: 4px; padding: 8px 22px 0 6px; /* ★v18（AB-9）: 左 22px → 6px（文字の始まり＝6＋タブの内側18＝24px＝見出しと同じ） */ border-bottom: 1px solid var(--cc-line, #F0DCE4); overflow-x: auto; scrollbar-width: none; } .cc-arch-subtabs::-webkit-scrollbar { display: none; } .cc-arch-subtab { padding: 16px 18px; font-size: 15px; font-weight: 600; color: #8a7a80; text-decoration: none; white-space: nowrap; position: relative; transition: color .15s; } .cc-arch-subtab:hover { color: var(--cc-tab, #f58bb6); } .cc-arch-subtab.is-active { color: #5f5054; font-weight: 700; } .cc-arch-subtab.is-active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; background: var(--cc-tab, #f58bb6); border-radius: 3px; } /* ===== 一覧見出し ===== */ .cc-arch-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 22px 24px 6px; flex-wrap: wrap; } .cc-arch-title { font-size: 20px; font-weight: 700; color: #5f5054; margin: 0; } .cc-arch-seeall { font-size: 12.5px; color: var(--cc-ink-soft, #A3928F); text-decoration: none; } .cc-arch-seeall:hover { color: var(--cc-tab, #f58bb6); } /* ===== 丸カテゴリ（孫・サムネ付き） ===== */ .cc-arch-rounds { display: flex; gap: 14px; padding: 12px 24px 6px; overflow-x: auto; scrollbar-width: none; } .cc-arch-rounds::-webkit-scrollbar { display: none; } .cc-arch-round { text-align: center; text-decoration: none; flex-shrink: 0; width: 96px; } .cc-arch-round-img { display: block; width: 96px; height: 96px; border-radius: 20px; background: linear-gradient(135deg, #faf1ea, #fdeef3); background-color: #FBEFEE; /* ★v15: 透過PNGのアイコンの下に出る淡い色。写真サムネには影響なし */ background-size: cover; background-position: center; border: 1px solid var(--cc-line, #F0DCE4); margin-bottom: 4px; transition: transform .18s, box-shadow .18s, border-color .18s; } .cc-arch-round:hover .cc-arch-round-img { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(245, 139, 182, .18); border-color: var(--cc-tab, #f58bb6); } .cc-arch-round.is-active .cc-arch-round-img { border: 2px solid var(--cc-tab, #f58bb6); } .cc-arch-round-name { font-size: 12px; color: #5f5054; } .cc-arch-round.is-active .cc-arch-round-name { color: var(--cc-tab, #f58bb6); font-weight: 700; } /* ===== ツールバー（Woo標準の並替・件数を着せ替え） ===== */ .cc-arch-toolbar { display: flex; align-items: center; gap: 12px; padding: 16px 24px 6px; flex-wrap: wrap; } .cc-arch-toolbar form.woocommerce-ordering { margin: 0; } .cc-arch-toolbar .orderby { background: var(--cc-ivory, #FFF9F5); border: 1px solid var(--cc-line, #F0DCE4); border-radius: 999px; padding: 9px 34px 9px 18px; font-size: 12.5px; color: var(--cc-ink, #6B5A60); cursor: pointer; } .cc-arch-toolbar .woocommerce-result-count { margin: 0 0 0 auto; font-size: 13px; color: #5f5054; font-weight: 600; } /* ===== 商品グリッド ===== */ .cc-arch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 16px 24px 0; } .cc-arch-card { background: #fff; border: 1px solid var(--cc-line, #F0DCE4); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 14px rgba(201, 164, 106, .08); transition: transform .18s; text-decoration: none; display: block; position: relative; } .cc-arch-card:hover { transform: translateY(-4px); } .cc-arch-card-img { display: block; position: relative; } .cc-arch-card-img img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .cc-arch-badge { position: absolute; top: 10px; left: 10px; background: var(--cc-pink, #F58BB6); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .08em; padding: 3px 9px; border-radius: 999px; } .cc-arch-card-body { display: block; padding: 12px; } /* ★v10(C案): 名前と金額の基準サイズ（1本に集約＝ズレない）。フォールバックは12.5px */ .cc-arch-card-body { --cc-cardfs: 12.5px; } .cc-arch-card-name { display: block; font-size: var(--cc-cardfs); color: #5f5054; line-height: 1.3; /* ★v14: 金額とのすき間を詰める */ margin-bottom: 1px; /* ★v14: 4px→1px */ min-height: 2.6em; /* ★v16: 2行ぶん予約＝金額の縦位置が揃う */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; /* ★v16: 1行→2行まで表示 */ letter-spacing: -0.03em; font-feature-settings: "palt"; } /* ★v10(C案): カード幅連動＝13文字がちょうど1行に収まるサイズ */ .cc-arch-card-wrap { container-type: inline-size; } @supports (font-size: 1cqw) { .cc-arch-card-body { --cc-cardfs: clamp(7.1px, calc((100cqw - 24px) / 11.3), 20px); } /* ★v11: 24px=PCのカード内余白 */ } .cc-arch-card-price { display: block; font-size: calc(var(--cc-cardfs, 12px) * 1.08); /* ★v9: 名前とほぼ同じ・ほんの少しだけ勝つ */ font-weight: 700; color: var(--cc-pink, #F58BB6); } .cc-arch-card-price del { opacity: .45; font-size: .85em; margin-right: 4px; } .cc-arch-card-price .woocommerce-price-suffix { font-size: .72em; color: var(--cc-ink-soft, #A3928F); font-weight: 400; } /* ===== ♡お気に入りボタン（★v2） ===== *