/*------------------------------------------------------------------------------------------
*
*
    common_sp.css
*
*
------------------------------------------------------------------------------------------ */
@media screen and (max-width: 750px) {
  /*------------------------------------------------------------------------------------------
  *
  *
      max-width : 640px
  *
  *
  ------------------------------------------------------------------------------------------ */
  body {
    width: 100vw;
    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
  *
  -------------------------------------------------- */ }
/* -------------------------------------------------- */
/*------------------------------------------------------------------------------------------
*
*
    home_sp.css
*
*
------------------------------------------------------------------------------------------ */
@media screen and (max-width: 750px) {
  /*------------------------------------------------------------------------------------------
  *
  *
      max-width : 750px
  *
  *
  ------------------------------------------------------------------------------------------ */
  h1 {
    opacity: 0; }

  main {
    max-width: 100vw;
    overflow: hidden; }

  #yt_player {
    width: 100%;
    height: 100%;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1; }
    #yt_player.sp {
      background-image: url(../images/top/cap.jpg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover; }

  #top header {
    border-bottom: 3px solid #1a1a1a;
    height: 13.3333333333vw;
    background-color: #fff;
    position: relative;
    z-index: 2;
    text-align: center; }
    #top header .logo {
      padding-top: 4.2666666667vw; }
      #top header .logo img {
        width: 66.1333333333vw; }
  #top #kv {
    margin-top: -13.3333333333vw;
    height: 178.1333333333vw;
    background-color: #f0f0f0;
    background-image: url(../images/top/kv_bg_sp.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top;
    position: relative; }
    #top #kv .inner {
      display: none; }
    #top #kv .ico {
      width: 12.5333333333vw;
      height: 11.2vw;
      background-repeat: no-repeat;
      background-position: center bottom;
      background-image: url(../images/top/parts_arrow_b.svg);
      background-size: contain;
      position: absolute;
      bottom: 2.6666666667vw;
      left: 50%;
      transform: translateX(-50%); }
  #top #yodogawa {
    padding: 12vw 0 14.6666666667vw 0;
    background-color: #ffe800;
    text-align: center; }
    #top #yodogawa p {
      font-size: 3.7333333333vw;
      line-height: 2em; }
  #top #shop {
    width: 100%;
    background-image: url(../images/bg_stripe_sp.png);
    background-size: 4.2666666667vw;
    background-position: center;
    position: relative;
    z-index: 1; }
    #top #shop:before {
      content: '';
      display: block;
      width: 90.9333333333vw;
      height: 34.6666666667vw;
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: 100%;
      background-image: url(../images/top/bg_new_img_sp.svg);
      position: absolute;
      bottom: -1.0666666667vw;
      left: 4vw; }
    #top #shop .inner {
      text-align: center;
      position: relative;
      overflow: hidden;
      padding-bottom: 18.6666666667vw;
      top: -8vw;
      z-index: 2; }
      #top #shop .inner h2 {
        margin-bottom: 15.4666666667vw; }
        #top #shop .inner h2 img {
          width: 88vw; }
      #top #shop .inner > ul {
        justify-content: center;
        position: relative;
        left: 0; }
        #top #shop .inner > ul > li {
          width: 88.8vw;
          height: 94.4vw;
          margin: 0 6.6666666667vw;
          margin-bottom: 13.3333333333vw;
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          position: relative; }
          #top #shop .inner > ul > li.hobonichiyobi {
            background-image: url(../images/top/menu_hobonichiyobi.svg); }
          #top #shop .inner > ul > li.hobonichi_culturen {
            background-image: url(../images/top/menu_culturen.svg); }
          #top #shop .inner > ul > li a {
            height: 100%;
            display: block;
            position: relative; }
            #top #shop .inner > ul > li a:after {
              opacity: 0;
              width: 84vw;
              height: 37.3333333333vw;
              content: '';
              display: block;
              position: absolute;
              border-radius: 0 0 3.2vw 3.2vw;
              background-color: rgba(255, 232, 0, 0.35);
              left: 1.0666666667vw;
              bottom: 3.4666666667vw;
              mix-blend-mode: darken;
              transition: opacity .25s ease; }
            #top #shop .inner > ul > li a.-hv:after, #top #shop .inner > ul > li a.touch:after {
              opacity: 1; }
          #top #shop .inner > ul > li .badge {
            position: absolute;
            top: -10.6666666667vw;
            left: -4.5333333333vw;
            z-index: 4; }
            #top #shop .inner > ul > li .badge img {
              width: 28.2666666667vw; }
          #top #shop .inner > ul > li .obj {
            width: 84vw;
            height: 64vw;
            background-color: #dfe9ee;
            border-radius: 3.2vw 3.2vw 0 0;
            overflow: hidden;
            position: absolute;
            top: 1.0666666667vw;
            left: 1.0666666667vw;
            z-index: 1; }
            #top #shop .inner > ul > li .obj img {
              width: 100%;
              position: relative;
              top: -1.6vw;
              left: -1.0666666667vw; }
          #top #shop .inner > ul > li .obj_ov {
            width: 85.0666666667vw;
            height: 64vw;
            overflow: hidden;
            position: absolute;
            top: 0.5333333333vw;
            left: -0.5333333333vw;
            z-index: 3; }
            #top #shop .inner > ul > li .obj_ov img {
              width: 100%;
              position: relative;
              top: 2.1333333333vw;
              left: -1.6vw; }
          #top #shop .inner > ul > li .title {
            width: 84vw;
            height: 64vw;
            overflow: hidden;
            border-radius: 3.2vw 3.2vw 0 0;
            position: relative;
            top: -1.0666666667vw;
            left: 0.5333333333vw;
            z-index: 2; }
            #top #shop .inner > ul > li .title ul {
              width: 64.2666666667vw;
              height: 13.0666666667vw;
              overflow: hidden;
              position: relative;
              top: 50%;
              left: 50%;
              transform: translateX(-50%) translateY(-50%);
              z-index: 1; }
              #top #shop .inner > ul > li .title ul li {
                position: absolute;
                top: 0;
                left: 0; }
                #top #shop .inner > ul > li .title ul li img {
                  width: auto;
                  height: 13.0666666667vw;
                  transform: translateY(100%);
                  animation-name: TitleHobonichiyobi;
                  animation-duration: 2.5s;
                  animation-fill-mode: forwards;
                  animation-iteration-count: infinite;
                  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
                  -webkit-animation-name: TitleHobonichiyobi;
                  -webkit-animation-duration: 2.5s;
                  -webkit-animation-fill-mode: forwards;
                  -webkit-animation-iteration-count: infinite;
                  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); }
                #top #shop .inner > ul > li .title ul li:nth-child(1) img {
                  animation-delay: 0.33s;
                  -webkit-animation-delay: 0.33s; }
                #top #shop .inner > ul > li .title ul li:nth-child(2) img {
                  animation-delay: 0.41s;
                  -webkit-animation-delay: 0.41s; }
                #top #shop .inner > ul > li .title ul li:nth-child(3) img {
                  animation-delay: 0.49s;
                  -webkit-animation-delay: 0.49s; }
                #top #shop .inner > ul > li .title ul li:nth-child(4) img {
                  animation-delay: 0.57s;
                  -webkit-animation-delay: 0.57s; }
                #top #shop .inner > ul > li .title ul li:nth-child(5) img {
                  animation-delay: 0.65s;
                  -webkit-animation-delay: 0.65s; }
          #top #shop .inner > ul > li .img {
            width: 84.1333333333vw;
            height: 64vw;
            overflow: hidden;
            border-radius: 3.2vw 3.2vw 0 0;
            position: relative;
            top: 0.8vw;
            left: 1.0666666667vw;
            z-index: 2; }
            #top #shop .inner > ul > li .img ul {
              position: relative; }
              #top #shop .inner > ul > li .img ul li {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0; }
                #top #shop .inner > ul > li .img ul li img {
                  clip-path: polygon(100% 150%, 100% 100%, 100% 100%, 50% 100%);
                  -webkit-clip-path: polygon(100% 150%, 100% 100%, 100% 100%, 50% 100%);
                  width: 100%;
                  z-index: 1; }
                #top #shop .inner > ul > li .img ul li.on img {
                  animation-name: TitleCulturen;
                  animation-duration: 2.5s;
                  animation-fill-mode: forwards;
                  animation-iteration-count: 1;
                  animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
                  -webkit-animation-name: TitleCulturen;
                  -webkit-animation-duration: 2.5s;
                  -webkit-animation-fill-mode: forwards;
                  -webkit-animation-iteration-count: 1;
                  -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
                  z-index: 3; }
          #top #shop .inner > ul > li .bg {
            width: 84.1333333333vw;
            height: 64vw;
            overflow: hidden;
            border-radius: 3.2vw 3.2vw 0 0;
            position: absolute;
            top: 0.8vw;
            left: 1.0666666667vw;
            z-index: 1; }
            #top #shop .inner > ul > li .bg img {
              width: 100%; }
  #top #open {
    height: 74.6666666667vw;
    text-align: center;
    position: relative;
    z-index: 2; }
    #top #open h3 {
      padding-top: 25.6vw; }
      #top #open h3 img {
        width: 81.0666666667vw; }
  #top #news_area {
    position: relative; }
    #top #news_area .inner {
      display: block;
      background-repeat: no-repeat;
      background-image: url(../images/top/bg_news_sp.png);
      background-size: 100%;
      background-position: center bottom;
      position: relative;
      z-index: 2; }
    #top #news_area:before, #top #news_area:after {
      content: '';
      width: 200vw;
      height: 100%;
      display: block;
      position: absolute;
      top: 0; }
    #top #news_area:before {
      background-color: #f1c11b;
      left: 0;
      z-index: 0; }
    #top #news_area:after {
      background-color: #e1b3d1;
      left: 50vw;
      z-index: 1; }
    #top #news_area #now {
      margin: 0 auto;
      position: relative;
      top: -22.6666666667vw;
      left: 1.3333333333vw;
      margin-bottom: -12vw;
      z-index: 2;
      justify-content: center; }
      #top #news_area #now:before {
        content: '';
        width: 97.3333333333vw;
        height: 277.3333333333vw;
        background-image: url(../images/top/sns_bg_sp.svg);
        background-repeat: no-repeat;
        background-size: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0; }
      #top #news_area #now .tw_widget {
        width: 84vw;
        height: 72vw;
        padding: 1.3333333333vw 2.6666666667vw;
        border-top: 1px solid #ddd;
        overflow: hidden;
        box-sizing: border-box;
        position: relative;
        left: 7.4666666667vw; }
        #top #news_area #now .tw_widget iframe {
          position: relative !important;
          top: -50px !important; }
      #top #news_area #now .col_l {
        padding-top: 52.8vw;
        text-align: center;
        position: relative;
        z-index: 2; }
        #top #news_area #now .col_l h3 {
          margin-bottom: 2.1333333333vw; }
          #top #news_area #now .col_l h3 img {
            width: auto;
            height: 29.3333333333vw; }
      #top #news_area #now .col_r {
        padding-top: 16vw;
        text-align: center;
        position: relative;
        z-index: 2; }
        #top #news_area #now .col_r h3 {
          margin-bottom: 14.1333333333vw; }
          #top #news_area #now .col_r h3 img {
            width: 72.5333333333vw; }
    #top #news_area .credit {
      margin-top: 2.6666666667vw;
      margin-bottom: 13.3333333333vw;
      font-size: 3.2vw;
      letter-spacing: .1em;
      line-height: 1.75em;
      text-align: center;
      position: relative; }
    #top #news_area #prev {
      position: relative;
      z-index: 3;
      text-align: center;
      overflow: hidden; }
      #top #news_area #prev h3 {
        margin-bottom: 6.6666666667vw; }
        #top #news_area #prev h3 img {
          width: 72vw; }
      #top #news_area #prev .img {
        text-align: center;
        margin-bottom: 6.6666666667vw; }
        #top #news_area #prev .img a {
          display: inline-block;
          line-height: 0; }
          #top #news_area #prev .img a img {
            width: 87.4666666667vw;
            border: 1.0666666667vw solid transparent;
            box-sizing: border-box;
            border-radius: 4vw;
            transition: border .15s ease; }
          #top #news_area #prev .img a.-hv img {
            border-color: #fff; }
      #top #news_area #prev .date {
        margin-bottom: 39.4666666667vw;
        font-size: 3.7333333333vw;
        letter-spacing: .1em; }
  #top footer {
    padding: 13.3333333333vw 0 5.3333333333vw 0;
    display: flex;
    align-items: center;
    background-color: #fff; }
    #top footer .inner {
      margin: 0 auto;
      justify-content: space-between;
      align-items: center; }
    #top footer .share {
      margin-bottom: 7.4666666667vw;
      text-align: center; }
      #top footer .share .switch_sp {
        margin-bottom: 3.2vw; }
        #top footer .share .switch_sp img {
          width: 16.5333333333vw; }
      #top footer .share ul {
        display: flex;
        align-items: center;
        justify-content: center; }
        #top footer .share ul li {
          margin: 0 2.6666666667vw; }
          #top footer .share ul li img {
            width: 13.3333333333vw; }
          #top footer .share ul li:first-child img {
            width: 63px; }
    #top footer .nav {
      text-align: center; }
      #top footer .nav ul {
        align-items: center;
        justify-content: center; }
        #top footer .nav ul li {
          margin-bottom: 8vw; }
          #top footer .nav ul li img {
            width: auto;
            height: 5.6vw; }
          #top footer .nav ul li:first-child img {
            height: 4.5333333333vw; }
          #top footer .nav ul li:last-child img {
            height: 2.9333333333vw; }
    #top footer li.hv img {
      transition: transform .15s ease; }
    #top footer li.hv.-hv img,
    #top footer li.touch img {
      transform: scale(1.07); } }