@charset "UTF-8";

@media (max-width: 1400px) and (min-width: 768px) {
  html {
    font-size: calc(10 * (100vw / 1400));
  }
}
/*******************************
em240515ASICS
*******************************/
#em240515ASICS{
  display: block;
  width: 100%;
  padding: 0 0 0;
  color: #222222;
  box-sizing: border-box;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "yu-gothic-pr6n", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}

#em240515ASICS *{box-sizing: border-box;}


/*******************************
creditLinks
*******************************/
#em240515ASICS .creditArea{
  display: block;
  text-align: left;
}

#em240515ASICS .creditLinks{
  display: block;
  margin-top: calc((-1em * 1.857142857142857 + 1em) / 2);
  margin-bottom: calc((-1em * 1.857142857142857 + 1em) / 2);
  font-size: 1.4rem;
  line-height: 1.857142857142857;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transform: scaleX(.9987);
  transform-origin: left;
}

#em240515ASICS .creditLinks >  a,
#em240515ASICS .creditLinks >  span{
  display: inline-block;
  white-space: nowrap;
  font-family: "pragmatica", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  line-height: 1.857142857142857;
  color: #000000;
  text-decoration: none;
}

#em240515ASICS .creditLinks >  a + a,
#em240515ASICS .creditLinks >  span + a,
#em240515ASICS .creditLinks >  span + span,
#em240515ASICS .creditLinks >  a + span,
#em240515ASICS .creditLinks >  br.spView + a,
#em240515ASICS .creditLinks >  br.spView + span{
  margin-left: 0.5em;
}


/*******************************
imgSetting
*******************************/
#em240515ASICS .imgWrapper{
  position: relative;
  z-index: 1;
}

#em240515ASICS .imgOuter{
  display: block;
  width: 100%;
  background: #FFFFFF;
}

#em240515ASICS .imgOuter a,
#em240515ASICS .imgOuter span,
#em240515ASICS picture,
#em240515ASICS img{display: block; width: 100%;}


/*******************************
lpPhotoList
*******************************/
#em240515ASICS .lpPhotoList{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  width: calc(760 * (100vw / 1400));
  position: relative;
  z-index: 2;
}

#em240515ASICS .lpPhotoList > .imgWrap{
  display: block;
  width: 50%;
}

#em240515ASICS .lpPhotoList a,
#em240515ASICS .lpPhotoList picture,
#em240515ASICS .lpPhotoList .imgOuter{
  display: block;
  width: 100%;
  height: 100%;
}

#em240515ASICS .lpPhotoList picture{overflow: hidden;}

#em240515ASICS .lpPhotoList picture img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*******************************
firstBlock
*******************************/
#em240515ASICS #firstBlock{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  padding-top: calc(120 * (100vw / 1400));
  margin-bottom: 8rem;
  position: relative;
}


#em240515ASICS .mainTTL{
  display: block;
  width: calc(760 * (100vw / 1400));
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

#em240515ASICS .mainTTL a,
#em240515ASICS .mainTTL img,
#em240515ASICS .mainTTL picture{
  display: block;
  width: 100%;
  height: auto;
}


/*******************************
firstBlock textBlock
*******************************/
#em240515ASICS #firstBlock .textBlock{
  display: block;
  width: calc(100% - 760 * (100vw / 1400));
  padding-left: 8rem;
  padding-bottom: calc(98 * (100vw / 1400));
}

#em240515ASICS #firstBlock .textBlock > .inner{
  display: block;
  width: 46.3rem;
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

#em240515ASICS #firstBlock .textBlock > .inner > p{
  width: 46.3rem;
  text-align: justify;
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: 0.025em;
  font-feature-settings: 'palt';
  line-break: strict;
}
#em240515ASICS #firstBlock .textBlock > .inner > p > span{white-space: nowrap;}

#em240515ASICS #firstBlock .textBlock > .inner .creditArea{
  padding-top: 3.2rem;
}


/*******************************
secondBlock
*******************************/
#em240515ASICS #secondBlock{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  background: url("../img/bg_sec02_pc.jpg") left bottom no-repeat;
  background-size: calc(760 * (100vw / 1400)) calc(1026 * (100vw / 1400));
  margin-bottom: 10rem;
  margin-top: 14rem;
}

#em240515ASICS #secondBlock .lpPhotoList{
  order: 2;
  padding-bottom: calc(120 * (100vw / 1400));
}


#em240515ASICS #secondBlock .textBlock{
  display: block;
  width: calc(100% - 760 * (100vw / 1400));
  padding-right: 8rem;
  padding-bottom: calc(60 * (100vw / 1400));
  order: 1;
}

#em240515ASICS #secondBlock .textBlock > .inner{
  display: block;
  width: 48rem;
  margin-left: auto;
  margin-right: 0;
}

#em240515ASICS #secondBlock .textBlock > .inner > p{
  width: 47rem;
  text-align: justify;
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: 0;
  font-feature-settings: 'palt';
  line-break: strict;
}

#em240515ASICS #secondBlock .textBlock > .inner > p > span{white-space: nowrap;}


#em240515ASICS #secondBlock .textBlock > .inner .creditArea{
  padding-top: 3.4rem;
}

#em240515ASICS #secondBlock .textBlock > .inner .creditArea > dl{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  transform: translateX(-0.1rem);
}

#em240515ASICS #secondBlock .textBlock > .inner .creditArea > dl + dl{margin-top: 2.1rem;}

#em240515ASICS #secondBlock .textBlock > .inner .creditArea > dl > dt{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.6rem;
  height: 1.7rem;
  /*border: 1px solid #000000;*/
  font-family: "pragmatica", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 0.025em;
  color: #000000;
}

#em240515ASICS #secondBlock .textBlock > .inner .creditArea > dl > dt picture,
#em240515ASICS #secondBlock .textBlock > .inner .creditArea > dl > dt img{display: block; width: 100%; height: auto;}

#em240515ASICS #secondBlock .textBlock > .inner .creditArea > dl + dl > dt{letter-spacing: 0.015em;}

#em240515ASICS #secondBlock .textBlock > .inner .creditArea > dl > dd{
  display: block;
  width: calc(100% - 5.6rem - 1.9rem);
}

#em240515ASICS #secondBlock .textBlock > .inner .creditArea > dl > dd .creditLinks{line-height: 1.8;}


/*******************************
productBlock
*******************************/
#em240515ASICS .productBlock{
  display: block;
  padding-left: 1.6rem;
}

#em240515ASICS .productBlock .prodcutsImg{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 2rem;
  margin-bottom: 1.9rem;
}

#em240515ASICS .productBlock .prodcutsImg .outer{
  display: block;
  width: 26.4rem;
}


#em240515ASICS .productBlock dl.namePrice{
  display: block;
}

#em240515ASICS .productBlock dl.namePrice > dt.name{
  display: block;
  margin: 0 auto 2.7rem;
}

#em240515ASICS .productBlock dl.namePrice > dt.name.collabo{width: 22.03569rem;}
#em240515ASICS .productBlock dl.namePrice > dt.name.exc{width: 14.81689rem;}

#em240515ASICS .productBlock dl.namePrice > dt.name a,
#em240515ASICS .productBlock dl.namePrice > dt.name img,
#em240515ASICS .productBlock dl.namePrice > dt.name picture{display: block; width: 100%; height: auto;}

#em240515ASICS .productBlock dl.namePrice > dd.price{display: block; text-align: center;}
#em240515ASICS .productBlock dl.namePrice > dd.price > a{
  font-family: "pragmatica", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 1.6rem;
  letter-spacing: 0.025em;
  line-height: 1;
  text-decoration: underline;
}


/*******************************
allItemBtn
*******************************/
#em240515ASICS .allItemBtn{
  display: block;
  width: 24rem;
  height: 5.2rem;
  margin: 10rem auto 0;
  transform: translateX(0.8rem);
}

#em240515ASICS .allItemBtn a{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, rgba(252,255,224,0) 0%, rgba(252,255,224,0) 50%, rgba(252,255,224,.8) 50%, rgba(252,255,224,.8) 100%);
}


#em240515ASICS .allItemBtn picture{display: block; width: 19.18955rem;}
#em240515ASICS .allItemBtn picture > img{display: block; width: 100%; height: auto;}


/*******************************
fadeInSetting
*******************************/
#em240515ASICS .fadeInBlock{
  opacity: 0;
  transition: opacity 1.2s ease;
}

#em240515ASICS .fadeInBlock.view{
  opacity: 1;
}


/*******************************
figSlider
*******************************/
#em240515ASICS .figSlider{
	overflow: hidden;
	position: relative;
}

#em240515ASICS .figSlider .container{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}

#em240515ASICS .figSlider .sliderWrapper{}

#em240515ASICS .figSlider .slider{
  display: block;
  width: 100%;
}

#em240515ASICS .figSlider .slider a{
  display: block;
  width: 100%;
  height: auto;
}

#em240515ASICS .figSlider .slider a > img{
  display: block;
  width: 100%;
  height: auto;
}

#em240515ASICS .figSlider .slider.swiper-slide-active{
  pointer-events: auto;
}

#em240515ASICS .figSlider ul.pager{
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0 0.3rem;
  position: absolute;
  right: 1rem;
  bottom: 0.8rem;
  z-index: 1;
}

#em240515ASICS .figSlider ul.pager > li{
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  margin: 0;
  background-color: inherit;
  border: 1px solid rgba(255,255,255,.8);
  transition: background 0.3s ease;
  cursor: pointer;
  opacity: 1;
}

#em240515ASICS .figSlider ul.pager > li.swiper-pagination-bullet-active{
  background: rgba(255,255,255,.8);
  pointer-events: none;
}

/*******************************
overRide
*******************************/
#em240515ASICS .spView{display: none!important;}