@charset "UTF-8";

/* ===============================================### 
初期設定
###=============================================== */
#em240814SALOMON {
  overflow: hidden;
}

:where(#em240814SALOMON) img, video{
  width: 100%;
  height: auto;
}


/* ===========### PC版用設定 ###=========== */
@media (max-width: 1400px) and (min-width: 768px) {
  html {
    font-size: calc(10 * (100vw / 1400));
  }
}
@media screen and (min-width: 767px) {
  .pc-visible{
    display: block;
  }

  .sp-visible{
    display: none;
  }
}

/* ===========### SP版用設定 ###=========== */
@media screen and (max-width: 767px) {
  html {
    font-size: calc(10 * (100vw/750));
  }
  .pc-visible{
    display: none;
  }

  .sp-visible{
    display: block;
  }
}



/* ===============================================### 
メインビジュアル
###=============================================== */
#em240814SALOMON .mv{
  width: 54rem;
  margin-top: 6rem;
  margin-inline: auto;
}

/************** image **************/
#em240814SALOMON .fade-slide-wrapper .slide__image{
  width: 100%;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  #em240814SALOMON .mv{
    width: calc(702 * (100vw / 750));
    margin-top: calc(58 * (100vw / 750));
  }
}




/* ===============================================### 
アニメーション設定
###=============================================== */
/************** fade **************/
#em240814SALOMON .js-fade-mv,
#em240814SALOMON .js-fade-in{
  opacity: 0;
  -webkit-transition: ease-in, opacity 2500ms;
  transition: ease-in, opacity 2500ms;
}

#em240814SALOMON .js-fade-mv.show,
#em240814SALOMON .js-fade-in.show{
  opacity: 1;
}

/************** slide-in **************/
#em240814SALOMON .js-slide-in {
  opacity: 0;
  transition: opacity 1.5s, transform 1.5s;
  transform: translateX(10rem);
}

#em240814SALOMON .js-slide-in.show {
  opacity: 1;
  transform: translateX(0);
}

#em240814SALOMON .content02 .content__item03 .js-slide-in.show{
  transition-delay: 0.3s;
}

#em240814SALOMON .content04 .content__item03 .js-slide-in.show{
  transition-delay: 0.7s;
}


/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  #em240814SALOMON .js-slide-in {
    opacity: 0;
    transition: opacity 1.3s, transform 1.3s;
  }
}



/* ===============================================### 
コンテンツ共通設定
###=============================================== */
/************** flex **************/
#em240814SALOMON .flex-wrapper{
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  flex-direction: row;
}

/************** text **************/
#em240814SALOMON .credit{
  font-family: "pragmatica", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 1.4rem;
  line-height: 1.85;
  letter-spacing: 0.05em;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  /************** flex **************/
  #em240814SALOMON .flex-wrapper{
    flex-direction: column;
  }

  /************** text **************/
  #em240814SALOMON .credit{
    font-size: calc(22 * (100vw / 750));
  }
}



/* ===============================================### 
コンテンツ01
###=============================================== */
#em240814SALOMON .content01{
  width: 84.9rem;
  margin-top: 14rem;
  margin-inline: auto;
}

/************** flex **************/
#em240814SALOMON .content01 .flex-wrapper{
  align-items: center;
  column-gap: 5.9rem;
  width: fit-content;
  margin-left: 2.5rem;
}

/************** text **************/
#em240814SALOMON .content__text{
  width: 42.9rem;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: 0.04em;
}

/************** video **************/
#em240814SALOMON .content__video{
  width: 36rem;
  height: 64rem;
  margin-inline: auto;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  #em240814SALOMON .content01{
    width: calc(750 * (100vw / 750));
    margin-top: calc(109 * (100vw / 750));
  }

  /************** flex **************/
  #em240814SALOMON .content01 .flex-wrapper{
    width: 100%;
    flex-direction: column-reverse;
    row-gap: calc(85 * (100vw / 750));
    margin-left: 0;
  }

  /************** text **************/
  #em240814SALOMON .content__text{
    width: fit-content;
    font-size: calc(24 * (100vw / 750));
    letter-spacing: 0.01em;
    text-align: center;
  }

  /************** video **************/
  #em240814SALOMON .content__video{
    width: calc(594 * (100vw / 750));
    height: calc(1056 * (100vw / 750));
  }
}



/* ===============================================### 
コンテンツ02
###=============================================== */
#em240814SALOMON .content02{
  width: 112rem;
  margin-top: 12rem;
  margin-inline: auto;
}

/************** grid **************/
#em240814SALOMON .content02 .grid-wrapper{
  display: grid;
  grid-template-columns: 9.9rem 18.1rem 9.9rem 29rem 45rem;
  grid-template-rows: 13rem 42rem 1rem 32.5rem 9.4rem;
}

#em240814SALOMON .content02 .grid__item01{
  grid-column: 5/6;
  grid-row: 1/5;
}

#em240814SALOMON .content02 .grid__item02{
  grid-column: 1/3;
  grid-row: 2/3;
}

#em240814SALOMON .content02 .grid__item03{
  grid-column: 2/4;
  grid-row: 4/6;
}

/************** text **************/
#em240814SALOMON .content02 .credit{
  margin-top: 1.6rem;
  text-align: left;
}

/*** クレジット位置微調整 ***/
#em240814SALOMON .content02 .credit a:nth-of-type(2){
  margin-left: 0.8rem;
}

#em240814SALOMON .content02 .credit a:nth-of-type(4){
  margin-left: 0.9rem;
}


/************** image **************/
#em240814SALOMON .content02 .content__item01 .content__image{
  width: 45.5rem;
}

#em240814SALOMON .content02 .content__item02 .content__image{
  width: 28rem;
}

#em240814SALOMON .content02 .content__item03 .content__image{
  width: 28rem;
}


/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  #em240814SALOMON .content02{
    width: calc(750 * (100vw / 750));
    margin-top: calc(139 * (100vw / 750));
  }

  /************** grid **************/
  #em240814SALOMON .content02 .grid-wrapper{
    display: grid;
    grid-template-columns: calc(363 * (100vw / 750)) calc(21 * (100vw / 750)) calc(365 * (100vw / 750));
    grid-template-rows: calc(1466 * (100vw / 750)) calc(80 * (100vw / 750)) calc(121 * (100vw / 750)) calc(426 * (100vw / 750)) calc(120 * (100vw / 750));
  }

  #em240814SALOMON .content02 .grid__item01{
    grid-column: 1/4;
    grid-row: 1/2;
  }

  #em240814SALOMON .content02 .grid__item02{
    grid-column: 1/2;
    grid-row: 3/5;
  }

  #em240814SALOMON .content02 .grid__item03{
    grid-column: 3/4;
    grid-row: 4/6;
  }

  /************** text **************/
  #em240814SALOMON .content02 .credit{
    margin-top: calc(24 * (100vw / 750));
    text-align: center;
  }

  /*** クレジット位置微調整 ***/
  #em240814SALOMON .content02 .credit a:nth-of-type(2){
    margin-left: calc(11 * (100vw / 750));
  }

  #em240814SALOMON .content02 .credit a:nth-of-type(4){
    margin-left: calc(12 * (100vw / 750));
  }


  /************** image **************/
  #em240814SALOMON .content02 .content__item01 .content__image{
    width: calc(750 * (100vw / 750));
  }

  #em240814SALOMON .content02 .content__item02 .content__image{
    width: calc(365 * (100vw / 750));
  }

  #em240814SALOMON .content02 .content__item03 .content__image{
    width: calc(365 * (100vw / 750));
  }
}



/* ===============================================### 
コンテンツ03
###=============================================== */
#em240814SALOMON .content03{
  width: 62rem;
  margin-top: 13.1rem;
  margin-inline: auto;
}

#em240814SALOMON .content03 .content__item02 .center-slide-wrapper{
  width: 62rem;
  height: 45rem;
  overflow: hidden;
}


/************** grid **************/
#em240814SALOMON .content03 .grid-wrapper{
  display: grid;
  grid-template-columns: 9.4rem 43.2rem 9.4rem ;
  grid-template-rows: 85.5rem 8rem 45rem;
}

#em240814SALOMON .content03 .grid__item01{
  grid-column: 2/3;
  grid-row: 1/2;
}

#em240814SALOMON .content03 .grid__item02{
  grid-column: 1/4;
  grid-row: 3/4;
}


/************** text **************/
#em240814SALOMON .content03 .credit{
  margin-top: 1.3rem;
  text-align: left;
}

/*** クレジット位置微調整 ***/
#em240814SALOMON .content03 .credit a:nth-of-type(2),
#em240814SALOMON .content03 .credit a:nth-of-type(3),
#em240814SALOMON .content03 .credit a:nth-of-type(5){
  margin-left: 0.7rem;
}

/************** image **************/
#em240814SALOMON .content03 .content__item01 .content__image{
  width: 43.5rem;
}

#em240814SALOMON .content03 .content__item02 .slide__image.slick-slide{
  width: 30rem;
  margin-inline: 0.5rem;
}

#em240814SALOMON .content03 .content__item02 .slide__image.image02.slick-slide,
#em240814SALOMON .content03 .content__item02 .slide__image.image04.slick-slide{
  margin-top: -4.6rem;
}


/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  #em240814SALOMON .content03{
    width: calc(750 * (100vw / 750));
    margin-top: calc(140 * (100vw / 750));
  }

  #em240814SALOMON .content03 .content__item01{
    width: fit-content;
    margin-inline: auto;
  }

  #em240814SALOMON .content03 .content__item02{
    margin-top: calc(90 * (100vw / 750));
  }

  #em240814SALOMON .content03 .content__item02 .center-slide-wrapper{
    width: 100%;
    height: calc(630 * (100vw / 750));
  }


  /************** grid **************/
  #em240814SALOMON .content03 .grid-wrapper{
    display: block;
  }

  /************** text **************/
  #em240814SALOMON .content03 .credit{
    margin-top: calc(17 * (100vw / 750));
    margin-left: calc(1 * (100vw / 750));
  }

  /*** クレジット位置微調整 ***/
  #em240814SALOMON .content03 .credit a:nth-of-type(2),
  #em240814SALOMON .content03 .credit a:nth-of-type(3),
  #em240814SALOMON .content03 .credit a:nth-of-type(5){
    margin-left: calc(9 * (100vw / 750));
  }

  /************** image **************/
  #em240814SALOMON .content03 .content__item01 .content__image{
    width: calc(599 * (100vw / 750));
  }

  #em240814SALOMON .content03 .content__item02 .slide__image.slick-slide{
    width: calc(420 * (100vw / 750));
    margin-inline: calc(10 * (100vw / 750));
  }
  #em240814SALOMON .content03 .content__item02 .slide__image.image02.slick-slide,
  #em240814SALOMON .content03 .content__item02 .slide__image.image04.slick-slide{
    margin-top: calc(-65 * (100vw / 750));
  }
}



/* ===============================================### 
コンテンツ04
###=============================================== */
#em240814SALOMON .content04{
  width: 112rem;
  margin-top: 17rem;
  margin-inline: auto;
}

#em240814SALOMON .content04 .flex-wrapper{
  align-items: end;
}

/************** grid **************/
#em240814SALOMON .content04 .grid-wrapper{
  display: grid;
  grid-template-columns: 55rem 20rem 8rem 1rem 28rem;
  grid-template-rows: 11rem 10rem 32rem 10rem 17rem;
}

#em240814SALOMON .content04 .grid__item01{
  grid-column: 1/3;
  grid-row: 1/6;
}

#em240814SALOMON .content04 .grid__item02{
  grid-column: 2/4;
  grid-row: 3/5;
}

#em240814SALOMON .content04 .grid__item03{
  grid-column: 5/6;
  grid-row: 2/4;
}

/************** text **************/
#em240814SALOMON .content04 .credit{
  margin-bottom: -0.5rem;
  text-align: left;
}

/*** クレジット位置微調整 ***/
#em240814SALOMON .content04 .credit a:nth-of-type(2n){
  margin-left: 0.8rem;
}

/************** image **************/
#em240814SALOMON .content04 .content__item01 .content__image{
  width: 45rem;
}

#em240814SALOMON .content04 .content__item02 .content__image{
  width: 28rem;
}

#em240814SALOMON .content04 .content__item03 .content__image{
  width: 28rem;
}


/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  #em240814SALOMON .content04{
    width: calc(750 * (100vw / 750));
    margin-top: calc(140 * (100vw / 750));
  }

  #em240814SALOMON .content04 .flex-wrapper{
    align-items: center;
  }

  /************** grid **************/
  #em240814SALOMON .content04 .grid-wrapper{
    display: grid;
    grid-template-columns: calc(365 * (100vw / 750)) calc(20 * (100vw / 750)) calc(365 * (100vw / 750));
    grid-template-rows: calc(1466 * (100vw / 750)) calc(100 * (100vw / 750)) calc(120 * (100vw / 750)) calc(427 * (100vw / 750)) calc(120 * (100vw / 750));
  }

  #em240814SALOMON .content04 .grid__item01{
    grid-column: 1/4;
    grid-row: 1/2;
  }

  #em240814SALOMON .content04 .grid__item02{
    grid-column: 1/2;
    grid-row: 4/6;
  }

  #em240814SALOMON .content04 .grid__item03{
    grid-column: 3/4;
    grid-row: 3/5;
  }

  /************** text **************/
  #em240814SALOMON .content04 .credit{
    margin-top: calc(21 * (100vw / 750));
    margin-bottom: 0;
    text-align: center;
  }

  /*** クレジット位置微調整 ***/
  #em240814SALOMON .content04 .credit a:nth-of-type(2n){
    margin-left: calc(13 * (100vw / 750));
  }
  
  /************** image **************/
  #em240814SALOMON .content04 .content__item01 .content__image{
    width: calc(750 * (100vw / 750));
  }

  #em240814SALOMON .content04 .content__item02 .content__image{
    width: calc(365 * (100vw / 750));
  }

  #em240814SALOMON .content04 .content__item03 .content__image{
    width: calc(365 * (100vw / 750));
  }
}



/* ===============================================### 
コンテンツ05
###=============================================== */
#em240814SALOMON .content05{
  width: 100rem;
  margin-top: 12rem;
  margin-inline: auto;
}

#em240814SALOMON .content05 .content__item02 .slide-wrapper{
  width: 57rem;
  height: 57rem;
  overflow: hidden;
  clip-path: inset(0 0 0 14rem);
  left: -14rem;
}


/************** grid **************/
#em240814SALOMON .content05 .grid-wrapper{
  display: grid;
  grid-template-columns: 43rem 16.4rem 40.6rem;
  grid-template-rows: 33.5rem 44.9rem 12.1rem;
}

#em240814SALOMON .content05 .grid__item01{
  grid-column: 3/4;
  grid-row: 1/3;
}

#em240814SALOMON .content05 .grid__item02{
  grid-column: 1/2;
  grid-row: 2/4;
}


/************** text **************/
#em240814SALOMON .content05 .credit{
  margin-top: 1.5rem;
  text-align: left;
}

/*** クレジット位置微調整 ***/
#em240814SALOMON .content05 .credit a:nth-of-type(2){
  margin-left: 0.9rem;
}

#em240814SALOMON .content05 .credit a:nth-of-type(4){
  margin-left: 0.9rem;
}

/************** image **************/
#em240814SALOMON .content05 .content__item01 .content__image{
  width: 40.8rem;
}

#em240814SALOMON .content05 .content__item02 .slide__image.slick-slide{
  width: 28rem;
  margin-inline: 0.6rem;
}

#em240814SALOMON .content05 .content__item02 .slide__image.image01.slick-slide{
  margin-top: 15rem;
}

#em240814SALOMON .content05 .content__item02 .slide__image.image02.slick-slide{
  margin-top: -3.8rem;
  height: 45.9rem;
  overflow: hidden;
}



/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  #em240814SALOMON .content05{
    width: calc(750 * (100vw / 750));
    margin-top: calc(140 * (100vw / 750));
  }

  #em240814SALOMON .content05 .content__item01{
    margin-left: calc(111 * (100vw / 750));
  }

  #em240814SALOMON .content05 .content__item02{
    margin-top: calc(90 * (100vw / 750));
  }

  #em240814SALOMON .content05 .content__item02 .slide-wrapper{
    width: calc(860 * (100vw / 750));
    height: calc(750 * (100vw / 750));
    overflow: hidden;
    clip-path: inset(0 0 0 calc(-210 * (100vw / 750)));
    left: calc(-210 * (100vw / 750));
  }


  /************** grid **************/
  #em240814SALOMON .content05 .grid-wrapper{
    display: block;
  }

  /************** text **************/
  #em240814SALOMON .content05 .credit{
    margin-top: calc(22 * (100vw / 750));
  }

  /*** クレジット位置微調整 ***/
  #em240814SALOMON .content05 .credit a:nth-of-type(2){
    margin-left: calc(11 * (100vw / 750));
  }

  #em240814SALOMON .content05 .credit a:nth-of-type(4){
    margin-left: calc(11 * (100vw / 750));
  }

  /************** image **************/
  #em240814SALOMON .content05 .content__item01 .content__image{
    width: calc(642 * (100vw / 750));
  }

  #em240814SALOMON .content05 .content__item02 .slide__image.slick-slide{
    width: calc(420 * (100vw / 750));
    margin-inline: calc(10 * (100vw / 750));
  }

  #em240814SALOMON .content05 .content__item02 .slide__image.image01.slick-slide{
    margin-top: calc(120 * (100vw / 750));
  }

  #em240814SALOMON .content05 .content__item02 .slide__image.image02.slick-slide{
    margin-top: calc(-58 * (100vw / 750));
    height: calc(690 * (100vw / 750));
  }
}



/* ===============================================### 
リンクボタン
###=============================================== */
#em240814SALOMON .link__button{
  margin-top: 13rem;
  margin-inline: auto;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  width: 32rem;
  background-color: #40534C;
}

#em240814SALOMON .link__button a{
  display: block;
  font-family: "freight-big-pro", serif;
  font-weight: 600;
  font-style: normal;
  font-size: 2.8rem;
  letter-spacing: 0.04em;
  text-align: center;
  color: #fff;
}


/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  #em240814SALOMON .link__button{
    margin-top: calc(150 * (100vw / 750));
    margin-bottom: calc(7 * (100vw / 750));
    padding-top: calc(19 * (100vw / 750));
    padding-bottom: calc(24 * (100vw / 750));
    width: calc(500 * (100vw / 750));
  }

  #em240814SALOMON .link__button a{
    font-size: calc(42 * (100vw / 750));
  }
}