@charset "UTF-8";
/* ===================================================================
CSS information
 file name  :shared.css
 style info :共通のスタイル
=================================================================== */
/* ==========================================================
  BASE
========================================================== */
body {
  font-family: "FOT-ロダンNTLG Pro B", "NewRodinPro-B", "ヒラギノ角ゴ Pro W3";
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  background-color: #000;
  line-height: 1.8; }
  body:focus {
    outline: none; }
  @media screen and (min-width: 751px) {
    body {
      font-size: 16px; } }
  @media screen and (max-width: 750px) {
    body {
      font-size: 4vw; } }

div,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
section,
p,
a {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

a,
a:visited,
a:hover {
  color: #000;
  text-decoration: none; }

.new {
  position: relative; }
  .new:after {
    pointer-events: none;
    content: "";
    background: url(/yw-switch/img/shared/icn_new.png) no-repeat 0 0;
    position: absolute;
    -webkit-animation: bounce 1s ease infinite normal 1s;
    animation: bounce 1s ease infinite normal 1s; }

@-webkit-keyframes bounce {
  from, 20%, 50%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.214, 0.61, 0.354, 1);
    animation-timing-function: cubic-bezier(0.214, 0.61, 0.354, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  40%, 44% {
    -webkit-animation-timing-function: cubic-bezier(0.754, 0.05, 0.854, 0.06);
    animation-timing-function: cubic-bezier(0.754, 0.05, 0.854, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0); }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.754, 0.05, 0.854, 0.06);
    animation-timing-function: cubic-bezier(0.754, 0.05, 0.854, 0.06);
    -webkit-transform: translate3d(0, -14px, 0);
    transform: translate3d(0, -14px, 0); }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0); } }

@keyframes bounce {
  from, 20%, 50%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.214, 0.61, 0.354, 1);
    animation-timing-function: cubic-bezier(0.214, 0.61, 0.354, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  40%, 44% {
    -webkit-animation-timing-function: cubic-bezier(0.754, 0.05, 0.854, 0.06);
    animation-timing-function: cubic-bezier(0.754, 0.05, 0.854, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0); }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.754, 0.05, 0.854, 0.06);
    animation-timing-function: cubic-bezier(0.754, 0.05, 0.854, 0.06);
    -webkit-transform: translate3d(0, -14px, 0);
    transform: translate3d(0, -14px, 0); }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0); } }
    @media screen and (min-width: 1200px) {
      .new:after {
        width: 56px !important;
        height: 55px !important; } }
    @media screen and (min-width: 751px) {
      .new:after {
        background-size: 100%;
        padding-bottom: 5.4vw;
        width: 4.4vw;
        height: auto; } }
    @media screen and (max-width: 750px) {
      .new:after {
        background-size: 100%;
        padding-bottom: 12vw;
        width: 10vw;
        height: auto; } }

#wrap {
  width: 100%;
  height: 100%;
  position: relative;
  background: #fff;
  z-index: 10; }

/* ==========================================================
    MODULE
  ========================================================== */
@media screen and (min-width: 751px) {
  .pcNone {
    display: none !important; } }

@media screen and (max-width: 750px) {
  .spNone {
    display: none !important; } }

img {
  width: 100% !important; }

/* ==========================================================
    HEADER
  ========================================================== */
header {
  width: 100%;
  background: #000;
  height: auto;
  position: relative;
  z-index: -1; }
  header .inner {
    height: 44px; }
    @media screen and (min-width: 751px) {
      header .inner {
        padding: 0 20px;
        max-width: 1200px;
        margin: 0 auto; } }
    @media screen and (max-width: 750px) {
      header .inner {
        height: 14.7vw; } }
    header .inner .l5Logo {
      float: left; }
      @media screen and (min-width: 751px) {
        header .inner .l5Logo {
          width: 170px; } }
      @media screen and (max-width: 750px) {
        header .inner .l5Logo {
          width: 36%;
          padding: 2vw 0 0 20px; } }
    header .inner .switch-logo {
      float: right; }
      @media screen and (min-width: 751px) {
        header .inner .switch-logo {
          width: 90px;
          padding-top: 0; } }
      @media screen and (max-width: 750px) {
        header .inner .switch-logo {
          width: 16%;
          padding: 14.7vw 0 0; } }
  header .head {
    height: 175px; }
    @media screen and (min-width: 1200px) {
      header .head {
        height: 175px !important;
        width: 100% !important;
        margin: 0 auto;
        background: url(/yw-switch/img/shared/header_bg.png) no-repeat right top, url(/yw-switch/img/top/bg_white.gif) !important; } }
    @media screen and (min-width: 751px) {
      header .head {
        height: 14.6vw;
        width: 100% !important;
        margin: 0 auto;
        background: url(/yw-switch/img/shared/header_bg.png) no-repeat 10vw top, url(/yw-switch/img/top/bg_white.gif); } }
    @media screen and (max-width: 750px) {
      header .head {
        margin: 0 auto;
        height: 20vw;
        background: url(/yw-switch/img/shared/header_bg.png) no-repeat 10vw top, url(/yw-switch/img/top/bg_white.gif); } }
    @media screen and (min-width: 751px) {
      header .head .inner {
        width: 100%;
        height: 14.6vw;
        margin: 0 auto;
        position: relative; } }
    @media screen and (min-width: 1200px) {
      header .head .inner {
        width: 1160px !important;
        height: 175px !important;
        margin: 0 auto;
        position: relative; } }
    @media screen and (max-width: 750px) {
      header .head .inner {
        width: 100%;
        height: 20vw;
        margin: 0 auto;
        position: relative; } }
    @media screen and (min-width: 1200px) {
      header .head .logo {
        width: 268px !important;
        padding: 10px 0 0 !important; } }
    @media screen and (min-width: 751px) {
      header .head .logo {
        width: 20%;
        padding: 1vw 0 0; } }
    @media screen and (max-width: 750px) {
      header .head .logo {
        width: 36%; } }
    @media screen and (min-width: 1200px) {
      header .head .jibanyan {
        width: auto !important;
        position: absolute;
        bottom: 0 !important;
        right: 80px !important; } }
    @media screen and (min-width: 751px) {
      header .head .jibanyan {
        width: 25%;
        position: absolute;
        bottom: 0;
        right: 10vw; } }
    @media screen and (max-width: 750px) {
      header .head .jibanyan {
        width: 41%;
        position: absolute;
        bottom: 0vw;
        right: 17vw;
        padding: 0; } }
    header .head ul {
      position: absolute; }
      @media screen and (min-width: 1200px) {
        header .head ul {
          width: 780px !important;
          top: -3px !important;
          left: 50% !important;
          -webkit-transform: translateX(-40%) !important;
          -ms-transform: translateX(-40%) !important;
          transform: translateX(-40%) !important; } }
      @media screen and (min-width: 751px) {
        header .head ul {
          width: 69%;
          top: -2%;
          left: 50%;
          -webkit-transform: translateX(-40%);
          -ms-transform: translateX(-40%);
          transform: translateX(-40%); } }
      header .head ul li {
        float: left; }
        @media screen and (min-width: 1200px) {
          header .head ul li {
            width: 247px; } }
        @media screen and (min-width: 751px) {
          header .head ul li {
            width: 30%; } }
        header .head ul li:first-child {
          margin: 0 0 0 35px; }
        header .head ul li.new:after {
          z-index: 999; }
          @media screen and (min-width: 1200px) {
            header .head ul li.new:after {
              width: 46px !important;
              height: 55px !important; } }
          @media screen and (min-width: 1200px) {
            header .head ul li.new:after {
              top: -5px !important;
              right: 15px !important; } }
          @media screen and (min-width: 751px) {
            header .head ul li.new:after {
              top: -1vw;
              right: 1vw; } }
          @media screen and (max-width: 750px) {
            header .head ul li.new:after {
              top: 31%;
              right: 10%; } }
    @media screen and (min-width: 1200px) {
      header .head .top-btn {
        width: 229px !important;
        position: absolute;
        top: 75px !important;
        right: 414px !important; } }
    @media screen and (min-width: 751px) {
      header .head .top-btn {
        width: 20%;
        position: absolute;
        top: 75px;
        right: 35vw; } }
    @media screen and (max-width: 750px) {
      header .head .top-btn {
        width: 34%;
        position: absolute;
        top: -82px;
        right: 20px; } }

.gnav {
  margin: 0;
  width: 100%;
  height: 100vh;
  overflow: auto;
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  background: none; }
  .gnav h1 {
    width: 39vw;
    margin: 2.7vw auto 0; }
  .gnav .close {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 3; }
  .gnav .overlay {
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url(/yw-switch/img/shared/menu_bg.png) repeat;
    display: none; }
  .gnav ul {
    margin: 2.7vw 0 0; }
  .gnav li {
    width: 90vw;
    margin: 0 auto; }
    .gnav li.new:after {
      z-index: 999; }
      @media screen and (min-width: 1200px) {
        .gnav li.new:after {
          top: -5px !important;
          right: 0; } }
      @media screen and (min-width: 751px) {
        .gnav li.new:after {
          top: -2vw;
          right: 0; } }
      @media screen and (max-width: 750px) {
        .gnav li.new:after {
          top: -10%;
          right: 4%; } }

.menuBtn {
  background: url(/yw-switch/img/shared/nav_btn.png) no-repeat center;
  background-size: cover;
  width: 88px;
  height: 88px;
  color: transparent;
  font-size: 0;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 3; }
  @media screen and (min-width: 1200px) {
    .menuBtn {
      width: 88px !important;
      height: 88px !important; } }
  @media screen and (max-width: 750px) {
    .menuBtn {
      width: 11.7vw;
      height: 11.7vw; } }

/* ==========================================================
    FOOTER
  ========================================================== */
footer {
  width: 100%;
  background: #000;
  position: relative;
  z-index: 4; }
  @media screen and (max-width: 750px) {
    footer {
      z-index: -1; } }
  footer img {
    width: 100%; }
  @media screen and (max-width: 750px) {
    footer {
      padding-bottom: 2%; } }
  footer #productArea {
    background: url(/yw-switch/img/shared/bg_product.jpg) no-repeat top center;
    background-size: cover; }
    @media screen and (min-width: 751px) {
      footer #productArea {
        padding: 66px 4% 44px; } }
    @media screen and (max-width: 750px) {
      footer #productArea {
        padding: 8vw 0; } }
    footer #productArea .productBox {
      background: #fff;
      border-radius: 10px;
      margin: 0 auto; }
      @media screen and (min-width: 1200px) {
        footer #productArea .productBox {
          padding: 60px 60px 60px 80px !important; } }
      @media screen and (min-width: 751px) {
        footer #productArea .productBox {
          max-width: 986px;
          padding: 6% 6% 6% 8%; } }
      @media screen and (max-width: 750px) {
        footer #productArea .productBox {
          width: 94%;
          padding: 10vw 3vw 7vw; } }
      @media screen and (min-width: 751px) {
        footer #productArea .productBox figure {
          float: left;
          width: 26%;
          padding-top: 10px; } }
      @media screen and (max-width: 750px) {
        footer #productArea .productBox figure {
          width: 46%;
          margin: 0 auto 2vw; } }
      @media screen and (min-width: 751px) {
        footer #productArea .productBox .productInfo {
          float: right;
          width: 70%; } }
      footer #productArea .productBox .productInfo h1 {
        border-bottom: solid 1px #cecece; }
        @media screen and (min-width: 1200px) {
          footer #productArea .productBox .productInfo h1 {
            font-size: 25px !important; } }
        @media screen and (min-width: 751px) {
          footer #productArea .productBox .productInfo h1 {
            font-size: 2.1vw;
            padding-bottom: 10px; } }
        @media screen and (max-width: 750px) {
          footer #productArea .productBox .productInfo h1 {
            text-align: center;
            font-size: 4vw;
            padding-bottom: 2vw; } }
      footer #productArea .productBox .productInfo dl {
        border-bottom: solid 1px #cecece; }
        @media screen and (min-width: 1200px) {
          footer #productArea .productBox .productInfo dl {
            font-size: 16px !important; } }
        @media screen and (min-width: 751px) {
          footer #productArea .productBox .productInfo dl {
            font-size: 1.34vw;
            padding: 10px 0; } }
        @media screen and (max-width: 750px) {
          footer #productArea .productBox .productInfo dl {
            font-size: 3vw;
            padding: 2vw; } }
        footer #productArea .productBox .productInfo dl dt {
          float: left; }
          @media screen and (min-width: 751px) {
            footer #productArea .productBox .productInfo dl dt {
              width: 4.5em; } }
          @media screen and (max-width: 750px) {
            footer #productArea .productBox .productInfo dl dt {
              width: 4.6em; } }
        footer #productArea .productBox .productInfo dl dd {
          float: left;
          padding-left: 0.5em;
          text-indent: -0.5em; }
          @media screen and (max-width: 750px) {
            footer #productArea .productBox .productInfo dl dd {
              width: 21em; } }
      footer #productArea .productBox .productInfo .caution {
        position: relative; }
        footer #productArea .productBox .productInfo .caution a {
          text-decoration: underline; }
        @media screen and (min-width: 1200px) {
          footer #productArea .productBox .productInfo .caution {
            padding-left: 1rem !important;
            font-size: 13px !important;
            margin: 10px 0 0 !important; } }
        @media screen and (min-width: 751px) {
          footer #productArea .productBox .productInfo .caution {
            padding-left: 0.8rem;
            font-size: 1.19vw;
            margin: 0.4vw 0 0; } }
        @media screen and (max-width: 750px) {
          footer #productArea .productBox .productInfo .caution {
            padding-left: 2rem;
            font-size: 2vw;
            margin: 1vw 0 0; } }
        footer #productArea .productBox .productInfo .caution span {
          position: absolute;
          top: 0;
          left: 0; }
          @media screen and (max-width: 750px) {
            footer #productArea .productBox .productInfo .caution span {
              left: 2.2vw; } }
  @media screen and (min-width: 751px) {
    footer .fTop {
      background: #000;
      border-top: solid 1px #515151;
      border-bottom: solid 1px #515151;
      height: 76px; } }
  @media screen and (max-width: 750px) {
    footer .fTop {
      margin-bottom: 5vw; } }
  @media screen and (min-width: 751px) {
    footer .fTop .inner {
      max-width: 1080px;
      margin: 0 auto;
      padding: 0 20px; } }
  @media screen and (max-width: 750px) {
    footer .fTop .inner #pageTop {
      background: #ffea00;
      margin-bottom: 4vw; } }
  footer .fTop .inner #pageTop a {
    background: #ffea00;
    display: block; }
    @media screen and (min-width: 751px) {
      footer .fTop .inner #pageTop a {
        float: right;
        width: 198px;
        height: 74px;
        padding: 18px 54px;
        border-left: solid 1px #515151;
        border-right: solid 1px #515151;
        border-bottom: solid 1px #515151; } }
    @media screen and (max-width: 750px) {
      footer .fTop .inner #pageTop a {
        padding: 3vw 0 4vw; } }
    @media screen and (max-width: 750px) {
      footer .fTop .inner #pageTop a img {
        width: 18% !important;
        margin: 0 auto;
        display: block; } }
  footer .fTop .inner .snsBtn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch; }
    @media screen and (min-width: 751px) {
      footer .fTop .inner .snsBtn {
        float: left;
        width: 182px;
        padding-top: 12px; } }
    @media screen and (max-width: 750px) {
      footer .fTop .inner .snsBtn {
        width: 40%;
        margin: 0 auto; } }
    @media screen and (min-width: 751px) {
      footer .fTop .inner .snsBtn li {
        width: 50px; } }
    @media screen and (max-width: 750px) {
      footer .fTop .inner .snsBtn li {
        width: 28%; } }
  footer .fBottom {
    color: #fff;
    text-align: center; }
    @media screen and (min-width: 751px) {
      footer .fBottom {
        padding-bottom: 10px; } }
    footer .fBottom .inner {
      text-align: left; }
      @media screen and (min-width: 751px) {
        footer .fBottom .inner {
          max-width: 1182px;
          margin: 0 auto;
          padding: 20px; } }
      footer .fBottom .inner .player {
        background: url(/yw-switch/img/top/bg_white.gif);
        border-radius: 10px; }
        @media screen and (min-width: 1200px) {
          footer .fBottom .inner .player {
            width: 1142px !important;
            margin: 0 auto 40px !important;
            padding: 30px 0 !important; } }
        @media screen and (min-width: 751px) {
          footer .fBottom .inner .player {
            width: 100%;
            margin: 0 auto 3.3vw;
            padding: 2.5vw 0; } }
        @media screen and (max-width: 750px) {
          footer .fBottom .inner .player {
            width: 96.6%;
            margin: 0 auto 3.3vw;
            padding: 4.6vw 0 5.3vw; } }
        footer .fBottom .inner .player p {
          color: #000;
          text-align: center; }
          @media screen and (min-width: 1200px) {
            footer .fBottom .inner .player p {
              font-size: 20px !important; } }
          @media screen and (min-width: 751px) {
            footer .fBottom .inner .player p {
              font-size: 1.6vw; } }
          @media screen and (max-width: 750px) {
            footer .fBottom .inner .player p {
              font-size: 2.6vw; } }
        @media screen and (min-width: 1200px) {
          footer .fBottom .inner .player h2 {
            width: 234px !important;
            margin: 0 auto 24px !important; } }
        @media screen and (min-width: 751px) {
          footer .fBottom .inner .player h2 {
            width: 20vw;
            margin: 0 auto 2vw; } }
        @media screen and (max-width: 750px) {
          footer .fBottom .inner .player h2 {
            width: 31.2vw;
            margin: -2vw auto 3vw; } }
        @media screen and (min-width: 1200px) {
          footer .fBottom .inner .player ul {
            width: 1082px !important;
            margin: 0 auto; } }
        @media screen and (min-width: 751px) {
          footer .fBottom .inner .player ul {
            width: 90.2vw;
            margin: 0 auto; } }
        @media screen and (max-width: 750px) {
          footer .fBottom .inner .player ul {
            width: 80vw;
            margin: 0 auto; } }
        @media screen and (min-width: 751px) {
          footer .fBottom .inner .player ul li {
            float: left; } }
        @media screen and (min-width: 1200px) {
          footer .fBottom .inner .player ul li.update {
            width: 526px !important; } }
        @media screen and (min-width: 751px) {
          footer .fBottom .inner .player ul li.update {
            width: 43.8vw; } }
        @media screen and (min-width: 1200px) {
          footer .fBottom .inner .player ul li.faq {
            width: 535px !important; } }
        @media screen and (min-width: 751px) {
          footer .fBottom .inner .player ul li.faq {
            width: 44.6vw; } }
        @media screen and (min-width: 1200px) {
          footer .fBottom .inner .player ul li:first-child {
            margin: 0 21px 0 0 !important; } }
        @media screen and (min-width: 751px) {
          footer .fBottom .inner .player ul li:first-child {
            margin: 0 1.7vw 0 0; } }
        @media screen and (max-width: 750px) {
          footer .fBottom .inner .player ul li:first-child {
            margin: 0 0 2.6vw; } }
        footer .fBottom .inner .player ul li.new:after {
          top: -10px;
          right: 10px; }
      @media screen and (min-width: 751px) {
        footer .fBottom .inner .bnrYw4 {
          width: 570px;
          margin: 0 auto 20px; } }
      @media screen and (max-width: 750px) {
        footer .fBottom .inner .bnrYw4 {
          width: 80%;
          margin: 0 auto 2vw; } }
      @media screen and (min-width: 751px) {
        footer .fBottom .inner .bnr {
          float: left;
          margin-bottom: 16px; } }
      @media screen and (max-width: 750px) {
        footer .fBottom .inner .bnr {
          width: 44%;
          margin: 0 auto 4vw; } }
      @media screen and (min-width: 751px) {
        footer .fBottom .inner .bnr li {
          float: left;
          width: 160px;
          margin-right: 10px; } }
      @media screen and (max-width: 750px) {
        footer .fBottom .inner .bnr li {
          margin-bottom: 2vw; } }
      @media screen and (min-width: 751px) {
        footer .fBottom .inner .link {
          float: right;
          margin-bottom: 16px; } }
      @media screen and (max-width: 750px) {
        footer .fBottom .inner .link {
          border-top: solid 1px #dadada;
          margin-bottom: 1.6vw; } }
      footer .fBottom .inner .link li {
        position: relative; }
        @media screen and (min-width: 751px) {
          footer .fBottom .inner .link li {
            display: inline-block; } }
        footer .fBottom .inner .link li a {
          color: #fff; }
          @media screen and (min-width: 751px) {
            footer .fBottom .inner .link li a {
              display: inline-block;
              border-radius: 100px;
              border: solid 2px #dadada;
              text-align: center;
              width: 230px;
              padding: 4px 0 6px;
              font-size: 15px; } }
          @media screen and (max-width: 750px) {
            footer .fBottom .inner .link li a {
              display: block;
              border-bottom: solid 1px #dadada;
              padding: 2.6vw 0 3vw 4vw;
              font-size: 3vw; } }
          @media screen and (min-width: 751px) {
            footer .fBottom .inner .link li a.contact {
              width: 148px; } }
        footer .fBottom .inner .link li:after {
          content: '';
          border: 0px;
          -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          transform: rotate(45deg);
          position: absolute;
          top: 50%; }
          @media screen and (min-width: 751px) {
            footer .fBottom .inner .link li:after {
              border-top: solid 2px #fff;
              border-right: solid 2px #fff;
              width: 6px;
              height: 6px;
              right: 14px;
              margin-top: -4px; } }
          @media screen and (max-width: 750px) {
            footer .fBottom .inner .link li:after {
              border-top: solid 3px #fff;
              border-right: solid 3px #fff;
              width: 2vw;
              height: 2vw;
              right: 3vw;
              margin-top: -1.4vw; } }
      footer .fBottom .inner .notes {
        color: #9a9a9a;
        clear: both; }
        @media screen and (min-width: 751px) {
          footer .fBottom .inner .notes {
            font-size: 12px; } }
        @media screen and (max-width: 750px) {
          footer .fBottom .inner .notes {
            font-size: 2.4vw;
            padding-left: 2vw; } }
        footer .fBottom .inner .notes li {
          padding-left: 1em;
          text-indent: -1em; }
          @media screen and (min-width: 751px) {
            footer .fBottom .inner .notes li {
              font-size: 12px; } }
  footer #copyright {
    color: #9a9a9a; }
    @media screen and (min-width: 751px) {
      footer #copyright {
        font-size: 12px; } }
    @media screen and (max-width: 750px) {
      footer #copyright {
        font-size: 2.4vw; } }