@charset "utf-8";
/**********************************************************
// CREA 30TOKYO
**********************************************************/
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Mincho";
  src: local("YuMincho Medium");
  font-weight: 400;
}

html{
  font-size:11px;
}
body{
  background:none;
}
p{
  font-size:1.4rem;
  line-height:28px;
}
a{
  text-decoration:none;
  color:#333;
}
body{
}
.inner{
  width:1080px;
  margin:auto;
}
  @media only screen and (max-width: 767px) {
    body .is_pc{display:none;}
    body .is_smart{display:block;}
    .inner{
      width:auto;
    }
  }

.tokyo30 section{
 position: unset;
 width: auto;
 margin: unset;
}
body.loading:after{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
  content:"";
  display:block;
  width:100vw;
  height:100vh;
  background:#fff url(/common/crea/images/crea30-tokyo/pc/loading.gif) no-repeat center center;
}
/***************************************
// tokyo30_header
***************************************/
.tokyo30_header{
  position:absolute;
  top:0;
  z-index:10000;
  top:10px;
  left:10px;
}
.tokyo30_header img{
  height:24px;
  width:auto;
}
  @media only screen and (max-width: 767px) {
    .tokyo30_header{
      position:static;
      padding:10px;
    }
    .tokyo30_header img{
      height:16px;
    }
  }
/***************************************
// tokyo30_mainimage
***************************************/
.tokyo30_mainimage{
  height:90vh;
  margin-bottom:60px;
}
.mainimage_box{
  position:relative;
}
.mainimage_h1{
  font-family: "Yu Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  text-align:center;
  padding-top:3vh;
}
.mainimage_h1 *{
  display:block;
  line-height:1;
  font-weight:normal;
  margin:auto;
}
.mainimage_h1 h1{
  position:relative;
}
.mainimage_h1 h1 img{
  width:60vw;
  max-width:760px;
    -webkit-filter: drop-shadow(0px 1px 2px rgba(0,0,0,.3));
    filter: drop-shadow(0px 1px 2px rgba(0,0,0,.3));
}
.mainimage_h1 span{
  font-size:6.5rem;
}
.mainimage_h1 strong{
  font-size:12rem;
}
.mainimage_h1 h1:after{
  content:"";
  display:block;
  width:20vw;
  max-width:200px;
  height:300px;
  background:url(/common/crea/images/crea30-tokyo/pc/svg/logo.svg) no-repeat;
  background-size:100% auto;
  position:absolute;
  top:15vw;
  right:0;
  left:0;
  margin:auto;
    -webkit-filter: drop-shadow(0px 1px 2px rgba(0,0,0,.3));
    filter: drop-shadow(0px 1px 2px rgba(0,0,0,.3));
}
.mainimage_bg_box{
  position:absolute;
  top:0;
  z-index:-10;
}
.mainimage_bg_box_inner{
  position:relative;
  width:100vw;
  height:90vh;
  background-image:url(/common/crea/images/crea30-tokyo/pc/bg-1.jpg);
  background-repeat:no-repeat;
  background-size:100vw auto;
  background-position:center top;
}
.mainimage_bg_box_inner.loaded{
  background:none;
}
.mainimage_bg{
  position:absolute;
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-size:100vw auto;
  background-position:center top;
}
.horizon .mainimage_bg{
  background-size:100vw auto;
}
.vertical .mainimage_bg{
  background-size:auto 100vh;
}
.mainimage_bg{
  opacity:0;
}
.mainimage_bg.hide_img{opacity:0;transition:opacity 3s ease;}
.mainimage_bg.active_img{opacity:1;transition:opacity 3s ease;}

  @media only screen and (min-width: 1280px) {
    .mainimage_bg{
      background-size:cover;
    }
  }

  @media only screen and (max-width: 767px) {
    .tokyo30_mainimage{
      margin-bottom:40px;
    }
    .mainimage_h1{
      padding-top:50px;
    }
    .mainimage_h1 h1:after{
      left:10px;
      top:100px;
      width:96px;
      height:96px;
      background-size:96px auto;
    }
    .mainimage_h1 span{
      font-size:2.5rem;
      margin-bottom:10px;
    }
    .mainimage_h1 strong{
      font-size:5rem;
    }
  }

/***************************************
// tokyo30_about
***************************************/
.tokyo30_about{
  padding-bottom:80px;
}
.tokyo30_about *{font-family: "Yu Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.tokyo30_about h2{
  font-size:2.4rem;
  margin-bottom:30px;
}
  @media only screen and (max-width: 767px) {
    .tokyo30_about{
      width:calc(100vw - 60px);
      margin:auto;
    }
  }
/***************************************
// tokyo30_posts
***************************************/
.tokyo30_posts{
  display:flex;
  justify-content:space-around;
}
.tokyo30_posts .tokyo30_list{
  width:320px;
  text-align:center;
}
.tokyo30_posts .tokyo30_list_line{
  content:"";
  display:block;
  width:1px;
  background:#f2f1e9;
  margin:160px 0 -160px;
}
.tokyo30_list h3{
  height:160px;
}
.tokyo30_list h3 img{
  width:auto;
}
.tokyo30_list h3 strong{
  display:block;
  text-align:center;
}
.tokyo30_list h3 span{
  display:inline-block;
  border:solid 1px #333;
  font-size:2.4rem;font-family: "Yu Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  line-height:1;
  padding:10px 20px;
  letter-spacing:2px;
}
.tokyo30_articles article{
  padding-bottom:50px;
}
.tokyo30_articles article strong{
  display:block;
  padding:27px 20px 16px;
  font-size:1.3rem;
}
.tokyo30_articles_tag{
  color:#888;
}
.tokyo30_articles_thumb_wrap{
  position:relative;
  width:320px;
  height:240px;
  display:block;
  overflow:hidden;
}
.tokyo30_articles_thumb{
 position:absolute;
 width:auto;
 max-width: inherit;
 height:240px;
 top:50%;
 left:50%;
 transform:translate(-50%,-50%);
}
  @media only screen and (max-width: 767px) {
    .tokyo30_posts{
      display:block;
      width:auto;
    }
    .tokyo30_posts .tokyo30_list{
      width:calc(100vw - 30px);
      margin:auto;
    }
    .tokyo30_posts .tokyo30_list article img{
      width:100%;
    }
    .tokyo30_posts .tokyo30_list_line{
      display:none;
    }
    .tokyo30_pickup_tag,
    .tokyo30_articles_tag{
      display:inline-block !important;
      background:#38a1db;
      color:#fff;
      font-size:1rem;
      font-weight:bold;
      padding:6px 10px;
      line-height:1;
    }
  }

/***************************************
// btn_box
***************************************/
.btn_box{
  padding-bottom:60px;
}
.btn_box a{
  display:block;
  background:#4c4c4c;
  color:#fff;
  padding:20px;
  text-align:center;
  font-size:1.4rem;
  width:60%;
  margin:auto;
  line-height:1;
  transition:background .6s;
}
.btn_box a:hover{
  background:#000;
  opacity:1;
}
/***************************************
// tokyo30_pickup
***************************************/
.tokyo30_pickup{
  background:#f2f1e9;
  padding:110px 0;
}
.tokyo30_pickup h4{
  font-size:7rem;
  font-family: "Yu Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  line-height:1;
  text-align:center;
  padding-bottom:40px;
}
.tokyo30_pickup h4 strong{
  display:block;
  font-weight:normal;
  margin-bottom:-30px;
}
.tokyo30_pickup h4 span{
  font-size:1.4rem;
  display:inline-block;
  border:solid 1px #777;
  padding:10px 25px;
  background:#fff;
}
  @media only screen and (max-width: 767px) {
    .tokyo30_pickup{
      padding:40px 0;
    }
  }

.tokyo30_pickup_thumb_wrap{
  width:1080px;
  height:433px;
  display:block;
  overflow:hidden;
  position:relative;
}
.tokyo30_pickup_thumb{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);;
}
.tokyo30_articles_thumb_wrap.promoted.new:after,
.tokyo30_pickup_thumb_wrap.promoted.new:after{
 top:19px;
}
.tokyo30_articles_thumb_wrap.promoted:after,
.tokyo30_pickup_thumb_wrap.promoted:after{
content: 'Promoted';
    position: absolute;
    right: 0;
    top: 0;
    padding: 0 5px;
    line-height: 12px;
    font-size: 8px;
    background-color: rgba(255, 255, 255, 0.8);
    z-index:999;
}
.tokyo30_articles_thumb_wrap.new:before,
.tokyo30_pickup_thumb_wrap.new:before {
    content: 'NEW';
    position: absolute;
    right: 0;
    top: 0;
    width: 45px;
    line-height: 19px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    background-color: #FFED12;
    z-index:999;
}

/***************************************
// swiper-slide
***************************************/
.swiper-container {
  padding-bottom:50px;
}
.swiper-slide *{
  display:block;
}
.swiper-slide {
  text-align:center;
}
.swiper-slide strong{
  font-size:2.4rem;
  padding:30px 0 24px;
}
.swiper-pagination-bullet{
  opacity:25%;
}
.swiper-pagination-bullet-active{
  background:#333;
}
.swiper-button-next,
.swiper-button-prev{
  background:none;
}
.swiper-button-next{
  right:40px;
}
.swiper-button-prev{
  left:40px;
}
.swiper-button-next:after,
.swiper-button-prev:after{
  color:#000;
  font-size:4rem;
}
  @media only screen and (max-width: 767px) {
    .swiper-wrapper{
      margin-bottom:10px;
    }
    .swiper-slide strong{
      padding:15px 30px;
      font-size:2rem;
    }

  }


/***************************************
// tokyo30_present
***************************************/
.tokyo30_present{
  padding:110px 0 70px;
}
.tokyo30_present h5{
  font-size:7rem;font-family: "Yu Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  line-height:1;
  text-align:center;
  padding-bottom:40px;
  letter-spacing:3px;
}
.tokyo30_present .inner{
  /* background:url(/common/crea/images/crea30-tokyo/pc/bg-present.jpg) no-repeat center bottom; */
  background:url(/common/crea/images/crea30-tokyo/pc/bg-present2.jpg) no-repeat center bottom;
  background-size:100% auto;
}
.tokyo30_present_box{
  display:block;
  text-align:center;
  padding:180px 30px;
  border:solid 1px #fff;
  background:rgba(0,0,0,.1);
}
.tokyo30_present_box strong{
  font-size:3rem;font-family: "Yu Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight:normal;
  display:block;
  margin-bottom:20px;
  text-shadow:0px 1px 6px #575757;
  color:#fff;
}
.tokyo30_present_box strong span{
  display:block;
  font-family:"Yu Gothic";
  font-size:1.3rem;
  letter-spacing:3px;
  margin-bottom:15px;
}
.tokyo30_present_box strong span:after,
.tokyo30_present_box strong span:before{
  content:"";
  display:inline-block;
  width:2px;
  height:1.5em;
  background:#fff;
  border-radius:10px;
  margin-bottom:-5px;
}	
.tokyo30_present_box strong span:after{
  transform:rotate(45deg);
  margin-left:15px;
}
.tokyo30_present_box strong span:before{
  transform:rotate(-45deg);
  margin-right:15px;
}
.tokyo30_present_box a{
  display:inline-block;
  background:#fccc00;
  font-size:1.2rem;
  font-weight:bold;
  border-radius:30px;
  padding:8px 20px;
  line-height:1;
  transition:background .6s;
  box-shadow:0px 2px 6px rgba(0,0,0,.3);
}
.tokyo30_present_box a:hover{
  background:#ffb500;
  opacity:1;
}
.tokyo30_present_box a:before{
  content:"";
  background:url(/common/crea/images/crea30-tokyo/pc/icon_twitter.png) no-repeat;
  background-size:auto 18px;
  display:inline-block;
  margin-right:10px;
  width:18px;
  height:18px;
  vertical-align:-5px;
}
  @media only screen and (max-width: 767px) {
    .tokyo30_present {
      padding:60px 30px 40px;
    }
    .tokyo30_present h5{
      font-size:4rem;
    }
  }
/***************************************
// tokyo30_share
***************************************/
.tokyo30_share{
  text-align:center;
  padding-bottom:110px;
  padding-top:50px;
}
.tokyo30_share > div{
  display:inline-block;
  vertical-align:top;
}





/***************************************
// animation
***************************************/
.tokyo30_list h3 span{
  transition:border .5s;
  position:relative;
}
.tokyo30_list h3 span:after{
  content:"";
  display:block;
  background:#000;
  height:100%;
  width:100%;
  position:absolute;
  top:0;
  left:0;
}
.tokyo30_list h3 span.show_bar:after{
  width:0;
  transition:width .8s;
}


.hide_up{
  opacity:0;
  transform:translateY(20px);
  transition:1s ease;
}
.show_up{
  opacity:1;
  transform:translateY(0);
  transition:1s ease;
}
.hide{
  opacity:0;
  transition:1s ease;
}
.show{
  opacity:1;
  transition:1s ease;
}


.show_popup{
  animation:			bounce 2.3s ease normal 0s none running;
  -webkit-animation:	bounce 2.3s ease normal 0s none running;
}
@keyframes bounce {
  0%, 55%,  70%, 75%, 85%, 100% {
    transform: translateY(0px);
  }
  60% {
    transform: translateY(-10px);
  }
  70% {
    transform: translateY(-8px);
  }
  80% {
    transform: translateY(-5px);
  }
}
@-webkit-keyframes bounce {
  0%, 100%, 30%, 50%, 80% {
    transform: translateY(0px);
  }
  10% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

@media only screen and (max-width: 1080px) {
    .inner,
    #footer .bottom .inner,
    #footer .top .inner{
      width:auto;
    }
    .tokyo30_posts section{
      width:33%;
    }
    .tokyo30_posts .tokyo30_list{
      width:100%;
    }
    #footer .to-top{
      left:0;
      right:20px;
     }
  }
.mainimage_bg_box_inner.loaded{
  background-image:none !important;
}