@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;
  }
}