.section-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
}

.section-title-group {
  .section-title {
    margin-bottom: 0;
  }
}

.mv-container {
  position: relative;
  grid-template-rows: 1fr;
  min-height: 666px;
  margin-bottom: unset;
  overflow: hidden;
}

.mv-slider {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;

  picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* stylelint-disable-next-line no-descending-specificity */
    img {
      --fade-duration: 20s;
      --image-count: 4;

      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      animation: fade var(--fade-duration) infinite;
    }

    /* stylelint-disable-next-line no-descending-specificity */
    &:nth-child(1) img {
      animation-delay: 0s;
    }

    &:nth-child(2) img {
      animation-delay: calc(var(--fade-duration) / var(--image-count));
    }

    &:nth-child(3) img {
      animation-delay: calc(var(--fade-duration) / var(--image-count) * 2);
    }

    &:nth-child(4) img {
      animation-delay: calc(var(--fade-duration) / var(--image-count) * 3);
    }
  }
}

@keyframes fade {
  0% {
    opacity: 0;
    transform: scale(1.1) translateX(2%);
  }

  10% {
    opacity: 1;
  }

  25% {
    opacity: 1;
  }

  35% {
    opacity: 0;
    transform: scale(1.1) translateX(-2%);
  }

  100% {
    opacity: 0;
    transform: scale(1.1) translateX(-2%);
  }
}

.front-mv-main-container {
  position: relative;
  z-index: 2;
  max-width: 488px;
  margin-bottom: 3%;
  animation: fade-in-up-animation 2s ease;

  .page-title {
    margin-bottom: 8px;
  }

  .front-main-mv-description {
    margin-bottom: 3rem;

    @media (width <= 767px) {
      margin-bottom: 1.5rem;
    }
  }

  .front-mv-note {
    margin-top: 48px;

    @media (width <= 767px) {
      display: none;
    }
  }
}

.mv-link-card {
  display: grid;
  grid-template: 'image body' / 40% auto;
  align-items: center;
  overflow: hidden;
  border-color: var(--color-white);
  border-style: solid;
  border-width: 0 1px 1px 0;
  border-radius: 10px;
  transition: all 0.3s ease;

  &:hover {
    color: inherit;
    border-color: transparent;
    translate: 1px 1px;
  }

  .mv-link-card-image-container {
    grid-area: image;
    height: 100%;

    .mv-link-card-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

  .mv-link-card-body {
    position: relative;
    grid-area: body;
    height: 100%;
    padding: 12px 24px;

    @media (width <= 767px) {
      padding: 8px 16px;
    }

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      content: '';
      background-color: rgb(255 255 255 / 10%);
      backdrop-filter: blur(4px);
    }
  }
}

.mv-link-card-subtitle {
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 1;
  color: var(--color-gray);
}

.mv-link-card-title {
  font-size: clamp(1rem, 0.857rem + 0.71vw, 1.5rem);
  font-weight: 700;
  line-height: 1.5;
}

.intro-section-title-group {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 5rem;

  @media (width <= 767px) {
    gap: 0.5rem;
    margin-top: 3.75rem;
  }

  .page-title {
    margin-bottom: 7.5rem;

    @media (width <= 767px) {
      margin-bottom: 3.75rem;
    }
  }
}

.industry-section {
  padding: 7.5rem 0;
  background-color: var(--color-gray-bg);

  @media (width <= 767px) {
    padding: 3.75rem 0;
  }
}

.industry-section-container {
  max-width: 1200px;
  margin: auto;

  @media (width <= 1440px) {
    max-width: none;
    margin-left: 8.3%;
  }

  @media (width <= 767px) {
    margin-left: 0;
  }

  .section-title {
    margin-bottom: 1.5rem;

    @media (width <= 767px) {
      margin-left: 4.25%;
    }
  }
}

.industry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;

  @media (width <= 767px) {
    gap: 1.5rem;
  }
}

.industry-item {
  position: relative;
  display: grid;
  grid-template: 'body image' / 1fr 2fr;
  gap: 7.5%;

  @media (width <= 767px) {
    grid-template: 'image' 'body' / 1fr;
    gap: 1.5rem;
  }

  .industry-item-image-container {
    grid-area: image;
    overflow: hidden;

    /* stylelint-disable-next-line no-descending-specificity */
    img {
      transition: transform 0.6s ease;

      :is(.industry-item:hover) & {
        transform: scale(1.03);
      }
    }
  }

  .industry-item-body {
    display: flex;
    flex-direction: column;
    grid-area: body;
    gap: 1.5rem;

    @media (width <= 767px) {
      width: 91.5%;
      margin: auto;
    }
  }

  .link-button {
    &::after {
      position: absolute;
      inset: 0;
      content: '';
    }

    @media (width <= 767px) {
      align-self: flex-end;
    }
  }

  .industry-item-title {
    font-size: clamp(1.875rem, 1.554rem + 1.61vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-black);

    :is(html[lang='ja'], html[lang='jp']) :is(&:not(.en-label)) {
      font-size: clamp(1.75rem, 1.536rem + 1.07vw, 2.5rem);
    }
  }

  .industry-item-subtitle {
    font-size: clamp(0.75rem, 0.714rem + 0.18vw, 0.875rem);
    line-height: 1;
    color: var(--color-gray);
  }
}

.products-section {
  padding: 7.5rem 0;
  background-color: var(--color-white);

  @media (width <= 767px) {
    padding: 3.75rem 0;
  }
}

.products-slider-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1360px;
  margin: 0 auto;
}

.products-slider {
  margin-bottom: 2rem;
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);

  @media (width <= 767px) {
    margin-bottom: 0;
  }
}

.product-slide-item {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  border-radius: 8px;

  .product-label {
    z-index: 1;
    grid-area: 1 / 1 / 2 / 2;
    place-self: start center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-black);
    text-align: center;

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

  .product-image-container {
    grid-area: 1 / 1 / 2 / 2;
    overflow: hidden;
    border-radius: 8px;

    .product-image {
      transition: transform 0.6s ease;

      :is(.product-slide-item:hover) & {
        transform: scale(1.03);
      }
    }
  }

  .product-caption {
    margin-top: 0.5rem;
    color: var(--color-black);
    text-align: left;
  }
}

.splide-navigation {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;

  @media (width <= 767px) {
    display: none;
  }
}

.splide-nav-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  cursor: pointer;
  background-color: var(--color-gray-bg);
  border: 1px solid var(--color-gray-bg);
  border-radius: 10px;
  transition: all 0.3s ease;

  svg {
    width: 16px;
    height: 16px;
    color: var(--color-black);
    transition: color 0.3s ease;
  }

  &:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);

    svg {
      color: var(--color-white);
    }
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.3;

    &:hover {
      background: var(--color-white);
      border-color: var(--color-gray-bg);

      svg {
        color: currentcolor;
      }
    }
  }
}

.quality-section {
  position: relative;
  color: var(--color-white);
}

.quality-content-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template:
    'title title'
    '. .'
    'main link' / auto auto;
  max-width: 1360px;
  padding: 2.8% 0;
  margin: 0 auto;

  @media (width <= 767px) {
    grid-template: 'title . .' 'main main main' '. . link' 15% / auto 1fr auto;
  }

  .quality-section-title-container {
    grid-area: title;
    place-self: start;
  }

  .quality-section-main-container {
    grid-area: main;
    place-self: end start;
    max-width: 408px;
  }

  .quality-section-link-container {
    grid-area: link;
    place-self: end end;
  }

  .link-button {
    color: var(--color-white);

    &::after {
      position: absolute;
      inset: 0;
      content: '';
    }

    :is(.quality-section:hover) & {
      .arrow-button-svg {
        .arrow-circle {
          fill: var(--color-accent);
          stroke: transparent;
        }
      }
    }
  }
}

.quality-section-image-container {
  overflow: hidden;
}

.quality-section-image {
  width: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;

  :is(.quality-section:hover) & {
    transform: scale(1.03);
  }
}

.quality-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

.quality-catchphrase {
  margin-bottom: 1.5rem;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;

  :is(html[lang='ja'], html[lang='jp']) :is(&:not(.en-label)) {
    font-size: 2.5rem;
  }

  @media (width <= 767px) {
    margin-bottom: 0.5rem;
  }
}

.quality-section-main-description {
  font-size: 1rem;
  line-height: 1.5;
}

.about-section {
  padding: 7.5rem 0;
  background-color: var(--color-white);

  @media (width <= 767px) {
    padding: 3.75rem 0;
  }
}

.about-section-text-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 3rem;

  @media (width <= 767px) {
    grid-template-columns: 1fr;
    margin-bottom: 1.5rem;
  }
}

.about-section-text-main-subtitle {
  line-height: 1.2;
}

.about-section-image-grid {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
}

.about-section-image-card {
  display: grid;
  container-type: inline-size;
  overflow: hidden;

  .about-section-image-card-image {
    z-index: -1;
    grid-area: 1/1;
    transition: transform 0.5s ease;
  }

  &:hover {
    .about-section-image-card-image {
      transform: scale(1.03);
    }
  }

  .about-section-image-card-title {
    grid-area: 1/1;
    place-self: center;
    font-size: 8cqw;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-white);
    text-align: center;
  }
}

.news-section {
  padding: 7.5rem 0;
  background-color: var(--color-gray-bg);

  @media (width <= 767px) {
    padding: 3.75rem 0;
  }
}

.news-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;

  @media (width <= 767px) {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.news-tab-content {
  ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  li {
    position: relative;
    padding: 1.5rem;
    background-color: var(--color-white);
    border-radius: 10px;
    transition:
      box-shadow,
      0.3s ease;

    @media (width <= 767px) {
      border-radius: 4px;
    }

    a::after {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      content: '';
    }

    &:hover {
      color: var(--color-black);
      box-shadow: var(--shadow);
    }

    p {
      display: flex;
      flex-direction: column;

      .tag {
        display: none;
      }
    }

    a {
      display: -webkit-box;
      flex-direction: column;
      padding: 0.1em;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      word-break: break-all;
      overflow-wrap: anywhere;
      -webkit-box-orient: vertical;

      &:hover {
        color: inherit;
      }
    }

    /* stylelint-disable-next-line selector-class-pattern */
    .icon_pdf {
      display: none;
      padding: 0 4px;
      margin-left: 0.5em;
      border: 1px solid var(--color-black);
    }
  }
}

.date {
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--color-gray);

  /* stylelint-disable-next-line selector-class-pattern */
  &:has(~ * .icon_pdf) {
    &::after {
      display: inline-block;
      width: 14px;
      height: 18px;
      margin-left: 0.5em;
      content: '';
      background-image: url("data:image/svg+xml,%3Csvg width='14' height='18' viewBox='0 0 14 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.69601 13.0713H1.48883V12.0869H2.69601C2.86615 12.0869 3.00388 12.0491 3.1092 11.9735C3.21453 11.8979 3.29149 11.7939 3.34011 11.6616C3.38872 11.5265 3.41302 11.3753 3.41302 11.2079C3.41302 11.0377 3.38872 10.8784 3.34011 10.7299C3.29149 10.5813 3.21453 10.4625 3.1092 10.3734C3.00388 10.2816 2.86615 10.2356 2.69601 10.2356H1.87367V15.1494H0.686749V9.25127H2.69601C3.093 9.25127 3.43328 9.33499 3.71684 9.50242C4.00311 9.66986 4.22321 9.90076 4.37714 10.1951C4.53108 10.4868 4.60805 10.8217 4.60805 11.1998C4.60805 11.5805 4.53108 11.9114 4.37714 12.1922C4.22321 12.4704 4.00311 12.6865 3.71684 12.8404C3.43328 12.9943 3.093 13.0713 2.69601 13.0713ZM6.94138 15.1494H5.90029L5.90839 14.1691H6.94138C7.22764 14.1691 7.45045 14.1178 7.60978 14.0152C7.76912 13.9125 7.88119 13.7505 7.94601 13.529C8.01352 13.3076 8.04728 13.0173 8.04728 12.6581V11.7385C8.04728 11.4658 8.02973 11.2349 7.99462 11.0458C7.95951 10.8541 7.9001 10.7001 7.81638 10.584C7.73266 10.4652 7.62058 10.3774 7.48015 10.3207C7.33972 10.264 7.16553 10.2356 6.95758 10.2356H5.88004V9.25127H6.95758C7.29786 9.25127 7.60708 9.30663 7.88524 9.41735C8.16341 9.52808 8.40241 9.69012 8.60226 9.90347C8.8021 10.1141 8.95604 10.3747 9.06406 10.6853C9.17209 10.9959 9.2261 11.3496 9.2261 11.7466V12.6581C9.2261 13.0578 9.17209 13.4116 9.06406 13.7194C8.95604 14.0273 8.8021 14.2879 8.60226 14.5013C8.40511 14.7119 8.16611 14.8726 7.88524 14.9833C7.60438 15.0941 7.28976 15.1494 6.94138 15.1494ZM6.58895 9.25127V15.1494H5.40203V9.25127H6.58895ZM11.2799 9.25127V15.1494H10.093V9.25127H11.2799ZM13.1271 11.7588V12.7391H10.9802V11.7588H13.1271ZM13.354 9.25127V10.2356H10.9802V9.25127H13.354Z' fill='%237e9099'/%3E%3Cpath d='M0 6.89573V1.25377C0 0.921249 0.132091 0.602348 0.367215 0.367221C0.602338 0.132093 0.921234 1.93832e-07 1.25375 1.93832e-07H8.77625C8.85859 -6.45602e-05 8.94015 0.0160958 9.01625 0.0475579C9.09235 0.07902 9.1615 0.125167 9.21976 0.183364L13.6079 4.57155C13.6661 4.62982 13.7122 4.69897 13.7437 4.77507C13.7752 4.85117 13.7913 4.93273 13.7912 5.01508V6.89573C13.7912 7.06199 13.7252 7.22144 13.6076 7.339C13.4901 7.45657 13.3306 7.52261 13.1644 7.52261C12.9981 7.52261 12.8387 7.45657 12.7211 7.339C12.6035 7.22144 12.5375 7.06199 12.5375 6.89573V5.64196H8.77625C8.60999 5.64196 8.45054 5.57591 8.33298 5.45835C8.21542 5.34079 8.14937 5.18134 8.14937 5.01508V1.25377H1.25375V6.89573C1.25375 7.06199 1.1877 7.22144 1.07014 7.339C0.95258 7.45657 0.793132 7.52261 0.626875 7.52261C0.460617 7.52261 0.301169 7.45657 0.183608 7.339C0.0660457 7.22144 0 7.06199 0 6.89573ZM9.40312 4.38819H11.6513L9.40312 2.14003V4.38819Z' fill='%237e9099'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      border-radius: 2px;
      transform: translateY(25%);
    }
  }
}

/* News Tabs */
.news-tabs-wrapper {
  width: 100%;
}

.news-tab-nav {
  display: flex;
  gap: 0;
  margin-bottom: 2rem;
}

.news-tab-button {
  padding: 0 1.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: rgb(224 174 194 / 100%);
  cursor: pointer;
  background: none;
  border: none;
  border-right: 1px dotted var(--color-gray);
  border-left: 1px dotted var(--color-gray);
  transition: all 0.3s ease;

  &:hover {
    color: var(--color-accent);
  }

  &.is-active {
    color: var(--color-accent);
  }

  & + & {
    border-left: none;
  }
}

.news-tab-panel {
  display: none;
  animation: fade-in 0.3s ease;

  &.is-active {
    display: block;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.news-tab-panel-link-container {
  display: flex;
  justify-content: end;
  margin-top: 1.5rem;
}

.news-slider {
  padding-top: 1.5rem;

  /* stylelint-disable-next-line selector-class-pattern */
  .splide__slide {
    opacity: 1; /* Override default opacity */

    /* stylelint-disable-next-line no-descending-specificity */
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  /* stylelint-disable-next-line selector-class-pattern */
  .splide__pagination {
    position: absolute;
    inset: 0 0 auto auto;
    width: auto;
    padding: 0;
    transform: none;
  }

  /* stylelint-disable-next-line selector-class-pattern */
  .splide__progress {
    background: #ccc;
  }

  /* stylelint-disable-next-line selector-class-pattern */
  .splide__progress__bar {
    width: 0;
    height: 5px;
    background: var(--color-accent);
  }

  /* stylelint-disable-next-line selector-class-pattern */
  .splide__pagination__page {
    width: 8px;
    height: 8px;
    margin: 0 2px;
    background: var(--color-gray);
    opacity: 1;

    &.is-active {
      background: var(--color-accent);
      transform: scale(1);
    }
  }
}

.sustainability-section {
  padding: 7.5rem 0;
  background-color: var(--color-white);

  @media (width <= 767px) {
    padding: 3.75rem 0;
  }

  .section-title {
    margin-bottom: 0;

    @media (width <= 767px) {
      margin-bottom: 1.5rem;
    }
  }
}

.sustainability-section-grid {
  display: grid;
  grid-template: '. image' 'title image' 'subtitle image' 'description image' 'link image' '. image' / 42% 400px;
  column-gap: 1.5rem;
  justify-content: space-between;

  @media (width <= 767px) {
    grid-template: 'title' 'image' 'subtitle' 'description' 'link' / auto;
  }

  .sustainability-section-image-container {
    height: 100%;
    max-height: 700px;
    margin: auto;
  }

  .image {
    grid-area: image;
  }

  .title {
    grid-area: title;
  }

  .subtitle {
    grid-area: subtitle;
  }

  .description {
    grid-area: description;
  }

  .link {
    grid-area: link;

    @media (width <= 767px) {
      justify-items: end;
    }
  }
}

.sustainability-section-image {
  width: 100%;
  height: 100%;
  min-height: 700px;
  object-fit: cover;
  object-position: center center;

  @media (width <= 767px) {
    min-height: unset;
  }
}

.sustainability-section-subtitle {
  margin-bottom: 1.5rem;
  font-size: clamp(2.5rem, 2.357rem + 0.71vw, 3rem);
  font-weight: 700;
  line-height: 1.2;

  :is(html[lang='ja'], html[lang='jp']) &:not(.en-label) {
    font-size: clamp(1.75rem, 1.536rem + 1.07vw, 2.5rem);
  }

  @media (width <= 767px) {
    margin-top: 1.5rem;
  }
}

.sustainability-section-description {
  margin-bottom: 1.5rem;

  @media (width <= 767px) {
    margin-bottom: 0.75rem;
  }
}