@charset "UTF-8";
html {
  position: relative; }

body {
  background-color: #f6f6f6;
  width: 100%; }
  @media screen and (max-width: 768px) {
    body {
      overflow: hidden; } }

#wrapper {
  width: 100%;
  min-width: 1100px;
  background-color: #f6f6f6;
  position: relative; }
  @media screen and (max-width: 768px) {
    #wrapper {
      min-width: 100%;
      overflow: hidden; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone #wrapper {
      min-width: 100%; }
    html.android #wrapper {
      min-width: 100%; } }

.loading {
  min-width: 1100px;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f6f6f6;
  z-index: 999;
  text-align: center; }
  @media screen and (max-width: 768px) {
    .loading {
      min-width: 100%; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .loading {
      min-width: 100%; }
    html.android .loading {
      min-width: 100%; } }

.loading_l-inner {
  width: 100%;
  height: 183px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  opacity: 0; }
  @media screen and (max-width: 768px) {
    .loading_l-inner {
      height: 31.73333vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .loading_l-inner {
      height: 31.73333vh; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .loading_l-inner {
      height: 31.73333vh; }
    html.android .loading_l-inner {
      height: 31.73333vh; } }

.loading_icon {
  width: 39px;
  margin: 0 auto; }
  @media screen and (max-width: 768px) {
    .loading_icon {
      width: 5.86667vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .loading_icon {
      width: 5.86667vh; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .loading_icon {
      width: 5.86667vh; }
    html.android .loading_icon {
      width: 5.86667vh; } }

.loading_logo {
  width: 422px;
  margin: 20px auto 0; }
  @media screen and (max-width: 768px) {
    .loading_logo {
      width: 65.86667vw;
      margin: 3.06667vw auto 0; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .loading_logo {
      width: 65.86667vh;
      margin: 3.06667vh auto 0; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .loading_logo {
      width: 65.86667vh;
      margin: 3.06667vh auto 0; }
    html.android .loading_logo {
      width: 65.86667vh;
      margin: 3.06667vh auto 0; } }

.opening {
  min-width: 1100px;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 99;
  overflow: hidden; }
  @media screen and (max-width: 768px) {
    .opening {
      min-width: 100%; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .opening {
      min-width: 100%; }
    html.android .opening {
      min-width: 100%; } }

.opening_wrap {
  height: 100%;
  overflow: hidden; }
  @media screen and (max-width: 768px) {
    .opening_wrap {
      overflow-y: auto; } }

.opening_l-inner {
  height: 100%;
  min-height: 714px;
  position: relative; }
  @media screen and (max-width: 768px) {
    .opening_l-inner {
      min-height: 103.73333vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .opening_l-inner {
      min-height: 103.73333vh; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .opening_l-inner {
      min-height: 103.73333vh; }
    html.android .opening_l-inner {
      min-height: 103.73333vh; } }

.opening_cont {
  width: 661px;
  height: 714px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -webkit-perspective: 500px;
  perspective: 500px; }
  @media screen and (max-width: 768px) {
    .opening_cont {
      width: 96.4vw;
      height: 103.73333vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .opening_cont {
      width: 96.4vh;
      height: 103.73333vh; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .opening_cont {
      width: 96.4vh;
      height: 103.73333vh; }
    html.android .opening_cont {
      width: 96.4vh;
      height: 103.73333vh; } }

.opening_message-wrap {
  -webkit-transform-origin: center;
  transform-origin: center;
  opacity: 0; }

.opening_message {
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-indent: -9999px;
  background-image: url("../img/opening_pc.png");
  background-size: 661px 714px;
  background-repeat: no-repeat;
  background-position: center top;
  width: 661px;
  height: 714px;
  display: block;
  position: relative; }
  @media screen and (max-width: 768px) {
    .opening_message {
      background-image: url("../img/opening_sp.png");
      background-size: 96.4vw 103.73333vw;
      background-repeat: no-repeat;
      background-position: center top;
      width: 96.4vw;
      height: 103.73333vw;
      display: block;
      position: relative; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .opening_message {
      background-image: url("../img/opening_sp.png");
      background-size: 96.4vh 103.73333vh;
      background-repeat: no-repeat;
      background-position: center top;
      width: 96.4vh;
      height: 103.73333vh;
      display: block;
      position: relative; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .opening_message {
      background-image: url("../img/opening_sp.png");
      background-size: 96.4vh 103.73333vh;
      background-repeat: no-repeat;
      background-position: center top;
      width: 96.4vh;
      height: 103.73333vh;
      display: block;
      position: relative; }
    html.android .opening_message {
      background-image: url("../img/opening_sp.png");
      background-size: 96.4vh 103.73333vh;
      background-repeat: no-repeat;
      background-position: center top;
      width: 96.4vh;
      height: 103.73333vh;
      display: block;
      position: relative; } }

.opening_btn {
  background-image: url("../img/opening-btn-bg.png");
  background-size: 91px 48px;
  background-repeat: no-repeat;
  background-position: center top;
  width: 91px;
  height: 48px;
  display: block;
  position: relative;
  position: absolute;
  top: 658px;
  left: 0;
  right: 0;
  margin: auto;
  pointer-events: none; }
  @media screen and (max-width: 768px) {
    .opening_btn {
      background-image: url("../img/opening-btn-bg.png");
      background-size: 12.53333vw 6.66667vw;
      background-repeat: no-repeat;
      background-position: center top;
      width: 12.53333vw;
      height: 6.66667vw;
      display: block;
      position: relative;
      position: absolute;
      top: 92.4vw;
      pointer-events: auto;
      cursor: pointer; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .opening_btn {
      background-image: url("../img/opening-btn-bg.png");
      background-size: 12.53333vh 6.66667vh;
      background-repeat: no-repeat;
      background-position: center top;
      width: 12.53333vh;
      height: 6.66667vh;
      display: block;
      position: relative;
      position: absolute;
      top: 92.4vh; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .opening_btn {
      background-image: url("../img/opening-btn-bg.png");
      background-size: 12.53333vh 6.66667vh;
      background-repeat: no-repeat;
      background-position: center top;
      width: 12.53333vh;
      height: 6.66667vh;
      display: block;
      position: relative;
      position: absolute;
      top: 92.4vh;
      pointer-events: auto; }
    html.android .opening_btn {
      background-image: url("../img/opening-btn-bg.png");
      background-size: 12.53333vh 6.66667vh;
      background-repeat: no-repeat;
      background-position: center top;
      width: 12.53333vh;
      height: 6.66667vh;
      display: block;
      position: relative;
      position: absolute;
      top: 92.4vh;
      pointer-events: auto; } }
  .opening_btn span {
    overflow: hidden;
    white-space: nowrap;
    text-indent: -9999px;
    background-image: url("../img/opening-scroll.png");
    background-size: 61px 12px;
    background-repeat: no-repeat;
    background-position: center top;
    width: 61px;
    height: 12px;
    display: block;
    position: relative;
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-animation: easeOutBounce 2s linear 4s infinite;
    animation: easeOutBounce 2s linear 4s infinite; }
    @media screen and (max-width: 768px) {
      .opening_btn span {
        background-image: url("../img/opening-start.png");
        background-size: 9.06667vw 1.73333vw;
        background-repeat: no-repeat;
        background-position: center top;
        width: 9.06667vw;
        height: 1.73333vw;
        display: block;
        position: relative;
        position: absolute;
        top: 2.26667vw;
        -webkit-animation: none;
        animation: none; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .opening_btn span {
      background-image: url("../img/opening-start.png");
      background-size: 4.53333vw 0.86667vw;
      background-repeat: no-repeat;
      background-position: center top;
      width: 4.53333vw;
      height: 0.86667vw;
      display: block;
      position: relative;
      position: absolute;
      top: 2.26667vh; } }
    @media screen and (min-width: 768px) and (orientation: landscape) {
      html.iphone .opening_btn span {
        background-image: url("../img/opening-start.png");
        background-size: 9.06667vw 1.73333vw;
        background-repeat: no-repeat;
        background-position: center top;
        width: 9.06667vw;
        height: 1.73333vw;
        display: block;
        position: relative;
        position: absolute;
        top: 2.26667vh; }
      html.android .opening_btn span {
        background-image: url("../img/opening-start.png");
        background-size: 9.06667vw 1.73333vw;
        background-repeat: no-repeat;
        background-position: center top;
        width: 9.06667vw;
        height: 1.73333vw;
        display: block;
        position: relative;
        position: absolute;
        top: 2.26667vh; } }
    .opening_btn span.pc {
      display: block; }
      @media screen and (max-width: 768px) {
        .opening_btn span.pc {
          display: none; } }
    .opening_btn span.sp {
      display: none; }
      @media screen and (max-width: 768px) {
        .opening_btn span.sp {
          display: block; } }

@-webkit-keyframes easeOutBounce {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear; }
  5% {
    -webkit-transform: translateY(-90%);
    transform: translateY(-90%); }
  9% {
    -webkit-transform: translateY(-89.11%);
    transform: translateY(-89.11%); }
  15% {
    -webkit-transform: translateY(-56.44%);
    transform: translateY(-56.44%); }
  21% {
    -webkit-transform: translateY(-1.99%);
    transform: translateY(-1.99%); }
  30% {
    -webkit-transform: translateY(-24.98%);
    transform: translateY(-24.98%); }
  40% {
    -webkit-transform: translateY(-1.63%);
    transform: translateY(-1.63%); }
  44% {
    -webkit-transform: translateY(-6.25%);
    transform: translateY(-6.25%); }
  49% {
    -webkit-transform: translateY(-0.66%);
    transform: translateY(-0.66%); }
  50% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%); }
  100% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }

@keyframes easeOutBounce {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear; }
  5% {
    -webkit-transform: translateY(-90%);
    transform: translateY(-90%); }
  9% {
    -webkit-transform: translateY(-89.11%);
    transform: translateY(-89.11%); }
  15% {
    -webkit-transform: translateY(-56.44%);
    transform: translateY(-56.44%); }
  21% {
    -webkit-transform: translateY(-1.99%);
    transform: translateY(-1.99%); }
  30% {
    -webkit-transform: translateY(-24.98%);
    transform: translateY(-24.98%); }
  40% {
    -webkit-transform: translateY(-1.63%);
    transform: translateY(-1.63%); }
  44% {
    -webkit-transform: translateY(-6.25%);
    transform: translateY(-6.25%); }
  49% {
    -webkit-transform: translateY(-0.66%);
    transform: translateY(-0.66%); }
  50% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%); }
  100% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }

.hd {
  min-width: 1100px;
  position: relative;
  z-index: 1; }
  @media screen and (max-width: 768px) {
    .hd {
      min-width: 100%; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .hd {
      min-width: 100%; }
    html.android .hd {
      min-width: 100%; } }

.hd_logo {
  width: 274px;
  position: absolute;
  top: 22px;
  left: 22px; }
  @media screen and (max-width: 768px) {
    .hd_logo {
      width: 46.8vw;
      top: 5.86667vw;
      left: 1.6vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .hd_logo {
      width: 46.8vh;
      top: 5.86667vh;
      left: 1.6vh; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .hd_logo {
      width: 46.8vh;
      top: 5.86667vh;
      left: 1.6vh; }
    html.android .hd_logo {
      width: 46.8vh;
      top: 5.86667vh;
      left: 1.6vh; } }
  .hd_logo a {
    display: inline-block;
    width: 100%; }

.hd_era-btn-wrap {
  width: 160px;
  position: absolute;
  top: 35px;
  right: 97px; }
  @media screen and (max-width: 768px) {
    .hd_era-btn-wrap {
      width: 27.33333vw;
      top: 4.53333vw;
      right: 18.53333vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .hd_era-btn-wrap {
      width: 27.33333vh;
      top: 4.53333vh;
      right: 18.53333vh; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .hd_era-btn-wrap {
      width: 27.33333vh;
      top: 4.53333vh;
      right: 18.53333vh; }
    html.android .hd_era-btn-wrap {
      width: 27.33333vh;
      top: 4.53333vh;
      right: 18.53333vh; } }

.hd_era-btn {
  display: none;
  width: 160px;
  border-radius: 20px;
  background-color: #fff;
  border: 2px solid #292929;
  padding: 12px 0 12px 19px;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
  @media screen and (max-width: 768px) {
    .hd_era-btn {
      width: 27.33333vw;
      border-radius: 5vw;
      border: 0.26667vw solid #292929;
      padding: 3.46667vw 0 3.46667vw 2.53333vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .hd_era-btn {
      width: 27.33333vh;
      border-radius: 5vh;
      border: 0.26667vh solid #292929;
      padding: 3.46667vh 0 3.46667vh 2.53333vh; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .hd_era-btn {
      width: 27.33333vh;
      border-radius: 5vh;
      border: 0.26667vh solid #292929;
      padding: 3.46667vh 0 3.46667vh 2.53333vh; }
    html.android .hd_era-btn {
      width: 27.33333vh;
      border-radius: 5vh;
      border: 0.26667vh solid #292929;
      padding: 3.46667vh 0 3.46667vh 2.53333vh; } }
  .hd_era-btn span {
    display: inline-block;
    padding-right: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-indent: -9999px;
    background-image: url("../img/era-txt.png");
    background-size: 101px 16px;
    background-repeat: no-repeat;
    background-position: center top;
    width: 125px;
    height: 16px;
    display: block;
    position: relative;
    background-position: left center;
    position: relative; }
    @media screen and (max-width: 768px) {
      .hd_era-btn span {
        background-image: url("../img/era-txt.png");
        background-size: 19.06667vw 3.06667vw;
        background-repeat: no-repeat;
        background-position: center top;
        width: 22.26667vw;
        height: 3.06667vw;
        display: block;
        position: relative;
        background-position: left center; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .hd_era-btn span {
      background-image: url("../img/era-txt.png");
      background-size: 19.06667vh 3.06667vh;
      background-repeat: no-repeat;
      background-position: center top;
      width: 22.26667vh;
      height: 3.06667vh;
      display: block;
      position: relative;
      background-position: left center; } }
    @media screen and (min-width: 768px) and (orientation: landscape) {
      html.iphone .hd_era-btn span {
        background-image: url("../img/era-txt.png");
        background-size: 19.06667vh 3.06667vh;
        background-repeat: no-repeat;
        background-position: center top;
        width: 22.26667vh;
        height: 3.06667vh;
        display: block;
        position: relative;
        background-position: left center; }
      html.android .hd_era-btn span {
        background-image: url("../img/era-txt.png");
        background-size: 19.06667vh 3.06667vh;
        background-repeat: no-repeat;
        background-position: center top;
        width: 22.26667vh;
        height: 3.06667vh;
        display: block;
        position: relative;
        background-position: left center; } }
    .hd_era-btn span::before {
      content: "";
      background-image: url("../img/era-arrow.png");
      background-size: 14px 7px;
      background-repeat: no-repeat;
      background-position: center top;
      width: 14px;
      height: 7px;
      display: block;
      position: relative;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg); }
      @media screen and (max-width: 768px) {
        .hd_era-btn span::before {
          background-image: url("../img/era-arrow.png");
          background-size: 1.86667vw 0.93333vw;
          background-repeat: no-repeat;
          background-position: center top;
          width: 1.86667vw;
          height: 0.93333vw;
          display: block;
          position: relative;
          position: absolute; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .hd_era-btn span::before {
      background-image: url("../img/era-arrow.png");
      background-size: 1.86667vh 0.93333vh;
      background-repeat: no-repeat;
      background-position: center top;
      width: 1.86667vh;
      height: 0.93333vh;
      display: block;
      position: relative;
      position: absolute; } }
      @media screen and (min-width: 768px) and (orientation: landscape) {
        html.iphone .hd_era-btn span::before {
          background-image: url("../img/era-arrow.png");
          background-size: 1.86667vh 0.93333vh;
          background-repeat: no-repeat;
          background-position: center top;
          width: 1.86667vh;
          height: 0.93333vh;
          display: block;
          position: relative;
          position: absolute; }
        html.android .hd_era-btn span::before {
          background-image: url("../img/era-arrow.png");
          background-size: 1.86667vh 0.93333vh;
          background-repeat: no-repeat;
          background-position: center top;
          width: 1.86667vh;
          height: 0.93333vh;
          display: block;
          position: relative;
          position: absolute; } }
  .hd_era-btn.active span::before {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  .hd_era-btn:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05); }

.hd_era-list-wrap {
  display: none; }

.hd_era-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
  font-size: 16px;
  line-height: 1.62;
  color: #292929;
  letter-spacing: 0.08em;
  background-color: #fff;
  border-radius: 10px;
  border: 2px solid #292929;
  padding: 14px 18px;
  margin-top: 5px; }
  @media screen and (max-width: 768px) {
    .hd_era-list {
      font-size: 3.2vw;
      line-height: 1.91;
      border-radius: 2.66667vw;
      border: 0.26667vw solid #292929;
      padding: 1.86667vw 0vw 1.86667vw 2.53333vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .hd_era-list {
      font-size: 3.2vh;
      border-radius: 2.66667vh;
      border: 0.26667vh solid #292929;
      padding: 1.86667vh 0vh 1.86667vh 2.53333vh; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .hd_era-list {
      font-size: 3.2vh;
      border-radius: 2.66667vh;
      border: 0.26667vh solid #292929;
      padding: 1.86667vh 0vh 1.86667vh 2.53333vh; }
    html.android .hd_era-list {
      font-size: 3.2vh;
      border-radius: 2.66667vh;
      border: 0.26667vh solid #292929;
      padding: 1.86667vh 0vh 1.86667vh 2.53333vh; } }
  .hd_era-list li {
    cursor: pointer; }
    .hd_era-list li:hover {
      opacity: 0.7; }

.hd_menu-btn {
  border-radius: 50%;
  background-color: #292929;
  position: absolute;
  top: 29px;
  right: 29px;
  cursor: pointer;
  z-index: 2;
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
  @media screen and (max-width: 768px) {
    .hd_menu-btn {
      top: 3.2vw;
      right: 2.66667vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .hd_menu-btn {
      top: 3.2vh;
      right: 2.66667vh; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .hd_menu-btn {
      top: 3.2vh;
      right: 2.66667vh; }
    html.android .hd_menu-btn {
      top: 3.2vh;
      right: 2.66667vh; } }
  .hd_menu-btn span {
    display: block;
    background-image: url("../img/menu-btn.png");
    background-size: 35px 26px;
    background-repeat: no-repeat;
    background-position: center top;
    width: 55px;
    height: 55px;
    display: block;
    position: relative;
    background-position: center;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
    @media screen and (max-width: 768px) {
      .hd_menu-btn span {
        background-image: url("../img/menu-btn.png");
        background-size: 8.13333vw 6vw;
        background-repeat: no-repeat;
        background-position: center top;
        width: 13.33333vw;
        height: 13.33333vw;
        display: block;
        position: relative;
        background-position: center; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .hd_menu-btn span {
      background-image: url("../img/menu-btn.png");
      background-size: 8.13333vh 6vh;
      background-repeat: no-repeat;
      background-position: center top;
      width: 13.33333vh;
      height: 13.33333vh;
      display: block;
      position: relative;
      background-position: center; } }
    @media screen and (min-width: 768px) and (orientation: landscape) {
      html.iphone .hd_menu-btn span {
        background-image: url("../img/menu-btn.png");
        background-size: 8.13333vh 6vh;
        background-repeat: no-repeat;
        background-position: center top;
        width: 13.33333vh;
        height: 13.33333vh;
        display: block;
        position: relative;
        background-position: center; }
      html.android .hd_menu-btn span {
        background-image: url("../img/menu-btn.png");
        background-size: 8.13333vh 6vh;
        background-repeat: no-repeat;
        background-position: center top;
        width: 13.33333vh;
        height: 13.33333vh;
        display: block;
        position: relative;
        background-position: center; } }
  .hd_menu-btn.active span {
    background-image: url("../img/close-btn.png");
    background-size: 26px 25px;
    background-repeat: no-repeat;
    background-position: center top;
    width: 55px;
    height: 55px;
    display: block;
    position: relative;
    background-position: center;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); }
    @media screen and (max-width: 768px) {
      .hd_menu-btn.active span {
        background-image: url("../img/close-btn.png");
        background-size: 4vw 3.86667vw;
        background-repeat: no-repeat;
        background-position: center top;
        width: 13.33333vw;
        height: 13.33333vw;
        display: block;
        position: relative;
        background-position: center; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .hd_menu-btn.active span {
      background-image: url("../img/close-btn.png");
      background-size: 4vh 3.86667vh;
      background-repeat: no-repeat;
      background-position: center top;
      width: 13.33333vh;
      height: 13.33333vh;
      display: block;
      position: relative;
      background-position: center; } }
    @media screen and (min-width: 768px) and (orientation: landscape) {
      html.iphone .hd_menu-btn.active span {
        background-image: url("../img/close-btn.png");
        background-size: 4vh 3.86667vh;
        background-repeat: no-repeat;
        background-position: center top;
        width: 13.33333vh;
        height: 13.33333vh;
        display: block;
        position: relative;
        background-position: center; }
      html.android .hd_menu-btn.active span {
        background-image: url("../img/close-btn.png");
        background-size: 4vh 3.86667vh;
        background-repeat: no-repeat;
        background-position: center top;
        width: 13.33333vh;
        height: 13.33333vh;
        display: block;
        position: relative;
        background-position: center; } }
  .hd_menu-btn:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }

.hd_nav {
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  background-color: rgba(255, 255, 255, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  display: none; }
  .hd_nav.active {
    display: block; }

.hd_nav-wrap {
  height: 100%;
  overflow-y: auto; }

.hd_nav-l-inner {
  width: 1100px;
  height: 100%;
  min-height: 548px;
  margin: 0 auto;
  position: relative;
  overflow: hidden; }
  @media screen and (max-width: 768px) {
    .hd_nav-l-inner {
      width: 100%;
      min-height: 161.06667vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .hd_nav-l-inner {
      min-height: 161.06667vh; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .hd_nav-l-inner {
      width: 100%;
      min-height: 161.06667vh; }
    html.android .hd_nav-l-inner {
      width: 100%;
      min-height: 161.06667vh; } }
  @media screen and (max-width: 768px) {
    .hd_nav-l-inner::before, .hd_nav-l-inner::after {
      content: "";
      top: 0;
      -webkit-transform: translateY(0%);
      transform: translateY(0%); } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .hd_nav-l-inner::before, html.iphone .hd_nav-l-inner::after {
      content: "";
      top: 0;
      -webkit-transform: translateY(0%);
      transform: translateY(0%); }
    html.android .hd_nav-l-inner::before, html.android .hd_nav-l-inner::after {
      content: "";
      top: 0;
      -webkit-transform: translateY(0%);
      transform: translateY(0%); } }
  @media screen and (max-width: 768px) {
    .hd_nav-l-inner::before {
      background-image: url("../img/nav-bg01_sp.png");
      background-size: 100% 40.13333vw;
      background-repeat: no-repeat;
      background-position: center top;
      width: 100%;
      height: 40.13333vw;
      display: block;
      position: relative;
      position: absolute;
      left: 0; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .hd_nav-l-inner::before {
      background-image: url("../img/nav-bg01_sp.png");
      background-size: 100% 40.13333vw;
      background-repeat: no-repeat;
      background-position: center top;
      width: 100%;
      height: 40.13333vw;
      display: block;
      position: relative;
      position: absolute;
      left: 0; }
    html.android .hd_nav-l-inner::before {
      background-image: url("../img/nav-bg01_sp.png");
      background-size: 100% 40.13333vw;
      background-repeat: no-repeat;
      background-position: center top;
      width: 100%;
      height: 40.13333vw;
      display: block;
      position: relative;
      position: absolute;
      left: 0; } }
  @media screen and (max-width: 768px) {
    .hd_nav-l-inner::after {
      background-image: url("../img/nav-bg02_sp.png");
      background-size: 100% 30.26667vw;
      background-repeat: no-repeat;
      background-position: center top;
      width: 100%;
      height: 30.26667vw;
      display: block;
      position: relative;
      position: absolute;
      top: auto;
      bottom: 0;
      right: 0; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .hd_nav-l-inner::after {
      background-image: url("../img/nav-bg02_sp.png");
      background-size: 100% 30.26667vw;
      background-repeat: no-repeat;
      background-position: center top;
      width: 100%;
      height: 30.26667vw;
      display: block;
      position: relative;
      position: absolute;
      top: auto;
      bottom: 0;
      right: 0; }
    html.android .hd_nav-l-inner::after {
      background-image: url("../img/nav-bg02_sp.png");
      background-size: 100% 30.26667vw;
      background-repeat: no-repeat;
      background-position: center top;
      width: 100%;
      height: 30.26667vw;
      display: block;
      position: relative;
      position: absolute;
      top: auto;
      bottom: 0;
      right: 0; } }

.hd_nav-bg-list {
  width: 100%;
  height: 800px;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1; }
  @media screen and (max-width: 768px) {
    .hd_nav-bg-list {
      display: none; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .hd_nav-bg-list {
      display: none; }
    html.android .hd_nav-bg-list {
      display: none; } }
  .hd_nav-bg-list li {
    display: block;
    position: absolute;
    opacity: 0;
    -webkit-transform-origin: center;
    transform-origin: center; }
  .hd_nav-bg-list .naruto span {
    background-image: url("../img/kayaku01.png");
    background-size: 98px 99px;
    background-repeat: no-repeat;
    background-position: center top;
    width: 98px;
    height: 99px;
    display: block;
    position: relative; }
  .hd_nav-bg-list .tamago span {
    background-image: url("../img/kayaku02.png");
    background-size: 68px 69px;
    background-repeat: no-repeat;
    background-position: center top;
    width: 68px;
    height: 69px;
    display: block;
    position: relative; }
  .hd_nav-bg-list .negi span {
    background-image: url("../img/kayaku03.png");
    background-size: 45px;
    background-repeat: no-repeat;
    background-position: center top;
    width: 45px;
    height: 45px;
    display: block;
    position: relative; }
  .hd_nav-bg-list .naruto-01 {
    top: 65px;
    left: 88px; }
  .hd_nav-bg-list .naruto-02 {
    top: 389px;
    left: 63px; }
    .hd_nav-bg-list .naruto-02 span {
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg); }
  .hd_nav-bg-list .naruto-03 {
    top: 240px;
    right: 210px; }
    .hd_nav-bg-list .naruto-03 span {
      -webkit-transform: rotate(-165deg);
      transform: rotate(-165deg); }
  .hd_nav-bg-list .naruto-04 {
    top: 337px;
    right: 47px; }
    .hd_nav-bg-list .naruto-04 span {
      -webkit-transform: rotate(135deg);
      transform: rotate(135deg); }
  .hd_nav-bg-list .tamago-01 {
    top: 175px;
    left: 234px; }
  .hd_nav-bg-list .tamago-02 {
    top: 265px;
    left: 175px; }
    .hd_nav-bg-list .tamago-02 span {
      -webkit-transform: rotate(-76deg);
      transform: rotate(-76deg); }
  .hd_nav-bg-list .tamago-03 {
    top: 686px;
    left: 254px; }
    .hd_nav-bg-list .tamago-03 span {
      -webkit-transform: rotate(-59deg);
      transform: rotate(-59deg); }
  .hd_nav-bg-list .tamago-04 {
    top: 115px;
    right: 132px; }
    .hd_nav-bg-list .tamago-04 span {
      -webkit-transform: rotate(150deg);
      transform: rotate(150deg); }
  .hd_nav-bg-list .tamago-05 {
    top: 490px;
    right: 95px; }
    .hd_nav-bg-list .tamago-05 span {
      -webkit-transform: rotate(-92deg);
      transform: rotate(-92deg); }
  .hd_nav-bg-list .negi-01 {
    top: 204px;
    left: 131px; }
  .hd_nav-bg-list .negi-02 {
    top: 559px;
    left: 152px; }
    .hd_nav-bg-list .negi-02 span {
      -webkit-transform: rotate(-60deg);
      transform: rotate(-60deg); }
  .hd_nav-bg-list .negi-03 {
    top: 621px;
    left: 219px; }
  .hd_nav-bg-list .negi-04 {
    top: 61px;
    right: 197px; }
    .hd_nav-bg-list .negi-04 span {
      -webkit-transform: rotate(-15deg);
      transform: rotate(-15deg); }
  .hd_nav-bg-list .negi-05 {
    top: 505px;
    right: 225px; }
  .hd_nav-bg-list .negi-06 {
    top: 617px;
    right: 143px; }
    .hd_nav-bg-list .negi-06 span {
      -webkit-transform: rotate(-30deg);
      transform: rotate(-30deg); }
  .hd_nav-bg-list .negi-07 {
    top: 705px;
    right: 195px; }
    .hd_nav-bg-list .negi-07 span {
      -webkit-transform: rotate(-75deg);
      transform: rotate(-75deg); }

.hd_nav-menu-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  z-index: 1; }
  @media screen and (max-width: 768px) {
    .hd_nav-menu-wrap {
      padding-top: 11.06667vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .hd_nav-menu-wrap {
      padding-top: 11.06667vh; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .hd_nav-menu-wrap {
      padding-top: 11.06667vh; }
    html.android .hd_nav-menu-wrap {
      padding-top: 11.06667vh; } }

.hd-menu-baloon {
  overflow: hidden;
  white-space: nowrap;
  text-indent: -9999px;
  background-image: url("../img/menu-baloon_pc.png");
  background-size: 343px 45px;
  background-repeat: no-repeat;
  background-position: center top;
  width: 343px;
  height: 45px;
  display: block;
  position: relative;
  margin: 0 auto 6px; }
  @media screen and (max-width: 768px) {
    .hd-menu-baloon {
      background-image: url("../img/menu-baloon_sp.png");
      background-size: 92vw 9.86667vw;
      background-repeat: no-repeat;
      background-position: center top;
      width: 92vw;
      height: 9.86667vw;
      display: block;
      position: relative;
      margin: 0 auto 1.86667vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .hd-menu-baloon {
      background-image: url("../img/menu-baloon_sp.png");
      background-size: 92vh 9.86667vh;
      background-repeat: no-repeat;
      background-position: center top;
      width: 92vh;
      height: 9.86667vh;
      display: block;
      position: relative;
      margin: 0 auto 1.86667vh; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .hd-menu-baloon {
      background-image: url("../img/menu-baloon_sp.png");
      background-size: 92vh 9.86667vh;
      background-repeat: no-repeat;
      background-position: center top;
      width: 92vh;
      height: 9.86667vh;
      display: block;
      position: relative;
      margin: 0 auto 1.86667vh; }
    html.android .hd-menu-baloon {
      background-image: url("../img/menu-baloon_sp.png");
      background-size: 92vh 9.86667vh;
      background-repeat: no-repeat;
      background-position: center top;
      width: 92vh;
      height: 9.86667vh;
      display: block;
      position: relative;
      margin: 0 auto 1.86667vh; } }

.hd_nav-menu {
  -webkit-transform-origin: center 80%;
  transform-origin: center 80%;
  z-index: 1; }
  .hd_nav-menu.taste {
    background-image: url("../img/taste-menu-bg_pc.png");
    background-size: 334px 452px;
    background-repeat: no-repeat;
    background-position: center top;
    width: 334px;
    height: 452px;
    display: block;
    position: relative;
    padding: 58px 0; }
    @media screen and (max-width: 768px) {
      .hd_nav-menu.taste {
        background-image: url("../img/taste-menu-bg_sp.png");
        background-size: 93.2vw 138.26667vw;
        background-repeat: no-repeat;
        background-position: center top;
        width: 93.2vw;
        height: 138.26667vw;
        display: block;
        position: relative;
        padding: 10.66667vw 0 11.86667vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .hd_nav-menu.taste {
      background-image: url("../img/taste-menu-bg_sp.png");
      background-size: 93.2vh 138.26667vh;
      background-repeat: no-repeat;
      background-position: center top;
      width: 93.2vh;
      height: 138.26667vh;
      display: block;
      position: relative;
      padding: 10.66667vh 0 11.86667vh; } }
    @media screen and (min-width: 768px) and (orientation: landscape) {
      html.iphone .hd_nav-menu.taste {
        background-image: url("../img/taste-menu-bg_sp.png");
        background-size: 93.2vh 138.26667vh;
        background-repeat: no-repeat;
        background-position: center top;
        width: 93.2vh;
        height: 138.26667vh;
        display: block;
        position: relative;
        padding: 10.66667vh 0 11.86667vh; }
      html.android .hd_nav-menu.taste {
        background-image: url("../img/taste-menu-bg_sp.png");
        background-size: 93.2vh 138.26667vh;
        background-repeat: no-repeat;
        background-position: center top;
        width: 93.2vh;
        height: 138.26667vh;
        display: block;
        position: relative;
        padding: 10.66667vh 0 11.86667vh; } }
  .hd_nav-menu.name {
    background-image: url("../img/name-menu-bg_pc.png");
    background-size: 334px 452px;
    background-repeat: no-repeat;
    background-position: center top;
    width: 334px;
    height: 452px;
    display: block;
    position: relative;
    padding: 42px 0 48px; }
    @media screen and (max-width: 768px) {
      .hd_nav-menu.name {
        background-image: url("../img/name-menu-bg_sp.png");
        background-size: 93.2vw 138.26667vw;
        background-repeat: no-repeat;
        background-position: center top;
        width: 93.2vw;
        height: 138.26667vw;
        display: block;
        position: relative;
        padding: 10.66667vw 0 11.86667vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .hd_nav-menu.name {
      background-image: url("../img/name-menu-bg_sp.png");
      background-size: 93.2vh 138.26667vh;
      background-repeat: no-repeat;
      background-position: center top;
      width: 93.2vh;
      height: 138.26667vh;
      display: block;
      position: relative;
      padding: 10.66667vh 0 11.86667vh; } }
    @media screen and (min-width: 768px) and (orientation: landscape) {
      html.iphone .hd_nav-menu.name {
        background-image: url("../img/name-menu-bg_sp.png");
        background-size: 93.2vh 138.26667vh;
        background-repeat: no-repeat;
        background-position: center top;
        width: 93.2vh;
        height: 138.26667vh;
        display: block;
        position: relative;
        padding: 10.66667vh 0 11.86667vh; }
      html.android .hd_nav-menu.name {
        background-image: url("../img/name-menu-bg_sp.png");
        background-size: 93.2vh 138.26667vh;
        background-repeat: no-repeat;
        background-position: center top;
        width: 93.2vh;
        height: 138.26667vh;
        display: block;
        position: relative;
        padding: 10.66667vh 0 11.86667vh; } }

.hd_nav-menu-l-inner {
  height: 100%;
  border-top: 1px solid #a2a2a2;
  border-bottom: 1px solid #a2a2a2; }
  .taste .hd_nav-menu-l-inner {
    width: 219px;
    margin-left: 61px;
    padding-top: 10px; }
    @media screen and (max-width: 768px) {
      .taste .hd_nav-menu-l-inner {
        width: 66.53333vw;
        margin: 0 auto;
        padding-top: 7.86667vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .taste .hd_nav-menu-l-inner {
      width: 66.53333vh;
      padding-top: 7.86667vh; } }
    @media screen and (min-width: 768px) and (orientation: landscape) {
      html.iphone .taste .hd_nav-menu-l-inner {
        width: 66.53333vh;
        margin: 0 auto;
        padding-top: 7.86667vh; }
      html.android .taste .hd_nav-menu-l-inner {
        width: 66.53333vh;
        margin: 0 auto;
        padding-top: 7.86667vh; } }
  .name .hd_nav-menu-l-inner {
    width: 219px;
    margin-left: 61px;
    padding-top: 20px; }
    @media screen and (max-width: 768px) {
      .name .hd_nav-menu-l-inner {
        width: 66.53333vw;
        margin: 0 auto;
        padding-top: 7.86667vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .name .hd_nav-menu-l-inner {
      width: 66.53333vh;
      padding-top: 7.86667vh; } }
    @media screen and (min-width: 768px) and (orientation: landscape) {
      html.iphone .name .hd_nav-menu-l-inner {
        width: 66.53333vh;
        margin: 0 auto;
        padding-top: 7.86667vh; }
      html.android .name .hd_nav-menu-l-inner {
        width: 66.53333vh;
        margin: 0 auto;
        padding-top: 7.86667vh; } }

.hd_nav-menu-list {
  width: 148px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }
  @media screen and (max-width: 768px) {
    .hd_nav-menu-list {
      width: 27.46667vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .hd_nav-menu-list {
      width: 27.46667vh; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .hd_nav-menu-list {
      width: 27.46667vh; }
    html.android .hd_nav-menu-list {
      width: 27.46667vh; } }
  .hd_nav-menu-list li {
    line-height: 1;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-indent: -9999px; }
    .hd_nav-menu-list li.taste-btn {
      background-image: url("../img/sort-taste-off.png");
      background-size: 40px 19px;
      background-repeat: no-repeat;
      background-position: center top;
      width: 40px;
      height: 19px;
      display: block;
      position: relative; }
      @media screen and (max-width: 768px) {
        .hd_nav-menu-list li.taste-btn {
          background-image: url("../img/sort-taste-off.png");
          background-size: 7.33333vw 3.6vw;
          background-repeat: no-repeat;
          background-position: center top;
          width: 7.33333vw;
          height: 3.6vw;
          display: block;
          position: relative; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .hd_nav-menu-list li.taste-btn {
      background-image: url("../img/sort-taste-off.png");
      background-size: 7.33333vh 3.6vh;
      background-repeat: no-repeat;
      background-position: center top;
      width: 7.33333vh;
      height: 3.6vh;
      display: block;
      position: relative; } }
      @media screen and (min-width: 768px) and (orientation: landscape) {
        html.iphone .hd_nav-menu-list li.taste-btn {
          background-image: url("../img/sort-taste-off.png");
          background-size: 7.33333vh 3.6vh;
          background-repeat: no-repeat;
          background-position: center top;
          width: 7.33333vh;
          height: 3.6vh;
          display: block;
          position: relative; }
        html.android .hd_nav-menu-list li.taste-btn {
          background-image: url("../img/sort-taste-off.png");
          background-size: 7.33333vh 3.6vh;
          background-repeat: no-repeat;
          background-position: center top;
          width: 7.33333vh;
          height: 3.6vh;
          display: block;
          position: relative; } }
      .hd_nav-menu-list li.taste-btn.active {
        background-image: url("../img/sort-taste-on.png");
        background-size: 40px 19px;
        background-repeat: no-repeat;
        background-position: center top;
        width: 40px;
        height: 19px;
        display: block;
        position: relative; }
        @media screen and (max-width: 768px) {
          .hd_nav-menu-list li.taste-btn.active {
            background-image: url("../img/sort-taste-on.png");
            background-size: 7.33333vw 3.6vw;
            background-repeat: no-repeat;
            background-position: center top;
            width: 7.33333vw;
            height: 3.6vw;
            display: block;
            position: relative; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .hd_nav-menu-list li.taste-btn.active {
      background-image: url("../img/sort-taste-on.png");
      background-size: 7.33333vh 3.6vh;
      background-repeat: no-repeat;
      background-position: center top;
      width: 7.33333vh;
      height: 3.6vh;
      display: block;
      position: relative; } }
        @media screen and (min-width: 768px) and (orientation: landscape) {
          html.iphone .hd_nav-menu-list li.taste-btn.active {
            background-image: url("../img/sort-taste-on.png");
            background-size: 7.33333vh 3.6vh;
            background-repeat: no-repeat;
            background-position: center top;
            width: 7.33333vh;
            height: 3.6vh;
            display: block;
            position: relative; }
          html.android .hd_nav-menu-list li.taste-btn.active {
            background-image: url("../img/sort-taste-on.png");
            background-size: 7.33333vh 3.6vh;
            background-repeat: no-repeat;
            background-position: center top;
            width: 7.33333vh;
            height: 3.6vh;
            display: block;
            position: relative; } }
    .hd_nav-menu-list li.name-btn {
      background-image: url("../img/sort-name-off.png");
      background-size: 83px 19px;
      background-repeat: no-repeat;
      background-position: center top;
      width: 83px;
      height: 19px;
      display: block;
      position: relative; }
      @media screen and (max-width: 768px) {
        .hd_nav-menu-list li.name-btn {
          background-image: url("../img/sort-name-off.png");
          background-size: 15.46667vw 3.6vw;
          background-repeat: no-repeat;
          background-position: center top;
          width: 15.46667vw;
          height: 3.6vw;
          display: block;
          position: relative; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .hd_nav-menu-list li.name-btn {
      background-image: url("../img/sort-name-off.png");
      background-size: 15.46667vh 3.6vh;
      background-repeat: no-repeat;
      background-position: center top;
      width: 15.46667vh;
      height: 3.6vh;
      display: block;
      position: relative; } }
      @media screen and (min-width: 768px) and (orientation: landscape) {
        html.iphone .hd_nav-menu-list li.name-btn {
          background-image: url("../img/sort-name-off.png");
          background-size: 15.46667vh 3.6vh;
          background-repeat: no-repeat;
          background-position: center top;
          width: 15.46667vh;
          height: 3.6vh;
          display: block;
          position: relative; }
        html.android .hd_nav-menu-list li.name-btn {
          background-image: url("../img/sort-name-off.png");
          background-size: 15.46667vh 3.6vh;
          background-repeat: no-repeat;
          background-position: center top;
          width: 15.46667vh;
          height: 3.6vh;
          display: block;
          position: relative; } }
      .hd_nav-menu-list li.name-btn.active {
        background-image: url("../img/sort-name-on.png");
        background-size: 83px 19px;
        background-repeat: no-repeat;
        background-position: center top;
        width: 83px;
        height: 19px;
        display: block;
        position: relative; }
        @media screen and (max-width: 768px) {
          .hd_nav-menu-list li.name-btn.active {
            background-image: url("../img/sort-name-on.png");
            background-size: 15.46667vw 3.6vw;
            background-repeat: no-repeat;
            background-position: center top;
            width: 15.46667vw;
            height: 3.6vw;
            display: block;
            position: relative; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .hd_nav-menu-list li.name-btn.active {
      background-image: url("../img/sort-name-on.png");
      background-size: 15.46667vh 3.6vh;
      background-repeat: no-repeat;
      background-position: center top;
      width: 15.46667vh;
      height: 3.6vh;
      display: block;
      position: relative; } }
        @media screen and (min-width: 768px) and (orientation: landscape) {
          html.iphone .hd_nav-menu-list li.name-btn.active {
            background-image: url("../img/sort-name-on.png");
            background-size: 15.46667vh 3.6vh;
            background-repeat: no-repeat;
            background-position: center top;
            width: 15.46667vh;
            height: 3.6vh;
            display: block;
            position: relative; }
          html.android .hd_nav-menu-list li.name-btn.active {
            background-image: url("../img/sort-name-on.png");
            background-size: 15.46667vh 3.6vh;
            background-repeat: no-repeat;
            background-position: center top;
            width: 15.46667vh;
            height: 3.6vh;
            display: block;
            position: relative; } }

.hd_nav-menu-block {
  display: none; }
  .hd_nav-menu-block.active {
    display: block; }

.hd_nav-menu-txt {
  line-height: 1;
  margin: 28px 0 19px;
  text-align: center; }
  @media screen and (max-width: 768px) {
    .hd_nav-menu-txt {
      margin: 5.06667vw 0 5.2vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .hd_nav-menu-txt {
      margin: 5.06667vh 0 5.2vh; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .hd_nav-menu-txt {
      margin: 5.06667vh 0 5.2vh; }
    html.android .hd_nav-menu-txt {
      margin: 5.06667vh 0 5.2vh; } }
  #taste .hd_nav-menu-txt {
    font-size: 14px; }
    @media screen and (max-width: 768px) {
      #taste .hd_nav-menu-txt {
        font-size: 3.2vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    #taste .hd_nav-menu-txt {
      font-size: 3.2vh; } }
    @media screen and (min-width: 768px) and (orientation: landscape) {
      html.iphone #taste .hd_nav-menu-txt {
        font-size: 3.2vh; }
      html.android #taste .hd_nav-menu-txt {
        font-size: 3.2vh; } }
  #name .hd_nav-menu-txt {
    font-size: 14px; }
    @media screen and (max-width: 768px) {
      #name .hd_nav-menu-txt {
        font-size: 3.2vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    #name .hd_nav-menu-txt {
      font-size: 3.2vh; } }
    @media screen and (min-width: 768px) and (orientation: landscape) {
      html.iphone #name .hd_nav-menu-txt {
        font-size: 3.2vh; }
      html.android #name .hd_nav-menu-txt {
        font-size: 3.2vh; } }

.hd_nav-menu-sort-list li {
  cursor: pointer; }
  .hd_nav-menu-sort-list li .off {
    display: inline-block; }
  .hd_nav-menu-sort-list li .on {
    display: none; }
  .hd_nav-menu-sort-list li.active .off {
    display: none; }
  .hd_nav-menu-sort-list li.active .on {
    display: inline-block; }

#taste .hd_nav-menu-sort-list li {
  width: 164px;
  height: 30px;
  border-radius: 20px;
  border: 2px solid #4ed3a0;
  margin: 10px auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  @media screen and (max-width: 768px) {
    #taste .hd_nav-menu-sort-list li {
      width: 48vw;
      height: 10.66667vw;
      line-height: 10.13333vw;
      border-radius: 5.33333vw;
      border: 0.26667vw solid #4ed3a0;
      margin: 4vw auto 0; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    #taste .hd_nav-menu-sort-list li {
      width: 48vh;
      height: 10.66667vh;
      line-height: 10.13333vh;
      border-radius: 5.33333vh;
      border: 0.26667vh solid #4ed3a0;
      margin: 4vh auto 0; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone #taste .hd_nav-menu-sort-list li {
      width: 48vh;
      height: 10.66667vh;
      line-height: 10.13333vh;
      border-radius: 5.33333vh;
      border: 0.26667vh solid #4ed3a0;
      margin: 4vh auto 0; }
    html.android #taste .hd_nav-menu-sort-list li {
      width: 48vh;
      height: 10.66667vh;
      line-height: 10.13333vh;
      border-radius: 5.33333vh;
      border: 0.26667vh solid #4ed3a0;
      margin: 4vh auto 0; } }
  #taste .hd_nav-menu-sort-list li:first-of-type {
    margin-top: 0; }
  #taste .hd_nav-menu-sort-list li span {
    display: block;
    width: 73px;
    line-height: 1; }
    @media screen and (max-width: 768px) {
      #taste .hd_nav-menu-sort-list li span {
        width: 15.2vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    #taste .hd_nav-menu-sort-list li span {
      width: 15.2vh; } }
    @media screen and (min-width: 768px) and (orientation: landscape) {
      html.iphone #taste .hd_nav-menu-sort-list li span {
        width: 15.2vh; }
      html.android #taste .hd_nav-menu-sort-list li span {
        width: 15.2vh; } }
  #taste .hd_nav-menu-sort-list li.active {
    background-color: #4ed3a0; }
  #taste .hd_nav-menu-sort-list li:hover {
    background-color: #4ed3a0; }

#name .hd_nav-menu-sort-list {
  width: 190px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }
  @media screen and (max-width: 768px) {
    #name .hd_nav-menu-sort-list {
      width: 69.33333vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    #name .hd_nav-menu-sort-list {
      width: 69.33333vh; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone #name .hd_nav-menu-sort-list {
      width: 69.33333vh; }
    html.android #name .hd_nav-menu-sort-list {
      width: 69.33333vh; } }
  #name .hd_nav-menu-sort-list li {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #ff5252;
    margin-right: 3px;
    margin-top: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
    @media screen and (max-width: 768px) {
      #name .hd_nav-menu-sort-list li {
        width: 10.66667vw;
        height: 10.66667vw;
        line-height: 10.13333vw;
        border: 0.26667vw solid #ff5252;
        margin-right: 1.2vw;
        margin-top: 4vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    #name .hd_nav-menu-sort-list li {
      width: 10.66667vh;
      height: 10.66667vh;
      line-height: 10.13333vh;
      border: 0.26667vh solid #ff5252;
      margin-right: 1.2vh;
      margin-top: 4vh; } }
    @media screen and (min-width: 768px) and (orientation: landscape) {
      html.iphone #name .hd_nav-menu-sort-list li {
        width: 10.66667vh;
        height: 10.66667vh;
        line-height: 10.13333vh;
        border: 0.26667vh solid #ff5252;
        margin-right: 1.2vh;
        margin-top: 4vh; }
      html.android #name .hd_nav-menu-sort-list li {
        width: 10.66667vh;
        height: 10.66667vh;
        line-height: 10.13333vh;
        border: 0.26667vh solid #ff5252;
        margin-right: 1.2vh;
        margin-top: 4vh; } }
    #name .hd_nav-menu-sort-list li span {
      display: inline-block;
      width: 18px;
      line-height: 1; }
      @media screen and (max-width: 768px) {
        #name .hd_nav-menu-sort-list li span {
          width: 3.46667vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    #name .hd_nav-menu-sort-list li span {
      width: 3.46667vh; } }
      @media screen and (min-width: 768px) and (orientation: landscape) {
        html.iphone #name .hd_nav-menu-sort-list li span {
          width: 3.46667vh; }
        html.android #name .hd_nav-menu-sort-list li span {
          width: 3.46667vh; } }
    #name .hd_nav-menu-sort-list li:first-of-type {
      width: 164px;
      margin: 0 27.5px;
      border-radius: 15px; }
      @media screen and (max-width: 768px) {
        #name .hd_nav-menu-sort-list li:first-of-type {
          width: 48vw;
          margin: 0 10.66667vw;
          border-radius: 5.33333vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    #name .hd_nav-menu-sort-list li:first-of-type {
      width: 48vh;
      margin: 0 10.66667vh;
      border-radius: 5.33333vh; } }
      @media screen and (min-width: 768px) and (orientation: landscape) {
        html.iphone #name .hd_nav-menu-sort-list li:first-of-type {
          width: 48vh;
          margin: 0 10.66667vh;
          border-radius: 5.33333vh; }
        html.android #name .hd_nav-menu-sort-list li:first-of-type {
          width: 48vh;
          margin: 0 10.66667vh;
          border-radius: 5.33333vh; } }
      #name .hd_nav-menu-sort-list li:first-of-type span {
        width: 37px; }
        @media screen and (max-width: 768px) {
          #name .hd_nav-menu-sort-list li:first-of-type span {
            width: 7.6vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    #name .hd_nav-menu-sort-list li:first-of-type span {
      width: 7.6vh; } }
        @media screen and (min-width: 768px) and (orientation: landscape) {
          html.iphone #name .hd_nav-menu-sort-list li:first-of-type span {
            width: 7.6vh; }
          html.android #name .hd_nav-menu-sort-list li:first-of-type span {
            width: 7.6vh; } }
    #name .hd_nav-menu-sort-list li:nth-of-type(6), #name .hd_nav-menu-sort-list li:last-of-type {
      margin-right: 0; }
    #name .hd_nav-menu-sort-list li.active {
      background-color: #ff5252; }
    #name .hd_nav-menu-sort-list li:hover {
      background-color: #ff5252; }

.modal {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: rgba(255, 255, 255, 0.7);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0;
  display: none;
  z-index: 3; }
  .modal.active {
    display: block; }

.modal-wrap {
  height: 100%;
  overflow-y: auto; }

.modal_l-inner {
  width: 100%;
  height: 100%;
  min-width: 1100px;
  min-height: 747px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  opacity: 0;
  display: none; }
  @media screen and (max-width: 768px) {
    .modal_l-inner {
      min-width: 100%;
      min-height: 103.73333vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .modal_l-inner {
      min-height: 103.73333vh; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .modal_l-inner {
      min-width: 100%;
      min-height: 103.73333vh; }
    html.android .modal_l-inner {
      min-width: 100%;
      min-height: 103.73333vh; } }

.modal_prd {
  background-image: url("../img/modal-prd-bg_pc.png");
  background-size: 694px 747px;
  background-repeat: no-repeat;
  background-position: center top;
  width: 709px;
  height: 747px;
  display: block;
  position: relative;
  background-position: left top;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%); }
  @media screen and (max-width: 768px) {
    .modal_prd {
      background-image: url("../img/modal-prd-bg_sp.png");
      background-size: 96.4vw 103.73333vw;
      background-repeat: no-repeat;
      background-position: center top;
      width: 96.4vw;
      height: 103.73333vw;
      display: block;
      position: relative;
      position: absolute; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .modal_prd {
      background-image: url("../img/modal-prd-bg_sp.png");
      background-size: 96.4vh 103.73333vh;
      background-repeat: no-repeat;
      background-position: center top;
      width: 96.4vh;
      height: 103.73333vh;
      display: block;
      position: relative;
      position: absolute; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .modal_prd {
      background-image: url("../img/modal-prd-bg_sp.png");
      background-size: 96.4vh 103.73333vh;
      background-repeat: no-repeat;
      background-position: center top;
      width: 96.4vh;
      height: 103.73333vh;
      display: block;
      position: relative;
      position: absolute; }
    html.android .modal_prd {
      background-image: url("../img/modal-prd-bg_sp.png");
      background-size: 96.4vh 103.73333vh;
      background-repeat: no-repeat;
      background-position: center top;
      width: 96.4vh;
      height: 103.73333vh;
      display: block;
      position: relative;
      position: absolute; } }

.modal-close {
  background-image: url("../img/modal-close-bg.png");
  background-size: 91px 48px;
  background-repeat: no-repeat;
  background-position: center top;
  width: 91px;
  height: 48px;
  display: block;
  position: relative;
  position: absolute;
  top: 669px;
  left: 309px;
  cursor: pointer; }
  @media screen and (max-width: 768px) {
    .modal-close {
      background-image: url("../img/modal-close-bg.png");
      background-size: 12.53333vw 6.61333vw;
      background-repeat: no-repeat;
      background-position: center top;
      width: 12.53333vw;
      height: 6.61333vw;
      display: block;
      position: relative;
      position: absolute;
      top: 92.53333vw;
      left: 0;
      right: 0;
      margin: auto; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .modal-close {
      background-image: url("../img/modal-close-bg.png");
      background-size: 12.53333vh 6.61333vh;
      background-repeat: no-repeat;
      background-position: center top;
      width: 12.53333vh;
      height: 6.61333vh;
      display: block;
      position: relative;
      position: absolute;
      top: 92.53333vh; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .modal-close {
      background-image: url("../img/modal-close-bg.png");
      background-size: 12.53333vh 6.61333vh;
      background-repeat: no-repeat;
      background-position: center top;
      width: 12.53333vh;
      height: 6.61333vh;
      display: block;
      position: relative;
      position: absolute;
      top: 92.53333vh;
      left: 0;
      right: 0;
      margin: auto; }
    html.android .modal-close {
      background-image: url("../img/modal-close-bg.png");
      background-size: 12.53333vh 6.61333vh;
      background-repeat: no-repeat;
      background-position: center top;
      width: 12.53333vh;
      height: 6.61333vh;
      display: block;
      position: relative;
      position: absolute;
      top: 92.53333vh;
      left: 0;
      right: 0;
      margin: auto; } }
  .modal-close span {
    overflow: hidden;
    white-space: nowrap;
    text-indent: -9999px;
    background-image: url("../img/close-btn.png");
    background-size: 26px 25px;
    background-repeat: no-repeat;
    background-position: center top;
    width: 26px;
    height: 25px;
    display: block;
    position: relative;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
    @media screen and (max-width: 768px) {
      .modal-close span {
        background-image: url("../img/close-btn.png");
        background-size: 3.73333vw 3.6vw;
        background-repeat: no-repeat;
        background-position: center top;
        width: 3.73333vw;
        height: 3.6vw;
        display: block;
        position: relative;
        position: absolute; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .modal-close span {
      background-image: url("../img/close-btn.png");
      background-size: 3.73333vh 3.6vh;
      background-repeat: no-repeat;
      background-position: center top;
      width: 3.73333vh;
      height: 3.6vh;
      display: block;
      position: relative;
      position: absolute; } }
    @media screen and (min-width: 768px) and (orientation: landscape) {
      html.iphone .modal-close span {
        background-image: url("../img/close-btn.png");
        background-size: 3.73333vh 3.6vh;
        background-repeat: no-repeat;
        background-position: center top;
        width: 3.73333vh;
        height: 3.6vh;
        display: block;
        position: relative;
        position: absolute; }
      html.android .modal-close span {
        background-image: url("../img/close-btn.png");
        background-size: 3.73333vh 3.6vh;
        background-repeat: no-repeat;
        background-position: center top;
        width: 3.73333vh;
        height: 3.6vh;
        display: block;
        position: relative;
        position: absolute; } }
  .modal-close:hover span {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg); }

.prd-img-wrap {
  width: 600px;
  height: 300px;
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  @media screen and (max-width: 768px) {
    .prd-img-wrap {
      width: 82.93333vw;
      height: 40vw;
      top: 6.93333vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .prd-img-wrap {
      width: 82.93333vh;
      height: 40vh;
      top: 6.93333vh; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .prd-img-wrap {
      width: 82.93333vh;
      height: 40vh;
      top: 6.93333vh; }
    html.android .prd-img-wrap {
      width: 82.93333vh;
      height: 40vh;
      top: 6.93333vh; } }

.prd-img {
  width: 45%; }

.prd-info-wrap {
  width: 420px;
  height: 260px;
  position: absolute;
  top: 366px;
  left: 0;
  right: 0;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  @media screen and (max-width: 768px) {
    .prd-info-wrap {
      width: 56vw;
      height: 38vw;
      top: 47.06667vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .prd-info-wrap {
      width: 56vh;
      height: 38vh;
      top: 47.06667vh; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .prd-info-wrap {
      width: 56vh;
      height: 38vh;
      top: 47.06667vh; }
    html.android .prd-info-wrap {
      width: 56vh;
      height: 38vh;
      top: 47.06667vh; } }

.prd-info {
  width: 100%;
  font-size: 18px;
  line-height: 1.3;
  pointer-events: none; }
  @media screen and (max-width: 768px) {
    .prd-info {
      font-size: 3.46667vw;
      line-height: 1.2; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .prd-info {
      font-size: 3.46667vh; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .prd-info {
      font-size: 3.46667vh;
      line-height: 1.2; }
    html.android .prd-info {
      font-size: 3.46667vh;
      line-height: 1.2; } }
  .prd-info dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    margin: 0 0 5px 65px; }
    @media screen and (max-width: 768px) {
      .prd-info dl {
        margin: 0 0 0.8vw 0.8vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .prd-info dl {
      margin: 0 0 0.8vh 0.8vh; } }
    @media screen and (min-width: 768px) and (orientation: landscape) {
      html.iphone .prd-info dl {
        margin: 0 0 0.8vh 0.8vh; }
      html.android .prd-info dl {
        margin: 0 0 0.8vh 0.8vh; } }
    .prd-info dl:last-of-type {
      margin-bottom: 0; }
  .prd-info dt {
    width: 154px;
    margin-right: 20px;
    position: relative; }
    @media screen and (max-width: 768px) {
      .prd-info dt {
        width: 29.6vw;
        margin-right: 0.66667vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .prd-info dt {
      width: 29.6vh;
      margin-right: 0.66667vh; } }
    @media screen and (min-width: 768px) and (orientation: landscape) {
      html.iphone .prd-info dt {
        width: 29.6vh;
        margin-right: 0.66667vh; }
      html.android .prd-info dt {
        width: 29.6vh;
        margin-right: 0.66667vh; } }
    .prd-info dt::after {
      content: "：";
      display: block;
      letter-spacing: 0;
      position: absolute;
      top: 0;
      right: 0; }
  .prd-info dd {
    width: 181px; }
    @media screen and (max-width: 768px) {
      .prd-info dd {
        width: 24.93333vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .prd-info dd {
      width: 24.93333vh; } }
    @media screen and (min-width: 768px) and (orientation: landscape) {
      html.iphone .prd-info dd {
        width: 24.93333vh; }
      html.android .prd-info dd {
        width: 24.93333vh; } }

.prd-name {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: #292929;
  padding-bottom: 15px;
  margin-bottom: 15px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  @media screen and (max-width: 768px) {
    .prd-name {
      font-size: 4.26667vw;
      padding-bottom: 1.73333vw;
      margin-bottom: 1.73333vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .prd-name {
      font-size: 4.26667vh;
      padding-bottom: 1.73333vh;
      margin-bottom: 1.73333vh; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .prd-name {
      font-size: 4.26667vh;
      padding-bottom: 1.73333vh;
      margin-bottom: 1.73333vh; }
    html.android .prd-name {
      font-size: 4.26667vh;
      padding-bottom: 1.73333vh;
      margin-bottom: 1.73333vh; } }
  .prd-name::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #ffa6b5;
    position: absolute;
    bottom: 0;
    left: 0; }
  .prd-name .jas_flag {
    width: 39px;
    margin-left: 13px;
    -ms-flex-negative: 0;
    flex-shrink: 0; }
    @media screen and (max-width: 768px) {
      .prd-name .jas_flag {
        width: 6.533vw; } }

.prd-maker dt {
  letter-spacing: 0.84em; }

.prd-salt dt {
  text-align: right;
  padding-right: 1em; }

.wall-wrap {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  pointer-events: none;
  -webkit-perspective: 900px;
  perspective: 900px; }

.wall {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
  pointer-events: auto;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  -webkit-perspective: 500px;
  perspective: 500px; }
  .wall .wall-inner {
    height: 100%;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    opacity: 0; }
    .wall .wall-inner .card-block {
      position: absolute;
      top: 0;
      left: 0;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-transform-origin: center center;
      transform-origin: center center; }
    .wall .wall-inner div.card {
      position: absolute;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      cursor: pointer;
      pointer-events: none; }
      .wall .wall-inner div.card div.card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 10px;
        font-size: 50px;
        z-index: 2;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        transition: -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
        .wall .wall-inner div.card div.card-inner:hover {
          -webkit-transform: translateZ(8px);
          transform: translateZ(8px); }
          .wall .wall-inner div.card div.card-inner:hover + .card-shadow {
            background-color: rgba(0, 0, 0, 0.12);
            -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
          @media all and (-ms-high-contrast: none) {
            .wall .wall-inner div.card div.card-inner:hover {
              -webkit-transform: translateZ(0px);
              transform: translateZ(0px); }
              .wall .wall-inner div.card div.card-inner:hover + .card-shadow {
                background-color: rgba(0, 0, 0, 0.1);
                -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
                box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); } }
        .wall .wall-inner div.card div.card-inner.pink {
          background-image: url("../img/pink-bg.jpg"); }
        .wall .wall-inner div.card div.card-inner.blue {
          background-image: url("../img/blue-bg.jpg"); }
        .wall .wall-inner div.card div.card-inner.yellow {
          background-image: url("../img/yellow-bg.jpg"); }
        .wall .wall-inner div.card div.card-inner.green {
          background-image: url("../img/green-bg.jpg"); }
        .wall .wall-inner div.card div.card-inner img {
          -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d; }
      .wall .wall-inner div.card div.card-shadow {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.12);
        border-radius: 10px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        -webkit-transform: translateX(3px) translateY(3px) translateZ(-5px);
        transform: translateX(3px) translateY(3px) translateZ(-5px);
        -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        -webkit-transition: all .3s;
        transition: all .3s;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d; }

.annotation {
  font-size: 12px;
  font-weight: bold;
  color: #292929;
  position: absolute;
  bottom: 40px;
  right: 19px;
  text-align: right; }
  @media screen and (max-width: 768px) {
    .annotation {
      font-size: 2.13333vw;
      bottom: 6.66667vw;
      right: 1.2vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .annotation {
      font-size: 2.13333vh;
      bottom: 6.66667vh;
      right: 1.2vh; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .annotation {
      font-size: 2.13333vh;
      bottom: 6.66667vh;
      right: 1.2vh; }
    html.android .annotation {
      font-size: 2.13333vh;
      bottom: 6.66667vh;
      right: 1.2vh; } }

.ft {
  width: 100%;
  padding-bottom: 5px;
  position: absolute;
  left: 0;
  bottom: 0; }
  @media screen and (max-width: 768px) {
    .ft {
      padding-bottom: 1.2vw; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .ft {
      padding-bottom: 1.2vh; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .ft {
      padding-bottom: 1.2vh; }
    html.android .ft {
      padding-bottom: 1.2vh; } }

.ft_copy {
  width: 291px;
  margin: 0 19px 0 auto; }
  @media screen and (max-width: 768px) {
    .ft_copy {
      width: 51.6vw;
      margin: 0 1.2vw 0 auto; } }
  @media screen and (max-width: 768px) and (orientation: landscape) and (max-width: 768px) {
    .ft_copy {
      width: 51.6vh;
      margin: 0 1.2vh 0 auto; } }
  @media screen and (min-width: 768px) and (orientation: landscape) {
    html.iphone .ft_copy {
      width: 51.6vh;
      margin: 0 1.2vh 0 auto; }
    html.android .ft_copy {
      width: 51.6vh;
      margin: 0 1.2vh 0 auto; } }