@charset "utf-8";

/* ===============================================
   Front Page Renewal 2026 Styles
   =============================================== */

/* 基本設定 */
.renewal-front-page {
  font-family: "Zen Kaku Gothic New", sans-serif;
  width: 100%;
}

/* コンテナ - 標準幅 1440px (コンテンツ1280px + マージン左右80px) */
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
}

/* 背景色 */
.bg-light {
  background-color: #f2f6fa;
}

/* ===============================================
   Hero Section - Article Slider
   =============================================== */

.hero-section {
  width: 100%;
  padding: 0 0 60px 0;
  overflow: hidden;
}

.hero-slider {
  width: 100%;
}

.hero-slider .splide__track {
  overflow: visible;
}

.hero-slider .splide__list {
  align-items: stretch;
}

.hero-slider .splide__slide {
  width: 846px;
  margin-right: 24px;
}

/* Hero Card */
.hero-card {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.hero-card:hover {
  transform: translateY(-4px);
}

.hero-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: 16px;
}

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

.hero-card-category {
  display: inline-block;
  background-color: #ccdcec;
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 500;
  color: #3371b5;
  border-radius: 4px;
  margin-bottom: 12px;
}

.hero-card-title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 175%;
  color: #333;
  margin: 0;
  padding: 0 0 24px 0;
}

/* Pagination Dots */
.hero-slider .splide__pagination {
  bottom: -40px;
}

.hero-slider .splide__pagination li {
  margin: 0 8px;
}

.hero-slider .splide__pagination__page {
  width: 12px;
  height: 12px;
  background: #d9d9d9;
  border-radius: 50%;
  opacity: 1;
  transition: background-color 0.3s ease;
}

.hero-slider .splide__pagination__page.is-active {
  background: #004ea2;
}

/* ===============================================
   Sub Section
   =============================================== */

.sub-section {
  padding: 64px 0;
}

.sub-section .container {
  display: block;
}

.sub-section-title {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 135%;
  color: #004ea2;
  text-align: center;
  margin: 0 0 24px;
}

.sub-section-caption {
  font-size: 16px;
  font-weight: 400;
  line-height: 175%;
  color: #666;
  text-align: center;
  max-width: 862px;
  margin: 0 auto 48px;
}

.sub-slider {
  width: 100%;
  overflow: hidden;
}

.sub-slider .splide__track {
  overflow: visible;
}

.sub-slider .splide__slide {
  aspect-ratio: 16 / 9;
  width: 412px;
  overflow: hidden;
}

.sub-slider .splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* ===============================================
   Common Section Styles
   =============================================== */

/* 12グリッドシステム */
.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.company-section,
.facility-section,
.equipment-section,
.article-section {
  padding: 64px 0;
}

.section-header {
  grid-column: 1 / -1;
  margin-bottom: 16px;
}

.section-title-en {
  font-size: 94px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 135%;
  color: #ccdcec;
  margin: 0;
  padding: 0;
  text-align: left;
}

.section-title-ja {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 175%;
  color: #004ea2;
  margin: 0;
  padding: 0;
  text-align: left;
}

/* 共通ボタンデザイン（矢印付き） */
.arrow-button {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  font-weight: 400;
  color: #6695c7;
  text-decoration: none;
  transition: all 0.3s ease;
}

.arrow-button span:first-child {
  position: relative;
}

.arrow-line {
  position: relative;
  display: block;
  width: 55px;
  height: 1px;
  background-color: #6695c7;
  transition: width 0.3s ease;
}

.arrow-line::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 14px;
  height: 1px;
  background-color: #6695c7;
  transform: rotate(35deg);
  transform-origin: right center;
  transition: background-color 0.3s ease;
}

.arrow-button:hover {
  color: #004ea2;
}

.arrow-button:hover .arrow-line {
  width: 70px;
  background-color: #004ea2;
}

.arrow-button:hover .arrow-line::after {
  background-color: #004ea2;
}

/* ===============================================
   Company Section
   =============================================== */

/* 小川電機の自己紹介 */
.company-intro {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

.company-intro-image {
  grid-column: 1 / 5;
  border-radius: 6px;
  overflow: hidden;
  align-self: stretch;
}

.company-intro-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.company-intro-content {
  grid-column: 5 / -1;
  background-color: #fff;
  border-radius: 6px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.company-intro-text {
  font-size: 24px;
  font-weight: 500;
  line-height: 175%;
  color: #333;
  margin: 0 0 32px;
}

/* FEATURE */
.company-feature {
  grid-column: 1 / -1;
  margin-bottom: 40px;
}

.feature-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 175%;
  color: #6695c7;
  margin: 0 0 24px;
  padding: 0;
}

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

.feature-item {
  background-color: #fff;
  border-radius: 6px;
  padding: 32px;
}

.feature-item-title {
  font-size: 24px;
  font-weight: 900;
  color: #6695c7;
  margin: 0 0 16px;
  padding-left: 16px;
  border-left: 4px solid #99b8da;
  line-height: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
}

.feature-item-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 175%;
  color: #333;
  margin: 0;
}

/* 取引先企業 */
.company-partners {
  grid-column: 1 / -1;
}

.partners-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 175%;
  color: #6695c7;
  margin: 0 0 24px;
  padding: 0;
}

.partners-content {
  background-color: #fff;
  border-radius: 6px;
  padding: 40px;
}

.partners-logos {
  display: flex;
  align-items: center;
  gap: 64px;
  margin-bottom: 40px;
}

.partners-logos img {
  max-width: 150px;
  max-height: 60px;
  object-fit: contain;
}

.partners-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
}

.partners-list span {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 175%;
  color: #3371b5;
}

.partners-note {
  font-weight: 400 !important;
  color: #666 !important;
}

/* ===============================================
   CTA Section
   =============================================== */

.cta-section {
  background-image: url("../images/renewal2026/top/cta-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  position: relative;
}

.cta-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 80px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 60px;
  position: relative;
}

.cta-image {
  width: 265px;
  height: 300px;
  flex-shrink: 0;
  position: absolute;
  bottom: -1px;
  left: 76px;
}

/* PC用画像を表示 */
.cta-image--pc {
  display: block;
}

/* スマホ用画像を非表示 */
.cta-image--sp {
  display: none;
}

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

.cta-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
}

/* CTA Heading with decorative lines */
.cta-heading-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.cta-heading {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  margin: 0;
  white-space: nowrap;
}

.cta-deco-line {
  width: 22px;
  height: 2px;
  background-color: #fff;
  position: relative;
}

.cta-deco-left {
  transform: rotate(60deg);
}

.cta-deco-right {
  transform: rotate(-60deg);
}

/* .cta-deco-left::after,
.cta-deco-right::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 1px;
  background-color: #fff;
  top: 0;
}

.cta-deco-left::after {
  right: 0;
  transform: rotate(-30deg);
  transform-origin: right center;
}

.cta-deco-right::after {
  left: 0;
  transform: rotate(30deg);
  transform-origin: left center;
} */

/* CTA Title */
.cta-title {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px;
  padding: 0;
  text-align: center;
}

/* CTA Points */
.cta-points {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.cta-point {
  background-color: #fff;
  color: #3371b5;
  font-size: 16px;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 40px;
  white-space: nowrap;
}

/* CTA Actions */
.cta-actions {
  display: flex;
  gap: 24px;
  align-items: center;
}

.cta-phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* SP用：電話タップボタン（PC時は非表示） */
.cta-phone-tap {
  display: none;
}

.cta-phone-number {
  font-size: 46px;
  font-weight: 900;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.04em;
  line-height: 1;
  pointer-events: none;
  cursor: default;
}

.cta-phone-hours {
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  margin: 0;
}

/* CTA Button */
.cta-button {
  background-color: #eb8034;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  width: 284px;
  height: 63px;
  border-radius: 6px;
  padding: 14px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color 0.3s ease;
  gap: 2px;
}

.cta-button:hover {
  background-color: #d46f2a;
}

.cta-button-sub {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  line-height: 18px;
}

.cta-button-main {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cta-button-main svg {
  width: 20px;
  height: 16px;
}

/* ===============================================
   Facility Section
   =============================================== */

.facility-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.facility-card {
  background-color: #f2f6fa;
  border-radius: 6px 120px 6px 6px;
  padding: 24px;
}

.facility-title {
  font-size: 24px;
  font-weight: 700;
  color: #004ea2;
  letter-spacing: 0.04em;
  line-height: 175%;
  margin: 0 0 16px;
  padding: 0;
}

.facility-content {
  display: flex;
  gap: 24px;
  align-items: center;
}

.facility-image {
  width: 192px;
  height: 192px;
  flex-shrink: 0;
}

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

.facility-list {
  flex: 1;
  list-style: disc;
  margin: 0;
  padding-left: 20px;
}

.facility-list li {
  font-size: 14px;
  font-weight: 700;
  line-height: 175%;
  letter-spacing: 0.04em;
  color: #6695c7;
  margin-bottom: 8px;
}

.facility-list li:last-child {
  margin-bottom: 0;
}

/* ===============================================
   Equipment Grid
   =============================================== */

.equipment-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 40px;
}

.equipment-card {
  grid-column: span 4;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 24px;
  background-color: #ffffff;
  text-decoration: none;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.equipment-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 78, 162, 0.15);
}

.equipment-card-icon {
  flex-shrink: 0;
}

.equipment-card-icon img {
  width: 84px;
  height: auto;
  display: block;
}

.equipment-card-name {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 135%;
  color: #004ea2;
  margin: 0;
  padding: 0;
}

/* ===============================================
   Article Grid
   =============================================== */

.article-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.article-card:nth-child(1),
.article-card:nth-child(2) {
  grid-column: span 6;
}

.article-card:nth-child(n + 3) {
  grid-column: span 4;
}

.article-card {
  background: transparent;
}

.article-card .hero-card-category {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  background-color: transparent;
  color: #99b8da;
  padding: 0;
}

/* 「もっと見る」ボタン */
.article-button-wrapper {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* ===============================================
   Responsive Design
   =============================================== */

/* 1280px以下 */
@media screen and (max-width: 1440px) {
  .container {
    padding: 0 60px;
  }

  .hero-slider .splide__slide {
    width: 700px;
  }
}

/* 1024px以下 */
@media screen and (max-width: 1024px) {
  .container {
    padding: 0 40px;
  }

  .hero-slider .splide__slide {
    width: 600px;
  }

  .sub-slider .splide__slide {
    width: 350px;
  }

  .section-title-en {
    font-size: 72px;
  }

  .section-title-ja {
    font-size: 28px;
  }

  /* Company Section */
  .company-intro {
    grid-template-columns: 1fr;
  }

  .company-intro-image {
    grid-column: 1;
    min-height: 300px;
  }

  .company-intro-content {
    grid-column: 1;
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .equipment-grid {
    gap: 24px;
  }

  .equipment-card {
    grid-column: span 6;
    gap: 24px;
  }

  .equipment-card-icon img {
    width: 64px;
  }

  .equipment-card-name {
    font-size: 24px;
  }

  .article-grid {
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
  }

  .article-card:nth-child(1),
  .article-card:nth-child(2),
  .article-card:nth-child(n + 3) {
    grid-column: span 6;
  }
}

/* 768px以下 */
@media screen and (max-width: 768px) {
  .container {
    padding: 0 24px;
    grid-template-columns: 1fr;
  }

  .hero-section {
    padding: 66px 0;
  }

  .hero-slider .splide__slide {
    width: 90%;
    margin-right: 16px;
  }

  .sub-section {
    padding: 60px 0;
  }

  .sub-section-title {
    font-size: 24px;
  }

  .sub-section-caption {
    font-size: 14px;
  }

  .sub-slider .splide__slide {
    width: 280px;
  }

  .company-section,
  .facility-section,
  .equipment-section,
  .article-section {
    padding: 60px 0;
  }

  .section-header {
    margin-bottom: 40px;
  }

  .section-title-en {
    font-size: 48px;
  }

  .section-title-ja {
    font-size: 22px;
  }

  /* Company Section */
  .company-intro-content {
    padding: 24px;
  }

  .company-intro-text {
    font-size: 16px;
  }

  .feature-title,
  .partners-title {
    font-size: 20px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .partners-content {
    padding: 24px;
  }

  .partners-logos {
    flex-wrap: wrap;
    gap: 32px;
  }

  .partners-list {
    gap: 8px 20px;
    font-size: 14px;
  }

  /* CTA Section */
  .cta-section {
    padding: 32px 0;
    width: 100%;
  }

  .cta-container {
    padding: 0 20px;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
  }

  .cta-image {
    position: static;
    width: 100%;
    height: auto;
    order: 1;
  }

  /* PC用画像を非表示 */
  .cta-image--pc {
    display: none;
  }

  /* スマホ用画像を表示 */
  .cta-image--sp {
    display: block;
  }

  .cta-image img {
    width: 100%;
    height: auto;
  }

  /* PC用の電話番号を非表示 */
  .cta-phone {
    display: none;
  }

  /* SP用電話タップボタンを表示 */
  .cta-phone-tap {
    display: block;
    width: 100%;
  }

  .cta-phone-tap-button {
    display: block;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
  }

  .cta-phone-tap-button img {
    width: 100%;
    height: auto;
    filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.4));
  }

  .cta-phone-tap-note {
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    margin: 0;
    line-height: 1.8;
  }

  .cta-content {
    order: 2;
    padding: 0 0 32px 0;
    width: 100%;
  }

  .cta-heading-wrapper {
    gap: 12px;
    display: none;
  }

  .cta-title {
    font-size: 28px;
    display: none;
  }

  .cta-points {
    gap: 8px;
    display: none;
  }

  .cta-point {
    font-size: 14px;
    padding: 8px 20px;
  }

  .cta-actions {
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .cta-button {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
  }

  /* Facility Section */
  .facility-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .facility-content {
    flex-direction: row;
    align-items: flex-start;
  }

  .facility-image {
    width: 42%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  /* Equipment Section */
  .equipment-grid {
    gap: 16px;
  }

  .equipment-card {
    grid-column: 1 / -1;
    gap: 16px;
    padding: 16px;
  }

  .equipment-card-icon img {
    width: 56px;
  }

  .equipment-card-name {
    font-size: 20px;
  }

  .article-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .article-card:nth-child(1),
  .article-card:nth-child(2),
  .article-card:nth-child(n + 3) {
    grid-column: span 1;
  }
}

/* 480px以下 */
@media screen and (max-width: 480px) {
  .container {
    padding: 0 16px;
  }

  .hero-slider .splide__slide {
    width: 85%;
  }

  .hero-card-title {
    font-size: 14px;
  }

  .sub-section-title {
    font-size: 20px;
  }

  .sub-slider .splide__slide {
    width: 240px;
  }

  .section-title-en {
    font-size: 36px;
  }

  .section-title-ja {
    font-size: 18px;
  }

  /* CTA Section */
  .cta-section {
    padding: 0;
  }

  .cta-container {
    padding: 0 16px;
    gap: 0;
  }

  .cta-image {
    width: 100%;
    padding: 40px 24px;
  }

  .cta-heading {
    font-size: 12px;
  }

  .cta-deco-line {
    width: 20px;
  }

  .cta-title {
    font-size: 24px;
  }

  .cta-point {
    font-size: 12px;
    padding: 6px 16px;
  }

  .cta-phone-number {
    font-size: 28px;
  }

  .cta-phone-hours {
    font-size: 11px;
  }

  .cta-button {
    height: 74px;
    padding: 12px 32px;
  }

  .cta-button-sub {
    font-size: 12px;
  }

  .cta-button-main {
    font-size: 16px;
  }

  /* Facility Section */
  .facility-title {
    font-size: 20px;
  }

  .facility-list li {
    font-size: 12px;
  }
}