@charset "UTF-8";
/* Scss Document */
/* -----------------------------------------------------------------------------
      for All 
------------------------------------------------------------------------------ */
/* ============================================
      base
============================================ */
#container {
  padding-top: 0; }

/* ============================================
      transiziton
============================================ */
.top-cards_list a::after,
.top-cards_item a::after {
  transition: .25s; }

.top-support-name a::before {
  transition: .35s; }

.top-support-name a::before {
  transition-property: background-color; }

/* ============================================
      z-index
============================================ */
.top-cards_list a::after,
.top-cards_item a::after {
  z-index: 0; }

.top-cards_list figure,
.top-cards_list-name,
.top-cards_list a:hover,
.top-cards_item-inner,
.top-cards_item a:hover {
  z-index: 1; }

/* ============================================
      font-size  (PC base:15px / SP base:14px)
============================================ */
.top-emergency h2 {
  font-size: 2rem; }

.top-cards_list {
  font-size: 1.7rem; }

/* ============================================
      coloer (base #000)
============================================ */
.top-cards_list a,
.top-support-list a,
.top-cards_item a dt,
.top-news-heading a,
.top-news-list a dt {
  color: #000; }

.top-cards_item a dd {
  color: #737373; }

.top-btn a {
  color: #fff; }

.top-cards_list a:hover,
.top-support-list a:hover,
.top-cards_item a:hover dt,
.top-btn a:hover,
.top-news-heading a:hover {
  color: #1a6fd1; }

/* ============================================
      heading
============================================ */
h2 {
  font-size: 3rem;
  text-align: center;
  border: none;
  margin: 62px 0 38px;
  padding: 0; }

/* ============================================
      flex
============================================ */
.top-cards_list,
.top-cards_list li,
.top-support-list,
.top-support-name,
.top-support-name a,
.top-cards,
.top-cards_item,
.top-btn li,
.top-btn a {
  -webkit-display: flex;
  display: flex; }

.top-cards_list,
.top-support-list {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap; }

.top-support-name a,
.top-btn a,
.top-company .u-pc_flex,
.top-recruit .u-pc_flex {
  -webkit-align-items: center;
  align-items: center; }

.top-recruit .u-pc_flex {
  -webkit-justify-content: flex-end;
  justify-content: flex-end; }

/* ============================================
      c-icon_img
============================================ */
.c-icon_img {
  vertical-align: -0.05em;
  margin-left: 1px; }

a:hover .c-icon_img {
  opacity: 1; }

/* ============================================
      c-card
============================================ */
.top-cards_item {
  float: none;
  text-align: center; }

.top-cards_item a {
  position: relative;
  display: block;
  width: 100%;
  padding: 70px 0 60px;
  padding: 5vw 0 4vw; }

.top-cards_item a:hover {
  text-decoration: none; }

.top-cards_item a::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%; }

.top-cards_item a:hover::after {
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
  background: #fff;
  padding: 0 19px;
  margin: 0 -19px; }

.top-cards_item figure {
  margin: 0 0 35px; }

.top-cards_item a:hover img {
  opacity: 1; }

.top-cards_item dl {
  margin-bottom: 0; }

.top-cards_item dt {
  font-weight: normal;
  font-size: 2rem;
  line-height: 1.6;
  margin: 0 0 21px; }

.top-cards_item dd {
  line-height: 1.8;
  margin: 0; }

.top-cards_item-inner {
  position: relative; }

/* ============================================
      c-card_list
============================================ */
.top-cards_list {
  line-height: 1.235;
  margin-left: -10px;
  margin-right: -10px; }

.top-cards_list li {
  background: none;
  width: calc(99.9% / 5);
  box-sizing: border-box;
  margin-bottom: 4px;
  padding: 0 10px; }

.top-cards_list a {
  width: 100%;
  display: block;
  background: #fff;
  position: relative;
  padding: 20px 0; }

.top-cards_list a:hover {
  text-decoration: none; }

.top-cards_list a::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%; }

.top-cards_list a:hover::after {
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
  background: #fff;
  padding: 0 19px;
  margin: 0 -19px; }

.top-cards_list a:hover img {
  opacity: 1; }

.top-cards_list figure,
.top-cards_list-name {
  position: relative; }

.top-cards_list figure {
  margin: 0 0 10px; }

.top-cards_list-name {
  background: url(/english/shared/img/icon_arrow_008.svg) no-repeat 7px 0.2em;
  background-size: 14px 14px;
  margin: 0;
  padding: 0 7px 0 30px; }

/* ============================================
      top-btn
============================================ */
.top-btn {
  font-size: 2rem; }

.top-btn li {
  background: none;
  max-width: 330px;
  position: relative;
  padding: 0; }

.top-btn li::after {
  content: "";
  display: block;
  height: 60px; }

.top-btn a {
  background: #1a6fd1 url(/english/shared/img/icon_arrow_009.svg) no-repeat 16px center;
  background-size: 28px 28px;
  box-sizing: border-box;
  width: 100%;
  padding: 4px 16px 4px 57px; }

.top-btn a:hover {
  text-decoration: none;
  background-color: #fff;
  background-image: url(/english/shared/img/icon_arrow_010.svg);
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1); }

/* ============================================
      top-keyvisual
============================================ */
.top-keyvisual {
  position: relative; }

.top-keyvisual ul,
.top-keyvisual .top-keyvisual-slide {
  margin: 0; }

.top-keyvisual .top-keyvisual-slide {
  text-align: center;
  background: none;
  padding: 0; }

.top-keyvisual .slick-slide img {
  display: inline-block; }

/* ============================================
      top-emergency
============================================ */
.top-emergency {
  margin: 50px 0; }

.top-emergency-block {
  border: #1a6fd1 1px solid;
  padding: 25px 8.9%; }

.top-emergency h2 {
  font-weight: bold;
  margin: 10px 0; }

/* ============================================
      top-prpducts
============================================ */
/* ============================================
      top-support
============================================ */
.top-support {
  background: #eff0f7 url(/img/bg_index_001.jpg) no-repeat 93% center;
  background-size: auto 100%;
  text-shadow: 0 0 3px rgba(239, 240, 247, 0.5), 0 0 4px rgba(239, 240, 247, 0.5), 0 0 5px rgba(239, 240, 247, 0.5);
  padding: 82px 0 38px; }

.top-support h2 {
  margin: 0 0 67px; }

.top-support-list {
  font-size: 2rem;
  margin: 0 -10px; }

.top-support-name,
.top-support-name:last-child {
  background: none;
  width: calc(99.9% / 4);
  box-sizing: border-box;
  margin: 0 0 67px;
  padding: 0 10px; }

.top-support-name a {
  width: 100%; }

.top-support-name a:hover {
  text-decoration: none; }

.top-support-name a::before {
  content: "";
  display: block;
  width: 85px;
  height: 85px;
  background: #1a6fd1 no-repeat center center;
  border-radius: 50%;
  -webkit-flex: 0 0 85px;
  flex: 0 0 85px;
  margin: 0 15px 0 0; }

.top-support-name a:hover::before {
  background-color: #fff;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1); }

.top-support-name.__download a::before {
  background-image: url(/english/shared/img/icon_dl_001.svg);
  background-size: 56px 49px; }

.top-support-name.__download a:hover::before {
  background-image: url(/english/shared/img/icon_dl_002.svg); }

.top-support-name.__usage a::before {
  background-image: url(/english/shared/img/icon_produt_001.svg);
  background-size: 51px 55px; }

.top-support-name.__usage a:hover::before {
  background-image: url(/english/shared/img/icon_produt_002.svg); }

.top-support-name.__doc a::before {
  background-image: url(/english/shared/img/icon_doc_001.svg);
  background-size: 49px 57px; }

.top-support-name.__doc a:hover::before {
  background-image: url(/english/shared/img/icon_doc_003.svg); }

.top-support-name.__faq a::before {
  background-image: url(/english/shared/img/icon_balloon_001.svg);
  background-size: 62px 59px; }

.top-support-name.__faq a:hover::before {
  background-image: url(/english/shared/img/icon_balloon_002.svg); }

.top-support-name.__legacy a::before {
  background-image: url(/english/shared/img/icon_exclamation_001.svg);
  background-size: 16px 58px; }

.top-support-name.__legacy a:hover::before {
  background-image: url(/english/shared/img/icon_exclamation_002.svg); }

.top-support-name.__briefing a::before {
  background-image: url(/english/shared/img/icon_slid_001.svg);
  background-size: 56px 59px;
  background-position: center 65%; }

.top-support-name.__briefing a:hover::before {
  background-image: url(/english/shared/img/icon_slid_002.svg); }

.top-support-name.__contact a::before {
  background-image: url(/english/shared/img/icon_doc_002.svg);
  background-size: 49px 52px; }

.top-support-name.__contact a:hover::before {
  background-image: url(/english/shared/img/icon_doc_004.svg); }

/* ============================================
      top-company / top-recruit
============================================ */
.top-company,
.top-recruit {
  font-size: 1.8rem;
  line-height: 2;
  position: relative;
  padding: 0; }

.top-company .u-pc_flex,
.top-recruit .u-pc_flex {
  position: relative;
  padding: 15px 0 25px; }

.top-company .u-pc_flex::after,
.top-recruit .u-pc_flex::after {
  content: "";
  display: block;
  height: 380px; }

.top-company .l-col,
.top-recruit .l-col {
  padding-left: 52px; }

.top-company p,
.top-recruit p {
  margin: 0 0 30px; }

.top-company .top-btn,
.top-recruit .top-btn {
  margin-bottom: 0; }

/*.top-company*/
.top-company {
  background: url(/img/bg_index_005.png) repeat-x; }

.top-company .l-inner {
  background: url(/img/bg_index_004.jpg) no-repeat right center;
  background-size: auto 100%; }

.top-company .l-col {
  padding-left: 52px; }

/*.top-recruit*/
.top-recruit {
  background: url(/img/bg_index_002.png) repeat-x;
  background-size: auto 100%; }

.top-recruit .l-inner {
  background: url(/img/bg_index_003.jpg) no-repeat left center;
  background-size: auto 100%; }

.top-recruit .l-col {
  padding-left: 66px; }

/* ============================================
      top-news
============================================ */
.top-news-heading,
.top-news-notice {
  width: calc(99.9% / 5 * 3);
  box-sizing: border-box;
  padding: 0 14px; }

/*top-news-heading*/
.top-news-heading {
  margin: 49px 0 27px; }

.top-news-heading h2,
.top-news-heading ul {
  display: inline-block; }

.top-news-heading h2 {
  text-align: left;
  margin: 0 35px 0 0; }

.top-news-heading ul,
.top-news-heading li {
  margin: 0; }

.top-news-heading li {
  background: none;
  padding: 0; }

.top-news-heading a {
  display: inline-block;
  background: url(/english/shared/img/icon_arrow_008.svg) no-repeat 0 0.18em;
  background-size: 14px 14px;
  padding: 0 0 0 24px; }

/*top-news-notice*/
.top-news-notice {
  font-family: "貂ｸ譏取悃", YuMincho, HiraMinProN-W6, HiraMinPro-W6, MS PMincho, Meiryo, serif;
  font-size: 1.6rem;
  font-weight: bold;
  margin: 0 0 27px; }

.top-news-notice p {
  margin-bottom: 5px; }

/*top-news-list*/
.top-news-list {
  border-top: #e9e9e9 1px solid;
  margin-right: 20px; }

.top-news-list li {
  border-bottom: #e9e9e9 1px solid;
  background: none;
  padding: 0; }

.top-news-list a,
.top-news-list-nolink dl {
  display: block;
  padding: 17px 5px 15px 14px; }

.top-news-list a:hover {
  text-decoration: none; }

.top-news-list-nodate a:hover,
.top-news-list a:hover dd {
  text-decoration: underline; }

.top-news-list dl,
.top-news-list dt,
.top-news-list dd {
  margin: 0; }

.top-news-list dt {
  font-weight: normal;
  margin-bottom: 5px; }

/*top-news-fb*/
.top-news-fb {
  overflow: hidden; }

/* ============================================
      margin-reset
============================================ */
.top-emergency-block > :first-child {
  margin-top: 0; }

.top-emergency-block > :last-child {
  margin-bottom: 0; }

/* ============================================
      clearfix
============================================ */
.top-news-heading::after {
  content: "";
  display: block;
  clear: both; }

/* -----------------------------------------------------------------------------
      for PC 
------------------------------------------------------------------------------ */
@media print, screen and (min-width: 720px) {
  /* ============================================
        base
  ============================================ */
  /* ============================================
        transiziton
  ============================================ */
  /* ============================================
        z-index
  ============================================ */
  /* ============================================
        font-size  (PC base:15px / SP base:14px)
  ============================================ */
  /* ============================================
        coloer (base #000)
  ============================================ */
  /* ============================================
        heading
  ============================================ */
  /* ============================================
        flex
  ============================================ */
  /* ============================================
        c-icon_img
  ============================================ */
  /* ============================================
        c-card
  ============================================ */
  /* ============================================
        c-card_list
  ============================================ */
  /* ============================================
        top-btn
  ============================================ */
  /* ============================================
        top-keyvisual
  ============================================ */
  /* ============================================
        top-emergency
  ============================================ */
  /* ============================================
        top-prpducts
  ============================================ */
  .top-prpducts h2 {
    margin-bottom: 18px; }

  /* ============================================
        top-support
  ============================================ */
  /* ============================================
        top-company / top-recruit
  ============================================ */
  /* ============================================
        top-news
  ============================================ */
  /* ============================================
        margin-reset
  ============================================ */
  /* ============================================
        clearfix
  ============================================ */ }
/* -----------------------------------------------------------------------------
      for PC 02
------------------------------------------------------------------------------ */
@media print, screen and (min-width: 720px) and (max-width: 1000px) {
  /* ============================================
        base
  ============================================ */
  /* ============================================
        transiziton
  ============================================ */
  /* ============================================
        z-index
  ============================================ */
  /* ============================================
        font-size  (PC base:15px / SP base:14px)
  ============================================ */
  /* ============================================
        coloer (base #000)
  ============================================ */
  /* ============================================
        heading
  ============================================ */
  /* ============================================
        flex
  ============================================ */
  /* ============================================
        c-icon_img
  ============================================ */
  /* ============================================
        c-card
  ============================================ */
  /* ============================================
        c-card_list
  ============================================ */
  /* ============================================
        top-btn
  ============================================ */
  /* ============================================
        top-keyvisual
  ============================================ */
  /* ============================================
        top-emergency
  ============================================ */
  /* ============================================
        top-prpducts
  ============================================ */
  /* ============================================
        top-support
  ============================================ */
  /* ============================================
        top-company / top-recruit
  ============================================ */
  /*.top-company*/
  .top-company .l-inner {
    background-image: url(/img/bg_index_006.jpg); }

  /* ============================================
        top-news
  ============================================ */
  /* ============================================
        margin-reset
  ============================================ */
  /* ============================================
        clearfix
  ============================================ */ }
/* -----------------------------------------------------------------------------
      for PC 
------------------------------------------------------------------------------ */
@media print, screen and (min-width: 720px) and (max-width: 850px) {
  /* ============================================
        base
  ============================================ */
  /* ============================================
        transiziton
  ============================================ */
  /* ============================================
        z-index
  ============================================ */
  /* ============================================
        font-size  (PC base:15px / SP base:14px)
  ============================================ */
  /* ============================================
        coloer (base #000)
  ============================================ */
  /* ============================================
        heading
  ============================================ */
  /* ============================================
        flex
  ============================================ */
  /* ============================================
        c-icon_img
  ============================================ */
  /* ============================================
        c-card
  ============================================ */
  /* ============================================
        c-card_list
  ============================================ */
  /* ============================================
        top-btn
  ============================================ */
  /* ============================================
        top-keyvisual
  ============================================ */
  /* ============================================
        top-emergency
  ============================================ */
  /* ============================================
        top-prpducts
  ============================================ */
  /* ============================================
        top-support
  ============================================ */
  .top-support {
    background-position: 70% center; }

  .top-support-name,
  .top-support-name:last-child {
    width: calc(99.9% / 2); }

  /* ============================================
        top-company / top-recruit
  ============================================ */
  /* ============================================
        top-news
  ============================================ */
  /* ============================================
        margin-reset
  ============================================ */
  /* ============================================
        clearfix
  ============================================ */ }
/* -----------------------------------------------------------------------------
      for Smartphone 
------------------------------------------------------------------------------ */
@media print, screen and (max-width: 719px) {
  /* ============================================
        base
  ============================================ */
  /* ============================================
        transiziton
  ============================================ */
  /* ============================================
        z-index
  ============================================ */
  /* ============================================
        font-size  (PC base:15px / SP base:14px)
  ============================================ */
  .top-emergency h2 {
    font-size: 1.7rem; }

  .top-cards_list {
    font-size: 1.5rem; }

  /* ============================================
        coloer (base #000)
  ============================================ */
  /* ============================================
        heading
  ============================================ */
  h2 {
    font-size: 2.3rem;
    margin: 33px 0 20px; }

  /* ============================================
        flex
  ============================================ */
  /* ============================================
        c-icon_img
  ============================================ */
  /* ============================================
        c-card
  ============================================ */
  .top-cards,
  .top-cards_item {
    display: block; }

  .top-cards_item {
    margin: 32px 5.2%; }

  .top-cards_item a {
    padding: 0; }

  .top-cards_item a:hover::after {
    box-shadow: none;
    padding: 0;
    margin: 0; }

  .top-cards_item figure {
    margin: 0 0 21px; }

  .top-cards_item dt {
    font-size: 1.7rem;
    margin: 0 0 8px; }

  .top-cards_item dd {
    line-height: 1.5; }

  /* ============================================
        c-card_list
  ============================================ */
  .top-cards_list {
    margin-left: -6px;
    margin-right: -6px;
    margin-bottom: 0; }

  .top-cards_list li {
    width: calc(99.9% / 2);
    margin-bottom: 29px;
    padding: 0 6px; }

  .top-cards_list a {
    padding: 0; }

  .top-cards_list-name {
    background-size: 12px 12px; }

  .top-cards_list a:hover::after {
    padding: 0;
    margin: 0;
    box-shadow: none; }

  .top-cards_list figure {
    margin: 0 0 6px; }

  .top-cards_list-name {
    background-position: 5px 0.1em;
    padding: 0 5px 0 23px; }

  /* ============================================
        top-btn
  ============================================ */
  .top-btn {
    font-size: 1.5rem;
    width: 80%;
    margin-left: auto;
    margin-right: auto; }

  .top-btn li {
    background: none;
    max-width: 100%; }

  .top-btn li::after {
    height: 45px; }

  .top-btn a {
    background-position: 10px center;
    background-size: 21px 21px;
    padding: 2px 10px 2px 40px;
	width: 74%;
	}

  /* ============================================
        top-keyvisual
  ============================================ */
  /* ============================================
        top-emergency
  ============================================ */
  .top-emergency {
    margin: 33px 0; }

  .top-emergency-block {
    padding: 20px; }

  /* ============================================
        top-prpducts
  ============================================ */
  /* ============================================
        top-support
  ============================================ */
  .top-support {
    background-image: url(/img/bg_index_001_sp.jpg);
    background-position: center center;
    background-size: 100% auto;
    padding: 37px 0 13px; }

  .top-support .l-inner {
    max-width: auto; }

  .top-support h2 {
    margin-bottom: 20px; }

  .top-support-list {
    font-size: 1.4rem; }

  .top-support-name,
  .top-support-name:last-child {
    width: calc(99.9% / 2);
    margin: 0 0 25px; }

  .top-support-name a::before {
    width: 42px;
    height: 42px;
    -webkit-flex: 0 0 42px;
    flex: 0 0 42px;
    margin: 0 8px 0 0; }

  .top-support-name a:hover::before {
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1); }

  .top-support-name.__download a::before {
    background-size: 28px auto; }

  .top-support-name.__usage a::before {
    background-size: 25px auto; }

  .top-support-name.__doc a::before {
    background-size: 24px auto; }

  .top-support-name.__faq a::before {
    background-size: 31px auto; }

  .top-support-name.__legacy a::before {
    background-size: 8px auto; }

  .top-support-name.__briefing a::before {
    background-size: 28px auto; }

  .top-support-name.__contact a::before {
    background-size: 24px auto; }

  /* ============================================
        top-company / top-recruit
  ============================================ */
  .top-company,
  .top-recruit {
    font-size: 1.4rem;
    line-height: 1.85;
    padding: 20px 0;
    padding: 6.25vw 0; }

  .top-company .u-pc_flex,
  .top-recruit .u-pc_flex {
    padding: 0; }

  .top-company .u-pc_flex::after,
  .top-recruit .u-pc_flex::after {
    display: none; }

  .top-company .l-col,
  .top-recruit .l-col {
    padding-left: 0; }

  .top-company p,
  .top-recruit p {
    margin: 0 0 18px; }

  .top-company .top-btn,
  .top-recruit .top-btn {
    margin-bottom: 0; }

  /*.top-company*/
  .top-company {
    background: url(/img/bg_index_004_sp.jpg) no-repeat center top;
    background-size: cover; }

  .top-company .l-inner {
    background: none; }

  .top-company p {
    margin-right: 40%; }

  /*.top-recruit*/
  .top-recruit {
    background: url(/img/bg_index_003_sp.jpg) no-repeat center 44%;
    background-size: cover; }

  .top-recruit .l-inner {
    background: none; }

  .top-recruit p {
    margin-left: 40%; }

  /* ============================================
        top-news
  ============================================ */
  .top-news-heading,
  .top-news-notice {
    width: 100%;
    padding: 0; }

  /*top-news-heading*/
  .top-news-heading {
    margin: 34px 0 15px; }

  .top-news-heading h2 {
    float: left; }

  .top-news-heading ul {
    float: right;
    margin-top: 2px; }

  .top-news-heading a {
    background-size: 12px 12px;
    background-position: 0 .27em;
    padding-left: 21px; }

  /*top-news-notice*/
  .top-news-notice {
    font-size: 1.4rem;
    line-height: 1.71; }

  /*top-news-list*/
  .top-news-list {
    margin: 0 -16px 35px; }

  .top-news-list a,
  .top-news-list-nolink dl {
    padding: 9px 16px 7px; }

  .top-news-list dt {
    margin-bottom: 1px; }

  /* ============================================
        margin-reset
  ============================================ */
  /* ============================================
        clearfix
  ============================================ */ }

/*# sourceMappingURL=site-top.css.map */