@charset "UTF-8";

/* =========================================================
   kk-home.css（トップ専用）
   - #kk-flow：枠いっぱい（コンテンツ幅）で表示
   ========================================================= */

/* ▼ #kk-flow だけ “親の枠いっぱい” にする */
body.home #kk-flow{
  width: 100%;
}

/* #kk-flow 内の .kk-wrap に掛かっている max-width を解除 */
body.home #kk-flow .kk-wrap{
  max-width: none !important;
  width: 100%;
  margin: 0;
  padding: 0 24px;          /* 端の余白：16〜32で調整 */
  box-sizing: border-box;
}

/* タイトルの帯（必要なら） */
body.home #kk-flow .kk-flow-title{
  margin: 0 0 18px;
}

/* 5枚を横並びに（枠いっぱいで均等） */
body.home #kk-flow .kk-flow-row{
  --kk-gap: 18px;           /* カード間隔 */
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--kk-gap);
  align-items: start;

  width: 100%;
}

/* 各カード */
body.home #kk-flow .kk-flow-item{
  position: relative;
  min-width: 0;
}

body.home #kk-flow .kk-flow-item > a{
  display: block;
}

/* 画像はセルいっぱい */
body.home #kk-flow .kk-flow-item > a img{
  width: 100%;
  height: auto;
  display: block;
}

/* 矢印（幅計算から外す） */
body.home #kk-flow .kk-flow-arrow{
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(
    calc((var(--kk-gap) / 2) - (15px / 2)),
    -50%
  );
  width: 15px;
  height: auto;
  pointer-events: none;
}

/* 最後は矢印なし */
body.home #kk-flow .kk-flow-item:last-child .kk-flow-arrow{
  display: none;
}

/* レスポンシブ */
@media (max-width: 980px){
  body.home #kk-flow .kk-wrap{ padding: 0 12px; }
  body.home #kk-flow .kk-flow-row{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
    row-gap: 14px;
  }
  body.home #kk-flow .kk-flow-arrow{ display:none; }
}

@media (max-width: 540px){
  body.home #kk-flow .kk-flow-row{ grid-template-columns: 1fr; }
}　


/* =========================================================
   kk-flow：カード化（画像内テキストをHTML化）
   ※kk-home.cssの末尾に追記
   ========================================================= */

body.home #kk-flow a.kk-flow-card{
  display:block;
  width:100%;
  aspect-ratio: 2 / 3;          /* 旧 220×330 の比率を維持 */
  border:1px solid #d8d8d8;
  background:#fff;
  color:#222;
  text-decoration:none;
  box-sizing:border-box;
  transition:transform .15s ease, box-shadow .15s ease;
  overflow:hidden;
}
body.home #kk-flow a.kk-flow-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}

body.home #kk-flow .kk-flow-card-inner{
  height:100%;
  padding:10px 10px 12px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
}

/* 上段：タイトル＋バッジ */
body.home #kk-flow .kk-flow-card-top{
  position:relative;
  min-height:36px;
  padding-right:66px;
}
body.home #kk-flow .kk-flow-card-title{
  font-size:13px;
  font-weight:700;
  line-height:1.2;
}
body.home #kk-flow .kk-flow-badge{
  position:absolute;
  top:0;
  right:0;
  width:60px;
  height:40px;
  border-radius:4px;
  background:#666;
  color:#fff;
  font-size:10px;
  font-weight:700;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1.05;
}

/* 写真枠：端末幅に応じて自然に伸縮 */
body.home #kk-flow .kk-flow-card-photo{
  margin-top:8px;
  border:1px solid #e5e5e5;
  overflow:hidden;
  aspect-ratio: 4 / 3;          /* 写真エリア比率（ここで見え方を決める） */
}
body.home #kk-flow .kk-flow-card-photo img{
  width:100%;
  height:100%;                  /* ←既存CSSの height:auto を上書き */
  object-fit:cover;
  display:block;
}

/* 説明文 */
body.home #kk-flow .kk-flow-card-body{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 6px 0;
  box-sizing:border-box;
}
body.home #kk-flow .kk-flow-card-desc{
  margin:0;
  font-size:11px;
  line-height:1.6;
  color:#666;
  text-align:center;
}

/* 下段：丸＋more */
body.home #kk-flow .kk-flow-card-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding-top:8px;
}
body.home #kk-flow .kk-flow-circle{
  width:44px;
  height:44px;
  border:2px solid #bbb;
  border-radius:999px;
  position:relative;
  display:inline-block;
  box-sizing:border-box;
}
body.home #kk-flow .kk-flow-circle:before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:12px;
  border-right:2px solid #888;
  border-bottom:2px solid #888;
  transform:translate(-55%,-50%) rotate(-45deg);
}
body.home #kk-flow .kk-flow-more{
  font-size:12px;
  color:#444;
}

/* 最後の「GO」用（必要になったら） */
body.home #kk-flow a.kk-flow-card.kk-flow-card--go{
  background:#8d8d8d;
  border-color:#8d8d8d;
  color:#fff;
}
body.home #kk-flow a.kk-flow-card.kk-flow-card--go .kk-flow-card-desc,
body.home #kk-flow a.kk-flow-card.kk-flow-card--go .kk-flow-more{ color:#fff; }
body.home #kk-flow a.kk-flow-card.kk-flow-card--go .kk-flow-badge{ background:#fff; color:#555; }
body.home #kk-flow a.kk-flow-card.kk-flow-card--go .kk-flow-circle{ border-color:#fff; }
body.home #kk-flow a.kk-flow-card.kk-flow-card--go .kk-flow-circle:before{ border-color:#fff; }

/* kk-flowカード内の写真だけ “枠いっぱいにトリミング” */
body.home #kk-flow a.kk-flow-card .kk-flow-card-photo{
  overflow:hidden;
  aspect-ratio: 4 / 3;
}

body.home #kk-flow a.kk-flow-card .kk-flow-card-photo img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  display:block;
  margin:0 !important;
  padding:0 !important;
}

/* kk-flow：全カード共通の枠（最も安定） */
body.home #kk-flow .kk-flow-item{
  background:#fff;
  box-shadow: inset 0 0 0 1px #000; /* 枠線 */
  box-sizing:border-box;
}

/* =========================
   kk-flow：枠を1箇所に統一（最終）
   ========================= */

/* 枠は .kk-flow-item にだけ付ける */
body.home #kk-flow .kk-flow-item{
  background:#fff !important;
  box-shadow: inset 0 0 0 1px #000 !important; /* ←枠線 */
  box-sizing:border-box;
}

/* HTMLカード側の枠は消す（二重枠防止） */
body.home #kk-flow a.kk-flow-card{
  border:0 !important;
}

/* 写真枠の細い線も不要なら消す（好み） */
body.home #kk-flow .kk-flow-card-photo{
  border:0 !important;
}

/* 2番（HTMLカード）に確実に枠を出す：擬似要素で上から重ねる */
body.home #kk-flow a.kk-flow-card{
  position: relative;
  border: 0 !important;          /* 既存borderは無効化（任意） */
}

body.home #kk-flow a.kk-flow-card::after{
  content: "";
  position: absolute;
  inset: 0;                      /* 上下左右0 */
  border: 1px solid #000;        /* 枠線 */
  box-sizing: border-box;
  pointer-events: none;          /* クリックを邪魔しない */
  z-index: 10;                   /* 必ず最前面 */
}

/* =========================================
   kk-flow 文字を少しだけ大きく（崩れにくい）
   ========================================= */

/* カード上部タイトル */
body.home #kk-flow .kk-flow-card-title{
  font-size: 14px;      /* 13px → 14px */
  line-height: 1.25;
}

/* 説明文 */
body.home #kk-flow .kk-flow-card-desc{
  font-size: 12px;      /* 11px → 12px */
  line-height: 1.65;
}

/* more / GO */
body.home #kk-flow .kk-flow-more{
  font-size: 13px;      /* 12px → 13px */
}

/* 下の余白が窮屈になる場合だけ（任意） */
body.home #kk-flow .kk-flow-card-inner{
  padding: 9px 9px 11px;  /* 10/10/12 → 少しだけ詰める */
}

/* 説明文の高さを固定して、CTA位置を揃える */
body.home #kk-flow .kk-flow-card-desc{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;   /* 3行で固定 */
  overflow: hidden;
  min-height: calc(1.65em * 3); /* 3行分の高さを確保 */
}


/* =========================================
   TOP：採寸PDF（kk-pdf）
   - 2カラム（PC）/ 1カラム（SP）
========================================= */

body.home #kk-pdf{
  margin: 26px 0 10px;
}

body.home #kk-pdf .kk-wrap{
  max-width: none;         /* 枠いっぱいにしたい場合 */
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

body.home #kk-pdf .kk-pdf-title{
  margin: 0 0 14px;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.25;
}

body.home #kk-pdf .kk-pdf-lead{
  margin: 0 0 18px;
  line-height: 1.9;
  color: #333;
}

body.home #kk-pdf .kk-pdf-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

body.home #kk-pdf .kk-pdf-item{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  align-items: start;

  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 16px;
  box-sizing: border-box;
}

body.home #kk-pdf .kk-pdf-thumb{
  display: block;
}
body.home #kk-pdf .kk-pdf-thumb img{
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #222;     /* 見本の黒枠が必要なら */
  border-radius: 6px;
}

/* テキスト */
body.home #kk-pdf .kk-pdf-head{
  margin: 0 0 6px;
  font-weight: 700;
}
body.home #kk-pdf .kk-pdf-desc{
  margin: 0 0 10px;
  line-height: 1.8;
  color: #333;
}

/* リンク（緑） */
body.home #kk-pdf .kk-pdf-link{
  color: #0b7a2a;
  font-weight: 700;
  text-decoration: none;
}
body.home #kk-pdf .kk-pdf-link:hover{
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* 画像ホバー：少し透明＋ふわっと */
body.home #kk-pdf .kk-pdf-thumb img{
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
  will-change: transform;
}
body.home #kk-pdf .kk-pdf-thumb:hover img{
  opacity: .86;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* SP */
@media (max-width: 768px){
  body.home #kk-pdf .kk-pdf-grid{
    grid-template-columns: 1fr;
  }
  body.home #kk-pdf .kk-pdf-item{
    grid-template-columns: 1fr;
  }
  body.home #kk-pdf .kk-pdf-thumb{
    max-width: 320px;
    margin: 0 auto;
  }
}

/* =========================================================
   TOP：送料・決済（#kk-kessai）最終
   - 通常：2列＋下段回し（文字が縦にならない）
   - 広い画面だけ：4列
========================================================= */

body.home #kk-kessai{
  margin:26px 0 10px;
  max-width:none !important;
  width:100% !important;
  padding:0 16px !important;
  box-sizing:border-box !important;
}

body.home #kk-kessai .kk-kessai-title{
  margin:0 0 14px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  font-size:clamp(20px, 2.2vw, 30px);
  line-height:1.25;
}

/* --- 基本（狭め〜普通幅）：2列＋下段 --- */
body.home #kk-kessai .kessai-wrapper{
  display:grid !important;
  gap:18px;
  align-items:center;
  border-top:1px solid #e6e6e6;
  padding-top:14px;

  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "left text"
    "center center"
    "right  right";

  float:none !important;
  clear:both !important;
}

body.home #kk-kessai a.kessai-left{ grid-area:left; }
body.home #kk-kessai .kessai-text{
  grid-area:text;
  min-width:0; /* gridで潰れた時の事故防止 */
}
body.home #kk-kessai a.kessai-center{ grid-area:center; }
body.home #kk-kessai a.kessai-right{ grid-area:right; }

/* リンク＆画像 */
body.home #kk-kessai .kessai-wrapper a{
  display:block;
  text-decoration:none;
  box-shadow:none;
}

body.home #kk-kessai .kessai-img{
  width:100%;
  height:auto;
  display:block;
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
  will-change: transform;
}

/* クリック誘導ホバー */
body.home #kk-kessai .kessai-wrapper a:hover .kessai-img{
  opacity:.86;
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}

/* 文 */
body.home #kk-kessai .kessai-text p{
  margin:0;
  line-height:1.9;
  color:#333;
}

/* --- 十分広い画面だけ：4列 --- */
@media (min-width: 1200px){
  body.home #kk-kessai .kessai-wrapper{
    grid-template-columns: 200px minmax(260px, 1fr) 220px minmax(320px, 1.35fr);
    grid-template-areas: "left text center right";
  }
  body.home #kk-kessai a.kessai-center{ justify-self:start; }
}

/* --- スマホ：1列 --- */
@media (max-width: 640px){
  body.home #kk-kessai .kessai-wrapper{
    grid-template-columns:1fr;
    grid-template-areas:
      "left"
      "text"
      "center"
      "right";
  }
  body.home #kk-kessai a.kessai-left{
    max-width:260px;
    margin:0 auto;
  }
  body.home #kk-kessai a.kessai-center{
    max-width:320px;
    margin:0 auto;
  }
}

/* =========================================================
   TOP：送料・決済（#kk-kessai） + 区切り強化
   ========================================================= */
body.home #kk-kessai{
  margin: 26px 0 0;
  padding: 0 16px 28px;
  box-sizing: border-box;
  border-bottom: 1px solid #e6e6e6; /* ←次ブロックとの境界 */
}

body.home #kk-kessai .kk-kessai-title{
  max-width: 1280px;
  margin: 0 auto 14px;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.25;
}

body.home #kk-kessai .kessai-wrapper{
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px minmax(320px, 1fr) 220px minmax(360px, 1.4fr);
  gap: 18px;
  align-items: center;
  border-top: 1px solid #e6e6e6;
  padding-top: 14px;
}

body.home #kk-kessai .kessai-left,
body.home #kk-kessai .kessai-center,
body.home #kk-kessai .kessai-right{
  display: block;
  text-decoration: none;
  box-shadow: none;
}

body.home #kk-kessai .kessai-img{
  width: 100%;
  height: auto;
  display: block;
}

/* 文字が極端に細くなって縦1列になるのを防ぐ */
body.home #kk-kessai .kessai-text{
  min-width: 320px;
}
body.home #kk-kessai .kessai-text p{
  margin: 0;
  line-height: 1.9;
  color: #333;
  word-break: normal;
  overflow-wrap: break-word;
}

/* ホバー：透明＋ふわっと */
body.home #kk-kessai .kessai-left img,
body.home #kk-kessai .kessai-center img,
body.home #kk-kessai .kessai-right img{
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
  will-change: transform;
}
body.home #kk-kessai .kessai-left:hover img,
body.home #kk-kessai .kessai-center:hover img,
body.home #kk-kessai .kessai-right:hover img{
  opacity: .86;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* --- レスポンシブ --- */
@media (max-width: 1100px){
  body.home #kk-kessai .kessai-wrapper{
    grid-template-columns: 200px 1fr;
    grid-template-areas:
      "left text"
      "center center"
      "right right";
  }
  body.home #kk-kessai .kessai-left{ grid-area: left; }
  body.home #kk-kessai .kessai-text{ grid-area: text; min-width: 0; }
  body.home #kk-kessai .kessai-center{ grid-area: center; }
  body.home #kk-kessai .kessai-right{ grid-area: right; }
}

@media (max-width: 640px){
  body.home #kk-kessai .kessai-wrapper{
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "text"
      "center"
      "right";
  }
  body.home #kk-kessai .kessai-left,
  body.home #kk-kessai .kessai-center{
    max-width: 320px;
    margin: 0 auto;
  }
}


/* =========================================================
   TOP：ギフト券（#kk-gift）※次項のHTMLに対応
   - 左画像を大きくし、右テキストと高さ感を揃える
   ========================================================= */
body.home #kk-gift{
  margin: 0;
  padding: 28px 16px 10px;
  box-sizing: border-box;
}

body.home #kk-gift .kk-gift-title{
  max-width: 1280px;
  margin: 0 auto 14px;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.25;
}

body.home #kk-gift .kk-gift-row{
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(520px, 1.15fr) 1fr; /* ←左を大きめ */
  gap: 22px;
  align-items: stretch;
  border-top: 1px solid #e6e6e6;
  padding-top: 14px;
}

/* 左画像：大きく見せる（トリミングしない） */
body.home #kk-gift .kk-gift-thumb{
  display: block;
  text-decoration: none;
}
body.home #kk-gift .kk-gift-thumb img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* 右テキスト */
body.home #kk-gift .kk-gift-body{
  display: flex;
  align-items: center; /* 右側を中央寄せ（好みで start に変更可） */
}
body.home #kk-gift .kk-gift-list{
  margin: 0;
  padding: 0;
  list-style: none;     /* 黒丸を消す（元サイト寄せ） */
  line-height: 1.9;
  color: #333;
}
body.home #kk-gift .kk-gift-list li{
  margin: 0 0 6px;
}
body.home #kk-gift .kk-gift-list a{
  color: #0b7a2a;
  font-weight: 700;
  text-decoration: none;
}
body.home #kk-gift .kk-gift-list a:hover{
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* ホバー：透明＋ふわっと */
body.home #kk-gift .kk-gift-thumb img{
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
  will-change: transform;
}
body.home #kk-gift .kk-gift-thumb:hover img{
  opacity: .86;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* SP */
@media (max-width: 980px){
  body.home #kk-gift .kk-gift-row{
    grid-template-columns: 1fr;
  }
  body.home #kk-gift .kk-gift-thumb{
    max-width: 560px;
    margin: 0 auto;
  }
  body.home #kk-gift .kk-gift-body{
    align-items: flex-start;
  }
}


/* =========================
   予約3カード（#kk-reserve）最終・単一（幅競合に勝つ版）
   ========================= */
body.home #kk-reserve{
  /* Cocoon/ブロック側の全幅指定に勝つ */
  width:100% !important;
  max-width:1280px !important;
  margin:22px auto 0 !important;
  margin-left:auto !important;
  margin-right:auto !important;

  padding:18px 16px 0 !important;
  box-sizing:border-box !important;

  border-top:1px solid #e6e6e6 !important;
  background:#fff;
}

/* 3カラムグリッド */
body.home #kk-reserve .reserve-row{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;

  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:clamp(16px, 3vw, 44px) !important;
  align-items:start !important;
}

body.home #kk-reserve .reserve-card{
  text-align:center;
  max-width:none;
}

body.home #kk-reserve .reserve-title{
  margin:0 0 10px;
  font-weight:700;
}

body.home #kk-reserve .reserve-hr{
  width:90%;
  max-width:420px;
  height:0;
  border:0;
  border-top:1px solid #333;
  margin:0 auto 14px;
}

/* 画像（高さ揃え＋トリミング） */
body.home #kk-reserve .reserve-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:350 / 136;
  object-fit:cover;
}

/* hover */
body.home #kk-reserve a img{
  transition:transform .18s ease, filter .18s ease;
  will-change:transform;
}
body.home #kk-reserve a:hover img{
  transform:scale(1.02);
  filter:brightness(1.03);
}

body.home #kk-reserve .reserve-desc{
  margin:12px 0 0;
  line-height:1.7;
}

/* レスポンシブ */
@media (max-width: 980px){
  body.home #kk-reserve .reserve-row{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 680px){
  body.home #kk-reserve{
    padding:16px 16px 0 !important;
  }
  body.home #kk-reserve .reserve-row{
    grid-template-columns:1fr !important;
  }
  body.home #kk-reserve .reserve-card{
    max-width:520px;
    margin:0 auto;
  }
}

/* =========================
   予約3カード（#kk-reserve）最終
   ※ファイル先頭（@charset直後）に置く
   ========================= */
#kk-reserve{
  width:100%;
  max-width:1280px;
  margin:22px auto 0;
  padding:18px 16px 0;
  box-sizing:border-box;
  border-top:1px solid #e6e6e6;
  background:#fff;
}

#kk-reserve .reserve-row{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(16px, 3vw, 44px);
  align-items:start;
  margin:0;
  padding:0;
}

#kk-reserve .reserve-card{ text-align:center; }
#kk-reserve .reserve-title{ margin:0 0 10px; font-weight:700; }

#kk-reserve .reserve-hr{
  width:90%;
  max-width:420px;
  border:0;
  border-top:1px solid #333;
  margin:0 auto 14px;
}

#kk-reserve img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:350 / 136;
  object-fit:cover;
}

#kk-reserve a img{ transition:transform .18s ease, filter .18s ease; }
#kk-reserve a:hover img{ transform:scale(1.02); filter:brightness(1.03); }

#kk-reserve .reserve-desc{ margin:12px 0 0; line-height:1.7; }

@media (max-width:980px){
  #kk-reserve .reserve-row{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:680px){
  #kk-reserve{ padding:16px 16px 0; }
  #kk-reserve .reserve-row{ grid-template-columns:1fr; }
  #kk-reserve .reserve-card{ max-width:520px; margin:0 auto; }
}  　

/* =========================================================
   お客様の声（トップ表示）カード
   ========================================================= */
.kk-voice-title{
  margin: 10px 0 18px;
}

.voice-list{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  justify-content:space-between;
  margin: 20px 0 30px;
}

.voice-card{
  flex: 1 1 calc(33.333% - 20px);
  background:#f9f9f9;
  border-radius:10px;
  padding:15px;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-sizing:border-box;
}

.voice-thumb a{ display:block; }
.voice-thumb img{
  width:100%;
  height:auto;
  border-radius:6px;
  object-fit:cover;
  display:block;
}

/* アイキャッチが無い場合のダミー枠 */
.voice-thumb--noimg{
  width:100%;
  aspect-ratio: 4 / 3;
  background:#e9e9e9;
  border-radius:6px;
}

.voice-text{ margin-top:10px; }

.voice-text h3{
  font-size:1em;
  color:#2a6ebb;
  margin:12px 0 6px;
  line-height:1.35;
}

.voice-text p{
  font-size:0.9em;
  color:#444;
  line-height:1.55;
  margin:0 0 8px;
}

.voice-more{
  font-size:0.85em;
  color:#006600;
  text-decoration:underline;
}

.voice-more:hover{ text-decoration:none; }

/* タブレット：2列 */
@media (max-width: 1024px){
  .voice-card{ flex: 1 1 calc(50% - 20px); }
}

/* スマホ：1列 */
@media (max-width: 768px){
  .voice-list{
    flex-direction:column;
    align-items:center;
  }
  .voice-card{
    flex:1 1 100%;
    width:100%;
    max-width: 92%;
  }
}
/* お客様の声：カード内タイトルを黒、ホバー赤（リンク化前提） */
.voice-text h3{
  color:#111;
}
.voice-text h3 .voice-title-link{
  color:#111;
  text-decoration:none;
}
.voice-text h3 .voice-title-link:hover{
  color:#c00;
  text-decoration:underline;
}

/* ===== kk-joborder：左右ぴったり + 左右別々hover（同一リンク） ===== */

#kk-joborder .kk-joborder-banner{
  display:flex !important;
  flex-wrap:nowrap !important;
  width:100% !important;         /* aタグを右端まで伸ばす */
  align-items:stretch;
  gap:0 !important;
  font-size:0;
  line-height:0;
  overflow:hidden;
  position:relative;
  text-decoration:none;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* ここが重要：左右を “割合で固定” して必ず全幅を使う（余白が出ない） */
#kk-joborder .kk-joborder-left{
  flex:0 0 62% !important;
  width:62% !important;
}
#kk-joborder .kk-joborder-right{
  flex:0 0 38% !important;
  width:38% !important;
}

/* 左右それぞれを hover の当たり判定にする */
#kk-joborder .kk-joborder-left,
#kk-joborder .kk-joborder-right{
  display:block !important;
  position:relative;
  min-width:0;
  overflow:hidden;
}

/* 画像は自然な高さ（100%指定はズレの原因になりやすいので殺す） */
#kk-joborder .kk-joborder-left img,
#kk-joborder .kk-joborder-right img{
  display:block;
  width:100%;
  height:auto !important;
  transform: translateZ(0);
  transition: transform .22s ease, filter .22s ease;
}

/* 左右 “別々” の暗幕（hoverで出す） */
#kk-joborder .kk-joborder-left::after,
#kk-joborder .kk-joborder-right::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.12);
  opacity:0;
  transition: opacity .18s ease;
  pointer-events:none;
}

/* 左側 hover */
#kk-joborder .kk-joborder-left:hover::after{ opacity:1; }
#kk-joborder .kk-joborder-left:hover img{
  transform: scale(1.02);
  filter: saturate(1.05) brightness(.95);
}

/* 右側 hover */
#kk-joborder .kk-joborder-right:hover::after{ opacity:1; }
#kk-joborder .kk-joborder-right:hover img{
  transform: scale(1.02);
  filter: saturate(1.05) brightness(.95);
}

/* どちらかに乗ったら全体も少し浮かせる（不要ならこの2つを削除） */
#kk-joborder .kk-joborder-banner:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

/* キーボード操作時 */
#kk-joborder .kk-joborder-banner:focus-visible{
  outline: 2px solid rgba(0,0,0,.35);
  outline-offset: 3px;
}

/* スマホ：縦積み（不要なら削除） */
@media (max-width: 640px){
  #kk-joborder .kk-joborder-banner{ display:block !important; }
  #kk-joborder .kk-joborder-left,
  #kk-joborder .kk-joborder-right{
    width:100% !important;
    flex:0 0 auto !important;
  }
}

/* ===== kk-joborder 微調整：高さ揃え + 間隔 ===== */

/* 1) 高さズレ解消：左右とも「一番高い方」に合わせて画像を100%でフィット */
#kk-joborder .kk-joborder-left img,
#kk-joborder .kk-joborder-right img{
  height: 100% !important;
  object-fit: cover;
}

/* 2) 左右の間隔：左側に白い仕切りを作る（数値で調整） */
#kk-joborder .kk-joborder-left{
  box-sizing: border-box;
  border-right: 10px solid #fff;  /* ←間隔。8〜14pxくらいで調整 */
}

/* スマホ縦積み時は仕切り不要 */
@media (max-width: 640px){
  #kk-joborder .kk-joborder-left{
    border-right: 0;
  }
  #kk-joborder .kk-joborder-left img,
  #kk-joborder .kk-joborder-right img{
    height: auto !important;
    object-fit: contain;
  }
}

/* 右バナー：左端を欠けさせない */
#kk-joborder .kk-joborder-right img{
  object-position: left center; /* ←左を固定して、欠けるなら右側が欠ける */
}

/* ===== サポートプログラム（kk-support）title画像なし版 ===== */
#kk-support{
  margin: 22px 0 30px;
}

#kk-support .kk-support-title{
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}
#kk-support .kk-support-title::before{
  content:"■ ";
}

/* 罫線は gap で作る（1px固定で細く） */
#kk-support .kk-support-grid{
  list-style:none;
  margin:0;
  padding:1px;              /* 外枠 1px */
  background:#333;          /* 線色 */
  display:grid;
  gap:1px;                  /* 内罫線 1px */
  grid-template-columns: repeat(5, 1fr);
}

/* テーマ由来の枠が入るのを防ぐ */
#kk-support .kk-support-grid > li{
  background:#fff;
  border:0 !important;
  outline:0 !important;
}

/* カード：余白ゼロ、枠ゼロ */
#kk-support .kk-support-card{
  display:block;
  padding:0;
  margin:0;
  border:0 !important;
  background:#fff;
  line-height:0;            /* img下の隙間防止 */
  text-decoration:none;
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* 画像：セルいっぱい */
#kk-support .kk-support-card img{
  display:block;
  width:100%;
  height:auto;
  border:0 !important;
}

/* hover（好みで弱め/強め可） */
#kk-support .kk-support-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  filter: brightness(.98);
}

/* レスポンシブ */
@media (max-width: 1023px){
  #kk-support .kk-support-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  #kk-support .kk-support-grid{ grid-template-columns: repeat(2, 1fr); }
  #kk-support .kk-support-title{ font-size: 18px; }
}
@media (max-width: 420px){
  #kk-support .kk-support-grid{ grid-template-columns: 1fr; }
}

/* ===== サポートプログラム：枠を細く（1px） ===== */
#kk-support{
  margin: 22px 0 30px;
}

/* 5列グリッド＋罫線（gap=1px） */
#kk-support .supp ul{
  list-style: none !important;
  margin: 0 !important;
  padding: 1px !important;            /* 外枠 1px */
  background: #333 !important;        /* 線色 */
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 1px !important;                /* 内罫線 1px */
}

/* セル：余計な枠・余白を全部殺す */
#kk-support .supp ul > li{
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* リンク：余計な枠・余白を全部殺す */
#kk-support .supp ul > li > a{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: #fff !important;
  line-height: 0 !important;          /* 画像下の隙間防止 */
  box-shadow: none !important;
  text-decoration: none !important;
  overflow: hidden !important;
}

/* 画像：枠や最大幅の制限を無効化 */
#kk-support .supp ul > li > a > img{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  vertical-align: top !important;
}

/* hover（罫線を太く見せない控えめ版） */
#kk-support .supp ul > li > a:hover{
  filter: brightness(.97);
}

/* レスポンシブ */
@media (max-width: 1023px){
  #kk-support .supp ul{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px){
  #kk-support .supp ul{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 420px){
  #kk-support .supp ul{ grid-template-columns: 1fr !important; }
}

/* トップ：バナー3枚横並び */
.kk-banner3{
  display:flex;
  gap:2px;                 /* 旧tableのセル間隔っぽい見え方 */
  align-items:stretch;
}

.kk-banner3__item{
  flex:1 1 0;
  display:block;
}

.kk-banner3__item img{
  width:100%;
  height:auto;
  display:block;           /* 画像下の謎の余白対策 */
}

/* スマホは縦並び */
@media (max-width: 834px){
  .kk-banner3{
    flex-direction:column;
    gap:12px;
  }
}

/* =========================
   TOP：店舗のご案内（#kk-shopinfo）
   - 右下バナー無し
   - 3枚 + テキスト
   - タイトルにリンク（黒のまま + hover演出）
   ========================= */

body.home #kk-shopinfo{
  --kk-shop-left: 1.35fr;  /* ←左画像をさらに大きく（1.28〜1.45で調整） */
  --kk-shop-gap: 8px;      /* ←左と右の間の余白（0〜18px） */
  --kk-shop-gap2: 8px;     /* ←右上2枚の間の余白（0〜14px） */

  margin: 28px 0;
  padding: 0;
  box-sizing: border-box;
}

/* 見出し（リンクは黒のまま） */
body.home #kk-shopinfo .kk-shopinfo-title{
  margin: 0 0 16px;
  padding: 14px 18px;
  background: #f2f2f2;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.2;
}

body.home #kk-shopinfo .kk-shopinfo-title a{
  color: #111;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* タイトルのホバー演出（黒のまま、矢印だけ動かす） */
body.home #kk-shopinfo .kk-shopinfo-title a::after{
  content: "›";
  opacity: .55;
  transform: translateX(0);
  transition: transform .18s ease, opacity .18s ease;
}
body.home #kk-shopinfo .kk-shopinfo-title a:hover::after{
  transform: translateX(4px);
  opacity: 1;
}
body.home #kk-shopinfo .kk-shopinfo-title a:focus-visible{
  outline: 2px solid rgba(0,0,0,.35);
  outline-offset: 3px;
}

/* 全体2カラム */
body.home #kk-shopinfo .kk-shopinfo-grid{
  display: grid;
  grid-template-columns: minmax(0, var(--kk-shop-left)) minmax(0, 1fr);
  gap: var(--kk-shop-gap);
  align-items: start;
}

/* 画像共通 */
body.home #kk-shopinfo img{
  display:block;
  width:100%;
  height:auto;
  border:0;
}

/* 左：大画像 */
body.home #kk-shopinfo .shop_l{
  display:block;
  position:relative;
  overflow:hidden;
}

/* 右上2枚 */
body.home #kk-shopinfo .shop_r-top{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kk-shop-gap2);
  margin: 0 0 10px;
}

body.home #kk-shopinfo .shop_r-top a{
  display:block;
  position:relative;
  overflow:hidden;
}

/* 右上2枚の高さを揃える */
body.home #kk-shopinfo .shop_r-top img{
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* 右テキスト */
body.home #kk-shopinfo .shop_r-text p{
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.9;
  color:#333;
}
body.home #kk-shopinfo .shop_r-text p:last-child{
  margin-bottom: 0;
}

/* 画像ホバー（タイトルリンクには影響させない） */
body.home #kk-shopinfo .shop_l::after,
body.home #kk-shopinfo .shop_r-top a::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.10);
  opacity:0;
  transition: opacity .18s ease;
  pointer-events:none;
}

body.home #kk-shopinfo .shop_l img,
body.home #kk-shopinfo .shop_r-top a img{
  transition: transform .18s ease, filter .18s ease;
  transform: translateZ(0);
}

body.home #kk-shopinfo .shop_l:hover::after,
body.home #kk-shopinfo .shop_r-top a:hover::after{
  opacity:1;
}
body.home #kk-shopinfo .shop_l:hover img,
body.home #kk-shopinfo .shop_r-top a:hover img{
  transform: scale(1.02);
  filter: brightness(.96) saturate(1.03);
}

/* レスポンシブ */
@media (max-width: 980px){
  body.home #kk-shopinfo .kk-shopinfo-grid{
    grid-template-columns: 1fr;
  }
  body.home #kk-shopinfo .shop_r-top{
    max-width: 760px;
  }
}
@media (max-width: 640px){
  body.home #kk-shopinfo .shop_r-top{
    grid-template-columns: 1fr;
  }
  body.home #kk-shopinfo .shop_r-top img{
    aspect-ratio: 16 / 9;
  }
}

/* =========================================
   kk-flow：hoverで二重に見える（残像）対策
   - 枠を a.kk-flow-card 側に一本化
   - .kk-flow-item 側の枠を完全に無効化
   ========================================= */

/* 親(.kk-flow-item)の枠を殺す（置き去り枠＝残像の原因） */
body.home #kk-flow .kk-flow-item{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
}

/* カード本体（a）にだけ枠と背景を持たせる */
body.home #kk-flow a.kk-flow-card{
  background: #fff !important;
  border: 0 !important;            /* 既存borderは使わない */
  position: relative !important;
  transform: translateZ(0);        /* サブピクセルのチラつき保険 */
  will-change: transform;
}

/* 枠は擬似要素で一枚だけ */
body.home #kk-flow a.kk-flow-card::after{
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #000;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 2;
}

/* hoverはaにだけ（枠も一緒に動くので残像が出ない） */
body.home #kk-flow a.kk-flow-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* =========================================
   kk-flow：右端（GOカード）だけ配色を戻す
   ========================================= */

body.home #kk-flow a.kk-flow-card.kk-flow-card--go{
  background:#8d8d8d !important;
  color:#fff !important;
}

/* タイトル・説明・more/GO を白に固定（テーマ側のa色に負けない） */
body.home #kk-flow a.kk-flow-card.kk-flow-card--go .kk-flow-card-title,
body.home #kk-flow a.kk-flow-card.kk-flow-card--go .kk-flow-card-desc,
body.home #kk-flow a.kk-flow-card.kk-flow-card--go .kk-flow-more{
  color:#fff !important;
}

/* 丸アイコンも白に */
body.home #kk-flow a.kk-flow-card.kk-flow-card--go .kk-flow-circle{
  border-color:#fff !important;
}
body.home #kk-flow a.kk-flow-card.kk-flow-card--go .kk-flow-circle:before{
  border-color:#fff !important;
}

/* 外枠（::after）は黒のままでOK。白枠にしたいなら↓に変更
body.home #kk-flow a.kk-flow-card.kk-flow-card--go::after{ border-color:#fff !important; }
*/

/* トップ用（旧 kk-front.css の内容） */
.home .article-header,
.home .entry-title,
.home .posted-on,
.home .author-info,
.home .entry-meta,
.home .date-tags,
.home .post-date,
.front-page .article-header,
.front-page .entry-title,
.front-page .posted-on,
.front-page .author-info,
.front-page .entry-meta,
.front-page .date-tags,
.front-page .post-date{
  display:none !important;
}
.home .entry-content,
.front-page .entry-content{
  margin-top:0 !important;
}

@media (max-width: 834px){
  .home .kk-topbar__inner{
    display: flex;
    flex-wrap: wrap;     /* ←これが重要 */
    gap: 8px;
  }

  /* 検索エリアを1行丸ごと使わせる（検索が強い場合） */
  .home .kk-topbar__inner .kk-topbar-search,
  .home .kk-topbar__inner .site-search,
  .home .kk-topbar__inner form{
    flex: 1 1 100%;
    min-width: 0;
  }
}