@charset "utf-8";

@import "../../common/css/layout.css";

/*-------------------------------------------------------------------------
  contents
/*-----------------------------------------------------------------------*/
.main_contents01 {
  position: relative;
  z-index: 100;
  padding-top: 0%;
  background: url("../img/main/comics_bg.jpg");
  margin-top: 32%;
}

.main_contents_background {
  max-width: 1600px;
  display: block;
  margin: auto;
}
.container_100{
  background: #fff4c8;
}

/*-------------------------------------------------------------------------
  Key Visual
/*-----------------------------------------------------------------------*/

#visual-image img {
  width: 160%;
  margin-left: -30%;
}
.main_contents_background h1{
  max-width: 1600px;
}
.main_contents_background h1 img{
  position: absolute;
  width: 53%;
  top: -25%;
  margin-left: 23.3%;
}
.hand_left_easing {
  position: absolute;
  margin-top: 0%;
  width: 54%;
  margin-left: -8%;
}

.hand_right_easing {
  position: absolute;
  margin-top: 0%;
  width: 55%;
  margin-left: 53%;
}

.left_text {
  position: absolute;
  margin-left: 10%;
  margin-top: -32%;
  width: 16%;
  transition: transform .2s;
  transition-timing-function: cubic-bezier(0.680, 0.5, 0.265, 1.350);
  transform: scale(0);
}

.right_text {
  position: absolute;
  margin-left: 76%;
  margin-top: -29%;
  width: 16%;
  transition: transform .2s;
  transition-timing-function: cubic-bezier(0.680, 0.5, 0.265, 1.350);
  transform: scale(0);
}

.left_text.show,
.right_text.show {
  transform: scale(1);
}

/*-------------------------------------------------------------------------
  movie
/*-----------------------------------------------------------------------*/
.video {
  margin-top: -52.5%;
  width: 100%;
  margin-bottom: 29%;
}

.player {
  position: relative;
  width: 35%;
  margin: auto;
}

.video .player::before {
  display: block;
  padding-top: 56.25%;
  content: '';
}

.video .player .yt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video .player .yt iframe {
  width: 100%;
  height: 100%;
}

.video .thumnail {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 100;
  margin-top: -56.25%;
  cursor: pointer;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

.video .thumnail::before {
  display: block;
  padding-top: 56.25%;
  content: '';
}

.thumnail img {
  position: absolute;
  display: block;
  top: 0;
  width: 100%;
}

.video .thumnail::after {
  position: absolute;
  display: block;
  top: calc(50% - 45px);
  left: calc(50% - 58px);
  width: 116px;
  height: 90px;
  content: '';
}

.play_btn {
  position: absolute;
  width: 22%;
  z-index: 101;
  margin-top: -39%;
  margin-left: 38%;
}
.max1600{
  max-width: 1600px;
  margin: 0 auto;
}

.click {
  position: absolute;
  width: 13%;
  z-index: 101;
  top: 2.5%;
  left: 30%;
}
.copy_bg{
  position: absolute;
  width: 24%;
  margin-top: -13%;
  z-index: 100;
  margin-left: 37%;
}
.copy_text{
  position: absolute;
  width: 20%;
  margin-top: -13%;
  z-index: 100;
  margin-left: 40%;
}
/*-------------------------------------------------------------------------
  main_contents01
/*-----------------------------------------------------------------------*/
.main_contents01 {
  position: relative;
  z-index: 100;
}
.main_contents01 .scenes{
  padding-bottom: 5%;
}
.main_contents01 .scene01{
  position: relative;
  width: 58%;
  height: auto;
  padding-top: 2%;
  margin-left: 0%;
  z-index: 1;
}
.main_contents01 .scene02{
  position: relative;
  width: 64%;
  margin-top: -55%;
  margin-left: 36%;
  z-index: 2;
}
.main_contents01 .scene02 p.copy img{
  position: absolute;
  width: 35%;
  margin-top: -57%;
  margin-left: -19%;
}
.main_contents01 .scene02 p.ambulance{
  margin-top: -57%;
  margin-bottom: 30%;
  position: absolute;
  width: 78%;
  z-index: 1;
}
.main_contents01 .scene02 p.ambulance img{
  margin-left: 150%;
}

.main_contents01 .scene02 p.copy2 img{
  position: absolute;
  width: 31%;
  margin-top: -100%;
  margin-left: 46%;
  z-index: 2;
}
.main_contents01 .scene02 p.anim img{
  position: absolute;
  width: 56%;
  margin-top: -69%;
  margin-left: 28%;
}
.main_contents01 .scene02 p.anim2 img{
  position: absolute;
  width: 56%;
  margin-top: -32%;
  margin-left: -48%;
  z-index: 2;
}
.main_contents01 .scene02 iframe{
  position: absolute;
  top: 10%;
  width: 61%;
  margin-left: 25%;
  height: 36%;
  z-index: 0;
}
.main_contents01 .scene03{
  position: relative;
  width: 53%;
  margin-top: -9%;
  z-index: 0;
  margin-left: 1%;
}
.main_contents01 .scene04{
  position: relative;
  width: 55.2%;
  margin-top: -56%;
  margin-left: 43%;
}
.main_contents01 .title{
  position: relative;
  margin-top: 4%;
  width: 85%;
  left: -6%;
  margin-bottom: -30%;
}
.main_contents01 .chickens{
  position: relative;
  margin-top: 5%;
  width: 20%;
  left: -4%;
  margin-bottom: -19.2%;
}
.main_contents01 .frame01{
  position: relative;
  margin-top: 22%;
  width: 36%;
  left: 17%;
}
.main_contents01 .animation_frame01{
  position: relative;
  margin-top: -26%;
  width: 37%;
  margin-left: 50%;
}
.main_contents01 .animation_frame01:hover,
.main_contents02 .animation_frame02:hover,
.main_contents02 .animation_frame03:hover,
.main_contents02 .animation_frame04:hover,
.main_contents02 .animation_frame05:hover,
.main_contents02 .animation_frame06:hover{
  filter:brightness(1.1);
}
.main_contents01 .animation_frame01 .check_details{
  position: absolute;
  margin-top: 57%;
  margin-left: 2%;
  width: 29%;
  animation: bound 2300ms linear infinite both;
}
.main_contents01 .animation_frame01_gif{
  position: relative;
  margin-top: -27%;
  width: 31%;
  margin-left: 52%;
  z-index: -1;
  transform: rotate(-5deg);
  margin-bottom: -47.8%;
}
/*-------------------------------------------------------------------------
  main_contents01
/*-----------------------------------------------------------------------*/
.main_contents02{
  background: url("../img/life/bg.jpg");
  position: relative;
  z-index: 10;
}
.main_contents02 .main_contents02_width{
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
}
.main_contents02 .main_contents02_width .cercle{
  position: relative;
}
.main_contents02 .main_contents02_width .cercle img {
  animation: cercle 15s linear infinite;
  margin-top: 5%;
}
@keyframes cercle {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.main_contents02 .main_contents02_width .character01{
  position: absolute;
  width: 39%;
  top: -6%;
  margin-left: 70%;
}
.main_contents02 .main_contents02_width .character02{
  position: relative;
  width: 37%;
  margin-top: -81%;
  margin-left: -10%;
}
.main_contents02 .main_contents02_width .character03{
  position: relative;
  width: 39%;
  margin-top: -72%;
  margin-left: 69%;
}
.main_contents02 .main_contents02_width .character04{
  position: relative;
  width: 33%;
  margin-top: 23%;
  margin-left: -8%;
}
.main_contents02 .main_contents02_width .character05{
  position: relative;
  width: 34%;
  margin-left: 73%;
  margin-top: -55%;
}
.main_contents02 .main_contents02_width .frame02{
  position: absolute;
  width: 51%;
  margin-left: 45%;
  margin-top: -144%;
}
.main_contents02 .main_contents02_width .frame03{
  position: absolute;
  width: 36%;
  margin-left: 16%;
  margin-top: -85%;
}
.main_contents02 .main_contents02_width .frame04{
  position: absolute;
  width: 53%;
  margin-left: 42%;
  margin-top: -49%;
}
.main_contents02 .main_contents02_width .animation_frame02{
  position: absolute;
  width: 36%;
  top: 25%;
  margin-left: 11%;
}
.main_contents02 .main_contents02_width .animation_frame02 .check_details{
  position: absolute;
  margin-top: 52%;
  margin-left: 68%;
  width: 29%;
  animation: bound 2300ms linear infinite both;
  z-index: 2;
}
.main_contents02 .main_contents02_width .animation_frame02 .animation_frame02_img{
  position: relative;
  z-index: 1;
}
.main_contents02 .main_contents02_width .animation_frame02 .animation_frame02_gif{
  position: absolute;
  margin-top: -72%;
  width: 83%;
  margin-left: 10%;
  z-index: 0;
  transform: rotate(4deg);
}

.main_contents02 .main_contents02_width .animation_frame03{
  position: absolute;
  width: 36%;
  top: 41%;
  margin-left: 14%;
}
.main_contents02 .main_contents02_width .animation_frame03 .check_details{
  position: absolute;
  margin-top: 50%;
  margin-left: 72%;
  width: 29%;
  animation: bound 2300ms linear infinite both;
  z-index: 2;
}
.main_contents02 .main_contents02_width .animation_frame03 .animation_frame03_img{
  position: relative;
  z-index: 1;
}
.main_contents02 .main_contents02_width .animation_frame03 .animation_frame03_gif{
  position: absolute;
  margin-top: -72%;
  width: 86%;
  margin-left: 7%;
  z-index: 0;
  transform: rotate(-3deg);
}

.main_contents02 .main_contents02_width .animation_frame04{
  position: absolute;
  width: 36%;
  top: 44%;
  margin-left: 49%;
  z-index: 3;
}
.main_contents02 .main_contents02_width .animation_frame04 .check_details{
  position: absolute;
  margin-top: 54%;
  margin-left: 66%;
  width: 29%;
  animation: bound 2300ms linear infinite both;
  z-index: 2;
}
.main_contents02 .main_contents02_width .animation_frame04 .animation_frame04_img{
  position: relative;
  z-index: 1;
}
.main_contents02 .main_contents02_width .animation_frame04 .animation_frame04_gif{
  position: absolute;
  margin-top: -72%;
  width: 86%;
  margin-left: 7%;
  z-index: 0;
  transform: rotate(3deg);
}



.main_contents02 .main_contents02_width .animation_frame05{
  position: absolute;
  width: 36%;
  top: 59%;
  margin-left: 48%;
}
.main_contents02 .main_contents02_width .animation_frame05 .check_details{
  position: absolute;
  margin-top: 56%;
  margin-left: 1%;
  width: 29%;
  animation: bound 2300ms linear infinite both;
  z-index: 2;
}
.main_contents02 .main_contents02_width .animation_frame05 .animation_frame05_img{
  position: relative;
  z-index: 1;
}
.main_contents02 .main_contents02_width .animation_frame05 .animation_frame05_gif{
  position: absolute;
  margin-top: -72%;
  width: 86%;
  margin-left: 4%;
  z-index: 0;
  transform: rotate(-6deg);
      max-height: 475px;
}

.main_contents02 .main_contents02_width .animation_frame06{
  position: absolute;
  width: 36%;
  top: 73%;
  margin-left: 12%;
}
.main_contents02 .main_contents02_width .animation_frame06 .check_details{
  position: absolute;
  margin-top: 50%;
  margin-left: 68%;
  width: 29%;
  animation: bound 2300ms linear infinite both;
  z-index: 2;
}
.main_contents02 .main_contents02_width .animation_frame06 .animation_frame06_img{
  position: relative;
  z-index: 1;
}
.main_contents02 .main_contents02_width .animation_frame06 .animation_frame06_gif{
  position: absolute;
  margin-top: -72%;
  width: 86%;
  margin-left: 4%;
  z-index: 0;
  transform: rotate(-6deg);
}

.main_contents02 .main_contents02_width .ambulance{
  position: absolute;
  top: 40%;
  width: 26%;
  margin-left: 78%;
  z-index: 4;
}
.main_contents02 .main_contents02_width .title_details{
  position: absolute;
  width: 70%;
  margin-left: 14%;
  margin-top: -15%;
}


.button-link,
.button-link2{
  cursor: pointer;
}
.detail_container p.people{
  margin-top: 0.5%;
  color: #000;
}
.detail_container p.people::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  background-image: url("../img/life/triangle.png");
  background-size: 10px 10px;
}
.detail_container p.people a{
  color:#000;
}
.detail_container p.people a:hover{
  opacity: 0.8;
}



.title_details .title_container{
  position: relative;
  margin-top: -12.8%;
  margin-left: 4%;
  font-size: 1.1vw;
  font-weight: bold;
}
.title_details .title_container .cero{
  position: relative;
  margin-top: -11.5%;
  margin-left: 45%;
  width: 5%;
}
.title_details .title_container .buy{
  position: relative;
  margin-top: -6.1%;
  margin-left: 61%;
  width: 36%;
}
.title_details .title_container .buy img:hover{
  opacity: 0.8;
}
.title_details .title_container .buy a:nth-of-type(2) img{
  margin-top: 4%;
}

/*-------------------------------------------------------------------------
  animation
/*-----------------------------------------------------------------------*/
@keyframes waves {
  0% {
    transform: rotate(0deg)
  }

  10% {
    transform: rotate(2deg)
  }

  20% {
    transform: rotate(0deg)
  }

  30% {
    transform: rotate(4deg)
  }

  40% {
    transform: rotate(0deg)
  }

  50% {
    transform: rotate(2deg)
  }

  60% {
    transform: rotate(0deg)
  }

  to {
    transform: translate(0) rotate(0deg)
  }
}

@keyframes waves2 {
  0% {
    transform: translate(0) rotate(0deg)
  }

  25% {
    transform: translate(2px, 2px) rotate(1deg)
  }

  50% {
    transform: translateY(2px) rotate(0deg)
  }

  75% {
    transform: translate(2px) rotate(-1deg)
  }

  to {
    transform: translate(0) rotate(0deg)
  }
}

@keyframes bound {
  0% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  19.5% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  20% {
    transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  22.15% {
    transform: matrix3d(0.708, 0, 0, 0, 0, 0.708, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  22.4% {
    transform: matrix3d(0.738, 0, 0, 0, 0, 0.738, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  24.3% {
    transform: matrix3d(0.955, 0, 0, 0, 0, 0.955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  24.8% {
    transform: matrix3d(0.996, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  26.46% {
    transform: matrix3d(0.879, 0, 0, 0, 0, 0.879, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  26.71% {
    transform: matrix3d(0.868, 0, 0, 0, 0, 0.868, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  28.51% {
    transform: matrix3d(0.832, 0, 0, 0, 0, 0.832, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  28.61% {
    transform: matrix3d(0.833, 0, 0, 0, 0, 0.833, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  31.41% {
    transform: matrix3d(0.899, 0, 0, 0, 0, 0.899, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  34.16% {
    transform: matrix3d(0.996, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  34.31% {
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  38.02% {
    transform: matrix3d(0.947, 0, 0, 0, 0, 0.947, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  39.72% {
    transform: matrix3d(0.956, 0, 0, 0, 0, 0.956, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  43.82% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  47.53% {
    transform: matrix3d(0.984, 0, 0, 0, 0, 0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  50.83% {
    transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  53.33% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  57.04% {
    transform: matrix3d(0.995, 0, 0, 0, 0, 0.995, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  61.99% {
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  62.94% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  66.55% {
    transform: matrix3d(0.998, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  70% {
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  72.45% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  76.16% {
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  81.96% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }

  100% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}

.click.animation img {
  animation: bound 2500ms linear infinite both;
}

.player:hover .play_btn img {
  filter:brightness(1.1);
  opacity: 0.95;
}

.play_btn,
.click {
  pointer-events: none;
}


#hand-visual {
  max-width: 1600px;
  position: relative;
  margin: auto;
}

figure {
  min-height: auto !important;
  height: auto !important;
}

/*-------------------------------------------------------------------------
  modal
/*-----------------------------------------------------------------------*/
/* #modal-content {
  width: 60%;
  min-width: 642px;
  max-width: 1078px;
  background-size: cover;
  position: fixed;
  display: none;
  z-index: 1002;
  top: 10% !important;
} */

#modal-content {
  width:100%;
  height: 100%;
  overflow-y: auto;
  background-size: cover;
  position: fixed;
  display: none;
  z-index: 10002;
  overflow-x: hidden;
  top: 0% !important;
}
#modal-content .center{
  max-width: 1600px;
  margin: 0 auto;
}
#modal-content .modal_sizing{
  width: 64%;
  margin-left: 18%;
  position: absolute;
  top: 10%;
  min-width: 642px;
  max-width: 1078px;
}


#modal-content2 {
  width: 68%;
  min-width: 642px;
  max-width: 1078px;
  margin-left: 10%;
  margin: 0;
  /* background:url("../img/modal/modal_bg.jpg"); */
  position: fixed;
  display: none;
  z-index: 1002;
  top: 12% !important;
}

#modal-overlay {
  z-index: 10001;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: rgba(0, 0, 0, 0.75);
}
.button-link:hover {
  cursor: pointer;
}

#slider,
#slider2  {
  z-index: 100;
  display: contents;
}

#slider iframe,
#slider2 iframe {
  width: 76%;
  height: 27.4vw;
  margin-left: 12%;
}
#slider iframe,
#slider2 iframe{
  background: #fffce8;
  border:10px #fffce8 solid;
  box-shadow: 6px 6px rgba(0,0,0,0.2);
  max-height: 475px;
  min-height: 283px;
}
.slider_title{
  width: 76%;
  margin-left: 12%;
  margin-top: 5%;
  margin-bottom: 1%;
}
.slider_copy{
  width: 65%;
  margin-left: 17%;
  margin-top: 0%;
  margin-bottom: 6%;
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,1));
}
img.slide-arrow {
  width: 7%;
}
.slick-dots {
  bottom: -6%;
  /* transform: skewY(5deg) rotate(-5deg); */
}
.slick-dots li {
  width: 1.2vw;
  height: 1.2vw;
  border-radius: 50%;
  background-color: #28323a;
  margin: 0 2%;
}
  .slick-dots li button {
    display: none;
  }
.slick-dots li.slick-active {
  background-color: #ddded2;
}



.movie {
  margin-top: 30%;
}

.slick-arrow {
  width: 10%;
}

.slide-arrow {
  z-index: 1000;
  position: absolute;
  cursor: pointer;
}

.prev-arrow {
  top: 0;
  margin-top: 33%;
  margin-left: 2%;
}

.next-arrow {
  top: 0;
  right: 1%;
  margin-top: 33%;
}

.slick-disabled {
  display: none !important;
}

.close_btn {
  width: 8%;
  position: absolute;
  z-index: 1111;
  right: -10%;
  margin-top: -4.9%;
  cursor: pointer;
}
.modal_bg{
  position: absolute;
  top: 0%;
  z-index: -1;
  width: 100%;
}
.slick-dots{
  width: 60%;
  margin-left: 20%;
  position: relative
}


/*-------------------------------------------------------------------------
  footer
/*-----------------------------------------------------------------------*/
.container_100.white {
  background: #fff;
}

#footer {
  margin-top: -1%;
  position: relative;
  z-index: 1;
}

#sns {
  padding-right: 6%;
}

#sns li {
  width: auto !important;
  padding-right: 0%;
}
#footer #links {
  margin-top: 2%;
}

/*-------------------------------------------------------------------------
  960
/*-----------------------------------------------------------------------*/
@media (max-width: 960px) {
  .title_details .title_container{
    font-size: 11px !important;
  }
}
/*-------------------------------------------------------------------------
  1600
/*-----------------------------------------------------------------------*/

@media (min-width: 1600px) {
  #visual {
    width: 100%;
    overflow: hidden;
    height:1050px;
  }

  #visual-image img {
    width: auto;
    margin-left: 0%;
  }

  #visual-image {
    position: relative;
    left: 50%;
    margin-left: -1300px;
  }
  .main_contents01 {
    padding-top: 0;
    margin-top: 0px;

  }
  .main_contents_background h1 img{
    position: absolute;
    width: 840px;
    top: -500px;
    margin-left: 373px;
  }
  #modal-content .modal_sizing{
    margin-left: 261px;
  }
  .player {
    width: 550px;
  }

  .video {
    margin-top: -847px;
    margin-bottom: 476px;
  }

  .car_animation {
    margin-top: -1500px;
  }

  .click {
    width: 250px;
    margin-left: -12px;
    position: relative;
    top: -821px;
  }
  .title_details .title_container{
    font-size: 18px !important;
  }
}