@charset "UTF-8";

/*
html {
  font-size: calc((10 * (100vw / 1400)));
}
*/

.global-container{
  display: block;
}
.global-contents{
  
}

.global-contents__inner{
  width: 100%;
  padding-bottom: 0;
}

/*****************************
header
******************************/
#header .outer{
  background-color: transparent;
}

#header .headLogo img,
#headRfineSearchOpen img{
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
  transition: filter .2s ease;
}

#header.clickOpen .headLogo img,
#header:hover .headLogo img,
#header.move .headLogo img,
#header.clickOpen #headRfineSearchOpen img,
#header:hover #headRfineSearchOpen img,
#header.move #headRfineSearchOpen img,
body.is-fixed #header .headLogo img,
body.is-fixed #header #headRfineSearchOpen img{
  filter: brightness(0) invert(0);
}


#headNav .headNavBlock > span,
#headNav .headNavBlock > a,
#headNav .headCart > a{
  color: #FFFFFF;
  transition: opacity var(--transition-default),color var(--transition-default);;
}

#header.clickOpen #headNav .headNavBlock > span,
#header:hover #headNav .headNavBlock > span,
#header.move #headNav .headNavBlock > span,
#header.clickOpen #headNav .headNavBlock > a,
#header:hover #headNav .headNavBlock > a,
#header.move #headNav .headNavBlock > a,
#header.clickOpen #headNav .headCart > a,
#header:hover #headNav .headCart > a,
#header.move #headNav .headCart > a,
body.is-fixed #header #headNav .headNavBlock > span,
body.is-fixed #header #headNav .headNavBlock > a,
body.is-fixed #header #headNav .headCart > a{
  color: var(--color-text-default);
}



/*****************************
setting
******************************/
#homeContents{
  width: 100%;
  margin-top: -70px;
  padding-bottom: calc(150 * (100vw / 1400));
  overflow: hidden;
}

#homeContents picture,
#homeContents figure{
  display: block;
  width: 100%;
  height: auto;
}

/**************************************
secTTL
**************************************/
#homeContents .ttlBlock{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: calc(100% - 100 * (100vw / 1400));
  margin: 0 auto calc(30 * (100vw / 1400));
}

#homeContents .secTTL{
  font-family: var(--font-en);
  font-size: 18px;
  letter-spacing: 0.05em;
  line-height: 1.222222222222222;
  text-align: left;
  font-weight: 400;
}

#homeContents *:not(.ttlBlock) > .secTTL{
  display: block;
  width: calc(100% - 100 * (100vw / 1400));
  margin: 0 auto calc(30 * (100vw / 1400));
}

#homeContents .ttlBlock .more > a{
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1px solid #707070;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-decoration: none;
}

/**************************************
visualBlock
**************************************/
#homeContents .visualBlock{
  display: block;
  width: 100%;
  position: relative;
}

#homeContents .homeProductSection + .visualBlock{
  margin-top: calc(65 * (100vw / 1400));
}



#homeContents .visualBlock > .outer{
  display: block;
  width: 100%;
  position: relative;
}

#homeContents .visualBlock > a.outer{
  text-decoration: none;
}

#homeContents .visualBlock > a.outer:hover{
  opacity: 1;
}

#homeContents .visualBlock::after{
  content: '';
  display: block;
  width: 100%;
  height: calc(200 * (100vw / 1400));
  background: linear-gradient(to top,rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
}

#homeContents .visualBlock .visualText{
  display: block;
  width: 100%;
  padding: calc(50 * (100vw / 1400));
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  opacity: 0;
  transform: translate3d(0,calc(50 * (100vw / 1400)),0);
  transition: opacity .8s ease .4s,transform .8s ease .4s;
}
#homeContents .visualBlock .visualText.view{
  opacity: 1;
  transform: translate3d(0,0,0);
}



#homeContents .visualBlock .visualText p.title{
  display: block;
  font-family: var(--font-join);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: left;
  color: #FFFFFF;
  transition: opacity var(--transition-default);
}

#homeContents .visualBlock .visualText p.more{
  margin-top: 15px;
  color: #FFFFFF;
  transition: opacity var(--transition-default);
}

#homeContents .visualBlock > a.outer:hover .visualText p.title,
#homeContents .visualBlock > a.outer:hover .visualText p.more{
  opacity: var(--hoverOpacity);
}


#homeContents .visualBlock .visualText p.more > span,
#homeContents .visualBlock .visualText p.more > a{
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1px solid #FFFFFF;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.05em;
  line-height: 1.2;
  color: #FFFFFF;
  text-decoration: none;
}


#homeContents .visualBlock .visual{
  display: block;
  width: 100%;
}

#homeContents .visualBlock .visual > picture,
#homeContents .visualBlock .visual img{
  display: block;
  width: 100%;
  height: 100%;
}

#homeContents .visualBlock .visual > picture{
  overflow: hidden;
}

#homeContents .visualBlock .visual img{
  opacity: 0;
  transform: scale(1.2);
  transition: opacity 1.1s ease-in-out, visibility 1.1s ease-in-out, transform 1.1s ease-in-out;
}

    
#homeContents .visualBlock.view .visual img{
  transform: scale(1);
  opacity: 1;
}


/**************************************
homeCategoryLinks
**************************************/
#homeContents .homeCategoryLinks{
  display: block;
  padding: calc(70 * (100vw / 1400)) calc(50 * (100vw / 1400)) calc(65 * (100vw / 1400));
}

#homeContents .homeCategoryLinks > ul{
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0 calc(20 * (100vw / 1400));
}


#homeContents .homeCategoryLinks > ul > li{
  flex-shrink: 1;
  width: 100%;
}

#homeContents .homeCategoryLinks > ul > li > a{
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(60 * (100vw / 1400));
  background: #000000;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.2em;
  line-height: 1.214285714285714;
  text-align: center;
  color: #FFFFFF;
  text-decoration: none;
}


/**************************************
homeProductSection
**************************************/
#homeContents .homeProductSection{
  display: block;
  padding-top: calc(35 * (100vw / 1400));
  padding-bottom: calc(35 * (100vw / 1400));
}

#homeContents .visualBlock + .homeProductSection{
  margin-top: calc(35 * (100vw / 1400));
}


#homeContents .homeProductSection .productSlider{
  display: block;
  width: 100%;
  padding: 0 calc(50 * (100vw / 1400));
}

#homeContents .homeProductSection .listProduct{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: visible;
  list-style: none;
  padding: 0;
  z-index: 1;
}


#homeContents .homeProductSection .product__container{
  display: flex;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition-property: transform;
  box-sizing: content-box;
  position: relative;
  transition-timing-function: ease-out;
  margin: 0 auto;
  gap: 0;
}


#homeContents .homeProductSection .product__container .product__item{
  flex-shrink: 0;
  width: calc(301 * (100vw / 1400));
  margin-right: calc(10 * (100vw / 1400));
  position: relative;
  transition-property: transform;
}

#homeContents .homeProductSection .product__container .product__item:nth-last-of-type(1){
  margin-right: 0;
}



/**************************************
homeNewsSection
**************************************/
#homeContents .homeNewsSection{
  display: block;
  padding-top: calc(115 * (100vw / 1400));
}

#homeContents .homeNewsSection > .inner{
  display: grid;
  grid-template-columns: 1fr 3fr;
  width: 100%;
  padding: 0 calc(50 * (100vw / 1400));
}


#homeContents .homeNewsSection .ttlBlock{
  display: block;
  padding: 0;
  margin: 0;
}

#homeContents .homeNewsSection .secTTL{
  margin-bottom: 48px;
}

#homeContents .homeNewsSection .newsList{
  display: block;
}


#homeContents .homeNewsSection .newsList > ul.info{
  display: block;
}


#homeContents .homeNewsSection .newsList > ul.info > li{
  display: block;
  cursor: pointer;
  transition: opacity var(--transition-default);
}
#homeContents .homeNewsSection .newsList > ul.info > li:hover{
  opacity: var(--hoverOpacity);
}


#homeContents .homeNewsSection .newsList > ul.info > li + li{
  margin-top: 40px;
}

#homeContents .homeNewsSection .newsList > ul.info > li:nth-of-type(n + 4){display: none;}

#homeContents .homeNewsSection .newsList > ul.info > li > .outer{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

#homeContents .homeNewsSection .newsList > ul.info > li > .outer > .update{
  display: block;
  width: 120px;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.05em;
  line-height: 1.75;
  text-align: left;
}

#homeContents .homeNewsSection .newsList > ul.info > li > .outer > .detail{
  display: block;
  width: calc(100% - 120px);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.05em;
  line-height: 1.75;
  text-align: left;
  color: #6E6E6E;
}


#homeContents .homeNewsSection .newsList > ul.info > li > .outer > .detail > dl{
  display: block;
}

#homeContents .homeNewsSection .newsList > ul.info > li > .outer > .detail > dl > dt{
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.05em;
  line-height: 1.75;
  text-align: left;
  color: #6E6E6E;
}

#homeContents .homeNewsSection .newsList > ul.info > li > .outer > .detail > dl > dd{
  display: none;
}