/* カスタマイズ用CSS */ apg_sc_table {border-collapse: collapse;border-spacing: 0;line-height: 1.5;margin-left: auto;margin-right: 10px;margin-bottom: 20px;float: left;}.apg_sc_table th,.apg_sc_table td {border: 1px solid #ccc;}.apg_sc_table thead th {padding: 10px;font-weight: bold;vertical-align: top;color: #fff;background: #efefef;}.apg_sc_table tbody th {background: #efefef;line-height: 2.4em;text-align: center;}.apg_sc_table td {padding: 10px;vertical-align: top;text-align: center;background-color: #fff;}/* ★休日のカラーはここで設定しています。*/.apg_sc_table .apg_sc_holiday {background: #ECC6C7!important;}.apg_sc_table .apg_sc_saturday {/*background: #BDE2E8;*/}.apg_sc_table .apg_sc_sunday,.apg_sc_table .apg_sc_sunday {/*background: #ECC6C7;*/}@media only screen and (max-width: 767px) {.apg_sc_table {float: none;margin-top: 20px;margin-right: auto;}} /* ======================================================== トップページの見出し（h2）の見た目を完全に1つに統一する ======================================================== */ .ec-newsRole h2, .plugin_osusume h2, .plugin_newitem h2, .plugin_rankingauto h2 { font-size: 20px !important; /* すべての見出しの大きさを20pxに完全固定 */ font-weight: bold !important; /* すべて同じ太字（ボールド）に固定 */ color: #333333 !important; /* 文字の色を統一 */ margin: 1.5em 0 0.5em 0 !important; /* 上下の余白（間隔）も統一 */ padding: 0 !important; line-height: 1.4 !important; display: block !important; text-align: left !important; /* すべての見出しを左寄せに固定 */ } /* ======================================================== 【超重要】h3のまま頑固に残っている売上ランキングを狙い撃ちして縮める ======================================================== */ .plugin_rankingauto h3, .plugin_rankingauto .ni-pageHeader h3, .plugin_rankingauto div.ni-pageHeader h3 { font-size: 20px !important; /* ★h3のままであっても、強制的に20px（他と同じ）に縮めます */ font-weight: bold !important; /* 他と同じ太さに統一 */ margin: 1.5em 0 0.5em 0 !important; /* 余白も他と揃える */ } /* ======================================================== NEWSエリア（h2）のスマホ崩れ防止・左寄せ調整 ======================================================== */ .ec-newsRole h2.ec-secHeading { display: block !important; text-align: left !important; } /* 英語の「NEWS」は大文字で主役サイズ（20px太字）にして、下へ強制改行 */ .ec-newsRole h2.ec-secHeading .ec-secHeading__en { font-size: 20px !important; font-weight: bold !important; color: #333333 !important; display: block !important; margin-bottom: 5px !important; } /* 日本語の「キャンペーン情報・新着情報」はスマホでも読めるサイズ（13px細字）で下に添える */ .ec-newsRole h2.ec-secHeading .ec-secHeading__ja { font-size: 13px !important; font-weight: normal !important; color: #666666 !important; display: block !important; } /* サイズが揃わない原因になる、英語と日本語の間の「縦線（バー）」を非表示に */ .ec-newsRole h2.ec-secHeading .ec-secHeading__line { display: none !important; } /* ========================================================================== 【Google監査対策】干渉しない基本最適化ルール（ヘッダーメニューは完全に除外） ========================================================================== */ /* 1. 白背景エリアにある一般的なテキストを、少し読みやすい濃さに補正 */ body, p, dt, dd, li, td, th, .item_name { color: #222222; } /* 2. 価格表記やサブテキストなど、薄くなりがちな文字を補正 */ .item_price, .text-muted, small, .help-block { color: #111111; } /* 3. HTMLの古い font[color="red"] の明るい赤を、Google合格基準の「濃い赤」に上書き */ .ec-color-red, span.ec-color-red, font[color="red"], font[color="#ff0000"] { color: #c90000 !important; } /* 4. ?? 新着情報のタイトル文字を、はっきり読める「深い黒」に強制上書き */ .ec-newsRole__newsTitle, .ec-newsRole__newsTitle a { color: #111111 !important; } /* 5. ?? 特設シリーズバナーボタンの文字色のコントラストを100%確保 */ .ec-blockBtn--top, a.ec-blockBtn--top, a.ec-blockBtn--top:link, a.ec-blockBtn--top:visited, a.ec-blockBtn--top span { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important; } /* 6. ?? フッター領域の暗い背景と同化しているすべてのリンクテキストを、はっきり見える「白」に強制最適化 */ .ec-footerRole, .ec-footerRole a, .ec-footerRole a:link, .ec-footerRole a:visited { color: #ffffff !important; } .ec-footerRole a:hover, .ec-footerRole a:focus { color: #e0e0e0 !important; } /* ========================================================================== 【Google監査（CLS）対策】Slickスライダー初期読み込み時のガタつき防止 ========================================================================== */ /* 1. スライダーが初期化される前の縦並び崩れを防ぎ、横並びをキープする */ .slick-slider:not(.slick-initialized) { display: flex !important; overflow: hidden !important; white-space: nowrap !important; } .slick-slider:not(.slick-initialized) .slick-slide { display: inline-block !important; flex: 0 0 100% !important; /* 横幅100%で1枚ずつ並べる */ width: 100% !important; } /* 2. 【最重要】バナーやスライダーの高さを最初から強制的に確保する */ /* ※一般的なECサイトのメイン画像アスペクト比（16:9など）に合わせて、 JSが動く前から「画像の入る枠」をキープし、下のコンテンツの押し下げを防ぎます */ .slick-slider:not(.slick-initialized) { aspect-ratio: 16 / 9; /* スライダー画像の実際の比率（横/縦）に合わせて調整してください */ background: #f7f7f7; /* 画像が出るまでのプレースホルダー背景 */ } /* 3. ドットナビゲーション（下部の丸ボタン）のエリアも事前に確保 */ ul.slick-dots:not(.slick-initialized) { display: flex !important; justify-content: center; list-style: none; padding: 10px 0; min-height: 40px; /* ドットが表示されるエリアの最低高さを確保 */ } /* ========================================================================== 【Google監査（CLS）対策】サイドバーのFontAwesomeアイコン、 フォント読み込み前後でのサイズ変化によるガタつき防止 （「ポイントについて」「送料無料お知らせ」「ご利用ガイド」等で使用） ========================================================================== */ .fas, .far, .fab { display: inline-block; width: 1em; text-align: center; } /* ========================================================================== 【Google監査（コントラスト）対策】「カートに入れる」ボタンの配色を、 既に対応済みの#DE5D50→#C0392Bに統一してコントラスト比を確保 （白文字とのコントラスト比: 約3.62:1 → 約5.43:1） ========================================================================== */ .ec-blockBtn--action { background-color: #C0392B !important; border-color: #C0392B !important; } /* ========================================================================== 【Google監査（タップターゲット）対策】在庫状況・口コミリンク、 規格選択セレクトのクリック/タップ領域を拡大 ========================================================================== */ .ec-shelfGrid__item a[href^="javascript:showStock"], .ec-shelfGrid__item a[href*="#main_bottom"] { display: inline-block; padding: 8px 6px; } .ec-productRole__actions select.form-control { min-height: 44px; padding: 8px; } /* ========================================================================== 【Google監査（CLS）対策】縦スクロールバーの出現・消失によるページ全体の 横幅変化（デスクトップのみ発生）を防止するため、スクロールバー分の スペースを常に確保しておく ========================================================================== */ html { overflow-y: scroll; } /* ========================================================================== 【Google監査（コントラスト）対策】商品詳細ページの価格表示（¥6,800等）と 「税込」表示のコントラスト比を確保 ========================================================================== */ .ec-price__price, .ec-productRole__priceRegular { color: #C0392B !important; } .ec-price__tax, .ec-productRole__priceRegularTax { color: #666666 !important; } /* ========================================================================== 【Google監査（タップターゲット）対策】商品詳細ページの「関連カテゴリ」 リンク（パタフライ等）のタップ領域を拡大 ========================================================================== */ .ec-productRole__category a { display: inline-block; padding: 6px 4px; min-height: 24px; line-height: 1.5; } /* ========================================================================== 【Google監査（CLS）対策】ヘッダーのカテゴリ横並びメニュー (globalmenuA.twig / .ec-categoryNaviRole) の高さを事前に確保し、 折り返し行数が変化してもレイアウトシフトが起きないようにする ※ 画面幅によって折り返し行数が変わる(1681px幅で2行=100px、1497px幅で 　3行=150pxを実測)ため、より狭い画面幅でも収まるよう余裕を持たせて 　200pxを確保。中身がそれより低い幅では下に余白ができるだけでCLSには 　ならない ========================================================================== */ @media only screen and (min-width: 768px) { .ec-categoryNaviRole { min-height: 200px; } } /* ========================================================================== 【Google監査（CLS）対策】ヘッダーロゴ画像(logo.png)のサイズ未指定対策 width/height属性はあるが、CSS側でheight:autoになっているため aspect-ratioで比率を明示し、読み込み前から領域を確保する ========================================================================== */ img[src*="common/logo.png"] { aspect-ratio: 410 / 82; height: auto; } /* ========================================================================== 【Google監査（コントラスト）対策】ヘッダーの横並びメニューのサブカテゴリ (globalmenuA.twig / .ec-categoryNaviRole 2階層目以降)で、サイト側の元々の CSSに同じセレクタに対する「黒背景×白文字」と「薄いグレー背景×濃い文字」の 2種類のルールが存在し、表示される文脈によってどちらが効くか一定しないため 文字色だけでなく背景色も一緒に固定し、組み合わせを保証する ========================================================================== */ .ec-itemNav__nav li ul li a { background-color: #f5f5f5 !important; color: #333333 !important; } /* 3階層目(さらに下のサブカテゴリ)も同様に背景色・文字色を一緒に固定する */ .ec-itemNav__nav li ul li ul li a { background-color: #333333 !important; color: #ffffff !important; } /* ========================================================================== 【Google監査（クロール不可のリンク）対策】news.twigの開閉ボタンを から