@charset "UTF-8";

/*-------------------------------------------------------------------------

トップページ

-------------------------------------------------------------------------*/

/* ファーストビュー */
.firstview-section {
  position: relative;
}

.firstview-progress {
  width: 100%;
  height: 0.3rem;
  background-color: var(--color-bg-dark);
  overflow: hidden;
}

.firstview-progress-bar {
  width: 0%;
  height: 100%;
  background-color: var(--color-main);
}

.firstview-swiper {
  width: 100%;
}

.firstview-swiper .swiper-slide {
  background-color: #000;
}

.firstview-link {
  display: block;
}

.firstview-img-wrap,
.firstview-img {
  width: 100%;
  height: auto;
  display: block;
}

.firstview-fv02-slide--pc {
  display: none;
}

@media (min-width: 960px) {
  .firstview-fv02-slide--pc {
    display: block;
  }

  .firstview-fv02-slide--under-pc {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .firstview-progress-bar {
    transition: none;
  }
}

/* お知らせ */
.top-news-section-inner {
  display: flex;
  flex-direction: column;
}

.top-news-list {
  margin-bottom: 7rem;
}

.news-item {
  border-bottom: 1px solid var(--color-border);
}

.news-item:first-child {
  border-top: 1px solid var(--color-border);
}

.news-link {
  padding: 2.4rem 2.05128205128vw;
}

.news-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.6rem;
}

.news-date {
  display: block;
  margin-bottom: 0.8rem;
}

.news-title {
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.news-link-arrow {
  width: 4rem;
  height: 4rem;
}

@media (min-width: 960px) {
  .top-news-section-inner {
    display: grid;
    grid-template-areas:
      "heading list"
      "button  list"
      ".       list";
    column-gap: 4rem;
    align-items: start;
  }

  .top-news-heading {
    grid-area: heading;
  }

  .top-news-button-wrap {
    grid-area: button;
    text-align: left;
  }

  .top-news-list {
    grid-area: list;
    margin-bottom: 0;
  }

  .news-link {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    padding: 3rem 1.5rem;
  }

  .news-date {
    margin-bottom: 0;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1.5;
  }
}

/*-------------------------------------------------------------------------

お知らせ（一覧ページ）

-------------------------------------------------------------------------*/
.news-list {
  margin-bottom: 5rem;
}

/* 製品シリーズ一覧 */
.series-section {
  position: relative;
  overflow: hidden;
  padding: 10rem var(--section-side-space) 12rem;
}

.series-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.series-bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.series-bg.is-active {
  opacity: 1;
}

.series-bg[data-series="lita"] {
  background-image: url("../img/top/lita-series-bg.webp");
}

.series-bg[data-series="research"] {
  background-image: url("../img/top/research-series-bg.webp");
  transform: scale(1.05);
}

.series-bg[data-series="medical"] {
  background-image: url("../img/top/medical-series-bg.webp");
}

.series-content {
  position: relative;
  /* series-bg-wrapの上ということを明示 */
  z-index: 1;
}

.series-meta-wrap {
  display: grid;
  margin-bottom: 2.2rem;
}

.series-meta {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.45s ease,
    visibility 0.45s ease;
  pointer-events: none;
}

.series-meta.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.series-title {
  text-align: center;
  margin-bottom: 2rem;
}

.series-logo {
  max-width: 45rem;
  width: 100%;
  height: auto;
}

.series-catchcopy {
  font-size: 1.8rem;
  color: var(--color-main-dark);
  letter-spacing: 0.1em;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.8rem;
  margin-bottom: 1.6rem;
}

.series-catchcopy::before {
  content: "";
  display: inline-block;
  background-image: var(--icon-limitless);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: var(--icon-limitless-width);
  height: var(--icon-limitless-height);
  flex-shrink: 0;
  margin-top: 0.2em;
}

.series-text br {
  display: none;
}

/* なくてもいいが、SPカルーセルを画面幅基準にするための明示 */
.series-section.is-sp-mode .series-products-swiper {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.series-section.is-sp-mode .series-products-item {
  width: 31rem;
  max-width: 100%;
}

.series-products-caption {
  display: none;
}

.series-products-item-inner {
  background-color: var(--color-white);
  padding: 3rem 5rem 4rem;
  border-radius: 1rem;
  box-shadow: 0 0 2.6rem 0 rgba(0, 0, 0, 0.06);
}

.series-products-img-wrap {
  display: grid;
  place-items: center;
  margin-bottom: 1.2rem;
}

.series-products-img {
  width: 23rem;
  max-width: 100%;
  height: auto;
}

.series-products-link-item:not(:last-child) {
  margin-bottom: 1rem;
}

.series-products-link {
  width: 100%;
  justify-content: space-between;
}

.series-section.is-sp-mode .series-products-swiper {
  overflow: visible;
}

.swiper-wrapper {
  align-items: stretch;
}

/* PC: シリーズ内の製品を横並びグリッド表示 */
.series-products-track {
  display: grid;
  gap: 2.4rem;
}

.series-section.is-pc-mode .series-products-track {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

/* ドット＋インジケーター（共通） */
.swiper-pagination-prev-button,
.swiper-pagination-next-button {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: 100%;
  background: var(--gradient-main);
}

.swiper-pagination-prev-button::before,
.swiper-pagination-next-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1px;
  background-color: var(--color-white);
  transform: translate(-50%, -50%);
}

.swiper-pagination-prev-button::after,
.swiper-pagination-next-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  box-sizing: border-box;
  border-top: 1px solid var(--color-white);
  border-right: 1px solid var(--color-white);
  transform: rotate(45deg);
  transform-origin: top right;
}

.series-products-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

.series-products-bullet {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  background-color: var(--color-border);
}

.series-products-bullet.is-active {
  background-color: var(--color-main);
}

/* SP版ドット＋インジケーター */
.swiper-pagination-area--sp {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.6rem;
  margin-bottom: 2.2rem;
}

.swiper-pagination-prev-button--sp,
.swiper-pagination-next-button--sp {
  position: relative;
}

.swiper-pagination-prev-button--sp {
  transform: rotate(-180deg);
}

/* PC版はSPでは非表示 */
.series-products-pagination--pc,
.swiper-pagination-prev-button--pc,
.swiper-pagination-next-button--pc {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .series-bg,
  .series-meta {
    transition: none;
  }
}

@media (min-width: 768px) {
  .series-text {
    text-align: center;
  }

  .series-text br {
    display: inline;
  }
}

@media (min-width: 960px) {
  .series-section {
    padding: 12rem var(--section-side-space) 14rem;
  }

  .series-content {
    max-width: 105rem;
    margin-inline: auto;
  }

  /* ボタン配置の基準（隣スライドのクリップとは分離） */
  .series-products-stage {
    position: relative;
  }

  /* 隣シリーズのスライドだけ切る。ボタンは stage 側なので隠れない */
  .series-content .series-products-swiper {
    overflow: hidden;
  }

  /* 影のぼかし分をスライド内に確保し、親の overflow で切られないようにする */
  .series-section.is-pc-mode .swiper-slide {
    padding: var(--swiper-pagination-prev-button-position);
  }

  .series-section.is-pc-mode .series-products-track {
    max-width: 105rem;
    margin-inline: auto;
  }

  .swiper-pagination-area--sp {
    display: none;
  }

  .series-products-pagination--pc {
    display: flex;
    gap: 1rem;
    position: absolute;
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
  }

  .swiper-pagination-prev-button--pc,
  .swiper-pagination-next-button--pc {
    display: block;
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 8rem;
    height: 8rem;
  }

  /* slide padding(2.6rem) に合わせ、track 両端の中央へ */
  .swiper-pagination-prev-button--pc {
    left: var(--swiper-pagination-prev-button-position);
    transform: translate(-50%, 0%) rotate(-180deg);
  }

  .swiper-pagination-next-button--pc {
    right: var(--swiper-pagination-prev-button-position);
    transform: translate(50%, 0%);
  }

  .swiper-pagination-prev-button--pc::before,
  .swiper-pagination-next-button--pc::before {
    width: 3.2rem;
    height: 2px;
  }

  .swiper-pagination-prev-button--pc::after,
  .swiper-pagination-next-button--pc::after {
    left: 53%;
    width: 1.5rem;
    height: 1.5rem;
    border-top-width: 2px;
    border-right-width: 2px;
  }

  .series-products-item {
    counter-increment: number;
  }

  .series-products-item-inner {
    padding: 3rem min(3.125vw, 5rem) 4rem;
  }

  .series-products-caption {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    margin-bottom: 2rem;
  }

  .series-products-caption-text {
    display: block;
    position: relative;
    font-size: 3rem;
    color: var(--color-heading);
    margin-bottom: 0.6rem;
  }

  .series-products-caption-text::before {
    position: absolute;
    top: -4rem;
    left: -1.7rem;
    display: inline-block;
    content: "0" counter(number);
    font-size: 4.8rem;
    color: var(--color-main);
    opacity: 0.4;
  }

  .series-products-caption-arrow {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 1.2rem solid transparent;
    border-left: 1.2rem solid transparent;
    border-top: 2rem solid var(--color-main);
    border-bottom: 0;
  }
}

/* バナー */
.banner-section {
  padding: 10rem var(--section-side-space);
  background-color: var(--color-white);
}

.banner-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 36rem), 36rem));
  justify-content: center;
  place-items: center;
  gap: 1.6rem;
  max-width: calc(36rem * 2 + 1.6rem);
  margin-inline: auto;
}

.banner-link {
  display: block;
}

.banner-img {
  width: 100%;
  height: auto;
  display: block;
}

/* 水素の力は無限大なのです */
.hydrogen-power-section {
  --hydrogen-wave-height: 4.8rem;
  position: relative;
  z-index: 1;
  background: transparent;
  padding: 9rem 0 16rem;
}

.hydrogen-power-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--gradient-main);
  -webkit-mask-image:
    url("../img/top/hydrogen-power-section-wave-mask.svg"),
    linear-gradient(#fff, #fff),
    url("../img/top/hydrogen-power-section-wave-mask-bottom.svg");
  mask-image:
    url("../img/top/hydrogen-power-section-wave-mask.svg"),
    linear-gradient(#fff, #fff),
    url("../img/top/hydrogen-power-section-wave-mask-bottom.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size:
    140% var(--hydrogen-wave-height),
    100% calc(100% - var(--hydrogen-wave-height) * 2 + 2px),
    140% var(--hydrogen-wave-height);
  mask-size:
    140% var(--hydrogen-wave-height),
    100% calc(100% - var(--hydrogen-wave-height) * 2 + 2px),
    140% var(--hydrogen-wave-height);
  -webkit-mask-position:
    50% top,
    center,
    50% bottom;
  mask-position:
    50% top,
    center,
    50% bottom;
  -webkit-mask-composite: source-over;
  mask-composite: add;
  animation: hydrogen-wave-sway 6s ease-in-out infinite alternate;
}

@keyframes hydrogen-wave-sway {
  from {
    -webkit-mask-position:
      30% top,
      center,
      70% bottom;
    mask-position:
      30% top,
      center,
      70% bottom;
  }
  to {
    -webkit-mask-position:
      70% top,
      center,
      30% bottom;
    mask-position:
      70% top,
      center,
      30% bottom;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hydrogen-power-bg {
    animation: none;
  }
}

/* 泡アニメーション*/
.hydrogen-power-bubbles {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hydrogen-power-bubble {
  position: absolute;
  bottom: -6rem;
  border-radius: 50%;
  pointer-events: none;
  background-color: transparent;
  box-shadow: inset 0 0 1.2rem rgba(255, 255, 255, 0.4);
  animation: hydrogen-power-bubble-rise 8s linear forwards;
}

.hydrogen-power-bubble::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: scale(0.25) translate(-70%, -70%);
  background: radial-gradient(rgba(255, 255, 255, 0.55), transparent);
  border-radius: 50%;
}

@keyframes hydrogen-power-bubble-rise {
  0% {
    transform: translateY(0);
    opacity: 0.9;
  }

  85% {
    opacity: 0.9;
  }

  100% {
    transform: translateY(calc(-1 * var(--hydrogen-bubble-distance, 100vh)));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hydrogen-power-bubbles {
    display: none;
  }
}

.hydrogen-power-inner {
  position: relative;
  max-width: 130rem;
  margin-inline: auto;
  padding-inline: var(--section-side-space);
  z-index: 1;
}

.hydrogen-power-catchcopy-wrap {
  display: flex;
  width: max-content;
  animation: hydrogen-catchcopy-slide 30s linear infinite;
  margin-bottom: 7rem;
}

.hydrogen-power-catchcopy {
  flex-shrink: 0;
  padding-right: 4rem;
  font-family: var(--font-en);
  font-size: 7rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.2em;
  color: var(--color-white);
  opacity: 0.5;
  white-space: nowrap;
}

@keyframes hydrogen-catchcopy-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hydrogen-power-catchcopy-wrap {
    animation: none;
  }
}

.hydrogen-power-catchcopy-viewport,
.hydrogen-power-img-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 1;
}

.hydrogen-power-sns-list {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 3rem;
  animation: hydrogen-img-slide 40s linear infinite;
}

.hydrogen-power-sns-item {
  border-radius: 1rem;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
}

.hydrogen-power-sns-link {
  display: block;
  transition: transform 0.3s ease-in-out;
}

@media (any-hover: hover) {
  .hydrogen-power-sns-link:hover {
    transform: scale(1.05);
  }
}

.hydrogen-power-sns-item:nth-child(odd) .hydrogen-power-sns-img {
  display: block;
  width: 20rem;
  height: 25rem;
  object-fit: cover;
}

.hydrogen-power-sns-item:nth-child(even) .hydrogen-power-sns-img {
  display: block;
  width: 35rem;
  height: 20rem;
  object-fit: cover;
}

@keyframes hydrogen-img-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hydrogen-power-sns-list {
    animation: none;
  }
}

.hydrogen-decoration-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hydrogen-decoration {
  position: sticky;
  top: 13rem;
  right: min(0, calc(var(--section-side-space) * 0.5));
  display: block;
  width: 28.2051vw;
  height: auto;
  margin-left: auto;
  margin-right: var(--section-side-space);
  padding: 13rem 0 46.5rem;
  animation: hydrogen-decoration-float 5s ease-in-out infinite;
}

.hydrogen-decoration-img {
  width: 100%;
  height: auto;
  display: block;
}

@keyframes hydrogen-decoration-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-3rem) scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hydrogen-decoration {
    animation: none;
  }
}

.hydrogen-power-title {
  font-size: 3.2rem;
  line-height: 1.5;
  color: var(--color-white);
  letter-spacing: 0.1em;
  margin-bottom: 4.8rem;
}

.hydrogen-power-text-wrap {
  margin-bottom: 10rem;
}

.hydrogen-power-text {
  color: var(--color-white);
}

.hydrogen-power-text:not(:last-child) {
  margin-bottom: 4rem;
}

/* スクロールに応じてテキストが下から上へフェードイン */
.hydrogen-power-title,
.hydrogen-power-text-wrap > .hydrogen-power-text {
  opacity: 0;
  transform: translateY(2.4rem);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
}

.hydrogen-power-title.is-visible,
.hydrogen-power-text-wrap > .hydrogen-power-text.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hydrogen-power-title,
  .hydrogen-power-text-wrap > .hydrogen-power-text {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 960px) {
  .hydrogen-power-section {
    --hydrogen-wave-height: 8rem;
    padding: 16rem 0 20rem;
  }

  .hydrogen-decoration {
    top: 13rem;
    width: 30vw;
    margin-top: 17rem;
    margin-right: 9.89583333333vw;
    padding-top: 0;
    padding-bottom: 48.5rem;
  }

  .hydrogen-power-catchcopy-wrap {
    margin-bottom: 8.6rem;
  }

  .hydrogen-power-catchcopy {
    font-size: 8rem;
  }

  .hydrogen-power-title {
    font-size: 4.2rem;
    letter-spacing: 0.15em;
  }

  .hydrogen-power-title br {
    display: none;
  }

  .hydrogen-power-text {
    font-size: 2rem;
    line-height: 2.5;
  }

  .hydrogen-power-text:not(:last-child) {
    margin-bottom: 3rem;
  }

  .hydrogen-power-text:nth-of-type(4) br:nth-of-type(1),
  .hydrogen-power-text:nth-of-type(5) br:nth-of-type(1),
  .hydrogen-power-text:nth-of-type(6) br:nth-of-type(2),
  .hydrogen-power-text:nth-of-type(7) br:nth-of-type(1) {
    display: none;
  }
}

/* 水素コラム（トップページ） */
.top-column-section {
  overflow: hidden;
}

.top-column-heading {
  margin-bottom: 4rem;
}

.top-column-text {
  margin-bottom: 4rem;
}

.top-column-text br {
  display: none;
}

.top-column-card-slide {
  cursor: grab;
  touch-action: pan-y;
  margin-bottom: 7.5rem;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}

.top-column-card-list {
  --column-card-duration: 60s;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 33rem;
  column-gap: 2rem;
  row-gap: 0;
  width: max-content;
  animation: top-column-card-slide var(--column-card-duration) linear infinite;
  will-change: transform;
}

.top-column-card-list.is-dragging {
  animation: none;
  cursor: grabbing;
  user-select: none;
}

.top-column-card-item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  min-width: 0;
}

.top-column-card-link {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
}

.top-column-card-content {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  background-color: var(--color-bg);
  padding: 1.6rem var(--section-side-space) 3rem;
}

.top-column-card-meta {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  padding: 0;
  background-color: transparent;
}

@keyframes top-column-card-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-column-card-list {
    animation: none;
  }

  .top-column-card-slide {
    cursor: default;
  }
}

.top-column-button-wrap {
  display: flex;
  justify-content: center;
}

/* 記事がない場合 */
.top-column-no-posts {
  padding-top: 6rem;
}

.top-column-no-posts-text {
  text-align: center;
}

@media (min-width: 960px) {
  .top-column-section {
    padding: 10rem var(--section-side-space) 16rem;
  }

  .top-column-text br {
    display: block;
  }
}

/*-------------------------------------------------------------------------

お知らせ（個別ページ）

-------------------------------------------------------------------------*/
.news-detail-date {
  display: block;
  margin-bottom: 1rem;
}

.news-detail-title {
  font-size: 2.4rem;
  color: var(--color-heading);
  line-height: 1.5;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-border);
}

.news-detail-content {
  margin-bottom: 7rem;
}

.news-detail-content p {
  margin-bottom: 2rem;
}

@media (min-width: 960px) {
  .news-detail-date {
    margin-bottom: 1.6rem;
  }

  .news-detail-title {
    margin-bottom: 3.2rem;
    padding-bottom: 3.2rem;
  }
}

/*-------------------------------------------------------------------------

製品情報（一覧ページ）

-------------------------------------------------------------------------*/

.products-item--series {
  scroll-margin-top: 7rem; /* スマホ、タブレットでファーストビューから遷移時上部パディング分を加味 */
}

.products-item--series:not(:last-child) {
  margin-bottom: 10rem;
}

.products-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5rem;
}

.products-img-wrap {
  overflow: hidden;
  border-radius: 0.4rem;
  margin-bottom: 1.4rem;
}

.products-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.products-title-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.8rem;
}

@media (any-hover: hover) {
  .products-item-link:hover .products-img {
    transform: scale(1.05);
  }

  .products-item-link:hover .c-text-link-text {
    color: var(--color-main);
  }

  .products-item-link:hover .c-text-link-arrow {
    background-color: var(--color-white);
    border-color: var(--color-main);
  }

  .products-item-link:hover .c-text-link-arrow::before {
    background-color: var(--color-main);
    border-color: var(--color-main);
  }

  .products-item-link:hover .c-text-link-arrow::after {
    border-top-color: var(--color-main);
    border-right-color: var(--color-main);
  }
}

@media (min-width: 960px) {
  .products-item--series {
    scroll-margin-top: 0;
  }
  .products-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}

/*-------------------------------------------------------------------------

製品情報（個別ページ）

-------------------------------------------------------------------------*/

/* 製品概要  */
.products-detail-overview-section-inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.products-detail-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0.4rem;
}

.products-detail-title {
  font-size: 2.4rem;
  color: var(--color-heading);
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.8rem;
}

.products-detail-overview-text {
  margin-bottom: 4rem;
}

.products-detail-guide-link-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}

.products-detail-guide-link {
  width: 100%;
}

.products-detail-guide-link-text {
  font-size: 1.8rem;
}

.products-detail-guide-link-arrow {
  width: 2.4rem;
  height: 2.4rem;
  transform: rotate(90deg);
}

@media (min-width: 960px) {
  .products-detail-overview-section-inner {
    flex-direction: row;
    gap: 6rem;
  }

  .products-detail-img {
    width: 52rem;
  }

  .products-detail-overview-content {
    width: 50%;
  }

  .products-detail-guide-link-list {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1.2rem;
    column-gap: 4.5rem;
  }

  .products-detail-guide-link-item {
    width: 23.6rem;
  }
}

/* 製品について */
.products-detail-about-section {
  background-color: var(--color-bg-dark);
}

.products-detail-about-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5rem;
}

.products-detail-about-item {
  min-width: 0;
}

.products-detail-about-card {
  background-color: var(--color-white);
  padding: 4rem 5.12820512821vw 6rem;
  border-radius: 1rem;
  box-shadow: 0 0 2.6rem 0 rgba(0, 0, 0, 0.06);
}

.js-scroll-fadein--order {
  opacity: 0;
  transform: translateY(2.4rem);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
}

.js-scroll-fadein--order.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js-scroll-fadein--order {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.products-detail-about-content {
  display: flex;
  flex-direction: column;
}

.products-detail-about-point {
  display: inline-block;
  background: var(--gradient-sub);
  padding: 0.5rem 1.2rem;
  border-radius: 0.4rem;
  font-family: var(--font-en);
  color: var(--color-white);
  line-height: 1.5;
  margin-bottom: 0.4rem;
}

.products-detail-about-title {
  font-size: 2rem;
  color: var(--color-heading);
  margin-bottom: 1.2rem;
}

.products-detail-about-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0.4rem;
  margin-bottom: 1.8rem;
}

.products-detail-about-text {
  font-size: 1.5rem;
}

.products-detail-about-note {
  font-size: 1.4rem;
  margin-top: 1.6rem;
}

.seiseisui-campaign-img-wrap {
  display: block;
  margin-top: 6rem;
}

.seiseisui-campaign-img {
  width: 100%;
}

@media (min-width: 960px) {
  .products-detail-about-list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 5rem;
    row-gap: 0;
    grid-auto-rows: auto auto auto auto auto 5rem;
  }

  .products-detail-about-list .js-scroll-fadein--order:nth-child(even) {
    transition-delay: 0.15s;
  }

  .products-detail-about-item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 6;
    gap: 0;
  }

  .products-detail-about-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
    gap: 0;
    padding: 4rem min(4.16666666667vw, 4rem) 6rem;
  }

  .products-detail-about-content {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
  }

  .products-detail-about-point {
    width: fit-content;
  }

  .products-detail-about-text {
    font-size: 1.6rem;
  }

  .products-detail-about-note {
    font-size: 1.5rem;
  }
}

/* 仕様について */
.products-detail-spec-section-inner {
  max-width: var(--section-content-width-narrow);
  margin-inline: auto;
}

.products-detail-spec-term {
  font-size: 1.4rem;
  color: var(--color-white);
  text-align: center;
  background-color: var(--color-main);
  padding: 1rem 5%;
}

.products-detail-spec-desc {
  font-size: 1.4rem;
  text-align: center;
  background-color: var(--color-bg);
  padding: 2rem 5%;
}

@media (min-width: 960px) {
  .products-detail-spec-item {
    display: grid;
    grid-template-columns: 20rem 1fr;
  }

  .products-detail-spec-term {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--color-white);
  }

  .products-detail-spec-item:first-child .products-detail-spec-term {
    border-top: 1px solid var(--color-main);
  }

  .products-detail-spec-item:last-child .products-detail-spec-term {
    border-bottom: 1px solid var(--color-main);
  }

  .products-detail-spec-desc {
    border-bottom: 1px solid var(--color-border);
  }

  .products-detail-spec-item:first-child .products-detail-spec-desc {
    border-top: 1px solid var(--color-border);
  }
}

/* レンタルプラン */
.products-detail-rental-plan-section {
  background-color: var(--color-bg-dark);
}

.products-detail-rental-plan-section-inner {
  max-width: var(--section-content-width-narrow);
  margin-inline: auto;
}

.products-detail-rental-plan-text {
  margin-bottom: 2.4rem;
}

.products-detail-rental-plan-price-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
  gap: 2.4rem;
  margin-bottom: 2.4rem;
}

.products-detail-rental-plan-price-item {
  background-color: var(--color-white);
  border-radius: 1rem;
  padding: 2.6rem 2rem;
  box-shadow: 0 0 2.6rem 0 rgba(0, 0, 0, 0.06);
}

.products-detail-rental-plan-price-label {
  display: block;
  background-color: var(--color-main);
  color: var(--color-white);
  text-align: center;
  width: 21rem;
  margin-inline: auto;
  padding: 0.3rem 5%;
  border-radius: 1rem;
  margin-bottom: 1.2rem;
}

.products-detail-rental-plan-price {
  line-height: 1;
  text-align: center;
}

.products-detail-rental-plan-price-number {
  font-size: 2.4rem;
}

.products-detail-rental-plan-note {
  font-size: 1.5rem;
  text-indent: -1em;
  padding-left: 1em;
  margin-bottom: 0.8rem;
}

.products-detail-rental-plan-note:not(:last-child) {
  margin-bottom: 1rem;
}

.products-detail-rental-plan-banner-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
  gap: 1.6rem;
  margin: 0 auto 2.4rem;
}

.products-detail-rental-plan-banner-link {
  display: block;
}

.products-detail-rental-plan-banner-img {
  width: 100%;
  height: auto;
  display: block;
}

/* よくあるご質問 */
.products-detail-faq-section-inner {
  max-width: var(--section-content-width-narrow);
  margin-inline: auto;
}

.products-detail-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.products-detail-faq-question-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.products-detail-faq-question-button-inner {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 2.4rem 0;
  border-bottom: 1px solid var(--color-border);
}

.products-detail-faq-item:first-child
  .products-detail-faq-question-button-inner {
  border-top: 1px solid var(--color-border);
}

.products-detail-faq-question-mark {
  display: inline-block;
  width: 3.5rem;
  height: 3.5rem;
  background-color: var(--color-main);
  border-radius: 100%;
  color: var(--color-white);
  text-align: center;
  font-weight: 600;
  flex-shrink: 0;
}

.products-detail-faq-question-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  color: var(--color-heading);
  transition: color 0.3s ease;
}

@media (any-hover: hover) {
  .products-detail-faq-question-text:hover {
    color: var(--color-main);
  }
}

.products-detail-faq-question-text::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-right: 2px solid var(--color-heading);
  border-bottom: 2px solid var(--color-heading);
  transform: rotate(45deg) translateY(-50%);
  transform-origin: center center;
  transition: transform 0.3s ease-in-out;
  margin-right: 0.6rem;
  flex-shrink: 0;
}

.products-detail-faq-question.is-open
  .products-detail-faq-question-text::after {
  transform: rotate(-45deg);
}

.products-detail-faq-answer-inner {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  font-size: 1.5rem;
  padding: 2.4rem 0;
}

.products-detail-faq-answer-inner a {
  color: var(--color-main);
  text-decoration: underline;
}

.products-detail-faq-answer-inner::before {
  content: "A";
  display: inline-block;
  width: 3.5rem;
  height: 3.5rem;
  border: 2px solid var(--color-main);
  border-radius: 100%;
  color: var(--color-main);
  text-align: center;
  font-weight: 600;
  flex-shrink: 0;
}

.products-detail-faq {
  margin-bottom: 7rem;
}

.products-detail-faq-text {
  margin-bottom: 3rem;
}

/*-------------------------------------------------------------------------

会社概要

-------------------------------------------------------------------------*/
.company-overview-item {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 3rem 0;
}

.company-overview-item:first-child {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.company-overview-item:not(:first-child) {
  border-bottom: 1px solid var(--color-border);
}

.company-overview-term {
  color: var(--color-white);
  background-color: var(--color-main);
  width: 12.5rem;
  height: 3.6rem;
  display: grid;
  place-items: center;
  border-radius: 4rem;
}

@media (min-width: 960px) {
  .company-overview-item {
    flex-direction: row;
    gap: 2.4rem;
    padding: 4.8rem 2.4rem;
  }

  .company-overview-desc br {
    display: none;
  }

  .company-overview-desc .pc-br {
    display: block;
  }
}

/*-------------------------------------------------------------------------

お友達紹介キャンペーン

-------------------------------------------------------------------------*/

/* キャンペーンの概要 */
.friend-campaign-overview-text:nth-of-type(1) {
  margin-bottom: 2rem;
}

.friend-campaign-overview-text:nth-of-type(2) {
  margin-bottom: 4.2rem;
}

.friend-campaign-overview-text br {
  display: none;
}

.friend-campaign-overview-list {
  display: grid;
  justify-content: center;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 42rem));
}

.friend-campaign-overview-item {
  padding: 3rem var(--section-side-space);
  background-color: var(--color-bg-dark);
  border-radius: 0.4rem;
}

.friend-campaign-overview-item-title {
  font-size: 2rem;
  color: var(--color-heading);
  text-align: center;
  margin-bottom: 1rem;
}

.friend-campaign-overview-item-value {
  text-align: center;
  padding: 1.6rem 3.6rem;
  background-color: var(--color-white);
  border-radius: 1rem;
}

.friend-campaign-overview-item-value-number {
  font-size: 2.8rem;
  color: var(--color-main);
}

/* simulation */
.friend-campaign-simulation-section {
  background-color: var(--color-bg);
}

.friend-campaign-simulation-heading {
  font-family: var(--font-en);
  font-size: min(14.358974359vw, 5.6rem);
  line-height: 1;
  color: #4e9dce; /* フォールバック */
  background: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 3rem;
}

.friend-campaign-simulation-text {
  margin-bottom: 3rem;
}

.friend-campaign-simulation-text br {
  display: none;
}

.friend-campaign-simulation-list {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-bottom: 6.8rem;
}

.friend-campaign-simulation-item--lita-air-price,
.friend-campaign-simulation-item--friend-introduce-price {
  background-color: var(--color-white);
  border-radius: 0.4rem;
  padding: 4rem 0 3rem;
  display: grid;
  place-items: center;
  box-shadow: 0 0 2.6rem 0 rgba(0, 0, 0, 0.06);
}

.friend-campaign-simulation-lita-air-img {
  width: clamp(13.7rem, 35.1282051282vw, 27rem);
  height: auto;
  object-fit: cover;
}

.friend-campaign-simulation-price-term {
  color: var(--color-white);
  background-color: var(--color-main);
  border-radius: 4rem;
  padding: 0.5rem 2rem;
}

.friend-campaign-simulation-price-value {
  font-size: 2.4rem;
  font-weight: 600;
}

.friend-campaign-simulation-minus-icon {
  display: block;
  width: 5rem;
  height: 5rem;
  margin-inline: auto;
  position: relative;
  background-color: var(--color-main);
  border-radius: 100%;
}

.friend-campaign-simulation-minus-icon::before {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 2px;
  background-color: var(--color-white);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.friend-campaign-simulation-friend-introduce-img-wrap {
  margin-bottom: 2.4rem;
}

.friend-campaign-simulation-friend-introduce-img {
  width: clamp(16rem, 41.0256410256vw, 23rem);
  height: auto;
  object-fit: cover;
}

.friend-campaign-simulation-arrow-img {
  display: block;
  width: 5.3rem;
  height: auto;
  object-fit: cover;
  margin-inline: auto;
  transform: rotate(90deg);
}

.friend-campaign-simulation-item--rental-price {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
}

.friend-campaign-simulation-rental-price-term {
  font-size: 2.4rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.friend-campaign-simulation-rental-price-term::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 2.4rem;
  transform: rotate(-20deg);
  background-color: var(--color-text);
  flex-shrink: 0;
}

.friend-campaign-simulation-rental-price-term::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 2.4rem;
  transform: rotate(20deg);
  background-color: #333333;
  flex-shrink: 0;
}

.friend-campaign-simulation-rental-price-value {
  font-size: 6.8rem;
  line-height: 1;
}

.friend-campaign-simulation-rental-price-value-number {
  font-size: 20.4rem;
  font-weight: 600;
  line-height: 0.8;
  color: #4e9dce; /* フォールバック */
  background: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.simulation-caution {
  max-width: 90rem;
  margin-inline: auto;
  background-color: var(--color-main-pale);
  border: 1px solid var(--color-main);
  border-radius: 1rem;
  padding: 2rem 2rem 3rem;
}

.simulation-caution-heading {
  font-size: 2rem;
  color: var(--color-heading);
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-shrink: 0;
  margin-bottom: 1rem;
}

.simulation-caution-heading::before {
  content: "";
  display: inline-block;
  background-image: url("../img/friend-campaign/caution-icon.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
}

.simulation-caution-text {
  font-size: 1.5rem;
}

.simulation-caution-text span {
  color: var(--color-highlight);
}

@media (min-width: 960px) {
  /* キャンペーンの概要 */
  .friend-campaign-overview-title {
    font-size: 3.2rem;
    justify-content: center;
  }

  .friend-campaign-overview-title::before {
    width: 4rem;
    height: 4.3rem;
    margin-top: 1rem;
  }

  .friend-campaign-overview-text {
    text-align: center;
  }

  .friend-campaign-overview-text br {
    display: block;
  }

  /* simulation */
  .friend-campaign-simulation-heading {
    font-size: 14rem;
    text-align: center;
  }

  .friend-campaign-simulation-text {
    font-size: 2.4rem;
    text-align: center;
    margin-bottom: 7rem;
  }

  .friend-campaign-simulation-text br {
    display: block;
  }

  .friend-campaign-simulation-list {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 7rem;
  }

  .friend-campaign-simulation-item--lita-air-price,
  .friend-campaign-simulation-item--friend-introduce-price {
    padding: 3rem min(2.08333333333vw, 4rem);
  }

  .friend-campaign-simulation-lita-air-img {
    width: 11.7rem;
  }

  .friend-campaign-simulation-price-term {
    font-size: 1.5rem;
  }

  .friend-campaign-simulation-friend-introduce-img {
    width: 11.8rem;
  }

  .friend-campaign-simulation-arrow-img {
    transform: rotate(0);
  }

  .simulation-caution {
    padding: 2rem 3rem 3rem;
  }

  .simulation-caution-text {
    font-size: 1.6rem;
  }
}

/*-------------------------------------------------------------------------

複数台契約お値引きプラン

-------------------------------------------------------------------------*/

/* プランの概要 */
.discount-plan-overview-title {
  --icon-limitless-width: 2.9rem;
  --icon-limitless-height: 3.1rem;
}

.discount-plan-overview-text {
  margin-bottom: 3rem;
}

.discount-plan-overview-text br {
  display: none;
}

.discount-plan-overview-guide-link-list {
  max-width: 70rem;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  background-color: var(--color-bg);
  border-radius: 1rem;
  padding: 4rem 2rem;
}

.discount-plan-overview-guide-link-item {
  text-align: center;
}

.discount-plan-overview-guide-link-arrow {
  transform: rotate(90deg);
}

.discount-plan-table-flame {
  border-radius: 0.4rem;
  min-width: 100%;
}

.discount-plan-table-thead-list {
  display: flex;
}

.discount-plan-table-thead-item {
  flex: 1;
  min-width: 21rem;
  display: grid;
  place-items: center;
  color: var(--color-white);
  background-color: var(--color-main);
  padding: 0.5rem 2%;
}

.discount-plan-table-thead-item:not(:last-child) {
  border-right: 1px solid var(--color-white);
}

.discount-plan-table-tbody {
  display: flex;
  flex-direction: column;
}

.discount-plan-table-tbody-list {
  display: flex;
  border-bottom: 1px solid var(--color-main);
}

.discount-plan-table-tbody-item {
  flex: 1;
  min-width: 20rem;
  display: grid;
  place-items: center;
  background-color: var(--color-white);
  padding: 2rem 2%;
}

.discount-plan-table-tbody-item {
  border-right: 1px solid var(--color-main);
}

.discount-plan-table-tbody-item:first-child {
  border-left: 1px solid var(--color-main);
}

.discount-plan-table-tbody-item:not(:last-child) {
  border-right: 1px solid var(--color-main);
}

.discount-plan-table-tbody-item-price {
  font-size: 2.5rem;
}

.discount-plan-table-tbody-row {
  background-color: var(--color-main-light);
}

.discount-plan-table-note {
  font-size: 1.4rem;
  color: var(--color-main);
}

/* プランの適用条件 */
.discount-plan-conditions-section {
  background-color: var(--color-bg-dark);
}

.discount-plan-conditions-item {
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0 2.6rem 0 rgba(0, 0, 0, 0.06);
}

.discount-plan-conditions-item:not(:last-child) {
  margin-bottom: 4rem;
}

.discount-plan-conditions-item-title {
  font-size: 2rem;
  letter-spacing: 0.1em;
  color: var(--color-white);
  text-align: center;
  background-color: var(--color-main);
  padding: 0.5rem 0;
}

.discount-plan-conditions-item-content {
  background-color: var(--color-white);
  padding: 2.4rem var(--section-side-space) 7rem;
}

.discount-plan-conditions-item-text {
  margin-bottom: 2.8rem;
}

.discount-plan-conditions-example {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.discount-plan-conditions-example-list {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.discount-plan-conditions-example-item {
  border-radius: 1rem;
  padding: 2.5rem 0;
  display: grid;
  grid-template-columns: auto;
  place-items: center;
}

.discount-plan-conditions-example-number {
  display: block;
  border-radius: 4rem;
  color: var(--color-white);
  text-align: center;
  padding: 0.5rem 10%;
  margin-bottom: 2rem;
}

.discount-plan-conditions-example-img-wrap {
  width: 30.76923077vw;
  height: 30.76923077vw;
  margin: 0 auto 2rem;
  border-radius: 100%;
  display: grid;
  place-items: center;
  margin-bottom: 1.2rem;
}

.discount-plan-conditions-example-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.discount-plan-conditions-example-img {
  height: auto;
  object-fit: cover;
}

.discount-plan-conditions-example-img--litalife {
  width: 11.7948717949vw;
}

.discount-plan-conditions-example-img--litaair {
  width: 13.8461538462vw;
}

.discount-plan-conditions-example-img--litaaqua {
  width: 11.7948717949vw;
}

.discount-plan-conditions-example-status {
  position: relative;
  display: grid;
  place-items: center;
  padding-left: 2.4rem;
  font-weight: 600;
}

.discount-plan-conditions-item--deposit
  .discount-plan-conditions-example-item:first-child {
  border: 1px solid var(--color-lita-gray);
}

.discount-plan-conditions-item--deposit
  .discount-plan-conditions-example-item:first-child
  .discount-plan-conditions-example-number {
  background-color: var(--color-lita-gray);
}

.discount-plan-conditions-item--deposit
  .discount-plan-conditions-example-item:first-child
  .discount-plan-conditions-example-img-wrap {
  background-color: var(--color-bg-dark);
}

.discount-plan-conditions-item--deposit
  .discount-plan-conditions-example-item:first-child
  .discount-plan-conditions-example-img {
  filter: brightness(0);
}

.discount-plan-conditions-item--deposit
  .discount-plan-conditions-example-item:first-child
  .discount-plan-conditions-example-status {
  border-bottom: 1px solid var(--color-lita-gray);
}

.discount-plan-conditions-item--deposit
  .discount-plan-conditions-example-item:first-child
  .discount-plan-conditions-example-status::before {
  content: "";
  display: inline-block;
  width: 1.8rem;
  height: 2px;
  background-color: var(--color-highlight);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.discount-plan-conditions-item--deposit
  .discount-plan-conditions-example-item:first-child
  .discount-plan-conditions-example-status::after {
  content: "";
  display: inline-block;
  width: 1.8rem;
  height: 2px;
  background-color: var(--color-highlight);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

.discount-plan-conditions-item--deposit
  .discount-plan-conditions-example-item:not(:first-child) {
  background-color: var(--color-main-pale);
  border: 2px solid var(--color-main);
}

.discount-plan-conditions-item--deposit
  .discount-plan-conditions-example-item:not(:first-child)
  .discount-plan-conditions-example-number {
  background-color: var(--color-main);
}

.discount-plan-conditions-item--deposit
  .discount-plan-conditions-example-item:not(:first-child)
  .discount-plan-conditions-example-img-wrap {
  background-color: rgba(21, 153, 201, 0.1);
}

.discount-plan-conditions-item--deposit
  .discount-plan-conditions-example-item:not(:first-child)
  .discount-plan-conditions-example-status {
  font-weight: 600;
  border-bottom: 1px solid var(--color-main);
}

.discount-plan-conditions-item--deposit
  .discount-plan-conditions-example-item:not(:first-child)
  .discount-plan-conditions-example-status::before {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  border: 2px solid var(--color-main);
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.discount-plan-conditions-item--monthly
  .discount-plan-conditions-example-item:last-child {
  border: 1px solid var(--color-lita-gray);
}

.discount-plan-conditions-item--monthly
  .discount-plan-conditions-example-item:last-child
  .discount-plan-conditions-example-number {
  background-color: var(--color-lita-gray);
}

.discount-plan-conditions-item--monthly
  .discount-plan-conditions-example-item:last-child
  .discount-plan-conditions-example-img-wrap {
  background-color: var(--color-bg);
}

.discount-plan-conditions-item--monthly
  .discount-plan-conditions-example-item:last-child
  .discount-plan-conditions-example-img {
  filter: brightness(0);
}

.discount-plan-conditions-item--monthly
  .discount-plan-conditions-example-item:last-child
  .discount-plan-conditions-example-status {
  border-bottom: 1px solid var(--color-lita-gray);
}

.discount-plan-conditions-item--monthly
  .discount-plan-conditions-example-item:last-child
  .discount-plan-conditions-example-status::before {
  content: "";
  display: inline-block;
  width: 1.8rem;
  height: 2px;
  background-color: var(--color-highlight);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.discount-plan-conditions-item--monthly
  .discount-plan-conditions-example-item:last-child
  .discount-plan-conditions-example-status::after {
  content: "";
  display: inline-block;
  width: 1.8rem;
  height: 2px;
  background-color: var(--color-highlight);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

.discount-plan-conditions-item--monthly
  .discount-plan-conditions-example-item:not(:last-child) {
  background-color: var(--color-main-pale);
  border: 2px solid var(--color-main);
}

.discount-plan-conditions-item--monthly
  .discount-plan-conditions-example-item:not(:last-child)
  .discount-plan-conditions-example-number {
  background-color: var(--color-main);
}

.discount-plan-conditions-item--monthly
  .discount-plan-conditions-example-item:not(:last-child)
  .discount-plan-conditions-example-img-wrap {
  background-color: rgba(21, 153, 201, 0.1);
}

.discount-plan-conditions-item--monthly
  .discount-plan-conditions-example-item:not(:last-child)
  .discount-plan-conditions-example-status {
  font-weight: 600;
  border-bottom: 1px solid var(--color-main);
}

.discount-plan-conditions-item--monthly
  .discount-plan-conditions-example-item:not(:last-child)
  .discount-plan-conditions-example-status::before {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  border: 2px solid var(--color-main);
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.discount-plan-conditions-item--monthly
  .discount-plan-conditions-example-item:not(:first-child) {
  position: relative;
}

.discount-plan-conditions-item--monthly
  .discount-plan-conditions-example-item:not(:first-child)::before {
  content: "";
  display: inline-block;
  background-image: url("../img/discount-plan/discount-plan-conditions-arrow.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 6.3rem;
  height: 5.9rem;
  object-fit: cover;
  position: absolute;
  top: -5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.discount-plan-conditions-example-ellipsis {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

.discount-plan-conditions-example-ellipsis span {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  background-color: var(--color-lita-gray);
  border-radius: 100%;
}

/* simulation */
.discount-plan-simulation-section {
  padding-top: 0;
}

.discount-plan-simulation-section-inner {
  max-width: 90rem;
  margin: 0 auto;
}

.discount-plan-simulation-heading {
  font-family: var(--font-en);
  font-size: min(14.358974359vw, 5.6rem);
  line-height: 1;
  color: #4e9dce; /* フォールバック */
  background: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 3rem;
}

.discount-plan-simulation-top {
  display: flex;
  justify-content: flex-start;
  gap: 3rem;
  padding-left: 4rem;
}

.discount-plan-simulation-decoration {
  text-align: center;
}

.discount-plan-simulation-top-text {
  margin-bottom: 3rem;
}

.discount-plan-simulation-top-img-list {
  display: flex;
  gap: 4rem;
}

.discount-plan-simulation-top-img--litalife {
  width: 16.2rem;
  height: auto;
}

.discount-plan-simulation-top-img--litaair {
  width: 17.1rem;
  height: auto;
}

.discount-plan-simulation-top-img--litaaqua {
  width: 15.3rem;
  height: auto;
}

.discount-plan-simulation-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 7rem;
}

.discount-plan-simulation-scroll-inner {
  width: max-content;
  margin-inline: auto;
}

.discount-plan-table-wrap--simulation {
  max-width: none;
}

.discount-plan-table-wrap--simulation
  .discount-plan-table-tbody-item-price-wrap {
  display: flex;
  justify-content: center;
  align-items: baseline;
  line-height: 1;
}

.discount-plan-table-wrap--simulation
  .discount-plan-table-tbody-item-price:not(
    .discount-plan-table-tbody-item-price--nonhighlight
  ) {
  color: var(--color-highlight);
  font-weight: 600;
}

.discount-plan-table-wrap--simulation
  .discount-plan-table-tbody-item-price-calculation {
  display: block;
  font-size: 1.4rem;
}

@media (min-width: 960px) {
  /* プランの概要 */
  .discount-plan-overview-title {
    font-size: 3.2rem;
    justify-content: center;
    margin-bottom: 2rem;
  }

  .discount-plan-overview-title::before {
    width: 4rem;
    height: 4.3rem;
    margin-top: 1rem;
  }

  .discount-plan-overview-text {
    text-align: center;
  }

  .discount-plan-overview-text br {
    display: block;
  }

  .discount-plan-overview-guide-link-list {
    flex-direction: row;
    gap: 3rem;
    padding: 3rem 2rem;
  }

  /* プランの適用条件 */
  .discount-plan-conditions-title {
    font-size: 3.2rem;
    justify-content: center;
    margin-bottom: 5rem;
  }

  .discount-plan-conditions-title::before {
    width: 4rem;
    height: 4.3rem;
    margin-top: 1rem;
  }

  .discount-plan-conditions-item {
    max-width: var(--section-content-width-narrow);
    margin-inline: auto;
  }

  .discount-plan-conditions-example {
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
  }

  .discount-plan-conditions-example-number {
    padding: 0.5rem 3rem;
  }

  .discount-plan-conditions-example-list {
    flex-direction: row;
    gap: 2rem;
  }

  .discount-plan-conditions-item-text {
    text-align: center;
  }

  .discount-plan-conditions-example-item {
    padding: 2.5rem 3rem;
  }

  .discount-plan-conditions-example-img-wrap {
    width: 12rem;
    height: 12rem;
  }

  .discount-plan-conditions-example-img--litalife {
    width: 4.6rem;
  }

  .discount-plan-conditions-example-img--litaair {
    width: 5rem;
  }

  .discount-plan-conditions-example-img--litaaqua {
    width: 4.6rem;
  }

  .discount-plan-conditions-example-ellipsis {
    flex-direction: row;
  }

  .discount-plan-conditions-item--monthly
    .discount-plan-conditions-example-item:not(:first-child)::before {
    top: 50%;
    left: -4.5rem;
    transform: translateY(-50%) rotate(-90deg);
  }

  .discount-plan-table-title {
    justify-content: center;
  }

  .discount-plan-table-wrap {
    width: max-content;
    margin-inline: auto;
    display: grid;
    place-items: flex-start;
  }

  .discount-plan-table-note {
    display: none;
  }

  /* お値引価格一覧 */
  .discount-plan-table-wrap {
    width: max-content;
    margin-inline: auto;
  }

  /* simulation */
  .discount-plan-simulation-heading {
    font-size: 14rem;
    line-height: 1;
    text-align: center;
    margin-bottom: 8rem;
  }
}

/*-------------------------------------------------------------------------

お問い合わせ

-------------------------------------------------------------------------*/

/* FAX・電話でのお問い合わせについて */

.contact-fax-tel-section-inner {
  max-width: var(--section-content-width-narrow);
  margin-inline: auto;
}

.contact-fax-tel-section-text {
  margin-bottom: 2rem;
}

.contact-fax-tel-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
  gap: 2.6rem;
}

.contact-fax-tel-item-inner {
  background-color: var(--color-bg);
  border-radius: 1rem;
  padding: 2rem;
  display: grid;
  place-items: center;
  margin-bottom: 0.6rem;
}

.contact-fax-tel-item-label {
  width: 10rem;
  height: fit-content;
  padding: 0.2rem 1rem;
  background-color: var(--color-main);
  border-radius: 0.4rem;
  color: var(--color-white);
  text-align: center;
  line-height: 1.5;
  margin-bottom: 0.4rem;
}

.contact-fax-tel-item-value {
  font-size: 3.2rem;
  color: var(--color-heading);
  line-height: 1.5;
}

.contact-fax-tel-item-note {
  display: block;
  font-size: 1.4rem;
  line-height: 1.5;
}

/* メールでのお問い合わせについて */

.contact-form-section {
  padding-top: 0;
}

.contact-form-section-inner {
  max-width: var(--section-content-width-narrow);
  margin-inline: auto;
}

.contact-form-section-text {
  margin-bottom: 3rem;
}

.contact-form-list {
  margin-bottom: 7rem;
}

.contact-form-item {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  border-top: 1px solid var(--color-border);
  padding: 3.2rem 0;
}

.contact-form-item:last-child {
  padding-bottom: 0;
}

.contact-form-item--address {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact-form-address-item {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.contact-form-address-item:not(:last-child) {
  margin-bottom: 2rem;
}

.contact-form-label {
  font-size: 1.8rem;
  color: var(--color-heading);
  line-height: 1.5;
  border-left: 0.6rem solid var(--color-main);
  padding-left: 1rem;
}

.contact-form-label--address {
  margin-bottom: 2rem;
}

.contact-form-label-note {
  font-size: 1.4rem;
  color: var(--color-main);
}

.contact-form-label-note br {
  display: none;
}

.contact-form-required {
  color: var(--color-highlight);
}

.contact-form-input,
.contact-form-select,
.contact-form-textarea {
  width: 100%;
  border-radius: 0.4rem;
  border: 1px solid var(--color-border);
  padding: 1rem 1.8rem;
}

.contact-form-input--customer-id {
  width: 15rem;
}

.contact-form-select-wrap {
  position: relative;
}

.contact-form-select-wrap::after {
  content: "";
  display: inline-block;
  border-right: 2px solid var(--color-heading);
  border-bottom: 2px solid var(--color-heading);
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 50%;
  right: 1.8rem;
  transform: translateY(-50%) rotate(45deg);
}

.contact-form-textarea {
  min-height: 30rem;
  resize: vertical;
  field-sizing: content;
}

.contact-form-input::placeholder,
.contact-form-textarea::placeholder {
  color: var(--color-border);
}

.contact-form-input:focus,
.contact-form-select:focus,
.contact-form-textarea:focus {
  outline: 2px solid var(--color-main);
  border-color: transparent;
}

.contact-form-submit-wrap {
  display: flex;
  justify-content: center;
}

/* Contact Form 7用スタイル */

/* CF7 が各入力を span で包むため、インラインのままだと幅とエラー表示が崩れる */
.wpcf7 .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* CF7 の autop が送信ボタン周りに <p> を挟んでも、.c-button の構造を壊さない */
.contact-form-submit-wrap p {
  display: contents;
}

/* サンクスページへ飛ばすなら、同ページの送信結果メッセージは出さない */
.wpcf7 .wpcf7-response-output {
  display: none;
}

/* スピナー非表示 */
.wpcf7 .wpcf7-spinner {
  display: none;
}

@media (min-width: 960px) {
  .contact-fax-tel-list {
    gap: 2rem;
  }

  .contact-form-item > .wpcf7-form-control-wrap {
    width: auto;
  }

  .contact-form-item {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 5rem 0;
  }

  .contact-form-item--address {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
  }

  .contact-form-label-note br {
    display: block;
  }

  .contact-form-input,
  .contact-form-select,
  .contact-form-textarea {
    width: 50rem;
  }
}

/*-------------------------------------------------------------------------

お問い合わせサンクスページ

-------------------------------------------------------------------------*/
.contact-thanks-section {
  overflow: hidden;
}

.contact-thanks-section-inner {
  position: relative;
  max-width: var(--section-content-width-narrow);
  margin-inline: auto;
}

.contact-thanks-section-inner::before {
  position: absolute;
  top: -8rem;
  right: -9.4rem;
  content: "";
  display: block;
  background-image: var(--icon-limitless);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 36.3rem;
  height: 38.6rem;
  z-index: -1;
  opacity: 0.1;
}

.contact-thanks-title {
  font-size: 2.4rem;
  color: var(--color-heading);
  margin-bottom: 2rem;
}

.contact-thanks-text {
  margin-bottom: 5rem;
}

@media (min-width: 960px) {
  .contact-thanks-section-inner::before {
    top: -3rem;
    right: 0;
    left: initial;
    transform: initial;
    width: 38.3rem;
    height: 40.7rem;
  }
}

/*-------------------------------------------------------------------------

水素コラム（一覧ページ）

-------------------------------------------------------------------------*/
.column-list-section {
  margin-bottom: 10rem;
}

/* カテゴリー/タグで絞り込み時に表示する見出し */
.column-term-heading {
  font-size: 1.8rem;
  color: var(--color-heading);
  line-height: 1.5;
  margin-bottom: 3rem;
}

.column-list {
  margin-bottom: 5rem;
}

.column-list-post:not(:last-child) {
  margin-bottom: 5rem;
}

.column-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.column-list-card-meta {
  margin-bottom: 5rem;
}

.column-list-card-content {
  background-color: var(--color-bg);
  padding: 1.6rem var(--section-side-space) 3rem;
}

.column-list-card-meta {
  padding: 0;
  background-color: transparent;
}

.column-list-card-title {
  font-size: 1.8rem;
  margin-bottom: 2rem;
}

.column-list-card-tag {
  gap: 1rem;
  font-size: 1.4rem;
}

.column-list-post-text {
  font-size: 1.4rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-bottom: 3rem;
}

/* 記事がない場合 */
.column-no-posts-text {
  text-align: center;
}

@media (min-width: 960px) {
  .column-layout-body {
    position: relative;
    display: grid;
    grid-template-columns:
      1fr
      clamp(31rem, calc(31rem + (100vw - 960px) * 0.0625), 33rem);
    gap: min(6.25vw, 6rem);
  }

  .column-list-section {
    margin-bottom: 0;
  }

  /* カテゴリー/タグで絞り込み時に表示する見出し */
  .column-term-heading {
    font-size: 3rem;
  }

  .column-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3rem;
    row-gap: 0;
    /* 画像 / 日付 / タイトル / タグ / リンク / カード行間 */
    grid-auto-rows: auto auto auto auto auto 3rem;
  }

  .column-list-post {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 6;
    min-width: 0;
    background-color: transparent;
    border-radius: 0; /* .column-card の角丸を無効化 */
    pointer-events: none;
  }

  .column-list-card-link {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
    min-width: 0;
    pointer-events: auto;
    border-radius: 1rem;
    overflow: hidden;
  }

  .column-list-card-content {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    min-width: 0;
  }

  .column-list-card-meta {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    min-width: 0;
  }

  .column-list-post:not(:last-child) {
    margin-bottom: 0;
  }
}

/*-------------------------------------------------------------------------

水素コラム（個別ページ）

-------------------------------------------------------------------------*/
.column-detail-section-inner {
  margin-bottom: 10rem;
}

.column-detail-category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.column-detail-title {
  font-size: 2.4rem;
  color: var(--color-heading);
  line-height: 1.5;
  margin-bottom: 2rem;
}

.column-detail-tag-list {
  margin-bottom: 4rem;
}

.column-detail-sns-list {
  display: flex;
  gap: 1.2rem;
  margin-bottom: 1.8rem;
}

.column-detail-sns-link {
  display: block;
  width: 4rem;
  height: 4rem;
  border-radius: 100%;
}

.column-detail-sns-img {
  width: 100%;
  height: 100%;
}

.column-detail-eyecatch-wrap {
  margin-bottom: 3rem;
}

.column-detail-eyecatch {
  width: 100%;
}

.column-detail-content {
  margin-bottom: 5rem;
}

.column-detail-content h2 {
  display: flex;
  justify-content: center;
  font-size: 2rem;
  color: var(--color-white);
  background-color: var(--color-main);
  border-radius: 0.4rem;
  padding: 0.7rem 2rem;
  margin-bottom: 2.4rem;
}

.column-detail-content p {
  font-size: 1.5rem;
  margin-bottom: 1em; /* WordPressテキスト編集画面で改行を入れてるが余白を調整 */
}

.column-detail-content a {
  color: var(--color-main);
  text-decoration: underline;
}

.column-detail-content h3 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-main);
  line-height: 1.5;
  letter-spacing: 0.1em;
  padding-bottom: 2rem;
  border-bottom: 1px dotted var(--color-main);
  margin-bottom: 3rem;
}

.column-detail-content h4 {
  font-size: 1.6rem;
  color: var(--color-heading);
  line-height: 1.5;
  border-left: 4px solid var(--color-main);
  background-color: var(--color-main-light);
  padding: 1rem;
  margin-bottom: 2rem;
}

/* コラム記事の表スクロール */
.column-detail-content .js-scroll-hint {
  max-width: 100%;
  overflow-x: auto;
  margin-bottom: 2rem;
}

/* 目次（WordPress プラグイン Easy Table of Contents） */
#ez-toc-container {
  width: 100%;
  margin: 6rem auto 6rem;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--color-main);
}

/* タイトル行：「目次」ヘッダー */
#ez-toc-container .ez-toc-title-container {
  display: grid;
  place-items: center;
  background-color: var(--color-main);
  padding: 1.6rem 2rem;
}

#ez-toc-container .ez-toc-title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: var(--color-white);
  margin-bottom: 0;
}

#ez-toc-container .ez-toc-title::before {
  content: "";
  display: inline-block;
  background-image: url("../img/column/agenda-icon.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 3.8rem;
  height: 3.8rem;
  flex-shrink: 0;
  margin-right: 1.5rem;
}

/* 開閉ボタンはデザインにないので隠す */
#ez-toc-container .ez-toc-title-toggle {
  display: none;
}

#ez-toc-container nav {
  background-color: var(--color-main-pale);
  padding: 1.8rem clamp(2rem, 5vw, 4rem) 4rem;
}

#ez-toc-container .ez-toc-list li::before {
  content: none; /* counter-hierarchy の 1. / 1.1 を消す */
}

#ez-toc-container .ez-toc-link {
  display: block;
  font-size: 1.5rem;
  color: var(--color-heading);
  transition: color 0.3s ease;
}

@media (any-hover: hover) {
  #ez-toc-container .ez-toc-link:hover {
    color: var(--color-main);
  }

  #ez-toc-container .ez-toc-heading-level-4 .ez-toc-link:hover {
    color: var(--color-main);
  }
}

#ez-toc-container .ez-toc-heading-level-3 {
  padding: 0 0.5em 1.6rem;
  border-bottom: 1px dotted var(--color-border);
}

/* h3：点線はこの li の下に1本
   子 h4 もこの li の中に入るので、グループのあとに線が出る */
#ez-toc-container .ez-toc-heading-level-3:not(:last-child) {
  margin-bottom: 1.6rem;
}
/* h4 リスト：字下げ。点線は付けない */
#ez-toc-container .ez-toc-list-level-4 {
  line-height: 1.5;
  margin-top: 1.2rem; /* h3 見出しとの間隔 */
  padding-left: 0.5em;
}

#ez-toc-container .ez-toc-heading-level-4 .ez-toc-link {
  color: var(--color-text);
}

/* h4 項目同士の間隔。最後は少し詰める */
#ez-toc-container .ez-toc-heading-level-4:not(:last-child) {
  margin-bottom: 0.8rem;
}

/* この記事をシェアする */
.column-share {
  background-color: var(--color-bg);
  padding: 2.6rem 2rem;
  margin-bottom: 3.6rem;
  border-radius: 0.4rem;
}

.column-share-inner {
  display: grid;
  place-items: center;
}

.column-share-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--color-heading);
  margin-bottom: 1.4rem;
}

.column-share-title::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.6rem;
  transform: rotate(-30deg);
  background-color: var(--color-text);
  flex-shrink: 0;
}

.column-share-title::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.6rem;
  transform: rotate(30deg);
  background-color: #333333;
  flex-shrink: 0;
}

.column-detail-sns-list--bottom {
  margin-bottom: 0;
}

/* 記事下部のタクソノミー情報 */
.column-detail-taxonomy-wrap {
  margin-bottom: 10rem;
}

.column-detail-taxonomy:not(:last-child) {
  margin-bottom: 3rem;
}

.column-detail-taxonomy-text-wrap {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.8rem;
}

.column-detail-taxonomy-text {
  line-height: 1.5;
  color: var(--color-heading);
}

.column-detail-taxonomy-category-img {
  display: block;
  width: 1.8rem;
  height: auto;
  object-fit: cover;
}

.column-detail-taxonomy-tag-img {
  display: block;
  width: 1.7rem;
  height: auto;
  object-fit: cover;
}

/* 関連記事（水素コラム個別ページ） */
.column-detail-section {
  min-width: 0;
}

.column-detail-related-list {
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 28rem;
  /* 画像 / 日付 / タイトル / タグ / リンク */
  grid-template-rows: auto auto auto auto auto;
  column-gap: 1rem;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 6rem;
}

.column-detail-related-item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  min-width: 0;
  background-color: transparent;
  border-radius: 0;
  pointer-events: none;
}

.column-detail-related-link {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  min-width: 0;
  pointer-events: auto;
  border-radius: 1rem;
  overflow: hidden;
}

.column-detail-related-content {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  min-width: 0;
  background-color: var(--color-bg);
  padding: 1.6rem var(--section-side-space) 3rem;
}

.column-detail-related-meta {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  min-width: 0;
  padding: 0;
  background-color: transparent;
  margin-bottom: 5rem;
}

/* ページ遷移リンク */
.article-nav-list {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.6rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 7rem;
}

.article-nav-item-prev::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  display: block;
  width: 1px;
  height: 1em;
  background-color: var(--color-heading);
}

.article-nav-link {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.article-nav-item-prev .article-nav-link-arrow {
  transform: rotate(-180deg);
}

.article-nav-item-next .article-nav-link-arrow {
  transform: rotate(0);
}

.article-nav-link-arrow {
  width: 2.4rem;
  height: 2.4rem;
}

@media (min-width: 960px) {
  .column-detail-layout-inner {
    display: grid;
    grid-template-columns:
      1fr
      clamp(31rem, calc(31rem + (100vw - 960px) * 0.0625), 33rem);
    gap: min(6.25vw, 6rem);
  }

  .column-detail-section-inner {
    margin-bottom: 0;
  }

  .column-detail-eyecatch-wrap {
    margin-bottom: 7rem;
  }

  .column-detail-content h4 {
    font-size: 1.8rem;
    padding: 1.6rem;
  }

  /* 関連記事（水素コラム個別ページ） */
  .column-detail-related-list {
    grid-auto-columns: 33rem;
    column-gap: 2rem;
  }
}

/*-------------------------------------------------------------------------

プライバシーポリシー

-------------------------------------------------------------------------*/
.privacy-policy-section-inner {
  max-width: var(--section-content-width-narrow);
  margin-inline: auto;
}

.privacy-policy-lead-text {
  margin-bottom: 5rem;
}

.privacy-policy-item {
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--color-border);
}

.privacy-policy-item:not(:last-child) {
  margin-bottom: 3rem;
}

.privacy-policy-article {
  font-size: 2.2rem;
  color: var(--color-heading);
  margin-bottom: 0.8rem;
}

@media (min-width: 960px) {
  .privacy-policy-lead-text {
    margin-bottom: 7rem;
  }
}
/*-------------------------------------------------------------------------

サイトマップ

-------------------------------------------------------------------------*/
.sitemap-list {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.sitemap-item {
  width: 100%;
}

.sitemap-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sitemap-heading {
  font-size: 1.8rem;
  color: var(--color-heading);
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--color-border);
}

.sitemap-text {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sitemap-text::before {
  content: "";
  display: inline-block;
  background-image: var(--icon-limitless);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: var(--icon-limitless-width);
  height: var(--icon-limitless-height);
  flex-shrink: 0;
}

.sitemap-arrow--big {
  width: 3.2rem;
  height: 3.2rem;
}

.sitemap-login-icon-wrap {
  width: 3.2rem;
  height: 3.2rem;
  background-color: var(--color-main);
  border: 1px solid var(--color-main);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
}

.sitemap-login-icon {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  background-color: var(--color-white);
  mask-image: url("../img/common/icon/login-external-link.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("../img/common/icon/login-external-link.svg");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  transition: background-color 0.3s ease;
}

.sitemap-list-sub {
  margin: 2.6rem 0 2.4rem;
}

.sitemap-item-sub:not(:last-child) {
  margin-bottom: 1.6rem;
}

.sitemap-link-sub {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sitemap-text-sub {
  color: var(--color-text);
}

@media (min-width: 960px) {
  .sitemap-list {
    display: block;
    column-count: 2;
    column-gap: 4.8rem;
  }

  .sitemap-item {
    width: 100%;
    break-inside: avoid;
    margin-bottom: 3rem;
  }

  .sitemap-heading {
    font-size: 2rem;
  }

  .sitemap-arrow-sub {
    width: 2.8rem;
    height: 2.8rem;
  }

  .sitemap-list-sub {
    margin-bottom: 6rem;
  }

  .sitemap-arrow--big,
  .sitemap-login-icon-wrap {
    width: 4rem;
    height: 4rem;
  }

  .sitemap-login-icon {
    width: 2rem;
    height: 2rem;
  }
}

/*-------------------------------------------------------------------------

404

-------------------------------------------------------------------------*/
.error404-section-inner {
  position: relative;
  max-width: var(--section-content-width-narrow);
  margin-inline: auto;
}

.error404-section-inner::before {
  position: absolute;
  top: 8.5rem;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  display: block;
  background-image: var(--icon-limitless);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 30rem;
  height: 32rem;
  z-index: -1;
  opacity: 0.1;
}

.error404-title {
  display: block;
  font-family: var(--font-en);
  font-size: 7.8rem;
  font-weight: 600;
  line-height: 1;
  color: #4e9dce; /* フォールバック */
  background: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1.6rem;
}

.error404-sub-title {
  display: block;
  font-size: 2.4rem;
  line-height: 1.5;
  color: var(--color-heading);
  margin-bottom: 2rem;
}

.error404-text {
  margin-bottom: 5rem;
}

@media (min-width: 960px) {
  .error404-section-inner::before {
    top: -7rem;
    right: 0;
    left: initial;
    transform: initial;
    width: 38.3rem;
    height: 40.7rem;
  }

  .error404-text {
    margin-bottom: 7rem;
  }
}