@charset "UTF-8";

/* =========================================================
   kk-pocket.css（pocket 専用 / MT見本寄せ）
   - Cocoonのh2装飾を打ち消す
   - 6種のポケットを「表のような枠付き 3×2」にする（gap無し）
   - 画像は中央寄せ・セルいっぱい
   - FAQは kk-faq.css 側（ここでは触らない）
   ========================================================= */

/* ===== 影響範囲をこのページ要素に限定（IDで縛る） ===== */
.entry-content #pocket-shape,
.entry-content #pocket-design,
.entry-content #pocket-spec,
.entry-content #pocket-faq{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* ===== Cocoonの見出し（h2）の灰色帯などを無効化してMT風に ===== */
.entry-content .kk-detail-h2{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 34px 0 14px !important;
  font-size: 28px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: #111 !important;
}

/* リード文 */
.entry-content .kk-detail-lead{
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.8;
}

/* 本文（MTの行間寄せ） */
.entry-content .kk-detail-prose{
  max-width: 920px;
}
.entry-content .kk-detail-prose p{
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.9;
  color: #222;
}

/* ===== 形（サイズ図）：中央寄せ、余計な灰背景を出さない ===== */
.entry-content .kk-figure{
  margin: 18px 0 0;
  text-align: center;
}
.entry-content .kk-zoom{
  display: inline-block;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.entry-content .kk-zoom img{
  display: block;
  max-width: 520px;     /* MTの見本に近いサイズ感 */
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 0;
  box-shadow: none;
}
.entry-content .kk-zoom-cap{
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: #555;
}

/* ===== ポケット6種：MTの「表」っぽい枠にする ===== */
.entry-content .kk-card-grid{
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;                         /* 重要：セルの隙間を無くす */
  border: 1px solid #333;         /* 外枠 */
  background: #fff;
}

/* セル（カード）＝枠線 */
.entry-content .kk-card{
  margin: 0;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  border-radius: 0;
  overflow: hidden;
  background: #fff;
}

/* 右端・最下段の二重線を消す */
.entry-content .kk-card:nth-child(3n){
  border-right: 0;
}
.entry-content .kk-card:nth-last-child(-n+3){
  border-bottom: 0;
}

/* ボタンをセル全体に */
.entry-content .kk-card__btn{
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: center;
}

/* 画像：セル内中央、適度に余白 */
.entry-content .kk-card__btn img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 240px;          /* MTの絵のサイズ感 */
  margin: 14px auto 10px;
}

/* タイトル：左上に■を付ける（MT見本の黒四角） */
.entry-content .kk-card__title{
  margin: 0;
  padding: 10px 10px 12px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  text-align: center;
  border-top: 1px solid #ddd;   /* MTっぽい区切り */
}
.entry-content .kk-card__title::before{
  content: "■";
  display: inline-block;
  margin-right: 8px;
  font-size: 10px;
  vertical-align: middle;
}

/* ===== 基本仕様の一覧（表） ===== */
.entry-content .kk-table-wrap{
  margin-top: 14px;
  overflow: auto;
  border: 1px solid #333;
  border-radius: 0;
  background: #fff;
}

.entry-content .kk-spec-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  background: #fff;
}

.entry-content .kk-spec-table th,
.entry-content .kk-spec-table td{
  border: 1px solid #333;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.4;
}

.entry-content .kk-spec-table thead th{
  background: #fff;
  font-weight: 700;
  text-align: center;
}

.entry-content .kk-spec-table tbody th{
  text-align: left;
  font-weight: 700;
  width: 55%;
}

/* 左列に■ */
.entry-content .kk-spec-table tbody th::before{
  content: "■";
  display: inline-block;
  margin-right: 8px;
  font-size: 10px;
  vertical-align: middle;
}

/* 記号の見た目 */
.entry-content .kk-ok{
  text-align: center;
  font-size: 16px;
}
.entry-content .kk-dash{
  text-align: center;
  color: #666;
}

.entry-content .kk-note{
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  color: #333;
}

.entry-content .kk-cta{
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.9;
  text-align: center;
}

/* ===== dialog（モーダル） ===== */
.entry-content .kk-dialog{
  border: 0;
  padding: 0;
  width: min(980px, calc(100% - 32px));
  border-radius: 0;
}
.entry-content .kk-dialog::backdrop{
  background: rgba(0,0,0,.45);
}
.entry-content .kk-dialog__inner{
  position: relative;
  background: #fff;
}
.entry-content .kk-dialog__close{
  position: absolute;
  top: 8px;
  right: 10px;
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-size: 22px;
  line-height: 40px;
}
.entry-content .kk-dialog__figure{
  margin: 0;
  padding: 18px 18px 14px;
}
.entry-content .kk-dialog__figure img{
  width: 100%;
  height: auto;
  display: block;
}
.entry-content .kk-dialog__figure figcaption{
  margin-top: 10px;
  font-size: 14px;
  color: #111;
  text-align: center;
}

/* ===== レスポンシブ ===== */
@media (max-width: 900px){
  .entry-content .kk-card-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .entry-content .kk-card:nth-child(3n){
    border-right: 1px solid #333; /* 2列になるので一旦戻す */
  }
  .entry-content .kk-card:nth-child(2n){
    border-right: 0;              /* 2列の右端 */
  }
  .entry-content .kk-card:nth-last-child(-n+3){
    border-bottom: 1px solid #333; /* 2列時は判定が変わるので戻す */
  }
  .entry-content .kk-card:nth-last-child(-n+2){
    border-bottom: 0;              /* 2列の最下段 */
  }
}

@media (max-width: 560px){
  .entry-content #pocket-shape,
  .entry-content #pocket-design,
  .entry-content #pocket-spec,
  .entry-content #pocket-faq{
    padding: 0 14px;
  }
  .entry-content .kk-detail-h2{
    font-size: 24px !important;
  }
  .entry-content .kk-card-grid{
    grid-template-columns: 1fr;
  }
  .entry-content .kk-card{
    border-right: 0;
  }
  .entry-content .kk-card:nth-last-child(-n+2){
    border-bottom: 1px solid #333; /* 1列なので戻す */
  }
  .entry-content .kk-card:last-child{
    border-bottom: 0;
  }
}

/* === pocket: 表の下に出る“空欄枠”（横スクロール領域）を潰す === */
.entry-content .kk-table-wrap{
  overflow-x: visible; /* まず横スクロールを発生させない */
  overflow-y: hidden;
}

/* min-width が原因でスクロール領域が出るので無効化 */
.entry-content .kk-spec-table{
  min-width: 0 !important;
  width: 100% !important;
}

/* Cocoon側の table マージンを潰す（見た目の余白・段差対策） */
.entry-content .kk-spec-table{
  margin: 0 !important;
}