@charset "UTF-8";
/* Style CSS */
/* 変数 */
/* mixin */
/* 関数 */
html, body, span, object, iframe, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, hgroup, menu, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  background: transparent;
  word-break: break-all;
}

div, h1, h2, h3, h4, h5, h6, footer, header, dl, dt, dd, ol, ul, li, p {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  word-break: break-all;
}

body {
  line-height: 1;
}

main, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/* _______________________form setting  */
input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

input, textarea, select {
  *font-size: 100%;
}

input, textarea, select, option, optgroup {
  vertical-align: middle;
  letter-spacing: 0em;
}

select {
  min-width: 2em;
}

option, optgroup {
  padding-right: 0.4em;
}

/* _______________________mouse cursor */
label[for],
input[type="checkbox"],
input[type="radio"],
input[type="button"],
input[type="image"],
input[type="reset"],
input[type="submit"],
select, option, button {
  cursor: pointer;
}

optgroup {
  cursor: default;
}

*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  font-size: 62.5%;
}

/* ___________________Font */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
  color: #222;
  font-family: 'Noto Sans JP', sans-serif;
}

/* ___________________Link */
a {
  color: #222;
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
a:hover img {
  opacity: 0.8;
}

@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
  }
}

@keyframes scroll {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
  }
}
@-webkit-keyframes shake {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  20% {
    -webkit-transform: translateX(6px);
            transform: translateX(6px);
  }
  40% {
    -webkit-transform: translateX(-6px);
            transform: translateX(-6px);
  }
  60% {
    -webkit-transform: translateX(3px);
            transform: translateX(3px);
  }
  80% {
    -webkit-transform: translateX(-3px);
            transform: translateX(-3px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes shake {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  20% {
    -webkit-transform: translateX(6px);
            transform: translateX(6px);
  }
  40% {
    -webkit-transform: translateX(-6px);
            transform: translateX(-6px);
  }
  60% {
    -webkit-transform: translateX(3px);
            transform: translateX(3px);
  }
  80% {
    -webkit-transform: translateX(-3px);
            transform: translateX(-3px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes bound_kv {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  25% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  50% {
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
  }
  75% {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes bound_kv {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  25% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  50% {
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
  }
  75% {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes kv_anime {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  70% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  90% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes kv_anime {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  70% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  90% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes kv_anime2 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  70% {
    -webkit-transform: scale(1.01);
            transform: scale(1.01);
  }
  90% {
    -webkit-transform: scale(0.99);
            transform: scale(0.99);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes kv_anime2 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  70% {
    -webkit-transform: scale(1.01);
            transform: scale(1.01);
  }
  90% {
    -webkit-transform: scale(0.99);
            transform: scale(0.99);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes balloon_anime {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  60% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  75% {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
  }
  85% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  94% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes balloon_anime {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  60% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  75% {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
  }
  85% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  94% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes fadeIn {
  0% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes fadeIn {
  0% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes fadertol {
  0% {
    -webkit-transform: translateX(150px);
            transform: translateX(150px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes fadertol {
  0% {
    -webkit-transform: translateX(150px);
            transform: translateX(150px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes music1 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  66% {
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
  }
  83% {
    -webkit-transform: rotate(-20deg);
            transform: rotate(-20deg);
  }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}
@keyframes music1 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  66% {
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
  }
  83% {
    -webkit-transform: rotate(-20deg);
            transform: rotate(-20deg);
  }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}
@-webkit-keyframes music2 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  66% {
    -webkit-transform: rotate(-20deg);
            transform: rotate(-20deg);
  }
  83% {
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
  }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}
@keyframes music2 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  66% {
    -webkit-transform: rotate(-20deg);
            transform: rotate(-20deg);
  }
  83% {
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
  }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}
@-webkit-keyframes pika {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  51% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  63% {
    -webkit-transform: translateY(7px);
            transform: translateY(7px);
  }
  75% {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
  }
  88% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes pika {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  51% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  63% {
    -webkit-transform: translateY(7px);
            transform: translateY(7px);
  }
  75% {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
  }
  88% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes smp_anime {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  70% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  90% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes smp_anime {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  70% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  90% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
/* Desktops and laptops */
@media print, screen and (min-width: 751px) {
  @-webkit-keyframes bound {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    20% {
      -webkit-transform: translateY(-25px);
              transform: translateY(-25px);
    }
    40% {
      -webkit-transform: translateY(20px);
              transform: translateY(20px);
    }
    55% {
      -webkit-transform: translateY(-10px);
              transform: translateY(-10px);
    }
    75% {
      -webkit-transform: translateY(5px);
              transform: translateY(5px);
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  @keyframes bound {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    20% {
      -webkit-transform: translateY(-25px);
              transform: translateY(-25px);
    }
    40% {
      -webkit-transform: translateY(20px);
              transform: translateY(20px);
    }
    55% {
      -webkit-transform: translateY(-10px);
              transform: translateY(-10px);
    }
    75% {
      -webkit-transform: translateY(5px);
              transform: translateY(5px);
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  @-webkit-keyframes bound_kv {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    20% {
      -webkit-transform: translateY(-35px);
              transform: translateY(-35px);
    }
    40% {
      -webkit-transform: translateY(10px);
              transform: translateY(10px);
    }
    60% {
      -webkit-transform: translateY(-5px);
              transform: translateY(-5px);
    }
    80% {
      -webkit-transform: translateY(5px);
              transform: translateY(5px);
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  @keyframes bound_kv {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    20% {
      -webkit-transform: translateY(-35px);
              transform: translateY(-35px);
    }
    40% {
      -webkit-transform: translateY(10px);
              transform: translateY(10px);
    }
    60% {
      -webkit-transform: translateY(-5px);
              transform: translateY(-5px);
    }
    80% {
      -webkit-transform: translateY(5px);
              transform: translateY(5px);
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  @-webkit-keyframes bound_title {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    25% {
      -webkit-transform: translateY(-15px);
              transform: translateY(-15px);
    }
    50% {
      -webkit-transform: translateY(10px);
              transform: translateY(10px);
    }
    75% {
      -webkit-transform: translateY(-3px);
              transform: translateY(-3px);
    }
    94% {
      -webkit-transform: translateY(1px);
              transform: translateY(1px);
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  @keyframes bound_title {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    25% {
      -webkit-transform: translateY(-15px);
              transform: translateY(-15px);
    }
    50% {
      -webkit-transform: translateY(10px);
              transform: translateY(10px);
    }
    75% {
      -webkit-transform: translateY(-3px);
              transform: translateY(-3px);
    }
    94% {
      -webkit-transform: translateY(1px);
              transform: translateY(1px);
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  html {
    background-color: #fff;
  }

  body {
    background: linear-gradient(180deg, #3ad9ec 0%, #3ad9ec 833px, #fbedc5 833px, #fff 1000px, #fff 2000px, #3ad9ec 2000px, #3ad9ec 10000px, #fbedc5 10000px, #fbedc5 12000px, #fff 12000px, #fff 13000px, #3ad9ec 13000px, #3ad9ec 100%);
    min-width: 1300px;
    max-width: 2000px;
    margin: 0 auto;
  }

  #header {
    position: relative;
    width: 100%;
    height: 770px;
    background: url("../images/kv_bg2.jpg") center center/cover no-repeat;
    overflow: hidden;
  }
  #header::after {
    content: '';
    display: block;
    background: url("../images/kv_bg_cream.png") center bottom no-repeat;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 0;
    padding-top: 27%;
  }
  #header .inner {
    width: 1280px;
    padding-top: 60px;
    padding-bottom: 60px;
    margin: 0 auto;
  }
  #header .title {
    display: block;
    text-align: center;
  }
  #header .page_title {
    text-align: center;
    margin-bottom: 20px;
  }
  #header .dl {
    position: relative;
    width: 540px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    margin: 0 auto;
    z-index: 10;
  }
  #header .dl .qr {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #header .dl .qr .image {
    margin-right: 15px;
  }
  #header .dl .qr .txt {
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.5;
  }
  #header .dl .links {
    display: flex;
    flex-direction: column;
  }
  #header .dl .dl_bnr {
    width: 130px;
    position: relative;
    z-index: 10;
    margin-right: 10px;
  }
  #header .dl .dl_bnr a {
    width: 100%;
    display: block;
  }
  #header .dl .dl_bnr a img {
    width: 100%;
  }
  #header .dl .dl_bnr + .dl_bnr {
    margin-top: 5px;
  }
  #header .awards {
    position: absolute;
    bottom: -30px;
    right: 0;
    left: 0;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    z-index: 10;
  }
  #header .awards .award + .award {
    margin-left: 10px;
  }
  #header .image_acce {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  #header .image_acce .acce {
    opacity: 0;
    position: absolute;
    transition: all linear 100ms;
  }
  #header .image_acce .acce4 {
    top: 162px;
    right: 90px;
    transition-delay: 500ms;
  }
  #header .image_acce .acce5 {
    top: 55px;
    right: 10px;
    transition-delay: 800ms;
  }
  #header .image_acce2 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  #header .image_acce2 .kv_acce {
    position: absolute;
    opacity: 0;
    transition: all linear 100ms;
  }
  #header .image_acce2 .kv_acce1 {
    position: absolute;
    top: 80px;
    left: 198px;
  }
  #header .image_acce2 .kv_acce2 {
    position: absolute;
    top: 138px;
    left: 58px;
  }
  #header .image_acce2 .kv_acce3 {
    position: absolute;
    top: 274px;
    left: 192px;
  }
  #header .image_acce2 .kv_acce4 {
    position: absolute;
    top: 394px;
    left: 0;
  }
  #header .image_acce2 .kv_acce5 {
    position: absolute;
    top: 60px;
    right: 220px;
  }
  #header .image_acce2 .kv_acce6 {
    position: absolute;
    top: 71px;
    right: 17px;
  }
  #header .image_acce2 .kv_acce7 {
    position: absolute;
    top: 410px;
    right: 10px;
  }
  #header .image_acce2 .kv_acce8 {
    position: absolute;
    top: 291px;
    left: 108px;
  }
  #header .image_acce2 .kv_acce9 {
    position: absolute;
    top: 439px;
    left: 229px;
  }
  #header .image_acce2 .kv_acce10 {
    position: absolute;
    top: 342px;
    right: 276px;
  }
  #header .image_acce2 .kv_acce11 {
    position: absolute;
    top: 197px;
    right: 571px;
  }
  #header .image_acce2 .kv_acce11 .after_animate2 {
    -webkit-animation: music1 1500ms linear infinite;
            animation: music1 1500ms linear infinite;
  }
  #header .image_acce2 .kv_acce12 {
    position: absolute;
    top: 215px;
    right: 542px;
  }
  #header .image_acce2 .kv_acce12 .after_animate2 {
    -webkit-animation: music2 1500ms linear infinite;
            animation: music2 1500ms linear infinite;
  }
  #header .image_chara {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #header .image_chara .chara {
    opacity: 0;
    position: absolute;
    transition: all linear 100ms;
  }
  #header .image_chara .chara1 {
    bottom: -22px;
    left: 50px;
    transition-delay: 1400ms;
    -webkit-animation-delay: 400ms;
            animation-delay: 400ms;
  }
  #header .image_chara .chara2 {
    bottom: -96px;
    left: 280px;
    transition-delay: 1600ms;
  }
  #header .image_chara .chara3 {
    bottom: -74px;
    right: 270px;
    transition-delay: 1800ms;
  }
  #header .image_chara .chara4 {
    bottom: -55px;
    right: 124px;
    transition-delay: 2000ms;
  }
  #header .image_chara .chara5 {
    bottom: -70px;
    right: 20px;
    transition-delay: 2200ms;
  }
  #header.show .image_acce .acce {
    opacity: 1;
  }
  #header.show .image_acce .acce4 {
    -webkit-animation: kv_anime 500ms ease-out;
            animation: kv_anime 500ms ease-out;
    -webkit-animation-delay: 500ms;
            animation-delay: 500ms;
  }
  #header.show .image_acce .acce5 {
    -webkit-animation: kv_anime2 500ms ease-out;
            animation: kv_anime2 500ms ease-out;
    -webkit-animation-delay: 800ms;
            animation-delay: 800ms;
  }
  #header.show .image_acce2 .kv_acce_icon {
    opacity: 1;
    -webkit-animation: kv_anime 350ms ease-in-out;
            animation: kv_anime 350ms ease-in-out;
  }
  #header.show .image_acce2 .kv_acce_icon_m {
    opacity: 1;
    -webkit-animation: kv_anime 500ms ease-in-out;
            animation: kv_anime 500ms ease-in-out;
  }
  #header.show .image_chara .chara {
    opacity: 1;
    -webkit-animation: bound_kv 300ms ease-out;
            animation: bound_kv 300ms ease-out;
  }
  #header.show .image_chara .chara1 {
    -webkit-animation-delay: 1400ms;
            animation-delay: 1400ms;
  }
  #header.show .image_chara .chara2 {
    -webkit-animation-delay: 1600ms;
            animation-delay: 1600ms;
  }
  #header.show .image_chara .chara3 {
    -webkit-animation-delay: 1800ms;
            animation-delay: 1800ms;
  }
  #header.show .image_chara .chara4 {
    -webkit-animation-delay: 2000ms;
            animation-delay: 2000ms;
  }
  #header.show .image_chara .chara5 {
    -webkit-animation-delay: 2200ms;
            animation-delay: 2200ms;
  }

  .sp {
    display: none;
  }

  .common_inner {
    position: relative;
    width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 20px;
    padding-bottom: 90px;
  }

  .inner {
    position: relative;
  }

  .main {
    overflow: hidden;
  }

  .bg_mg {
    border-bottom-left-radius: 1100px 400px;
    border-bottom-right-radius: 1100px 400px;
    margin-left: -100px;
    margin-right: -100px;
    padding-left: 100px;
    padding-right: 100px;
  }

  .chara {
    position: absolute;
  }

  .chara_comment {
    opacity: 0;
  }
  .chara_comment.show {
    opacity: 1;
    -webkit-animation: bound 1000ms ease-in-out;
            animation: bound 1000ms ease-in-out;
  }

  .animate_ob {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    transition: all linear 200ms;
  }

  .animate_balloon {
    opacity: 0;
    transition: all linear 200ms;
  }

  .animate_fade {
    opacity: 0;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    transition: all ease-in-out 300ms;
  }

  .sec1 {
    margin-bottom: 100px;
  }
  .sec1 .backtop {
    opacity: 0;
    width: 250px;
    margin: 22px auto 0;
    transition: all linear 300ms;
  }
  .sec1 .backtop a {
    width: 100%;
    display: block;
  }
  .sec1 .backtop img {
    width: 100%;
  }
  .sec1 .backtop.show {
    opacity: 1;
    -webkit-animation: fadeIn 200ms ease-in-out;
            animation: fadeIn 200ms ease-in-out;
  }
  .sec1 .inner {
    width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 20px;
    padding-bottom: 22px;
  }
  .sec1 .sec_title {
    position: relative;
    width: 100%;
    height: 140px;
    margin-bottom: 50px;
    overflow: hidden;
    border-bottom-left-radius: 800px 70px;
    border-bottom-right-radius: 500px 70px;
  }
  .sec1 .sec_title img {
    display: inline-block;
  }
  .sec1 .sec_title .image {
    opacity: 0;
    position: absolute;
    transition: all linear 200ms;
    transition-delay: 300ms;
  }
  .sec1 .sec_title .image img {
    width: 100%;
  }
  .sec1 .sec_title .title_txt {
    opacity: 0;
    transition: all linear 200ms;
  }
  .sec1 .sec_title.show .animate_ob {
    opacity: 1;
    -webkit-animation: bound_title 1s ease-in;
            animation: bound_title 1s ease-in;
    -webkit-animation-delay: 300ms;
            animation-delay: 300ms;
  }
  .sec1 .sec_title.show .image {
    opacity: 1;
    -webkit-animation: bound_title 800ms ease-in;
            animation: bound_title 800ms ease-in;
    -webkit-animation-delay: 200ms;
            animation-delay: 200ms;
  }
  .sec1 .sec_title.show .title_txt {
    opacity: 1;
    -webkit-animation: fadeIn 200ms ease-in-out;
            animation: fadeIn 200ms ease-in-out;
  }
  .sec1 .worries1_suggest_wrap.show .worries1 .desc {
    opacity: 1;
    background: url("../images/sec_moya.png");
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1 .worries1_suggest_wrap.show .worries1 .desc .letter {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1 .worries1_suggest_wrap.show .worries1 .desc .balloon {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1 .worries1_suggest_wrap.show .suggest {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1 .worries2_suggest_wrap.show .worries2 .desc .letter {
    opacity: 1;
    transition-delay: 300ms;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1 .worries2_suggest_wrap.show .worries2 .desc .balloon {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1 .worries2_suggest_wrap.show .worries2 .desc .person {
    opacity: 1;
    transition-delay: 300ms;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1 .worries2_suggest_wrap.show .worries2 .desc .bg {
    opacity: 1;
    transition-delay: 300ms;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1 .worries2_suggest_wrap.show .suggest {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1 .worries {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto 45px;
  }
  .sec1 .worries .desc {
    position: relative;
    height: 357px;
    display: flex;
    align-items: center;
  }
  .sec1 .worries .desc .letter {
    display: block;
    font-size: 3.8rem;
    font-weight: bold;
    line-height: 1.31579;
    margin: 0 auto;
  }
  .sec1 .worries .desc .balloon {
    display: block;
    position: absolute;
  }
  .sec1 .worries .desc .balloon img {
    width: 100%;
  }
  .sec1 .worries .desc.show .animate_ob {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1 .worries1 {
    width: 980px;
  }
  .sec1 .worries1 .desc {
    width: 540px;
    text-align: center;
    padding-top: 10px;
    transition: all linear 200ms;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    transition-delay: 200ms;
    opacity: 0;
  }
  .sec1 .worries1 .desc .balloon {
    width: 140px;
    top: 70px;
    left: 50px;
    opacity: 0;
    transition: all linear 200ms;
    transition-delay: 300ms;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  .sec1 .worries1 .desc .letter {
    opacity: 0;
    transition: all linear 200ms;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  .sec1 .worries1 .image {
    margin-left: 10px;
  }
  .sec1 .worries2 {
    width: 1020px;
  }
  .sec1 .worries2 .desc {
    width: 627px;
    background-position: right center;
    background-repeat: no-repeat;
    padding-top: 60px;
  }
  .sec1 .worries2 .desc .letter {
    opacity: 0;
    padding-left: 135px;
    transition: all linear 200ms;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  .sec1 .worries2 .desc .bg {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    background: url("../images/sec_moya.png") right center no-repeat;
    transition: all linear 200ms;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  .sec1 .worries2 .desc .balloon {
    opacity: 0;
    width: 163px;
    top: 75px;
    left: 175px;
    transition: all linear 200ms;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  .sec1 .worries2 .desc .person {
    opacity: 0;
    display: block;
    position: absolute;
    width: 160px;
    height: 160px;
    left: -20px;
    top: 120px;
    transition: all linear 200ms;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  .sec1 .worries2 .image {
    margin-right: 10px;
  }
  .sec1 .suggest {
    position: relative;
    padding-left: 108px;
    margin: 0 auto 80px;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    transition: all ease-in-out 300ms;
    transition-delay: 500ms;
    opacity: 0;
  }
  .sec1 .suggest .desc {
    position: relative;
    font-size: 2.8rem;
    font-weight: bold;
    line-height: 1.42857;
    padding-bottom: 18px;
  }
  .sec1 .suggest .sp_palt {
    font-weight: bold;
  }
  .sec1 .suggest .sp_fz {
    font-weight: bold;
  }
  .sec1 .suggest strong {
    font-size: 3.2rem;
    font-weight: bold;
    color: #f9bf1c;
  }
  .sec1 .suggest::before {
    position: absolute;
    top: -15px;
    left: 0;
    content: '';
    display: block;
    width: 74px;
    height: 97px;
    background: url("../images/sec_resolve_icon.svg") center center/100% no-repeat;
  }
  .sec1 .suggest::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    display: block;
    width: 100%;
    height: 4px;
    background-color: #f9bf1c;
  }
  .sec1 .promote {
    width: 1130px;
    margin: 0 auto;
    background-color: #fbedc5;
    border-radius: 20px;
  }
  .sec1.diet .sec_title {
    padding-top: 57px;
    background: url("../images/diet_title_bg.png") center bottom/100% no-repeat;
    text-align: center;
    padding-left: 130px;
  }
  .sec1.diet .sec_title .image {
    width: 194px;
    top: 4px;
    left: calc(50% - 290px);
  }
  .sec1.diet .chara {
    bottom: 36px;
    right: 110px;
  }
  .sec1.diet .diet_promote1 {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding-top: 90px;
    padding-right: 80px;
    padding-left: 50px;
    padding-bottom: 100px;
    margin-bottom: 110px;
  }
  .sec1.diet .diet_promote1.show .animate_fade {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1.diet .diet_promote1.show .info .title {
    opacity: 1;
    -webkit-animation: fadertol 300ms ease;
            animation: fadertol 300ms ease;
  }
  .sec1.diet .diet_promote1.show .image {
    opacity: 1;
  }
  .sec1.diet .diet_promote1.show .image .animate_balloon {
    opacity: 1;
  }
  .sec1.diet .diet_promote1.show .image .point1 {
    -webkit-animation: balloon_anime 500ms ease-in-out;
            animation: balloon_anime 500ms ease-in-out;
    -webkit-animation-delay: 900ms;
            animation-delay: 900ms;
  }
  .sec1.diet .diet_promote1.show .image .point2 {
    -webkit-animation: balloon_anime 500ms ease-in-out;
            animation: balloon_anime 500ms ease-in-out;
    -webkit-animation-delay: 900ms;
            animation-delay: 900ms;
  }
  .sec1.diet .diet_promote1 .info {
    width: 448px;
  }
  .sec1.diet .diet_promote1 .info .title {
    opacity: 0;
    margin-bottom: 30px;
    transition: opacity ease-in 300ms;
  }
  .sec1.diet .diet_promote1 .info .desc {
    font-size: 2.4rem;
    line-height: 1.8;
    padding-left: 55px;
    transition-delay: 300ms;
  }
  .sec1.diet .diet_promote1 .image {
    opacity: 0;
    position: absolute;
    top: 70px;
    right: 80px;
    transition: all ease-in 300ms;
    transition-delay: 700ms;
  }
  .sec1.diet .diet_promote1 .image .point {
    position: absolute;
  }
  .sec1.diet .diet_promote1 .image .point1 {
    top: 155px;
    right: 455px;
    transition-delay: 900ms;
  }
  .sec1.diet .diet_promote1 .image .point2 {
    opacity: 0;
    top: -35px;
    right: -70px;
    transition-delay: 900ms;
  }
  .sec1.diet .diet_promote2 {
    padding-top: 60px;
    padding-right: 40px;
    padding-left: 40px;
    padding-bottom: 60px;
  }
  .sec1.diet .diet_promote2.show .animate_fade {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1.diet .diet_promote2.show .promote_title .title_txt {
    opacity: 1;
    -webkit-animation: fadertol 300ms ease;
            animation: fadertol 300ms ease;
  }
  .sec1.diet .diet_promote2.show .promote_title .animate_balloon {
    opacity: 1;
    -webkit-animation: balloon_anime 500ms ease-in-out;
            animation: balloon_anime 500ms ease-in-out;
    -webkit-animation-delay: 200ms;
            animation-delay: 200ms;
  }
  .sec1.diet .diet_promote2.show .block {
    opacity: 1;
  }
  .sec1.diet .diet_promote2 .promote_title {
    position: relative;
    text-align: center;
    padding-left: 110px;
    margin-bottom: 40px;
  }
  .sec1.diet .diet_promote2 .promote_title .balloon {
    opacity: 0;
    position: absolute;
    top: -40px;
    left: 105px;
    transition: all ease-in-out 500ms;
    transition-delay: 200ms;
  }
  .sec1.diet .diet_promote2 .promote_title .title_txt {
    display: inline-block;
    opacity: 0;
    transition: opacity ease-in 300ms;
  }
  .sec1.diet .diet_promote2 .blocks {
    display: flex;
    justify-content: space-between;
  }
  .sec1.diet .diet_promote2 .blocks .info {
    padding-top: 35px;
  }
  .sec1.diet .diet_promote2 .blocks .name {
    height: 70px;
    font-size: 3rem;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 30px;
  }
  .sec1.diet .diet_promote2 .blocks .desc {
    font-size: 1.8rem;
    line-height: 1.8;
  }
  .sec1.diet .diet_promote2 .block {
    opacity: 0;
    display: flex;
    justify-content: flex-start;
    transition: opacity ease-in 300ms;
  }
  .sec1.diet .diet_promote2 .block .image {
    margin-right: 25px;
  }
  .sec1.diet .diet_promote2 .block1 {
    width: 490px;
    transition-delay: 600ms;
  }
  .sec1.diet .diet_promote2 .block2 {
    width: 545px;
    transition-delay: 900ms;
  }
  .sec1.diet .suggest1 {
    width: 770px;
  }
  .sec1.diet .suggest2 {
    width: 780px;
  }
  .sec1.diet .worries2 {
    -webkit-transform: tranlateX(-10px);
            transform: tranlateX(-10px);
  }
  .sec1.diet .worries2 .desc .balloon {
    width: 163px;
  }
  .sec1.exercise .sec_title {
    padding-top: 57px;
    background: url("../images/exercise_title_bg.png") center bottom/100% no-repeat;
    text-align: center;
    padding-left: 130px;
  }
  .sec1.exercise .sec_title .image {
    width: 120px;
    top: -2px;
    left: calc(50% - 232px);
  }
  .sec1.exercise .sec_title.show .animate_ob {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1.exercise .chara {
    bottom: 26px;
    right: 90px;
  }
  .sec1.exercise .exercise_promote1 {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 90px;
    padding-right: 80px;
    padding-left: 50px;
    padding-bottom: 100px;
    margin-bottom: 110px;
  }
  .sec1.exercise .exercise_promote1.show .animate_fade {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1.exercise .exercise_promote1.show > .image {
    opacity: 1;
  }
  .sec1.exercise .exercise_promote1.show > .image .animate_balloon {
    opacity: 1;
  }
  .sec1.exercise .exercise_promote1.show > .image .point1 {
    -webkit-animation: balloon_anime 500ms ease-in-out;
            animation: balloon_anime 500ms ease-in-out;
    -webkit-animation-delay: 900ms;
            animation-delay: 900ms;
  }
  .sec1.exercise .exercise_promote1.show > .image .point2 {
    -webkit-animation: balloon_anime 500ms ease-in-out;
            animation: balloon_anime 500ms ease-in-out;
    -webkit-animation-delay: 900ms;
            animation-delay: 900ms;
  }
  .sec1.exercise .exercise_promote1.show .info .title {
    opacity: 1;
    -webkit-animation: fadertol 300ms ease;
            animation: fadertol 300ms ease;
  }
  .sec1.exercise .exercise_promote1.show .block_wide .image {
    opacity: 1;
  }
  .sec1.exercise .exercise_promote1.show .block_wide .image .animate_balloon {
    opacity: 1;
    -webkit-animation: balloon_anime 500ms ease-in-out;
            animation: balloon_anime 500ms ease-in-out;
    -webkit-animation-delay: 1500ms;
            animation-delay: 1500ms;
  }
  .sec1.exercise .exercise_promote1 .info {
    width: 448px;
  }
  .sec1.exercise .exercise_promote1 .info .title {
    opacity: 0;
    margin-bottom: 30px;
    transition: opacity ease-in 300ms;
  }
  .sec1.exercise .exercise_promote1 .info .desc {
    font-size: 2.4rem;
    line-height: 1.8;
    padding-left: 55px;
    transition-delay: 300ms;
  }
  .sec1.exercise .exercise_promote1 > .image {
    opacity: 0;
    transition: all ease-in 300ms;
    transition-delay: 700ms;
    position: relative;
  }
  .sec1.exercise .exercise_promote1 > .image .point {
    position: absolute;
    opacity: 0;
  }
  .sec1.exercise .exercise_promote1 > .image .point1 {
    top: 155px;
    right: 455px;
    transition-delay: 900ms;
  }
  .sec1.exercise .exercise_promote1 > .image .point2 {
    top: -35px;
    right: -70px;
    transition-delay: 900ms;
  }
  .sec1.exercise .exercise_promote1 .block_wide {
    position: relative;
    width: 100%;
    padding-top: 110px;
  }
  .sec1.exercise .exercise_promote1 .block_wide .image {
    opacity: 0;
    transition: all ease-in 300ms;
    position: absolute;
    top: -25px;
    left: 130px;
    transition-delay: 1300ms;
  }
  .sec1.exercise .exercise_promote1 .block_wide .image .point {
    opacity: 0;
    position: absolute;
    top: 30px;
    left: -80px;
    transition-delay: 1500ms;
  }
  .sec1.exercise .exercise_promote1 .block_wide .desc {
    font-size: 2.4rem;
    line-height: 1.8;
    padding-left: 410px;
    transition-delay: 1800ms;
  }
  .sec1.exercise .exercise_promote2 {
    display: flex;
    justify-content: space-between;
    padding-top: 70px;
    padding-right: 15px;
    padding-left: 40px;
    padding-bottom: 60px;
  }
  .sec1.exercise .exercise_promote2.show .info .title {
    opacity: 1;
    -webkit-animation: fadertol 300ms ease;
            animation: fadertol 300ms ease;
  }
  .sec1.exercise .exercise_promote2.show .info .animate_balloon {
    opacity: 1;
    -webkit-animation: balloon_anime 500ms ease-in-out;
            animation: balloon_anime 500ms ease-in-out;
    -webkit-animation-delay: 300ms;
            animation-delay: 300ms;
  }
  .sec1.exercise .exercise_promote2.show .block {
    opacity: 1;
  }
  .sec1.exercise .exercise_promote2 .info {
    position: relative;
    width: 430px;
    margin-top: 40px;
    padding-left: 130px;
  }
  .sec1.exercise .exercise_promote2 .info .title {
    opacity: 0;
    transition: opacity ease-in 300ms;
    padding-top: 10px;
  }
  .sec1.exercise .exercise_promote2 .info .title_txt {
    display: inline-block;
  }
  .sec1.exercise .exercise_promote2 .info .balloon {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition-delay: 300ms;
  }
  .sec1.exercise .exercise_promote2 .block {
    opacity: 0;
    width: 630px;
    display: flex;
    justify-content: flex-start;
    transition: opacity ease-in 300ms;
    transition-delay: 700ms;
  }
  .sec1.exercise .exercise_promote2 .block .detail {
    padding-top: 40px;
  }
  .sec1.exercise .exercise_promote2 .block .image {
    margin-right: 25px;
  }
  .sec1.exercise .exercise_promote2 .block .name {
    font-size: 3rem;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 30px;
  }
  .sec1.exercise .exercise_promote2 .block .desc {
    font-size: 1.8rem;
    line-height: 1.8;
    letter-spacing: -0.01em;
  }
  .sec1.exercise .suggest1 {
    width: 720px;
  }
  .sec1.exercise .suggest2 {
    width: 776px;
  }
  .sec1.exercise .worries1 .desc {
    padding-top: 55px;
  }
  .sec1.exercise .worries2 {
    -webkit-transform: tranlateX(-10px);
            transform: tranlateX(-10px);
  }
  .sec1.exercise .worries2 .desc .balloon {
    width: 222px;
  }
  .sec1.exercise .worries2 .desc.show .animate_balloon {
    opacity: 1;
    -webkit-animation: balloon_anime 500ms ease-in-out;
            animation: balloon_anime 500ms ease-in-out;
  }
  .sec1.habit .sec_title {
    padding-top: 57px;
    background: url("../images/habit_title_bg.png") center bottom/100% no-repeat;
    text-align: center;
    padding-left: 185px;
  }
  .sec1.habit .sec_title .image {
    width: 198px;
    top: 3px;
    left: calc(50% - 265px);
  }
  .sec1.habit .chara {
    bottom: 36px;
    left: 110px;
  }
  .sec1.habit .habit_promote1 {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding-top: 80px;
    padding-right: 80px;
    padding-left: 50px;
    padding-bottom: 100px;
    margin-bottom: 80px;
  }
  .sec1.habit .habit_promote1.show .animate_fade {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1.habit .habit_promote1.show .info .title {
    opacity: 1;
    -webkit-animation: fadertol 300ms ease;
            animation: fadertol 300ms ease;
  }
  .sec1.habit .habit_promote1.show .image {
    opacity: 1;
  }
  .sec1.habit .habit_promote1.show .image .animate_balloon {
    opacity: 1;
  }
  .sec1.habit .habit_promote1.show .image .point1 {
    -webkit-animation: balloon_anime 500ms ease-in-out;
            animation: balloon_anime 500ms ease-in-out;
    -webkit-animation-delay: 900ms;
            animation-delay: 900ms;
  }
  .sec1.habit .habit_promote1.show .image .point2 {
    -webkit-animation: balloon_anime 500ms ease-in-out;
            animation: balloon_anime 500ms ease-in-out;
    -webkit-animation-delay: 900ms;
            animation-delay: 900ms;
  }
  .sec1.habit .habit_promote1 .info {
    width: 480px;
  }
  .sec1.habit .habit_promote1 .info .title {
    opacity: 0;
    transition: opacity ease-in 300ms;
    margin-bottom: 30px;
  }
  .sec1.habit .habit_promote1 .info .desc {
    font-size: 2.4rem;
    line-height: 1.8;
    padding-left: 45px;
    transition-delay: 300ms;
  }
  .sec1.habit .habit_promote1 .image {
    position: absolute;
    top: 70px;
    right: 80px;
    opacity: 0;
    transition: all ease-in 300ms;
    transition-delay: 700ms;
  }
  .sec1.habit .habit_promote1 .image .point {
    opacity: 0;
    position: absolute;
  }
  .sec1.habit .habit_promote1 .image .point1 {
    top: 155px;
    right: 445px;
    transition-delay: 900ms;
  }
  .sec1.habit .habit_promote1 .image .point2 {
    top: -35px;
    right: -70px;
    transition-delay: 900ms;
  }
  .sec1.habit .suggest1 {
    width: 808px;
  }
  .sec1.habit .worries1 .desc {
    padding-top: 55px;
  }

  .sec2 {
    text-align: center;
    background-color: #fff;
    padding-top: 110px;
    padding-bottom: 60px;
  }
  .sec2 .desc {
    font-size: 2rem;
    line-height: 1.5;
    margin-bottom: 30px;
  }
  .sec2 .desc:last-child {
    margin-bottom: 0;
  }
  .sec2 .desc:last-of-type {
    margin-bottom: 0;
  }
  .sec2 .desc_blue {
    color: #20d2e7;
  }
  .sec2 .strong {
    font-weight: bold;
  }
  .sec2 .strong span {
    font-weight: bold;
  }

  .sec3 {
    background-color: #fbedc5;
    border-bottom-left-radius: 1000px 400px;
    border-bottom-right-radius: 1000px 400px;
    margin-left: -100px;
    margin-right: -100px;
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 110px;
    padding-bottom: 160px;
  }

  #special {
    padding-top: 60px;
    padding-bottom: 110px;
  }
  #special.show .animate_fade {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  #special .title {
    text-align: center;
    margin-bottom: 75px;
  }
  #special .slide {
    width: 1200px;
    margin: 0 auto;
    transition-delay: 300ms;
  }
  #special .slide .list {
    display: flex;
    justify-content: space-between;
    padding-bottom: 100px;
  }
  #special .slide li {
    width: 380px;
    margin-right: 30px;
  }
  #special .slide li:last-child {
    margin-right: 0;
  }
  #special .slide li img {
    width: 100%;
  }
  #special .slick-slider {
    padding-bottom: 100px;
  }
  #special .slick-dotted.slick-slider {
    margin-bottom: 0;
  }
  #special .slick-dots {
    bottom: 0;
  }
  #special .slick-dots li {
    width: 15px;
    height: 15px;
    margin-right: 9px;
    margin-left: 9px;
  }
  #special .slick-dots li:last-child {
    margin-bottom: 0;
  }
  #special .slick-dots li button {
    width: 15px;
    height: 15px;
    background-color: #fff;
    border: 2px solid #20d2e7;
    border-radius: 50%;
  }
  #special .slick-dots .slick-active button {
    background-color: #20d2e7;
  }
  #special .slick-prev, #special .slick-next {
    width: 60px;
    height: 60px;
    background: url("../images/slide_nav.svg") center center/100% no-repeat;
    top: auto;
    bottom: -20px;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    z-index: 1;
  }
  #special .slick-next {
    right: calc(50% - 60px);
  }
  #special .slick-prev {
    left: calc(50% - 60px);
    -webkit-transform: translate(0, 0) rotate(180deg);
            transform: translate(0, 0) rotate(180deg);
  }
  #special .slick-next:before {
    content: '';
  }
  #special .slick-prev:before {
    content: '';
  }

  #intro .animate_sec2 {
    opacity: 0;
    transition: all cubic-bezier(0.65, 0, 0.35, 1) 800ms;
  }
  #intro .animate_sec2.show {
    opacity: 1 !important;
    -webkit-transform: translateY(0) !important;
            transform: translateY(0) !important;
  }
  #intro .animate_sec2.show.desc1 {
    -webkit-transform: translateY(0) !important;
            transform: translateY(0) !important;
  }
  #intro .animate_sec2.show.desc2 {
    -webkit-transform: translateY(0) !important;
            transform: translateY(0) !important;
  }
  #intro .animate_sec2.show .desc4 {
    opacity: 1 !important;
    -webkit-transform: translateY(0) !important;
            transform: translateY(0) !important;
  }
  #intro .animate_sec2.show .desc3 {
    opacity: 1;
    -webkit-transform: translateX(0) !important;
            transform: translateX(0) !important;
  }
  #intro .animate_sec2.show .desc5 {
    opacity: 1 !important;
  }
  #intro .animate_sec2.show .scroll {
    opacity: 1 !important;
  }
  #intro .inner {
    width: 1200px;
    margin: 0 auto;
  }
  #intro .desc {
    overflow: hidden;
  }
  #intro .desc1 {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  #intro .desc2 {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    margin-bottom: 30px;
  }
  #intro .desc3 {
    opacity: 0;
    width: 460px;
    text-align: center;
    margin: 0 auto;
    transition: all 0.4s cubic-bezier(0.37, 0, 0.63, 1);
    transition-delay: 500ms;
  }
  #intro .desc3_1 {
    display: inline-block;
    -webkit-transform: translateX(-10%);
            transform: translateX(-10%);
    margin-bottom: 0;
  }
  #intro .desc3_2 {
    -webkit-transform: translateX(10%);
            transform: translateX(10%);
    margin-bottom: 30px;
  }
  #intro .desc4 {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    transition: all cubic-bezier(0.65, 0, 0.35, 1) 800ms;
    transition-delay: 400ms;
  }
  #intro .desc5 {
    opacity: 0;
    transition: all cubic-bezier(0.65, 0, 0.35, 1) 1200ms;
    transition-delay: 900ms;
  }
  #intro .strong1 {
    font-size: 2.6rem;
    line-height: 1.8;
  }
  #intro .strong2 {
    font-size: 3.8rem;
    letter-spacing: -.05em;
  }
  #intro .image {
    position: absolute;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    transition-delay: 1200ms;
  }
  #intro .image1 {
    top: 250px;
    left: 0;
  }
  #intro .image2 {
    top: 125px;
    right: 110px;
  }
  #intro .scroll {
    opacity: 0;
    position: relative;
    margin-top: 70px;
    transition: all cubic-bezier(0.65, 0, 0.35, 1) 800ms;
    transition-delay: 1600ms;
  }
  #intro .scroll .letter {
    display: block;
    font-size: 1.6rem;
    text-align: center;
    font-weight: bold;
    color: #20d2e7;
    margin-bottom: 20px;
  }
  #intro .scroll .arrow {
    display: block;
    width: 22px;
    height: 14px;
    background: url("../images/arrow_blue.svg") center center/100% no-repeat;
    margin: 0 auto 15px;
    -webkit-animation: scroll 1s ease-in-out infinite;
            animation: scroll 1s ease-in-out infinite;
  }
  #intro .scroll .arrow:last-child {
    margin-bottom: 0;
  }

  .cont {
    padding-top: 90px;
    background-color: #3ad9ec;
    padding-bottom: 220px;
  }

  .nav_area {
    padding-bottom: 150px;
  }
  .nav_area .nav_area_title {
    width: 656px;
    margin: 0 auto 85px;
  }

  .nav {
    width: 1000px;
    margin: 0 auto;
  }
  .nav .list {
    display: flex;
    justify-content: space-between;
  }
  .nav .item {
    height: 60px;
  }
  .nav .item span {
    display: inline-block;
  }
  .nav .item .bg {
    position: absolute;
    width: 220px;
    height: 60px;
    background-color: #fff;
    border-radius: 30px;
    top: 0;
    right: 0;
  }
  .nav .item .chara {
    position: absolute;
    left: 0;
  }
  .nav .item .letter {
    display: block;
    position: relative;
    width: 220px;
    font-size: 2.2rem;
    font-weight: bold;
    letter-spacing: .1em;
    padding-top: 17px;
    margin-left: auto;
  }
  .nav .item a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
  }
  .nav .item a::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    right: 20px;
    display: block;
    width: 14px;
    height: 9px;
    background: url("../images/arrow_blue.svg") center center/100% no-repeat;
  }
  .nav .item.on .chara {
    -webkit-animation: shake 1s ease-in-out infinite;
            animation: shake 1s ease-in-out infinite;
  }
  .nav .item1 {
    width: 300px;
  }
  .nav .item1 .chara {
    top: -20px;
    width: 111px;
    height: 109px;
    background: url("../images/nav_chara1.png") center center/100% no-repeat;
  }
  .nav .item2 {
    width: 250px;
    -webkit-transform: translateY(45px);
            transform: translateY(45px);
  }
  .nav .item2 .chara {
    top: -45px;
    width: 63px;
    height: 138px;
    background: url("../images/nav_chara2.png") center center/100% no-repeat;
  }
  .nav .item3 {
    width: 300px;
  }
  .nav .item3 .chara {
    top: -40px;
    width: 118px;
    height: 137px;
    background: url("../images/nav_chara3.png") center center/100% no-repeat;
  }

  #others.show .animate_fade {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  #others .inner {
    padding: 80px 80px 100px;
  }
  #others .title {
    width: 390px;
    position: relative;
    font-size: 3.2rem;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    padding-bottom: 20px;
    margin: 0 auto 90px;
  }
  #others .title::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    display: block;
    width: 100%;
    height: 4px;
    background-color: #f9bf1c;
  }
  #others .blocks {
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
  }
  #others .block {
    width: 470px;
    display: flex;
    justify-content: flex-start;
    background: url("../images/others_bg.png") right 10px no-repeat;
  }
  #others .block .image {
    margin-right: 28px;
  }
  #others .block .info {
    padding-top: 75px;
  }
  #others .block .name {
    font-size: 2.4rem;
    font-weight: bold;
    margin-bottom: 15px;
  }
  #others .block .desc {
    font-size: 1.8rem;
    line-height: 1.8;
  }
  #others .block1 {
    transition-delay: 250ms;
  }
  #others .block2 {
    transition-delay: 500ms;
  }
  #others .block_wide {
    display: flex;
    justify-content: flex-start;
    width: 1060px;
    margin: 0 auto;
    background: #ecfafc;
    padding: 40px 130px;
    border-radius: 20px;
  }
  #others .block_wide.show .image1 {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  #others .block_wide.show .info {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  #others .block_wide.show .animate_balloon {
    opacity: 1;
    -webkit-animation: balloon_anime 500ms ease-in-out;
            animation: balloon_anime 500ms ease-in-out;
    -webkit-animation-delay: 600ms;
            animation-delay: 600ms;
  }
  #others .block_wide .image1 {
    margin-right: 50px;
    opacity: 0;
    transition: all ease-in-out 400ms;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  #others .block_wide .point {
    opacity: 0;
    transition-delay: 600ms;
  }
  #others .block_wide .info {
    padding-top: 40px;
    opacity: 0;
    transition: all ease-in-out 400ms;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    transition-delay: 250ms;
  }
  #others .block_wide .name {
    position: relative;
    font-size: 2.4rem;
    font-weight: bold;
    padding-left: 60px;
    margin-bottom: 30px;
  }
  #others .block_wide .name::before {
    position: absolute;
    top: -12px;
    left: 0;
    content: '';
    display: block;
    width: 48px;
    height: 48px;
    background: url("../images/others_column_title.svg") center center/100% no-repeat;
  }
  #others .block_wide .desc {
    font-size: 1.8rem;
    line-height: 1.8;
    margin-bottom: 30px;
  }
  #others .block_wide .image2 {
    position: relative;
  }
  #others .block_wide .point {
    position: absolute;
    top: -110px;
    right: -100px;
  }
  #others .chara {
    bottom: -70px;
    right: 40px;
  }

  #conclusion {
    padding-bottom: 160px;
  }
  #conclusion.show .animate_fade {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  #conclusion.show .acce1::after {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation: pika 1000ms ease-out infinite;
            animation: pika 1000ms ease-out infinite;
    -webkit-animation-delay: 1800ms;
            animation-delay: 1800ms;
  }
  #conclusion.show .acce2::after {
    opacity: 1;
  }
  #conclusion.show .image {
    opacity: 1;
  }
  #conclusion .animate_sec2 {
    opacity: 0;
    transition: all cubic-bezier(0.65, 0, 0.35, 1) 500ms;
  }
  #conclusion .animate_sec2.show {
    opacity: 1 !important;
    -webkit-transform: translateY(0) !important;
            transform: translateY(0) !important;
  }
  #conclusion .animate_sec2.show.acce1::after {
    opacity: 1;
    -webkit-animation: pika 1000ms ease-out infinite;
            animation: pika 1000ms ease-out infinite;
  }
  #conclusion .animate_sec2.show .desc {
    opacity: 1 !important;
    -webkit-transform: translateY(0) !important;
            transform: translateY(0) !important;
  }
  #conclusion .animate_sec2.show span {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  #conclusion .desc {
    overflow: hidden;
  }
  #conclusion .desc span {
    display: inline-block;
    -webkit-transform: translate(0, 105%);
            transform: translate(0, 105%);
    transition: -webkit-transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
    transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
    transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s, -webkit-transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
    letter-spacing: -.1em;
  }
  #conclusion .desc1 span:nth-child(1) {
    transition-delay: 0.04s;
  }
  #conclusion .desc1 span:nth-child(2) {
    transition-delay: 0.08s;
  }
  #conclusion .desc1 span:nth-child(3) {
    transition-delay: 0.12s;
  }
  #conclusion .desc1 span:nth-child(4) {
    transition-delay: 0.16s;
  }
  #conclusion .desc1 span:nth-child(5) {
    transition-delay: 0.2s;
  }
  #conclusion .desc1 span:nth-child(6) {
    transition-delay: 0.24s;
  }
  #conclusion .desc1 span:nth-child(7) {
    transition-delay: 0.28s;
  }
  #conclusion .desc1 span:nth-child(8) {
    transition-delay: 0.32s;
  }
  #conclusion .desc1 span:nth-child(9) {
    transition-delay: 0.36s;
  }
  #conclusion .desc1 span:nth-child(10) {
    transition-delay: 0.4s;
  }
  #conclusion .desc1 span:nth-child(11) {
    transition-delay: 0.44s;
  }
  #conclusion .desc1 span:nth-child(12) {
    transition-delay: 0.48s;
  }
  #conclusion .desc1 span:nth-child(13) {
    transition-delay: 0.52s;
  }
  #conclusion .desc1 span:nth-child(14) {
    transition-delay: 0.56s;
  }
  #conclusion .desc1 span:nth-child(15) {
    transition-delay: 0.6s;
  }
  #conclusion .desc1 span:nth-child(16) {
    transition-delay: 0.64s;
  }
  #conclusion .desc1 span:nth-child(17) {
    transition-delay: 0.68s;
  }
  #conclusion .desc1 span:nth-child(18) {
    transition-delay: 0.72s;
  }
  #conclusion .desc1 span:nth-child(19) {
    transition-delay: 0.76s;
  }
  #conclusion .desc1 span:nth-child(20) {
    transition-delay: 0.8s;
  }
  #conclusion .desc2 {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    transition-delay: 800ms;
    margin-bottom: 0;
  }
  #conclusion .desc3 {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    transition-delay: 1050ms;
  }
  #conclusion .desc4 {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    margin-bottom: 30px;
    transition-delay: 1300ms;
  }
  #conclusion .desc5 {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    transition: all cubic-bezier(0.65, 0, 0.35, 1) 500ms;
  }
  #conclusion .desc5 span:nth-child(1) {
    transition-delay: 1.84s;
  }
  #conclusion .desc5 span:nth-child(2) {
    transition-delay: 1.88s;
  }
  #conclusion .desc5 span:nth-child(3) {
    transition-delay: 1.92s;
  }
  #conclusion .desc5 span:nth-child(4) {
    transition-delay: 1.96s;
  }
  #conclusion .desc5 span:nth-child(5) {
    transition-delay: 2s;
  }
  #conclusion .desc5 span:nth-child(6) {
    transition-delay: 2.04s;
  }
  #conclusion .desc5 span:nth-child(7) {
    transition-delay: 2.08s;
  }
  #conclusion .desc5 span:nth-child(8) {
    transition-delay: 2.12s;
  }
  #conclusion .desc5 span:nth-child(9) {
    transition-delay: 2.16s;
  }
  #conclusion .desc5 span:nth-child(10) {
    transition-delay: 2.2s;
  }
  #conclusion .desc5 span:nth-child(11) {
    transition-delay: 2.24s;
  }
  #conclusion .desc5 span:nth-child(12) {
    transition-delay: 2.28s;
  }
  #conclusion .desc5 span:nth-child(13) {
    transition-delay: 2.32s;
  }
  #conclusion .desc5 span:nth-child(14) {
    transition-delay: 2.36s;
  }
  #conclusion .desc5 span:nth-child(15) {
    transition-delay: 2.4s;
  }
  #conclusion .desc5 span:nth-child(16) {
    transition-delay: 2.44s;
  }
  #conclusion .desc5 span:nth-child(17) {
    transition-delay: 2.48s;
  }
  #conclusion .desc5 span:nth-child(18) {
    transition-delay: 2.52s;
  }
  #conclusion .desc5 span:nth-child(19) {
    transition-delay: 2.56s;
  }
  #conclusion .desc5 span:nth-child(20) {
    transition-delay: 2.6s;
  }
  #conclusion .desc6 {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    transition: all cubic-bezier(0.65, 0, 0.35, 1) 500ms;
    transition-delay: 2900ms;
  }
  #conclusion .image {
    opacity: 0;
    transition: all ease-in 300ms;
    transition-delay: 3100ms;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  #conclusion .inner {
    width: 1200px;
    margin: 0 auto;
  }
  #conclusion .strong1 {
    font-size: 3.2rem;
  }
  #conclusion .strong2 {
    font-size: 2.6rem;
  }
  #conclusion .strong3 {
    font-size: 3.8rem;
  }
  #conclusion .acce1 {
    position: relative;
    display: inline-block;
    padding-top: 30px;
    padding-right: 30px;
    padding-left: 30px;
  }
  #conclusion .acce1::after {
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    right: 20px;
    width: 35px;
    height: 25px;
    background: url("../images/conclusion_acce1.svg") center center/100% no-repeat;
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  #conclusion .acce2 {
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
    margin-bottom: 40px;
  }
  #conclusion .acce2::after {
    opacity: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    display: block;
    width: 100%;
    height: 4px;
    background-color: #f9bf1c;
    transition: all linear 500ms;
    transition-delay: 2600ms;
  }
  #conclusion .image {
    position: absolute;
    top: 140px;
  }
  #conclusion .image1 {
    left: 0;
  }
  #conclusion .image2 {
    right: 0;
  }

  #register {
    padding-bottom: 130px;
  }
  #register.show .animate_fade {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  #register .inner {
    width: 1200px;
    margin: 0 auto;
  }
  #register .title {
    text-align: center;
    margin-bottom: 80px;
  }
  #register .list {
    display: flex;
    justify-content: space-between;
    width: 1140px;
    margin: 0 auto 60px;
    transition-delay: 300ms;
  }
  #register .list li {
    position: relative;
    width: 210px;
    margin-right: 60px;
    margin-left: 40px;
  }
  #register .list li img {
    width: 100%;
  }
  #register .list li::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -70px;
    margin: auto 0;
    width: 36px;
    height: 20px;
    background: url("../images/arrow_blue.svg") center center/100% no-repeat;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  #register .list li:first-child {
    margin-left: 0;
  }
  #register .list li:last-child {
    margin-right: 0;
  }
  #register .list li:last-child::after {
    display: none;
  }
  #register .note {
    position: relative;
    width: 720px;
    font-size: 2rem;
    line-height: 1.5;
    background-color: #fff;
    border-radius: 20px;
    padding: 20px 20px 20px 100px;
    margin: 0 auto 60px;
    transition-delay: 600ms;
  }
  #register .note::before {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    left: 40px;
    content: '';
    display: block;
    width: 40px;
    height: 36px;
    background: url("../images/register_check.svg") center center/100% no-repeat;
  }
  #register .chara {
    bottom: 135px;
    right: 15px;
  }
  #register .dl {
    width: 850px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0 auto;
    transition-delay: 900ms;
  }
  #register .dl .name {
    font-size: 2rem;
    font-weight: bold;
    margin-right: 30px;
  }
  #register .dl .links {
    display: flex;
    justify-content: flex-start;
    margin-right: 30px;
  }
  #register .dl .dl_bnr {
    position: relative;
    z-index: 10;
  }
  #register .dl .dl_bnr a {
    display: block;
  }
  #register .dl .dl_bnr + .dl_bnr {
    margin-left: 12px;
  }
  #register .dl .qr {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  #register .dl .qr .image {
    margin-right: 15px;
  }
  #register .dl .qr .txt {
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.5;
  }

  #footer {
    background-color: #3ad9ec;
    padding: 40px 0 70px;
  }
  #footer .copyright {
    display: block;
    font-size: 1.4rem;
    line-height: 1;
    text-align: center;
  }

  #pagetop {
    margin-bottom: 80px;
  }
  #pagetop a {
    display: block;
    width: 50px;
    margin: 0 auto 22px;
    transition: all linear 200ms;
  }
  #pagetop a:hover {
    opacity: .8;
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
  #pagetop span {
    display: block;
    width: 175px;
    margin: 0 auto;
  }

  #follow {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
  }
}
/* Smartphones (portrait and landscape) */
@media screen and (max-width: 750px) {
  @-webkit-keyframes bound {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    20% {
      -webkit-transform: translateY(-15px);
              transform: translateY(-15px);
    }
    40% {
      -webkit-transform: translateY(10px);
              transform: translateY(10px);
    }
    55% {
      -webkit-transform: translateY(-5px);
              transform: translateY(-5px);
    }
    70% {
      -webkit-transform: translateY(3px);
              transform: translateY(3px);
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  @keyframes bound {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    20% {
      -webkit-transform: translateY(-15px);
              transform: translateY(-15px);
    }
    40% {
      -webkit-transform: translateY(10px);
              transform: translateY(10px);
    }
    55% {
      -webkit-transform: translateY(-5px);
              transform: translateY(-5px);
    }
    70% {
      -webkit-transform: translateY(3px);
              transform: translateY(3px);
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  @-webkit-keyframes bound_title {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    25% {
      -webkit-transform: translateY(-10px);
              transform: translateY(-10px);
    }
    50% {
      -webkit-transform: translateY(6px);
              transform: translateY(6px);
    }
    75% {
      -webkit-transform: translateY(-3px);
              transform: translateY(-3px);
    }
    94% {
      -webkit-transform: translateY(1px);
              transform: translateY(1px);
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  @keyframes bound_title {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    25% {
      -webkit-transform: translateY(-10px);
              transform: translateY(-10px);
    }
    50% {
      -webkit-transform: translateY(6px);
              transform: translateY(6px);
    }
    75% {
      -webkit-transform: translateY(-3px);
              transform: translateY(-3px);
    }
    94% {
      -webkit-transform: translateY(1px);
              transform: translateY(1px);
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  @-webkit-keyframes balloon_anime {
    0% {
      -webkit-transform: scale(0);
              transform: scale(0);
    }
    60% {
      -webkit-transform: scale(1.2);
              transform: scale(1.2);
    }
    75% {
      -webkit-transform: scale(0.85);
              transform: scale(0.85);
    }
    85% {
      -webkit-transform: scale(1.05);
              transform: scale(1.05);
    }
    94% {
      -webkit-transform: scale(0.95);
              transform: scale(0.95);
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
  }
  @keyframes balloon_anime {
    0% {
      -webkit-transform: scale(0);
              transform: scale(0);
    }
    60% {
      -webkit-transform: scale(1.2);
              transform: scale(1.2);
    }
    75% {
      -webkit-transform: scale(0.85);
              transform: scale(0.85);
    }
    85% {
      -webkit-transform: scale(1.05);
              transform: scale(1.05);
    }
    94% {
      -webkit-transform: scale(0.95);
              transform: scale(0.95);
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
  }
  .pc {
    display: none !important;
  }

  img {
    width: 100%;
    height: auto;
  }

  #header {
    position: relative;
    width: 100%;
    height: 168.53333vw;
    background: url("../images/sp_kv_bg.jpg") center top/cover no-repeat #20d2e7;
    overflow: hidden;
  }
  #header::after {
    content: '';
    display: block;
    background: url("../images/sp_bg_cream.png") center bottom/100% no-repeat;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 0;
    padding-top: 27%;
  }
  #header .inner {
    padding-top: 13.33333vw;
    padding-bottom: 28vw;
  }
  #header .page_title {
    width: 70.13333vw;
    margin: 0 auto 1.86667vw;
  }
  #header .dl {
    width: 84vw;
    display: flex;
    justify-content: flex-start;
    margin: 0 auto;
  }
  #header .links {
    margin-top: 6.66667vw;
    margin-right: 6.66667vw;
    margin-left: 6.66667vw;
  }
  #header .links .dl_bnr {
    position: relative;
    z-index: 10;
    opacity: 0;
    transition: all linear 800ms;
    width: 37.86667vw;
    margin-bottom: 4.26667vw;
  }
  #header .links .dl_bnr a {
    display: block;
  }
  #header .links .dl_bnr:last-child {
    margin-bottom: 0;
  }
  #header .links .dl_bnr_google {
    transition-delay: 2500ms;
  }
  #header .links .dl_bnr_apple {
    transition-delay: 2600ms;
  }
  #header .smp {
    opacity: 0;
    width: 25.33333vw;
    transition: all linear 100ms;
    transition-delay: 600ms;
  }
  #header .image_acce {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  #header .image_acce .acce {
    opacity: 0;
    position: absolute;
  }
  #header .image_acce .acce1 {
    width: 13.06667vw;
    top: 3.33333vw;
    left: 2vw;
  }
  #header .image_acce .acce2 {
    width: 35.46667vw;
    top: 2vw;
    right: 2vw;
    transition-delay: 100ms;
  }
  #header .image_acce .acce3 {
    width: 95.46667vw;
    top: 82.66667vw;
    left: 2.66667vw;
    transition-delay: 200ms;
  }
  #header .image_acce .acce5 {
    width: 95.2vw;
    top: 5.33333vw;
    right: 1.33333vw;
    transition-delay: 800ms;
  }
  #header .image_acce2 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  #header .image_acce2 .kv_acce {
    position: absolute;
    opacity: 0;
    transition: all linear 100ms;
  }
  #header .image_acce2 .kv_acce1 {
    width: 10.13333vw;
    top: 3.2vw;
    left: 5.06667vw;
  }
  #header .image_acce2 .kv_acce2 {
    width: 11.6vw;
    top: 46.4vw;
    left: 1.86667vw;
  }
  #header .image_acce2 .kv_acce3 {
    width: 9.06667vw;
    top: 2vw;
    right: 28.26667vw;
  }
  #header .image_acce2 .kv_acce4 {
    width: 11.73333vw;
    top: 88.53333vw;
    left: 2.4vw;
  }
  #header .image_acce2 .kv_acce5 {
    width: 13.33333vw;
    top: 10.66667vw;
    right: 1.86667vw;
  }
  #header .image_acce2 .kv_acce6 {
    width: 9.86667vw;
    top: 82.66667vw;
    right: 2.4vw;
  }
  #header .image_acce2 .kv_acce7 {
    width: 9.6vw;
    top: 121.86667vw;
    right: 2.66667vw;
  }
  #header .image_acce2 .kv_acce8 {
    width: 6vw;
    top: 78.66667vw;
    left: 8vw;
  }
  #header .image_acce2 .kv_acce9 {
    width: 5.33333vw;
    top: 119.46667vw;
    left: 4.8vw;
  }
  #header .image_acce2 .kv_acce10 {
    width: 4.8vw;
    top: 71.46667vw;
    right: 9.33333vw;
  }
  #header .image_acce2 .kv_acce11 {
    width: 3.73333vw;
    top: 32.53333vw;
    right: 23.2vw;
  }
  #header .image_acce2 .kv_acce11 .after_animate2 {
    -webkit-animation: music1 1500ms linear infinite;
            animation: music1 1500ms linear infinite;
  }
  #header .image_acce2 .kv_acce12 {
    width: 4.66667vw;
    top: 34.66667vw;
    right: 18.66667vw;
  }
  #header .image_acce2 .kv_acce12 .after_animate2 {
    -webkit-animation: music2 1500ms linear infinite;
            animation: music2 1500ms linear infinite;
  }
  #header .image_chara {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #header .image_chara .chara {
    opacity: 0;
    position: absolute;
    transition: all linear 200ms;
  }
  #header .image_chara .chara1 {
    width: 28.26667vw;
    bottom: 3vw;
    left: -6vw;
    transition-delay: 1400ms;
    -webkit-animation-delay: 400ms;
            animation-delay: 400ms;
  }
  #header .image_chara .chara2 {
    width: 17.46667vw;
    bottom: -8vw;
    left: 22vw;
    transition-delay: 1600ms;
  }
  #header .image_chara .chara3 {
    width: 30.66667vw;
    bottom: -6vw;
    left: 36vw;
    transition-delay: 1800ms;
  }
  #header .image_chara .chara4 {
    width: 30.66667vw;
    bottom: -4vw;
    right: 14vw;
    transition-delay: 2000ms;
  }
  #header .image_chara .chara5 {
    width: 22.8vw;
    bottom: -6vw;
    right: -1vw;
    transition-delay: 2200ms;
  }
  #header.show .image_acce .acce {
    opacity: 1;
  }
  #header.show .image_acce .acce4 {
    -webkit-animation: kv_anime 500ms ease-out;
            animation: kv_anime 500ms ease-out;
    -webkit-animation-delay: 500ms;
            animation-delay: 500ms;
  }
  #header.show .image_acce .acce5 {
    -webkit-animation: kv_anime2 500ms ease-out;
            animation: kv_anime2 500ms ease-out;
    -webkit-animation-delay: 800ms;
            animation-delay: 800ms;
  }
  #header.show .image_acce2 .kv_acce_icon {
    opacity: 1;
    -webkit-animation: kv_anime 350ms ease-in-out;
            animation: kv_anime 350ms ease-in-out;
  }
  #header.show .image_acce2 .kv_acce_icon_m {
    opacity: 1;
    -webkit-animation: kv_anime 500ms ease-in-out;
            animation: kv_anime 500ms ease-in-out;
  }
  #header.show .image_chara .chara {
    opacity: 1;
    -webkit-animation: bound_kv 300ms ease-out;
            animation: bound_kv 300ms ease-out;
  }
  #header.show .image_chara .chara1 {
    -webkit-animation-delay: 1400ms;
            animation-delay: 1400ms;
  }
  #header.show .image_chara .chara2 {
    -webkit-animation-delay: 1600ms;
            animation-delay: 1600ms;
  }
  #header.show .image_chara .chara3 {
    -webkit-animation-delay: 1800ms;
            animation-delay: 1800ms;
  }
  #header.show .image_chara .chara4 {
    -webkit-animation-delay: 2000ms;
            animation-delay: 2000ms;
  }
  #header.show .image_chara .chara5 {
    -webkit-animation-delay: 2200ms;
            animation-delay: 2200ms;
  }
  #header.show .links .dl_bnr {
    opacity: 1;
    -webkit-animation: fadeIn 200ms ease-out;
            animation: fadeIn 200ms ease-out;
  }
  #header.show .links .dl_bnr_google {
    -webkit-animation-delay: 2500ms;
            animation-delay: 2500ms;
  }
  #header.show .links .dl_bnr_apple {
    -webkit-animation-delay: 2600ms;
            animation-delay: 2600ms;
  }
  #header.show .smp {
    opacity: 1;
    -webkit-animation: smp_anime 500ms ease-out;
            animation: smp_anime 500ms ease-out;
    -webkit-animation-delay: 500ms;
            animation-delay: 500ms;
  }

  .common_inner {
    position: relative;
    width: 92vw;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 2.66667vw;
    padding-bottom: 10.66667vw;
  }

  .inner {
    position: relative;
  }

  .main {
    overflow: hidden;
  }

  .chara {
    position: absolute;
  }

  .chara_comment {
    opacity: 0;
  }
  .chara_comment.show {
    opacity: 1;
    -webkit-animation: bound 1000ms ease-in-out;
            animation: bound 1000ms ease-in-out;
  }

  .animate_ob {
    opacity: 0;
    transition: all linear 200ms;
  }

  .animate_balloon {
    opacity: 0;
    transition: all linear 200ms;
  }

  .animate_fade {
    opacity: 0;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    transition: all ease-in-out 300ms;
  }

  .sec1 {
    margin-bottom: 8vw;
  }
  .sec1 .backtop {
    width: 42.66667vw;
    margin: 5.33333vw auto 0;
  }
  .sec1 .backtop a {
    width: 100%;
    display: block;
  }
  .sec1 .inner {
    overflow: hidden;
    padding-bottom: 5.33333vw;
  }
  .sec1 .sec_title {
    position: relative;
    width: 100%;
    height: 20vw;
    padding-top: 7.2vw;
    margin-bottom: 10.66667vw;
    overflow: hidden;
    border-bottom-left-radius: 50vw 8vw;
    border-bottom-right-radius: 50vw 8vw;
  }
  .sec1 .sec_title img {
    display: inline-block;
  }
  .sec1 .sec_title .image {
    opacity: 0;
    position: absolute;
    transition: all linear 200ms;
    transition-delay: 300ms;
  }
  .sec1 .sec_title .title_txt {
    opacity: 0;
    transition: all linear 200ms;
  }
  .sec1 .sec_title.show .image {
    opacity: 1;
    -webkit-animation: bound_title 1s ease-in;
            animation: bound_title 1s ease-in;
    -webkit-animation-delay: 300ms;
            animation-delay: 300ms;
  }
  .sec1 .sec_title.show .animate_ob {
    opacity: 1;
    -webkit-animation: bound_title 800ms ease-in;
            animation: bound_title 800ms ease-in;
    -webkit-animation-delay: 200ms;
            animation-delay: 200ms;
  }
  .sec1 .sec_title.show .title_txt {
    opacity: 1;
    -webkit-animation: fadeIn 200ms ease-in-out;
            animation: fadeIn 200ms ease-in-out;
  }
  .sec1 .worries1_suggest_wrap.show .worries1 .image {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1 .worries1_suggest_wrap.show .worries1 .desc {
    opacity: 1;
    background: url("../images/sp_sec_moya.png") center center/100% no-repeat;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1 .worries1_suggest_wrap.show .worries1 .desc .letter {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1 .worries1_suggest_wrap.show .worries1 .desc .balloon {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1 .worries1_suggest_wrap.show .suggest {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1 .worries2_suggest_wrap.show .worries2 .image {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1 .worries2_suggest_wrap.show .worries2 .desc .letter {
    opacity: 1;
    transition-delay: 300ms;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1 .worries2_suggest_wrap.show .worries2 .desc .balloon {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1 .worries2_suggest_wrap.show .worries2 .desc .person {
    opacity: 1;
    transition-delay: 300ms;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1 .worries2_suggest_wrap.show .worries2 .desc .bg {
    opacity: 1;
    transition-delay: 300ms;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1 .worries2_suggest_wrap.show .suggest {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1.diet .sec_title {
    padding-top: 7.6vw;
    background: url("../images/sp_diet_title_bg.png") center bottom/100% no-repeat;
    text-align: center;
    padding-left: 13.33333vw;
  }
  .sec1.diet .sec_title .image {
    width: 27.2vw;
    top: 2.66667vw;
    left: 9.33333vw;
  }
  .sec1.diet .sec_title .title_txt {
    display: inline-block;
    width: 34.4vw;
  }
  .sec1.diet .chara {
    width: 36.8vw;
    bottom: 21.33333vw;
    right: 8vw;
  }
  .sec1.exercise .sec_title {
    padding-top: 7.6vw;
    background: url("../images/sp_exercise_title_bg.png") center bottom/100% no-repeat;
    text-align: center;
    padding-left: 13.33333vw;
  }
  .sec1.exercise .sec_title .image {
    width: 16.93333vw;
    top: -1vw;
    left: 14.66667vw;
  }
  .sec1.exercise .sec_title .title_txt {
    display: inline-block;
    width: 36.66667vw;
  }
  .sec1.exercise .chara {
    width: 46.26667vw;
    bottom: 21.33333vw;
    right: 8.53333vw;
  }
  .sec1.habit .sec_title {
    padding-top: 7.6vw;
    background: url("../images/sp_habit_title_bg.png") center bottom/100% no-repeat;
    text-align: center;
    padding-left: 21.33333vw;
  }
  .sec1.habit .sec_title .image {
    width: 27.73333vw;
    top: 0.53333vw;
    left: 9.33333vw;
  }
  .sec1.habit .sec_title .title_txt {
    display: inline-block;
    width: 43.86667vw;
  }
  .sec1.habit .chara {
    width: 48.8vw;
    bottom: 21.33333vw;
    right: 4vw;
  }
  .sec1 .worries {
    width: 84vw;
    margin: 0 auto 2.66667vw;
  }
  .sec1 .worries .desc {
    position: relative;
    height: 55.6vw;
    display: flex;
    align-items: center;
  }
  .sec1 .worries .desc .letter {
    display: block;
    font-size: 5.6vw;
    font-weight: bold;
    line-height: 1.31579;
    margin: 0 auto;
  }
  .sec1 .worries .desc .balloon {
    display: block;
    position: absolute;
  }
  .sec1 .worries1 {
    margin: 0 auto;
  }
  .sec1 .worries1 .desc {
    opacity: 0;
    width: 100%;
    text-align: center;
    padding-top: 2.66667vw;
    margin-bottom: 12vw;
    transition-delay: 500ms;
  }
  .sec1 .worries1 .desc .balloon {
    opacity: 0;
    width: 21.86667vw;
    top: 12.53333vw;
    left: 6.66667vw;
    transition: all linear 300ms;
    transition-delay: 700ms;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  .sec1 .worries1 .desc .letter {
    opacity: 0;
    transition: all linear 200ms;
    transition-delay: 500ms;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  .sec1 .worries1 .desc.show {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1 .worries1 .desc.show .letter {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1 .worries1 .desc.show .balloon {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1 .worries1 .image {
    width: 77.33333vw;
    margin: 0 auto;
    margin-bottom: 3.33333vw;
    opacity: 0;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    transition: all linear 500ms;
  }
  .sec1 .worries2 .desc {
    background-position: right center;
    background-size: 86.2%;
    padding-top: 8vw;
  }
  .sec1 .worries2 .desc .bg {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    width: 100%;
    height: 55.6vw;
    background: url("../images/sp_sec_moya.png") right center/86.2% no-repeat;
    transition: all linear 200ms;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  .sec1 .worries2 .desc .letter {
    opacity: 0;
    font-size: 4.8vw;
    padding-left: 24vw;
    transition: all linear 200ms;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  .sec1 .worries2 .desc .balloon {
    opacity: 0;
    width: 22vw;
    top: 14vw;
    left: 24vw;
    transition: all linear 200ms;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  .sec1 .worries2 .desc .person {
    opacity: 0;
    display: block;
    position: absolute;
    width: 21.33333vw;
    height: 21.33333vw;
    left: 0;
    top: 20vw;
    transition: all linear 200ms;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  .sec1 .worries2 .desc.show .letter {
    opacity: 1;
    transition-delay: 300ms;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1 .worries2 .desc.show .balloon {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1 .worries2 .desc.show .person {
    opacity: 1;
    transition-delay: 300ms;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1 .worries2 .desc.show .bg {
    opacity: 1;
    transition-delay: 300ms;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1 .worries2 .image {
    width: 77.33333vw;
    margin: 0 auto 16vw;
    opacity: 0;
    transition: all linear 300ms;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    transition-delay: 500ms;
  }
  .sec1 .suggest {
    position: relative;
    width: 80vw;
    text-align: center;
    margin: 0 auto 9.33333vw;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    transition: all ease-in-out 300ms;
    opacity: 0;
  }
  .sec1 .suggest .desc {
    position: relative;
    font-size: 4.53333vw;
    font-weight: bold;
    letter-spacing: .05em;
    line-height: 1.42857;
    padding-bottom: 2.66667vw;
    text-indent: 1.3em;
  }
  .sec1 .suggest .sp_fz {
    font-size: 5.06667vw;
    font-weight: bold;
    letter-spacing: -.01em;
  }
  .sec1 .suggest strong {
    font-size: 5.86667vw;
    font-weight: bold;
    color: #f9bf1c;
  }
  .sec1 .suggest::before {
    position: absolute;
    top: -2vw;
    left: -1vw;
    content: '';
    display: block;
    width: 6.66667vw;
    height: 8.8vw;
    background: url("../images/sec_resolve_icon.svg") center center/100% no-repeat;
  }
  .sec1 .suggest::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    display: block;
    width: 100%;
    height: 0.53333vw;
    background-color: #f9bf1c;
  }
  .sec1 .suggest1 {
    transition-delay: 700ms;
  }
  .sec1 .suggest2 {
    transition-delay: 700ms;
  }
  .sec1 .promote {
    width: 84vw;
    margin: 0 auto;
    background-color: #fbedc5;
    border-radius: 2.66667vw;
  }
  .sec1.diet .diet_promote1 {
    padding-top: 10.66667vw;
    padding-right: 8vw;
    padding-left: 8vw;
    padding-bottom: 8vw;
    margin-bottom: 10.66667vw;
  }
  .sec1.diet .diet_promote1.show .animate_fade {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1.diet .diet_promote1.show .info .title {
    opacity: 1;
    -webkit-animation: fadertol 300ms ease;
            animation: fadertol 300ms ease;
  }
  .sec1.diet .diet_promote1.show .image {
    opacity: 1;
  }
  .sec1.diet .diet_promote1.show .image .animate_balloon {
    opacity: 1;
  }
  .sec1.diet .diet_promote1.show .image .point1 {
    -webkit-animation: balloon_anime 500ms ease-in-out;
            animation: balloon_anime 500ms ease-in-out;
    -webkit-animation-delay: 900ms;
            animation-delay: 900ms;
  }
  .sec1.diet .diet_promote1.show .image .point2 {
    -webkit-animation: balloon_anime 500ms ease-in-out;
            animation: balloon_anime 500ms ease-in-out;
    -webkit-animation-delay: 900ms;
            animation-delay: 900ms;
  }
  .sec1.diet .diet_promote1 .info .title {
    opacity: 0;
    width: 59.73333vw;
    margin-bottom: 3.33333vw;
    transition: opacity ease-in 300ms;
  }
  .sec1.diet .diet_promote1 .info .desc {
    font-size: 3.46667vw;
    line-height: 1.5;
    padding-left: 4.66667vw;
    margin-bottom: 9.33333vw;
    transition-delay: 300ms;
  }
  .sec1.diet .diet_promote1 .image {
    opacity: 0;
    position: relative;
    transition: all ease-in-out 300ms;
    transition-delay: 700ms;
  }
  .sec1.diet .diet_promote1 .image .point {
    position: absolute;
  }
  .sec1.diet .diet_promote1 .image .point1 {
    width: 17.06667vw;
    top: 26.66667vw;
    left: -5.3vw;
    transition-delay: 900ms;
  }
  .sec1.diet .diet_promote1 .image .point2 {
    width: 25.6vw;
    top: -4.5vw;
    right: -6.3vw;
    transition-delay: 900ms;
  }
  .sec1.diet .diet_promote2 {
    padding-top: 10.66667vw;
    padding-right: 6.66667vw;
    padding-left: 6.66667vw;
    padding-bottom: 32vw;
  }
  .sec1.diet .diet_promote2.show .animate_fade {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1.diet .diet_promote2.show .promote_title .title_txt {
    opacity: 1;
    -webkit-animation: fadertol 300ms ease;
            animation: fadertol 300ms ease;
  }
  .sec1.diet .diet_promote2.show .promote_title .animate_balloon {
    opacity: 1;
    -webkit-animation: balloon_anime 500ms ease-in-out;
            animation: balloon_anime 500ms ease-in-out;
    -webkit-animation-delay: 200ms;
            animation-delay: 200ms;
  }
  .sec1.diet .diet_promote2.show .block {
    opacity: 1;
  }
  .sec1.diet .diet_promote2 .promote_title {
    position: relative;
    width: 70vw;
    text-align: center;
    margin-bottom: 5.33333vw;
  }
  .sec1.diet .diet_promote2 .promote_title .title_txt {
    display: inline-block;
    width: 52.8vw;
    margin-left: 17.33333vw;
    opacity: 0;
    transition: opacity ease-in 300ms;
  }
  .sec1.diet .diet_promote2 .promote_title .balloon {
    opacity: 0;
    width: 14.66667vw;
    position: absolute;
    top: -4vw;
    left: 0;
    transition-delay: 200ms;
  }
  .sec1.diet .diet_promote2 .blocks .info {
    width: calc(100% - 32vw);
    padding-top: 5.33333vw;
  }
  .sec1.diet .diet_promote2 .blocks .name {
    font-size: 4vw;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 3.33333vw;
  }
  .sec1.diet .diet_promote2 .blocks .desc {
    font-size: 3.46667vw;
    line-height: 1.5;
  }
  .sec1.diet .diet_promote2 .block {
    opacity: 0;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 6.66667vw;
    transition: opacity ease-in 300ms;
  }
  .sec1.diet .diet_promote2 .block:last-child {
    margin-bottom: 0;
  }
  .sec1.diet .diet_promote2 .block .image {
    width: 26.66667vw;
    margin-right: 5.33333vw;
  }
  .sec1.diet .diet_promote2 .block1 {
    transition-delay: 700ms;
  }
  .sec1.diet .diet_promote2 .block2 {
    transition-delay: 1000ms;
  }
  .sec1.diet .worries2 .desc .balloon {
    left: 29.33333vw;
  }
  .sec1.diet .worries2 .desc.show .animate_ob {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1.diet .suggest2 {
    width: 77.33333vw;
    margin: 0 auto 9.333vw;
  }
  .sec1.exercise .worries1 .balloon {
    left: 4.53333vw;
  }
  .sec1.exercise .worries1 .desc {
    padding-top: 8vw;
  }
  .sec1.exercise .worries1 .desc .letter {
    font-size: 5.6vw;
  }
  .sec1.exercise .worries2 .balloon {
    width: 29.6vw;
    left: 25.33333vw;
  }
  .sec1.exercise .worries2 .desc .letter {
    padding-left: 18.66667vw;
  }
  .sec1.exercise .worries2 .desc.show .animate_ob {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1.exercise .suggest1 {
    width: 73.33333vw;
  }
  .sec1.exercise .suggest1::before {
    left: 4vw;
  }
  .sec1.exercise .suggest1 strong {
    font-size: 5.86667vw;
  }
  .sec1.exercise .suggest1 .desc {
    text-indent: 3em;
  }
  .sec1.exercise .suggest2 {
    width: 84vw;
  }
  .sec1.exercise .suggest2::before {
    top: 2vw;
    left: 2vw;
  }
  .sec1.exercise .suggest2 strong {
    font-size: 5.6vw;
  }
  .sec1.exercise .suggest2 .sp_fz {
    font-size: 5.6vw;
  }
  .sec1.exercise .exercise_promote1 {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 10.66667vw;
    padding-right: 6.66667vw;
    padding-left: 6.66667vw;
    padding-bottom: 8vw;
    margin-bottom: 10.66667vw;
  }
  .sec1.exercise .exercise_promote1.show .animate_fade {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1.exercise .exercise_promote1.show > .image {
    opacity: 1;
  }
  .sec1.exercise .exercise_promote1.show > .image .animate_balloon {
    opacity: 1;
  }
  .sec1.exercise .exercise_promote1.show > .image .point1 {
    -webkit-animation: balloon_anime 500ms ease-in-out;
            animation: balloon_anime 500ms ease-in-out;
    -webkit-animation-delay: 900ms;
            animation-delay: 900ms;
  }
  .sec1.exercise .exercise_promote1.show > .image .point2 {
    -webkit-animation: balloon_anime 500ms ease-in-out;
            animation: balloon_anime 500ms ease-in-out;
    -webkit-animation-delay: 900ms;
            animation-delay: 900ms;
  }
  .sec1.exercise .exercise_promote1.show .info .title {
    opacity: 1;
    -webkit-animation: fadertol 300ms ease;
            animation: fadertol 300ms ease;
  }
  .sec1.exercise .exercise_promote1.show .block_wide .image {
    opacity: 1;
  }
  .sec1.exercise .exercise_promote1.show .block_wide .image .animate_balloon {
    opacity: 1;
    -webkit-animation: balloon_anime 500ms ease-in-out;
            animation: balloon_anime 500ms ease-in-out;
    -webkit-animation-delay: 1500ms;
            animation-delay: 1500ms;
  }
  .sec1.exercise .exercise_promote1 .info .title {
    opacity: 0;
    width: 65.86667vw;
    margin-bottom: 2.66667vw;
    transition: opacity ease-in 300ms;
  }
  .sec1.exercise .exercise_promote1 .info .desc {
    font-size: 3.46667vw;
    line-height: 1.5;
    padding-left: 5.33333vw;
    margin-bottom: 12vw;
    transition-delay: 300ms;
  }
  .sec1.exercise .exercise_promote1 .info .title_txt {
    width: 65.86667vw;
  }
  .sec1.exercise .exercise_promote1 > .image {
    position: relative;
    opacity: 0;
    transition: all ease-in 300ms;
    transition-delay: 700ms;
  }
  .sec1.exercise .exercise_promote1 > .image .point {
    position: absolute;
    opacity: 0;
  }
  .sec1.exercise .exercise_promote1 > .image .point1 {
    width: 20.4vw;
    top: 26.66667vw;
    left: -5.6vw;
    transition-delay: 900ms;
  }
  .sec1.exercise .exercise_promote1 > .image .point2 {
    width: 26.4vw;
    top: -12vw;
    right: -5.6vw;
    transition-delay: 900ms;
  }
  .sec1.exercise .exercise_promote1 .block_wide {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 6.66667vw;
  }
  .sec1.exercise .exercise_promote1 .block_wide .image {
    width: 28vw;
    margin-right: 2.66667vw;
    margin-left: 2.66667vw;
    opacity: 0;
    transition: all ease-in 300ms;
    transition-delay: 1300ms;
  }
  .sec1.exercise .exercise_promote1 .block_wide .image .point {
    opacity: 0;
    width: 20.4vw;
    position: absolute;
    top: -3vw;
    left: -5.6vw;
    transition-delay: 1500ms;
  }
  .sec1.exercise .exercise_promote1 .block_wide .desc {
    width: 36vw;
    font-size: 3.46667vw;
    line-height: 1.8;
    -webkit-transform: translateX(1vw);
            transform: translateX(1vw);
    transition-delay: 2100ms;
  }
  .sec1.exercise .exercise_promote2 {
    padding-top: 10.66667vw;
    padding-right: 2.66667vw;
    padding-left: 5.33333vw;
    padding-bottom: 32vw;
  }
  .sec1.exercise .exercise_promote2.show .info .title {
    opacity: 1;
    -webkit-animation: fadertol 300ms ease;
            animation: fadertol 300ms ease;
  }
  .sec1.exercise .exercise_promote2.show .info .animate_balloon {
    opacity: 1;
    -webkit-animation: balloon_anime 500ms ease-in-out;
            animation: balloon_anime 500ms ease-in-out;
    -webkit-animation-delay: 300ms;
            animation-delay: 300ms;
  }
  .sec1.exercise .exercise_promote2.show .block {
    opacity: 1;
  }
  .sec1.exercise .exercise_promote2 .info .title {
    opacity: 0;
    transition: opacity ease-in 300ms;
    position: relative;
    padding-left: 17.33333vw;
    margin-bottom: 5.33333vw;
  }
  .sec1.exercise .exercise_promote2 .info .title_txt {
    display: block;
    width: 52.53333vw;
  }
  .sec1.exercise .exercise_promote2 .info .balloon {
    opacity: 0;
    width: 14.66667vw;
    position: absolute;
    top: -4vw;
    left: 0;
    transition-delay: 300ms;
  }
  .sec1.exercise .exercise_promote2 .block {
    opacity: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transition: opacity ease-in 300ms;
    transition-delay: 700ms;
  }
  .sec1.exercise .exercise_promote2 .block .image {
    width: 26.66667vw;
    margin-right: 5.33333vw;
  }
  .sec1.exercise .exercise_promote2 .block .detail {
    width: 44.66667vw;
  }
  .sec1.exercise .exercise_promote2 .block .name {
    font-size: 4vw;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 2.93333vw;
  }
  .sec1.exercise .exercise_promote2 .block .desc {
    font-size: 3.46667vw;
    line-height: 1.5;
  }
  .sec1.habit .habit_promote1 {
    position: relative;
    padding-top: 10.66667vw;
    padding-right: 8vw;
    padding-left: 8vw;
    padding-bottom: 32vw;
  }
  .sec1.habit .habit_promote1.show .animate_fade {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .sec1.habit .habit_promote1.show .info .title {
    opacity: 1;
    -webkit-animation: fadertol 300ms ease;
            animation: fadertol 300ms ease;
  }
  .sec1.habit .habit_promote1.show .image {
    opacity: 1;
  }
  .sec1.habit .habit_promote1.show .image .animate_balloon {
    opacity: 1;
  }
  .sec1.habit .habit_promote1.show .image .point1 {
    -webkit-animation: balloon_anime 500ms ease-in-out;
            animation: balloon_anime 500ms ease-in-out;
    -webkit-animation-delay: 900ms;
            animation-delay: 900ms;
  }
  .sec1.habit .habit_promote1.show .image .point2 {
    -webkit-animation: balloon_anime 500ms ease-in-out;
            animation: balloon_anime 500ms ease-in-out;
    -webkit-animation-delay: 900ms;
            animation-delay: 900ms;
  }
  .sec1.habit .habit_promote1 .info {
    margin-bottom: 9.33333vw;
  }
  .sec1.habit .habit_promote1 .info .title {
    width: 58.8vw;
    opacity: 0;
    transition: opacity ease-in 300ms;
    margin-bottom: 2.66667vw;
  }
  .sec1.habit .habit_promote1 .info .desc {
    font-size: 3.46667vw;
    line-height: 1.5;
    padding-left: 4vw;
    transition-delay: 300ms;
  }
  .sec1.habit .habit_promote1 .image {
    position: relative;
    opacity: 0;
    transition: all ease-in 300ms;
    transition-delay: 700ms;
  }
  .sec1.habit .habit_promote1 .image .point {
    opacity: 0;
    position: absolute;
  }
  .sec1.habit .habit_promote1 .image .point1 {
    width: 20.4vw;
    top: 26.66667vw;
    left: -5.6vw;
    transition-delay: 900ms;
  }
  .sec1.habit .habit_promote1 .image .point2 {
    width: 26.4vw;
    top: -9vw;
    right: -6.6vw;
    transition-delay: 900ms;
  }
  .sec1.habit .suggest .desc {
    font-size: 4.53333vw;
  }
  .sec1.habit .suggest .sp_palt {
    font-size: 4.53333vw;
    font-weight: bold;
    -webkit-font-feature-settings: "palt";
            font-feature-settings: "palt";
  }
  .sec1.habit .worries1 .desc {
    padding-top: 8vw;
  }

  .sec2 {
    text-align: center;
    background-color: #fff;
    padding-top: 14.66667vw;
    padding-bottom: 8vw;
  }
  .sec2 .desc {
    font-size: 4vw;
    line-height: 1.8;
    margin-bottom: 6vw;
  }
  .sec2 .desc:last-child {
    margin-bottom: 0;
  }
  .sec2 .desc:last-of-type {
    margin-bottom: 0;
  }
  .sec2 .desc_blue {
    color: #20d2e7;
  }
  .sec2 .strong {
    font-weight: bold;
  }
  .sec2 .strong span {
    font-weight: bold;
  }

  .sec3 {
    position: relative;
    background-color: #fbedc5;
    padding-top: 9.33333vw;
    padding-bottom: 16vw;
  }
  .sec3::after {
    content: '';
    display: block;
    background: url("../images/sp_bg_white.png") center bottom/100% no-repeat;
    position: absolute;
    bottom: -1px;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 0;
    padding-top: 27%;
  }

  #special {
    padding-top: 9.33333vw;
    padding-bottom: 16vw;
  }
  #special.show .title {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  #special.show .slide {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  #special .title {
    opacity: 0;
    width: 86vw;
    margin: 0 auto 8vw;
    transition: all linear 300ms;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  #special .slide {
    opacity: 0;
    position: relative;
    z-index: 10;
    padding-bottom: 14vw;
    margin: 0 auto;
    transition: all linear 300ms;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    transition-delay: 300ms;
  }
  #special .slide .list {
    display: flex;
    justify-content: center;
  }
  #special .slide .item {
    margin-right: 11.33333vw;
    margin-left: 11.33333vw;
  }
  #special .slide .slick-dotted.slick-slider {
    margin-bottom: 0;
  }
  #special .slide .slick-dots li button:before {
    content: '';
  }
  #special .slide .slick-dots {
    bottom: -13.86vw;
  }
  #special .slide .slick-dots li {
    width: 3.73333vw;
    height: 3.73333vw;
    margin-right: 2.66667vw;
    margin-left: 2.66667vw;
  }
  #special .slide .slick-dots li:last-child {
    margin-bottom: 0;
  }
  #special .slide .slick-dots li button {
    width: 3.73333vw;
    height: 3.73333vw;
    background-color: #fff;
    border: 0.8vw solid #20d2e7;
    border-radius: 50%;
  }
  #special .slide .slick-dots .slick-active button {
    background-color: #20d2e7;
  }
  #special .slide .slick-prev, #special .slide .slick-next {
    width: 9.6vw;
    height: 9.6vw;
    background: url("../images/slide_nav.svg") center center/100% no-repeat;
    top: auto;
    bottom: -17vw;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    z-index: 1;
  }
  #special .slide .slick-next {
    right: calc(50% - 9.6vw - 18vw);
  }
  #special .slide .slick-prev {
    left: calc(50% - 9.6vw - 18vw);
    -webkit-transform: translate(0, 0) rotate(180deg);
            transform: translate(0, 0) rotate(180deg);
  }
  #special .slide .slick-next:before {
    content: '';
  }
  #special .slide .slick-prev:before {
    content: '';
  }

  #intro {
    position: relative;
    padding-bottom: 20vw;
  }
  #intro .animate_sec2 {
    opacity: 0;
    transition: all cubic-bezier(0.65, 0, 0.35, 1) 800ms;
  }
  #intro .animate_sec2.show {
    opacity: 1 !important;
    -webkit-transform: translateY(0) !important;
            transform: translateY(0) !important;
  }
  #intro .animate_sec2.show.desc1 {
    -webkit-transform: translateY(0) !important;
            transform: translateY(0) !important;
  }
  #intro .animate_sec2.show.desc2 {
    -webkit-transform: translateY(0) !important;
            transform: translateY(0) !important;
  }
  #intro .animate_sec2.show .desc4 {
    opacity: 1 !important;
    -webkit-transform: translateY(0) !important;
            transform: translateY(0) !important;
  }
  #intro .animate_sec2.show .desc3 {
    opacity: 1;
    -webkit-transform: translateX(0) !important;
            transform: translateX(0) !important;
  }
  #intro .animate_sec2.show .desc5 {
    opacity: 1 !important;
  }
  #intro .animate_sec2.show .scroll {
    opacity: 1 !important;
  }
  #intro::after {
    content: '';
    display: block;
    background: url("../images/sp_bg_blue.png") center bottom/100% no-repeat;
    position: absolute;
    bottom: -1px;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 0;
    padding-top: 27%;
  }
  #intro.show .desc {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  #intro.show .image {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  #intro.show .scroll {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  #intro .desc {
    opacity: 0;
    transition: all ease-in-out 500ms;
    overflow: hidden;
  }
  #intro .desc1 {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  #intro .desc2 {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    margin-bottom: 6vw;
  }
  #intro .desc3 {
    opacity: 0;
    text-align: center;
    margin: 0 auto;
    transition: all 0.4s cubic-bezier(0.37, 0, 0.63, 1);
    transition-delay: 150ms;
  }
  #intro .desc3_1 {
    display: inline-block;
    -webkit-transform: translateX(-20%);
            transform: translateX(-20%);
    margin-bottom: 0;
  }
  #intro .desc3_2 {
    -webkit-transform: translateX(20%);
            transform: translateX(20%);
    margin-bottom: 6vw;
  }
  #intro .desc4 {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    transition: all cubic-bezier(0.65, 0, 0.35, 1) 700ms;
    transition-delay: 150ms;
  }
  #intro .desc5 {
    opacity: 0;
    transition: all cubic-bezier(0.65, 0, 0.35, 1) 1100ms;
    transition-delay: 700ms;
  }
  #intro .inner {
    width: 100%;
  }
  #intro .strong1 {
    font-size: 4.8vw;
  }
  #intro .strong2 {
    font-size: 5.06667vw;
    line-height: 1.60526;
  }
  #intro .image1 {
    position: absolute;
    bottom: 8vw;
    left: 0;
    right: 0;
    opacity: 0;
    width: 70.66667vw;
    margin: 0 auto 10.66667vw;
    transition: all linear 300ms;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    transition-delay: 900ms;
  }
  #intro .scroll {
    opacity: 0;
    position: relative;
    transition: all linear 200ms;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    transition-delay: 1500ms;
    margin-top: 53.33333vw;
  }
  #intro .scroll .letter {
    display: block;
    font-size: 4.53333vw;
    text-align: center;
    font-weight: bold;
    color: #20d2e7;
    margin-bottom: 2.66667vw;
  }
  #intro .scroll .arrow {
    display: block;
    width: 4vw;
    height: 2.4vw;
    background: url("../images/arrow_blue.svg") center center/100% no-repeat;
    margin: 0 auto 2vw;
    -webkit-animation: scroll 1s ease-in-out infinite;
            animation: scroll 1s ease-in-out infinite;
  }
  #intro .scroll .arrow:last-child {
    margin-bottom: 0;
  }

  .cont {
    position: relative;
    background-color: #3ad9ec;
    padding-bottom: 24vw;
  }
  .cont::after {
    content: '';
    display: block;
    background: url("../images/sp_bg_cream.png") center bottom/100% no-repeat;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 0;
    padding-top: 27%;
  }

  .nav_area {
    padding-top: 8vw;
    padding-bottom: 8.66667vw;
  }
  .nav_area .nav_area_title {
    width: 84vw;
    margin: 0 auto 9.33333vw;
  }

  .nav {
    width: 87.73333vw;
    margin: 0 auto;
  }
  .nav .list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .nav .item {
    height: 9.6vw;
    margin-bottom: 6.66667vw;
  }
  .nav .item span {
    display: inline-block;
  }
  .nav .item .bg {
    position: absolute;
    width: 34.66667vw;
    height: 9.6vw;
    background-color: #fff;
    border-radius: 4.8vw;
    top: 0;
    right: 0;
  }
  .nav .item .chara {
    position: absolute;
    left: 0;
  }
  .nav .item .letter {
    display: block;
    position: relative;
    width: 34.66667vw;
    font-size: 4.26667vw;
    font-weight: bold;
    letter-spacing: .1em;
    padding-top: 2.4vw;
    margin-left: auto;
  }
  .nav .item a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
  }
  .nav .item a::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    right: 3.33333vw;
    display: block;
    width: 2.26667vw;
    height: 1.46667vw;
    background: url("../images/arrow_blue.svg") center center/100% no-repeat;
  }
  .nav .item1 {
    width: 42vw;
  }
  .nav .item1 .chara {
    top: -2vw;
    width: 12.8vw;
    height: 12.66667vw;
    background: url("../images/nav_chara1.png") center center/100% no-repeat;
  }
  .nav .item2 {
    width: 38.4vw;
  }
  .nav .item2 .chara {
    top: -5vw;
    width: 7.33333vw;
    height: 16vw;
    background: url("../images/nav_chara2.png") center center/100% no-repeat;
  }
  .nav .item3 {
    width: 42.4vw;
    margin: 0 auto;
  }
  .nav .item3 .chara {
    top: -5.3vw;
    width: 14.4vw;
    height: 16.8vw;
    background: url("../images/nav_chara3.png") center center/100% no-repeat;
  }

  #others.show .animate_fade {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  #others .inner {
    padding: 9.33333vw 4vw 10.66667vw;
  }
  #others .title {
    width: 60vw;
    position: relative;
    font-size: 4.8vw;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    padding-bottom: 4vw;
    margin: 0 auto 8vw;
  }
  #others .title::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    display: block;
    width: 100%;
    height: 0.53333vw;
    background-color: #f9bf1c;
  }
  #others .blocks {
    margin-bottom: 14.66667vw;
  }
  #others .block {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-left: 2.66667vw;
    margin-bottom: 5.33333vw;
    background: url("../images/others_bg.png") right 4vw top 4vw/66% no-repeat;
  }
  #others .block .image {
    width: 31.2vw;
    margin-right: 6.66667vw;
  }
  #others .block .info {
    padding-top: 14.66667vw;
  }
  #others .block .name {
    font-size: 4vw;
    font-weight: bold;
    margin-bottom: 2.66667vw;
  }
  #others .block .desc {
    font-size: 3.46667vw;
    line-height: 1.8;
  }
  #others .block:last-child {
    margin-bottom: 0;
  }
  #others .block1 {
    transition-delay: 250ms;
  }
  #others .block2 {
    transition-delay: 500ms;
  }
  #others .block_wide {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    background: #ecfafc;
    padding: 5.33333vw 2.66667vw 10.66667vw 5.33333vw;
    border-radius: 2.66667vw;
  }
  #others .block_wide.show .image1 {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  #others .block_wide.show .info {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  #others .block_wide.show .image2_img {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  #others .block_wide.show .animate_balloon {
    opacity: 1;
    -webkit-animation: balloon_anime 500ms ease-in-out;
            animation: balloon_anime 500ms ease-in-out;
    -webkit-animation-delay: 700ms;
            animation-delay: 700ms;
  }
  #others .block_wide .image1 {
    width: 32vw;
    margin-right: 4vw;
    margin-bottom: 10.66667vw;
    opacity: 0;
    transition: all ease-in-out 300ms;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  #others .block_wide .info {
    width: 38.66667vw;
    padding-top: 9.33333vw;
    opacity: 0;
    transition: all ease-in-out 300ms;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    transition-delay: 250ms;
  }
  #others .block_wide .name {
    position: relative;
    font-size: 4vw;
    font-weight: bold;
    padding-left: 9.33333vw;
    margin-bottom: 4.53333vw;
  }
  #others .block_wide .name::before {
    position: absolute;
    top: -2vw;
    left: 0;
    content: '';
    display: block;
    width: 7.73333vw;
    height: 7.73333vw;
    background: url("../images/others_column_title.svg") center center/100% no-repeat;
  }
  #others .block_wide .desc {
    font-size: 3.46667vw;
    line-height: 1.5;
  }
  #others .block_wide .image2 {
    position: relative;
    width: 100%;
    margin-right: 2.66667vw;
  }
  #others .block_wide .image2_img {
    transition: all ease-in-out 300ms;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    opacity: 0;
    transition-delay: 400ms;
  }
  #others .block_wide .point {
    width: 26.4vw;
    position: absolute;
    top: -20vw;
    right: -4vw;
    opacity: 0;
    transition-delay: 700ms;
  }
  #others .chara {
    width: 38.4vw;
    bottom: -10vw;
    right: 4vw;
  }

  #conclusion {
    position: relative;
    padding-bottom: 18.66667vw;
  }
  #conclusion.show .animate_fade {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  #conclusion.show .acce1::after {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation: pika 1000ms ease-out infinite;
            animation: pika 1000ms ease-out infinite;
    -webkit-animation-delay: 1800ms;
            animation-delay: 1800ms;
  }
  #conclusion.show .acce2::after {
    opacity: 1;
  }
  #conclusion.show .image {
    opacity: 1;
  }
  #conclusion .animate_sec2 {
    opacity: 0;
    transition: all cubic-bezier(0.65, 0, 0.35, 1) 500ms;
  }
  #conclusion .animate_sec2.show {
    opacity: 1 !important;
    -webkit-transform: translateY(0) !important;
            transform: translateY(0) !important;
  }
  #conclusion .animate_sec2.show.acce1::after {
    opacity: 1;
    -webkit-animation: pika 1000ms ease-out infinite;
            animation: pika 1000ms ease-out infinite;
  }
  #conclusion .animate_sec2.show .desc {
    opacity: 1 !important;
    -webkit-transform: translateY(0) !important;
            transform: translateY(0) !important;
  }
  #conclusion .animate_sec2.show span {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  #conclusion .desc {
    overflow: hidden;
  }
  #conclusion .desc span {
    display: inline-block;
    font-weight: bold;
    -webkit-transform: translate(0, 105%);
            transform: translate(0, 105%);
    transition: -webkit-transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
    transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
    transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s, -webkit-transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
    letter-spacing: -.2em;
  }
  #conclusion .image {
    opacity: 0;
    transition: all ease-in 300ms;
    transition-delay: 1300ms;
  }
  #conclusion::after {
    content: '';
    display: block;
    background: url("../images/sp_bg_blue.png") center bottom/100% no-repeat;
    position: absolute;
    bottom: -2px;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 0;
    padding-top: 27%;
  }
  #conclusion .inner {
    width: 84vw;
    margin: 0 auto;
  }
  #conclusion .desc1 span:nth-child(1) {
    transition-delay: 0.04s;
  }
  #conclusion .desc1 span:nth-child(2) {
    transition-delay: 0.08s;
  }
  #conclusion .desc1 span:nth-child(3) {
    transition-delay: 0.12s;
  }
  #conclusion .desc1 span:nth-child(4) {
    transition-delay: 0.16s;
  }
  #conclusion .desc1 span:nth-child(5) {
    transition-delay: 0.2s;
  }
  #conclusion .desc1 span:nth-child(6) {
    transition-delay: 0.24s;
  }
  #conclusion .desc1 span:nth-child(7) {
    transition-delay: 0.28s;
  }
  #conclusion .desc1 span:nth-child(8) {
    transition-delay: 0.32s;
  }
  #conclusion .desc1 span:nth-child(9) {
    transition-delay: 0.36s;
  }
  #conclusion .desc1 span:nth-child(10) {
    transition-delay: 0.4s;
  }
  #conclusion .desc1 span:nth-child(11) {
    transition-delay: 0.44s;
  }
  #conclusion .desc1 span:nth-child(12) {
    transition-delay: 0.48s;
  }
  #conclusion .desc1 span:nth-child(13) {
    transition-delay: 0.52s;
  }
  #conclusion .desc1 span:nth-child(14) {
    transition-delay: 0.56s;
  }
  #conclusion .desc1 span:nth-child(15) {
    transition-delay: 0.6s;
  }
  #conclusion .desc1 span:nth-child(16) {
    transition-delay: 0.64s;
  }
  #conclusion .desc1 span:nth-child(17) {
    transition-delay: 0.68s;
  }
  #conclusion .desc1 span:nth-child(18) {
    transition-delay: 0.72s;
  }
  #conclusion .desc1 span:nth-child(19) {
    transition-delay: 0.76s;
  }
  #conclusion .desc1 span:nth-child(20) {
    transition-delay: 0.8s;
  }
  #conclusion .desc2 {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    transition-delay: 800ms;
    margin-bottom: 0;
  }
  #conclusion .desc3 {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    transition-delay: 1100ms;
    padding-top: 6vw;
  }
  #conclusion .desc4 {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    margin-bottom: 30px;
    transition-delay: 1400ms;
  }
  #conclusion .desc5 {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    transition: all cubic-bezier(0.65, 0, 0.35, 1) 500ms;
  }
  #conclusion .desc5 span:nth-child(1) {
    transition-delay: 1.84s;
  }
  #conclusion .desc5 span:nth-child(2) {
    transition-delay: 1.88s;
  }
  #conclusion .desc5 span:nth-child(3) {
    transition-delay: 1.92s;
  }
  #conclusion .desc5 span:nth-child(4) {
    transition-delay: 1.96s;
  }
  #conclusion .desc5 span:nth-child(5) {
    transition-delay: 2s;
  }
  #conclusion .desc5 span:nth-child(6) {
    transition-delay: 2.04s;
  }
  #conclusion .desc5 span:nth-child(7) {
    transition-delay: 2.08s;
  }
  #conclusion .desc5 span:nth-child(8) {
    transition-delay: 2.12s;
  }
  #conclusion .desc5 span:nth-child(9) {
    transition-delay: 2.16s;
  }
  #conclusion .desc5 span:nth-child(10) {
    transition-delay: 2.2s;
  }
  #conclusion .desc5 span:nth-child(11) {
    transition-delay: 2.24s;
  }
  #conclusion .desc5 span:nth-child(12) {
    transition-delay: 2.28s;
  }
  #conclusion .desc5 span:nth-child(13) {
    transition-delay: 2.32s;
  }
  #conclusion .desc5 span:nth-child(14) {
    transition-delay: 2.36s;
  }
  #conclusion .desc5 span:nth-child(15) {
    transition-delay: 2.4s;
  }
  #conclusion .desc5 span:nth-child(16) {
    transition-delay: 2.44s;
  }
  #conclusion .desc5 span:nth-child(17) {
    transition-delay: 2.48s;
  }
  #conclusion .desc5 span:nth-child(18) {
    transition-delay: 2.52s;
  }
  #conclusion .desc5 span:nth-child(19) {
    transition-delay: 2.56s;
  }
  #conclusion .desc5 span:nth-child(20) {
    transition-delay: 2.6s;
  }
  #conclusion .desc6 {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    transition: all cubic-bezier(0.65, 0, 0.35, 1) 500ms;
    transition-delay: 2800ms;
    margin-bottom: 6vw;
  }
  #conclusion .image {
    opacity: 0;
    transition: all ease-in 300ms;
    transition-delay: 3100ms;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  #conclusion .strong1 {
    font-size: 5.06667vw;
  }
  #conclusion .strong2 {
    font-size: 4.8vw;
  }
  #conclusion .strong3 {
    font-size: 5.06667vw;
  }
  #conclusion .strong3.show::after {
    width: 100%;
  }
  #conclusion .acce1 {
    position: relative;
    display: inline-block;
  }
  #conclusion .acce1::after {
    content: '';
    display: block;
    position: absolute;
    top: 6.13333vw;
    right: 2vw;
    width: 4.66667vw;
    height: 3.33333vw;
    background: url("../images/conclusion_acce1.svg") center center/100% no-repeat;
    opacity: 0;
    transition-delay: 1800ms;
  }
  #conclusion .acce2 {
    position: relative;
    display: inline-block;
    padding-bottom: 1.86667vw;
  }
  #conclusion .acce2::after {
    opacity: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    display: block;
    width: 100%;
    height: 0.53333vw;
    background-color: #f9bf1c;
    transition: all linear 800ms;
    transition-delay: 2600ms;
  }
  #conclusion .image3 {
    width: 78.66667vw;
    margin: 0 auto;
  }

  #register.show .animate_fade {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  #register .title {
    width: 61.73333vw;
    text-align: center;
    margin: 0 auto 7.33333vw;
  }
  #register .list {
    display: flex;
    justify-content: space-between;
    margin: 0 auto auto;
    transition-delay: 300ms;
  }
  #register .list .item {
    position: relative;
    margin-right: 25.33333vw;
    margin-left: 25.33333vw;
  }
  #register .slide {
    padding-bottom: 9.33333vw;
    margin: 0 auto;
  }
  #register .slide .list {
    display: flex;
    justify-content: center;
  }
  #register .slide .slick-dotted.slick-slider {
    margin-bottom: 0;
  }
  #register .slide .slick-prev, #register .slide .slick-next {
    width: 12.4vw;
    height: 6.93333vw;
    background: url("../images/arrow_blue.svg") center center/100% no-repeat;
    top: 40%;
    z-index: 1;
  }
  #register .slide .slick-next {
    right: 5.06667vw;
    -webkit-transform: translate(0, 0) rotate(-90deg);
            transform: translate(0, 0) rotate(-90deg);
  }
  #register .slide .slick-prev {
    left: 5.06667vw;
    -webkit-transform: translate(0, 0) rotate(90deg);
            transform: translate(0, 0) rotate(90deg);
  }
  #register .slide .slick-next:before {
    content: '';
  }
  #register .slide .slick-prev:before {
    content: '';
  }
  #register .slide .slick-disabled {
    display: none !important;
  }
  #register .note {
    position: relative;
    width: 84vw;
    margin: 0 auto;
    font-size: 3.46667vw;
    line-height: 1.5;
    background-color: #fff;
    border-radius: 2.66667vw;
    padding: 4vw 6.66667vw 2.66667vw 13.33333vw;
    margin: 0 auto 10.66667vw;
    transition-delay: 900ms;
  }
  #register .note::before {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    left: 5.33333vw;
    content: '';
    display: block;
    width: 5.33333vw;
    height: 5.33333vw;
    background: url("../images/register_check.svg") center center/100% no-repeat;
  }
  #register .chara {
    width: 30.8vw;
    bottom: 60vw;
    right: 8vw;
  }
  #register .dl {
    position: relative;
    width: 78.66667vw;
    margin: 0 auto;
    transition-delay: 1200ms;
    z-index: 1;
  }
  #register .dl .name {
    font-size: 3.46667vw;
    font-weight: bold;
    text-align: center;
    margin-bottom: 5.33333vw;
  }
  #register .dl .links {
    display: flex;
    justify-content: space-between;
  }
  #register .dl .dl_bnr {
    position: relative;
    z-index: 10;
    width: 38vw;
  }
  #register .dl .dl_bnr a {
    display: block;
  }

  #footer {
    background-color: #3ad9ec;
    padding: 8vw 0 18.66667vw;
  }
  #footer .copyright {
    display: block;
    font-size: 2.66667vw;
    line-height: 1;
    text-align: center;
  }

  #pagetop {
    margin-bottom: 13.33333vw;
  }
  #pagetop a {
    display: block;
    width: 9.33333vw;
    margin: 0 auto 3.33333vw;
    transition: all linear 200ms;
  }
  #pagetop a:hover {
    opacity: .8;
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
  #pagetop span {
    display: block;
    width: 32.26667vw;
    margin: 0 auto;
  }

  #follow {
    display: none;
    width: 26.66667vw;
    position: fixed;
    bottom: 2.66667vw;
    right: 2.66667vw;
    z-index: 100;
  }
}