/* 注文ステップ（タイムライン風） */
.kk-steps .steps-container{
  position: relative;
  margin: 18px 0 28px;
  padding-left: 46px; /* 左のライン＋番号のための余白 */
}

.kk-steps .steps-container::before{
  content: "";
  position: absolute;
  left: 16px;      /* 丸番号の中心に合わせる */
  top: 6px;
  bottom: 6px;
  width: 4px;
  border-radius: 999px;
  background: #2b93c4; /* ブルー */
}

.kk-steps .step{
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  line-height: 1.5;
}

.kk-steps .step-number{
  position: absolute;
  left: -46px;
  top: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #2b93c4;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kk-steps .step .icon{
  color: #2b93c4;
  font-size: 16px;
}

.kk-steps .note{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #2b93c4;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  line-height: 1.5;
}

.kk-steps .note i{
  color: #fff;
}

/* スマホ微調整 */
@media (max-width: 480px){
  .kk-steps .steps-container{ padding-left: 42px; }
  .kk-steps .steps-container::before{ left: 14px; }
  .kk-steps .step-number{
    left: -42px;
    width: 28px;
    height: 28px;
    top: 12px;
    font-size: 13px;
  }
} 

/* --- order-shirts：共通セクション枠（今回追加分） --- */
.kk-section{
  max-width: 1100px;
  margin: 28px auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* 見出しと注記 */
.kk-section .kk-h2{
  margin: 0 0 10px;
}
.kk-section .kk-note{
  margin: -4px 0 14px;
  font-size: 0.95em;
  line-height: 1.6;
}

/* センター配置（画像） */
.kk-section .kk-center{
  text-align: center;
}
.kk-section .kk-img{
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* Step1の説明枠 */
.kk-section .kk-callout{
  padding: 16px 18px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fafafa;
}
.kk-section .kk-callout p{
  margin: 0;
  line-height: 1.9;
}

@media (max-width: 480px){
  .kk-section{
    padding: 0 16px;
  }
}　

/* === Step1：6通りの注文方法（このブロックにだけ適用） === */
#kk-order-methods{
  max-width: 1100px;
  margin: 28px auto;
  padding: 0 24px;
  box-sizing: border-box;
}

#kk-order-methods .kk-h2{
  margin: 0 0 14px;
}

/* 外側：2カラム */
#kk-order-methods .order-methods{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 18px;
}

/* カード：画像左＋テキスト右 */
#kk-order-methods .order-item{
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid #d8d8d8;
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
}

/* 画像 */
#kk-order-methods .order-img{
  display: block;
}
#kk-order-methods .order-img img{
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* テキスト */
#kk-order-methods .order-text strong{
  display: block;
  font-size: 18px;
  line-height: 1.4;
  margin: 0 0 8px;
}
#kk-order-methods .order-text a{
  display: inline-block;
  color: #1f7a3a;
  text-decoration: none;
  line-height: 1.6;
}
#kk-order-methods .order-text a:hover{
  text-decoration: underline;
}

/* タブレット/スマホ */
@media (max-width: 834px){
  #kk-order-methods{
    padding: 0 16px;
  }
  #kk-order-methods .order-methods{
    grid-template-columns: 1fr;
  }
  #kk-order-methods .order-item{
    grid-template-columns: 160px minmax(0, 1fr);
  }
}

@media (max-width: 480px){
  #kk-order-methods .order-item{
    grid-template-columns: 1fr;
    align-items: start;
  }
  #kk-order-methods .order-img img{
    height: 180px;
  }
}　

/* 画像リンク：画像の上に乗った時だけ反応（干渉しにくい） */
#kk-order-methods .order-img img{
  opacity: 1; /* Cocoon側のhoverと競合しやすいので基準を固定 */
  transition: opacity .18s ease, transform .18s ease, filter .18s ease;
  will-change: transform;
}

/* hover/focus：薄く＋わずかに拡大（リンク感） */
#kk-order-methods .order-img:hover img,
#kk-order-methods .order-img:focus-visible img{
  opacity: .85;
  filter: brightness(.96);
  transform: scale(1.02);
}

/* クリック中（押し込み） */
#kk-order-methods .order-img:active img{
  opacity: .75;
  transform: scale(.99);
}

/* キーボード操作時の枠 */
#kk-order-methods .order-img:focus{ outline: none; }
#kk-order-methods .order-img:focus-visible{
  outline: 3px solid rgba(31,122,58,.35);
  outline-offset: 3px;
}

/* スマホ等：hoverが疑似的に残る問題を避ける（タップ中だけ反応） */
@media (hover: none){
  #kk-order-methods .order-img:hover img,
  #kk-order-methods .order-img:focus-visible img{
    opacity: 1;
    filter: none;
    transform: none;
  }
}　

/* === フルオーダーシャツのデザイン：2カラム固定（このブロックだけ） === */
#kk-shirt-design .kk-design-list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 常に2列 */
  gap: 18px;
}

/* カード：画像左＋文字右（中央寄せ） */
#kk-shirt-design .kk-design-item{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid #d8d8d8;
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  min-height: 110px; /* 高さを揃える */
}

#kk-shirt-design .kk-design-item img{
  width: 150px;
  height: 86px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  flex: 0 0 auto;

  /* 画像だけ反応（安定版） */
  opacity: 1;
  transition: opacity .18s ease, transform .18s ease, filter .18s ease;
  will-change: transform;
}

#kk-shirt-design .kk-design-text{
  flex: 1;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/* 画像hover：薄く＋ほんの少し拡大 */
#kk-shirt-design .kk-design-item:hover img,
#kk-shirt-design .kk-design-item:focus-visible img{
  opacity: .85;
  filter: brightness(.96);
  transform: scale(1.02);
}

/* 押し込み */
#kk-shirt-design .kk-design-item:active img{
  opacity: .75;
  transform: scale(.99);
}

/* フォーカス */
#kk-shirt-design .kk-design-item:focus{ outline: none; }
#kk-shirt-design .kk-design-item:focus-visible{
  outline: 3px solid rgba(31,122,58,.35);
  outline-offset: 3px;
}

/* スマホ：2列は維持しつつ、画像と文字を小さく */
@media (max-width: 480px){
  #kk-shirt-design .kk-design-list{
    gap: 12px;
  }
  #kk-shirt-design .kk-design-item{
    padding: 10px;
    gap: 10px;
    min-height: 96px;
  }
  #kk-shirt-design .kk-design-item img{
    width: 110px;
    height: 70px;
  }
  #kk-shirt-design .kk-design-text{
    font-size: 14px;
  }
}

/* hoverが残る端末対策（必要なら） */
@media (hover: none){
  #kk-shirt-design .kk-design-item:hover img,
  #kk-shirt-design .kk-design-item:focus-visible img{
    opacity: 1;
    filter: none;
    transform: none;
  }
}


/* === フルオーダーシャツのデザイン（#kk-shirt-design のみ） === */
#kk-shirt-design .kk-design-list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* PC：2列 */
  gap: 18px;
}

#kk-shirt-design .kk-design-item{
  display: flex;                 /* PC：画像左＋文字右 */
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid #d8d8d8;
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  min-height: 140px;             /* 120画像が入る高さ（好みで） */
}

#kk-shirt-design .kk-design-item img{
  width: 120px;
  height: 120px;
  object-fit: contain;           /* 切り抜かない */
  background: #fff;
  border-radius: 8px;
  display: block;
  flex: 0 0 auto;

  opacity: 1;
  transition: opacity .18s ease, transform .18s ease, filter .18s ease;
  will-change: transform;
}

#kk-shirt-design .kk-design-text{
  flex: 1;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;            /* PC：中央寄せ（好みで left でもOK） */
}

/* 画像だけ hover */
#kk-shirt-design .kk-design-item:hover img,
#kk-shirt-design .kk-design-item:focus-visible img{
  opacity: .85;
  filter: brightness(.96);
  transform: scale(1.02);
}

#kk-shirt-design .kk-design-item:active img{
  opacity: .75;
  transform: scale(.99);
}

#kk-shirt-design .kk-design-item:focus{ outline: none; }
#kk-shirt-design .kk-design-item:focus-visible{
  outline: 3px solid rgba(31,122,58,.35);
  outline-offset: 3px;
}

/* スマホ：縦積み（1列）＋カード内も「画像上／文字下」 */
@media (max-width: 480px){
  #kk-shirt-design .kk-design-list{
    grid-template-columns: 1fr;  /* 1列 */
    gap: 12px;
  }

  #kk-shirt-design .kk-design-item{
    flex-direction: column;      /* 画像上・文字下 */
    align-items: center;
    min-height: auto;
    padding: 12px;
    gap: 10px;
  }

  #kk-shirt-design .kk-design-text{
    text-align: center;
    font-size: 14px;
  }
}

/* hoverが残る端末対策（必要なら） */
@media (hover: none){
  #kk-shirt-design .kk-design-item:hover img,
  #kk-shirt-design .kk-design-item:focus-visible img{
    opacity: 1;
    filter: none;
    transform: none;
  }
}　



/* === Step2-4（このブロックだけ） === */
#kk-step2-4 .kk-step-banner{
  margin: 10px 0 26px;
  text-align: center;
}
#kk-step2-4 .kk-step-banner a{
  display: inline-block;
}
#kk-step2-4 .kk-step-banner img{
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* Step3/4：表組み相当（左：画像 / 右：文章） */
#kk-step2-4 .kk-step-row{
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin: 10px 0 28px;
  padding: 14px;
  border: 1px solid #d8d8d8;
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
}

#kk-step2-4 .kk-step-img img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

#kk-step2-4 .kk-step-text p{
  margin: 0 0 12px;
  line-height: 1.9;
}
#kk-step2-4 .kk-step-text p:last-child{
  margin-bottom: 0;
}

/* タブレット：画像幅を少し縮める */
@media (max-width: 834px){
  #kk-step2-4 .kk-step-row{
    grid-template-columns: 320px minmax(0, 1fr);
  }
}

/* スマホ：縦積み（画像→文章） */
@media (max-width: 480px){
  #kk-step2-4 .kk-step-row{
    grid-template-columns: 1fr;
    padding: 12px;
  }
}　

/* === Step6-10（このブロックだけ） === */
#kk-step6-10 .kk-box{
  margin: 10px 0 18px;
  padding: 16px 18px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fafafa;
  line-height: 1.9;
}

#kk-step6-10 .kk-step6-twoimg{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 10px 0 28px;
}
#kk-step6-10 .kk-step6-twoimg img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid #e6e6e6;
  background: #fff;
}

/* 画像＋テキスト（表組み代替） */
#kk-step6-10 .kk-row{
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin: 10px 0 28px;
  padding: 14px;
  border: 1px solid #d8d8d8;
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
}

#kk-step6-10 .kk-img img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

#kk-step6-10 .kk-text p{
  margin: 0 0 12px;
  line-height: 1.9;
}
#kk-step6-10 .kk-text p:last-child{ margin-bottom: 0; }

#kk-step6-10 .kk-small{
  font-size: .95em;
}

/* メール例 */
#kk-step6-10 .kk-mail{
  margin: 10px 0 28px;
  padding: 14px;
  border: 1px solid #d8d8d8;
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
}
#kk-step6-10 .kk-mail-label{
  font-weight: 700;
  margin: 0 0 10px;
}
#kk-step6-10 .kk-mail img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid #e6e6e6;
  background: #fff;
}

/* タブレット */
@media (max-width: 834px){
  #kk-step6-10 .kk-row{
    grid-template-columns: 320px minmax(0, 1fr);
  }
}

/* スマホ：縦積み */
@media (max-width: 480px){
  #kk-step6-10 .kk-step6-twoimg{
    grid-template-columns: 1fr;
  }
  #kk-step6-10 .kk-row{
    grid-template-columns: 1fr;
    padding: 12px;
  }
}　

/* === Step11〜ページ末尾（このブロックだけ） === */
#kk-last .kk-lead{
  margin: 0 0 14px;
  line-height: 1.9;
}

#kk-last .kk-mb-lg{ margin-bottom: 22px; }
#kk-last .kk-mb-xl{ margin-bottom: 30px; }

/* Step11：画像＋文章（表組み代替） */
#kk-last .kk-row{
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin: 10px 0 22px;
  padding: 14px;
  border: 1px solid #d8d8d8;
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
}

#kk-last .kk-img img,
#kk-last img.kk-img{
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

#kk-last .kk-text p{
  margin: 0;
  line-height: 1.9;
}

/* 下部リンク群 */
#kk-last .kk-links-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0 18px;
}

#kk-last .kk-link-card{
  padding: 14px;
  border: 1px solid #d8d8d8;
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
}

#kk-last .kk-h3{
  margin: 0 0 10px;
  font-size: 18px;
}

#kk-last .kk-thumb{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid #e6e6e6;
  background: #fff;
}

#kk-last .kk-footer-note{
  margin: 10px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f6f6f6;
  text-align: center;
  line-height: 1.8;
}

/* タブレット */
@media (max-width: 834px){
  #kk-last .kk-row{ grid-template-columns: 320px minmax(0, 1fr); }
}

/* スマホ：縦積み */
@media (max-width: 480px){
  #kk-last .kk-row{ grid-template-columns: 1fr; padding: 12px; }
  #kk-last .kk-links-grid{ grid-template-columns: 1fr; }
}