@charset "utf-8";

/* ======================================================
 * home.css
 * ------------------------------------------------------
 * @media print, screen and (min-width: 768px)
 * - Common
 * - Header
 * - Gnav
 * - Main
 * - Assist
 * - Footer
 * - Page Component
 * - Clearfix
 * PC Media Queries
 * @media only screen and (max-width: 767px)
 * - Common
 * - Header
 * - Gnav
 * - Main
 * - Assist
 * - Footer
 * - Page Component
 * - Clearfix
 * SP Media Queries
 * Print
====================================================== */

/* ======================================================
 * PC
====================================================== */
@media print, screen and (min-width: 768px) {
  /* ------------------------------------------------------
   * Common
  ------------------------------------------------------ */
  /* ----- font ----- */
  
  /* ----- a ----- */
  
  /* ----- opacity ----- */
  
  /* ----- transition ----- */
  
  /* ----- sprite ----- */
  
  /* ------------------------------------------------------
   * Header
  ------------------------------------------------------ */
  
  /* ------------------------------------------------------
   * Gnav
  ------------------------------------------------------ */
  
  /* ------------------------------------------------------
   * Main
  ------------------------------------------------------ */
  .container {
    padding-top: 50px;
  }
  
  /* ------------------------------------------------------
   * Assist
  ------------------------------------------------------ */
  
  /* ------------------------------------------------------
   * Footer
  ------------------------------------------------------ */
  
  /* ------------------------------------------------------
   * Page Component
  ------------------------------------------------------ */
  /* ----- home-hero-layout ----- */
  .home-hero-layout > *:first-child,
  .home-hero-layout > section:first-child > [class*="heading-lv"] {
    margin-top: 0 !important;
  }
  
  /* ----- home-pickup-layout ----- */
  .home-pickup-layout {
    margin-top: 2.5em;
  }
  .home-pickup-layout > *:first-child,
  .home-pickup-layout > section:first-child > [class*="heading-lv"] {
    margin-top: 0 !important;
  }
  
  /* ----- home-product-layout ----- */
  .home-product-layout {
    margin-top: 3.75em;
    padding: 40px;
    width: 100vw;
    position: relative;
    left: 50%;
    background-color: #f2f7fb;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .home-product-layout > .product_inner {
    max-width: 1200px;
    margin: 0 auto;
  }
  .home-product-layout > .product_inner > *:first-child,
  .home-product-layout > .product_inner > section:first-child > [class*="heading-lv"] {
    margin-top: 0 !important;
  }
  .home-product-layout .product_sectioning {
    margin-top: 1.75em;
    padding-bottom: 1em;
  }
  .home-product-layout .product_heading .product_title {
    font-size: 2.0rem;
    font-weight: 700;
    text-align: center;
  }
  
  /* ----- home-news-layout ----- */
  .home-news-layout .news-more .link-text-v2 {
    font-size: 1.9rem;
  }
  .home-news-layout .news-more .link-text-v2 > li > a::before {
    top: .5em;
  }
  
  /* ----- home-button-layout ----- */
  .home-button-layout {
    margin-top: 4.5em;
  }
  .home-button-layout .home_link_button[data-row-pc]:not([data-row-pc="1"]) > li {
    margin-left: 20px;
  }
  .home-button-layout .home_link_button[data-row-pc="2"] > li {width: calc((100% - (20px * 1)) / 2);}
  .home-button-layout .home_link_button[data-row-pc="3"] > li {width: calc((100% - (20px * 2)) / 3);}
  .home-button-layout .home_link_button[data-row-pc="4"] > li {width: calc((100% - (20px * 3)) / 4);}
  /* for IE11 & Edge */
  [data-browser="ie11"] .home-button-layout .home_link_button[data-row-pc="2"] > li,
  [data-browser="edge"] .home-button-layout .home_link_button[data-row-pc="2"] > li {width: calc((100% - (20px * 1)) / 2 - 0.1px);}
  [data-browser="ie11"] .home-button-layout .home_link_button[data-row-pc="3"] > li,
  [data-browser="edge"] .home-button-layout .home_link_button[data-row-pc="3"] > li {width: calc((100% - (20px * 2)) / 3 - 0.1px);}
  [data-browser="ie11"] .home-button-layout .home_link_button[data-row-pc="4"] > li,
  [data-browser="edge"] .home-button-layout .home_link_button[data-row-pc="4"] > li {width: calc((100% - (20px * 3)) / 4 - 0.1px);}
  .home-button-layout .home_link_button > li > a {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    height: 100%;
    padding: 30px 50px 30px 90px;
    background-color: #fff;
    border: 2px solid #222;
    text-align: center;
  }
  .home-button-layout .home_link_button > li > a:hover {
    background-color: #f3f3f3;
  }
  .home-button-layout .home_link_button > li > a::before {
    position: absolute;
    top: 50%;
    left: 26px;
    width: 46px;
    height: 46px;
    margin-top: -23px;
    content: "";
  }
  .home-button-layout .home_link_button > li > a.a-corporate::before {background: url(/english/under-files/img/home_btn_ic01.png) no-repeat;}
  .home-button-layout .home_link_button > li > a.a-ir::before {background: url(/english/under-files/img/home_btn_ic02.png) no-repeat;}
  .home-button-layout .home_link_button > li > a::after {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 34px;
    height: 34px;
    background: url(/english/common/img/cmn_sprite_ic01.png) no-repeat;
    background-position: -120px -320px;
    content: "";
  }
  .home-button-layout .home_link_button > li > a > .link_label {
    margin-left: -40px;
    font-size: 1.9rem;
    font-weight: 900;
  }
  
  /* ----- home-banner-layout ----- */
  .home-banner-layout {
    width: 100vw;
    margin: 4em 0 0 calc(50% - 50vw);
    border-top: 1px solid #ddd;
  }
  .home-banner-layout .banner_inner {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /* ------------------------------------------------------
   * Clearfix
  ------------------------------------------------------ */
  .clearfix::after {
    display: block;
    clear: both;
    content: "";
  }
}

/* ======================================================
 * PC Media Queries
====================================================== */
/***
@media screen and (min-width: 1921px) {
}
@media screen and (min-width: 768px) and (max-width: 1920px) {
}
***/


/* ======================================================
 * SP
====================================================== */
@media only screen and (max-width: 767px) {
  /* ------------------------------------------------------
   * Common
  ------------------------------------------------------ */
  /* ----- font ----- */
  
  /* ----- a ----- */
  
  /* ----- opacity ----- */
  
  /* ----- transition ----- */
  
  /* ----- sprite ----- */
  
  /* ------------------------------------------------------
   * Header
  ------------------------------------------------------ */
  
  /* ------------------------------------------------------
   * Gnav
  ------------------------------------------------------ */
  
  /* ------------------------------------------------------
   * Main
  ------------------------------------------------------ */
  .container {
    padding-top: 0;
  }

  /* ------------------------------------------------------
   * Assist
  ------------------------------------------------------ */
  
  /* ------------------------------------------------------
   * Footer
  ------------------------------------------------------ */
  
  /* ------------------------------------------------------
   * Page Component
  ------------------------------------------------------ */
  /* ----- home-hero-layout ----- */
  .home-hero-layout > *:first-child,
  .home-hero-layout > section:first-child > [class*="heading-lv"] {
    margin-top: 0 !important;
  }
  
  /* ----- home-pickup-layout ----- */
  .home-pickup-layout {
    margin-top: 2.5em;
  }
  .home-pickup-layout > *:first-child,
  .home-pickup-layout > section:first-child > [class*="heading-lv"] {
    margin-top: 0 !important;
  }
  
  /* ----- home-product-layout ----- */
  .home-product-layout {
    position: relative;
    left: 50%;
    width: 100vw;
    margin-top: 2.5em;
    padding: 2.15em 15px;
    background-color: #f2f7fb;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .home-product-layout > .product_inner [class*="heading"]:first-child {
    margin-top: 0;
  }
  .home-product-layout .product_sectioning {
    margin-top: 1.75em;
    padding-bottom: 1em;
  }
  .home-product-layout .product_heading {
    text-align: center;
  }
  .home-product-layout .product_heading .product_title {
    font-size: 1.6rem;
    font-weight: 700;
  }
  
  /* ----- home-news-layout ----- */
  .home-news-layout {
    margin-top: 2.15em;
  }
  .home-news-layout .news-wrap {
    margin-top: 1.428em;
    padding: 2.15em 0;
    border-top: 1px dotted #ccc;
    border-bottom: 1px dotted #ccc;
  }
  .home-news-layout .news-wrap > * {
    margin-top: 0;
  }
  
  /* ----- home-button-layout ----- */
  .home-button-layout {
    margin-top: 2.5em;
  }
  .home-button-layout .home_link_button[data-row-sp]:not([data-row-sp="1"]) > li {
    margin-left: 10px;
  }
  .home-button-layout .home_link_button[data-row-sp="2"] > li {width: calc((100% - (10px * 1)) / 2);}
  .home-button-layout .home_link_button[data-row-sp="3"] > li {width: calc((100% - (10px * 2)) / 3);}
  .home-button-layout .home_link_button[data-row-sp="4"] > li {width: calc((100% - (10px * 3)) / 4);}
  .home-button-layout .home_link_button[data-row-sp="1"] > li + li,
  .home-button-layout .home_link_button[data-row-sp="2"] > li:nth-child(n+3),
  .home-button-layout .home_link_button[data-row-sp="3"] > li:nth-child(n+4),
  .home-button-layout .home_link_button[data-row-sp="4"] > li:nth-child(n+5) {
    margin-top: 1.1em;
  }
  .home-button-layout .home_link_button > li > a {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    height: 100%;
    padding: 25px 35px 24px 70px;
    background-color: #fff;
    border: 2px solid #222;
    text-align: center;
  }
  .home-button-layout .home_link_button > li > a::before {
    position: absolute;
    top: 50%;
    left: 22px;
    width: 33px;
    height: 33px;
    margin-top: -17px;
    content: "";
  }
  .home-button-layout .home_link_button > li > a.a-corporate::before {background: url(/english/under-files/img/home_btn_ic01-r2x.png) no-repeat; background-size: 33px auto;}
  .home-button-layout .home_link_button > li > a.a-ir::before {background: url(/english/under-files/img/home_btn_ic02-r2x.png) no-repeat; background-size: 33px auto;}
  .home-button-layout .home_link_button > li > a::after {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: url(/english/common/img/cmn_sprite_ic01-r2x.png) no-repeat;
    background-size: 600px 600px;
    background-position: -150px -400px;
    content: "";
  }
  .home-button-layout .home_link_button > li > a > .link_label {
    margin-left: -35px;
    font-size: 1.5rem;
    font-weight: 900;
  }
  
  /* ------------------------------------------------------
   * Clearfix
  ------------------------------------------------------ */
  .clearfix::after {
    display: block;
    clear: both;
    content: "";
  }
}


/* ======================================================
 * SP Media Queries
====================================================== */
/***
@media only screen and (min-width: 320px) and (max-width: 767px) {
}
@media only screen and (max-width: 736px) {
}
@media only screen and (max-width: 667px) {
}
@media only screen and (max-width: 640px) {
}
@media only screen and (max-width: 568px) {
}
@media only screen and (max-width: 480px) {
}
@media only screen and (max-width: 414px) {
}
@media only screen and (max-width: 375px) {
}
@media only screen and (max-width: 360px) {
}
@media only screen and (max-width: 320px) {
}
***/


/* ======================================================
 * Print
====================================================== */
@media print {
}