/* ===========================================
   t7: 2026 New Product Page Styles
   Figmaデザイントークン（get_design_contextで取得）:
   - 本文: Meiryo, 15px, line-height 26px, letter-spacing 0.3px, #333
   - h2見出し: 24px, line-height 42px, letter-spacing 0.48px
   - h3見出し: Meiryo Bold, 21px, line-height 37px, letter-spacing 0.42px
   - 注釈: 12px, line-height 21px, letter-spacing 0.24px
   - NEWバッジ: bg #e50012, 38.27x19.33px, 白文字
   - コンテンツ幅: 976px
   =========================================== */

/* --- 全体: コンテンツ幅976px（Figma準拠） --- */
#sectionContents .mod_section,
#sectionContents .mod_section_pdf {
  width: 976px;
  margin-left: auto;
  margin-right: auto;
}

/* --- 全体: セクション間マージン（ex_marginTM/BM の代替） --- */
#sectionContents .mod_section.sec-h2 {
  margin-top: 100px;
}
#sectionContents .mod_section.sec-h3 {
  margin-top: 80px;
}

/* --- 全体: 本文font-size 15px（Figma準拠、base.cssの14pxを上書き） --- */
#sectionContents .ex_paragraph {
  font-size: 15px;
}

/* --- 全体: 2倍書き出し画像の制御 --- */
#sectionContents img {
  max-width: 100%;
  height: auto;
}

/* --- h2 NEWバッジ（Figma準拠で上書き） --- */
#sectionContents .ex_h2style.h2_new i.new-big {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #e50012;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  width: 38px;
  height: 19px;
  padding: 0;
  margin-right: 8px;
  flex-shrink: 0;
  line-height: 1;
  letter-spacing: 0;
}

/* h2_new span: flexで横並び + 垂直中央 */
#sectionContents .ex_h2style.h2_new span {
  display: flex;
  align-items: center;
}

/* --- s01: First View --- */
.s01-fv {
  width: 976px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}
.s01-fv img {
  width: 100%;
  height: auto;
}

/* --- s02: Lead --- */
.s02-lead {
  margin-top: 48px;
}
.s02-lead img {
  width: 100%;
  height: auto;
}

/* --- s07: 見出し＋ECONAVIラベル横並び --- */
.s07-head {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.s07-head__title {
  flex: none;
}
.s07-head__title .ex_h3style {
  margin-bottom: 0;
}
.s07-head__label {
  flex-shrink: 0;
  margin-left: 60px;
}

/* --- s03: PC時のみ 本文を左40%に、画像を重ねる --- */
@media only screen and (min-width: 641px) {
  .s03-body {
    width: 40%;
    position: relative;
    z-index: 2;
  }
  .s03-img {
    margin-top: -50px !important;
  }
}

/* --- Model Tag (s03, s08) Figma準拠 --- */
.model-tag {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 10px 16px;
  margin: 0 0 20px 0;
  font-weight: bold;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 0.32px;
  color: #333;
  background: #fff;
}
.model-tag p {
  margin: 0;
}

/* --- Expert Section (s10) Figma: bg #f4f3f1 --- */
.expert-section {
  background-color: #f4f3f1;
  color: #333;
  padding: 28px;
  overflow: visible;
  box-sizing: border-box;
}
.expert-section .ex_h3style {
  color: #333;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.36px;
  padding-bottom: 10px;
  border-bottom: 1px solid #CBCBCB;
  margin-bottom: 20px;
}
.expert-section .ex_paragraph {
  color: #333;
}
.s10-columns {
  display: flex;
  gap: 48px;
}
.s10-columns__main {
  flex: 1;
}
.s10-columns__side {
  width: 250px;
  flex-shrink: 0;
}

/* --- s10: Expert Name --- */
.expert-name {
  font-size: 18px;
  font-weight: bold;
}
.expert-affiliation {
  font-size: 15px;
  font-weight: bold;
}

/* --- s10: Right Column Profile --- */
.expert-profile-name {
  font-size: 15px;
  font-weight: bold;
  margin-top: 15px;
}
.expert-profile-org {
  font-size: 12px;
  line-height: 1.5;
}

/* --- 注釈（.commentsの代替） Figma準拠 --- */
.note {
  font-size: 12px;
  line-height: 21px;
  letter-spacing: 0.24px;
  color: #333;
  margin-top: 8px;
  margin-bottom: 0;
  display: flex;
  align-items: flex-start;
}
.note .note__label {
  flex-shrink: 0;
  white-space: nowrap;
  margin-right: 4px;
}

/* --- 注釈ブロック（flex不要版） --- */
.note-block {
  font-size: 12px;
  line-height: 21px;
  letter-spacing: 0.24px;
  color: #333;
  margin-top: 8px;
  margin-bottom: 0;
}

/* --- Notice Box (s19) --- */
.notice-box {
  border: 1px solid #ccc;
  padding: 20px;
  margin-top: 20px;
}
.notice-box h4 {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 14px;
}

/* --- s17: 2カラムレイアウト --- */
.s17-row {
  display: flex;
  gap: 20px;
}
.s17-row__text {
  flex: 1;
}
.s17-row__img {
  width: 470px;
  flex-shrink: 0;
}

/* --- s21: 2カラムレイアウト（左409px テキスト / 右536px 図） --- */
.s21-columns {
  display: flex;
  gap: 28px;
}
.s21-columns__main {
  width: 409px;
  flex-shrink: 0;
}
.s21-columns__side {
  flex: 1;
}

/* --- Utility --- */
.mt10 { margin-top: 10px !important; }
.mt30 { margin-top: 30px !important; }
.sp-br { display: none; }

/* ========== SP ========== */
@media only screen and (max-width: 640px) {
  #sectionContents .mod_section,
  #sectionContents .mod_section_pdf {
    width: auto;
    margin: 0 10px;
  }
  .s01-fv {
    width: auto;
    padding: 0;
  }
  .expert-section {
    padding: 24px 10px;
  }
  .s10-columns {
    flex-direction: column-reverse;
    gap: 20px;
  }
  .s10-columns__main,
  .s10-columns__side {
    width: 100%;
  }
  .s17-row {
    flex-direction: column;
  }
  .s17-row__img {
    width: 100%;
  }
  .s21-columns {
    flex-direction: column;
  }
  .s21-columns__main {
    width: 100%;
  }
  .s07-head {
    flex-direction: column;
  }
  .s07-head__label {
    margin-left: 0;
    margin-top: 10px;
  }
  .s02-lead {
    margin-top: 40px !important;
  }
  #sectionContents .mod_section.sec-h2 {
    margin-top: 64px !important;
  }
  #sectionContents .mod_section.sec-h3 {
    margin-top: 48px !important;
  }
  .sp-br {
    display: inline;
  }
  .btn_sec_large {
    width: auto !important;
  }
}