.main {
  font-family: "Zen Maru Gothic", sans-serif;
}

.noto {
  font-family: 'Noto Sans JP', serif;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  width: 90%;
}

.mv {
  background-image: url('../img/mv_bg.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  padding: 122px 0 318px;
  position: relative;
}

.mv_inner {
  max-width: 1320px;
  margin: 0 auto;
  width: 90%;
}

.mv_head {
  margin: 0 auto 66px;
  width: 77.42424242424242%;
}

.mv_img01 {
  margin: 0 auto;
  width: 75.75757575757576%;
}

.mv_img02 {
  position: relative;
}

.mv_img02::before {
  background-image: url("../img/mv_img02_icon_l.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  content: "";
  animation: floating 2s ease-in-out infinite alternate-reverse;
  position: absolute;
  top: 0;
  left: 4%;
  height: 281px;
  width: 362px;
}

.mv_img02::after {
  background-image: url("../img/mv_img02_icon_r.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  content: "";
  animation: floating02 2s ease-in-out infinite alternate-reverse;
  position: absolute;
  right: -10%;
  bottom: 24%;
  height: 210px;
  width: 509px;
}

@keyframes floating {
  0% {
    transform: translateY(-8%);
  }

  100% {
    transform: translateY(8%);
  }
}

@keyframes floating02 {
  0% {
    transform: translateY(8%);
  }

  100% {
    transform: translateY(-8%);
  }
}

.contents {
  background-image: url('../img/contents_bg.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  margin: -188px auto 0;
  padding: 190px 0 138px;
  position: relative;
}

.contents_head {
  margin: 0 auto 46px;
  padding: 50px 0;
  position: relative;
  width: 93.8%;
}

.contents_head::before,
.contents_head::after {
  background-image: url("../img/contents_head_bar.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  height: 15px;
  width: 938px;
}

.contents_head::before {
  top: 0;
}

.contents_head::after {
  bottom: 0;
}

.contents_subHead {
  margin: 0 0 56px auto;
  width: 98%;
}

.contents_title {
  color: #fff;
  font-size: 40px;
  margin: 0 auto 20px;
  letter-spacing: 5.4px;
  text-align: center;
  width: 100%;
}

.contents_text {
  color: #fff;
  font-size: 20px;
  letter-spacing: 4.8px;
  line-height: 1.6em;
  text-align: center;
}

.contents_items {
  margin: 0 auto;
  width: 89.2%;
}

.contents_items > li {
  margin: 0 auto 74px;
}

.contents_item.open {
  position: relative;
}

.contents_item_btn {
  display: block;
  position: absolute;
  right: 0;
  bottom: 8.3%;
  left: 0;
  margin: auto;
  transition: .2s;
  width: 43.387%;
}

.contents_item_btn::after {
  background-image: url("../img/contents_btn_arrow.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  content: "";
  position: absolute;
  top: 0;
  right: 8.8%;
  bottom: 0;
  margin: auto;
  transition: .2s;
  height: 23px;
  width: 15px;
}

.contents_item_btn:hover::after {
  right: 7%;
}

.contents_item_img.badge {
  position: relative;
}

.is_pc {
  display: block;
}

.is_sp {
  display: none;
}

@media screen and (max-width: 1610px) {
  .mv_img02::after {
    height: 13.043478vw;
    width: 31.614907vw;
    right: -4vw;
  }
}

@media screen and (max-width: 1467px) {
  .container {
    max-width: 68.166326vw;
  }
  
  .mv {
    padding: 8.316292vw 0 21.676892vw;
  }
  
  .mv_inner {
    max-width: 100%;
  }
  
  .mv_head {
    margin: 0 auto 8%;
    width: 71.067%;
  }
  
  .mv_img02::before {
    left: 6%;
    height: 17.154738vw;
    width: 21.67621vw;
  }
  
  .mv_img02::after {
    right: -5%;
    height: 14.314928vw;
    width: 30.69666vw;
  }
  
  .contents {
    margin: -12.815269vw auto 0;
    padding: 12.951602vw 0 9.406953vw;
  }

  .contents_head {
    margin: 0 auto 3.135651vw;
    padding: 3.408316vw 0;
  }
  
  .contents_head::before,
  .contents_head::after {
    height: 1.022495vw;
    width: 63.940014vw;
  }
  
  .contents_subHead {
    margin: 0 0 3.817314vw auto;
  }
  
  .contents_title {
    font-size: 2.726653vw;
    margin: 0 auto 1.363327vw;
    letter-spacing: 0.368098vw;
  }
  
  .contents_text {
    font-size: 1.363327vw;
    letter-spacing: 0.327198vw;
  }
  
  .contents_items > li {
    margin: 0 auto 5.044308vw;
  }
  
  .contents_item_btn::after {
    height: 1.567825vw;
    width: 1.022495vw;
  }
}

@media screen and (max-width: 768px) {
  .is_pc {
    display: none;
  }

  .is_sp {
    display: block;
  }
  
  .mv {
    background-image: url('../img/mv_bg_sp.jpg');
    background-size: 100%;
    padding: 8% 0 16%;
  }

  .mv_inner {
    max-width: 100%;
    width: 100%;
  }

  .mv_head {
    margin: 0 auto 8%;
    width: 74.8%;
  }

  .mv_img01 {
    margin: 0 auto 50%;
    width: 100%;
  }

  .mv_img02 {
    margin: 0 auto;
    width: 79.6%;
  }
  
  .mv_img02::before {
    top: 27%;
    right: 0;
    margin: auto;
    height: 30.933333vw;
    width: 37.333333vw;
  }
  
  .mv_img02::after {
    background-image: url("../img/mv_img02_icon_r_sp.png");
    top: -23%;
    right: 0;
    bottom: unset;
    left: 0;
    margin: auto;
    width: 64.133333vw;
    height: 26.666667vw;
  }

  .contents {
    background-image: url('../img/contents_bg_sp.png');
    margin: -4% auto 0;
    padding: 20% 0 26%;
  }

  .container {
    max-width: 100%;
    width: 90%;
  }

  .contents_head {
    margin: 0 auto 14.927%;
    padding: 10% 0;
    width: 99.704%;
  }

  .contents_head::before,
  .contents_head::after {
    background-image: url("../img/contents_head_bar_sp.png");
    height: 1.866667vw;
    width: 89.733333vw;
  }

  .contents_subHead {
    margin: 0 auto 16% 0;
  }

  .contents_title {
    font-size: 6.133333vw;
    margin: 0 auto 4%;
    letter-spacing: 0.666667vw;
  }

  .contents_text {
    font-size: 4.266667vw;
    letter-spacing: 0.533333vw;
  }

  .contents_items {
    margin: 0 auto;
    width: 100%;
  }

  .contents_items > li {
    margin: 0 auto 10%;
  }

  .contents_item_btn {
    bottom: 4.8%;
    width: 71.408%;
  }
  
  .contents_item_btn::after {
    background-image: url("../img/contents_btn_arrow_sp.png");
    height: 3.066667vw;
    width: 2vw;
  }
}