/* Detailed product pages, inherit selected energy landing page look */
.energy-site.detail-page {
  font-family: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  color: #203744
}
.detail-page * {
  box-sizing: border-box
}
.detail-breadcrumb {
  font-size: 12px;
  padding: 12px 0 18px;
  color: #607079
}
.detail-breadcrumb a {
  color: #2c7183
}
.detail-hero {
  background: linear-gradient(125deg, #092e44, #15546b 73%, #397f86);
  color: #fff;
  padding: 54px 54px 52px;
  position: relative;
  overflow: hidden
}
.detail-hero:after {
  content: "";
  position: absolute;
  right: -120px;
  top: -110px;
  width: 440px;
  height: 440px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(255, 255, 255, .035), 0 0 0 115px rgba(255, 255, 255, .028);
  pointer-events: none
}
.detail-hero > * {
  position: relative;
  z-index: 1
}
.detail-hero .eyebrow {
  font-size: 12px;
  letter-spacing: .15em;
  color: #c6e8df
}
.detail-hero h1 {
  font-size: 42px;
  line-height: 1.35;
  color: white;
  margin: 14px 0 10px
}
.detail-hero h2 {
  font-size: 20px;
  line-height: 1.65;
  color: white;
  margin: 0 0 16px
}
.detail-hero p {
  font-size: 16px;
  line-height: 2;
  color: #ecf3f3;
  max-width: 650px;
  margin-bottom: 25px
}
.detail-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  min-width: 285px;
  background: #fff;
  color: #135068 !important;
  font-weight: bold;
  font-size: 14px;
  padding: 13px 22px;
  text-decoration: none !important
}
.detail-button:hover {
  background: #e8f2ec
}
.detail-section {
  padding: 63px 48px
}
.detail-section:nth-of-type(2n) {
  background: #f3f7f7
}
.detail-section-title {
  margin-bottom: 28px
}
.detail-section-title h2 {
  font-size: 29px;
  color: #17475a;
  margin: 8px 0
}
.detail-section-title .kicker {
  color: #46928c
}
.detail-overview-grid {
  display: flex;
  gap: 27px;
  align-items: center
}
.detail-overview-text p {
  font-size: 16px;
  line-height: 2.05
}
.detail-overview-text .detail-ask {
  font-size: 15px;
  color: #1d7275;
  font-weight: bold;
  border-left: 3px solid #69a6a2;
  padding-left: 15px;
  margin-top: 25px
}
.detail-main-shot {
  background: white;
  min-height: 320px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 17px;
  border: 1px solid #dce8e8
}
.detail-main-shot img {
  width: 100%;
  height: 310px;
  object-fit: contain
}
.detail-features {
  display: flex;
  gap: 18px;
  list-style: none;
  padding: 0;
  counter-reset: feature
}
.detail-features li {
  padding: 24px 19px 22px;
  border-top: 3px solid #438a8a;
  background: white;
  counter-increment: feature;
  min-height: 225px
}
.detail-features li:before {
  content: '0'counter(feature);
  display: block;
  font-size: 25px;
  color: #7ab1aa;
  margin-bottom: 10px
}
.detail-features h3 {
  font-size: 17px;
  color: #17475a;
  line-height: 1.6;
  margin-bottom: 9px
}
.detail-features p {
  font-size: 15px;
  line-height: 1.9
}
.detail-stat {
  display: flex;
  gap: 25px;
  align-items: center;
  padding: 28px 30px;
  border-top: 4px solid #3c8889;
  background: #eef5f4
}
.detail-stat strong {
  font-size: 45px;
  color: #1a7180;
  line-height: 1.2;
  white-space: nowrap
}
.detail-stat b {
  display: block;
  font-size: 17px;
  color: #194c5d;
  margin-bottom: 8px
}
.detail-stat p {
  font-size: 14px;
  line-height: 1.85
}
.detail-figures {
  display: flex;
  gap: 22px;
  margin-top: 29px
}
.detail-figure {
  margin: 0;
  background: white;
  border: 1px solid #dee8e8;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center
}
.detail-figure img {
  width: 100%;
  height: 350px;
  object-fit: contain
}
.detail-figure figcaption {
  margin-top: 10px;
  color: #4b6670;
  font-size: 13px;
  line-height: 1.65
}
.detail-source {
  font-size: 12px;
  color: #677980;
  line-height: 1.9;
  margin-top: 17px
}
.detail-check-grid {
  display: flex;
  gap: 24px
}
.detail-check-grid > div {
  padding: 22px 22px 24px;
  background: white;
  border-left: 3px solid #569899
}
.detail-check-grid h3 {
  font-size: 18px;
  color: #194c5d;
  margin-bottom: 11px
}
.detail-check-grid p {
  font-size: 15px;
  line-height: 2
}
.detail-process ol {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 16px
}
.detail-process li {
  padding: 17px 12px;
  border-top: 2px solid #438a8a;
  background: white
}
.detail-process li b {
  font-size: 26px;
  font-weight: 400;
  color: #69a6a2
}
.detail-process li h3 {
  font-size: 16px;
  color: #164b5d;
  margin: 7px 0
}
.detail-process li p {
  font-size: 14px;
  line-height: 1.8
}
.detail-links {
  display: flex;
  gap: 12px
}
.detail-links a {
  display: flex;
  justify-content: space-between;
  padding: 14px 17px;
  background: white;
  border: 1px solid #d6e3e4;
  color: #175c70 !important;
  font-weight: bold;
  font-size: 14px
}
.detail-footer-cta {
  padding: 58px 45px 68px;
  text-align: center;
  background: linear-gradient(110deg, #0a354b, #15566b);
  color: white
}
.detail-footer-cta .eyebrow {
  color: #b5e6df
}
.detail-footer-cta h2 {
  font-size: 27px;
  line-height: 1.65;
  color: white;
  margin: 11px 0
}
.detail-footer-cta p {
  font-size: 16px;
  line-height: 2;
  max-width: 680px;
  margin: 0 auto 24px
}
@media(max-width:700px) {
  .detail-hero {
    padding: 45px 24px
  }
  .detail-hero h1 {
    font-size: 32px
  }
  .detail-hero h2 {
    font-size: 18px
  }
  .detail-section {
    padding: 45px 20px
  }
  .detail-overview-grid, .detail-stat, .detail-check-grid {}
  .detail-features {}
  .detail-features li {
    min-height: 0
  }
  .detail-figures {}
  .detail-process ol {}
  .detail-links {}
  .detail-footer-cta {
    padding: 45px 21px
  }
  .detail-footer-cta h2 {
    font-size: 23px
  }
  .detail-button {
    min-width: 0;
    width: 100%
  }
  .detail-figure img {
    height: 290px
  }
  .detail-stat strong {
    font-size: 38px
  }
}
/* Flexbox conversion: detail pages, no CSS Grid */
.detail-overview-grid {
  flex-direction: row;
  align-items: center
}
.detail-overview-text {
  flex: 1.05 1 0;
  min-width: 0
}
.detail-main-shot {
  flex: .95 1 0;
  min-width: 0
}
.detail-features {
  flex-direction: row;
  flex-wrap: wrap
}
.detail-features li {
  flex: 0 0 calc((100% - 36px)/3);
  min-width: 0
}
.detail-stat {
  flex-direction: row;
  align-items: center
}
.detail-stat > strong {
  flex: 0 0 230px
}
.detail-stat > div {
  flex: 1 1 0;
  min-width: 0
}
.detail-figures {
  flex-direction: row;
  flex-wrap: wrap
}
.detail-figures > .detail-figure {
  flex: 0 0 calc((100% - 22px)/2);
  min-width: 0
}
.detail-check-grid {
  flex-direction: row
}
.detail-check-grid > div {
  flex: 1 1 0;
  min-width: 0
}
.detail-process ol {
  flex-direction: row;
  flex-wrap: wrap
}
.detail-process li {
  flex: 0 0 calc((100% - 48px)/4);
  min-width: 0
}
.detail-links {
  flex-direction: row;
  flex-wrap: wrap
}
.detail-links > a {
  flex: 0 0 calc((100% - 12px)/2);
  min-width: 0
}
@media(max-width:700px) {
  .detail-overview-grid, .detail-stat, .detail-check-grid {
    flex-direction: column;
    align-items: stretch
  }
  .detail-overview-text, .detail-main-shot, .detail-stat > strong, .detail-stat > div, .detail-check-grid > div {
    flex: 0 1 auto;
    width: 100%
  }
  .detail-features {
    flex-direction: column
  }
  .detail-features li {
    flex: 0 1 auto
  }
  .detail-figures {
    flex-direction: column
  }
  .detail-figures > .detail-figure {
    flex: 0 1 auto
  }
  .detail-process li {
    flex: 0 0 calc((100% - 16px)/2)
  }
  .detail-links {
    flex-direction: column
  }
  .detail-links > a {
    flex: 0 1 auto
  }
}
/* ==============================================================
   MS-RDK picture-led page / scoped to this product page only.
   No CSS Grid or JavaScript; leaves other product pages unchanged.
   ============================================================== */
.msrdk-redesign {
  --ms-blue: #244f7a;
  --ms-mid: #326d93;
  --ms-teal: #3e8b95;
  --ms-mint: #edf6f5;
  --ms-pale: #f4f8f9;
  --ms-ink: #213b4c;
  --ms-slate: #5a717d
}
.msrdk-redesign .ms-section {
  padding: 54px 45px 61px
}
.msrdk-redesign .detail-section-title {
  margin-bottom: 23px
}
.msrdk-redesign .detail-section-title h2 {
  font-size: 29px;
  letter-spacing: .012em;
  color: #214d70
}
.msrdk-redesign .detail-section-title .kicker {
  font-size: 11px;
  letter-spacing: .16em;
  color: #438a93
}
.msrdk-redesign p {
  overflow-wrap: anywhere
}
.msrdk-redesign .ms-micro {
  font-size: 12px;
  line-height: 1.9;
  color: #657a82;
  margin: 16px 0 0
}
.msrdk-redesign .ms-overline {
  display: block;
  color: #40858d;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  margin-bottom: 9px
}
/* hero */
.msrdk-redesign .ms-hero {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 0;
  min-height: 397px;
  background: linear-gradient(112deg, #143850, #195172 62%, #356f85);
}
.msrdk-redesign .ms-hero:after {
  display: none
}
.msrdk-redesign .ms-hero-copy {
  width: 59%;
  position: relative;
  z-index: 2;
  padding: 42px 8px 34px 44px
}
.msrdk-redesign .ms-hero-copy h1 {
  font-family: Arial, "Noto Sans JP", sans-serif;
  letter-spacing: .045em;
  font-size: 54px;
  color: #fff;
  margin: 6px 0 8px
}
.msrdk-redesign .ms-hero-copy h2 {
  font-size: 21px;
  line-height: 1.58;
  max-width: 490px
}
.msrdk-redesign .ms-hero-copy p {
  font-size: 15px;
  line-height: 1.9;
  margin: 0 0 14px;
  max-width: 475px
}
.msrdk-redesign .ms-hero-tags {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 15px 0 20px
}
.msrdk-redesign .ms-hero-tags span {
  font-size: 11px;
  color: #eef9fb;
  border: 1px solid rgba(255, 255, 255, .45);
  padding: 4px 9px
}
.msrdk-redesign .ms-hero-photo {
  width: 41%;
  background: linear-gradient(165deg, #e8eef6, #d3dee6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 19px 10px 12px;
  overflow: hidden;
  position: relative
}
.msrdk-redesign .ms-hero-photo:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  background: #7ac4d1;
  opacity: .6
}
.msrdk-redesign .ms-hero-photo img {
  max-width: 100%;
  max-height: 366px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 13px rgba(19, 46, 74, .18))
}
.msrdk-redesign .ms-hero .detail-button {
  font-size: 13px;
  min-width: 0;
  gap: 22px
}
/* overview */
.msrdk-redesign .ms-lead-split {
  display: flex;
  align-items: flex-start;
  gap: 30px
}
.msrdk-redesign .ms-lead-message {
  flex: 1.6;
  min-width: 0
}
.msrdk-redesign .ms-lead-message h3 {
  font-size: 25px;
  line-height: 1.45;
  color: #244c69;
  margin: 0 0 14px
}
.msrdk-redesign .ms-lead-message p {
  font-size: 15px;
  line-height: 1.95;
  margin: 0 0 12px
}
.msrdk-redesign .ms-lead-message strong {
  color: #276a85
}
.msrdk-redesign .ms-visual-notes {
  flex: 0 0 217px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px
}
.msrdk-redesign .ms-visual-notes > div {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #eef6f8;
  padding: 11px 10px;
  border-left: 3px solid #77b4bd
}
.msrdk-redesign .ms-visual-notes b {
  font-size: 22px;
  color: #6ea6b3;
  font-family: Arial, sans-serif
}
.msrdk-redesign .ms-visual-notes span {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
  color: #244d67
}
.msrdk-redesign .ms-summary-strip {
  display: flex;
  gap: 0;
  background: #214b70;
  padding: 23px 13px;
  margin-top: 26px
}
.msrdk-redesign .ms-summary-strip > div {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 0 8px;
  border-right: 1px solid rgba(255, 255, 255, .24)
}
.msrdk-redesign .ms-summary-strip > div:last-child {
  border-right: 0
}
.msrdk-redesign .ms-summary-strip b {
  display: block;
  font-family: Arial, "Yu Gothic", sans-serif;
  font-size: 26px;
  letter-spacing: -.04em;
  color: #fff
}
.msrdk-redesign .ms-summary-strip b span {
  font-size: 14px;
  margin-left: 3px;
  letter-spacing: 0
}
.msrdk-redesign .ms-summary-strip small {
  font-size: 11px;
  line-height: 1.65;
  color: #d8ebf3;
  display: block
}
/* features */
.msrdk-redesign .ms-feature {
  background: #edf4f6 !important
}
.msrdk-redesign .ms-feature-head h3 {
  font-size: 22px;
  color: #234c71;
  line-height: 1.55;
  margin: 7px 0 7px
}
.msrdk-redesign .ms-feature-head > span, .msrdk-redesign .ms-flow-intro > span {
  font-size: 11px;
  letter-spacing: .13em;
  color: #4c9098;
  font-weight: bold
}
.msrdk-redesign .ms-feature-head p {
  font-size: 14px;
  color: #566c75
}
.msrdk-redesign .ms-principles {
  display: flex;
  gap: 15px;
  margin-top: 21px
}
.msrdk-redesign .ms-principles article {
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 1px solid #d7e6e8;
  box-shadow: 0 6px 18px rgba(30, 78, 102, .08);
  padding: 17px 15px 20px;
  display: flex;
  flex-direction: column
}
.msrdk-redesign .ms-principle-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px
}
.msrdk-redesign .ms-principle-top b {
  background: #2b6d91;
  color: #fff;
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px
}
.msrdk-redesign .ms-principle-top h4 {
  font-size: 18px;
  color: #264e6b
}
.msrdk-redesign .ms-principles img {
  width: 100%;
  height: 360px;
  object-fit: contain;
  object-position: top center;
  background: #fff
}
.msrdk-redesign .ms-principles p {
  font-size: 13px;
  line-height: 1.9;
  margin: 12px 0 0
}
.msrdk-redesign .ms-flow-panel {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 21px;
  background: #fff;
  border-left: 5px solid #75afb7;
  padding: 24px
}
.msrdk-redesign .ms-flow-intro {
  flex: 0 0 160px
}
.msrdk-redesign .ms-flow-intro h3 {
  font-size: 17px;
  line-height: 1.6;
  color: #214e70;
  margin: 6px 0 0
}
.msrdk-redesign .ms-flow-list {
  flex: 1;
  display: flex;
  list-style: none;
  gap: 4px;
  margin: 0;
  padding: 0
}
.msrdk-redesign .ms-flow-list li {
  flex: 1;
  min-width: 0;
  background: #e6f2f5;
  padding: 15px 9px;
  position: relative;
  line-height: 1.6;
  font-size: 12px;
  text-align: center;
  font-weight: 500
}
.msrdk-redesign .ms-flow-list li:not(:last-child):after {
  content: "→";
  position: absolute;
  right: -10px;
  top: 36%;
  color: #2e7992;
  background: #fff;
  font-size: 17px;
  font-weight: bold;
  z-index: 1
}
.msrdk-redesign .ms-flow-list li:last-child {
  background: #24728c;
  color: #fff
}
/* quantitative visuals */
.msrdk-redesign .ms-data {
  background: #fff !important
}
.msrdk-redesign .ms-data-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #e8f0f5;
  padding: 21px 25px;
  border-left: 5px solid #39778e
}
.msrdk-redesign .ms-data-head > div:first-child {
  flex: 1;
  min-width: 0
}
.msrdk-redesign .ms-data-head > div:first-child > span {
  font-size: 12px;
  color: #57788c;
  font-weight: bold
}
.msrdk-redesign .ms-data-head h3 {
  font-size: 20px;
  color: #255072;
  margin: 2px 0 5px
}
.msrdk-redesign .ms-data-head p {
  font-size: 12px;
  line-height: 1.7;
  color: #587081
}
.msrdk-redesign .ms-data-highlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 164px;
  border-left: 1px solid #b7cad4;
  padding-left: 20px
}
.msrdk-redesign .ms-data-highlight strong {
  color: #1d6d8f;
  font-size: 47px;
  line-height: 1.2;
  letter-spacing: -.05em
}
.msrdk-redesign .ms-data-highlight strong small {
  font-size: 18px;
  letter-spacing: 0
}
.msrdk-redesign .ms-data-highlight span {
  font-size: 12px;
  color: #34566e;
  font-weight: bold
}
.msrdk-redesign .ms-meter {
  margin: 18px 0 24px;
  padding: 22px 25px;
  border: 1px solid #d9e5e9;
  background: #fff
}
.msrdk-redesign .ms-meter-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 17px;
  font-size: 13px;
  font-weight: bold;
  color: #284d68
}
.msrdk-redesign .ms-meter-head small {
  color: #7b8c92
}
.msrdk-redesign .ms-meter-line {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 13px
}
.msrdk-redesign .ms-meter-line > b {
  flex: 0 0 94px;
  font-size: 12px;
  color: #405969
}
.msrdk-redesign .ms-meter-track {
  flex: 1;
  min-width: 0;
  height: 27px;
  background: #eef3f4;
  overflow: hidden
}
.msrdk-redesign .ms-meter-fill {
  height: 100%
}
.msrdk-redesign .ms-meter-fill.before {
  background: #849ba9
}
.msrdk-redesign .ms-meter-fill.after {
  background: #368fb0
}
.msrdk-redesign .ms-meter-line strong {
  font-size: 18px;
  color: #244d66;
  flex: 0 0 63px;
  text-align: right
}
.msrdk-redesign .ms-meter-note {
  color: #2c6a84;
  text-align: right;
  font-size: 13px;
  margin: 4px 0 0;
  font-weight: bold
}
.msrdk-redesign .ms-data-figures {
  display: flex;
  gap: 15px
}
.msrdk-redesign .ms-data-figures figure {
  flex: 1;
  min-width: 0;
  border: 1px solid #dde7ea;
  background: #fff;
  margin: 0;
  padding: 14px
}
.msrdk-redesign .ms-data-figures img {
  width: 100%;
  height: 360px;
  object-fit: contain
}
.msrdk-redesign .ms-data-figures figcaption {
  text-align: center;
  color: #49677b;
  font-size: 12px;
  margin-top: 5px
}
.msrdk-redesign .ms-data-caution {
  border-top: 1px solid #dbe7e9;
  margin-top: 19px;
  padding-top: 15px
}
.msrdk-redesign .ms-data-caution b {
  display: block;
  color: #2a5c77;
  font-size: 13px
}
.msrdk-redesign .ms-data-caution p {
  font-size: 13px;
  line-height: 1.85;
  color: #536a77
}
/* Application & photos */
.msrdk-redesign .ms-application {
  background: #f3f7f7 !important
}
.msrdk-redesign .ms-location-intro {
  display: flex;
  gap: 24px;
  align-items: center
}
.msrdk-redesign .ms-loc-number {
  flex: 0 0 240px;
  padding: 26px 18px;
  background: #1c5173;
  color: #fff;
  text-align: center
}
.msrdk-redesign .ms-loc-number b {
  display: block;
  color: #fff;
  font-size: 35px;
  line-height: 1.45;
  white-space: nowrap
}
.msrdk-redesign .ms-loc-number small {
  display: block;
  color: #e1eff6;
  font-size: 12px
}
.msrdk-redesign .ms-loc-text {
  flex: 1
}
.msrdk-redesign .ms-loc-text h3 {
  font-size: 19px;
  line-height: 1.6;
  color: #214a68;
  margin: 0 0 8px
}
.msrdk-redesign .ms-loc-text p {
  font-size: 13px;
  line-height: 1.85
}
.msrdk-redesign .ms-photo-reasons {
  display: flex;
  gap: 15px;
  margin-top: 20px
}
.msrdk-redesign .ms-photo-reasons figure {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 13px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 16px
}
.msrdk-redesign .ms-photo-reasons img {
  width: 122px;
  height: 125px;
  object-fit: cover;
  object-position: top;
  flex: 0 0 122px
}
.msrdk-redesign .ms-photo-reasons figcaption {
  font-size: 13px;
  color: #244c66;
  line-height: 1.7
}
.msrdk-redesign .ms-photo-reasons figcaption b {
  display: block;
  font-size: 15px
}
.msrdk-redesign .ms-photo-reasons figcaption span {
  display: block;
  font-size: 12px;
  color: #6a7d83
}
.msrdk-redesign .ms-subhead {
  color: #23516f;
  font-size: 20px;
  margin: 34px 0 4px
}
.msrdk-redesign .ms-sublead {
  font-size: 13px;
  color: #637680;
  margin-bottom: 15px
}
.msrdk-redesign .ms-install-photos {
  display: flex;
  gap: 12px
}
.msrdk-redesign .ms-install-photos figure {
  flex: 1;
  min-width: 0;
  margin: 0;
  background: #fff;
  border: 1px solid #d4e1e4;
  padding: 9px;
  text-align: center
}
.msrdk-redesign .ms-install-photos img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: center 42%
}
.msrdk-redesign .ms-install-photos figcaption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1.6;
  color: #265274;
  margin-top: 8px;
  min-height: 42px
}
.msrdk-redesign .ms-app-note {
  display: flex;
  gap: 16px;
  margin-top: 19px
}
.msrdk-redesign .ms-app-note > div {
  flex: 1;
  min-width: 0;
  border-left: 3px solid #75afb7;
  background: #fff;
  padding: 16px 17px
}
.msrdk-redesign .ms-app-note h4 {
  font-size: 15px;
  color: #255171;
  margin: 0 0 7px
}
.msrdk-redesign .ms-app-note p {
  font-size: 13px;
  line-height: 1.85
}
/* process */
.msrdk-redesign .ms-process {
  background: #fff !important
}
.msrdk-redesign .ms-steps {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none
}
.msrdk-redesign .ms-steps li {
  flex: 1;
  min-width: 0;
  background: #f1f7f8;
  padding: 18px 14px;
  border-top: 4px solid #468f9a
}
.msrdk-redesign .ms-steps li b {
  display: block;
  color: #5299a7;
  font-size: 28px;
  line-height: 1.3
}
.msrdk-redesign .ms-steps li h3 {
  color: #255576;
  font-size: 15px;
  line-height: 1.5;
  margin: 9px 0
}
.msrdk-redesign .ms-steps li p {
  font-size: 12px;
  line-height: 1.8
}
.msrdk-redesign .ms-small-cta {
  margin-top: 24px;
  background: #eaf3f5;
  border-left: 4px solid #468c9c;
  padding: 20px 24px;
  display: flex;
  gap: 15px;
  justify-content: space-between;
  align-items: center
}
.msrdk-redesign .ms-small-cta p {
  color: #2f536b;
  font-size: 14px;
  line-height: 1.8
}
.msrdk-redesign .ms-small-cta a {
  display: block;
  flex: 0 0 auto;
  background: #1d6380;
  padding: 12px 15px;
  font-size: 12px;
  color: #fff !important;
  font-weight: bold
}
@media(max-width:760px) {
  .msrdk-redesign .ms-section {
    padding: 39px 22px 46px
  }
  .msrdk-redesign .ms-hero {
    flex-direction: column
  }
  .msrdk-redesign .ms-hero-copy {
    width: 100%;
    padding: 38px 27px 31px
  }
  .msrdk-redesign .ms-hero-copy h1 {
    font-size: 43px
  }
  .msrdk-redesign .ms-hero-copy h2 {
    font-size: 18px
  }
  .msrdk-redesign .ms-hero-photo {
    width: 100%;
    max-height: 235px;
    padding: 6px 15px
  }
  .msrdk-redesign .ms-hero-photo:before {
    display: none
  }
  .msrdk-redesign .ms-hero-photo img {
    max-height: 232px
  }
  .msrdk-redesign .ms-lead-split, .msrdk-redesign .ms-location-intro, .msrdk-redesign .ms-small-cta {
    flex-direction: column;
    align-items: stretch
  }
  .msrdk-redesign .ms-visual-notes, .msrdk-redesign .ms-loc-number {
    flex: 0 1 auto
  }
  .msrdk-redesign .ms-visual-notes {
    gap: 5px
  }
  .msrdk-redesign .ms-summary-strip {
    flex-wrap: wrap;
    padding: 16px 6px
  }
  .msrdk-redesign .ms-summary-strip > div {
    flex: 1 1 45%;
    border-right: 0;
    margin: 6px 0
  }
  .msrdk-redesign .ms-summary-strip b {
    font-size: 22px
  }
  .msrdk-redesign .ms-principles {
    flex-direction: column
  }
  .msrdk-redesign .ms-principles img {
    height: 270px
  }
  .msrdk-redesign .ms-flow-panel {
    flex-direction: column;
    align-items: stretch;
    padding: 18px
  }
  .msrdk-redesign .ms-flow-intro {
    flex: 0 1 auto
  }
  .msrdk-redesign .ms-flow-intro h3 br {
    display: none
  }
  .msrdk-redesign .ms-flow-list {
    flex-direction: column
  }
  .msrdk-redesign .ms-flow-list li {
    padding: 12px
  }
  .msrdk-redesign .ms-flow-list li:not(:last-child):after {
    content: "↓";
    top: auto;
    right: 48%;
    bottom: -14px
  }
  .msrdk-redesign .ms-data-head {
    flex-direction: column;
    align-items: stretch
  }
  .msrdk-redesign .ms-data-highlight {
    flex: 0 1 auto;
    border-left: 0;
    border-top: 1px solid #b7cad4;
    padding: 7px 0 0
  }
  .msrdk-redesign .ms-meter {
    padding: 17px 12px
  }
  .msrdk-redesign .ms-meter-line {
    gap: 7px
  }
  .msrdk-redesign .ms-meter-line > b {
    flex: 0 0 76px;
    font-size: 11px
  }
  .msrdk-redesign .ms-meter-line strong {
    flex: 0 0 55px;
    font-size: 14px
  }
  .msrdk-redesign .ms-data-figures, .msrdk-redesign .ms-photo-reasons, .msrdk-redesign .ms-app-note {
    flex-direction: column
  }
  .msrdk-redesign .ms-photo-reasons figure {
    flex: 0 1 auto
  }
  .msrdk-redesign .ms-install-photos {
    flex-wrap: wrap
  }
  .msrdk-redesign .ms-install-photos figure {
    flex: 0 0 calc(50% - 6px)
  }
  .msrdk-redesign .ms-steps {
    flex-wrap: wrap
  }
  .msrdk-redesign .ms-steps li {
    flex: 0 0 calc(50% - 5px)
  }
  .msrdk-redesign .ms-small-cta a {
    text-align: center
  }
}
@media(max-width:390px) {
  .msrdk-redesign .ms-install-photos img {
    height: 140px
  }
  .msrdk-redesign .ms-photo-reasons img {
    width: 100px;
    flex-basis: 100px
  }
  .msrdk-redesign .ms-summary-strip > div {
    flex: 1 1 100%;
    border-bottom: 1px solid rgba(255, 255, 255, .17);
    padding-bottom: 8px
  }
  .msrdk-redesign .ms-summary-strip > div:last-child {
    border-bottom: 0
  }
}
/* Responsive fixes scoped to the MS-RDK page to avoid affecting existing pages */
@media(max-width:960px) {
  body.msrdk-page-body header .stage {
    width: calc(100% - 24px);
    max-width: 930px
  }
  body.msrdk-page-body header .logo {
    margin-right: 0;
    max-width: 60%;
    height: auto
  }
  #contents.msrdk-content-outer .stage {
    width: 100%;
    max-width: 940px
  }
}
@media(max-width:650px) {
  body.msrdk-page-body header .stage {
    padding-bottom: 12px;
    overflow: hidden
  }
  body.msrdk-page-body header .logo {
    display: block;
    float: none;
    max-width: 100%;
    width: 290px;
    height: auto;
    margin: 4px auto 7px
  }
  body.msrdk-page-body header h1 {
    text-align: center;
    font-size: 10px
  }
  body.msrdk-page-body header .stage > img, body.msrdk-page-body header .stage > a img:not(.logo) {
    max-width: 90%;
    height: auto
  }
  body.msrdk-page-body header .stage > a:not(:first-of-type) {
    display: inline-block
  }
}
/* Terano Paint visual detail page — same visual system as MS-RDK, Flexbox only */
.terano-redesign {
  --tr-blue: #244f7a;
  --tr-teal: #267c82;
  --tr-green: #418f91;
  --tr-ink: #213b4c;
  --tr-light: #edf6f5
}
.terano-redesign .tr-section {
  padding: 54px 45px 61px
}
.terano-redesign .detail-section-title {
  margin-bottom: 23px
}
.terano-redesign .detail-section-title h2 {
  font-size: 29px;
  letter-spacing: .012em;
  color: #214d70
}
.terano-redesign .detail-section-title .kicker {
  font-size: 11px;
  letter-spacing: .16em;
  color: #438a93
}
.terano-redesign p {
  overflow-wrap: anywhere
}
.terano-redesign .tr-micro {
  font-size: 12px;
  line-height: 1.85;
  color: #647b84;
  margin: 14px 0 0
}
.terano-redesign .tr-overline {
  display: block;
  color: #40858d;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  margin-bottom: 10px
}
/* hero */
.terano-redesign .tr-hero {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 0;
  min-height: 395px;
  background: linear-gradient(112deg, #143850, #195172 62%, #356f85)
}
.terano-redesign .tr-hero:after {
  display: none
}
.terano-redesign .tr-hero-copy {
  width: 59%;
  position: relative;
  z-index: 2;
  padding: 41px 12px 33px 44px
}
.terano-redesign .tr-hero-copy h1 {
  font-family: Arial, "Noto Sans JP", sans-serif;
  letter-spacing: 0;
  font-size: 42px;
  color: #fff;
  margin: 11px 0 11px;
  line-height: 1.32
}
.terano-redesign .tr-hero-copy h2 {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 13px;
  color: #fff
}
.terano-redesign .tr-hero-copy p {
  font-size: 15px;
  line-height: 1.9;
  margin: 0 0 13px;
  color: #eef6f8
}
.terano-redesign .tr-hero-tags {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 15px 0 19px
}
.terano-redesign .tr-hero-tags span {
  font-size: 11px;
  color: #edf9fb;
  border: 1px solid rgba(255, 255, 255, .45);
  padding: 4px 8px
}
.terano-redesign .tr-hero .detail-button {
  font-size: 13px;
  min-width: 0;
  gap: 22px
}
.terano-redesign .tr-hero-photo {
  width: 41%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(165deg, #e8eef6, #d3dee6);
  overflow: hidden;
  position: relative;
  padding: 14px
}
.terano-redesign .tr-hero-photo:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  background: #7ac4d1;
  opacity: .6;
  z-index: 1
}
.terano-redesign .tr-hero-photo img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center;
  box-shadow: 0 12px 15px rgba(19, 46, 74, .2)
}
/* overview */
.terano-redesign .tr-lead-split {
  display: flex;
  align-items: flex-start;
  gap: 28px
}
.terano-redesign .tr-lead-message {
  flex: 1.6;
  min-width: 0
}
.terano-redesign .tr-lead-message h3 {
  font-size: 25px;
  line-height: 1.45;
  color: #244c69;
  margin: 0 0 14px
}
.terano-redesign .tr-lead-message p {
  font-size: 15px;
  line-height: 1.95;
  margin: 0 0 11px
}
.terano-redesign .tr-lead-message strong {
  color: #276a85
}
.terano-redesign .tr-lead-list {
  flex: 0 0 217px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px
}
.terano-redesign .tr-lead-list > div {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #eef6f8;
  padding: 12px 10px;
  border-left: 3px solid #77b4bd
}
.terano-redesign .tr-lead-list b {
  font-size: 22px;
  color: #6ea6b3;
  font-family: Arial, sans-serif
}
.terano-redesign .tr-lead-list span {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
  color: #244d67
}
.terano-redesign .tr-summary {
  display: flex;
  gap: 0;
  background: #214b70;
  padding: 22px 12px;
  margin-top: 26px
}
.terano-redesign .tr-summary > div {
  flex: 1;
  text-align: center;
  min-width: 0;
  padding: 0 8px;
  border-right: 1px solid rgba(255, 255, 255, .24)
}
.terano-redesign .tr-summary > div:last-child {
  border: 0
}
.terano-redesign .tr-summary b {
  display: block;
  font-family: Arial, "Yu Gothic", sans-serif;
  font-size: 25px;
  letter-spacing: -.03em;
  color: #fff;
  line-height: 1.5
}
.terano-redesign .tr-summary b span {
  font-size: 15px;
  margin-left: 4px;
  letter-spacing: 0
}
.terano-redesign .tr-summary small {
  display: block;
  color: #d8ebf3;
  font-size: 11px;
  line-height: 1.65
}
/* features */
.terano-redesign .tr-feature {
  background: #edf4f6 !important
}
.terano-redesign .tr-feature-heading h3 {
  font-size: 22px;
  color: #234c71;
  line-height: 1.55;
  margin: 7px 0
}
.terano-redesign .tr-feature-heading > span, .terano-redesign .tr-flow-heading > span {
  font-size: 11px;
  letter-spacing: .13em;
  color: #4c9098;
  font-weight: 700
}
.terano-redesign .tr-feature-heading p {
  font-size: 14px;
  line-height: 1.9;
  color: #566c75
}
.terano-redesign .tr-principles {
  display: flex;
  gap: 15px;
  margin-top: 21px
}
.terano-redesign .tr-principles article {
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 1px solid #d7e6e8;
  box-shadow: 0 6px 18px rgba(30, 78, 102, .08);
  padding: 17px 15px 20px;
  display: flex;
  flex-direction: column
}
.terano-redesign .tr-principle-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  min-height: 49px
}
.terano-redesign .tr-principle-top b {
  background: #2b6d91;
  color: #fff;
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px
}
.terano-redesign .tr-principle-top h4 {
  font-size: 17px;
  color: #264e6b;
  line-height: 1.5
}
.terano-redesign .tr-principle-visual {
  height: 226px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff
}
.terano-redesign .tr-principle-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain
}
.terano-redesign .tr-principles p {
  font-size: 13px;
  line-height: 1.9;
  margin: 11px 0 0
}
.terano-redesign .tr-flow {
  display: flex;
  align-items: center;
  gap: 22px;
  background: #fff;
  border-left: 5px solid #75afb7;
  margin-top: 20px;
  padding: 24px
}
.terano-redesign .tr-flow-heading {
  flex: 0 0 165px
}
.terano-redesign .tr-flow-heading h3 {
  font-size: 17px;
  color: #214e70;
  line-height: 1.6;
  margin: 6px 0 0
}
.terano-redesign .tr-flow ol {
  flex: 1;
  display: flex;
  gap: 4px;
  padding: 0;
  list-style: none;
  margin: 0
}
.terano-redesign .tr-flow li {
  flex: 1;
  min-width: 0;
  background: #e6f2f5;
  padding: 14px 8px;
  font-size: 12px;
  text-align: center;
  position: relative;
  line-height: 1.65
}
.terano-redesign .tr-flow li:not(:last-child):after {
  content: "→";
  position: absolute;
  right: -10px;
  top: 36%;
  color: #2e7992;
  background: #fff;
  font-size: 17px;
  font-weight: 700;
  z-index: 1
}
.terano-redesign .tr-flow li:last-child {
  background: #24728c;
  color: #fff
}
.terano-redesign .tr-extra-features {
  display: flex;
  gap: 11px;
  margin-top: 17px
}
.terano-redesign .tr-extra-features > div {
  flex: 1;
  min-width: 0;
  border-top: 2px solid #87b7bc;
  padding: 12px 11px;
  background: #f9fcfc
}
.terano-redesign .tr-extra-features b {
  font-size: 14px;
  color: #275971
}
.terano-redesign .tr-extra-features p {
  font-size: 12px;
  line-height: 1.85;
  margin-top: 5px
}
/* data */
.terano-redesign .tr-data {
  background: #fff !important
}
.terano-redesign .tr-data-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #e8f0f5;
  padding: 21px 25px;
  border-left: 5px solid #39778e
}
.terano-redesign .tr-data-head > div:first-child {
  flex: 1;
  min-width: 0
}
.terano-redesign .tr-data-head > div:first-child > span {
  font-size: 12px;
  color: #57788c;
  font-weight: 700
}
.terano-redesign .tr-data-head h3 {
  font-size: 20px;
  color: #255072;
  margin: 2px 0 5px
}
.terano-redesign .tr-data-head p {
  font-size: 12px;
  line-height: 1.7;
  color: #587081
}
.terano-redesign .tr-data-highlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 170px;
  border-left: 1px solid #b7cad4;
  padding-left: 18px
}
.terano-redesign .tr-data-highlight strong {
  font-size: 47px;
  line-height: 1.2;
  color: #1d6d8f;
  letter-spacing: -.05em
}
.terano-redesign .tr-data-highlight small {
  font-size: 18px;
  letter-spacing: 0
}
.terano-redesign .tr-data-highlight span {
  font-size: 12px;
  color: #34566e;
  font-weight: 700;
  text-align: center
}
.terano-redesign .tr-meter {
  margin: 18px 0 24px;
  padding: 21px 25px;
  border: 1px solid #d9e5e9;
  background: #fff
}
.terano-redesign .tr-meter-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 700;
  color: #284d68
}
.terano-redesign .tr-meter-head small {
  color: #7b8c92
}
.terano-redesign .tr-meter-line {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 13px
}
.terano-redesign .tr-meter-line > b {
  flex: 0 0 94px;
  font-size: 12px;
  color: #405969
}
.terano-redesign .tr-meter-track {
  flex: 1;
  min-width: 0;
  height: 27px;
  background: #eef3f4;
  overflow: hidden
}
.terano-redesign .tr-meter-fill {
  height: 100%
}
.terano-redesign .tr-meter-fill.prior {
  background: #849ba9
}
.terano-redesign .tr-meter-fill.next {
  background: #368fb0
}
.terano-redesign .tr-meter-line strong {
  font-size: 18px;
  color: #244d66;
  flex: 0 0 60px;
  text-align: right
}
.terano-redesign .tr-meter-note {
  font-size: 13px;
  color: #2c6a84;
  text-align: right;
  font-weight: 700
}
.terano-redesign .tr-data-figures {
  display: flex;
  gap: 15px
}
.terano-redesign .tr-data-figures figure {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid #dde7ea;
  background: #fff
}
.terano-redesign .tr-data-figures img {
  display: block;
  width: 100%;
  height: 360px;
  object-fit: contain
}
.terano-redesign .tr-data-figures figcaption {
  font-size: 12px;
  color: #49677b;
  text-align: center;
  margin-top: 5px
}
.terano-redesign .tr-data-notes {
  border-top: 1px solid #dbe7e9;
  margin-top: 19px;
  padding-top: 15px
}
.terano-redesign .tr-data-notes b {
  font-size: 13px;
  color: #2a5c77
}
.terano-redesign .tr-data-notes p {
  font-size: 13px;
  line-height: 1.9;
  color: #536a77;
  margin-top: 3px
}
/* application */
.terano-redesign .tr-application {
  background: #f3f7f7 !important
}
.terano-redesign .tr-app-head {
  display: flex;
  align-items: center;
  gap: 24px
}
.terano-redesign .tr-app-badge {
  flex: 0 0 225px;
  padding: 24px 16px;
  background: #1c5173;
  color: #fff;
  text-align: center
}
.terano-redesign .tr-app-badge b {
  display: block;
  font-size: 32px;
  color: #fff;
  line-height: 1.45
}
.terano-redesign .tr-app-badge span {
  display: block;
  font-size: 12px;
  color: #e1eff6;
  line-height: 1.7
}
.terano-redesign .tr-app-head > div:last-child {
  flex: 1
}
.terano-redesign .tr-app-head h3 {
  font-size: 19px;
  color: #214a68;
  line-height: 1.6;
  margin: 0 0 8px
}
.terano-redesign .tr-app-head p {
  font-size: 13px;
  line-height: 1.85
}
.terano-redesign .tr-photos {
  display: flex;
  gap: 15px;
  margin-top: 20px
}
.terano-redesign .tr-photos figure {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 13px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 15px
}
.terano-redesign .tr-photos img {
  width: 155px;
  height: 110px;
  object-fit: cover;
  flex: 0 0 155px
}
.terano-redesign .tr-photos figcaption {
  font-size: 13px;
  color: #244c66;
  line-height: 1.7
}
.terano-redesign .tr-photos figcaption b {
  display: block;
  font-size: 15px
}
.terano-redesign .tr-photos figcaption span {
  font-size: 11px;
  color: #6a7d83
}
.terano-redesign .tr-subhead {
  font-size: 20px;
  color: #23516f;
  margin: 31px 0 12px
}
.terano-redesign .tr-app-checks {
  display: flex;
  gap: 15px
}
.terano-redesign .tr-app-checks > div {
  flex: 1;
  min-width: 0;
  background: #fff;
  border-left: 3px solid #75afb7;
  padding: 18px 17px
}
.terano-redesign .tr-app-checks b {
  font-size: 15px;
  color: #24506c
}
.terano-redesign .tr-app-checks p {
  font-size: 13px;
  line-height: 1.9;
  margin-top: 8px
}
/* process */
.terano-redesign .tr-process {
  background: #fff !important
}
.terano-redesign .tr-steps {
  list-style: none;
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0
}
.terano-redesign .tr-steps li {
  flex: 1;
  min-width: 0;
  background: #edf5f5;
  padding: 17px 12px;
  border-top: 3px solid #70a6ae
}
.terano-redesign .tr-steps b {
  display: block;
  font-size: 27px;
  color: #5795a6;
  font-weight: 400
}
.terano-redesign .tr-steps h3 {
  font-size: 15px;
  color: #22536e;
  line-height: 1.5;
  margin: 5px 0 9px
}
.terano-redesign .tr-steps p {
  font-size: 12px;
  line-height: 1.9
}
.terano-redesign .tr-mini-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 21px;
  padding: 21px 25px;
  background: #e4f0f3;
  border-left: 5px solid #347b93
}
.terano-redesign .tr-mini-cta p {
  font-size: 14px;
  color: #2b506b;
  line-height: 1.7
}
.terano-redesign .tr-mini-cta a {
  font-size: 12px;
  color: #fff;
  background: #276e89;
  padding: 13px 18px;
  text-decoration: none;
  white-space: nowrap
}
@media(max-width:700px) {
  .terano-redesign .tr-section {
    padding: 44px 20px 48px
  }
  .terano-redesign .tr-hero {
    flex-direction: column
  }
  .terano-redesign .tr-hero-copy {
    width: 100%;
    padding: 40px 23px 28px
  }
  .terano-redesign .tr-hero-copy h1 {
    font-size: 35px
  }
  .terano-redesign .tr-hero-copy h2 {
    font-size: 18px
  }
  .terano-redesign .tr-hero-photo {
    width: 100%;
    padding: 12px;
    height: 190px
  }
  .terano-redesign .tr-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
  }
  .terano-redesign .tr-lead-split, .terano-redesign .tr-app-head {
    flex-direction: column;
    align-items: stretch;
    gap: 14px
  }
  .terano-redesign .tr-lead-list, .terano-redesign .tr-app-badge {
    flex: 0 1 auto;
    width: 100%
  }
  .terano-redesign .tr-lead-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 7px
  }
  .terano-redesign .tr-lead-list > div {
    flex: 1 0 48%;
    min-width: 0
  }
  .terano-redesign .tr-summary {
    padding: 16px 5px
  }
  .terano-redesign .tr-summary b {
    font-size: 21px
  }
  .terano-redesign .tr-summary small {
    font-size: 10px
  }
  .terano-redesign .tr-principles, .terano-redesign .tr-extra-features, .terano-redesign .tr-data-figures, .terano-redesign .tr-photos, .terano-redesign .tr-app-checks {
    flex-direction: column
  }
  .terano-redesign .tr-principle-visual {
    height: 360px
  }
  .terano-redesign .tr-flow {
    flex-direction: column;
    align-items: stretch;
    padding: 19px
  }
  .terano-redesign .tr-flow-heading {
    flex: 0 1 auto
  }
  .terano-redesign .tr-flow-heading h3 br {
    display: none
  }
  .terano-redesign .tr-flow ol {
    flex-wrap: wrap
  }
  .terano-redesign .tr-flow li {
    flex: 1 0 46%
  }
  .terano-redesign .tr-flow li:after {
    display: none
  }
  .terano-redesign .tr-data-head {
    padding: 18px;
    gap: 12px
  }
  .terano-redesign .tr-data-head h3 {
    font-size: 17px
  }
  .terano-redesign .tr-data-highlight {
    flex: 0 0 117px;
    padding-left: 10px
  }
  .terano-redesign .tr-data-highlight strong {
    font-size: 34px
  }
  .terano-redesign .tr-data-highlight span {
    font-size: 11px
  }
  .terano-redesign .tr-meter {
    padding: 16px 12px
  }
  .terano-redesign .tr-meter-line {
    gap: 7px
  }
  .terano-redesign .tr-meter-line > b {
    flex: 0 0 73px;
    font-size: 11px
  }
  .terano-redesign .tr-meter-line strong {
    flex: 0 0 42px;
    font-size: 15px
  }
  .terano-redesign .tr-data-figures img {
    height: auto;
    max-height: 270px
  }
  .terano-redesign .tr-photos figure {
    gap: 10px
  }
  .terano-redesign .tr-photos img {
    width: 125px;
    flex: 0 0 125px
  }
  .terano-redesign .tr-steps {
    flex-wrap: wrap
  }
  .terano-redesign .tr-steps li {
    flex: 1 0 46%
  }
  .terano-redesign .tr-mini-cta {
    flex-direction: column;
    align-items: stretch
  }
  .terano-redesign .tr-mini-cta a {
    text-align: center;
    white-space: normal
  }
}
/* PowerGuard visual redesign, extending the existing MS-RDK presentation system.
   Flexbox only. Scoped to energy-powerguard.html. */
.powerguard-redesign .pg-hero .ms-hero-copy h1 {
  font-size: 46px;
  letter-spacing: .01em
}
.powerguard-redesign .pg-hero-photo {
  padding: 30px 15px;
  background: linear-gradient(160deg, #e8eef5, #cbd8e1)
}
.powerguard-redesign .pg-hero-photo img {
  width: 100%;
  height: auto;
  max-height: 245px;
  object-fit: contain;
  filter: drop-shadow(0 13px 11px rgba(25, 44, 57, .13))
}
.powerguard-redesign .pg-principles img {
  height: 236px;
  object-fit: contain;
  background: #fff
}
.powerguard-redesign .pg-principles article {
  min-height: 0
}
.powerguard-redesign .pg-flow-panel .ms-flow-intro {
  flex: 0 0 158px
}
.powerguard-redesign .pg-data-lead {
  padding: 21px 25px;
  background: #eaf3f6;
  border-left: 5px solid #578b9c;
  margin-bottom: 19px
}
.powerguard-redesign .pg-data-lead span {
  font-size: 11px;
  color: #32818b;
  font-weight: bold;
  letter-spacing: .07em
}
.powerguard-redesign .pg-data-lead h3 {
  color: #204f70;
  font-size: 21px;
  margin: 5px 0 7px
}
.powerguard-redesign .pg-data-lead p {
  font-size: 13px;
  line-height: 1.9;
  color: #4b6572
}
.powerguard-redesign .pg-lab-panels {
  display: flex;
  gap: 16px;
  align-items: stretch
}
.powerguard-redesign .pg-lab-panels figure {
  flex: 1;
  min-width: 0;
  border: 1px solid #d7e5e9;
  background: #fff;
  margin: 0;
  padding: 14px 14px 12px
}
.powerguard-redesign .pg-lab-panels figure:first-child {
  flex: 1.1
}
.powerguard-redesign .pg-lab-panels img {
  width: 100%;
  height: 213px;
  object-fit: contain;
  display: block
}
.powerguard-redesign .pg-lab-panels figcaption {
  font-size: 11px;
  color: #526d7c;
  text-align: center;
  padding: 8px 0 1px
}
.powerguard-redesign .pg-caution {
  margin-top: 18px
}
.powerguard-redesign .pg-photo-row {
  display: flex;
  gap: 16px;
  margin-top: 20px
}
.powerguard-redesign .pg-photo-row figure {
  flex: 1;
  min-width: 0;
  margin: 0;
  background: #fff;
  border: 1px solid #d7e6e8
}
.powerguard-redesign .pg-photo-row img {
  display: block;
  width: 100%;
  height: 248px;
  object-fit: contain;
  background: #eef3f6;
  padding: 5px
}
.powerguard-redesign .pg-photo-row figcaption {
  display: block;
  padding: 13px 15px 16px
}
.powerguard-redesign .pg-photo-row figcaption b, .powerguard-redesign .pg-photo-row figcaption span {
  display: block
}
.powerguard-redesign .pg-photo-row figcaption b {
  font-size: 14px;
  color: #254f70
}
.powerguard-redesign .pg-photo-row figcaption span {
  font-size: 12px;
  color: #586f7a;
  line-height: 1.8;
  margin-top: 2px
}
.powerguard-redesign .pg-size-panel {
  background: #eaf3f5;
  padding: 25px 23px;
  margin-top: 24px;
  border-left: 4px solid #6aa8b1
}
.powerguard-redesign .pg-size-heading span {
  color: #4b9196;
  font-size: 11px;
  letter-spacing: .1em;
  font-weight: bold
}
.powerguard-redesign .pg-size-heading h3 {
  color: #204f71;
  font-size: 19px;
  margin: 4px 0 5px
}
.powerguard-redesign .pg-size-heading p {
  font-size: 12px;
  line-height: 1.85
}
.powerguard-redesign .pg-size-list {
  display: flex;
  gap: 7px;
  margin-top: 17px
}
.powerguard-redesign .pg-size-list span {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 13px 7px;
  background: #fff;
  border: 1px solid #d5e3e8
}
.powerguard-redesign .pg-size-list b {
  font-size: 12px;
  color: #5c8593
}
.powerguard-redesign .pg-size-list strong {
  font-family: Arial, "Noto Sans JP", sans-serif;
  color: #285b82;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5
}
.powerguard-redesign .pg-size-list small {
  font-size: 12px;
  margin-left: 2px
}
@media(max-width:760px) {
  .powerguard-redesign .pg-hero .ms-hero-copy h1 {
    font-size: 38px
  }
  .powerguard-redesign .pg-hero-photo img {
    max-height: 180px
  }
  .powerguard-redesign .pg-lab-panels, .powerguard-redesign .pg-photo-row {
    flex-direction: column
  }
  .powerguard-redesign .pg-lab-panels img {
    height: auto;
    max-height: 320px
  }
  .powerguard-redesign .pg-photo-row img {
    height: 225px
  }
}
@media(max-width:450px) {
  .powerguard-redesign .pg-size-panel {
    padding: 21px 12px
  }
  .powerguard-redesign .pg-size-list {
    gap: 3px
  }
  .powerguard-redesign .pg-size-list span {
    padding: 12px 2px
  }
  .powerguard-redesign .pg-size-list strong {
    font-size: 19px
  }
  .powerguard-redesign .pg-size-list small {
    font-size: 9px
  }
}
/* Narrow viewport: contain legacy footer navigation on this page. */
@media(max-width:650px) {
  body.powerguard-page-body #fnavi ul {
    width: 100% !important;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    box-sizing: border-box;
    padding: 8px 7px !important
  }
  body.powerguard-page-body #fnavi li {
    float: none;
    display: block
  }
  body.powerguard-page-body #fnavi li a {
    white-space: normal
  }
}
/* Proxヒートプロテクター：MS-RDKビジュアル版に合わせた個別調整 */
.prox-redesign .prox-hero .ms-hero-copy {
  width: 62%;
  padding-top: 46px
}
.prox-redesign .prox-hero .ms-hero-copy h1 {
  font-family: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  font-size: 35px;
  letter-spacing: -.035em;
  line-height: 1.35;
  margin: 9px 0 15px;
  white-space: normal
}
.prox-redesign .prox-hero .ms-hero-copy h2 {
  font-size: 21px
}
.prox-redesign .prox-hero-photo {
  width: 38%;
  background: linear-gradient(140deg, #e5edf3, #f8fbfb)
}
.prox-redesign .prox-hero-photo img {
  max-height: 380px;
  box-shadow: 0 8px 22px rgba(29, 63, 83, .13);
  object-fit: contain
}
.prox-redesign .ms-summary-strip b {
  font-size: 30px
}
.prox-redesign .prox-principles img {
  object-fit: contain;
  object-position: center center;
  background: #fff
}
.prox-redesign .prox-principles article:first-child img {
  border: 1px solid #e4ecee
}
.prox-redesign .prox-principles article:last-child img {
  max-width: 100%;
  padding: 14px 32px
}
.prox-redesign .prox-evidence-feature {
  /*display: flex;*/
  gap: 22px;
  margin: 22px 0 4px;
  align-items: stretch
}
.prox-redesign .prox-evidence-feature figure {
  /*flex: 1.2;*/
  margin: 0;
  min-width: 0;
  border: 1px solid #d9e5ea;
  padding: 13px;
  background: #fff
}
.prox-redesign .prox-evidence-feature figure img {
  display: block;
  width: 100%;
  height: 360px;
  object-fit: contain
}
.prox-redesign .prox-evidence-feature figure figcaption {
  text-align: center;
  color: #55717b;
  font-size: 12px;
  line-height: 1.7;
  margin-top: 8px
}
.prox-redesign .prox-evidence-explain {
  /*flex: 1;*/
  min-width: 0;
  padding: 19px 18px;
  background: #eef5f8;
  border-left: 4px solid #70a8b7
}
.prox-redesign .prox-evidence-explain span {
  font-size: 12px;
  font-weight: 700;
  color: #547b91
}
.prox-redesign .prox-evidence-explain h3 {
  font-size: 20px;
  color: #1f4c6d;
  line-height: 1.5;
  margin: 7px 0 13px
}
.prox-redesign .prox-evidence-explain p {
  font-size: 13px;
  line-height: 1.9;
  margin-bottom: 9px
}
.prox-redesign .prox-loc-number b {
  font-size: 23px;
  letter-spacing: -.02em;
  white-space: normal
}
.prox-redesign .prox-photo-reasons img {
  width: 142px;
  height: 136px;
  flex-basis: 142px;
  object-fit: cover
}
.prox-redesign .prox-install-photos img {
  height: 180px
}
.prox-redesign img {
  max-width: 100%
}
@media(max-width:760px) {
  .prox-redesign .prox-hero .ms-hero-copy {
    width: 100%;
    padding: 37px 27px 26px
  }
  .prox-redesign .prox-hero .ms-hero-copy h1 {
    font-size: 29px
  }
  .prox-redesign .prox-hero-photo {
    width: 100%;
    padding: 21px;
    background: #e8f0f4
  }
  .prox-redesign .prox-hero-photo img {
    max-height: 230px
  }
  .prox-redesign .prox-evidence-feature {
    flex-direction: column
  }
  .prox-redesign .prox-evidence-feature figure img {
    height: auto;
    max-height: 340px
  }
  .prox-redesign .prox-principles article:last-child img {
    padding: 10px
  }
  .prox-redesign .prox-loc-number b {
    font-size: 22px
  }
}
@media(max-width:480px) {
  .prox-redesign .prox-hero .ms-hero-copy h1 {
    font-size: 26px
  }
  .prox-redesign .ms-summary-strip b {
    font-size: 23px
  }
  .prox-redesign .prox-photo-reasons img {
    width: 115px;
    height: 125px;
    flex-basis: 115px
  }
}
/* コンテンツの幅を超えないよう旧ナビも調整 */
@media(max-width:650px) {
  body.prox-page-body #fnavi ul {
    width: 100% !important;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    box-sizing: border-box;
    padding: 8px 7px !important
  }
  body.prox-page-body #fnavi li {
    float: none;
    display: block
  }
  body.prox-page-body #fnavi li a {
    white-space: normal
  }
}
/* === ecowin HYBRID graphic detail layout: same system as MS-RDK; Flexbox only === */
.ecowin-redesign .ec-hero .ms-hero-copy {
  width: 60%
}
.ecowin-redesign .ec-hero .ms-hero-photo {
  width: 40%;
  padding: 0;
  background: #dbe7ee
}
.ecowin-redesign .ec-hero .ms-hero-photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: 45% center;
  filter: none
}
.ecowin-redesign .ec-hero .ms-hero-copy h1 {
  font-size: 44px;
  letter-spacing: .01em;
  white-space: nowrap
}
.ecowin-redesign .ec-hero .ms-hero-copy h1 span {
  font-size: .82em
}
.ecowin-redesign .ec-summary-strip b {
  font-size: 22px;
  letter-spacing: 0
}
.ecowin-redesign .ec-summary-strip b span {
  font-size: 16px
}
.ecowin-redesign .ec-principles article > img {
  height: 235px;
  object-fit: contain
}
.ecowin-redesign .ec-principle-duo {
  display: flex;
  gap: 8px;
  height: 235px;
  justify-content: center;
  overflow: hidden
}
.ecowin-redesign .ec-principle-duo img {
  width: 48%;
  height: 100%;
  object-fit: contain
}
.ecowin-redesign .ec-data-emblem {
  flex: 0 0 170px;
  border-left: 1px solid #b7cad4;
  text-align: center;
  padding: 8px 0 8px 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px
}
.ecowin-redesign .ec-data-emblem strong {
  font-size: 23px;
  color: #276782
}
.ecowin-redesign .ec-data-emblem span {
  color: #83aab7;
  font-size: 22px
}
.ecowin-redesign .ec-data-emblem small {
  display: block;
  width: 100%;
  font-size: 11px;
  color: #657d8b
}
.ecowin-redesign .ec-evidence-panel {
  display: flex;
  gap: 19px;
  align-items: stretch;
  padding: 19px 0 8px
}
.ecowin-redesign .ec-evidence-panel figure {
  flex: 1.15;
  min-width: 0;
  margin: 0;
  background: #f3f7f8;
  border: 1px solid #dae7ea;
  padding: 14px
}
.ecowin-redesign .ec-evidence-panel img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: contain
}
.ecowin-redesign .ec-evidence-panel figcaption {
  font-size: 11px;
  color: #597483;
  line-height: 1.7;
  padding-top: 10px
}
.ecowin-redesign .ec-evidence-text {
  flex: .9;
  background: #f1f7f8;
  padding: 21px 20px;
  min-width: 0
}
.ecowin-redesign .ec-evidence-text span {
  color: #478b9b;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: .15em
}
.ecowin-redesign .ec-evidence-text h3 {
  color: #255773;
  font-size: 18px;
  margin: 9px 0 12px;
  line-height: 1.55
}
.ecowin-redesign .ec-evidence-text p {
  font-size: 13px;
  line-height: 1.85;
  margin: 9px 0
}
.ecowin-redesign .ec-application .ms-loc-number b {
  font-size: 26px;
  white-space: normal
}
.ecowin-redesign .ec-install-photos img {
  object-fit: cover;
  object-position: center center
}
.ecowin-redesign .ec-photo-reasons img {
  object-fit: cover;
  object-position: center
}
@media(max-width:960px) {
  body.ecowin-page-body header .stage {
    width: calc(100% - 24px);
    max-width: 930px
  }
  body.ecowin-page-body header .logo {
    margin-right: 0;
    max-width: 60%;
    height: auto
  }
  #contents.ecowin-content-outer .stage {
    width: 100%;
    max-width: 940px
  }
}
@media(max-width:760px) {
  .ecowin-redesign .ec-hero .ms-hero-copy {
    width: 100%
  }
  .ecowin-redesign .ec-hero .ms-hero-photo {
    width: 100%;
    height: 235px
  }
  .ecowin-redesign .ec-hero .ms-hero-photo img {
    object-position: center 35%
  }
  .ecowin-redesign .ec-hero .ms-hero-copy h1 {
    font-size: 36px;
    white-space: normal
  }
  .ecowin-redesign .ec-principle-duo {
    height: 240px
  }
  .ecowin-redesign .ec-evidence-panel {
    flex-direction: column
  }
  .ecowin-redesign .ec-data-emblem {
    flex: 0 1 auto;
    border-left: 0;
    border-top: 1px solid #b7cad4;
    padding: 12px 0 4px
  }
  .ecowin-redesign .ec-evidence-panel img {
    height: 200px
  }
}
@media(max-width:650px) {
  body.ecowin-page-body header .stage {
    padding-bottom: 12px;
    overflow: hidden
  }
  body.ecowin-page-body header .logo {
    display: block;
    float: none;
    max-width: 100%;
    width: 290px;
    height: auto;
    margin: 4px auto 7px
  }
  body.ecowin-page-body header h1 {
    text-align: center;
    font-size: 10px
  }
  body.ecowin-page-body header .stage > img, body.ecowin-page-body header .stage > a img:not(.logo) {
    max-width: 90%;
    height: auto
  }
  body.ecowin-page-body header .stage > a:not(:first-of-type) {
    display: inline-block
  }
}
@media(max-width:650px) {
  body.ecowin-page-body #fnavi {
    width: 100%
  }
  body.ecowin-page-body #fnavi ul {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    justify-content: center;
    padding: 10px 8px
  }
  body.ecowin-page-body #fnavi li {
    float: none;
    white-space: normal;
    margin: 2px 0
  }
}