@charset "UTF-8";

/**
 * ================================================================================
 * Table of Contents:
 *
 * Top Page Settings
 * ================================================================================
 */ 

 




/**
 * ================================================================================
 *  Top Page Settings
 * ================================================================================
 */


body.top_page .header:before { background-color: transparent; }

body.top_page .contents { padding-top: 0; }
html.no_js body.top_page .contents { padding-top: 60px; }



/**
 * Main Visual
 * -------------------------------
 */

body.top_page .sec_mv {
  width: 100%;
  height: calc(100vw * (770 / 1540));
  }

  body.top_page .sec_mv:before {
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 2;
    }

  body.top_page .sec_mv .sec_mv_inner {
    padding-top: calc(100vw * (300 / 1540));
    align-content: flex-start;
    align-items: flex-start;
    position: relative;
    z-index: 3;
    }


  /* -- .sec_mv_ttl -- */
  body.top_page .sec_mv .sec_mv_ttl {}

    body.top_page .sec_mv .sec_mv_ttl > h1 {
      font-family: "Saira", sans-serif;
      font-weight: 400;
      font-size: calc(100vw * (34 / 1540));
      line-height: 1.4;
      letter-spacing: 0.25em;
      }

    body.top_page .sec_mv .sec_mv_ttl > p { margin-top: calc(100vw * (30 / 1540)); }

      body.top_page .sec_mv .sec_mv_ttl > p img { width: calc(100vw * (220 / 1540)); }


  /* -- .sec_mv_product -- */
  body.top_page .sec_mv .sec_mv_product {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
    }

    body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists { list-style: none; }

      body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li {
        display: table;
        width: calc(100vw * (230 / 1540));
        height: calc(100vw * (230 / 1540));
        position: absolute;
        }
      body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(1) {
        top: calc(100vw * (55 / 1540));
        left: calc(100vw * (880 / 1540));
        }
      body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(2) {
        top: calc(100vw * (55 / 1540));
        left: calc(100vw * (320 / 1540));
        }
      body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(3) {
        top: calc(100vw * (500 / 1540));
        left: calc(100vw * (518 / 1540));
        }

        body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:before {
          content: "";
          background-repeat: no-repeat;
          background-position: 50% 50%;
          background-size: 100% auto;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;
          }
        body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(1):before { background-image: url(/assets/top/img/mv_product_lists01_bg.png); }
        body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(2):before { background-image: url(/assets/top/img/mv_product_lists02_bg.png); }
        body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(3):before { background-image: url(/assets/top/img/mv_product_lists03_bg.png); }

        body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li.animated:before {
          /* -webkit-animation: rotate01 2.5s infinite;
          animation: rotate01 2.5s infinite; */
          -webkit-animation: rotate01 2.5s both;
          animation: rotate01 2.5s both;
          }
        @-webkit-keyframes rotate01 {
          0% { -webkit-transform: rotate(0deg); }
          69.9992% { -webkit-transform: rotate(-360deg); }
          70% { -webkit-transform: rotate(0deg); }
          }
        @keyframes rotate01 {
          0% { transform: rotate(0deg); }
          69.9992% { transform: rotate(-360deg); }
          70% { transform: rotate(0deg); }
          }

        body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li > dl {
          display: table-cell;
          width: 100%;
          height: 100%;
          vertical-align: middle;
          position: relative;
          text-align: center;
          }

          body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li > dl > dt {
            display: block;
            position: absolute;
            }
          body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(1) > dl > dt {
            width: calc(100vw * (490 / 1540));
            left: calc(100vw * (185 / 1540));
            bottom: calc(100vw * (-40 / 1540));
            }
          body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(2) > dl > dt {
            width: calc(100vw * (505 / 1540));
            left: calc(100vw * (-335 / 1540));
            bottom: calc(100vw * (-185 / 1540));
            }
          body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(3) > dl > dt {
            width: calc(100vw * (475 / 1540));
            left: calc(100vw * (220 / 1540));
            bottom: calc(100vw * (10 / 1540));
            }

          body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li > dl > dd {}

            body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li > dl > dd > h2 {
              width: 100%;
              font-weight: 400;
              }

              body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li > dl > dd > h2 > span {
                display: block;
                line-height: 1;
                }

              body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li > dl > dd > h2 > span:nth-of-type(1) {
                font-family: "Saira", sans-serif;
                font-size: calc(100vw * (28 / 1540));
                }
              body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li > dl > dd > h2 > span:nth-of-type(2) {
                margin-top: calc(100vw * (15 / 1540));
                color: #0095ff;
                font-size: calc(100vw * (14 / 1540));
                }

            body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li > dl > dd > .cnt_btn_lists {
              width: 100%;
              margin-top: calc(100vw * (20 / 1540));
              position: relative;
              z-index: 100;
              }

              body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li > dl > dd > .cnt_btn_lists > .cnt_btn > * {
                background: -webkit-linear-gradient(-45deg,  rgba(0,170,255,1) 0%,rgba(0,85,255,1) 100%);
                background: linear-gradient(135deg,  rgba(0,170,255,1) 0%,rgba(0,85,255,1) 100%);
                font-size: calc(100vw * (12 / 1540));
                }


  /* -- .sec_mv_bg -- */
  body.top_page .sec_mv .sec_mv_bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    text-align: left;
    }

    body.top_page .sec_mv .sec_mv_bg img,
    body.top_page .sec_mv .sec_mv_bg video {
      width: calc(100vw * (880 / 1540) * (16 / 9));
      height: calc(100vw * (880 / 1540));
      position: absolute;
      top: 0;
      left: 0;
      }
    body.top_page .sec_mv .sec_mv_bg img { z-index: 2; }
    body.top_page .sec_mv .sec_mv_bg video { z-index: 1; }


@media all and (min-width: 768px) and (max-width: 1279px) {

  
body.top_page .sec_mv { height: calc(770px * (1280 / 1540)); }
  
   body.top_page .sec_mv .sec_mv_inner { padding-top: calc(300px * (1280 / 1540)); }

  
  /* -- .sec_mv_ttl -- */
  body.top_page .sec_mv .sec_mv_ttl {}

    body.top_page .sec_mv .sec_mv_ttl > h1 { font-size: calc(34px * (1280 / 1540)); }

    body.top_page .sec_mv .sec_mv_ttl > p { margin-top: calc(30px * (1280 / 1540)); }

      body.top_page .sec_mv .sec_mv_ttl > p img { width: calc(220px * (1280 / 1540)); }


  /* -- .sec_mv_product -- */
  body.top_page .sec_mv .sec_mv_product {}

    body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists {}

      body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li {
        width: calc(230px * (1280 / 1540));
        height: calc(230px * (1280 / 1540));
        }
      body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(1) {
        top: calc(55px * (1280 / 1540));
        left: calc(880px * (1280 / 1540));
        }
      body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(2) {
        top: calc(55px * (1280 / 1540));
        left: calc(320px * (1280 / 1540));
        }
      body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(3) {
        top: calc(510px * (1280 / 1540));
        left: calc(518px * (1280 / 1540));
        }

        body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(1) > dl > dt {
          width: calc(490px * (1280 / 1540));
          left: calc(185px * (1280 / 1540));
          bottom: calc(-40px * (1280 / 1540));
          }
        body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(2) > dl > dt {
          width: calc(505px * (1280 / 1540));
          left: calc(-335px * (1280 / 1540));
          bottom: calc(-185px * (1280 / 1540));
          }
        body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(3) > dl > dt {
          width: calc(475px * (1280 / 1540));
          left: calc(220px * (1280 / 1540));
          bottom: calc(10px * (1280 / 1540));
          }

        body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li > dl > dd {}

          body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li > dl > dd > h2 > span:nth-of-type(1) { font-size: calc(28px * (1280 / 1540)); }
          body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li > dl > dd > h2 > span:nth-of-type(2) {
            margin-top: calc(15px * (1280 / 1540));
            font-size: calc(14px * (1280 / 1540));
            }

          body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li > dl > dd > .cnt_btn_lists { margin-top: calc(20px * (1280 / 1540)); }

            body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li > dl > dd > .cnt_btn_lists > .cnt_btn > * { font-size: calc(12px * (1280 / 1540)); }
  
  
  /* -- .sec_mv_bg -- */
  body.top_page .sec_mv .sec_mv_bg {}

    body.top_page .sec_mv .sec_mv_bg img,
    body.top_page .sec_mv .sec_mv_bg video {
      width: calc(880px * (1280 / 1540) * (16 / 9));
      height: calc(880px * (1280 / 1540));
      }

  
}








@media all and (min-width: 0px) and (max-width: 767px) {
  
  
/**
 * ================================================================================
 * Top Page Settings
 * ================================================================================
 */
  
  
/**
 * Main Visual
 * -------------------------------
 */

body.top_page .sec_mv { height: calc(100vw * (1240 / 640)); }
  
  body.top_page .sec_mv .sec_mv_inner {
    align-content: flex-start;
    padding-top: calc(100vw * (125 / 640));
    }


  /* -- .sec_mv_ttl -- */
  body.top_page .sec_mv .sec_mv_ttl {}

    body.top_page .sec_mv .sec_mv_ttl > h1 { font-size: calc(100vw * (37 / 640)); }

    body.top_page .sec_mv .sec_mv_ttl > p { margin-top: calc(100vw * (30 / 640)); }

      body.top_page .sec_mv .sec_mv_ttl > p img { width: calc(100vw * (240 / 640)); }


  /* -- .sec_mv_product -- */
  body.top_page .sec_mv .sec_mv_product {}

    body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists {}

      body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li {
        width: calc(100vw * (270 / 640));
        height: calc(100vw * (270 / 640));
        }
      body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(1) {
        top: calc(100vw * (340 / 640));
        left: calc(100vw * (25 / 640));
        }
      body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(2) {
        top: calc(100vw * (615 / 640));
        left: calc(100vw * (360 / 640));
        }
      body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(3) {
        top: calc(100vw * (940 / 640));
        left: calc(100vw * (35 / 640));
        }

        body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(1) > dl > dt {
          width: calc(100vw * (465 / 640));
          left: calc(100vw * (255 / 640));
          bottom: calc(100vw * (55 / 640));
          }
        body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(2) > dl > dt {
          width: calc(100vw * (440 / 640));
          left: calc(100vw * (-375 / 640));
          bottom: calc(100vw * (-30 / 640));
          }
        body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(3) > dl > dt {
          width: calc(100vw * (415 / 640));
          left: calc(100vw * (260 / 640));
          bottom: calc(100vw * (40 / 640));
          }

        body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li > dl > dd {}

          body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li > dl > dd > h2 > span:nth-of-type(1) { font-size: calc(100vw * (28 / 640)); }
          body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li > dl > dd > h2 > span:nth-of-type(2) {
            margin-top: calc(100vw * (15 / 640));
            font-size: calc(100vw * (22 / 640));
            }

          body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li > dl > dd > .cnt_btn_lists { margin-top: calc(100vw * (20 / 640)); }

            body.top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li > dl > dd > .cnt_btn_lists > .cnt_btn > * { font-size: calc(100vw * (20 / 640)); }


  /* -- .sec_mv_bg -- */
  body.top_page .sec_mv .sec_mv_bg {}

    body.top_page .sec_mv .sec_mv_bg img,
    body.top_page .sec_mv .sec_mv_bg video {
      width: calc(100vw * (1240 / 640) * (16 / 9));
      height: calc(100vw * (1240 / 640));
      }


}