@charset "utf-8";

.intro {
  padding-block: 140px;
}
.intro__content {
  gap: 64px calc(64 / 1536 * 100%);
}
.intro__content__desc {
  width: calc(896 / 1536 * 100%);
}
/* .intro__content__desc__heading {
} */
.intro__content__desc__heading > span {
  display: block;
  width: calc(682 / 896 * 100%);
}
.intro__content__desc__heading > span + span {
  width: calc(868 / 896 * 100%);
}
.intro__content__desc__copy {
  margin-top: 40px;
  font-size: clamp(16px, calc(24 / 1200 * 100vw), 24px);
  line-height: 2.2;
}
.intro__content__photo {
  flex: 1;
}
.intro__content__photo img {
  width: calc(640 / 832 * 100%);
}
@media screen and (max-width: 767px){
  .intro {
    padding-block: 60px;
  }
  .intro__content {
    gap: 30px 0;
  }
  .intro__content__desc {
    width: 100%;
  }
  .intro__content__desc__heading > span {
    width: calc(251 / 320 * 100%);
  }
  .intro__content__desc__heading > span + span {
    width: 100%;
  }
  .intro__content__desc__copy {
    margin-top: 30px;
    font-size: 18px;
    line-height: 1.8;
  }
  .intro__content__photo {
    flex: 1 0 100%;
    margin-right: 0;
  }
  .intro__content__photo img {
    width: 100%;
  }
}



.story {
  position: relative;
  z-index: 2;
}
/* .story__content {
} */
.story__content__slide {
  position: relative;
  z-index: 1;
  grid-template-columns: calc(768 / 1920 * 100%) minmax(0, 1fr) calc(128 / 1920 * 100%);
  align-items: start;
  gap: 64px;
}
.story__content__slide::before {
  content: "";
  grid-column: 1 / 4;
  grid-row: 1;
  position: -webkit-sticky;
  position: sticky;
  z-index: -1;
  top: 0;
  display: block;
  width: 100%;
  height: 100lvh;
  background: url(../../img/service/bg_story_slide.webp) no-repeat top center/cover;
}
.story__content__slide__photo {
  grid-column: 1;
  grid-row: 1;
  position: -webkit-sticky;
  position: sticky;
  z-index: 2;
  top: 0;
  width: 100%;
  height: 100lvh;
  clip-path: polygon(0% 0%, calc(576 / 768 * 100%) 0%, 100% 100%, 0% 100%);
}
.story__content__slide__photo img {
  height: 100%;
  object-fit: cover;
  object-position: center right;
}
.story__content__slide__list {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 1;
  padding-block: var(--header-height) 25lvh;
}
.story__content__slide__list__item {
  padding-block: 120px 25lvh;
}
.story__content__slide__list__item__heading {
  display: inline-block;
  padding-bottom: .175em;
  font-size: clamp(22px, calc(32 / 1200 * 100vw), 32px);
  background: rgb(var(--color-white));
}
.story__content__slide__list__item__subheading {
  margin-top: 32px;
  line-height: 1.8;
}
.story__content__slide__list__item__copy {
  margin-top: 32px;
  font-size: clamp(14px, calc(20 / 1200 * 100vw), 20px);
  line-height: 1.9;
}
.story__content__slide__nav {
  grid-column: 3;
  grid-row: 1;
  position: -webkit-sticky;
  position: sticky;
  z-index: 2;
  top: 0;
  height: 100lvh;
  grid-template-columns: auto;
  align-content: center;
  gap: 48px 0;
}
.story__content__slide__nav__item {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: rgba(var(--color-white), .5);
  font-size: 0;
  transition: background .3s;
}
.story__content__slide__nav__item--active {
  background: rgba(var(--color-white), 1);
}
.story__content__copy {
  position: relative;
  z-index: 2;
  height: 0;
}
.story__content__copy__item {
  font-size: calc(130 / 1920 * 100vw);
  background: linear-gradient(90deg, rgb(var(--color-red)), rgb(var(--color-white)));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  translate: 0 -58%;
}
.story__content__about {
  position: relative;
  z-index: 3;
  max-width: 1024px;
  height: 0;
}
.story__content__about__link {
  position: relative;
  z-index: 1;
  display: block;
  translate: 0 -50%;
  box-shadow: 4px 4px 16px rgba(0, 0, 0, .2);
  background: rgb(var(--color-white));
}
.story__content__about__link__desc {
  position: absolute;
  z-index: 2;
  inset: 0;
  grid-template-columns: minmax(0, auto);
  justify-content: start;
  align-content: end;
  align-items: end;
  box-sizing: border-box;
  padding: 40px;
}
.story__content__about__link__desc__jaheading {
  font-size: clamp(14px, calc(20 / 1200 * 100vw), 20px);
  line-height: 1.45;
}
.story__content__about__link__desc__enheading {
  margin-top: 16px;
  font-size: clamp(22px, calc(32 / 1200 * 100vw), 32px);
}
.story__content__about__link__desc__enheading span {
  font-weight: 400;
  margin-inline: calc(8 / 32 * 1em);
  vertical-align: .05em;
}
.story__content__about__link__desc__enheading::after {
  content: "";
  display: inline-block;
  vertical-align: bottom;
  width: calc(20 / 32 * 1em);
  height: 1em;
  margin-left: calc(14 / 32 * 1em);
  background: rgb(var(--color-red));
  -webkit-mask: var(--svg-chevron) no-repeat center/100% auto;
  mask: var(--svg-chevron) no-repeat center/100% auto;
}
.story__content__about__link__photo {
  position: relative;
  z-index: 1;
}
@media (any-hover: hover) {
  .story__content__slide__nav__item:hover {
    background: rgba(var(--color-white), 1);
  }
  .story__content__about__link:hover .story__content__about__link__desc__enheading::after {
    animation: chevronAnimation .5s;
  }
}
@media screen and (min-width: 768px) and (max-width: 1400px) {
  .story__content__about {
    height: auto;
  }
}
@media screen and (max-width: 767px){
  .story__content__slide {
    grid-template-columns: minmax(0, 1fr) min(calc(300 / 380 * 100%), 560px) minmax(0, 1fr);
    gap: 0;
  }
  .story__content__slide::before {
    grid-row: 1 / 3;
    background: url(../../img/service/bg_story_slide-sp.webp) no-repeat top left/cover;
  }
  .story__content__slide__photo {
    grid-column: 1 / 4;
    z-index: 3;
    height: 30lvh;
    clip-path: none;
  }
  .story__content__slide__photo img {
    object-position: top center;
  }
  .story__content__slide__list {
    grid-column: 2;
    grid-row: 2;
    padding-block: 60px 25lvh;
  }
  .story__content__slide__list__item {
    padding-block: 30lvh 0;
  }
  .story__content__slide__list__item__heading {
    font-size: 20px;
  }
  .story__content__slide__list__item__subheading {
    margin-top: 20px;
    font-size: 22px;
  }
  .story__content__slide__list__item__copy {
    margin-top: 30px;
    font-size: 16px;
  }
  .story__content__slide__nav {
    grid-column: 3;
    grid-row: 2;
    top: 30lvh;
    height: 70lvh;
    gap: 20px 0;
    translate: 12px;
  }
  .story__content__copy__item {
    font-size: calc(65 / 380 * 100vw);
  }
  .story__content__about {
    max-width: 560px;
    height: auto;
    margin-top: 40px;
  }
  .story__content__about__link {
    translate: none;
    box-shadow: 4px 4px 16px rgba(0, 0, 0, .25);
  }
  .story__content__about__link__desc {
    padding: 20px;
  }
  .story__content__about__link__desc__jaheading {
    font-size: 15px;
    line-height: 1.45;
  }
  .story__content__about__link__desc__enheading {
    margin-top: 5px;
    font-size: 17px;
  }
  .story__content__about__link__desc__enheading::after {
    width: calc(12 / 18 * 1em);
    margin-left: calc(8 / 18 * 1em);
  }
}



.brands {
  position: relative;
  z-index: 1;
  padding-bottom: 25px;
}
.brands__intro {
  position: relative;
  z-index: 1;
  margin-bottom: -68px;
  grid-template-columns: max(2.5%, calc(var(--window-half-width) - 768px)) min(calc(608 / 1536 * 100%), 608px) minmax(0, 1fr) max(2.5%, calc(var(--window-half-width) - 768px));
  align-items: stretch;
}
.brands__intro__desc {
  grid-column: 2;
  padding-top: calc(310 / 608 * 100%);
}
/* .brands__intro__desc__heading {
} */
.brands__intro__desc__copy {
  margin-top: 48px;
}
.brands__intro__photo {
  grid-column: 3 / 5;
}
.brands__intro__photo img {
  display: block;
  width: calc(1152 / 1120 * 100%);
  max-width: none;
  height: 100%;
  margin-left: calc(32 / 1120 * -100%);
  object-fit: cover;
  object-position: bottom left;
}
.brands__content {
  position: relative;
  z-index: 2;
  grid-template-columns: max(2.5%, calc(var(--window-half-width) - 768px)) minmax(0, 1fr) 48px auto max(2.5%, calc(var(--window-half-width) - 768px));
  align-items: start;
  padding-block: 120px;
}
.brands__content + .brands__content {
  background: linear-gradient(0deg, rgb(var(--color-gray3)), rgb(var(--color-gray3))) no-repeat top center/min(95%, 1536px) 1px;
}
.brands__content__desc {
  grid-column: 2;
}
.brands__content__desc__heading {
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: end;
  gap: 12px 8px;
}
.brands__content__desc__heading > span {
  font-size: clamp(30px, calc(40 / 1200 * 100vw), 40px);
}
.brands__content__desc__heading > span + span {
  display: inline-block;
  padding-inline: .1em;
  font-size: clamp(14px, calc(20 / 1200 * 100vw), 20px);
  background: rgb(var(--color-red));
}
.brands__content__desc__copy {
  max-width: 703px;
  margin-top: 32px;
}
.brands__content__product {
  grid-column: 2;
  margin-top: 52px;
  grid-template-columns: auto 1px minmax(0, 1fr);
  align-items: stretch;
  gap: 0 calc(40 / 1280 * 100%);
}
.brands__content__product::before {
  content: "";
  display: block;
  width: 100%;
  background: rgb(var(--color-red));
}
.brands__content__product__heading {
  align-self: center;
  font-size: clamp(14px, calc(20 / 1200 * 100vw), 20px);
  order: -1;
}
.brands__content__product__list {
  gap: calc(16 / 14 * 1em);
  font-size: clamp(11px, calc(14 / 1200 * 100vw), 14px);
}
.brands__content__product__list__item {
  flex: 0 0 auto;
  border-radius: 9999px;
  padding: calc(8 / 14 * 1em) calc(16 / 14 * 1em);
  line-height: 1.428571429;
  background: rgb(var(--color-white));
}
.brands__content__control {
  grid-column: 4;
  align-self: end;
  width: 100%;
  grid-template-columns: auto auto;
  align-items: start;
  gap: 0 16px;
}
.brands__content__control__btn {
  position: relative;
  top: 0;
  margin-top: 0;
}
/* .brands__content__control__btn--prev {
}
.brands__content__control__btn--next {
} */
.brands__content__slide {
  grid-column: 2 / 6;
  width: 100%;
  margin-top: 48px;
}
/* .brands__content__slide__list {
} */
.brands__content__slide__list__item {
  flex: 0 0 min(calc((640 / 1920) * (var(--window-half-width) * 2)), 640px);
  padding-inline: 8px;
  translate: -8px;
}
.brands__content__link {
  grid-column: 2;
  margin-top: 48px;
  gap: 32px;
}
.brands__content__link__item {
  flex: 0 0 auto;
}
@media screen and (min-width: 768px) and (max-width: 1400px) {
  .brands__intro {
    grid-template-columns: max(2.5%, calc(var(--window-half-width) - 768px)) 40% minmax(0, 1fr) max(2.5%, calc(var(--window-half-width) - 768px));
    margin-bottom: 0;
  }
  .brands__intro__desc {
    padding-top: 40px;
  }
  .brands__intro__photo img {
    height: auto;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .brands__content__slide__list__item {
    flex: 0 0 44vw;
  }
}
@media screen and (max-width: 767px){
  .brands {
    margin-top: 50px;
    padding-bottom: 0;
  }
  .brands__intro {
    margin-bottom: 0;
    grid-template-columns: minmax(0, 1fr) min(calc(320 / 380 * 100%), 560px) minmax(0, 1fr);
    align-items: start;
  }
  .brands__intro__desc {
    padding-top: 0;
  }
  .brands__intro__desc__copy {
    margin-top: 30px;
  }
  .brands__intro__photo {
    grid-column: 1 / 4;
    margin-top: 60px;
  }
  .brands__intro__photo img {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-left: 0;
  }
  .brands__content {
    grid-template-columns: minmax(0, 1fr) min(calc(320 / 380 * 100%), 560px) minmax(0, 1fr);
    padding-block: 60px;
  }
  .brands__content + .brands__content {
    background-size: min(calc(320 / 380 * 100%), 560px) 1px;
  }
  .brands__content__desc__heading {
    grid-template-columns: minmax(0, auto);
    justify-items: start;
    align-items: start;
    gap: 10px 0;
  }
  .brands__content__desc__heading > span {
    font-size: 36px;
  }
  .brands__content__desc__heading > span + span {
    font-size: 16px;
  }
  .brands__content__desc__copy {
    max-width: none;
    margin-top: 30px;
  }
  .brands__content__product {
    margin-top: 30px;
    grid-template-columns: 100%;
    align-items: start;
    gap: 20px 0;
  }
  .brands__content__product::before {
    height: 1px;
  }
  .brands__content__product__heading {
    align-self: start;
    font-size: 20px;
  }
  .brands__content__product__list {
    gap: 8px;
    font-size: 12px;
  }
  .brands__content__product__list__item {
    padding: 4px 8px;
    line-height: 1.416666667;
  }
  .brands__content__control {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    justify-content: start;
    gap: 0 10px;
    margin-top: 20px;
  }
  .brands__content__slide {
    grid-column: 2 / 4;
    grid-row: 2;
    margin-top: 30px;
  }
  .brands__content__slide__list__item {
    flex: 0 0 min(calc((256 / 380) * (var(--window-half-width) * 2)), 256px);
    padding-inline: 5px;
    translate: -5px;
  }
  .brands__content__link {
    margin-top: 30px;
    gap: 20px 0;
  }
  .brands__content__link__item {
    flex: 1 0 100%;
  }
}



.corporate {
  padding-block: 120px 366px;
  background: rgb(var(--color-white));
}
/* .corporate__content {
}
.corporate__content__desc {
}
.corporate__content__desc__heading {
} */
.corporate__content__desc__copy {
  max-width: 704px;
  margin-top: 48px;
}
.corporate__content__list {
  margin-top: 48px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 48px calc(48 / 1536 * 100%);
}
/* .corporate__content__list__item {
} */
.corporate__content__list__item__jaheading {
  grid-template-columns: minmax(0, auto);
  justify-content: start;
  align-items: start;
  gap: 8px 0;
  font-size: clamp(16px, calc(24 / 1200 * 100vw), 24px);
}
.corporate__content__list__item__jaheading span {
  justify-self: start;
  display: inline-block;
  padding: .1em;
  font-size: calc(20 / 24 * 100%);
  background: rgb(var(--color-black2));
}
.corporate__content__list__item__photo {
  margin-top: 16px;
}
.corporate__content__list__item__desc {
  margin-top: 16px;
}
/* .corporate__content__list__item__desc__copy {
} */
.corporate__content__list__item__more {
  max-width: fit-content;
  margin-top: 48px;
}
.corporate__content__list__item__more a {
  background-color: rgb(var(--color-gray2));
}
@media screen and (max-width: 767px){
  .corporate {
    padding-block: 43px 175px;
  }
  .corporate__content__desc__copy {
    max-width: none;
    margin-top: 30px;
  }
  .corporate__content__list {
    margin-top: 60px;
    grid-template-columns: 100%;
    gap: 40px 0;
  }
  .corporate__content__list__item__jaheading {
    font-size: 22px;
    line-height: 1.6;
  }
  .corporate__content__list__item__jaheading span {
    font-size: calc(16 / 22 * 100%);
  }
  .corporate__content__list__item__photo {
    margin-top: 20px;
  }
  .corporate__content__list__item__desc {
    margin-top: 20px;
  }
  .corporate__content__list__item__more {
    max-width: 560px;
    margin-top: 20px;
  }
}