@charset "UTF-8"; /* ============================================================ 木rara 商品ページ 追加スタイル（2026-09 / npc） ★方針: 幅・スケールはテンプレの .about / .product / .site_main section に完全に乗せ、 一切変えない。この追加CSSは「差分だけ」＝金額任意の整列・説明文・写真の統一・ 商品名の背景オフ・リード画像の高さ追従。すべて .nara-lead / .nara-grid の中だけに効かせ、 他ページの .about / .product には影響させない。 既存 style.css の後に読み込む。 ============================================================ */ /* ---------- ① リード（テンプレの .about をそのまま使い、画像だけ文章量に追従させる） ---------- */ /* .about は flex 50/50。align-items:stretch で画像セルの高さは文章の高さに追従するが、 中の img は自然高さでできる隙間を、object-fit:cover で満たす（幅・比率はそのまま）。 */ /* 【B】写真を切らずに全部見せる（2026-09-18）。 以前は align-items:stretch ＋ object-fit:cover で画像を文章の高さに追従させていたが、 文章量と画面幅で枠の形が変わり、画像が拡大されて端が切れていた（PCで左右14%・タブレットで46%）。 写真をそのままの比率で出す形に変更。文章が長いときは写真の下に余白が出る。 元に戻す場合は、下の2行を次の3行に差し替える: .nara-lead.about { align-items: stretch; } .nara-lead .about_txtbox_img { overflow: hidden; } .nara-lead .about_txtbox_img img { width:100%; height:100%; object-fit:cover; object-position:center; } */ .nara-lead.about { align-items: flex-start; } .nara-lead .about_txtbox_img img { width: 100%; height: auto; display: block; } /* リード見出し「ナラ OAK」はテンプレの about_txtbox_tit を流用（サイズ・色そのまま） */ .nara-lead .about_txtbox_tit small { font-size: .5em; letter-spacing: .12em; margin-left: .3em; } /* 縮小時（768〜991px）: テンプレは右テキストを position:absolute にするため画像が文章に追従しない。 .nara-lead では通常フローに戻し、2カラム＋align-items:stretch のまま画像を文章の高さに追従(cover)させる。 ※テンプレ `.site_main .about .about_txtbox` を上回る詳細度で打ち消す。 */ @media (max-width: 991px) { .site_main .about.nara-lead .about_txtbox { position: static; width: 50%; right: auto; top: auto; } } /* スマホ縦（〜767px）は上下に積むので、画像は cover の height:100% を解除して自前の高さに戻す */ @media (max-width: 767px) { .site_main .about.nara-lead .about_txtbox { width: 100%; } } /* ---------- ② 商品グリッド（テンプレの .product / .product_item をそのまま使う＝4列・23%・幅そのまま） ---------- */ /* 追加するのは: 写真の大きさ統一 / 商品名の背景オフ / 金額(任意)の整列 / 説明文 のみ。 */ /* 写真: 全カード同じ 4:3 枠に cover で入れて、大きさ・余白を統一（幅はテンプレの列幅のまま） */ .nara-grid .product_item .img { aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid #ece7e2; } .nara-grid .product_item .img img { width: 100%; height: 100%; object-fit: cover; } /* 商品名: 背景色オフ・写真のすぐ下に詰める。 テンプレの `.site_main .product .product_list .product_item h3{background:#EFEBE9}` を確実に打ち消すため、 同じ連鎖に .nara-grid を足して詳細度を1段上げる。 */ .site_main .product.nara-grid .product_list .product_item h3 { background: none; color: #5d4037; padding: 7px 6px 0; font-size: 15px; line-height: 1.3; /* 商品名の行数の違いで金額と説明文が下がっていたので、高さを固定する（2026-09-18）。 1.3em×2行 ＋ 上の padding 7px ＝ いちばん長い商品名（短いサイズ5ケース合計110kg）が 収まる高さ。12枚すべてで金額・説明文のY座標が完全に一致することを実測した。 商品名をさらに長くする場合は、この値を増やす。 */ min-height: calc(1.3em * 2 + 7px); } /* ④ 金額: 任意。商品名と同じ大きさ・少しグレー。無いカードでも高さを確保して説明文の行をそろえる */ .site_main .product.nara-grid .product_list .product_item .product_item_price { text-align: center; color: #9a9a9a; font-size: 15px; font-weight: 600; margin: 3px 0 0; min-height: 2em; /* 金額のないカードでも、金額がある行と同じ高さを取る（実測30px） */ font-variant-numeric: tabular-nums; } .site_main .product.nara-grid .product_list .product_item .product_item_price .yen { font-size: .8em; margin-left: .1em; } /* ⑤ 説明文: 小さめ・上に点線 */ .nara-grid .product_item .product_item_txt { font-size: 13px; line-height: 1.7; color: #575049; margin: 8px 0 0; padding-top: 10px; border-top: dotted 1px #e6ded6; text-align: left; } @media (max-width: 640px) { .site_main .product.nara-grid .product_list .product_item h3 { font-size: 14px; } .site_main .product.nara-grid .product_list .product_item .product_item_price { font-size: 14px; } .nara-grid .product_item .product_item_txt { font-size: 12.5px; } } /* ---------- ⑥ リードのキャッチコピー（1行目だけ大きく） ---------- */ /* 本文の

より一回り大きく、行間をつめる。文章量が増えても位置は変わらない。 */ /* テンプレの `.site_main .about .about_txtbox_txt p{font-size:18px}` を上回る詳細度で指定する */ .site_main .about.nara-lead .about_txtbox_txt p.nara-lead-catch { font-size: 22px; line-height: 1.5; font-weight: 600; color: #5d4037; margin: 0 0 12px; letter-spacing: .02em; } @media (max-width: 640px) { .site_main .about.nara-lead .about_txtbox_txt p.nara-lead-catch { font-size: 18px; } } /* ---------- ⑦ 価格のうしろの「（送料・税込）」 ---------- */ /* 金額より小さく、同じ行に続ける。入る幅がないときだけ折り返す。 */ .site_main .product.nara-grid .product_list .product_item .product_item_price .tax { font-size: .72em; font-weight: 400; margin-left: .35em; white-space: nowrap; } /* ---------- ⑧ 売り切れの表示 ---------- */ /* 使い方: その商品の

  • に is-soldout を足すだけ。 （例）
  • 戻すときは is-soldout を消す。写真・商品名・金額・説明文はそのままでよい。 帯は写真の上に重ねているので、カードの高さは変わらない＝隣の列とズレない。 */ .nara-grid .product_item.is-soldout .img { position: relative; } .nara-grid .product_item.is-soldout .img::after { content: "SOLD OUT"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(60, 48, 40, .55); color: #fff; font-size: 18px; font-weight: 700; letter-spacing: .14em; } /* 2026-09-18 先方のご指示「SOLD OUTの表示のみで大丈夫」に合わせ、 金額の取り消し線と、金額・商品名を薄くする指定を外した。売り切れの表し方は写真の帯だけ。 */ @media (max-width: 640px) { .nara-grid .product_item.is-soldout .img::after { font-size: 15px; } } /* ---------- ⑨ カード全体をリンクにする（2026-09-18 追加） ---------- */ /* HTMLで

    から

    までを で囲うと、 カードのどこを押しても購入ページへ飛ぶ。テンプレの `.product_item a`（display:block・ hoverで影）にそのまま乗るので、囲うだけでよい。 金額は打ち消し不要＝上の④（クラス6個）がテンプレの `a .product_item_price` （クラス5個＋要素1個）に詳細度で勝っている。2026-09-18 に不要な打ち消しを足して リンク付きの2枚だけ3pxずれ・640px以下で文字サイズが揃わない状態を作ったので削除した。 説明文だけは打ち消しが必要（こちらはクラス3個でテンプレに負けるため）。 */ .site_main .product.nara-grid .product_list .product_item a { text-decoration: none; } .site_main .product.nara-grid .product_list .product_item a .product_item_txt { margin-top: 8px; } /* 売り切れの帯は、リンクで囲っても写真の上に出る */ .nara-grid .product_item.is-soldout a .img { position: relative; } /* 売り切れにしたら、リンクを外さなくても押せなくなる（2026-09-18 運用のご要望）。 is-soldout を足すだけで、クリック・タップが効かず、マウスを乗せても影が出ない。 と はそのまま残しておいてよい。is-soldout を消せばまた押せるようになる。 ※キーボードの Tab で選んで Enter を押した場合だけは飛びます（CSSでは止められません）。 */ .site_main .product.nara-grid .product_list .product_item.is-soldout a { pointer-events: none; cursor: default; } .site_main .product.nara-grid .product_list .product_item.is-soldout a:hover { box-shadow: none; } /* 商品の数が4の倍数でなくても、最後の行を左から詰めて並べる（2026-10 ご相談）。 テンプレの並べ方（両端そろえ）だと、最後の行が欠けたときに残りの商品が左右に散る。 列の幅（23%・31%・48%）と列どうしの間隔は今までと同じ。 */ .site_main .product.nara-grid .product_list { display: grid; grid-template-columns: repeat(4, 23%); justify-content: space-between; } .site_main .product.nara-grid .product_list .product_item { width: auto; } @media (max-width: 1199px) { .site_main .product.nara-grid .product_list { grid-template-columns: repeat(3, 31%); } } @media (max-width: 767px) { .site_main .product.nara-grid .product_list { grid-template-columns: repeat(2, 48%); } } /* 商品を消さずに、ページから見えなくする。