@charset "utf-8";

.content {
  position: relative;
  overflow: hidden;
}

/*背景*/
.add__bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
  width: 100%;
  height: 100%;
}
.add__bg::before {
  display: block;
  position: absolute;
  content: " ";
  top: 300px;
  left: 0;
  width: 100%;
  height: 922px;
  z-index: -9;
  transform: skewY(-20deg);
  background-color: #d9f0e3;
}

section{
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
}
section.bnr{
  width: 960px;
  margin: auto auto 80px auto;
}
/*タイトル*/
.top__title {
  margin: 60px auto 60px;
  text-align: center;
}

/*トップ*/
.add-top__wrap a{
  outline: none;
}
.add-top__wrap {
  margin-bottom: 0px;
}
.add-top__1row,
.add-top__2row,
.add-top__3row,
.add-top__4row,
.add-top__5row{
  margin-bottom: 60px;
}
.add-top__1row,
.add-top__2row,
.add-top__3row,
.add-top__4row,
.add-top__5row{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.add-top__1row .add-top__thum{
  text-align: center;
  margin: auto;
}
.add-top__thum {
  padding: 0 10px;
}
.add-top__thum a{
  display: block;
}
.add-top__thum a:hover{
  opacity: 0.8;
}
.add-top__thum a img:hover{
  opacity: 0.8;
}
.thum-img {
  margin-bottom: 10px;
}
.add-top__thum p {
  text-align: center;
}

/*サブタイトル*/
.add-subtitle{
  text-align: center;
}
.add-btm__1row .add-subtitle {
  margin-bottom: 30px;
}

/*ボトム*/
.add-btm__wrap {
  margin-bottom: 100px;
}
.add-btm__1row {
  margin-bottom: 43px;
}

/*モーダルの閉じるボタン*/
.mfp-iframe-holder .mfp-close, .mfp-inline-holder .mfp-close {
  width: 64px !important;
  height: 64px !important;
  top: -64px !important;
  padding-right: 0 !important;
  right: 0 !important;
  opacity: 1.0 !important;
  text-indent: 9999px;
  background-image: url(/ad/img/modal_close.png);
}

/*キャプションサイズ*/
.add-cap01 img {
  height: 48px;
}
.add-cap02 img {
  height: 48px;
}
.add-cap03 img {
  height: 48px;
}
.add-cap04 img {
  height: 48px;
}
.add-cap05 img {
  height: 19px;
}
.add-cap06 img {
  height: 19px;
}
.add-cap07 img {
  height: 19px;
}
.add-cap08 img {
  height: 19px;
}
.add-cap09 img {
  height: 19px;
}
.add-cap10 img {
  height: 19px;
}



/*スマホの表示　モーダルの閉じるボタン*/
@media screen and (max-width:640px) {
  .mfp-iframe-holder .mfp-close, .mfp-inline-holder .mfp-close {
    width: 32px !important;
    height: 32px !important;
    top: -32px !important;
    background-size: 32px 32px;
  }
  
}

/* カミンスーン */
div.soon{
    position: relative;
    width: 100%;
    height: 300px;
    margin: 0 0 100px;
}

div.soon img{
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
@media screen and (max-width:640px) {
    div.soon{
    height: 300px;
    margin: 0 0 60px;
    }
    div.soon img{
    width: 160px;
}
}

/***********************************************************************
PC アニメーション
***********************************************************************/
@media screen and (min-width: 641px)  {
  
  /*白背景*/
  /*消す*/
  .add-bg-white {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: block;
    background-color: #fff;
    z-index: -1;
  } 
  /*表示*/
  .add-bg-white.scroll_events {
    position: absolute;
    width: 0;
    transition: all 0.5s ease-out 1.3s;
  } 
  
  /* AD GALLERYタイトル */
  /*消す*/
  .top__title-en img {
    margin-left: -30px;
    opacity: 0;
  }
  /*表示*/
  .top__title-en img.scroll_events {
    opacity: 1;
    margin-left: 0;
    transition: all 0.2s linear;
  }

  /* AD GALLERYタイトル-ja */
  /*消す*/
  .top__title-ja img {
    margin-top: -40px;
    opacity: 0;
  }
  /*表示*/
  .top__title-ja.scroll_events img {
    margin-top: 0;
    opacity: 1;
    transition: all 0.3s ease-out 0.3s;
  }
  .top__title-ja{
    padding-top: 5px;
    height: 28px;
    overflow: hidden;
  }
  
  /* トップバナーの表示*/
  /*消す*/
  #js-thum01 .add-cap01,
  #js-thum02 .add-cap02,
  #js-thum03 .add-cap03,
  #js-thum04 .add-cap04,
  #js-thum05 .add-cap05,
  #js-thum06 .add-cap06,
  #js-thum07 .add-cap07,
  #js-thum08 .add-cap08,
  #js-thum09 .add-cap09,
  #js-thum10 .add-cap10{
    margin-top: -20px;
    opacity: 0;
  }
  /*表示*/
  #js-thum01.scroll_events .add-cap01,
  #js-thum02.scroll_events .add-cap02,
  #js-thum03.scroll_events .add-cap03,
  #js-thum04.scroll_events .add-cap04,
  #js-thum05.scroll_events .add-cap05,
  #js-thum06.scroll_events .add-cap06,
  #js-thum07.scroll_events .add-cap07,
  #js-thum08.scroll_events .add-cap08,
  #js-thum09.scroll_events .add-cap09,
  #js-thum10.scroll_events .add-cap10{
    opacity: 1;
    margin-top: 0;
    transition: all 0.5s ease-out 0.5S;
  }
  
  #js-thum01 .thum-img,
  #js-thum02 .thum-img,
  #js-thum03 .thum-img,
  #js-thum04 .thum-img,
  #js-thum05 .thum-img,
  #js-thum06 .thum-img,
  #js-thum07 .thum-img,
  #js-thum08 .thum-img,
  #js-thum09 .thum-img,
  #js-thum10 .thum-img{
    width: 0;
    height: 0;
  }
  #js-thum01.scroll_events .thum-img,
  #js-thum02.scroll_events .thum-img,
  #js-thum03.scroll_events .thum-img,
  #js-thum04.scroll_events .thum-img,
  #js-thum05.scroll_events .thum-img,
  #js-thum06.scroll_events .thum-img,
  #js-thum07.scroll_events .thum-img,
  #js-thum08.scroll_events .thum-img,
  #js-thum09.scroll_events .thum-img,
  #js-thum10.scroll_events .thum-img{
    width: 100%;
    height: 100%;
    transition: width 0.3s linear , height 0.3s linear;
  }
  
  /*ボトムサムネイル*/
  /*非表示*/
  .add-btm__1row .js-thum06,
  .add-btm__2row .js-thum07,
  .add-btm__1row .add-subtitle,
  .add-btm__2row .add-subtitle{
    opacity: 0;
  }
  /*表示*/
  .add-btm__1row.scroll_events .js-thum06,
  .add-btm__1row.scroll_events .add-subtitle,
  .add-btm__2row.scroll_events .add-subtitle{
    opacity: 1;
    transition: all 0.5s linear;
  }
  .add-btm__2row.scroll_events .js-thum07{
    opacity: 1;
    transition: all 0.5s ease-out 0.3s;
  }
　　
  .top__title-en {
    padding-bottom: 5px;
  }
  .top__title {
    height: 65px;
  }
  .add-top__1row, .add-top__2row, .add-top__3row, .add-top__4row, .add-top__5row {
    height: 350px;
  }

}/*end*/



/***********************************************************************
smart phone
***********************************************************************/
@media screen and (max-width:640px) {
  section.bnr{
    width: 320px;
    margin: auto auto 50px auto;
  }
  /*背景*/
  .add__bg::before {
    top: 700px;
    width: 100%;
    height: 968px;
  }
    @media screen and (max-width:640px) {
        .add__bg::before {
    top: 150px;
  }
    }
  .add-bg-white {
    display: none;
  } 
  
  /*タイトル*/
  .top__title {
    width: 205.5px;
    margin: 55px auto 40px;
  }
  
  /*トップコンテンツ*/
  .add-top__wrap {
    width: 100%;
    /*width: 78%;*/
    margin: 0 auto 50px;
  }
  .add-top__1row,
  .add-top__2row,
  .add-top__3row,
  .add-top__4row,
  .add-top__5row {
    margin-bottom: 0;
  }
  .add-top__1row,
  .add-top__2row,
  .add-top__3row,
  .add-top__4row,
  .add-top__5row{
    display: block;
  }  
  .add-top__1row p,
  .add-top__2row p{
    margin: 0 auto;
  } 
  .add-top__thum {
    padding: 0;
    text-align: center;
  }
  .add-btm__2row .add-top__thum {
    width: 100%;
  }
  .thum-img {
    margin-bottom: 15px;
    width: 78%;
  }
  
  /*サブタイトル*/
  .add-btm__1row .add-subtitle {
    width: 158px;
    margin: 0 auto 20px;
  }
  .add-btm__2row .add-subtitle {
    width: 75.5px;
    margin: 0 auto 20px;
  }
  
  /*キャプション幅*/
  .add-cap01 img {
    height: 32px;
    margin-bottom: 20px;
  }
  .add-cap02 img {
    height: 32px;
  }
  .add-cap03 img {
    height: 32px;
  }
  .add-cap04 img {
    height: 32px;
  }
  .add-cap05 img {
    height: 14px;
  }
  .add-cap06 img {
    height: 14px;
  }
  .add-cap07 img {
    height: 14px;
  }
  .add-cap08 img {
    height: 14px;
  }
  .add-cap09 img {
    height: 14px;
  }
  .add-cap10 img {
    height: 14px;
  }
  
  .sp-hidden{
    display: none;
  }
  
  
}/*end*/