html{
  color: var(--color-text-main);
  letter-spacing: 0.05em;
}

/* reset */
#Contents h2{
  margin: 0;
}

/* common */
.home-main a{
  transition: all 0.3s;
}

.home-main{
  font-family: "Noto Serif JP", serif;
}

.home-main p a{
  border-bottom: 1px solid var(--color-text-link);
  color: var(--color-text-link);
}

.home-main img{
  width: 100%;
  height: auto;
}

#tblLayout{
  table-layout: fixed;
  width: 100%;
}

.home-section{
  padding-block: 6rem;
}

.home-section:not(.home-banner,.home-mv){
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: 2rem;
}

/* mv */
.home-main .home-mv{
  padding-top: 0;
}

.home-main .home-mv .mv-item{
  position: relative;
}

.home-main .home-mv .mv-item .mv-text-area{
  width: 87.5%;
  position: absolute;
  top: 12.5625%;
  left: 6.25%;
}

#Contents .home-main .home-mv .mv-item .c-heading{
  color: var(--color-white);
  text-align: left;
  margin-bottom: 5.6rem;
}

#Contents .home-main .home-mv .mv-item .c-heading .c-heading--en{
  font-size: min(7vw,10rem);
}

#Contents .home-main .home-mv .mv-item .c-heading .c-heading--jp{
  font-size: 1.5rem;
  line-height: 1;
  margin-top: -0.2rem;
}

.home-main .home-mv .mv-item .c-text-button{
  margin-top: 0;
  color: var(--color-white);
}

/* mv color black */
#Contents .home-main .home-mv .mv-item.color--black .c-heading,
#Contents .home-main .home-mv .mv-item.color--black .c-text-button{
  color: var(--color-text-main);
}
#Contents .home-main .home-mv .mv-item.color--black .c-text-button::after{
  background-color: var(--color-text-main);
}

/* mv color orange */
#Contents .home-main .home-mv .mv-item.color--orange .c-heading,
#Contents .home-main .home-mv .mv-item.color--orange .c-text-button{
  color: var(--color-accent);
}
#Contents .home-main .home-mv .mv-item.color--orange .c-text-button::after{
  background-color: var(--color-accent);
}

/* ranking */
.home-product .swiper{
  width: 87.6666666667%;
  max-width: 1052px;
  height: 47rem;
  opacity: 0;
  transition: all 0.3s;
}

.home-product .swiper.swiper-initialized{
  height: auto;
  opacity: 1;
}

.swiper-container{
  width: 100%;
  position: relative;
}

.swiper-button-next, .swiper-button-prev{
  --swiper-navigation-size: 3rem;
  width: calc(var(--swiper-navigation-size) * 0.5);
  height: var(--swiper-navigation-size);
  background-repeat: no-repeat;
  background-size: contain;
}

.home-product .swiper-container .swiper-pagination{
  display: none;
  top: unset;
  bottom: 0;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
  --swiper-pagination-bullet-horizontal-gap: 0.5rem;
}

.swiper-pagination-bullet{
  --swiper-pagination-bullet-width: 0.6rem;
  --swiper-pagination-bullet-height: 0.6rem;
  --swiper-pagination-bullet-inactive-color: var(--color-accent);
  opacity: 0.4;
}

.swiper-pagination-bullet-active{
  --swiper-pagination-color: var(--color-accent);
  opacity: 1;
}


.swiper-button-next{
  background-image: url(../Contents/ThemeImage/common/swiper-arrow-next.svg);
}

.swiper-button-prev{
  background-image: url(../Contents/ThemeImage/common/swiper-arrow-prev.svg);
}

.swiper-button-next:after, .swiper-button-prev:after{
  display: none;
}

.swiper-button-prev, .swiper-rtl .swiper-button-next,
.swiper-button-next, .swiper-rtl .swiper-button-prev{
  --swiper-navigation-sides-offset: 0;
}

/* banner */
.home-main .banner-inner{
  overflow: hidden;
  position: relative;
  transition: all 0.3s;
}

.home-main .banner-inner .banner-img{
  display: block;
}

.home-main .banner-inner .banner-img img{
  transition: all 0.3s;
}

#Contents .home-main .home-banner .c-heading{
  margin-bottom: 0;
  white-space: nowrap;
  width: fit-content;
  max-width: 100%;
  overflow-wrap: break-word;
  pointer-events: none;
}

.home-main .home-banner .banner-text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  pointer-events: none;
}

.home-main .home-banner .banner-text .c-heading{
  color: var(--color-white);
}

.home-main .home-banner .c-text-button.c-text-button--hover-text{
  width: 6.5rem;
  pointer-events: all;
}

@media (hover: hover) {
  .home-main .banner-inner .banner-img:hover{
    opacity: 1;
  }

  .home-main:has(a) .banner-inner:hover .banner-img img{
    scale: 1.05;
  }

  .home-main .home-banner .c-text-button.c-text-button--hover-text:hover{
    width: 12rem;
  }
}

#Contents .home-main .home-description .c-heading{
  text-align: left;
  margin-bottom: 0;
}

.home-main .description-inner{
  display: flex;
  align-items: flex-start;
  gap: 6rem;
  max-width: 100%;
}

.home-main .description-img-wrap{
  flex: 4 1 0;
  max-width: 100%;
}

.home-main video,
.home-main iframe,
.home-main .description-img{
  max-width: 600px;
  min-width: 0;
}

.home-main .description-text-area{
  flex: 6 1 0;
  max-width: 540px;
  margin-top: -0.5rem;
}

.description-text-wrap{
  position: relative;
}

.home-main .description-text-area .c-heading{
  text-align: left;
}

.home-main .description-text{
  position: relative;
  font-size: 1.5rem;
  line-height: 1.75;
  letter-spacing: 0.05em;
}

.home-main .home-about .description-text-wrap{
  padding-bottom: 6rem;
}

.home-main .home-about .description-text{
  max-height: 500px;
  overflow: hidden;
  transition: max-height 0.6s ease;
}


.home-main .description-text.is-open{
  max-height: none;
}

.description-text.has-viewmore::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 25rem;
  pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 47.78%, #fff 100%);
}

.description-text.is-open::after {
  display: none;
}

.viewmore-btn {
  background-color: transparent;
  outline: none;
  padding: 0;
  appearance: none;
  border: none;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  font-size: 1.2rem;
  cursor: pointer;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-text-main);
  font-family: var(--font-en-2);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.2em;
  color: var(--color-text-main);
}

.home-main .c-heading + .description-text-wrap{
  margin-top: 3.5rem;mini
}

.home-main .home-description .c-button{
  width: 30rem;
  margin: 3.7rem 0 0;
}

#Contents .home-main .home-description--heading-out .c-heading{
  margin-bottom: 8rem;
  gap: 0.5rem;
  text-align: center;
}

#Contents .home-main .home-description--heading-out .c-heading .c-heading--en{
  font-size: 3.9rem;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

#Contents .home-main .home-description--heading-out .description-text-area{
  margin-top: 0;
}

/* social */
.home-social{
  padding-block: 9rem 12rem;
}

.social-inner{
  position: relative;
}

.home-social .social-item-list{
  display: flex;
}

.home-social .social-item{
  flex:1;
}

.home-social .social-item img{
  aspect-ratio: 1;
  object-fit: cover;
}


.home-social .social-account-name{
  position: absolute;
  top: -3rem;
  left: 2rem;
  font-size: 6rem;
  font-family: var(--font-en-1);
  line-height: 1;
  z-index: 2;
}

.home-social .social-account-name a{
  color: var(--color-text-main);
  text-decoration: none;
  letter-spacing: 0;
  border-bottom: 0;
  font-style: italic;
}

.home-social .social-item-link{
  position: relative;
  z-index: 1;
}

@media (hover: hover) {
  .home-social .social-account-name a:hover{
    opacity: 1;
    color: var(--color-accent);
  }
}


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

  .home-main a img::selection {
    background: transparent !important;
    color: #333 !important;
  }

  .home-main a img::-moz-selection {
    background: transparent !important;
    color: #333 !important;
  }

  .home-main .c-button{
    width: 88%;
    max-width: 500px;
  }

  /* reset */
  #Contents{
    padding: 0;
  }

  /* common */
  .home-section{
    padding-block: 0;
    padding-top: 6rem;
  }

  .home-section:not(.home-banner,.home-mv){
    max-width: unset;
    padding-inline: 0;
  }
  
  /* mv */
  .home-main .home-mv{
    padding-bottom: 3rem;
  }

  .home-main .home-mv .mv-item .mv-text-area{
    /* width: 81.6%; */
    width: 100%;
    padding: 0 0.5rem;
    top: 16vw;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }

  #Contents .home-main .home-mv .mv-item .c-heading{
    margin-bottom: 3.9rem;
    text-align: center;
  }

  #Contents .home-main .home-mv .mv-item .c-heading .c-heading--en{
    font-size: min(100px,20vw);
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 0.96;
  }

  #Contents .home-main .home-mv .mv-item .c-heading .c-heading--jp{
    font-size: 3.46666666667vw;
  }

  .home-mv .c-text-button{
    font-size: 3.2vw;
  }

  /* ranking */ 
  #Contents .home-product .c-heading{
    margin-bottom: 3rem;
  }

  .home-main .home-product{
    padding: 3rem 0 0;
  }

  .home-product .swiper{
    width: 100%;
    max-width: none;
  }

  .swiper-button-next, .swiper-button-prev{
    display: none;
  }

  .home-product .swiper .swiper-pagination{
    display: block;
  }

  .swiper-container{
    padding-bottom: 2.1rem;
  }

  .home-product .swiper-container .swiper-pagination{
    display: block;
  }

  .home-product .c-button{
    margin-top: 2rem;
  }

  /* banner */
  .home-main .banner-inner{
    position: relative;
  }

  .home-main .home-banner .banner-text{
    width: 100%;
  }

  #Contents .home-main .home-banner .c-heading{
    width: 100%;
    white-space: wrap;
  }

  /* description */
  .home-main .home-description:not(.home-description--reverse){
    padding-top: 3.6rem;
  }

  .home-main .description-inner{
    flex-direction: column-reverse;
    gap: 6rem;
  }

  .home-main .home-description--reverse .description-inner{
    flex-direction: column;
    gap: 4rem;
  }

  .home-main .description-img-wrap{
    flex: auto;
    max-width: 100%;
  }

  .home-main video,
  .home-main iframe,
  .home-main .description-img{
    width: 100%;
    height: auto;
    max-width: none;
    min-width: 0;
  }

  .home-main .description-text-area{
    width: 100%;
    padding: 0 2.2rem;
    flex: auto;
    max-width: none;
    margin-top: 0;
  }

  .home-main .description-text{
    font-size: 1.4rem;
  }

  .home-main .description-text.is-open{
    max-height: none;
  }

  .home-main .c-heading + .description-text-wrap{
    margin-top: 3rem;
  } 

  .home-main .home-description .c-button{
    width: inherit;
    margin: 3rem auto 0;
  }

  #Contents .home-main .home-description--heading-out .description-inner{
    flex-direction: column;
    gap: 3rem;
  }

  #Contents .home-main .home-description--heading-out .c-heading{
    margin-bottom: 3rem;
    gap: 0.5rem;
    padding: 0 1.5rem;
    text-align: left;
  }

  #Contents .home-main .home-description--heading-out .c-heading .c-heading--en{
    font-size: 3.2rem;
  }

  #Contents .home-main .home-description--heading-out .c-heading .c-heading--jp{
    line-height: 1.5;
  }
  
  #Contents .home-main .home-description--heading-out .description-text-area{
    padding: 0 1.5rem;
  }

  .home-main .home-about .description-text-wrap{
    /* padding-bottom: 3.7rem; */
    padding-bottom: 0;
  }

  .home-main .home-about .description-text-wrap:has(.is-open){
    padding-bottom: 3.7rem;
  }


  /* social */
  .home-social{
    padding-block: 7.4rem 6rem;
  }

  .social-inner{
    position: relative;
  }

  .home-social .social-account-name{
    position: absolute;
    top: -1.4rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3.2rem;
    width: 100%;
    text-align: center;
  }
  .home-social .social-item-list{
    display: grid;
    grid-template-columns: repeat(2,1fr);
  }

}