/* ===================================================================
  index.css
  トップページ専用：メインビジュアル（スライダー） / キャッチコピー / リード文
=================================================================== */

/* ===================================================================
  Hero（メインビジュアル）
=================================================================== */
.hero {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.hero__text {
  width: 32%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-right: 20px;
  padding-left: max(20px, calc((100vw - 1400px) / 2));
}

.hero__eyebrow {
  font-size: 24px;
  color: #555555;
  margin-bottom: 16px;
  font-weight: 700;
}

.hero__heading1 {
  font-size: 28px;
  color: var(--color-main);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 12px;
}

.hero__heading2 {
  font-size: 40px;
  color: var(--color-main);
  font-weight: 900;
  line-height: 1.4;
  margin-bottom: 4px;
}
.hero__heading2-sub {
  font-size: 24px;
  font-weight: 700;
}

.hero__heading3 {
  font-size: 28px;
  color: var(--color-main);
  font-weight: 700;
  line-height: 1.5;
}

.hero__visual {
  width: 68%;
  height: 600px;
  position: relative;
  overflow: hidden;
}

.hero__slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 1.5s ease;
}

/* 表示中の画像 */
.hero__slide.is-active {
  opacity: 1;
  z-index: 2;
}

/* フェードアウト中も拡大状態を保持する */
.hero__slide.is-leaving {
  opacity: 0;
  z-index: 1;
}

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transform-origin: center center;
  will-change: transform, opacity;
  transition: transform 7.5s ease-out;
}

/* 表示用クラスとは分離し、初回画像でも確実に拡大を開始させる */
.hero__slide.is-zooming img,
.hero__slide.is-leaving img {
  transform: scale(1.12);
}

/* ===================================================================
  Lead（リード文）
=================================================================== */
.lead {
  padding: 60px 0;
}

/* ===================================================================
  Hero（タブレット・スマホ）
=================================================================== */
@media (max-width: 768px) {
  .hero {
    flex-direction: column;
  }
  .hero__visual {
    width: 100%;
    height: 440px;
    order: 1;
  }
  .hero__text {
    width: 100%;
    order: 2;
    padding: 30px 20px;
  }
  .hero__eyebrow {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .hero__heading1 {
    font-size: 22px;
    margin-bottom: 8px;
  }
  .hero__heading2 {
    font-size: 30px;
  }
  .hero__heading2-sub {
    font-size: 20px;
  }
  .hero__heading3 {
    font-size: 22px;
  }
  .lead {
    padding: 20px 0;
  }
}

/* ===================================================================
  What is recycled zinc?（再生亜鉛とは）
=================================================================== */
.whatis {
  position: relative;
  padding-top: 70px;
}

.whatis__heading-en {
  position: relative;
  z-index: 1;
  font-size: 80px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-sub3);
  margin: 0 0 -10px 0;
  padding-left: max(40px, calc((100vw - 1400px) / 2));
}

.whatis__row {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 400px;
}

.whatis__panel {
  width: 50%;
  height: 100%;
  background: var(--color-main);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 40px;
}

/* 見出しとリストを1つのグループとして、パネル内で中央配置 */
.whatis__panel-inner {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
}

.whatis__panel-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
}
.whatis__list {
  list-style: disc;
  margin-left: 22px;
}

.whatis__list li {
  margin-bottom: 6px;
}
.whatis__list li:last-child {
  margin-bottom: 0;
}
.whatis__list a {
  display: inline-block;
  color: var(--color-white);
  font-size: 15px;
}

.whatis__visual {
  width: 50%;
  height: 100%;
}
.whatis__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.btn-more.btn-whatis {
  margin-top: 20px;
}

/* ===================================================================
  What is recycled zinc?（タブレット・スマホ）
=================================================================== */
@media (max-width: 768px) {
  .whatis {
    padding-top: 40px;
  }
  .whatis__heading-en {
    font-size: 40px;
    padding-left: 20px;
    margin-bottom: -6px;
  }
  .whatis__row {
    height: auto;
    flex-direction: column;
  }
  .whatis__visual {
    width: 100%;
    height: 260px;
    order: 1;
  }
  .whatis__panel {
    width: 100%;
    height: auto;
    order: 2;
    padding: 40px 20px;
  }
  .whatis__panel-inner {
    width: 100%;
    margin: 0;
  }
}

/* ===================================================================
  亜鉛リサイクルについて
=================================================================== */
.recycling {
  padding: 50px 0 80px;
}

.recycling__text {
  margin-bottom: 40px;
}

.recycling__diagram {
  max-width: 800px;
  margin: 0 auto;
}
.recycling__diagram img {
  width: 100%;
  display: block;
}

@media (max-width: 768px) {
  .recycling {
    padding: 30px 0 50px;
  }
  .recycling__text {
    margin-bottom: 30px;
  }
}

/* ===================================================================
  主要製品
=================================================================== */
.products {
  padding-top: 60px;
}
.products .section-heading {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}

.products__bg {
  position: relative;
  z-index: 0;
  margin-top: -50px;
  padding-top: 90px;
  padding-bottom: 70px;
  background: var(--color-sub4);
}

.products__lead {
  margin-bottom: 50px;
}

.products__category-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-main);
  margin-bottom: 24px;
}
.products__category-title:not(:first-of-type) {
  margin-top: 60px;
}

.products__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 400px;
}

.products__cell {
  height: 100%;
  overflow: hidden;
}
.products__cell--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.products__cell--text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px 60px;
  background: var(--color-main);
  color: var(--color-white);
}

.products__spec-list {
  margin-bottom: 20px;
}
.products__spec-list li {
  font-size: 15px;
  line-height: 1.8;
}

.products__tag {
  display: inline-block;
  align-self: flex-start;
  width: auto;
  background: var(--color-white);
  color: var(--color-main);
  font-size: 14px;
  padding: 4px 14px;
  margin-bottom: 6px;
}

.products__process-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 16px;
}

.products__cell--text .btn-more {
  align-self: flex-start;
  margin-top: 8px;
}

/* ===================================================================
  主要製品（タブレット・スマホ）
=================================================================== */
@media (max-width: 768px) {
  .products {
    padding-top: 30px;
  }
  .products__bg {
    margin-top: -20px;
    padding-top: 50px;
    padding-bottom: 40px;
  }
  .products__lead {
    margin-bottom: 30px;
  }
  .products__category-title {
    font-size: 20px;
    margin-bottom: 16px;
  }
  .products__category-title:not(:first-of-type) {
    margin-top: 40px;
  }
  .products__grid {
    display: flex;
    flex-direction: column;
    grid-auto-rows: unset;
  }
  .products__cell {
    height: auto;
  }
  .products__cell--image {
    height: 240px;
  }
  .products__cell--text {
    padding: 30px 20px;
  }
  .products__cell--text .btn-more {
    align-self: center;
  }
  /* PCでは「文章→画像」「画像→文章」の市松配置だが、SPは常に「画像→文章」の順に揃える */
  .products__grid .products__cell:nth-child(1) {
    order: 2;
  }
  .products__grid .products__cell:nth-child(2) {
    order: 1;
  }
  .products__grid .products__cell:nth-child(3) {
    order: 3;
  }
  .products__grid .products__cell:nth-child(4) {
    order: 4;
  }
}

/* ===================================================================
  Strengths & Features
=================================================================== */
.strengths {
  padding-top: 80px;
}
.strengths .section-heading {
  margin-bottom: 0;
}

.strengths__bg {
  margin-top: 40px;
}

.strengths__lead {
  margin-bottom: 40px;
}

.strengths__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 50px;
}

.strengths__card {
  background: var(--color-sub2);
  padding: 30px;
}

.strengths__card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-main);
  text-align: center;
  margin-bottom: 16px;
}

.strengths__card p {
  margin-bottom: 20px;
}

.strengths__card-image img {
  width: 100%;
  display: block;
}

.strengths__more {
  text-align: center;
}

.strengths__more .btn-more {
  min-width: 300px;
  font-size: 16px;
  padding: 16px 34px 16px 20px;
  border: 1px solid #020343;
}

/* ===================================================================
  Strengths & Features（タブレット・スマホ）
=================================================================== */
@media (max-width: 768px) {
  .strengths {
    padding-top: 30px;
  }
  .strengths__bg {
    margin-top: -20px;
    padding-top: 50px;
    padding-bottom: 40px;
  }
  .strengths__lead {
    margin-bottom: 30px;
  }
  .strengths__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 30px;
  }
  .strengths__card {
    padding: 24px 20px;
  }
}