/* Pitsole TOP page — design tokens & shared utilities. #index-view配下にのみ適用し、他ページのスタイルに影響させない。 */ :root { --color-ink: #3B2B2B; --color-rose: #C48B8B; --color-rose-deep: #8E4E52; --color-rose-light: #E8D5D5; --color-cream: #FAF7F4; --color-cream-deep: #F3EDE8; --color-white: #FFFFFF; --color-gray: #6F6764; --color-line: #E5DEDA; --font-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif; --font-serif: "Cormorant Garamond", "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif; --font-serif-jp: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif; --fs-h2: 1.5rem; --fs-h3: 1.1875rem; --fs-body: 0.9375rem; --fs-caption: 0.8125rem; --maxw: 1200px; /* 左右の余白。SP 28px / タブレット 40px / PC 40px。 モック(pitsole-site)は 20 / 32 / 40 だが、SPとタブレットで 「狭すぎる」とレビューがあったため一段ずつ広げている(2026-08-28)。 .container(#index-view / .c-pitsole-theme)・Instagramの スクロール領域・SPの固定バーがすべてこの1つの値を見ているので、 ここを変えればPitsoleの全ページの左右余白が揃って動く。 ただし商品詳細の購入エリアだけは ecforce標準の .p-product_content が 自前でpaddingを持つため、別途下の方で合わせている。 */ --gutter: 28px; --sec-pad: 64px; --radius-card: 8px; --radius-btn: 999px; --radius-sm: 4px; --shadow-hover: 0 10px 28px rgba(59, 43, 43, 0.10); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 0.3s; /* 固定ヘッダーの高さ。header.liquid のインライン min-height:70px と bundle.css の .l-header { border-bottom-width: 1px } の合計。 使い道は下の #index-view.l-container のコメントを参照。 */ --header-h: 71px; } @media (min-width: 768px) { :root { --fs-h2: 1.75rem; --fs-h3: 1.25rem; --fs-body: 1rem; --gutter: 40px; --sec-pad: 96px; } } @media (min-width: 1024px) { :root { --fs-h2: 2rem; --fs-h3: 1.375rem; --sec-pad: 120px; --gutter: 40px; } } #index-view, #index-view *, #index-view *::before, #index-view *::after { box-sizing: border-box; } #index-view { font-family: var(--font-sans); color: var(--color-ink); } /* 【重要】読み込み1秒後にヒーローが「ガタン」と下がる問題の対策(2026-08-27ユーザー指摘) ヘッダーは position:fixed(bundle.css 978行目)なので、本文の
はページ最上部(y=0)から始まる。そのままだとファーストビューの上端およそ70pxが 不透明な白ヘッダーの裏に隠れてしまうため、ecforce標準は assets/js/layout/l-container.js(bundle.js 6773行目〜)で window.addEventListener("load", () => { container.style.paddingTop = `${header.offsetHeight}px`; }) と、ヘッダーの実高さぶんの padding-top をインラインで付けている。 問題は付けるタイミングが window の load —— つまり画像を含む全リソースの 読み込み完了後だという点。ヒーローの画像が重いぶん体感で1秒ほど遅れ、 そこで初めて本文全体が約71px下へずれる。隠れていたヒーローの上端が現れるので、 「ヒーローの縦幅が急に長くなった」ように見える。 さらにこのテーマはカスタマイズの「エフェクト」がオフ(settings_data.json の action.effect: "false")で、レイアウトが .l-wrapper ではなく .l-wrapper-none を 使う。.l-wrapper 側にある opacity:0 → load で is-complete を付けてフェードイン、 という目隠しが効かないため、ずれる前の状態がそのまま見えている。 対策は「同じ余白を最初の描画から確保しておく」こと。CSSで先に置いておけば、 load時にJSが入れるインライン値と一致するので何も動かない。 打ち消すのではなく先回りするだけなので、!important は付けない —— お知らせバーを出した等でヘッダーが高くなった場合は、 従来どおりJSが実測値で上書きしてくれる(初回描画の1秒間だけ数px浅くなる)。 【なぜ #index-view ではなく main.l-container で当てるのか】(2026-08-27に対象を拡大) 同じズレはこのCSSを読み込む全ページで起きているため、TOPだけでなく まとめて直す。安全性は次のとおり確認した。 ・JSが狙うのは document.querySelector(".l-container") ＝ 文書内で最初の .l-container。テーマ内で .l-container が付くのは各ページの
だけで (ヘッダー・フッター・スニペットには無い)、必ずページ本体に当たる。 このセレクタを main.l-container にしておけば、JSの対象と常に一致する。 ・結果として得られる最終的な見た目は今までと1pxも変わらない。JSが同じ値を 入れるので、変わるのは「いつ余白が確保されるか」だけ。したがって 商品詳細・カテゴリー・検索・フリーページのように他ブランドと共通の テンプレートに効いても、他ブランドの表示は崩れない(むしろ同じズレが直る)。 ・カートだけは対象外になる。carts/show.html.liquid の
は .l-container を持たない(js-main-container のみ)ので、そもそもJSも 余白を付けていない。ここに新しく余白が生まれる心配は無い。 カートは注文フロー用レイアウトでヘッダーが position:static のため、 そもそも逃げが要らない。 */ main.l-container { padding-top: var(--header-h); } #index-view p { margin: 0; } #index-view h2 { margin: 0; font-weight: 500; } #index-view .container { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } #index-view .section { padding-block: var(--sec-pad); } #index-view .section--cream { background: var(--color-cream); } #index-view .section--white { background: var(--color-white); } #index-view .section--creamdeep { background: var(--color-cream-deep); } #index-view .section--ink { background: var(--color-ink); color: var(--color-white); } #index-view .section--ink .sec-label, #index-view .section--ink .sec-title { color: var(--color-white); } #index-view .sec-label { font-family: var(--font-serif); font-size: 0.8125rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-rose-deep); display: block; margin-bottom: 10px; } #index-view .section--ink .sec-label { color: var(--color-rose-light); } #index-view .sec-title { font-family: var(--font-serif-jp); font-size: var(--fs-h2); letter-spacing: 0.06em; line-height: 1.6; } #index-view .sec-lead { margin-top: 16px; color: var(--color-gray); max-width: 34em; } #index-view .sec-head { margin-bottom: 40px; } #index-view .sec-head--center { text-align: center; } #index-view .sec-head--center .sec-lead { margin-inline: auto; } /* 注釈。2026-08-28、共通の --fs-caption(13px)から12pxへ下げた。 トークン自体は商品カードのカテゴリ名・価格など全体で使っているので触らず、 .disclaimer に直接書いている。 このスコープで .disclaimer を使っているのは「選ばれている理由」03 と 「お客様の声」の2箇所だが、後者はカスタマイズ画面で非表示(disabled)のため 現状は03だけに効く。お客様の声を再表示したらそちらの注釈も12pxになる。 ご利用ガイド(.c-pitsole-theme .disclaimer)と商品詳細(#product-show-view)は 別セレクタなので影響しない。 */ #index-view .disclaimer { font-size: 0.75rem; line-height: 1.7; color: var(--color-ink); } #index-view .center { text-align: center; } #index-view .mt-s { margin-top: 16px; } #index-view .mt-m { margin-top: 24px; } #index-view .mt-l { margin-top: 40px; } #index-view .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 32px; border-radius: var(--radius-btn); font-size: 0.9375rem; letter-spacing: 0.08em; font-weight: 500; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); } #index-view .btn--primary { background: var(--color-rose-deep); color: var(--color-white); } #index-view .btn--primary:hover { background: var(--color-ink); transform: scale(1.02); } #index-view .btn--secondary { border: 1px solid var(--color-ink); color: var(--color-ink); } #index-view .btn--secondary:hover { background: var(--color-ink); color: var(--color-white); } #index-view .btn--ghost-light { border: 1px solid var(--color-white); color: var(--color-white); } #index-view .btn--ghost-light:hover { background: var(--color-white); color: var(--color-ink); } /* theme.css の `.btn:focus { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }`(Bootstrap由来)が、クリック後にボタンの内側へ青い線を 描いてしまう(2026-08-25ユーザー指摘)。マウス操作では消し、キーボード操作 (:focus-visible)のときだけ、デザインに合う控えめなリングを出す。 */ #index-view .btn:focus { outline: none; } #index-view .btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } #index-view .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; border-bottom: 1px solid var(--color-line); padding-bottom: 4px; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); } #index-view .link-arrow::after { content: ""; width: 18px; height: 1px; background: currentColor; } #index-view .link-arrow:hover { border-color: var(--color-rose-deep); color: var(--color-rose-deep); } #index-view .section--ink .link-arrow { border-color: rgba(255,255,255,.3); } #index-view .section--ink .link-arrow:hover { color: var(--color-rose-light); border-color: var(--color-rose-light); } #index-view .reveal { opacity: 0; transform: translateY(8px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } #index-view .reveal.is-in { opacity: 1; transform: none; } #index-view .reveal-d1 { transition-delay: .08s; } #index-view .reveal-d2 { transition-delay: .16s; } @media (prefers-reduced-motion: reduce) { #index-view .reveal { opacity: 1; transform: none; transition: none; } } /* --- hero --- */ #index-view .hero { position: relative; height: 70vh; min-height: 480px; max-height: 780px; overflow: hidden; background: var(--color-ink); } #index-view .hero__slides { height: 100%; } /* 【重要】スライドは全枚数が重ねて置かれており、表示していない分も opacity:0 で その場に残る。pointer-eventsを切らないと、いちばん手前(=DOM最後)のスライドの ボタンが透明なまま全面を覆い、どのスライドのボタンを押しても最後のスライドの リンクに飛んでしまう(2026-08-25、Pitsole/Plusのボタンから常にRoom Shoesの 絞り込みに遷移する不具合として発覚)。 */ #index-view .hero__slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 1s var(--ease); display: grid; place-items: center; } #index-view .hero__slide.is-active { opacity: 1; pointer-events: auto; } #index-view .hero__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* スライドごとに「画像のどこを残すか」を管理画面から選べるようにする (2026-08-26ユーザー指示)。セクション設定の slide_N_focus(ラジオ)の値が hero.liquid で のクラスになる。 【なぜ必要か】 ヒーローの高さは 70vh(480〜780px)。横幅いっぱいに対して比率がおよそ 2.3〜2.6:1 になるのに対し、素材が16:9(1.78:1)だと縦が2〜3割あまり、 object-fit: cover が上下を均等に切り落とす。既定の中央では上から約15%が 消え、人物の頭が入らないことがあった。 object-position で変えられるのは「どこを残すか」だけで、「切り取り量」は 減らせない。上を残せばその分だけ下が多く切れる。切り取りそのものを 無くしたい場合は、PC用画像を2.4:1前後(例 2400x1000)で用意すること。 【SPは対象外】 で1つのをPC/SPで共有しているため、クラスはSPの画像にも 付く。SPは別素材で縦長の構図を想定しているので、768px以上にだけ効かせて SPは既定の中央のままにする。 【詳細度】上の `#index-view .hero__slide img`(1,1,1)に勝たせるため、 セレクタは img まで書いて (1,2,1) にすること。クラスだけだと負ける。 */ @media (min-width: 768px) { #index-view .hero__slide img.hero__img--focus-top { object-position: center 0%; } #index-view .hero__slide img.hero__img--focus-upper { object-position: center 20%; } #index-view .hero__slide img.hero__img--focus-center { object-position: center 50%; } #index-view .hero__slide img.hero__img--focus-lower { object-position: center 80%; } #index-view .hero__slide img.hero__img--focus-bottom { object-position: center 100%; } } #index-view .hero__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(59,43,43,.42) 0%, rgba(59,43,43,.18) 45%, rgba(59,43,43,.55) 100%); } /* 見出しはPC・SPとも1行に収める設計。幅は720pxでは足りないので940pxまで広げ、 左右は --gutter 分だけ必ず空ける(width:100%で画面幅いっぱいまで使う)。 */ #index-view .hero__caption { position: relative; z-index: 2; color: var(--color-white); text-align: center; padding-inline: var(--gutter); max-width: 940px; width: 100%; } /* SPだけで改行させたいときの共通クラス。 セクション設定のテキストに [br] と書くと、各セクションのliquidが
に置換する(FV・proposition・series_intro・about_bannerで使用)。 PC(768px以上)では display:none にして改行させない。 有効化する指定は下の @media (max-width: 767px) 側にある。 sp-br は同じ意味の別名。お知らせ・JOURNALのタイトルは管理画面で入力した 文字列がそのままTOPのカードにも出るため、記事本文と同じ書き方 (
)が混ざる。#index-view には .c-pitsole-theme が付いて いないので、ここで別名も定義しておかないとPCでも改行してしまう (2026-08-26、JOURNAL記事のタイトルにsp-brを入れた際に判明)。 */ #index-view .br--sp, #index-view .sp-br { display: none; } /* PC(768px以上)は全4枚を1行に収める。基準は最長の「はじめの一歩を、ここから。」 (13文字・字間0.14em)で、必要な幅は 13 × フォントサイズ × 1.14。 使える幅は キャプション幅(最大940px) - 左右の--gutter なので5.8vwが上限 (768pxで44.5px < 収まる上限47.5px)。広い画面では3.5remで頭打ち。 */ #index-view .hero__title { font-family: var(--font-serif-jp); font-size: clamp(1.125rem, 5.8vw, 3.5rem); letter-spacing: 0.14em; font-weight: 500; line-height: 1.4; margin: 0; } #index-view .hero__sub { margin-top: 20px; font-size: var(--fs-body); letter-spacing: 0.06em; line-height: 1.9; } /* 【重要】SP用の上書きは、上の基本指定より必ず後ろに書くこと。 メディアクエリは詳細度を上げないため、前に書くと後ろの基本指定に負けて効かない (2026-08-25、SPの見出しサイズが変わらない不具合の原因がこれだった)。 */ @media (max-width: 767px) { #index-view .br--sp, #index-view .sp-br { display: inline; } /* SPの見出しサイズ。最長の「家の中でも、整う時間」(10文字)を1行に収める必要があり、 必要な幅は 10 × フォントサイズ × 1.14 = 11.4em。7.2vwなら 82.1vw で、 左右の余白(--gutter = 20px)を引いた幅に収まる (320px幅: 文字263px < 使える幅280px、375px幅: 308px < 335px)。 これより長い「はじめの一歩を、ここから」(12文字)は収まらないため、 テキスト側の [br] で「、」の後ろに改行を入れている。 */ #index-view .hero__title { font-size: clamp(1.125rem, 7.2vw, 3.5rem); } /* 「毎日の歩き方を見つめ直す、スタンダードモデル。」(23文字)が 375px幅で1行に収まるサイズ。字間0.06emぶんを含めて約317px。 */ #index-view .hero__sub { font-size: 0.8125rem; } } #index-view .hero__cta { margin-top: 32px; } #index-view .hero__controls { position: absolute; left: 0; right: 0; bottom: 28px; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 16px; } #index-view .hero__dots { display: flex; gap: 10px; } #index-view .hero__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.45); border: 0; padding: 0; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); } #index-view .hero__dot.is-active { background: var(--color-white); transform: scale(1.3); } #index-view .hero__arrow, #index-view .hero__pause { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); color: var(--color-white); background: transparent; display: inline-flex; align-items: center; justify-content: center; } #index-view .hero__arrow:hover, #index-view .hero__pause:hover { background: rgba(255,255,255,.18); } /* 一時停止/再生アイコン(pitsole-siteの .hero__pause svg と同じ) */ #index-view .hero__pause svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.4; } /* --- proposition --- */ #index-view .proposition { text-align: center; } #index-view .proposition__text { font-family: var(--font-serif-jp); font-size: clamp(1.25rem, 4.6vw, 2rem); letter-spacing: 0.14em; line-height: 2; } /* --- series_intro --- */ #index-view .lp-two { display: grid; gap: 32px; align-items: center; } @media (min-width: 768px) { #index-view .lp-two { grid-template-columns: 1fr 1fr; gap: 56px; } } #index-view .lp-two img { border-radius: var(--radius-card); width: 100%; } /* --- reasons --- */ #index-view .feature-3 { display: grid; gap: 40px; } @media (min-width: 768px) { #index-view .feature-3 { grid-template-columns: repeat(3, 1fr); gap: 32px; } } /* ================================================================== 【暫定対応 / 必ず元に戻す】2026-08-28 特徴02・03を出さず01だけを中央に置くための指定。 reasons.liquid の show_reason_features_2_3 が false のときだけ .feature-3--single が付く。true に戻せばこのクラス自体が出なくなるので、 このブロックは消さなくても害は無い(残しておけば次に隠すとき再利用できる)。 1カラムなので上の repeat(3, 1fr) を打ち消す必要がある。 メディアクエリの中の指定に勝たせるため、こちらも同じ768px以上で書く。 ================================================================== */ /* max-width は 600px(2026-08-28)。560px → 一度800pxまで広げたが、 ユーザーが実物で確認して600pxに決めた。 */ #index-view .feature-3--single { max-width: 600px; margin-inline: auto; text-align: center; } @media (min-width: 768px) { #index-view .feature-3--single { grid-template-columns: 1fr; } } #index-view .feature__num { font-family: var(--font-serif); font-size: 2.5rem; color: var(--color-rose); line-height: 1; } #index-view .feature__title { margin-top: 12px; font-family: var(--font-serif-jp); font-size: var(--fs-h3); } #index-view .feature__body { margin-top: 12px; color: var(--color-gray); font-size: var(--fs-caption); line-height: 1.9; } #index-view .feature__fig { margin-top: 20px; border-radius: var(--radius-card); overflow: hidden; } /* ---- 「選ばれている理由」03の数値エリア(2026-08-28、支給デザインに合わせて作り替え) 支給デザインは数値を「細い線の円」で囲み、円の中を 数字+％ / 区切り線 / ラベル の縦積みにしたもの。 デザインにあった円のツヤ(光沢のハイライト)と、円の上端に乗るアイコンの 白バッジは、どちらも「いらない」との指示で入れていない(2026-08-28)。 03の番号・タイトル・注釈は他の枠と共通のスタイルのまま。 【文字サイズは円の直径に追従させる(コンテナクエリ)】 円の直径は「.feature-3 の1列ぶん」から決まるので、画面幅(vw)とは比例しない。 ブレークポイントごとにpxで書き分けると、同じタブレットの中でも 768pxと1023pxで直径が96px→138pxと1.4倍変わるため必ずどちらかで破綻する。 .stat 自身をコンテナにして cqi(コンテナ幅の1%)で指定すれば、直径が いくつでも中身の比率が保たれる。cqiを解釈しないブラウザ向けに、 直前の行に px/rem の値を残してフォールバックにしている。 */ /* 【gridではなくflexにしている理由】 2列のgridに justify-items: center を掛けると、円は「半分の列の中央」に 置かれるため、円が上限(140px)に達しているPCでは列の余りぶんだけ左右に 離れ、gapを詰めても間隔が縮まなかった(2026-08-28「離れすぎ」の指摘)。 flex + justify-content: center なら円同士が隣り合い、gapの値がそのまま 見た目の間隔になる。列幅が足りないタブレットでは flex-shrink で縮む。 */ #index-view .stat-grid { display: flex; justify-content: center; gap: 12px; text-align: center; } /* max-width が円の直径の上限。2026-08-28「円をもう少し小さく」との指示で 140pxにしている(それまではPCで約179px、SPで約157px)。 タブレットは列幅が足りず上限に届かないので、実際は96〜138pxになる。 */ #index-view .stat { container-type: inline-size; position: relative; flex: 0 1 140px; min-width: 0; aspect-ratio: 1 / 1; border: 1px solid var(--color-rose-light); border-radius: 50%; display: grid; align-content: center; justify-items: center; padding: 6%; } #index-view .stat__num { font-family: var(--font-serif); font-size: 2.75rem; font-size: 40cqi; color: var(--color-rose-deep); line-height: 1; letter-spacing: 0.02em; } /* ％だけ小さく。数字のベースラインに合わせたいので下寄せにする。 */ #index-view .stat__unit { font-size: 0.44em; margin-left: 0.1em; vertical-align: baseline; } /* ラベル。2026-08-28「注釈より小さく見えるのでもう少し大きく」との指示で var(--fs-caption)(13px)から一段上げた。明朝は同じpx数でもゴシックより 小さく見えるため、注釈(ゴシック13px)と並べたときに負けていた。 下限は13px。10cqiだけだと円が小さいタブレットで11pxまで落ちて 小さすぎたため引き上げた(2026-08-28)。 */ #index-view .stat__label { font-family: var(--font-serif-jp); font-size: var(--fs-body); font-size: max(13px, 10cqi); color: var(--color-ink); margin-top: 0; line-height: 1.5; } /* ラベルの上の区切り線。デザインでは円の幅の4割ほどの短い線。 */ #index-view .stat__label::before { content: ""; display: block; width: 40%; height: 1px; margin: 8% auto; background: var(--color-rose-light); } /* 注記文の2行目。1行目と同じスタイルで、行間ぶんだけ空ける。 */ #index-view .disclaimer--next { margin-top: 6px; } /* --- ranking --- */ #index-view .tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 32px; } #index-view .tab { padding: 9px 22px; border-radius: var(--radius-btn); border: 1px solid var(--color-line); background: var(--color-white); font-size: var(--fs-caption); letter-spacing: 0.08em; } #index-view .tab.is-active { background: var(--color-ink); color: var(--color-white); border-color: var(--color-ink); } #index-view .rank-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 14px; } @media (min-width: 1024px) { #index-view .rank-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } } #index-view .rank-no { font-family: var(--font-serif); font-size: 2.25rem; line-height: 1; color: var(--color-rose-deep); margin-bottom: 8px; display: block; } /* --- voices --- */ #index-view .voice-scroller { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 16px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } #index-view .voice-card { flex: 0 0 min(300px, 78vw); scroll-snap-align: start; background: var(--color-white); border-radius: var(--radius-card); padding: 24px; border: 1px solid var(--color-line); display: flex; flex-direction: column; gap: 10px; } #index-view .voice-card__meta { font-size: var(--fs-caption); color: var(--color-gray); } #index-view .voice-card__text { font-size: 0.9375rem; line-height: 1.9; } /* --- howto --- */ #index-view .howto-3 { display: grid; gap: 32px; } @media (min-width: 768px) { #index-view .howto-3 { grid-template-columns: repeat(3, 1fr); } } #index-view .howto__step img { border-radius: var(--radius-card); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } #index-view .howto__label { margin-top: 16px; display: flex; align-items: baseline; gap: 10px; } #index-view .howto__no { font-family: var(--font-serif); color: var(--color-rose-deep); font-size: 1.25rem; } #index-view .howto__title { font-family: var(--font-serif-jp); font-size: var(--fs-h3); } #index-view .howto__body { margin-top: 8px; font-size: var(--fs-caption); color: var(--color-gray); line-height: 1.9; } /* --- about_banner --- */ #index-view .about-banner { position: relative; overflow: hidden; } #index-view .about-banner__inner { position: relative; z-index: 2; text-align: center; max-width: 720px; margin-inline: auto; } #index-view .about-banner__text { font-family: var(--font-serif-jp); font-size: clamp(1.0625rem, 3.4vw, 1.375rem); line-height: 2.2; letter-spacing: 0.1em; } /* --- instagram grid (既存 image_slider セクションの表示をグリッド化) --- */ #index-view .p-carousel_slider { overflow: visible; } #index-view .p-carousel_slider__track { overflow: visible; } #index-view .p-carousel_slider__track__list { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px; transform: none !important; width: 100%; } @media (min-width: 768px) { #index-view .p-carousel_slider__track__list { grid-template-columns: repeat(6, 1fr); } } #index-view .p-carousel_slider__track__list__item { width: auto !important; } #index-view .p-carousel_slider__track__list__item__inner { aspect-ratio: 1 / 1; padding-top: 0; transform: scale(1); background-size: cover; border-radius: 4px; } #index-view .p-carousel_slider__nav { display: none; } /* --- category_panel(シリーズカード)の新デザイン上書き --- */ #index-view .p-category_panel__container--flex .p-category_panel__content { display: grid; gap: 24px; } @media (min-width: 768px) { #index-view .p-category_panel__container--flex .p-category_panel__content { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { #index-view .p-category_panel__container--flex .p-category_panel__content { grid-template-columns: repeat(4, 1fr); gap: 20px; } } /* 表示件数(カスタマイズの「表示するカテゴリー数」= category_size)に列数を合わせる。 4列固定のままだと、3件のときに左寄せで右端が1枠空いて見える(2026-08-25ユーザー指摘)。 セクション側が各カードに .p-category_panel__block--<件数> を出しているので、 :has()でそれを拾って列数を決める。カード幅は行いっぱいに広がるため、 件数が変わっても常に左右のバランスが取れる。 */ @media (min-width: 768px) { #index-view .p-category_panel__container--flex .p-category_panel__content:has(.p-category_panel__block--3) { grid-template-columns: repeat(3, 1fr); } #index-view .p-category_panel__container--flex .p-category_panel__content:has(.p-category_panel__block--1) { grid-template-columns: minmax(0, 400px); justify-content: center; } } #index-view .p-category_panel__block { background: var(--color-white); border-radius: var(--radius-card); overflow: hidden; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } #index-view .p-category_panel__block:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); } #index-view .p-category_panel__image img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform var(--dur) var(--ease); } #index-view .p-category_panel__block:hover .p-category_panel__image img { transform: scale(1.03); } #index-view .p-category_panel__info { padding: 20px 20px 24px; } #index-view .p-category_panel__category { font-family: var(--font-serif); font-size: 1.125rem; letter-spacing: 0.1em; padding: 0; } /* キャッチコピー(説明欄の1行目)。pitsole-siteの .series-card__copy と同じ指定。 */ #index-view .p-category_panel__copy { margin-top: 8px; padding: 0; font-family: var(--font-serif-jp); font-size: 0.9375rem; letter-spacing: 0.06em; color: var(--color-ink); line-height: 1.7; } #index-view .p-category_panel__desc { margin-top: 10px; padding: 0; font-size: var(--fs-caption); color: var(--color-gray); line-height: 1.8; min-height: 3.4em; } #index-view .p-category_panel__btn.link-arrow { margin: 16px 0 0; display: inline-flex; width: auto; max-width: none; height: auto; } /* LINE UPのカードは全面をクリックできるようにする(2026-08-31ユーザー指示)。 セクションのHTMLには元から全面リンク用の空の が 入っているが、bundle.css 7162行目の .p-category_panel__container--flex .p-category_panel__link { display: none } によって flex モードでは消えている(grid モードでは 7304行目で grid-row/column 1/-1 の全面リンクとして使われている)。 新しく要素を足すのではなく、この標準の仕組みを flex モードでも復帰させる。 遷移先は「商品を見る」と同じ panel_products_url。 ・.link-arrow はこのオーバーレイに覆われて自身の :hover が効かなくなるため、 カード側の :hover から色を当て直す。結果としてカードのどこにカーソルを乗せても 矢印が反応するようになり、カード全体が押せることが見た目でも分かる。 ・オーバーレイはテキストを持たない空リンクなので、読み上げとタブ移動からは外す (Liquid側で flex モードのときだけ aria-hidden="true" tabindex="-1" を付与)。 キーボード・スクリーンリーダー向けの本来のリンクは「商品を見る」の方。 */ #index-view .p-category_panel__container--flex .p-category_panel__block { position: relative; } #index-view .p-category_panel__container--flex .p-category_panel__link { display: block; position: absolute; inset: 0; z-index: 1; } #index-view .p-category_panel__block:hover .p-category_panel__btn.link-arrow { border-color: var(--color-rose-deep); color: var(--color-rose-deep); } /* category_panel(LINE UP)の見出しは元々「head=大見出し・subhead=小見出し」という ecforce標準の役割で作られているが、新デザインでは他の全セクションと同じく 「小さい英字ラベル(sec-label相当) → 大きい日本語タイトル(sec-title相当)」という 逆の役割で使っている。theme_customize.cssのu-text--head/--subhead(共に!important)が font-sizeを強制する(head=24px, subhead=16px)ため、役割に合わせてサイズを付け替える。 */ #index-view .p-category_panel__title__en { font-family: var(--font-serif) !important; color: var(--color-rose-deep) !important; font-size: 0.8125rem !important; letter-spacing: 0.22em !important; text-transform: uppercase; display: block; margin-bottom: 10px; } #index-view .p-category_panel__title__jp { font-family: var(--font-serif-jp) !important; color: var(--color-ink) !important; font-size: var(--fs-h2) !important; letter-spacing: 0.06em !important; line-height: 1.6; } #index-view .p-category_panel__title .sec-lead { text-align: center; margin-inline: auto; } /* --- information(JOURNAL / NEWS)の新デザイン上書き --- */ #index-view .p-column__inner__list, #index-view .p-news__inner__list { } #index-view .p-column__inner__list { display: grid; gap: 28px; } @media (min-width: 768px) { #index-view .p-column__inner__list { grid-template-columns: repeat(3, 1fr); } } #index-view .c-column_item__inner__img { aspect-ratio: 3 / 2; border-radius: var(--radius-card); } /* information(JOURNAL): 記事カード自体(タイトル・日付・「詳しく見る」)がu-text--subhead/u-text--body/ u-text--link(theme_customize.css、全て!important)でグレー系游ゴシックに強制されたまま、 セクション見出し以外は一切新デザインに合わせていなかったため、まとめて上書きする。 */ #index-view .c-column_item__inner { display: flex; flex-direction: column; overflow: hidden; } #index-view .c-column_item__inner:hover { opacity: 1; } #index-view .c-column_item__inner:hover .c-column_item__inner__img { transform: scale(1.03); } #index-view .c-column_item__inner:hover .c-column_item__inner__title { color: var(--color-rose-deep) !important; } #index-view .c-column_item__inner__img { order: 0; transition: transform var(--dur) var(--ease); } #index-view .c-column_item__inner__date { order: 1; font-family: var(--font-sans) !important; font-size: var(--fs-caption) !important; color: var(--color-gray) !important; margin-top: 14px !important; } #index-view .c-column_item__inner__title { order: 2; font-family: var(--font-serif-jp) !important; font-size: 1.0625rem !important; color: var(--color-ink) !important; line-height: 1.7; margin-top: 8px !important; transition: color var(--dur) var(--ease); } #index-view .c-column_item__inner__more { display: none; } #index-view .c-news_item { border-bottom: 1px solid var(--color-line); } #index-view .c-news_item__inner { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; } @media (min-width: 768px) { #index-view .c-news_item__inner { flex-direction: row; align-items: baseline; gap: 24px; } } #index-view .c-news_item__inner__date { font-family: var(--font-serif); font-size: var(--fs-caption); color: var(--color-gray); min-width: 96px; } /* --- new_product(おすすめ商品カルーセル)の色味だけ新ブランドに寄せる --- */ #index-view .p-new_product__more__btn { background: var(--color-ink) !important; } /* --- bundle.css / theme_customize.css との競合解消 --- Task10と同様、クラス名が既存スタイルと衝突し「上書きされず加算/共存」してしまうケースがあるため、 目視確認の上で個別にリセット・!important指定を追加する。 */ /* category_panel: flexモードは本来「画像に文字をオーバーレイするバナー型」のレイアウトで、 .p-category_panel__block が display:grid + 全子要素 grid-area:1/-1 で重ね書きされ、 高さ固定(500px)・category_size別の%幅・::beforeの暗幕グラデーションが入っている。 新デザインは「画像→カテゴリ名→ボタン」を縦に積む通常カードのため、これらを明示的にリセットする。 */ #index-view .p-category_panel__container--flex .p-category_panel__block { display: block; width: 100%; height: auto; } #index-view .p-category_panel__container--flex .p-category_panel__block::before { content: none; } #index-view .p-category_panel__container--flex .p-category_panel__info { width: 100%; margin: 0; display: block; } /* category_panel: h2に付与される u-text--subhead--overlay(theme_customize.css, 全プロパティ!important)が 白文字(#FFFFFF)・旧フォントを強制し、上のカード化(背景白)によって白文字が読めなくなるため、 !important で確実に上書きする。 */ #index-view .p-category_panel__category { color: var(--color-ink) !important; font-family: var(--font-serif) !important; } /* category_panel: .p-category_panel__image は `@supports not (aspect-ratio: hoge)` という 常に真になる無効な条件式のせいで、疑似アスペクト比ハック(::beforeのpadding-top:100% + imgの position:absolute四辺0)が常時適用されてしまい、img自身の aspect-ratio:4/3 が完全に無視されて 正方形(1:1)表示になっている(Task10のカルーセルと同種のpadding-topハック二重加算問題)。 ::beforeを無効化し、imgの位置指定を通常フローに戻すことで、意図通り4:3で描画されるようにする。 */ #index-view .p-category_panel__image::before { content: none; } #index-view .p-category_panel__image img { position: static; } /* new_product: 見出しも他セクションと全く同じ理由(head=大見出し・subhead=小見出し、という ecforce標準の役割が新デザインでは逆になっている)でサイズを入れ替える。 */ #index-view .p-new_product__title__en { font-family: var(--font-serif) !important; color: var(--color-rose-deep) !important; font-size: 0.8125rem !important; letter-spacing: 0.22em !important; text-transform: uppercase; margin-bottom: 10px !important; } #index-view .p-new_product__title__jp { font-family: var(--font-serif-jp) !important; color: var(--color-ink) !important; font-size: var(--fs-h2) !important; letter-spacing: 0.06em !important; line-height: 1.6; } /* information(JOURNAL・NEWS)の見出しも、category_panel(LINE UP)と全く同じ理由で 「head=大見出し・subhead=小見出し」というecforce標準の役割が新デザインでは逆 (小さい英字ラベル→大きい日本語タイトル)になっているため、サイズを入れ替える。 */ #index-view .p-column__inner__title__en, #index-view .p-news__inner__title__en { font-family: var(--font-serif) !important; color: var(--color-rose-deep) !important; font-size: 0.8125rem !important; letter-spacing: 0.22em !important; text-transform: uppercase; margin-bottom: 10px !important; } #index-view .p-column__inner__title__jp, #index-view .p-news__inner__title__jp { font-family: var(--font-serif-jp) !important; color: var(--color-ink) !important; font-size: var(--fs-h2) !important; letter-spacing: 0.06em !important; line-height: 1.6; } /* information(JOURNAL): 「もっと見る」ボタンがu-color__btn--bg/u-text--btn(theme_customize.css、 全て!important)で紺色の全幅ブロックボタンに強制されていたため、他セクションのbtn--secondaryと 同じピル型アウトラインボタンに上書きする。中央揃えは親要素側でtext-alignを明示して確実にする (inline-flex化した要素はmargin:0 autoでは中央揃えにならないため)。 NEWSの「もっと見る」はpitsole-site参照通りlink-arrowクラスに変更済みのため対象外。 */ #index-view .p-column__inner__more, #index-view .p-news__inner__more { text-align: center; } #index-view .p-column__inner__more__btn { display: inline-flex; width: auto; max-width: none; height: auto; min-height: 52px; padding: 14px 32px; border-radius: var(--radius-btn); border: 1px solid var(--color-ink); background: transparent !important; color: var(--color-ink) !important; font-family: var(--font-sans) !important; font-size: 0.9375rem !important; letter-spacing: 0.08em; } #index-view .p-column__inner__more__btn:hover { opacity: 1; background: var(--color-ink) !important; color: var(--color-white) !important; } /* information(NEWS): time要素に付与される u-text--subhead(theme_customize.css, !important)が 色/フォント/サイズを強制し、通常指定では上書きされないため !important で確定する。 */ #index-view .c-news_item__inner__date { font-family: var(--font-serif) !important; font-size: var(--fs-caption) !important; color: var(--color-gray) !important; } /* information(NEWS): articleに付与される u-color__border--border(theme_customize.css)が border-color を !important で強制するため、border-bottomの色も !important で確定する。 */ #index-view .c-news_item { border-bottom-color: var(--color-line) !important; } /* information(JOURNAL): 画像divの旧レイアウトは padding-top:66.6666666667%(高さ確保の疑似アスペクト比ハック)を 使っており、aspect-ratioと共存すると高さが二重に加算されてしまう(Task10のカルーセルと同種の問題)ため、 padding-topを明示的に無効化する。 */ #index-view .c-column_item__inner__img { padding-top: 0; } /* information(JOURNAL): liに付与される medium-up--one-N(記事表示件数ごとの%幅+margin指定)が CSS Grid化後も個別の幅・余白として残ってしまい、gridセルとズレるためリセットする。 */ #index-view .p-column__inner__list__item { width: auto; margin: 0; } /* ============================================================ ここから商品詳細ページ(products_show_content.liquid、.c-pitsole-theme スコープ)用のスタイル。2026-08-18、ecforceのテーマ管理には登録可能な カスタムCSSファイル数(または合計サイズ)に上限があると判明したため、 商品詳細ページ専用に別ファイルを作らず、このファイル1本に統合する。 ============================================================ */ /* * Pitsole商品ページ専用デザイン(前担当者作成)。 * `.c-pitsole-theme` でスコープを切っており、他ブランド(YORUMO/Oigrut/Quette等)の * 商品ページには影響しない。付与先は products_index_content.liquid / * products_show_content.liquid が出力するセクションの最外郭要素のみとする。 * 配色・フォントの実測値の出典: Netlifyデザインモック * (https://preeminent-haupia-b0c000.netlify.app/) のcomputed styleを2026-08-06に * Playwrightで直接取得した値。 */ .c-pitsole-theme { --pitsole-color-bg: #faf7f4; --pitsole-color-text: #3b2b2b; --pitsole-color-accent-bg: #3b2b2b; --pitsole-font-heading: "Cormorant Garamond", "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif; --pitsole-font-body: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif; background-color: var(--pitsole-color-bg); color: var(--pitsole-color-text); font-family: var(--pitsole-font-body); } .c-pitsole-theme h1, .c-pitsole-theme h2, .c-pitsole-theme h3 { font-family: var(--pitsole-font-heading); color: var(--pitsole-color-text); } /* 商品一覧カード */ .c-pitsole-theme .c-product_item { background-color: var(--pitsole-color-bg); border: none; } .c-pitsole-theme .c-product_item__inner__title { font-family: var(--pitsole-font-heading); color: var(--pitsole-color-text); } /* カート/お気に入りボタン。全体テーマ色(u-color__btn--bg/u-color__btn--text、 管理画面の色設定がインラインstyleに近い強さで効いていると見られ、通常の 詳細度では上書きできなかったため!importantで明示的に上書きする)を pitsole-siteのtool-btn(白丸+アイコンはink色)に合わせる */ .c-pitsole-theme .c-product_item__button--cart, .c-pitsole-theme .c-product_item__button--favorite { background-color: var(--color-white) !important; color: var(--color-ink) !important; box-shadow: 0 1px 4px rgba(59, 43, 43, 0.16); } .c-pitsole-theme .c-product_item__button--cart:hover, .c-pitsole-theme .c-product_item__button--favorite:hover { background-color: var(--color-rose-light) !important; } .c-pitsole-product_item__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .c-pitsole-product_item__tag { font-family: var(--pitsole-font-body); font-size: 12px; padding: 2px 10px; border: 1px solid var(--pitsole-color-text); border-radius: 999px; color: var(--pitsole-color-text); } /* CATEGORY/CONCERNフィルタボタン */ .c-pitsole-theme .js-category-filter-btn { font-family: var(--pitsole-font-body); border-radius: 999px; border: 1px solid var(--pitsole-color-text); background: var(--pitsole-color-bg); color: var(--pitsole-color-text); padding: 6px 18px; } .c-pitsole-theme .js-category-filter-btn.is-active { background: var(--color-ink); border-color: var(--color-ink); color: #fff; } .c-pitsole-theme .js-tag-filter-btn { font-family: var(--pitsole-font-body); border-radius: 999px; border: 1px solid var(--pitsole-color-text); background: var(--pitsole-color-bg); color: var(--pitsole-color-text); padding: 4px 14px; font-size: 13px; } .c-pitsole-theme .js-tag-filter-btn.is-active { background: var(--color-ink); border-color: var(--color-ink); color: #fff; } /* ============================================================ 商品一覧ページ(products_index_content.liquid)ヒーロー・フィルターバー 2026-08-20追加。pitsole-site/products/index.html相当。 ============================================================ */ /* 注意: 100vw+負のmarginによる画面幅いっぱい化は、縦スクロールバー分だけ 100vwが実際の表示幅より広くなり、中身が右にずれて見切れるバグを踏んだため 採用しない。代わりに、.p-product_list(セクション本体)自体の左右padding (40px、SP時15px、bundle.css実測値)と正反対の値のmarginで打ち消し、背景を 画面幅いっぱいに広げる(vw単位を使わないのでスクロールバー分のズレが出ない)。 中身(.p-products_hero__inner等)は.containerクラスで元通り1200px幅に戻す。 */ .c-pitsole-theme .p-products_hero, .c-pitsole-theme .p-products_filter_bar { margin-inline: -40px; } /* SPの全幅化。打ち消す相手は .p-product_list の左右padding で、 2026-08-28にそれを 15px から var(--gutter)(28px)へ広げたため、 ここも同じ値に連動させる。固定の -15px のままだと画面の端まで届かず、 帯の左右に細い隙間が残る。 */ @media screen and (max-width: 719px) { .c-pitsole-theme .p-products_hero, .c-pitsole-theme .p-products_filter_bar { margin-inline: calc(var(--gutter) * -1); } } .c-pitsole-theme .p-zero-result { max-width: 1200px; width: 100%; margin: 0 auto; } .c-pitsole-theme .p-products_hero { background: var(--color-cream-deep); padding: 32px 0 40px; } .c-pitsole-theme .p-products_hero .c-breadcrumbs { margin: 0 0 20px; padding: 0; } .c-pitsole-theme .p-products_hero__title { display: block; margin-top: 6px; } .c-pitsole-theme .p-products_filter_bar { padding-top: 24px; padding-bottom: 24px; background: var(--color-cream); border-bottom: 1px solid var(--color-line); position: sticky; top: 70px; z-index: 90; } @media screen and (max-width: 719px) { .c-pitsole-theme .p-products_filter_bar { position: static; top: auto; } } .c-pitsole-theme .p-products_filter_bar__inner { display: flex; flex-direction: column; gap: 20px; } .c-pitsole-theme .p-products_filter_bar__group--sort { display: flex; align-items: center; justify-content: flex-end; } .c-pitsole-theme .filter-label { font-family: var(--font-serif); font-size: 11px; letter-spacing: 0.14em; color: var(--color-gray); margin-bottom: 8px; display: block; } .c-pitsole-theme .filter-hint { margin-left: 10px; font-family: var(--font-sans); font-size: 11px; color: var(--color-gray); } .c-pitsole-theme .c-product_filter__category, .c-pitsole-theme .c-product_filter__tag { display: flex; flex-wrap: wrap; gap: 8px; } .c-pitsole-theme .p-zero-result { text-align: center; padding-block: 48px; } .c-pitsole-theme .js-filter-reset { margin-top: 12px; font-family: var(--font-sans); font-size: var(--fs-caption); color: var(--color-rose-deep); text-decoration: underline; background: none; border: none; cursor: pointer; } .c-pitsole-theme .c-list_tool { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } /* SPの並び替え行(2026-08-28ユーザー指摘)。3つを1行に収め、左端を上のCATEGORYに揃える。 .c-list_tool の子は 件数 / 「並び替え：」 / セレクト の3つ。元は 55px + 70px + 160px + gap32px ≒ 317px で、ゲッター28pxを引いた375px端末の 内側319pxにぎりぎり収まらず、セレクトだけが次の行へ落ちていた。 さらに bundle.css が719px以下で justify-content: space-between を掛けるため、 1行目に残った件数と「並び替え：」が左右に大きく離れて見えていた。 【1行に収める】 固定の160px(bundle.css)をやめ、セレクトを flex: 0 1 150px + min-width: 110px の 伸縮する箱にする。375px端末では150pxのまま収まり、320px端末では110pxまで 縮んで溢れない。gapも12→6pxに詰めた。 件数に margin-right: auto を付けて、件数=左端 / 並び替え=右端に振り分ける。 nowrap にしているのは、少しでも足りないと3つ目が落ちる挙動を止めるため。 【左端をCATEGORYに揃える】 親の .p-products_filter_bar__group--sort は justify-content: flex-end なので、 .c-list_tool の幅が中身なりだと右に寄り、左に余白が空く。width: 100% にして 上のCATEGORY/CONCERNの行と同じ幅を持たせ、左端をぴったり合わせる。 */ @media (max-width: 719px) { .c-pitsole-theme .c-list_tool { width: 100%; flex-wrap: nowrap; justify-content: flex-start; gap: 6px; } .c-pitsole-theme .c-list_tool__num { margin-right: auto; white-space: nowrap; } .c-pitsole-theme .c-list_tool__sort__label { margin-right: 0; white-space: nowrap; } .c-pitsole-theme .c-list_tool__sort__wrap { width: auto; flex: 0 1 150px; min-width: 110px; } } .c-pitsole-theme .c-list_tool__sort__wrap__select { border: 1px solid var(--color-line); background: var(--color-white, #fff); border-radius: var(--radius-btn); padding: 9px 16px; font-size: var(--fs-caption); font-family: var(--font-sans); } /* シリーズ見出し。pitsole-siteは .series-heading { margin-block: 48px 20px; padding-top: 8px; } .card-grid + .series-heading { margin-top: 56px; } で「2つ目以降の見出しの上を大きく空ける」形にしている。 テーマ側は当初 .series-heading:first-of-type で1つ目だけ詰めていたが、 各見出しは .js-category-group の中に1つずつ入っているため、 :first-of-type が**すべての見出しに一致**してしまい、どの見出しも margin-top:8px になっていた(2026-08-25、商品タイトルの上に余白が無いという 指摘の原因)。隣接セレクタで「前にグループがある見出し」だけを狙う形に変更。 1つ目の見出しの上は --sec-pad(SP 64px / 768px以上 96px / 1024px以上 120px)。 pitsole-siteは商品一覧の結果エリアを
で包んでいて、そのsectionのpadding-block(= --sec-pad)が1つ目の見出しの上の 余白になっている。テーマ側はこのsectionに相当する枠が無いため、見出しの margin-topで同じ間隔を作っている。 */ .c-pitsole-theme .series-heading { max-width: 1200px; width: 100%; margin: var(--sec-pad) auto 20px; padding-top: 8px; } .c-pitsole-theme .js-category-group + .js-category-group .series-heading { margin-top: 56px; } .c-pitsole-theme .series-heading h2 { font-family: var(--font-serif); font-size: 1.375rem; letter-spacing: 0.14em; } .c-pitsole-theme .series-heading p { margin-top: 6px; font-size: var(--fs-caption); color: var(--color-gray); } /* 規格選択UI(サイズ軸ボタン) pitsole-site/products/pitsole.html の .size-btn に見た目を合わせる。 flex-wrapだと、商品情報カラムの実測幅(360px前後)ではボタン4個が 1行に収まらず3+1に折り返ってしまう(2026-08-24に実機で発覚)。 全シリーズ共通で4サイズ(XS/S/M/L)固定という前提のもと、 4列固定のgridにして必ず1行に並べる。将来サイズ数が変わる場合は このrepeat(4, 1fr)を見直すこと。 */ .c-pitsole-variant_buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; } /* * bundle.cssの `.c-product_info__form__variant > div > div > *` が、 * 隠しselectを想定して直下の子要素全てに height:40px/width:100%/枠線 を強制する。 * pitsole_variant_ui.jsが挿入する.c-pitsole-variant_buttonsもこの直下の子に当たるため、 * 複数行に折り返るボタン群が40pxの箱に収まらず後続要素に重なるバグが発生する。 * 同じ子孫チェーンをなぞり、詳細度(0,2,2 > 0,1,2)で明示的に上書きする。 */ .c-product_info__form__variant > div > div > .c-pitsole-variant_buttons { height: auto; width: 100%; padding: 0; border: none; border-radius: 0; } /* 元のselect用ドロップダウン矢印装飾も、ボタンUIに置き換わった場合は不要なので隠す */ .c-product_info__form__variant > div > div:has(.c-pitsole-variant_buttons)::after { display: none; } .c-pitsole-variant_buttons__item { padding: 10px 4px; border: 1px solid var(--color-line); background: var(--color-white); color: var(--pitsole-color-text); font-family: var(--pitsole-font-body); font-size: var(--fs-caption); line-height: 1.4; text-align: center; border-radius: var(--radius-sm); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; } /* サイズコード(M等)+対応サイズ(25〜26cm等)の2行表示。 pitsole_variant_ui.js が「：」区切りで自動的に2つのspanへ分ける。 */ .c-pitsole-variant_buttons__item__main { font-size: var(--fs-body); font-weight: 500; } .c-pitsole-variant_buttons__item__sub { font-size: 11px; color: var(--color-gray); } .c-pitsole-variant_buttons__item.is-active .c-pitsole-variant_buttons__item__sub { color: rgba(255, 255, 255, 0.7); } .c-pitsole-variant_buttons__item:not(:disabled):hover { border-color: var(--color-rose); } /* 選択中はink色(商品一覧の絞り込みボタン・FAQタブと同じ配色にする。 以前はrose-deepだったが、他の選択済みUIと揃えるためinkに変更した)。 */ .c-pitsole-variant_buttons__item.is-active { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-white); } /* 売り切れ(disabled属性)。取り消し線+グレーで在庫なしを示す (pitsole-siteの.size-btn.is-soldout相当。JS側はis-soldoutクラスを 付けず標準のdisabled属性のみ付与するため:disabledで代用する)。 */ .c-pitsole-variant_buttons__item:disabled { color: var(--color-gray); background: var(--color-cream-deep); border-color: var(--color-line); text-decoration: line-through; cursor: not-allowed; } /* 読み物セクション */ .c-pitsole-reading { margin: 60px 0; text-align: center; } .c-pitsole-reading__title { font-family: var(--pitsole-font-heading); font-size: 22px; margin-bottom: 16px; } .c-pitsole-reading__body { font-family: var(--pitsole-font-body); line-height: 1.8; } /* シリーズ比較表 */ .c-pitsole-compare_table { width: 100%; border-collapse: collapse; font-family: var(--pitsole-font-body); } .c-pitsole-compare_table th, .c-pitsole-compare_table td { border: 1px solid var(--pitsole-color-text); padding: 8px 12px; text-align: center; } /* レビュー分布バー */ .c-pitsole-review_dist__row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-family: var(--pitsole-font-body); } .c-pitsole-review_dist__bar { flex: 1; height: 8px; background: #e5e0da; border-radius: 4px; overflow: hidden; } .c-pitsole-review_dist__bar__fill { height: 100%; background: var(--color-rose-deep); } /* --- ここから商品詳細ページ専用の共通トークン・ユーティリティ (元pitsole_product_detail.css。:rootは上部で定義済みのためここでは省略) --- */ .c-pitsole-theme, .c-pitsole-theme *, .c-pitsole-theme *::before, .c-pitsole-theme *::after { box-sizing: border-box; } .c-pitsole-theme p { margin: 0; } .c-pitsole-theme h2 { margin: 0; font-weight: 500; } .c-pitsole-theme .container { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } /* ------------------------------------------------------------------ .container を使っていないページのSP左右余白を --gutter に揃える (2026-08-28「他ページも全部同じ幅に余白を広げて」) ほとんどのPitsoleページは .container(padding-inline: var(--gutter))で 余白を持っているので --gutter を広げた時点で追従済み。追従しないのは、 ecforce標準の箱を .l-container__row の直下に置いているページで、 それらは bundle.css が PC 40px / SP 15px を直接持っている。 PC の 40px は --gutter の PC 値と同じなので、**SPだけ**揃えればよい。 境目を719pxにしているのは bundle.css 側と同じ値にするため。768pxにすると 720〜767pxの帯で 40px→28px と逆に狭くなる(商品詳細と同じ理由)。 対象と、その根拠になっているページ: - .p-product_list 商品一覧・カテゴリー詳細(products_index_content の外枠) - .p-page_article 記事詳細の本文 - .c-article_nav 記事詳細の記事送り - .p-column_header 記事詳細のヘッダ - .p-page_header お知らせ/JOURNAL一覧・カテゴリー一覧のタイトル帯 - .c-pagination お知らせ/JOURNAL一覧・商品一覧のページ番号 - .p-category_list カテゴリー一覧 - .p-page_content ABOUT(フリーページの共通テンプレート) 【スコープの注意】 フリーページ(shop/pages/show.html.liquid)は卸売用など他の用途とも共用で、
に .c-pitsole-theme が付かない。ABOUTだけを狙うため :has(#about-view) を使う(ページ内の他の指定と同じ手法)。 カテゴリー一覧も
に .c-pitsole-theme が無いのでidで狙う。 ------------------------------------------------------------------ */ @media (max-width: 719px) { .p-product_list.c-pitsole-theme, .c-pitsole-theme .p-page_article, .c-pitsole-theme .c-article_nav, .c-pitsole-theme .p-column_header, .c-pitsole-theme .p-page_header, .c-pitsole-theme .c-pagination, #product_category-index-view .p-category_list, #product_category-index-view .p-page_header, .p-page_content:has(#about-view) { padding-right: var(--gutter); padding-left: var(--gutter); } } .c-pitsole-theme .container--mid { max-width: 960px; } .c-pitsole-theme .section { padding-block: var(--sec-pad); } .c-pitsole-theme .section--cream { background: var(--color-cream); } .c-pitsole-theme .section--white { background: var(--color-white); } .c-pitsole-theme .section--creamdeep { background: var(--color-cream-deep); } .c-pitsole-theme .section--ink { background: var(--color-ink); color: var(--color-white); } .c-pitsole-theme .section--ink .sec-label, .c-pitsole-theme .section--ink .sec-title { color: var(--color-white); } .c-pitsole-theme .sec-label { font-family: var(--font-serif); font-size: 0.8125rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-rose-deep); display: block; margin-bottom: 10px; } .c-pitsole-theme .section--ink .sec-label { color: var(--color-rose-light); } .c-pitsole-theme .sec-title { font-family: var(--font-serif-jp); font-size: var(--fs-h2); letter-spacing: 0.06em; line-height: 1.6; } .c-pitsole-theme .sec-lead { margin-top: 16px; color: var(--color-gray); max-width: 34em; } .c-pitsole-theme .sec-head { margin-bottom: 40px; } .c-pitsole-theme .sec-head--center { text-align: center; } .c-pitsole-theme .sec-head--center .sec-lead { margin-inline: auto; } /* 片方の画面幅だけで改行させたいときの共通クラス。 br--sp / sp-br … SP(767px以下)だけ改行する br--pc / pc-br … PC(768px以上)だけ改行する 商品カード(_pitsole_product_card)の価格行や、商品説明・自由入力欄に貼るHTMLで使う。 名前が2組あるのは経緯によるもの。ABOUT・JOURNAL・お知らせのページは #about-view などのスコープで pc-br / sp-br を使っており、管理画面の欄をまたいで HTMLをコピーしたときにどちらの書き方でも動くよう、両方を別名として定義している。 【重要】有効化する指定は下のメディアクエリ側にあるので、順番を入れ替えないこと (メディアクエリは詳細度を上げないため、前に書くと後ろのルールに負ける)。 */ .c-pitsole-theme .br--sp, .c-pitsole-theme .sp-br, .c-pitsole-theme .br--pc, .c-pitsole-theme .pc-br { display: none; } @media (max-width: 767px) { .c-pitsole-theme .br--sp, .c-pitsole-theme .sp-br { display: inline; } } @media (min-width: 768px) { .c-pitsole-theme .br--pc, .c-pitsole-theme .pc-br { display: inline; } } .c-pitsole-theme .disclaimer { font-size: var(--fs-caption); line-height: 1.7; color: var(--color-ink); } .c-pitsole-theme .note { font-size: var(--fs-caption); color: var(--color-gray); line-height: 1.7; } .c-pitsole-theme .txt-sm { font-size: var(--fs-caption); } .c-pitsole-theme .txt-muted { color: var(--color-gray); } .c-pitsole-theme .center { text-align: center; } .c-pitsole-theme .mt-s { margin-top: 16px; } .c-pitsole-theme .mt-m { margin-top: 24px; } .c-pitsole-theme .mt-l { margin-top: 40px; } .c-pitsole-theme .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 32px; border-radius: var(--radius-btn); font-size: 0.9375rem; letter-spacing: 0.08em; font-weight: 500; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); } .c-pitsole-theme .btn--primary { background: var(--color-rose-deep); color: var(--color-white); } .c-pitsole-theme .btn--primary:hover { background: var(--color-ink); transform: scale(1.02); } .c-pitsole-theme .btn--secondary { border: 1px solid var(--color-ink); color: var(--color-ink); } .c-pitsole-theme .btn--secondary:hover { background: var(--color-ink); color: var(--color-white); } .c-pitsole-theme .btn--ghost-light { border: 1px solid var(--color-white); color: var(--color-white); } .c-pitsole-theme .btn--ghost-light:hover { background: var(--color-white); color: var(--color-ink); } /* #index-view側と同じ理由(theme.cssのBootstrap由来の青いフォーカスリング打ち消し) */ .c-pitsole-theme .btn:focus { outline: none; } .c-pitsole-theme .btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .c-pitsole-theme .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; border-bottom: 1px solid var(--color-line); padding-bottom: 4px; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .c-pitsole-theme .link-arrow::after { content: ""; width: 18px; height: 1px; background: currentColor; } .c-pitsole-theme .link-arrow:hover { border-color: var(--color-rose-deep); color: var(--color-rose-deep); } .c-pitsole-theme .section--ink .link-arrow { border-color: rgba(255,255,255,.3); } .c-pitsole-theme .section--ink .link-arrow:hover { color: var(--color-rose-light); border-color: var(--color-rose-light); } .c-pitsole-theme .reveal { opacity: 0; transform: translateY(8px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .c-pitsole-theme .reveal.is-in { opacity: 1; transform: none; } .c-pitsole-theme .reveal-d1 { transition-delay: .08s; } .c-pitsole-theme .reveal-d2 { transition-delay: .16s; } @media (prefers-reduced-motion: reduce) { .c-pitsole-theme .reveal { opacity: 1; transform: none; transition: none; } } .c-pitsole-theme .lp-two { display: grid; gap: 32px; align-items: center; } @media (min-width: 768px) { .c-pitsole-theme .lp-two { grid-template-columns: 1fr 1fr; gap: 56px; } } .c-pitsole-theme .lp-two img { border-radius: var(--radius-card); width: 100%; } .c-pitsole-theme .lp-two--rev > *:first-child { order: 2; } @media (max-width: 767px) { .c-pitsole-theme .lp-two--rev > *:first-child { order: 0; } } .c-pitsole-theme .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center; } .c-pitsole-theme .stat__num { font-family: var(--font-serif); font-size: clamp(2rem, 8vw, 3rem); color: var(--color-rose-deep); line-height: 1.1; } .c-pitsole-theme .stat__label { font-size: var(--fs-caption); color: var(--color-gray); margin-top: 6px; } .c-pitsole-theme .howto-3 { display: grid; gap: 32px; } @media (min-width: 768px) { .c-pitsole-theme .howto-3 { grid-template-columns: repeat(3, 1fr); } } .c-pitsole-theme .howto__step img { border-radius: var(--radius-card); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } .c-pitsole-theme .howto__label { margin-top: 16px; display: flex; align-items: baseline; gap: 10px; } .c-pitsole-theme .howto__no { font-family: var(--font-serif); color: var(--color-rose-deep); font-size: 1.25rem; } .c-pitsole-theme .howto__title { font-family: var(--font-serif-jp); font-size: var(--fs-h3); } .c-pitsole-theme .howto__body { margin-top: 8px; font-size: var(--fs-caption); color: var(--color-gray); line-height: 1.9; } .c-pitsole-theme .u-hidden-visually { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- STRUCTURE: ポイントリスト --- */ .c-pitsole-theme .point-list { display: grid; gap: 28px; } .c-pitsole-theme .point-list__no { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.2em; color: var(--color-rose-deep); } .c-pitsole-theme .point-list h3 { margin-top: 4px; font-family: var(--font-serif-jp); font-size: var(--fs-h3); } .c-pitsole-theme .point-list p { margin-top: 8px; font-size: var(--fs-caption); color: var(--color-gray); line-height: 1.9; } /* --- SCENE: 3カラムの写真+キャプション --- */ .c-pitsole-theme .scene-grid { display: grid; gap: 32px; } @media (min-width: 768px) { .c-pitsole-theme .scene-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } } .c-pitsole-theme .scene-grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-card); } .c-pitsole-theme .scene-grid h3 { margin-top: 16px; font-family: var(--font-serif-jp); font-size: 1.0625rem; } .c-pitsole-theme .scene-grid p { margin-top: 8px; font-size: var(--fs-caption); color: var(--color-gray); line-height: 1.9; } /* --- SPEC/COMPARE: テーブル --- */ .c-pitsole-theme .table-wrap { overflow-x: auto; } .c-pitsole-theme .data-table { min-width: 560px; font-size: var(--fs-caption); background: var(--color-white); border-radius: var(--radius-card); overflow: hidden; border-collapse: collapse; } .c-pitsole-theme .data-table th, .c-pitsole-theme .data-table td { border: 1px solid var(--color-line); padding: 14px 16px; text-align: left; vertical-align: top; line-height: 1.8; } .c-pitsole-theme .data-table thead th { background: var(--color-cream-deep); font-weight: 500; letter-spacing: 0.06em; white-space: nowrap; } .c-pitsole-theme .data-table tbody th { background: var(--color-cream); font-weight: 500; white-space: nowrap; width: 30%; } .c-pitsole-theme .data-table--compare tbody th { width: 20%; } .c-pitsole-theme .data-table--compare th.is-current, .c-pitsole-theme .data-table--compare td.is-current { background: var(--color-rose-light); } .c-pitsole-theme .data-table--compare thead th.is-current { border-top: 2px solid var(--color-rose-deep); color: var(--color-ink); } .c-pitsole-theme .compare-now { display: block; font-size: 10px; letter-spacing: 0.08em; color: var(--color-rose-deep); margin-top: 2px; } /* SPECの表(サイズ対応表・素材仕様)は2列しかないのに table { width: 100% } で 横いっぱいに広がるため、セルの右側が大きく空いて見えていた(2026-08-25ユーザー指摘)。 .data-table の min-width(560px)と同じ幅で頭打ちにして中央に置く。 比較表(.data-table--compare)は4列あり、横スクロール前提で作っているので除外する。 スコープは商品詳細ページのみ。ご利用ガイドや法務系ページの表は触らない。 */ #product-show-view .data-table:not(.data-table--compare) { max-width: 560px; margin-inline: auto; } /* 表の直後に置く注釈(※〜)も、表と同じ幅・同じ位置に揃える。 表だけ560pxに絞ると、注釈が左右にはみ出して見える(2026-08-25ユーザー指摘)。 比較表(4列・全幅)に付く注釈は絞りたくないので、:has()で 「比較表を含まない .table-wrap の直後」だけを狙う。 */ #product-show-view .table-wrap:not(:has(.data-table--compare)) + .note, #product-show-view .table-wrap:not(:has(.data-table--compare)) + .disclaimer { max-width: 560px; margin-inline: auto; } /* SPは min-width: 560px のせいで画面からはみ出し、横スクロールになっていた。 2列なので下限を外せば画面内に収まる。あわせてセルの余白と、 ラベル列の white-space: nowrap(幅が縮まらない原因)も緩める。 */ @media (max-width: 767px) { #product-show-view .data-table:not(.data-table--compare) { min-width: 0; } #product-show-view .data-table:not(.data-table--compare) th, #product-show-view .data-table:not(.data-table--compare) td { padding: 10px 12px; } #product-show-view .data-table:not(.data-table--compare) tbody th, #product-show-view .data-table:not(.data-table--compare) thead th { white-space: normal; } } /* SPで項目名が隣の列に食い込む問題(2026-08-28ユーザー指摘、ご利用ガイドの 「お支払いについて」の表)。 原因は2つの指定の組み合わせ。 - bundle.css 470行目の `table { table-layout: fixed }` —— 列幅は tbody th の width: 30% で固定され、中身に合わせて広がらない - 上の `tbody th { white-space: nowrap }` —— 折り返さない 結果、列幅(SPでは 560px × 30% ≒ 168px)より長い項目名 (「コンビニ払い(前払い)【要差し替え】」等)がセルからあふれ、 隣のセルの文字に重なって表示されていた。**はみ出すだけでなく重なる**のは fixed レイアウトが列を広げないため。 PCは表が960pxあり列幅も288px取れるので現状問題ないが、SPは幅が足りない。 折り返しを許可して解決する。商品詳細では同じ対策を #product-show-view スコープで既に入れており、それを他のPitsoleページへ 広げた形。--stack の表は th が display:block になるので影響しない。 */ @media (max-width: 767px) { .c-pitsole-theme .data-table tbody th { white-space: normal; } } /* ご利用ガイドの「サイズの選び方」の表だけ、SPでも横スクロールさせない (2026-08-28ユーザー指示)。「選び方の目安」の列を外して2列になり、 画面内に収まるようになったため。 .data-table の min-width: 560px が横スクロールの原因なので、ここだけ解除する。 セルの余白も詰めて、320px幅の端末でも溢れないようにしておく。 商品詳細で同じことをしている指定(#product-show-view)と同じ考え方。 他のセクションの表(配送・支払い・返品)は3列あり横スクロール前提なので触らない。 */ @media (max-width: 767px) { #guide-view #size .data-table { min-width: 0; } #guide-view #size .data-table th, #guide-view #size .data-table td { padding: 10px 12px; } } /* 表の中のリンクは表本体(--fs-caption = 13px)と同じサイズに揃える。 .link-arrow は 0.9375rem(15px)を自前で持っているため、表内だけ継承に戻す (2026-08-25、比較表の「詳しく見る」が他のセルより大きいという指摘)。 */ .c-pitsole-theme .data-table .link-arrow { font-size: inherit; } /* --- FAQ:
/ベースのアコーディオン --- */ .c-pitsole-theme .c-pitsole-faq { border-top: 1px solid var(--color-line); } .c-pitsole-theme .c-pitsole-faq__item { border-bottom: 1px solid var(--color-line); } .c-pitsole-theme .c-pitsole-faq__item summary { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: 0.9375rem; line-height: 1.7; letter-spacing: 0.03em; cursor: pointer; list-style: none; } .c-pitsole-theme .c-pitsole-faq__item summary::-webkit-details-marker { display: none; } .c-pitsole-theme .c-pitsole-faq__item summary:hover { color: var(--color-rose-deep); } .c-pitsole-theme .c-pitsole-faq__item summary::after { content: "+"; font-family: var(--font-serif); font-size: 1.25rem; flex: 0 0 auto; color: var(--color-rose-deep); } .c-pitsole-theme .c-pitsole-faq__item[open] summary::after { content: "−"; } .c-pitsole-theme .c-pitsole-faq__answer { padding: 0 0 24px; color: var(--color-gray); font-size: 0.9375rem; line-height: 1.95; max-width: 60em; } /* 回答の中に

を並べる長文用(2026-08-28、キャンセル・返品・交換の設問で追加)。 短い回答は

直下にテキストを置いているだけなので、この指定は

を使った回答にしか効かない。 */ .c-pitsole-theme .c-pitsole-faq__answer p { margin: 0; } .c-pitsole-theme .c-pitsole-faq__answer p + p { margin-top: 0.8em; } .c-pitsole-theme .c-pitsole-faq__answer__head { color: var(--color-ink); font-weight: 500; } .c-pitsole-theme .c-pitsole-faq__answer p + .c-pitsole-faq__answer__head { margin-top: 1.4em; } /* --- SP用stickyバー --- */ .c-pitsole-theme .c-pitsole-sticky_cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--color-white); border-top: 1px solid var(--color-line); padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 12px; align-items: center; transform: translateY(110%); transition: transform var(--dur) var(--ease); } .c-pitsole-theme .c-pitsole-sticky_cta.is-visible { transform: translateY(0); } .c-pitsole-theme .c-pitsole-sticky_cta__info { flex: 1; min-width: 0; } .c-pitsole-theme .c-pitsole-sticky_cta__name { font-size: 11px; color: var(--color-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .c-pitsole-theme .c-pitsole-sticky_cta__price { font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.4; } /* 「(税込価格 ¥6,578)」の部分。pitsole_sticky_cta.js がで包んでいる。 block にして金額の下に落とし、pitsole-siteの .sticky-cta__price と同じく 小さめのサンセリフ・グレーにする(2026-08-25ユーザー指示)。 */ .c-pitsole-theme .c-pitsole-sticky_cta__price small { display: block; font-family: var(--font-sans); font-size: 11px; color: var(--color-gray); } @media (min-width: 1024px) { .c-pitsole-theme .c-pitsole-sticky_cta { display: none; } } /* パンくずをSPでもページ上部に出す(2026-08-25ユーザー指示)。 ecforce標準はSPだけ最下部の --sp ブロックに出す作りだが、pitsole-siteは PC・SPともページ上部に1つだけ置いている。show.html.liquid側で Pitsoleファミリーのときは最下部ブロックを出さないようにしてあるので、 ここでPC用ブロックをSPでも表示する。他ブランドの商品ページは従来どおり。 */ @media screen and (max-width: 719px) { .c-pitsole-theme.is-pitsole-family .p-product_content__breadcrumbs--pc { display: block; padding: 12px 0 4px; } } /* --- detail(product.description)を出すフル幅ブロック --- show.html.liquid側で.l-container__row(カート列)の外、COMPARE/FAQと同じ 階層に配置しているため、幅を制限する親がなく100%で画面幅いっぱいになる。 */ .c-pitsole-theme .c-pitsole-theme__detail_full { width: 100%; } /* --- REVIEWS(products_show_review.liquid)の見出しをPitsoleデザインに寄せる --- */ .c-pitsole-theme .p-review__inner__title { font-family: var(--font-serif-jp) !important; color: var(--color-ink) !important; font-size: var(--fs-h2) !important; letter-spacing: 0.06em; line-height: 1.6; text-align: center; } .c-pitsole-theme .p-review__inner__title::before { content: "REVIEWS"; display: block; font-family: var(--font-serif); font-size: 0.8125rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-rose-deep); margin-bottom: 10px; } .c-pitsole-theme .p-review__inner__all__btn { display: inline-flex; width: auto; max-width: none; height: auto; min-height: 52px; padding: 14px 32px; border-radius: var(--radius-btn); border: 1px solid var(--color-ink); background: transparent !important; color: var(--color-ink) !important; font-family: var(--font-sans) !important; font-size: 0.9375rem !important; letter-spacing: 0.08em; } .c-pitsole-theme .p-review__inner__all__btn:hover { background: var(--color-ink) !important; color: var(--color-white) !important; } /* --- RELATED(products_show_recommend.liquid)の見出しをPitsoleデザインに寄せる --- */ .c-pitsole-theme .p-recommend_product__inner__title { text-align: center; margin-bottom: 40px; } .c-pitsole-theme .p-recommend_product__inner__title__en { font-family: var(--font-serif) !important; color: var(--color-rose-deep) !important; font-size: 0.8125rem !important; letter-spacing: 0.22em !important; text-transform: uppercase; display: block; margin-bottom: 10px; } .c-pitsole-theme .p-recommend_product__inner__title__jp { font-family: var(--font-serif-jp) !important; color: var(--color-ink) !important; font-size: var(--fs-h2) !important; letter-spacing: 0.06em !important; line-height: 1.6; } /* Fix: 商品詳細ページのdetailフル幅ブロックが .p-product_content__inner の flexコンテナ内で3つ目のアイテムとして横並びになってしまうため、折り返す。 (bundle.css:8846 の display:flex に対し、より高い詳細度で上書き) */ /* 購入エリアの下に余白を足す(2026-08-27ユーザー依頼)。 .p-product_content はパンくずと購入エリア(画像+カート列)を包む箱で、 bundle.css 8831行目が左右のpadding(PC 40px / SP 15px)とSPのpadding-topだけを 持っており、下は0。そのため購入エリアの直後に来る要素 (Pitsoleは商品説明の全幅ブロック、他ブランドは商品説明を内側に移したので フッター側)と詰まって見えていた。 量は「見た目がそれくらいになれば単位は任せる」との指示で50px。 全ブランドの商品詳細が対象。.p-product_content は products/show.html.liquid の1箇所でしか使われていないので他ページに漏れないが、 スコープの明示のため #product-show-view を付けて詳細度も上げておく (bundle.css の .p-product_content(0,1,0)に確実に勝たせる)。 */ #product-show-view .p-product_content { padding-bottom: 50px; } /* SPの左右余白を他ページに揃える(2026-08-28レビュー「SP・タブレットの左右が狭すぎる」)。 .p-product_content は bundle.css 8835行目で 719px以下のとき左右15pxになる。 Pitsoleの他ページは --gutter(SP 28px)なので、ここだけ明らかに狭かった。 メディアクエリを 719px に合わせているのは bundle.css 側と同じ境界にするため。 768px にすると 720〜767px の帯で bundle の40pxから28pxへ逆に狭まってしまう。 720px以上は bundle の40px = PCの --gutter と同値なので、触る必要が無い。 */ @media (max-width: 719px) { #product-show-view .p-product_content { padding-right: var(--gutter); padding-left: var(--gutter); } } .c-pitsole-theme .p-product_content__inner { flex-wrap: wrap; } /* Fix: #product-description は theme_customize.css の .u-text--body(!important) で游ゴシック/#262626を強制されるため、フル幅ブロック配下だけ明示的に上書きする。 Pitsoleファミリー限定(他ブランドの説明文フォントまで変えないため)。 */ .c-pitsole-theme.is-pitsole-family .c-pitsole-theme__detail_full .c-product_info__description { font-family: var(--font-sans) !important; color: var(--color-ink) !important; font-size: var(--fs-body) !important; line-height: 1.9; margin-top: 0; } /* --- カート列(買い物エリア)をpitsole-site準拠にスタイリング --- 価格・数量・カラー/サイズ選択・カート追加・お気に入り・配送案内など、 購入フォーム周りの見た目をpitsole-siteの.buyboxに合わせる。 配色・入力枠等はtheme_customize.css.liquid側で管理画面の色設定が !important付きで当たっているため、それより詳細度・優先度を上げて上書きする。 */ #product-show-view .c-pitsole-theme .btn--block { width: 100%; } #product-show-view .c-pitsole-theme #btn-add, #product-show-view .c-pitsole-theme #btn-add-async, #product-show-view .c-pitsole-theme #btn-stock-waiting-list { background: var(--color-rose-deep) !important; color: var(--color-white) !important; font-family: var(--font-sans) !important; border: none; } #product-show-view .c-pitsole-theme #btn-add:hover, #product-show-view .c-pitsole-theme #btn-add-async:hover, #product-show-view .c-pitsole-theme #btn-stock-waiting-list:hover { background: var(--color-ink) !important; } /* 「購入手続きへ」(#btn-add)を出さない(2026-08-27ユーザー判断、BACKLOGから昇格) 購入エリアにはecforce標準で2つのボタンが縦に並ぶ。 #btn-add-async … 「カートに商品を追加」 非同期で追加し画面はそのまま #btn-add … 「購入手続きへ」 フォーム送信で追加しカート画面へ どちらも「カートに入れる」ボタンで、違うのは遷移するかどうかだけ。 意味のある2択ではなく同じ操作の重複なので、1つに寄せる。 残すのは #btn-add-async(「カートに商品を追加」)。理由: ・完成形の pitsole-site/products/*.html は購入エリアのボタンが 「カートに追加」1つだけで、「購入手続きへ」に相当するものが無い ・押すとヘッダーのカートアイコンに吹き出しでフィードバックが出ることを ユーザーが実機で確認済み(2026-08-27)。押しても無反応ではない ・遷移させずに追加してその場でフィードバックを出すのがUXガイドラインの推奨 【display:none で消す理由】要素ごと出力しない手もあるが、非同期追加の処理は プラットフォーム側のJS({{ 'shop/products' | javascript_include_tag }}、 テーマ内に実体が無い)で、#btn-add を参照しているかどうかを確認できない。 DOMに残したまま見た目だけ消す方が安全。 【!important を付ける理由】このボタンには style="{{ display_setting }}" が 付いている。現在は display_setting の代入(871行目)がボタンを組み立てる {% capture %}(307〜340行目)より後にあるため空になっており無害だが、 将来この順番が直るとインラインの display が勝ってしまう。 【stickyバーは壊れない】pitsole_sticky_cta.js は offsetParent で 「実際に表示されている方」のボタンを基準に選ぶ作り(24〜32行目)なので、 #btn-add を隠すと自動的に #btn-add-async を基準にする。 【スコープ】全ブランドの商品詳細が対象(2026-08-27ユーザー判断で拡大)。 当初は .is-pitsole-family に絞っていたが、他ブランドも1つに統一する方針。 【positionから外す方法は採らない】カスタマイズ画面のセクション設定で position から purchase を外せばテーマを触らずに全ブランドへ効くが、 purchase の {% capture %} には「購入手続きへ」以外に ・#invalid_pre_order_description(予約期間外のメッセージ) ・#btn-stock-waiting-list(売り切れ時の「入荷お知らせ」導線) ・お届け予定時期(予約商品) の3つが同居している(products_show_content.liquid 322〜356行目)。 外すとこれらまで消えて機能が落ちるため、CSSでボタン1つだけを狙う。 【セレクタの組み立て】#product-show-view は定期便の商品変更画面 (customer/subs_orders/products/show.html.liquid)でも同じidが使われており、 そちらにも別の #btn-add がある。現状あのページは pitsole_top.css を 読み込んでいないので届かないが、保険として .c-pitsole-theme を挟んでおく (定期便側にこのクラスは無い)。 */ #product-show-view .c-pitsole-theme #btn-add { display: none !important; } #product-show-view .c-pitsole-theme .c-product_info__favorite { margin-top: 12px; } #product-show-view .c-pitsole-theme .c-product_info__favorite__btn { background: transparent !important; color: var(--color-ink) !important; border: 1px solid var(--color-ink); font-family: var(--font-sans) !important; gap: 8px; } #product-show-view .c-pitsole-theme .c-product_info__favorite__btn:hover { background: var(--color-ink) !important; color: var(--color-white) !important; } #product-show-view .c-pitsole-theme .c-product_info__favorite__btn .favorite-icon, #product-show-view .c-pitsole-theme .c-product_info__favorite__btn .favorite-text { color: inherit !important; } /* --- 購入エリア冒頭(カテゴリ名・商品名・価格)をpitsole-siteの.buyboxに合わせる --- 出典: pitsole-site/assets/css/style.css の .buybox__series / .buybox__name / .buybox__price / .buybox__price small (2026-08-26ユーザー指示。Pitsole・Pitsole Plus・Room Shoesの3ページ共通)。 【!importantが要る理由】 この3要素はテーマ側で u-text--body / u-text--head / u-text--subhead を 持たされており、theme_customize.cssが管理画面の色・文字サイズ設定を color/font-size に !important で流し込んでいる(#494949・24px等)。 font-familyだけは!important無しなので、詳細度(3クラス vs 1クラス)で勝てる。 */ /* カテゴリ名 = .buybox__series 明朝・ローズ・14px・字間広め。bundle.cssは14pxだがu-text--bodyが13pxを !importantで上書きしているため、こちらも!importantで戻す。 */ .c-pitsole-theme.is-pitsole-family .c-product_info__category { font-family: var(--font-serif); font-size: 0.875rem !important; letter-spacing: 0.16em; color: var(--color-rose-deep) !important; } /* 商品名 = .buybox__name 明朝(和文)・--fs-h2(SP24px → 768px以上28px → 1024px以上32px)・行間1.5。 bundle.cssの margin-top:10px / font-size:30px(SP24px)を置き換える。 */ .c-pitsole-theme.is-pitsole-family .c-product_info__title { font-family: var(--font-serif-jp); font-size: var(--fs-h2) !important; line-height: 1.5; color: var(--color-ink) !important; margin: 8px 0 0; } /* 価格 = .buybox__price ブロック全体は「小さいグレーのゴシック」を既定にしておき、金額本体だけを 大きな明朝に上げる。テーマの価格は 「¥5,980 (税込価格 ¥6,578)」という組み方で、 括弧・ラベル・税込金額がすべて素のspanなので、この二段構えが一番素直。 bundle.cssの margin-top:40px を18pxに、.c-product_info__price span の 24px(SP22px)を打ち消す。 */ .c-pitsole-theme.is-pitsole-family .c-product_info__price { font-family: var(--font-sans); font-size: var(--fs-caption) !important; color: var(--color-gray) !important; letter-spacing: 0; margin-top: 18px; } .c-pitsole-theme.is-pitsole-family .c-product_info__price span { font-family: inherit; font-size: inherit !important; color: inherit !important; } /* 金額本体。.list_priceは定価と販売価格を併記する分岐でだけ出る。 Pitsoleファミリーは現在セール設定が無く販売価格のみだが、後からセールを 組んだ場合はここに2つ並ぶことになるので、その時は階層を見直すこと。 */ .c-pitsole-theme.is-pitsole-family .c-product_info__price .sales_price, .c-pitsole-theme.is-pitsole-family .c-product_info__price .list_price { font-family: var(--font-serif); font-size: 1.875rem !important; color: var(--color-ink) !important; letter-spacing: 0.02em; font-feature-settings: "tnum"; } /* 税込側の金額は括弧の中なので、上のルールに巻き込まれず小さいまま置く。 テーマ内でクラス名が sales_price_include_tax(アンダースコア)と sales_price-include-tax(ハイフン)の2通りに揺れているため両方書く。 */ .c-pitsole-theme.is-pitsole-family .c-product_info__price .sales_price_include_tax, .c-pitsole-theme.is-pitsole-family .c-product_info__price .sales_price-include-tax, .c-pitsole-theme.is-pitsole-family .c-product_info__price .list_price_include_tax { font-family: var(--font-sans); font-size: var(--fs-caption) !important; color: var(--color-gray) !important; letter-spacing: 0; } /* モックは金額と「(税込)」の間が10px。テーマ側はタグの間の改行が 半角スペース(13pxで約4px)として出るため、差分の6pxだけ足す。 */ .c-pitsole-theme.is-pitsole-family .c-product_info__price .sales_price + span, .c-pitsole-theme.is-pitsole-family .c-product_info__price .list_price + span { margin-left: 6px; } /* MONITOR(お客様の声)の見出しをSPで1行に収める(2026-08-26ユーザー指示)。 .sec-title は --fs-h2(SP 24px)だが、この見出しだけ15〜20文字と長く、 字間0.06em込みで16〜19em ≒ 380〜460px必要になる。SP(375px)の本文幅は 左右のgutter 20pxを引いた335pxしかないため、必ず2行に折り返していた。 【なぜ 5.6vw のような素のvwではなく calc なのか】 素のvwは左右のgutter(40px)を勘定に入れないため、画面が狭いほど 足りなくなる。5.6vwだと375px幅でぎりぎり収まっても、360px幅の端末で 1行に入らない。calcで「本文幅 ÷ 見出しの長さ(em)」を直接求めれば、 どの幅でも“1行に収まる最大サイズ”になり、幅が広ければ--fs-h2(24px)で 頭打ちになる。ユーザーが見ていた456px幅のウィンドウでは24pxに達する。 除数は見出しの文字数から出した値(全角1文字=1em + 字間0.06em)に、 フォントの実測差とデスクトップのスクロールバー分の余裕を約2%足したもの。 Pitsole 「モニターの方に、うかがいました」 15文字 → 15.9em → 16.2 Pitsole Plus 「Plusをお使いの方に、…ました。」 約19.1em → 19.5 Room Shoes 「在宅時間の長い方に、…ました。」 18文字 → 19.1em → 19.5 見出しの文字数を変えたら除数も見直すこと(1文字増減 ≒ 1.06)。 スコープは .is-series-*(show.html.liquidが商品カテゴリーから付与)と .section--creamdeep の組み合わせ。商品説明HTMLの中でこの背景色を使うのは MONITORブロックだけなので、他のsec-titleは24pxのまま影響を受けない (Pitsole・Pitsole Plus・Room Shoesの3本とも確認済み)。 メディアクエリは基本指定(.c-pitsole-theme .sec-title、909行目)より 後ろに置くこと。前に書くと後ろの基本指定に負けて丸ごと無効になる。 */ @media (max-width: 767px) { .c-pitsole-theme.is-series-pitsole .section--creamdeep .sec-title { font-size: min(var(--fs-h2), calc((100vw - 40px) / 16.2)); } .c-pitsole-theme.is-series-plus .section--creamdeep .sec-title, .c-pitsole-theme.is-series-roomshoes .section--creamdeep .sec-title { font-size: min(var(--fs-h2), calc((100vw - 40px) / 19.5)); } } /* * bundle.cssは .c-product_info__form__variant を display:table で組んでいる * (label列 + セレクトボックス列の横並び)。ネイティブselectを想定した組み方で、 * ボタンUIに変換すると「サイズ」ラベルが横に列を取ってしまい、ボタン側の * 実質幅が狭くなって4つが2列で折り返り、pitsole-siteのような1行4個の * 見た目にならない(2026-08-24に実機で発覚)。 * table構造を解除し、ラベルを上・ボタン行を下に積む形に変える。 */ .c-pitsole-theme.is-pitsole-family .c-product_info__form__variant { display: block; margin-top: 16px; } .c-pitsole-theme.is-pitsole-family .c-product_info__form__variant > div { display: block; } .c-pitsole-theme.is-pitsole-family .c-product_info__form__variant > div > label { display: block; padding: 0; font-size: var(--fs-caption); color: var(--color-gray) !important; margin-bottom: 4px; } .c-pitsole-theme.is-pitsole-family .c-product_info__form__variant > div > div { display: block; width: 100%; padding: 0; } /* #option_types自体がu-color__input--bg(background:#FFFFFF !important、 theme_customize.css)を直接持っているため、周りのクリーム地(.c-pitsole-theme のbackground-color)から浮いて白く見える(2026-08-24にユーザー報告で発覚)。 idセレクタ込みの詳細度で!importantごと打ち消す。 */ .c-pitsole-theme.is-pitsole-family #option_types, .c-pitsole-theme.is-pitsole-family .c-product_info__form__variant, .c-pitsole-theme.is-pitsole-family .option_type { background: transparent !important; } /* 「サイズの選び方」モーダルの起動ボタン。 pitsole_variant_ui.js が、プラットフォームJSの生成した「サイズ」ラベルの 中へ移動させ、ラベルと同じ行の右端に並べる(pitsole-siteの.filter-label + .pdp-guide と同じ形。2026-08-26ユーザー指示)。 下の text-align/margin-top は、移動が間に合わなかった場合に従来どおり 「ラベルの上の独立した行」として見えるようにするフォールバック。 */ .c-pitsole-theme.is-pitsole-family .c-pitsole-size_guide_trigger { text-align: right; margin-top: 16px; } /* ボタンの見た目(pitsole-siteの.pdp-guide)。 移動前(ラッパーの中)と移動後(ラベルの隣)の両方に効かせる。 */ .c-pitsole-theme.is-pitsole-family .c-pitsole-size_guide_trigger .js-modal__open, .c-pitsole-theme.is-pitsole-family .c-pitsole-size_guide_btn { font-size: var(--fs-caption); color: var(--color-gray); border-bottom: 1px solid var(--color-line); padding-bottom: 2px; background: none; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .c-pitsole-theme.is-pitsole-family .c-pitsole-size_guide_trigger .js-modal__open:hover, .c-pitsole-theme.is-pitsole-family .c-pitsole-size_guide_btn:hover { color: var(--color-rose-deep); border-color: currentColor; } /* JSで「サイズの選び方」をラベルの隣に移した行。 ラベルを左・ボタンを右に振り分け、規格ボタン群は幅100%で次の行へ送る (pitsole-siteの `.buybox__block > .filter-label { display:flex; justify-content:space-between }` と同じ見え方)。PC・SP共通。 1つ上の「> div { display:block }」(詳細度0,3,2)を、クラスを足した0,4,2で 上書きするため、必ずその後ろに置くこと。 */ .c-pitsole-theme.is-pitsole-family .c-product_info__form__variant > div.c-pitsole-variant_row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; } .c-pitsole-theme.is-pitsole-family .c-product_info__form__variant > div.c-pitsole-variant_row > label { margin-bottom: 8px; } .c-pitsole-theme.is-pitsole-family .c-product_info__form__variant > div.c-pitsole-variant_row > .c-pitsole-size_guide_btn { flex: 0 0 auto; margin-bottom: 8px; } /* 規格ボタン群のセルは常に単独行にする(flex-wrapで折り返させる) */ .c-pitsole-theme.is-pitsole-family .c-product_info__form__variant > div.c-pitsole-variant_row > div { flex: 0 0 100%; } .c-pitsole-theme.is-pitsole-family .c-product_info__form__quantity { margin-top: 20px; } .c-pitsole-theme.is-pitsole-family .c-product_info__form__quantity__label { font-size: var(--fs-caption); color: var(--color-gray) !important; } /* * theme.cssの #btn-minus / #btn-plus は position:absolute; left:0/right:0; top:0 * (元々は定期購入の規格変更画面向けの指定で、IDが同じためPDPにも及ぶ)。 * absoluteな子はflexレイアウトから外れるため、.c-order_quantity 自身に * position:relativeと明示的な幅・高さを与えないと、位置の基準がさらに * 上の祖先要素にずれて数字とボタンの位置関係が崩れる * (2026-08-24に実機で発覚。数字が中央に来ない・見えない不具合の原因)。 * 幅128px = 左ボタン40px + 入力48px + 右ボタン40pxで、中央のinputが * ちょうど残りの48pxに収まり、左右のボタンとぴったり重なる計算にしている。 */ .c-pitsole-theme.is-pitsole-family .c-order_quantity { display: inline-flex; align-items: center; justify-content: center; gap: 0; margin-top: 8px; width: 128px; height: 40px; position: relative; border: 1px solid var(--color-line) !important; border-radius: var(--radius-btn); overflow: hidden; background: var(--color-white) !important; } /* bundle.cssの.c-order_quantity__inputはpadding-left/right:50pxを持つ。 box-sizing:border-boxの下でwidth:48pxと組み合わさると、paddingだけで 100pxとなり数字を表示する余白がゼロ以下になって見えなくなる (2026-08-24に実機で発覚。padding:0で明示的に上書きして解消)。 */ .c-pitsole-theme.is-pitsole-family .c-order_quantity__input { width: 48px; height: 40px; padding: 0 !important; text-align: center; border: none !important; background: transparent !important; font-family: var(--font-sans) !important; color: var(--color-ink) !important; } .c-pitsole-theme.is-pitsole-family #btn-minus, .c-pitsole-theme.is-pitsole-family #btn-plus { width: 40px; height: 40px; border: none; background: transparent !important; } /* 配送・交換・出荷の案内リスト(products_show_content.liquidの{{ assurance }}) */ .c-pitsole-theme.is-pitsole-family .c-pitsole-assurance { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .c-pitsole-theme.is-pitsole-family .c-pitsole-assurance li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-caption); color: var(--color-gray) !important; } .c-pitsole-theme.is-pitsole-family .c-pitsole-assurance svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--color-rose-deep); stroke-width: 1.4; margin-top: 1px; } /* 使用上の注意(caution)・自由入力1/2(option01/02)のアコーディオン。 ecforce標準の.c-product_info__details(

/)を、 FAQセクションと揃った見た目に上書きする。 Fix: bundle.cssは.c-product_info__detailsをデフォルトdisplay:noneにし、 画面幅719px以下の時だけ.pc(展開済みテキスト)を隠してdetailsを見せる 「モバイルのみアコーディオン」仕様になっている。今回はPCでも常に アコーディオンにしたいため、幅を問わず上書きする。 */ .c-pitsole-theme.is-pitsole-family .c-product_info__details { display: block; } .c-pitsole-theme.is-pitsole-family .c-product_info__option.pc, .c-pitsole-theme.is-pitsole-family .c-product_info__caution.pc { display: none; } /* Fix: 使用上の注意(自由入力1)・インソールの交換方法(自由入力2)は、 それぞれ別々の#option01/#option02(.c-product_info__option、 bundle.cssでmargin-top:20px)に包まれた別々の
のため、 .c-product_info__details + .c-product_info__details という隣接 セレクタは効かず(直接の兄弟ではないため)、二重線+隙間になっていた。 さらにbundle.css側は
要素自体にもmargin-top:20pxと border-top(別の色変数)を持っており、外側divの余白だけ消しても 中の
の余白・線が残ってしまっていた。
自体の margin-top/border-topも明示的に0にし、区切り線は各項目の下端だけに 絞って1本にまとめる。 */ .c-pitsole-theme.is-pitsole-family #option02.c-product_info__option { margin-top: 0; } .c-pitsole-theme.is-pitsole-family .c-product_info__details { margin-top: 0; border-top: none; border-bottom: 1px solid var(--color-line); } .c-pitsole-theme.is-pitsole-family #option01 .c-product_info__details { border-top: 1px solid var(--color-line); } .c-pitsole-theme.is-pitsole-family .c-product_info__details__summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; cursor: pointer; list-style: none; } .c-pitsole-theme.is-pitsole-family .c-product_info__details__summary::-webkit-details-marker { display: none; } /* ラベルと+アイコンは同じ(summary_inner)の中に並んでいるため、親の summary側の justify-content: space-between では離れず、+が文字にくっついて 見えていた(2026-08-25ユーザー指摘)。summary_inner自体を横幅いっぱいのflexにして、 +を行の右端へ寄せる。gapは文字数が多くて右端まで届く場合の最低限の間隔。 */ .c-pitsole-theme.is-pitsole-family .c-product_info__details__summary_inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; font-size: var(--fs-caption) !important; font-family: var(--font-sans) !important; color: var(--color-ink) !important; } .c-pitsole-theme.is-pitsole-family .c-product_info__details__icon { position: relative; width: 12px; height: 12px; flex: 0 0 auto; } .c-pitsole-theme.is-pitsole-family .c-product_info__details__icon::before, .c-pitsole-theme.is-pitsole-family .c-product_info__details__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1px; background: var(--color-rose-deep) !important; transform: translate(-50%, -50%); } .c-pitsole-theme.is-pitsole-family .c-product_info__details__icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform var(--dur) var(--ease); } .c-pitsole-theme.is-pitsole-family .c-product_info__details[open] .c-product_info__details__icon::after { transform: translate(-50%, -50%) rotate(0deg); } /* 商品説明の中の注釈(※ n=120…)は、PCでは中央揃えにする(2026-08-25ユーザー指示)。 SPは行数が増えて中央揃えだと読みにくいので左揃えのまま。 スコープは商品詳細ページ(#product-show-view)だけ。TOPの .disclaimer は #index-view 側で別に定義しているため影響しない。 */ @media (min-width: 768px) { #product-show-view .disclaimer { text-align: center; } } .c-pitsole-theme.is-pitsole-family .c-product_info__details__content_inner { padding: 0 0 20px; font-size: var(--fs-caption) !important; font-family: var(--font-sans) !important; color: var(--color-gray) !important; line-height: 1.9; } /* --- Pitsole以外のブランドの商品説明アコーディオン(2026-08-27ユーザー依頼) --- オイグルト等の商品説明は、管理画面に生の
で 「商品特徴 / 容量 / 成分 / HOWTO」が入っている。これを購入エリアの カート追加ボタンの下に移し(出力位置は products_show_content.liquid の カート列末尾)、Pitsoleの自由入力1/2のアコーディオンと同じ見た目に揃える。 【管理画面のHTMLは変えない前提】上のPitsole側は .c-product_info__details / __summary / __icon という専用クラスが 付いたマークアップだが、こちらは素の
しか無い。 バッカス様に既存商品ぜんぶのHTMLを書き換えてもらうのは現実的でないため、 要素セレクタだけで同じ見た目を作る。 【スコープ】.c-product_info__description--in_column はカート列に出す ときだけ付くクラス。Pitsoleファミリーの全幅ブロック側には付かないので、 Pitsoleの商品説明(LP)には影響しない。 【!important が必要な理由】theme_customize.css.liquid が .u-text--body に 対して游ゴシック/#262626 を !important で強制するため(上の #product-description の Fix と同じ事情)。 */ #product-show-view .c-product_info__description--in_column { margin-top: 24px; font-family: var(--font-sans) !important; } #product-show-view .c-product_info__description--in_column details { border-bottom: 1px solid var(--color-line); } #product-show-view .c-product_info__description--in_column details:first-of-type { border-top: 1px solid var(--color-line); } #product-show-view .c-product_info__description--in_column summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 0; cursor: pointer; list-style: none; font-size: var(--fs-caption) !important; font-family: var(--font-sans) !important; color: var(--color-ink) !important; } /* 既定の三角マーカーを消す。Safari/旧Chromeは::-webkit-details-marker、 モダンブラウザは list-style: none(上)で消える。 */ #product-show-view .c-product_info__description--in_column summary::-webkit-details-marker { display: none; } /* +/- アイコン。Pitsole側は要素に::before/::afterで2本の線を引いているが、 こちらは要素を足せないので、summary::after 1つに背景グラデーション2枚 (横線・縦線)を重ねて描く。開いたら縦線の高さを0にして「-」にする。 */ #product-show-view .c-product_info__description--in_column summary::after { content: ""; width: 12px; height: 12px; flex: 0 0 auto; background-image: linear-gradient(var(--color-rose-deep), var(--color-rose-deep)), linear-gradient(var(--color-rose-deep), var(--color-rose-deep)); background-size: 12px 1px, 1px 12px; background-position: center center; background-repeat: no-repeat; transition: background-size var(--dur) var(--ease); } #product-show-view .c-product_info__description--in_column details[open] summary::after { background-size: 12px 1px, 1px 0; } /* 中身は
で包まれておらず

や
が

直下に並ぶため、 summary以外の直下の子をまとめて狙う。 */ #product-show-view .c-product_info__description--in_column details > *:not(summary) { font-size: var(--fs-caption) !important; font-family: var(--font-sans) !important; color: var(--color-gray) !important; line-height: 1.9; margin: 0 0 10px; } #product-show-view .c-product_info__description--in_column details > *:not(summary):last-child { margin-bottom: 20px; } /* ============================================================ FAQページ(/shop/faq)。出典: pitsole-site/faq.html #faq-view にスコープを切る。.p-faq__inner__list__item 等のクラスは ecforce標準のFAQマークアップ由来だが、FAQページ以外では使われていない。 それでも将来の流用に備えて #faq-view 配下に限定しておく。 【触ってはいけないもの】 .p-faq__inner__list__item__answer の display は bundle.css の アコーディオン開閉が制御しているため、ここでは指定しない (指定すると開閉が壊れる)。配色・字面・余白のみ上書きする。 【全幅背景にしない理由】 商品一覧ページでは .p-product_list の実測paddingを負のmarginで打ち消して ヒーローを画面幅いっぱいにしているが、FAQページは親要素が .l-container / .l-container__row でpadding値が異なる。同じ手を使うと ズレる恐れがあるため、ヒーローはコンテナ内の背景ボックスとして収める。 ============================================================ */ #faq-view, #faq-view *, #faq-view *::before, #faq-view *::after { box-sizing: border-box; } #faq-view { font-family: var(--font-sans); color: var(--color-ink); } #faq-view p { margin: 0; } #faq-view h1, #faq-view h2 { margin: 0; font-weight: 500; } /* ---------------------------------------------------- ページヒーロー */ /* bundle.cssの .p-faq__inner は max-width:720px。他ページと同じ1200pxに 統一するため制限を解除し、幅はテンプレート側の .container に任せる。 */ #faq-view .p-faq__inner { max-width: none; } /* .p-faq もbundle.cssで左右40px(SP時15px)のpaddingを持っている。親の .container が既に同じ幅のpaddingを持つため二重になり、中身が1200pxより 狭くなっていた。ここで打ち消して .p-faq__inner をちょうど1200pxにする。 */ #faq-view .p-faq { padding-right: 0; padding-left: 0; } /* ヒーローは背景色を敷かず、ページ全体の背景(.c-pitsole-themeの--color-cream)に 溶け込ませる。左右paddingも不要(.containerが持っているため二重になる)。 */ #faq-view .p-faq_hero { padding: 32px 0 40px; margin-top: 32px; } #faq-view .p-faq_hero .c-breadcrumbs { margin: 0 0 20px; padding: 0; } #faq-view .p-faq_hero__title { display: block; margin-top: 6px; } /* ヒーローのリード文の幅制限を外す。共通の .sec-lead が持つ max-width: 34em では 「お問い合わせの多いご質問をまとめました。キーワード検索、または カテゴリからお探しください。」(41文字)が収まらず、末尾が次行に落ちていた (2026-08-26ユーザー指摘)。法務系・ご利用ガイドのヒーローと同じ扱い。 モックの .mini-hero p にも幅制限は無い。 */ #faq-view .p-faq_hero .sec-lead { max-width: none; } /* ------------------------------------------------------ 検索窓・件数 */ #faq-view .p-faq { margin-top: 48px; } #faq-view .p-faq_search { max-width: 560px; } #faq-view .p-faq_search__input { width: 100%; border: 1px solid var(--color-line); border-radius: var(--radius-btn); background: var(--color-white); padding: 14px 20px; font-size: 0.9375rem; -webkit-appearance: none; appearance: none; } #faq-view .p-faq_search__input:focus { outline: none; border-color: var(--color-rose-deep); } #faq-view .p-faq_count { margin-top: 12px; color: var(--color-gray); font-size: var(--fs-caption); } /* ------------------------------------------------------ カテゴリータブ */ #faq-view .p-faq_tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; } /* 配色は商品一覧ページの絞り込みボタン(.c-pitsole-theme .js-category-filter-btn) と同一に揃える。クリーム地(--color-cream)+インク色の枠線、 選択中はインク地に白文字(.is-activeと同じ)。 */ #faq-view .p-faq_tab { display: inline-flex; align-items: center; padding: 9px 22px; border-radius: var(--radius-btn); border: 1px solid var(--color-ink); background: var(--color-cream); color: var(--color-ink); font-size: var(--fs-caption); letter-spacing: 0.08em; text-decoration: none; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); } #faq-view .p-faq_tab:hover { background: var(--color-rose-light); } #faq-view .p-faq_tab.is-active { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-white); } /* -------------------------------------------------- カテゴリーセクション */ #faq-view .p-faq_sections { margin-top: 40px; } #faq-view .p-faq_cat { /* タブから飛んだときに見出しがヘッダーの下に隠れないようにする */ scroll-margin-top: 90px; } #faq-view .p-faq_cat + .p-faq_cat { margin-top: 56px; } #faq-view .p-faq_cat__title { font-family: var(--font-serif-jp); font-size: var(--fs-h3); letter-spacing: 0.08em; padding-bottom: 16px; } /* ------------------------------------------------------ FAQ 1件ぶん */ #faq-view .p-faq__inner__list { border-top: 1px solid var(--color-line); } #faq-view .p-faq__inner__list__item { border-bottom: 1px solid var(--color-line); } /* カテゴリー内の最後の1件は下線を引かない(区切りは余白で表現する) */ #faq-view .p-faq__inner__list__item:last-child { border-bottom: none; } #faq-view .p-faq__inner__list__item__question { font-size: 0.9375rem; line-height: 1.7; letter-spacing: 0.03em; color: var(--color-ink); } #faq-view .p-faq__inner__list__item__question:hover { color: var(--color-rose-deep); } /* 標準マークアップの Q / A ラベル */ #faq-view .p-faq__inner__list__item__question > .u-text--subhead, #faq-view .p-faq__inner__list__item__answer > .u-text--subhead { font-family: var(--font-serif); color: var(--color-rose-deep); letter-spacing: 0.08em; } #faq-view .p-faq__inner__list__item__question pre { font-family: var(--font-sans); color: inherit; } #faq-view .p-faq__inner__list__item__answer pre { font-family: var(--font-sans); color: var(--color-gray); font-size: 0.9375rem; line-height: 1.95; } #faq-view .p-faq__inner__list__item__answer a { color: var(--color-rose-deep); } /* --------------------------------------------------------- 検索0件 */ #faq-view .p-faq_empty { margin-top: 40px; padding: 40px 20px; text-align: center; background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-card); } #faq-view .p-faq_empty__note { margin-top: 8px; color: var(--color-gray); font-size: var(--fs-caption); } /* --------------------------------------------------- CONTACT誘導 */ /* CONTACTの枠とリンク集をまとめたブロックの上下余白(2026-08-26ユーザー指示)。 上はFAQ本体との間隔、下はフッターとの間隔。 下を padding で持つのは、margin だと
の 外へ抜けてクリームの背景が途切れるため。 */ #faq-view .p-faq_contact_block { padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); } #faq-view .p-faq_contact { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-card); padding: 48px var(--gutter); text-align: center; } #faq-view .p-faq_contact .sec-lead { margin-inline: auto; } /* 【重要】#faq-view のリセット(`#faq-view p { margin: 0 }`)はID詳細度なので、 共通ユーティリティ `.c-pitsole-theme .mt-l`(0,2,0)より強い。

に付ける mt-* が丸ごと打ち消されるため、同じID詳細度で復活させる。 値は .c-pitsole-theme 側の定義と一致させること (ABOUTページで同じ問題を踏んでいる。1934行目付近の注記を参照)。 */ #faq-view .mt-s { margin-top: 16px; } #faq-view .mt-m { margin-top: 24px; } #faq-view .mt-l { margin-top: 40px; } /* 枠の外に置くリンク集。ご利用ガイド・特商法と同じカード状のグリッド。 以前は枠の中の1行テキストリンク(.p-faq_contact__nav)だったが、 モック(pitsole-site/faq.html)は .guide-nav のカード4枚なので合わせた (2026-08-26ユーザー指示)。実体のスタイルは #guide-view / #law-view と 共有しているため、そちらのセレクタに #faq-view を足してある。 */ #faq-view .guide-nav { margin-bottom: 0; } /* JSは表示/非表示をhidden属性で切り替えるが、hiddenのdisplay:noneはUA スタイルなので、display指定を持つ要素(.p-faq_tabsのdisplay:flex等)や bundle.css側のdisplay指定に負ける。#faq-view配下では常に効かせる。 */ #faq-view [hidden] { display: none !important; } /* ============================================================ ABOUTページ(/shop/pages/about)。出典: pitsole-site/about.html フリーページ機構(shop/pages/show.html.liquid)で作るため、本文HTMLは 管理画面「ページ管理」の本文欄に入る。納品ファイル: docs/superpowers/content/2026-08-21-about-page.html 【スコープ方針】 本文の最外郭に #about-view と .c-pitsole-theme を付ける。 .c-pitsole-theme 側に既にある共通部品(section--cream/white/creamdeep、 container、sec-head/label/title/lead、lp-two、btn--primary、link-arrow、 reveal、mt-*、txt-sm/muted、note、center)はそのまま流用し、 ここではABOUT固有のものだけを足す。 【幅制限の解除】 bundle.cssの .p-page_content__inner が max-width:720px を持つ。共通 テンプレートを書き換えると卸売用ページなど既存フリーページに影響が出るため、 :has() でPitsoleのページだけを狙って解除する。JOURNALを作るときは セレクタに #journal-view を足すだけでよい。 ============================================================ */ .p-page_content__inner:has(#about-view) { max-width: none; } /* .p-page_content の左右padding(40px、SP時15px)を打ち消して全幅にする。 100vw+負のmarginは縦スクロールバー分ズレるため使わない(商品一覧で踏んだ地雷)。 中身は .container が1200px幅に戻す。 */ .p-page_content:has(#about-view) { padding-right: 0; padding-left: 0; } #about-view, #about-view *, #about-view *::before, #about-view *::after { box-sizing: border-box; } #about-view { font-family: var(--font-sans); color: var(--color-ink); font-size: var(--fs-body); } /* リセット。同時に bundle.css の `.p-page_content__inner p` (font-size:14px / line-height:2 / margin-top:10px) と `.p-page_content__inner a { text-decoration: underline }` も打ち消す。 これらはフリーページの本文を素のテキストとして整形するための指定で、 デザイン済みのこのページには不要。 */ #about-view p { margin: 0; font-size: inherit; line-height: inherit; } #about-view a { text-decoration: none; } #about-view h1, #about-view h2, #about-view h3 { margin: 0; font-weight: 500; } #about-view ul, #about-view ol { margin: 0; padding: 0; list-style: none; } #about-view img { max-width: 100%; height: auto; } /* 【重要】上のリセットはID選択子なので、`.c-pitsole-theme .mt-l` などの 共通ユーティリティ(クラス2つ=詳細度0,2,0)より強い。

やに付くこれらの ユーティリティが打ち消されてしまうため、同じID詳細度で復活させる。 2026-08-21に sec-lead の中央揃えが効かない不具合として実際に踏んだ箇所。 値は .c-pitsole-theme 側の定義と一致させること。 */ #about-view .mt-s { margin-top: 16px; } #about-view .mt-m { margin-top: 24px; } #about-view .mt-l { margin-top: 40px; } #about-view .txt-sm { font-size: var(--fs-caption); } #about-view .note { font-size: var(--fs-caption); line-height: 1.7; } #about-view .sec-lead { margin-top: 16px; } #about-view .sec-head--center .sec-lead { margin-inline: auto; } /* -------------------------------------------------- 0. 共通テンプレート側の余白 フリーページの共通テンプレート(shop/pages/show.html.liquid)は、本文の手前に 「ページタイトル用の .p-page_header(中身が空の

)」と .u-margin__top--60 の ブロックを出力する。そのためヘッダーとファーストビューの間に約60pxの 白い帯ができる(2026-08-25ユーザー指摘)。 共通テンプレートは卸売用など他のフリーページでも使うので書き換えず、 :has(#about-view) でこのページだけを狙って消す(本文の幅制限を外している .p-page_content__inner:has(#about-view) と同じ手法)。 ※ .l-container の padding-top(bundle.jsが固定ヘッダーの高さぶん付ける)は 消さない。ヘッダーは不透明なので、この逃げが無いと本文がヘッダーに隠れる。 ※ 末尾の .u-margin__bottom--100 も消す。本文の最後のセクションが section--cream(色付き)なので、残すとフッターとの間に白い帯ができる。 */ .l-container:has(#about-view) > .l-container__row:has(.p-page_header) { display: none; } .l-container:has(#about-view) > .l-container__row:has(.p-page_content) { margin-top: 0; margin-bottom: 0; } /* -------------------------------------------------- 1. ファーストビュー */ #about-view .about-hero { position: relative; height: 88svh; min-height: 520px; display: grid; place-items: center; overflow: hidden; background: var(--color-ink); } /* 見出しの縦位置。pitsole-siteでは画像を で包んでいるため、 (中のimgはposition:absoluteなので高さ0)がグリッドの1行目を占め、 align-content:normal(=stretch)で余白が2行に均等配分される結果、 見出しが中央ではなく高さの約75%の位置に来る。 テーマ側の本文は直書き(imgは絶対配置なので行を作らない)でグリッド項目が 見出しだけになり、ちょうど中央に来てしまっていた(2026-08-25ユーザー指摘)。 本文はDBレコードなので触らず、高さ0の疑似要素で1行目を作って同じ配置にする。 */ #about-view .about-hero::before { content: ""; display: block; height: 0; } /* 本文をSP画像対応(で包む)に差し替えた場合は、その自身が pitsole-siteと同じ「高さ0の1行目」になる。上の::beforeを残すと行が3つに なり、見出しがさらに下がってしまうので打ち消す(2026-08-26)。 :has()で分岐しているのは、管理画面の本文がまだ直書きのままでも 見出し位置が崩れないようにするため(貼り替えの前後どちらでも正しく出る)。 */ #about-view .about-hero:has(picture)::before { display: none; } #about-view .about-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #about-view .about-hero::after { content: ""; position: absolute; inset: 0; background: rgba(59, 43, 43, 0.34); } #about-view .about-hero__title { position: relative; z-index: 2; color: var(--color-white); font-family: var(--font-serif-jp); font-size: clamp(2.25rem, 9vw, 4rem); letter-spacing: 0.2em; } /* ------------------------------------------------ 2. ブランドストーリー */ #about-view .story { max-width: 640px; margin-inline: auto; text-align: center; } #about-view .story p { font-family: var(--font-serif-jp); font-size: clamp(1rem, 3.6vw, 1.25rem); line-height: 2.6; letter-spacing: 0.12em; } #about-view .story p + p { margin-top: 2.2em; } #about-view .story .sign { margin-top: 3em; font-size: clamp(1.375rem, 5vw, 2rem); letter-spacing: 0.24em; color: var(--color-rose-deep); } #about-view .serif { font-family: var(--font-serif-jp); font-weight: 500; letter-spacing: 0.08em; } /* ---------------------------------------------------- 3. 左右対比パネル */ #about-view .split { display: grid; } @media (min-width: 768px) { #about-view .split { grid-template-columns: 1fr 1fr; } } #about-view .split__pane { padding: clamp(48px, 8vw, 96px) var(--gutter); display: grid; place-items: center; text-align: center; } #about-view .split__pane--ink { background: var(--color-ink); color: var(--color-white); } #about-view .split__pane--rose { background: var(--color-rose-light); color: var(--color-ink); } /* max-width の em はこの
自身のフォントサイズ(継承した16px)基準になるが、 中の

は clamp(1.0625rem, 3.6vw, 1.375rem) で最大22pxまで大きくなる。 26emだと416pxしかなく「美しく歩くことは、美しく生きること。」(18文字 = 約443px)が 入り切らず、「こ / と。」の位置で折り返していた(2026-08-25ユーザー指摘)。 pitsole-site側も同じ理由で後から34emに広げている(style.cssの調整ブロック)。 */ #about-view .split__pane > div { max-width: 34em; } #about-view .split__pane p { font-family: var(--font-serif-jp); font-size: clamp(1.0625rem, 3.6vw, 1.375rem); line-height: 2.2; letter-spacing: 0.12em; } #about-view .split__label { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.28em; display: block; opacity: 0.75; } #about-view .split__pane--ink .split__label { color: var(--color-rose-light); } #about-view .split__pane--rose .split__label { color: var(--color-rose-deep); opacity: 1; } /* ------------------------------------------------ 4. 「美しい」の5つの言葉 */ #about-view .beauty-words { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 40px; padding-block: 8px; } #about-view .beauty-words li { position: relative; padding-bottom: 10px; font-family: var(--font-serif-jp); font-size: clamp(1.125rem, 4vw, 1.5rem); letter-spacing: 0.18em; color: var(--color-ink); } #about-view .beauty-words li::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 20px; height: 1px; background: var(--color-rose); } /* ------------------------------------------------------------- 5. PVM */ #about-view .pvm-list { display: grid; gap: 40px; } @media (min-width: 768px) { #about-view .pvm-list--3 { grid-template-columns: repeat(3, 1fr); } } #about-view .pvm__item { border-top: 1px solid var(--color-line); padding-top: 24px; } #about-view .pvm__item--wide { grid-column: 1 / -1; } #about-view .pvm__label { font-family: var(--font-serif); letter-spacing: 0.2em; font-size: 0.8125rem; color: var(--color-rose-deep); } #about-view .pvm__text { margin-top: 10px; font-family: var(--font-serif-jp); font-size: var(--fs-h3); line-height: 1.8; } #about-view .pvm__note { margin-top: 10px; font-size: var(--fs-caption); color: var(--color-gray); line-height: 1.9; } #about-view .pvm__values { margin-top: 20px; display: grid; gap: 14px; } @media (min-width: 1024px) { #about-view .pvm__values { grid-template-columns: repeat(3, 1fr); gap: 20px; } } #about-view .pvm__values li { display: flex; gap: 12px; align-items: baseline; } #about-view .pvm__vno { font-family: var(--font-serif); color: var(--color-rose-deep); font-size: 0.9375rem; letter-spacing: 0.06em; } #about-view .pvm__vbody { font-size: var(--fs-caption); color: var(--color-gray); line-height: 1.9; } #about-view .pvm__vbody b { display: block; font-weight: 500; color: var(--color-ink); font-size: 0.9375rem; margin-bottom: 2px; } /* -------------------------------------------------- 6. プロダクト哲学 */ #about-view .philosophy__body p { line-height: 2.1; } #about-view .philosophy__body > p + p { margin-top: 1.4em; } /* ------------------------------------------------------- 7. 運営会社 */ #about-view .company-dl > div { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--color-line); } @media (min-width: 640px) { #about-view .company-dl > div { grid-template-columns: 7em 1fr; gap: 16px; align-items: baseline; } } #about-view .company-dl dt { font-size: var(--fs-caption); color: var(--color-gray); letter-spacing: 0.08em; } #about-view .company-dl dd { margin: 0; font-size: 0.9375rem; } /* ------------------------------------------------------- 締めのCTA */ /* 2026-08-26: 上にあったCOMPANY(運営会社)ブロックを削除したので、 区切り線(border-top)と、その線からの間隔(padding-top)は不要になった。 セクションの先頭に来るため、.section の上下padding(--sec-pad)だけで足りる。 会社情報を戻す場合はこの2行も戻すこと。 */ #about-view .about-cta { text-align: center; } /* font-sizeの最小値だけ、pitsole-siteの clamp(1.125rem, 4vw, 1.5rem) から下げている。 pitsole-siteのSP実測値は15px = 375px幅における 4vw ちょうどで、可変値(4vw)が 効いている状態。一方1.125rem(18px)を最小値にすると375pxでは18pxが下限として 勝ってしまい、モックより大きくなっていた(2026-08-25ユーザー指摘)。 最小値を0.75rem(12px)まで下げると300px幅以上で4vwが効き、モックと同じ見え方になる。 副産物として「いつもの一歩から、はじめてみませんか。」(19文字)も1行に収まる (375px: 文字319px < 使える幅335px、320px: 272px < 280px)。 */ #about-view .about-cta__text { font-family: var(--font-serif-jp); font-size: clamp(0.75rem, 4vw, 1.5rem); letter-spacing: 0.12em; line-height: 1.9; } /* ------------------------------------------------- 追加ユーティリティ */ #about-view .sp-br { display: inline; } #about-view .pc-br { display: none; } @media (min-width: 768px) { #about-view .sp-br { display: none; } #about-view .pc-br { display: inline; } } #about-view .mt-xl { margin-top: clamp(48px, 8vw, 88px); } /* ============================================================ JOURNAL(お知らせ機能のcolumnカテゴリー) 出典: pitsole-site/journal/index.html および journal/*.html 【スコープ方針】 一覧ページ : #journal-view(information_categories/show.html.liquid) 記事詳細 : #information-show-view.is-pitsole-article (informations/show.html.liquid。newsの記事詳細と共通の テンプレートなので、columnのときだけクラスを付けて出し分ける) news(17件・実運用中)とmedia/新着情報の見た目は一切変えない。 【タグ絞り込みは実装しない】 ecforceのお知らせは1記事1カテゴリー(information_categoryが単数)で、 記事ごとのタグを持てる項目が無い。2026-08-21にユーザー判断でタグなしに確定。 ============================================================ */ /* 一覧はbundle.cssの幅制限を解除し、.containerに幅(1200px)を任せる。 記事詳細の本文幅は下の .p-page_article__inner で760pxに指定する (bundle.cssの720pxを上書き)。 */ #journal-view .p-journal { max-width: none; } #journal-view, #journal-view *, #journal-view *::before, #journal-view *::after, #information-show-view.is-pitsole-article, #information-show-view.is-pitsole-article * { box-sizing: border-box; } #journal-view, #information-show-view.is-pitsole-article { font-family: var(--font-sans); color: var(--color-ink); font-size: var(--fs-body); } /* リセット。bundle.cssの本文向け指定(font-size:14px等)を打ち消す。 ID詳細度で共通ユーティリティに勝ってしまう問題はABOUTページで踏んだので、 打ち消した分は下で復活させる。 */ #journal-view p, #journal-view h1, #journal-view h2, #journal-view h3 { margin: 0; } #journal-view h1, #journal-view h2, #journal-view h3 { font-weight: 500; } #journal-view a { text-decoration: none; color: inherit; } #journal-view img { max-width: 100%; height: auto; display: block; } #journal-view .sp-br { display: inline; } #journal-view .pc-br { display: none; } @media (min-width: 768px) { #journal-view .sp-br { display: none; } #journal-view .pc-br { display: inline; } } /* ----------------------------------------------- 一覧: ページヒーロー */ #journal-view .p-journal_hero { padding: 32px 0 40px; margin-top: 32px; } #journal-view .p-journal_hero .c-breadcrumbs { margin: 0 0 20px; padding: 0; } #journal-view .p-journal_hero__body { margin-top: 20px; } #journal-view .p-journal_hero__title { display: block; margin-top: 6px; } #journal-view .p-journal_hero__lead { margin-top: 14px; color: var(--color-gray); max-width: 44em; line-height: 2; } /* --------------------------------------------------- 一覧: カード */ /* ヒーローとカード一覧の間に余白が無く、記事がヒーローに貼り付いて見えていた (2026-08-26ユーザー指摘)。モックの journal/index.html は ヒーロー(.page-hero、下48px)のあとに .section.section--cream が続き、 --sec-pad(SP 64px / 768px以上 96px / 1024px以上 120px)の上下余白を持つ。 同じ間隔になるよう上余白を足す。下は従来の80pxからモックの--sec-padに揃える。 */ #journal-view .p-journal { padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); } #journal-view .p-journal__grid { display: grid; gap: 32px; } @media (min-width: 768px) { #journal-view .p-journal__grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } } #journal-view .c-journal_card { display: block; } #journal-view .c-journal_card__img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; border-radius: var(--radius-card); transition: transform var(--dur) var(--ease); } #journal-view .c-journal_card:hover .c-journal_card__img { transform: scale(1.03); } #journal-view .c-journal_card__meta { margin-top: 14px; display: flex; align-items: center; gap: 10px; font-size: var(--fs-caption); color: var(--color-gray); } #journal-view .c-journal_card__title { margin-top: 8px; font-family: var(--font-serif-jp); font-size: 1.0625rem; line-height: 1.7; } #journal-view .c-journal_card:hover .c-journal_card__title { color: var(--color-rose-deep); } #journal-view .p-journal__empty { padding: 80px 0; text-align: center; color: var(--color-gray); font-size: var(--fs-caption); } /* --------------------------------------------- 記事詳細: ヒーロー */ #information-show-view.is-pitsole-article .p-journal_article_hero { padding: 32px 0 0; margin-top: 32px; max-width: 760px; margin-inline: auto; } #information-show-view.is-pitsole-article .p-journal_article_hero .c-breadcrumbs { margin: 0 0 24px; padding: 0; } /* カテゴリーのラベル(JOURNAL / NEWS)。他ページのヒーローと同じ .sec-label。 直後の日付との間隔は .sec-label 側の margin-bottom:10px に任せる。 */ #information-show-view.is-pitsole-article .p-journal_article_hero .sec-label { margin-bottom: 6px; } #information-show-view.is-pitsole-article .p-journal_article_hero__meta { font-size: var(--fs-caption); color: var(--color-gray); letter-spacing: 0.06em; } #information-show-view.is-pitsole-article .p-journal_article_hero__title { margin: 10px 0 0; font-family: var(--font-serif-jp); font-weight: 500; font-size: clamp(1.375rem, 5vw, 1.875rem); line-height: 1.7; letter-spacing: 0.06em; } #information-show-view.is-pitsole-article .p-journal_article_hero__img { margin-top: 32px; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-card); } /* ------------------------------------------------- 記事詳細: 本文 */ /* ヒーロー(上32px開始)と本文の間隔。テンプレート側の u-margin__top--40 は pitsole記事では外しているので、ここで持つ。 */ #information-show-view.is-pitsole-article .p-page_article { padding-top: 40px; } #information-show-view.is-pitsole-article .p-page_article__inner { max-width: 760px; margin-inline: auto; } #information-show-view.is-pitsole-article .p-page_article__inner p { font-size: var(--fs-body); line-height: 2.1; margin-top: 1.4em; } /* 見出しの左に縦線を入れる(2026-08-26ユーザー指示)。 出典: pitsole-site の `.article__body h2 { padding-left: 14px; border-left: 2px solid var(--color-rose) }`。 .toc の中の

CONTENTS

にも当たってしまうので、 :not(.toc h2) 相当を作れないぶん .toc 側で打ち消している(下)。 */ #information-show-view.is-pitsole-article .p-page_article__inner h2 { margin-top: 2.4em; font-family: var(--font-serif-jp); font-weight: 500; font-size: var(--fs-h3); line-height: 1.6; letter-spacing: 0.06em; padding-left: 14px; border-left: 2px solid var(--color-rose); } /* 小見出しはワインレッド(2026-08-26ユーザー指示)。 出典: pitsole-site の `.article__body h3 { color: var(--color-rose-deep) }`。 モックは font-family を指定しておらず body のゴシックを継いでいる。 テーマ側は `.c-pitsole-theme h1, h2, h3` が明朝(--pitsole-font-heading)を 当てているため、ここで明示的にゴシックへ戻す(2026-08-26ユーザー指摘)。 */ #information-show-view.is-pitsole-article .p-page_article__inner h3 { margin-top: 1.8em; font-family: var(--font-sans); font-weight: 500; font-size: 1.0625rem; color: var(--color-rose-deep); } #information-show-view.is-pitsole-article .p-page_article__inner img { margin-top: 1.8em; width: 100%; height: auto; border-radius: var(--radius-card); } #information-show-view.is-pitsole-article .p-page_article__inner a { color: var(--color-rose-deep); } /* bundle.css の .p-page_article__inner ul は margin-left: 1.5em を、 その li は list-style: decimal を持っている(ol側は list-style: disc で、 ul/ol の指定が入れ替わっている)。そのため