/* ================================================================== help.css … 説明・ヘルプ系ページの共通CSS（2026-10-26） 使うページの {% block stylesheet %} で読み込む（2026-10-29 から。default_frame.twig は本番のまま変えない）。 読み込んでいるのは17ページ：ご利用ガイド・お問い合わせ・FAQトップとFAQ 6ページ・会員・アプリ・パーツ・修理・返品・メールが届かない・領収書・サービス一覧。 下の部品（uf- / guide- / help- / rp- / rc- / faqPage）を新しいページで使うときは、そのページにも読み込みを足す。 読み込みに ?v= は付けない（2026-10-29 決定。customize.css と同じ）。直したあと、ブラウザと CloudFront のキャッシュで反映まで1時間ほどかかることがある ページの型と使う部品 ① 入口（サービス一覧・FAQトップ・お問い合わせのFAQメニュー） … .uf / .uf-hero / .uf-grid / .uf-tile ② 説明（ご利用ガイド・修理・パーツ・返品・会員・アプリ など） … .guidePage と guide-*、最後に .help-related ③ Q&A（よくあるご質問の各ページ。body に faqPage） … .faqPage の中の subPage-qaBlock-* ④ 規約（ご利用規約・アプリ利用規約・特商法・個人情報 など） … サイト共通の subPage-contents-title と ol 色はサイトの赤（#D71E0E）とグレーだけ。文字は Noto Sans JP、数字は Inter（どちらもサイト全体で読み込み済み） 確認用の印（guide-mark / guide-review / guide-reviewLegend）の見た目は help-review.css（STGだけ。default_frame.twig で読む） ================================================================== */ :root { --uf-red: #D71E0E; --uf-red-deep: #A8170B; --uf-ink: #1D1F24; --uf-text: #3B3D46; --uf-sub: #6A6C78; --uf-tile: #F3F4F6; --uf-line: #E3E5EA; } /* ------------------------------------------------------------------ ご利用ガイド (Help/guide.twig) (2026-10-23) guide-* … ガイド全体で使う部品（見出し・表・リスト・未確定の枠） guideDeliv-* … 「配送・お届け」(#deliv) だけの部品 guidePay-* … 「お支払い」(#pay) だけの部品 ------------------------------------------------------------------ */ /* サイト全体の word-break: break-all だと「44,0／00円」のように数字の途中で折れるので、ガイドの中だけ戻す */ .guidePage .subPage-contents { word-break: normal; overflow-wrap: anywhere; } /* 文字の強弱：太字（strong）・赤の太字（strong.is-red）・小さめのグレー（補足） */ .guidePage strong { font-weight: bold; } /* 見出し：h3 の帯（区分・お支払い方法）と、小見出し（赤い縦線） */ .subPage-contents-block.guide-block { margin-top: 56px; } .guide-block, .guide-heading[id], .guideDeliv-kind { scroll-margin-top: 100px; } .guide-band { margin: 0 0 18px; padding: 10px 16px; background: #3C3C3C; border-radius: 4px; color: #fff; font-size: 1.6rem; font-weight: bold; letter-spacing: 0.05em; line-height: 1.5; } .guide-heading { margin: 28px 0 8px; padding: 0 0 0 10px; border-left: 4px solid #D71E0E; font-size: 1.5rem; font-weight: bold; letter-spacing: 0.05em; line-height: 1.5; } /* 見出しのレベルで左のインデントを変える（h2 は 0、h3 は 12px、h4 は 24px）。本文も見出しに合わせて下げる ・h3 のあとに続く本文 → 12px、h4 のあとに続く本文 → 24px（ブロックの中で h4 より後ろのものは h4 の本文として扱う） ・サイトのCSSで p などの幅が 100% なので、下げた分はみ出さないよう width を auto に戻す */ .guidePage h3.guide-band, .guidePage h3.guide-heading { margin-left: 12px; } .guidePage .subPage-contents-block > h3 ~ * { margin-left: 12px; width: auto; } .guidePage .subPage-contents-block > h4 ~ *, .guidePage .subPage-contents-block > h4.guide-heading { margin-left: 24px; width: auto; } .guide-band + .guide-heading, .subPage-contents-block > .guide-heading:first-child { margin-top: 0; } /* 補足（小さめのグレー）・ラベル */ .subPage-contents .guide-note { margin-top: 6px; font-size: 1.3rem; color: #666; } .subPage-contents .guide-label { margin-top: 16px; font-weight: bold; } .subPage-contents .guide-label + .guide-nav, .subPage-contents .guide-label + .guide-list { margin-top: 6px; } /* 欄の中の区分・方法へのリンク */ .guide-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; padding: 0; list-style: none; } .guide-nav li { margin: 0; padding: 0; } .subPage-contents .guide-nav a { display: block; padding: 8px 16px; background: #fff; border: 1px solid #CCCCCC; border-radius: 5px; color: #000; font-size: 1.4rem; line-height: 1.6; text-decoration: none; } .subPage-contents .guide-nav a:hover { border-color: #D71E0E; color: #D71E0E; } /* 表 */ .guide-tableWrap { width: 100%; margin: 10px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } .guide-table { width: 100%; border-collapse: collapse; font-size: 1.4rem; letter-spacing: 0.05em; line-height: 1.6; } .guide-table th, .guide-table td { padding: 12px 16px; border: 1px solid #CCCCCC; text-align: left; vertical-align: middle; font-weight: normal; } .guide-table thead th { background: #F5F5F5; font-weight: bold; white-space: nowrap; } .guide-table tbody th { background: #FAFAFA; font-weight: bold; white-space: nowrap; } .guide-table .is-price { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .guide-table .is-free { color: #D71E0E; font-weight: bold; } .guide-table .is-na { color: #999; } .guide-thNote { display: block; margin-top: 2px; font-size: 1.2rem; font-weight: normal; color: #666; } /* 配送方法 × 区分（大型品の送料） */ .guide-table.is-compare thead th { text-align: center; } .guide-table.is-compare thead th:first-child { text-align: left; } .guide-table.is-compare td { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; } /* 早見表（項目 × 区分・お支払い方法） */ .guide-table.is-summary { font-size: 1.3rem; } .guide-table.is-summary th, .guide-table.is-summary td { vertical-align: top; } .guide-table.is-summary thead th { text-align: center; } .guide-table.is-summary thead th:first-child { width: 9em; text-align: left; } .subPage-contents .guide-table.is-summary thead a { color: #000; } .guide-table.is-summary .guide-tbd-label + .guide-tbd-text { margin-left: 6px; } /* 代引手数料の表 */ .guide-table.is-fee { width: auto; min-width: 360px; } /* リスト */ .guide-list { margin: 0; padding: 0 0 0 1.4em; list-style: disc; } .guide-list li { margin: 0; padding: 0; line-height: 1.78; } .guide-list li + li { margin-top: 4px; } .subPage-contents p + .guide-list { margin-top: 6px; } .guide-list.is-num { list-style: decimal; } /* 項目と内容の組（お問い合わせ先など） */ .guide-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; padding: 12px 16px; border: 1px solid #CCCCCC; border-radius: 5px; font-size: 1.4rem; line-height: 1.6; } .guide-dl dt { margin: 0; font-weight: bold; } .guide-dl dd { margin: 0; } /* 未確定の項目（内容が決まったら本文に書き換え、本番公開までに無くす） */ .guide-tbd { margin: 8px 0 0; padding: 8px 12px; background: #FFF8DC; border: 1px dashed #D4A017; border-radius: 4px; color: #5C4600; font-size: 1.3rem; line-height: 1.6; } .guide-tbd-label { display: inline-block; margin-right: 8px; padding: 0 6px; background: #D4A017; border-radius: 3px; color: #fff; font-size: 1.2rem; font-weight: bold; } .guide-tbd-text { color: #5C4600; font-size: 1.2rem; } /* ── 配送・お届け (#deliv) ── */ .guideDeliv-ex { font-size: 1.3rem; color: #666; } /* 送料無料の一文は赤い枠で囲む */ .subPage-contents .guideDeliv-free { margin: 0 0 12px; padding: 10px 14px; background: #FFF4F3; border: 1px solid #D71E0E; border-radius: 5px; color: #D71E0E; } .guideDeliv-free-note { font-size: 1.3rem; } /* 区分ごとの「対象商品を見る」ボタン */ .subPage-contents .guideDeliv-items { margin: 10px 0 0; } .subPage-contents .guideDeliv-items a { display: inline-block; padding: 8px 16px; background: #fff; border: 1px solid #D71E0E; border-radius: 5px; color: #D71E0E; font-weight: bold; font-size: 1.4rem; line-height: 1.5; text-decoration: none; } .subPage-contents .guideDeliv-items a::after { content: "＞"; margin-left: 8px; } .subPage-contents .guideDeliv-items a:hover { background: #FFF4F3; } /* 仮のボタン（商品タグ未作成）：枠を点線にして「未確定」を添える */ .subPage-contents .guideDeliv-items.is-tbd a { border-style: dashed; } .subPage-contents .guideDeliv-items.is-tbd .guide-tbd-label { margin-left: 10px; } /* 大型品の区分（h5：通常の大型品・特殊A・特殊B） */ .guideDeliv-kind { margin: 12px 0 0; padding: 12px 16px 14px; border: 1px solid #DDDDDD; border-radius: 5px; } .guideDeliv-kind-title { margin: 0 0 4px; font-size: 1.5rem; font-weight: bold; line-height: 1.5; } .guideDeliv-region { display: inline-block; margin-top: 4px; padding: 0 6px; background: #fff; border: 1px solid #CCCCCC; border-radius: 3px; font-size: 1.2rem; font-weight: normal; line-height: 1.6; } /* 配送方法のカードと、条件（お届け先・お届け日） */ .guideDeliv-method { margin: 16px 0 0; padding: 16px 20px 20px; border: 1px solid #CCCCCC; border-radius: 5px; } .guideDeliv-method-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; font-size: 1.5rem; font-weight: bold; line-height: 1.5; } .guideDeliv-for { padding: 2px 8px; background: #F5F5F5; border: 1px solid #CCCCCC; border-radius: 3px; font-size: 1.2rem; font-weight: normal; letter-spacing: 0.03em; } .guideDeliv-cond { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 12px; padding: 10px 14px; background: #F5F5F5; border-radius: 4px; font-size: 1.4rem; line-height: 1.6; } .guideDeliv-cond dt { margin: 0; font-weight: bold; } .guideDeliv-cond dd { margin: 0; } /* ── お支払い (#pay) ── */ .guidePay-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 10px; } .guidePay-logos img { display: block; width: auto; height: 34px; } /* 振込先 */ .guidePay-bank { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 10px 0 0; padding: 12px 16px; border: 1px solid #CCCCCC; border-radius: 5px; font-size: 1.4rem; line-height: 1.6; } .guidePay-bank dt { margin: 0; font-weight: bold; } .guidePay-bank dd { margin: 0; font-variant-numeric: tabular-nums; } @media (max-width: 767px) { .guide-table { font-size: 1.3rem; } .guide-table th, .guide-table td { padding: 10px; word-break: keep-all; overflow-wrap: anywhere; } .guide-table .is-price { white-space: normal; } .guide-table tbody th { white-space: normal; } .guide-table.is-area tbody th { white-space: nowrap; } .guide-table.is-compare tbody th { min-width: 6.5em; } .guide-table.is-compare td { padding: 10px 4px; } .guide-table.is-summary { min-width: 520px; } .guide-table.is-summary.is-pay { min-width: 600px; } .guide-table.is-summary thead th:first-child { width: auto; min-width: 7em; } /* 横にスクロールしても項目名が見えるよう、左の列を固定する */ .guide-table.is-summary tr > :first-child { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 #CCCCCC; } .guide-table.is-fee { width: 100%; min-width: 0; } .subPage-contents-block.guide-block { margin-top: 44px; } .guidePage h3.guide-band, .guidePage h3.guide-heading, .guidePage .subPage-contents-block > h3 ~ * { margin-left: 8px; } .guidePage .subPage-contents-block > h4 ~ *, .guidePage .subPage-contents-block > h4.guide-heading { margin-left: 16px; } .guideDeliv-method { padding: 14px 14px 16px; } .guideDeliv-kind { padding: 12px 14px 14px; } } .uf { max-width: 1080px; margin: 0 auto; padding: 8px 0 72px; color: var(--uf-text); font-size: 1.5rem; line-height: 1.8; word-break: normal; overflow-wrap: anywhere; } .uf *, .uf *::before, .uf *::after { box-sizing: border-box; } .uf p { margin: 0; } .uf a:focus-visible { outline: 2px solid var(--uf-red); outline-offset: 3px; border-radius: 4px; } /* 見出しとリード文 */ .uf-hero { max-width: 760px; padding: 24px 0 40px; } .uf-hero__eyebrow { margin-bottom: 12px; color: var(--uf-red); font-size: 1.3rem; font-weight: 700; letter-spacing: .08em; } /* 見出しは の位置で改行する（サイト全体の両端そろえ・どこでも改行を打ち消す） */ .uf-hero__title { margin: 0 0 16px; color: var(--uf-ink); font-size: clamp(2.8rem, 4.2vw, 4.4rem); font-weight: 700; line-height: 1.3; letter-spacing: .02em; text-align: left; word-break: keep-all; overflow-wrap: anywhere; } .uf-hero__lead { max-width: 40em; color: var(--uf-sub); font-size: 1.6rem; } .uf-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; } .uf-jump a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border: 1px solid var(--uf-line); border-radius: 999px; background: #fff; color: var(--uf-ink); font-size: 1.4rem; font-weight: 700; text-decoration: none; transition: border-color .2s, color .2s; } .uf-jump a i { color: var(--uf-red); font-size: 1.2rem; } .uf-jump a:hover { border-color: var(--uf-red); color: var(--uf-red); } /* まとまり */ .uf-group { scroll-margin-top: 80px; } .uf-group + .uf-group { margin-top: 64px; } .uf-group__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--uf-line); } .uf-group__title { margin: 0; color: var(--uf-ink); font-size: 2.4rem; font-weight: 700; line-height: 1.4; text-align: left; } .uf-group__lead { color: var(--uf-sub); font-size: 1.4rem; } /* タイルの並び：PC 3列、タブレット 2列、スマホ 1列。空いたところは後ろのタイルで詰める */ .uf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 16px; } .uf-tile { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 28px; border-radius: 16px; background: var(--uf-tile); scroll-margin-top: 80px; } .uf-tile--wide { grid-column: span 2; } .uf-tile--full { grid-column: 1 / -1; } .uf-tile--tall { grid-row: span 2; } .uf-tile__head { display: flex; align-items: center; gap: 12px; } .uf-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: #fff; color: var(--uf-red); font-size: 1.7rem; } .uf-tile__title { margin: 0; color: var(--uf-ink); font-size: 1.9rem; font-weight: 700; line-height: 1.4; text-align: left; word-break: keep-all; overflow-wrap: anywhere; } .uf-tile__note { color: var(--uf-sub); font-size: 1.3rem; line-height: 1.7; } /* タイル全体がリンクのカード（よくあるご質問のカテゴリなど） */ .uf-tile--link { color: var(--uf-text); text-decoration: none; transition: background-color .2s; } .uf-tile--link:hover { background: #E8EAEE; color: var(--uf-text); text-decoration: none; } .uf-tile--link:hover .uf-tile__title { color: var(--uf-red); } .uf-tile__arrow { margin-left: auto; color: var(--uf-red); font-size: 1.4rem; transition: transform .2s; } .uf-tile--link:hover .uf-tile__arrow { transform: translateX(3px); } a.uf-tile--link:focus-visible { outline: 2px solid var(--uf-red); outline-offset: 3px; border-radius: 16px; } .uf-tile p a, .uf-tile dd a { color: var(--uf-red); text-decoration: underline; text-underline-offset: 3px; } /* リンク（タイルの一番下にそろえる） */ .uf-actions { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: auto; padding-top: 6px; } .uf-link { display: inline-flex; align-items: center; gap: 8px; color: var(--uf-red); font-size: 1.45rem; font-weight: 700; text-decoration: none; } .uf-link i { font-size: 1.2rem; transition: transform .2s; } .uf-link:hover { color: var(--uf-red-deep); text-decoration: underline; text-underline-offset: 3px; } .uf-link:hover i { transform: translateX(3px); } /* 濃い色の目立つタイル（送料無料・当日出荷） */ .uf-tile--feature { background: var(--uf-ink); color: rgba(255, 255, 255, .88); } .uf-tile--feature .uf-tile__title { color: #fff; } .uf-tile--feature .uf-icon { background: rgba(255, 255, 255, .1); color: #fff; } .uf-tile--feature .uf-tile__note { color: rgba(255, 255, 255, .6); } .uf-tile--feature .uf-link { color: #fff; } .uf-tile--feature .uf-link:hover { color: #fff; } .uf-catch { color: #fff; font-size: clamp(2.4rem, 3vw, 3.2rem); font-weight: 700; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; } /* 濃い色のタイルの背景をうっすら飾る（送料無料＝埼玉から全国へ線が飛ぶ地図、実機を試せる＝店内の売り場の写真、店舗限定の特価品＝値札・修理＝スパナのアイコン）。文字は前に出す */ .uf-tile--bg-ship, .uf-tile--bg-try, .uf-tile--bg-deal, .uf-tile--bg-repair { position: relative; overflow: hidden; isolation: isolate; } .uf-tile--bg-ship::before, .uf-tile--bg-try::before, .uf-tile--bg-deal::before, .uf-tile--bg-repair::before { content: ""; position: absolute; z-index: -1; pointer-events: none; } .uf-tile--bg-ship::before { top: -96px; right: -60px; width: 370px; height: 414px; background: url(/html/user_data/assets/page/service/ship-routes.svg) center / contain no-repeat; opacity: .36; } .uf-tile--bg-try::before { content: none; } .uf-tile--bg-deal::before, .uf-tile--bg-repair::before { right: -20px; bottom: -40px; color: rgba(215, 30, 14, .07); font-family: "Font Awesome 5 Free"; font-size: 200px; font-weight: 900; line-height: 1; transform: rotate(-12deg); } .uf-tile--bg-deal::before { content: "\f02c"; } .uf-tile--bg-repair::before { right: -36px; bottom: -28px; content: "\f0ad"; transform: rotate(8deg); } .uf-tile--bg-try { background: linear-gradient(90deg, rgba(29, 31, 36, .97) 0%, rgba(29, 31, 36, .9) 45%, rgba(29, 31, 36, .72) 100%), url(/html/user_data/assets/page/service/store-floor.webp) right center / cover no-repeat, var(--uf-ink); } @media (max-width: 767px) { .uf-tile--bg-ship::before { top: auto; right: -84px; bottom: -70px; width: 320px; height: 358px; opacity: .24; } .uf-tile--bg-deal::before, .uf-tile--bg-repair::before { font-size: 150px; } .uf-tile--bg-try { background: linear-gradient(180deg, rgba(29, 31, 36, .95) 0%, rgba(29, 31, 36, .85) 60%, rgba(29, 31, 36, .7) 100%), url(/html/user_data/assets/page/service/store-floor.webp) center / cover no-repeat, var(--uf-ink); } } /* 大きな数字 */ .uf-stats { display: grid; grid-template-columns: 1fr 1fr; margin: 4px 0; } .uf-stat { padding-right: 24px; } .uf-stat + .uf-stat { padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, .18); } .uf-stat__num { color: #fff; font-family: Inter, "Noto Sans JP", sans-serif; font-size: clamp(3.6rem, 5vw, 5.2rem); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .uf-stat__num small, .uf-big small { margin-left: 4px; font-family: "Noto Sans JP", sans-serif; font-size: 1.6rem; font-weight: 700; letter-spacing: 0; } .uf-stat__label { margin-top: 6px; color: #fff; font-size: 1.4rem; font-weight: 700; } .uf-big { color: var(--uf-red); font-family: Inter, "Noto Sans JP", sans-serif; font-size: 4.4rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .uf-big small { margin-left: 2px; } /* セールの期間：1か月を前半・後半の2本の線で区切り、下に日付を書く */ .uf-big .uf-big__num { margin: 0 4px; font-family: Inter, "Noto Sans JP", sans-serif; font-size: 5.2rem; } .uf-big--words { font-family: "Noto Sans JP", sans-serif; font-size: 2.2rem; } .uf-month { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .uf-month__half { display: flex; flex-direction: column; gap: 6px; } .uf-month__bar { display: block; height: 8px; border-radius: 4px; background: var(--uf-red); } .uf-month__half + .uf-month__half .uf-month__bar { background: #F08A80; } .uf-month__range { color: var(--uf-ink); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .uf-big__eq { margin: 0 10px; color: var(--uf-sub); font-weight: 400; } /* できることの箇条書き（チェックの印つき） */ .uf-checks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; } .uf-checks li { position: relative; padding-left: 26px; line-height: 1.6; } .uf-checks li::before { content: "\f00c"; position: absolute; left: 0; top: .1em; color: var(--uf-red); font-family: "Font Awesome 5 Free"; font-size: 1.3rem; font-weight: 900; } /* 文と画像を左右に並べるタイル（公式アプリの会員証など） */ .uf-media { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 24px; align-items: center; height: 100%; } .uf-media__body { display: flex; flex-direction: column; gap: 14px; height: 100%; } .uf-media__fig { margin: 0; } .uf-media__fig img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(29, 31, 36, .18)); } /* 横長の写真（OEMの製作例）。白い背景はタイルの色になじませる */ .uf-media--photo { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 32px; } .uf-media--photo .uf-media__fig img { max-width: 380px; margin-left: auto; filter: none; mix-blend-mode: multiply; } .uf-media__fig figcaption { margin-top: 6px; color: var(--uf-sub); font-size: 1.25rem; line-height: 1.6; text-align: center; } @media (max-width: 767px) { .uf-media { grid-template-columns: minmax(0, 1fr) 110px; gap: 16px; } .uf-media--photo { grid-template-columns: 1fr; gap: 8px; } .uf-media--photo .uf-media__fig img { margin: 0 auto; } } /* LINE・SNS（LINE・X・Instagram・YouTube のボタン） */ .uf-sns__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .uf-sns__list a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--uf-line); border-radius: 999px; background: #fff; color: var(--uf-ink); font-size: 1.4rem; font-weight: 700; text-decoration: none; transition: border-color .2s; } .uf-sns__list a:hover { border-color: var(--uf-ink); color: var(--uf-ink); text-decoration: none; } .uf-sns__list i { font-size: 1.8rem; } .uf-sns__list svg { width: 16px; height: 16px; } .uf-sns__list .is-line i { color: #06C755; } .uf-sns__list .is-x svg { color: #000; } .uf-sns__list .is-instagram i { color: #E4405F; } .uf-sns__list .is-youtube i { color: #FF0000; } /* 小さなラベル（対応時間など） */ .uf-chip { display: inline-flex; align-items: center; align-self: flex-start; gap: 6px; padding: 4px 12px; border: 1px solid var(--uf-line); border-radius: 999px; background: #fff; color: var(--uf-ink); font-size: 1.3rem; font-weight: 700; } /* 画像（入荷通知の画面など） */ .uf-figure { margin: 4px 0 0; padding: 16px; border-radius: 12px; background: #fff; } .uf-figure img { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; } /* 分解図（線画）：白い背景をタイルの灰色になじませ（multiply）、下に小さな説明 */ .uf-figure--diagram { margin: 0 -16px; padding: 0; border-radius: 0; background: transparent; } .uf-figure--diagram img { max-width: 100%; mix-blend-mode: multiply; } @media (max-width: 767px) { .uf-figure--diagram { margin: 0 -8px; } .uf-figure--diagram img { max-width: 320px; } } .uf-figure figcaption { margin-top: 8px; color: var(--uf-sub); font-size: 1.25rem; line-height: 1.6; text-align: center; } /* 見出しつきの短い説明の並び（法人・OEM、修理の頼み方など）。--cols は横に2つ並べる */ .uf-dl { display: grid; gap: 12px; margin: 0; } .uf-dl--cols { grid-template-columns: 1fr 1fr; gap: 12px 32px; } .uf-dl dt { color: var(--uf-ink); font-size: 1.45rem; font-weight: 700; } .uf-dl dd { margin: 0; } @media (max-width: 1023px) { .uf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .uf-tile--tall { grid-row: auto; } .uf-tile--wide-md { grid-column: span 2; } } @media (max-width: 767px) { .uf { padding-bottom: 48px; } .uf-hero { padding: 8px 0 28px; } .uf-group + .uf-group { margin-top: 48px; } .uf-group__title { font-size: 2.1rem; } .uf-grid { grid-template-columns: 1fr; gap: 12px; } .uf-tile--wide, .uf-tile--wide-md { grid-column: auto; } .uf-dl--cols { grid-template-columns: 1fr; } .uf-tile { padding: 22px 20px; } .uf-stats { grid-template-columns: 1fr; gap: 16px; } .uf-stat + .uf-stat { padding: 16px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .18); } } @media (prefers-reduced-motion: reduce) { .uf-link i, .uf-jump a, .uf-tile--link, .uf-tile__arrow { transition: none; } } /* ------------------------------------------------------------------ 入口の部品をほかのページの中で使うとき（お問い合わせのFAQメニュー、FAQ各ページの「解決しないときは」） ------------------------------------------------------------------ */ .uf.uf--embed { max-width: none; margin: 0; padding: 0; } /* ------------------------------------------------------------------ ③ Q&A：よくあるご質問の各ページ（body に faqPage を付ける） 以前は各ページに同じ