@import "variables.css";
@import "reset.css";
@import "base.css";
@import "header.css";
@import "footer.css";

html {
  scroll-behavior: unset !important;
}

main {
  color: var(--color-base);
}

/* loading */
.loading {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: grid;
  gap: var(--rem22);
  place-items: center;
  place-content: center;
  background: #a3a89d;
  transition: opacity 1s ease-out;
}

.loading.loaded {
  opacity: 0;
}

.lading__item {
  -webkit-clip-path: inset(100% 0 0 0);
  clip-path: inset(100% 0 0 0);
  -webkit-animation: loading 1s ease-in-out forwards;
  animation: loading 1s ease-in-out forwards;
}

.loading__logo {
  width: min(145px, 100%);
}

.loading__colors {
  display: flex;
  gap: var(--rem12);
}

.loadingColor {
  width: var(--rem6);
  aspect-ratio: 1;
  border-radius: 50%;
}

@-webkit-keyframes loading {
  0% {
    transform: translateY(100%);
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
  }
  100% {
    transform: translateY(0);
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes loading {
  0% {
    transform: translateY(100%);
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
  }
  100% {
    transform: translateY(0);
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
}

.main {
  font-family: "Shuei KakuGo Gin M";
  font-size: 1rem;
}

/* mv */
.mv {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  height: 100svh;
  min-height: 100svh;
}

.mv__title {
  position: relative;
  z-index: 2;
  max-width: 92px;
}

.mv__text {
  position: absolute;
  top: 1.875rem;
  left: 1rem;
  z-index: 2;
  display: block;
  max-width: 114px;
}

.mvVideo {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mvVideo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.1;
}
/* 
@media (min-aspect-ratio: 4/3) {
  .mvVideo {
    background: center / cover no-repeat url("../images/poster_pc.webp");
  }
}

@media (max-aspect-ratio: 4/3) {
  .mvVideo {
    background: center / cover no-repeat url("../images/poster_sp.webp");
  }
} */

@media (min-width: 768px) {
  .mv__title {
    max-width: 328px;
  }

  .mv__text {
    top: var(--rem40);
    left: 50%;

    max-width: 222px;
    transform: translateX(-50%);
  }
}

.fade-bg-area {
  position: relative;
  z-index: 1;
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
  background: var(--color-main);
}

.fade-bg-area__bg {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 200vh;
  z-index: -1;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    #fff 50%,
    #fff 100%
  );
  transform: translateY(100%);
}

/* fixed button */

.fixed-button-wrapper {
  position: fixed;
  right: calc(26 * 0.0625rem);
  bottom: calc(30 * 0.0625rem);
  z-index: 10;
  display: block;
}

.fixed-button {
  display: block;
  width: 116px;
  aspect-ratio: 1;
  background: center / contain no-repeat url(../images/fixed_button_bg.webp);
}

.fixed-button__text {
  position: absolute;
  top: calc(13.5 / 116 * 100%);
  left: 50%;
  width: calc(66 / 116 * 100%);
  transform: translateX(-50%);
}

.fixed-button__img {
  position: absolute;
  top: calc(40 / 116 * 100%);
  right: 0;
  width: calc(97 / 116 * 100%);
}
/* filter: drop-shadow(7px 15px 12.3px rgba(0, 0, 0, 0.15)); */

@media (min-width: 768px) {
  .fixed-button-wrapper {
    right: calc(52 * 0.0625rem);
    bottom: calc(52 * 0.0625rem);
  }

  .fixed-button {
    width: 150px;
  }

  .fixed-button__text {
    position: absolute;
    top: calc(17 / 150 * 100%);
    left: 50%;
    width: calc(85 / 150 * 100%);
    transform: translateX(-50%);
  }

  .fixed-button__img {
    position: absolute;
    top: calc(51 / 150 * 100%);
    right: 0;
    width: calc(125 / 150 * 100%);
    filter: drop-shadow(7px 15px 12.3px rgba(0, 0, 0, 0.15));
  }
}

/* yodogawa */
.yodogawa {
  padding: var(--rem120) var(--rem18);
}

.yodogawa__logo {
  max-width: 218px;
  margin-inline: auto;
}

.yodogawa__logo svg {
  width: 100%;
  height: auto;
}

.yodogawaText {
  max-width: 153px;
  margin-top: var(--rem80);
  margin-inline: auto;
}

.yodogawaText svg {
  width: 100%;
  height: auto;
}

.yodogawa__colors {
  display: flex;
  justify-content: center;
  gap: var(--rem16);
  margin-top: var(--rem64);
}

.yodogawa__color {
  width: var(--rem9);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

.yodogawa__message {
  margin-top: var(--rem64);
  font-size: var(--rem16);
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 3;
  color: #fff;
  font-size: var(--rem16);
}

@media (min-width: 768px) {
  .yodogawa {
    padding: 15rem var(--gutter-x-tablet);
  }

  .yodogawa__logo {
    max-width: 328px;
  }

  .yodogawaText {
    max-width: 315px;
    margin-top: var(--rem90);
  }

  .yodogawa__colors {
    display: flex;
    justify-content: center;
    gap: var(--rem16);
    margin-top: var(--rem52);
  }

  .yodogawa__message {
    margin-top: var(--rem90);
    font-size: var(--rem18);
    letter-spacing: 0.2em;
    font-size: var(--rem18);
  }
}

/* concept */
.concept {
  padding-top: var(--rem30);
  padding-bottom: var(--rem120);
}

.concept__title {
  max-width: 80px;
  margin-inline: auto;
}

.concept__lead {
  margin-top: var(--rem44);
  font-size: var(--rem14);
  letter-spacing: 0.2em;
  line-height: 3;
  text-align: center;
}

.conceptColors {
  display: flex;
  justify-content: center;
  gap: var(--rem18);
}

.conceptColor {
  margin-top: var(--rem80);
  width: var(--rem10);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

.concept__content {
  display: grid;
  gap: var(--rem64);
}

.conceptBlock {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rem64);
}

.conceptBlock__img {
  overflow: hidden;
}

.conceptBlock01__img {
  /* margin-right: var(--rem27); */
}

.conceptBlock_text {
  font-size: var(--rem14);
  letter-spacing: 0.2em;
  line-height: 3.2;
  padding-inline: var(--gutter-x-mobile);
}

.conceptBlock02__img {
  /* margin-left: var(--rem124); */
}

.conceptBlock03__img {
}

@media (min-width: 768px) {
  .concept {
    padding-top: var(--rem160);
    padding-bottom: var(--rem160);
    overflow: clip;
  }

  .concept__lead {
    margin-top: var(--rem120);
    font-size: var(--rem18);
  }

  .conceptColors {
    gap: var(--rem24);
  }

  .conceptColor {
    margin-top: var(--rem120);
    width: var(--rem12);
  }

  .concept__content {
    gap: var(--rem120);
    margin-top: var(--rem130);
  }

  .conceptBlock {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(10 * 0.0625rem);
    width: 90%;
    max-width: 1224px;
    margin-inline: auto;
  }

  .conceptBlock__img {
    flex: 1;
    max-width: 806px;
  }

  .conceptBlock01__img {
  }

  .conceptBlock_text {
    padding: 0;
    font-size: var(--rem15);
    line-height: 2.8;
  }

  .conceptBlock01__text {
    padding-inline: 0 calc(50 * 0.0625rem);
  }

  .conceptBlock02 {
  }

  .conceptBlock02__img {
    order: 2;
    margin-left: 0;
  }

  .conceptBlock03 {
    gap: var(--rem54);
  }

  .conceptBlock03__img {
    margin-inline: 0;
  }

  .conceptBlock03__text {
    padding-right: calc(35 * 0.0625rem);
  }

  .conceptBlock04 {
  }

  .conceptBlock04__img {
    order: 2;
  }

  .conceptBlock04__text {
    text-align: left;
  }
}

/* @media (min-width: 1440px) {
  .conceptBlock {
    width: 81%;
    max-width: unset;
  }

  .conceptBlock01__img {
    margin-left: calc((100vw - 81vw) / -2);
  }

  .conceptBlock03__img {
    margin-left: calc((100vw - 81vw) / -2);
  }

  .conceptBlock04__img {
    margin-right: calc((100vw - 81vw) / -2);
  }
} */

/* new line up */
.newLineUp {
  padding-bottom: calc(120 * 0.0625rem);
  background: linear-gradient(to bottom, #ebf0f5, #cdd8e3);
}

.newLineUp__wrapper {
}

.newLineUpTop {
}

.newLineUpTop__img {
  overflow: hidden;

  picture,
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.newLineUpTop__imgInner {
  width: 100%;
  height: 100vh;
}

.newLineUpTop__body {
  padding: calc(64 * 0.0625rem) calc(26 * 0.0625rem) 0;
}

.newLineUpTop__title {
  display: grid;
  justify-items: center;
  gap: calc(12 * 0.0625rem);
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 500;
  font-size: calc(24 * 0.0625rem);
  letter-spacing: 0.1em;
  line-height: 1.4;
  color: #5f8698;

  .year {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    letter-spacing: 0.2em;
    line-height: 1;
  }
}

.newLineUpTop__text {
  margin-top: calc(64 * 0.0625rem);
  font-size: calc(15 * 0.0625rem);
  line-height: 1.8;
  letter-spacing: 0.1em;
}

.newLineUpTop__scroll {
  display: none;
}

.newLineUpItem {
}

.newLineUpItem__container {
  padding: calc(80 * 0.0625rem) calc(27 * 0.0625rem) 0;
}

.newLineUpItem__main {
  position: relative;
  padding-bottom: calc(24 * 0.0625rem);
}

.newLineUpItem__title {
  font-family: "Roboto Condensed", sans-serif;
  font-family: 500;
  font-size: calc(16 * 0.0625rem);
  line-height: 1.4;
  color: #5f8698;
  letter-spacing: 0.1em;
}

.newLineUpItem__info {
  margin-top: calc(24 * 0.0625rem);
}

.newLineUpItem__brand {
  margin-top: calc(12 * 0.0625rem);

  font-size: calc(10 * 0.0625rem);
  line-height: 1.4;
}

.newLineUpItem__name {
  display: flex;
  align-items: center;
  min-height: calc(66 * 0.0625rem);
  margin-top: calc(12 * 0.0625rem);
  font-family: "Shuei KakuGo Gin B";
  font-size: calc(16 * 0.0625rem);
  line-height: 1.4;
}

.newLineUpItem__detail {
  margin-top: calc(8 * 0.0625rem);
  font-size: calc(10 * 0.0625rem);
  line-height: 1.4;
}

.newLineUpItem__icon {
  position: absolute;
  top: calc(-20 * 0.0625rem);
  right: calc(-4 * 0.0625rem);
  width: calc(72 * 0.0625rem);
}

.newLineUpItem__text {
  margin-top: calc(24 * 0.0625rem);
  font-size: calc(14 * 0.0625rem);
  line-height: 1.8;
  letter-spacing: 0.05em;
}

.newLineUpItem__img {
}

.newLineUpItem__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: calc(24 * 0.0625rem);
  padding-left: calc(15 * 0.0625rem);
  padding-bottom: calc(12 * 0.0625rem);
  font-family: "Roboto", sans-serif;
  font-size: calc(12 * 0.0625rem);

  &::before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--color-base);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1s;
  }

  &::after {
    content: "";
    display: block;
    width: calc(24 * 0.0625rem);
    aspect-ratio: 1;
    background: center / 14px auto no-repeat url("../images/arrow_right.svg");
  }
}

.newLineUpItem__button.is-animated::before {
  transform: scaleX(1);
}

@media (min-width: 768px) {
  .newLineUp {
    padding-bottom: 0;
  }

  .newLineUp__wrapper {
    width: 100%;
    overflow: hidden;
  }

  .newLineUp__container {
    display: flex;
    width: max-content;
    padding-left: 0;
    padding-right: calc(248 * 0.0625rem);
  }

  .newLineUpTop {
    flex-shrink: 0;
    display: flex;
    gap: calc(240 * 0.0625rem);
    height: 100svh;
  }

  .newLineUpTop__img {
    position: relative;
    width: calc(100vw + 400px);
    height: 100svh;
  }

  .newLineUpTop__imgInner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100%;
    overflow: hidden;
  }

  .newLineUpTop__body {
    display: flex;
    align-content: center;
    gap: calc(80 * 0.0625rem);
    max-height: calc(100svh - 80px);
    height: calc(576 * 0.0625rem);
    margin: auto 0;
    padding: 0;
  }

  .newLineUpTop__title {
    display: flex;
    flex-direction: column;
    justify-items: start;
    gap: calc(8 * 0.0625rem);
  }

  .newLineUpTop__text {
    margin-top: 0;
    line-height: 2.8;
  }

  .newLineUpTop__scroll {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(28 * 0.0625rem);
    width: 155px;
    margin-top: auto;
    font-size: calc(16 * 0.0625rem);
    line-height: 1.05;
    letter-spacing: 0.09em;

    &::after {
      content: "";
      display: block;
      width: calc(24 * 0.0625rem);
      aspect-ratio: 1;
      background: left center / 14px auto no-repeat
        url("../images/arrow_right.svg");
    }
  }

  .newLineUpItem {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 100svh;
    margin-left: calc(180 * 0.0625rem);
    padding: calc(40 * 0.0625rem) 0;
  }

  .newLineUpTop + .newLineUpItem {
    margin-left: calc(275 * 0.0625rem);
  }

  .newLineUpItem__container {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 1fr auto;
    gap: calc(24 * 0.0625rem) calc(40 * 0.0625rem);
    padding: 0;
    height: stretch;
    max-height: 616px;
  }

  .newLineUpItem__main {
    display: flex;
    flex-direction: column;
    min-width: 336px;
    gap: calc(24 * 0.0625rem);
    grid-column: 2/3;
    grid-row: 1/2;
    padding-bottom: 0;
    padding-top: calc(56 * 0.0625rem);
  }

  .newLineUpItem__title {
    height: calc(56 * 0.0625rem);
  }

  .newLineUpItem__info {
    margin-top: 0;
  }

  .newLineUpItem__brand {
    margin-top: 0;
  }

  .newLineUpItem__detail {
    margin-top: calc(8 * 0.0625rem);
  }

  .newLineUpItem__icon {
    position: absolute;
    top: calc(20 * 0.0625rem);
    right: 0;
    width: calc(92 * 0.0625rem);
  }

  .newLineUpItem__text {
    flex: 1;
    display: flex;
    align-items: center;
    margin-top: 0;
  }

  .newLineUpItem__img {
    grid-column: 1/2;
    grid-row: 1/3;
    aspect-ratio: 1;
    max-width: 616px;
    max-height: 100%;
  }

  .newLineUpItem__button {
    grid-column: 2/3;
    grid-row: 2/3;

    margin-top: 0;
    margin-bottom: calc(56 * 0.0625rem);

    &::before {
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 1s;
    }
  }

  .newLineUpItem__button.is-animated::before {
    transform: scaleX(1);
  }
}

@media (hover: hover) {
  .newLineUpItem__button::after {
    transition: transform 0.3s ease-out;
  }

  .newLineUpItem__button:hover::after {
    transform: translateX(5px);
  }
}

/* parallax */
.parallax {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding-top: calc(300 / 390 * 100%);
  width: 100%;
}

.parallax__scroll {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.parallax__img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 130%;
}

.parallax__img img,
.parallax__img picture {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media (min-width: 768px) {
  .parallax {
    padding-top: calc(810 / 1440 * 100%);
    background: var(--color-bg);
  }

  .parallax__img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 130%;
  }
}

/* full line up */
.fullLineUp {
  padding: var(--rem80) var(--rem25) var(--rem148);
}

.fullLineUp__container {
  max-width: 1224px;
  margin: 0 auto;
}

.fullLineUp__title {
  font-family: "Shuei KakuGo Gin B";
  font-size: var(--rem14);
  letter-spacing: 0.1em;
  line-height: 1.4;

  &::before {
    display: block;
    content: attr(data-en);
    margin-bottom: var(--rem12);
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: var(--rem28);
    line-height: 1;
    letter-spacing: 0.2em;
  }
}

.fullLineUp__items {
  display: grid;
  gap: calc(64 * 0.0625rem) calc(28 * 0.0625rem);
  max-width: 1064px;
  margin: calc(80 * 0.0625rem) auto 0;
}

.fullLineUpItem {
  &.is-new {
    display: none;
  }

  &.is-hot {
    .fullLineUpItem__img::after {
      content: "";
      position: absolute;
      top: calc(12 * 0.0625rem);
      left: calc(12 * 0.0625rem);
      z-index: 2;
      display: block;
      width: calc(51 / 336 * 100%);
      aspect-ratio: 1;
      background: center / contain no-repeat url("../images/icon_hot.svg");
    }
  }
}

.fullLineUpItem__en {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: calc(20 * 0.0625rem);
  letter-spacing: 0.1em;
  line-height: 1.4;
}

.fullLineUpItem__img {
  position: relative;
  margin-top: calc(24 * 0.0625rem);
}

.is-new {
}

.fullLineUpItem__brand {
  margin-top: calc(24 * 0.0625rem);
  font-size: calc(10 * 0.0625rem);
  line-height: 1.4;
}

.fullLineUpItem__name {
  display: flex;
  align-items: center;
  min-height: calc(66 * 0.0625rem);
  margin-top: calc(12 * 0.0625rem);
  font-family: "Shuei KakuGo Gin B";
  font-size: calc(16 * 0.0625rem);
  line-height: 1.4;
}

.fullLineUpItem__info {
  margin-top: calc(8 * 0.0625rem);
  font-size: calc(10 * 0.0625rem);
  line-height: 1.4;
}

.fullLineUpItem__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: calc(9 * 0.0625rem);
  padding-left: calc(15 * 0.0625rem);
  margin-top: calc(24 * 0.0625rem);
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: calc(12 * 0.0625rem);
  border-bottom: 1px solid var(--color-base);

  &::after {
    content: "";
    display: block;
    width: calc(24 * 0.0625rem);
    aspect-ratio: 1;
    background: center / contain no-repeat url("../images/arrow_right.svg");
  }
}

.is-hot {
}

@media (min-width: 768px) {
  .fullLineUp {
    padding: var(--rem160) var(--gutter-x-tablet) var(--rem200);
  }

  .fullLineUp__items {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  .fullLineUpItem {
    &.is-new {
      display: block;

      .fullLineUpItem__img::after {
        content: "";
        position: absolute;
        top: calc(12 * 0.0625rem);
        left: calc(12 * 0.0625rem);
        z-index: 2;
        display: block;
        width: calc(51 / 336 * 100%);
        aspect-ratio: 1;
        background: center / contain no-repeat url("../images/icon_new.svg");
      }
    }

    &.is-hot {
      .fullLineUpItem__img::after {
        content: "";
        position: absolute;
        top: calc(12 * 0.0625rem);
        left: calc(12 * 0.0625rem);
        z-index: 2;
        display: block;
        width: calc(51 / 336 * 100%);
        aspect-ratio: 1;
        background: center / contain no-repeat url("../images/icon_hot.svg");
      }
    }
  }

  .fullLineUpItem__en {
    display: none;
  }

  .fullLineUpItem__img {
    margin-top: 0;
  }
}

@media (hover: hover) {
  .fullLineUpItem__button::after {
    transition: transform 0.3s ease-out;
  }

  .fullLineUpItem__button:hover::after {
    transform: translateX(5px);
  }
}

/* linear swiper */
.linearSwiper .swiper-slide {
  width: 300px;
}

@media (min-width: 768px) {
  .linearSwiper .swiper-slide {
    width: 600px;
  }
}

/* shop */
.shop {
  padding: var(--rem80) var(--gutter-x-mobile);
}

.shop__title {
  font-family: "Shuei KakuGo Gin B";
  font-size: var(--rem14);
  letter-spacing: 0.1em;
  line-height: 1.4;
}

.shop__title::before {
  display: block;
  content: attr(data-en);
  margin-bottom: var(--rem12);
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: var(--rem28);
  line-height: 1;
  letter-spacing: 0.2em;
}

.shop__content {
  display: grid;
  gap: var(--rem64);
  margin-top: var(--rem80);
  padding-inline: var(--rem30);
}

.shopGroup__title {
  font-family: "Shuei KakuGo Gin B";
}

.shopGroup__content {
  margin-top: var(--rem16);
  padding-left: 1em;
  line-height: 2;
  letter-spacing: 0.1em;
  font-size: var(--rem14);
}

@media (min-width: 768px) {
  .shop {
    padding: 10rem var(--gutter-x-tablet);
  }

  .shop__container {
    display: flex;
    gap: 26.625rem;
    max-width: 1152px;
    margin-inline: auto;
  }

  .shop__title::before {
    margin-bottom: var(--rem16);
  }

  .shop__content {
    margin-top: 0;
    padding-inline: 0;
  }
}

.items {
  padding: var(--rem80) var(--rem20);
}

@media (min-width: 768px) {
  .items {
    padding-block: 0 var(--rem160);
  }
}