/* bg */
#bg {
  width: 100%;
  position: relative;
}

#bg img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

#bg span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
}

#bg.opening span {
  animation: bg 1s ease-in-out forwards;
}

@keyframes bg {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}
/* bg */

/* menu01 */
#menu01 {
  margin-top: 30px;
}

#menu01 h2 {
  font-size: 30px;
  text-align: center;
  font-weight: 600;
  margin-bottom: 30px;
}

#menu01 h2 span {
  font-size: 20px;
}

#menu01 .wrap {
  display: flex;
  justify-content: space-between;
}

#menu01 .left , #menu01 .right {
  width: 50%;
  opacity: 0;
}

#menu01 .content {
  margin-top: 40px;
}

#menu01 .left .content:nth-child(1) , #menu01 .right .content:nth-child(1) {
  margin-top: 0;
}

#menu01 .content h3 {
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 10px;
}

#menu01 .content p {
  font-size: 16px;
  margin-bottom: 10px;
}

#menu01 .content p span {
  color: #bf272d;
  font-weight: 600;
}

#menu01 .photo {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#menu01 .photo .img {
  width: 303px;
  margin-bottom: 20px;
  opacity: 0;
}

#menu01 .photo .img:nth-child(5) ,
#menu01 .photo .img:nth-child(6) ,
#menu01 .photo .img:nth-child(7) ,
#menu01 .photo .img:nth-child(8) {
  margin-bottom: 0;
}

#menu01 .photo .img img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

#menu01 .left.scroll_on {
  animation: menu01 0.75s ease-in-out forwards;
}

#menu01 .right.scroll_on {
  animation: menu01 0.75s ease-in-out forwards;
}

#menu01 .photo .img:nth-child(1).scroll_on {
  animation: photo 1s ease-in-out forwards;
}

#menu01 .photo .img:nth-child(2).scroll_on {
  animation: photo 1s ease-in-out .1s forwards;
}

#menu01 .photo .img:nth-child(3).scroll_on {
  animation: photo 1s ease-in-out .2s forwards;
}

#menu01 .photo .img:nth-child(4).scroll_on {
  animation: photo 1s ease-in-out .3s forwards;
}

#menu01 .photo .img:nth-child(5).scroll_on {
  animation: photo 1s ease-in-out .4s forwards;
}

#menu01 .photo .img:nth-child(6).scroll_on {
  animation: photo 1s ease-in-out .5s forwards;
}

#menu01 .photo .img:nth-child(7).scroll_on {
  animation: photo 1s ease-in-out .6s forwards;
}

#menu01 .photo .img:nth-child(8).scroll_on {
  animation: photo 1s ease-in-out .7s forwards;
}

@keyframes menu01 {
  0% {
    opacity: 0;
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes photo {
  0% {
    opacity: 0;
    transform: scale(1.1) translate(0,100px) skew(0deg,-5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translate(0,0) skew(0deg,0deg);
  }
}

@media all and (max-width: 1280px) {
  #menu01 {
    width: 90%;
    margin: 30px auto 0;
  }

  #menu01 .left, #menu01 .right {
    width: 48%;
  }

  #menu01 .photo .img {
    width: 23%;
  }
}

@media all and (max-width: 520px) {
  #menu01 h2 {
    font-size: 25px;
  }

  #menu01 h2 span {
    font-size: 16px;
  }

  #menu01 .wrap {
    display: block;
  }

  #menu01 .left, #menu01 .right {
    width: 100%;
  }

  #menu01 .content h3 {
    font-size: 18px;
  }

  #menu01 .content p {
    font-size: 14px;
    line-height: 2;
  }

  #menu01 .photo .img {
    width: 100%;
  }

  #menu01 .photo .img:nth-child(5) ,
  #menu01 .photo .img:nth-child(6) ,
  #menu01 .photo .img:nth-child(7) ,
  #menu01 .photo .img:nth-child(8) {
    margin-bottom: 20px;
  }


  #menu01 .photo .img:nth-child(2).scroll_on {
    animation: photo 1s ease-in-out forwards;
  }

  #menu01 .photo .img:nth-child(3).scroll_on {
    animation: photo 1s ease-in-out forwards;
  }

  #menu01 .photo .img:nth-child(4).scroll_on {
    animation: photo 1s ease-in-out forwards;
  }

  #menu01 .photo .img:nth-child(5).scroll_on {
    animation: photo 1s ease-in-out forwards;
  }

  #menu01 .photo .img:nth-child(6).scroll_on {
    animation: photo 1s ease-in-out forwards;
  }

  #menu01 .photo .img:nth-child(7).scroll_on {
    animation: photo 1s ease-in-out forwards;
  }

  #menu01 .photo .img:nth-child(8).scroll_on {
    animation: photo 1s ease-in-out forwards;
  }

}
/* menu01 */

/* menu02 */
#menu02 {
  margin-top: 50px;
}

#menu02 h2 {
  font-size: 30px;
  text-align: center;
  font-weight: 600;
  margin-bottom: 30px;
}

#menu02 h2 span {
  font-size: 20px;
}

#menu02 .wrap {
  display: flex;
  justify-content: space-between;
}

#menu02 .left , #menu02 .right {
  width: 50%;
  opacity: 0;
}

#menu02 .content {
  margin-top: 40px;
}

#menu02 .left .content:nth-child(1) , #menu02 .right .content:nth-child(1) {
  margin-top: 0;
}

#menu02 .content h3 {
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 10px;
}

#menu02 .content p {
  font-size: 16px;
  margin-bottom: 10px;
}

#menu02 .content p span {
  color: #bf272d;
  font-weight: 600;
}

#menu02 .left.scroll_on {
  animation: menu02 0.75s ease-in-out forwards;
}

#menu02 .right.scroll_on {
  animation: menu02 0.75s ease-in-out forwards;
}

@keyframes menu02 {
  0% {
    opacity: 0;
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@media all and (max-width: 1280px) {
  #menu02 {
    width: 90%;
    margin: 30px auto 0;
  }

  #menu02 .left, #menu02 .right {
    width: 48%;
  }
}

@media all and (max-width: 520px) {
  #menu02 h2 {
    font-size: 25px;
  }

  #menu02 h2 span {
    font-size: 16px;
  }


  #menu02 .wrap {
    display: block;
  }

  #menu02 .left, #menu02 .right {
    width: 100%;
  }

  #menu02 .right .content:nth-child(1) {
    margin-top: 40px;
  }

  #menu02 .content h3 {
    font-size: 18px;
  }

  #menu02 .content p {
    font-size: 14px;
    line-height: 2;
  }
}
/* menu02 */

/* menu03 */
#menu03 {
  margin-top: 50px;
}

#menu03 h2 {
  font-size: 30px;
  text-align: center;
  font-weight: 600;
  margin-bottom: 30px;
}

#menu03 h2 span {
  font-size: 20px;
}

#menu03 .content {
  display: flex;
  margin-bottom: 50px;
}

#menu03 .content:nth-child(3) {
  margin-bottom: 0;
}

#menu03 .content .left {
  width: 50%;
  opacity: 0;
}

#menu03 .content .right {
  opacity: 0;
}

#menu03 h3 {
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 20px;
}

#menu03 h3 span {
  color: #bf272d;
}

#menu03 ul li {
  font-size: 16px;
  margin-bottom: 10px;
}

#menu03 .left.scroll_on {
  animation: menu03_left 1s ease-in-out forwards;
}

#menu03 .right.scroll_on {
  animation: menu03_right 1s ease-in-out forwards;
}

@keyframes menu03_left {
  0% {
    opacity: 0;
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes menu03_right {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media all and (max-width: 1280px) {
  #menu03 {
    width: 90%;
    margin: 30px auto 0;
  }

  #menu03 .content {
    justify-content: space-between;
  }

  #menu03 .content .left {
    width: 48%;
  }

  #menu03 .content .right {
    width: 48%;
  }

  #menu03 .content .right img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
  }
}

@media all and (max-width: 520px) {
  #menu03 h2 {
    font-size: 25px;
  }

  #menu03 h2 span {
    font-size: 16px;
  }


  #menu03 .content {
    display: block;
  }

  #menu03 .content .left {
    width: 100%;
  }

  #menu03 h3 {
    font-size: 18px;
  }

  #menu03 ul li {
    font-size: 14px;
  }

  #menu03 .content .right {
    margin-top: 20px;
    width: 100%;
  }

  #menu03 .content .right img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
  }
}
/* menu03 */

/* menu04 */
#menu04 {
  margin-top: 50px;
}

#menu04 h2 {
  font-size: 30px;
  text-align: center;
  font-weight: 600;
  margin-bottom: 30px;
}

#menu04 h2 span {
  font-size: 20px;
}

#menu04 .wrap {
  display: flex;
  justify-content: space-between;
}

#menu04 .left , #menu04 .right {
  width: 50%;
  opacity: 0;
}

#menu04 .content {
  margin-top: 40px;
}

#menu04 .left .content:nth-child(1) , #menu04 .right .content:nth-child(1) {
  margin-top: 0;
}

#menu04 .content h3 {
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 10px;
}

#menu04 .content p {
  font-size: 16px;
  margin-bottom: 10px;
}

#menu04 .content p span {
  color: #bf272d;
  font-weight: 600;
}

#menu04 .left.scroll_on {
  animation: menu04 0.75s ease-in-out forwards;
}

#menu04 .right.scroll_on {
  animation: menu04 0.75s ease-in-out forwards;
}

@keyframes menu04 {
  0% {
    opacity: 0;
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@media all and (max-width: 1280px) {
  #menu04 {
    width: 90%;
    margin: 30px auto 0;
  }

  #menu04 .left, #menu04 .right {
    width: 48%;
  }
}

@media all and (max-width: 520px) {
  #menu04 h2 {
    font-size: 25px;
  }

  #menu04 h2 span {
    font-size: 16px;
  }


  #menu04 .wrap {
    display: block;
  }

  #menu04 .left, #menu04 .right {
    width: 100%;
  }

  #menu04 .right .content:nth-child(1) {
    margin-top: 40px;
  }

  #menu04 .content h3 {
    font-size: 18px;
  }

  #menu04 .content p {
    font-size: 14px;
    line-height: 2;
  }
}
/* menu04 */