@charset "utf-8"; /* ============================================================================ いくらや 京成臼井駅前店 ── 仕上げのデザイン層 既存のスタイルの上に重ねて、質感・余白・タイポの階層を整える。 色は :root の --kk-* をそのまま使う（新しい色は増やさない）。 1. 下地（ノイズ・グリッド） 2. タイポの階層 3. セクションのリズム（余白と地の色を交互に） 4. 見出しの装飾（透かし文字・区切り線） 5. カード 6. ボタンとリンクのホバー 7. ヘッダー 8. モーション（ik-motion.js が付ける状態クラスの見た目） ========================================================================== */ /* --------------------------------------------------------------------------- 1. 下地 のっぺりした黒は安っぽく見える。ごく薄いノイズと縦グリッドで密度を出す。 ------------------------------------------------------------------------ */ body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.055; mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,"); } body::after{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5; background-image:linear-gradient(90deg, rgba(229,201,130,.045) 1px, transparent 1px); background-size:min(12.5vw, 160px) 100%; -webkit-mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); } /* 下地より前に出す。固定CTAは position:fixed のままにしたいので重なり順だけ指定する */ .site, .page, .allgenre-header{ position:relative; z-index:1; } #fixed-contact-bar{ z-index:99990; } /* --------------------------------------------------------------------------- 2. タイポの階層 見出しと本文のサイズ差を広げ、ラベルは小さく字間を開く。 ------------------------------------------------------------------------ */ .ik-add-ttl{ font-size:clamp(26px, 3.6vw, 46px) !important; line-height:1.32 !important; letter-spacing:.055em !important; font-weight:600 !important; } .ik-add-sub{ margin-top:14px !important; font-size:14.5px !important; line-height:1.95 !important; color:var(--kk-mute) !important; letter-spacing:.02em; } .ik-pagehead__en, .ik-item-en, .ik-point-no, .gc-ui__head, .ik-post__meta{ font-family:"DM Mono","Roboto Mono","SFMono-Regular",Consolas,monospace; letter-spacing:.3em !important; text-transform:uppercase; } .ik-pagehead__en{ font-size:11.5px !important; opacity:.8; } .ik-pagehead__ttl{ font-size:clamp(28px, 4.4vw, 56px) !important; line-height:1.24 !important; letter-spacing:.05em !important; } .ik-pagehead__lead{ max-width:44em; margin-inline:auto; font-size:15px !important; line-height:2.05 !important; color:var(--kk-mute) !important; } .ik-qa__q{ font-size:clamp(17px, 1.5vw, 20px) !important; letter-spacing:.03em; } .ik-qa__a{ font-size:15px !important; line-height:2.05 !important; } /* --------------------------------------------------------------------------- 3. セクションのリズム 同じ余白を繰り返すと単調になる。奇数・偶数で余白と地の色を変える。 ------------------------------------------------------------------------ */ .ik-add{ padding:clamp(64px, 8vw, 112px) 0 !important; } .ik-add:nth-of-type(even){ padding-block:clamp(52px, 6.4vw, 88px) !important; } .ik-add--dark{ background:#0B0A07 !important; } .ik-add:not(.ik-add--dark){ background:#100E0A !important; } /* セクションの境目に細い金のグラデーション線 */ .ik-add + .ik-add{ position:relative; } .ik-add + .ik-add::before{ content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:min(1100px, 92%); height:1px; background:linear-gradient(90deg, transparent, rgba(229,201,130,.34), transparent); } /* --------------------------------------------------------------------------- 4. 見出しまわりの装飾 ------------------------------------------------------------------------ */ /* 中央の見出しの下に短い金の線 */ .ik-add-ttl{ position:relative; padding-bottom:20px; } .ik-add-ttl::after{ content:""; position:absolute; left:50%; bottom:0; width:46px; height:2px; transform:translateX(-50%); background:linear-gradient(90deg, var(--kk-gold-dp), var(--kk-accent), var(--kk-gold-dp)); } /* 背景に置く巨大な透かし文字（ik-motion.js が入れる） 自前の位置基準（position:relative + overflow:hidden）を持つ .ik-add の直下だけに出す。 #items / #voice / #faq は position:static のため、絞らないとページ中央へ飛び出し、 3枚が同じ場所に積み重なって写真やボタンの上に乗ってしまう。 要素は span なので、色は span 指定に勝てるよう子結合子＋要素名で書く。 */ .ik-watermark{ display:none; } .ik-add > span.ik-watermark{ display:block; position:absolute; left:50%; top:50%; /* translate3d にして、透かし文字だけを独立した層に載せる。 こうしないと、文字が動くたびに親セクション（影やカードを数十個抱えている）が 丸ごと描き直され、スマホでスクロールが引っかかる。 */ transform:translate3d(-50%, calc(-50% + var(--wm-y, 0px)), 0); font-family:"DM Mono","Roboto Mono",monospace; font-size:clamp(64px, 11vw, 168px); font-weight:700; letter-spacing:.10em; color:var(--kk-accent); opacity:.028; white-space:nowrap; pointer-events:none; user-select:none; z-index:0; } .ik-add{ position:relative; overflow:hidden; } .ik-add-inner{ position:relative; z-index:1; } /* 見出し帯 */ .ik-pagehead{ position:relative; background: radial-gradient(120% 140% at 50% -10%, rgba(229,201,130,.10) 0%, transparent 58%), linear-gradient(180deg, #0D0B08 0%, #080706 100%) !important; } .ik-pagehead::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, transparent, rgba(229,201,130,.4), transparent); } /* --------------------------------------------------------------------------- 5. カード 影は2層。上端に金のラインを引き、ホバーで左から伸ばす。 ------------------------------------------------------------------------ */ .ik-item-card, .ik-point, .ik-col-item, .ik-review, .ik-flow-item, .gc-table-wrap, .gc-calc{ box-shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 40px rgba(0,0,0,.35); } .ik-item-card, .ik-point, .ik-col-item{ position:relative; overflow:hidden; } .ik-item-card::before, .ik-point::before, .ik-col-item::before{ content:""; position:absolute; left:0; top:0; height:2px; width:100%; background:linear-gradient(90deg, var(--kk-accent), var(--kk-cta)); transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.22,1,.36,1); } .ik-item-card:hover::before, .ik-point:hover::before, .ik-col-item:hover::before{ transform:scaleX(1); } .ik-item-no{ font-size:12px !important; letter-spacing:.28em !important; color:var(--kk-gold-dp) !important; } .ik-item-name{ font-size:clamp(19px, 1.7vw, 23px) !important; letter-spacing:.04em; } .ik-item-more{ position:relative; } .ik-item-more::before{ content:""; position:absolute; left:0; bottom:-4px; width:100%; height:1px; background:var(--kk-accent); transform:scaleX(0); transform-origin:right; transition:transform .4s cubic-bezier(.4,0,.2,1); } .ik-item-card:hover .ik-item-more::before{ transform:scaleX(1); transform-origin:left; } /* --------------------------------------------------------------------------- 6. ボタンとリンク 文字は動かさない（読みにくくなるため）。背景と線だけを動かす。 ------------------------------------------------------------------------ */ .ik-btn-gold{ position:relative; overflow:hidden; z-index:0; } .ik-btn-gold::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--kk-accent); transform:translateX(-101%); transition:transform .45s cubic-bezier(.4,0,.2,1); } .ik-btn-gold:hover{ color:var(--kk-on-gold) !important; background:transparent !important; } .ik-btn-gold:hover::before{ transform:translateX(0); } /* 電話ボタンは光が横切る */ .ik-cta-tel{ position:relative; overflow:hidden; } .ik-cta-tel::after{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-18deg); transition:left .7s cubic-bezier(.4,0,.2,1); } .ik-cta-tel:hover::after{ left:120%; } /* 本文リンクは下線が左から伸びる */ .ik-post__p a, .ik-note-small a, .ik-qa__a a, .ik-crumb a{ position:relative; text-decoration:none; } .ik-post__p a::after, .ik-note-small a::after, .ik-qa__a a::after, .ik-crumb a::after{ content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .35s cubic-bezier(.4,0,.2,1); } .ik-post__p a:hover::after, .ik-note-small a:hover::after, .ik-qa__a a:hover::after, .ik-crumb a:hover::after{ transform:scaleX(1); transform-origin:left; } /* 品位・期間のボタン */ .gc-type, .gc-period, .ik-tag, .ik-lp-nav a{ transition:border-color .25s ease, background-color .25s ease, color .25s ease; } .ik-lp-nav a:hover, .ik-tag:hover{ background:rgba(229,201,130,.10); border-color:var(--kk-accent); } /* --------------------------------------------------------------------------- 7. ヘッダー：スクロールで縮む ------------------------------------------------------------------------ */ .allgenre-header{ transition:padding .35s cubic-bezier(.22,1,.36,1), background-color .35s ease, box-shadow .35s ease, border-color .35s ease; } .allgenre-header.is-shrunk{ background:rgba(8,7,6,.94) !important; backdrop-filter:saturate(1.2) blur(10px); box-shadow:0 1px 0 rgba(229,201,130,.18), 0 10px 30px rgba(0,0,0,.5); } /* 読み進み具合を示す細いバー */ .ik-progress{ position:fixed; left:0; top:0; height:2px; z-index:99991; width:var(--pg, 0%); background:linear-gradient(90deg, var(--kk-gold-dp), var(--kk-cta)); transition:width .12s linear; pointer-events:none; } /* --------------------------------------------------------------------------- 8. モーション ik-motion.js が data-fx を付け、画面に入ったら .is-in が付く。 種類ごとに動き・速さ・イージングを変える。 速さの方針： 見え始めてから馴染むまでが間延びしていたので、全体を4割ほど詰めた。 ただし全部を同じ長さにすると機械的になるので、緩急は残す。 カード（zoom・stagger） ≒ .38s ／ 見出し（left・right） ≒ .5s ／ 図版（clip・wipe） ≒ .6〜.7s 曲線は cubic-bezier(.22,1,.36,1) 系に統一する。 立ち上がりが速く終わりが静かに止まるので、短くしても急ぎ足に見えない。 透明度も ease から同じ曲線へ寄せ、位置と濃さがずれて着地しないようにする。 ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: no-preference){ /* ここに will-change は書かない。 data-fx はページによって100個を超え、常時付けると出番の来ていない要素まで ずっと専用の層を抱えることになり、スマホでは逆にスクロールが重くなる。 opacity と transform の変化は、指定しなくても動いている間だけ自動で層が作られる。 */ [data-fx="up"] { opacity:0; transform:translate3d(0,32px,0); transition:opacity .44s cubic-bezier(.22,1,.36,1), transform .48s cubic-bezier(.22,1,.36,1); } [data-fx="left"] { opacity:0; transform:translate3d(-46px,0,0); transition:opacity .46s cubic-bezier(.22,1,.36,1), transform .52s cubic-bezier(.22,1,.36,1); } [data-fx="right"] { opacity:0; transform:translate3d(46px,0,0); transition:opacity .46s cubic-bezier(.22,1,.36,1), transform .52s cubic-bezier(.22,1,.36,1); } /* カードは数が多い。1枚あたりを一番短くして、並びが早く出そろうようにする。 わずかな行き過ぎ（1.4）は残すが、時間が短いぶん跳ねすぎないよう抑えた */ [data-fx="zoom"] { opacity:0; transform:scale(.95); transition:opacity .32s cubic-bezier(.22,1,.36,1), transform .38s cubic-bezier(.34,1.28,.64,1); } [data-fx="blur"] { opacity:0; filter:blur(10px); transform:translate3d(0,12px,0); transition:opacity .4s cubic-bezier(.22,1,.36,1), filter .44s cubic-bezier(.22,1,.36,1), transform .44s cubic-bezier(.22,1,.36,1); } /* 図版は面がせり上がる見せ場なので、ここだけ長めに残して緩急を作る */ [data-fx="clip"] { opacity:1; clip-path:inset(0 0 100% 0); transition:clip-path .68s cubic-bezier(.22,1,.36,1); } [data-fx="tilt"] { opacity:0; transform:perspective(900px) rotateX(7deg) translate3d(0,22px,0); transform-origin:top center; transition:opacity .44s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1); } /* 横に払う動きは、以前の ease-in-out だと出だしが鈍く、短くすると特に重く見えた */ [data-fx="wipe"] { opacity:1; clip-path:inset(0 100% 0 0); transition:clip-path .58s cubic-bezier(.22,1,.36,1); } [data-fx].is-in{ opacity:1; filter:none; clip-path:inset(0 0 0 0); transform:none; } } /* スマホだけ、面を切り取る演出（clip / wipe）を「ずらして出す」に差し替える。 切り取りはパソコンでは問題ないが、絵の一部を隠す性質上どうしても毎コマ描き直しになる。 買取実績のように同じ演出が100個並ぶページでは、これがスクロールの引っかかりになる。 ずらす動きなら描き直しが起きないので、見た目の印象を保ったまま軽くできる。 */ @media (prefers-reduced-motion: no-preference) and (max-width: 767px){ [data-fx="clip"] { opacity:0; clip-path:none; transform:translate3d(0,26px,0); transition:opacity .44s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1); } [data-fx="wipe"] { opacity:0; clip-path:none; transform:translate3d(-26px,0,0); transition:opacity .42s cubic-bezier(.22,1,.36,1), transform .48s cubic-bezier(.22,1,.36,1); } [data-fx="clip"].is-in, [data-fx="wipe"].is-in{ clip-path:none; } } @media (prefers-reduced-motion: no-preference){ /* 子要素が順に出る。 1件あたり .07s だと8件で最後が .49s 遅れ、長いリストほど待たされていた。 間隔を半分に詰めたうえで、9件目以降は頭打ちにして総時間を伸ばさない。 */ [data-fx-stagger] > *{ opacity:0; transform:translate3d(0,22px,0); transition:opacity .32s cubic-bezier(.22,1,.36,1), transform .38s cubic-bezier(.22,1,.36,1); } [data-fx-stagger].is-in > *{ opacity:1; transform:none; } [data-fx-stagger].is-in > *:nth-child(1){ transition-delay:.00s } [data-fx-stagger].is-in > *:nth-child(2){ transition-delay:.035s } [data-fx-stagger].is-in > *:nth-child(3){ transition-delay:.07s } [data-fx-stagger].is-in > *:nth-child(4){ transition-delay:.105s } [data-fx-stagger].is-in > *:nth-child(5){ transition-delay:.14s } [data-fx-stagger].is-in > *:nth-child(6){ transition-delay:.175s } [data-fx-stagger].is-in > *:nth-child(7){ transition-delay:.21s } [data-fx-stagger].is-in > *:nth-child(8){ transition-delay:.245s } [data-fx-stagger].is-in > *:nth-child(n+9){ transition-delay:.28s } /* 数字のカウントアップ中は等幅で桁が揺れないように */ [data-count]{ font-variant-numeric:tabular-nums; } } @media (prefers-reduced-motion: reduce){ [data-fx], [data-fx-stagger] > *{ opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important; } } /* --------------------------------------------------------------------------- スマホ ------------------------------------------------------------------------ */ @media screen and (max-width:767px){ body::after{ background-size:33.3vw 100%; opacity:.35; } .ik-add > span.ik-watermark{ font-size:15vw; opacity:.035; } .ik-add-ttl{ padding-bottom:16px; } .ik-add-ttl::after{ width:36px; } } /* --------------------------------------------------------------------------- ヘッダー上の余白を消す ヘッダーは #page.site の中にあり、上の指定で position:relative（通常フロー）。 母体CSSの .site{margin-top} は position:fixed のヘッダー用の場所取りだったため、 いまはヘッダー自身を押し下げて最上部に黒帯を作るだけになっていた。 ヘッダーを fixed に戻すときは、この打ち消しも一緒に外すこと。 ------------------------------------------------------------------------ */ #page.site, body:not(.page-template-page-affiliate-confirm) #page.site{ margin-top:0 !important; } /* --------------------------------------------------------------------------- チェック項目が2行になったとき、次のブロックに文字の下端が潜り込む問題 .kouka-main{margin-top:-10px} で持ち上げているぶんの下余白が無かった。 ------------------------------------------------------------------------ */ @media (min-width:768px){ .kouka-mid{ padding-bottom:24px; } .kouka-mid .dashed{ height:auto; align-self:stretch; } } /* ============================================================================ ホバー演出の抑制 枠線・背景・影・浮き上がりは付けない。残すのは色の変化だけ。 （動きが目障り／文字が読みにくくなる、というご指摘への対応） ========================================================================== */ /* ラベルやタグはリンクではないので、ホバーで一切変えない */ span.label:hover, .tt-gold:hover, dt.tt-brown:hover{ background:transparent !important; border-color:var(--kk-accent) !important; box-shadow:none !important; } .kouka-ttl .label:hover{ transform:translateX(-50%) !important; } /* カード類：枠線の色を変えない・浮かせない */ .ik-item-card:hover, .ik-point:hover, .ik-col-item:hover, .ik-res-item:hover, .category-item:hover, .ikp-card:hover, .sec08-item:hover, #gold-rate .ik-rate-card:hover{ border-color:var(--kk-line-w) !important; transform:none !important; } .ik-item-card:hover, .ik-col-item:hover{ box-shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 40px rgba(0,0,0,.35) !important; } .ik-res-item:hover{ box-shadow:0 10px 30px rgba(0,0,0,.5) !important; } .ikp-card:hover, .ik-point:hover, .category-item:hover{ box-shadow:none !important; } /* 上端の金ライン・下線が伸びる演出も止める */ .ik-item-card:hover::before, .ik-point:hover::before, .ik-col-item:hover::before, .ik-item-card:hover .ik-item-more::before{ transform:scaleX(0) !important; } /* 金枠ボタン：背景スライドをやめ、文字色だけ明るくする */ .ik-btn-gold:hover{ background:transparent !important; color:#F7EBCF !important; border-color:#F7EBCF !important; transform:none !important; } .ik-btn-gold:hover::before{ content:none !important; } /* 電話ボタンの光の走りも止める（塗りの色変化は残す） */ .ik-cta-tel::after{ content:none !important; } /* 本文リンクの下線は残す（読みやすさに寄与するため） */ /* CTAがマウスに寄る動きを止める（ik-motion.js のインライン transform を無効化） */ .pc-nav-cta, .ik-btn-gold, .ik-cta-tel{ transform:none !important; } /* ============================================================================ 追従ヘッダー position:sticky なので、最初は通常の位置に置かれ、上端に達したら貼り付く。 fixed と違って場所取りが要らないため、ヘッダー上の空白も出ない。 ========================================================================== */ .allgenre-header{ position:sticky !important; top:0; z-index:9998; } /* sticky は祖先がスクロールの入れ物になっていると効かない。 html / body の overflow-x:hidden は overflow-y を auto に変えてしまい、 ヘッダーが貼り付かなくなる。はみ出しを隠す目的は clip でも果たせるうえ、 clip はスクロールの入れ物を作らないので sticky が生きる。 */ html, body{ overflow-x:clip !important; overflow-y:visible !important; } #page.site, .page.allgenre, .site-content{ overflow:visible !important; } /* 貼り付いている間は地を締めて、下に境界線を出す */ .allgenre-header.is-shrunk{ background:rgba(8,7,6,.96) !important; box-shadow:0 1px 0 rgba(229,201,130,.22), 0 12px 32px rgba(0,0,0,.55); } @supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)){ .allgenre-header.is-shrunk{ background:rgba(8,7,6,.82) !important; -webkit-backdrop-filter:saturate(1.25) blur(12px); backdrop-filter:saturate(1.25) blur(12px); } } /* ---- 帯が「途中で切れて」見えていた原因 ---- 横方向に断絶があったのではなく、帯が2枚重なっていたのが正体。 母体CSSが中央の .header-box（幅1040px）にも #000 のベタ塗りを敷いており、 is-shrunk で親の帯が半透明（rgba(8,7,6,.82)＋ぼかし）に変わった瞬間、 中央1040pxだけが不透明の黒として残り、左右の余白との間に縦の継ぎ目が2本立つ。 1920pxのように左右の余白が広いほど、この段差が「帯の途切れ」として読める。 帯の色は親の1枚に任せ、中の箱は透明にして継ぎ目そのものを無くす。 打ち消す相手が div.header-box.container（!important付き）なので、 詳細度でそれを上回る書き方でないと効かない。 */ .allgenre-header div.header-box, .allgenre-header div.header-box.container{ background:transparent !important; background-image:none !important; } /* ---- 貼り付いても帯の高さは変えない ---- 「ヘッダーは縮小させない」との指示。 縮小させると、sticky が通常フローの高さを持つぶん、しきい値をまたぐ瞬間に 下のコンテンツが縮んだぶんだけ引き上げられてしまう（実測14px）。 高さは固定したまま、地の色・罫線・影だけを変えて「貼り付いている」ことを示す。 （＝ここには高さを変える指定を置かない） */ /* ---- 768〜1099px でヘッダーが破綻していた ---- 母体テーマは 768px 以上をPC扱いにするが、.container の幅が 1040px 固定。 画面幅がそれ未満だと、PCナビもハンバーガーも 1040px の箱に置かれたまま 画面の外へ押し出される。overflow-x:clip がはみ出しを飲むので横スクロールも出ず、 「メニューが無いことに気付けない」状態になっていた（実測：768pxでボタンが x=970〜1020）。 この帯ではSPと同じドロワー方式に寄せて、必ずメニューに辿り着けるようにする。 */ @media screen and (min-width:768px) and (max-width:1099px){ /* 母体の .container は width:1040px だけでなく min-width:1040px も持っている。 min-width を 0 に戻さないと、width:100% を当てても 1040px から縮まない。 ここを「ヘッダーの箱だけ」に絞っていたのが誤りだった。 .container はページ全体で使われているため、本文・フッターの箱も 1040px のまま残り、 900px の画面では全25ページで右側が切れていた（実測：下層140px／TOP186px はみ出し）。 overflow-x:clip が横スクロールを飲むので、切れていること自体に気づけない。 例：shop の 900px でフッター4列目の「古銭・記念硬貨／衣類／骨董品／カメラ／商品券」が読めない。 この帯では .container 全体の min-width を解く。 */ .container{ width:100% !important; min-width:0 !important; max-width:1040px !important; margin-inline:auto !important; box-sizing:border-box !important; } /* 左右が画面端に貼り付かないよう、余白を持たない .container にだけ与える */ .container:not(.header-box){ padding-inline:20px; } .allgenre-header div.header-box.container{ width:100% !important; min-width:0 !important; max-width:1040px !important; margin-inline:auto !important; padding-inline:20px !important; box-sizing:border-box !important; position:relative !important; } .allgenre-header .pc-nav{ display:none !important; } .allgenre-header button.menu-open{ display:flex !important; position:absolute !important; right:20px !important; top:50% !important; /* ずらすのに transform を使うと、この帯だけボタンが独立した層になり、 背後の黒が回り込まず白い四角が浮いて見えていた。高さは48px固定なので その半分を引くだけでよく、層も作られない。 */ transform:none !important; margin-top:-24px !important; z-index:3; } /* 店名テキストがロゴと同じ位置に重なって出る（母体のSP用指定がこの幅にも残る）。 ロゴのすぐ右に並べ、ハンバーガーの手前で切る。 */ .allgenre-header .header-shop{ position:static !important; width:auto !important; max-width:calc(100% - 320px) !important; /* ハンバーガーは絶対配置なので、文字が下に潜り込まないよう右を空けておく */ margin-left:14px !important; margin-right:62px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px !important; line-height:1.3 !important; } .allgenre-header .logo-wrap{ flex:0 0 auto; } /* TOPには .container を使わず 960px 固定で組んである塊がいくつもある （母体テーマの作り）。.container を直しただけでは救えないので、 ここで幅の固定を解く。900pxの画面で60〜80px はみ出していた箇所。 */ .market, .market-ttl, .market-main, .kouka, .kouka-ttl, .kouka-mid, .kouka-main, .kouka-bot, .kouka .bg, .kouka .bg img, .content-gold, .content-gold .tt-gold, .content-gold .content, .sec08-list, .sec08-item{ width:auto !important; min-width:0 !important; max-width:100% !important; } /* 中身が3列で組まれている箇所は、幅が縮んだぶん折り返して収める */ .market-main{ flex-wrap:wrap; } /* 「かんたん3STEP」は 308px の札を3枚横に並べる作りで、 幅が 728px しかないこの帯では 3枚目が画面の外へ出る（実測107px）。 札を縮められるようにして、入りきらなければ折り返す。 */ .kantan-mid{ flex-wrap:wrap; } .kantan-label{ width:auto !important; flex:1 1 200px; min-width:0 !important; } /* 「査定のポイント」の箱は、PC幅1040px前提で margin-right:-132px と負の値を当てて親の余白の外へ広げている。 幅が狭いこの帯ではそのぶんがそのまま画面外へのはみ出しになる（実測88px）。 */ .box2-gold{ width:auto !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; } } /* ---- スマホのヘッダーを1段にまとめる ---- これまでロゴ帯70px＋店名帯27px＝97px（画面の11.5%）をヘッダーが使っていた。 店名をロゴの右に置いて1段にすると、そのぶんをメインビジュアルに回せる。 ロゴのレギュレーションは守る：効果を掛けない・色を変えない・ アイソレーション（ロゴ高さの0.25倍＝約8px）を四方に確保し、店舗名はロゴと分離して置く。 */ @media screen and (max-width:767px){ .allgenre-header div.header-box.container{ min-height:0 !important; height:68px !important; padding:0 10px !important; display:flex !important; align-items:center !important; } .allgenre-header .logo-wrap{ flex:0 0 auto; width:136px !important; height:46px !important; padding:8px 10px !important; margin:0 !important; } .allgenre-header .allgenre-logo{ width:116px !important; height:29px !important; } /* 店舗名はロゴの外に、ロゴとは別の要素として置く（レギュレーションの「店舗名分離」） */ .allgenre-header .header-shop{ position:static !important; flex:1 1 auto; min-width:0; width:auto !important; height:auto !important; margin:0 0 0 12px !important; padding:0 !important; background:none !important; font-size:10px !important; line-height:1.35 !important; letter-spacing:.02em !important; text-align:left !important; color:var(--kk-mute) !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .allgenre-header button.menu-open{ flex:0 0 auto; margin-left:8px !important; } } /* ---- 帯と下のコンテンツの境目 ---- 罫線1本だけだと真下の見出し帯とコントラストが付かず、 「意図した仕切り」ではなく「途切れ」に読めてしまう。 金のヘアラインを少し強め、真下へごく淡い影を2段で落として面を分ける。 */ .allgenre-header{ border-bottom-color:rgba(229,201,130,.30) !important; } .allgenre-header.is-shrunk{ border-bottom-color:rgba(229,201,130,.46) !important; box-shadow: 0 1px 0 rgba(229,201,130,.14), 0 6px 14px rgba(0,0,0,.45), 0 18px 38px rgba(0,0,0,.38); } /* ============================================================================ MVの見出し 元の作り（金の明朝で振り、店名を大きく、いくらやだけ縁取り）はそのまま。 文言だけ差し替えたので、行ごとの大きさを整える。 ========================================================================== */ .mv-h1 .txt2-t1{ display:inline-block; font-size:clamp(20px, 2.6vw, 40px) !important; letter-spacing:.02em !important; line-height:1.5 !important; } .mv-h1 .mv-shop-line{ display:block; margin-top:6px; line-height:1.18; } .mv-h1 .mv-brand{ font-size:clamp(22px, 3.2vw, 50px); font-weight:900; color:var(--kk-text); letter-spacing:.02em; margin-right:.06em; } /* 「いくらや」は元と同じ金＋黒の縁取りのまま、大きさだけ合わせる */ .mv-h1 .mv-name .t2{ font-size:clamp(38px, 6.2vw, 96px) !important; line-height:1.1 !important; letter-spacing:0 !important; } .mv-h1 .mv-store{ display:block; margin-top:2px; font-size:clamp(26px, 4.2vw, 66px); font-weight:900; color:var(--kk-text); letter-spacing:.03em; } @media screen and (max-width:767px){ .mv-h1 .txt2{ display:block !important; } .mv-h1 .txt2-t1{ display:block; text-align:center; } .mv-h1 .mv-shop-line{ text-align:center; } .mv-h1 .mv-name{ display:inline !important; } } /* 「いくらや」の上の圏点。灰色(#666)のままだと黒地から浮くので金にする */ .mv-h1 .mv-name .t2::before{ background:var(--kk-accent) !important; width:10px !important; height:10px !important; } /* スマホでMV直下の帯が背景の宝石画像に重なって読みにくかったので、地を敷く */ @media screen and (max-width:767px){ .market.market2{ background:linear-gradient(180deg, rgba(8,7,6,.92), rgba(8,7,6,.98)); } .market-ttl{ position:relative; z-index:2; text-shadow:0 2px 8px rgba(0,0,0,.9); } } /* ============================================================================ 買取品目LP：本部コンテンツ用のブロック ========================================================================== */ /* 冒頭のリード文 */ .ik-lead-lg{ margin:0; padding:26px 30px; border-left:3px solid var(--kk-accent); border-radius:0 10px 10px 0; background:linear-gradient(180deg,#16130E 0%,#0C0C0C 100%); color:var(--kk-text); font-size:16px; line-height:2.05; } /* 買取リスト（サブ品目） */ .ik-sub-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin:34px 0 0; padding:0; list-style:none; } .ik-sub-item{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:16px 10px; border:1px solid var(--kk-line-w); border-radius:10px; background:linear-gradient(180deg,#16130E 0%,#0C0C0C 100%); color:var(--kk-accent); font-size:13.5px; text-align:center; line-height:1.5; } .ik-sub-item img{ width:64px; height:64px; object-fit:contain; } /* 買取参考価格のカード */ .ik-res2-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:34px 0 0; padding:0; list-style:none; } .ik-res2{ display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--kk-line-w); border-radius:10px; background:linear-gradient(180deg,#16130E 0%,#0C0C0C 100%); box-shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 40px rgba(0,0,0,.35); } .ik-res2__fig{ margin:0; aspect-ratio:1/1; background:#fff; overflow:hidden; } .ik-res2__fig img{ width:100%; height:100%; object-fit:contain; } .ik-res2__tag{ margin:14px 16px 0; align-self:flex-start; padding:3px 10px; border:1px solid var(--kk-line-w); border-radius:999px; color:var(--kk-mute); font-size:11.5px; letter-spacing:.04em; } .ik-res2__name{ margin:10px 16px 0; color:var(--kk-text); font-size:13.5px; line-height:1.75; flex:1 1 auto; } .ik-res2__price{ margin:12px 0 0; padding:12px 16px 14px; border-top:1px solid var(--kk-line-w); } .ik-res2__label{ display:block; color:var(--kk-mute); font-size:11.5px; letter-spacing:.08em; } .ik-res2__num{ display:block; margin-top:2px; color:var(--kk-accent); font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.01em; } /* 査定基準 */ .ik-crit{ margin:30px 0 0; } .ik-crit dt{ margin-top:22px; padding-left:14px; border-left:3px solid var(--kk-accent); color:var(--kk-accent); font-size:17px; font-weight:700; line-height:1.6; } .ik-crit dd{ margin:8px 0 0 17px; color:var(--kk-text); font-size:15px; line-height:2; } /* なぜ高く買取れるのか */ .ik-why-list{ margin:30px 0 0; padding:0; list-style:none; } .ik-why-list li{ position:relative; margin-top:12px; padding:16px 18px 16px 52px; border:1px solid var(--kk-line-w); border-radius:8px; background:linear-gradient(180deg,#16130E 0%,#0C0C0C 100%); color:var(--kk-text); font-size:15.5px; line-height:1.8; } .ik-why-list li::before{ content:◆; position:absolute; left:20px; top:16px; color:var(--kk-accent); font-size:13px; line-height:1.8; } @media screen and (max-width:1024px){ .ik-sub-grid{ grid-template-columns:repeat(4,1fr); } .ik-res2-grid{ grid-template-columns:repeat(3,1fr); } } @media screen and (max-width:767px){ .ik-lead-lg{ padding:20px 18px; font-size:15px; } .ik-sub-grid{ grid-template-columns:repeat(3,1fr); gap:10px; } .ik-sub-item{ font-size:12px; padding:12px 6px; } .ik-sub-item img{ width:48px; height:48px; } .ik-res2-grid{ grid-template-columns:repeat(2,1fr); gap:12px; } .ik-res2__name{ font-size:12.5px; margin-inline:12px; } .ik-res2__num{ font-size:17px; } .ik-res2__price{ padding:10px 12px 12px; } .ik-crit dt{ font-size:16px; } } /* 買取例の「すべて見る」 */ .ik-res2-more{ margin-top:24px; } .ik-res2-more > summary{ list-style:none; text-align:center; cursor:pointer; } .ik-res2-more > summary::-webkit-details-marker{ display:none; } .ik-res2-more[open] > summary{ display:none; } .ik-res2-more .ik-res2-grid{ margin-top:20px; } /* 相場の推移表 */ .ik-market th[scope="row"]{ width:auto; white-space:normal; text-align:left; line-height:1.7; } .ik-market td{ white-space:nowrap; color:var(--kk-accent); font-weight:700; } /* ============================================================================ ヘッダー：買取品目のプルダウン ホバーだけでなくキーボードのフォーカスでも開くようにしている。 祖先はすべて overflow:visible なので、はみ出しが切られる心配はない。 ========================================================================== */ .pc-nav__wrap{ position:relative; display:inline-flex; } .pc-nav__parent::after{ content:""; display:inline-block; width:6px; height:6px; margin-left:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .25s ease; } .pc-nav__wrap:hover .pc-nav__parent::after, .pc-nav__wrap:focus-within .pc-nav__parent::after{ transform:translateY(1px) rotate(225deg); } .pc-sub{ position:absolute; top:100%; left:50%; width:min(560px, 92vw); padding:18px 18px 14px; transform:translate(-50%, 8px); border:1px solid var(--kk-line); border-radius:12px; background:rgba(10,9,7,.97); box-shadow:0 1px 2px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.6); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s ease, transform .25s cubic-bezier(.22,1,.36,1), visibility .25s; z-index:20; } @supports (backdrop-filter: blur(10px)){ .pc-sub{ background:rgba(10,9,7,.88); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); } } /* ポインタが離れても届くよう、上に見えない橋を渡す */ .pc-sub::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px; } .pc-nav__wrap:hover .pc-sub, .pc-nav__wrap:focus-within .pc-sub{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%, 0); } .pc-sub__list{ display:grid; grid-template-columns:1fr 1fr; gap:2px 10px; margin:0; padding:0; list-style:none; } .pc-sub__list a{ display:flex; align-items:center; gap:10px; padding:9px 10px !important; border-radius:8px; color:var(--kk-text) !important; font-size:13.5px !important; white-space:nowrap; transition:background-color .18s ease, color .18s ease; } .pc-sub__list a:hover{ background:rgba(229,201,130,.12) !important; color:var(--kk-accent) !important; } .pc-sub__list img{ width:34px; height:34px; object-fit:contain; flex:0 0 auto; } .pc-sub__noimg{ width:34px; height:34px; flex:0 0 auto; } .pc-sub__no{ font-family:"DM Mono","Roboto Mono",monospace; font-size:11px; letter-spacing:.14em; color:var(--kk-gold-dp); } .pc-sub__name{ font-weight:500; } .pc-sub__all{ margin:12px 0 0; padding-top:12px; text-align:center; border-top:1px solid var(--kk-line-w); } .pc-sub__all a{ padding:6px 10px !important; color:var(--kk-accent) !important; font-size:13px !important; } .pc-sub__all a::after{ content:" →"; } /* ---- SPドロワーのアコーディオン ---- */ .dr-acc > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; } .dr-acc > summary::-webkit-details-marker{ display:none; } .dr-acc > summary::after{ content:""; width:8px; height:8px; margin-right:4px; border-right:2px solid var(--kk-accent); border-bottom:2px solid var(--kk-accent); transform:translateY(-2px) rotate(45deg); transition:transform .25s ease; } .dr-acc[open] > summary::after{ transform:translateY(2px) rotate(225deg); } .dr-sub{ margin:4px 0 10px; padding:0 0 0 6px; list-style:none; } .dr-sub .a{ display:flex !important; align-items:center; gap:10px; padding:10px 6px !important; font-size:14px !important; } .dr-sub img{ width:26px; height:26px; object-fit:contain; } .dr-no{ font-family:"DM Mono","Roboto Mono",monospace; font-size:10.5px; letter-spacing:.12em; color:var(--kk-gold-dp); } @media screen and (max-width:1024px){ .pc-sub{ display:none; } } /* ============================================================================ メインビジュアル 骨格（明朝の大見出し・黒金・商品画像）は残したまま、 ・見出しを左寄せにして金の縦線を添える ・商品画像を右へ振り、上下を溶かして地に馴染ませる ・本日の買取価格を先頭に置く（他店のMVには無い情報） ========================================================================== */ .mv-v2 .mv-main{ position:relative; overflow:hidden; } /* 斜めに走る淡い光。動かさず、静かな奥行きだけ足す */ .mv-v2 .mv-main::before{ content:""; position:absolute; inset:-20% -10%; background: radial-gradient(48% 40% at 22% 28%, rgba(229,201,130,.14) 0%, transparent 62%), radial-gradient(42% 46% at 84% 66%, rgba(231,255,0,.07) 0%, transparent 64%); pointer-events:none; } .mv-v2__inner{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(24px,3.5vw,56px); } .mv-v2__copy{ text-align:left; } /* 上の英字。細く長い字間で、和文の大見出しと対比させる */ .mv-v2__eyebrow{ margin:0 0 18px; display:flex; align-items:center; gap:14px; font-family:"DM Mono","Roboto Mono",monospace; font-size:11px; letter-spacing:.34em; color:var(--kk-gold-dp); } .mv-v2__eyebrow::after{ content:""; flex:1 1 auto; height:1px; background:linear-gradient(90deg, rgba(229,201,130,.5), transparent); } /* 見出しは左寄せ。左に金の縦線を立てる */ .mv-v2 .mv-h1{ position:relative; padding-left:22px; text-align:left !important; } .mv-v2 .mv-h1::before{ content:""; position:absolute; left:0; top:6px; bottom:10px; width:3px; background:linear-gradient(180deg, var(--kk-cta), var(--kk-accent) 45%, transparent); } .mv-v2 .mv-h1 .txt2-t1{ text-align:left; } .mv-v2 .mv-h1 .mv-shop-line{ text-align:left; } .mv-v2 .mv-h1 .mv-store{ text-align:left; } .mv-v2__sub{ margin:18px 0 0; padding-left:22px; color:var(--kk-mute); font-size:14.5px; line-height:1.95; } /* 本日の買取価格 */ .mv-rate{ margin:26px 0 0; padding:16px 18px 14px; border:1px solid var(--kk-line-w); border-radius:12px; background:linear-gradient(180deg, rgba(22,19,14,.9), rgba(12,12,12,.9)); backdrop-filter:blur(4px); } .mv-rate__head{ margin:0 0 12px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; color:var(--kk-accent); font-size:12.5px; font-weight:700; letter-spacing:.12em; } .mv-rate__date{ color:var(--kk-mute); font-size:11px; font-weight:400; letter-spacing:.04em; } .mv-rate__list{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0; padding:0; list-style:none; } .mv-rate__item{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border:1px solid var(--kk-line-w); border-radius:8px; background:rgba(255,255,255,.02); } .mv-rate__metal{ color:var(--kk-mute); font-size:11.5px; letter-spacing:.1em; } .mv-rate__num{ color:var(--kk-text); font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.2; } .mv-rate__num small{ margin-left:3px; font-size:10.5px; font-weight:400; color:var(--kk-mute); } .mv-rate__diff{ font-size:11.5px; font-variant-numeric:tabular-nums; } .mv-rate__diff.is-up{ color:#F0A08A; } .mv-rate__diff.is-down{ color:#8EC5FF; } .mv-rate__diff.is-flat{ color:var(--kk-mute); } .mv-rate__more{ margin:12px 0 0; } .mv-rate__more a{ color:var(--kk-accent) !important; font-size:12.5px; } .mv-rate__more a::after{ content:" →"; } /* 商品画像は右へ振り、上下を溶かす */ .mv-v2__visual{ position:relative; } .mv-v2__visual .mv-h1-img2{ width:112% !important; max-width:none !important; margin:0 -6% 0 0 !important; -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%); filter:drop-shadow(0 24px 40px rgba(0,0,0,.55)); } @media screen and (max-width:1024px){ .mv-v2__inner{ grid-template-columns:1fr; gap:8px; min-height:0; padding-block:28px; } .mv-v2__visual .mv-h1-img2{ width:104% !important; margin:0 -2% !important; } } @media screen and (max-width:767px){ .mv-v2__eyebrow{ font-size:10px; letter-spacing:.28em; margin-bottom:12px; } .mv-v2 .mv-h1{ padding-left:14px; } .mv-v2 .mv-h1::before{ width:2px; } .mv-v2__sub{ padding-left:14px; font-size:13.5px; margin-top:12px; } .mv-rate{ margin-top:18px; padding:14px 14px 12px; } .mv-rate__list{ gap:8px; } .mv-rate__item{ padding:8px 9px; } .mv-rate__num{ font-size:17px; } .mv-rate__metal{ font-size:10.5px; } .mv-rate__diff{ font-size:10.5px; } } /* ---- MV：土台の指定を解除する ---- 土台LPは .mv-h1 を幅700px・position:relative・left:160px・top:65px で置き、 商品画像 .mv-h1-img2 を position:absolute で重ねていた。 2カラムに組み直したので、この浮かせ方をすべて外して通常フローに戻す。 */ .mv-v2 .mv-main{ height:auto !important; min-height:0 !important; padding-block:clamp(28px,4vw,56px) !important; } .mv-v2 .mv-h1{ position:static !important; width:auto !important; max-width:100% !important; margin:0 !important; top:auto !important; left:auto !important; transform:none !important; } .mv-v2 .mv-v2__visual{ display:flex; align-items:center; } .mv-v2 .mv-h1-img2{ position:static !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; transform:none !important; height:auto !important; } .mv-v2 .mv-v2__copy{ padding-block:8px; } /* ---- MV：はみ出し・折り返し・重なりの調整 ---- */ /* 土台の .mv-main は overflow:hidden。中身が増えたぶんが切られていた */ .mv-v2 .mv-main{ overflow:visible !important; } .mv-v2__inner{ align-items:center; } /* 左カラムは全幅の半分。見出しの基準を画面幅ではなくカラム幅に寄せる */ @media screen and (min-width:1025px){ .mv-v2 .mv-h1 .txt2-t1{ font-size:clamp(18px, 1.9vw, 30px) !important; } .mv-v2 .mv-h1 .mv-brand{ font-size:clamp(20px, 2.2vw, 34px); } .mv-v2 .mv-h1 .mv-name .t2{ font-size:clamp(30px, 3.9vw, 62px) !important; } .mv-v2 .mv-h1 .mv-store{ font-size:clamp(24px, 3.0vw, 46px); } .mv-v2 .mv-h1 .mv-shop-line{ white-space:nowrap; } } /* 英字の頭が金の縦線に重なっていたので左に逃がす */ .mv-v2__eyebrow{ padding-left:22px; } @media screen and (max-width:767px){ .mv-v2__eyebrow{ padding-left:14px; } } /* ---- MVの見出し：行間を開ける ---- 「いくらや」の行と「京成臼井駅前店」の行が -6px で重なっていた。 親の line-height が 1.18 と詰まっていたうえ、 「いくらや」だけ文字が大きく（56px）行箱をはみ出していたのが原因。 行ごとにブロックとして積み、上下の余白を明示する。 */ .mv-h1 .mv-shop-line{ line-height:1.5 !important; margin-top:14px !important; } /* 「買取専門 いくらや」で1行、「京成臼井駅前店」で1行にする */ .mv-h1 .mv-brand{ display:inline-block; vertical-align:baseline; margin-right:.14em !important; } .mv-h1 .mv-name{ display:inline-block !important; vertical-align:baseline; line-height:1.25 !important; } .mv-h1 .mv-name .t2{ line-height:1.25 !important; letter-spacing:.02em !important; margin-right:.02em; } .mv-h1 .mv-store{ display:block; margin-top:.34em !important; line-height:1.35 !important; } /* 圏点は文字の上に出るので、その分の逃げを作る */ .mv-h1 .mv-name .t2::before{ top:-.06em !important; } @media screen and (max-width:767px){ .mv-h1 .mv-shop-line{ margin-top:10px !important; } .mv-h1 .mv-store{ margin-top:.28em !important; } } /* ============================================================================ MVの写真枠（正方形） 横長の商品帯をやめ、正方形の写真1枚を右カラムに置く。 角丸＋金の細枠＋2層の影で、黒地から浮かせる。 ========================================================================== */ .mv-photo{ position:relative; margin:0; width:100%; max-width:clamp(300px, 34vw, 460px); margin-left:auto; /* 右カラムの右寄せ */ aspect-ratio:1 / 1; border-radius:14px; overflow:hidden; border:1px solid var(--kk-line); box-shadow:0 1px 2px rgba(0,0,0,.5), 0 28px 60px rgba(0,0,0,.6); background:#0C0C0C; } .mv-photo__img{ width:100% !important; height:100% !important; object-fit:cover; object-position:center; display:block; position:static !important; margin:0 !important; max-width:none !important; -webkit-mask:none !important; mask:none !important; filter:none !important; transform:none !important; } /* 下辺だけ暗く落として、キャプションを乗せる */ .mv-photo::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:38%; background:linear-gradient(180deg, transparent, rgba(8,7,6,.86)); pointer-events:none; } .mv-photo__cap{ position:absolute; left:16px; bottom:14px; z-index:1; margin:0; padding:5px 12px; border:1px solid rgba(229,201,130,.4); border-radius:999px; background:rgba(8,7,6,.55); color:var(--kk-accent); font-size:12px; letter-spacing:.08em; } /* 金の角飾り（左上・右下） */ .mv-photo::before{ content:""; position:absolute; left:12px; top:12px; z-index:1; width:26px; height:26px; border-left:2px solid var(--kk-cta); border-top:2px solid var(--kk-cta); border-radius:4px 0 0 0; opacity:.9; } @media screen and (max-width:1024px){ .mv-photo{ max-width:min(420px, 78vw); margin-inline:auto; } } @media screen and (max-width:767px){ .mv-photo{ max-width:min(300px, 72vw); border-radius:12px; } .mv-photo__cap{ left:12px; bottom:11px; font-size:11px; padding:4px 10px; } .mv-photo::before{ width:20px; height:20px; left:10px; top:10px; } } /* ---- MVの枠：写真ではなくイラストを入れる場合 ---- VIガイドラインの集合アイコン（黄色の線画・背景透過）。 写真用の枠飾り（角丸の面・下の暗いぼかし・キャプション）は外し、 線画がそのまま黒地に載るようにする。 */ .mv-photo--illust{ border:0 !important; background:none !important; box-shadow:none !important; border-radius:0 !important; overflow:visible !important; max-width:clamp(320px, 38vw, 500px) !important; } .mv-photo--illust::before, .mv-photo--illust::after{ content:none !important; } .mv-photo--illust .mv-photo__img{ object-fit:contain !important; filter:drop-shadow(0 18px 34px rgba(0,0,0,.55)); } @media screen and (max-width:1024px){ .mv-photo--illust{ max-width:min(400px, 74vw) !important; } } @media screen and (max-width:767px){ .mv-photo--illust{ max-width:min(290px, 70vw) !important; } } /* ============================================================================ スマホのメインビジュアル（B案：上下で切る） 上半分に言葉、下半分に商材の写真を置き、境目を斜めに切って金の線を通す。 写真の上に本文を乗せないので、写真の明るい部分に文字が当たって読めなくなる ―― という事故が構造的に起きない。黒一色の単調さも斜めの切り口で壊れる。 高さの単位について（ここは間違えると実機で必ず壊れるので理由を残す） ・100vh … iOS はアドレスバーを含まない値を返すので、実際の表示領域より 大きくなり、下がバーに隠れて溢れる。 ・100dvh … アドレスバーの伸縮に追随して高さが変わる。このサイトでは その resize でスクロール位置が先頭へ戻る不具合を起こした実績がある。 ・100svh … 仕様では「バーが出ている状態」で固定されるはずだが、実際には 端末やブラウザによって伸縮に追随し、スクロールするたびに ファーストビューの写真も文字も大きくなる、という報告が出た。 よって、画面の高さは head の ik-svh スクリプトが開いた瞬間に1回だけ測り、 その値を --svh（画面の高さの1%）として固定する。以後は伸縮しても動かない。 測り直すのは横向き／縦向きを切り替えたときだけ。 var(--svh, 1svh) と書いてあるので、スクリプトが動かない環境では元の svh に戻る。 svh 非対応ブラウザ向けに vh の行を先に置き、対応ブラウザだけが後の行で上書きする。 追従ヘッダーは position:sticky ＝ 通常フローで場所を取るため、 画面の高さからヘッダーぶんを引かないと1画面に収まらない。 高さは body-tail の hd-offset スクリプトが --hd-h に入れている。 ========================================================================== */ @media screen and (max-width:767px){ .mv-v2 .mv-main{ position:relative; /* min-height だけでは「下限」にしかならず、中身が多ければ箱が伸びて画面から溢れる。 max-height を同じ値で重ねて高さを確定させ、中の flex に縮ませる余地を与える。 */ min-height:calc(100vh - var(--hd-h, 97px)) !important; min-height:calc(calc(100 * var(--svh, 1svh)) - var(--hd-h, 97px)) !important; max-height:calc(100vh - var(--hd-h, 97px)) !important; max-height:calc(calc(100 * var(--svh, 1svh)) - var(--hd-h, 97px)) !important; overflow:hidden !important; display:flex !important; /* 下は固定CTAバー（実測69px）に隠れるぶんを空ける。 上は詰めすぎず、ヘッダーの帯から呼吸を置いて英字を置く */ padding-block:clamp(18px, 4.4vw, 30px) 74px !important; } /* ---- 下半分の写真 ---- 斜めの落差は px で持つ。% にすると画面の高さによって角度が変わり、 すぐ下で引く金の線とズレる。切り口と線を同じ値から作れば必ず一致する。 */ /* 写真は絶対配置にしない。 下端に貼り付ける方式だと、端末の高さごとに「切り口の斜め線が申し込みボタンを横切るか」を 割合で調整し続けることになり、どこかの画面幅で必ず破綻する（実測で20pxの食い込み）。 縦積みの最後の要素にして、文字の領域と物理的に分ける。 下だけは固定CTAバーの裏まで敷きたいので、親の下パディングを負のマージンで打ち消す。 */ .mv-v2 .mv-main{ flex-direction:column !important; } .mv-v2__inner{ order:1; } .mv-sp-photo{ --cut:40px; order:2; position:static !important; flex:0 0 auto; width:100%; /* % は親の高さが max-height 止まりで確定しておらず解決できない（実測で高さ0になった）。 画面の高さから直接決まる svh を使う。 */ height:clamp(150px, calc(30 * var(--svh, 1svh)), 300px); margin:0 0 -74px !important; background:url("../img/mv-photo-sp.jpg") center 52%/cover no-repeat; clip-path:polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%); pointer-events:none; } /* 写真の下側は固定CTAバーと重なるので黒く沈める。上側は少しだけ暗くして 切り口の金の線を目立たせる。 */ .mv-sp-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,7,6,.34) 0%, rgba(8,7,6,.06) 30%, rgba(8,7,6,.55) 72%, rgba(8,7,6,.94) 100%); } /* 切り口の金のヘアライン。写真と同じ多角形を2px ぶんずらして帯にする */ .mv-sp-photo::before{ content:""; position:absolute; left:0; right:0; top:0; z-index:2; height:calc(var(--cut) + 2px); background:linear-gradient(90deg, rgba(229,201,130,0) 0%, rgba(229,201,130,.9) 38%, rgba(229,201,130,.55) 100%); clip-path:polygon(0 var(--cut), 100% 0, 100% 2px, 0 calc(var(--cut) + 2px)); } /* PCの正方形イラストはスマホでは使わない（写真が主役になったため） */ .mv-v2__visual{ display:none !important; } /* ---- 中身 ---- */ .mv-v2__inner{ position:relative; z-index:1; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:0; /* 母体の .container はスマホで左右パディングを持たないため、ここで与える。 与えないとレートの帯と「本日の買取価格」が画面の端に張り付く。 */ padding:0 20px 6px !important; max-width:none !important; width:100% !important; } /* 縦の配分は均等割りにしない。 英字→見出しはひと呼吸、見出し→サブコピーは最短（同じことを言っているので離さない）、 残った高さはレートの上（margin-top:auto）に集めて、 文字の塊を上、価格と申し込みを下辺に置く構図にする。 */ .mv-v2__eyebrow{ margin-bottom:clamp(12px, calc(2 * var(--svh, 1svh)), 22px); } .mv-v2__sub{ margin-top:clamp(10px, calc(1.6 * var(--svh, 1svh)), 16px); } /* ---- 見出し ---- いままで行ごとに中央寄せと左寄せが混ざっていて、3行の左端が全部違っていた。 縦の金ラインで束ね、左端を1本に揃える。 */ .mv-v2 .mv-h1{ /* position を明示しないと ::before の縦線が h1 ではなく祖先を基準にしてしまい、 画面のいちばん左端に、見出しと無関係な長さで伸びてしまう（実測 672px）。 */ position:relative !important; text-align:left !important; padding-left:14px !important; } /* 縦線は金だけにする。蛍光イエローが混ざると、CTAの色と役割がぶつかる */ .mv-v2 .mv-h1::before{ top:2px; bottom:4px; width:2px; background:linear-gradient(180deg, var(--kk-accent), var(--kk-gold-dp) 70%, transparent) !important; } .mv-v2 .mv-h1 .txt2, .mv-v2 .mv-h1 .txt3, .mv-v2 .mv-h1 .mv-shop-line, .mv-v2 .mv-h1 .mv-store{ display:block !important; text-align:left !important; margin-inline:0 !important; } /* 1行目は下に金の罫を持っている。block にすると罫が右端まで伸びてしまうので、 文字幅で止まる inline-block にする。 */ .mv-v2 .mv-h1 .txt2-t1{ display:inline-block !important; text-align:left !important; margin-inline:0 !important; } .mv-v2 .mv-h1 .mv-brand{ display:inline-block; } .mv-v2 .mv-h1 .mv-shop-line{ white-space:normal !important; } .mv-v2__sub{ padding-left:14px; } /* 文字の大きさは画面の高さに連動させる。 固定pxのままだと、縦の短い端末（iPhone SE / 旧Android）で文字の塊だけで 1画面を使い切ってしまい、下の要素が固定CTAバーの裏に潜り込む。 */ .mv-v2 .mv-h1 .txt2-t1{ font-size:clamp(14px, calc(2.3 * var(--svh, 1svh)), 20px) !important; } .mv-v2 .mv-h1 .mv-brand{ font-size:clamp(17px, calc(2.7 * var(--svh, 1svh)), 24px) !important; } .mv-v2 .mv-h1 .mv-name .t2, .mv-v2 .mv-h1 .txt2-t2.mv-name{ font-size:clamp(26px, calc(4.2 * var(--svh, 1svh)), 38px) !important; } .mv-v2 .mv-h1 .mv-store{ font-size:clamp(18px, calc(2.9 * var(--svh, 1svh)), 25px) !important; } .mv-v2__sub{ font-size:clamp(11.5px, calc(1.6 * var(--svh, 1svh)), 13.5px) !important; } /* ---- 相場 ---- いままで「枠の中に枠」で162px（画面の22%）も使っていた。 囲みを1枚に減らし、写真の上に浮かせる帯にして高さを半分以下にする。 */ /* .mv-v2__copy は素のブロックなので margin-top:auto は効かない。固定値で離す。 ここは話題が変わる境目なので、見出し〜サブコピー間より広く取る。 */ .mv-rate{ margin-top:clamp(16px, calc(3.0 * var(--svh, 1svh)), 30px) !important; padding:0 !important; border:0 !important; background:none !important; } .mv-rate__head{ display:flex; align-items:baseline; gap:8px; margin-bottom:7px !important; font-size:11px !important; letter-spacing:.06em; } .mv-rate__date{ font-size:10px !important; color:var(--kk-mute) !important; } .mv-rate__list{ display:flex !important; gap:0 !important; border:1px solid var(--kk-line); border-radius:10px; overflow:hidden; background:rgba(10,9,7,.80); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .mv-rate__item{ flex:1 1 0; min-width:0; display:block !important; padding:8px 4px !important; margin:0 !important; border:0 !important; border-radius:0 !important; background:none !important; text-align:center; } .mv-rate__item{ position:relative; } /* 上下いっぱいの罫は硬く見える。中央60%だけの短い線にして、区切りの主張を弱める */ .mv-rate__item + .mv-rate__item::before{ content:""; position:absolute; left:0; top:20%; bottom:20%; width:1px; background:rgba(229,201,130,.22); } .mv-rate__metal{ display:block; font-size:9.5px !important; letter-spacing:.08em; } .mv-rate__num{ font-size:clamp(15px, calc(2.1 * var(--svh, 1svh)), 18px) !important; } .mv-rate__diff{ display:block; font-size:9.5px !important; } .mv-rate__more{ margin-top:9px !important; font-size:11px !important; text-align:right; } /* ---- 申し込みボタン ---- いままでファーストビューに査定の入口が無かった。 画面下の固定バーは電話とLINEなので、ここはフォームへ送る。 */ .mv-v2 .mv-v2__copy a.mv-cta, .mv-cta{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:clamp(10px, calc(1.6 * var(--svh, 1svh)), 14px); height:clamp(46px, calc(6.4 * var(--svh, 1svh)), 54px); border-radius:999px; background:linear-gradient(90deg, var(--kk-gold-dp), var(--kk-accent) 42%, #F2E0AF); color:var(--kk-on-gold) !important; font-size:clamp(14.5px, calc(2.1 * var(--svh, 1svh)), 16.5px); font-weight:900; letter-spacing:.06em; text-decoration:none; box-shadow:0 8px 26px rgba(229,201,130,.26); } .mv-v2 .mv-v2__copy a.mv-cta, .mv-v2 .mv-v2__copy a.mv-cta span{ color:var(--kk-on-gold) !important; } .mv-cta span{ font-size:11px; font-weight:700; opacity:.78; } /* 下に続きがあることの手がかりは、写真と申し込みボタンで足りるので出さない */ .mv-v2 .mv-main::after{ content:none; } } /* PCではスマホ用の写真とボタンは出さない */ @media screen and (min-width:768px){ .mv-sp-photo, .mv-cta{ display:none !important; } } /* ここから下の「縦が短い端末」の出し分けは、メディアクエリの height 条件では書かない。 height 条件は画面の高さをそのまま見るため、アドレスバーが隠れて画面が伸びた瞬間に 条件をまたぎ、写真の大きさが段階的に飛ぶ（--svh を固定しても止められない）。 代わりに head の ik-svh スクリプトが開いた瞬間の高さで html.ik-h-short / html.ik-h-tiny を付けるので、それを見て出し分ける。 */ /* 縦が短い端末（iPhone SE / 旧Android の 600〜719px）は、 文字と価格と申し込みだけで画面を使い切る。写真を残すと帯のようにしか見えないので薄くする。 */ @media screen and (max-width:767px){ /* この高さの端末は固定CTAバーの取り分が大きく、写真が90px前後の帯になる。 出さないと下が黒く空いて締まらないので、斜めの落差を浅くして 被写体が読み取れる面積を稼いだうえで残す。 */ html.ik-h-short .mv-sp-photo{ height:clamp(130px, calc(26 * var(--svh, 1svh)), 190px) !important; --cut:24px; } html.ik-h-short .mv-rate__more{ display:none !important; } /* 同じ導線はヘッダーのメニューにもある */ } /* 画面の低い端末（横向き等）では1画面に押し込むほうが窮屈になる。 高さの縛りを解いて成り行きに戻し、写真は下に敷いたままにする。 */ @media screen and (max-width:767px){ html.ik-h-tiny .mv-v2 .mv-main{ min-height:0 !important; max-height:none !important; padding-block:clamp(12px, 3.2vw, 20px) 28px !important; } /* この帯では MV が成り行きの高さになるため、下端に貼り付けた写真が本文へ重なる （実測118px）。横向きや極端に低い画面は例外として写真を出さない。 */ html.ik-h-tiny .mv-sp-photo{ display:none !important; } html.ik-h-tiny .mv-rate__more{ display:none !important; } } /* ============================================================================ スマホのメインビジュアル：仕上げ B案の骨格（上に言葉／下に写真）はそのままに、細部を詰める。 直す前に実測して分かっていた粗さ： ・「買取専門」と「いくらや」のベースラインが11pxずれて、行が波打っていた ・「いくらや」の字間が広く（1.77px＋各文字0.71px）「い く ら や」と離れて見えた ・「京成臼井駅前店」が24.5px・白・太さ900で、35pxの「いくらや」と主役を取り合っていた ・相場の数字が白のままで、金額なのにいちばん目立たなかった ・前日比が白の極小文字で、上がったのか下がったのか分からなかった ========================================================================== */ @media screen and (max-width:767px){ /* ---- 英字ラベル ---- */ .mv-v2__eyebrow{ color:var(--kk-gold-dp) !important; font-size:9.5px !important; } /* ---- 1行目「佐倉市のブランド買取なら」 ---- 見出しの導入なので、主役より一段落とす。金の罫は文字幅で止める。 */ .mv-v2 .mv-h1 .txt2-t1{ font-size:clamp(13px, calc(2.1 * var(--svh, 1svh)), 18px) !important; letter-spacing:.10em !important; font-weight:700 !important; } /* ---- 2行目「買取専門 いくらや」 ---- ベースラインで揃える。inline-block を並べていたので行ごとに浮いていた。 */ .mv-v2 .mv-h1 .mv-shop-line{ display:flex !important; flex-wrap:wrap; align-items:baseline; column-gap:9px; row-gap:2px; margin-top:15px !important; } /* 「買取専門」は肩書き。金の細字にして、主役の名前を邪魔しない大きさに落とす */ .mv-v2 .mv-h1 .mv-brand{ flex:0 0 auto; font-size:clamp(14px, calc(2.2 * var(--svh, 1svh)), 19px) !important; letter-spacing:.22em !important; font-weight:700 !important; color:var(--kk-gold-br) !important; } /* 「いくらや」が主役。大きく、字間を詰めて塊にする */ .mv-v2 .mv-h1 .mv-name{ flex:0 0 auto; letter-spacing:.01em !important; } .mv-v2 .mv-h1 .mv-name .t2, .mv-v2 .mv-h1 .txt2-t2.mv-name{ font-size:clamp(30px, calc(4.8 * var(--svh, 1svh)), 44px) !important; letter-spacing:.01em !important; } /* 箔押し感は text-shadow で出す。 background-clip:text のグラデーション文字は一度試したが、 1文字ずつ span に割ってある作りのせいで屋号が丸ごと透明になった。 見出しが消えるのは事故なので、確実に描かれる方法を採る。 */ .mv-v2 .mv-h1 .mv-name .t2{ color:var(--kk-accent) !important; text-shadow:0 1px 0 rgba(255,255,255,.20), 0 3px 14px rgba(0,0,0,.55); } /* 「京成臼井駅前店」は所在を示す行。太さと大きさを落とし、字間で品を出す */ .mv-v2 .mv-h1 .mv-store{ flex:0 0 100%; margin-top:6px !important; font-size:clamp(16px, calc(2.6 * var(--svh, 1svh)), 22px) !important; letter-spacing:.14em !important; font-weight:700 !important; color:var(--kk-text) !important; } /* ---- サブコピー ---- 行間2.0はゆるく、2行が離れて読みにくい。1.8に詰めて色を一段落とす。 */ .mv-v2__sub{ line-height:1.8 !important; color:var(--kk-mute) !important; letter-spacing:.01em; } /* ---- 相場 ---- */ .mv-rate__head{ color:var(--kk-mute) !important; } .mv-rate__list{ border-color:rgba(229,201,130,.24) !important; border-radius:12px !important; background:linear-gradient(180deg, rgba(24,20,12,.86), rgba(10,9,7,.86)) !important; } .mv-rate__item{ padding:9px 4px 8px !important; } .mv-rate__metal{ color:var(--kk-mute) !important; letter-spacing:.14em !important; margin-bottom:2px; } /* 金額が主役。金にして字幅を揃える */ .mv-rate__num{ color:var(--kk-accent) !important; font-weight:700 !important; font-variant-numeric:tabular-nums; letter-spacing:.01em; } .mv-rate__unit, .mv-rate__item small{ color:var(--kk-mute) !important; } /* 前日比。上がったのか下がったのかが一目で分かるよう、色と地を持たせる */ .mv-rate__diff{ /* inline-block だと金額の行の残り幅に入り込み、カードごとに右へ回ったり下へ落ちたりする。 行を分けて必ず金額の真下に置く。 */ display:block !important; width:fit-content; margin-inline:auto; margin-top:4px; padding:1px 6px; border-radius:999px; font-size:9px !important; font-weight:700; letter-spacing:.02em; background:rgba(123,216,143,.14); color:#7BD88F !important; } .mv-rate__diff.is-down{ background:rgba(232,120,120,.14); color:#E87878 !important; } /* 導線は帯の一部として置く。右端に浮いていると押す対象に見えない */ .mv-rate__more{ text-align:right; } .mv-rate__more a{ display:inline-flex; align-items:center; gap:5px; padding:3px 2px; letter-spacing:.04em; border-bottom:1px solid rgba(229,201,130,.36); } /* ---- 申し込みボタン ---- 平らな金のベタは安く見える。上下の明暗差と、ゆっくり横切る光沢で厚みを出す。 */ .mv-v2 .mv-v2__copy a.mv-cta{ position:relative; overflow:hidden; background:linear-gradient(180deg,#F6E7BC 0%, var(--kk-accent) 46%, var(--kk-gold-dp) 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.35), 0 12px 30px rgba(229,201,130,.22) !important; } .mv-v2 .mv-v2__copy a.mv-cta::after{ content:""; position:absolute; top:0; left:-45%; width:38%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform:skewX(-18deg); } .mv-cta span{ opacity:.72; } /* ---- 写真 ---- 切り口の金線だけだと平面的。線の下に淡い光を置いて、面が持ち上がって見えるようにする。 */ .mv-sp-photo{ overflow:hidden; } .mv-sp-photo::after{ background: linear-gradient(180deg, rgba(229,201,130,.16) 0%, rgba(8,7,6,.10) 14%, rgba(8,7,6,.04) 34%, rgba(8,7,6,.55) 72%, rgba(8,7,6,.94) 100%) !important; } } /* ---- 入場の動き ---- メインビジュアルは最初に見る場所なので、スクロール待ちの演出は使えない。 読み込み直後に、上から順に立ち上げる。 オープニングの幕が出ている間は一時停止させ、幕が引けた瞬間から動き出すようにする （幕の下で動き終わってしまうと、開いたときには何も起きていないことになる）。 */ @media screen and (max-width:767px) and (prefers-reduced-motion: no-preference){ .mv-v2__eyebrow, .mv-v2 .mv-h1 .txt2-t1, .mv-v2 .mv-h1 .mv-shop-line, .mv-v2__sub, .mv-rate, .mv-v2 .mv-v2__copy a.mv-cta{ animation:ik-mv-in .72s cubic-bezier(.22,1,.36,1) both; } .mv-v2__eyebrow{ animation-delay:.04s; } .mv-v2 .mv-h1 .txt2-t1{ animation-delay:.12s; } .mv-v2 .mv-h1 .mv-shop-line{ animation-delay:.20s; } .mv-v2__sub{ animation-delay:.30s; } .mv-rate{ animation-delay:.40s; } .mv-v2 .mv-v2__copy a.mv-cta{ animation-delay:.50s; } /* 写真の大きさは変えない。 以前は18秒かけて 1.10倍から等倍へゆっくり寄せていたが、 スクロールしている間も時間は進むため「スクロールすると写真の大きさが変わる」 ように見えてしまい、落ち着かなかった。等倍で固定する。 */ .mv-sp-photo{ animation:none !important; transform:none !important; } /* ボタンの光沢。常時光らせるとうるさいので、間を置いて一度だけ横切る */ .mv-v2 .mv-v2__copy a.mv-cta::after{ animation:ik-mv-shine 5.4s cubic-bezier(.4,0,.2,1) 1.6s infinite; } html.ik-op-on .mv-v2 *, html.ik-op-on .mv-sp-photo{ animation-play-state:paused !important; } } @keyframes ik-mv-in{ from{ opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } } @keyframes ik-mv-zoom{ from{ transform:scale(1.10); } to { transform:scale(1); } } @keyframes ik-mv-shine{ 0% { left:-45%; } 22% { left:130%; } 100% { left:130%; } } /* ============================================================================ 黒基調から浮いていた2か所（2026-08-11） ========================================================================== */ /* ---- スマホ全体に敷かれていた白い大理石の背景 ---- 母体テーマが .page.allgenre::before に、SPのときだけ全画面固定で sp/page_allgenre/bg.jpg（白い大理石）を敷いていた（PCでは content:none）。 このサイトのセクションは半透明の黒を重ねているため、その白が下から透けて、 訴求ブロックの周りだけ白くぼやけた面になっていた。画像を出さない。 */ @media screen and (max-width:767px){ .page.allgenre::before{ background-image:none !important; } } /* ---- 「そのお悩み いくらやが解決します」の面 ---- 着せ替えのときにスマホだけ蛍光イエローのベタ地にしていた。 その上に生成りの文字が乗るため、コントラストが足りず読めない （PCは黒地で問題なかった）。PCと同じ黒地に戻し、金の枠で締める。 */ /* ここはスマホ限定。PCの .txt-circle は幅225pxの絶対配置で、 枠や余白を足すと人物写真の上に乗って文字が重なる（一度そうしてしまった）。 */ @media screen and (max-width:767px){ .kouka-main .txt-circle{ background:linear-gradient(180deg, rgba(28,24,16,.96), rgba(12,11,8,.96)) !important; border:1px solid var(--kk-line); border-radius:12px; padding:20px 14px 18px !important; } .kouka-main .txt-circle .p1{ color:var(--kk-accent) !important; letter-spacing:.06em; } .kouka-main .txt-circle .p2, .kouka-main .txt-circle .p3, .kouka-main .txt-circle .p4{ color:var(--kk-text) !important; } /* 幅の固定を外して文字なりに置けるのはスマホだけ（PCは固定幅で組んである） */ .kouka-main .txt-circle .hl{ width:auto !important; padding:0 .12em !important; margin-right:.1em !important; } } /* 「いくらや」は濃いグレーの箱で囲ってあり、黒地の上では四角い板が浮いて見える。 色だけ変えて箱を消す（寸法はPCのレイアウトが依存しているので触らない）。 */ .txt-circle .hl, .kouka-main .txt-circle .hl{ background-color:transparent !important; color:var(--kk-accent) !important; } /* 「解決」の下線が淡いピンクで、黒地では色が浮くうえほとんど見えない */ .txt-circle .p4::before, .kouka-main .txt-circle .p4::before{ border-bottom-color:var(--kk-gold-dp) !important; opacity:.85; } /* 相場表がスマホで右の列を読めない（lp/watch で実測413px、枠は359px）。 枠は角丸を保つために overflow:hidden になっていて、あふれたぶんが 横スクロールもできずに切り落とされていた。横だけスクロールできるようにする。 縦は hidden のままにしないと、角丸の内側で中身が縦にも動いてしまう。 */ .gc-table-wrap{ overflow-x:auto !important; overflow-y:hidden !important; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; /* 表の端まで送ったあと、ページごと横に動かさない */ } @media screen and (max-width:767px){ /* 横に送れることが分かるよう、右端に薄い影を落とす */ .gc-table-wrap{ background-image:linear-gradient(90deg, transparent calc(100% - 24px), rgba(0,0,0,.45) 100%); background-repeat:no-repeat; background-attachment:local; } } /* ============================================================================ 金相場・買取価格ページの仕上げ（2026-08-11） 直す前の状態を実測して分かっていたこと： ・品位別の3表が 2fr 1fr 1fr の grid で、金16行・プラチナ4行・銀2行と 高さが大きく違うため、右側に大きな空白が残って落ち着かない ・前日比が上昇も下落も同じ扱いで、増減が一目で分からない ・計算ツールが結果「—」だけの箱で、何を入れるとどうなるのか伝わらない ・チャートの品位ボタンが26個ベタ並びで、どれが金でどれが銀か読み取れない ========================================================================== */ /* ---- 品位別の表 ---- 3列を均等にして、高さの違いは「行数の差」として素直に見せる。 金だけ行数が多いので、金を先頭に置いたまま列幅を揃えるのがいちばん収まる。 */ .gc-tables{ grid-template-columns:repeat(3, 1fr) !important; gap:18px !important; } .gc-table-wrap{ height:auto; border-color:rgba(229,201,130,.22) !important; } .gc-table caption{ position:relative; padding:13px 16px 12px !important; background:linear-gradient(180deg, rgba(229,201,130,.14), rgba(229,201,130,.05)) !important; border-bottom:1px solid rgba(229,201,130,.20); } /* 見出しの左に金の縦棒を置いて、3枚のカードの起点を揃える */ .gc-table caption::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:18px; background:var(--kk-accent); } .gc-table thead th{ background:rgba(255,255,255,.02); font-size:11.5px !important; letter-spacing:.06em; } /* 1行おきに地色を変えて、横に目を滑らせても行を見失わないようにする */ .gc-table tbody tr:nth-child(even){ background:rgba(255,255,255,.022); } .gc-table tbody tr:hover{ background:rgba(229,201,130,.07); } .gc-price{ font-weight:700; } /* 前日比。上がったか下がったかを、色と向きの両方で示す。 色だけだと色覚によっては区別できないので、記号を必ず添える。 */ .gc-diff{ font-size:12.5px !important; font-variant-numeric:tabular-nums; } .gc-diff.is-up::before{ content:"▲ "; font-size:9px; vertical-align:.1em; } .gc-diff.is-down::before{ content:"▼ "; font-size:9px; vertical-align:.1em; } .gc-diff.is-up{ color:#7BD88F !important; } .gc-diff.is-down{ color:#E87878 !important; } /* ---- 計算ツール ---- 「入れる → 出る」の関係が見えるように、入力と結果を1枚の面で上下に分ける。 */ .gc-calc{ padding:0 !important; border-color:rgba(229,201,130,.24) !important; overflow:hidden; } .gc-calc__row{ padding:24px 24px 22px !important; border-bottom:1px solid rgba(229,201,130,.16); } .gc-calc__result{ margin-top:0 !important; padding:20px 24px 22px !important; border-top:0 !important; background:linear-gradient(180deg, rgba(229,201,130,.07), rgba(229,201,130,.02)); align-items:center !important; } .gc-calc__unit{ font-size:12.5px !important; } .gc-calc__out{ display:flex; align-items:baseline; gap:4px; font-size:clamp(30px, 4vw, 42px) !important; text-shadow:0 2px 14px rgba(0,0,0,.5); } /* 計算結果は JS が「283,925円」と単位まで含めて書き出すので、 ここで単位を足すと「円円」になる（一度そうしてしまった）。何も足さない。 */ .gc-calc__label{ font-size:12px !important; } /* ---- チャートの品位ボタン ---- 26個が同じ見た目で並んでいて、どこまでが金でどこからが銀か読み取れなかった。 選択中だけを金地で強く出し、それ以外は輪郭だけにして圧を下げる。 */ .gc-ui__head{ font-size:11.5px !important; color:var(--kk-mute) !important; } /* クラス名は .gc-chip ではなく .gc-type / .gc-period。 前回 .gc-chip と書いていて、この指定はまるごと空振りしていた。 */ .gc-type, .gc-period{ border-color:rgba(229,201,130,.28) !important; transition:background-color .2s ease, border-color .2s ease, color .2s ease; } .gc-type:hover, .gc-period:hover{ border-color:var(--kk-accent) !important; background:rgba(229,201,130,.10) !important; } .gc-type.is-on, .gc-period.is-on{ background:var(--kk-accent) !important; border-color:var(--kk-accent) !important; color:var(--kk-on-gold) !important; font-weight:700; } /* ---- スマホ ---- */ @media screen and (max-width:767px){ .gc-tables{ grid-template-columns:1fr !important; gap:14px !important; } /* 金は16行あり、スマホでは表だけで画面2つぶんになる。 主要な品位（K24〜K18）だけ開いておき、残りは畳んで縦の長さを抑える。 */ .gc-table tbody tr:nth-child(n+7){ display:none; } .gc-table-wrap.is-open .gc-table tbody tr{ display:table-row; } .gc-table-more{ display:block; width:100%; padding:11px; border:0; border-top:1px solid rgba(229,201,130,.18); background:rgba(229,201,130,.05); color:var(--kk-accent); font-size:12.5px; font-weight:700; letter-spacing:.06em; cursor:pointer; } .gc-table-wrap.is-open .gc-table-more{ background:rgba(255,255,255,.03); } /* 行数が6行以下の表（プラチナ4・銀2）には出す意味がない */ .gc-table-wrap[data-rows="short"] .gc-table tbody tr{ display:table-row; } .gc-table-wrap[data-rows="short"] .gc-table-more{ display:none; } .gc-calc__row{ padding:20px 18px 18px !important; } .gc-calc__result{ padding:18px 18px 20px !important; } } /* ============================================================================ よくあるご質問の開閉（TOP・下層共通） カテゴリの見出しを押すと開くのだが、押せることも開いていることも 見た目に出ていなかった（三角が欠けて「◣」のように見えていた）。 ========================================================================== */ h3.faq-title{ position:relative; cursor:pointer; transition:background-color .2s ease; } h3.faq-title:hover{ background:rgba(229,201,130,.07) !important; } h3.faq-title:focus-visible{ outline:2px solid var(--kk-accent); outline-offset:-2px; } /* 母体の三角（border で作った ▲）は色指定が片側だけで欠けて見えるので置き換える。 開閉で向きが変わる山形にして、いま開いているかを形で示す。 */ h3.faq-title::after{ content:"" !important; position:absolute !important; right:22px !important; top:50% !important; width:10px !important; height:10px !important; margin:0 !important; /* border-style と border-width を個別に打ち消さないと、 母体が入れている三角の値が残って、山形ではなく塗りつぶしの菱形になる。 */ border-style:solid !important; border-width:0 2px 2px 0 !important; border-color:var(--kk-accent) !important; background:none !important; transform:translateY(-70%) rotate(45deg) !important; transition:transform .25s cubic-bezier(.22,1,.36,1); } h3.faq-title.act::after{ transform:translateY(-25%) rotate(-135deg) !important; } /* ---- FAQの中身が出るまでの待ちを消す ---- スクロール演出（.rv-on）が .faq-box に 「0.14秒待ってから0.65秒かけてフェード」を掛けており、 開閉のたびにその待ちが挟まって、押してから中身が見えるまで0.8秒かかっていた。 演出はページに入ってきたときの1回で十分なので、開いた状態では効かせない。 */ .faq-list.act .faq-box, .rv-on .faq-list.act .faq-box{ opacity:1 !important; transform:none !important; transition:none !important; } /* 回答が出るときは、高さの伸びに文字のフェードを重ねて、 中身が「立ち上がってくる」ように見せる（長さは0.18秒まで）。 */ .faq-a{ transition:none; } .faq-q.act + .faq-a{ animation:ik-faq-in .18s ease-out both; } @keyframes ik-faq-in{ from{ opacity:0; transform:translateY(-3px); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce){ .faq-q.act + .faq-a{ animation:none; } } /* 回答の「A.」が赤のままで、黒地では読みづらいうえサイトの配色から浮いていた。 質問の「Q.」と対になるよう、金の系統に寄せる。 */ .faq-a::before, .faq-box .faq-a::before, dd.faq-a::before{ color:var(--kk-accent) !important; } .faq-a > .a, .faq-a .en, .faq-list .faq-a::first-letter{ color:inherit; } /* ============================================================================ LPのカード類のバランス（2026-08-11） 直す前の状態 ・買取リスト（.ik-sub-grid）が6列で、1枚の中の写真が64px しかなく、 何が写っているか分からない札が横に並んでいるだけになっていた。 スマホでは3列48pxで、さらに小さい。 ・買取の流れ（.ik-flow-list）が5列指定なのに中身は3つ。 グリッドの残り2列ぶんが空いて、右側に大きな余白が残っていた。 さらに文章量の差がそのままカードの高さの差になっていた。 ========================================================================== */ /* ---- 買取リスト ---- 点数（5〜12件）に関わらず落ち着くよう、幅を決め打ちにせず 「1枚の最小幅」から列数を自動で決める。 最小幅を広く取ることで、写真を大きく見せられる。 */ .ik-sub-grid{ /* 1枚の最小幅を広く取って3列に落とす。 4列だと5件のとき2段目が1枚だけになって座りが悪く、写真も小さいままだった。 */ grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)) !important; gap:20px !important; max-width:900px; margin-inline:auto; } .ik-sub-item{ gap:14px !important; padding:22px 16px 20px !important; border-color:rgba(229,201,130,.20) !important; border-radius:12px !important; font-size:14.5px !important; transition:border-color .25s ease, transform .25s cubic-bezier(.22,1,.36,1); } .ik-sub-item:hover{ border-color:var(--kk-accent) !important; transform:translateY(-3px); } /* 写真は元から白背景で、薄いグレーの縁を持っている。 その外側にさらに白い面を敷くと白が二重になって境目が線として出る（一度そうしてしまった）。 余白を入れず、画像の白をそのままカードの面として使う。 */ .ik-sub-item img{ width:100% !important; height:auto !important; aspect-ratio:1/1; object-fit:cover; /* contain だと元画像の縁が内側に残る */ max-width:none; border-radius:8px; background:#fff; } @media screen and (max-width:1024px){ .ik-sub-grid{ grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)) !important; } } @media screen and (max-width:767px){ /* スマホは2列。3列だと1枚が110px前後になり、写真がまた小さくなる。 */ .ik-sub-grid{ grid-template-columns:repeat(2, 1fr) !important; gap:12px !important; } .ik-sub-item{ padding:16px 10px 14px !important; font-size:13.5px !important; gap:10px !important; } .ik-sub-item img{ max-width:none !important; } } /* ---- 買取の流れ ---- 列数は中身の数に合わせる。5列固定だと3つのときに右が空く。 */ .ik-flow-list{ grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)) !important; gap:18px !important; max-width:1000px; margin-inline:auto; } /* 文章の長さが違ってもカードの高さを揃える。 （grid の既定は stretch だが、中の要素が上に詰まって下が空いて見えていた） */ .ik-flow-item{ display:flex; flex-direction:column; padding:26px 22px 24px !important; border-color:rgba(229,201,130,.20) !important; border-radius:12px !important; position:relative; overflow:hidden; } /* 番号を大きく、上端に金の線を引いて手順の並びを示す */ .ik-flow-item::before{ content:""; position:absolute; left:0; top:0; height:2px; width:100%; background:linear-gradient(90deg, var(--kk-accent), transparent); } .ik-flow-step{ font-size:30px !important; font-weight:700; font-family:"DM Mono","Roboto Mono",monospace; letter-spacing:.04em !important; } .ik-flow-ttl{ margin-top:12px !important; font-size:18px !important; font-weight:700; padding-bottom:12px; border-bottom:1px solid rgba(229,201,130,.16); } .ik-flow-body{ margin-top:14px !important; line-height:1.95 !important; flex:1 1 auto; /* 短い文でもカードの高さを埋め、下端を揃える */ } @media screen and (max-width:767px){ .ik-flow-list{ grid-template-columns:1fr !important; gap:12px !important; } .ik-flow-item{ padding:20px 18px 18px !important; } .ik-flow-step{ font-size:26px !important; } .ik-flow-ttl{ font-size:16.5px !important; } } /* ---- 買取実績のカードも同じ考え方で ---- 4列固定で1枚が小さく、スマホでは2列で写真が潰れていた。 */ .ik-res2-grid{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)) !important; } @media screen and (max-width:767px){ .ik-res2-grid{ grid-template-columns:repeat(2, 1fr) !important; gap:12px !important; } } /* ============================================================================ コラムのアイキャッチ（WordPress化にあわせて追加） 記事に画像を設定すると出る。設定しない記事は今までどおり文字だけで並ぶ。 ========================================================================== */ .ik-col-item--thumb{ display:flex; flex-direction:column; padding:0 !important; overflow:hidden; } .ik-col-thumb{ margin:0; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(180deg,#1C1810,#0C0C0C); border-bottom:1px solid rgba(229,201,130,.16); } .ik-col-thumb__img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.22,1,.36,1); } .ik-col-item--thumb:hover .ik-col-thumb__img{ transform:scale(1.04); } .ik-col-item--thumb .ik-col-body{ padding:18px 20px 20px; flex:1 1 auto; } /* 記事の本文の先頭に置くアイキャッチ */ .ik-post__thumb{ margin:0 0 26px; border-radius:12px; overflow:hidden; border:1px solid rgba(229,201,130,.18); } .ik-post__thumb-img{ width:100%; height:auto; display:block; } /* ---- 管理画面から書いた本文の見た目 ---- 静的版は .ik-post__p / .ik-post__h2 のようにクラスを持たせて組んでいたが、 ブロックエディタが出すのはクラスの付かない素の p / h2 / ul。 同じ値を素のタグに当てて、静的版と同じ見え方にする。 */ .ik-post__body > h2, .ik-post__body > .wp-block-heading{ margin:52px 0 0; padding-bottom:12px; border-bottom:1px solid var(--kk-line-w); color:var(--kk-accent); font-size:23px; line-height:1.5; } .ik-post__body > h3{ margin:34px 0 0; color:var(--kk-accent); font-size:18.5px; line-height:1.6; } .ik-post__body > p{ margin:20px 0 0; color:var(--kk-text); font-size:16px; line-height:2.05; } .ik-post__body > ul{ margin:22px 0 0; padding:0; list-style:none; } .ik-post__body > ul > li{ position:relative; padding:0 0 0 24px; margin-top:12px; color:var(--kk-text); font-size:15.5px; line-height:1.95; } .ik-post__body > ul > li::before{ content:""; position:absolute; left:6px; top:.85em; width:6px; height:6px; border-radius:50%; background:var(--kk-accent); } .ik-post__body > ol{ margin:22px 0 0; padding-left:1.4em; } .ik-post__body > ol > li{ margin-top:12px; color:var(--kk-text); font-size:15.5px; line-height:1.95; } .ik-post__body > ol > li::marker{ color:var(--kk-accent); font-weight:700; } .ik-post__body dl{ margin:22px 0 0; } .ik-post__body dt{ margin-top:18px; color:var(--kk-accent); font-size:16px; font-weight:700; line-height:1.7; } .ik-post__body dd{ margin:6px 0 0; padding-left:16px; border-left:1px solid var(--kk-line-w); color:var(--kk-text); font-size:15.5px; line-height:1.95; } /* 静的版は本文の最初の段落にも margin-top:20px が付いている。 ここで0にすると、そのぶんページの高さがずれる（実測20px）。打ち消さない。 */ /* 本文を包む div は、静的版には無い1段。 display:contents で入れ子から外して、余白の計算を静的版とそろえる。 */ .ik-post__body{ display:contents; } .ik-post__meta{ margin:0 0 8px; color:var(--kk-mute); font-size:13px; letter-spacing:.04em; } /* 管理画面のエディタから入る画像・キャプションを黒地でも読めるようにする */ .ik-post__body img{ max-width:100%; height:auto; border-radius:10px; } .ik-post__body figure{ margin:24px 0; } .ik-post__body figcaption{ margin-top:8px; font-size:12.5px; color:var(--kk-mute); text-align:center; } .ik-post__body a{ color:var(--kk-accent); text-decoration:underline; } .ik-post__body blockquote{ margin:24px 0; padding:14px 18px; border-left:3px solid var(--kk-accent); background:rgba(229,201,130,.06); } .ik-post__body table{ width:100%; border-collapse:collapse; margin:24px 0; } .ik-post__body th, .ik-post__body td{ padding:10px 12px; border:1px solid rgba(229,201,130,.18); font-size:14px; } .ik-post__body th{ background:rgba(229,201,130,.08); color:var(--kk-accent); } @media screen and (max-width:767px){ .ik-col-item--thumb .ik-col-body{ padding:14px 16px 16px; } .ik-post__thumb{ margin-bottom:20px; } /* 静的版はスマホで見出しと本文を一段締めている。 同じ値を素のタグにも当てないと、1要素あたり数pxずつずれて 記事の終わりでは200px以上の差になる（実測231px）。 */ .ik-post__body > h2, .ik-post__body > .wp-block-heading{ margin-top:40px; font-size:20px; } .ik-post__body > p{ font-size:15.5px; } } /* ============================================================================ 日本語の折り返し 句読点や文の区切りと関係ない位置で折り返されて読みにくい、という指摘への対応。 ・word-break:auto-phrase … Chrome系が文節（意味の切れ目）で折り返すようになる。 非対応ブラウザは値を捨てるだけなので害はない。 ただし overflow-wrap:anywhere のような強い指定と重ねると、 非対応ブラウザ側で「どこでも切る」挙動だけが残るため併用しない。 ・line-break:strict … 見出しだけ禁則を厳しくする。 大きい文字は1文字の追い出し・追い込みが特に目立つため。 対象は本文系のみ。数値の並ぶ表とボタンのラベルには効かせない。 ========================================================================== */ /* word-break:auto-phrase は「文節で折り返す」機能。 短い見出しやキャッチには効くが、長い本文に掛けると 文節を優先するあまり行末が大きく空き、行の長さがばらついて逆に読みにくくなる （実測：本文の行が「…当店が」で終わり、右に4文字ぶんの余白が残っていた）。 そのため、掛けるのは短いテキストだけに絞る。 長い段落は日本語の禁則処理に任せる（句読点は行頭に来ないので、これで十分読める）。 */ h2, h3, h4, h5, dt, summary, .ik-faq-q, .ik-qa__q, .ik-col-title, .ik-add-sub, .ik-pagehead__lead, .ik-post__lead, .ik-item-name, .ik-point__ttl, .ik-flow-ttl, .ik-lead-lg, h1:not(.mv-h1){ /* MVの見出しだけは span で行を組んである作りものなので触らない */ word-break:auto-phrase; } div.ik-faq-q{ word-break:auto-phrase; } /* 本文にも文節での折り返しを効かせる。 一度これを外して通常の折り返しに戻したが、今度は 「ネックレスであれ／ば」「あった日／は」のように語の途中で切れてしまい、 かえって読みにくくなった（実測56か所）。文節で切るほうが日本語としては自然。 ただし文節を優先すると行末が大きく空く。そこで text-wrap:pretty を重ねて、 行の長さのばらつきと、最終行が1語だけ残る状態をブラウザ側に整えさせる。 */ p, li, dd, blockquote, figcaption, .ik-faq-a, .ik-qa__a, .txt1, .txts1, .txts2, div.ik-faq-a, div.ik-qa__a, div.ik-add-body, div.ik-lead, .ik-post__p, .ik-post__body p, .ik-col-ex{ word-break:auto-phrase; overflow-wrap:break-word; /* 長いURLなど、切らないと溢れるものだけ折る */ text-wrap:pretty; } /* 見出しは行数が少ないぶん、ばらつきが特に目立つ */ h2, h3, h4, .ik-add-ttl, .ik-pagehead__ttl, .ik-col-title{ text-wrap:balance; } h1, h2, h3, h4, .ik-add-ttl, .ik-pagehead__ttl, .ik-add-sub, .ik-pagehead__lead, .ik-qa__q, .mv-h1, .market-ttl, .ik-crit dt{ line-break:strict; } /* 文節折り返しを外すもの。 数値・ラベル・ナビは1行で読ませたい塊であって、文ではないため。 */ .mv-rate__list li, .mv-rate__list li *, .ik-rate-grid li, .gc-table-wrap, .gc-table-wrap *, .ik-market, .ik-market *, table, table *, .pc-nav a, .pc-sub__list li, .dr-sub li, .footer-menu li, .ik-lp-nav li, .ik-tag-list li, .ik-btn-gold, .ik-btn-gold *, #fixed-contact-bar, #fixed-contact-bar *, .ik-res2__num, .ik-item-no, .ik-point-no, [data-count]{ word-break:normal; } /* 英数字が長く続く箇所は、単語の途中で切る break-all ではなく、 収まらないときだけ折る break-word にする。 （break-all は「Gold」のような短い語まで容赦なく割ってしまう） */ .jisseki-items .jisseki-item{ word-break:normal !important; overflow-wrap:break-word; } /* URLをそのまま置いている箇所だけは、溢れさせないほうを優先して残す */ .ik-post__p a[href^="http"], .ik-note-small a[href^="http"]{ overflow-wrap:anywhere; } /* ============================================================================ スマホのヘッダーとドロワー ============================================================================ ■ 「中身が全部見えない」の実際の原因（実測で切り分けた結果） 先に「.header-toggle の scrollHeight が 844 のまま＝あふれ0」という報告が出ていたが、 これは計測手順のほうの取り違えだった。同じ数字を再現できたので記録しておく。 390x844 買取品目を閉じたまま … scrollHeight 844 / あふれ 0 390x667 買取品目を閉じたまま … scrollHeight 745 / あふれ 78 390x844 買取品目を開いた後 … scrollHeight 1270 / あふれ 426 390x667 買取品目を開いた後 … scrollHeight 1270 / あふれ 603 報告にあった「あふれ0」「あふれ78px」は、どちらも買取品目を"開く前"の値と一致する。 いっぽう「最下端が927px」は .dr-sub の getBoundingClientRect().bottom で、 これは details が閉じていても 927 を返す。閉じた details の中身は今の Chrome では display:none ではなく content-visibility:hidden で隠されるため、 矩形だけは最後に測ったときの値が残って読めてしまう。 つまり「開く前の scrollHeight」と「開いた後の位置」を突き合わせた結果の見かけ上の矛盾で、 高さの計算から漏れている要素は無い（overflow を持つ祖先も height:100% の連鎖も無かった。 祖先は header-box(68px) → header(sticky) → 以下すべて overflow:visible）。 ■ では何が本当に壊れていたか（3サイズすべてで再現した） 1) 最後の「査定申込フォーム」ボタンが、画面下端の固定CTAバー（実測69px・z-index 99990）に 食われていた。ドロワーの z-index は 998 なのでバーのほうが手前に来る。 いちばん下まで送っても、ボタン下端 583px に対してバー上端が 558px。25px 潜っていた。 土台の padding-bottom は 10vw（=36〜39px）しかなく、69px のバーを想定していない。 2) ドロワーの上でスクロールしきると、その先が背面のページに抜けていた（実測 +4000px）。 3) その結果、閉じたときにスクロール位置が別の場所になっていた（1200px → 5200px）。 4) 慣性スクロールの指定が無かった。 指示どおり body{position:fixed} は使わない（iOSでリサイズ時に先頭へ戻る不具合を出した実績あり）。 overscroll-behavior と overflow で止める。 ========================================================================== */ /* ---- ドロワーのスクロールそのものを直す ---- ドロワーは top/bottom/left/right:0 の position:fixed で画面を全面覆うので、 指が触れる場所は必ずこの要素の上にある。 したがって、この要素からの scroll chaining さえ断てば背面は動かせなくなる。 */ /* 外側はスクロールさせない。ここを動かすと、中身と一緒に閉じるボタンまで流れてしまう （実測：いちばん下まで送ると × が top:-466px＝画面の外へ出て、閉じる手段が無くなる）。 スクロールは内側の .header-toggle__inner に持たせ、× は外側に置いたまま固定する。 */ .header-toggle{ overflow:hidden !important; scroll-behavior:auto; /* ページ側の smooth を持ち込まない */ } .header-toggle__inner{ height:100%; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; /* iOSの慣性スクロール */ overflow-y:auto; overflow-x:hidden; /* 未指定だと overflow-y:auto につられて auto になり横バーが出る */ scroll-behavior:auto; } /* 閉じるボタンは内側の外。スクロールしても常に同じ位置に残る */ .header-toggle .menu-close{ position:absolute !important; z-index:2; } /* ---- 768〜1099px でもドロワーを全画面にする ---- この帯ではSP用CSS（media="(max-width:767px)"）が読み込まれないため、 .header-toggle が母体テーマのPC用スタイル＝ position:absolute の右寄せパネルのまま残る。 absolute はドキュメント基準なので、ページを少しでもスクロールした状態で開くと パネルが画面の上のほうに置き去りになり、中身に一切触れなくなる （実測：スクロール1200pxの位置で開くと、CTAの座標を叩いても null が返る＝画面に存在しない）。 SPと同じ全画面の固定パネルに揃える。 */ @media screen and (min-width:768px) and (max-width:1099px){ /* この帯では母体テーマがドロワーを「常に表示された右側のパネル」として置いている （position:absolute で x=393 の位置に逃がしてあるだけで、display は block）。 そのまま全画面の固定パネルにすると、閉じているときも画面を覆って ページのどこも押せなくなる（ハンバーガー自体もクリックを奪われた）。 既定は非表示にして、jQuery が inline style に display:block を書いたときだけ出す。 */ .header-toggle{ display:none !important; } .header-toggle[style*="display: block"], .header-toggle[style*="display:block"]{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; width:auto !important; /* 高さは vh で直に与える。 height:auto や top/bottom 任せにすると、 「親は中身なり／中身(inner)は親の100%」で循環して パネルが padding ぶんの169pxに潰れた（実測）。 fixed なので vh は画面基準で確実に解決される。 スマホ側は sp用CSSがすでに高さを持っているので、ここは768px以上だけの話。 */ height:100vh !important; max-height:100vh !important; display:block !important; } /* 幅が広いぶん、中身が横に間延びしないよう中央に寄せる */ .header-toggle__inner{ max-width:420px; margin-inline:auto; width:100%; } .header-toggle .menu-close{ right:20px !important; left:auto !important; } } /* ---- 背面のロック（こちらが本命。overscroll-behavior だけには頼れない） ---- WebKit（Playwright同梱のiOS Safari相当）で実測したところ CSS.supports('overscroll-behavior','contain') が false を返した。 overscroll-behavior が Safari に入ったのは16なので、それ以前では 上の指定は素通りし、スクロールは背面へ抜ける。 ＝ Chromium では overscroll-behavior だけで止まったが、それを当てにはできない。 同じWebKitで :has() は true だったので、こちらを主たる止め方にする。 ドロワーの開閉は jQuery の slideDown/slideUp が inline style の display を 書き換えることで行われる（開＝display: block / 閉＝display: none）。 マークアップにもJSにも手を入れられないので、その inline style を :has() で読んで ルート要素をロックする。 html{overflow-y:hidden} は body{position:fixed} と違ってスクロール位置を保持するため、 閉じたときに先頭へ飛ぶ事故が起きない。 :has() 非対応の古い環境では上の overscroll-behavior だけが効く（動作は劣化するが壊れない）。 !important が要るのは、このファイルの上のほう（追従ヘッダーの節）で html,body に overflow-y:visible !important を掛けているため。 あれは position:sticky を殺さないための指定なので消せない。 ドロワーが開いている間だけ、その上から重ねて止める。 横方向は clip のまま触らない（はみ出しを飲む役目をそのまま残す）。 */ html:has(.header-toggle[style*="display: block"]), html:has(.header-toggle[style*="display:block"]){ overflow-y:hidden !important; } /* 「ページ上部へ戻る」の丸ボタンは z-index 99991 でドロワーより手前に出るため、 開いている間だけ引っ込める（実測でCTAボタンの上に重なっていた）。 */ html:has(.header-toggle[style*="display: block"]) #to-top, html:has(.header-toggle[style*="display:block"]) #to-top{ opacity:0 !important; pointer-events:none !important; } /* ---- 開いている間は画面下の固定CTAバーも引っ込める ---- バーは z-index 99990、ドロワーは 998。バーのほうが常に手前に出るため、 ドロワーの下端 69px（360px幅では82px）が「見えているのに押せない帯」になっていた。 実測：360×640 で「03 時計」をタップすると、時計ページへ行かずに バーのLINEボタンが反応し、別タブが開いてドロワーが閉じる。 下端に余白を足すだけでは、いちばん下まで送った時しか救えない（途中では常に潜る）。 ドロワーの中に同じ導線（査定申込フォーム・電話）があるので、隠しても導線は失われない。 */ html:has(.header-toggle[style*="display: block"]) #fixed-contact-bar, html:has(.header-toggle[style*="display:block"]) #fixed-contact-bar{ opacity:0 !important; pointer-events:none !important; visibility:hidden !important; } /* このブロックは 1099px まで効かせる。 768〜1099px でもハンバーガー方式にしているのに、ドロワーの作り込みが max-width:767px の中だけにあったため、この帯では素のテーマの見た目のまま残り、 下端CTAがどこまでスクロールしても押せない状態だった（実測：46px潜ったまま）。 */ @media screen and (max-width:1099px){ /* ========================================================================== 1. ヘッダー（帯の高さ69pxは変えない。「縮小させない」指示があるため） ========================================================================== */ /* ---- ロゴの白い台紙 ---- レギュレーション上ロゴを地色に直接置けないので台紙は残す。 ただし帯の中で台紙のほうが主役に見えていたので、面積を落として馴染ませる。 ・ロゴ 116x29 → 104x26（面積 -20%） ・台紙 136x46 → 118x40（面積 -25%） アイソレーションはロゴ高さの0.25倍＝26×0.25＝6.5px 必要なので、 四方に7pxを確保する（縦横とも同じ値にして、ロゴの周りの空きを均等にする）。 ロゴ自体には影も色変換も掛けない。効果は台紙側にだけ持たせる。 */ .allgenre-header .logo-wrap{ width:118px !important; height:40px !important; padding:7px !important; border-radius:5px !important; /* 純白のベタだと黒帯の中で切り抜きのように浮く。 金のヘアラインで縁を作り、真下に短い影を落として帯の上の「板」に見せる。 */ box-shadow: 0 0 0 1px rgba(229,201,130,.34), 0 2px 6px rgba(0,0,0,.55); } .allgenre-header .allgenre-logo{ width:104px !important; height:26px !important; } /* ---- 店名 ---- 10pxは実機で読めないので上げる。入りきらない分は省略記号ではなく2行に流す。 単語の途中では折らせたくないので keep-all を掛け、 「買取専門いくらや」と「京成臼井駅前店」の間の空白でだけ折れるようにする。 幅の実測：360px幅でも台紙の右〜ハンバーガーの左に156px残るので、 1行目（8文字）は 11px でも 88px で収まる。 */ .allgenre-header .header-shop{ margin:0 0 0 10px !important; font-size:clamp(11px, 3.1vw, 12.5px) !important; line-height:1.34 !important; letter-spacing:.04em !important; color:#E4DAC4 !important; /* --kk-mute より一段明るくして黒地でのコントラストを稼ぐ */ white-space:normal !important; /* 省略記号で切らない */ overflow:visible !important; text-overflow:clip !important; word-break:keep-all !important; overflow-wrap:normal !important; } /* ---- ハンバーガー ---- 白いベタの四角が黒×金から浮いていたので、地を透かして金の細枠＋金の3本線にする。 タップ範囲は48x48を死守する（土台は12.25vw＝360px幅で44pxしかなく足りていなかった）。 */ .allgenre-header button.menu-open{ width:48px !important; height:48px !important; background:rgba(229,201,130,.07) !important; border:1px solid rgba(229,201,130,.42) !important; border-radius:11px !important; position:relative !important; transition:background-color .2s ease, border-color .2s ease; } .allgenre-header button.menu-open:active{ background:rgba(229,201,130,.18) !important; border-color:var(--kk-accent) !important; opacity:1 !important; /* 土台の :hover{opacity:.8} が指では貼り付いたままになる */ } /* 3本の線。上下は button 自身の ::before/::after、中央は .bar の ::before が担当する （土台がこの3つで1セットを組んでいるので、担当はそのまま位置と色だけ差し替える）。 .bar は枠線の内側いっぱい（46x46）に広げてあるので、 3本とも同じ座標系で top を指定できる。中央=23px を軸に上下7px振り分け。 */ .allgenre-header button.menu-open::before, .allgenre-header button.menu-open::after, .allgenre-header button.menu-open .bar::before{ content:"" !important; /* 土台はスマホ幅でしか中身を与えていない。 タブレット幅では中央の線が丸ごと消えていた */ display:block !important; position:absolute !important; background-color:var(--kk-accent) !important; width:20px !important; height:2px !important; left:13px !important; right:auto !important; border-radius:2px !important; transition:none !important; } .allgenre-header button.menu-open::before{ top:15px !important; } .allgenre-header button.menu-open .bar::before{ top:22px !important; } .allgenre-header button.menu-open::after{ top:29px !important; } .allgenre-header button.menu-open .bar{ position:absolute !important; inset:0 !important; width:auto !important; height:auto !important; background:none !important; /* 土台の白いベタが、この幅だけ残って四角く光っていた */ border:0 !important; box-shadow:none !important; font-size:0 !important; color:transparent !important; } /* ---- 帯の下端の仕切り ---- 罫線1本だと真下の黒と差が付かず「途切れ」に見えていたので、 金のヘアラインを一段濃くし、下に短い影を足して面を分ける。 */ .allgenre-header{ border-bottom-color:rgba(229,201,130,.42) !important; box-shadow:0 1px 0 rgba(229,201,130,.10), 0 6px 14px rgba(0,0,0,.5); } /* ========================================================================== 2. ドロワー本体 ========================================================================== */ .header-toggle{ /* 上：閉じるボタン（48px・上から10px＝下端58px）に文字が潜らない高さを確保する。 土台は16vw指定で、360px幅だと57.6pxしかなく閉じるボタンと重なっていた。 */ padding-top:74px !important; padding-left:18px !important; padding-right:18px !important; /* 下：画面下端の固定CTAバー（実測69px）に最後のボタンが潜っていたので、 バーの高さ＋余白＋ホームバー分を空ける。ここが今回の「押せない」の直接原因。 */ padding-bottom:calc(69px + 26px + env(safe-area-inset-bottom, 0px)) !important; border-left:0 !important; /* 全面表示なので左端の線は意味がなく、境界に見えるだけ */ background-color:var(--kk-bg) !important; } /* ---- 閉じる（×） ---- グレーのベタ四角が浮いていたので、ハンバーガーと同じ言語（透ける地＋金の細枠）に揃える。 位置もハンバーガーの実測位置（右10px・上10px）にぴったり重ねる。 開くと同じ場所で三本線が×に入れ替わって見えるので、状態が分かる。 */ .header-toggle .menu-close{ top:10px !important; right:10px !important; width:48px !important; height:48px !important; background:rgba(229,201,130,.07) !important; border:1px solid rgba(229,201,130,.42) !important; border-radius:11px !important; } .header-toggle .menu-close:active{ background:rgba(229,201,130,.18) !important; border-color:var(--kk-accent) !important; opacity:1 !important; } .header-toggle .menu-close::before, .header-toggle .menu-close::after{ background-color:var(--kk-accent) !important; width:20px !important; height:2px !important; left:13px !important; top:22px !important; border-radius:2px !important; } /* ---- ドロワーの中のロゴ ---- 全幅358x65の白い板が、開いた瞬間の画面をほぼ占領していた。 ロゴの高さを決めて、台紙は内容に合わせて縮める（inline-flex）。 アイソレーションは 36×0.25＝9px を四方に確保する。 */ .header-toggle .toggle-logo-wrap{ display:inline-flex !important; width:auto !important; padding:9px !important; border-radius:6px !important; margin:0 !important; box-shadow:0 0 0 1px rgba(229,201,130,.30), 0 3px 10px rgba(0,0,0,.5); } .header-toggle .toggle-logo{ width:auto !important; height:36px !important; } /* ---- ドロワーの店名 ---- 土台は #ffe100 の2px線で仕切っていた。太い蛍光線は黒×金から浮くので金のヘアラインへ。 文字は左揃えにして、ロゴ→店名→メニューの視線を1本の縦線に乗せる。 */ .header-toggle .toggle-shop{ margin:14px 0 0 !important; padding-top:12px !important; border-top:1px solid rgba(229,201,130,.24) !important; color:#E4DAC4 !important; font-size:12px !important; font-weight:600 !important; letter-spacing:.12em !important; text-align:left !important; line-height:1.5 !important; } /* ---- メニューの並び ---- 土台は全項目が同じ太さの点線で区切られていて、階層も強弱も無い状態だった。 区切りは金のヘアラインに落として、代わりに行の高さでリズムを作る。 */ .header-toggle .list-links{ margin:18px 0 26px !important; } .header-toggle .list-links > .li{ border-bottom:1px solid rgba(229,201,130,.14) !important; } .header-toggle .list-links > .li:last-child{ border-bottom:0 !important; } .header-toggle .list-links > .li > .a{ padding:15px 4px 15px 26px !important; font-size:15px !important; letter-spacing:.04em !important; color:var(--kk-text) !important; } /* 土台の矢印はPNG（menu-arrow.png）で、色を金に寄せられないうえ .dr-sub の中では左padding指定と噛み合わず文字に重なっていた。CSSの山括弧に置き換える。 */ .header-toggle .list-links > .li > .a::before{ background:none !important; width:6px !important; height:6px !important; border:0 !important; border-top:1.5px solid var(--kk-accent) !important; border-right:1.5px solid var(--kk-accent) !important; transform:rotate(45deg); left:8px !important; margin-top:-4px !important; } /* 最後の「無料査定のお申し込み」だけは行き先が違うので、金の文字で少し立てる */ .header-toggle .list-links > .li:last-child > .a{ color:var(--kk-gold-br) !important; font-weight:700 !important; } /* ---- 「買取品目」の折りたたみ ---- 開いているかどうかが矢印の向きだけだったので、開いたら行の地色を持ち上げる。 */ .header-toggle .li--acc > .dr-acc > summary{ padding:15px 10px 15px 26px !important; font-size:15px !important; font-weight:700 !important; letter-spacing:.04em !important; color:var(--kk-text) !important; position:relative; border-radius:6px 6px 0 0; transition:background-color .2s ease, color .2s ease; } /* 他の行の山括弧と縦位置を揃えるための、開閉行だけの目印（金の小さな四角） */ .header-toggle .li--acc > .dr-acc > summary::before{ content:""; position:absolute; left:8px; top:50%; width:6px; height:6px; margin-top:-3px; background:var(--kk-accent); transform:rotate(45deg); transition:background-color .2s ease; } .header-toggle .li--acc > .dr-acc[open] > summary{ background:rgba(229,201,130,.08) !important; color:var(--kk-gold-br) !important; } .header-toggle .li--acc > .dr-acc > summary::after{ width:7px !important; height:7px !important; border-right-width:1.5px !important; border-bottom-width:1.5px !important; } /* ---- 折りたたみの中身 ---- 土台のままだと10品目にも本文と同じ太さの区切り線が付いて、 どこまでが「買取品目の中」なのか分からなくなっていた。 金の縦のレールで囲って、入れ子であることを見せる。 */ .header-toggle .dr-sub{ margin:0 0 12px !important; padding:6px 0 6px 12px !important; border-left:2px solid rgba(229,201,130,.30) !important; background:rgba(229,201,130,.04) !important; border-radius:0 0 8px 0; } .header-toggle .dr-sub .li{ border-bottom:1px solid rgba(229,201,130,.09) !important; } .header-toggle .dr-sub .li:last-child{ border-bottom:0 !important; } .header-toggle .dr-sub .a{ padding:11px 6px !important; font-size:14px !important; color:var(--kk-text) !important; } /* 土台のPNG矢印が絶対配置のまま残り、アイコンや文字に重なっていたので消す */ .header-toggle .dr-sub .a::before{ display:none !important; } .header-toggle .dr-sub .dr-no{ min-width:20px; color:var(--kk-gold-dp) !important; } /* 「買取品目の一覧を見る」だけは品目ではなく行き先なので、金の文字＋矢印で分ける */ .header-toggle .dr-sub .li:last-child .a{ color:var(--kk-gold-br) !important; font-weight:700 !important; padding-left:2px !important; } .header-toggle .dr-sub .li:last-child .a::after{ content:"→"; margin-left:auto; color:var(--kk-accent); } /* ---- 下のCTA ---- 蛍光イエローはサイト共通のCTA色なので色は変えない（ここだけ金にすると導線が弱くなる）。 浮いて見えていたのは、文字が27pxと大きすぎたことと、 土台テーマ由来のグレーのベタ影（box-shadow:0 5px 0 #d0cecc）が黒地に残っていたため。 大きさを整えて、影を金の落ち影に替える。 */ .header-toggle .list-btns-header{ padding:0 !important; } .header-toggle .list-btns-header .li{ margin-bottom:0 !important; } .header-toggle .list-btns-header .caption{ font-size:12.5px !important; font-weight:600 !important; letter-spacing:.03em !important; color:var(--kk-accent) !important; margin-bottom:10px !important; white-space:normal !important; /* 土台の nowrap は360px幅で右にはみ出す */ } .header-toggle .list-btns-header .btn{ height:58px !important; border-radius:10px !important; border:1px solid rgba(229,201,130,.55) !important; box-shadow:0 4px 14px rgba(231,255,0,.16) !important; } .header-toggle .list-btns-header .btn .txt{ font-size:19px !important; letter-spacing:.02em !important; } /* 丸い点線アイコンが17vw（66px）あり、58pxの高さからはみ出すので詰める */ .header-toggle .list-btns-header .btn .icon{ height:58px !important; line-height:58px !important; max-width:52px !important; flex-basis:52px !important; } .header-toggle .list-btns-header .btn .icon::after{ width:34px !important; height:34px !important; top:11px !important; left:9px !important; } .header-toggle .list-btns-header .btn-phone .icon::before{ top:22px !important; left:20px !important; height:10px !important; width:10px !important; border-right-width:2px !important; border-bottom-width:2px !important; } } /* ========================================================= 追従バーの色を、CTAセクションと同じ組み立てにする（2026-08-12） CTAセクションは「蛍光イエロー（主役の申込ボタン）＋金（受けの枠と文字）＋黒地」 の3色で組んでいる。追従バーは電話ボタンだけが同じ蛍光イエローで、 隣のLINEがサービス既定の緑のままだったため、ここだけ配色から外れていた。 受け側を金にして、バー全体をCTAセクションと同じ見え方に揃える。 ========================================================= */ #fixed-contact-bar{ background:rgba(8,7,6,.94) !important; /* 背景色（#080706）と同じ黒に寄せる */ border-top:1px solid var(--kk-line, rgba(229,201,130,.34)) !important; } #fixed-contact-bar a.fcb-line{ background:var(--kk-accent, #E5C982) !important; color:var(--kk-on-gold, #1A1206) !important; border-color:var(--kk-accent, #E5C982) !important; } #fixed-contact-bar a.fcb-line span, #fixed-contact-bar a.fcb-line .fcb-line-txt, #fixed-contact-bar a.fcb-line .fcb-small{ color:var(--kk-on-gold, #1A1206) !important; } #fixed-contact-bar a.fcb-line:hover{ background:var(--kk-gold-dp, #B8944F) !important; } /* ========================================================= ヘッダーのバランスを整える（2026-08-12） これまでヘッダーの中身は本文と同じ1040pxの枠に入れていた。 そのため1440pxの画面では左右に200pxずつ空き、ロゴが画面の1/7も内側に入って 左半分ががらんと空き、ナビと申込ボタンだけが右に固まって見えていた。 ヘッダーは画面の端まで使う帯なので、中身も端に置く。 ロゴ＝左端／メニュー＝中央／無料査定＝右端の三点に配置し直す。 ========================================================= */ @media screen and (min-width:1025px){ .allgenre-header .header-box.container{ width:auto !important; max-width:none !important; min-width:0 !important; margin:0 !important; padding:12px clamp(20px, 2.6vw, 44px) !important; } /* メニューは中央に置き、申込ボタンだけを右端へ送る。 申込ボタンは並びから外して右端に固定する。 並びの中に置いたまま右へ寄せると、その手前のメニューが左に押しつけられ、 ロゴのすぐ隣に固まってしまうため。 */ .allgenre-header .header-box.container{ position:relative; } .allgenre-header .pc-nav{ justify-content:center !important; gap:4px !important; padding-right:110px !important; /* 右端の申込ボタンと重ならないだけの幅を空ける */ } .allgenre-header .pc-nav > a.pc-nav-cta{ position:absolute !important; right:clamp(20px, 2.6vw, 44px) !important; top:50% !important; transform:translateY(-50%) !important; margin:0 !important; } /* ロゴの白い箱が縦に張り出して帯を押し広げていたので、少し詰める */ .allgenre-header .logo-wrap{ padding:6px 10px !important; } .allgenre-header .allgenre-logo{ width:156px !important; height:36px !important; } } /* スマホのヘッダー。 ロゴの絵の中に「買取専門 いくらや」と書いてあるのに、その右にも同じ文字が並び、 3つの要素が横いっぱいに詰まって窮屈だった。 右の文字は店舗名だけにして、ロゴと三本線の間に余白を作る。 */ @media screen and (max-width:767px){ .allgenre-header .header-box{ gap:10px !important; padding:8px 12px !important; } .allgenre-header .logo-wrap{ padding:5px 8px !important; } .allgenre-header .header-shop{ font-size:11px !important; line-height:1.45 !important; letter-spacing:.01em !important; margin:0 !important; } } /* 会社概要などのモーダルの中見出し（2026-08-12） 土台が明るい面を想定して文字を #111 で置いており、 黒地にしたこのサイトでは「店舗概要」「フランチャイズ本部」の見出しが 背景に沈んで、黄色い縦棒だけが浮いて見えていた。 */ #modal_policy .ik-modal-body h2, #modal_privacy .ik-modal-body h2, .modal-policy .ik-modal-body h2, .modal-privacy .ik-modal-body h2{ color:var(--kk-gold-br, #E5C982) !important; -webkit-text-fill-color:var(--kk-gold-br, #E5C982) !important; } /* スマホでの会社概要の表（2026-08-12） 項目名の列が広く、値の列に3〜4文字しか入らず、 許可番号が5行に割れて読めなかった。項目名を上、値を下の縦並びにする。 */ @media screen and (max-width:767px){ #modal_policy .policy-table, #modal_policy .policy-table tbody, #modal_policy .policy-table tr, #modal_policy .policy-table th, #modal_policy .policy-table td{ display:block; width:auto !important; } #modal_policy .policy-table tr{ padding:10px 0; } #modal_policy .policy-table th{ border:0 !important; padding:0 0 3px !important; font-size:12px !important; letter-spacing:.04em; background:transparent !important; /* 項目名の帯が黒地から浮いていた */ } #modal_policy .policy-table td{ border:0 !important; padding:0 !important; font-size:14px !important; line-height:1.6; } #modal_policy .policy-table tr + tr{ border-top:1px solid var(--kk-line-w, rgba(229,201,130,.18)) !important; } } /* フッター下部のリンク（会社概要／個人情報／公式Instagram）（2026-08-12） 上に並ぶ4列のメニューと同じ .footer-links を持っているため、 その1列ぶんの幅（50%＝480px）まで受け継いでしまい、 3つ並べるのに必要な496pxに足りず、公式Instagramだけ次の行に落ちていた。 ここは列ではなく1本の帯なので、幅の縛りを外す。 */ .footer-links--sub{ width:100% !important; max-width:none !important; flex:0 1 auto !important; } /* フッターのメニュー（2026-08-12） 4列のうち「お問い合わせ・無料査定」だけが列の幅に収まらず2行に折れ、 その列だけ縦に伸びて他と揃っていなかった。パソコン幅では折り返さない。 */ @media screen and (min-width:768px){ .footer-menu .footer-links a{ white-space:nowrap; } }