/* Theme Name: 岩木十和薬長寿庵 Theme URI: https://nature-labo.jp/ Author: NATURE LABO（株式会社ナチュールプロビジョン） Author URI: https://nature-labo.vercel.app/ Description: エール産業株式会社様のブランド「岩木十和薬長寿庵」のためのブロックテーマ。サイト全体は「和」（紺・朱赤・和紙色／明朝体／縦書き）、商品詳細ページだけは商品パッケージの世界観「洋」（クリーム・ゴールドのミニマル）という二層構造で作ってあります。静的HTMLモックアップ全11ページからの移植版。 Version: 2026.10.01.121 Requires at least: 6.6 Tested up to: 6.8 Requires PHP: 7.4 License: 私有（NATURE LABO） License URI: https://nature-labo.vercel.app/ Text Domain: iwaki Tags: block-theme, full-site-editing, japanese, food */ /* ===================================================================== このファイルについて --------------------------------------------------------------------- 色・書体・余白・レイアウト幅は theme.json 側で決めています（管理画面から 変更できるようにするため）。このファイルには、theme.json では表現できない ものだけを書いています。具体的には次の4つです。 1. 縦書き（writing-mode） 2. 写真がまだ無い場所に出す「【写真】」の枠 3. 和紙のテクスチャ背景 4. トップページの、写真に重ねる透けたヘッダー ⚠️ 色の値をここに直接書かないこと。theme.json の色を var(--wp--preset--color--navy) のように呼び出して使います。 （管理画面で色を変えたときに、ここだけ変わらない事故を防ぐため） ===================================================================== */ /* ===================================================================== 1. 縦書き --------------------------------------------------------------------- ブロックエディタの「スタイル」から「縦書き」を選ぶと付く見た目です。 （functions.php の register_block_style で登録しています） ⚠️ 縦書きでは「高さ」が"1列の長さ"（＝1行に入る文字数）になります。 ここは高さを決め打ちせず、height: max-content で 「いちばん長い行が、ちょうど1列に収まる長さ」を自動で取っています。 改行（
）で区切った1行は、必ず1列に収まります。 ⚠️ 以前は 16rem（256px）の決め打ちでした。そのため19文字の行が 入りきらず、「て。」のような1文字だけの列が出ていました（2026-08-14 修正）。 上限だけ max-height: max(28rem, 80vh) で止めています（青天井だと、 改行を1つも入れない文章を貼られたときに帯が極端に縦長になるため）。 → 何文字まで耐えるかは README「4. 縦書き」に実測値を書いてあります。 ===================================================================== */ .is-style-tategaki { writing-mode: vertical-rl; text-orientation: mixed; block-size: auto; max-block-size: 100%; } /* 段落・見出しに縦書きを付けたときの、1列の長さ */ p.is-style-tategaki, h1.is-style-tategaki, h2.is-style-tategaki, h3.is-style-tategaki, h4.is-style-tategaki { height: max-content; max-height: max(28rem, 80vh); margin-inline: 0; } /* グループに縦書きを付けたときは、中の見出し・段落を横に並べる（右から左へ） 🔴 この"入れ物"自身は、横書き（horizontal-tb）に戻してあります。 入れ物まで縦書きにすると、flex の「横に並べる（row）」の向きも一緒に 90度回ってしまい、右から左ではなく"上から下"に積み上がります。 （2026-08-14 実機で発生。囲みが 幅158px × 高さ832px になり、 見出しと本文2つが縦一列に並んでいました） row-reverse なのは、縦書きの読み順（右から左）に合わせるためです。 ＝ HTMLの並び順「見出し → 本文1 → 本文2」が、画面では 「右に見出し、その左に本文1、いちばん左に本文2」になります。 */ .wp-block-group.is-style-tategaki { writing-mode: horizontal-tb; display: flex; flex-direction: row-reverse; justify-content: center; align-items: flex-start; gap: 3rem; height: auto; max-block-size: none; } .wp-block-group.is-style-tategaki > * { writing-mode: vertical-rl; text-orientation: mixed; height: max-content; max-height: max(28rem, 80vh); margin: 0; } /* 縦書きの見出しは、字間を広めに */ .is-style-tategaki:is(h1, h2, h3) { letter-spacing: 0.15em; } /* --- スマホでは横書きに戻す --------------------------------------- 縦書きのまま狭い画面に入れると、1行が画面から溢れて読めなくなるため。 （モックアップ styles.css の @media (max-width: 900px) と同じ判断） */ @media (max-width: 900px) { .is-style-tategaki, .wp-block-group.is-style-tategaki > * { writing-mode: horizontal-tb !important; height: auto !important; /* ⚠️ max-height の解除を忘れないこと。横書きに戻ると max-height は 「行数の上限」になり、長い文章が途中で切れて消えます。 */ max-height: none !important; text-align: center; } .wp-block-group.is-style-tategaki { flex-direction: column; align-items: center; gap: 1.5rem; } } /* ===================================================================== 「お品書き」の階層メニュー（2026-08-14 追加） --------------------------------------------------------------------- 狙い＝カーソルを合わせると「インナーケア美容リカバリー」と 「ギルトフリーアレルギー配慮フード」が現れ、外すとまた隠れる動き。 🔵 WordPressの標準の仕組み（wp:navigation-submenu）で組んでいます。 理由＝管理画面から項目を足し引きできる形にしておくため。 開閉のきっかけ（カーソル・押下・キーボードのTab）も、WordPress側が持っています。 🔴 この案件のヘッダーは"縦書き"です。そこが普通のサイトと違うところで、 次の3つを、ここで手当てしています。 【1】開いた中身は横書きに戻す 親項目が縦書きなので、そのままだと中身まで縦になり、 10項目が横一列に寝て、画面からはみ出します。 【2】開く向きは「下」 縦書きの項目は背が高い（実測113.8px）ため、真横に出すと ヘッダーの外へ大きくはみ出します。下に落とすのが収まります。 【3】くくりの名前は「押せない見出し」にする インナーケア…／ギルトフリー…の2つは、飛び先を持たせていません。 🔴 2026-08-15 実機で実測して分かった、ここの誤り（初版の思い込み）： 「WordPressは飛び先の無い項目を で出す」と書いていましたが、 実機（WordPress 7.0.4）の出力は でした。開いた中身の 10項目すべてが です（うち2つがくくりの名前、8つが商品名）。 → そのため「押せないものは反応させない」手当てが効いていませんでした。 → いまは a[href] が有るときだけ反応させる形に直してあります（下の hover の項）。 ⚠️ 商品名8件も、いまは同じく飛び先なしです。 商品詳細ページがまだ1枚も無く、つなぐと押した瞬間に404になるためです。 詳細ページができたら、管理画面から各項目にURLを入れてください。 URLを入れた項目だけ、自動で反応するようになります。 【4】指定の強さ（セレクタの深さ）で、WordPress本体に勝たせる 地色と幅は、素直に書くと WordPress本体の指定に負けます。深さを1段 足して勝たせています（!important は使っていません）。詳細は各項目の注記に。 ===================================================================== */ /* 開いた中身の入れ物 🔴 2026-08-15：選び方（セレクタ）を1段深くしました。地色が和紙色にならず、 白地＋黒の薄枠で出ていた不具合の修理です（実機で実測）。 【なぜ負けていたか】WordPress本体に、こういう指定があります。 .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container { background-color: #fff; border: 1px solid rgba(0,0,0,0.15) } これは「クラス3つ分」の強さです（:not( ) の中身も1つと数えます）。 こちらは .iwaki-nav-vertical .wp-block-navigation__submenu-container ＝2つ分 しか無かったため、あとから読み込んでも負けていました。 ＝ CSSは「後に書いたほうが勝つ」より先に「指定の強い（深い）ほうが勝つ」。 【どう直したか】.iwaki-nav-vertical.wp-block-navigation（くっつけて2つ分）と .has-child を足して「クラス4つ分」にしました。!important は使っていません。 ⚠️ .wp-block-navigation と .has-child は WordPress本体が付けるクラスです。 この2つを消すと、また白地に戻ります。 */ .iwaki-nav-vertical.wp-block-navigation .has-child .wp-block-navigation__submenu-container { writing-mode: horizontal-tb; /* 2026-08-17：0.75rem → 0.5rem（上下12px → 8px）。開いた箱を小さくするため */ padding: 0.5rem 0; background: var(--wp--preset--color--washi-light); border: 1px solid rgba(26, 58, 92, 0.15); border-radius: 2px; box-shadow: 0 6px 24px rgba(16, 37, 61, 0.18); } /* 開いたときの幅（17rem＝272px） 🔴 2026-08-15：幅が200pxになり、商品名が2行に折り返していた不具合の修理です。 【なぜ負けていたか】WordPress本体は「開いた瞬間」に幅の下限を当てます。 .wp-block-navigation .has-child:not(.open-on-click):hover > ...container { min-width: 200px } これは「クラス5つ分」。上の入れ物の指定（4つ分）では届きません。 ＝ 状態（hover 等）に付いた指定は、状態を含む書き方でしか打ち消せません。 【どう直したか】本体とまったく同じ"開いた状態"の3つの書き方に .iwaki-nav-vertical を1つ足して「クラス6つ分」にしています。 【実測（2026-08-15・Chrome・1280×720）】200pxのときは10項目中5件が2行。 🔵 2026-08-17：17rem（272px）→ 16rem（256px）。 開いた箱が、枠も文字も大きすぎたための調整です。 【折り返さない下限を、実際に測って決めました】（Chrome・1280×800） 文字を15pxにしたうえで、幅を2pxずつ動かして、商品名8つが 全部1行に収まる境目をさがしました。 幅 240px … 折り返す（Agury Land（アグリーランド）） 幅 246px … 折り返す（同上） 幅 248px … 折り返さない ← ここが下限 幅 256px … 折り返さない ← 採用（下限より8px広い） 🔴 下限ちょうど（248px）にしないこと。使う人の環境で書体の作りが少しでも違うと、 いちばん長い「Agury Land（アグリーランド）」が2行に折り返します。 8pxは、そのための逃げしろです。これ以上狭めないでください。 ⚠️ 商品名を長いものに差し替えるときは、必ずこの測り直しからやること。 【くくりの名前は、いまも2行のままです】 「ギルトフリー・アレルギー配慮フード」（17文字）は、14pxにしても1行に収まりません （1行に収めるには箱の幅が約290px必要＝いまより広げることになります）。 ⚠️ 見出しなので2行でも読めますが、1行にそろえたいときは、 上の「幅」を広げるか、文言のほうを短くするかの、どちらかになります。 */ .iwaki-nav-vertical.wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container, .iwaki-nav-vertical.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container, .iwaki-nav-vertical.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container { min-width: 16rem; } /* 中の項目は、必ず横書き。縦書きの指定を打ち消す 🔴 2026-08-17：選び方（セレクタ）を「クラス3つ分」から「5つ分」に深くしました。 【なぜ必要だったか】ここに書いてあった padding: 0.4rem 1.25rem は、 実機ではまったく効いていませんでした。実測した値は 8px 16px で、 これは WordPress 本体の 0.5em 1em です。＝ 本体に負けていました。 文字の大きさと行の高さは効いていたので、気づきにくい形でした。 （2026-08-15 の注記に「実測272px」とあるのは箱の幅の話で、 項目の余白は誰も測っていませんでした） 【いま何を足したか】.wp-block-navigation と .has-child の2つです。 どちらも WordPress 本体が付けるクラスなので、消さないでください。 消すと余白の指定がまた本体に負け、項目が1つあたり12px背高くなります。 🔵 2026-08-17 の詰め直し（開いた箱が大きすぎたため） 上下の余白 8px → 4px 左右の余白 16px → 14px 文字 16px → 15px 行の高さ 1.7（27.2px）→ 1.55（23.25px） ＝ 1項目あたりの高さ 43.2px → 31.3px（実測） 🔴 15px より小さくしないこと。うちの決まり（.claude/rules/ui-text-size.md）は パソコンの画面で16px以上です。ここは、開いたメニューが大きすぎたため 15pxまで緩めた、意図的な例外です。ほかの場所へ広げないこと。 ⚠️ 押せる大きさは、高さ31.3px×幅256px。指で押す下限（24px角）を上回っています。 */ .iwaki-nav-vertical.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item > a, .iwaki-nav-vertical.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item > span { writing-mode: horizontal-tb; display: block; padding: 0.25rem 0.875rem; color: var(--wp--preset--color--ink); font-size: 0.9375rem; line-height: 1.55; letter-spacing: 0.02em; white-space: normal; } /* くくりの名前（押せない見出し） 🔵 2026-08-17：16px → 14px。商品名（15px）より1段小さくしています。 見出しなので、下に並ぶ項目より小さくても読みの妨げになりません （新聞の柱の見出しと同じ考え方です）。 ⚠️ 色は紺のまま、太字のまま、上の線もそのままです。小さくしたぶんの 「見出しらしさ」は、その3つが受け持っています。 ⚠️ 色の濃さ＝紺 #1a3a5c と 和紙（うすい）#faf6ec で 9.98:1（基準4.5:1）。 小さくしても読めなくなりません。 🔴 選び方の深さは、上の項目と同じにそろえてあります（理由は上の注記）。 */ .iwaki-nav-vertical.wp-block-navigation .has-child .wp-block-navigation__submenu-container .iwaki-submenu-head > span, .iwaki-nav-vertical.wp-block-navigation .has-child .wp-block-navigation__submenu-container .iwaki-submenu-head > a { color: var(--wp--preset--color--navy); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; padding-top: 0.5rem; margin-top: 0.3rem; border-top: 1px solid rgba(26, 58, 92, 0.15); } /* いちばん上のくくりには、線を引かない（入れ物の枠と二重になるため） */ .iwaki-nav-vertical.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .iwaki-submenu-head:first-child > span, .iwaki-nav-vertical.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .iwaki-submenu-head:first-child > a { border-top: 0; margin-top: 0; padding-top: 0; } /* 商品名に、カーソルを合わせたとき 🔴 2026-08-15：ここは「押せないものまで反応していた」不具合の修理です。 もとは > a:hover と書き、注記に「飛び先が無い項目は で出る」と 書いていましたが、実機（WordPress 7.0.4）は飛び先が無くても で出します。 ＝ 前提が違っていたため、10項目すべてが反応していました。 いまは a[href]（＝飛び先を持つ だけ）に当てています。 飛び先の無い項目は反応しません。商品詳細ページを作って管理画面でURLを入れれば、 その項目だけ自動で反応するようになります。 */ .iwaki-nav-vertical .wp-block-navigation__submenu-container .wp-block-navigation-item > a[href]:hover { background: rgba(26, 58, 92, 0.06); text-decoration: none; } /* 写真に重ねている間（トップページの一番上）も、開いた中身は和紙色のまま読めるようにする ⚠️ .iwaki-header--overlay a { color: white } を打ち消しています。 白い文字のままだと、和紙色の入れ物の上で読めなくなります。 */ .iwaki-header--overlay .wp-block-navigation__submenu-container a, .iwaki-header--overlay .wp-block-navigation__submenu-container span { color: var(--wp--preset--color--ink); } .iwaki-header--overlay .wp-block-navigation__submenu-container .iwaki-submenu-head > span, .iwaki-header--overlay .wp-block-navigation__submenu-container .iwaki-submenu-head > a { color: var(--wp--preset--color--navy); } /* --- スマートフォン：カーソルが無いので、押して開く形にする ------------- 900px以下ではメニューが横書きに戻り、ハンバーガーの中に入ります。 WordPressが開閉を受け持つので、ここでは見た目だけを整えます。 */ @media (max-width: 900px) { /* 🔴 打ち消す側は、打ち消される側と「同じ深さ」で書くこと。 上の入れ物を4つ分の深さにしたので、ここも同じ形にそろえています。 浅いまま（.iwaki-nav-vertical ...container だけ）にすると打ち消せず、 ハンバーガーの中に和紙色の箱が二重に出て、幅も272pxのまま残ります。 */ .iwaki-nav-vertical.wp-block-navigation .has-child .wp-block-navigation__submenu-container { background: transparent; border: 0; box-shadow: none; padding: 0 0 0 1rem; } /* 幅の下限も、上と同じ"開いた状態"の3つの書き方でそろえて解除する */ .iwaki-nav-vertical.wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container, .iwaki-nav-vertical.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container, .iwaki-nav-vertical.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container { min-width: 0; } /* 🔴 2026-08-17：ここも「クラス5つ分」に深くしました。 上（広い画面側）の余白の指定を深くしたため、この打ち消しが浅いままだと 負けて効かなくなり、ハンバーガーの中の項目に左右14pxの余白が付いたままになります。 ＝ 打ち消す側は、打ち消される側と同じ深さで書くこと（この節の決まり）。 🔵 文字はスマートフォンでも15pxです。指で押す高さは 15px×1.55＋上下11.2px ＝ 34.4px。 */ .iwaki-nav-vertical.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item > a, .iwaki-nav-vertical.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item > span { padding: 0.35rem 0; } } /* 動きを減らす設定にしている方には、開くときの動きを出さない */ @media (prefers-reduced-motion: reduce) { .wp-block-navigation__submenu-container { transition: none; } } /* ナビゲーションのリンクを縦書きにする（トップページのヘッダーで使用） */ .iwaki-nav-vertical .wp-block-navigation__container > .wp-block-navigation-item > a { writing-mode: vertical-rl; text-orientation: mixed; padding-block: 0.15rem; } @media (max-width: 900px) { .iwaki-nav-vertical .wp-block-navigation__container > .wp-block-navigation-item > a { writing-mode: horizontal-tb; } } /* ===================================================================== 2. 写真がまだ無い場所に出す枠（プレースホルダー） --------------------------------------------------------------------- モックアップの .img-frame をそのまま持ってきたものです。 実際の写真が届いたら、この枠のグループごと「画像ブロック」に 置き換えてください（README の「写真の入れ方」参照）。 ===================================================================== */ /* 🔴 box-sizing を外さないこと（2026-08-16 実測で入れました）。 この枠は 縦横比1:1 ＋ 左右の余白0.5rem ＋ 枠線1px でできています。 box-sizing の指定が無いと、縦横比は「線と余白を除いた内側」に掛かるため、 幅327pxのとき高さが311pxになり、**正方形になりません**（実測）。 写真の入った枠は線も余白も持たないので、ちょうど327pxの正方形です。 ＝ 指定が無いと、写真の枠と斜線の枠が16pxずれて並び、 その下の商品名の行が段違いになります。 */ .iwaki-photo-slot { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background-image: repeating-linear-gradient( 45deg, rgba(26, 58, 92, 0.06), rgba(26, 58, 92, 0.06) 10px, rgba(26, 58, 92, 0.1) 10px, rgba(26, 58, 92, 0.1) 20px ); border: 1px dashed rgba(26, 58, 92, 0.4); color: var(--wp--preset--color--navy); font-size: 1rem; font-weight: 700; line-height: 1.6; padding: 0 0.5rem; text-align: center; overflow-wrap: anywhere; } /* 🔴 上下の余白を入れないこと（左右だけにしてあります）。 この枠は高さを持たず、縦横比だけで形を決めています。 上下に余白を入れると、中の文字＋余白が縦横比より高くなった枠で 形がくずれます。実測（2026-08-16・幅390px）＝写真3の横長枠が 115px から 120px に伸び、2.55対1 が 2.45対1 に変わりました。 撮影の指定は 1072×420 のままなので、写真が入ったときにずれます。 */ /* 🔴 1rem（16px）を下回らせないこと。 以前は 0.8rem（12.8px）でした。.claude/rules/ui-text-size.md の 下限は 16px です。この枠の中身は「何を撮るのか・どの大きさで撮るのか」を 撮影する人に伝えるための案内で、読めなければ枠が空なのと同じです。 狭くて入らないときは、文字を縮めるのではなく、文を短くすること。 */ .iwaki-photo-slot p { margin: 0; } /* 丸い枠は、10個を横一列に並べるため直径が約105pxしかありません （.iwaki-ingredient-row ＝ 1200px を10等分）。 16px の文字は2〜3文字で1行が埋まります。ここには寸法や説明を 書き足さないこと。書くと枠からあふれます。 */ .iwaki-photo-slot--circle { border-radius: 50%; font-size: 1rem; line-height: 1.4; padding: 0 0.25rem; } .iwaki-photo-slot--wide { aspect-ratio: 16 / 7; border-radius: 4px; } /* 🆕 2026-10-02（版 2026.10.01.28）横長 16対9（コンセプトの「食の巻の前の横長写真」）。 🔴 大きさは幅ではなく縦横比で決めています（縦長の写真を入れても枠は伸びない）。 角の丸みは、このページの写真の箱（.cn-chip__photo＝2px）と同じ。影・枠線は付けません。 */ .iwaki-photo-slot--landscape { aspect-ratio: 16 / 9; border-radius: 2px; } /* 🆕 2026-10-02（版 2026.10.01.33）4対3（写真が入った枠の --card と同じ形）。 */ .iwaki-photo-slot--card { aspect-ratio: 4 / 3; border-radius: 2px; } /* 洋（商品ページ）側では、枠の色も洋にそろえる */ .is-style-yo-western .iwaki-photo-slot, .iwaki-tpl-product .iwaki-photo-slot { background-image: repeating-linear-gradient( 45deg, rgba(58, 54, 48, 0.08), rgba(58, 54, 48, 0.08) 12px, rgba(58, 54, 48, 0.13) 12px, rgba(58, 54, 48, 0.13) 24px ); border-color: rgba(58, 54, 48, 0.4); color: var(--wp--preset--color--charcoal); } /* 🔴 写真が入った枠（.iwaki-photo）の下地も、洋のページでは洋にそろえます。 2026-08-17 追加。すぐ上の斜線の枠には前からこの対がありましたが、 写真の枠の側には無く、**クリーム地のページに紺がにじむ**状態でした。 ⚠️ この下地は「写真が読み込まれるまでの数百ミリ秒」だけの話ではありません。 背景が透けているPNG（商品を切り抜いた写真など）を入れると、 **商品の背後にこの色が出たままになります。** ＝ 洋のページで紺が出ると、その1枚だけ浮きます。 ⚠️ 選び方（セレクタ）は印2つ分で、下の .iwaki-photo（印1つ分）より 強いので、書く場所が上でも負けません。 */ .is-style-yo-western .iwaki-photo, .iwaki-tpl-product .iwaki-photo { background: rgba(58, 54, 48, 0.05); } /* ===================================================================== 2b. 写真の枠（届いた写真を、枠にきっちり収める） --------------------------------------------------------------------- 🔵 2026-08-17：作りをまるごと入れ替えました。 【前】テーマのフォルダに置いた写真を、囲みの中で「拡大してずらす」ことで、 見せたい部分だけを映していました（印は .iwaki-crop--〇〇）。 そうしていた理由＝手元にあった写真が商品単体の撮影ではなく、 1枚の中に文章と写真が同居した紹介面だったためです。枠いっぱいに 広げると、使えない言い回しを含む文章まで写り込みました。 【後】写真はメディアライブラリに入り、管理画面から枠ごとに選ぶ形にしました。 選ぶ人が「その枠に合う写真」を選べるので、拡大もずらしも要りません。 枠に収める役は object-fit: cover が持ちます。 🔴 印の名前を .iwaki-crop から .iwaki-photo へ変えました。 「切り出し」という意味が無くなったためです。 ⚠️ 古い名前は、このファイルにも、ほかのどのファイルにも残していません。 【object-fit: cover が何をするか】 枠の形と写真の形が違うとき、**足りないほうに合わせて拡大し、 はみ出した部分を切り落として**枠を埋めます。残るのは中央です。 ＝ 枠が空くことも、写真が縦横に伸びて歪むこともありません。 ⚠️ そのかわり、端は切れます。写したいものを端いっぱいに置いた写真は、 切れることがあります。枠の縦横比（下の --square ／ --wide ／ --portrait）に合わせて書き出しておけば、切れません。 枠ごとの推奨寸法は、管理画面の「写真の差し替え」に出しています。 ===================================================================== */ .iwaki-photo { position: relative; overflow: hidden; /* 読み込みが終わるまでのあいだ、枠の場所が白く抜けないようにする下地 */ background: rgba(26, 58, 92, 0.05); /* 🔴 この既定の縦横比を消さないこと（安全網です）。 中の写真は height: 100% で親の高さに合わせています。 親が高さを持たないと、**高さ0になって写真が画面から黙って消えます。** 形を決める印（下の --square ／ --wide ／ --portrait）や .pd-photo--1 を付け忘れても、ここで最低限、正方形の枠が残ります。 ⚠️ 下の3つと .pd-photo--1 は、どれもこの行より後ろに書いてあります。 同じ強さのときは後ろが勝つので、正しく上書きされます。 新しく形の印を足すときは、**必ずこの行より後ろに**書いてください。 */ aspect-ratio: 1 / 1; } /* 🔴 width と height の両方を 100% にすること。 片方だけにすると写真の元の縦横比が残り、枠の上下（または左右）が空きます。 🔴 max-width: none を外さないこと。 このファイルの下のほうにある img { max-width: 100% }（7章）と ぶつかったときに、枠より小さく縮む形を防いでいます。 */ .iwaki-photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; } /* --- 枠の形 --- 商品カードは、写真がまだ無い枠（.iwaki-photo-slot）と並びます。 ⚠️ 正方形を 1:1 から変えないこと。変えると、写真の入った枠だけ高さが違い、 商品名の行が段違いに並びます。 */ .iwaki-photo--square { aspect-ratio: 1 / 1; } /* 横長（コンセプトのページの帯など）。斜線の枠の --wide と同じ形です */ .iwaki-photo--wide { aspect-ratio: 16 / 7; } /* 🆕 2026-10-02（版 2026.10.01.28）横長 16対9。斜線の枠の --landscape と同じ形です。 ⚠️ --wide（16対7）より後ろ・.iwaki-photo の既定より後ろに書いてあります（同じ強さのときは後ろが勝つ） */ .iwaki-photo--landscape { aspect-ratio: 16 / 9; border-radius: 2px; } /* 🆕 2026-10-02（版 2026.10.01.29）スマホ（599px以下）だけ正方形（1対1）。 理由＝スマホでは幅が本文と同じ279px（375幅）しか無く、16対9だと高さ157pxで小さく見えるため。 幅は変えていません（本文・ほかの囲みと同じ幅のまま＝左右の余白は超えない）。高さだけが伸びます。 横長の写真は object-fit: cover・中央で左右が切れ、縦長の写真も枠は伸びません。 🔴 斜線の枠（--landscape の slot）も同じ比にそろえるため、2つを一緒に書いています。 ⚠️ 600px以上（タブレット・パソコン）は 16対9 のまま。この指定より前の行を変えないこと。 */ @media (max-width: 599px) { .iwaki-photo--landscape, .iwaki-photo-slot--landscape { aspect-ratio: 1 / 1; } } /* 🆕 2026-10-02（版 2026.10.01.33）4対3（一粒万倍美 米粉麺の「種類ごとの写真」）。斜線の枠は --card と同じ形。 */ .iwaki-photo--card { aspect-ratio: 4 / 3; border-radius: 2px; } /* 縦長（商品詳細ページの写真1と同じ形） */ .iwaki-photo--portrait { aspect-ratio: 4 / 5; } /* ⚠️ 枠の大きさを、すでに別の印が決めている場所があります （商品詳細ページの .pd-photo--1 など）。そこでは、上の縦横比の印を 重ねていません。大きさの指定が2か所に増えると、必ずどちらかがずれます。 */ /* ===================================================================== 3. 和紙のテクスチャ背景 --------------------------------------------------------------------- グループブロックの「高度な設定 → 追加CSSクラス」に iwaki-washi-white / iwaki-washi-gold と入れると、その背景が和紙になります。 ===================================================================== */ .iwaki-washi-white, .iwaki-washi-gold { background-size: cover; background-position: center; background-repeat: no-repeat; } .iwaki-washi-white { background-image: linear-gradient(rgba(250, 246, 236, 0.7), rgba(250, 246, 236, 0.7)), url(assets/images/washi-white.jpg); } .iwaki-washi-gold { background-image: linear-gradient(rgba(243, 237, 224, 0.68), rgba(243, 237, 224, 0.68)), url(assets/images/washi-gold.jpg); } /* ⚠️ 3種類目の和紙（washi-cream.jpg）は、どこからも使われておらず ファイルが8.7MBと非常に重かったため、テーマから外しました（2026-08-04）。 必要になったら mockup/assets/images/ から取り直し、 必ず軽量化してから入れてください。軽量化の道具は node tools/image/resize.mjs --in <元> --out <出力先> --width 1400 です（2026-08-16に用意されました。元のファイルは書き換えません）。 */ /* ===================================================================== 4. ヘッダー ===================================================================== */ /* 通常ページのヘッダー：スクロールしても上に貼り付く */ .iwaki-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(26, 58, 92, 0.15); } /* ヘッダーの"中身"を、本文と同じ最大1120pxに収めて中央にそろえる 🔴 2026-08-14 追加。ロゴが左に寄りすぎ、お問い合わせボタンが画面の右端に 張り付いていた不具合の修理です。原因は同じ1つで、モックアップからの写し漏れでした。 モックアップ styles.css L67-74 の .header__inner は max-width: 1120px; margin: 0 auto; padding: 0.75rem 1.5rem; ところがテーマ側には max-width も margin:0 auto も無く、 ヘッダーの中身だけが画面いっぱいに広がっていました。 ＝ロゴが本文より80px外側に飛び出し、お問い合わせボタンは画面の右端に張り付く。 ⚠️ 幅を絞るのは「中身」だけです。帯（.iwaki-header 自身）は画面いっぱいのまま。 帯まで絞ると、スクロール後に出る和紙色の帯が画面の途中で切れます。 ⚠️ 幅の指定に vw を使わないこと。Windowsのブラウザはスクロールバーが場所を取り（15〜17px）、 100vw だとその分だけ右へはみ出して、いままさに直しているズレが再発します。 ⚠️ 左右の 1.5rem は、モックアップの .header__inner の padding と同じ値です。 これがあるぶん、ロゴは本文の左端より 24px 内側に入ります（モックアップも同じ）。 */ .iwaki-header > .wp-block-group { max-width: var(--wp--style--global--content-size, 1120px); margin-inline: auto; padding-inline: 1.5rem; } /* 🔴 透けたヘッダーのページ（トップ）は、本文を画面の一番上から始める 2026-08-14、メニューバーの下地が不自然に見えていた不具合の原因と、その直し方。 【何が起きていたか】実測（実機・ログアウト状態・1280px）： ・透けたヘッダー（.iwaki-header--overlay）は position:absolute なので、 入れ物の
は高さ0にたたまれます。 ・ところが WordPress は「ヘッダーと本文のあいだ」にブロック同士の間隔（1.5rem＝24px）を margin として入れます。**たたまれても、この24pxだけが残ります。** ・結果、main の上端が24px下がり、**その24pxに body の地色（和紙色）が顔を出していました。** ヘッダーは y=0 から始まるので、ロゴとメニューの上端だけが和紙色の帯に乗り、 その下は灰色（写真がまだ無いヒーロー）——**帯と土台が上下にずれて見えていました。** 【直し方】透けたヘッダーを持つページだけ、その24pxを0にします。 ヒーローの上端 24px → 0px（実測で確認）。ヘッダー帯は元から y=0 なので動きません。 ⚠️ 通常ページ（parts/header.html）は position:sticky で場所を取るため、この24pxは 「ヘッダーと本文のすきま」として正しく働いています。だから :has() で **透けたヘッダーのときだけ**に限定しています。全ページで0にしないこと。 ⚠️ :has() に対応していない古いブラウザでは、この指定が効かず24pxの帯が残るだけです （壊れません）。 */ header:has(> .iwaki-header--overlay) + main { margin-block-start: 0; } /* --- トップページ用：写真に重ねる透けたヘッダー --------------------- ページの一番上では透明で、少しスクロールすると和紙色の帯になります。 （assets/js/header.js が is-scrolled を付け外ししています） */ .iwaki-header--overlay { position: absolute; top: 0; left: 0; right: 0; z-index: 100; background: transparent !important; border-bottom: 1px solid transparent; transition: background 0.3s ease, border-color 0.3s ease; } .iwaki-header--overlay a, .iwaki-header--overlay .wp-block-navigation a { color: var(--wp--preset--color--white); } /* ページの一番上にいる間は、ロゴを白抜きにする （モックアップでは白いロゴ画像に差し替えていた部分を、 1枚のロゴを白く変換することで実現しています。 ロゴを1か所で管理でき、差し替え忘れが起きないため） */ .iwaki-header--overlay:not(.is-scrolled) .wp-block-site-logo img { filter: brightness(0) invert(1); } .iwaki-header--overlay.is-scrolled { position: fixed; background: var(--wp--preset--color--washi-light) !important; border-bottom-color: rgba(26, 58, 92, 0.15); } .iwaki-header--overlay.is-scrolled a, .iwaki-header--overlay.is-scrolled .wp-block-navigation a { color: var(--wp--preset--color--ink); } /* 🔴 トップページの写真の上の文字を読みやすくする＋メニューを下げる（2026-10-01・版 2026.10.01.1） Ikuzoさんのご指摘（原文） 「項目画面のメニューがちょっと上に上がりすぎています。仮想ページになった場合は 程よく出てますが、トップページだけ全体的に上に上がっています。」 「この写真によって字が見えなくなる。そこの部分だけ、後ろに透明な黒を敷いて文字を白に」 【実測（本番・1280幅・閲覧のみ）】メニューの入れ物は、トップも下層ページも同じ（高さ139px・ ロゴ上端41px）。違うのは「下層は和紙色の帯の中にある／トップは写真の上端ぴったりに浮いている」 点。帯が無いぶん、画面の一番上に貼り付いて"上がりすぎ"に見えていました。 ＝ ① 写真に重なっている間だけ、中身を 1rem 下げる（スクロール後の和紙色の帯は下層と同じ高さのまま） ② 写真に重なっている間だけ、ヘッダーの後ろに半透明の黒の帯を敷く（文字は白のまま） ③ 大きな写真（ヒーロー）そのものにも半透明の黒をかける（紺30% → 黒47% → .11で黒32%に緩めた）。 キャッチコピー（白）が明るい葉の上で読みにくかったため。 ⚠️ 黒の濃さ（帯）は 0.45〜0.55 の範囲。上げすぎると写真が沈みます。 ⚠️ ③の !important は、カバーブロックが持つ「背景色＝紺・opacity 0.3」を打ち消すためです。 .iwaki-hero 以外のカバーには効きません。 */ .iwaki-header--overlay > .wp-block-group { transition: padding 0.3s ease; } .iwaki-header--overlay:not(.is-scrolled) > .wp-block-group { padding-top: 1.75rem !important; } .iwaki-header--overlay:not(.is-scrolled)::before { content: ""; position: absolute; inset: 0 0 -1.5rem 0; /* 帯より少し下まで、やわらかく消える */ z-index: -1; pointer-events: none; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.5) 65%, rgba(0, 0, 0, 0) 100% ); } /* ④ メニューの文字を、写真の上では白にする 🔴 実測（本番・WordPress 7.1.2）：上の 4章の `.iwaki-header--overlay a { color: white }` は 負けていました。WordPress 本体の .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content { color: inherit } のほうが強く（クラス3つ分）、メニューの文字は親の色＝濃い茶（#2b2622）のままで、 写真の上で暗い文字になって読めていませんでした（ご指摘「字が見えなくなる」の一因）。 ＝ 本体より強い書き方で、いちばん上の段の項目だけ白にします（クラス5つ分）。 ⚠️ 親（nav）全体を白にしないこと。お品書き等のプルダウンの中は和紙色の面に濃い文字で、 親の色を継ぐため、白にすると白地に白文字になります（下の ul は黒のまま＝実測で確認）。 ⚠️ お問い合わせボタンは .iwaki-nav-cta の !important（和紙色＋紺文字）が優先されます。 */ .iwaki-header--overlay:not(.is-scrolled) .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content, .iwaki-header--overlay:not(.is-scrolled) .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle, .iwaki-header--overlay:not(.is-scrolled) .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon { color: var(--wp--preset--color--white); } /* 🔴 追記（2026-10-01・版 2026.10.01.2）：上の白指定は「開いたスマホメニュー」の中では効かせない。 開いたメニューは地が明るい（和紙色）ため、白のままだと「お品書き」「はじめての方」の▾が消える （ジャッジさんのご指摘）。1行目の文字は下の `.is-menu-open a`（851行付近）が濃い色に戻すが、 それは a にしか効かず、▾（span/button）は白のままだった。 ＝ 白指定の頭に :not(.is-menu-open) を付けて外し、念のため▾は濃い色に明示する。 */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle { color: var(--wp--preset--color--ink); } /* スマホの三本線（ハンバーガー）も、写真の上では白（濃い茶のままだと黒い帯の上で消える・実測） */ .iwaki-header--overlay:not(.is-scrolled) .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--white); } /* 🔵 Ikuzoさんのご指示で緩めた（2026-10-01・版 2026.10.01.11） ご指摘（原文）「ヘッダー画像をちょっと暗くしてます。以前よりも暗く感じる…少し明るめにして、 黒の半透明、多少緩くした方がいい」 黒の膜：0.47 → 0.32（版.1より前は紺#1a3a5c の30%だった）。 ⚠️ 明るい空の上の白文字が読みにくくなったら、0.32〜0.40 の範囲で調整する。 ヘッダーの後ろの黒い帯（上の ::before の 0.55→0.5→0）は、Ikuzoさんが「いい」とのことで変えていません。 */ .iwaki-hero > .wp-block-cover__background { background-color: #000 !important; opacity: 0.32 !important; } @media (max-width: 900px) { .iwaki-header--overlay:not(.is-scrolled) > .wp-block-group { padding-top: 1.25rem !important; } } /* --- 「お品書き」の区画へ飛んだときの、止まる位置 --------------------- トップページの商品一覧の区画には products という目印が付いており、 フッターのお品書き・商品ページの戻り・こだわり別ページのボタンが、 すべてここへ飛んできます。 🔴 この指定が無いと、見出し「お品書き」が上に貼り付いた帯の下に完全に隠れます。 実測（1280×720・目印へ直接飛んだ直後）：帯は position:fixed で高さ147.0px、 見出しの位置は上から79.9〜126.0px ＝ 帯の中にすっぽり入り、一文字も見えない。 スマートフォン（390×844）でも帯82.6pxに対して見出しは80.5px ＝ 隠れる。 ＝ 目印の手前に、帯の高さぶんの余白を取ります。区画そのものが持つ上の余白（80px）が そのまま「帯のすぐ下の空き」になり、その下に見出しが出ます。 ⚠️ 帯の高さを変えたら、この値も一緒に見直してください。 帯の高さは、縦書きのメニューの背の高さで決まります。 */ #products { scroll-margin-top: 9.25rem; /* 148px（帯147.0px） */ } @media (max-width: 900px) { /* 狭い画面ではメニューが横書きに戻り、帯が低くなる（実測82.6px） */ #products { scroll-margin-top: 5.25rem; /* 84px */ } } /* --- ナビの一番右の「お問い合わせ」だけ、丸いボタンにする ------------- */ .iwaki-nav-cta a, .wp-block-navigation-item.iwaki-nav-cta > a { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white) !important; border-radius: 999px; padding: 0.75rem 0.6rem; font-weight: 700; writing-mode: vertical-rl; text-orientation: mixed; } /* 写真に重ねている間は、和紙色のボタンに反転させる（写真の上でも読めるように） */ .iwaki-header--overlay:not(.is-scrolled) .iwaki-nav-cta a { background: var(--wp--preset--color--washi-light); color: var(--wp--preset--color--navy) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); } @media (max-width: 900px) { .iwaki-nav-cta a, .wp-block-navigation-item.iwaki-nav-cta > a { writing-mode: horizontal-tb; padding: 0.75rem 1.5rem; } } /* ロゴの大きさ（ヘッダー内） 🔴 object-fit: contain は、2026-08-14 に足した"潰れ止め"です。外さないでください。 ロゴはヘッダーの中で、メニュー（スマホではハンバーガー）と横に並ぶ flex の部品です。 画面が狭くなると、この入れ物のほうが先に縮みます。 すると、下の height（56px／44px）は固定のまま、 全体の指定 img { max-width: 100% }（7章）で幅だけが詰められ、 ロゴが横に潰れます。⚠️実測：390px幅で 179.7 × 44px ＝ 比率4.08 （本来は 6.156。＝約34%潰れていました） object-fit: contain を付けると、幅が詰められたときに 高さのほうが一緒に縮み、比率が保たれます（枠の中で上下に余りが出るだけ）。 ＝ロゴは小さくなりますが、二度と歪みません。 */ .iwaki-logo img { height: 56px; width: auto; object-fit: contain; } @media (max-width: 600px) { .iwaki-logo img { height: 44px; } } /* ハンバーガーメニューを開いたときの中身は、常に読める色に戻す */ .wp-block-navigation__responsive-container.is-menu-open a { color: var(--wp--preset--color--ink) !important; } /* ===================================================================== 5. 細かい部品 ===================================================================== */ /* 白い細枠（トップの「知る」バナーで使用） */ .iwaki-frame { border: 1px solid rgba(255, 255, 255, 0.7); padding: 3rem 2.5rem; } @media (max-width: 900px) { .iwaki-frame { padding: 2rem 1.5rem; } } /* 見出しの上に置く小さな英字・カテゴリ名 */ .iwaki-eyebrow { font-size: 0.75rem; letter-spacing: 0.2em; color: var(--wp--preset--color--red); margin-bottom: 0.25rem; } /* 中央に短い横線を引く（「コンセプトについて」の上の線） */ .iwaki-rule-top { position: relative; padding-top: 1.25rem; } .iwaki-rule-top::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2.5rem; height: 1px; background: currentColor; opacity: 0.6; } /* おしらせの一覧（日付＋見出しの1行） 🔵 2026-08-17（版 .4）：1行の上下の余白を 1rem → 1.5rem（16px → 24px）。 1行の高さ 62px → 78px（実測・1280px幅）。 理由＝おしらせは、いま記事が1本しかありません。飾りの罫が上下に1本ずつ あるため、62pxの1行が罫に挟まれて、詰まって見えていました。 行そのものにも余裕を持たせています（記事が増えても効きます）。 */ .iwaki-newslist .wp-block-post { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 1.5rem; padding: 1.5rem 0; margin: 0; border-bottom: 1px solid rgba(26, 58, 92, 0.15); font-size: 0.9rem; } .iwaki-newslist .wp-block-post-date { flex-shrink: 0; color: var(--wp--preset--color--navy); margin: 0; } .iwaki-newslist .wp-block-post-title { margin: 0; font-size: 0.9rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1.8; } /* カテゴリの小さな囲み */ .iwaki-tag { display: inline-block; border: 1px solid var(--wp--preset--color--red); border-radius: 2px; padding: 0.15rem 0.5rem; font-size: 0.7rem; color: var(--wp--preset--color--red); line-height: 1.6; } /* 会社概要などの表 */ .iwaki-infotable table { width: 100%; border-collapse: collapse; } .iwaki-infotable th, .iwaki-infotable td { text-align: left; padding: 0.9rem 1rem; border-bottom: 1px solid rgba(26, 58, 92, 0.15); border-inline: none; } .iwaki-infotable th { width: 200px; color: var(--wp--preset--color--navy); font-weight: 700; vertical-align: top; } @media (max-width: 640px) { .iwaki-infotable th, .iwaki-infotable td { display: block; width: auto; } .iwaki-infotable th { padding-bottom: 0.25rem; border-bottom: none; } .iwaki-infotable td { padding-top: 0; } } /* 注意書きの帯（「ここは仮の文章です」等） 🔴 文字の大きさを 0.8rem（12.8px）から **1rem（16px）** へ上げました（2026-08-20）。 理由＝`.claude/rules/ui-text-size.md` の下限16pxを割っていたためです。 ⚠️ この帯は「準備中です」「仮の文章です」という、**そのページで いちばん先に読まれなければならない一文**を入れる場所です。 そこが本文より小さいのは、役目と逆でした。 🔵 上げても崩れないことを、使用箇所を全部見たうえで確かめました（2026-08-20）： ・patterns/contact-body.php ／ btob-contact.php ／ company-body.php → もともと要素側で font-size:1rem を上書きしていたため、**見た目は変わりません** （＝この直しで、あちらの上書きは要らなくなりました） ・patterns/page-privacy.php → 上書きが無いので、ここだけ 12.8px → 16px になります。 一文だけの帯で、行が増えるほかの影響はありません（実測で確認） ・inc/kodawari.php → 要素側の 0.9rem が勝つため、**この直しでは変わりません** （⚠️ 0.9rem＝14.4px で、こちらも16pxを割っています。ただし inc/ は 別の担当の持ち場なので、ここでは触らずに報告だけにしてあります） */ .iwaki-note { background: rgba(168, 50, 42, 0.08); color: var(--wp--preset--color--red); border-radius: 4px; padding: 0.75rem 1rem; font-size: 1rem; line-height: 1.8; } /* 注意書きの帯を、短い一文むけに細くしたもの （1120px幅いっぱいの帯にすると、一文だけのときに強すぎるため） */ .iwaki-note--slim { max-width: 34rem; margin-inline: auto; } /* 操作の説明を入れる囲み（「気になるジャンルのアイコンをクリックしてください。」） 🔴 2026-08-14 追加。.iwaki-note の使い回しをやめて、専用に分けました。 理由＝.iwaki-note は「仮であること・注意」を伝えるための**朱赤の帯**です。 濃紺の帯の上（トップページ）では下の指定で白抜きに変わるので読めましたが、 🔴 /kodawari/ の親ページは**濃紺ではない普通の地**のため、 朱赤の文字＋薄赤の面のまま出て、**操作の案内が「警告」に見えていました。** ここに要るのは「ボタンとは違うと分かる枠」であって、警告色ではありません。 ⚠️ 枠の形（面で敷く・角丸4px・幅34remまで）は .iwaki-note と同じにしてあります。 違うのは色だけです。文字は墨、面は墨のごく薄い膜。 置いた場所が濃紺なら、下の指定で白へ切り替わります。 【ボタンと見間違えられないための作り分け】同じページに本物のボタンがあるため、 枠線なし（ボタンは1px実線）／面あり（ボタンは透明）／角丸4px（ボタンは2px）／ 太さ400（ボタンは700）／字間ふつう（ボタンは0.1em）／幅は34remまで（ボタンは文字ぶん）。 */ .iwaki-lead-box { max-width: 34rem; margin-inline: auto; background: rgba(43, 38, 34, 0.06); color: var(--wp--preset--color--ink); border-radius: 4px; padding: 0.75rem 1rem; line-height: 1.8; } /* 濃い地（濃紺の帯）の上では、白抜きに切り替える */ .has-navy-dark-background-color .iwaki-lead-box, .has-navy-background-color .iwaki-lead-box { background: rgba(255, 255, 255, 0.14); color: var(--wp--preset--color--white); } /* 囲みの2行目に出る、ショップへの案内（2026-09-04 追加） ⚠️ 1行目（操作の説明）より、ひとまわり小さくしています。 同じ大きさだと、どちらが操作の説明か分からなくなるためです。 🔵 URLがまだ入っていないあいだは、この場所に 「オンラインショップは準備中です。」という文が出ます（押せません）。 URLを管理画面から入れると、押せる文字に変わります。 ＝ 見た目の場所は同じなので、入れた前後でページの形が動きません。 🔴 なぜ、こだわりの印そのものをECへ飛ばしていないのかは、 inc/kodawari.php の iwaki_shop_url() の説明にあります。 */ .iwaki-lead-box__shop { display: inline-block; margin-top: 0.35rem; font-size: 0.95rem; } /* 押せるときだけ、下線を引いて「進める場所」だと分かるようにする ⚠️ 色は地から受け継ぎます。濃紺の帯の上では白のまま下線だけが付きます。 */ a.iwaki-lead-box__shop { color: inherit; text-decoration: underline; text-underline-offset: 0.25em; } /* 別の画面で開くことのお断り 🔴 大きさは rem で書いています。em にしないこと。 この文字は、囲みの中の案内の、さらに中にあります。 em は親の大きさに掛け算されるので、3つとも em にすると **12px台まで縮みます**（1rem × 0.9 × 0.85）。 濃紺の地に白抜きで出る場所なので、そこまで小さくすると読めません。 rem なら、どこに入れても 14.4px のままです。 */ .iwaki-lead-box__newtab { font-size: 0.9rem; white-space: nowrap; } /* --- まだ飛び先の無い「準備中」のボタン（.iwaki-btn-soon）------------ 🔵 2026-09-04 追加。いまの使い道は、定期お届け便のご案内ページ （patterns/teiki-body.php）の、いちばん下のボタン1つだけです。 🔴 中身は a（リンク）ではなく span です。**わざとです。** 押しても、どこへも移りません。行き先がまだ無いためです。 こだわりの帯の「オンラインショップは準備中です。」（inc/kodawari.php）と 同じ考え方＝**行き先が無いあいだは、押せる形にしない**。 ⚠️ 押せないのに404へ落ちる、という壊れ方をしません。 🔵 見た目は、サイトのほかのボタンと同じものです。新しい色も形も足していません。 紺の細枠・角丸2px・触ると紺地に白文字——これは theme.json の elements.button が、.wp-element-button と .wp-block-button__link の 両方に当てているためです。だから span でも同じ見た目になります。 ⚠️ display:inline-block を、ここで念のため書いています。 ボタンブロックを1つも使っていないページでは、WordPressの ボタン用のCSSが読み込まれないことがあり、そのとき span が ただの文字列のように潰れるためです。 ⚠️ 文字の大きさ 1rem（16px）も、ここで指定しています。 theme.json の既定は small（0.85rem＝13.6px）で、 .claude/rules/ui-text-size.md の下限16pxに届かないためです （ほかのボタンは、ブロックの側で同じ 1rem を上書きしています）。 */ .iwaki-btn-soon-row { margin: 0; text-align: center; } .iwaki-btn-soon { display: inline-block; /* 🔴 狭い画面で、横にはみ出さないための2行です。 このページにはボタンブロックが1つも無いため、WordPressのボタン用のCSSが 読み込まれず、box-sizing と折り返しの指定が当たらないことがあります。 文字が20字あるので、320px幅の端末では必ず折り返します。 */ max-width: 100%; box-sizing: border-box; font-size: 1rem; cursor: pointer; /* 押した感じ（浮き上がり）。色の変化のほうは theme.json が持っています */ transition: transform 0.15s ease; } /* 触ったとき＝少し浮く／押しているあいだ＝沈む （こだわりの印 .iwaki-mark と同じ、控えめな上下の動きです） */ .iwaki-btn-soon:hover { transform: translateY(-2px); } .iwaki-btn-soon:active { transform: translateY(1px); } /* 動きを減らす設定にしている方には、浮き上がりを出さない （.iwaki-mark と同じ扱いです） */ @media (prefers-reduced-motion: reduce) { .iwaki-btn-soon { transition: none; } .iwaki-btn-soon:hover, .iwaki-btn-soon:active { transform: none; } } /* 濃い地（濃紺の帯）の上に置いた注意書き ⚠️ 朱赤の文字のままでは濃紺に沈んで読めません（実測でコントラスト比2.3対1。 読みやすさの基準は4.5対1）。白抜きの帯に切り替えて、10.2対1にしています。 「囲って、仮であることを目立たせる」という役割は同じです。 */ .has-navy-dark-background-color .iwaki-note, .has-navy-background-color .iwaki-note { background: rgba(255, 255, 255, 0.14); color: var(--wp--preset--color--white); } /* --- ヒーローの中身の入れ物を、帯いっぱいに広げる --------------------- おしらせを「ヒーローの右下」に浮かせるための"基点"を作っています。 🔴 カバーブロックは、写真（重ねる色）を position:absolute で敷いています。 その上に中身を出すために、中身の入れ物のほうが position:relative に なっている作りです。だから、この入れ物を static にしてはいけません （写真の色が中身の上にかぶさります）。 代わりに align-self:stretch で"入れ物を帯と同じ高さまで伸ばして"、 入れ物の右下＝帯の右下、という状態を作っています。 （patterns/hero.php で帯の余白（padding）を 0 にしてあるのが前提） */ .iwaki-hero > .wp-block-cover__inner-container { align-self: stretch; display: flex; flex-direction: column; justify-content: center; } /* トップのヒーローに置く、最新のおしらせ（写真の右下に浮かせる） ⚠️ モックアップ styles.css の .hero__notice と同じ姿にしてあります。 以前は position が無く、写真の中の"流れの中"に入っていたため、 そのぶんヒーローが縦に伸びていました（実測850px／正しくは612px）。 2026-08-14 修正。 */ .iwaki-hero-notice { position: absolute; inset-inline-end: 1.5rem; inset-block-end: 1.5rem; z-index: 2; background: rgba(250, 246, 236, 0.94); color: var(--wp--preset--color--ink); border-radius: 4px; padding: 0.75rem 1.25rem; font-size: 0.8rem; line-height: 1.5; box-shadow: 0 4px 20px rgba(16, 37, 61, 0.25); max-width: 340px; } /* スマートフォンでは、左右いっぱいに寝かせる（モックアップ L750-757 と同じ） */ @media (max-width: 900px) { .iwaki-hero-notice { inset-inline: 1rem; inset-block-end: 1rem; max-width: none; } } /* ===================================================================== キャッチコピー（ロゴ ＋ 縦の文字の2枚）── 2026-08-20 にここへ移りました ===================================================================== 🔵 何が変わったか 以前は hero-catchcopy-white.png という**1枚**（663×1950）に、 上のロゴ（波の意匠）と下の縦の文字が焼き込まれていました。 1枚だと、パソコンとスマホで**ロゴと文字の比を変えられません。** ＝ スマホでロゴが大きく見えすぎる、という不具合の正体でした。 2枚に分けたので、**大きさを画面ごとに別々に決められます。** assets/images/hero-logo-white.png 560 × 307px （横長・縦/横 0.548） assets/images/hero-text-white.png 420 × 1196px （縦長・縦/横 2.848） 🆕 2026-10-01（版 2026.10.01.3）：ご依頼で、2枚とも新しい絵に差し替えました （文面は「津軽の薬問屋が届ける、養生のススメ。」）。上の寸法は**新しい絵**のもの。 これより下の「312×1200」「0.474」などの数字は、**差し替え前の絵**で測った値です （新しい絵は文字の列がやや太く、同じ幅で出すと1字はいくらか大きくなります）。 大きさの指定（max-width / max-height）は、差し替え前のまま触っていません。 ⚠️ 分ける前の1枚を測ったところ、上のロゴは 661×362（比0.548）、 下の文字は 387×1489（比3.848）でした。新しい2枚の中身の比と **小数第2位まで一致**しています＝同じ絵を切り分けたものです。 🔴🔴 いちばん大事な決まり：**width に数値を入れないこと。** （2026-08-19 に1枚もので実際にやってしまった失敗の記録です） `width: clamp(...)` を残したまま `max-height` を足すと、 **高さだけが切られて幅が残り、絵が横に潰れます。** Chrome・1366×768（表示660px）での実測： | 書き方 | 実寸 | 比 | |------------------------------------------|----------------|----------| | width: clamp(...) ＋ max-height: 56vh | 170.0 × 369.6px| 2.17 ← 潰れる | | max-height を外す | 170.0 × 500.0px| 2.94（正）| | **width: auto ＋ max-width ＋ max-height**| 125.7 × 369.6px| 2.94（正）| 理由＝**幅が auto でないと、高さの上限に当たっても幅が計算し直されません。** 画像の既定は object-fit: fill（枠に合わせて伸びる）なので、中身が伸びます。 ＝ 大きさは **max-width と max-height の2つだけ**で決めます。 🔴 高さも、height ではなく **max-height** で書くこと（裏返しの同じ失敗です）。 height: 43vh と書くと高さが「固定」になるため、max-width が先に当たった ときに**横だけが縮んで、絵が平たく潰れます**（1枚もののとき、360×1200 で 実測：比が 2.94 → 3.48 に崩れました。2026-08-19）。 両方を「上限」にしておけば、ブラウザが元の比を保ったまま、 きついほうに合わせて縮めてくれます。 🔵 大きさの決め方（占有率で決めています） ヒーローの高さは 85vh。キャッチが「ヒーローの何割を占めるか」を、 画面の大きさが変わっても一定にするため、上限を **vh** で書いています。 | 画面 | ロゴ | すき間 | 文字 | 合計 | ヒーロー比 | |-------------|-------|--------|--------|--------|-----------| | パソコン | 10.8vh| 2.2vh | 43vh | 56.0vh | 65.9% | | スマホ | 7vh | 2.5vh | 38.5vh | 48.0vh | 56.5% | 🔵 合計は、分ける前の1枚のとき（パソコン56vh／スマホ48vh）と**同じ**です。 ＝ 全体の大きさは変えず、**中の配分だけ**を変えました。 🔴 スマホ側は、ロゴを相対的に小さくして文字を主役にしてあります。 分ける前と分けた後の、スマホ 390×700 での実測（見込み）： | 部分 | 分ける前 | 分けた後 | |--------|--------------|--------------| | ロゴ | 113.9×62.4px | 86.3×49.0px ← 幅が76%に | | すき間 | 14.3px | 17.5px | | 文字 | 66.7×256.5px | 70.1×269.5px ← 少し大きく | | 合計高 | 336.0px | 336.0px（同じ）| ロゴの幅 ÷ 文字の幅 ＝ **1.71 → 1.23**。細い文字の列が 横長のロゴに負けなくなります（実機での指摘への答え）。 🔴 上限を、これ以上大きくしないこと。 スマホ 390×700 では、合計が **約53vh** を超えると、下のスライドの点に 当たります（点は下から 6rem＋24px＝120px の位置）。いまは 48vh なので、 余裕は 5vh ぶんです。実測での間は **17.5px**（分ける前とまったく同じ）。 ⚠️ 分ける前から残っている弱点（今回で悪くも良くもなっていません） **画面の縦が 611px より短いスマホでは、縦の文字の下端が点に重なります。** Chrome 実測：375×553（iPhone SE でアドレスバーが出ている状態に相当）で **11.4px 重なりました**（分ける前も 9.7px 重なっていたので、ほぼ同じです）。 ＝ 直すなら「キャッチを小さくする」のではなく、**点の位置（6rem）**か おしらせの置き方を見直すのが筋です。今回はそこを触っていません。 🔴 filter: drop-shadow は2枚とも外さないこと（2026-08-19 追加） 白い書き文字が、明るい空の上で溶けて読めなくなるためです。 ヒーローの覆いは #1a3a5c の30%（patterns/hero.php の dimRatio:30）。 明るい空の上では、白とのコントラスト比が **約2.2:1** まで落ちます （大きな文字の基準 3:1 も割ります）。 🔴 box-shadow ではなく **drop-shadow**。drop-shadow は「透明PNGの 文字の形」に沿って影を落とします。box-shadow だと四角い影が出ます。 🔵 大きさは1pxも変わりません（影は場所を取りません）。 ⚠️ 覆いを濃くする（30→45）方法は採りません。写真全体が暗く沈むためです。 🔴 中央そろえは、ここが持っています。 patterns/hero.php は wp:html で書き出しているため、WordPress 本体の .wp-block-image / .aligncenter の見た目は**効きません**（理由は hero.php の覚え書き）。margin を auto にしているのが、その代わりです。 */ .iwaki-hero-logo { margin: 0 auto; } /* 2枚のあいだの空き。🔵 ここだけを触れば、すき間を画面ごとに変えられます */ .iwaki-hero-text { /* 🆕 2026-10-01（版 2026.10.01.13）：波のロゴを外したので、ロゴとの空き（2.2vh）は 0 にした。 上下の位置は、下の .iwaki-hero > .wp-block-cover__inner-container の padding が決める。 */ margin: 0 auto; } .iwaki-hero-logo img, .iwaki-hero-text img { display: block; width: auto; height: auto; margin-inline: auto; filter: drop-shadow(0 2px 8px rgba(16, 37, 61, 0.55)); } /* ロゴ（横長・560×307） ⚠️ 幅の上限は、分ける前の1枚と同じ値です。パソコンでの見え方を変えないため。 */ .iwaki-hero-logo img { max-width: clamp(120px, 14vw, 170px); max-height: 10.8vh; } /* 縦の文字（縦長・420×1196。差し替え前は312×1200） 🔵 幅の上限 100px は、分ける前の1枚のときに文字が占めていた幅 （387 ÷ 663 × 170px ＝ 99.2px）から出しています。 ■ 1字の大きさの数え方（2026-08-20 実測。小さくする前に必ずここを見ること） この画像は **縦2列**（差し替え前の文面。右＝「弘前の薬問屋が届ける、」11字／ 左＝「養生のごちそう。」8字。いまは「津軽の薬問屋が届ける、養生のススメ。」）。列1本の幅を実測すると **148〜150px**、 画像の幅312pxに対して **0.474** でした。 縦書きでは「列の幅」がそのまま文字の大きさになります。＝ **1字 ≒ 表示される文字画像の幅 × 0.474** （幅ではなく高さから出すなら ×0.1233。幅＝高さ÷3.846 のため） 🔵 いまの設定での1字（実測）＝ 390×700 で **33.2px**、 いちばん小さくなる 375×553 でも **26.2px**。 **16pxの下限（.claude/rules/ui-text-size.md）にも、20pxの目安にも 余裕で届いています。** ＝ 縦の短い画面でも、縮める必要はありません。 ⚠️ 「1字＝画像の幅×0.204」という数字が出回っていますが、**誤りです。** 0.2033 は、透明度を機械的に区切ったときに出る「かたまりの高さ ÷ 画像の高さ」で、**幅とは無関係の値**です。この筆文字は続け字で 隣の字とつながるため、機械的な区切りでは1字を切り出せません （実際、区切ると19字が4かたまりになりました）。**目で数えた列幅が正です。** */ .iwaki-hero-text img { /* 🔵 2026-10-01（版 2026.10.01.11）Ikuzoさんのご指示で、パソコン幅の縦の文字を約1.5倍にした （ご指摘「文字が小さいです…この文字の約1.5倍にしてみてください」「マークはこの大きさでもいい」）。 変更前：幅 clamp(70px, 8.2vw, 100px)／高さ上限 43vh 変更後：幅 clamp(105px, 12.3vw, 150px)（1.5倍）／高さ上限 max(120px, 72vh − 176px) 🔴 高さ上限の出どころ（ここを変えるときは引き直すこと） ヒーローは 85vh。ロゴの高さ上限 10.8vh と、ロゴとの空き 2.2vh は変えていない。 ・上は、ヘッダーのメニューに当たらないよう、いままでのロゴの位置（上から約116px）を保つ ・下は、スライドの点（下から28〜52px）に当たらないよう、下から60px 空ける → 文字に使える高さ ＝ 85vh − 10.8vh − 2.2vh − 116px − 60px ＝ 72vh − 176px 背が低い画面では、この上限が先に効いて、文字が自然に小さくなる（見切れない）。 そのため、1.5倍になるのは縦が約900px以上の画面。1280×800 では約1.4倍、1280×720 では約1.2倍。 上と下の位置は、下の @media (min-width: 901px) の padding-top: 3.5rem がそろえている。 ⚠️ スマホ・タブレット（900px以下）は下の @media が決めるので、ここは効かない（変えていない）。 */ /* 🆕 2026-10-02（版 2026.10.01.26）Ikuzoさんのご指示で、縦の文字（津軽の薬問屋…のキャッチ画像）をさらに 1.25倍にした（「あと1.2から1.3倍」の中間）。 旧：幅 clamp(105px, 12.3vw, 150px)／高さ上限 max(120px, calc(85vh − 273px)) 新：幅 clamp(131.25px, 15.375vw, 187.5px)（×1.25）／高さ上限は変えていない（下の説明のとおり、メニュー・おしらせ・点に重ならないための上限なので、倍にするとはみ出す） ・縦が約 1000px 以上の画面（1920×1080 など）では、高さ上限が効かず、ちょうど1.25倍（約188×534px）。 🆕 版 .27：Ikuzoさんの追加ご指示で、この 1.25倍 を 1.15倍に下げた（.25 の値 clamp(105px, 12.3vw, 150px) に対して）。下の max-width が現行値。1920×1080 では 約172×491px。 ・それより低い画面では、高さ上限が先に効いて、いままでと同じ大きさのまま（重ならないことを優先）。 ・戻す＝上の「旧」の1行に戻す。 */ max-width: clamp(120.75px, 14.145vw, 172.5px); /* 🆕 版 .27：.25 の値（clamp(105px, 12.3vw, 150px)）の 1.15倍（.26 は 1.25倍＝clamp(131.25px, 15.375vw, 187.5px)）。高さ上限は据え置き */ /* 🆕 2026-10-01（版 2026.10.01.13）波のロゴを外したので、高さ上限を引き直した。 旧：max(120px, 72vh − 176px)（ロゴ 10.8vh ＋ 空き 2.2vh ＋ 上116px ＋ 下60px を見込んでいた） 新：max(120px, 85vh − 273px) ・85vh ＝ ヒーローの高さ ・155px ＝ ヘッダー（メニュー）の下端（実測 154.8px）／86px ＝ 右下のおしらせの上端までの高さ（実測 86.4px） ・16px×2 ＝ 上下に最低限あける空き → 文字に使える高さ ＝ 85vh − 155 − 86 − 32 ＝ 85vh − 273px。 幅の上限（150px）は変えていない。縦が約 825px 以上の画面では高さ上限が効かず、本来の大きさ（約150×427px）。 旧と新の差（実測）：1366×768 で幅 132→134px、1280×720 で 120→119px、1280×600 で 90→83px。 */ max-height: max(120px, calc(85vh - 273px)); } /* 🆕 2026-10-01（版 2026.10.01.13）縦の文字を「ヒーローの見える範囲」の真ん中に置く。 見える範囲 ＝ 上のヘッダー（メニュー）の下端から、下のおしらせ・点の上端まで。 上に「ヘッダーの高さ」、下に「おしらせ・点が占める高さ」だけ余白（padding）を入れ、 その内側を flex で上下中央にしているので、文字の上の空きと下の空きは必ず等しくなる。 （旧：パソコン幅だけ padding-top 3.5rem。ロゴ＋文字の塊を寄せるための値で、ロゴを外した今は不要） ・パソコン（901px〜）：上 155px（ヘッダー下端 154.8px）／下 86px（おしらせの上端 ＝ 帯の下から 86.4px） ・スマホ（〜900px） ：上 77px（ヘッダー下端 77px）／下 120px（点の上端 ＝ 帯の下から 120px） ⚠️ ヘッダーの高さ・おしらせの大きさ・点の位置を変えたら、この数字も引き直すこと。 ⚠️ おしらせ・スライドの点は .iwaki-hero を基点に浮いているので、この padding には影響されない。 */ .iwaki-hero > .wp-block-cover__inner-container { padding-top: 155px; padding-bottom: 86px; } /* --- スマホ・タブレット（900px以下）------------------------------------ 🔴 ここが今回の眼目です。**ロゴを小さく、文字を主役に**しています。 パソコンと同じ比のままだと、細い文字の列に対してロゴが大きく見えます （2026-08-20 実機での指摘）。 ⚠️ max-width（vw）は、縦に細長い端末（例：360×1200）で 横に広がりすぎないための保険です。ふつうのスマホでは効きません （390×700 では、2枚とも高さの上限のほうが先に当たります）。 */ @media (max-width: 900px) { /* 🔴🔴 下の clamp（margin の3つめ）を消さないこと。**縦の短いスマホで、 縦の文字の下端が、スライドの点に重ならないようにしている一行です。** ■ 何が起きていたか（2026-08-20 実測・分ける前から続いていた不具合） 点は「下から 6rem（96px）」の位置にあり、**この96pxは画面が縮んでも 縮みません**（rem は画面の高さと無関係のため）。一方キャッチは vh で 決めているので、画面が縦に短くなるほど縮みます。 ＝ **短い画面ほど、点のほうが相対的にせり上がってきます。** 375×553（iPhone SE でアドレスバーが出た状態）で **11.4px 重なり**、 414×600 でも 2.1px 重なっていました。 ■ なぜ「キャッチを小さくする」で直さなかったか 🔵 **文字の大きさを1pxも減らさずに直せるから**です。 キャッチの下に空きを置くと、真ん中そろえの基準がその分だけ上へずれます （置いた空きの**半分だけ**上がる）。＝ 大きさは変えずに、位置だけ逃がせます。 ⚠️ 小さくする案も検討しましたが、**この画像は1字が思ったより大きく、 縮める必要がありませんでした**（下の「1字の大きさ」を参照）。 🔴 おしらせ（1rem）と点（6rem）の位置は、指示どおり一切動かしていません。 ■ 256px と 37vh の出どころ（点が動いたら、ここを引き直します） 点の上端 ＝ 帯の高さ −(6rem＝96px ＋ 点の高さ24px) ＝ 帯 − 120px キャッチ下端 ＝ (帯 ＋ 合計 − 下の空き) ÷ 2 余裕 ＝ (帯 − 合計 ＋ 下の空き) ÷ 2 − 120px … これを 8px 以上に → 下の空き ≧ 256px − 帯 ＋ 合計 ＝ 256px − 0.85×画面高 ＋ 0.48×画面高 ＝ **256px − 37vh** 🔵 画面が高いと右の値がマイナスになるので、clamp の最小（2.3vh）が効きます。 ＝ **ふつうのスマホ（390×700 等）では、いままでと1pxも変わりません。** ⚠️ 上限 30vh は、横向きの極端に低い画面で空きが暴走して、 ロゴの頭が帯からはみ出す（切れる）のを止めるための蓋です。 ■ 実測（Chrome・キャッチ下端から点までの余裕） | 画面 | 直す前 | 直した後 | |----------|----------|----------| | 375×553 | −11.4px | ＋8.0px | | 414×600 | − 2.1px | ＋8.0px | | 360×640 | ＋ 5.8px | ＋8.0px | | 390×664 | ＋10.5px | ＋10.5px（変化なし）| | 390×700 | ＋17.5px | ＋17.5px（変化なし）| ■ 2.3vh（最小値）の出どころ＝**分ける前と同じ高さに揃えるため**です。 分ける前は、WordPress 本体の .wp-block-image が持つ「下に1em」が たまたま同じ働きをしていました。2枚に分けて余白を0にしたため、 キャッチが8pxだけ下がり、点との間が 17.5px → 9.5px に詰まりました。 */ /* 🆕 2026-10-01（版 2026.10.01.13）波のロゴを外したので、上の説明にある 「margin の clamp（点を避けるための下の空き）」は、padding の上下そろえに置き換えた。 上 77px（ヘッダー）／下 120px（点の上端）の内側で、縦の文字が上下中央に座る。 文字の大きさ（幅 24vw・高さ 38.5vh）は変えていない。 縦に極端に低い画面（横向き等）だけ、はみ出さないよう高さ上限を 85vh − 213px に絞る （375×553 までは 38.5vh のほうが小さいので、一切変わらない）。 */ .iwaki-hero > .wp-block-cover__inner-container { padding-top: 77px; padding-bottom: 120px; } .iwaki-hero-logo img { max-width: 34vw; max-height: 7vh; } /* 🆕 2026-10-01（版 2026.10.01.19）スマホ幅（900px以下）だけ、縦の文字を約1.3倍にした。 Ikuzoさんのご指摘「ロゴマークを取ったおかげで全体的に縦が短くなってしまっている…今の1.3倍ぐらいは必要」 「PCの方は問題ない」。パソコン幅（901px〜）は上の指定のまま・触っていない。 旧：max-width 24vw／max-height max(80px, min(38.5vh, calc(85vh − 213px))) 新：max-width 31.2vw（24×1.3）／max-height max(80px, min(50vh, calc(85vh − 229px))) ・50vh ＝ 38.5vh × 1.3（≒50.05）。375×667 で幅 90→117px・高さ 256→333px。 ・85vh − 229px の出どころ＝ ヒーロー 85vh から、上のヘッダー下端（padding-top 77px）と 下の点の上端まで（padding-bottom 120px）を引き（197px）、さらに上下16pxずつの空き（32px）を残した値。 旧は 213px（197＋16）で、上下の空きが片側8pxだった。いまは片側16px。 ・低い画面（例：375×553）では、この上限が先に効いて自然に小さくなる（見切れない・点に重ならない）。 ・戻す＝上の「旧」の2行に戻す。 */ .iwaki-hero-text img { max-width: 31.2vw; max-height: max(80px, min(50vh, calc(85vh - 229px))); } } /* 🆕 2026-10-02（版 2026.10.01.27）スマホ（599px以下）の縦の文字は .25 の値のまま（幅 31.2vw・高さ上限 max(80px, min(50vh, 85vh − 229px))）。 .26 で足した「599px以下だけ 1.25倍」（幅 39vw・高さ上限 max(80px, min(62.5vh, 100vh − 229px))）は、Ikuzoさんのご指示で取り消した（ヒーローの伸びも元に戻る）。 パソコン（901px〜）は .25 の 1.15倍に変更（Ikuzoさん追加ご指示）。再び大きくするなら、.26 の zip（iwaki-theme_v2026.10.01.26.zip）を参照。 */ /* --- ここから下は、分ける前の1枚もの用の指定です（2026-08-20 以降は未使用） --------------------------------------------------------------------- 🔴 消していません。**わざと残してあります。** 理由＝過去に「ページまるごとのパターンを固定ページに貼ると、貼った時点の HTMLが本文へ焼き付く」という事故が起きています（hero.php 冒頭の覚え書き）。 もし古い記述が焼き付いたページが残っていた場合、この指定を消すと、 そのページだけ**キャッチが原寸（幅663px）で出て大きく崩れます。** 🔵 assets/images/hero-catchcopy-white.png も、同じ理由で消していません。 新しいトップページは、この画像も、この指定も使いません。 ⚠️ 下の覚え書きに出てくる数字（663×1950・比2.94・56vh・48vh・46vw）は、 すべて**分ける前の1枚もの**の話です。**いま効いているのは、上の指定です。** 当時の実測の記録として、書き換えずに残してあります。 */ /* --- キャッチコピー画像（1枚もの・パソコン）※未使用 ---------------------- 縦組みの画像なので、大きさは「幅の上限」と「高さの上限」の2つで抑えます。 🔵 下のスマホ用と**同じ書き方（width: auto ＋ 上限2つ）に揃えてあります。** 🔴 max-height: 56vh を足した理由（2026-08-19 追加） ＝ スマホ側と同じ病気が、パソコン側にも残っていました。 幅だけで決めていると、キャッチの高さは 170px × 2.94（＝663:1950 の比）＝ **約500px でどの画面でも同じ**なのに、 ヒーローの高さ（85vh）だけが画面に合わせて伸び縮みします。 ＝ 「ヒーローの何割を占めるか」が画面ごとに暴れます。 | 画面 | ヒーロー(85vh) | 足す前 | 足した後 | |-----------------------------|----------------|--------|----------| | ノートPC 1366×768（表示660px）| 561px | 89% | 66% | | ノートPC 1440×900（表示790px）| 671px | 75% | 66% | | デスクトップ 1920×1080（960px）| 816px | 61% | 61%（変化なし）| 🔵 大きい画面では何も変わりません（500px < 56vh のため上限に当たらない）。 **背の低い画面のときだけ効きます。** そこが狙いです。 上限が効き始めるのは、表示領域の高さが **893px 未満**のときです。 🔴🔴 失敗の記録：**width を決め打ちしたまま max-height を足してはいけません。** （2026-08-19。設計時の見込みが、実測で外れた記録です） 最初は `width: clamp(120px, 14vw, 170px)` を残したまま max-height を足しました。 「比は崩れないはず」と見込んでいましたが、**実際には横に潰れました。** Chrome・1366×768（表示660px）での実測： | 書き方 | 実寸 | 比 | |------------------------------------------|----------------|----------| | width: clamp(...) ＋ max-height: 56vh | 170.0 × 369.6px| **2.17** ← 潰れる | | max-height を外す | 170.0 × 500.0px| 2.94（正）| | **width: auto ＋ max-width: clamp(...)** | 125.7 × 369.6px| **2.94（正・採用）** | （画像本来の比＝663:1950＝2.94） 理由＝**幅が auto でないと、高さの上限に当たっても幅が計算し直されません。** 高さだけが切られ、幅は170pxのまま残るので、中身が引き伸ばされます （画像の既定は object-fit: fill ＝ 枠に合わせて伸びる、のため）。 🔵 スマホ側（下の @media）が無事だったのは、**そちらが width: auto だから**です。 ⚠️ 次に大きさを触る人へ：**width に数値を入れ直さないでください。** 大きさは max-width と max-height の2つだけで決めます。 🔵 中央そろえは、この img ではなく **figure 側**が持っています （patterns/hero.php が figure に aligncenter を付けており、 WordPress 本体が margin-left/right: auto で中央に寄せます）。 ＝ img の幅を auto にしても、中央そろえは崩れません（2026-08-19 実測）。 🔴 filter: drop-shadow を足した理由（2026-08-19 追加） ＝ 白い書き文字が、明るい空の上で溶けて読めなくなるためです。 ヒーローの覆いは #1a3a5c の30%（patterns/hero.php の dimRatio:30）。 背景写真の明るい空の上では、白文字とのコントラスト比が **約2.2:1** まで 落ちます（大きな文字の基準 3:1 も割ります）。 キャッチを小さくしたぶん線が細くなり、体感はむしろ悪化していました。 🔴 box-shadow ではなく **drop-shadow** を使うこと。 drop-shadow は「透明PNGの文字の形」に沿って影を落とします。 box-shadow だと、画像の外枠に四角い影が出ます。 🔵 大きさは1pxも変わりません（影は場所を取りません）。 ⚠️ 覆いを濃くする（30→45）方法は採りません。写真全体が暗く沈むためです。 */ .iwaki-hero-catch img { width: auto; height: auto; max-width: clamp(120px, 14vw, 170px); max-height: 56vh; filter: drop-shadow(0 2px 8px rgba(16, 37, 61, 0.55)); margin-inline: auto; } /* --- キャッチコピー画像（1枚もの・スマホ／タブレット）※未使用 ------------ 🔴 ここだけ「幅」ではなく「高さ」で大きさを決めています。 理由＝この画像（hero-catchcopy-white.png）は 663 × 1950px。 **縦が横の 2.94倍**という、とても縦長の1枚です （上が波の意匠、下が縦組みの書き文字2行。両方が1枚に焼き込まれています）。 ＝ 幅を1px広げるたびに、高さが 2.94px 伸びます。 ⚠️ 以前の指定（width: clamp(170px, 46vw, 220px)）だと、 iPhone（画面幅390〜430px）で 幅180〜198px ＝ **高さ530〜580px**。 ヒーローは min-height:85vh（iPhoneでおよそ600〜650px）なので、 **キャッチだけでヒーローの85〜90%**を占めていました。 ＝ 背景の岩木山と田んぼが、ほとんど隠れていました（2026-08-19 修正）。 🔵 高さで決めると、端末の縦横比が変わっても 「ヒーローの何割を占めるか」が変わりません （ヒーロー＝85vh、キャッチ＝48vh と、同じ vh を基準にしているため）。 48 ÷ 85 ＝ **ヒーローの約56%**。残りの約44%が上下に空いて、風景が見えます。 ⚠️ max-width は、縦に細長い端末（例：360×1200）で幅が広がりすぎないための 保険です。 🔴 高さは height ではなく **max-height** で指定すること（width・height は auto のまま）。 height: 48vh と書くと、高さが「固定」になるため、max-width が効いたときに **横だけが縮んで、書き文字が平たく潰れます**（360×1200 で実測：縦横比が 2.94 → 3.48 に崩れました。2026-08-19）。 両方を「上限」にしておくと、ブラウザが元の比（663:1950）を保ったまま、 きついほうに合わせて縮めてくれます。 🔵 上限（max-）だけで指定しているので、WordPress 本体が持っている .wp-block-image img { height: auto; max-width: 100% } とぶつかりません （本体は max-height を持っていないため）。本体をあとから読ませて わざと不利にした状態でも、表示が変わらないことを実測で確かめました （2026-08-19・Chrome）。 🔴 「波だけ小さくして、文字はそのまま」は、CSSではできません。 1枚の画像なので、必ず両方が同じ割合で変わります。分けたい場合は、 画像を作り直すか、波と文字を2枚に分ける必要があります。 🔵 2026-08-20：実際に2枚に分けたものを受け取りました。 ＝ このファイルの上のほう（.iwaki-hero-logo / .iwaki-hero-text）が、 その2枚を受けている、いま効いている指定です。 */ @media (max-width: 900px) { .iwaki-hero-catch img { width: auto; height: auto; max-height: 48vh; max-width: 46vw; } } /* --- ヒーローの写真の切り替え（スライド）-------------------------------- 🔵 2026-08-18 追加。写真を最大5枚まで重ねて、フェードで入れ替えます。 🔴🔴 いちばん大事な決まり：1枚目が見えているのは「CSSの側の既定」です。 JavaScript は「切り替える」だけを足しています。 ＝ JS が読み込まれなくても・落ちても、1枚目は必ず出ます。 ⚠️ この関係を逆にしないこと。JSで1枚目を出す形にすると、 JSが落ちた瞬間にヒーローが真っ黒になります。 🔴 横に動かす形（transform: translateX）にしないこと。 上にキャッチコピー画像が載っているので、横に流すと文字とぶつかります。 重ねてフェードなら、文字は動きません。 ⚠️ 写真そのものの敷き方（画面いっぱいに広げる・切り抜く）は WordPress の .wp-block-cover__image-background が持っています。 ここでは「見えるか・見えないか」だけを決めています。 */ /* JSが動いていないとき＝1枚目だけが見えている */ .iwaki-hero-slide { opacity: 0; } .iwaki-hero-slide--first { opacity: 1; } /* JSが動いたとき＝どれを見せるかはJSが決める（is-active） ⚠️ この2つは、上の --first より指定が強いので、ちゃんと上書きされます （.iwaki-hero[data-slider] の分だけ強い）。 */ .iwaki-hero[data-slider="on"] .iwaki-hero-slide { opacity: 0; transition: opacity 0.9s ease-in-out; } .iwaki-hero[data-slider="on"] .iwaki-hero-slide.is-active { opacity: 1; } /* 点（手送り） 🔵 JSが動いたときだけ出します。押しても何も起きない点を、 JSが落ちている画面に出さないためです。 */ .iwaki-hero-dots { display: none; } .iwaki-hero[data-slider="on"] .iwaki-hero-dots { display: flex; position: absolute; inset-inline: 0; inset-block-end: 1.75rem; z-index: 2; justify-content: center; gap: 0.6rem; } /* 🔴🔴 押せる範囲は 24px、見た目の丸は 10px。**この2つを一致させないこと。** 見た目どおりの10pxにすると、指で押せません（親指の当たる範囲は およそ9mm＝24px以上が目安）。 ⚠️ 2026-08-18 修正：はじめ「padding で広げてある」と書いていましたが、 実際は padding が 0 で、押せる範囲が 10px しかありませんでした。 いまは、押される四角（button）を24pxにし、 **中の丸は ::before で描いています。** */ .iwaki-hero-dot { appearance: none; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; outline-offset: 2px; } /* 見た目の丸（押せる範囲とは別物です） */ .iwaki-hero-dot::before { content: ""; width: 10px; height: 10px; border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 50%; box-shadow: 0 1px 4px rgba(16, 37, 61, 0.4); transition: background-color 0.3s ease; } .iwaki-hero-dot.is-active::before { background: rgba(255, 255, 255, 0.95); } .iwaki-hero-dot:hover::before { background: rgba(255, 255, 255, 0.6); } /* キーボードで選んだときに、どれを選んでいるか分かるようにする 🔴 この指定を消さないこと。消すと、キーボードだけで操作している方には いまどの点にいるのかが分からなくなります。 */ .iwaki-hero-dot:focus-visible { outline: 2px solid #ffffff; } /* スマートフォンでは、おしらせが左右いっぱいに寝るので、点はその上へ逃がす ⚠️🔴 数字を小さくしないこと。おしらせと重なります。 おしらせ＝下から1rem ＋ 高さおよそ2.7rem（**ただし文字が1行のとき**）。 🔴 いま入っているおしらせは仮の文言です（「2026.07.XX 新商品…」）。 本物の見出しに差し替えると、**2行になることがあります。** 2行なら高さおよそ4rem＝下から5rem までがおしらせの場所です。 ＝ 2行になっても当たらないよう、6rem まで上げてあります （2026-08-18 に 4.5rem から変更。4.5remでは、2行になった瞬間に重なりました）。 */ @media (max-width: 900px) { .iwaki-hero[data-slider="on"] .iwaki-hero-dots { inset-block-end: 6rem; } } /* 動きを減らす設定にしている方には、フェードもさせない ⚠️ 自動で切り替えないようにするのは JavaScript の側です （assets/js/hero-slider.js）。ここは「切り替わるときに、 じわっとさせない」だけを受け持ちます。 */ @media (prefers-reduced-motion: reduce) { .iwaki-hero[data-slider="on"] .iwaki-hero-slide { transition: none; } } /* フッターのロゴ（濃い背景の上に白抜きで置く） */ .iwaki-logo-invert img { filter: brightness(0) invert(1); opacity: 0.9; } /* フッターの縦型ロゴ（青海波が上・文字が下）＝ assets/images/logo-vertical.png 専用 🔴 2026-08-14 追加。フッターのロゴがモックアップと違っていた（横型が出ていた）ための修理。 正は「青海波が上・文字が下」の縦型です。 モックアップ styles.css L611-617 の .footer__logo-img と同じ指定にしてあります。 画像は 1400 × 752px（比率1.8617）なので、高さ96pxのとき幅178.7pxになります。 （2026-08-16に軽量化する前は 2701 × 1450px＝比率1.8628・幅178.8px。 実機で測った差は0.094pxで、並びは変わりません） ⚠️⚠️ この高さを .iwaki-logo-invert img のほうへ書かないこと。 テーマ側のフッター（parts/footer.html）は、いまも横型ロゴを出す wp:site-logo です。 そちらに height:96px が効くと、横型ロゴ（比率6.156）が幅591pxまで巨大化します。 ＝「プレビューだけ直っていて、テーマは壊れる」状態になります。 だから"縦型ロゴ専用のクラス"として分けてあります。 テーマのフッターを縦型へ差し替えたとき、そのまま噛み合います （差し替え方は プレビューの注記_2026-08-14.md の「13.」）。 */ .iwaki-logo-vertical img { display: block; height: 96px; width: auto; object-fit: contain; margin: 0 auto 1.5rem; filter: brightness(0) invert(1); opacity: 0.9; } /* ===================================================================== 5-B. コンセプトページ（私たちの想い）だけの見た目 --------------------------------------------------------------------- 🔴 2026-08-14 追加。ここは見本（プレビュー/コンセプトページ_2026-08-14.html）の 指定を、そのまま移したものです。 ⚠️ 一度、この指定を移さずに「WordPress標準のクラスで組み直す」という直し方をしたところ、 本文の幅・引用の縦罫・2段組みが全部落ち、見本と実機で見た目が食い違いました。 **見た目を目分量で近づけるのではなく、見本の指定をそのまま置く**のが正です。 数値を変えたくなったら、まず見本の側を直してから、ここへ移してください。 ⚠️ クラス名の cn- は「コンセプトページ専用」の印です。他のページで使わないこと。 ===================================================================== */ /* 読ませる文章の1行の長さ。 ⚠️ テーマの既定の本文幅は1120pxですが、明朝体で1,400字を読ませるには広すぎます （1行60字を超えると、次の行の頭を目が見失います）。 このページだけ 40rem（＝およそ1行40字）に絞っています。 */ .cn-measure { max-width: 40rem; margin-left: auto; margin-right: auto; } /* 節と節の間 */ .cn-section { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50); } /* 大見出し（節のタイトル）。中央そろえ */ .cn-h2 { text-align: center; font-size: clamp(1.35rem, 3.4vw, 1.8rem); line-height: 1.8; letter-spacing: 0.12em; margin: 0 auto 2.5rem; max-width: 34rem; } /* 本文 */ .cn-body p { font-size: 1rem; line-height: 2.2; margin: 0 0 1.6rem; } .cn-body p:last-child { margin-bottom: 0; } .cn-body strong { font-weight: 700; color: var(--wp--preset--color--navy); } /* 引用（縦書き）＋本文 の2段組み ＝ patterns/text-vertical-body.php と同じ考え方ですが、 あちらは wp:columns（22%＋残り）で組んであり、こちらは引用の幅を 8rem に固定して左右を入れ替えられるようにしてあります。 見本がこの形で作られているため、見本に合わせています。 */ .cn-vsplit { display: flex; align-items: flex-start; gap: 3rem; max-width: 52rem; margin-left: auto; margin-right: auto; } .cn-vsplit__quote { flex: 0 0 8rem; display: flex; justify-content: center; } .cn-vsplit__body { flex: 1 1 auto; min-width: 0; } /* 2つ目の引用は右側に置く（左右交互にする） */ .cn-vsplit--right { flex-direction: row-reverse; } /* 縦書きの引用そのもの ⚠️ 高さは style.css の .is-style-tategaki（height:max-content）が決めます。 ここでは高さを指定しないこと。指定すると1文字だけの列が出ます。 */ .cn-quote { font-size: 1.25rem; letter-spacing: 0.2em; line-height: 1.9; font-weight: 700; color: var(--wp--preset--color--navy); margin: 0; position: relative; padding-inline: 0.75rem; } /* 引用であることを示す、細い縦罫（朱赤・薄く） */ .cn-quote::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: var(--wp--preset--color--red); opacity: 0.55; } /* 節の中の小見出し（お題目）＝「足さないもの」「選ぶもの」 🔴 2026-08-14 追加。この2語は節を分ける「お題目」なのに、見出しに見えていなかったための修理。 【直す前】0.95rem（15.2px）・紺・字間だけ。**本文16pxより小さく**、 ただの色違いの文にしか見えていませんでした。 【3案を作って比べました】 ✅ 採用：文字を大きくし、**下に短い横罫**を引く ・すでにテーマにある .iwaki-rule-top（中央に短い横線）と同じ作り方で、 線の位置を上から下へ変えただけです。**新しい見た目の部品を増やしていません。** ・下線（text-decoration）ではないので、**リンクと見間違えられません。** このページには本物のリンクとボタンがあるため、ここは外せない条件でした。 ・線は currentColor（文字と同じ色）なので、濃紺の地に置いても自動で白くなります。 ❌ 案B：文字の左右を短い罫で挟む → 見出しらしさは出ますが、**線が2本に増えます。** この案件は 「余計なものは足さない」が軸なので、1本で足りるなら1本にすべきと判断しました。 ❌ 案C：背景を薄く敷いて帯にする → **同じページのボタンと見間違えられます。** 8/14に「ボタンとは違う枠」（.iwaki-lead-box）を作り分けたばかりで、そこと競合します。 ❌ 案D：四角で囲む → すぐ下の写真3枚が**すでに四角い枠**です。囲むと「4つ目の箱」に見えます。 ⚠️ 大きさは 1.15rem（18.4px）。本文16pxより大きく、h2（28.8px）より小さい。 **この3段の上下関係を崩さないこと。** 本文より小さくしないこと （.claude/rules/ui-text-size.md）。 ⚠️ 「足さないもの」と「選ぶもの」は対になる言葉です。**必ず同じ指定を当てること。** 片方だけ目立たせないこと。 */ /* 🔴 セレクタを3本書いている理由（消さないこと） 「足さないもの」は素の枠の中、「選ぶもの」は .cn-body の中に入っています。 .cn-subhead だけだと、.cn-body p（上の「本文」）のほうが指定の強さで勝ってしまい、 **「選ぶもの」だけ本文と同じ16pxのまま**になります（2026-08-14 実測で確認）。 .cn-source でも同じことが起きました。対になる言葉なので、必ず両方に同じ大きさを当てます。 */ .cn-subhead, .cn-body p.cn-subhead, .cn-closing p.cn-subhead { text-align: center; font-size: 1.15rem; font-weight: 700; color: var(--wp--preset--color--navy); letter-spacing: 0.15em; text-indent: 0.15em; /* 字間ぶんの右寄りを打ち消して、見た目の中央をそろえる */ line-height: 1.7; margin: 0 auto 1.25rem; padding-bottom: 0.6rem; position: relative; } .cn-subhead::after, .cn-body p.cn-subhead::after, .cn-closing p.cn-subhead::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 2.5rem; height: 1px; background: currentColor; opacity: 0.5; } /* 🔴 濃紺の地（.cn-closing）に置いたときの逃げ道。消さないこと。 上で色を「濃紺」と決め打ちしているため、そのままだと **濃紺の地に濃紺の字（コントラスト1.5:1・ほぼ読めない）**になります。 いまの本文では小見出しは濃紺の地に置いていませんが、 あとから移したときに真っ黒に潰れるのを防ぐための備えです。 罫は currentColor なので、字の色を変えれば線も一緒に付いてきます。 */ .cn-closing .cn-subhead, .cn-closing p.cn-subhead { color: rgba(250, 246, 236, 0.92); } /* 「足さないもの」の3枚（小麦・乳製品・白砂糖） 🔴 2026-08-14：文字だけの枠から、写真を入れられる形に変えました。 ⚠️ ここは「足さないもの」＝**使っていないもの**を示す枠です。 おいしそうに見せる必要はありません。素材が静かに分かるだけでよい場所です。 【写真がある枠／まだ無い枠が混ざってもよい作り】 ・写真がある → .cn-chip__photo の中に を置く ・写真がまだ無い → .cn-chip__photo に iwaki-photo-slot を足す（斜線の枠が出る） どちらも1:1の正方形で、**3つの箱の大きさは必ずそろいます。** 【幅の決め方】🔴 flex-basis を 0 にして、flex-grow で3等分させています。 ⚠️ 一度 flex: 1 1 calc((100% - 2rem) / 3) と書きましたが、これは失敗でした。 flex-basis の % は「すき間を引く前の入れ物の幅」を基準にするため、 3つぶん＋すき間が入れ物より広くなり、**スマホで2段に折り返し、 しかも1つだけ大きさが違う**という状態になりました（実測：159/159/192px）。 flex-basis: 0 なら、すき間を引いた残りを flex-grow が正確に3等分します。 パソコンでは max-width: 12rem で頭打ちにし、大きくなりすぎないようにしています。 ⚠️ min-width: 0 を外さないこと。外すと中身の幅に押されて折り返します。 ⚠️ 品名の文字は必ず残すこと。写真だけでは「何の写真か」が伝わりません。 */ /* 🔴 3枚を横に並べる箱。**テーマと見本の両方で、必ずこの印を使うこと。** 2026-08-14 実測で分かったこと： ・テーマ側は WordPress の「flex並べ」（layout:flex）に頼っていました ・見本側は見本だけの .pv-grid--center を使っていました → **同じ見た目を別々の仕組みで出していた**ため、こちらの手元では テーマ側の並びを確かめられませんでした（3枚が縦に積み上がって見えた）。 「見本ではよかったのに実機で違う」を生む形そのものです。 いまは、この .cn-chips 1つが両方の並びを持っています。 */ .cn-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; } /* 🔴 2026-08-17：3枚がそろっていなかったのを直しました。 【何が起きていたか（実測・1280px幅）】 1枚目 乳製品 上端 2965 / 下端 3245 / 高さ 281 / 上の余白 0px 2枚目 小麦 上端 2989 / 下端 3245 / 高さ 257 / 上の余白 24px 3枚目 白砂糖 上端 2989 / 下端 3245 / 高さ 257 / 上の余白 24px ＝ 2枚目と3枚目だけが 24px 下へずれ、1枚目だけが 24px 高い箱になっていました。 【原因】WordPressは、部品と部品のあいだに「上の空き」を入れます （--wp--style--block-gap ＝ 24px）。これは縦に積むときのための空きですが、 この3枚は**横に並べて**います。横並びに縦の空きが掛かったため、 2枚目以降だけが下がりました。 さらに、横並びは「いちばん背の高いもの」に高さをそろえるため、 空きを持たない1枚目だけが 24px 分ひきのばされ、**高さまで違って**見えていました。 ＝ 下端はそろっているのに上端と高さがそろわない、という形になります。 🔵 写真は原因ではありません。3枚とも 192×192 の正方形で、 切り抜き（object-fit: cover）も効いていました（実測で確認済み）。 牛乳の object-position: 75% も、そのまま残してあります。 【直し方】横並びの中では、この縦の空きを打ち消します。 ⚠️ 選び方（セレクタ）を「クラス2つ分」にしてあること。 WordPressが書き出す空きの指定と同じ強さだと引き分けになり、 どちらが勝つかは読み込まれる順番次第になります。 ⚠️ margin-top（物理の書き方）で書くこと。 🔴 同じ現象は、トップページの飾り枠でも起きています（「10. くくりの飾り枠」）。 **横に並べる箱を新しく作るときは、必ずこの1行を添えること。** */ .wp-block-group.cn-chips > * { margin-top: 0; } .cn-chip { flex: 1 1 0; min-width: 0; max-width: 12rem; border: 1px solid var(--wp--preset--color--navy); border-radius: 2px; padding: 0.75rem 0.75rem 0.9rem; text-align: center; font-size: 1.05rem; font-weight: 700; color: var(--wp--preset--color--navy); line-height: 1.6; letter-spacing: 0.08em; background: rgba(255, 255, 255, 0.55); } /* 写真の入る正方形。写真が届く前は、この中に斜線の枠（iwaki-photo-slot）を入れます */ .cn-chip__photo { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 2px; margin-bottom: 0.6rem; } .cn-chip__photo img { display: block; width: 100%; height: 100%; /* ⚠️ cover＝正方形に切り抜いて埋める。写真の縦横比が違っても、 3つの箱がそろったまま崩れません（3枚とも横長のため、切られるのは左右だけ）。 */ object-fit: cover; } /* 🔴 2026-08-14：牛乳だけ、切り抜く位置を右へずらしています。 枠の中でグラスが右に寄りすぎて見えていたための修理です。 【何が起きていたか】kodawari-milk.jpg（1400×787。2026-08-16に軽量化する前は 1920×1079でした。縦横比は1.77943→1.77891とほぼ変わらないため、下の割合は そのまま使えます。実測で、枠に映る範囲のずれは元の写真の0.24px分）は、グラスが写真の 右寄り（被写体の中心＝左から56%）にあります。正方形に切り抜くと横56.2%だけが 見えるため、真ん中で切ると**グラスが枠の中で右へ12.8%ずれて**いました（実測）。 【直し方】写真そのものは加工していません。切り抜く位置（object-position）だけを 50% → 75% にしました。実測で**ずれ12.8% → 0.6%**。グラスは端で切れていません。 ⚠️ 小麦・白砂糖には当てていません。実測で小麦は中心50.3%・白砂糖は50.7%と、 すでに中央に来ているためです。**1つの値を3枚に当てると、かえってずれます。** ⚠️ 縦方向の指定は、この3枚には効きません。3枚とも横長で、正方形に合わせると 高さがちょうど収まり、切られるのは左右だけになるためです。 */ .cn-chip__photo img[src*="kodawari-milk"] { object-position: 75% center; } /* 🆕 2026-10-02（版 2026.10.01.29）スマホ（599px以下）だけ、「足さないもの」の写真を大きく見せる。 Ikuzoさんのご指定＝①並べ方（3枚を横に並べる）は変えない ②カードとカードのあいだを詰める ③白い枠の内側の余白（枠と写真のすき間）を減らす ④そうして写真がより大きく入るようにする。 【変えたのは次の2つだけ】 ・カードのあいだ 1.5rem（24px）→ 0.5rem（8px） ・枠の内側の余白 0.75rem 0.75rem 0.9rem → 0.5rem 0.5rem 0.6rem（上・左右・下） 🔴 写真は 1対1・object-fit: cover のまま（切れ方は変わらない）。品名の文字の大きさも変えていません。 ⚠️ 600px以上（タブレット・パソコン）は .28 のまま。ここより前の .cn-chips／.cn-chip の指定を変えないこと （同じ強さなので、このあとに書いたものが勝ちます。.wp-block-group.cn-chips は縦の空きを消す行だけなので重なりません）。 */ @media (max-width: 599px) { .cn-chips { gap: 0.5rem; } .cn-chip { padding: 0.5rem 0.5rem 0.6rem; } } /* 出典の注記（引用元を示す行） 🔴 2026-08-14：本文とまったく同じ見た目になっていたのを直しました。 狙い＝ひと目で「ここは引用元の文献名だ」と分かり、本文ほど強く出ないこと。 【なぜ効いていなかったか】CSSの「強さ」で負けていました。 .cn-source … クラス1つ＝弱い → ❌ 負ける .cn-body p … クラス＋要素＝強い → ✅ 勝ってしまう（大きさ） .cn-closing p … クラス＋要素＝強い → ✅ 勝ってしまう（色） ＝この注記は本文の囲み（.cn-body）の中にいるため、指定は書いてあるのに 大きさも色も本文と同じになっていました。 → 下では .cn-body p.cn-source / .cn-closing p.cn-source と書いて、 本文の指定より強くしています。**この形を崩さないこと。** ⚠️ 小さくしすぎないこと。0.85rem（13.6px）が下限です （.claude/rules/ui-text-size.md ／ README 6章）。 以前は 0.78rem（12.5px）で、下限を割っていました。 「引用だと分かる」は、大きさだけに頼らず、次の4つで作っています。 ①色を一段落とす ②上に細い罫を引く ③字間を少し詰める ④行間を詰める */ .cn-source, .cn-body p.cn-source, .cn-closing p.cn-source { max-width: 40rem; margin: 2.5rem auto 0; padding-top: 1.25rem; border-top: 1px solid rgba(26, 58, 92, 0.28); font-size: 0.85rem; line-height: 1.85; letter-spacing: 0; color: rgba(43, 38, 34, 0.68); font-style: normal; } /* 締めの節（濃紺） */ .cn-closing { text-align: center; } .cn-closing p { color: rgba(250, 246, 236, 0.92); } /* 濃紺の地の上に置いた出典の注記 ⚠️ 上の罫（紺の薄い色）は、濃紺の地では見えません。明るい色に切り替えます。 文字も、本文（白に近い）より一段落とした白にして、引用だと分かるようにします。 ⚠️ 落としすぎると読めません。コントラスト4.5:1を下回らないこと（実測して確かめること）。 */ .cn-closing .cn-source, .cn-closing p.cn-source, .cn-closing .cn-body p.cn-source { border-top-color: rgba(250, 246, 236, 0.35); color: rgba(250, 246, 236, 0.72); } .cn-closing .cn-yubi { font-size: clamp(1.35rem, 3.4vw, 1.8rem); letter-spacing: 0.3em; font-weight: 700; color: #fff; /* ⚠️ 左右を auto に。0 にすると中央そろえ（margin:auto）を打ち消して、 箱が左端に張り付きます（実測48.5px左へずれました）。 */ margin: 0 auto 0.25rem; line-height: 1.6; text-indent: 0.3em; /* 字間ぶんの右寄りを打ち消して、見た目の中央をそろえる */ } .cn-closing .cn-yubi-read { font-size: 0.8rem; letter-spacing: 0.2em; text-indent: 0.2em; margin: 0 auto 2rem; color: rgba(250, 246, 236, 0.75); } /* --- スマートフォン ------------------------------------------------ 縦書きの引用は、上の「1. 縦書き」が900px以下で自動的に横書きに戻します。 ここでは、2段組みを縦に積み直し、縦罫を横罫に置き換えるだけです。 */ @media (max-width: 900px) { .cn-vsplit, .cn-vsplit--right { flex-direction: column; gap: 1.75rem; } .cn-vsplit__quote { flex: none; width: 100%; } .cn-quote { padding-inline: 0; text-align: center; font-size: 1.35rem; } .cn-quote::before { top: auto; bottom: -0.9rem; left: 50%; right: auto; transform: translateX(-50%); width: 3rem; height: 1px; } .cn-section { padding-top: var(--wp--preset--spacing--40); padding-bottom: var(--wp--preset--spacing--40); } } /* ===================================================================== 5-C. 代表挨拶のページ（.iwaki-greeting）── 2026-09-17 新設 --------------------------------------------------------------------- 中身＝patterns/greeting-body.php。テンプレートは「標準のページ」。 🔴 新しい意匠は起こしていません。数値はすべて、既にあるものからの借用です。 ・読ませる幅 40rem／本文 1rem・行の高さ 2.2・段落の間 1.6rem … 5-B のコンセプトページ本文（.cn-measure／.cn-body p）と同じ ・リードの大きさ … 5-B の大見出し（.cn-h2）と同じ clamp(1.35rem, 3.4vw, 1.8rem) ・色 … theme.json の紺（navy）だけ ⚠️ cn- のクラスは「コンセプトページ専用」なので使っていません（5-B の冒頭の決まり）。 値だけを同じにしています。コンセプト側の数値を変えたときは、ここも見てください。 ⚠️ 文字は16pxを下回らせないこと（.claude/rules/ui-text-size.md）。 ===================================================================== */ .iwaki-greeting { max-width: 40rem; margin-left: auto; margin-right: auto; } /* リード（ページでいちばん大きな1行）。中央そろえ */ .iwaki-greeting p.iwaki-greeting__lead { text-align: center; font-size: clamp(1.35rem, 3.4vw, 1.8rem); line-height: 1.8; letter-spacing: 0.12em; color: var(--wp--preset--color--navy); margin: 0 auto 3rem; } /* 本文（手紙の形・左そろえ） */ .iwaki-greeting__body p { font-size: 1rem; line-height: 2.2; margin: 0 0 1.6rem; } .iwaki-greeting__body p:last-child { margin-bottom: 0; } /* 締めの1行（強調）。中央そろえ */ .iwaki-greeting p.iwaki-greeting__closing { text-align: center; font-size: 1.15rem; font-weight: 700; line-height: 1.9; letter-spacing: 0.08em; color: var(--wp--preset--color--navy); margin: 3rem auto 0; } /* 署名（右寄せ） */ .iwaki-greeting p.iwaki-greeting__sign { text-align: right; font-size: 1rem; line-height: 1.9; letter-spacing: 0.08em; margin: 3rem 0 0; } @media (max-width: 600px) { .iwaki-greeting p.iwaki-greeting__lead { margin-bottom: 2.25rem; } .iwaki-greeting p.iwaki-greeting__closing, .iwaki-greeting p.iwaki-greeting__sign { margin-top: 2.25rem; } } /* ===================================================================== 6. 洋（商品詳細ページ）だけの見た目 --------------------------------------------------------------------- 色と書体は styles/yo-western.json（セクションスタイル「洋」）が担当します。 ここに書くのは、theme.json では書けない配置まわりだけです。 ===================================================================== */ /* 商品ページのテンプレートを使ったときは、ページの地色もクリームにする */ .iwaki-tpl-product { background-color: var(--wp--preset--color--cream); } /* 欧文の大きな商品名 */ .iwaki-latin-xl { font-family: var(--wp--preset--font-family--latin); font-size: clamp(2.5rem, 6vw, 3.8rem); font-weight: 600; line-height: 1.15; letter-spacing: 0.02em; } .iwaki-latin-hero { font-family: var(--wp--preset--font-family--latin); font-size: clamp(3rem, 9vw, 5.5rem); font-weight: 500; line-height: 1.1; margin: 0; } /* 囲み罫のタグ（HERBAL DRINK 等） */ .iwaki-outline-tag { display: inline-block; border: 1px solid currentColor; padding: 0.3rem 1rem; font-size: 0.75rem; letter-spacing: 0.1em; line-height: 1.6; } /* 丸いバッジ（自然の恵みを10の力に。） */ .iwaki-badge-round { display: flex; align-items: center; justify-content: center; width: 130px; height: 130px; border-radius: 50%; border: 1px solid currentColor; font-size: 0.85rem; font-weight: 700; line-height: 1.5; text-align: center; } .iwaki-badge-round p { margin: 0; } /* 成分アイコンを10個並べる列（狭い画面では5個→3個に折り返す） */ .iwaki-ingredient-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 1rem; text-align: center; } .iwaki-ingredient-row > * { margin: 0; } .iwaki-ingredient-name { font-size: 0.72rem; font-weight: 700; line-height: 1.5; margin: 0.6rem 0 0.25rem; } .iwaki-ingredient-desc { font-size: 0.62rem; line-height: 1.4; opacity: 0.75; margin: 0; } @media (max-width: 960px) { .iwaki-ingredient-row { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 640px) { .iwaki-ingredient-row { grid-template-columns: repeat(3, 1fr); } } /* ===================================================================== 7. 全体のこまごま ===================================================================== */ /* カバーブロック（全面写真の帯）の中の文字は、既定で白 */ .wp-block-cover .wp-block-heading, .wp-block-cover p { color: inherit; } /* 画像は枠からはみ出さない */ img { max-width: 100%; height: auto; } /* --- 商品カード：詳細ページのある商品だけ、カード全体を押せるようにする --- 2026-08-17 新設。 【何が困っていたか】 商品カードで押せるのは「商品名の文字」だけでした。写真は押せません。 さらに、このテーマのリンクは theme.json の決まりで「本文と同じ色・下線なし」です。 ＝ 実測で、押せる名前と押せない名前は 色・太さ・下線がすべて同じ。 違うのはカーソルを乗せたときだけで、触る画面では違いすら出ませんでした。 【どう直したか】商品名のリンクの"当たり判定"だけを、カード全体へ広げています （リンクに透明な板を1枚生やして、カードにぴったり重ねる形）。 🔴 写真を で包んでいません。ここが肝心です。 包むと、写真の枠（「2b. 写真の枠」）の土台が1段増え、 枠の高さの取り方が変わります。 いまの形なら、写真そのものには指1本触れていません（実測で確認済み）。 🔵 この作りの良いところが、もう2つあります。 ①ブロックの記述（patterns/product-grid.php ／ inc/kodawari.php）を 1文字も変えずに済む ②URLの入った商品にしか が出ないので、 **押せるカードだけが自動的に押せるようになる。** 詳細ページの無い商品は、いっさい押せないままです （押せそうで何も起きない、を避ける product-grid.php 冒頭の考え方と同じ） ⚠️ 押せる範囲はカードの内側ちょうど（inset: 0）です。隣のカードには重なりません （カードとカードの間を押しても、何も起きないことを実測で確認済み）。 ⚠️ Tabで止まるのは1回だけです（リンクは1つのまま）。読み上げソフトも、 写真ではなく商品名を読みます。 🔴 下の position: relative を外さないこと。 これが「押せる範囲をカードの内側で止める」役目を持っています。 わざと外して試したところ、**カードの40px上（見出しのあたり）まで押せてしまいました**（実測）。 🔴 a[href] と書いてあるところを、ただの a にしないこと。 飛び先を持たない （WordPressは、リンク先の無い項目をこの形で出すことがあります） にまで透明な板が乗り、**押せないのに押せる範囲だけができる**状態になります。 わざと href だけを外して試したところ、実際にそうなりました（実測）。 */ .iwaki-card { position: relative; } .iwaki-card > p a[href]::after { content: ""; position: absolute; inset: 0; } /* 乗せたとき・キーボードで選んだときの合図。 🔵🔵 2026-08-18：ご依頼により、**写真が少し大きくなる動き**を足しました。 > 「アイコンの方はポインターを重ねると多少アニメーションついていますが、 > その他の画像もマウスのポインターを重ねれば動くようなアニメーションを > つけてほしいです。」 それまでは「わずかに淡くなる」だけで、こだわりの印（.iwaki-mark）だけが 動いていました。そこに差が出ていた、というご指摘です。 ・大きさは 1.05 倍・0.4秒。.iwaki-photo は overflow:hidden なので枠から出ません ・**淡くなる合図は、そのまま残してあります**（濃さ 0.9） 🔵🔵 2026-08-18：**リンクの有無で絞るのをやめました**（同じくご依頼により）。 ⚠️ もともと :has(a[href]) で絞ってあったのは**わざと**で、 「押せるカードだけが反応する」という考え方でした。この経緯は残します。 → いまは、リンクの無いカードでも反応します。理由＝写真が動くこと自体を 「見ていて楽しい」ものとして入れたので、押せるかどうかとは別、という整理です。 🔴 以前ここは .iwaki-card a:hover img と書いてありましたが、 **この形では一度も効いていませんでした。** 写真は の中ではなく の入った段落の"隣"にあるため、a の子孫を指す書き方では届きません。 前のきょうだいを指すには :has() が要ります。 ⚠️🔴 下のルールを1つにまとめないこと（この方針は 2026-08-18 も変わりません）。 :has() を知らない古い環境では、**まとめた側の指定がまるごと無効になります。** いま :has() が要るのは③（キーボードで選んだとき）だけなので、 ①②と③を分けてあります。分けてあれば、③が効かない環境でも ①②（マウスの動き）と、下線・指の形は生き残ります。 */ .iwaki-photo img, .iwaki-card .iwaki-photo-slot { transition: opacity 0.2s ease, transform 0.4s ease; } /* ① 写真そのものに乗せたとき 🔵 2026-08-18 追加。カードに入っていない写真（Instagramの6枚など）は、 下の②では届きません。この①が受け持ちます。 */ .iwaki-photo:hover img { opacity: 0.9; transform: scale(1.05); } /* ② カードのどこかに乗せたとき（文字の上でも反応する） 🔵 2026-08-18：ここから :has(a[href]) の縛りを外しました （ご依頼により）。リンクの無いカードでも動きます。 */ .iwaki-card:hover .iwaki-photo img { opacity: 0.9; transform: scale(1.05); } /* ③ キーボードでカードのリンクを選んだとき 🔴 ここだけは :has() が要ります。写真は の中ではなく の入った段落の"隣"にあるため、a の子孫を指す書き方では届きません。 ⚠️ だから、この行を上の②と1つにまとめないこと。まとめると、 :has() を知らない古い環境で、②（マウスの動き）まで道連れで消えます。 */ .iwaki-card:has(a[href]:focus-visible) .iwaki-photo img { opacity: 0.9; transform: scale(1.05); } /* ④ 斜線の枠（写真がまだ無い枠） 🔴 拡大させないこと。中身が文字なので、大きくすると読みにくくなります。 淡くなるだけにしてあります。 */ .iwaki-photo-slot:hover, .iwaki-card:hover .iwaki-photo-slot { opacity: 0.9; } .iwaki-card:has(a[href]:focus-visible) .iwaki-photo-slot { opacity: 0.9; } /* 動きを減らす設定にしている方には、大きくしない（淡くなるだけに戻す） ⚠️ opacity は残してあります。「乗っている」という合図まで消すと、 どこを指しているのか分からなくなるためです。 */ @media (prefers-reduced-motion: reduce) { .iwaki-photo img { transition: opacity 0.2s ease; } .iwaki-photo:hover img, .iwaki-card:hover .iwaki-photo img, .iwaki-card:has(a[href]:focus-visible) .iwaki-photo img { transform: none; } } /* 読み上げソフト専用の見出し（画面には出さない） */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* 表全体の横スクロール（スマホで表がはみ出さないように） */ .wp-block-table { overflow-x: auto; } /* ===================================================================== 8. こだわりの印（アイコンを押して、商品を絞り込む入口） --------------------------------------------------------------------- トップページの「こだわりから選ぶ」と、その飛び先のページで使います。 印の名前・順番・どの商品に付くかは inc/kodawari.php が持っています。 アイコンの絵も、外部の画像ではなく inc/kodawari.php の中に線で描いてあります。 ⚠️ ここに背景色・文字色を書いていないのは、わざとです。 文字も線も、置いた場所の色をそのまま受け継ぎます（currentColor）。 濃紺の帯の上でも、和紙の地の上でも、そのまま使えるようにするためです。 背景を変えたいときは patterns/kodawari-marks.php のグループの色を変えてください。 ===================================================================== */ /* 印を横に並べる（入りきらなければ折り返し、どの段もつねに中央そろえ） 🔴 2026-08-14 に、grid（6列固定）から flex（折り返し＋中央そろえ）へ変えました。 理由は2つあります。 ① 左に寄っていた ここに書いていた margin: 0 が、WordPressの中央そろえ （:where(...) で当たる margin-left:auto / margin-right:auto）を打ち消していました。 :where() はわざと弱く作られているので、クラス1つの指定に負けます。 結果、最大1120pxの列が帯の左端に張り付き、右に97pxの余りが出て、 見出し「こだわりから選ぶ」より約49px左にずれて見えていました（実測）。 ② 印の数が変わると崩れた repeat(6, 1fr) は「6個ちょうど」専用です。5個なら右に1枠ぶんの空きができ、 7個なら2段目に1個だけが"左端に"残ります。 🔴 印の数は今後変わる見込みで、確定していません。個数に依存しない作りが要ります。 flex + justify-content:center なら、1個でも8個でも、 最後の半端な段まで中央にそろいます。 ⚠️ margin: 0 に戻さないこと。中央そろえが再び死にます。 */ .iwaki-mark-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem 1rem; margin-inline: auto; } .iwaki-mark { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; /* 1つぶんの幅＝9rem（144px）。入りきらないときだけ縮みます（0 1 ...）。 パソコン幅（中身1120px）では、1段に最大7個入ります。 */ flex: 0 1 9rem; max-width: 9rem; color: inherit; text-align: center; text-decoration: none; } /* 丸い枠（アイコンの外側）＝ 72px × 72px ⚠️ 2026-08-14：一度ここに「丸の内側をわずかに塗る」指定を入れましたが、 同日中に元へ戻しました。 理由＝見出しの下の一文が「気になるジャンルのアイコンをクリックしてください。」に 入れ替わり、"押せること"が文章そのもので伝わるようになったためです。 🔴 このサイトは「画面から余計なものを減らす」方針で作っています。 文章で伝わっているものを、見た目の飾りで二重に伝えないこと。 */ .iwaki-mark__icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; max-width: 100%; border: 1px solid currentColor; border-radius: 50%; transition: transform 0.2s ease; } /* 中の絵 ＝ 34px × 34px */ .iwaki-mark__icon svg { display: block; width: 34px; height: 34px; } /* 印の名前 ⚠️ 1rem（16px）を下回らせないこと。プロジェクトの決まり（.claude/rules/ui-text-size.md）で、 ボタン・ラベルの下限を16pxとしています。狭くて入らないときは字を縮めるのではなく、 下の「スマートフォン」の欄で列の間隔・段数を調整してください。 */ .iwaki-mark__label { font-size: 1rem; line-height: 1.5; letter-spacing: 0.02em; /* 🔵 版 .15：折り返しは inc/kodawari.php の
だけで決める（括弧つきの9文字行が割れないように） */ white-space: nowrap; } /* 触ったとき：少し浮かせて、名前に下線を引く （色を変えないので、濃い地の上でも薄い地の上でも同じように見えます） */ /* 🆕 2026-10-01（版 2026.10.01.19）：押したときの「ふにゅっ」を復活。 Ikuzoさんのご指摘「こだわりから選ぶところを押すとフニュってなるようなアニメーションが消えてます」。 原因＝版 .17 で「リンクだけ動く」に絞ったため（.iwaki-mark:is(a)）、URLが空の の印が動かなくなった。 版 .12（旧6つの印）の動きは「.iwaki-mark:hover .iwaki-mark__icon { transform: translateY(-3px) }」＋ 「.iwaki-mark__icon { transition: transform 0.2s ease }」だった。同じ値（-3px・0.2秒・ease）に戻し、 と の両方に効かせる。さらに、指で押している間（:active）とキーボード（:focus-visible）でも同じ動きにする （タッチ端末では :hover が効かない場合があるため）。名前の下線はリンク（）だけのまま。 🔴 動きの値（-3px・0.2秒）は版 .12 と同じ。変えるときは .12 の style.css「8.」と見比べること。 */ .iwaki-mark:hover .iwaki-mark__icon, .iwaki-mark:active .iwaki-mark__icon, .iwaki-mark:focus-visible .iwaki-mark__icon { transform: translateY(-3px); } .iwaki-mark:is(a):hover .iwaki-mark__label { text-decoration: underline; } /* キーボードで選んでいるとき、いまどこにいるかが分かるようにする */ .iwaki-mark:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } /* いま見ているページの印は、枠を太くして区別する */ .iwaki-mark--current .iwaki-mark__icon { border-width: 2px; } /* --- スマートフォン：1段に2個ずつ折り返す ----------------------------- 🔵 2026-10-01（版 2026.10.01.15）：3個ずつ → 2個ずつに変えました。 理由＝新しい6カテゴリーの名前は長く、1行に最長で8文字（「ストレス・睡眠・」など）入ります。 3個だと1つぶんが約104px（375px幅）で、16px × 8文字 ＝ 約131px が入りません。 2個なら約160pxで、そのまま入ります。**字を小さくして詰める方向では直しません** （.claude/rules/ui-text-size.md の16px下限）。段は3段になります。 旧（3個ずつ）の計算式は、戻すときの控え：calc((100% - 1rem) / 3) 1つぶんの幅は「(全体 − すき間1つぶん) ÷ 2」です。 これで、画面の幅がいくつであっても必ず2個で折り返します。 ⚠️ grid-template-columns に戻さないこと。flex では効きません。 横の間隔は 0.5rem。いちばん狭い320px幅の端末でも、1列あたり約132pxを確保します （「ホルモンバランス」8文字＝約131pxが入る幅）。 ⚠️ 名前の行（.iwaki-mark__label）は折り返さない作り（white-space: nowrap）です。 割れるのは inc/kodawari.php で
を入れた場所だけです。 3行目「（グルテンフリー）」は括弧を含めて9文字（約147px）で、320px幅ではわずかに 列からはみ出して見えますが、隣の列との空きの中に収まります（切れません）。 */ @media (max-width: 640px) { .iwaki-mark-row { gap: 1.25rem 0.5rem; } /* すき間 0.5rem × 1つぶん を引いてから2等分する */ .iwaki-mark { flex: 0 1 calc((100% - 0.5rem) / 2); max-width: calc((100% - 0.5rem) / 2); } } /* 🔴 2026-10-01（版 .17）：「準備中」の見せ方（点線の輪・薄め表示・「準備中」の文字）は廃止しました。 Ikuzoさんのご決定＝6つとも実線の輪で同じ見た目。飛び先のURLが入っていない印は （リンクではない）、 入っている印は （外部リンク）になるだけで、見た目は同じです。 戻すときの控え（版 .15・.16 の指定）は iwaki-theme_v2026.10.01.16.zip の style.css「8. こだわりの印」にあります。 */ .iwaki-mark:not(a) { cursor: default; } /* 動きを減らす設定にしている方には、浮き上がりを出さない */ @media (prefers-reduced-motion: reduce) { .iwaki-mark__icon { transition: none; } .iwaki-mark:hover .iwaki-mark__icon, .iwaki-mark:active .iwaki-mark__icon, .iwaki-mark:focus-visible .iwaki-mark__icon { transform: none; } } /* ===================================================================== 9. 商品詳細ページの型（.pd-） --------------------------------------------------------------------- 商品ごとに作り分けず、どの商品でも同じ節の並びを使うための型です。 差し替えるのは、中の文章と写真だけ。順番と見出しの形は固定します。 色と書体の土台は styles/yo-western.json（セクションスタイル「洋」）が 担当します。ここに書くのは、theme.json では指定できない配置と、 文字の大きさだけです。 【文字の大きさ】下限は 1rem（16px）。狭い画面でも縮めません。 収まらないときは、横並びを縦にほどいて収めます （.claude/rules/ui-text-size.md）。 【金色の使いどころ】金 #b08d4f を読ませる文字に使わないこと。 クリーム地の上では 2.5〜3.1 対 1 にしかならず、読みやすさの基準 4.5 対 1 を大きく割ります。金は線・枠・区切りだけに使います。 実測したコントラスト比（背景 → 文字）： クリーム #f7f3ec → 炭 #3a3630 ＝ 10.8 対 1 炭 #3a3630 → クリーム #f7f3ec ＝ 10.8 対 1 炭 #3a3630 → 淡い金 #d8c08a ＝ 6.7 対 1（ラベルのみ・本文には使わない） 霞 #e9edf1 → 墨 #2b2622 ＝ 12.7 対 1 白 #ffffff → 紺 #1a3a5c ＝ 11.6 対 1 ===================================================================== */ /* 各節の中身をそろえる入れ物。節そのものは全幅、中身だけ1120pxで止めます */ .pd-wrap { max-width: 1120px; margin-inline: auto; padding-inline: 1.5rem; } .pd-section { padding-block: 4.5rem; } .pd-section--tight { padding-block: 3rem; } /* --- 節の見出し（小さいラベル＋大きな一文の2段） --------------------- この2段が、全商品共通の背骨です。ラベルが節の名前、 その下の一文がその節で言いたいこと。 */ .pd-eyebrow { /* 🔵 ラベルの上に置く「波の意匠」の大きさは、この1行だけで変わります。 幅を書けば、高さ・切り出しの倍率・切り出す位置・ラベルとの間隔が すべて自動で追従します（下の @supports の中で計算しています）。 2026-08-16 に見比べた3段階：46px（小）／64px（中）／88px（大）。 採用したのは 64px です。 */ --pd-eyebrow-mark: 64px; position: relative; margin: 0 0 0.9rem; /* 波の意匠が出せない環境では、飾りそのものを出しません（下記参照）。 そのときは上の空きも要らないので 0 にしておき、 出せる環境でだけ @supports の中で空きを作ります。 */ padding-top: 0; color: var(--wp--preset--color--charcoal); font-size: 1rem; font-weight: 700; letter-spacing: 0.3em; text-align: center; text-indent: 0.3em; } /* --- ラベルの上の飾り：ブランドの波の意匠（青海波） ------------------- 2026-08-16 に、金の短い横線（2rem × 1px）から差し替えました。 横線は「何のための線か」が読み取れず、目が止まってしまうためです。 波の意匠は、このお店の印そのものなので、小さくても「何なのか」が伝わります。 【金を使ってよい理由】 これは文字ではなく飾りなので、読みやすさの基準（4.5対1）はかかりません。 実測したコントラスト比（2026-08-16、この見た目のままブラウザで計測）： クリーム #f7f3ec の上 → 金 #b08d4f ＝ 2.80 対 1 霞 #e9edf1 の上 → 金 #b08d4f ＝ 2.64 対 1 白 #ffffff の上 → 金 #b08d4f ＝ 3.10 対 1 炭 #3a3630 の上 → 金 #b08d4f ＝ 3.87 対 1 → 淡い金 #d8c08a ＝ 6.76 対 1（こちらを採用。下の .pd-invert 参照） 【切り出しの数字の意味】🔴 次に触る人へ。半端な数字には全部わけがあります。 使っているのは assets/images/logo-vertical.png（縦組みのロゴ）です。 この1枚には「波」「社名の文字」「朱赤の角印」が入っているので、 型紙（マスク）の位置をずらして、波の部分だけを切り出しています。 🔴 いちばん大事なこと：下の calc の数字は「画素の数」ではなく 「印の幅に対する比」です。ですから **画像を差し替えても、大きさを 変えても、そのまま効きます。** 画像を小さくしたからといって 直す必要はありません。直さないこと。 いま置いてある画像の実測値（2026-08-16 に確認。透明でない画素を1つずつ数えたもの）： 画像全体 ＝ 1400 × 752px 波のある範囲 ＝ 左から185px・上から22px・幅1011px・高さ554px （その下は空白。さらに下が社名と角印） ここから出てくる比が、下の calc の中の数字です： 高さ ＝ 幅 × (554 ÷ 1011) ＝ 幅 × 0.5480 型紙の拡大率 ＝ 幅 × (1400 ÷ 1011) ＝ 幅 × 1.3848 型紙の横のずれ ＝ 幅 × (185 ÷ 1011) ＝ 幅 × 0.1830（左へ） 型紙の縦のずれ ＝ 幅 × ( 22 ÷ 1011) ＝ 幅 × 0.0218（上へ） 🔵 下の calc に書いてある数は 0.5475／1.3858／0.1832／0.0215 です。 これは、軽量化する前の同じ画像（2701 × 1450px・波の範囲は 左357・上42・幅1949・高さ1067px）で測った比です。 同じ絵を縮めただけなので、比はほとんど同じままです。 いちばん大きい食い違いでも、印の大きさ64pxのときに0.06px。目には見えません。 ＝ どちらの数字でも正しく出ます。書き換えないでください。 ⚠️ 印を大きくする（--pd-eyebrow-mark を上げる）ときは、この差も同じ倍率で 大きくなります。500pxを超えるような使い方をするなら、測り直してください。 🔴 assets/images/logo-vertical.png を消さないこと。 サイトのロゴは管理画面にアップロードした別の控えを使っているため、 「ロゴは別にあるから要らない」と見えますが、この飾りが消えます。 【型紙（マスク）が使えない環境について】 型紙を使わずに背景色だけを指定すると、金色の四角い塊がそのまま出ます。 それを避けるため、飾りは @supports の中だけで作っています。 ＝ 型紙が使えない環境では、飾りは「何も出ない」。四角は出ません。 （2026-08-16、@supports の条件をわざと通らない形に書き換えて、 四角が出ないこと・ラベルの位置がずれないことを実際に確かめました） */ .pd-eyebrow::before { content: none; } @supports ((-webkit-mask-image: none) or (mask-image: none)) { .pd-eyebrow { /* 印の高さ ＋ 印とラベルのあいだの空き 0.75rem（12px） */ padding-top: calc(var(--pd-eyebrow-mark) * 0.5475 + 0.75rem); } .pd-eyebrow::before { content: ""; position: absolute; top: 0; left: 50%; width: var(--pd-eyebrow-mark); height: calc(var(--pd-eyebrow-mark) * 0.5475); background: var(--wp--preset--color--gold); transform: translateX(-50%); -webkit-mask-image: url(assets/images/logo-vertical.png); mask-image: url(assets/images/logo-vertical.png); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: calc(var(--pd-eyebrow-mark) * 1.3858) auto; mask-size: calc(var(--pd-eyebrow-mark) * 1.3858) auto; -webkit-mask-position: calc(var(--pd-eyebrow-mark) * -0.1832) calc(var(--pd-eyebrow-mark) * -0.0215); mask-position: calc(var(--pd-eyebrow-mark) * -0.1832) calc(var(--pd-eyebrow-mark) * -0.0215); } } .pd-statement { margin: 0 0 1.75rem; font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.45rem, 2.6vw, 1.9rem); font-weight: 700; letter-spacing: 0.06em; line-height: 1.75; text-align: center; } /* 行間 1.95 は、承認された下書きの値です。 これより広げるとページ全体が目に見えて縦に伸びます。 詰める方向にも動かさないこと。日本語の長文は 1.9 を下回ると読みにくくなります。 ⚠️ 縦を縮めたいときに、文字の大きさを下げないこと（16pxが下限）。 */ .pd-lead { max-width: 40rem; margin-inline: auto; font-size: 1rem; line-height: 1.95; } /* --- 写真の入る枠 ---------------------------------------------------- 斜線の枠そのものは .iwaki-photo-slot（この上の「2.」）を使い、 ここでは大きさだけを決めます。 幅を px で固定しないこと。写真1（440px）と写真2（420px）は スマートフォンの画面（375px）より広く、固定するとページごと 横にはみ出します。max-width と aspect-ratio で持たせています。 */ .pd-photo { width: 100%; font-size: 1rem; } .pd-photo--1 { max-width: 440px; margin-inline: auto; aspect-ratio: 440 / 550; } /* 🆕 版 .98：セット売りの新ページ（米粉麺・ビューティースイーツ）のヒーロー写真＝箱の画像は横長（3対2・1536×1024ほど）。 🆕 版 .104：横長の写真が、縦長（440×550）のときより小さく見えていた。原因＝写真の幅が縦長と同じ440pxのままで、 高さだけが293pxに減っていた（面積が約半分）。**縦横比（3対2）は変えず、表示の幅だけを広げた**（高さは3対2のまま自動で増える）。 ・パソコン幅（901px以上）：写真の列を 440px → 600px（600×400＝縦長 440×550 とほぼ同じ面積）。文字の列は、そのぶん狭くなる。 ・タブレット・スマホ（900px以下）：写真は列の幅いっぱい、ただし最大 640px（640×427）。スマホは列いっぱい（これ以上は広げられない）。 🔴 aspect-ratio（3 / 2）を変えないこと。写真の枠の比率を変えたり、cover で切ったりすると、手直し済みの画像が切れる。 */ .pd-photo--box { max-width: 640px; margin-inline: auto; aspect-ratio: 3 / 2; } /* 🆕 版 .105：.104 で写真の列を600pxにしたところ、画面幅が901〜1180px付近で文字の列が狭くなり（1024pxで272px）、 見出し「一粒万倍美 米粉麺」・英字・区分名が言葉の途中で折れた。写真の幅（600px）と縦横比（3対2）は変えず、 次のように分けた。 ・1180px以上：.104 のまま（写真の列600px・文字の列は416px以上＝見出し・英字・区分名は1行のまま）。 ・901〜1179px：横長の写真の商品ページだけ、スマホと同じ「文字が上・写真が下」の縦並びにする（写真は列いっぱい・最大640px＝ 600×400より大きい）。文字は列いっぱい使えるので、折れない。縦長の写真のページには効かない（:has で横長の枠を持つヒーローだけ）。 ・900px以下：これまでどおり（縦並び）。 */ @media (min-width: 1180px) { .pd-hero__photo:has(.pd-photo--box) { width: 600px; } } @media (min-width: 901px) and (max-width: 1179px) { .pd-hero__inner:has(.pd-photo--box) { flex-direction: column; gap: 2rem; } .pd-hero__inner:has(.pd-photo--box) > .pd-hero__text { order: 1; width: 100%; } .pd-hero__inner:has(.pd-photo--box) > .pd-hero__photo { order: 2; width: 100%; } } /* ⚠️ pd-photo--2 と pd-photo--3 は、2026-08-28 からどこからも使われていません。 商品詳細ページの写真を1商品1枚にそろえたとき、「中身の寄り」（--2）と 「暮らしの場面」（--3）の枠を型ごと外したためです。 🔵 消さずに残してあります。8商品ぶんの写真がそろって枠を戻す日が来たときに、 そのまま使えるようにするためです。⚠️ 戻すときは8ページ同時に戻すこと。 */ .pd-photo--2 { max-width: 420px; margin-inline: auto; aspect-ratio: 1 / 1; } /* 写真3は横長です。最低の高さを決めないこと。 最低の高さを入れると、狭い画面では縦横比のほうが負けて、 枠の形が 2.55 対 1 から 1.8 対 1 へ変わります。 撮影の指定は 1072×420 のままなので、写真が入ったときに形がずれます。 枠の中の文字が3行入るかどうかは、実測で確かめてあります。 */ .pd-photo--3 { aspect-ratio: 1072 / 420; } /* --- 1. ヒーロー ------------------------------------------------------ */ .pd-hero__inner { display: flex; align-items: center; gap: 3.5rem; } /* ブロックエディタが入れる要素間の空きを消す（横並びでは不要なため） */ .pd-hero__inner > *, .pd-taste > *, .pd-spec__row > *, .pd-allergy__row > * { margin-block: 0; } .pd-hero__text { flex: 1 1 0; min-width: 0; } .pd-hero__photo { flex: 0 0 auto; width: 440px; max-width: 100%; } .pd-cat { margin: 0 0 0.75rem; color: var(--wp--preset--color--charcoal); font-size: 1rem; font-weight: 700; letter-spacing: 0.22em; } .pd-name { margin: 0 0 0.4rem; font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.9rem, 3.4vw, 2.5rem); font-weight: 700; letter-spacing: 0.04em; line-height: 1.5; } /* 英字の商品名。薄くしすぎないこと。 不透明度 0.62 ではクリーム地で 2.2 対 1 まで落ちて読めません。 0.72 で 5.7 対 1 を確保しています。 */ .pd-name-en { margin: 0 0 1.5rem; color: rgba(43, 38, 34, 0.72); font-size: 1rem; letter-spacing: 0.18em; } .pd-catch { margin: 0 0 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(176, 141, 79, 0.45); font-family: var(--wp--preset--font-family--serif); font-size: 1.15rem; line-height: 2; } .pd-hero .pd-lead { margin-inline: 0; } /* --- 2. 味わい（この型でただ1枚の、色を反転した帯） ------------------- 写真を増やさずにページに区切りをつけるための節です。 地を炭、文字をクリームにして、前後の節と切り離します。 */ .pd-invert { background: var(--wp--preset--color--charcoal); color: var(--wp--preset--color--cream); /* 2026-08-17：4.5rem（72px）→ 5.5rem（88px）。 ほかの節は「中央に置いた1本の文章」だけですが、この節は写真と4項目が入ります。 中身が詰まっているぶん、上下も少し多めに取っています。 ⚠️ ここだけ .pd-section の値を上書きしています。ほかの節は72pxのままです。 */ padding-block: 5.5rem; } /* 反転した地の上では、ラベルだけ淡い金にする（6.7 対 1）。 本文は淡い金にしないこと。長い文章では読みにくくなります。 */ .pd-invert .pd-eyebrow, .is-style-yo-western .pd-invert .pd-eyebrow, .pd-taste__label, .is-style-yo-western .pd-taste__label { color: #d8c08a; } /* 🔴 ラベルの上の波の意匠も、ここで一緒に淡い金へ戻すこと。 ラベルの文字色だけを戻して、飾りを忘れやすい場所です。 炭色の地の上での実測（2026-08-16）： 金 #b08d4f ＝ 3.87 対 1（見えるが、同じ帯のラベルより暗く沈みます） 淡い金 #d8c08a ＝ 6.76 対 1（ラベルの文字と同じ色。こちらを採用） ⚠️ 色は background で付けています（型紙で形を抜いているため）。 color を変えても飾りの色は変わりません。 */ .pd-invert .pd-eyebrow::before, .is-style-yo-western .pd-invert .pd-eyebrow::before { background: #d8c08a; } /* 反転した地の上の見出しは、必ずここで白く戻すこと。 styles/yo-western.json が洋の見出しを炭色 #3a3630 に決めており、 この帯の地色も同じ炭色です。受け皿が無いと、炭色の地に炭色の文字＝ まったく見えなくなります。 ブロック側の色設定にだけ頼らないこと。設定は編集中に外れます。 */ .pd-invert .pd-statement, .is-style-yo-western .pd-invert .pd-statement { color: var(--wp--preset--color--cream); } /* 🔴 写真が入る枠も、反転した地の上では必ず戻すこと。 .iwaki-photo-slot は「紺の文字・紺の斜線・紺の破線」で作られており、 炭色の帯の上に置くと、文字色と地色がまったく同じ炭色になります （2026-08-16、実機で計測。文字色 rgb(58,54,48) ／ 地色 rgb(58,54,48)＝比 1 対 1）。 ＝「写真がここに入ります」の案内が、完全に消えて見えなくなります。 斜線と破線も同時に見えなくなるため、枠そのものの存在も伝わりません。 ⚠️ 見出し（.pd-statement）だけ戻して、この枠を忘れやすい。3つで1組と考えること。 */ .pd-invert .iwaki-photo-slot, .is-style-yo-western .pd-invert .iwaki-photo-slot { background-image: repeating-linear-gradient( 45deg, rgba(250, 246, 236, 0.08), rgba(250, 246, 236, 0.08) 10px, rgba(250, 246, 236, 0.14) 10px, rgba(250, 246, 236, 0.14) 20px ); border-color: rgba(250, 246, 236, 0.45); color: var(--wp--preset--color--cream); } /* 🔴 同じ事故を、これから先も起こさないための受け皿。 上の .pd-invert は「いま起きている1件」を直したものです。 ただし濃い地の帯は、この先いくらでも増やせます。そのたびに 写真の枠を置けば、同じように案内が消えます。 ＝ 濃い地の名前（紺・濃紺・墨・炭）を4つとも先に受けておきます。 2026-08-16 に、テーマ全体の写真枠を1つずつ実測して確かめた結果、 濃い地に乗っていた枠は「味わい」の帯の1件だけでした （残りは 9.98〜10.85 対 1 で読めています）。 この受け皿は、その1件の再発と、これから足される帯のための備えです。 */ .has-navy-background-color .iwaki-photo-slot, .has-navy-dark-background-color .iwaki-photo-slot, .has-ink-background-color .iwaki-photo-slot, .has-charcoal-background-color .iwaki-photo-slot { background-image: repeating-linear-gradient( 45deg, rgba(250, 246, 236, 0.08), rgba(250, 246, 236, 0.08) 10px, rgba(250, 246, 236, 0.14) 10px, rgba(250, 246, 236, 0.14) 20px ); border-color: rgba(250, 246, 236, 0.45); color: var(--wp--preset--color--washi-light); } /* 見出しブロックにしてある2か所を、段落だったときと同じ見た目に保つ。 セクションスタイル「洋」の見出しの指定（炭色・字間0.05em）のほうが 強いため、ここで打ち消しています。 ⚠️ この2つを消すと、アレルギー表示の見出しが紺から炭色に変わり、 節のラベルの字間もそろわなくなります。 */ .is-style-yo-western .pd-eyebrow { color: var(--wp--preset--color--charcoal); font-size: 1rem; font-weight: 700; letter-spacing: 0.3em; } .is-style-yo-western .pd-allergy__title { color: var(--wp--preset--color--navy); font-size: 1rem; font-weight: 700; letter-spacing: 0.08em; } /* 🔴 2026-08-17：この節だけが窮屈に見えていた、その原因と直し。 【測って分かったこと】前後の節と比べると、空きの量が桁で違っていました （実測・パソコン1280px・帯の幅はどの節も1120px）。 コンセプトの節 … 本文は 640px。帯の左右に **240pxずつ**の空き 暮らしの中での節 … 本文は 640px。帯の左右に **240pxずつ**の空き 味わいの節 … 中身が 1072px。帯の左右に **24pxずつ**しか無い ＝ ほかの節が240px空けているところを、この節だけ24pxで詰めていました。 写真も文章も、帯のふちにぴったり張り付いていたということです。 【なぜ240pxに揃えられないか】この節だけ2列（写真420px＋文章）だからです。 240pxずつ空けると文章の列が148pxしか残らず、成り立ちません。 そこで「揃える」のではなく「近づける」形にしています。 【いくつにしたか】写真420px ＋ あいだ72px ＋ 文章420px ＝ 912px。 帯の左右には **104pxずつ**の空きができます（24px → 104px）。 ・写真と文章の幅を同じ420pxにそろえたのは、2列が釣り合って見えるためです ・文章の1行は約26文字になります（前は約37文字）。日本語が読みやすい範囲です 🔴 写真の420pxは変えないこと。ここを変えると上の釣り合いが崩れます。 */ .pd-taste { display: flex; align-items: flex-start; /* 写真と文章のあいだ。2026-08-17：3rem（48px）→ 4.5rem（72px） */ gap: 4.5rem; max-width: 912px; margin-inline: auto; } .pd-taste__photo { flex: 0 0 auto; width: 420px; max-width: 100%; } .pd-taste__list { flex: 1 1 0; min-width: 0; } /* 項目どうしの区切り。2026-08-17：1.5rem → 1.75rem（罫の上下 24px → 28px）。 文章の列が細くなって行数が増えるぶん、項目の切れ目を少し広げています。 */ .pd-taste__item + .pd-taste__item { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid rgba(250, 246, 236, 0.22); } .pd-taste__label { margin: 0 0 0.4rem; font-size: 1rem; font-weight: 700; letter-spacing: 0.22em; } .pd-taste__body { margin: 0; color: rgba(250, 246, 236, 0.93); font-size: 1rem; line-height: 2.05; } /* --- 味わいの帯（写真なし）2026-08-28 -------------------------------- 🔴 なぜ写真を外したか 商品詳細ページは、8商品すべて同じ形でなければいけません （Ikuzoさんご指示・2026-08-28）。ところが先方からいただける写真は 「商品そのもの」の1枚がいいところで、「中身の寄り」や「暮らしの場面」が 8商品ぶんそろうことはありません。**そろわない枠を型に残すと、 写真の来ていない商品だけ斜線の枠が出て、ページごとに見た目が変わります。** ＝ いちばん少ない側（1枚）に型のほうを合わせました。 写真が抜けた分、文章の列だけが横に伸びると1行が長くなりすぎるので、 4項目（味・香り・食感・甘み）を2列に並べて帯を埋めています。 🔴 項目を3つや5つにしないこと。2列に割ったときの形が崩れます。 */ .pd-taste--nophoto .pd-taste__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4.5rem; } /* 2列に並べると、右の列の1つ目にも上の罫が付いてしまいます。 隣り合わせの指定をいったん消して、3つ目以降（＝2段目）だけに付け直します。 */ .pd-taste--nophoto .pd-taste__item + .pd-taste__item { margin-top: 0; padding-top: 0; border-top: 0; } .pd-taste--nophoto .pd-taste__item:nth-child(n + 3) { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid rgba(250, 246, 236, 0.22); } /* --- 3. 項目名と値の表（つくり・商品情報の両方で使う） ---------------- */ .pd-spec { max-width: 46rem; margin-inline: auto; } .pd-spec--narrow { max-width: 40rem; } /* 🔴 margin-block: 0 を消さないこと。これが一番効いています。 ブロックエディタは、囲みの中の要素と要素のあいだに 24px の空きを 自動で入れます（blockGap）。行そのものにも入るため、 1行 60px の表が 84px 刻みになり、8行で 648px まで膨らんでいました （2026-08-16、実機で計測）。 詰めたのは余白だけで、文字は 1rem（16px）のまま動かしていません。 .claude/rules/ui-text-size.md の下限です。文字で詰めないこと。 */ .pd-spec__row { display: flex; gap: 1rem; margin-block: 0; padding: 0.6rem 0; border-bottom: 1px solid rgba(43, 38, 34, 0.16); } .pd-spec__row:last-child { border-bottom: none; } /* 幅 7.5rem（120px）は、いちばん長い項目名「栄養成分表示」を実測して 決めた値です（6文字 × 16px ＋ 字間 0.06em ＝ 約102px）。 これより狭めると、項目名が2行に折れて行の高さが戻ります。 */ .pd-spec__key { flex: 0 0 7.5rem; color: rgba(43, 38, 34, 0.78); font-size: 1rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1.7; } .pd-spec__val { flex: 1 1 0; min-width: 0; font-size: 1rem; line-height: 1.7; } /* --- 4. アレルギー表示の枠 ------------------------------------------- この枠を消さないこと。独立した枠にしてある理由は4つあります。 1. 原材料の行に紛れ込ませると、探している人が見つけられない 2. 本文と同じ 1rem（16px）で固定する。注記あつかいで小さくすると いちばん必要な人に届かない 3. 「入っているもの」を書く枠にする。「不使用」だけを並べると、 書いていないものは入っていないと読まれる 4. 最後の一文（パッケージをご確認ください）を枠の中に固定する。 Webの表示は正本ではないため、外に出すといつか消える */ .pd-allergy { max-width: 46rem; margin: 2rem auto 0; padding: 1.25rem 1.35rem; border: 2px solid var(--wp--preset--color--navy); border-radius: 3px; background: var(--wp--preset--color--white); } .pd-allergy__title { margin: 0 0 0.75rem; color: var(--wp--preset--color--navy); font-size: 1rem; font-weight: 700; letter-spacing: 0.08em; } .pd-allergy__row { display: flex; gap: 1rem; margin-bottom: 0.6rem; } .pd-allergy__key { flex: 0 0 11rem; color: rgba(43, 38, 34, 0.8); font-size: 1rem; font-weight: 700; line-height: 1.9; } .pd-allergy__val { flex: 1 1 0; min-width: 0; font-size: 1rem; line-height: 1.9; } .pd-allergy__caution { margin: 0.9rem 0 0; padding-top: 0.8rem; border-top: 1px solid rgba(26, 58, 92, 0.22); color: rgba(43, 38, 34, 0.82); font-size: 1rem; line-height: 1.85; } /* --- 4-2. 味・種類が分かれた商品の「内容表示」（2026-10-01 追加・版 2026.10.01.4） ------ リンゴ味とグレープフルーツ味のように、同じ商品で味や種類ごとに パッケージの表示（原材料・栄養成分・アレルゲン 等）が違うときの共通の形です。 グミだけの特別な形ではありません。味が分かれた商品なら、どの商品でも 同じ部品（pd-variants ＞ pd-variant ＞ pd-variant__title ＋ 行）で使えます。 ・画面が広いとき（901px〜）は 2 列で並びます。 ・狭いとき（〜900px・スマホ）は 縦に 2 ブロック積みます。 ・種類ごとの行は、項目名を上・値を下にして、値の幅をいっぱいに使います （2 列の半分の幅では、横並びの行だと原材料が読めなくなるため）。 🔴 pd-variant__title は見出し（h3）のまま残すこと。画面を読み上げて使う方が 「リンゴ味」「グレープフルーツ味」へ飛べなくなります。 🔴 文字は 1rem（16px）から縮めないこと。収まらないときは列を減らします。 */ .pd-variants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin: 0; } .pd-variants--wide { max-width: 72rem; margin-inline: auto; } .pd-variant { min-width: 0; margin: 0; padding: 1.1rem 1.25rem 0.75rem; border: 1px solid rgba(43, 38, 34, 0.22); border-top: 4px solid var(--wp--preset--color--navy); border-radius: 3px; background: var(--wp--preset--color--white); } .pd-variant > * { margin-block: 0; } .pd-variant__title { margin: 0 0 0.5rem; color: var(--wp--preset--color--navy); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1.5; } .pd-variant .pd-spec { max-width: none; margin-inline: 0; } .pd-variant .pd-spec__row, .pd-variant .pd-allergy__row { flex-direction: column; gap: 0.15rem; } .pd-variant .pd-spec__key, .pd-variant .pd-allergy__key { flex: none; } /* アレルギー表示の枠（種類ごとに2つ並べる版）。枠そのものは1つのまま、 中に種類ごとの小さな枠を2つ置きます。最後の一文は枠の外ではなく、 枠の底に1つだけ固定します（理由は上の 4. の4番と同じ）。 */ .pd-allergy--variants { max-width: 72rem; } .pd-allergy--variants .pd-variant { border-top-width: 3px; } .pd-spec--shared { max-width: 72rem; margin: 0 auto 1.5rem; } @media (max-width: 900px) { .pd-variants { grid-template-columns: 1fr; } } /* 🆕 2026-10-02（版 2026.10.01.33）種類が3つ以上になっても使える並べ方（pd-variants--auto）。 使っているのは一粒万倍美 米粉麺（3種類）。グミ（2種類）は、この印を付けていないので変わりません。 ・1つの囲みの幅を 18rem（288px）以上にして、入るだけ並べます。72rem の枠なら3列、 足りないとき（〜1056px前後）は 2列＋次の行に1つ。4つ目・5つ目を足しても、同じ規則で折り返します。 ・〜900px（スマホ・タブレット）は、上の指定どおり縦に1列。 ・文字は 1rem（16px）から縮めません。収まらないときは、列を減らします。 🔴 この指定は、上の .pd-variants と @media の後ろに書いてあります（同じ強さのときは後ろが勝つ）。 スマホの1列にする指定は、この下の @media に入れてあります。 */ .pd-variants--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); } @media (max-width: 900px) { .pd-variants--auto { grid-template-columns: 1fr; } } /* 種類ごとの写真（囲みの一番上）。囲みの幅いっぱい・4対3。下に少し空けて、種類の名前へつなぐ */ .pd-variant > .pd-variant__photo { margin: 0 0 0.9rem; } /* --- 5. ご購入 -------------------------------------------------------- ボタンの形はしていますが、リンクではありません。 販売の窓口がまだ無い段階で を置くと、 押しても何も起きず、壊れていると受け取られるためです。 窓口ができたら、この段落をボタンブロックに差し替え、 飛び先を1か所入れれば済みます。 文字を薄くして「押せない見た目」にしないこと。 不透明度を下げるとコントラストが 2 対 1 台まで落ちます。 押せないことは、すぐ下の一文で伝えています。 */ .pd-buy { background: var(--wp--preset--color--cream-dark); text-align: center; } .pd-btn { display: inline-block; margin: 0; padding: 0.95rem 3rem; border: 1px solid rgba(176, 141, 79, 0.6); border-radius: 2px; background: transparent; color: var(--wp--preset--color--charcoal); cursor: default; font-size: 1rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.6; } /* 濃さ 0.78。0.7 まで薄めると、クリーム濃の地で 5.0 対 1 まで落ちます。 0.78 で 6.2 対 1。この一文は「押しても飛ばない」ことを伝える役なので、 読み飛ばされる濃さにしないこと。 */ .pd-buy__note { margin: 1rem 0 0; color: rgba(43, 38, 34, 0.78); font-size: 1rem; line-height: 1.85; } /* --- 6. スマートフォン（900px以下） ---------------------------------- 決まりはひとつだけ。横に並んでいるものは、すべて縦1列にほどく。 写真より先に商品名が来るように order で並べ替えています （何の商品なのかを先に伝えるため）。 文字は縮めません。縦に伸びても、読めないページよりよいと判断。 */ @media (max-width: 900px) { /* 2.25rem は、承認された下書きの値です。3rem に戻すと、 節が8つあるぶん、ページ全体が約170px縦に伸びます。 */ .pd-section { padding-block: 2.25rem; } .pd-hero__inner { flex-direction: column; gap: 2rem; } .pd-hero__text { order: 1; width: 100%; } .pd-hero__photo { order: 2; width: 100%; } .pd-taste { flex-direction: column; gap: 2rem; } .pd-taste__list { order: 1; } .pd-taste__photo { order: 2; align-self: center; width: 100%; } /* 写真なしの帯は、狭い画面では2列をやめて1列に戻します（2026-08-28）。 2列のままだと、1行が10文字ほどになって読めなくなります。 */ .pd-taste--nophoto .pd-taste__list { grid-template-columns: 1fr; } .pd-taste--nophoto .pd-taste__item:nth-child(n + 2) { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid rgba(250, 246, 236, 0.22); } .pd-spec__row, .pd-allergy__row { flex-direction: column; gap: 0.2rem; } .pd-spec__key, .pd-allergy__key { flex: none; } .pd-btn { width: 100%; max-width: 22rem; padding-inline: 1.5rem; } } /* ===================================================================== 10. くくりの飾り枠（お品書きの中の、部門ごとの囲み） --------------------------------------------------------------------- トップページ「お品書き」の中のくくり2つ ・インナーケア・美容リカバリー ・ギルトフリー・アレルギー配慮フード を、明治の和洋折衷（引札＝ひきふだ 風）の飾り枠で囲みます。 2026-08-16 に3案を見くらべ、この案（引札風）に決まりました。 【組み立て】 .iwaki-kw … くくりの面（和紙・うすい）。外側の余白だけを持つ .iwaki-kw__inner … 罫と飾りの土台。上下に太い罫、その内側に細い罫 .iwaki-kw__deco … 飾り5つの入れ物（箱を持たない指定。下の注記を参照） .iwaki-kw__corner … 四隅の角飾り（渦巻き）。1枚のSVGを裏返して4か所に使う .iwaki-kw__medal … 罫の中央に載る紋。輪の中はブランドの波の意匠 .iwaki-kw__en … その部門の英字（字間を広く） .iwaki-kw__ja … 縦書きの見出し（縦書きそのものは「1. 縦書き」が持つ） 【飾りの作り方】 飾りは assets/kazari/ に置いた SVG（線と円と曲線だけで組んだ図）を 「型紙」に使い、色は background-color が受け持ちます。 絵を貼っていないので、どれだけ拡大しても輪郭がぼやけません。 色は、この節の1行を書き換えるだけで紺にも朱赤にも金にも変わります。 【型紙（マスク）が使えない環境について】 飾りは、すべて @supports の中だけで作っています。 型紙が使えない環境では、飾りは「何も出ない」。上下の罫だけが残ります （四角い色の塊は出ません）。 🔴 ファイルを直接開いたとき（file: で始まるアドレス）は、Chromeが 外部ファイルの読み込みを止めるため、型紙だけが黙って効きません。 背景画像は出るのに飾りだけ出ない、という形になります。 サーバー越し（http または https）では正しく出ます。 ＝ 確認用の見本を作るときは、型紙を文字として埋め込んだ控えを 別に用意すること。この style.css のほうは書き換えないこと。 【何を借りて、何を起こしたか】 借りたのは、明治期に広く使われた「様式の語彙」だけです。 ＝ 西洋の渦巻き飾り（ヴォリュート）と、活版印刷の双柱罫・刻み罫。 渦の巻き方と比率、刻みの間隔、輪の刻みの本数は、こちらで起こしています。 特定の会社の意匠は使っていません。 ⚠️ 余白は、この節が持ちます。ブロック側（patterns/product-grid.php）に 余白を書き足さないこと。ブロックに書いた余白は画面に直接書き込まれるため この節より強く、下の「狭い画面での手当て」が効かなくなります。 ===================================================================== */ /* 🔵 2026-08-17：枠の「迫力」を落とし、上下の詰まりをほどきました。 実機で見たとき、参考にした和菓子店の飾りに比べて濃く、 上下も詰まって窮屈だったための調整です。 弱めた5点と、その前後の実測値は、この節のそれぞれの指定に書いてあります。 ⚠️ 弱めすぎると、その前に「淡白すぎる」と言われた状態に戻ります。 罫・紋・角飾りの3つは、消さずに細く・小さくすることで残しています。 */ .iwaki-kw { /* 上だけ広いのは、中央の紋の上半分がここへはみ出すためです。 紋が72px→54pxに小さくなり、はみ出しが36px→27pxになったので、 同じ余白でも紋の上の空きが広がります。 2026-08-17（2回目）：3.5rem/3rem → 4rem/4rem。上下をそろえました。 */ padding: 4rem 1.5rem 4rem; } .iwaki-kw__inner { position: relative; /* 🔴 上下の余白は、この1行が「窮屈さ」の主因でした。 2026-08-17（1回目）：3.5rem/3rem → 5rem/4rem（56px/48px → 80px/64px） 2026-08-17（2回目）：5rem/4rem → 6.5rem/6.5rem（80px/64px → 104px/104px） 【なぜ2回目が要ったか】1回目でも、まだ「他の節よりギチギチ」でした。 測ってみると、上と下で空きが違っていたのが効いていました（実測・1280px幅）： 上の罫 → 英字の頭 81px 商品名の下 → 下の罫 65px ← ここが一番詰まって見える ＝ 下だけ16px狭く、しかも下は文字が罫に向かって落ちていくので、 差が実際の数字より大きく見えます。**上下を同じ104pxにそろえました。** 実測（1280px幅・前 → 後）： 上の罫 → 英字の頭 81px → 105px 商品名の下 → 下の罫 65px → 105px （細い罫まで） 48px → 88px ⚠️ 上を減らすと、まっ先に紋と英字がぶつかります。80pxを下回らせないこと。 🔵 左右は 116px あり、もともと足りています（変えていません）。 */ padding: 6.5rem 1.5rem; /* 🔵 2026-08-17：罫を半分の細さに（2px → 1px）。 いちばん「迫力」に効いた1行です。内側の細い罫と合わせて 双柱罫（そうちゅうけい＝2本組みの罫）が、髪の毛ほどの細さで2本並びます。 ⚠️ 太さを変えたら、四隅の角飾りの位置（top/bottom: -1px）も同じ数に合わせること。 */ border-top: 1px solid var(--wp--preset--color--navy); border-bottom: 1px solid var(--wp--preset--color--navy); } /* 内側の細い罫（上下）。 ⚠️ 薄い紺を作るために、ここだけ色の値を直接書いています。 紺 #1a3a5c の 40%。ヘッダーのメニューの枠（15%）と同じ書き方です。 theme.json で紺を変えたときは、ここも一緒に直してください。 🔵 2026-08-17：55% → 40%。外側の罫が1pxになったので、内側だけが濃く残ると 2本の太さが釣り合いません。細い側をさらに1段落として、組みをそろえています。 */ .iwaki-kw__inner::before { content: ""; position: absolute; left: 0; right: 0; top: 17px; bottom: 17px; border-top: 1px solid rgba(26, 58, 92, 0.4); border-bottom: 1px solid rgba(26, 58, 92, 0.4); pointer-events: none; } /* 飾り5つの入れ物。箱を持たない指定なので、まわりの余白に影響しません。 🔴 わざわざ入れ物ごしに置いているのには理由があります。 飾りを .iwaki-kw__inner の直接の子にすると、WordPressが部品と部品の あいだに入れる上の空き（--wp--style--block-gap ＝ 24px）が飾りにも掛かり、 四隅の飾りが24pxずつ下へずれます。 入れ物が箱を持たないので、その空きが飾りまで届きません。 （古い環境で display: contents が効かない場合も、span は行の中の要素なので 上下の空きがそもそも掛かりません。二重に守ってあります） */ .iwaki-kw__deco { display: contents; } /* 枠の中の部品の上の空きは、WordPressの既定ではなく、この節が1つずつ決めます。 🔴 選び方（セレクタ）をわざと1段深くしてあります。 WordPressは部品と部品のあいだに 1.5rem（24px）の空きを入れます。 その指定は「クラス1つ分」の強さなので、こちらも1つ分だと引き分けになり、 どちらが勝つかは読み込まれる順番次第になります。＝ 環境によって 飾りの中身が24pxずつ下へずれる、という形になります。 .iwaki-kw を頭に足して「クラス2つ分」にし、順番に関係なく勝たせています。 🔴 margin-block-start（論理の書き方）では書かないこと。縦書きの見出しでは それが「右の空き」に化け、中央そろえ（margin-left/right: auto）を打ち消します。 必ず margin-top（物理の書き方）で書きます。 （2026-08-16、この深さにする前は英字と商品の格子が24pxずつ下がっていました。実測） */ .iwaki-kw .iwaki-kw__inner > * { margin-top: 0; } /* 飾りの部品は、型紙が使えるときだけ出します（下の @supports を参照）。 使えないときは、ここで消しておきます。 */ .iwaki-kw__corner, .iwaki-kw__medal { display: none; } /* 部門の英字。 ⚠️ 文言そのものは仮です。理由と直し方は patterns/product-grid.php の注記に。 ⚠️ 字間は文字の右側に付くので、最後の1文字ぶんだけ左へ寄せて中央を取り直します （text-indent）。これが無いと、見た目が右にずれます。 */ /* 🔵 2026-08-17：大きさと字間を1段落としました（実測 25.6px → 18.4px／字間 10.75px → 5.52px）。 英字は罫のすぐ内側にあるため、大きいと枠全体が「濃い」印象になります。 🔴 いちばん小さいときでも 1rem（16px）を下回らせないこと （.claude/rules/ui-text-size.md の下限）。clamp の1つ目が下限です。 🔵 副産物：字間を詰めたことで「GUILT FREE FOOD」が 375px 幅でも1行に収まり、 2行目だけが左へずれる崩れ（旧・積み残し20b）が起きなくなりました（実測）。 */ .iwaki-kw__en { margin: 0 0 1rem; color: var(--wp--preset--color--navy); font-family: var(--wp--preset--font-family--latin); font-size: clamp(1rem, 1.8vw, 1.15rem); letter-spacing: 0.3em; line-height: 1.4; text-align: center; text-indent: 0.3em; } /* くくりの日本語見出し。 🔴 2026-08-17：縦書きをやめて、横書きにそろえました（is-style-tategaki を外した）。 理由は3つです。 ①もともと900px以下では横書きに戻る作りで、パソコンとスマートフォンで 見え方が2つに割れていた。1つにそろえたほうが分かりやすい ②「和」は、この枠の飾り（双柱罫・角飾り・紋）が十分に出している。 そのうえ見出しまで縦にすると、和の要素が重なる ③縦書きは高さを食う。実測で見出しの高さは 173.9px → 34.5px。 浮いた139.4pxが、そのまま枠の上下の余裕に回っています ⚠️ 見出しそのものを消さないこと。文字と見た目の両方で、くくりを示す作りです。 ⚠️ 言葉は1文字も変えていません。変えたのは向きだけです。 */ h3.iwaki-kw__ja { margin-top: 0; margin-bottom: 3.25rem; color: var(--wp--preset--color--navy); font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.15rem, 2.4vw, 1.35rem); line-height: 1.6; text-align: center; /* 字間（theme.json の h3 ＝ 0.08em）は文字の右側に付くため、行の最後に空きが 1つ余り、中央そろえが右へずれます。同じぶんだけ左へ戻しています （.iwaki-kw__en と同じ考え方）。 */ text-indent: 0.08em; } /* 見出しの中の改行について。 広い画面では1行に収め（＝改行を出さない）、狭い画面でだけ2行に折ります。 🔴 改行を消しているのではありません。「出す・出さない」を切り替えているだけで、 文字は1つも増減しません。もしこの指定が効かない環境があっても、 2行で表示されるだけで、崩れは起きません（安全側に倒れます）。 ⚠️ 640px以下で改行を戻すのは、「ギルトフリー・アレルギー配慮フード」の17文字が 1行に収まらず、ブラウザ任せの位置で折れてしまうためです。 */ h3.iwaki-kw__ja br { display: none; } @media (max-width: 640px) { h3.iwaki-kw__ja { margin-bottom: 2.5rem; } h3.iwaki-kw__ja br { display: inline; } } /* --- 飾り（型紙が使える環境だけ） ----------------------------------- */ @supports ((-webkit-mask-image: none) or (mask-image: none)) { /* 四隅の角飾り。1枚のSVGを、左右・上下に裏返して4か所に使っています （裏返しは transform。SVGは1つで済みます） */ /* 🔵 2026-08-17：48×28px → 36×21px（縦横比 1.714 のまま、0.75倍）。 渦の巻きが読み取れる下限を探した結果です。これ以上小さくすると 渦がただの点になり、明治の引札の語彙が消えます（＝「淡白」側へ落ちます）。 🔴 四隅は外しませんでした。渦巻き（ヴォリュート）が、この枠を 「引札風」たらしめている唯一の要素だからです。外すと、選ばれた案Aではなく 見送られた案C（擬洋風・静か）に近づきます。弱めるだけに留めています。 */ .iwaki-kw__corner { display: block; position: absolute; width: 36px; height: 21px; background-color: var(--wp--preset--color--navy); -webkit-mask-image: url(assets/kazari/kado-a.svg); mask-image: url(assets/kazari/kado-a.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; pointer-events: none; } /* 🔵 2026-08-17：上下の位置を -2px → -1px にしました。 罫が2px→1pxに細くなったためで、角飾りは罫のちょうど上に重なります。 （以前は罫の2px外側に浮いており、角だけ厚く見えていました） */ .iwaki-kw__corner--tl { left: -1px; top: -1px; } .iwaki-kw__corner--tr { right: -1px; top: -1px; transform: scaleX(-1); } .iwaki-kw__corner--bl { left: -1px; bottom: -1px; transform: scaleY(-1); } .iwaki-kw__corner--br { right: -1px; bottom: -1px; transform: scale(-1, -1); } /* 二重の罫のあいだを走る、細かい飾り帯。 1つの部品に「上の帯」と「下の帯」の2枚を重ねています。 左右は、角飾りに触れない位置で止めています（52px）。 🔵 ここだけ朱赤にしてあります。引札の紅を、一点だけ効かせる狙いです。 🔴 2026-08-17：この帯が、枠の中でいちばん目を引いていました。 3つ弱めています。 ①濃さ ベタ塗り → 0.4（和紙の地に溶けた、くすんだ紅になります） ②高さ 8px → 6px（細かい刻みが、より繊細に見えます） ③走る幅 左右52px → 44px（角飾りが36pxに縮んだぶん、内側へ寄せ直し） ⚠️ 消しませんでした。この紅が無くなると、色は紺だけになり、 見送られた案C（擬洋風・静か）と区別がつかなくなります。 ⚠️ 濃さをこれ以上下げないこと。0.3を切ると、和紙の地に埋もれて 「何か描いてあるが読めない」状態になります（実測で確認）。 🔵 この帯は飾りで、文字でも押せるものでもないため、 文字の読みやすさの基準（4.5:1）の対象外です。 */ .iwaki-kw__inner::after { content: ""; position: absolute; left: 44px; right: 44px; top: 6px; bottom: 6px; background-color: var(--wp--preset--color--red); opacity: 0.4; -webkit-mask-image: url(assets/kazari/obi-a.svg), url(assets/kazari/obi-a.svg); mask-image: url(assets/kazari/obi-a.svg), url(assets/kazari/obi-a.svg); -webkit-mask-repeat: repeat-x, repeat-x; mask-repeat: repeat-x, repeat-x; -webkit-mask-size: auto 6px, auto 6px; mask-size: auto 6px, auto 6px; -webkit-mask-position: left top, left bottom; mask-position: left top, left bottom; pointer-events: none; } /* 中央の紋。3枚を重ねています。 本体 ＝ 罫を断ち切るための、地色で塗った丸 ::before ＝ 紋の輪（SVGの型紙） ::after ＝ 輪の中に入るブランドの波の意匠 🔴 z-index を外さないこと。罫と飾り帯は、この紋と同じ入れ物 （.iwaki-kw__inner）の ::before と ::after で描いています。 並び順のうえではその2つのほうが後に描かれるため、外すと 罫と帯が紋の上を素通りして横切ります （2026-08-16、実際に朱赤の帯が紋の真ん中を横切りました）。 紋を1段持ち上げて、罫を断ち切って見せています。 ⚠️ 丸の地色は、くくりの面の色（和紙・うすい）と同じにしてあります。 面の色を変えたときは、ここも一緒に変えてください。 合っていないと、紋の中心に色の違う丸が浮きます。 */ /* 🔵 2026-08-17：72px → 54px（0.75倍）。 輪の刻みが数えられる下限のすぐ上です。中の波（--kw-mark）も同じ割合で 小さくしてあります（34px → 25px）。 ⚠️ 紋は枠の「顔」なので、消さずに小さくしています。 */ .iwaki-kw__medal { display: block; position: absolute; top: 0; left: 50%; width: 54px; height: 54px; transform: translate(-50%, -50%); background-color: var(--wp--preset--color--washi-light); border-radius: 50%; pointer-events: none; z-index: 1; } .iwaki-kw__medal::before { content: ""; position: absolute; inset: 0; background-color: var(--wp--preset--color--navy); -webkit-mask-image: url(assets/kazari/mon-a.svg); mask-image: url(assets/kazari/mon-a.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } /* 輪の中＝ブランドの波の意匠（青海波）。 縦組みロゴの現物を型紙にして、波の部分だけを切り出しています。 使っている比は「9. 商品詳細ページの型」の .pd-eyebrow とまったく同じです。 数字の意味と出どころは、そちらの注記に詳しく書いてあります。 高さ ＝ 幅 × 0.5475 型紙の拡大率 ＝ 幅 × 1.3858 型紙の横のずれ ＝ 幅 × 0.1832（左へ） 型紙の縦のずれ ＝ 幅 × 0.0215（上へ） 🔵 波の大きさは、下の1行（--kw-mark）だけで変わります。 🔴 高さを「波の高さちょうど」より大きくしないこと。大きくすると、 波の下にある社名の文字と角印が、輪の中にはみ出して出てきます。 */ .iwaki-kw__medal::after { /* 2026-08-17：34px → 25px（紋を72px→54pxにしたのと同じ割合） */ --kw-mark: 25px; content: ""; position: absolute; top: 50%; left: 50%; width: var(--kw-mark); height: calc(var(--kw-mark) * 0.5475); transform: translate(-50%, -50%); background-color: var(--wp--preset--color--navy); -webkit-mask-image: url(assets/images/logo-vertical.png); mask-image: url(assets/images/logo-vertical.png); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: calc(var(--kw-mark) * 1.3858) auto; mask-size: calc(var(--kw-mark) * 1.3858) auto; -webkit-mask-position: calc(var(--kw-mark) * -0.1832) calc(var(--kw-mark) * -0.0215); mask-position: calc(var(--kw-mark) * -0.1832) calc(var(--kw-mark) * -0.0215); } } /* --- 狭い画面（スマートフォン）での手当て --------------------------- 🔴🔴【2026-08-20：残すものと削るものを、入れ替えました】 実機（スマートフォン）での指摘＝ 狭い画面の飾り枠が、パソコンで見たときの飾り枠と比べて、 点も、下の棒も無い状態になっており、別物に見える。 ⚠️ 2026-08-17の判断が誤りでした。**逆のものを消していました。** それまでは「角飾りを残し、朱赤の飾り帯を消す」でした。 ですが、この枠が「飾り枠」に見えているのは、**横に走る帯**のおかげです。 帯を消すと、残るのはただの罫2本と丸1つになり、パソコンとは別物に見えます。 ＝ ご指摘の「点もなければ、下の棒もない」は、この帯のことです （帯は上と下の2本あり、細かい刻みが点の連なりに見えます）。 【いま：残す＝飾り帯と中央の紋 ／ 削る＝四隅の角飾り】 🔴 帯が走れる幅を、実際に数えました（左右の余白 1.5rem＝24px と、 .iwaki-kw の左右 1.5rem＝24px を引いた値が .iwaki-kw__inner の幅です）。 | 画面幅 | .iwaki-kw__inner の幅 | 帯の走る幅（左右16pxを引く） | 枠の幅に占める割合 | | 375px | 279px | **247px** | 88.5% | | 390px | 294px | **262px** | 89.1% | | 414px | 318px | **286px** | 89.9% | | パソコン（1280px） | 1072px | 984px（左右44px） | 91.8% | ＝ **パソコンとほぼ同じ割合で帯が走ります。** 狭い画面用に左右を44px→16pxへ詰めたのは、 角飾りが無くなって、避ける相手がいなくなったためです。 🔴 **線がつぶれる心配はありません。** 帯の高さは 6px のままで、 **パソコンとまったく同じ値**です（mask-size の「auto 6px」）。 帯は横に繰り返す型紙なので、幅が短くなっても**縮小されず、本数が減るだけ**です。 ＝「細かい飾りは小さくすると線がつぶれる」は、大きさを縮めている 角飾り・紋に当てはまる話で、この帯には当てはまりません。 ⚠️ 角飾りを消したのは、帯と場所を取り合うからではありません （数えたところ、角飾り32pxと帯の開始44pxは、もともと重なっていませんでした）。 **狭い画面では飾りを1つ減らしたほうが静かに収まるため**の判断です。 🔵 戻したくなったら、下の .iwaki-kw__corner の display: none を消し、 width: 32px / height: 18.7px に戻すだけです（1か所）。 【そのまま残しているもの】 ・中央の紋 54px → 48px（輪の刻みが見える下限）。今回は触っていません ⚠️ 上下の余白は、広い画面ほどではないにせよ、こちらも広げています （44px/40px → 60px/52px）。狭い画面のほうが、詰まりを強く感じるためです。 */ @media (max-width: 640px) { .iwaki-kw { /* 2026-08-17（2回目）：3rem/2.5rem → 3.25rem/3.25rem（上下をそろえる） */ padding-top: 3.25rem; padding-bottom: 3.25rem; } /* 2026-08-17（2回目）：3.75rem/3.25rem → 4.5rem（上下とも72px）。 ⚠️ 広い画面の104pxをそのまま持ち込んでいません。狭い画面では 1列に積まれるぶん縦がもともと長く、同じだけ空けると間延びします。 */ .iwaki-kw__inner { padding: 4.5rem 1rem; } .iwaki-kw__inner::before { top: 14px; bottom: 14px; } /* 🔵 2026-08-21：四隅の角飾りを、狭い画面でも出す形に戻しました（発注側のご指示）。 * * 【経緯】3回、行ったり来たりしています。次に読む人が同じ道をたどらないよう、全部書きます。 * ① 8/17 … 「角飾りが左右に居座ると、帯が走る幅が残らない」と考えて、帯のほうを消した * ② 8/20 … 実機を見た結果、「点も、下の棒も出ていない。パソコンと全然違う」との指摘。 * そこで残すものと削るものを入れ替え、角飾りを消して帯を出した * ③ 8/21 … 実測すると、①の前提そのものが誤りだった。 * 🔴 角飾りは32px、帯が始まるのは44px。**もともと重なっていない。** * ＝ どちらも消す必要が無かった。両方出すのが正解。 * * 🔴 ここが大事：**帯の左右も 44px に戻すこと。** * ②で帯を16pxまで広げてある状態のまま角飾りを戻すと、こんどは本当に重なります。 * 44px は、パソコンと同じ値です。＝ 狭い画面でも、パソコンとまったく同じ組み合わせになります。 * * ⚠️ 大きさ（32px / 18.7px）は、線がつぶれない下限として8/17に決めた値です。 * パソコンは36pxなので、狭い画面だけ少し小さくしています。ここは変えていません。 */ .iwaki-kw__corner { width: 32px; height: 18.7px; } /* 🔵 2026-08-21：帯の左右を 16px → 44px（パソコンと同じ）へ戻しました。 上の角飾りと重ねないためです。高さ・色・濃さ・型紙は元からパソコンと同じ値です。 ⚠️ 帯そのものを消さないこと。消すと8/20のご指摘（「点も棒もない」）に逆戻りします。 */ .iwaki-kw__inner::after { left: 44px; right: 44px; } .iwaki-kw__medal { width: 48px; height: 48px; } .iwaki-kw__medal::after { --kw-mark: 22px; } } /* ===================================================================== 10a. お品書きの飾り罫線（麻の葉の帯・金の波）＝「10.」の上書き --------------------------------------------------------------------- 🔵 2026-10-01（版 2026.10.01.18）：Ikuzoさんのご決定で、見本v2の「麻の葉2.1倍」に置き換え。 見本＝プレビュー/お品書き罫線_v2_見本_2026-10-01.html HTML（patterns/product-grid.php の空の目印）は1文字も変えていません。 上の「10.」の元の渦巻き・朱赤の帯・輪は、そのまま残してあり、 この節が同じ部品の見た目を上書きしています。 【仕様】 外罫1px（紺）＋空き1px＋帯10px＋空き1px＋内罫1px（紺40%）＝グループ高さ14px 帯＝麻の葉の柄（assets/kazari/obi-asanoha.svg・25.452×29.4px・線0.8px）の 上下の真ん中だけを、中心線で対称に切り取って連ねる（紺60%） 中央＝金（#b08d4f）の波 64×35px・丸なし（商品詳細ページ .pd-eyebrow と同じ切り出し） 切れ目134px（スマホ124px）・両脇に直径4pxの小さな点（紺60%） 【部品の割り当て】 .iwaki-kw__inner の背景 … 内罫2本 .iwaki-kw__inner::before/after … 上と下の麻の葉の帯 .iwaki-kw__medal … 切れ目（地色）と両脇の点 .iwaki-kw__medal::before … 金の波　／ ::after は使わない（消す） .iwaki-kw__corner … 出さない（display: none） 🔴 元の渦巻きの罫線に戻すとき＝この節（10a）を、まるごと消すだけ。 assets/kazari/ の kado-a.svg・obi-a.svg・mon-a.svg は残してあります。 （手順は wordpress/反映メモ_2026-10-01.md にも書いてあります） ===================================================================== */ .iwaki-kw__inner { background: linear-gradient(rgba(26, 58, 92, 0.4), rgba(26, 58, 92, 0.4)) 0 12px / 100% 1px no-repeat, linear-gradient(rgba(26, 58, 92, 0.4), rgba(26, 58, 92, 0.4)) 0 calc(100% - 12px) / 100% 1px no-repeat; } /* 型紙が使えない環境では、外罫と内罫だけが残ります（四角い色の塊は出ません） */ .iwaki-kw__inner::before, .iwaki-kw__corner { display: none; } @supports ((-webkit-mask-image: none) or (mask-image: none)) { .iwaki-kw__inner::before, .iwaki-kw__inner::after { display: block; content: ""; position: absolute; left: 0; right: 0; height: 10px; border: 0; background-color: var(--wp--preset--color--navy); opacity: 0.6; pointer-events: none; -webkit-mask-image: url(assets/kazari/obi-asanoha.svg); mask-image: url(assets/kazari/obi-asanoha.svg); -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-size: 25.452px 29.4px; mask-size: 25.452px 29.4px; -webkit-mask-position: center center; mask-position: center center; } .iwaki-kw__inner::before { top: 1px; bottom: auto; } .iwaki-kw__inner::after { top: auto; bottom: 1px; } /* 切れ目（地色）と、両脇の小さな点。地色は .iwaki-kw と同じ washi-light */ .iwaki-kw__medal { top: 6px; width: 134px; height: 38px; border-radius: 0; background-color: var(--wp--preset--color--washi-light); background-image: radial-gradient(circle, rgba(26, 58, 92, 0.6) 0 2px, transparent 2.6px), radial-gradient(circle, rgba(26, 58, 92, 0.6) 0 2px, transparent 2.6px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: left 12px center, right 12px center; } /* 金の波（64px）。比の出どころは「9.」の .pd-eyebrow と同じ（高さ＝幅×0.5475 ほか）。 🔴 高さを幅×0.5475 より大きくしないこと（波の下の社名・角印が出てきます） */ .iwaki-kw__medal::before { --kw-wave: 64px; inset: auto; left: 50%; top: 50%; width: var(--kw-wave); height: calc(var(--kw-wave) * 0.5475); transform: translate(-50%, -50%); background-color: var(--wp--preset--color--gold); -webkit-mask-image: url(assets/images/logo-vertical.png); mask-image: url(assets/images/logo-vertical.png); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: calc(var(--kw-wave) * 1.3858) auto; mask-size: calc(var(--kw-wave) * 1.3858) auto; -webkit-mask-position: calc(var(--kw-wave) * -0.1832) calc(var(--kw-wave) * -0.0215); mask-position: calc(var(--kw-wave) * -0.1832) calc(var(--kw-wave) * -0.0215); } .iwaki-kw__medal::after { display: none; } } /* スマホ幅：切れ目は124px、点は波に近づける。波は縮めない（64px）。帯は縮めず本数が減るだけ */ @media (max-width: 640px) { .iwaki-kw__medal { width: 124px; height: 38px; background-position: left 8px center, right 8px center; } } /* ===================================================================== 10b. 下層ページの、軽い飾り（.iwaki-pagemark） --------------------------------------------------------------------- 2026-08-17 新設。厳選素材・催しごと・おしらせの3ページが、飾りが何も無く 寂しかったための追加です。 🔴 新しい意匠は起こしていません。トップページの飾り枠（「10.」＝引札風）と まったく同じ型紙（assets/kazari/mon-a.svg）を使い、うんと軽くしたものです。 別の飾りを作ると、サイトの中に様式が2つ混ざります。 【トップページと、どれだけ違うか】数で書きます。 | | トップの飾り枠 | 下層ページ（これ） | | 罫の本数 | 2本（1px ＋ 1px） | **1本だけ** | | 罫の濃さ | 100% と 40% | **22%** | | 四隅の角飾り | 4つ（36×21px） | **なし** | | 中央の紋 | 54px | **44px**（0.81倍） | | 紋の中の波 | 25px・紺100% | **22px・紺55%** | | 朱赤の飾り帯 | あり | **なし** | | 飾りの数 | 5つ | **1つ** | ＝ 飾りの数は5分の1、罫は1本だけ、色はすべて紺の薄いほう。 **「同じ語彙で、うんと軽く」**です。 ⚠️ ここに角飾りや朱赤を足さないこと。足した時点でトップページと同じ重さになり、 下層ページのほうが目立つ、という逆転が起きます。 【2026-08-17（版 .4）に変えた2点】実機を見ての手直しです。 ① 輪の中に、ブランドの波の意匠（青海波）を入れました。 それまでは輪だけで、中は空でした。 ② 紋を 36px → 44px に上げました。**波を入れるために必要だった最小限です。** 理由＝紋の中の空きは、型紙（mon-a.svg）のいちばん内側の円で決まり、 紋の直径の約3分の2しかありません。 紋36px → 中の空き24px → 収まる波は約17px 紋44px → 中の空き29px → 収まる波は 22px 実際に 36/40/44px の3通りを原寸で描いて見比べたところ、 **17pxでは波が黒い塊になり、青海波と分かりません。22pxで弧が数えられます。** 22pxは、トップページの紋が狭い画面で使っている波と同じ大きさです （＝すでに実機で見えている大きさ。新しく決めた値ではありません）。 ⚠️ 44pxを下げるなら、波も一緒に下げること。片方だけ動かすと、 波が輪の刻みに重なります。 【使い方】3ページとも同じ形で、中身の前後に1つずつ置いています。 ⚠️ 紋の中を塗る色は、ページの地色（和紙・うすい）と同じにしてあります。 地色を変えたときは、ここも一緒に変えてください。合っていないと、 罫の真ん中に色の違う丸が浮きます。 ===================================================================== */ /* 🔵 2026-08-17（版 .4）：上下の空きを 3rem → 6rem（48px → 96px）へ、ちょうど倍に。 実機で「飾りと商品が近すぎる」ためです。とくに、おしらせは中身が1件しかなく、 罫2本が159pxの間に詰まって、1件を挟み込んでいる形に見えていました。 前：飾り →48px→ 中身 →48px→ 飾り（罫と罫の間 159px） 後：飾り →96px→ 中身 →96px→ 飾り（罫と罫の間 255px） ⚠️ 1割2割では効きません。ここは「明らかに空いた」と分かる差が要ります。 🔵 上の余白は、上に部品があるときだけ効きます。ページの先頭に置いた飾り （おしらせ）では外側へ抜けるため、そこは囲みの余白（80px）が受け持ちます。 */ .iwaki-pagemark { position: relative; max-width: 40rem; height: 1px; margin: 6rem auto; background: rgba(26, 58, 92, 0.22); } /* 型紙が使えない環境では、罫だけが残ります（四角い色の塊は出ません）。 「10.」の飾り枠と同じ考え方です。 */ @supports ((-webkit-mask-image: none) or (mask-image: none)) { .iwaki-pagemark::before { content: ""; position: absolute; top: 50%; left: 50%; /* 2026-08-17（版 .4）：36px → 44px。上の注記の②を参照 */ width: 44px; height: 44px; transform: translate(-50%, -50%); /* 罫を断ち切るための、地色で塗った丸 */ background-color: var(--wp--preset--color--washi-light); border-radius: 50%; } /* 輪（型紙 mon-a.svg）と、その中に入る波の意匠を、 **1つの要素で2枚重ね**にしています。 🔴 なぜ2枚重ねなのか＝この飾りは、要素そのものが「罫」で、 ::before が「地色の丸」に使われており、**空いている擬似要素が ::after の1つしか残っていません。** 型紙は複数枚を並べて 指定できるので（重ね方の既定は「足し算」＝2枚の合わさった形）、 要素を増やさずに済みます。同じ書き方は「10. くくりの飾り枠」の 朱赤の飾り帯（型紙2枚）でも使っています。 ＝ 3ページ×2か所＝6か所のHTMLを、1文字も触らずに済みます。 ⚠️ 2枚は同じ色で塗られます（1つの要素なので）。輪だけ濃く、 波だけ薄く、といった塗り分けはできません。必要になったら、 そのときは飾り用の入れ物を1つ足してください。 【波の位置の出し方】--pm-ring（輪の大きさ）と --pm-mark（波の幅）の 2つだけで、位置は自動で出るように書いてあります。 波の高さ ＝ 幅 × 0.5475 型紙の拡大率 ＝ 幅 × 1.3858 型紙の横のずれ ＝ 幅 × 0.1832（左へ） 型紙の縦のずれ ＝ 幅 × 0.0215（上へ） この4つの比の出どころ（縦組みロゴのどこを切り出しているか）は、 「9. 商品詳細ページの型」の .pd-eyebrow の注記に、実測値つきで 書いてあります。**数字は画素ではなく比なので、書き換えないこと。** 🔴 波の高さを「幅 × 0.5475」より大きくしないこと。大きくすると、 波の下にある社名の文字と角印が、輪の中にはみ出して出てきます。 */ .iwaki-pagemark::after { --pm-ring: 44px; --pm-mark: 22px; content: ""; position: absolute; top: 50%; left: 50%; width: var(--pm-ring); height: var(--pm-ring); transform: translate(-50%, -50%); background-color: rgba(26, 58, 92, 0.55); -webkit-mask-image: url(assets/kazari/mon-a.svg), url(assets/images/logo-vertical.png); mask-image: url(assets/kazari/mon-a.svg), url(assets/images/logo-vertical.png); -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; -webkit-mask-size: 100% 100%, calc(var(--pm-mark) * 1.3858) auto; mask-size: 100% 100%, calc(var(--pm-mark) * 1.3858) auto; -webkit-mask-position: center center, calc((var(--pm-ring) - var(--pm-mark)) / 2 - var(--pm-mark) * 0.1832) calc((var(--pm-ring) - var(--pm-mark) * 0.5475) / 2 - var(--pm-mark) * 0.0215); mask-position: center center, calc((var(--pm-ring) - var(--pm-mark)) / 2 - var(--pm-mark) * 0.1832) calc((var(--pm-ring) - var(--pm-mark) * 0.5475) / 2 - var(--pm-mark) * 0.0215); } } /* 狭い画面では、罫の左右を画面に合わせて縮めます。紋と波はそのまま。 🔵 2026-08-17（版 .4）：上下の空きも 2.25rem → 4.5rem（36px → 72px）へ倍に。 狭い画面は1列に積まれるぶん、詰まりがかえって目立つためです。 広い画面の96pxをそのまま持ち込むと、こんどは間延びします。 */ @media (max-width: 640px) { .iwaki-pagemark { margin: 4.5rem auto; } } /* ===================================================================== 10c. 「こだわりから選ぶ」の6ページの飾り（.iwaki-pagemark--short） --------------------------------------------------------------------- 印（アイコン）を押した先の6ページ（ノングルテン・乳不使用・白砂糖不使用・ 青森の無農薬素材・規格外品の活用・未病養生）の飾りです。 🔴 これは**新しい飾りではありません。** 上の「10b.」の .iwaki-pagemark に、 **1行だけ足した別の顔**です。 罫も・紋も・紋の中の波も・色も、**すべて下層3ページとまったく同じ。** **違うのは、罫の長さだけ**です。 | | 罫の長さ | 飾り全体の幅 | 紋 | 波 | | 下層3ページ | 320＋320px | 640px | 44px・紺55% | 22px・紺55% | | こだわり6ページ | **88＋88px** | **220px**（0.34倍） | 同じ | 同じ | ＝ 全幅にすうっと引かれた罫か、中央にきゅっとまとまった短い罫か。 **横に並べなくても、開いた瞬間に違いが分かります。** それでいて紋も波も色も同じなので、**同じサイトの飾りに見えます。** 【なぜ「罫の長さ」で違いを出したか】 ⚠️ **印は波で統一する**という決まりがあります。サイトの中で、波以外の印を 使っているページは1つもありません。 ですので、違いは**印そのものではなく、罫の引き方**で出しています。 【描いて見比べた案（すべて原寸で描き起こして判断）】 ✅ **A 罫を短くする（88＋88px）** … 採用。 罫は1本のまま、長さだけが変わります。**足したものが1つもありません。** ❌ A2 罫を短く＋紋を52pxへ大きく … 紋52pxは**トップページの54pxとほぼ同じ**。 「下層のほうが目立つ」という逆転が起きます ❌ C 罫を破線にする … 原寸で見ると**切り取り線に見えます。** 点が並ぶぶん、実線の髪の毛より**かえって騒がしく**なりました ❌ E 罫の端に、うんと小さい渦巻き（角飾り）を足す … 角飾り（kado-a.svg）は **四角い枠の角に置く形**に描かれているため、線の端に置くと**罫とつながらず、 宙に浮いた鉤（かぎ）**に見えます。飾りの数も1つ増えます 【罫の長さを88pxにした理由】3通り描いて見比べました。 64＋64px（全体172px） … 罫が短すぎて、切れ端のように見える **88＋88px（全体220px）** … ✅ 罫がちゃんと罫に見え、紋がそれを句切って見える 120＋120px（全体284px） … 全幅の罫に近づき、ひと目での違いが弱まる 【直し方】下の1行（max-width）だけです。 ⚠️ 紋は44pxなので、**画面に見える罫の長さは (max-width − 44) ÷ 2** になります。 220pxなら片側88px。**紋を大きくしたら、見える罫はその分だけ短くなります。** ⚠️ 130pxを下回らせないこと。紋44pxを引くと片側43pxしか残らず、 罫が紋の飾りに見えてしまいます。 【🔴 見送った案：ブランドの角印（2026-08-17・版 .5 で不採用）】 この6ページだけ「紋の中身を、波ではなくブランドの朱赤の角印にする」案を作り、 実際に組んで実測まで済ませましたが、**採用しませんでした。** 🔴 理由＝**サイトの中で、角印を"印"として使っているページが1つもないためです。** ここだけで持ち出すと、サイトに様式が2つ混ざります。 **印は波（青海波）で統一する。** これは決まりごとです。 ⚠️ **同じ案を、もう一度出さないでください。** 「印のページだから印を捺す」という 理屈は通っていましたが、**理屈が通ることと、揃って見えることは別**でした。 さらにその前には「角印を、罫も紋も無しでぽつんと捺す」形も試して、 **実機で浮いている**と分かっています。角印は、この飾りには使いません。 【残しておく実測値】使わないと決めましたが、測り直す手間を省くために残します。 別の場面（判子ふうの見出し・印刷物・OGP画像など）では使えます。 ブランドの角印は assets/images/logo-vertical.png（1400 × 752px）の左下にあります。 実測（2026-08-17・透明でない画素を1つずつ数えたもの）： 印のある範囲 ＝ 左から0px・上から626px・幅132px・高さ126px その箱の中身 ＝ 11,883画素すべてが朱赤。ほかの絵は1画素も入っていません いちばん近い隣 ＝ 右へ65px先（社名の「岩」）／上へ52px先（波の下端） 画像の中の色 ＝ 明るい赤 #e60012（ブランドの朱赤 #a8322a とは別の色） 型紙（マスク）で切り出すときの比（印の幅を1としたとき）： 高さ ＝ 幅 × (126 ÷ 132) ＝ 幅 × 0.9545 型紙の拡大率 ＝ 幅 × (1400 ÷ 132) ＝ 幅 × 10.6061 型紙の横のずれ ＝ 0（印は画像の左端に接しています） 型紙の縦のずれ ＝ 幅 × (626 ÷ 132) ＝ 幅 × 4.7424（上へ） 紋44pxの中に収めるなら、角印は18pxが上限の目安でした （内側の空きは半径14.67px。角印は四角なので四隅がいちばん近づき、 対角線の半分 ＝ 幅 × 0.6909。22pxにすると計算上はみ出します）。 ===================================================================== */ /* 🔵 足しているのは、この1行だけです。 ほかは何も書いていないので、罫・紋・波・色・上下の空きは すべて「10b.」の指定がそのまま効きます。 ＝ 下層3ページの飾りを直せば、この6ページも一緒に直ります。 */ .iwaki-pagemark--short { max-width: 220px; } /* ===================================================================== 11. 商品・素材のカードの格子（.iwaki-cardgrid） --------------------------------------------------------------------- 2026-08-17 新設。トップページで同じ形のカードが並ぶ3か所 ・お品書き ＞ インナーケア・美容リカバリー（飾り枠の中） ・お品書き ＞ ギルトフリー・アレルギー配慮フード（飾り枠の中） ・厳選素材／催しごと（飾り枠の外） を、1か所でまとめて決めます。 【なぜ作ったか】実機で見たとき、写真も写真どうしの間も詰まりすぎていたため、 写真を二回り小さくして、あいだを空け直しました。 場所ごとにばらばらに直すと、同じページの中でカードの大きさが揃わなくなります。 【前 → 後（1280px幅・実測）】 写真の大きさ お品書き 325.33px → 245.33px（0.754倍） 厳選素材 357.33px → 245.33px（0.687倍） 写真と写真の間 横 24px → 52px ／ 縦 24px → 56px ＝ 3か所すべてで、同じ245.33pxの正方形にそろいます。 【仕組み】WordPressの格子（グリッド）は、既定では 「minmax(18rem, 1fr) を、入るだけ並べる」という作りです。 そのままだと横幅いっぱいまで写真が伸びるので、 ①格子そのものに最大幅を決める（840px） ②1枠の最小幅を 18rem → 13.5rem に下げる の2つで、3列を保ったまま1枚あたりを小さくしています。 🔴 選び方（セレクタ）を、わざとクラス2つ分にしてあります。 WordPressが自動で書き出す格子の指定（grid-template-columns と gap）は クラス1つ分の強さです。こちらも1つ分だと引き分けになり、 どちらが勝つかは読み込まれる順番次第になります。 ⚠️ 列数の計算：入る列数 ＝ (使える幅 + 横の間) ÷ (1枠の最小幅 + 横の間) 840px・間52px・最小216pxのとき (840+52)÷(216+52)＝3.33 → 3列。 1枠の最小幅を 171px より小さくすると4列に、245px より大きくすると2列に変わります。 この2つの数のあいだから外れないこと。 ⚠️ 枠に入った写真は、枠の形に合わせて中央を残す形で収まります （「2b. 写真の枠」の object-fit: cover）。枠が小さくなっても、 映る部分の割合は変わりません（＝どの画面でも同じ部分が見えます）。 ===================================================================== */ .wp-block-group .iwaki-cardgrid { grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 3.5rem 3.25rem; max-width: 840px; margin-left: auto; margin-right: auto; } /* 🔵 2026-10-01（版 2026.10.01.9）：催しごと（カードが1枚だけ）のときは、1枚を中央に置く。 幅はカード1枚ぶん（15.33rem）。auto-fit にはしない（2枚以上の並びを変えないため）。 */ .wp-block-group .iwaki-cardgrid:has(> .iwaki-card:only-child) { grid-template-columns: minmax(0, 15.33rem); justify-content: center; } /* 🔵 2026-10-01（版 2026.10.01.14）：お品書き（#products）の区分が「ちょうど2つ」「ちょうど4つ」のときの並べ方。 3つ・5つ以上のときは、上の既定のまま（変えていません）。スマホ幅（640px以下）も変えていません。 ・2つ（インナーケア）：幅を2列ぶん（34rem＝544px）に絞り、中央に寄せる。2枚とも中央に並ぶ。 ・4つ（ギルトフリー）：641px〜1119px は2列×2段（幅は2つのときと同じ）。 1120px 以上は4つを1段に並べる。使える幅は最大1024px（実測：1280px・1920px とも）なので、 カード間を 3.25rem→2rem に詰め、1枚は約232px（それまでは245px）になる。 ⚠️ 245px のまま4つ並べるには 245.33×4＋間52×3＝1137px 要り、1024px には入らない。 ⚠️ 1120px は「使える幅が 960px（＝216px×4＋間32px×3）以上になる画面幅」。 使える幅 ＝ 画面幅－159px（実測：1100px 幅のとき 941px）で、1119px だと 960px になる。 */ @media (min-width: 641px) { #products .iwaki-cardgrid:has(> .iwaki-card:nth-child(2):last-child), #products .iwaki-cardgrid:has(> .iwaki-card:nth-child(4):last-child) { max-width: 34rem; } } @media (min-width: 1120px) { #products .iwaki-cardgrid:has(> .iwaki-card:nth-child(4):last-child) { max-width: 1024px; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2rem; } } /* ===================================================================== 11b. 狭い画面（スマートフォン）でのカード --------------------------------------------------------------------- 2026-08-20 新設。**ここは狭い画面だけの節です。パソコンは1pxも変わりません** （すべて @media (max-width: 640px) の中にあります）。 【何が起きていたか】🔴 実際に数えた値です スマートフォンでは、どの格子も1列になります。そのとき1枚あたりの幅は、 「その格子が置かれている場所の幅」がそのまま出ます。ところが置き場所は2種類あり、 **飾り枠の中と外で、80pxの差**がありました。 ・飾り枠の中（お品書き）… 飾り枠が内側へ寄せているぶん狭い .iwaki-kw の左右 24px ＋ .iwaki-kw__inner の左右 16px ＝ 片側40px・両側80px ・飾り枠の外（厳選素材・催しごと）… 何も寄せないので、画面の端から24pxまで広がる 画面の幅ごとの実際の値（左右の余白 1.5rem＝24px を引いた値）： | 画面幅 | 飾り枠の中（お品書き） | 飾り枠の外（厳選素材） | | 375px | 247px | **327px** | | 390px | 262px | **342px** | | 414px | 286px | **366px** | ＝ 厳選素材の写真だけが、**常に80px大きく**、画面の端まで迫っていました。 375pxの画面では、写真の外に残る余白が左右24pxずつしかありません。 **これが「厳選素材だけ前のまんま・ギッチギッチ」の正体です。** ⚠️ 2026-08-17に写真を一回り小さくしたのは、**格子の最大幅840pxが効く広い画面の話**でした。 狭い画面では840pxは効かないため、**あの手直しはスマートフォンには一切届いていません。** 実機での指摘「パソコンではなく、スマートフォンで見たときにまだ直っていない」は、 そのとおりです。 【どう直したか】飾り枠の外の格子を、**飾り枠の中とまったく同じ幅にそろえます。** max-width: calc(100% - 5rem) … 5rem＝80px＝上で数えた差そのものです。 ＝ 375pxの画面で 327px → 247px。お品書きの247pxと1pxも違わなくなります。 🔴 飾り枠の中（.iwaki-kw の中）は、**わざと元の840pxへ戻しています。** 枠がすでに80px寄せているので、ここで重ねて引くと二重に狭くなります。 ＝ お品書きは、この節が入る前とまったく同じ幅のままです。 ⚠️ 列の数は変わりません。1枠の最小は13.5rem（216px）、横の間は3.25rem（52px）なので、 (247+52)÷(216+52)＝1.11 → 1列。直す前（1.41 → 1列）と同じです。 ＝ 変わるのは「1枚の大きさ」だけで、並び方は変えていません。 【文字の大きさ】狭い画面でだけ 16px（1rem）へ上げています。 素材名 0.95rem（15.2px） → 1rem（16px） 説明文 0.8rem （12.8px） → 1rem（16px） ⚠️ パソコン側の値（0.95rem／0.8rem）は、下の2行でそのまま持っています。 **パソコンの見え方を変えないため**です。 🔵 この2つは、それまで各パターンの中に style="font-size:…" と直接書いてありました。 直接書いた指定はCSSより強く、狭い画面だけ変えることができません。 そこで名札（.iwaki-card__name ／ .iwaki-card__desc）に移してあります。 ⚠️ 数字は写しただけで、**パソコンでは1pxも変えていません。** ===================================================================== */ .iwaki-card__name { font-size: 0.95rem; } .iwaki-card__desc { font-size: 0.8rem; line-height: 1.8; } @media (max-width: 640px) { .wp-block-group .iwaki-cardgrid { max-width: calc(100% - 5rem); } /* 飾り枠の中は据え置き（上の 840px と同じ値を書き戻しています）。 ⚠️ この2つは強さが同じ（クラス2つ分）ため、**後に書いたほうが勝ちます。** 順番を入れ替えないこと。 */ .iwaki-kw .iwaki-cardgrid { max-width: 840px; } .iwaki-card__name, .iwaki-card__desc { font-size: 1rem; } } /* ===================================================================== 19. 見た目だけのフォーム（.iwaki-mockform）と、地図の入れ物（.iwaki-map） ===================================================================== 🔵 2026-08-20 追加。お問い合わせ・法人向けお問い合わせ・店舗概要の3ページ用。 🔴🔴 いちばん先に読むこと：**この節は、まだ画面に効いていません。** 3つのページは、指定を**要素に直接（style="…"）**書いた形で作られています。 要素に直接書いた指定は、CSSファイルの指定より**必ず強い**ため、 ここに何を書いても上書きされます（!important を足せば勝てますが、 それは"もっと強い直書き"を増やすだけで、事態を悪くします）。 ＝ この節が効くようになるのは、**patterns 側の style="…" を外したとき**です。 　 外す作業は patterns/ 側の持ち場です。 　 このファイルの担当範囲では patterns/ を触らないため、 　 **こちらは「受け皿」を先に用意した状態**にしてあります。 🔵 いま画面がどう見えているかは、この節ではなく、 patterns/contact-body.php ／ btob-contact.php ／ company-body.php の 中の style="…" が決めています。**先に直すべきはあちらではありません。** 🔴🔴 2026-08-20 追記：**「style="…" を外すだけ」では、同じ姿になりません。** 数字（大きさ・色・余白）は、たしかにそのままこの節へ写してあります。 ですが、この節が待っている**7つの名札（クラス）が、まだ要素に付いていません。** .iwaki-mockform-grid ／ -row ／ -row--wide ／ -req ／ -privacy ／ -disabled-note ／ -submit いま付いているのは、いちばん外側の親の .iwaki-mockform だけです。 ＝ この状態で style="…" を外すと、**受け止める先が無いまま裸になります。** 2列の組みが1列に崩れ、行と行のあいだが詰まり、 「必須」の朱色が消え、注意書きの中央そろえも落ちます。 🔵 正しい手順は、**外すのと同時に、上の7つの名札を要素へ付ける**ことです。 どちらか片方だけをやらないでください。 ⚠️ もう1点。地図の入れ物には、**まだ class="iwaki-map" が付いていません** （company-body.php は直書きだけで組まれています）。 下の .iwaki-map が効くには、①class を付ける ②style="…" を外す の両方が要ります。 ===================================================================== */ /* --- 見た目だけのフォーム --------------------------------------------- 🔴 文字は入力欄・ラベル・ボタン・注意書きまで、すべて **1rem（16px）以上**。 （`.claude/rules/ui-text-size.md`／PC中心の画面の本文16〜17px） ⚠️ 16pxを下回ると、iPhoneは入力欄に触れた瞬間に画面を勝手に拡大し、 そのあと元に戻りません。**"小さくても収まるから"で縮めないこと。** */ .iwaki-mockform { max-width: 760px; margin-inline: auto; } /* 欄は2列。狭い画面では自動で1列になります。 🔵 「18remより狭くなるなら1列にする」という書き方（auto-fit＋minmax）です。 画面幅を数える必要が無いので、ここに @media は要りません。 🔴 2026-08-20：`minmax(18rem, …)` を `minmax(min(18rem, 100%), …)` へ直しました。 18rem＝288px が「1列の最小の幅」でした。ところが幅320pxの端末では、 左右の余白24pxを引くと使える幅が272pxしかなく、**16pxぶん横にはみ出して ページ全体が横スクロール**していました（文字を400%に拡大したときも同じ）。 min(18rem, 100%) は「18rem。ただし入る幅を超えるなら、入る幅まで」という意味で、 ⚠️ 通常の画面幅では1pxも見た目が変わりません。 */ .iwaki-mockform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: 0 1.5rem; } .iwaki-mockform-row { margin: 0 0 1.25rem; } /* 1行で使う欄（種別・お問い合わせ内容）は、2列ぶんを占めます */ .iwaki-mockform-row--wide { grid-column: 1 / -1; margin: 0 0 1.25rem; } .iwaki-mockform label { display: block; font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.6; margin: 0 0 0.4rem; color: var(--wp--preset--color--navy); } /* 「必須」の印。朱赤（和のトンマナ）です */ .iwaki-mockform .iwaki-mockform-req { margin-left: 0.6rem; font-size: 1rem; font-weight: 400; color: var(--wp--preset--color--red); } .iwaki-mockform input, .iwaki-mockform select, .iwaki-mockform textarea { display: block; width: 100%; box-sizing: border-box; font-family: inherit; font-size: 1rem; line-height: 1.6; color: var(--wp--preset--color--ink); background: var(--wp--preset--color--white); border: 1px solid rgba(26, 58, 92, 0.35); border-radius: 4px; padding: 0.7rem 0.9rem; } /* 触っている欄がどれか分かるようにする 🔴 この指定を消さないこと。消すと、キーボードだけで操作している方には いまどの欄にいるのかが分からなくなります。 */ .iwaki-mockform input:focus-visible, .iwaki-mockform select:focus-visible, .iwaki-mockform textarea:focus-visible { outline: 2px solid var(--wp--preset--color--navy); outline-offset: 1px; } /* 🔴🔴 送信ボタン ── 「押せない」ことが、見て分かる姿にしてあります。 　　**押せそうに見えるのに押せない、が一番いけません。** 　　・文字も枠も薄い墨（本物のボタンは紺＋朱赤で、はっきり濃い） 　　・面は、ごく薄い墨の膜（本物は白地か紺地） 　　・カーソルは not-allowed（乗せた瞬間に「禁止」の形になります） 　　⚠️ ここを濃くしないこと。濃くすると本物のボタンと見分けがつかなくなり、 　　　 お客様が長文を書いたあとに「送れない」と気づくことになります。 🔵 押せないことは、見た目だけでなく patterns 側でも二重に止めてあります 　　（button に disabled、そもそも
を使っていない）。 */ .iwaki-mockform button[disabled] { display: inline-block; font-family: inherit; font-size: 1rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.6; color: rgba(43, 38, 34, 0.45); background: rgba(43, 38, 34, 0.06); border: 1px solid rgba(43, 38, 34, 0.25); border-radius: 2px; padding: 0.8rem 2.5rem; cursor: not-allowed; } /* 個人情報の扱いへの案内・「押せません」の一文 */ .iwaki-mockform-privacy { margin: 0.5rem 0 1.5rem; font-size: 1rem; line-height: 1.8; } .iwaki-mockform-disabled-note { margin: 0.75rem 0 0; text-align: center; font-size: 1rem; line-height: 1.8; color: var(--wp--preset--color--red); } .iwaki-mockform-submit { margin: 0; text-align: center; } /* 洋のページ（クリーム地）に置いたときだけ、枠と印を洋の色へ寄せる ⚠️ 和のページでは上の指定のままです。ここは"上書き"であって、置き換えではありません。 理由＝紺と朱赤は和の色です。クリーム地の商品ページに同じ紺の枠を出すと、 そのページだけ色が1つ増えて浮きます（洋は クリーム・金・炭 の3色）。 */ .iwaki-tpl-product .iwaki-mockform label { color: var(--wp--preset--color--charcoal); } .iwaki-tpl-product .iwaki-mockform .iwaki-mockform-req, .iwaki-tpl-product .iwaki-mockform .iwaki-mockform-disabled-note { color: var(--wp--preset--color--gold); } .iwaki-tpl-product .iwaki-mockform input, .iwaki-tpl-product .iwaki-mockform select, .iwaki-tpl-product .iwaki-mockform textarea { color: var(--wp--preset--color--charcoal); border-color: rgba(58, 54, 48, 0.3); } .iwaki-tpl-product .iwaki-mockform input:focus-visible, .iwaki-tpl-product .iwaki-mockform select:focus-visible, .iwaki-tpl-product .iwaki-mockform textarea:focus-visible { outline-color: var(--wp--preset--color--charcoal); } /* --- 地図の入れ物 ------------------------------------------------------ 🔴 スマートフォンで横にはみ出さないための指定です。地図の埋め込みは、 はみ出す事故がいちばん多い場所です。 ・width:100% と max-width:100% ＝ 画面より広くならない ・aspect-ratio:16 / 7 ＝ 高さを、幅から自動で決める ・min-height:260px ＝ 狭い画面では比のままだと高さが約164pxしかなく、 地図として使いものにならないため、下限を置いています ・overflow:hidden ＝ 角を丸めた枠から地図がはみ出さないように 🔴 中の地図（iframe）は height:100% ではなく **inset:0** で広げること。 上の min-height が効いた狭い画面では、入れ物の高さの決まり方が変わり、 「100%が何の100%なのか」が定まりません（ブラウザによっては高さ0＝地図が消えます）。 inset:0 なら、高さの決まり方によらず必ず埋まります。 （この理由づけは patterns/ 側の設計どおりです。妥当なので、そのまま採っています） */ .iwaki-map { position: relative; width: 100%; max-width: 100%; aspect-ratio: 16 / 7; min-height: 260px; border: 1px solid rgba(26, 58, 92, 0.15); border-radius: 4px; overflow: hidden; } .iwaki-map iframe { display: block; position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* 🔵 2026-10-01（版 2026.10.01.5）：CSSは変えていません（版の番号のみ）。この版の中身＝代表挨拶の差し替え（patterns/greeting-body.php）／ &pumpkin 3商品を「隠す印」で一時的に隠す（inc/hidden-products.php）／グミのグレープフルーツ味の根拠なし記述を「（先方確認中）」に。 */ /* 🔵 2026-10-01（版 2026.10.01.6）：CSSは変えていません（版の番号のみ。説明文は既存の .iwaki-card__desc をそのまま使用）。この版の中身＝ 催しごとに短い説明文の欄を追加／1枚目を「あおもり食品展に出展しました」に置き換え／2・3枚目の仮の行を「隠す印」で隠す（inc/hidden-products.php）／ Q&A（patterns/faq-body.php）のグミの「1粒あたり25mg」の一文を外す。 */ /* ===================================================================== 農園LP（Agury Land）の見た目 --------------------------------------------------------------------- 🔵 2026-10-01（版 2026.10.01.7）：アグリーランドを、商品の詳細ページから 「農園を紹介する1枚のページ」に作り替えました（patterns/product-agury-land-body.php）。 見た目は素材ページと同じ部品（和紙の帯・短い罫・カード・外枠のボタン）を使い回していて、 新しく足したのは、下の「写真枠の色を和にそろえる」数行だけです。 🔴 なぜ要るか このページは、いまの固定ページのテンプレート「商品詳細ページ（洋）」のままで表示します （管理画面の設定変更を要らなくするため）。そのテンプレートでは、body に iwaki-tpl-product が付き、 写真の枠が「洋（炭色の斜線・灰色の下地）」に変わります（このファイルの「2.」付近）。 農園のページは「和」なので、このページの中だけ、紺の斜線・紺の下地に戻します。 ⚠️ 選び方（セレクタ）は、洋の側（.iwaki-tpl-product .iwaki-photo-slot ＝印2つ分）より強く （印3つ分）してあるので、書く場所が後ろでも前でも負けません。 ⚠️ 色の値は、洋の側の書き方に合わせて紺の値（theme.json の navy と同じ 26, 58, 92）を使っています。 ===================================================================== */ .iwaki-tpl-product .iwaki-lp-farm .iwaki-photo-slot, .iwaki-lp-farm .iwaki-photo-slot { background-image: repeating-linear-gradient( 45deg, rgba(26, 58, 92, 0.06), rgba(26, 58, 92, 0.06) 10px, rgba(26, 58, 92, 0.1) 10px, rgba(26, 58, 92, 0.1) 20px ); border-color: rgba(26, 58, 92, 0.4); color: var(--wp--preset--color--navy); } .iwaki-tpl-product .iwaki-lp-farm .iwaki-photo, .iwaki-lp-farm .iwaki-photo { background: rgba(26, 58, 92, 0.05); } /* 🔵 2026-10-01（版 2026.10.01.7）：上の「農園LP」のほか、CSSは変えていません。この版の中身＝ アグリーランドを農園の1枚ページに作り替え（patterns/product-agury-land-body.php）／写真枠3つ追加（inc/photo-slots.php）／ 検査（scripts/verify-product-pages.mjs）に「農園LP」の区分を追加。 */ /* 🔵 2026-10-01（版 2026.10.01.8）：CSSは変えていません。この版の中身＝ inc/hidden-products.php の「隠す印」の配列を空にした（&pumpkin の3商品を、いまは隠さない）／ 検査（scripts/verify-product-pages.mjs）を、配列が空でも通り「いまは隠していない」と出す形に直した。 */ /* 🔵 2026-10-01（版 2026.10.01.9）：CSSの変更は2つ。①カードが1枚だけのときの中央寄せ（「11」節の .iwaki-cardgrid:has(> .iwaki-card:only-child)）。 ②農園LPのカード名が .iwaki-card__name を使うようになった。そのほかの中身＝法務・校正の指摘の反映 （商品2種の帯の語／1×10の注記・本文／農園LPの言い回し／グミの本文／催し欄の「に」）。 */ /* 🔵 2026-10-01（版 2026.10.01.10）：CSSは変えていません。この版の中身＝グミの本文から甘さの強弱の言い方を外した（導入文・見出し「果実の輪郭を、そのまま。」・味わい欄）／&pumpkinドリンクの帯を「ドリンク」に。 */ /* ===================================================================== エールぼかしの場面（農園LP・版 2026.10.01.12） --------------------------------------------------------------------- 🔵 patterns/product-agury-land-body.php の「土づくりを支える、エールぼかし。」で使います。 色は theme.json の紺（navy）と、すでに使っている紺の薄い値（26, 58, 92）だけ。新しい色はありません。 🔴 表は、スマホ幅（640px以下）では「行ごとの縦積み」にします（横にはみ出させない）。 見出しの行は隠し、各セルの data-label の文字を頭に出します。 🔵 囲み（.iwaki-maker-box）は、先方が○×で決めるまで公開しない内容です。点線の枠で本文と区別し、 「掲載の可否」の欄は、印刷してペンで書けるよう高さを確保しています。 ===================================================================== */ .iwaki-lp-sub { color: var(--wp--preset--color--navy); font-weight: 700; line-height: 1.6; } .iwaki-maker-box { border: 2px dashed rgba(26, 58, 92, 0.4); padding: 1.5rem; background: rgba(26, 58, 92, 0.03); } .iwaki-lp-tablewrap { margin-top: 1.25rem; overflow-x: auto; } .iwaki-lp-table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.8; } .iwaki-lp-table th, .iwaki-lp-table td { text-align: left; vertical-align: top; padding: 0.75rem 0.75rem; border: 1px solid rgba(26, 58, 92, 0.3); } .iwaki-lp-table thead th { background: rgba(26, 58, 92, 0.08); color: var(--wp--preset--color--navy); font-weight: 700; } .iwaki-lp-table tbody th { color: var(--wp--preset--color--navy); font-weight: 700; width: 30%; } /* 囲みの表：○×を書き込む欄（うすい○と×を置き、ペンで丸をつけられる高さ） */ .iwaki-lp-table--check td.iwaki-lp-fill { width: 9rem; height: 3.5rem; text-align: center; vertical-align: middle; color: rgba(26, 58, 92, 0.3); background: #fff; } .iwaki-lp-table--check td.iwaki-lp-fill::after { content: "○　　×"; font-size: 1.25rem; letter-spacing: 0.1em; } .iwaki-lp-q { color: var(--wp--preset--color--navy); } @media (max-width: 640px) { .iwaki-maker-box { padding: 1rem; } .iwaki-lp-table, .iwaki-lp-table tbody, .iwaki-lp-table tr, .iwaki-lp-table th, .iwaki-lp-table td { display: block; width: auto; } /* 見出しの行は隠す（読み上げには残す） */ .iwaki-lp-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .iwaki-lp-table tr { border: 1px solid rgba(26, 58, 92, 0.3); margin-bottom: 0.75rem; background: #fff; } .iwaki-lp-table th, .iwaki-lp-table td { border: none; border-bottom: 1px solid rgba(26, 58, 92, 0.12); } .iwaki-lp-table tr > :last-child { border-bottom: none; } .iwaki-lp-table tbody th { width: auto; background: rgba(26, 58, 92, 0.08); } /* セルの頭に、その欄の名前を出す（囲みの1列目は文そのものなので出さない） */ .iwaki-lp-table td::before { content: attr(data-label); display: block; font-size: 0.875rem; font-weight: 700; color: var(--wp--preset--color--navy); } .iwaki-lp-table--check td:first-child::before { display: none; } /* 空のセルは出さない（ただし書き込み欄は残す） */ .iwaki-lp-table td:empty { display: none; } .iwaki-lp-table--check td.iwaki-lp-fill:empty { display: block; width: auto; height: auto; min-height: 3.5rem; text-align: left; } .iwaki-lp-table--check td.iwaki-lp-fill::after { display: block; margin-top: 0.25rem; } } /* 🔵 2026-10-01（版 2026.10.01.12）：CSSの変更は上の「エールぼかしの場面」のみ。この版の中身＝農園LPに「エールぼかし」の場面（本文・メーカーの説明の囲み・資材の情報の表・Q&A）と写真枠3つを追加／検査（verify-product-pages）を7場面に。 */ /* 🔵 2026-10-01（版 2026.10.01.14）：CSSの変更は、上の「11」節の末尾に足した2つの @media（お品書きの区分が2つ／4つのときの並べ方）のみ。この版の中身＝「隠す印」を &pumpkin ドリンク・&pumpkin プリン・Agury Land の3つにした（インナーケア＝2つ・ギルトフリー＝4つ）／検査（verify-product-pages）を3つ隠す状態に合わせた。 */ /* 🔵 2026-10-01（版 2026.10.01.15）：CSSの変更は、「8. こだわりの印」の節のみ＝スマホは1段に2個（3個から）／名前の行は折り返さない（white-space: nowrap）／商品が入らない印の「準備中」の見え方（.iwaki-mark--soon・.iwaki-mark__soon）。この版の中身＝「こだわりから選ぶ」を先方資料の6カテゴリーに置き換え（inc/kodawari.php）。 */ /* ===================================================================== 12. 背景の波マーク（2026-10-01・版 .16 追加／.19 で作り直し／🆕 版 2026.10.01.21 で「画面に固定してゆっくり遅れて動く」へ） --------------------------------------------------------------------- ご指示：全ページの背景に、ブランドの波（青海波）を「うっすら分かる程度」に。 🆕 版 .21 の作り替え（Ikuzoさんのご決定・2026-10-01） 「波は画面に固定して、スクロールすると波がゆっくり遅れて動いて見えるように」＝見本の方式③、濃さは「薄い」＝紺の3%。 → 波は assets/js/wavebg.js が、画面に貼りつく入れ物（#iwaki-wavefx・position:fixed）を1つだけ作り、 その中に不規則に置く。スクロールの量の約35%の速さで動く（視差）。「動きを減らす」設定では動かさず、止めて出す。 → 濃さ＝入れ物の opacity: 0.03（紺 #1a3a5c）。🔴濃さを変えるとき＝下の .iwaki-wavefx の opacity （3%＝0.03／ふつう4.5%＝0.045／やや濃い6%＝0.06）。 → 重なり順（下から）＝ 帯の背景（和紙・クリーム。触らない）→ 固定した波（z-index:0）→ 帯の中の文字・カード （JSが付ける印 .iwaki-wave-up＝z-index:1）→ ヘッダー・ヒーロー・濃紺の帯・フッター（.iwaki-wave-top＝z-index:2、 ヘッダーはもとの z-index:100）。白いカードの上は波が通らない（カードが手前。波はカードの後ろに隠れる）。 → 印（.iwaki-wave-up／-top／-rel）は、JSが波を作れたあと、html に .iwaki-wavefx-on が付いたときだけ効く。 JSが動かない／失敗したときは印も付かず、波なしでページは今までどおり。 🆕 版 .22 の配置（Ikuzoさんのご指摘「大きいのが真ん中に来るのが嫌。端寄りの配置が良い」） → 波の中心 x は画面の左右の端のゾーンだけ（幅に対して -12%〜+22%／+78%〜+112%）。波の内側の端も 30%〜70% に入れない＝画面中央の帯は余白。 大きな波ほど端に寄って見切れる。左右の数は不均等（左3・右2のように）。上下の位置・間隔・大きさ・向きは不規則。 スマホ（幅700px未満）も同じ考え方で、波は小さめ（幅90〜220px）・少なめ（4〜5個）。濃さ3%・35%の視差・固定の入れ物・重なり順は .21 のまま。 🆕 版 .23 の配置（Ikuzoさんのご指摘「真ん中ちょうどに大きな波が来るのが嫌。真ん中をずらした場所に、三角形になるよう小〜中を2〜3個。同じ形が2回連続は嫌。極端にしない」） → 端の波に加えて「中間ゾーン」（中心 x が 20〜38%／62〜80%）に小〜中の波を1画面 2〜3 個（スマホ 1〜2 個）。画面の真ん中（40〜60%）は禁止のまま。 波の幅は 140〜400px（最大でも画面幅の約30%。.22 の最大616pxは廃止）。同じ側で連続する波は、幅1.35倍以上・見える量0.12以上の違い・向きを交互・間隔を不均等に。 波どうしの中心は画面高の25%以上離し、縦の差が10%未満の2つを別ゾーンに水平に並べない。連続3つは一直線にならない（三角形）。 視差35%・濃さ3%・固定の入れ物・重なり順は .22 のまま。CSSの規則は変えていません。 🆕 版 .25 の配置（Ikuzoさんのご指摘「PCの幅をちょっと変えるだけで並々の位置が大幅に変わる」） → 乱数（種＝ページのパス＋画面幅÷8）をやめ、Ikuzoさんが配置エディターで指定した配置（assets/js/wavebg.js の WAVE_LAYOUT）を、割合で固定して使う。 画面の幅が変わっても同じ模様が比例して拡大縮小する（x は幅の%のまま、y・w・1周の高さは 画面幅÷基準幅 倍。基準幅：パソコン1280・スマホ375）。 拡大の上限：パソコンは幅1920px（s=1.5）まで比例、スマホは幅360〜600px（s=0.96〜1.6）で比例。濃さ：パソコン3%・スマホ5%（版 .26）。 規則（三角形・中間ゾーン 等）で配置を拒否・修正しない。旧い乱数方式は assets/js/wavebg-random-legacy-v24.js に保管（無効）。 🆕 版 .24 のスマホ（Ikuzoさんのご指摘「スマホはもうほとんど小さくて見えない。PCとスマホは変えなきゃダメ」） → 幅600px以下だけ、波を画面幅の 40〜70%（375幅で 150〜260px）に大きくし、端から 3〜5 割が見切れる形に。1画面 3〜4 個（端 2〜3・中間の小さめ 1）。 濃さはスマホだけ 4.5%（紺 #1a3a5c）。601px〜（パソコン・タブレット）の配置・大きさ・濃さは .23 のまま。.23 の並びの規則（同形の連続なし・水平に並ばない・三角形）はスマホにも適用。 ・波の絵＝ JS の中に入れた1つの定義（assets/images/wave-bg.svg と同じ形）を use で使い回す。 ・波を入れる帯＝ 和紙（washi）・和紙うすい（washi-light）・クリーム（cream）の全幅の帯、和紙の写真背景 （.iwaki-washi-white / .iwaki-washi-gold）、main 直下の「色の指定が無い」全幅の帯。 （どの帯かは wavebg.js の SECTION_SEL が持っています） ・iPhone Safari：背景を固定する書き方（background-attachment: fixed）は使えないので、position:fixed の入れ物にしている。 高さは 100lvh（アドレスバーが引っ込んだときの大きい高さ）で、バーの出入りでガタつかない。 🔵 戻し方＝ iwaki-theme_v2026.10.01.20.zip に戻すのがいちばん確実（旧＝ページ内に波を置く方式）。 波だけ消す＝ functions.php の iwaki-wavebg の読み込みを消す（印が付かないので、ページは今までどおり）。 ⚠️ 計算値（波の真上＝3%の紺を重ねた色の上）：和紙 #f3ede0＝墨12.20・紺9.49・朱5.43／クリーム #f7f3ec＝墨12.86・紺10.00・朱5.72／ 和紙うすい #faf6ec＝墨13.18・紺10.25・朱5.86。（4.5%のときの墨11.89・紺9.25・朱5.29より余裕がある。基準4.5以上） ===================================================================== */ .iwaki-wavefx { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; /* アドレスバーが出入りしても、入れ物の高さが変わらない（iPhone Safari） */ z-index: 0; overflow: hidden; pointer-events: none; opacity: 0.03; /* 紺の3%。🔴ここだけが濃さ */ margin: 0; padding: 0; } /* 🆕 版 .24：スマホ（幅600px以下）だけ濃くした（画面が小さく・明るく、3% では見えないため）。🆕 版 .25：4.5% → 7.5%（Ikuzoさん「スマホ12%は濃い、中間をとって7〜8%で」）。🆕 版 .26：7.5% → 5%（Ikuzoさんのご指示）。パソコン・タブレット（601px〜）は 3% のまま。 🔴 スマホの濃さを変えるとき＝ここの opacity の1か所だけ（足りなければ 0.075／濃ければ 0.04）。 計算（波の真上・和紙 #f3ede0）：5%＝墨11.79・紺9.17・朱5.24（基準4.5以上）。（参考：7.5%＝墨11.29・紺8.79・朱5.02） */ @media (max-width: 600px) { .iwaki-wavefx { opacity: 0.05; } } .iwaki-wavefx__mover { position: absolute; top: 0; left: 0; width: 100%; will-change: transform; /* 🔵 will-change は動く層（この1つ）だけ */ } .iwaki-wavefx__still { position: absolute; top: 0; left: 0; width: 100%; display: none; } .iwaki-wavefx.is-still .iwaki-wavefx__mover { display: none; } .iwaki-wavefx.is-still .iwaki-wavefx__still { display: block; } .iwaki-wavefx__tile { position: absolute; left: 0; width: 100%; } .iwaki-wavefx__w { position: absolute; display: block; } /* 重なり順の印（JSが波を作れたあと、html に .iwaki-wavefx-on が付いたときだけ効く） */ .iwaki-wavefx-on .iwaki-wave-rel { position: relative; } .iwaki-wavefx-on .iwaki-wave-up { z-index: 1; /* 帯の中身（文字・カード）＝波の手前 */ } .iwaki-wavefx-on .iwaki-wave-top { z-index: 2; /* ヒーロー・濃紺の帯・フッターなど＝波の手前 */ } /* 印刷では出さない */ @media print { .iwaki-wavefx { display: none; } } /* --------------------------------------------------------------------- 【無効】旧仕様（版 .19・.20）＝帯の中の最下層にページ内で波を置く方式。 無効にした理由：Ikuzoさんのご決定（波は画面に固定・ゆっくり遅れて動く）。 戻し方＝iwaki-theme_v2026.10.01.20.zip を入れ直す（または下の指定を元の書き方に戻し、 wavebg-inpage-legacy-v20.js を wavebg.js に戻して、上の .iwaki-wavefx 系を消す）。 旧い指定の要点（コメントのため無効）： .iwaki-wave-host ＝ position:relative; isolation:isolate .iwaki-wavebg ＝ position:absolute; inset:0; z-index:-1; max-width:none !important; overflow:hidden; pointer-events:none .iwaki-wavebg > .iwaki-wave ＝ position:absolute; 背景に assets/images/wave-bg.svg を 100% 100% で --------------------------------------------------------------------- */ /* ===================================================================== 13. ランダム入れ替え（2026-10-01・版 2026.10.01.16 追加／版 2026.10.01.19 で作り直し） --------------------------------------------------------------------- トップの3か所（厳選素材・催しごと・Instagram）。動かし方は assets/js/rotate.js が決め、 ここは「見た目」だけを持ちます。 🆕 版 .19 の作り直し（Ikuzoさんのご指摘） 「さっと動いて止まる、を延々と繰り返すのではダメ。厳選素材の他の素材が代わりに出てこなきゃダメ。 一つ一つランダムで動くけれども、ちゃんと裏側にある素材の写真もちゃんと出てこなきゃダメ」 → 版 .16〜.18 の「横に流れる帯」（見えている3枚が順番に動くだけ）をやめ、 「見えている枠が、1つずつ、ランダムなタイミングで、裏にある控えの素材とふわっと入れ替わる」に変えました。 ・並び（.iwaki-rot）の中に、見えている枠と、控え（.iwaki-rot__pool）が入っています。 控えは常に display:none（見えない）。JSが入れ替えるときだけ、このクラスを外して出します。 ＝ JSが動かない環境・「動きを減らす」設定では、控えは出ず、見えている枠のまま（崩れない）。 ・JSは、見えている枠を「枠（.iwaki-rot__cell）」で包みます。入れ替わるとき、この枠の中で2枚が重なり、 ふわっと（--iwaki-rot-fade ＝ 1秒）切り替わります。 ・（.35 で、止めるボタンは取り除きました） 🔴 --iwaki-rot-fade と rotate.js の CFG.fade は同じ値にそろえること。 🔵 戻し方＝functions.php の iwaki-rotate の読み込みを消す（入れ替わりが止まり、見えている枠のまま）。 版 .16〜.18 の「流れる帯」に戻すときは、iwaki-theme_v2026.10.01.18.zip に戻す （この節の末尾に、無効にした旧い指定を、コメントにして残してあります）。 ===================================================================== */ :root { --iwaki-rot-fade: 1000ms; } /* 控え：見えない。入れ替わるときだけ、JSがこのクラスを外す */ .iwaki-rot .iwaki-rot__pool { display: none !important; } .iwaki-rot__cell { display: grid; min-width: 0; } /* 枠の中では、入れ替わる2枚を同じ場所に重ねる */ .iwaki-rot__cell > * { grid-area: 1 / 1; min-width: 0; transition: opacity var(--iwaki-rot-fade) ease; } .iwaki-rot__cell > .is-in, .iwaki-rot__cell > .is-out { opacity: 0; } /* 🆕 2026-10-02（版 2026.10.01.35）「動きを止める」ボタンの置き場・ボタンの見た目の指定（.iwaki-rot__ctrl／.iwaki-flow__btn）を取り除きました（Ikuzoさんのご指示）。 */ /* 動きを減らす設定のときは、入れ替えない（JSも動かさない） */ @media (prefers-reduced-motion: reduce) { .iwaki-rot__cell > * { transition: none; } } /* --------------------------------------------------------------------- 【無効にした旧い指定（版 .16〜.18 の「横に流れる帯」「催しごとの切り替え」）】 使わなくなったので、効かない状態（この大きなコメントの中）にしてあります。消してはいません。 理由＝「さっと動いて止まる」の繰り返しではなく「裏の素材とランダムに入れ替わる」へ変えたため（上のご指摘）。 ⚠️ 中にあった小さなコメントの記号（スラッシュとアスタリスク）は、入れ子にできないので 「/ *」「* /」のように間を空けて無害にしてあります。 戻すとき＝ iwaki-theme_v2026.10.01.18.zip の style.css「13.」を使う（こちらの方が確実）。 --------------------------------------------------------------------- / * ===================================================================== 13. 自動で流れる動き（2026-10-01・版 2026.10.01.16 追加） --------------------------------------------------------------------- 動かすのはトップページの3か所。動かし方は assets/js/flow.js が決め、 ここは「見た目」と「動き」だけを持ちます。 ① 厳選素材（.iwaki-flow--ing）＝横に流れる帯。1枚が約4秒で通過（--sec: 4s） ① Instagram（.iwaki-flow--ig）＝横に流れる帯。1枚が約3秒で通過（--sec: 3s） ② 催しごと（.iwaki-swap）＝3件以上になったら、5秒ごとにふわっと切り替え。 1〜2件のうちは何もしません（今までのカードの並びのまま）。 🔴 3枚（件）未満は動かしません（flow.js が .iwaki-flow-root を作らない＝この節のCSSは何も当たらない）。 🔴 JavaScriptが動かない環境では、今までのカードの並びのまま表示されます。 🔴 「動きを減らす」設定（prefers-reduced-motion: reduce）のとき： ・流れる帯は動かず、横にスクロールして見る静止の帯になります（止めるボタンも出ません） ・催しごとは自動では切り替わらず、前後ボタンと点で手動 🔵 止まる条件＝マウスを乗せる（マウスのある環境のみ）／指で触れる（離して3秒後に再開）／ Tabキーで帯の中に入る／「動きを止める」ボタン 🔵 戻し方＝この「13.」の節を消し、functions.php の iwaki-flow の読み込みを消す。 （patterns に足したクラス名 iwaki-flow／iwaki-swap は、残っても何も起きません） ===================================================================== * / / * ---- ① 横に流れる帯 ---- * / .iwaki-flow--ing { --w: min(64vw, 240px); --gap: 24px; --sec: 4s; } .iwaki-flow--ig { --w: min(46vw, 180px); --gap: 16px; --sec: 3s; } .iwaki-flow-root { position: relative; } .iwaki-flow-root .iwaki-flow__view { overflow-x: auto; overflow-y: hidden; padding: 0.25rem 0; } / * 並び本体＝格子をやめて、1列に長く並べる。強さを上げて、格子の指定（max-width 等）に勝たせる * / .iwaki-flow-root .iwaki-flow__view .iwaki-flow.wp-block-group { display: flex; flex-wrap: nowrap; width: max-content; min-width: 100%; max-width: none; margin: 0; gap: 0; justify-content: center; / * 🔴 WordPress本体は、格子（grid）のグループに container-type: inline-size を付けます。 これが残ると「中身の幅で決める（max-content）」が 0px になり、並びが消えます （実測：width 0px）。流れる帯では必ず解除すること。 * / container-type: normal; } .iwaki-flow-root .iwaki-flow__view .iwaki-flow.wp-block-group > * { flex: none; width: var(--w); margin: 0 var(--gap) 0 0; } / * 動かない帯（動きを減らす設定）は、右端の余白を消して中央に寄せる * / .iwaki-flow-root:not(.is-anim) .iwaki-flow__view .iwaki-flow.wp-block-group > :last-child { margin-right: 0; } / * 動く帯は左から並べる * / .iwaki-flow-root.is-anim .iwaki-flow__view .iwaki-flow.wp-block-group { min-width: 0; justify-content: flex-start; } / * 動かすのは、JavaScriptが動いていて、かつ「動きを減らす」設定でないときだけ * / @media (prefers-reduced-motion: no-preference) { .iwaki-flow-root.is-anim .iwaki-flow__view { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .iwaki-flow-root.is-anim .iwaki-flow__view .iwaki-flow.wp-block-group { animation: iwaki-flow-run calc(var(--n, 3) * var(--sec, 4s)) linear infinite; will-change: transform; } .iwaki-flow-root.is-anim.is-held .iwaki-flow__view .iwaki-flow.wp-block-group, .iwaki-flow-root.is-anim.is-touch .iwaki-flow__view .iwaki-flow.wp-block-group { animation-play-state: paused; } / * Tabキーで入ったら、動きを止めて横スクロールの静止状態にする * / .iwaki-flow-root.is-anim.is-focus .iwaki-flow__view { overflow-x: auto; overflow-y: hidden; -webkit-mask-image: none; mask-image: none; } .iwaki-flow-root.is-anim.is-focus .iwaki-flow__view .iwaki-flow.wp-block-group { animation: none; } } @media (prefers-reduced-motion: no-preference) and (hover: hover) { .iwaki-flow-root.is-anim:hover .iwaki-flow__view .iwaki-flow.wp-block-group { animation-play-state: paused; } } / * 1周ぶん（元の枚数ぶん）だけ左へ動かして、頭に戻す。--m は並べた周の数（JSが決める） * / @keyframes iwaki-flow-run { from { transform: translateX(0); } to { transform: translateX(calc(-100% / var(--m, 2))); } } / * 止めるボタン・前後ボタンの見た目（サイトの紺・朱・白。押せる大きさ 44px 以上） * / .iwaki-flow__ctrl { display: flex; justify-content: center; align-items: center; margin-top: 1.2rem; } .iwaki-flow__btn { font: inherit; font-size: 1rem; min-height: 44px; padding: 0.4rem 1.25rem; border: 2px solid var(--wp--preset--color--navy); background: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); border-radius: 4px; cursor: pointer; } .iwaki-flow__btn:hover { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); } .iwaki-flow__btn[aria-pressed="true"] { background: var(--wp--preset--color--red); border-color: var(--wp--preset--color--red); color: var(--wp--preset--color--white); } .iwaki-flow__btn:focus-visible, .iwaki-swap__nav:focus-visible, .iwaki-swap__dot:focus-visible, .iwaki-flow__view:focus-visible { outline: 3px solid var(--wp--preset--color--red); outline-offset: 3px; } / * 動きを減らす設定のときは、止めるボタンを出さない（もともと動かないため） * / @media (prefers-reduced-motion: reduce) { .iwaki-flow__ctrl { display: none; } } / * ---- ② 催しごと：3件以上のときの切り替え ---- * / .iwaki-swap-root { max-width: 20rem; margin: 0 auto; } .iwaki-swap-root .iwaki-swap.wp-block-group { display: grid; grid-template-columns: minmax(0, 1fr); max-width: none; margin: 0; gap: 0; container-type: normal; / * 上の流れる帯と同じ理由（WordPress本体が付ける container-type を解除） * / } .iwaki-swap-root .iwaki-swap.wp-block-group > .iwaki-swap__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.9s ease, visibility 0s linear 0.9s; } .iwaki-swap-root .iwaki-swap.wp-block-group > .iwaki-swap__slide.is-on { opacity: 1; visibility: visible; transition: opacity 0.9s ease, visibility 0s; } .iwaki-swap__bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; } .iwaki-swap__nav { font: inherit; font-size: 1.25rem; line-height: 1; width: 44px; height: 44px; border: 2px solid var(--wp--preset--color--navy); background: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); border-radius: 50%; cursor: pointer; } .iwaki-swap__nav:hover { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); } .iwaki-swap__dots { display: flex; gap: 2px; } .iwaki-swap__dot { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; } .iwaki-swap__dot::before { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid var(--wp--preset--color--navy); background: var(--wp--preset--color--white); } .iwaki-swap__dot[aria-current="true"]::before { background: var(--wp--preset--color--red); border-color: var(--wp--preset--color--red); } .iwaki-swap__hold { flex-basis: 100%; max-width: 18rem; } @media (prefers-reduced-motion: reduce) { .iwaki-swap-root .iwaki-swap.wp-block-group > .iwaki-swap__slide, .iwaki-swap-root .iwaki-swap.wp-block-group > .iwaki-swap__slide.is-on { transition: none; } .iwaki-swap__hold { display: none; } } --------------------------------------------------------------------- 【無効にした旧い指定、ここまで】 */ /* 🔵 2026-10-01（版 2026.10.01.16）：CSSの変更は、末尾に足した2節のみ＝「12. 背景の波マーク」「13. 自動で流れる動き」。既存の記述は書き換えていません。この版の中身＝全ページの背景に波（assets/images/wave-bg.svg）／トップの厳選素材・Instagramを横に流れる帯に・催しごとは3件以上で切り替え（assets/js/flow.js・functions.php で読み込み・patterns に iwaki-flow／iwaki-swap のクラスを足した）。 */ /* 🔵 2026-10-01（版 2026.10.01.17）：CSSの変更は「8. こだわりの印」の節のみ＝「準備中」の見せ方（点線の輪・薄め表示・「準備中」の文字）を廃止し、6つとも実線の輪に統一。URLが空の印は （リンクではない）、入っていれば （外部リンク）。触って浮く動きはリンクだけ。この版の中身＝こだわり6つの印の飛び先をウェブストアへ（URLは管理画面「写真の差し替え」の6欄から）。🔴お品書きの飾り罫線（「10. くくりの飾り枠」）は含みません＝元の渦巻きのまま。 */ /* 🔵 2026-10-01（版 2026.10.01.18）：CSSの変更は「10a. お品書きの飾り罫線（麻の葉の帯・金の波）」の節を足したのみ（「10.」は書き換えていません＝10aが上書き。10aを消せば元の渦巻きに戻る）。「12.」は注記のみ。この版の中身＝お品書きの飾り罫線を見本v2の麻の葉2.1倍に（assets/kazari/obi-asanoha.svg を2.1倍版に）／背景の波（assets/images/wave-bg.svg）をロゴ06.svgの本物の波に差し替え。 */ /* 🔵 2026-10-01（版 2026.10.01.19）：CSSの変更は4つ。①スマホ幅（900px以下）の縦の文字を約1.3倍（ヒーローの `.iwaki-hero-text img` の @media 内：幅 24vw→31.2vw・高さ上限 38.5vh→50vh）／②「8. こだわりの印」＝押す・触る・キーボードで選ぶと「ふにゅっ」と動く動きを と の両方に復活（版 .12 と同じ -3px・0.2秒）／③「12. 背景の波マーク」を作り直し（CSSの背景の重ね絵をやめ、assets/js/wavebg.js が白い枠を避けて不規則に置く入れ物 `.iwaki-wavebg` の指定だけに）／④「13.」を「ランダム入れ替え」に作り直し（旧「流れる帯」「催しごとの切り替え」の指定はコメントにして残した）。この版の中身＝上の4つ＋patterns 3つ（ingredients-teaser／events-teaser／instagram-grid）に控えの素材を持たせた＋assets/js/rotate.js・wavebg.js を新設（flow.js は廃止）＋functions.php の読み込み差し替え。 */ /* 🔵 2026-10-01（版 2026.10.01.20）：CSSの変更なし（版のみ）。この版の中身＝assets/js/wavebg.js（幅が変わっていないresize・20px未満の高さ変化では波を測り直さない）／assets/js/rotate.js（「乗せたら止まる」はマウスのときだけ＝pointerType。スマホのタップ後の入れ替え停止を直した）。 */ /* 🔵 2026-10-01（版 2026.10.01.21）：CSSの変更は「12. 背景の波マーク」の作り替えのみ＝波を「画面に固定して、スクロールで内容の約35%の速さでゆっくり遅れて動かす」方式③・濃さ3%に（#iwaki-wavefx＝.iwaki-wavefx の position:fixed・opacity 0.03・100lvh・pointer-events:none・will-change は動く層だけ／重なりの印 .iwaki-wave-up＝1・.iwaki-wave-top＝2・.iwaki-wave-rel）。旧い「ページ内に置く」指定（.iwaki-wavebg・.iwaki-wave-host）はコメントにして無効（理由と戻し方を書いた）。この版の中身＝assets/js/wavebg.js を作り替え（旧コードは assets/js/wavebg-inpage-legacy-v20.js に残す・読み込まない）／検査（verify-product-pages）を新仕様に。戻す＝iwaki-theme_v2026.10.01.20.zip。 */ /* 🔵 2026-10-01（版 2026.10.01.22）：CSSの変更なし（版と「12.」の注記のみ）。この版の中身＝assets/js/wavebg.js の波の置き方を「画面の左右の端のゾーンだけ」に（中心 x が -12%〜+22%／+78%〜+112%・内側の端も30%〜70%に入れない・左右の数は不均等・スマホは小さめ少なめ）。視差35%・濃さ3%・固定の入れ物・重なり順は .21 のまま。戻す＝iwaki-theme_v2026.10.01.21.zip（または .20）。 */ /* 🔵 2026-10-01（版 2026.10.01.23）：CSSの変更なし（版と「12.」の注記のみ）。この版の中身＝assets/js/wavebg.js の波の置き方（中間ゾーンに小〜中の波・三角形・同じ形の連続なし・最大幅400px）。視差35%・濃さ3%・固定の入れ物・重なり順は .22 のまま。戻す＝iwaki-theme_v2026.10.01.22.zip（または .20）。 */ /* 🔵 2026-10-01（版 2026.10.01.24）：CSSの変更は「12.」に @media (max-width: 600px) の1つを足したのみ（スマホだけ波の濃さ 4.5%）。この版の中身＝assets/js/wavebg.js のスマホ（〜600px）専用の波の大きさ（画面幅の40〜70%）・置き方・数（1画面3〜4個）。パソコン・タブレットは .23 のまま。戻す＝iwaki-theme_v2026.10.01.23.zip。 */ /* 🔵 2026-10-02（版 2026.10.01.25）：CSSの変更は「12.」の @media (max-width: 600px) の opacity 0.045 → 0.075 のみ（スマホの波の濃さ 7.5%）。この版の中身＝assets/js/wavebg.js を「Ikuzoさん指定の配置を割合で固定・画面幅に比例して拡大縮小」に作り替え（乱数方式は assets/js/wavebg-random-legacy-v24.js に保管・無効）。戻す＝iwaki-theme_v2026.10.01.24.zip。 */ /* 🔵 2026-10-02（版 2026.10.01.26）：CSSの変更は2つだけ。①「12.」の @media (max-width: 600px) の opacity 0.075 → 0.05（スマホの波の濃さ 5%・パソコン3%は据え置き）。②ヒーローの縦の文字（.iwaki-hero-text img）を 1.25倍（パソコン：max-width を clamp(131.25px, 15.375vw, 187.5px)・高さ上限は据え置き／スマホ（599px以下）：max-width 39vw・max-height max(80px, min(62.5vh, calc(100vh − 229px)))／タブレット縦（600〜900px）はメニューに重なるため据え置き）。JS・PHPは触っていない。戻す＝iwaki-theme_v2026.10.01.25.zip。 */ /* 🔵 2026-10-02（版 2026.10.01.27）：CSSの変更は1点だけ。.26 で足した「スマホ（599px以下）の縦の文字 1.25倍」の @media を消し、スマホ・タブレット（900px以下）の縦の文字を .25 と同じ値（幅 31.2vw・高さ上限 max(80px, min(50vh, calc(85vh − 229px)))）に戻した。パソコンは .25 の 1.15倍（幅 clamp(120.75px, 14.145vw, 172.5px)・.26 の 1.25倍から変更）・波の濃さ（スマホ5%・パソコン3%）は .26 のまま。戻す＝iwaki-theme_v2026.10.01.26.zip（または .25）。 */ /* 🔵 2026-10-02（版 2026.10.01.28）：CSSの変更は2点だけ。①.iwaki-photo--landscape（写真が入った枠・16対9・角2px）②.iwaki-photo-slot--landscape（斜線の枠・16対9・角2px）を、「写真の枠」の章の --wide／--portrait の近くに足しました。中身＝inc/photo-slots.php に枠 concept-before-food を1つ足し、patterns/concept-body.php の引用①と②のあいだに置いた（管理画面「写真の差し替え」に1枠増える）。既存の指定は1行も変えていません。戻す＝iwaki-theme_v2026.10.01.27.zip。 */ /* 🔵 2026-10-02（版 2026.10.01.29）：CSSの変更は2点だけ（どちらもスマホ＝599px以下だけ）。①.28 で足した --landscape の直後に、写真の枠・斜線の枠を 1対1 にする指定（幅はそのまま・高さだけ伸びる）。②「足さないもの」の3枚（.cn-chips）のカードのあいだ 24px→8px・白枠の内側の余白 12px→8px（写真が大きくなる。並び方は変えない）。600px以上は .28 のまま。戻す＝iwaki-theme_v2026.10.01.28.zip。 */ /* 🔵 2026-10-02（版 2026.10.01.30）：CSSの変更はありません（版の番号だけ）。変更点＝「足さないもの」の3枚（乳製品・小麦・白砂糖）を管理画面「写真の差し替え」から替えられるようにした（inc/photo-slots.php に枠 concept-chip-milk／wheat／sugar と iwaki_photo_slot_img_or_default()、patterns/concept-body.php の を差し替え）。未設定のあいだは、これまでの写真（assets/images/kodawari-*.jpg）がそのまま出る。表示は .cn-chip__photo（正方形・角2px・cover）のまま。.29 のスマホの詰め方も変えていません。戻す＝iwaki-theme_v2026.10.01.29.zip。 */ /* 🔵 2026-10-02（版 2026.10.01.31）：CSSの変更はありません（版の番号だけ）。変更点＝patterns/concept-body.php の縦書きの一言「元気は生命の本也。／飲食は生命の養也」の2行目に句点を足して「飲食は生命の養也。」にした（2行とも句点で終わる。スマホの横書きで2行の長さがそろう）。出典の注記の中の引用表記は、原典の引用なので変えていません。戻す＝iwaki-theme_v2026.10.01.30.zip。 */ /* 🔵 2026-10-02（版 2026.10.01.32）：CSSの変更はありません（版の番号だけ）。変更点＝patterns/greeting-body.php の署名に、社長のお名前「齋藤　芳次」（姓名のあいだは全角スペース1つ）を加えた（$iwaki_greeting_name に入れただけ。署名の組み方・本文・余白は変えていません）。戻す＝iwaki-theme_v2026.10.01.31.zip。 */ /* 🔵 2026-10-02（版 2026.10.01.33）：一粒万倍美 米粉麺を「3種類が入るページ」にした。CSSの変更＝①.pd-variants--auto（種類が3つ以上でも、入るだけ並べて折り返す。グミは印を付けていないので変わらない）②.pd-variant__photo（種類ごとの写真の下の空き）③.iwaki-photo--card／.iwaki-photo-slot--card（4対3・角2px）。中身＝patterns/product-ichiryu-noodle-body.php（商品情報とアレルギー表示を種類ごとの囲み3つに）／inc/photo-slots.php（枠 product-ichiryu-noodle-variant-1〜3）。戻す＝iwaki-theme_v2026.10.01.32.zip。 */ /* 🔵 2026-10-02（版 2026.10.01.34）：CSSの変更はありません（版の番号だけ）。変更点＝一粒万倍美 玄米せんべい・米粉パンを「2種類が入るページ」にした（.33 で米粉麺に作った部品〔pd-variants--auto・種類ごとの囲み・種類ごとの写真枠〕をそのまま使用）。patterns/product-genmai-senbei-body.php（商品情報とアレルギー表示を種類ごとの囲み2つに）／inc/photo-slots.php（枠 product-genmai-senbei-variant-1・2 と product-rice-bread-variant-1・2）。パンは patterns/product-rice-bread-body.php。グミ・米粉麺は変えていません。戻す＝iwaki-theme_v2026.10.01.33.zip。 */ /* 🔵 2026-10-02（版 2026.10.01.35）：トップページの「動きを止める」ボタンを取り除いた。CSSの変更＝「13.」の .iwaki-rot__ctrl・.iwaki-flow__btn（4つの状態）と、動きを減らす設定の中の .iwaki-rot__ctrl の指定を削除（見えなくしたのではなく、指定そのものを取り除いた）。assets/js/rotate.js からも、ボタンを作る・押したとき止める部分を削除（マウス・キーボード・指・画面外・タブが裏・動きを減らす設定で止まる仕組みは残している）。ヒーローの点（.iwaki-hero-dot）は別の部品で、変えていない。戻す＝iwaki-theme_v2026.10.01.34.zip。 */ /* 🔵 2026-10-02（版 2026.10.01.36）：CSSの変更はありません（版の番号だけ）。変更点＝厳選素材「米（はれわたり）」の詳細ページの型を新設（patterns/page-ingredient-rice.php〔貼る方・1行〕／patterns/ingredient-rice-body.php〔中身〕／inc/photo-slots.php の枠 ingredient-rice-hero）。本文は作成中の仮の文言（ライタさんの原稿待ち）。固定ページは本番にまだ作っていない（手順＝反映メモ「.36」）。既存の素材ページ・一覧・トップは変えていません。戻す＝iwaki-theme_v2026.10.01.35.zip。 */ /* ===================================================================== 14. アグリーランドのバナー（2026-10-02・版 .37 追加／.38 作り直し／版 2026.10.01.40 考え直し） --------------------------------------------------------------------- トップページの「お品書き」と「こだわりから選ぶ」のあいだ（patterns/agury-banner.php）。 🔴 版 .38 の「黄色のベタ・高さ260px・文字もロゴも左寄り」を、次のように考え直しました（Ikuzoさんのご指摘）： ①細い → 厚みを出した（パソコン約400px／スマホ約600px）。キャッチ・リード・ポイント3つ・ボタンを載せた。 ②左右のバランス → 文字ブロックを画面の**ちょうど中央**に置き、左にロゴ、右にポイント3つ（左右の列は同じ幅）。 ③背景に画像 → 畑の写真（かぼちゃ畑）を全面に敷き、暗いオーバーレイをかけて、白い文字が読める濃さにした。 写真は管理画面「写真の差し替え」の枠 agury-banner-bg から差し替えられる。 ④内容を多く → 前置き／キャッチ（2行）／リード文／ポイント3つ／ボタン。 🔵 設計の理由： ・文字を中央に置き、脇にロゴと箇条を置くと、視線が中央に集まる（左だけに寄らない）。 ・ロゴの黄色の四角は、暗い写真の上では白い縁取りのラベルのように見え、浮かずに目立つ。 ボタンはロゴと同じ黄（#E4D942）にして、ロゴ・ボタン・箇条の印を同じ色で結ぶ。 ・前の区画（お品書き＝和紙・金）と次の区画（こだわり＝濃紺）のあいだで、写真の帯が「ここだけ農園の景色」と分かる。 🔴 オーバーレイの濃さ（版 .42 で変更）：全面0.74の一様 → 文字の列の後ろだけ濃く、端・ロゴの脇は薄いグラデーション（平均0.37未満＝.40の半分以下）。写真が見え、白文字は写真のいちばん明るい所でも4.5対1以上（実測は反映メモ「.42」）。 🔴 ロゴの色・形・比率は変えない（高さで決める）。文字は 1rem（16px）から縮めない。ボタンは高さ48px以上。 🔵 パソコン（1180px〜）＝3列（ロゴ｜文字｜ポイント）。1179px以下（タブレット・スマホ）＝中央そろえの縦並び （ロゴ→前置き→キャッチ→リード→ポイント→ボタン。HTMLの順は変えず、order で並べ替え）。 ===================================================================== */ .iwaki-agury-banner__scene { position: relative; padding: 3.25rem 0; background-color: #1f3a24; background-position: center 40%; background-repeat: no-repeat; background-size: cover; color: #fff; isolation: isolate; } /* 🆕 版 .42：写真が見える明るさにしつつ、白い文字を読ませる（Ikuzoさん「後ろが全く見えないほど暗い」）。 全面を一様に暗くする（.40＝0.74）のをやめ、「文字の列の後ろだけ濃く、ロゴの脇と左右の端は薄く」にした。 パソコン＝左右方向のグラデーション（端 0.14／文字の列 0.46）。スマホ＝上下方向（ロゴの高さ 0.14／文字の高さ 0.40）。 平均の濃さは、どの幅でも .40 の半分以下（0.37未満）。足りない分は、文字の影（text-shadow）で支える。 */ .iwaki-agury-banner__scene::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 22, 12, 0.14) 0%, rgba(8, 22, 12, 0.14) 16%, rgba(8, 22, 12, 0.6) 35%, rgba(8, 22, 12, 0.6) 65%, rgba(8, 22, 12, 0.14) 84%, rgba(8, 22, 12, 0.14) 100%); } .iwaki-agury-banner__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem) minmax(0, 1fr); align-items: center; column-gap: 2rem; max-width: 76rem; margin-inline: auto; padding-inline: 1.5rem; box-sizing: border-box; } /* ロゴ：高さで決める（縦長の画像）。黄の四角に白い縁取り（暗い写真の上でラベルのように見える） */ .iwaki-agury-banner__logo { grid-column: 1; justify-self: end; } .iwaki-agury-banner__logo img { display: block; width: auto; height: 228px; max-width: none; border: 3px solid #fff; box-sizing: content-box; } .iwaki-agury-banner__body { grid-column: 2; text-align: center; } .iwaki-agury-banner__eyebrow { /* 🆕 版 .42：黄色の小さな文字は、写真の明るい所（黄色い花）に重なると読みにくいので、文字の下にだけ半透明の帯を敷く */ display: inline-block; padding: 0.1rem 0.7rem 0.1rem 1rem; border-radius: 2px; background: rgba(8, 22, 12, 0.6); margin: 0 0 0.5rem; color: #e4d942; font-size: 1rem; font-weight: 700; letter-spacing: 0.3em; line-height: 1.6; text-shadow: 0 0 4px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.8); } .iwaki-agury-banner__title { margin: 0 0 1rem; color: #fff; font-size: 2rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1.45; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 0, 0, 0.4); } .iwaki-agury-banner__text { margin: 0 0 1.5rem; color: #fff; font-size: 1rem; line-height: 1.9; /* 語の途中（「採／れた」「土／づくり」）で行が変わらないよう、文節で折り返す（対応していない環境では、ふつうの折り返し） */ text-wrap: balance; word-break: auto-phrase; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 10px rgba(0, 0, 0, 0.4); } /* ボタン：ロゴと同じ黄に、墨の文字。押せる大きさ（高さ48px以上）。 */ .iwaki-agury-banner .iwaki-agury-banner__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.5rem 2.25rem; box-sizing: border-box; border: 2px solid #e4d942; border-radius: 2px; background: #e4d942; color: #2b2622; font-size: 1rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.6; text-decoration: none; } .iwaki-agury-banner .iwaki-agury-banner__btn:hover { background: #fff; border-color: #fff; color: #2b2622; } .iwaki-agury-banner .iwaki-agury-banner__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } /* ポイント3つ（箇条）：左に黄の印、うすい黒の地。文の途中では改行しない */ .iwaki-agury-banner__points { grid-column: 3; justify-self: start; display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; } .iwaki-agury-banner__points li { margin: 0; padding: 0.65rem 1rem 0.65rem 1.1rem; border-left: 4px solid #e4d942; background: rgba(8, 22, 12, 0.56); color: #fff; font-size: 1rem; line-height: 1.6; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } /* タブレット・スマホ（1179px以下）：中央そろえの縦並び。HTMLの順は変えず、order で並べ替える。 🔴 1180px 以上でだけ3列にする理由＝ポイントの1行（15字）が、左右の列に1行で収まる幅（約277px）を確保するため。 1180px で左右の列は約294px（文の途中で改行しない）。 */ @media (max-width: 1179px) { /* 🆕 版 .42：上下の余白を同じ（2rem＝32px）にそろえた。ロゴの上＝ボタンの下（ロゴを帯の上に寄せない） */ .iwaki-agury-banner__scene { padding: 2rem 0; } /* 🆕 版 .42：縦並びでは、上下方向のグラデーション（ロゴの高さは薄く、文字が並ぶ高さは濃く） */ .iwaki-agury-banner__scene::before { background: linear-gradient(180deg, rgba(8, 22, 12, 0.12) 0, rgba(8, 22, 12, 0.12) 150px, rgba(8, 22, 12, 0.54) 176px, rgba(8, 22, 12, 0.54) 400px, rgba(8, 22, 12, 0.2) 440px, rgba(8, 22, 12, 0.2) 100%); } .iwaki-agury-banner__inner { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; } .iwaki-agury-banner__points { gap: 0.5rem; } .iwaki-agury-banner__points li { padding: 0.5rem 0.9rem 0.5rem 1rem; } .iwaki-agury-banner__body { display: contents; } .iwaki-agury-banner__logo { order: 0; } .iwaki-agury-banner__eyebrow { order: 1; margin: 0; } .iwaki-agury-banner__title { order: 2; margin: 0; font-size: 1.5rem; } .iwaki-agury-banner__text { order: 3; margin: 0; max-width: 34rem; line-height: 1.8; } .iwaki-agury-banner__points { order: 4; justify-self: auto; width: min(100%, 22rem); text-align: left; } .iwaki-agury-banner .iwaki-agury-banner__btn { order: 5; margin-top: 0.5rem; } .iwaki-agury-banner__logo img { height: 120px; } } /* ===================================================================== 11c. 厳選素材の一覧（/ingredients/）が7つ（奇数）のときの、いちばん下の1つの置き方 --------------------------------------------------------------------- 2026-10-02（版 2026.10.01.39）新設。厳選素材が6つ→7つ（米を追加）になり、 3列の並びが「3・3・1」になると、最後の1つが左に取り残されて不格好になるため、 最後の1つを**中央**に置きます（お品書きの区分が2つ・4つのときや、催しごとが1つのときと同じ考え方）。 ・対象は、一覧のパターン（patterns/ingredients-list-body.php）だけ（クラス iwaki-cardgrid--ingredients）。 ・6つのときは、どちらの指定にも当たらない（6＝3の倍数＝偶数）ので、これまでと1pxも変わりません。 ・列の数は、11. の既定（minmax 13.5rem・最大幅840px）で決まります（実測）： 〜639px＝1列（中央にする必要なし）／640〜799px＝2列／800px〜＝3列。 ・8つ（3列で2つ余る）・9つ以上になったら、この指定は当たらなくなるので、並べ方を見直すこと。 ⚠️ 選び方（セレクタ）は、WordPressの格子の指定より強い（クラス3つ分）。 ===================================================================== */ @media (min-width: 800px) { .wp-block-group .iwaki-cardgrid.iwaki-cardgrid--ingredients > .iwaki-card:last-child:nth-child(3n + 1) { grid-column: 2; } } @media (min-width: 640px) and (max-width: 799px) { .wp-block-group .iwaki-cardgrid.iwaki-cardgrid--ingredients > .iwaki-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 3.25rem) / 2); } } /* 🔵 2026-10-02（版 2026.10.01.39）：CSSの変更は「11c.」の追加だけ。既存の指定は変えていません。戻す＝iwaki-theme_v2026.10.01.38.zip。 */ /* 🔵 2026-10-02（版 2026.10.01.40）：CSSの変更は「14.」の考え直しだけ（背景写真・厚み・中央の文字・ポイント3つ）。既存の指定は変えていません。戻す＝iwaki-theme_v2026.10.01.39.zip。 */ /* 🔵 2026-10-02（版 2026.10.01.41）：CSSの変更はありません（版の番号だけ）。変更点＝厳選素材「米（はれわたり）」の固定ページ（/ingredients/rice/）を、テーマの更新後に管理画面を最初に開いたとき、1回だけ自動で作る仕組みを追加（inc/auto-pages.php・functions.php から管理画面のときだけ読み込み）。すでにあるページは上書きしない・親「厳選素材」が無ければ作らない・一度処理したら二度と作らない。戻す＝iwaki-theme_v2026.10.01.40.zip（自動で作られたページは残る）。 */ /* 🔵 2026-10-02（版 2026.10.01.42）：アグリーランドのバナー（「14.」）を2点直した。①背景が暗すぎた → 全面を一様に0.74で暗くするのをやめ、「文字の列の後ろだけ濃く、端とロゴの脇は薄く」のグラデーションにした（パソコン＝左右方向 0.14〜0.46／スマホ＝上下方向 0.14〜0.40。平均は0.37未満）。文字に影（text-shadow）を足し、ポイントの地は少し濃く（0.56）。②ロゴの位置 → パソコンはロゴの高さを280→228pxに下げて上下の余白を増やし（帯の上下中央・左右の列の垂直中心をそろえる）、スマホ・タブレットは上下の余白を同じ32px（以前は24px）にした。文章・ボタン・背景写真の枠・リンクは変えていません。戻す＝iwaki-theme_v2026.10.01.41.zip。 */ /* 🔵 2026-10-02（版 2026.10.01.43）：CSSの変更はありません（版の番号だけ）。変更点＝ロゴ画像（assets/images/agury-land-logo.svg）の、黄色い四角の中の絵（文字＋人物）を、四角の中で上下左右の余白がそろう位置に置き直した（平行移動と0.985倍だけ・図形の形や色や四角の縦横比は変えない）。置き直す前の書き出しは assets/images/_original/agury-land-logo_元の書き出し.svg（zipには入らない）。戻す＝iwaki-theme_v2026.10.01.42.zip。 */ /* 🔵 2026-10-02（版 2026.10.01.44）：CSSの変更はありません（版の番号だけ）。変更点＝ロゴ画像（assets/images/agury-land-logo.svg）で、「y」の字形が黄色の四角の後ろに隠れていたのを、四角を先に描くことで見えるようにした（「Agury Land」と読める）。あわせて「y」を含む絵全体を、四角の中で上下左右の余白がそろう位置に置き直した（平行移動と0.952倍だけ）。図形の形・色・四角の縦横比は変えない。戻す＝iwaki-theme_v2026.10.01.43.zip。 */ /* 🔵 2026-10-03（版 2026.10.01.45）：CSSの変更はありません（版の番号だけ）。変更点＝アグリーランドのバナー（patterns/agury-banner.php）のロゴ画像と既定の背景写真のアドレスに、ファイルの更新日時を版の印（?v=数字）として付けた（ブラウザが古いロゴを覚えたままにするのを防ぐ。方法は版 .11 の patterns/hero.php と同じ）。戻す＝iwaki-theme_v2026.10.01.44.zip。 */ /* 🔵 2026-10-03（版 2026.10.01.46）：CSSの変更はありません（版の番号だけ）。変更点＝アグリーランドのバナー（patterns/agury-banner.php）のリード文の1文目を、「アグリーランドは、青森の自然のなかで採れた作物の総合ブランドです。」から「アグリーランドは、エール産業の自社農園で採れた作物の総合ブランドです。」に差し替え（Ikuzoさんのご指示）。2文目はそのまま。戻す＝iwaki-theme_v2026.10.01.45.zip。 */ /* 🔵 2026-10-03（版 2026.10.01.47）：CSSの変更はありません（版の番号だけ）。変更点＝厳選素材の名称を、他の素材と同じ素材名だけにそろえた（かぼちゃ・りんごだけ付いていた産地や栽培方法の修飾を外し、「かぼちゃ」「りんご」に）。一覧・トップ・管理画面の写真枠の名前・詳細ページの枠の名前・各パターンの題。本文の中の文は直していない。固定ページの題（データベース）は管理画面で直す（反映メモ「.47」）。戻す＝iwaki-theme_v2026.10.01.46.zip。 */ /* ===================================================================== 15. アグリーランドの詳細ページ（/products/agury-land/）のヘッダー（版 2026.10.01.48・2026-10-03 新設／.51 で2列を中央寄せ・「アグリーランド」の行を追加） --------------------------------------------------------------------- patterns/product-agury-land-body.php の一番上。見本B案どおり： 全面の黄色（#E4D942）・画面の端まで広げる／左にロゴ（白縁取り3px・h1 の中）／右に前置き・カタカナ・キャッチ。 🔵 いままでの「1120px幅の和紙色の札（.iwaki-lp-farm）」はやめた。ヘッダー（メニュー帯）とのあいだの すき間も、ここで0にしている（margin-block-start:0）。写真・写真枠は、このヘッダーの中に置かない。 🔵 色：黄＝ロゴの下地と同じ #e4d942／キャッチ・カタカナ＝紺／前置き＝濃い朱 #8a251e（黄の上で6対1。サイトの朱 #a8322a は4.5対1ぎりぎりのため） 🔵 並び：1列目＝ロゴ、2列目＝文字のまとまり（前置き→「アグリーランド」→キャッチ。上下はロゴの中心にそろえる）。 2列とも「中身の幅ぴったり」で、まとまり全体を帯の左右中央に置く。 🔵 右の文字ブロックの並び：前置き「エール産業の農園」（小さな朱）→ 英字の文字「Agury Land」＋その直下に読みがな「アグリーランド」 （ の下付き・英字より小さく字間広め）→ キャッチ（大きな紺）。ロゴ（左）の下には何も足さない。 🔴 綴りは、ロゴ・alt・これまでの全ページと同じ「Agury Land」（Ikuzoさんの言葉は AgriLand だったが、ロゴの綴りに合わせた）。 スクリーンリーダーには、ロゴの alt「Agury Land（アグリーランド）」が同じ読みを持っているので、 重ねて読まれないよう aria-hidden にしてある（目に見える文字としては出る）。h1 はロゴ1つのまま。 🔵 幅：〜599px＝スマホ（ロゴ高さ190px）／600〜899px＝タブレット（ロゴ高さ240px）／900px〜＝パソコン（ロゴ高さ300px） ===================================================================== */ .wp-block-group.iwaki-agury-hero { margin-block-start: 0; margin-block-end: 0; } .iwaki-agury-hero__scene { padding: 2rem 1.25rem; background: #e4d942; color: #2b2622; } .iwaki-agury-hero__inner { display: grid; /* 🆕 版 .51：2列とも「中身の幅ぴったり」にして、ロゴ＋文字のまとまりを、帯の左右中央に置く。 （版 .48 のパソコンは「1fr 1fr」＝同じ幅の2列で、ロゴは左の列の右端に寄せ、文字は右の列の左端から始めていた。 文字の列は、文字の幅（約360px）より広い約480pxあったため、文字のあとに約120pxの空きが残り、 まとまり全体が約90px右にずれて見えた。スマホ・タブレットも、右の列が「1fr」で余白を取り込んでいた） */ grid-template-columns: auto auto; justify-content: center; column-gap: 1.125rem; align-items: center; max-width: 1040px; margin-inline: auto; } .iwaki-agury-hero .iwaki-agury-hero__title { margin: 0; padding: 0; line-height: 0; } .iwaki-agury-hero .iwaki-agury-hero__title img { display: block; width: auto; height: 190px; max-width: none; border: 3px solid #fff; box-sizing: content-box; } .iwaki-agury-hero .iwaki-agury-hero__eyebrow { margin: 0 0 0.375rem; color: #8a251e; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; line-height: 1.7; } .iwaki-agury-hero .iwaki-agury-hero__name { margin: 0 0 0.625rem; color: #1a3a5c; font-family: var(--wp--preset--font-family--latin); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.14em; line-height: 1.4; } /* 英字「Agury Land」に、読みがな（カタカナ）を直下に付ける（・ruby-position: under）。読みがなは英字より小さく、字間を広げる */ .iwaki-agury-hero .iwaki-agury-hero__roman { ruby-position: under; ruby-align: center; } .iwaki-agury-hero .iwaki-agury-hero__kana { font-family: var(--wp--preset--font-family--serif); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.3em; } .iwaki-agury-hero .iwaki-agury-hero__catch { margin: 0; color: #1a3a5c; font-size: 0.98rem; font-weight: 700; line-height: 1.85; text-align: left; } @media (min-width: 600px) { .iwaki-agury-hero__scene { padding: 3rem 1.5rem; } .iwaki-agury-hero__inner { column-gap: 2.5rem; max-width: 640px; } .iwaki-agury-hero .iwaki-agury-hero__title img { height: 240px; } .iwaki-agury-hero .iwaki-agury-hero__eyebrow { font-size: 0.85rem; letter-spacing: 0.2em; margin-bottom: 0.5rem; } .iwaki-agury-hero .iwaki-agury-hero__name { margin-bottom: 0.75rem; font-size: 1.3rem; } .iwaki-agury-hero .iwaki-agury-hero__kana { font-size: 0.7rem; } .iwaki-agury-hero .iwaki-agury-hero__catch { font-size: 1.4rem; line-height: 1.9; } } @media (min-width: 900px) { .iwaki-agury-hero__scene { padding: 3.5rem 1.5rem; } .iwaki-agury-hero__inner { column-gap: 4.5rem; max-width: 1040px; } .iwaki-agury-hero .iwaki-agury-hero__title img { height: 300px; } .iwaki-agury-hero .iwaki-agury-hero__eyebrow { font-size: 0.9rem; margin-bottom: 0.625rem; } .iwaki-agury-hero .iwaki-agury-hero__name { margin-bottom: 0.875rem; font-size: 1.6rem; } .iwaki-agury-hero .iwaki-agury-hero__kana { font-size: 0.75rem; } .iwaki-agury-hero .iwaki-agury-hero__catch { font-size: 1.85rem; } } /* 🔵 2026-10-03（版 2026.10.01.48）：アグリーランドの詳細ページ（/products/agury-land/）のヘッダー（ヒーロー）を、見本B案どおりに作り替えた（上の「15.」を新設。patterns/product-agury-land-body.php の一番上）。全面の黄色・左にロゴ／右に前置きとキャッチの2列・写真なし。ほかのページ・トップのバナーは変えていません。戻す＝iwaki-theme_v2026.10.01.47.zip。 */ /* 🔴 画面の端まで広げる方法（このページだけ） このページの本文は、テンプレート（page-product.html）で幅1120pxの入れ物に入っているため、alignfull だけでは 画面の端まで届きません（いままでの札が1120pxだった理由）。そこで、このヘッダーだけ、入れ物の中心から 画面の幅いっぱい（100vw）に広げます。 ⚠️ サイトでは「幅の指定に vw を使わない」（スクロールバーの分だけ右にはみ出す・ヘッダーの注意書き）ことにしているため、 はみ出した分は、このページの外枠（.wp-site-blocks）の「見えない横はみ出し（overflow-x: clip）」で切り落とします （clip はスクロールの入れ物を作らないので、メニュー帯の追従＝sticky は壊れません）。横スクロールは出ません（実測）。 🔵 ヘッダー（メニュー帯）とのすき間 24px も、このページだけ0にします（:has() 対応のブラウザで。 非対応の古いブラウザでは、24pxのすき間と、幅1120pxの黄色の札になるだけで、壊れません）。 */ .wp-site-blocks:has(.iwaki-agury-hero) { overflow-x: clip; } .wp-site-blocks > main:has(.iwaki-agury-hero) { margin-block-start: 0; } .entry-content .wp-block-group.iwaki-agury-hero.alignfull { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); /* ページ全体の青海波の飾り（本文の上に薄く重なる）を、この黄色の帯の下に隠して、見本どおりの平らな黄色にする */ position: relative; z-index: 1; } /* 🔵 2026-10-03（版 2026.10.01.49）：CSSの変更は、末尾の「16.」1節のみ（Instagramの投稿のカード）。既存の記述は書き換えていません。この版の中身＝先方のInstagramの最新の投稿をトップに自動で出す（inc/instagram-feed.php・inc/instagram-admin.php・patterns/instagram-grid.php）。接続の情報が入るまでは、トップのInstagramの帯は区画ごと出ません。戻す＝iwaki-theme_v2026.10.01.48.zip。 */ /* 16. Instagramの投稿のカード（） 🔴 大きさ・形は、写真の差し替え枠（.iwaki-photo.iwaki-photo--square）と同じです。ここで寸法は変えません。 はもともと行の中に並ぶ部品なので、枠として使えるよう block にするだけです。 🔵 触ったときのふわっと拡大は、既存の .iwaki-photo:hover img がそのまま効きます。 */ .iwaki-photo.iwaki-ig-post { display: block; text-decoration: none; } .iwaki-photo.iwaki-ig-post:focus-visible { outline: 3px solid var(--wp--preset--color--navy); outline-offset: 2px; } /* 🆕 版 2026.10.01.50：アグリーランドの詳細ページ「育てている作物」のカード（かぼちゃ・里芋・りんご・米の4つ）の並べ方 サイトの既定（「11.」＝1枠 約216px・最大幅840px）では、4つが「3つ＋1つ」になってしまうため、このページの作物のカードだけ（クラス iwaki-lp-crops）、 ・パソコン（900px〜）＝4列を1段（1枠 約245px＝これまでの3つのときと同じ大きさ） ・タブレット（600〜899px）＝2列×2段 ・スマホ（〜599px）＝2列×2段（1列だと正方形の写真が4枚、縦に長く続くため） 🔵 選び方（クラス3つ分）は、「11.」の指定（クラス2つ分）より強い。 */ .wp-block-group .iwaki-cardgrid.iwaki-lp-crops { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; max-width: 640px; } @media (min-width: 900px) { .wp-block-group .iwaki-cardgrid.iwaki-lp-crops { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; max-width: 1120px; } } @media (max-width: 599px) { .wp-block-group .iwaki-cardgrid.iwaki-lp-crops { gap: 1.5rem 1rem; max-width: 100%; } } /* 🔵 2026-10-04（版 2026.10.01.50）：アグリーランド詳細ページ（/products/agury-land/）の組み替え。patterns/product-agury-land-body.php＝サブキャッチ＋文字情報を足し、「土づくりから、こだわっています」「土づくりを支える、エールぼかし」〜Q&A を外し、「育てている作物」に米を加えて4つに（上の末尾「アグリーランドの詳細ページ「育てている作物」のカード」で、並びはパソコン4列・スマホ2列）。外した節の原文は assets/images/_original/ に退避。戻す＝iwaki-theme_v2026.10.01.49.zip。 */ /* 🔵 2026-10-04（版 2026.10.01.51）：アグリーランド詳細ページの調整5点。①ヘッダーのロゴ＋文字のまとまりを帯の左右中央に（2列を「auto auto」に）②右の文字ブロックに英字「Agury Land」＋読みがな「アグリーランド」（ruby）③「お届けのこと」の節を外し、その場所に土の写真（agury-land-lp-soil）④「規格外のりんごの話はこちら」を外す。⑤（①〜④の根拠・実測は反映メモ「.51」）。戻す＝iwaki-theme_v2026.10.01.50.zip。 */ /* ===================================================================== 15b. アグリーランドの詳細ページ「土づくりに、エールぼかしを使っています。」の節（版 2026.10.01.52 新設） --------------------------------------------------------------------- 「ちょっとだけ」の紹介。写真は大きくしすぎず、文字と並べる。 ・パソコン・タブレット（700px〜）＝左に小さな写真（袋・16対7）＋その下にキャプション／右に見出し（左そろえ）と本文の2列（左5:右7） ・スマホ（〜699px）＝写真→キャプション→見出し→本文の縦並び 🔵 周りの節（中央そろえの見出し＋短い線）と違い、見出しは左そろえ・線なし（2列の中の文字として読ませるため）。 ===================================================================== */ .iwaki-lp-bokashi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: center; max-width: 1072px; margin-inline: auto; } /* 見出しの大きさは、この節だけ少し小さく（20字が1行に収まり、「す。」だけが次の行に落ちないように）。バランス折り返しつき */ .iwaki-lp-bokashi .iwaki-lp-bokashi__text h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.6; text-wrap: balance; /* 語の途中（「つく／る」）で行が変わらないよう、文節で折り返す（対応していない環境では、ふつうの折り返し） */ word-break: auto-phrase; } .iwaki-lp-bokashi .iwaki-lp-bokashi__text p { word-break: auto-phrase; } .iwaki-lp-bokashi .iwaki-lp-bokashi__caption { margin: 0.5rem 0 0; font-size: 0.85rem; line-height: 1.7; text-align: center; word-break: auto-phrase; text-wrap: balance; } @media (min-width: 700px) { .iwaki-lp-bokashi { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; } } /* 🔵 2026-10-04（版 2026.10.01.52）：アグリーランド詳細ページの「お届けのこと」を外した場所（土の写真の次）に、エールぼかしを短く紹介する節（上の「15b.」）を入れた。文章はライタさん採用版・写真の枠は袋の agury-land-lp-bokashi-bag。戻す＝iwaki-theme_v2026.10.01.51.zip。 */ /* 🔵 2026-10-04（版 2026.10.01.53）：エールぼかしの節（上の「15b.」）の見出し・本文・キャプションに、文節で折り返す指定（word-break: auto-phrase）を足した。写真の枠は 16対7→4対3（inc/photo-slots.php の袋の枠）。文章は採用版に差し替え（patterns/product-agury-land-body.php）。戻す＝iwaki-theme_v2026.10.01.52.zip。 */ /* ===================================================================== 15c. 見出しの上の金の波（共通の部品 .iwaki-gold-wave）（版 2026.10.01.54 新設／.55 でサイト全体の共通の部品に昇格） --------------------------------------------------------------------- 🔴 名前は .iwaki-gold-wave（金の波）。背景の波（wavebg.js）が自動で付ける印 .iwaki-wave-top／-up／-rel とは別物です（名前を似せないこと。 版 .54 では、この部品を .iwaki-wave-top と名付けてしまい、ヘッダー・濃い帯・フッターに余計な波が出ていました＝.55 で改名して直した）。 見出し（h2 や、見出しの役の p）に class="iwaki-gold-wave" を付けると、その上に金の波が出る。 .iwaki-rule-top（短い横線）と一緒に付けても、波のほうが勝つ（このファイルでは波が後ろに書いてある）。 🔵 波＝「10a. お品書きの飾り罫線」「9. .pd-eyebrow」と同じ金の波（assets/images/logo-vertical.png の波の部分を切り出し・色は金 #b08d4f・比は高さ＝幅×0.5475）。 大きさは 48px 幅（高さ26.3px・見出しとのあいだ12px）。.54 のアグリーランド詳細の見た目と同じ。 🔵 使っている所（.55 時点）：アグリーランド詳細の見出し4つ／コンセプトの節の見出し4つ（.cn-h2）／代表挨拶の見出し（.iwaki-greeting__lead）。 共通の .iwaki-rule-top（短い横線）は書き換えていない（トップのコンセプトの帯の「コンセプトについて」＝写真の上の白い文字は、そのまま）。 🔴 黄色の帯・写真の上には付けないこと（金が読めない）。濃紺の地（#10253d）の上は、金とのコントラスト 5対1 で読めます。 ===================================================================== */ .iwaki-gold-wave { --gold-wave: 48px; position: relative; } @supports ((-webkit-mask-image: none) or (mask-image: none)) { .iwaki-gold-wave { padding-top: calc(var(--gold-wave) * 0.5475 + 0.75rem); } .iwaki-gold-wave::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: var(--gold-wave); height: calc(var(--gold-wave) * 0.5475); background: var(--wp--preset--color--gold); opacity: 1; -webkit-mask-image: url(assets/images/logo-vertical.png); mask-image: url(assets/images/logo-vertical.png); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: calc(var(--gold-wave) * 1.3858) auto; mask-size: calc(var(--gold-wave) * 1.3858) auto; -webkit-mask-position: calc(var(--gold-wave) * -0.1832) calc(var(--gold-wave) * -0.0215); mask-position: calc(var(--gold-wave) * -0.1832) calc(var(--gold-wave) * -0.0215); } } /* ===================================================================== 15d. おしらせ・催しごとの罫線を、新しい罫線にそろえる（版 2026.10.01.55 新設） --------------------------------------------------------------------- ・区切りの飾り（.iwaki-pagemark--gold）＝いままでの「細い罫＋輪（紋）」の輪をやめ、 「お品書きの飾り罫線（10a）」の語彙＝紺の細い罫（1px・40%）の真ん中に、地色の切れ目と金の波（48px）。 使っている所＝おしらせ一覧（patterns/page-news.php の2か所）・催しごと一覧（patterns/events-list-body.php の2か所）。 ほかの .iwaki-pagemark（Q&A・定期便・素材一覧）は、いままでのまま。 ・おしらせの項目の区切り線（.iwaki-newslist .wp-block-post の下の線）＝紺の15%の細い線 → 金の細い線（1px・金60%）。 トップのおしらせ・おしらせ一覧の両方で同じ部品なので、同じ見た目になる。 ===================================================================== */ .iwaki-pagemark.iwaki-pagemark--gold { background: rgba(26, 58, 92, 0.4); } @supports ((-webkit-mask-image: none) or (mask-image: none)) { .iwaki-pagemark.iwaki-pagemark--gold::before { width: 96px; height: 44px; border-radius: 0; } .iwaki-pagemark.iwaki-pagemark--gold::after { --pm-ring: 48px; --pm-mark: 48px; height: calc(var(--pm-mark) * 0.5475); background-color: var(--wp--preset--color--gold); -webkit-mask-image: url(assets/images/logo-vertical.png); mask-image: url(assets/images/logo-vertical.png); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: calc(var(--pm-mark) * 1.3858) auto; mask-size: calc(var(--pm-mark) * 1.3858) auto; -webkit-mask-position: calc(var(--pm-mark) * -0.1832) calc(var(--pm-mark) * -0.0215); mask-position: calc(var(--pm-mark) * -0.1832) calc(var(--pm-mark) * -0.0215); } } .iwaki-newslist .wp-block-post { border-bottom-color: rgba(176, 141, 79, 0.6); } /* 🆕 版 2026.10.01.102／.103：トップの「お品書き」の区分のバーを外したときの入れ物（.iwaki-kw__inner--plain）。 取るのは、バー（外罫・内罫・麻の葉の帯・背景の罫）だけ。patterns/product-grid.php で、スイッチ IWAKI_SHOW_PRODUCT_BAND_HEADINGS が false のときだけ使う。 波マークは、入れ物の一番上に置いた .iwaki-gold-wave（15c.）。区分名・英字の文字は、版 .100 と同じ見た目で表示する（版 .103）。 🆕 版 .103：バーがあった間の空き（上下 6.5rem・狭い画面は 4.5rem）を、バーが無いので0にした。枠そのものの余白（.iwaki-kw＝上下 4rem・狭い画面は 3.25rem）だけが残る ＝ 枠の上端から波マークまで、商品名の文字から枠の下端まで、PCで約64px・スマホで約52px（左右の余白・枠どうしの間隔・カードは変えていない）。 バー付き（スイッチ true）の枠には効かない（このクラスを付けた入れ物だけ）。 */ .iwaki-kw__inner.iwaki-kw__inner--plain { background: none; border-top: 0; border-bottom: 0; padding-top: 0; padding-bottom: 0; } .iwaki-kw__inner.iwaki-kw__inner--plain::before, .iwaki-kw__inner.iwaki-kw__inner--plain::after { display: none; } /* 波マークと最初の商品カードのあいだの空き（波の下の12pxに足して、枠の中で自然な間隔にする） */ .iwaki-kw__inner--plain > .iwaki-gold-wave { padding-bottom: 1.5rem; } /* 🔵 2026-10-04（版 2026.10.01.54）：アグリーランド詳細ページ（/products/agury-land/）だけ。①一番下のリンクを「エールぼかしとは」に（ページができるまで押せない文字）②エールぼかしの節の見出しから「肥料」を外した ③見出しの上の短い横線を金の波に（上の「15c.」・このページ専用の印 .iwaki-gold-wave）。戻す＝iwaki-theme_v2026.10.01.53.zip。 */ /* 🔵 2026-10-04（版 2026.10.01.55）：金の波を、サイト全体の共通の部品に（「15c.」＝.iwaki-gold-wave）。コンセプトの節の見出し4つ・代表挨拶の見出し・アグリーランド詳細に付けた。おしらせ・催しごとの罫線を新しい罫線に（「15d.」）。戻す＝iwaki-theme_v2026.10.01.54.zip。 */ /* ===================================================================== 15e. アグリーランド詳細ページ：「お品書きに戻る」を出さない／「エールぼかしとは」ボタン（版 2026.10.01.56 新設） --------------------------------------------------------------------- ・「お品書きに戻る」（templates/page-product.html の .iwaki-product-back）は、商品ページ全部で共通のテンプレートが持っている。 アグリーランド詳細（ヘッダーに .iwaki-agury-hero があるページ）のときだけ、出さない（:has() 対応のブラウザで。 非対応の古いブラウザでは、これまでどおり出るだけで、壊れません）。ほかの商品ページは、これまでどおり。 ・「エールぼかしとは」のボタン（button.iwaki-btn-soon）＝飛び先のページができるまでの、押しても移動しないボタン。 寸法・文字・色・動きは、他の外枠ボタン（.is-style-outline）と同じ指定を、button 要素にも当てるだけ。 ===================================================================== */ .wp-site-blocks > main:has(.iwaki-agury-hero) .iwaki-product-back { display: none; } .wp-block-button .wp-block-button__link.iwaki-btn-soon { cursor: pointer; } /* 🔵 2026-10-04（版 2026.10.01.56）：アグリーランド詳細ページ＋メニュー。①エールぼかしの写真の説明から「粒の」を外した ②「エールぼかしとは」を四角のボタンに（押しても移動しない button）③「お品書きに戻る」をこのページだけ出さない ④メニュー（ヘッダー2系統・フッター）に「アグリーランド」を独立した項目として追加（「隠す印」はメニューのこの項目だけ例外）。戻す＝iwaki-theme_v2026.10.01.55.zip。 */ /* 🔵 2026-10-04（版 2026.10.01.57）：CSSの変更はありません（版の番号だけ）。変更点＝エールぼかしの節（patterns/product-agury-land-body.php）の本文から、使い方の2文（「使うのは、畑を耕す前です。全面にまいて、土とよく混ぜ合わせます。」）を外し、最後の文を「アグリーランドでは、エールぼかしを使い、自然界の力で栽培したおいしい野菜を生産しています。」に（Ikuzoさんのご指示）。戻す＝iwaki-theme_v2026.10.01.56.zip。 */ /* 🔵 2026-10-04（版 2026.10.01.58）：CSSの変更はありません（版の番号だけ）。変更点＝厳選素材「りんご」の詳細ページ（patterns/ingredient-ringo-body.php）の本文を確定文に（「無農薬栽培にこだわり」を外し、自社農園アグリーランドのりんごを中心に…）／「この素材を使っている商品」をアダプトゲンドリンクとグミの2つだけに。ほかの素材ページは変えていません。戻す＝iwaki-theme_v2026.10.01.57.zip。 */ /* ===================================================================== 15f. 「この素材を使っている商品」が2つだけのとき、パソコン幅で中央に置く（版 2026.10.01.58 新設・りんごのページだけ＝印 .iwaki-related-pair） --------------------------------------------------------------------- サイトの既定の格子（「11.」）は、1枠 約216px・最大840px・左から並べる＝3列の枠に2つだと左に寄る。 りんごの詳細ページは、アダプトゲンドリンクとグミの2つだけになったので、800px以上では、2列ぶん（1枠 245px）を中央に置く。 800px未満（2列にちょうど収まるタブレット・1列のスマホ）は、いままでのまま。ほかの素材ページの格子は変えない（印が無い）。 ===================================================================== */ @media (min-width: 800px) { .wp-block-group .iwaki-cardgrid.iwaki-related-pair:has(> .iwaki-card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 15.33rem)); justify-content: center; } } /* 🔵 2026-10-04（版 2026.10.01.59）：CSSの変更はありません（版の番号だけ）。変更点＝厳選素材の固定ページ（りんご・かぼちゃ・里芋・山ぶどう・よもぎ・カシス）の本文が、パターンを呼ぶ1行でなく「焼き付いた古い本文」になっていたら、管理画面を最初に開いたときに、1ページずつ1回だけ、その1行に置き換える仕組みを追加（inc/body-fix.php）。もとの本文は post meta とリビジョンに退避。戻す＝iwaki-theme_v2026.10.01.58.zip（直したページの本文は残る）。 */ /* 🔵 2026-10-04（版 2026.10.01.60）：CSSの変更はありません（版の番号だけ）。変更点＝厳選素材「かぼちゃ」の詳細ページに、見出し・導入・本文の確定文を入れた（patterns/ingredient-kabocha-body.php）。厳選素材一覧のかぼちゃのカードの文も同じ見出しにそろえた。戻す＝iwaki-theme_v2026.10.01.59.zip。 */ /* 🔵 2026-10-04（版 2026.10.01.61）：CSSの変更はありません（版の番号だけ）。変更点＝厳選素材「里芋」の詳細ページに、見出し・導入・本文の確定文を入れ、「この素材を使っている商品」を 米粉パン 1枚にした（patterns/ingredient-satoimo-body.php）。一覧の里芋のカードの文も同じ見出しにそろえた。戻す＝iwaki-theme_v2026.10.01.60.zip。 */ /* 🔵 2026-10-04（版 2026.10.01.62）：CSSの変更はありません（版の番号だけ）。変更点＝厳選素材「カシス」の詳細ページに、見出し・導入・本文の確定文を入れ、「この素材を使っている商品」を 1×10 アダプトゲンドリンク1枚にした（patterns/ingredient-cassis-body.php）。一覧のカシスのカードの文も同じ見出しにそろえた。戻す＝iwaki-theme_v2026.10.01.61.zip。 */ /* 🔵 2026-10-04（版 2026.10.01.63）：CSSの変更はありません（版の番号だけ）。変更点＝厳選素材「山ぶどう」の詳細ページに、見出し・導入・本文の確定文を入れ、「この素材を使っている商品」を 1×10 アダプトゲンドリンク1枚にした（patterns/ingredient-yamabudo-body.php）。素材名の表記を、カタカナから平仮名の「山ぶどう」にそろえた。戻す＝iwaki-theme_v2026.10.01.62.zip。 */ /* 🔵 2026-10-04（版 2026.10.01.64）：CSSの変更はありません（版の番号だけ）。変更点＝厳選素材「よもぎ」の詳細ページに、見出し・導入・本文の確定文を入れ、「この素材を使っている商品」を 1×10 アダプトゲンドリンクと 一粒万倍美 米粉麺の2枚にした（patterns/ingredient-yomogi-body.php）。2枚の中央そろえは「15f.」の iwaki-related-pair を使う。一覧のよもぎのカードの文も同じ見出しにそろえた。戻す＝iwaki-theme_v2026.10.01.63.zip。 */ /* 🔵 2026-10-04（版 2026.10.01.65）：CSSの変更はありません（版の番号だけ）。変更点＝厳選素材「米（はれわたり）」の詳細ページの「この素材を使っている商品」を、米粉パン・一粒万倍美 米粉麺・一粒万倍美 玄米せんべいの3枚にした（patterns/ingredient-rice-body.php）。本文は不変。戻す＝iwaki-theme_v2026.10.01.64.zip。 */ /* 🔵 2026-10-04（版 2026.10.01.66）：CSSの変更はありません（版の番号だけ）。変更点＝グミの商品ページの、味ごと（リンゴ味・グレープフルーツ味）の囲みの一番上に、単品写真の枠（product-gummy-variant-1・2）を付けた。作りは米粉麺・玄米せんべい・米粉パンの種類ごとの写真と同じ（pd-variant__photo・iwaki-photo--card）。戻す＝iwaki-theme_v2026.10.01.65.zip。 */ /* 🔵 2026-10-04（版 2026.10.01.67）：CSSの変更はありません（版の番号だけ）。変更点＝米粉パンの商品ページの2種類の名称（1つ目＝プレーン・2つ目＝竹炭＆ゴマ）を、種類名の見出し・「名称」の行・アレルギー表示側の見出し・写真枠の名前と alt に入れた。戻す＝iwaki-theme_v2026.10.01.66.zip。 */ /* 🔵 2026-10-05（版 2026.10.01.68）：CSSの変更はありません（版の番号だけ）。変更点＝米粉パンの商品ページの商品情報（プレーン・竹炭＆ゴマの両方）に、内容量＝300g・賞味期限＝冷凍で60日・保存方法＝冷凍・製造者＝株式会社ナチュールプロビジョン・販売者＝エール産業株式会社（他の商品と同じ書き方）を入れた。戻す＝iwaki-theme_v2026.10.01.67.zip。 */ /* 🔵 2026-10-05（版 2026.10.01.69）：CSSの変更はありません（版の番号だけ）。変更点＝すべての商品の詳細ページの「つくり」にある「素材の産地」「作り方のこと」「届け方のこと」の3項目を、画面に出さない形にした（行のデータは各パターンに残してある）。全ページ共通のスイッチ＝inc/product-unfilled-rows.php の IWAKI_SHOW_UNFILLED_PRODUCT_ROWS（false→true でまた出る）。戻す＝iwaki-theme_v2026.10.01.68.zip。 */ /* 🔵 2026-10-05（版 2026.10.01.70）：CSSの変更はありません（版の番号だけ）。変更点＝①グミのグレープフルーツ味の商品情報の7項目（内容量・賞味期限・保存方法・販売者・製造者・摂取上の注意・保管・取扱い上の注意）を、リンゴ味と同じ文で埋めた。②すべての商品の詳細ページで「お客様相談室」の行を画面に出さない形にした（データは残す・スイッチ＝inc/product-unfilled-rows.php の IWAKI_SHOW_CUSTOMER_SERVICE_ROWS）。戻す＝iwaki-theme_v2026.10.01.69.zip。 */ /* 🔵 2026-10-05（版 2026.10.01.71）：CSSの変更はありません（版の番号だけ）。変更点＝グミの「つくり」の節に、見出し「かたさは同じ、味はふたつ。」と本文1段落（ライタさんの作文）を入れ、表の「グレープフルーツ」の行（先方確認中）を画面に出さない形（スイッチの囲い・データは残す）にした。戻す＝iwaki-theme_v2026.10.01.70.zip。 */ /* 🔵 2026-10-05（版 2026.10.01.72）：CSSの変更はありません（版の番号だけ）。変更点＝米粉パンの商品ページの、画面に出る文章欄13か所（英字名・キャッチ・導入・コンセプト見出しと本文・味わい見出しと4項目・つくり見出しと主な素材・お召し上がり方）を、ライタさんの採用版で埋めた。戻す＝iwaki-theme_v2026.10.01.71.zip。 */ /* 🔵 2026-10-05（版 2026.10.01.73）：CSSの変更はありません（版の番号だけ）。変更点＝①米粉麺の商品ページの、3種類の名称・文章欄13か所・保存方法・販売者を、ライタさんの採用版で埋めた。②すべての商品ページの販売者欄の住所の書き方を、会社概要と同じ「〒036-8084　青森県弘前市大字高田1丁目5-10」にそろえた。戻す＝iwaki-theme_v2026.10.01.72.zip。 */ /* 🔵 2026-10-05（版 2026.10.01.74）：CSSの変更はありません（版の番号だけ）。変更点＝玄米せんべいの商品ページの、種類名（種類1／種類2）・文章欄・保存方法・販売者（種類2）を、ライタさんの採用版で埋めた。戻す＝iwaki-theme_v2026.10.01.73.zip。 */ /* 🔵 2026-10-05（版 2026.10.01.75）：CSSの変更はありません（版の番号だけ）。変更点＝&pumpkin ビューティースイーツの商品ページの、文章欄14か所と保存方法（常温）を、ライタさんの採用版・Ikuzoさんのご指示で埋めた。戻す＝iwaki-theme_v2026.10.01.74.zip。 */ /* 🔵 2026-10-05（版 2026.10.01.76）：CSSの変更はありません（版の番号だけ）。変更点＝米粉パン（プレーン）の原材料名を「米粉、砂糖、米油、酵母、里芋粉、塩」にし、主な素材の「里芋」を「里芋粉」にした。戻す＝iwaki-theme_v2026.10.01.75.zip。 */ /* 🔵 2026-10-05（版 2026.10.01.77）：CSSの変更はありません（版の番号だけ）。変更点＝米粉パン（プレーン）の栄養成分表示を「100gあたり／熱量 436.6kcal／たんぱく質 6.7g／脂質 18.5g／炭水化物 64.4g／食塩相当量 3.45g」にした。竹炭＆ゴマは確認中のまま。戻す＝iwaki-theme_v2026.10.01.76.zip。 */ /* 🔵 2026-10-05（版 2026.10.01.78）：CSSの変更はありません（版の番号だけ）。変更点＝米粉パン（竹炭＆ゴマ）の栄養成分表示を「100gあたり／熱量 379.9kcal／たんぱく質 6.4g／脂質 5.8g／炭水化物 76.5g／食塩相当量 0.55g」にした（米粉パンの「（先方確認中）」は0か所に）。戻す＝iwaki-theme_v2026.10.01.77.zip。 */ /* 🔵 2026-10-05（版 2026.10.01.79）：CSSの変更はありません（版の番号だけ）。変更点＝商品名「グルテンフリー米粉パン」から「グルテンフリー」を外して「米粉パン」にした（お品書き・メニュー・素材ページ・写真枠の名前など）。英字名は RICE FLOUR BREAD。固定ページの題は管理画面で手直し（反映メモ参照）。戻す＝iwaki-theme_v2026.10.01.78.zip。 */ /* 🔵 2026-10-05（版 2026.10.01.80）：CSSの変更はありません（版の番号だけ）。変更点＝Q&A（/faq/）の、米粉パン・米粉麺の小麦アレルギーの答えと、米粉パンの食べ方の答えを、ライタさんの採用版に差し替えた。戻す＝iwaki-theme_v2026.10.01.79.zip。 */ /* 🔵 2026-10-05（版 2026.10.01.81）：CSSの変更はありません（版の番号だけ）。変更点＝1×10のページとQ&Aの、甘みの原料の名前を「りんごエキス」に直した。戻す＝iwaki-theme_v2026.10.01.80.zip。 */ /* 🔵 2026-10-05（版 2026.10.01.82）：CSSの変更はありません（版の番号だけ）。変更点＝商品名「米粉パン」を、他の商品と同じ形の「一粒万倍美 米粉パン」にした（お品書き・メニュー・素材ページ・パンのページの見出しなど）。英字名は ICHIRYU MANBAIBI RICE FLOUR BREAD。種類の名称は不変。固定ページの題は管理画面で手直し（反映メモ参照）。戻す＝iwaki-theme_v2026.10.01.81.zip。 */ /* 🔵 2026-10-14（版 2026.10.01.83）：CSSの変更はありません（版の番号だけ）。変更点＝玄米せんべいの商品ページに、先方のコンセプト書類（10/14）の内容を反映した（キャッチ・導入・コンセプト・味わい・つくり見出し・お召し上がり方の12欄。味わいの4つ目のラベルは「お湯を注ぐと」）。戻す＝iwaki-theme_v2026.10.01.82.zip。 */ /* 🔵 2026-10-14（版 2026.10.01.84）：CSSの変更はありません（版の番号だけ）。変更点＝米粉麺の商品ページに、先方のコンセプト書類（10/14）の内容を反映した（20か所。種類名＝稲庭風／よもぎ／黒炭玄米・「作り方のこと」の行を出す・稲庭風の注意書き1段落・4つ目の札は「冷・温」）。戻す＝iwaki-theme_v2026.10.01.83.zip。 */ /* 🔵 2026-10-14（版 2026.10.01.85）：CSSの変更はありません（版の番号だけ）。変更点＝米粉パンの商品ページに、先方のコンセプト書類（10/14）の内容を反映した（10か所：キャッチ・導入・コンセプト見出しと本文・味わい見出し・味／香り／食感／甘み・つくり見出し）。戻す＝iwaki-theme_v2026.10.01.84.zip。 */ /* 🔵 2026-10-14（版 2026.10.01.86）：CSSの変更はありません（版の番号だけ）。変更点＝素材6つのページに、先方の書類（りんご・かぼちゃ・里芋の特徴／厳選素材詳細）の内容を反映した（りんご・かぼちゃ・里芋は見出し・導入・本文を差し替え、よもぎ・カシス・山ぶどうは本文に先方の言葉を足した）。あわせて厳選素材の一覧のカード3つの文を、各ページの見出しと同じ文に変えた。戻す＝iwaki-theme_v2026.10.01.85.zip。 */ /* 🔵 2026-10-14（版 2026.10.01.87）：CSSの変更はありません（版の番号だけ）。変更点＝トップの厳選素材で、かぼちゃ・里芋の写真と名前が詳細ページへ飛べなかった不具合を直した（patterns/ingredients-teaser.php の表の3列目にURLを入れた）。戻す＝iwaki-theme_v2026.10.01.86.zip。 */ /* 🔵 2026-10-15（版 2026.10.01.92）：CSSの変更はありません（版の番号だけ）。変更点＝カシスの詳細ページのGIの文を「登録されています」の言い切りに直した。戻す＝iwaki-theme_v2026.10.01.91.zip。 */ /* 🔵 2026-10-15（版 2026.10.01.93）：CSSの変更はありません（版の番号だけ）。変更点＝トップの「こだわりから選ぶ」6つの名前と並びを先方の新しい6つに変更（inc/kodawari.php の名前の表）・竹の絵を1つ追加。戻す＝iwaki-theme_v2026.10.01.92.zip。 */ /* 🔵 2026-10-16（版 2026.10.01.94）：CSSの変更はありません（版の番号だけ）。変更点＝グミのグレープフルーツ味に、パッケージPDFの表示面（名称・原材料名・栄養成分表示・摂取上の注意・保管・取扱い上の注意・アレルギーの「含まれるもの」）を反映した。戻す＝iwaki-theme_v2026.10.01.93.zip。 */ /* 🔵 2026-10-16（版 2026.10.01.95）：CSSの変更はありません（版の番号だけ）。変更点＝グミの「つくり」節：導入文にグレープフルーツ味の1粒の中身を足し・「グレープフルーツ」の行を画面に出し・「2種のちがい」を「味わいと、入っている素材が違います。」に。戻す＝iwaki-theme_v2026.10.01.94.zip。 */ /* 🔵 2026-10-23（版 2026.10.01.96）：CSSの変更はありません（版の番号だけ）。変更点＝玄米せんべいのページを1種類構成にし、内容表示を先方のラベル写真どおりに埋めた。戻す＝iwaki-theme_v2026.10.01.95.zip。 */ /* 🔵 2026-10-23（版 2026.10.01.97）：CSSの変更はありません（版の番号だけ）。変更点＝グミ（グレープフルーツ味にセラミド・同じ設備で作るものにノンスターチ製法）、1×10（同じ設備で作るもの）、米粉麺（原材料名・同じ設備で作るもの）に先方の回答・データを反映。戻す＝iwaki-theme_v2026.10.01.96.zip。 */ /* 🔵 2026-10-23（版 2026.10.01.99・.98を含む）：CSSの変更は1つだけ（.pd-photo--box＝セット売りページのヒーロー写真・横長3対2）。変更点＝米粉麺・&pumpkin ビューティースイーツの「セット売りの新ページ」（ichiryu-noodle-set／pumpkin-yokan-set）を元のページの複製で作り、入口の行き先を inc/hidden-products.php の iwaki_set_page_switch() で切り替える形にした（戻す＝その2行を false に／zipなら iwaki-theme_v2026.10.01.97.zip）。 */ /* 🔵 2026-10-24（版 2026.10.01.100）：CSSの変更はありません（版の番号だけ）。変更点＝セット2ページ（米粉麺・ビューティースイーツ）のヒーロー導入を、ライタさんの採用版に差し替えた。戻す＝iwaki-theme_v2026.10.01.99.zip。 */ /* 🔵 2026-10-28（版 2026.10.01.101）：CSSの変更はありません（版の番号だけ）。変更点＝トップの「お品書き」の区分のバー（上下の飾り枠・英字・区分名）を外し、商品のあいだに下層ページと同じ金の波の区切りだけを置いた。戻す＝inc/product-unfilled-rows.php の IWAKI_SHOW_PRODUCT_BAND_HEADINGS を true に（1行）／zipなら iwaki-theme_v2026.10.01.100.zip。 */ /* 🔵 2026-10-28（版 2026.10.01.102）：CSSの変更は1つだけ（.iwaki-kw__inner--plain＝区分のバーを外したときの入れ物。版 .101 で足した #products の波の地色合わせは外した）。変更点＝.101のやり過ぎの直し。2つの区分は別々の枠のまま、バーだけを外し、各枠の中の上に金の波マークを1つずつ置いた。戻す＝inc/product-unfilled-rows.php の IWAKI_SHOW_PRODUCT_BAND_HEADINGS を true に（.100の見た目）。 */ /* 🔵 2026-10-28（版 2026.10.01.103）：CSSの変更は1か所だけ（.iwaki-kw__inner--plain の上下の空きを0に＝お品書きの枠の上下の余白を詰める）。変更点＝区分名・英字の文字を版 .100 と同じに表示し直した（消すのは線・紋・朱の帯の飾りだけ）。2つの枠は別々のまま・各枠の中の上に金の波マークを1つずつ。戻す＝IWAKI_SHOW_PRODUCT_BAND_HEADINGS を true に（.100の見た目）。 */ /* 🔵 2026-10-28（版 2026.10.01.104）：CSSの変更は1か所だけ（.pd-photo--box の最大幅 440→640px・パソコン幅で写真の列を600px）。変更点＝セット売りページの横長ヒーロー写真が縦長より小さく見えていたのを、縦横比（3対2）は変えず表示の幅だけ広げて直した。戻す＝iwaki-theme_v2026.10.01.103.zip。 */ /* 🔵 2026-10-28（版 2026.10.01.105）：CSSの変更は1か所だけ（.104 で写真の列を広げた副作用の直し：画面幅901〜1179pxでは、横長の写真のヒーローだけ文字が上・写真が下の縦並びに。1180px以上は .104 のまま）。写真の縦横比（3対2）と大きさは変えていない。戻す＝iwaki-theme_v2026.10.01.104.zip。 */ /* 🔵 2026-10-28（版 2026.10.01.106）：CSSの変更はありません（版の番号だけ）。変更点＝&pumpkin の商品の旧称を、先方のご希望ですべて外し、「&pumpkin ビューティースイーツ」に改めた（名前・説明・写真の説明・管理画面の表示名）。内部の名前（スラッグ・写真枠の鍵・ファイル名）は変えていない。戻す＝iwaki-theme_v2026.10.01.105.zip。 */ /* 🔵 2026-10-28（版 2026.10.01.107）：商品名・区分名が言葉の途中（「ビューテ／ィースイーツ」など）で折れるのを直しました。 ・.pd-name--keep（&pumpkin ビューティースイーツのh1だけ）：日本語を言葉の途中で折らない（折れるのは半角の空白＝「&pumpkin」と「ビューティースイーツ」の切れ目だけ）。 長い名前が列に収まるよう、文字の大きさだけ少し小さく（最大36px・スマホ幅では24px）。ほかの商品のh1は変わりません。 ・.pd-cat（区分名「ギルトフリー・アレルギー配慮フード」）：言葉の途中で折らず、折れるときは「ギルトフリー・」のあとで折れるようにしました（マークアップの は使わず、CSSだけ）。 写真の大きさ・縦横比・ほかの文字・色・順序は変えていません。 */ .pd-name--keep { font-size: clamp(1.5rem, 6.4vw, 2.25rem); word-break: keep-all; overflow-wrap: break-word; } .pd-cat { word-break: keep-all; overflow-wrap: break-word; } /* 画面幅901〜1099pxでは、単品ページの文字の列が309〜500pxほどに狭くなるため、名前の文字を画面幅に合わせて小さくします（901pxで約28px・1099pxで約34px）。 */ @media (min-width: 901px) and (max-width: 1099px) { .pd-name--keep { font-size: 3.1vw; } } /* 🔵 2026-10-28（版 2026.10.01.108）：商品ページの上のほうの導入文（キャッチの2行と、その下の説明文）で、「る。」「す。」など句点を含む1〜2文字だけが次の行の頭に落ちるのを直しました。 ・直す対象は、ヒーローの .pd-catch と .pd-lead だけです（写真・見出し・ほかの節の大きさや位置は変えていません）。 ・text-wrap: pretty（最後の行が極端に短くならないよう、折り返しを整える）。効かない閲覧環境では、これまでと同じ折れ方になるだけで、崩れは増えません。 ・文字の内容は変えず、改行も手で足していません（文を編集しても、CSSが自動で整えます）。 */ .pd-hero .pd-catch, .pd-hero .pd-lead { text-wrap: pretty; } /* 🔵 2026-10-30（版 2026.10.01.109）：CSSの変更はありません（版の記録だけ）。変更点＝厳選素材（素材一覧ページ patterns/ingredients-list-body.php）の区切り2か所を、「罫＋丸で囲んだ波」（.iwaki-pagemark）から、おしらせ・催しごとと同じ「罫＋金の波」（.iwaki-pagemark--gold）に変えました。上下の余白（PC 96px・スマホ 72px）は、おしらせ・催しごとと同じ部品なので同じです。Q&A・定期便の区切りは、頼まれていないので変えていません。 */ /* 🔵 2026-10-30（版 2026.10.01.110）：トップの写真の右下のおしらせ（.iwaki-hero-notice）が、最新の投稿を自動で1件出す形になりました（inc/hero-notice.php）。 位置・文字の大きさ・色・余白（上の .iwaki-hero-notice の指定）は変えていません。足したのは次の3つだけです。 ① アイキャッチの四角（.iwaki-hero-notice__thumb）：64px・中央で切り抜き。アイキャッチがある投稿のときだけ書き出されます（無いときは枠そのものがありません）。 ② 長い題名の折り返し：題名の段落が写真の外へはみ出さないように（日付は縮めず1行のまま）。長すぎる題名は、PCで4行・スマホ幅（900px以下）で2行までに収めて「…」で省く（点・ほかの部品に重ならないため。リンクは題名全体のまま）。 ③ スマホ幅（900px以下）で、アイキャッチ付きのときだけ、点（手送り）を 6rem → 8rem に上げる（四角で高さが増えるぶん、おしらせと重ならないように。アイキャッチ無しの6remは変えていません）。 */ .iwaki-hero-notice__thumb { flex: 0 0 64px; width: 64px; height: 64px; margin: 0; border-radius: 3px; overflow: hidden; } .iwaki-hero-notice__thumb a { display: block; width: 100%; height: 100%; } .iwaki-hero-notice__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .iwaki-hero-notice > p:first-of-type { flex: 0 0 auto; white-space: nowrap; } .iwaki-hero-notice > p:last-child { min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } @media (max-width: 900px) { .iwaki-hero-notice > p:last-child { -webkit-line-clamp: 2; } .iwaki-hero[data-slider="on"]:has(.iwaki-hero-notice--thumb) .iwaki-hero-dots { inset-block-end: 8rem; } } /* 🔵 2026-10-30（版 2026.10.01.110）：おしらせの記事ページ（templates/single.html）の写真を、本文の列（760px）より大きく見せる。 【測った原因】本物の記事ページで、写真（1200×800・解像度は十分）が 760×507 で出ていた。写真が小さいのではなく、写真の枠が本文の文字の列の幅（760px）に合わせてあったため。 【直し】写真だけ幅広の枠（align wide）にして、最大 1000px（PC1280で1000×667・タブレット768は画面幅いっぱい・スマホ375は左右24pxの余白で327px）。縦横比は変えない（切り抜かない）。 縦長の写真は、横いっぱいに広げると画面より高くなるため、枠の高さを min(75vh, 720px) までに抑え、写真は枠の中央に切り抜かず（object-fit: contain）収める（比率はそのまま）。小さい写真の広がり方は、いままでと同じ（枠の幅いっぱい）。 */ .wp-block-post-featured-image.iwaki-post-hero { max-width: 1000px; text-align: center; } .wp-block-post-featured-image.iwaki-post-hero img { display: block; width: 100%; max-height: min(75vh, 720px); height: auto; object-fit: contain !important; } /* 🔵 2026-10-30（版 2026.10.01.115）：おしらせのカードを、全記事おなじ大きさに（Ikuzoさんのご指示：.114 の1件目の大きなカード＝540×360は「でかすぎ」。一覧は一度にたくさん見渡せること、トップの欄はいつも決まった件数が収まることを求められた）。 版 .114 の「1件目だけ大きなカード」の指定は、この指定に置き換えました（写真の拾い方・3対2の写真・写真の無いカードの小さな形は .113／.114 のまま）。 【形】トップの「おしらせ」欄・おしらせ一覧・記事の一覧（どれも .iwaki-newslist）で共通。 ・全記事が同じ大きさのカード。写真は縦横比 3対2。カードの幅は「厳選素材」のカード（約245px）と同じ程度の 240px（PC）／208px（タブレット）。列の数は、幅に合わせて自動（PC 4列・タブレット 3列）。 ・記事が1件・2件でも、カードは同じ大きさのまま列の中央に置く（左に寄らない・間延びしない）。 ・おしらせ一覧＝PC 4列／タブレット 3列／スマホ 2列（列の数は、幅に合わせて自動。カードの幅は約240px）。20件なら、PCで5段・約1.7画面に収まる。 ・トップの欄＝最新6件が「次々に変わる」（厳選素材と同じ rotate.js）。1度に見せるのは PC 3枚／タブレット 2枚／スマホ 1枚。記事が3件以下のときは動かさず並べるだけ（inc/news-rotate.php の冒頭に詳しく）。 🔵 写真の無い記事は、写真の枠を出さず日付・カテゴリー・題名だけの小さなカード（上に金の細い線）。 */ .iwaki-newslist > .wp-block-post-template { display: grid; grid-template-columns: repeat(auto-fit, 15rem); justify-content: center; gap: 2.5rem 1.75rem; max-width: 1060px; margin-inline: auto; padding: 0; list-style: none; } .iwaki-newslist > .wp-block-post-template > * { margin-block: 0; } .iwaki-newslist .wp-block-post { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-content: start; align-items: center; column-gap: 0.9rem; row-gap: 0.6rem; margin: 0; padding: 0; border-bottom: 0; } .iwaki-newslist .wp-block-post > .wp-block-post-title { grid-column: 1 / -1; } .iwaki-newslist .wp-block-post > .wp-block-post-terms { justify-self: start; } .iwaki-newslist .wp-block-post:not(:has(.iwaki-newsthumb)) { padding-top: 1rem; border-top: 1px solid rgba(176, 141, 79, 0.6); } .iwaki-newslist .wp-block-post-featured-image.iwaki-newsthumb { grid-column: 1 / -1; grid-row: 1; width: 100%; aspect-ratio: 3 / 2; margin: 0; border-radius: 4px; overflow: hidden; } .iwaki-newslist .wp-block-post-featured-image.iwaki-newsthumb a { display: block; width: 100%; height: 100%; } .iwaki-newslist .wp-block-post-featured-image.iwaki-newsthumb img { display: block; width: 100%; height: 100%; object-fit: cover !important; } .iwaki-newslist .wp-block-post:has(.iwaki-newsthumb) > .wp-block-post-date { grid-column: 1; grid-row: 2; } .iwaki-newslist .wp-block-post:has(.iwaki-newsthumb) > .wp-block-post-terms { grid-column: 2; grid-row: 2; } .iwaki-newslist .wp-block-post:has(.iwaki-newsthumb) > .wp-block-post-title { grid-row: 3; } /* トップの欄の幅：厳選素材のカードの並びと同じ程度（最大840px）。記事が少ないとき（動かさず並べるだけ）も、カードは列の中央に置く（上の auto-fit＋中央） */ .iwaki-washi-gold .iwaki-newslist > .wp-block-post-template { max-width: 840px; } /* トップの欄：最新6件が「次々に変わる」（rotate.js・厳選素材と同じ仕組み）。控えがあるとき（記事が4件以上）だけ、1度に見せるのは PC 3枚／タブレット 2枚／スマホ 1枚。控え（4件目より後）は見えない */ .iwaki-washi-gold .iwaki-newslist > .iwaki-rot--news:has(> .iwaki-rot__pool) { grid-template-columns: repeat(3, 15rem); } @media (max-width: 1099px) { .iwaki-newslist > .wp-block-post-template { grid-template-columns: repeat(auto-fit, 13rem); } .iwaki-washi-gold .iwaki-newslist > .iwaki-rot--news:has(> .iwaki-rot__pool) { grid-template-columns: repeat(2, 15rem); } .iwaki-newslist > .iwaki-rot--news:has(> .iwaki-rot__pool) > :nth-child(3) { display: none; } } /* スマホ（700px以下）：一覧とトップ（動かさないとき）は 2列＝一度にたくさん見渡せる（1件だけのときは、幅いっぱいの1枚）。カードの中は縦に並べる。トップの動く欄は 1枚ずつ */ @media (max-width: 700px) { .iwaki-newslist > .wp-block-post-template { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 2rem 1rem; } .iwaki-washi-gold .iwaki-newslist > .iwaki-rot--news:has(> .iwaki-rot__pool) { grid-template-columns: minmax(0, 20rem); } .iwaki-newslist > .iwaki-rot--news:has(> .iwaki-rot__pool) > :nth-child(n + 2) { display: none; } .iwaki-newslist .wp-block-post { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; } .iwaki-newslist .wp-block-post-featured-image.iwaki-newsthumb { width: 100%; } } /* 🔵 2026-11-03（版 2026.10.01.120）：コンセプトページの見出しの線を、PCもスマホも「文字の長さに合わせた長さ」にそろえました（Ikuzoさんのご指摘）。 【原因】 ① 赤い線（「薬補は食補にしかず」「元気は生命の本也。飲食は生命の養也。」の脇・下）：PC（縦書き）は、文字の長さと同じ縦線（top:0／bottom:0＝見出しの箱いっぱい・240px）。 スマホ・タブレット（900px以下・横書き）に切り替わると、同じ線が「幅3rem（48px）の短いちょん」に変わり、文字の幅（約233px）より大幅に短くなっていました。 ② 小見出しの線（「足さないもの」「選ぶもの」の下）：PCもスマホも、幅2.5rem（40px）の固定で、文字の幅（約127px）の3分の1しかありませんでした。 【PCの実測】縦書きの線は、見出しの文字の長さ216pxに対して240px＝文字より約24px（1.2文字ぶん）長い（上下に 0.6文字ぶんずつはみ出す）。Ikuzoさんの「文字の長さよりやや長め」はこれ。 【直し】線の長さを固定の数ではなく、見出しの文字の幅（箱は fit-content で、複数行なら一番長い行の幅）の両端に、PCと同じ 0.6文字ぶん（0.6em）ずつ足した長さにしました（PCの縦線と同じ比率）。 色・太さ・位置（赤い線は文字の下 0.9rem・小見出しの線は文字の下の端）・PCの縦書きの線は変えていません。 */ @media (max-width: 900px) { .cn-quote { width: fit-content; max-width: 100%; margin-inline: auto; } .cn-quote::before { left: -0.6em; right: -0.4em; width: auto; transform: none; } .cn-quote--punct::before { right: 0.24em; } } .cn-subhead, .cn-body p.cn-subhead, .cn-closing p.cn-subhead { width: fit-content; max-width: 100%; } .cn-subhead::after, .cn-body p.cn-subhead::after, .cn-closing p.cn-subhead::after { left: -0.6em; right: -0.6em; width: auto; transform: none; } /* 🔵 2026-11-03（版 2026.10.01.121）：赤い線の左右の出方を、見た目の文字（インク）に対して左右そろえました（Ikuzoさんのご指摘：行末の「。」の空きぶん、右だけ大きく出て見える）。 【実測（スマホ375・タブレット768 同じ）】文字の箱の右端には、字間の空き（0.2em＝約4px）が付いています。さらに行末が「。」だと、字の絵が左寄りで、右に約14pxの空きがあります。 そのため、箱から左右に0.6emずつ出した線は、見た目の文字（インク）に対して、左の出が約13.5pxなのに右の出は、「薬補は食補にしかず」（句点なし）で約18px、「元気は生命の本也。飲食は生命の養也。」（句点あり）で約32px。左右差は 4.8px／18.3px でした。 【直し】右の出だけを、行末の空きぶん詰めました。句点で終わらない見出し＝右を 0.4em（字間の空きだけ詰める）、句点で終わる見出し＝右を内側へ 0.24em（字間＋句点の空きを詰める）。左は 0.6em のまま。「文字よりやや長め（左右とも文字の絵から約13.5px）」の基準は変えていません。 句点で終わる見出しには、クラス cn-quote--punct を付けています（patterns/concept-body.php の2つ目の赤い線）。見出しの文章を変えて、句点の有無が変わったときは、このクラスを付け外ししてください。 小見出し（足さないもの・選ぶもの）は、左右差が 0.2〜1.4px（字間と行頭の字下げが同じ幅のため）なので、変えていません。PCの縦書きは変えていません。 */ /* 🔵 2026-11-03（版 2026.10.01.121）：見出しの上の金の波の大きさを、サイト全体でそろえました（Ikuzoさんのご指摘：米粉パンの「コンセプト」の波は大きく、コンセプトページの「薬より先に、食を見ました」の波は小さく見える）。 【実測】全24ページ・PC1280／タブレット768／スマホ375（どの幅でも同じ値）。 ・商品ページ（8ページ・「コンセプト」「つくり」「商品情報」などの見出しの上）＝ .pd-eyebrow：64×35px（見出し上の波 32か所） ・コンセプト（4か所）・代表挨拶（1か所）・アグリーランド詳細（4か所）・トップのお品書きの区分（2か所）＝ .iwaki-gold-wave：48×26px（見出し上の波 11か所） ・おしらせ・催しごと・素材一覧・よくある質問・定期便の区切りの中の波（.iwaki-pagemark--gold）：48×26px（区切り 10か所） 【そろえ方】役割で分けました。 ① 見出しの上の波＝64×35px（いちばん多く使われている大きさ＝商品ページの64px に、.iwaki-gold-wave をそろえた。変数 --gold-wave を 48px → 64px。高さ・切り出し・文字との間隔は、この1行から自動で追従します） ② 区切りの線の中の波（.iwaki-pagemark--gold）＝48×26px のまま（線と、上下96px・72pxの空きの中に置く別の役割。いまの見た目を保つ） 色・位置・余白・並びは変えていません（波が大きくなったぶん、波の下の文字が約9px下がるだけ）。 */ .iwaki-gold-wave { --gold-wave: 64px; }