@charset "utf-8";

/*
==============
top.css
==============
*/

/* -----------------
■ firstview
------------------- */
.firstview {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  opacity: 0;
  background-color: #fff;
}

.firstview img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 128px;
  transform: translate(-50%, -50%);
}


body.is-start .firstview {
  animation: fadeInOut 4s ease forwards;
}

body.is-end .firstview {
  display: none;
}


@keyframes fadeInOut
{
  0% { opacity: 0; }
  20% { opacity: 0; }
  40% { opacity: 1; }
  60% { opacity: 1; }
  80% { opacity: 0; }
  100% { opacity: 0; }
}


@media screen and (max-width: 767px)
{
  

} /* media end */


/* -----------------
■ header
------------------- */
.header {
  opacity: 0;
}

body.is-end .header {
  opacity: 1;
}

.header h1,
.gnav__item,
.brand-list__item {
  opacity: 0;
  transition: 0.2s;
}

.header h1 {
  transition-delay: 0s;
}

.gnav__item:nth-of-type(1) {
  transition-delay: .05s;
}

.gnav__item:nth-of-type(2) {
  transition-delay: .1s;
}

.brand-list__item:nth-of-type(1) {
  transition-delay: .15s;
}

.brand-list__item:nth-of-type(2) {
  transition-delay: .2s;
}

.brand-list__item:nth-of-type(3) {
  transition-delay: .25s;
}

.brand-list__item:nth-of-type(4) {
  transition-delay: .30s;
}

.brand-list__item:nth-of-type(5) {
  transition-delay: .35s;
}

.brand-list__item:nth-of-type(6) {
  transition-delay: .40s;
}

.brand-list__item:nth-of-type(7) {
  transition-delay: .45s;
}

.brand-list__item:nth-of-type(8) {
  transition-delay: .50s;
}

.brand-list__item:nth-of-type(9) {
  transition-delay: .55s;
}

.brand-list__item:nth-of-type(10) {
  transition-delay: .60s;
}

.brand-list__item:nth-of-type(11) {
  transition-delay: .65s;
}

.brand-list__item:nth-of-type(12) {
  transition-delay: .70s;
}

.brand-list__item:nth-of-type(13) {
  transition-delay: .75s;
}

.brand-list__item:nth-of-type(14) {
  transition-delay: .80s;
}

.brand-list__item:nth-of-type(15) {
  transition-delay: .85s;
}

.brand-list__item:nth-of-type(16) {
  transition-delay: .90s;
}

.brand-list__item:nth-of-type(17) {
  transition-delay: .95s;
}

body.is-end .header h1,
body.is-end .gnav__item,
body.is-end .brand-list__item {
  opacity: 1;
}



/* -----------------
■ contents
------------------- */
.contents {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100svh - 58px);
  opacity: 0;
}

body.is-end .contents {
  opacity: 1;
}


@media screen and (max-width: 767px)
{
  .contents {
    height: calc(100svh - calc(58 / var(--customW)));
  }

} /* media end */




/* -----------------
■ brand-list
------------------- */
.brand-list {
  text-align: center;
}

.brand-list__item a {
  display: block;
  color: #fa0500;
  font-size: 1.8rem;
  line-height: 1.7;
  letter-spacing: 0.06em;
  transition: color .5s;
}

.brand-list__item-img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s;
  z-index: -1;
}

.brand-list__item-img img {
  max-width: none;
  height: 300px;
}

.brand-list__item.is-active .brand-list__item-img {
  opacity: 1;
  pointer-events: auto;
}

.brand-list.is-hover .brand-list__item a {
  color: #fec0bf;
}

.brand-list.is-hover .brand-list__item.is-active a {
  color: #fa0500;
}


@media screen and (max-width: 767px)
{
  .brand-list__item a {
    font-size: calc(18 / var(--customW));
    line-height: 1.97;
    transition: color 1s;
  }
  
  .brand-list__item-img img {
    width: auto;
    max-width: 100%;
    height: calc(225 / var(--customW));
    object-fit: cover;
  }
  
  .brand-list__item.is-active .brand-list__item-img {
    animation: fadeInOut2 3s ease forwards;
  }

  @keyframes fadeInOut2
  {
    0% { opacity: 0; }
    10% { opacity: 0; }
    40% { opacity: 1; }
    60% { opacity: 1; }
    90% { opacity: 0; }
    100% { opacity: 0; }
  }

} /* media end */