* { margin: 0; padding: 0; box-sizing: border-box; }

body { font-size: 4vw; font-feature-settings: "palt"; width: 100%; background: url("../images/bg_dot.jpg") repeat-y; background-size: contain; }
body img { width: 100%; }

header { display: flex; justify-content: space-between; margin: 3vw; }
header .logo_h { width: 25vw; max-width: 185px; }
header .logo_b { width: 31vw; max-width: 230px; }

@media screen and (min-width: 751px) { body { font-size: 16px; background-size: cover; }
  header { margin: 40px; }
  header .logo_h { width: 204px; max-width: inherit; }
  header .logo_b { width: 230px; max-width: inherit; } }
#contents { margin: 20px 0 20px; overflow-x: hidden; }

.top_banner .slide_items .slick-dots { bottom: -30px; }
.top_banner .slide_items .slick-dots li { width: 15px; height: 15px; }
.top_banner .slide_items .slick-dots li button { width: 100%; height: 100%; }
.top_banner .slide_items .slick-dots li button:before { opacity: 1; width: 100%; height: 100%; color: transparent; background: #fff; border: 1px solid #2d4984; border-radius: 50%; }
.top_banner .slide_items .slick-dots .slick-active button:before { background: #2d4984; }

@media screen and (min-width: 751px) { #contents { max-width: 1200px; margin: 40px auto 50px; }
  .top_banner .slide_items li a { transition: 0.3s; }
  .top_banner .slide_items li a:hover { opacity: 0.8; }
  .top_banner .slide_items .slick-dots { bottom: -50px; }
  .top_banner .slide_items .slick-dots li { margin: 0 10px; width: 25px; height: 25px; } }
.contents_wrap { margin: 30vw 4vw 20px; }

@media screen and (min-width: 751px) { .contents_wrap { margin: 220px 80px 40px; } }
.about { font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 800; text-align: center; }
.about .about_wrap { position: relative; }
.about .about_wrap .line_p, .about .about_wrap .line_g { position: relative; padding: 0 4px; margin: 0 2px; }
.about .about_wrap .line_p::before, .about .about_wrap .line_g::before { content: ''; width: 100%; height: 1.2vw; border-radius: 30px; position: absolute; bottom: -1px; left: 0; right: 0; margin: auto; z-index: -1; }
.about .about_wrap .line_p::before { background: #ef8db7; }
.about .about_wrap .line_g::before { background: #b3d36d; }
.about .about_heading { font-size: 4vw; letter-spacing: 0.05em; line-height: 2em; position: relative; }
.about .about_heading::after { content: ''; background: url("../images/bg_shape_w.png") no-repeat; background-size: cover; position: absolute; top: -12vw; left: -1vw; right: 0; margin: auto; width: 97vw; height: 108vw; z-index: -2; }
.about .about_heading h1 { width: 48vw; margin: 0 auto 7vw; }
.about .about_heading h1 span { display: block; font-size: 5.3vw; letter-spacing: 0; }
.about .about_heading h1 .is-active { animation: pop 0.5s ease-out; opacity: 1; }
.about .about_heading .em { font-size: 5.3vw; }
.about .about_heading .line_p::before { bottom: 0; height: 1.5vw; }
.about .about_heading .pop_text { width: 55vw; margin: 6vw auto 0; opacity: 0; }
.about .about_heading .pop_text img { transform: rotate(-10deg); }
.about .about_heading .is-active { animation: swing_01 1.1s ease-out; opacity: 1; }
.about .about_text { font-size: 3.4vw; font-weight: 800; color: #fff; line-height: 2; letter-spacing: 0.1em; width: 75%; margin-left: auto; margin-top: 1.5vw; }
.about .about_text::after { content: ''; background: url("../images/bg_shape_b.png") no-repeat; background-size: cover; position: absolute; mix-blend-mode: multiply; top: -15vw; left: -9vw; right: 0; margin: auto; width: 89vw; height: 78vw; z-index: -2; }
.about .about_text .pack { letter-spacing: -0.5em; }
.about .about_text .notes { font-size: 2vw; font-weight: 500; margin-top: 5px; letter-spacing: 0.3vw; }

@media screen and (min-width: 751px) { .about .about_wrap .line_p::before, .about .about_wrap .line_g::before { height: 6px; bottom: 1px; }
  .about .about_heading { font-size: 26px; margin-left: -22%; }
  .about .about_heading::after { top: -100px; left: 0; right: 0; width: 630px; height: 730px; }
  .about .about_heading h1 { width: 300px; margin: 0 auto 40px; }
  .about .about_heading h1 span { font-size: 30px; }
  .about .about_heading .em { font-size: 35px; }
  .about .about_heading .line_p::before { bottom: 4px; height: 14px; }
  .about .about_heading .pop_text { width: 380px; margin: 30px auto 0; }
  .about .about_text { font-size: 20px; width: auto; margin-top: -2vw; margin-right: -40%; }
  .about .about_text::after { top: -88px; left: 0; right: -10px; width: 520px; height: 458px; }
  .about .about_text .notes { font-size: 12px; margin-top: 5px; letter-spacing: 0.1em; } }
@media screen and (min-width: 1170px) { .about .about_heading { margin-left: -20%; }
  .about .about_text { margin-right: -40%; } }
.lineup { margin-top: 40vw; padding: 24vw 7vw 40px; background: rgba(45, 73, 132, 0.2); border-radius: 30px; box-shadow: 1px 1px 8px 0px rgba(10, 31, 106, 0.45); position: relative; }
.lineup .heading h2 { width: 28vw; position: absolute; top: -18vw; left: 0; right: 0; margin: auto; z-index: 2; opacity: 0; padding: 15vw 0; }
.lineup .heading h2.is-active { animation: swing 1s ease-out; opacity: 1; }
.lineup .heading .wave { position: absolute; top: -18vw; left: 0; right: 0; margin: auto; opacity: 0; /*	transform: translateX(50%);*/ }
.lineup .heading .shape_01 { mix-blend-mode: multiply; z-index: 1; width: 48vw; }
.lineup .heading .shape_01.is-active { animation: swing_02 1s ease-out; opacity: 1; }
.lineup .heading .shape_02 { width: 50vw; left: -3vw; }
.lineup .heading .shape_02.is-active { animation: swing_03 1s ease-out; opacity: 1; }
.lineup ul li { margin-top: 7vw; opacity: 0; }
.lineup ul .is-active { animation: pop 0.5s ease 1 normal; opacity: 1; }

@media screen and (min-width: 751px) { .lineup { margin-top: 260px; padding: 120px 4vw 4.5vw; box-shadow: 2px 3px 18px 0px rgba(10, 31, 106, 0.45); }
  .lineup .heading h2 { width: 150px; top: -110px; padding: 100px 0; }
  .lineup .heading .wave { top: -110px; }
  .lineup .heading .shape_01 { width: 270px; }
  .lineup .heading .shape_02 { width: 280px; left: -20px; }
  .lineup ul { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%; }
  .lineup ul li { margin-top: 40px; width: 45%; }
  .lineup ul li a { display: block; }
  .lineup ul li a:hover img { animation: pop 0.5s ease 1 normal; } }
@keyframes swing_01 { 0% { transform: translateY(50px) rotate(0deg) scale(0.5); }
  10% { transform: rotate(-6deg); }
  20% { transform: translateY(-20px) rotate(7deg) scale(1.4); }
  35% { transform: rotate(-3deg); }
  50% { transform: translateY(0) rotate(3deg) scale(1); }
  65% { transform: rotate(-1deg); }
  80% { transform: rotate(1deg) scale(1); }
  95% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); } }
@keyframes swing_02 { 0% { transform: translateY(50px) rotate(0deg) scale(0.5); }
  10% { transform: rotate(-6deg); }
  20% { transform: translateY(-20px) rotate(7deg); }
  35% { transform: rotate(-3deg); }
  50% { transform: translateY(0) rotate(3deg) scale(1); }
  65% { transform: rotate(-1deg); }
  80% { transform: rotate(1deg) scale(1); }
  95% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); } }
@keyframes swing_03 { 0% { transform: translateY(50px) rotate(0deg) scale(0.5); }
  10% { transform: rotate(6deg); }
  20% { transform: translateY(-20px) rotate(-7deg); }
  35% { transform: rotate(3deg); }
  50% { transform: translateY(0) rotate(-3deg) scale(1); }
  65% { transform: rotate(1deg); }
  80% { transform: rotate(-1deg) scale(1); }
  95% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); } }
@keyframes pop { 10% { transform: scale(1.05, 0.9); }
  40% { transform: scale(1.1, 0.8); }
  50% { transform: scale(0.8, 1.15); }
  60% { transform: scale(1, 0.9); }
  70% { transform: scale(0.9, 1.08); }
  90% { transform: scale(0.93, 1.02); }
  100% { transform: scale(1, 1); } }
.copyright { font-family: 'Noto Sans JP', sans-serif; font-size: 2vw; text-align: center; line-height: 1.9; margin: 0 4vw; }

@media screen and (min-width: 751px) { .copyright { font-size: 16px; } }

.g-share__list {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

@media screen and (min-width: 751px) {
  .g-share__list {
    margin-bottom: 40px;
  }
}

.g-share__list-item {
  margin: 10px;
}

.g-share__list-item-link-img {
  width: 44px;
  height: 44px;
}

@media screen and (min-width: 751px) {
  .g-share__list-item-link-img {
    width: 66px;
    height: 66px;
  }
}