@charset "UTF-8";
html {
  line-height: 1;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", YuGothic, "Yu Gothic", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
  font-size: 16px;
  color: #595757;
  word-wrap: break-word;
  font-weight: 400; }
  html * {
    font-weight: inherit;
    box-sizing: border-box; }

a, a * {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

img {
  width: 100%;
  height: auto; }
  img[src$=".svg"] {
    max-width: 100%; }

/*font
-----------------------------------------------------------------------------*/
.josefin {
  font-family: "'Josefin Sans', sans-serif"; }

.fw_regular {
  font-weight: 400; }

.fw_medium {
  font-weight: 500; }

.fw_bold {
  font-weight: 700; }

.fw_semibold {
  font-weight: 600; }

.fw_black {
  font-weight: 900; }

.fs_italic {
  font-style: italic; }

/*PC 共通
-----------------------------------------------------------------------------*/
@media print, screen and (min-width: 768px) {
  #page {
    overflow-x: hidden;
    min-height: 100vh; }

  .preload *:not(.loading_copy) {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important; }

  .sp {
    display: none; }

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

  .flex_box, .flex_box_pc {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap; }

  a {
    outline: none; }
    a:focus {
      outline: none; } }
@media print, screen and (min-width: 768px) and (max-width: 1500px) {
  html {
    font-size: 1.0666666667vw; } }
/*--------------------------endPC--------------------------------*/
/*SP共通
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
  html {
    font-size: 3.5vw; }

  .inner {
    width: 100%;
    margin: auto; }

  .pc {
    display: none; }

  .flex_box, .flex_box_sp {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap; } }
/*--------------------------endSP--------------------------------*/
/*scroll_btn_wrap
-----------------------------------------------------------------------------*/
.scroll_btn_wrap {
  position: absolute;
  color: #5db9c2;
  letter-spacing: 0.1em; }
  .scroll_btn_wrap .scroll_btn span {
    writing-mode: tb-rl; }
  @media print, screen and (min-width: 768px) {
    .scroll_btn_wrap {
      right: 2.75rem;
      font-size: 0.75rem; }
      .scroll_btn_wrap .scroll_btn:hover {
        opacity: 0.6; } }
  @media only screen and (max-width: 767px) {
    .scroll_btn_wrap {
      font-size: 0.6923076923rem;
      right: 3.4666666667vw; } }

/*btn
-----------------------------------------------------------------------------*/
.btn {
  display: block;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-align: center;
  color: #fff;
  position: relative;
  background: #5db9c2; }
  .btn::after {
    position: absolute;
    top: 50%;
    z-index: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    content: "";
    display: block;
    background-size: 100% 100%;
    background-image: url("../img/vecter01.png");
    background-repeat: no-repeat; }
  @media print, screen and (min-width: 768px) {
    .btn {
      width: 19.375rem;
      font-size: 0.875rem;
      padding: 1.25rem 0 1.375rem;
      -webkit-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
      -ms-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
      transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
      z-index: 0; }
      .btn::after {
        -webkit-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
        -ms-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
        transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
        right: 2.625rem;
        width: 1.75rem;
        height: 0.4375rem; }
      .btn::before {
        -webkit-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
        -ms-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
        transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
        z-index: -1;
        content: "";
        display: block;
        width: 102%;
        height: 102%;
        background-color: #fff;
        position: absolute;
        top: -1%;
        left: -1%;
        -webkit-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
        -ms-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
        transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
        -webkit-transform: scale(0, 1);
        -ms-transform: scale(0, 1);
        transform: scale(0, 1);
        transform-origin: 0 50%; }
      .btn:hover {
        color: #5db9c2; }
        .btn:hover::after {
          right: 1.3125rem; }
        .btn:hover::before {
          -webkit-transform: scale(0.784, 1);
          -ms-transform: scale(0.784, 1);
          transform: scale(0.784, 1); } }
  @media only screen and (max-width: 767px) {
    .btn {
      width: 60vw;
      font-size: 0.9615384615rem;
      padding: 4vw 0; }
      .btn::after {
        right: 4.5333333333vw;
        width: 5.6682266667vw;
        height: 1.4046266667vw; } }

/*header
-----------------------------------------------------------------------------*/
header {
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; }
  header .h_nav_list .jp {
    letter-spacing: 0.1em; }
  header .h_nav_list .en {
    letter-spacing: 0.1em; }
  header .form_btn a {
    text-align: center;
    display: block;
    background: #5db9c2;
    color: #fff; }
  header .form_btn .btn_txt {
    letter-spacing: 0.1em; }
  header .form_btn .btn_subtxt {
    letter-spacing: 0.1em; }
  @media print, screen and (min-width: 768px) {
    header {
      -webkit-align-items: flex-start;
      align-items: flex-start;
      padding-top: 3.125rem;
      height: 9.75rem;
      -webkit-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
      -ms-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
      transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s; }
      header.scrollActive {
        padding-top: 1.5625rem;
        height: 6.625rem;
        background: rgba(255, 255, 255, 0.9); }
      header .logo {
        width: 13.0625rem;
        margin-left: 3.5714285714%; }
        header .logo a:hover {
          opacity: 0.7; }
      header .h_nav_list {
        margin-left: auto;
        margin-right: 0.125rem; }
        header .h_nav_list li {
          margin-right: 1px;
          position: relative; }
          header .h_nav_list li:not(:last-child)::after {
            content: "";
            display: block;
            width: 1px;
            height: 1.875rem;
            background-color: #595757;
            position: absolute;
            top: 50%;
            left: 100%;
            z-index: 0;
            -webkit-transform: translate(0, -50%);
            -ms-transform: translate(0, -50%);
            transform: translate(0, -50%); }
        header .h_nav_list a {
          display: -webkit-flex;
          display: flex;
          -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
          -webkit-flex-direction: column;
          flex-direction: column;
          -webkit-justify-content: center;
          justify-content: center;
          position: relative;
          padding: 0 2.5rem;
          height: 100%;
          -webkit-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
          -ms-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
          transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s; }
          header .h_nav_list a::before {
            z-index: -1;
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            background-color: #5db9c2;
            position: absolute;
            top: 0;
            left: 0;
            -webkit-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
            -ms-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
            transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
            -webkit-transform: scale(0, 1);
            -ms-transform: scale(0, 1);
            transform: scale(0, 1); }
          header .h_nav_list a:hover {
            color: #fff; }
            header .h_nav_list a:hover::before {
              -webkit-transform: scale(1, 1);
              -ms-transform: scale(1, 1);
              transform: scale(1, 1); }
        header .h_nav_list .jp {
          line-height: 1.3125;
          text-align: justify; }
        header .h_nav_list .en {
          margin-top: 0.6875rem;
          font-size: 0.75rem;
          color: #009fac;
          position: absolute;
          top: 100%;
          left: 2.5rem; }
      header .form_btn {
        width: 17.8571428571%; }
        header .form_btn a {
          border: 2px solid #5db9c2;
          padding: 0.625rem 10.8% 0.5625rem 0;
          position: relative;
          overflow: hidden;
          z-index: 0;
          -webkit-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
          -ms-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
          transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s; }
          header .form_btn a::after {
            -webkit-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
            -ms-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
            transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
            position: absolute;
            top: 50%;
            right: 1.375rem;
            z-index: 0;
            -webkit-transform: translate(0, -50%);
            -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
            content: "";
            display: block;
            width: 1.75rem;
            height: 0.4375rem;
            background-size: 100% 100%;
            background-image: url("../img/vecter01.png"); }
          header .form_btn a::before {
            z-index: -1;
            content: "";
            display: block;
            width: 102%;
            height: 102%;
            background-color: #fff;
            position: absolute;
            top: -1%;
            left: -1%;
            -webkit-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
            -ms-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
            transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
            -webkit-transform: scale(0, 1);
            -ms-transform: scale(0, 1);
            transform: scale(0, 1);
            transform-origin: 0 50%; }
          header .form_btn a:hover {
            color: #5db9c2; }
            header .form_btn a:hover::after {
              right: 0.6875rem; }
            header .form_btn a:hover::before {
              -webkit-transform: scale(0.784, 1);
              -ms-transform: scale(0.784, 1);
              transform: scale(0.784, 1); }
        header .form_btn .btn_txt {
          font-size: 0.875rem;
          margin-bottom: 0.5rem; }
        header .form_btn .btn_subtxt {
          font-size: 0.6875rem; } }
  @media only screen and (max-width: 767px) {
    header {
      -webkit-align-items: center;
      align-items: center;
      height: 16vw; }
      header .logo {
        width: 27.8666666667vw;
        margin-left: 5.3333333333vw; }
      header .h_nav_btn {
        order: 1;
        background: #009fac;
        width: 16vw;
        height: 100%;
        margin-left: 0.4vw;
        padding: 4.1333333333vw 4.9333333333vw 7.4666666667vw;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-flex-direction: column;
        flex-direction: column;
        position: relative;
        z-index: 2; }
        header .h_nav_btn span {
          -webkit-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
          -ms-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
          transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
          width: 100%;
          height: 2px;
          background: #fff; }
          header .h_nav_btn span:first-child {
            transform-origin: 0 50%; }
          header .h_nav_btn span:nth-child(2) {
            -webkit-transform: translate(0, 0) rotate(0deg) scale(0.7777777778, 1) skew(0deg, 0deg);
            -ms-transform: translate(0, 0) rotate(0deg) scale(0.7777777778, 1) skew(0deg, 0deg);
            transform: translate(0, 0) rotate(0deg) scale(0.7777777778, 1) skew(0deg, 0deg);
            transform-origin: 0 50%; }
          header .h_nav_btn span:nth-child(3) {
            transform-origin: 0 50%;
            -webkit-transform: translate(0, 0) rotate(0deg) scale(0.5555555556, 1) skew(0deg, 0deg);
            -ms-transform: translate(0, 0) rotate(0deg) scale(0.5555555556, 1) skew(0deg, 0deg);
            transform: translate(0, 0) rotate(0deg) scale(0.5555555556, 1) skew(0deg, 0deg); }
        header .h_nav_btn::after {
          content: "MENU";
          font-family: "'Josefin Sans', sans-serif";
          font-weight: 600;
          color: #fff;
          font-size: 0.7692307692rem;
          width: 100%;
          text-align: center;
          position: absolute;
          left: 0;
          bottom: 2.9333333333vw; }
        header .h_nav_btn.active span:first-child {
          -webkit-transform: translate(6.6666666667%, -50%) rotate(45deg) scale(1, 1) skew(0deg, 0deg);
          -ms-transform: translate(6.6666666667%, -50%) rotate(45deg) scale(1, 1) skew(0deg, 0deg);
          transform: translate(6.6666666667%, -50%) rotate(45deg) scale(1, 1) skew(0deg, 0deg); }
        header .h_nav_btn.active span:nth-child(2) {
          -webkit-transform: translate(0, 0) rotate(0deg) scale(0, 1) skew(0deg, 0deg);
          -ms-transform: translate(0, 0) rotate(0deg) scale(0, 1) skew(0deg, 0deg);
          transform: translate(0, 0) rotate(0deg) scale(0, 1) skew(0deg, 0deg); }
        header .h_nav_btn.active span:nth-child(3) {
          -webkit-transform: translate(6.6666666667%, 50%) rotate(-45deg) scale(1, 1) skew(0deg, 0deg);
          -ms-transform: translate(6.6666666667%, 50%) rotate(-45deg) scale(1, 1) skew(0deg, 0deg);
          transform: translate(6.6666666667%, 50%) rotate(-45deg) scale(1, 1) skew(0deg, 0deg); }
        header .h_nav_btn.active::after {
          content: "CLOSE"; }
      header .h_nav_list {
        width: 89.3333333333vw;
        padding-top: 34.1333333333vw;
        background: #009fac;
        height: 100vh;
        overflow: auto;
        position: absolute;
        top: 0;
        right: 0;
        color: #fff;
        z-index: 1;
        -webkit-transform: translate(100%, 0);
        -ms-transform: translate(100%, 0);
        transform: translate(100%, 0);
        -webkit-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
        -ms-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
        transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s; }
        header .h_nav_list li {
          padding: 6.4vw 0 7.0666666667vw;
          width: 68vw;
          margin: auto; }
          header .h_nav_list li:not(:last-child) {
            border-bottom: 1px solid #fff; }
        header .h_nav_list a {
          display: block; }
        header .h_nav_list .jp {
          font-size: 1.1538461538rem;
          line-height: 1.3333333333;
          margin-top: calc(0px - (((1em*1.3333333333) - 1em)/2));
          margin-bottom: calc(3.2vw - (((1em*1.3333333333) - 1em)/2)); }
        header .h_nav_list .en {
          font-size: 0.8846153846rem; }
        header .h_nav_list.active {
          -webkit-transform: translate(0, 0);
          -ms-transform: translate(0, 0);
          transform: translate(0, 0); }
      header .form_btn {
        position: relative;
        width: 43.3333333333vw;
        margin-left: auto;
        z-index: 0; }
        header .form_btn a {
          padding: 4.1333333333vw 0 3.2vw; }
        header .form_btn .btn_txt {
          font-size: 1.1538461538rem;
          margin-bottom: 2vw; }
        header .form_btn .btn_subtxt {
          font-size: 0.7692307692rem; } }

/*main
-----------------------------------------------------------------------------*/
@media print, screen and (min-width: 768px) {
  #main {
    margin-top: 9.75rem; } }
@media only screen and (max-width: 767px) {
  #main {
    margin-top: 16vw; } }

/*content_wrap
-----------------------------------------------------------------------------*/
#content_wrap {
  margin-top: -6.625rem;
  padding-top: 6.625rem;
  position: relative; }

/*footer
-----------------------------------------------------------------------------*/
footer {
  background: #5db9c2;
  color: #fff;
  position: relative; }
  footer .copy {
    letter-spacing: 0.1em; }
  footer .scroll_btn_wrap {
    bottom: 100%; }
  @media print, screen and (min-width: 768px) {
    footer {
      padding: 6.25rem 0; }
      footer .inner {
        -webkit-justify-content: space-between;
        justify-content: space-between; }
      footer .logo_box {
        width: 25%;
        position: relative; }
      footer .f_logo {
        width: 83.6%; }
        footer .f_logo a:hover {
          opacity: 0.7; }
      footer .copy {
        font-size: 0.6875rem;
        position: absolute;
        bottom: 0;
        left: 0; }
      footer .f_nav {
        order: 1;
        width: 53.5%;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        font-size: 0.875rem;
        letter-spacing: 0.1em; }
        footer .f_nav ul {
          line-height: 2.8571428571;
          margin-top: calc(0px - (((1em*2.8571428571) - 1em)/2));
          margin-bottom: calc(0px - (((1em*2.8571428571) - 1em)/2)); }
        footer .f_nav a {
          display: inline-block;
          padding-left: 2.5rem;
          position: relative;
          -webkit-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
          -ms-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
          transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
          z-index: 0; }
          footer .f_nav a::after {
            -webkit-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
            -ms-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
            transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
            position: absolute;
            top: 50%;
            left: 0;
            z-index: 0;
            -webkit-transform: translate(0, -50%);
            -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
            content: "";
            display: block;
            width: 1.625rem;
            height: 2px;
            background-color: #fff; }
          footer .f_nav a::before {
            -webkit-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
            -ms-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
            transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            background-color: #fff;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            -webkit-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
            -ms-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
            transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
            -webkit-transform: scale(0, 1);
            -ms-transform: scale(0, 1);
            transform: scale(0, 1);
            transform-origin: 0 50%; }
          footer .f_nav a:hover {
            color: #5db9c2; }
            footer .f_nav a:hover::after {
              background: #5db9c2; }
            footer .f_nav a:hover::before {
              -webkit-transform: scale(1, 1);
              -ms-transform: scale(1, 1);
              transform: scale(1, 1); }
      footer .scroll_btn_wrap {
        -webkit-transform: translate(0, -2.3125rem);
        -ms-transform: translate(0, -2.3125rem);
        transform: translate(0, -2.3125rem); }
      footer .scroll_btn {
        position: relative;
        padding-bottom: 4.6875rem; }
        footer .scroll_btn::before, footer .scroll_btn::after {
          content: "";
          display: block;
          width: 1px;
          position: absolute;
          left: 50%;
          z-index: 0;
          -webkit-transform: translate(-50%, 0);
          -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0); }
        footer .scroll_btn::before {
          height: 4.6875rem;
          background-color: #5db9c2;
          bottom: 0; }
        footer .scroll_btn::after {
          height: 2.3125rem;
          background-color: #fff;
          bottom: 2.375rem;
          -webkit-animation: scroll_animepc 1.6s ease-in-out 0s infinite reverse forwards;
          -ms-animation: scroll_animepc 1.6s ease-in-out 0s infinite reverse forwards;
          animation: scroll_animepc 1.6s ease-in-out 0s infinite reverse forwards; }
    @keyframes scroll_animepc {
      0% {
        height: 0;
        bottom: 4.6875rem; }
      70% {
        height: 3.75rem; }
      80% {
        bottom: 0; }
      100% {
        height: 0;
        bottom: 0; } } }
  @media only screen and (max-width: 767px) {
    footer {
      padding: 0 0 4.9333333333vw; }
      footer .inner {
        width: 100%; }
      footer .f_nav {
        background: #62c3cc;
        padding: 13.3333333333vw 10.6666666667vw;
        -webkit-justify-content: space-between;
        justify-content: space-between; }
        footer .f_nav ul {
          display: -webkit-flex;
          display: flex;
          -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
          line-height: 1.4285714286;
          margin-top: calc(0px - (((1em*1.4285714286) - 1em)/2));
          margin-bottom: calc(0px - (((1em*1.4285714286) - 1em)/2));
          height: 49.0666666667vw;
          -webkit-flex-direction: column;
          flex-direction: column;
          -webkit-justify-content: space-between;
          justify-content: space-between;
          /*お問い合わせ完成後削除*/
          /*お問い合わせ完成後削除 ここまで*/ }
          footer .f_nav ul:last-of-type {
            padding-bottom: 2em; }
      footer .logo_box {
        text-align: center;
        padding-top: 4.9333333333vw; }
      footer .f_logo {
        width: 27.8666666667vw;
        margin: 0 auto 3.6vw; }
      footer .copy {
        font-size: 0.5769230769rem; }
      footer .scroll_btn_wrap {
        -webkit-transform: translate(0, -6vw);
        -ms-transform: translate(0, -6vw);
        transform: translate(0, -6vw); }
      footer .scroll_btn {
        position: relative;
        padding-bottom: 12vw; }
        footer .scroll_btn::before, footer .scroll_btn::after {
          content: "";
          display: block;
          width: 1px;
          position: absolute;
          left: 50%;
          z-index: 0;
          -webkit-transform: translate(-50%, 0);
          -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0); }
        footer .scroll_btn::before {
          height: 12vw;
          background-color: #5db9c2;
          bottom: 0; }
        footer .scroll_btn::after {
          height: 6vw;
          background-color: #fff;
          bottom: 6vw;
          -webkit-animation: scroll_animesp 1.6s ease-in-out 0s infinite reverse forwards;
          -ms-animation: scroll_animesp 1.6s ease-in-out 0s infinite reverse forwards;
          animation: scroll_animesp 1.6s ease-in-out 0s infinite reverse forwards; }
    @keyframes scroll_animesp {
      0% {
        height: 0;
        bottom: 12vw; }
      70% {
        height: 9.6vw; }
      80% {
        bottom: 0; }
      100% {
        height: 0;
        bottom: 0; } } }

/*js・アニメーション
-----------------------------------------------------------------------------*/
/*js・アニメーション
-----------------------------------------------------------------------------*/
.tran, .scrollListItem, .scrollItem, .scrollListAll > * {
  -webkit-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
  -ms-transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s;
  transition: all 0.6s cubic-bezier(0.66, 0.01, 0.67, 0.71) 0s; }

.fadein {
  opacity: 0; }
  .fadein.scrollActive {
    opacity: 1; }

.fadeout {
  opacity: 1; }
  .fadeout.scrollActive {
    opacity: 0; }

.fadeTop {
  -webkit-transform: translate(0, 3.125rem);
  -ms-transform: translate(0, 3.125rem);
  transform: translate(0, 3.125rem); }
  .fadeTop.scrollActive {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0); }

.fadeBottom {
  -webkit-transform: translate(0, -3.125rem);
  -ms-transform: translate(0, -3.125rem);
  transform: translate(0, -3.125rem); }
  .fadeBottom.scrollActive {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0); }

.fadeRight {
  -webkit-transform: translate(-3.125rem, 0);
  -ms-transform: translate(-3.125rem, 0);
  transform: translate(-3.125rem, 0); }
  .fadeRight.scrollActive {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0); }

.fadeLeft {
  -webkit-transform: translate(3.125rem, 0);
  -ms-transform: translate(3.125rem, 0);
  transform: translate(3.125rem, 0); }
  .fadeLeft.scrollActive {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0); }

.scaleUp {
  display: block;
  -webkit-transform: scale(0.97, 0.97);
  -ms-transform: scale(0.97, 0.97);
  transform: scale(0.97, 0.97); }
  .scaleUp.scrollActive {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1); }

.scaleUp02 {
  display: block;
  -webkit-transform: scale(0.8, 0.8);
  -ms-transform: scale(0.8, 0.8);
  transform: scale(0.8, 0.8); }
  .scaleUp02.scrollActive {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1); }

.scaleUp00 {
  -webkit-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  transform: scale(0, 0); }
  .scaleUp00.scrollActive {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1); }

.scaleDown {
  -webkit-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1); }
  .scaleDown.scrollActive {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1); }

.panelX {
  -webkit-transform: scale(0, 1);
  -ms-transform: scale(0, 1);
  transform: scale(0, 1); }
  .panelX.scrollActive {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1); }

.panel {
  -webkit-transform: translate(0, 1.25rem) rotate(0deg) scale(0, 0.9) skew(0deg, 7.5deg);
  -ms-transform: translate(0, 1.25rem) rotate(0deg) scale(0, 0.9) skew(0deg, 7.5deg);
  transform: translate(0, 1.25rem) rotate(0deg) scale(0, 0.9) skew(0deg, 7.5deg); }
  .panel.scrollActive {
    -webkit-transform: translate(0, 0) rotate(0deg) scale(1, 1) skew(0deg, 0deg);
    -ms-transform: translate(0, 0) rotate(0deg) scale(1, 1) skew(0deg, 0deg);
    transform: translate(0, 0) rotate(0deg) scale(1, 1) skew(0deg, 0deg); }