@charset "UTF-8";
/* CSS Document */

/*#animation_container{ width:315px; height:210px; background-color:rgba(255, 255, 255, 0.00);}
#dom_overlay_container{ display: block; width:315px; height:250px; position: absolute; left: 0px; top: 0px; pointer-events:none; overflow:hidden;}
#canvas{ display: block; width:315px; height:250px; background-color:rgba(255, 255, 255, 0.00); position: absolute;}*/
.top-mv{ display: block; width: 100%; height: 100%; border: none; position: absolute;}
@media print, screen and (min-width:681px){
/*  #animation_container{ width:517px; height:410px;}
  #dom_overlay_container{ width:517px; height:410px;}
  #canvas{ width:517px; height:410px;}*/
	.top-mv{ width:517px; height:410px;}
}

.site__bg{ animation-name: fadeIn; animation-duration: 3s; animation-timing-function: linear; animation-delay: 14s; animation-fill-mode: forwards; opacity: 0;}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity:1; }
}

.topbanner{ display: block; height: 110px; padding: 20px 0 0 15px; background: #000; position: relative;}
.topbanner::before{ content: ""; width: 28px; height: 28px; border: 1px solid #fff; border-radius: 50%; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);}
.topbanner::after{ content: ""; width: 8px; height: 8px; border-top: 1px solid #fff; border-right: 1px solid #fff; position: absolute; right: 30px; top: 50%; transform: translateY(-50%) rotate(45deg);}
.topbanner img{ max-width: auto; height: 66px;}z
@media print, screen and (min-width:681px){
  .topbanner{ height: 180px; padding: 42px 0 0 42px;}
  .topbanner::before{ width: 50px; height: 50px; right: 42px;}
  .topbanner::after{ width: 14px; height: 14px; right: 63px;}
  .topbanner img{ height: 93px;}
}

.concept__text{ padding: 0 0 22px 0;}
.concept__text img{ width: 334px;}
.concept__img{ width: 100vw; margin: 0 0 25px -17px;}
@media print, screen and (min-width:681px){
  .concept__text{ padding: 0 0 50px 0;}
  .concept__text img{ width: 490px;}
  .concept__img{ width: calc(100% + 70px); margin: 0 0 25px -35px;}
}

  /* slick */
.slick-list{ margin: 0 0 40px 0; overflow: hidden;}
.slick-prev,
.slick-next{ display: none;}
.slick-dotted.slick-slider{ margin-bottom: 20px;}
.slick-dots{ bottom: -25px;}
.slick-dots li{ margin: 0 1px;}
.slick-dots li button{ position: relative;}
.slick-dots li button::before{ content: ""; background: #000; width: 4px; height: 4px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%; transition: background .3s linear; opacity: 1;}
.slick-dots li.slick-active button::before{ background: #fff; border: 1px solid #000;}
.slick-dots li button:hover::before,
.slick-dots li button:focus::before{ opacity: .5;}
@media print, screen and (min-width:681px){
  .slick-list{ margin: 0 0 60px 0;}
  .slick-prev,
  .slick-next{ width: 46px; height: 46px; background: #000; z-index: 2; border-radius: 50%;}
  .slick-prev{ left: -25px;}
  .slick-next{ right: -25px;}
  .slick-prev::before{ content: ''; width: 0; height: 0; border-style: solid; border-width: 6.5px 9px 6.5px 0; border-color: transparent #fff transparent transparent; font-size: 0; opacity: 1;}
  .slick-next::before{ content: ""; width: 0; height: 0; border-style: solid; border-width: 6.5px 0 6.5px 9px; border-color: transparent transparent transparent #fff; font-size: 0; opacity: 1;}
  .slick-dots{ bottom: -35px;}
}

.profile{ margin: 0 0 25px 0; padding: 0 0 25px 0; border-bottom: 1px solid rgba(0,0,0,.1);}
.profile:nth-of-type(2){ margin: 0; padding: 0; border: none;}
.profile-img{ width: 66px; height: 66px; margin: 0 auto 20px auto; border: 1px solid #e2e2e2; border-radius: 50%; overflow: hidden;}
@media print, screen and (min-width:681px){
  .profile{ display: flex; margin: 0 0 50px 0; padding: 0 0 50px 0;}
  .profile-img{ width: 80px; height: 80px; margin: 0 30px 0 0;}
  .profile-text{ width: calc(100% - 110px);}
}

.twitter-box{ height: 340px; border: 1px solid #e0e5e9; overflow: scroll;}
@media print, screen and (min-width:681px){
  .twitter-box{ height: 500px;}
}