@charset "UTF-8"; /* ========================================================= kk-common.css - 生地選択アコーディオン（#fabric-accordion 専用） ========================================================= */ /* 余計なテーマCSSの影響を受けにくくする */ #fabric-accordion, #fabric-accordion *{ box-sizing:border-box; } #fabric-accordion{ max-width:1200px; margin:40px auto; text-align:center; } /* リセット */ #fabric-accordion nav, #fabric-accordion ul, #fabric-accordion li{ margin:0; padding:0; list-style:none; } #fabric-accordion a{ text-decoration:none; box-shadow:none; } /* ---- タブ（上段5本） ---- */ #fabric-accordion nav > ul{ display:flex; justify-content:center; align-items:flex-start; gap:0; } #fabric-accordion nav > ul > li{ width:240px; /* 240×5=1200 */ margin:0; padding:0; } #fabric-accordion nav > ul > li > p{ margin:0; border-radius:0; /* ← 角を直角に */ overflow:hidden; } /* 帯色（pに色を置く） */ #fabric-accordion nav > ul > li:nth-of-type(1) > p{ background:#f0b265; } #fabric-accordion nav > ul > li:nth-of-type(2) > p{ background:#f49bbb; } #fabric-accordion nav > ul > li:nth-of-type(3) > p{ background:#a5c98c; } #fabric-accordion nav > ul > li:nth-of-type(4) > p{ background:#60afd6; } #fabric-accordion nav > ul > li:nth-of-type(5) > p{ background:#9ca9c9; } /* タブ文字（白→透明のオーバーレイ） */ #fabric-accordion nav > ul > li > p > a.accord, #fabric-accordion nav > ul > li > p > a.accord2{ display:block; height:63px; line-height:63px; width:100%; color:#fff !important; font-weight:500; font-size:21px; /* ← 少し大きく */ letter-spacing:.02em; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; font-family:"ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif; background:linear-gradient(to right, rgba(255,255,255,.70) 0%, rgba(255,255,255,.50) 25%, rgba(255,255,255,0) 100% ); text-shadow:1px 1px 1px rgba(0,0,0,.25); } /* hover：オーバーレイを消す＋下線 */ #fabric-accordion nav > ul > li > p > a.accord:hover, #fabric-accordion nav > ul > li > p > a.accord2:hover{ background:none; color:#fff !important; text-shadow:1px 1px 1px rgba(0,0,0,.40); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.18em; } #fabric-accordion nav > ul > li > p > a.accord:visited, #fabric-accordion nav > ul > li > p > a.accord2:visited{ color:#fff !important; } /* ---- パネル（下段） ---- */ #fabric-accordion ul.accrd01, #fabric-accordion ul.accrd02, #fabric-accordion ul.accrd03, #fabric-accordion ul.accrd04, #fabric-accordion ul.accrd05{ display:none; margin:8px 0 0; padding:6px 0 10px; /* 少し詰める */ border:3px solid #ddd; background:#fff; width:240px; } #fabric-accordion ul.accrd01{ border-color:#f0b265; } #fabric-accordion ul.accrd02{ border-color:#f49bbb; } #fabric-accordion ul.accrd03{ border-color:#a5c98c; } #fabric-accordion ul.accrd04{ border-color:#60afd6; } #fabric-accordion ul.accrd05{ border-color:#9ca9c9; } #fabric-accordion ul.open{ display:block; } #fabric-accordion ul.accrd01 li, #fabric-accordion ul.accrd02 li, #fabric-accordion ul.accrd03 li, #fabric-accordion ul.accrd04 li, #fabric-accordion ul.accrd05 li{ margin:0 0 4px; /* ← 行間を詰める（共通） */ padding:0; } /* ---- ブランド（accrd01） ---- */ #fabric-accordion ul.accrd01 li a{ display:block; width:170px; height:30px; margin:0 auto; text-indent:-9999px; overflow:hidden; background-repeat:no-repeat !important; background-position:center top !important; background-size:170px 60px !important; background-color:transparent !important; transition:none !important; } #fabric-accordion ul.accrd01 li a:hover{ background-position:center bottom !important; box-shadow:1px 1px 2px #ccc,-1px 1px 2px #ccc,-1px -1px 2px #ccc,1px -1px 2px #ccc; } /* ブランド背景画像（/com/img/sidenav/） */ #fabric-accordion ul.accrd01 li.canclini a { background-image:url("/com/img/sidenav/bnr_canclini.jpg"); } #fabric-accordion ul.accrd01 li.albini a { background-image:url("/com/img/sidenav/bnr_albini.jpg"); } #fabric-accordion ul.accrd01 li.tmason a { background-image:url("/com/img/sidenav/bnr_thomasmason.jpg"); } #fabric-accordion ul.accrd01 li.tmjourney a { background-image:url("/com/img/sidenav/bnr_tmjourney.jpg"); } #fabric-accordion ul.accrd01 li.tmgold a { background-image:url("/com/img/sidenav/bnr_tmgold.jpg"); } #fabric-accordion ul.accrd01 li.alumo a { background-image:url("/com/img/sidenav/bnr_alumo.jpg"); } #fabric-accordion ul.accrd01 li.anteks a { background-image:url("/com/img/sidenav/bnr_anteks.jpg"); } #fabric-accordion ul.accrd01 li.soktas a { background-image:url("/com/img/sidenav/bnr_soktas.jpg"); } #fabric-accordion ul.accrd01 li.testa a { background-image:url("/com/img/sidenav/bnr_testa.jpg"); } #fabric-accordion ul.accrd01 li.somelos a { background-image:url("/com/img/sidenav/bnr_somelos.jpg"); } #fabric-accordion ul.accrd01 li.oltolina a { background-image:url("/com/img/sidenav/bnr_oltolina.jpg"); } #fabric-accordion ul.accrd01 li.texta a { background-image:url("/com/img/sidenav/bnr_texta.jpg"); } #fabric-accordion ul.accrd01 li.getzner a { background-image:url("/com/img/sidenav/bnr_getzner.jpg"); } #fabric-accordion ul.accrd01 li.monti a { background-image:url("/com/img/sidenav/bnr_monti.jpg"); } #fabric-accordion ul.accrd01 li.acorn a { background-image:url("/com/img/sidenav/bnr_acorn.jpg"); } #fabric-accordion ul.accrd01 li.djohn a { background-image:url("/com/img/sidenav/bnr_djanderson.jpg"); } #fabric-accordion ul.accrd01 li.grandi a { background-image:url("/com/img/sidenav/bnr_grandi.jpg"); } #fabric-accordion ul.accrd01 li.weba a { background-image:url("/com/img/sidenav/bnr_weba.jpg"); } #fabric-accordion ul.accrd01 li.carlo a { background-image:url("/com/img/sidenav/bnr_carloriva.jpg"); } #fabric-accordion ul.accrd01 li.stormtex a { background-image:url("/com/img/sidenav/bnr_stormtex.jpg"); } #fabric-accordion ul.accrd01 li.leggiuno a { background-image:url("/com/img/sidenav/bnr_leggiuno.jpg"); } #fabric-accordion ul.accrd01 li.spence a { background-image:url("/com/img/sidenav/bnr_spence.jpg"); } #fabric-accordion ul.accrd01 li.seais a { background-image:url("/com/img/sidenav/bnr_seaisland.jpg"); } #fabric-accordion ul.accrd01 li.easycare a { background-image:url("/com/img/sidenav/bnr_easycare.jpg"); } #fabric-accordion ul.accrd01 li.oimport a { background-image:url("/com/img/sidenav/bnr_others_import.jpg"); } #fabric-accordion ul.accrd01 li.giza a { background-image:url("/com/img/sidenav/bnr_giza.jpg"); } #fabric-accordion ul.accrd01 li.others a { background-image:url("/com/img/sidenav/bnr_others.jpg"); } /* ---- カラー／柄（accrd02 / accr d03） ---- */ /* 画像＋文字を少し大きく、上下間隔を詰める */ #fabric-accordion ul.accrd02 li{ margin-bottom:3px; } #fabric-accordion ul.accrd03 li{ margin-bottom:3px; } #fabric-accordion ul.accrd02 li a, #fabric-accordion ul.accrd03 li a{ display:flex; align-items:center; gap:10px; width:220px; margin:0 auto; padding:4px 6px; /* ← 詰める */ color:#333 !important; font-size:14.5px; /* ← 文字を少し大きく */ line-height:1.25; text-decoration:none !important; white-space:nowrap; border:1px solid transparent; /* hover時に枠が出てもガタつかない */ border-radius:2px; background:transparent; } #fabric-accordion ul.accrd02 li img, #fabric-accordion ul.accrd03 li img{ width:56px; /* ← 画像を少し大きく */ height:auto; flex:0 0 56px; display:block; border:1px solid #ddd; } /* hover：浮き上がる影＋青文字＋下線（旧サイト寄せ） */ #fabric-accordion ul.accrd02 li a:hover, #fabric-accordion ul.accrd03 li a:hover{ background:#fff !important; border-color:#d0d0d0; color:#0b55cc !important; text-decoration:underline !important; text-underline-offset:.18em; box-shadow:1px 1px 2px #ccc,-1px 1px 2px #ccc,-1px -1px 2px #ccc,1px -1px 2px #ccc; } /* ---- 価格帯（accrd04） ---- */ /* 「左線＋下線」が基本。hover時だけ箱っぽく“浮く” */ #fabric-accordion ul.accrd04 li{ margin:0; /* ← 行間を詰める */ } #fabric-accordion ul.accrd04 li a{ display:block; width:220px; margin:0 auto; padding:6px 8px; text-align:left; white-space:nowrap; word-break:keep-all; line-height:1.35; font-size:13.5px; color:#333 !important; text-decoration:none !important; background:#fff; border-left:2px solid #666; /* ← 左線 */ border-bottom:1px solid #666; /* ← 下線 */ border-top:0; border-right:0; border-radius:0; } /* 金額の数字（<b>想定） */ #fabric-accordion ul.accrd04 li a b{ font-size:1.45em; font-family:"ＭＳ Ｐ明朝","MS PMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",serif; font-weight:700; letter-spacing:.02em; } /* hover：枠＋影（ただしベースは左線＋下線のまま） */ #fabric-accordion ul.accrd04 li a:hover{ color:#0b55cc !important; text-decoration:underline !important; text-underline-offset:.18em; box-shadow:1px 1px 2px #ccc,-1px 1px 2px #ccc,-1px -1px 2px #ccc,1px -1px 2px #ccc, inset 0 0 0 1px rgba(0,0,0,.18); } /* ---- パネル内 hover（念のため：05も共通に寄せる） ---- */ #fabric-accordion ul.accrd05 li a:hover{ box-shadow:1px 1px 2px #ccc,-1px 1px 2px #ccc,-1px -1px 2px #ccc,1px -1px 2px #ccc, inset 0 0 0 1px rgba(0,0,0,.18); } /* ---- スマホ：縦積み ---- */ @media (max-width: 768px){ #fabric-accordion nav > ul{ display:block; } #fabric-accordion nav > ul > li{ width:100%; margin:0 0 6px; } #fabric-accordion ul.accrd01, #fabric-accordion ul.accrd02, #fabric-accordion ul.accrd03, #fabric-accordion ul.accrd04, #fabric-accordion ul.accrd05{ width:100%; } #fabric-accordion ul.accrd02 li a, #fabric-accordion ul.accrd03 li a, #fabric-accordion ul.accrd04 li a{ width:92%; } } /* ========================================================= 微調整（追い込み）：文字サイズ／2-3列の縦間隔／価格帯の角（線の重なり解消） ========================================================= */ /* 1) 上部タブ（トップのバナー）文字をもう少し大きく */ #fabric-accordion nav > ul > li > p > a.accord, #fabric-accordion nav > ul > li > p > a.accord2{ font-size:20px; /* ← 18→20 相当。大きすぎたら 19px に */ } /* 2) アコーディオン表示の「2番目・3番目」（カラー／柄） - 縦間隔を詰める - 文字を少し大きく */ #fabric-accordion ul.accrd02 li, #fabric-accordion ul.accrd03 li{ margin-bottom:1px; /* ← さらに詰める（必要なら 1px） */ } #fabric-accordion ul.accrd02 li a, #fabric-accordion ul.accrd03 li a{ font-size:18px; /* ← 少し大きく（14.5→16） */ line-height:1.18; /* ← 行間を詰める */ padding:3px 6px; /* ← 上下の余白を詰める */ gap:9px; /* ← 画像と文字の間隔も少し詰める */ } /* 画像も“気持ち”だけ大きく（不要なら 56px に戻してください） */ #fabric-accordion ul.accrd02 li img, #fabric-accordion ul.accrd03 li img{ width:58px; flex:0 0 58px; } /* 3) 価格帯（4番目） - 上の横線と左の縦線が重ならないようにする → 左線を「疑似要素」で描いて、開始位置を少し下げる */ #fabric-accordion ul.accrd04 li a{ position:relative; border-top:1px solid #666; /* ← 上の横線を付ける（元に寄せる） */ border-left:0 !important; /* ← 左線は疑似要素で描くので消す */ padding-left:12px; /* ← 左線ぶんの余白 */ } /* 左の縦線（上の横線と“つながらない”ように top を少し下げる） */ #fabric-accordion ul.accrd04 li a::before{ content:""; position:absolute; left:0; top:3px; /* ← ここがポイント：上線と重ならない */ bottom:0; width:2px; background:#666; } /* hover時も同じ見た目のまま（線の重なり防止を維持） */ #fabric-accordion ul.accrd04 li a:hover{ border-left:0 !important; }　 /* ========== kk-accesspage（アクセス/近県向け案内） ========== */ .kk-accesspage{ max-width: 900px; margin: 0 auto; } .kk-accesspage__section{ margin: 0 0 1.8em; } .kk-accesspage__h2{ margin: 1.2em 0 .6em; font-size: 1.2em; font-weight: 700; } .kk-accesspage__h3{ margin: 0 0 .5em; font-size: 1.05em; font-weight: 700; } .kk-accesspage__box{ background: #fff; border: 1px solid #e6e6e6; border-radius: 10px; padding: 14px 16px; margin: 0 0 1em; } .kk-accesspage__map{ position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: 1px solid #e6e6e6; } .kk-accesspage__map iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .kk-accesspage__list{ margin: .2em 0 .6em 1.2em; } .kk-accesspage__list li{ margin: 0 0 .4em; } .kk-accesspage__photo img{ max-width: 100%; height: auto; display: block; border-radius: 10px; } /* FAQ（details） */ .kk-accesspage details.kk-faq{ background: #fff; margin: .6em 0; border-radius: 10px; padding: .8em 1em; border: 1px solid #e6e6e6; } .kk-accesspage details.kk-faq summary{ font-weight: 700; cursor: pointer; } .kk-accesspage details.kk-faq p{ margin: .6em 0 0; line-height: 1.7; }　 /* HEROだけサイト幅に合わせる */ .kk-hero{ padding:56px 0; background:#f7f7f7; } .kk-hero .kk-wrap{ max-width:1280px; /* ← ここを “今のサイト枠” と同じ数値にする（1200/1240/1280など） */ margin:0 auto; padding:0 24px; box-sizing:border-box; text-align:left; /* 見本（2枚目）寄せ */ } .kk-hero h1{ margin:0 0 12px; font-size:clamp(26px, 3vw, 40px); line-height:1.25; } .kk-hero .kk-sub{ margin:0 0 14px; font-weight:600; font-size:clamp(14px, 1.4vw, 18px); } .kk-hero .kk-lead{ max-width:60ch; /* 横に伸びすぎないように（読みやすさ） */ margin:0 0 22px; } .kk-hero .kk-cta{ display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-start; }　 /* ========================= kk-why（5枚カード）最終版：左右の空間を詰める＋外枠＋高さ揃え ========================= */ .kk-why{ padding: 40px 0 18px; } .kk-why .kk-wrap{ /* ←左右の空間の主因：max-width を外す/上げる */ max-width: none; /* 重要：これで親コンテナ幅いっぱいになる */ width: 100%; margin: 0 auto; padding: 26px 16px 28px; /* 左右を詰める */ box-sizing: border-box; border: 1px solid #e6e6e6; /* 外枠の薄い線 */ border-radius: 12px; background: #fff; } .kk-why h2{ margin: 0 0 22px; padding: 0; background: transparent; border: 0; box-shadow: none; text-align: center; font-size: clamp(22px, 2.2vw, 34px); line-height: 1.25; } /* 5枚カード：均等・高さ揃え */ .kk-cards5{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; /* カード間も詰める */ align-items: stretch; } .kk-cards5 > li{ min-width: 0; } .kk-cards5 > li > a{ height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 22px 20px 18px; box-sizing: border-box; background: #fff; border: 1px solid #e3e3e3; border-radius: 14px; box-shadow: 0 4px 10px rgba(0,0,0,.06); text-decoration: none; color: inherit; } .kk-cards5 strong{ display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; line-height: 1.25; min-height: 2.6em; } .kk-cards5 span{ display: block; font-size: 16px; line-height: 1.6; color: #444; } /* 初めてのお客様：初心者マーク */ .kk-cards5 > li:first-child strong::after{ content: ""; width: 20px; height: 29px; flex: 0 0 auto; background: url("/com/img/icon_wakaba.png") center / contain no-repeat; } /* レスポンシブ */ @media (max-width: 1100px){ .kk-cards5{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 780px){ .kk-cards5{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px){ .kk-why .kk-wrap{ padding: 22px 12px 22px; } .kk-cards5{ grid-template-columns: 1fr; } } /* 関連ページナビ（仕様リンク） */ .kk-related-nav{ margin: 18px 0; } .kk-related-nav__list{ list-style: none; display: flex; flex-wrap: wrap; gap: 10px 10px; /* 行・列の間隔 */ padding: 0; margin: 0; } .kk-related-nav__link{ display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border: 1px solid #d9d9d9; border-radius: 999px; /* ピル型 */ background: #fff; text-decoration: none; font-size: 14px; line-height: 1; color: inherit; transition: transform .06s ease, box-shadow .15s ease, border-color .15s ease; } .kk-related-nav__link:hover{ border-color: #bdbdbd; box-shadow: 0 2px 10px rgba(0,0,0,.06); transform: translateY(-1px); } .kk-related-nav__link:focus-visible{ outline: 3px solid rgba(0,0,0,.25); outline-offset: 2px; } /* 現在ページ（JSで付与する想定） */ .kk-related-nav__link.is-current{ background: #f3f3f3; border-color: #bdbdbd; font-weight: 700; } /* スマホで押しやすく */ @media (max-width: 480px){ .kk-related-nav__link{ padding: 11px 14px; font-size: 15px; } } /* =================================== サイドナビ（.side-order）：hover/active を強く =================================== */ /* リンクを“面”にする（最重要） */ .side-order nav a{ display:block; width:100%; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color: transparent; } /* 画像も面いっぱいに */ .side-order nav a img{ display:block; width:100%; height:auto; } /* 共通：動き */ .side-order nav a{ transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, opacity .16s ease; will-change: transform; } /* PCホバー */ @media (hover:hover){ .side-order nav a:hover{ transform: translateY(-2px); box-shadow: 0 10px 18px rgba(0,0,0,.14); filter: brightness(1.03) contrast(1.02); } } /* スマホ“押した感” */ @media (hover:none){ .side-order nav a:active{ transform: translateY(0) scale(.985); box-shadow: 0 8px 14px rgba(0,0,0,.14); filter: brightness(1.02) contrast(1.02); } } /* 角の統一（不要なら削除OK） */ .side-order nav a img{ border-radius: 10px; } /* 開いてるタブの強調（あなたのJSが li.is-open を付与している前提） */ .side-order li.is-open > a.accord, .side-order li.is-open > a.accord2{ box-shadow: 0 8px 14px rgba(0,0,0,.12); filter: brightness(1.02) contrast(1.02); } /* ========================================= #kk-tophero：トップ/子ページの見え方を“強制統一”（最終上書き） ========================================= */ /* PC：高さ固定＋背景位置固定 */ body.home #kk-tophero .kk-heroimg, body:not(.home) #kk-tophero .kk-heroimg{ height: 280px !important; min-height: 0 !important; background-image: url("/wp-content/uploads/legacy/image/topimg.jpg") !important; background-repeat: no-repeat !important; background-size: cover !important; background-position: center 42% !important; /* ここで上下の見え方が決まる（35〜55%で微調整） */ } /* innerが高さを持っていないと効かないケースがあるので100%固定 */ body.home #kk-tophero .kk-heroimg__inner, body:not(.home) #kk-tophero .kk-heroimg__inner{ height: 100% !important; min-height: 0 !important; } /* スマホ：高さ固定＋背景位置固定（トップ/子ページ統一） */ @media (max-width: 834px){ body.home #kk-tophero .kk-heroimg, body:not(.home) #kk-tophero .kk-heroimg{ height: 420px !important; /* ← まずは420で固定。広すぎ/狭すぎならここだけ触る */ background-position: center 38% !important; /* ← 上下の見え方の微調整はここ */ } } /* ========================================================= KKヘッダー：トップ/子ページの見た目統一（追記・上書き用） 置き場所：kk-common.css の一番下 ========================================================= */ /* --- 子ページにもトップと同じ「黒・丸い検索」を適用（body.home の穴埋め） --- */ body:not(.home) #kk-tophero .kk-topbar{ position: relative; background:#0f0f10; color:#fff; } body:not(.home) #kk-tophero .kk-topbar__inner{ max-width: 1100px; margin: 0 auto; padding: 10px 24px; display:flex; align-items:center; justify-content: space-between; gap: 16px; box-sizing:border-box; } body:not(.home) #kk-tophero .kk-topbar__logo, body:not(.home) #kk-tophero .kk-topbar__logo:visited{ color:#fff; text-decoration:none; font-weight:500; /* ←細めに寄せる */ letter-spacing:.04em; white-space:nowrap; } body:not(.home) #kk-tophero .kk-topbar__search{ display:flex; gap:8px; align-items:center; } body:not(.home) #kk-tophero .kk-topbar__search input{ width: 260px; max-width: 40vw; padding: 9px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.12); color:#fff; outline:none; } body:not(.home) #kk-tophero .kk-topbar__search input::placeholder{ color: rgba(255,255,255,.75); } body:not(.home) #kk-tophero .kk-topbar__search button{ padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.18); color:#fff; cursor:pointer; } /* --- 子ページでもヒーロー背景・高さをトップと統一（必要なら） --- */ body:not(.home) #kk-tophero .kk-heroimg{ position: relative; min-height: 280px; background: url("/wp-content/uploads/legacy/image/topimg.jpg") center/cover no-repeat; overflow:hidden; } body:not(.home) #kk-tophero .kk-heroimg__inner{ position: relative; max-width: 1100px; margin: 0 auto; padding: 22px 24px; min-height: 280px; box-sizing:border-box; } /* --- 右側SNS（カート文字）が下で切れる対策：PCだけ bottom 基準にする --- */ @media (min-width: 835px){ #kk-tophero .kk-heroimg__right{ top: auto !important; bottom: 7px !important; /* ←下に18px余白を確保して切れを防ぐ */ } } /* ========================================================= ナビ：トップ/子ページでフォントサイズ・太さを統一＋ホバー （body.home を外して全ページ共通に） ========================================================= */ .kk-gnav{ background:#fff; border-bottom:1px solid #e9e9e9; margin:0; } .kk-gnav__list{ list-style:none; margin: 0; padding: 12px 18px; display:flex; flex-wrap:wrap; justify-content:center; gap: 14px 22px; } /* 二重アンダーライン防止＋ホバーで青＆下線（疑似要素） */ .kk-gnav__list a{ position:relative; text-decoration:none !important; border-bottom: none !important; box-shadow:none !important; color:#222; font-weight:500; /* ←濃すぎを抑える */ font-size:13px; /* ←小さめに統一 */ padding-bottom:3px; } .kk-gnav__list a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: currentColor; transform: scaleX(0); transform-origin:left; transition: transform .18s ease; } .kk-gnav__list a:hover, .kk-gnav__list a:focus{ color:#2b93c4; } .kk-gnav__list a:hover::after, .kk-gnav__list a:focus::after{ transform: scaleX(1); } /* スマホはタップ性を落とさない範囲で微調整（必要なら） */ @media (max-width: 600px){ .kk-gnav__list a{ font-size:15px; } } /* ========================================= KKヘッダー：スマホはヒーローを短く＆右ボックスを上へ （トップ/子ページの見え方を揃える） ========================================= */ /* 子ページでロゴが青くなるのを防止（リンク色の上書き） */ #kk-tophero .kk-topbar__logo{ color:#fff !important; text-decoration:none !important; } #kk-tophero .kk-topbar__logo:hover, #kk-tophero .kk-topbar__logo:focus{ color:#fff !important; } /* 念のため：子ページの検索窓をトップと同じ “黒＋丸” に統一 */ #kk-tophero .kk-topbar__search input{ border-radius:999px !important; border:1px solid rgba(255,255,255,.28) !important; background:rgba(255,255,255,.12) !important; color:#fff !important; } #kk-tophero .kk-topbar__search input::placeholder{ color:rgba(255,255,255,.75) !important; } #kk-tophero .kk-topbar__search button{ border-radius:999px !important; border:1px solid rgba(255,255,255,.28) !important; background:rgba(255,255,255,.18) !important; color:#fff !important; } /* ヒーロー高さ：PC基準（既存があれば上書きされます） */ #kk-tophero .kk-heroimg, #kk-tophero .kk-heroimg__inner{ min-height:280px; } /* --- スマホだけ短くする（←ここが本命） --- */ @media (max-width: 600px){ /* “長く見える”のは min-height が大きいのが原因なので、下げる */ #kk-tophero .kk-heroimg, #kk-tophero .kk-heroimg__inner{ min-height: 300px !important; /* 300〜340で調整。小さいほど短くなる */ } /* 写真のクロップ位置（見える範囲）微調整：上に寄せたいなら 35〜45% */ #kk-tophero .kk-heroimg{ background-position: center 40% !important; } /* 右側ボックスは “下げない” で上に固定（昔の見え方に寄せる） */ #kk-tophero .kk-heroimg__right{ top: 14px !important; bottom: auto !important; left: 14px !important; right: 14px !important; width: auto !important; max-width: none !important; text-align: left !important; transform: none !important; } /* ついでに少しだけ圧縮（はみ出し防止） */ #kk-tophero .kk-heroimg__inner{ padding: 14px 16px !important; } #kk-tophero .kk-heroimg__en{ font-size: 40px !important; /* 必要なら 38〜42 */ } #kk-tophero .kk-heroimg__sns img{ width: 40px !important; height: 40px !important; } } /* ========================================= ナビ：サイズ統一＋ホバーは青＋下線1本（2重下線対策） ========================================= */ .kk-gnav__list a{ text-decoration:none !important; border-bottom:0 !important; background:none !important; box-shadow:none !important; color:#222; font-weight:500; font-size:14px; display:inline-block; padding:6px 2px; /* 下線は背景線で1本に統一 */ background-image: linear-gradient(currentColor, currentColor); background-repeat:no-repeat; background-position: 0 100%; background-size: 0 2px; transition: color .2s ease, background-size .2s ease; } .kk-gnav__list a:hover, .kk-gnav__list a:focus-visible{ color:#2b93c4; background-size: 100% 2px; } @media (max-width: 600px){ .kk-gnav__list a{ font-size:15px; } /* 14〜15で揃える */ } /* ========================================================= kk-tophero：トップ/子ページ 共通の最終上書き（末尾に置く） ========================================================= */ /* --- 0) 余白の原因になりやすい“上の白い隙間”を潰す（効き過ぎたらこの块だけ外す） --- */ html, body{ margin: 0 !important; padding: 0 !important; } #kk-tophero{ margin-top: 0 !important; } /* --- 1) ロゴ文字（リンク色が青になる問題の強制上書き） --- */ #kk-tophero .kk-topbar__logo{ color:#fff !important; text-decoration:none !important; font-weight: 500; letter-spacing: .06em; } /* --- 2) 検索窓（子ページで白＆角ばる問題をトップと同じに） --- */ #kk-tophero .kk-topbar__search input{ border-radius:999px !important; border:1px solid rgba(255,255,255,.28) !important; background:rgba(255,255,255,.12) !important; color:#fff !important; } #kk-tophero .kk-topbar__search input::placeholder{ color:rgba(255,255,255,.75) !important; } #kk-tophero .kk-topbar__search button{ border-radius:999px !important; border:1px solid rgba(255,255,255,.28) !important; background:rgba(255,255,255,.18) !important; color:#fff !important; } /* --- 3) SNS（カート等の“文字が切れる”のは height 固定が原因のことが多い） --- */ #kk-tophero .kk-heroimg__sns img{ width:44px !important; height:auto !important; /* ←固定heightで下が切れるのを防止 */ max-height:60px; /* 行が暴れない保険（不要なら消してOK） */ } /* --- 4) ナビ：トップ/子ページでフォントサイズが違うのを統一 + ホバーで青＆下線（下線二重を防止） --- */ #kk-tophero .kk-gnav__list a{ font-size:14px !important; font-weight:500 !important; color:#222 !important; text-decoration:none !important; border-bottom:0 !important; /* テーマ由来の下線を殺す */ box-shadow:none !important; /* テーマ由来の疑似下線を殺す */ position:relative; padding:2px 2px 6px; } #kk-tophero .kk-gnav__list a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:transparent; transform:scaleX(.15); transform-origin:center; transition:transform .18s ease, background-color .18s ease; } #kk-tophero .kk-gnav__list a:hover, #kk-tophero .kk-gnav__list a:focus-visible{ color:#2b93c4 !important; } #kk-tophero .kk-gnav__list a:hover::after, #kk-tophero .kk-gnav__list a:focus-visible::after{ background:#2b93c4; transform:scaleX(1); } /* --- 5) スマホ：ヘッダーの縦の長さは変えずに、ガラス枠（右側ユニット）を“画像の中央”へ --- */ @media (max-width: 600px){ /* ※高さはここで固定（min-heightが効かない時は height を指定すると確実に効きます） */ #kk-tophero{ --kk-hero-h: 340px; /* ← 320〜360 で調整（今より短くしたいなら 320） */ } #kk-tophero .kk-heroimg{ height: var(--kk-hero-h) !important; min-height: var(--kk-hero-h) !important; } #kk-tophero .kk-heroimg__inner{ height: var(--kk-hero-h) !important; min-height: 0 !important; padding: 14px 14px !important; /* 中央寄せのために flex 化 */ display:flex !important; align-items:center !important; justify-content:center !important; } /* ここが肝：absolute配置をやめて、中央に置く */ #kk-tophero .kk-heroimg__right{ position:relative !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important; width: 100% !important; max-width: 520px !important; margin: 0 auto !important; text-align:left !important; } /* ボタンが端末幅で崩れないように */ #kk-tophero .kk-heroimg__cta{ width:100% !important; text-align:center !important; } }


/* =========================================
   KKヘッダー上部余白の調整（全ページ共通）
   - 余白の原因になりやすいヘッダー上部だけを対象
   - textwidget 等の汎用クラス単体には触れない
   ========================================= */

/* 1) Cocoon標準ヘッダーを非表示 */
#header-container,
#header,
#navi,
.header-container,
.navi {
  display: none !important;
}

/* 2) 標準ヘッダー外枠の余白・高さをゼロ */
#header-container,
#header-container-in,
#header,
#header-in,
#navi,
#navi-in {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
}

/* 3) 自作ヘッダーを置いている content-top 周辺だけ調整 */
#content-top,
#content-top-in {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* 4) content-top 直下の先頭要素だけ余白を除去
   ※ .textwidget や .custom-html-widget 単体では触らない */
#content-top > .widget,
#content-top > aside,
#content-top .widget:first-child,
#content-top .widget:first-child .widget-content,
#content-top .widget:first-child .textwidget,
#content-top .widget:first-child .custom-html-widget {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* 5) 自作ヘッダー本体の上余白をゼロ */
#kk-tophero,
#kk-tophero .kk-topbar,
#kk-tophero .kk-heroimg,
.kk-gnav {
  margin-top: 0 !important;
}

/* 6) wrap系の保険 */
#content-top-in.wrap,
#header-container-in.hlt-center-logo,
#header-in.wrap,
#navi-in.wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
}