/*------------------------------------------------------------------------------------------
*
*
    common_sp.css
*
*
------------------------------------------------------------------------------------------ */
@media screen and (max-width: 750px) {
  /*------------------------------------------------------------------------------------------
  *
  *
      max-width : 640px
  *
  *
  ------------------------------------------------------------------------------------------ */
  body {
    width: 100%;
    z-index: 10;
    overflow-x: hidden; }

  /* --------------------------------------------------
  *
      common settings sp
  *
  -------------------------------------------------- */
  body {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; }

  br.sp {
    display: inherit; }

  img.pc {
    display: none; }

  .switch_pc,
  .switch_pc * {
    display: none; }

  /* --------------------------------------------------
  * 
      transition
  *
  -------------------------------------------------- */
  #wrap {
    width: 100%;
    overflow: hidden;
    opacity: 0; }

  .load #wrap {
    opacity: 1;
    transition: opacity .8s ease .4s; }

  header .badge {
    opacity: 1;
    transition: opacity, transform;
    transition-duration: .25s;
    transform: translateY(0px); }
  header .badge_2 {
    opacity: 0;
    transition: opacity, transform;
    transition-duration: .25s;
    transform: translateY(-10px); }

  .n header .badge {
    opacity: 0;
    transform: translateY(-10px) scale(0.85); }
  .n header .badge_2 {
    opacity: 1;
    transform: translateY(0px);
    transition-delay: .35s; }

  section {
    min-width: 100vw;
    height: 100vh;
    transform: translate3d(0, 0, 0); }
    section h2 {
      opacity: 0;
      transform: translateY(80px); }
    section h3 {
      opacity: 0; }
    section .desc p {
      opacity: 0;
      transform: translateY(80px); }

  .n-h1 .s01 h2 {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity, transform;
    transition-duration: 2.3s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-delay: .35s; }
  .n-h1 .s01 h3 {
    opacity: 1;
    transition: opacity, transform;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-delay: .35s; }
  .n-h1 .s01 .desc p {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity, transform;
    transition-duration: 1.5s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-delay: .55s; }

  .n-h2 .s02 h2 {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity, transform;
    transition-duration: 2.3s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-delay: .35s; }
  .n-h2 .s02 h3 {
    opacity: 1;
    transition: opacity, transform;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-delay: .35s; }
  .n-h2 .s02 .desc p {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity, transform;
    transition-duration: 1.5s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-delay: .55s; }

  .n-h3 .s03 h2 {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity, transform;
    transition-duration: 2.3s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-delay: .35s; }
  .n-h3 .s03 h3 {
    opacity: 1;
    transition: opacity, transform;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-delay: .35s; }
  .n-h3 .s03 .desc p {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity, transform;
    transition-duration: 1.5s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-delay: .55s; }

  .n-h4 .s04 h2 {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity, transform;
    transition-duration: 2.3s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-delay: .35s; }
  .n-h4 .s04 h3 {
    opacity: 1;
    transition: opacity, transform;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-delay: .35s; }
  .n-h4 .s04 .desc p {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity, transform;
    transition-duration: 1.5s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-delay: .55s; }

  .n-h5 .s05 h2 {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity, transform;
    transition-duration: 2.3s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-delay: .35s; }
  .n-h5 .s05 h3 {
    opacity: 1;
    transition: opacity, transform;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-delay: .35s; }
  .n-h5 .s05 .desc p {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity, transform;
    transition-duration: 1.5s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-delay: .55s; }

  .s00 .img img {
    opacity: 0;
    transform: translateY(-15px);
    transition: transform, opacity;
    transition-duration: .65s;
    transition-delay: 2.6s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .s00 .kv h1 img {
    opacity: 0;
    transform: translateY(0px); }

  .load .s00 .img img {
    opacity: 1;
    transform: translateY(0px); }
  .load .s00 .kv h1 img {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity, transform;
    transition-duration: .45s;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
    .load .s00 .kv h1 img:nth-child(1) {
      transition-delay: 1.12s; }
    .load .s00 .kv h1 img:nth-child(2) {
      transition-delay: 1.24s; }
    .load .s00 .kv h1 img:nth-child(3) {
      transition-delay: 1.36s; }
    .load .s00 .kv h1 img:nth-child(4) {
      transition-delay: 1.48s; }
    .load .s00 .kv h1 img:nth-child(5) {
      transition-delay: 1.6s; }

  .s01:before {
    opacity: 0;
    clip-path: polygon(75% 0, 50% 100%, 100% 100%);
    -webkit-clip-path: polygon(75% 0, 50% 100%, 100% 100%);
    transform: scaleX(0.3); }

  .n-h1 .s01 {
    background-color: #fadf00;
    transition: background;
    transition-duration: 2s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-delay: 1s; }
    .n-h1 .s01 h2:after {
      background-color: #efc205;
      transition: background 2s ease 1s;
      transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
    .n-h1 .s01:before {
      opacity: 1;
      clip-path: polygon(50% 0, 0% 100%, 100% 100%);
      -webkit-clip-path: polygon(50% 0, 0% 100%, 100% 100%);
      transition: clip-path, -webkit-clip-path, opacity, transform;
      transition-duration: .85s;
      transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
      transform: scale(1);
      transition-delay: .65s; }
    .n-h1 .s01 .col_l .img img {
      opacity: 1;
      transition: opacity;
      transition-duration: .85s;
      transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
      transition-delay: .65s; }

  .s02 .col_l {
    transform: translateX(100vw);
    left: 440vw; }

  .n-h2 .s02 .col_l {
    transform: translateX(0px);
    animation-name: HobonichiyobiChairSlide;
    animation-duration: 4s;
    -webkit-animation-name: HobonichiyobiChairSlide;
    -webkit-animation-duration: 4s; }
    .n-h2 .s02 .col_l li:nth-child(odd) img {
      animation-name: HobonichiyobiChairSlideRotate;
      animation-duration: 4s;
      animation-delay: .2s;
      -webkit-animation-name: HobonichiyobiChairSlideRotate;
      -webkit-animation-duration: 4s;
      -webkit-animation-delay: .2s; }
    .n-h2 .s02 .col_l li:nth-child(even) img {
      animation-name: HobonichiyobiChairSlideRotate2;
      animation-duration: 4s;
      animation-delay: .2s;
      -webkit-animation-name: HobonichiyobiChairSlideRotate2;
      -webkit-animation-duration: 4s;
      -webkit-animation-delay: .2s; }

  .s04 .col_l li img {
    transform: translateY(135%); }

  .n-h4 .s04 .col_l li img {
    transition: transform;
    transition-duration: 1.4s;
    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    transform: translateY(0); }
  .n-h4 .s04 .col_l li:nth-child(1) img {
    transition-delay: 0.515s; }
  .n-h4 .s04 .col_l li:nth-child(2) img {
    transition-delay: 0.58s; }
  .n-h4 .s04 .col_l li:nth-child(3) img {
    transition-delay: 0.645s; }
  .n-h4 .s04 .col_l li:nth-child(4) img {
    transition-delay: 0.71s; }
  .n-h4 .s04 .col_l li:nth-child(5) img {
    transition-delay: 0.775s; }
  .n-h4 .s04 .col_l li:nth-child(6) img {
    transition-delay: 0.84s; }
  .n-h4 .s04 .col_l li:nth-child(7) img {
    transition-delay: 0.905s; }
  .n-h4 .s04 .col_l li:nth-child(8) img {
    transition-delay: 0.97s; }
  .n-h4 .s04 .col_l li:nth-child(9) img {
    transition-delay: 1.035s; }
  .n-h4 .s04 .col_l li:nth-child(10) img {
    transition-delay: 1.1s; }

  .s05 .obj li img {
    transform: translateY(110%); }

  .n-h5 .s05 .obj li img {
    transition: transform;
    transition-duration: .85s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translateY(0); }
  .n-h5 .s05 .obj li:nth-child(1) img {
    transition-delay: 0.77s; }
  .n-h5 .s05 .obj li:nth-child(2) img {
    transition-delay: 0.89s; }
  .n-h5 .s05 .obj li:nth-child(3) img {
    transition-delay: 1.01s; }
  .n-h5 .s05 .obj li:nth-child(4) img {
    transition-delay: 1.13s; }
  .n-h5 .s05 .obj li:nth-child(5) img {
    transition-delay: 1.25s; } }
/* -------------------------------------------------- */
/*------------------------------------------------------------------------------------------
*
*
    hobonichiyobi_sp.css
*
*
------------------------------------------------------------------------------------------ */
@media screen and (max-width: 750px) {
  /*------------------------------------------------------------------------------------------
  *
  *
      max-width : 750px
  *
  *
  ------------------------------------------------------------------------------------------ */
  header {
    position: relative;
    z-index: 10; }
    header .badge {
      position: fixed;
      top: 2.6666666667vw;
      left: 2.6666666667vw; }
      header .badge img {
        width: 28.2666666667vw; }
    header .badge_2 {
      opacity: 0;
      position: fixed;
      top: 4vw;
      left: 2.6666666667vw;
      z-index: 15; }
      header .badge_2 img {
        width: auto;
        height: 6.6666666667vw; }
    header .arrow {
      position: fixed;
      top: 2.6666666667vw;
      right: 2.6666666667vw;
      cursor: pointer; }
      header .arrow:after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url(../images/head_badge_arrow.svg);
        background-size: 4.8vw;
        position: absolute;
        top: 0;
        left: 0;
        transition: transform .15s ease;
        transform-origin: top; }
      header .arrow img {
        width: 26.6666666667vw;
        animation-name: pageHeadArrow;
        animation-duration: 2.5s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        -webkit-animation-name: pageHeadArrow;
        -webkit-animation-duration: 2.5s;
        -webkit-animation-fill-mode: forwards;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        cursor: pointer; }
      header .arrow.-hv:after, header .arrow.touch:after {
        transform: translateY(10px) scaleY(0.9); }
    header .page_nav {
      position: fixed;
      bottom: 1.3333333333vw;
      left: 2.6666666667vw; }
      header .page_nav li {
        width: 1.3333333333vw;
        height: 1.3333333333vw;
        display: block;
        background-color: rgba(0, 0, 0, 0.6);
        border-radius: 2.1333333333vw;
        margin-bottom: 2.1333333333vw;
        transition: transform .15s ease;
        cursor: pointer; }
        header .page_nav li:hover, header .page_nav li.on {
          transform: scale(1.65);
          left: 0;
          position: relative; }

  section {
    height: 100vh;
    min-height: 192vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-align: center; }
    section h2 {
      display: inline-block;
      margin-bottom: 5.3333333333vw;
      padding-bottom: 5.3333333333vw;
      font-size: 9.3333333333vw;
      line-height: calc(45em/35);
      text-align: center;
      position: relative; }
      section h2:after {
        content: '';
        width: 70.6666666667vw;
        height: 1.3333333333vw;
        background-color: #fff;
        border-radius: 2.6666666667vw;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%); }
    section .desc p {
      font-size: 3.7333333333vw;
      line-height: calc(24.5em/14);
      margin-bottom: 2em; }
    section.s01 h2:after {
      background-color: #262429; }
    section.s02 h2:after {
      background-color: #223313; }
    section.s03 h2:after {
      background-color: #0c1e44; }
    section.s04 h2:after {
      background-color: #9e2625; }
    section .inner {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column; }
    section .col_l {
      width: 100%;
      height: 50%;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      bottom: 50%;
      left: 0;
      box-sizing: border-box; }
    section .col_r {
      width: 100%;
      height: 50%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-direction: column;
      position: absolute;
      top: 50%;
      left: 0;
      white-space: nowrap;
      box-sizing: border-box; }

  .s00 {
    min-height: 100%;
    background-color: #f0f0f0; }
    .s00 .img {
      width: 100%;
      text-align: center;
      position: absolute;
      bottom: 22.6666666667vw;
      left: 1.3333333333vw; }
      .s00 .img img {
        width: 88.5333333333vw; }
    .s00 .kv {
      width: 80vw;
      height: 46.1333333333vw;
      text-align: center;
      position: absolute;
      top: 45%;
      left: 50.5%;
      transform: translateY(-26%) translateX(-50%) scale(1.4); }
      .s00 .kv h1 {
        width: 80vw;
        height: 46.1333333333vw;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 4; }
        .s00 .kv h1 img {
          width: 89%;
          position: absolute;
          top: 0;
          left: 5.4%; }
      .s00 .kv .bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1; }
        .s00 .kv .bg img {
          width: 89%; }
    .s00 .circ {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 3;
      transform: scale(0.4); }
      .s00 .circ li {
        position: relative; }
        .s00 .circ li.c1 {
          transform: translateX(82.6666666667vw) translateY(-2.6666666667vw);
          z-index: 3; }
        .s00 .circ li.c2 {
          transform: translateX(106.6666666667vw) translateY(-2.6666666667vw);
          z-index: 2; }
        .s00 .circ li.c3 {
          transform: translateX(129.3333333333vw) translateY(-2.6666666667vw);
          z-index: 1; }
        .s00 .circ li svg {
          position: absolute;
          top: 0;
          left: 0; }
        .s00 .circ li .c_bg {
          width: 29.3333333333vw; }
        .s00 .circ li .msk {
          width: 32vw;
          height: 32vw;
          transform: rotate(-45deg) scale(-1, 1); }
          .s00 .circ li .msk circle {
            fill: transparent;
            stroke: #f1f1f1;
            stroke-width: 30;
            animation-name: mskCircleAnim;
            animation-duration: 1.8s;
            animation-fill-mode: forwards;
            animation-iteration-count: 1;
            animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
            -webkit-animation-name: mskCircleAnim;
            -webkit-animation-duration: 1.8s;
            -webkit-animation-fill-mode: forwards;
            -webkit-animation-iteration-count: 1;
            -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
            transform: translateY(-1.0666666667vw); }
        .s00 .circ li.c1 .msk circle {
          animation-delay: 1.6s; }
        .s00 .circ li.c2 .msk circle {
          animation-delay: 1.82s; }
        .s00 .circ li.c3 .msk circle {
          animation-delay: 1.94s; }
        .s00 .circ li.c1 .msk circle {
          -webkit-animation-delay: 1.6s; }
        .s00 .circ li.c2 .msk circle {
          -webkit-animation-delay: 1.82s; }
        .s00 .circ li.c3 .msk circle {
          -webkit-animation-delay: 1.94s; }

  .s01 {
    min-height: 205.3333333333vw;
    overflow: hidden;
    background-color: #5c5a5f;
    position: relative; }
    .s01:before {
      opacity: 0;
      content: '';
      width: 145%;
      height: calc(50% + 5.5vw);
      background-color: #ffea58;
      display: block;
      position: absolute;
      top: -10.6666666667vw;
      left: -10%;
      z-index: 0;
      clip-path: polygon(50% 0, 0% 100%, 100% 100%);
      -webkit-clip-path: polygon(50% 0, 0% 100%, 100% 100%); }
    .s01 .col_l {
      overflow: hidden;
      padding-top: 0vw;
      top: -5.0666666667vw; }
      .s01 .col_l .img {
        bottom: -25.3333333333vw;
        left: 5.3333333333vw;
        position: relative; }
        .s01 .col_l .img img {
          width: 62.6666666667vw;
          opacity: .2; }
    .s01 .col_r {
      padding-top: 6.6666666667vw; }

  .s02 {
    overflow: hidden;
    background-color: #506f35;
    position: relative; }
    .s02 .col_l {
      padding-top: 16vw; }
      .s02 .col_l ul {
        width: 1000vw;
        padding-left: 2.6666666667vw;
        display: flex;
        position: relative;
        left: 0;
        box-sizing: border-box; }
        .s02 .col_l ul li {
          width: 26.6666666667vw;
          margin-right: 2.6666666667vw;
          position: relative; }
          .s02 .col_l ul li:nth-child(odd) {
            top: 3.2vw; }
          .s02 .col_l ul li img {
            width: 26.6666666667vw; }
    .s02 .col_r {
      padding-top: 13.3333333333vw; }
      .s02 .col_r h2 {
        color: #fff; }
      .s02 .col_r .desc p {
        color: #fff; }

  .s03 {
    background-color: #274d77; }
    .s03 .col_l {
      padding-top: 16vw; }
      .s03 .col_l .img .bg {
        width: 96vw;
        position: relative; }
        .s03 .col_l .img .bg img {
          width: 100%; }
    .s03 .col_r {
      padding-top: 14.6666666667vw; }
      .s03 .col_r h2 {
        color: #fff; }
      .s03 .col_r .desc p {
        color: #fff; }

  .s04 {
    min-height: 237.3333333333vw;
    overflow: hidden;
    background-color: #d05960;
    position: relative; }
    .s04 .col_l {
      padding-top: 0vw;
      overflow: hidden;
      transform: translate3d(0, 0, 0); }
      .s04 .col_l ul li {
        width: 25.3333333333vw;
        height: 53.6vw;
        overflow: hidden;
        position: absolute;
        top: 100%;
        left: 0; }
        .s04 .col_l ul li:nth-child(9) {
          top: -22.6666666667vw;
          left: 2.6666666667vw;
          z-index: 1; }
        .s04 .col_l ul li:nth-child(4) {
          top: -21.3333333333vw;
          left: 64vw;
          z-index: 2; }
        .s04 .col_l ul li:nth-child(3) {
          top: -2.6666666667vw;
          left: 26.6666666667vw;
          z-index: 3; }
        .s04 .col_l ul li:nth-child(8) {
          top: 8vw;
          left: 82.6666666667vw;
          z-index: 4; }
        .s04 .col_l ul li:nth-child(2) {
          top: 21.3333333333vw;
          left: -14.1333333333vw;
          z-index: 5; }
        .s04 .col_l ul li:nth-child(1) {
          top: 26.6666666667vw;
          left: 42.6666666667vw;
          z-index: 6; }
        .s04 .col_l ul li:nth-child(7) {
          top: 48vw;
          left: 6.1333333333vw;
          z-index: 7; }
        .s04 .col_l ul li:nth-child(5) {
          top: 53.3333333333vw;
          left: 59.4666666667vw;
          z-index: 8; }
        .s04 .col_l ul li:nth-child(6) {
          top: 41.3333333333vw;
          left: 90.6666666667vw;
          z-index: 9; }
        .s04 .col_l ul li img {
          width: 25.3333333333vw; }
    .s04 .col_r {
      padding-top: 0vw;
      top: 47%; }
      .s04 .col_r h2 {
        color: #fff; }
      .s04 .col_r .desc p {
        color: #fff; }

  .s05 {
    overflow: hidden;
    background-color: #f0f0f0;
    position: relative; }
    .s05:before {
      content: '';
      width: 100%;
      height: 100%;
      display: block;
      background-size: 100%;
      background-repeat: no-repeat;
      background-image: url(../images/hobonichiyobi/obj_05_sp.png);
      background-position: center top;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0; }
    .s05:after {
      content: '';
      width: 100%;
      height: 100%;
      display: block;
      background-size: 100%;
      background-repeat: no-repeat;
      background-image: url(../images/hobonichiyobi/obj_05_ov_sp.png);
      background-position: center top;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 6; }
    .s05 h3 {
      width: 100%;
      text-align: center;
      position: absolute;
      top: 32vw;
      left: 0; }
      .s05 h3 img {
        width: auto;
        height: 11.7333333333vw; }
    .s05 .obj {
      width: 90.6666666667vw;
      height: 19.2vw;
      position: absolute;
      top: 68vw; }
      .s05 .obj li {
        height: 18.6666666667vw;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0; }
        .s05 .obj li img {
          width: 100%;
          height: 18.6666666667vw; }
    .s05 .nav {
      width: 100%;
      position: absolute;
      bottom: 12vw;
      left: 0;
      z-index: 10; }
      .s05 .nav ul {
        padding-bottom: 2.6666666667vw; }
        .s05 .nav ul li {
          margin-bottom: 2.6666666667vw;
          margin-left: 1.3333333333vw; }
          .s05 .nav ul li a {
            display: inline-block; }
            .s05 .nav ul li a img {
              width: auto;
              height: 81px;
              transition: opacity .15s ease; }
            .s05 .nav ul li a.-hv img, .s05 .nav ul li a.touch img {
              opacity: .7; }
    .s05 .credit {
      margin-top: 1.3333333333vw;
      text-align: center;
      font-size: 2.9333333333vw;
      letter-spacing: .1em;
      line-height: 1.75em; }

  footer {
    padding: 13.3333333333vw 0 5.3333333333vw 0;
    display: flex;
    align-items: center;
    background-color: #fff; }
    footer .inner {
      margin: 0 auto;
      justify-content: space-between;
      align-items: center; }
    footer .share {
      margin-bottom: 7.4666666667vw;
      text-align: center; }
      footer .share .switch_sp {
        margin-bottom: 3.2vw; }
        footer .share .switch_sp img {
          width: 16.5333333333vw; }
      footer .share ul {
        display: flex;
        align-items: center;
        justify-content: center; }
        footer .share ul li {
          margin: 0 2.6666666667vw; }
          footer .share ul li img {
            width: 13.3333333333vw; }
          footer .share ul li:first-child img {
            width: 63px; }
    footer .nav {
      text-align: center; }
      footer .nav ul {
        align-items: center;
        justify-content: center; }
        footer .nav ul li {
          margin-bottom: 8vw; }
          footer .nav ul li img {
            width: auto;
            height: 5.6vw; }
          footer .nav ul li:first-child img {
            height: 4.5333333333vw; }
          footer .nav ul li:last-child img {
            height: 2.9333333333vw; }
    footer li.hv img {
      transition: transform .15s ease; }
    footer li.hv.-hv img,
    footer li.touch img {
      transform: scale(1.07); } }