/* =========================
   measure1（採寸方法）専用
   ========================= */

#kk-measure1{
  max-width: none;
  width: 100%;
  margin: 28px auto;
  padding: 0 24px;
  box-sizing: border-box;
}

#kk-measure1 .kk-m1-step{
  margin:0 0 18px;
  padding:16px 16px 14px;
  border:1px solid #d8d8d8;
  border-radius:12px;
  background:#fff;
  box-sizing:border-box;
}

#kk-measure1 .kk-m1-step h3{
  margin:0 0 10px;
  font-size:18px;
  line-height:1.4;
}

#kk-measure1 .kk-m1-step p{
  margin:0 0 12px;
  line-height:1.9;
}

/* 画像＋動画：2カラム（PC） */
#kk-measure1 .kk-m1-media{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}

/* まとめ動画：1カラム */
#kk-measure1 .kk-m1-media.kk-m1-media--single{
  grid-template-columns:1fr;
}

/* 16:9 枠 */
#kk-measure1 .kk-m1-frame{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  border-radius:10px;
  overflow:hidden;
  background:#000;
}

/* aspect-ratio 非対応の保険 */
@supports not (aspect-ratio:16 / 9){
  #kk-measure1 .kk-m1-frame::before{
    content:"";
    display:block;
    padding-top:56.25%;
  }
}

/* ここが本命：Cocoonの video-container/video を“枠いっぱい”に潰す */
html body #kk-measure1 .kk-m1-frame .video-container,
html body #kk-measure1 .kk-m1-frame .video{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
}

/* iframe/img を“枠いっぱい” */
html body #kk-measure1 .kk-m1-frame iframe,
html body #kk-measure1 .kk-m1-frame img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  border:0 !important;
  display:block !important;
}

/* 画像はトリミングで揃える */
#kk-measure1 .kk-m1-frame img{
  object-fit:cover;
}

/* スマホ：縦積み */
@media (max-width:768px){
  #kk-measure1{ padding:0 16px; }
  #kk-measure1 .kk-m1-media{ grid-template-columns:1fr; }
}

/* まとめ動画：横いっぱい（デフォルト） */
html body #kk-measure1 .kk-m1-step--full .kk-m1-frame{
  max-width:none !important;
  margin:0 !important;
}

/* まとめ動画を中央寄せ(最大820px)にしたい場合は↑をコメントアウトして↓を使う */
/*
html body #kk-measure1 .kk-m1-step--full .kk-m1-frame{
  max-width:820px !important;
  margin:0 auto !important;
}
*/　

/* =========================
   measure1：PDF / イラスト / パーツリンク / 入力例（追加）
   ========================= */

#kk-measure1 .kk-m1-title{
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.4;
}

#kk-measure1 .kk-m1-lead{
  margin: 0 0 14px;
  line-height: 1.9;
}

/* PDF 2点：横並び（スマホは縦） */
#kk-measure1 .kk-m1-pdf-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

#kk-measure1 .kk-m1-pdf-item{
  display: block;
  text-decoration: none;
}

#kk-measure1 .kk-m1-pdf-item img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid #e2e2e2;
  background: #fff;
}

#kk-measure1 .kk-m1-pdf-cap{
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: inherit;
}

/* 採寸箇所イラスト 2枚 */
#kk-measure1 .kk-m1-illust{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#kk-measure1 .kk-m1-illust img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid #e2e2e2;
  background: #fff;
}

/* 各パーツリンク：区切りを自動生成 */
#kk-measure1 .kk-m1-parts{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

#kk-measure1 .kk-m1-parts a{
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.2);
}

#kk-measure1 .kk-m1-parts a:hover{
  border-bottom-color: rgba(0,0,0,.55);
}

/* 入力例画像 */
#kk-measure1 .kk-m1-formex-link img{
  max-width: 520px;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid #e2e2e2;
}

/* スマホ */
@media (max-width: 768px){
  #kk-measure1 .kk-m1-pdf-grid,
  #kk-measure1 .kk-m1-illust{
    grid-template-columns: 1fr;
  }
}


/* =========================
   measure1：PDF / イラスト / パーツリンク / 入力例（追加）
   ========================= */

#kk-measure1 .kk-m1-title{
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.4;
}

#kk-measure1 .kk-m1-lead{
  margin: 0 0 14px;
  line-height: 1.9;
}

/* PDF 2点：横並び（スマホは縦） */
#kk-measure1 .kk-m1-pdf-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

#kk-measure1 .kk-m1-pdf-item{
  display: block;
  text-decoration: none;
}

#kk-measure1 .kk-m1-pdf-item img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid #e2e2e2;
  background: #fff;
}

#kk-measure1 .kk-m1-pdf-cap{
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: inherit;
}

/* 採寸箇所イラスト 2枚 */
#kk-measure1 .kk-m1-illust{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#kk-measure1 .kk-m1-illust img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid #e2e2e2;
  background: #fff;
}

/* 各パーツリンク：区切りを自動生成 */
#kk-measure1 .kk-m1-parts{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

#kk-measure1 .kk-m1-parts a{
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.2);
}

#kk-measure1 .kk-m1-parts a:hover{
  border-bottom-color: rgba(0,0,0,.55);
}

/* 入力例画像 */
#kk-measure1 .kk-m1-formex-link img{
  max-width: 520px;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid #e2e2e2;
}

/* スマホ */
@media (max-width: 768px){
  #kk-measure1 .kk-m1-pdf-grid,
  #kk-measure1 .kk-m1-illust{
    grid-template-columns: 1fr;
  }
}
/* =========================
   measure1：PDF / イラスト / パーツリンク / 入力例（追加）
   ========================= */

#kk-measure1 .kk-m1-title{
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.4;
}

#kk-measure1 .kk-m1-lead{
  margin: 0 0 14px;
  line-height: 1.9;
}

/* PDF 2点：横並び（スマホは縦） */
#kk-measure1 .kk-m1-pdf-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

#kk-measure1 .kk-m1-pdf-item{
  display: block;
  text-decoration: none;
}

#kk-measure1 .kk-m1-pdf-item img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid #e2e2e2;
  background: #fff;
}

#kk-measure1 .kk-m1-pdf-cap{
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: inherit;
}

/* 採寸箇所イラスト 2枚 */
#kk-measure1 .kk-m1-illust{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#kk-measure1 .kk-m1-illust img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid #e2e2e2;
  background: #fff;
}

/* 各パーツリンク：区切りを自動生成 */
#kk-measure1 .kk-m1-parts{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

#kk-measure1 .kk-m1-parts a{
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.2);
}

#kk-measure1 .kk-m1-parts a:hover{
  border-bottom-color: rgba(0,0,0,.55);
}

/* 入力例画像 */
#kk-measure1 .kk-m1-formex-link img{
  max-width: 520px;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid #e2e2e2;
}

/* スマホ */
@media (max-width: 768px){
  #kk-measure1 .kk-m1-pdf-grid,
  #kk-measure1 .kk-m1-illust{
    grid-template-columns: 1fr;
  }
}　

/* =========================
   measure1：画像を「元サイズ」優先で中央寄せ（このブロック専用）
   ※ 拡大はしない／はみ出す時だけ縮小
   ========================= */

/* 採寸マニュアルPDF：中央揃え */
#kk-measure1 .kk-m1-pdf-grid{
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 28px !important;
  flex-wrap: wrap !important;
}

#kk-measure1 .kk-m1-pdf-item{
  text-align: center !important;
}

#kk-measure1 .kk-m1-pdf-item img{
  width: auto !important;       /* ←拡大しない */
  max-width: 100% !important;   /* ←はみ出す時だけ縮小 */
  height: auto !important;
  display: inline-block !important;
}

/* 採寸箇所イラスト：2枚を中央揃え（元サイズ優先） */
#kk-measure1 .kk-m1-illust{
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 28px !important;
  flex-wrap: wrap !important;
}

#kk-measure1 .kk-m1-illust img{
  width: auto !important;       /* ←拡大しない */
  max-width: 100% !important;   /* ←はみ出す時だけ縮小 */
  height: auto !important;
  display: inline-block !important;
}

/* 各パーツリンク：中央寄せ（任意） */
#kk-measure1 .kk-m1-parts{
  justify-content: center !important;
}

/* 入力例画像：中央寄せ＆元サイズ優先 */
#kk-measure1 .kk-m1-formex-link{
  display: block !important;
  text-align: center !important;
}

#kk-measure1 .kk-m1-formex-link img{
  width: auto !important;       /* ←拡大しない */
  max-width: 100% !important;   /* ←はみ出す時だけ縮小 */
  height: auto !important;
  display: inline-block !important;
} 

/* =========================
   measure1：FAQ（details/summary版）
   ========================= */
#kk-measure1 .kk-m1-step--faq{
  margin: 0 0 18px;
}

#kk-measure1 .kk-m1-faq-title{
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.4;
}

#kk-measure1 .kk-m1-faq{
  border-top: 1px solid #ccc;
}

/* 1行1アイテム */
#kk-measure1 .kk-m1-faq-item{
  border-bottom: 1px solid #ccc;
  background: #fff;
}

/* summary をボタン風に */
#kk-measure1 .kk-m1-faq-q{
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 700;
  background: #f8f8f8;
  position: relative;
}

/* 標準の三角マーカー消し（Chrome/Safari） */
#kk-measure1 .kk-m1-faq-q::-webkit-details-marker{
  display: none;
}

/* 開閉アイコン */
#kk-measure1 .kk-m1-faq-q::after{
  content: "＋";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
}
#kk-measure1 .kk-m1-faq-item[open] .kk-m1-faq-q::after{
  content: "－";
}

/* 回答 */
#kk-measure1 .kk-m1-faq-a{
  padding: 12px 16px;
  line-height: 1.7;
}
#kk-measure1 .kk-m1-faq-a p{
  margin: 0;
}