/* ---------------------------------------------
  ページ内リンク位置
--------------------------------------------- */
.p-power-guide main section[id] {
  scroll-margin-block-start: calc(var(--header-h, var(--dist-64)) + var(--dist-16));
}

/* ---------------------------------------------
  日本語の折り返し
--------------------------------------------- */
.p-power-guide main {
  line-break: strict;
  word-break: normal;
  word-break: auto-phrase;
}

.p-power-guide main :where(h1, h2, h3, p, li) {
  text-wrap: pretty;
}

@media screen and (min-width: 1024px) {
  .p-power-guide__heading-phrase {
    white-space: nowrap;
  }
}

/* ---------------------------------------------
  広告表示・ヒーロー
--------------------------------------------- */
.p-power-guide__disclosure {
  padding-inline-start: var(--dist-12);
  margin-block-start: var(--dist-16);
  margin-inline: auto;
  border-inline-start: var(--ui-border-3) var(--ui-border-solid) var(--color-accent);
}

.p-power-guide__disclosure p {
  margin: 0;
  overflow-wrap: anywhere;
}

.p-power-guide__hero-copy {
  justify-items: center;
  inline-size: 100%;
  min-inline-size: 0;
  margin-inline: auto;
  text-align: center;
}

.p-power-guide__hero-copy .c-heading__eyebrow {
  justify-content: center;
  max-inline-size: 100%;
  margin-inline: auto;
}

.p-power-guide__hero-copy .c-lead-copy {
  max-inline-size: 32em;
  margin-inline: auto;
  text-align: center;
  line-break: strict;
  text-wrap: balance;
}

.p-power-guide__hero-copy .c-heading__title {
  max-inline-size: 21em;
  margin-inline: auto;
  text-align: center;
  line-break: strict;
  word-break: normal;
  word-break: auto-phrase;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.p-power-guide__hero-copy .c-heading__lead {
  max-inline-size: 44rem;
  margin-inline: auto;
  text-align: center;
  line-break: strict;
  word-break: normal;
  word-break: auto-phrase;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.p-power-guide__hero-actions {
  justify-content: center;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.p-power-guide__hero-benefits {
  inline-size: 100%;
  margin-inline: auto;
}

/* ---------------------------------------------
  A8計測画像
--------------------------------------------- */
.p-power-guide figure .a8ad > img[width='1'][height='1'] {
  inline-size: 1px;
  block-size: 1px;
}

/* ---------------------------------------------
  アフィリエイトリンク
--------------------------------------------- */
.p-power-guide__affiliate-link {
  position: relative;
  display: inline-flex;
  max-inline-size: 100%;
}

.p-power-guide__affiliate-link > img {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
}

.p-power-guide__affiliate-link--button > a,
.p-power-guide__affiliate-link--button > a:link,
.p-power-guide__affiliate-link--button > a:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 14rem;
  max-inline-size: 100%;
  min-block-size: var(--dist-48);
  padding: var(--dist-12) var(--dist-20);
  font-size: var(--ui-font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  color: var(--ui-on-accent);
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-decoration: none;
  background-color: var(--color-accent);
  border: var(--ui-border-1) var(--ui-border-solid) var(--color-accent);
  border-radius: var(--ui-radius);
  box-shadow: var(--shadow-2);
  transition:
    background-color var(--dur-200) var(--ease-standard),
    filter var(--dur-200) var(--ease-standard),
    box-shadow var(--dur-200) var(--ease-standard);
}

.p-power-guide__affiliate-link--button > a:focus-visible,
.p-power-guide__affiliate-link--nav > a:focus-visible {
  outline: none;
  box-shadow: var(--ui-focus-ring);
}

.site-nav .p-power-guide__affiliate-link--nav > a {
  min-block-size: var(--size-touch-target-md);
  padding-block: var(--dist-8);
  padding-inline: var(--dist-16);
  font-weight: var(--font-weight-bold);
  color: var(--header-nav-cta-fg);
  background-color: var(--header-nav-cta-bg);
  border-color: transparent;
}

/* ---------------------------------------------
  コンテンツグリッド・カード
--------------------------------------------- */
.p-power-guide__solar-card h3 {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.p-power-guide__capacity-grid,
.p-power-guide__solar-grid,
.p-power-guide__official-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dist-24);
  margin-inline: auto;
}

.p-power-guide__capacity-card,
.p-power-guide__solar-card,
.p-power-guide__official-card {
  display: grid;
  align-content: start;
  gap: var(--dist-16);
  min-inline-size: 0;
  padding: var(--dist-32);
  background-color: var(--color-surface);
  border: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
  border-radius: var(--ui-radius-16);
  box-shadow: var(--shadow-1);
}

.p-power-guide__capacity-card > *,
.p-power-guide__solar-card > *,
.p-power-guide__official-card > * {
  margin-block: 0;
}

@media screen and (min-width: 768px) {
  .p-power-guide__official-grid > .p-power-guide__official-card:only-child {
    grid-column: 1 / -1;
    justify-self: center;
    inline-size: calc((100% - var(--dist-24)) / 2);
  }
}

.p-power-guide__capacity-index {
  font-size: var(--ui-font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
  letter-spacing: var(--ui-letter-spacing-wide);
}

.p-power-guide__capacity-range {
  font-size: var(--ui-font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--ui-line-height-compact);
  color: var(--color-text-heading);
}

.p-power-guide__capacity-specs {
  display: grid;
  grid-template-columns: minmax(5rem, auto) minmax(0, 1fr);
  gap: var(--dist-8) var(--dist-16);
  padding-block-start: var(--dist-16);
  margin: 0;
  border-block-start: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
}

.p-power-guide__capacity-specs dt {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
}

.p-power-guide__capacity-specs dd {
  margin: 0;
}

.p-power-guide__section-action {
  display: flex;
  justify-content: center;
  margin-inline: auto;
}

.p-power-guide__check-list {
  display: grid;
  gap: var(--dist-8);
  padding: 0;
  margin: 0;
  list-style: none;
}

.p-power-guide__check-list li {
  position: relative;
  padding-inline-start: var(--dist-24);
}

.p-power-guide__check-list li::before {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
  content: '✓';
}

.p-power-guide__notice {
  padding: var(--dist-16) var(--dist-20);
  margin-inline: auto;
  color: var(--ui-text-muted);
  background-color: var(--color-surface);
  border: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
  border-radius: var(--ui-radius);
}

.p-power-guide__notice strong {
  color: var(--color-text-heading);
}

.p-power-guide__related {
  display: grid;
  gap: var(--dist-24);
  margin-inline: auto;
}

.p-power-guide__related h3 {
  margin: 0;
}

.p-power-guide__source-link {
  align-self: end;
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
  text-underline-offset: var(--dist-4);
}

.p-power-guide__source-link::after {
  margin-inline-start: var(--dist-6);
  content: '↗';
}

/* ---------------------------------------------
  シリーズ比較
--------------------------------------------- */
.p-power-guide__series-compare {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ui-border-1);
  padding: var(--ui-border-1);
  margin-inline: auto;
  background-color: var(--color-border);
}

.p-power-guide__series-item {
  display: grid;
  grid-template-rows: 22rem auto;
  gap: var(--dist-24);
  min-inline-size: 0;
  padding: var(--dist-32);
  background-color: var(--color-surface);
}

.p-power-guide__series-item > * {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.p-power-guide__series-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: end center;
  min-inline-size: 0;
  max-inline-size: 100%;
  margin: 0;
}

.p-power-guide__series-media .a8ad,
.p-power-guide__series-media .a8ad > a {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: end center;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  block-size: 100%;
}

.p-power-guide__series-media .a8ad > a > img {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  object-fit: contain;
}

.p-power-guide__series-media .a8ad > img[width='1'][height='1'] {
  inline-size: 1px;
  block-size: 1px;
}

.p-power-guide__series-media figcaption {
  max-inline-size: 100%;
  margin-block-start: var(--dist-8);
  font-size: var(--ui-font-size-sm);
  color: var(--ui-text-muted);
  text-align: center;
  overflow-wrap: anywhere;
}

.p-power-guide__series-media--compact .a8ad > a > img {
  max-inline-size: 18rem;
}

.p-power-guide__series-media--large .a8ad > a > img {
  max-inline-size: 22rem;
}

.p-power-guide__series-item h3 {
  margin: 0;
}

.p-power-guide__series-note {
  margin-inline: auto;
}

.p-power-guide__series-status {
  display: grid;
  place-items: center;
  block-size: 100%;
  min-block-size: 14rem;
  padding: var(--dist-24);
  margin: 0;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  text-align: center;
  background-color: var(--ui-bg-soft);
  border: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
}

/* ---------------------------------------------
  横幅制御
  minmax(0, 1fr) で表・広告素材の最小内容幅による
  小画面でのページ全体の横伸びを防ぐ。
--------------------------------------------- */
.p-power-guide .c-comparison-table {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.p-power-guide .c-comparison-table__scroll {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.p-power-guide .l-container.c-stack {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------------------------------------------
  レスポンシブ
--------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .p-power-guide__affiliate-link--button > a:hover {
    filter: brightness(0.96);
  }

  .site-nav .p-power-guide__affiliate-link--nav > a:hover {
    color: var(--header-nav-cta-fg);
    background-color: var(--header-nav-cta-bg-hover);
    border-color: transparent;
  }
}

@media screen and (width <= 1279px) {
  .p-power-guide__hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--dist-32);
  }

  .p-power-guide__hero-media {
    justify-self: center;
    max-inline-size: 32rem;
  }

  .p-power-guide__hero-media figcaption {
    margin-block-start: calc(var(--dist-48) * -1);
  }

  .p-power-guide__hero-grid .c-heading__lead {
    max-inline-size: 36rem;
  }
}

@media screen and (width <= 1279px) {
  .site-header {
    --header-inner-gap: var(--dist-8);
    --header-inner-pad-inline: var(--dist-16);
    --header-nav-col-gap: var(--dist-8);
    --header-nav-link-padding-inline: var(--dist-6);
  }

  .site-nav .p-power-guide__affiliate-link--nav > a {
    padding-inline: var(--dist-12);
  }
}

@media screen and (min-width: 768px) {
  .p-power-guide .c-benefit-list__title,
  .p-power-guide .c-benefit-list__text {
    justify-self: center;
    max-inline-size: 100%;
    overflow-wrap: anywhere;
    text-align: start;
  }
}

@media screen and (width <= 1023px) {
  .p-power-guide__hero-media {
    justify-self: center;
    max-inline-size: 32rem;
  }

  .p-power-guide__hero-grid .c-heading__lead {
    max-inline-size: 36rem;
  }

  .p-power-guide__series-compare {
    grid-template-columns: minmax(0, 1fr);
  }

  .p-power-guide__series-item {
    grid-template-rows: auto auto;
  }
}

@media screen and (width <= 767px) {
  .p-power-guide__capacity-grid,
  .p-power-guide__solar-grid,
  .p-power-guide__official-grid {
    grid-template-columns: 1fr;
  }

  .p-power-guide__capacity-card,
  .p-power-guide__solar-card,
  .p-power-guide__official-card {
    padding: var(--dist-24);
  }

  .p-power-guide__capacity-specs {
    grid-template-columns: 1fr;
  }

  .p-power-guide__series-compare {
    grid-template-columns: minmax(0, 1fr);
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .p-power-guide__series-item {
    grid-template-rows: auto auto;
    padding: var(--dist-24);
  }

  .p-power-guide__series-media .a8ad,
  .p-power-guide__series-media .a8ad > a {
    block-size: auto;
  }

  .p-power-guide__series-media--compact .a8ad > a > img {
    max-inline-size: 15rem;
  }

  .p-power-guide__series-media--large .a8ad > a > img {
    max-inline-size: 18rem;
  }

  .p-power-guide__cta-actions {
    grid-template-columns: 1fr;
    inline-size: 100%;
    max-inline-size: 20rem;
    margin-inline: auto;
  }

  .p-power-guide__cta-actions > .c-button {
    inline-size: 100%;
    max-inline-size: none;
    white-space: nowrap;
  }

  .p-power-guide__cta-actions > .p-power-guide__affiliate-link,
  .p-power-guide__cta-actions > .p-power-guide__affiliate-link > a {
    inline-size: 100%;
    max-inline-size: none;
  }
}

@media screen and (width <= 479px) {
  .p-power-guide__hero-media {
    margin-block: var(--dist-16);
  }

  .p-power-guide__hero-media figcaption,
  .p-power-guide__series-media figcaption {
    inline-size: max-content;
    max-inline-size: calc(100% - var(--dist-32));
    margin-inline: auto;
    text-align: left;
  }

  .p-power-guide__hero-media figcaption {
    inline-size: 100%;
    max-inline-size: 100%;
    margin-block-start: calc(var(--dist-32) * -1);
    margin-inline: auto;
    text-align: left;
  }
}

@media screen and (width <= 359px) {
  .p-power-guide__cta-actions .c-button,
  .p-power-guide__cta-actions .p-power-guide__affiliate-link > a {
    padding-inline: var(--dist-16);
    font-size: 0.875rem;
  }
}

/* ---------------------------------------------
  ヒーロー：スマートフォン
--------------------------------------------- */
@media screen and (width <= 479px) {
  .p-power-guide__hero-copy .c-heading__title,
  .p-power-guide__hero-copy .c-heading__lead {
    max-inline-size: 100%;
  }

  .p-power-guide__hero-copy .c-heading__lead {
    text-align: start;
    text-wrap: wrap;
  }
}

/* ---------------------------------------------
  ヒーロー：最小幅付近
--------------------------------------------- */
@media screen and (width <= 359px) {
  .p-power-guide__hero-actions > .c-button,
  .p-power-guide__hero-actions > .p-power-guide__affiliate-link > a {
    padding-inline: var(--dist-16);
    font-size: var(--ui-font-size-sm);
  }
}

/* ---------------------------------------------
  情報上の強調はprimaryへ変更
--------------------------------------------- */
.p-power-guide__hero-copy .c-lead-copy__em,
#first-check .c-lead-copy__em,
.p-power-guide__capacity-index,
.p-power-guide__check-list li::before,
.p-power-guide__source-link {
  color: var(--color-primary);
}

/* ---------------------------------------------
  PR・注意書きは中立化
--------------------------------------------- */
.p-power-guide__disclosure,
.p-power-guide__notice {
  border-inline-start-color: var(--color-border);
}

/* ---------------------------------------------
  benefitアイコンは補助情報として中立化
--------------------------------------------- */
.p-power-guide__hero-benefits .c-benefit-list__icon {
  color: var(--color-primary);
  background-color: var(--ui-bg-soft);
  border: var(--ui-border-1) var(--ui-border-solid) var(--color-border);
}

/* ---------------------------------------------
  ドロワーナビ調整
--------------------------------------------- */
@media screen and (width <= 1159px) {
  .p-power-guide .site-header.site-header--drawer:not(.site-header--drawer-wide) .site-nav > ul {
    gap: var(--dist-12);
  }

  .p-power-guide
    .site-header.site-header--drawer:not(.site-header--drawer-wide)
    .site-nav
    > ul
    > li {
    padding-block-end: 0;
  }

  .p-power-guide
    .site-header.site-header--drawer:not(.site-header--drawer-wide)
    .site-nav
    > ul
    > li::after {
    inset-block-end: 0;
    inset-inline: var(--dist-16);
    block-size: 1px;
    border-radius: 0;
  }

  .p-power-guide
    .site-header.site-header--drawer:not(.site-header--drawer-wide)
    .site-nav
    > ul
    > li
    > a {
    padding-block: var(--dist-16);
    padding-inline: var(--dist-24);
  }

  .p-power-guide
    .site-header.site-header--drawer:not(.site-header--drawer-wide)
    .site-nav
    > ul
    > li:has(.p-power-guide__affiliate-link--nav) {
    margin-block-start: var(--dist-16);
  }

  .p-power-guide .site-header.site-header--drawer .p-power-guide__affiliate-link--nav {
    display: flex;
    inline-size: 100%;
    min-inline-size: 0;
  }

  .p-power-guide .site-header.site-header--drawer .p-power-guide__affiliate-link--nav > a {
    inline-size: 100%;
    min-inline-size: 0;
    padding-block: var(--dist-12);
    padding-inline: var(--dist-16);
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
    border-radius: var(--ui-radius-pill);
  }

  /* ページ側のマスキング */
  .p-power-guide .site-nav-overlay {
    background-color: var(--ui-overlay-strong);
  }

  .p-power-guide__affiliate-link--button > a,
  .p-power-guide__affiliate-link--button > a:link,
  .p-power-guide__affiliate-link--button > a:visited {
    text-align: center;
  }
}

@media screen and (width <= 767px) {
  .p-power-guide .p-power-guide__hero-actions .c-button {
    inline-size: auto;
  }
}