@charset "UTF-8";
/* ==========================================================
   SOLADEY5（ソラデー5）商品ページ
   soladey5-kdw.css / prefix: kdw-soladey5__
   配色：ステンレスシルバー × 空色
     graphite #4a5866  見出し・濃色
     text     #2f3a44
     silver   #eef1f4  背景
     line     #d9dfe5
     sky      #2b7bb9  差し色
     yellow   #e8a317  差し色（ソーラー）
   ※マスターパターン非適用の個別デザイン
   ========================================================== */

/* ---------- base ---------- */
.kdw-soladey5__wrap{
  max-width:760px;
  width:100%;
  margin:0 auto;
  padding:0 8px;
  box-sizing:border-box;
  color:#2f3a44;
  font-size:15px;
  line-height:1.9;
  letter-spacing:.02em;
}
.kdw-soladey5__wrap *,
.kdw-soladey5__wrap *::before,
.kdw-soladey5__wrap *::after{box-sizing:border-box;}
.kdw-soladey5__wrap p{margin:0 0 1em;}
.kdw-soladey5__wrap p:last-child{margin-bottom:0;}
.kdw-soladey5__wrap img{max-width:100%;height:auto;vertical-align:bottom;border:0;}
.kdw-soladey5__wrap hr{
  border:none;
  border-top:1px dashed #d4b8a8;
  height:0;
  margin:18px 0;
}

/* ---------- keyvisual / 商品名 ---------- */
.kdw-soladey5__img{margin:0 0 18px;}
.kdw-soladey5__img img{width:100%;display:block;border-radius:6px;}

.kdw-soladey5__title{
  margin:6px 0 4px;
  padding:0;
  text-align:center;
  color:#4a5866;
  font-weight:bold;
  line-height:1.4;
  letter-spacing:.06em;
  border:none;
  background:none;
}
.kdw-soladey5__title small{display:block;color:#2b7bb9;font-weight:bold;letter-spacing:.2em;}
.kdw-soladey5__catch{
  margin:14px 0 22px;
  text-align:center;
  font-weight:bold;
  color:#2f3a44;
  line-height:1.7;
}
.kdw-soladey5__catch::after{
  content:"";
  display:block;
  width:96px;
  height:3px;
  margin:14px auto 0;
  background:linear-gradient(90deg,#4a5866 0 33%,#2b7bb9 33% 66%,#e8a317 66% 100%);
}

/* ---------- inner / card ---------- */
.kdw-soladey5__inner{margin:0 0 20px;}
.kdw-soladey5__card{
  background:#fff;
  border:1px solid #d9dfe5;
  border-radius:10px;
  padding:22px 20px;
  margin:0 0 16px;
}
.kdw-soladey5__card--silver{background:#eef1f4;border-color:#eef1f4;}
.kdw-soladey5__note{font-size:12px;color:#6b7784;}

/* 強調 */
.kdw-soladey5__em{
  font-weight:bold;
  background:linear-gradient(transparent 62%,#fde7a9 62%);
}
.kdw-soladey5__sky{font-weight:bold;color:#2b7bb9;}

/* ---------- TOC ---------- */
.kdw-soladey5__toc{
  width:100%;
  border:1px solid #d9dfe5;
  border-top:4px solid #4a5866;
  border-radius:0 0 10px 10px;
  padding:16px 18px 10px;
  margin:0 0 28px;
  background:#fff;
}
.kdw-soladey5__toc-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:bold;
  color:#4a5866;
  font-size:16px;
  margin:0 0 6px;
}
.kdw-soladey5__toc ol{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:s5toc;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:20px;
}
.kdw-soladey5__toc li{
  counter-increment:s5toc;
  border-bottom:1px solid #eef1f4;
  margin:0;
  padding:0;
}
.kdw-soladey5__toc a{
  display:flex;
  gap:10px;
  align-items:baseline;
  padding:8px 2px;
  color:#2f3a44;
  text-decoration:none;
  font-size:14px;
  line-height:1.5;
}
.kdw-soladey5__toc a::before{
  content:counter(s5toc,decimal-leading-zero);
  font-weight:bold;
  color:#2b7bb9;
  font-size:13px;
}
.kdw-soladey5__toc a:hover{color:#2b7bb9;}

/* 目次に戻る */
.kdw-soladey5__back{text-align:right;margin:34px 0 8px;}
.kdw-soladey5__back a{
  display:inline-block;
  font-size:12px;
  color:#4a5866;
  text-decoration:none;
  border:1px solid #d9dfe5;
  border-radius:14px;
  padding:2px 12px;
  background:#fff;
}
.kdw-soladey5__back a:hover{background:#eef1f4;}

/* ---------- chapter heading ---------- */
.kdw-soladey5__ch{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 16px;
  padding:0 0 10px;
  border-bottom:1px solid #d9dfe5;
}
.kdw-soladey5__ch-no{
  flex:0 0 40px;
  width:40px;
  height:40px;
  border-radius:8px;
  background:#4a5866;
  color:#fff;
  font-weight:bold;
  font-size:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  letter-spacing:0;
}
.kdw-soladey5__ch-title{
  margin:0;
  padding:0;
  font-size:19px;
  line-height:1.45;
  color:#2f3a44;
  font-weight:bold;
  border:none;
  background:none;
}
.kdw-soladey5__up{
  display:inline-block;
  margin-left:6px;
  padding:0 8px;
  border-radius:4px;
  background:#e8a317;
  color:#fff;
  font-size:.85em;
  white-space:nowrap;
}

/* ---------- スペック強調（数値） ---------- */
.kdw-soladey5__spec{
  display:flex;
  align-items:center;
  gap:16px;
  background:#eef1f4;
  border-radius:10px;
  padding:16px 18px;
  margin:0 0 16px;
}
.kdw-soladey5__spec-num{
  flex:0 0 auto;
  font-size:40px;
  font-weight:bold;
  line-height:1;
  color:#2b7bb9;
}
.kdw-soladey5__spec-num small{font-size:16px;margin-left:2px;}
.kdw-soladey5__spec-text{font-size:14px;line-height:1.7;}
.kdw-soladey5__spec-text b{display:block;font-size:15px;color:#4a5866;}

/* ---------- 流れ（仕組み） ---------- */
.kdw-soladey5__flow{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:s5flow;
}
.kdw-soladey5__flow li{
  counter-increment:s5flow;
  position:relative;
  padding:0 0 18px 48px;
  margin:0;
}
.kdw-soladey5__flow li::before{
  content:counter(s5flow);
  position:absolute;
  left:0;
  top:0;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#2b7bb9;
  color:#fff;
  font-weight:bold;
  display:flex;
  align-items:center;
  justify-content:center;
}
.kdw-soladey5__flow li::after{
  content:"";
  position:absolute;
  left:15px;
  top:36px;
  bottom:4px;
  width:2px;
  background:#d9dfe5;
}
.kdw-soladey5__flow li:last-child{padding-bottom:0;}
.kdw-soladey5__flow li:last-child::before{background:#e8a317;}
.kdw-soladey5__flow li:last-child::after{display:none;}

/* ---------- カラー ---------- */
.kdw-soladey5__colors{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:0 0 6px;
}
.kdw-soladey5__color{margin:0;text-align:center;}
.kdw-soladey5__color img{width:100%;display:block;border-radius:6px;border:1px solid #eef1f4;}
.kdw-soladey5__color figcaption{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:6px;
  font-size:14px;
  font-weight:bold;
  color:#4a5866;
}
.kdw-soladey5__dot{
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:50%;
  border:1px solid #c4ccd4;
}

/* ---------- 項目リスト（dl） ---------- */
.kdw-soladey5__dl{margin:14px 0 0;padding:0;}
.kdw-soladey5__dl div{
  display:flex;
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid #eef1f4;
}
.kdw-soladey5__dl div:last-child{border-bottom:none;}
.kdw-soladey5__dl dt{
  flex:0 0 120px;
  font-weight:bold;
  color:#4a5866;
  font-size:14px;
  margin:0;
}
.kdw-soladey5__dl dd{margin:0;font-size:14px;flex:1 1 auto;}
.kdw-soladey5__tag{
  display:inline-block;
  font-size:12px;
  background:#eef1f4;
  border-radius:12px;
  padding:1px 10px;
  margin:0 4px 4px 0;
  color:#4a5866;
}

/* ---------- 2〜4枚のカード並び ---------- */
.kdw-soladey5__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.kdw-soladey5__box{
  background:#fff;
  border:1px solid #d9dfe5;
  border-radius:10px;
  padding:16px;
  font-size:14px;
}
.kdw-soladey5__box-title{
  margin:0 0 8px;
  padding:0 0 6px;
  font-size:15px;
  line-height:1.5;
  font-weight:bold;
  color:#4a5866;
  border:none;
  border-bottom:2px solid #2b7bb9;
  background:none;
}
.kdw-soladey5__grid--silver .kdw-soladey5__box{background:#eef1f4;border-color:#eef1f4;}

/* ---------- 試験データ ---------- */
.kdw-soladey5__study{
  background:#fff;
  border:1px solid #d9dfe5;
  border-left:4px solid #2b7bb9;
  border-radius:0 10px 10px 0;
  padding:16px 18px;
  margin:0 0 12px;
  font-size:14px;
}
.kdw-soladey5__study-title{
  margin:0 0 8px;
  font-size:15px;
  line-height:1.5;
  font-weight:bold;
  color:#2f3a44;
  border:none;
  background:none;
}
.kdw-soladey5__study-title span{color:#2b7bb9;margin-right:6px;}
.kdw-soladey5__src{
  display:block;
  margin-top:8px;
  font-size:12px;
  color:#6b7784;
}

/* ---------- responsive ---------- */
@media screen and (max-width:600px){
  .kdw-soladey5__wrap{font-size:14px;line-height:1.85;}
  .kdw-soladey5__card{padding:18px 14px;}
  .kdw-soladey5__toc ol{grid-template-columns:1fr;}
  .kdw-soladey5__ch-title{font-size:17px;}
  .kdw-soladey5__spec{flex-direction:column;align-items:flex-start;gap:8px;}
  .kdw-soladey5__spec-num{font-size:34px;}
  .kdw-soladey5__grid{grid-template-columns:1fr;}
  .kdw-soladey5__dl div{flex-direction:column;gap:2px;}
  .kdw-soladey5__dl dt{flex-basis:auto;}
}