@charset "UTF-8";
/* media-queries.css */
@media screen and (min-width: 1680px) {
  /* 1680px以上 */ }
@media screen and (max-width: 1440px) {
  /* 1440px以下 */
  .contactBox {
    padding-left: 5vw;
    padding-right: 5vw; }

  #top-page .inner {
    padding-left: 5vw;
    padding-right: 5vw; } }
@media screen and (max-width: 1280px) {
  /* 1280px以下 */ }
@media screen and (max-width: 1080px) {
  /* 1080px以下 */ }
@media screen and (max-width: 1023px) {
  /* 1024px以下 */
  #header {
    display: block; }
    #header .left h1 {
      padding: 1em 0; }
    #header .right {
      background: rgba(255, 255, 255, 0.95);
      display: flex;
      align-items: center;
      position: absolute;
      top: -100vh;
      left: 0;
      width: 100%;
      height: 100vh;
      transition: all .35s; }
      #header .right ul {
        flex-wrap: wrap;
        width: 100%;
        height: auto; }
        #header .right ul li {
          width: 100%; }
          #header .right ul li a {
            border-top: 1px solid #eceae4;
            padding: 1em 5vw; }
          #header .right ul li:first-child a {
            border-top: none; }
          #header .right ul li ul.child_menu {
            background: transparent;
            opacity: 1;
            transform: scale(1, 1);
            visibility: visible; }
            #header .right ul li ul.child_menu li a {
              background: transparent;
              padding: 1em 5vw; }
    #header.show .right {
      top: 0; }
    #header .menu {
      display: block;
      width: 3em;
      height: 3em;
      position: absolute;
      top: 50%;
      right: 2.5vw;
      transform: translateY(-50%); }
      #header .menu span {
        background: #000;
        display: block;
        width: 75%;
        height: 1px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: all .15s; }
        #header .menu span::before, #header .menu span::after {
          background: #000;
          content: '';
          display: block;
          width: 100%;
          height: 1px;
          position: absolute;
          right: 0;
          transition: all .25s; }
        #header .menu span::before {
          top: -0.65em; }
        #header .menu span::after {
          bottom: -0.65em; }
      #header .menu.show span {
        background: transparent; }
        #header .menu.show span::before {
          top: 0;
          transform: rotate(45deg); }
        #header .menu.show span::after {
          bottom: 0;
          transform: rotate(-45deg); }

  .btnBox .btn a {
    box-sizing: border-box;
    width: 50%; }

  #top-page .brand .inner .content .left .btnBox .btn a,
  #top-page .brand .inner .content .right .btnBox .btn a {
    width: 90%; }
  #top-page .news .inner .content {
    flex-wrap: wrap; }
    #top-page .news .inner .content .left,
    #top-page .news .inner .content .right {
      width: 100%; }
    #top-page .news .inner .content .left .btnBox.pc {
      display: none; }
    #top-page .news .inner .content .right ul {
      margin-bottom: 3em; }
    #top-page .news .inner .content .right .btnBox.smp {
      display: block !important; } }
@media screen and (max-width: 820px) {
  /* 820px以下 */
  #header .left h1 {
    width: 25vw; }
  #header .right ul li {
    font-size: 120%; }

  #footer .footerTop .left {
    font-size: 100%; }
  #footer .footerBottom .left {
    display: flex;
    align-items: baseline;
    justify-content: space-between; }
    #footer .footerBottom .left h2 {
      margin-right: 0;
      width: 25vw; }
  #footer .footerBottom .right ul {
    flex-wrap: wrap;
    margin-bottom: 2em; }
    #footer .footerBottom .right ul li {
      font-size: 100%;
      margin-left: 0;
      width: 100%; }
      #footer .footerBottom .right ul li a {
        box-sizing: border-box;
        display: block;
        padding: 0.5em 0;
        width: 100%; }

  #top-page .howto .inner .content {
    flex-wrap: wrap; }
    #top-page .howto .inner .content .titleBox,
    #top-page .howto .inner .content .txtBox {
      width: 100%; }

  .tab-none {
    display: none !important; }

  .tab {
    display: block !important; } }
@media screen and (max-width: 640px) {
  /* 640px以下 */
  #top-page .brand .inner .content {
    flex-wrap: wrap; }
    #top-page .brand .inner .content .left,
    #top-page .brand .inner .content .right {
      width: 100%; }
      #top-page .brand .inner .content .left .btnBox .btn a,
      #top-page .brand .inner .content .right .btnBox .btn a {
        width: 100%; }
    #top-page .brand .inner .content .left {
      margin-bottom: 3em; }
  #top-page .where .inner .content ul {
    flex-wrap: wrap;
    margin-bottom: 0; }
    #top-page .where .inner .content ul li {
      margin-bottom: 0.5em;
      width: 24%; } }
@media screen and (max-width: 480px) {
  /* 480px以下 */
  #header {
    padding-left: 5vw;
    padding-right: 5vw; }
    #header .left h1 {
      width: 40vw; }

  #footer {
    padding-left: 5vw;
    padding-right: 5vw; }
    #footer .footerTop {
      flex-wrap: wrap;
      padding: 3em 0 0; }
      #footer .footerTop .left,
      #footer .footerTop .right {
        width: 100%; }
      #footer .footerTop .left {
        order: 2; }
        #footer .footerTop .left ul li {
          border-bottom: 1px solid #FFF;
          margin-bottom: 0; }
          #footer .footerTop .left ul li:last-child {
            border-bottom: none; }
          #footer .footerTop .left ul li a {
            display: block;
            padding: 1em 0;
            width: 100%; }
          #footer .footerTop .left ul li span {
            border-bottom: 1px solid #FFF;
            margin-bottom: 0;
            padding-bottom: 1em; }
          #footer .footerTop .left ul li ul li a {
            box-sizing: border-box;
            display: block;
            font-size: 100%;
            margin-bottom: 0; }
      #footer .footerTop .right {
        margin-bottom: 3em;
        order: 1; }
        #footer .footerTop .right ul {
          justify-content: space-between;
          padding-left: 10vw;
          padding-right: 10vw; }
          #footer .footerTop .right ul li {
            margin-left: 0;
            width: 16%; }
            #footer .footerTop .right ul li a {
              width: 100%; }
    #footer .footerBottom {
      flex-wrap: wrap; }
      #footer .footerBottom .left,
      #footer .footerBottom .right {
        text-align: center;
        width: 100%; }
      #footer .footerBottom .left {
        margin-top: 1em;
        margin-bottom: 2em; }
        #footer .footerBottom .left h2 {
          margin: 0 auto;
          width: 75%; }
      #footer .footerBottom .right ul li {
        font-size: 100%; }

  .btnBox .btn a {
    width: 100%; }

  #top-page .inner {
    padding-top: 4em;
    padding-bottom: 4em; }
  #top-page .contactBox .inner {
    padding-top: 2em;
    padding-bottom: 2.5em; }
    #top-page .contactBox .inner .titleBox {
      margin-bottom: 2em; }

  .pc {
    display: none !important; }

  .smp-none {
    display: none !important; }

  .smp {
    display: block !important; } }