/*------------------------------------------------------------------------------------------
*
*
    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; }

  /* --------------------------------------------------
  * 
      header
  *
  -------------------------------------------------- */
  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: 1.2s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }

  .load .s00 .img img {
    opacity: 1;
    transform: translateY(0px); }

  .s02 .bg {
    clip-path: circle(0% at 50% 50%);
    -webkit-clip-path: circle(0% at 50% 50%);
    transition: clip-path, -webkit-clip-path;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    transition-delay: .25s; }
  .s02 .txt li {
    opacity: 1;
    transform: translateY(100%);
    transition: transform, opacity;
    transition-duration: .35s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    .s02 .txt li:nth-child(1) {
      transition-delay: 0.045s; }
    .s02 .txt li:nth-child(2) {
      transition-delay: 0.09s; }
    .s02 .txt li:nth-child(3) {
      transition-delay: 0.135s; }
    .s02 .txt li:nth-child(4) {
      transition-delay: 0.18s; }
    .s02 .txt li:nth-child(5) {
      transition-delay: 0.225s; }

  .n-h2 .s02 .bg {
    clip-path: circle(50% at 50% 50%);
    -webkit-clip-path: circle(50% at 50% 50%);
    transition-duration: 1.3s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transition-delay: 0s; }
  .n-h2 .s02 .txt li {
    opacity: 1;
    transform: translateY(0px);
    transition: transform, opacity;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); }
    .n-h2 .s02 .txt li:nth-child(1) {
      transition-delay: 0.43s; }
    .n-h2 .s02 .txt li:nth-child(2) {
      transition-delay: 0.51s; }
    .n-h2 .s02 .txt li:nth-child(3) {
      transition-delay: 0.59s; }
    .n-h2 .s02 .txt li:nth-child(4) {
      transition-delay: 0.67s; }
    .n-h2 .s02 .txt li:nth-child(5) {
      transition-delay: 0.75s; }

  .s04 .obj li {
    transform: translateX(-100%); }

  .n-h4 .s04 .obj li {
    animation-name: CulturenObjAnimIn;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-animation-name: CulturenObjAnimIn;
    -webkit-animation-duration: 3s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); }
    .n-h4 .s04 .obj li:nth-child(1) {
      animation-delay: 0.15s;
      -webkit-animation-delay: 0.15s; }
    .n-h4 .s04 .obj li:nth-child(2) {
      animation-delay: 0.3s;
      -webkit-animation-delay: 0.3s; }
    .n-h4 .s04 .obj li:nth-child(3) {
      animation-delay: 0.45s;
      -webkit-animation-delay: 0.45s; }
    .n-h4 .s04 .obj li:nth-child(4) {
      animation-delay: 0.6s;
      -webkit-animation-delay: 0.6s; }
    .n-h4 .s04 .obj li:nth-child(5) {
      animation-delay: 0.75s;
      -webkit-animation-delay: 0.75s; }
    .n-h4 .s04 .obj li:nth-child(6) {
      animation-delay: 0.9s;
      -webkit-animation-delay: 0.9s; }
    .n-h4 .s04 .obj li:nth-child(7) {
      animation-delay: 1.05s;
      -webkit-animation-delay: 1.05s; }
    .n-h4 .s04 .obj li:nth-child(8) {
      animation-delay: 1.2s;
      -webkit-animation-delay: 1.2s; }
    .n-h4 .s04 .obj li:nth-child(9) {
      animation-delay: 1.35s;
      -webkit-animation-delay: 1.35s; }
    .n-h4 .s04 .obj li:nth-child(10) {
      animation-delay: 1.5s;
      -webkit-animation-delay: 1.5s; }

  .s05 .obj li {
    transform: translateY(100%); }
  .s05 .obj li:nth-child(16) {
    opacity: 0;
    animation: none;
    -webkit-animation: none;
    transform: translateY(0) scale(0.95); }

  .n-h5 .s05 .obj li {
    animation-name: CulturenObjAnimIn2;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    transform-origin: bottom;
    -webkit-animation-name: CulturenObjAnimIn2;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transform-origin: bottom; }
    .n-h5 .s05 .obj li:nth-child(1) {
      animation-delay: 0.15s;
      -webkit-animation-delay: 0.15s; }
    .n-h5 .s05 .obj li:nth-child(2) {
      animation-delay: 0.3s;
      -webkit-animation-delay: 0.3s; }
    .n-h5 .s05 .obj li:nth-child(3) {
      animation-delay: 0.45s;
      -webkit-animation-delay: 0.45s; }
    .n-h5 .s05 .obj li:nth-child(4) {
      animation-delay: 0.6s;
      -webkit-animation-delay: 0.6s; }
    .n-h5 .s05 .obj li:nth-child(5) {
      animation-delay: 0.75s;
      -webkit-animation-delay: 0.75s; }
    .n-h5 .s05 .obj li:nth-child(6) {
      animation-delay: 0.9s;
      -webkit-animation-delay: 0.9s; }
    .n-h5 .s05 .obj li:nth-child(7) {
      animation-delay: 1.05s;
      -webkit-animation-delay: 1.05s; }
    .n-h5 .s05 .obj li:nth-child(8) {
      animation-delay: 1.2s;
      -webkit-animation-delay: 1.2s; }
    .n-h5 .s05 .obj li:nth-child(9) {
      animation-delay: 1.35s;
      -webkit-animation-delay: 1.35s; }
    .n-h5 .s05 .obj li:nth-child(10) {
      animation-delay: 1.5s;
      -webkit-animation-delay: 1.5s; }
    .n-h5 .s05 .obj li:nth-child(11) {
      animation-delay: 1.65s;
      -webkit-animation-delay: 1.65s; }
    .n-h5 .s05 .obj li:nth-child(12) {
      animation-delay: 1.8s;
      -webkit-animation-delay: 1.8s; }
    .n-h5 .s05 .obj li:nth-child(13) {
      animation-delay: 1.95s;
      -webkit-animation-delay: 1.95s; }
    .n-h5 .s05 .obj li:nth-child(14) {
      animation-delay: 2.1s;
      -webkit-animation-delay: 2.1s; }
    .n-h5 .s05 .obj li:nth-child(15) {
      animation-delay: 2.25s;
      -webkit-animation-delay: 2.25s; }
  .n-h5 .s05 .obj li:nth-child(16) {
    opacity: 1;
    animation: none;
    transform: translateY(0) scale(1);
    transition: transform, opacity;
    transition-duration: .25s;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-delay: 3s !important;
    -webkit-animation: none;
    -webkit-transform: translateY(0) scale(1);
    -webkit-transition: transform, opacity;
    -webkit-transition-duration: .25s;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-transition-delay: 3s !important; } }
/* -------------------------------------------------- */
/*------------------------------------------------------------------------------------------
*
*
    culturen_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; }
      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: #c2d3dd; }
    section.s02 h2:after {
      background-color: #c17eaa; }
    section.s03 h2:after {
      background-color: #d99858; }
    section.s04 h2:after {
      background-color: #226251; }
    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 h1 {
      position: relative;
      bottom: 16vw; }
      .s00 h1 img {
        width: 80vw; }
    .s00 .img {
      width: 100%;
      text-align: center;
      position: absolute;
      bottom: 22.6666666667vw;
      left: 1.3333333333vw; }
      .s00 .img img {
        width: 88vw; }

  .s01 {
    overflow: hidden;
    background-color: #dfe9ee;
    position: relative; }
    .s01 .col_l {
      padding-top: 10.6666666667vw;
      left: inherit;
      right: 0; }
      .s01 .col_l img {
        width: 100vw;
        transform-origin: bottom right; }
    .s01 .col_r {
      padding-top: 18.6666666667vw; }

  .s02 {
    background-color: #e1b3d1; }
    .s02 .col_l {
      padding-top: 5.3333333333vw; }
      .s02 .col_l .img .txt {
        width: 64vw;
        height: 14.6666666667vw;
        overflow: hidden;
        position: absolute;
        top: 61.3333333333vw;
        left: 18.1333333333vw;
        z-index: 4; }
        .s02 .col_l .img .txt ul {
          height: 14.6666666667vw;
          overflow: hidden; }
        .s02 .col_l .img .txt li {
          position: absolute;
          top: 0;
          left: 0; }
          .s02 .col_l .img .txt li img {
            width: 100%; }
      .s02 .col_l .img .bg {
        width: 88vw;
        height: 88vw;
        position: relative; }
        .s02 .col_l .img .bg img {
          width: 100%; }
    .s02 .col_r {
      padding-top: 16vw; }

  .s03 {
    overflow: hidden;
    background-color: #edc79a;
    position: relative; }
    .s03 .col_l {
      padding-top: 28vw;
      padding-left: 1.3333333333vw; }
      .s03 .col_l .img {
        position: relative; }
        .s03 .col_l .img img {
          width: 85.3333333333vw; }
    .s03 .col_r {
      padding-top: 14.6666666667vw; }

  .s04 {
    min-height: 221.3333333333vw;
    overflow: hidden;
    background-color: #009f8f;
    position: relative; }
    .s04 .col_l {
      padding-top: 26.6666666667vw; }
      .s04 .col_l .bg {
        z-index: 1; }
        .s04 .col_l .bg img {
          width: 100vw; }
      .s04 .col_l .img {
        position: absolute;
        z-index: 5; }
      .s04 .col_l .obj {
        position: relative;
        z-index: 5; }
        .s04 .col_l .obj li {
          height: 81.0666666667vw;
          overflow: hidden;
          position: absolute;
          top: 0;
          left: 0; }
          .s04 .col_l .obj li img {
            width: 100vw; }
    .s04 .col_r {
      padding-top: 6.6666666667vw; }
      .s04 .col_r h2 {
        color: #fff; }
      .s04 .col_r p {
        color: #fff; }

  .s05 {
    min-height: 176vw;
    overflow: hidden;
    background-color: #f0f0f0;
    position: relative; }
    .s05 h3 {
      width: 100%;
      text-align: center;
      position: absolute;
      top: 32vw;
      left: 0; }
      .s05 h3 img {
        width: 84vw; }
    .s05 .obj {
      width: 100vw;
      height: 58.4vw;
      position: absolute; }
      .s05 .obj li {
        position: absolute;
        top: 14.6666666667vw;
        left: -8%; }
        .s05 .obj li img {
          width: 110%; }
    .s05 .nav {
      width: 100%;
      position: absolute;
      bottom: 2.6666666667vw;
      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: 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; }

  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 a {
            display: inline-block; }
          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); } }