@charset "UTF-8";

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

 




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


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

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

  body.product_top_page .sec_mv:before,
  body.product_top_page .sec_mv:after {
    content: "";
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    }

  body.product_top_page .sec_mv:before {
    background-image: url(/assets/product/img/top/mv_bg01.jpg);
    background-position: 50% 0;
    z-index: 1;
    }

  body.product_top_page .sec_mv:after {
    background-image: url(/assets/product/img/top/mv_bg02.jpg);
    background-position: 50% bottom;
    z-index: 2;
    }

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


  /* -- .sec_mv_ttl -- */
  body.product_top_page .sec_mv .sec_mv_ttl { text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7); }

    body.product_top_page .sec_mv .sec_mv_ttl > h1 { font-size: calc(100vw * (42 / 1540)); }

    body.product_top_page .sec_mv .sec_mv_ttl > p {
      margin-top: calc(100vw * (15 / 1540));
      font-size: calc(100vw * (24 / 1540));
      }

    body.product_top_page .sec_mv .sec_mv_ttl > div { margin-top: calc(100vw * (20 / 1540)); }


  /* -- .sec_mv_txt -- */
  body.product_top_page .sec_mv .sec_mv_txt {
    margin-top: calc(100vw * (20 / 1540));
    font-size: calc(100vw * (18 / 1540));
    }


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

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

      body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li {
        display: table;
        width: calc(100vw * (290 / 1540));
        height: calc(100vw * (290 / 1540));
        position: absolute;
        bottom: calc(100vw * (175 / 1540));
        }
      body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(1) { left: calc(100vw * (170 / 1540)); }
      body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(2) { left: calc(100vw * (624 / 1540)); }
      body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(3) { left: calc(100vw * (1095 / 1540)); }

        body.product_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.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(1):before { background-image: url(/assets/product/img/top/mv_product_lists01_bg.png); }
        body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(2):before { background-image: url(/assets/product/img/top/mv_product_lists02_bg.png); }
        body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(3):before { background-image: url(/assets/product/img/top/mv_product_lists03_bg.png); }

        body.product_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.product_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.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li > dl > dt {
            display: block;
            position: absolute;
            }
          body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(1) > dl > dt {
            width: calc(100vw * (348 / 1540));
            left: calc(100vw * (-35 / 1540));
            bottom: calc(100vw * (-135 / 1540));
            }
          body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(2) > dl > dt {
            width: calc(100vw * (382 / 1540));
            left: calc(100vw * (-60 / 1540));
            bottom: calc(100vw * (-170 / 1540));
            }
          body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(3) > dl > dt {
            width: calc(100vw * (340 / 1540));
            left: calc(100vw * (-15 / 1540));
            bottom: calc(100vw * (-115 / 1540));
            }

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

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

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

              body.product_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 * (32 / 1540));
                }
              body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li > dl > dd > h2 > span:nth-of-type(2) {
                margin-top: calc(100vw * (10 / 1540));
                color: #0095ff;
                font-size: calc(100vw * (15 / 1540));
                }

            body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li > dl > dd > p {
              width: 100%;
              margin-top: calc(100vw * (15 / 1540));
              font-size: calc(100vw * (14 / 1540));
              }

            body.product_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));
              }

              body.product_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_banner -- */
  body.product_top_page .sec_mv .sec_mv_banner {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -8px;
    z-index: 5;
    }

    body.product_top_page .sec_mv .sec_mv_banner .cnt_banner_lists { float: right; }

      body.product_top_page .sec_mv .sec_mv_banner .cnt_banner_lists .cnt_banner {
        background-color: #000;
        width: 200px;
        border-radius: 8px;
        }

        body.product_top_page .sec_mv .sec_mv_banner .cnt_banner_lists .cnt_banner > * { background-color: #000; }

          body.product_top_page .sec_mv .sec_mv_banner .cnt_banner_lists .cnt_banner > * > * {
            background-color: transparent;
            justify-content: center;
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            text-align: center;
            }


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

  
body.product_top_page .sec_mv { height: calc(650px * (1280 / 1540)); }
  
  body.product_top_page .sec_mv .sec_mv_inner { padding-top: calc(80px * (1280 / 1540)); }
  

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

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

    body.product_top_page .sec_mv .sec_mv_ttl > p {
      margin-top: calc(15px * (1280 / 1540));
      font-size: calc(24px * (1280 / 1540));
      }

    body.product_top_page .sec_mv .sec_mv_ttl > div { margin-top: calc(20px * (1280 / 1540)); }


  /* -- .sec_mv_txt -- */
  body.product_top_page .sec_mv .sec_mv_txt {
    margin-top: calc(20px * (1280 / 1540));
    font-size: calc(18px * (1280 / 1540));
    }


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

    body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li { bottom: calc(175px * (1280 / 1540)); }
    body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(1) { left: calc(170px * (1280 / 1540)); }
    body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(2) { left: calc(624px * (1280 / 1540)); }
    body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(3) { left: calc(1095px * (1280 / 1540)); }

      body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li {
        width: calc(290px * (1280 / 1540));
        height: calc(290px * (1280 / 1540));
        }

        body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(1) > dl > dt {
          width: calc(348px * (1280 / 1540));
          left: calc(-35px * (1280 / 1540));
          bottom: calc(-135px * (1280 / 1540));
          }
        body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(2) > dl > dt {
          width: calc(382px * (1280 / 1540));
          left: calc(-60px * (1280 / 1540));
          bottom: calc(-170px * (1280 / 1540));
          }
        body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(3) > dl > dt {
          width: calc(340px * (1280 / 1540));
          left: calc(-15px * (1280 / 1540));
          bottom: calc(-115px * (1280 / 1540));
          }

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

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

          body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li > dl > dd > p {
            margin-top: calc(15px * (1280 / 1540));
            font-size: calc(14px * (1280 / 1540));
            }

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

            body.product_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)); }

  
}



/**
 * Main Contents
 * -------------------------------
 */

/* -- .banner -- */
body.product_top_page .banner {}

  body.product_top_page .banner .cnt_banner_lists { margin: -30px 0 0 -30px; }

    body.product_top_page .banner .cnt_banner_lists .cnt_banner {
      width: 50%;
      padding: 30px 0 0 30px;
      }

      body.product_top_page .banner .cnt_banner_lists .cnt_banner > * { background-color: #8c8c8c; } 

      body.product_top_page .banner .cnt_banner_lists .cnt_banner img { width: 100%; }








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

body.product_top_page .sec_mv {
  width: 100%;
  height: calc(100vw * (1500 / 640));
  }

  body.product_top_page .sec_mv:before { background-image: url(/assets/product/img/top/mv_bg01_sp.jpg); }
  body.product_top_page .sec_mv:after { background-image: url(/assets/product/img/top/mv_bg02_sp.jpg); }

  body.product_top_page .sec_mv .sec_mv_inner { padding-top: calc(100vw * (70 / 640)); }


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

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

    body.product_top_page .sec_mv .sec_mv_ttl > p {
      margin-top: calc(100vw * (5 / 640));
      font-size: calc(100vw * (26 / 640));
      }

    body.product_top_page .sec_mv .sec_mv_ttl > div { margin-top: calc(100vw * (15 / 640)); }


  /* -- .sec_mv_txt -- */
  body.product_top_page .sec_mv .sec_mv_txt {
    margin-top: calc(100vw * (15 / 640));
    font-size: calc(100vw * (24 / 640));
    }


  /* -- .sec_mv_product -- */
  body.product_top_page .sec_mv .sec_mv_product {
    bottom: auto;
    top: 0;
    }

    body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists {}

      body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li {
        width: calc(100vw * (390 / 640));
        height: calc(100vw * (390 / 640));
        bottom: auto;
        }
      body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(1) {
        left: calc(100vw * (-45 / 640));
        top: calc(100vw * (215 / 640));
        }
      body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(2) {
        left: calc(100vw * (295 / 640));
        top: calc(100vw * (600 / 640)); 
        }
      body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(3) {
        left: calc(100vw * (-45 / 640));
        top: calc(100vw * (990 / 640)); 
        }

        body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:before { background-image: url(/assets/product/img/top/mv_product_lists_bg.png); }

          body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(1) > dl > dt {
            width: calc(100vw * (440 / 640));
            left: calc(100vw * (320 / 640));
            bottom: calc(100vw * (55 / 640));
            }
          body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(2) > dl > dt {
            width: calc(100vw * (375 / 640));
            left: calc(100vw * (-290 / 640));
            bottom: calc(100vw * (25 / 640));
            }
          body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li:nth-of-type(3) > dl > dt {
            width: calc(100vw * (420 / 640));
            left: calc(100vw * (320 / 640));
            bottom: calc(100vw * (140 / 640));
            }

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

            body.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li > dl > dd > h2 > span:nth-of-type(1) { font-size: calc(100vw * (35 / 640)); }
            body.product_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.product_top_page .sec_mv .sec_mv_product .sec_mv_product_lists > li > dl > dd > p {
              margin-top: calc(100vw * (15 / 640));
              font-size: calc(100vw * (20 / 640));
              }

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

              body.product_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_banner -- */
  body.product_top_page .sec_mv .sec_mv_banner { bottom: -8px; }

    body.product_top_page .sec_mv .sec_mv_banner .cnt_banner_lists { float: none; }
  
      body.product_top_page .sec_mv .sec_mv_banner .cnt_banner_lists .cnt_banner {
        width: 100%;
        border-radius: 8px;
        }

        body.product_top_page .sec_mv .sec_mv_banner .cnt_banner_lists .cnt_banner > * > * { font-size: 12px; }



/**
 * Main Contents
 * -------------------------------
 */

/* -- .banner -- */
body.product_top_page .banner {}

  body.product_top_page .banner .cnt_banner_lists { margin: -10px 0 0 0; }

    body.product_top_page .banner .cnt_banner_lists .cnt_banner {
      width: 100%;
      padding: 10px 0 0 0;
      }


}