@charset "UTF-8";


/**-------------------------------------------------------
*  1180px or smaller
* ------------------------------------------------------*/
@media all and (max-width: 1180px)
{

}

/**-------------------------------------------------------
*  1040px or smaller
* ------------------------------------------------------*/
@media all and (max-width: 1040px)
{
  /** 1040 : Header ----*/
  .header .logo {left: 0;}
  .nav-pc {
    padding-left: 155px;
    height: 40px;
  }
  .nav-pc .main-nav > li {
    padding-top: 5px;
    padding-right: 28px;
  }
  .nav-pc .social-nav {top: 4px;}
  .nav-pc .social-nav a {width: 30px; height: 30px;}
  .nav-pc .main-nav .submenu {
    top: 35px;
  }
}

/**-------------------------------------------------------
*  960px or smaller
* ------------------------------------------------------*/
@media all and (max-width: 960px)
{

}

/**-------------------------------------------------------
*  860px or smaller
* ------------------------------------------------------*/
@media all and (max-width: 860px)
{
  /** 860 : Header ----*/
  .header {height: 48px;}
  .top-nav,
  .nav-pc {display: none;}
  .header .logo {
    display: block;
    position: relative;
    top: inherit;
    left: inherit;
    text-align: center;
  }
  .menu-toggle {
    display: block;
  }

  /** 860 : footer ---*/
  .footer {
    padding: 15px;
    font-size: 13px;
  }

  /** 860 : row ---*/
  .row4.article-list .col {width: 50%;}
  .row4.article-list .col:nth-child(2n+1) {clear: both;}

  /** 860 : contact ---*/
  .contact-row {padding-top: 0;}
  .contact-info, .contact-form {float: none; width: auto;}
  .contact-form fieldset { margin: 30px 0 0 0;}

  /** 860 : Article List ---*/
  .article-side-list .row {margin-bottom: 20px;}
  .article-side-list figure {
    float: none;
    width: auto;
    height: auto;
    background: none;
  }
  .article-side-list figure img {display: block;}
  .article-side-list .content {
    float: none;
    padding: 20px;
    width: auto;
  }

  .welcome { padding: 50px 0; }
  .whats-update .inner {
    padding: 50px 0 20px 0;
  }
}

/**-------------------------------------------------------
*  720px or smaller
* ------------------------------------------------------*/
@media all and (max-width: 720px) {

  /** 720 : title ---*/
  .page-title { margin: 0;}

  /** 720 : row ---*/
  .row2.article-list .col,
  .row3.article-list .col {float: none; width: auto;}
  .row2.article-list .col-inner,
  .row3.article-list .col-inner {margin: 0 0 20px 0;}

  /** 720 : page ---*/
  .col-product-image,
  .col-product-detail {
    padding-right: 0;
    width: auto;
  }
  .col-product-image { margin-bottom: 30px;}
}


/**-------------------------------------------------------
*  640px or smaller
* ------------------------------------------------------*/
@media all and (max-width: 640px)
{
  .wrap {padding: 0 20px}

  /** 620 : title ---*/
  .page-title { padding: 20px 0 25px 0; }
  .page-title .parent,
  .page-detail .page-title .parent { font-size: 14px; }
  .page-title .title,
  .page-detail .page-title .title {
    padding-bottom: 20px;
    font-size: 24px;
    line-height: 24px;
  }
  .s-title {
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 24px;
  }
  .s-title .title {
    font-size: 36px;
    line-height: 40px;
  }

  /** 640 : row ---*/
  .row4.article-list .col {float: none; width: auto;}
  .row4.article-list .col-inner {margin: 0 0 20px 0;}

  /** 640 : Article List ---*/
  .article-side-list h3 a {
    font-size: 24px;
    line-height: 28px;
  }
  .article-side-list p {font-size: 14px; line-height: 20px;}

}

/**-------------------------------------------------------
*  520px or smaller
* ------------------------------------------------------*/
@media all and (max-width: 520px) {
  .hero-slide {height: 50vw;}
  .hero-slide .preview figure.pc { display: none; }
  .hero-slide .preview figure.mobile { display: block; }
  .hero-slide .middle-control a {
    width: 25px;
    height: 50px;
  }
}


/**-------------------------------------------------------
*  480px or smaller
* ------------------------------------------------------*/
@media all and (max-width: 480px)
{
  /** 480 : contact ---*/
  .contact-form .contact-column {float: none; width: auto;}
  .contact-form .input-textarea {margin: 0 0 10px 0;}
}