@charset "UTF-8";

* {
	margin: 0;
	padding: 0;
}

body {
  width: 840px;
  overflow-x: hidden;
}

.main_box {
  width: 840px;
  background-color: #e9e5e4;
  display: flex;
  align-items: center;
  flex-direction: column;
}  

ul {
  list-style: none;
}

a {
  text-decoration: none; 
}


img {
  width: 100%;
}


.box_ttl_01 {
  width: 100%;
  height: 180px;
  background-color: #ffffff;
  margin-bottom: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box_ttl_02 {
  width: 100%;
  margin-bottom: 35px;
  display: flex;
  justify-content: center;
}

.box_ttl_03 {
  width: 100%;
  margin-bottom: 35px;
  display: flex;
  justify-content: center;
}

.box_ttl_04 {
  width: 100%;
  margin-bottom: 35px;
  display: flex;
  justify-content: center;
}

.box_ttl_05 {
  width: 100%;
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
}



.box_ttl--1 {
  width: 37%;
}

.box_ttl--2 {
  width: 14%;
}

.box_ttl--3 {
  width: 14%;
}


.box_ttl--4 {
  width: 9%;
}

.box_ttl--5 {
  width: 14%;
}



.box_01 {
  width: 94%;
  margin-bottom: 40px;
}

.box_02 {
  width: 60%;
  margin-bottom: 20px;
}

.box_03 {
  width: 100%;
  height: 1130px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.box_03--1 {
  width: 58%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  margin-bottom: 20px;
}

.box_03--2 {
  width: 58%;
  position: absolute;
  top: 215px;
  right: 0;
  z-index: 2;
  margin-bottom: 20px;
}

.box_03--3 {
  width: 60%;
  position: absolute;
  top: 605px;
  left: 5%;
  z-index: 1;
  margin-bottom: 20px;
}

.box_04 {
  width: 100%;
  height: 570px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.box_04--1 {
  width: 30%;
  position: absolute;
  top: -92px;
  right: 20px;
  z-index: 3;
}
.box_04--2 {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 1;
}


.box_05 {
  width: 84%;
  height: 2800px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.box_05_color--1 {
  position: absolute;
  top: -62px;
  left: -20px;
  z-index: 3;
}

.box_05--1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  margin-bottom: 20px;
}

.box_05_color--2 {
  position: absolute;
  top: 474px;
  right: -47px;
  z-index: 3;
}

.box_05--2 {
  position: absolute;
  top: 548px;
  left: 0;
  z-index: 1;
  margin-bottom: 20px;
}

.box_05_color--3 {
  position: absolute;
  top: 1023px;
  left: -7px;
  z-index: 3;
}

.box_05--3 {
  position: absolute;
  top: 1100px;
  left: 0;
  z-index: 1;
  margin-bottom: 20px;
}

.box_05_color--4 {
  position: absolute;
  top: 1579px;
  right: -77px;
  z-index: 3;
}

.box_05--4 {
  position: absolute;
  top: 1652px;
  left: 0;
  z-index: 1;
  margin-bottom: 20px;
}

.box_05_color--5 {
  position: absolute;
  top: 2127px;
  left: 8px;
  z-index: 3;
}

.box_05--5 {
  position: absolute;
  top: 2207px;
  left: 0;
  z-index: 1;
  margin-bottom: 20px;
}

.box_06 {
  width: 92%;
  height: 1920px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-bottom: 150px;
}

.box_06--1 {
  position: absolute;
  top: 60px;
  z-index: 2;
}

.box_06--2 {
  position: absolute;
  top: 435px;
  z-index: 2;
}

.box_06--3 {
  position: absolute;
  top: 820px;
  z-index: 2;
}

.box_06--4 {
  position: absolute;
  top: 1178px;
  z-index: 2;
}

.box_06--5 {
  position: absolute;
  top: 1532px;
  z-index: 2;
}

.box_07 {
  width: 92%;
  height: 1540px;
  background-image: url(../img/box_07_bgimg.gif);
  background-size: cover;
  display: block;
  position: relative;
  margin-bottom: 180px;
}

.box_07--1 {
  position: absolute;
  top: 95px;
  left: 65px;
  z-index: 2;
}

.box_07--2 {
  position: absolute;
  top: 95px;
  right: 65px;
  z-index: 2;
}

.box_07--3 {
  position: absolute;
  top: 590px;
  left: 65px;
  z-index: 2;
}

.box_07--4 {
  position: absolute;
  top: 590px;
  right: 65px;
  z-index: 2;
}

.box_07--5 {
  position: absolute;
  top: 1070px;
  left: 65px;
  z-index: 2;
}

.box_07--6 {
  position: absolute;
  top: 1070px;
  right: 65px;
  z-index: 2;
}


.box_07--7 {
  position: absolute;
  top: 310px;
  left: 3px;
  z-index: 2;
}


.box_08 {
  width: 92%;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}

.box_08--1 {
  margin: 75px auto 70px;
}

.box_08--2 {
  z-index: 2;
}

.box_08--3 {
  margin: 140px auto 70px;
}

.box_08--4 {
  z-index: 2;
  margin-bottom: 90px;
}

.box_09 {
  width: 840px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0px;
}

.box_09--1 {
  margin-bottom: 90px;
}

.box_10 {
  width: 100%;
  height: 1045px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-bottom: 200px;
}

.box_10--1 {
  width: 40%;
  z-index: 3;
  margin-bottom: 20px;
}

.box_10--2 {
  width: 53%;
  z-index: 2;
  top: 440px;
  left: 0px;
  position: absolute;
}

.box_10--3 {
  width: 60%;
  z-index: 1;
  top: 725px;
  right: 0px;
  position: absolute;
}

.box_10--4 {
  width: 11%;
  z-index: 2;
  top: 900px;
  left: 100px;
  position: absolute;
}

.box_10--5 {
  width: 13%;
  z-index: 1;
  top: 70px;
  right: 220px;
  position: absolute;
  animation: flash 1s linear infinite;
}

.box_10--6 {
  width: 14%;
  z-index: 1;
  top: -30px;
  position: relative;
  animation:3s ease-in-out infinite alternate rotationy, 3s linear infinite alternate movement_01;
}

.box_10--7 {
  width: 19%;
  z-index: 1;
  top: -70px;

  position: relative;
  animation:3s ease-in-out infinite alternate rotationy, 3s linear infinite alternate movement_02;
}


.box_11 {
  width: 100%;
  height: 1000px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-bottom: 350px;
}

.box_11--1 {
  width: 100%;
  z-index: 1;
}

.box_11--2 {
  width: 100%;
  z-index: 3;
  margin-top: 400px;
}

.box_11--3 {
  width: 16%;
  position: absolute;
  top: 450px;
  left: 380px;
  z-index: 4;
animation: fuwafuwa 3s ease-in-out infinite alternate;
}

.box_11--4 {
  width: 18%;
  position: absolute;
  top: 560px;
  right: 40px;
  z-index: 4;
animation: fuwafuwa 4s ease-in-out infinite alternate;
}
.box_11--5 {
  width: 32%;
  position: absolute;
  top: 600px;
  left: 340px;
  z-index: 4;
animation: fuwafuwa 4s ease-in-out infinite alternate;
}

.box_11--6 {
  width: 24%;
  position: absolute;
  top: 670px;
  left: 60px;
  z-index: 2;
  animation: pyonpyon 3s infinite ease;
}


.box_12 {
  width: 100%;
  height: 1150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-bottom: 300px;
}

.box_12--1 {
  width: 85%;
  z-index: 1;
}

.box_12--2 {
  width: 93%;
  z-index: 3;
  margin-top: 140px;
}

.box_12--3 {
  width: 18%;
  position: absolute;
  top: 600px;
  left: 100px;
  z-index: 4;
  animation: flash 2s linear infinite;
}





.box_13 {
  width: 100%;
  height: 1070px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.box_13--1 {
  width: 38%;
  top: 0px;
  left: 200px;
  position: absolute;
  z-index: 1;
}

.box_13--2 {
  width: 16%;
  top: 140px;
  right: 100px;
  position: absolute;
  z-index: 1;
}

.box_13--3 {
  width: 48%;
  top: 270px;
  left: 55px;
  position: absolute;
  z-index: 1;
}

.box_13--4 {
  width: 48%;
  top: 535px;
  right: 55px;
  position: absolute;
  z-index: 3;
}

.box_13--5 {
  width: 30%;
  position: absolute;
  top: 85px;
  left: 225px;
  z-index: 3;
  animation: flash 2s linear infinite;
}

.box_13--6 {
  width: 10%;
  top: 740px;
  left: 240px;
  position: absolute;
  z-index: 1;
}


.box_13--7 {
  width: 14%;
  top: 830px;
  left: 60px;
  position: absolute;
  z-index: 3;
  animation: .5s bound-anim ease-in infinite alternate;
}



.box_14 {
  width: 92%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px auto 180px;
}

.box_14--1 {
  width: 100%;
　margin-bottom: 0px;
　}




.box_15 {
  width: 92%;
  height: 880px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 150px;
}

.box_15--1 {
  width: 14%;
  top: -123px;
  right: 147px;
  position: absolute;
  z-index: 3;
}

.box_15--2 {
  width: 94%;
  z-index: 1;
}

.box_15--3 {
  width: 94%;
  z-index: 1;
}

.box_15--4 {
  width: 29%;
  top: -190px;
  right: 89px;
  position: absolute;
  z-index: 2;
  animation: spin 7s linear infinite;
}



.box_16 {
  width: 92%;
  height: 830px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.box_16--1 {
  width: 90%;
  z-index: 1;
  margin-bottom: 10px;
}

.box_16--2 {
  width: 27%;
  z-index: 1;
}

.box_16--3 {
  width: 11%;
  z-index: 2;
  top: 440px;
  left: 31px;
  position: absolute;
}

.box_16--4 {
  width: 88%;
  z-index: 1;
  top: 475px;
  position: absolute;
}

.box_16--5 {
  width: 15%;
  top:78px;
  right: -28px;
  position: absolute;
  z-index: 2;
  animation:3s linear infinite rotation;
  }

.box_16--6 {
  width: 22%;
  top: 365px;
  left: -15px;
  position: absolute;
  z-index: 2;
  animation: spin 7s linear infinite;
  }





.box_17 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px auto 70px;
}

.box_17--1 {
  width: 30%;
  z-index: 1;
  margin-left: -90px;
　}

.box_17--2 {
  width: 30%;
  z-index: 2;
  margin-top: -100px;
  margin-right: -105px;
　}

.box_17--3 {
  width: 30%;
  z-index: 3;
  margin-top: -60px;
  margin-left: -11px;
　}





.box_18 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px auto 60px;
}

.box_18_02 {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.box_18--1 {
  width: 100%;
  margin-bottom: 60px;
　}

.box_18--2 {
  width: 77%;
　}

.box_18--3 {
  width: 21%;
　}


.box_18--4 {
  width: 25%;
　}



/*アコーディオン全体*/
.accordion {
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  margin-bottom: 130px;
  position: relative;
  width: 74%;
}

.accordion_02 {
    margin-top: 0px;
  margin-bottom: 80px;
  position: relative;
  width: 74%;
}

.accordion-title {
  width: 100%;
  text-align: center;
  color: #535353;
  cursor: pointer;
  font-size: 18px;
  padding: 8px 0px;
  font-family: "yu-gothic-pr6n", sans-serif;
  font-weight: 400;
  font-style: normal;
  border-top: 1px solid #535353;
  border-bottom: 1px solid #535353;
}

.accordion-content {
  display: none;
  padding: 24px 0px;
  background-color: #e9e5e4;
}
/* タイトルの背景色 */
.accordion-item .accordion-title {
  background-color: #e9e5e4;
}


/* 矢印 */
.accordion-title {
  position: relative;
}
.accordion-title::after {
  border-right: solid 2px #535353;
  border-top: solid 2px #535353;
  content: "";
  display: block;
  height: 8px;
  position: absolute;
  right: 25px;
  top: 38%;
  transform: rotate(135deg);
  transition: transform .3s ease-in-out, top .3s ease-in-out;
  width: 8px;
}
.accordion-title.open::after {
  top: 45%;
  transform: rotate(-45deg);
}

.accordion_box {
background-color: #ffffff;
padding: 10px 0px;
}

.intro_box_01 {
  display: flex;
  align-items: center;
  width: 100%;
  border-bottom: solid 0.5px #cccccc;
}
.intro_box_01:last-child {
  border-bottom: none;
}

.intro_box_02 {
  width: 23%;
  font-size: 14px;
  padding-left: 30px;  
}

.intro_box_03 {
  font-size: 13px; 
  padding-top: 15px;
  padding-bottom: 15px;
}

.intro_box_04 {
  font-size: 14px; 
  padding: 15px 30px;
}




/* スライダー */

.slider_box_01 {
    max-width: 840px;
    display: flex;
    margin: 0px auto 50px;
    z-index: 2;
}


.slider_box_01 li {
    margin: 0px 10px;
}


.slick-arrow:before {
    content: "" !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
}

.slider_box_01 .slick-next:before {
    background: url(../img/slide_right.gif) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    opacity: 1.0;
}

.slider_box_01 .slick-prev:before {
    background: url(../img/slide_left.gif) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    opacity: 1.0;
}

.slick-arrow {
    z-index: 9999 !important;
    width: 60px !important;
    height: 60px !important;
}

.slick-next {
    right: -11px !important;
    top: 80px !important;
}

.slick-prev {
    left: -13px !important;
    top: 80px !important;
}




/* フェードイン */

.fadeIn {
  transform: translate3d(0, 50px, 0);
  transition: 1s;
  opacity: 0;
}
.fadeIn.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.fade_slow {
  transition: 5s; 
}


.box_17{
width: 100%;
display: flex;
}
.fade_in_sub{
width: 30%;
margin: 0 10px;
}

.fadein_02 {
opacity : 0;
transition : all 1s;
}

.fadein_02.active{
opacity : 1;
}



/* 画像スクロール */

.loop {
    padding-top: 20px;
    padding-bottom: 50px;
    overflow: hidden;
}

.loop__box {
    display: flex;
    width: 100%;
}
.loop__box img {
    min-width: 100%;
}
.loop__box img:first-child {
    animation: loop 50s -25s linear infinite;
}
.loop__box img:last-child {
    animation: loop2 50s linear infinite;
}



@keyframes loop {
    0% {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}
@keyframes loop2 {
    0% {
        transform: translateX(0);
    }
    to {
        transform: translateX(-200%);
    }
}



/* 画像スクロール2 */

@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}

.scroll-infinity {
  width: 840px;
  margin: -30px 0px 50px;
}
.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
.scroll-infinity__list li {
 margin: 0px 10px 30px;}

.scroll-infinity__list--left {
  animation: infinity-scroll-left 80s infinite linear 0.5s both;
}
.scroll-infinity__item {
  width: calc(100vw / 5);
}
.scroll-infinity__item>img {
  width: 105%;
}



/* 画像揺れ */
.piko_01{
  animation: pikopiko 1s steps(2, start) infinite;
}

@keyframes pikopiko {
  0% {
    transform: rotate(30deg);
  }
  to {
    transform: rotate(-10deg);
  }
}

.piko_02{
  animation: pikopiko02 1.5s steps(2, start) infinite;
}

@keyframes pikopiko02 {
  0% {
    transform: rotate(5deg);
  }
  to {
    transform: rotate(-5deg);
  }
}


.piko_03{
  animation: pikopiko03 2s steps(2, start) infinite;
}

@keyframes pikopiko03 {
  0% {
    transform: rotate(25deg);
  }
  to {
    transform: rotate(-5deg);
  }
}


/* ピカピカ */
@keyframes flash {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}


/* 左右 */
@keyframes movement_01{
  0%{ right:-190px;}
  100%{ right:-130px; }
}

@keyframes movement_02{
  0%{ right:-270px;}
  100%{ right:-210px; }
}

@keyframes rotationy {
  0%{ transform:rotateY(0);}
  100%{ transform:rotateY(360deg); }
}


/* ふわふわ */
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}


/* ぴょんぴょん */
@keyframes pyonpyon {
  /*20%と30%のtranslateの値を変えることで跳ねる高さを変えられる*/
  0% { transform: translate(0, 0); }
  5% { transform: translate(0, 0); }
  10% { transform: translate(0, 0); }
  20% { transform: translate(0, -20px); }
  25% { transform: translate(0, 0); }
  30% { transform: translate(0, -20px); }
  50% { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}


/* 弾む */
@keyframes bound-anim{
  0%{
    transform: translateY(0) scale(1); /* 通常 */
  }
  80%{
    transform: translateY(80px) scale(1); /* 60%までは普通に落ちる */
  }
  100%{
    transform: translateY(100px) scale(1.3, 0.8); /* 落下時点で少し横長に */
  }
}



/* 回転 */
@keyframes spin{
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes rotation{
  0%{ transform:rotateY(0);}
  100%{ transform:rotateY(360deg); }
}







/* 横幅 */

.w_3 {
  width: 3%
}

.w_27 {
  width: 27%
}

.w_30 {
  width: 30%
}

.w_35 {
  width: 35%
}

.w_39 {
  width: 39%
}

.w_80 {
  width: 80%
}

.w_85 {
  width: 85%
}

.w_90 {
  width: 90%
}

.w_95 {
  width: 95%
}

.w_100 {
  width: 100%
}









.br_pc{
  display: block;
}

.br_sp{
  display: none;
}


.display_pc {
  display: block !important;
}

.display_sp {
  display: none !important;
}








/*
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////

$$ Media Queries for smartphone

////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
*/

@media screen and (max-width: 600px) {

 


.br_pc{
  display: none;
}

.br_sp{
  display: block;
}


.display_pc {
  display: none !important;
}

.display_sp {
  display: block !important;
}




}