@charset "utf-8";
html{
  touch-action: manipulation;
}

.mw-1200 {
  max-width: 1200px;
  margin: 0 auto; 
}
#circle{
  pointer-events: none;
  position: fixed;
  top: -16px;     
  left: -16px;   
  width: 32px;   
  height: 32px;  
  background: url(../images/logo_red.png);
  background-size: cover;
  z-index: 1000;
  transform: translate(0,0);
  transition: transform 0.2s; 
  transition-timing-function: ease-out;
}
p{
  font-size: 16px;
}
.page_in{
	display: block;
}
.load_wrap,
.red_wrap{
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: #af1f25;
}
.load_wrap{
  animation: load_none 0.5s forwards 3s;
  z-index: 30000003;
}
@keyframes load_none{
  0%{opacity: 1;}
  100%{opacity: 0;}
}
.load_logo{
  position: absolute;
  width: 30%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
[class^="loadimg_"]{
  position: fixed;
  animation: load_img 1.6s forwards;
  animation-delay: 1.3s;
  opacity: 0;
}
@keyframes load_img{
  0%{transform: translateY(10px);
  opacity: 0;}
  90%{transform: translateY(0);
  opacity: 1;}
}
.loadimg_creative{
  width: 65%;
  left: 26vw;
  top: 20vh;
}
.loadimg_world{
  width: 15%;
  left: 8vw;
  top: 19vh;
}
.loadimg_smile{
  width: 65%;
  left: 25vw;
  top: 27vh;
}


.red_wrap{
  animation: red_wrap 0.7s forwards;
  animation-delay: 4s;
  top: 0;
  z-index: 30000002;
}
@keyframes red_wrap{
  0%{top: 0;}
  100%{top: -100vh;}
  }

.logo_wrap{
  position: fixed;
  width: 26vw;
  top: 3vh;
  left: 5vw;
}
.home_logo {
  width: 26vw;    
  position: fixed;
  top: 3vh;
  left: 5vw;
  z-index: 500000000;
}
.homebtn_wrap{
    position: fixed;
    top: 2.5vh;
    right: 3vw;
    width: 18vw;
    height: 18vw;
    z-index: 30000001;
}
.homebtn_wrap img{
  position: absolute;
}
.home_btn2{
  opacity: 0;
}


/* top */
.top img{
  position: fixed;
  left: -100%;
  transform-origin: left;
}
.top_creative{
  width: 60%;
  top: 17vh;
  animation: top_img 2s 4.3s forwards;
}
.top_for{
  width: 28%;
  top: 24vh;
  animation: top_img 2s 4.4s forwards;
}
.top_smile{
  width: 70%;
  top: 28vh;
  animation: top_img 2s 4.5s forwards;
}
@keyframes top_img {
  0%{left: -100%;opacity: 0;}
  5%{opacity: 1;}
  50%{left: 5%;opacity: 1;transform: scale(1);}
  90%{transform: scale(0.9);}
  100%{left: 5%;transform: scale(0.9);}
}
.homevideo_wrap{
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}
.top_video{
  transform: translate(-50%, 0);
  position: fixed;
  z-index: 5;
  width: auto;
  height: 45vh;
  top: 55vh;
  left: 50%;
  z-index: 6;
  transition: 0.5s;
  transform-origin: center bottom;
}


/* main */
.main{
  position: relative;
  z-index: 100;
  background-color: #fff;
  padding-top: 64px;
  margin: 50vh 0 0 0;
}
.appealtext_wrap{
  margin: 0 10%;
}
.creative{
  width: 90%;
}
.for{
  width: 35%;
  margin: 8px 0 0 3px;
}
.smile{
  margin: -10px 0 0 0;
}

.about_p{
  width: 80%;
    margin: 32px 10% -16px 10%;
    position: relative;
    font-weight: 700;
}

.about_a{
 color: #333;
 position: relative;
 display: block;
 text-align: center;
 width: 90px;
 height: 90px;
 margin: 40px auto;
 border-radius: 50%;
 background-color: #fff;
 box-shadow: 0px 0px 20px 1px #dadada;
 z-index: 20000;
 transition: 1s;
}
.about_a span{
  width: 100%;
  font-weight: 700;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.btn_scale{
	transform: scale(20);
}
/* partner */
.title_wrap {
  margin: 64px 0 0 0;
  overflow: hidden;
  height: 24px;
  text-align: center;
}
.title {
  position: relative;
  letter-spacing: 2px;
  font-weight: 700;
  overflow: hidden;
  height: 48px;
  font-size: 16px;
}
.partner_list {
  padding: 64px 10%;
  display:-webkit-box;
  display:-ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.partner_list li {
  position: relative;
  height: 100px;
  width: 50%;
  display: inline-block;
}
.partner_list img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.list_img{
  opacity: 0;
  width: 90%;
}
.img_appearance{
  animation: appearance 0.6s forwards;
}
@keyframes appearance{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

.footer_black {
  position: fixed;
  bottom: 0;
  height: 30vh;
  background-color: #000;
  width: 100vw;
}

@media screen and (min-width:768px){
.about_p {
    font-size: 32px;
}

.list_img{
  opacity: 0;
  width: 80%;
}
}
@media screen and (max-width:900px) {
  .pc,
  #circle{
    display: none;
  }
}
@media screen and (min-width:1000px) {
body{
  background-color: snow;
}
.footer_black{
  display: none;
}
.top_video{
  width: 60vw;
  height: auto;
  transform: translate(0,0);
  right: 10vw;
  left: auto;
  transform-origin: right bottom;
  transition: 1s;
  top: auto;
  bottom: 0;
}
.homebtn_wrap{
  width: 92px;
  height: 92px;
  right: 10vw;
}
.logo_wrap{
  width: 9vw;
  left: 10vw;
}
.load_logo{
  width: 15%;
}
.loadimg_creative{
  width: 26%;
  left: 18vw;
}
.loadimg_world{
  width: 6%;
  left: 10vw;
}
.loadimg_smile{
  width: 26%;
  left: 18vw;
  top: 30vh;
}
.top img{
  width: auto;
  z-index: 10;
}
.top_creative{
  height: 16vh;
  top: 20vh;
  animation: top_img 2s 4.3s forwards;
}
.top_for{
  height: 15vh;
  top: 35vh;
  animation: top_img 2s 4.4s forwards;
}
.top_smile{
  height:27vh;
  top: 42vh;
  animation: top_img 2s 4.5s forwards;
}
@keyframes top_img {
  0%{left: -100%;opacity: 0;}
  5%{opacity: 1;}
  50%{left: 10%;opacity: 1;transform: scale(1);}
  90%{transform: scale(0.9);}
  100%{left: 10%;transform: scale(0.9);}
}
.main{
  margin: 100vh 0 0 0;
  padding: 20vh 0 0 0;
}
.for{
   width: 35%;
    margin: 20px 0 0 8px;
}
.smile{
  width: 90%;
}
.appealtext_wrap {
  margin: 0 25%
}
.about_p{
  width: 50%;
  margin: 64px 25% 0 25%;
  font-size: 24px;
}
.about_a{
  width: 100px;
  height: 100px;
}
.about_a span{
  font-size: 18px;
}

.partner_list li{
  width: calc(100%/3);
}
.home_globalfooter{
  padding: 0 15%;
}
}

.next-contents {
  width: 100%;
  height: 200px;
  background-image: url(../images/about-concept.jpg);
  background-size: cover;
  background-position: center;
  position: relative;
}

@media screen and (min-width:768px){
  .next-contents {
    height: 400px;
  }
}

@media screen and (min-width:1200px) {

  .list_img{
    opacity: 0;
    width: 75%;
  }
}