@charset "UTF-8";

/**********************************************************************
  index（トップ）用css
**********************************************************************/
/* メインコンテナ前 Start */
.main-before-container {
  padding: 50px 200px;
  width: 100%;
  height: 450px;
  background-image: url('../images/latov.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: repeat;

  p {
    position: absolute;
    font-size: 1.8rem;
    font-weight: bolder;
    line-height: 3.0rem;
    color: var(--color-white);
    text-shadow: 3px 3px 3px var(--color-text);
  }
  .main-before-contents {
    display: flex;
    justify-content: start;
    flex-wrap: nowrap;
    flex-direction: column;
    gap: 0.8rem;

    .button-block {
      display: block;
      margin-left: auto;
      width: 200px;
      height: 80px;
      background-color: var(--color-back-yellow);
    }
    .button-block > a {
      padding-top: 22px;
      width: 100%;
      height: 100%;
      color: var(--color-white);
      line-height: 1.4rem;
      font-size: 1.1rem;
      font-weight: bold;
      background-color: var(--color-back-yellow);
      border: 6px double var(--color-white);
      border-radius: 0px;
      box-shadow: 1.5px 1.5px 5px var(--color-shadow);

      @media (any-hover: hover) {
        &:hover {
          opacity: 0.7;
          transform: scale(1.05);
          transition: 0.5s;
        }
      }
    }
  }
}
/* メインコンテナ前 End */

/* 見出し（h2）アイコン Start */
.container .main h2 img {
  margin-right: 10px;
}
/* 見出し（h2）アイコン End */

/* タブ（お知らせ&更情報） Start */
.container .main .tab-btn-oshirase {
  .btn:nth-child(1) { background-color: var(--color-border); }
  .btn:nth-child(2) {
    padding: 0.2rem 0.6rem;
    background-color: var(--color-cat-oshirase);
  }
  .btn:nth-child(3) {
    padding: 0.2rem;
    flex-basis: 7%;
    background-color: var(--color-cat-seminar);	
  }
  .btn:nth-child(4) { background-color: var(--color-cat-boshu);	}
  .btn:nth-child(5) { background-color: var(--color-cat-koushin);	}
  .btn:nth-child(6) { background-color: var(--color-cat-jyuuyou); }
  .btn a { color: var(--color-white); }
}
/* タブ（お知らせ&更情報） End */

/* タブ内容（お知らせ&更情報） Start */
.container .main .tab-contents .tab-contents-item .entry-list {
  padding: 0px;
  list-style: none;
  width: 100%;

  li {
    display: flex;
    justify-content: start;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: 10px;
    padding: 12px 0px;
    border-bottom: 1px solid var(--color-border);

    .entry-list-date {
      display: inline-block;
      width: 120px;
      font-size: 0.9rem;
    }
    .entry-list-cat {
      display: inline-block;
      padding: 0rem 0.6rem;
      width: 71px;
      font-size: 0.7rem;
      line-height: 1.2rem;
      text-align-last: justify;
      color: var(--color-white);
      border-radius: 4px;
    }
    .entry-list-cat-oshirase { background-color: var(--color-cat-oshirase); }
    .entry-list-cat-seminar {
      padding: 0rem 0.1rem;
      background-color: var(--color-cat-seminar);	
    }
    .entry-list-cat-boshu { background-color: var(--color-cat-boshu);	}
    .entry-list-cat-koushin { background-color: var(--color-cat-koushin);	}
    .entry-list-cat-jyuuyou { background-color: var(--color-cat-jyuuyou);	}
    .entry-list-title {
      padding-top: 0.1rem;
      text-decoration: none;
      color: var(--color-text);

      @media (any-hover: hover) {
        &:hover {
          text-decoration: underline;
          text-underline-offset: 6px;
          color: var(--color-link-hover);
        }
      }
    }
  }
}
/* タブ内容（お知らせ&更情報） End */

/* 情報一覧 → Start */
.container .main .entry-list-more {
  margin-bottom: 1.0rem;
  text-align: right;

  a {
    width: auto;
    font-size: 0.9rem;
    color: var(--color-site-subkey);
    background-color: var(--color-white);
    border: 2px solid var(--color-site-subkey);
    border-radius: 30px;

    @media (any-hover: hover) {
      &:hover {
        color: var(--color-white);
        background-color: var(--color-site-subkey);
        border-color: var(--color-white);
        transition: 0.5s;
      }
    }
  }
}
/* 情報一覧 → End */

/* ビジネスサポート Start */
.container .main .business-support {
  display: flex;
  justify-content: start;
  flex-wrap: nowrap;
  flex-direction: row;
  gap: 20px;
  margin-bottom: 2.0rem;
  min-height: 280px;

  div {
    flex: 1;
    background-position: top 55px right 0px;
    background-size: contain;
    background-repeat: no-repeat;
  }
  
  div:nth-child(1) { background-image: url('../images/business-support-bg-01.png'); }
  div:nth-child(2) { background-image: url('../images/business-support-bg-02.png'); }
  div:nth-child(3) { background-image: url('../images/business-support-bg-03.png'); }
  ul li {
    a {
      color: var(--color-text);
      font-size: 0.9rem;

      @media (any-hover: hover) {
        &:hover { color: var(--color-link-hover); }
      }
    }
  }
}
/* ビジネスサポート End */

/* 各種様式ダウンロード Start */
.container .main .youshiki-download {
  display: flex;
  justify-content: start;
  flex-wrap: nowrap;
  flex-direction: row;
  gap: 20px;
  margin-bottom: 3.0rem;
  min-height: 140px;

  > div {
    flex: 1;
    display: flex;
    justify-content: start;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: 20px;
    padding: 20px 30px;
    border: 1px solid var(--color-border);

    div {
      margin: auto 0px;
      font-size: 0.9rem;
      line-height: 1.3rem;

      > p { margin-bottom: 0px; }
    }
  }
}
/* 各種様式ダウンロード End */

/* お問い合わせ Start */
.container .main .icci-contact {
  display: flex;
  justify-content: start;
  flex-wrap: nowrap;
  flex-direction: row;
  gap: 20px;
  margin: 0px 160px 6.0rem 160px;
  padding: 15px 36px;
  border-left:  5px solid var(--color-border-light);
  border-right:  8px solid var(--color-border);
  border-top:  5px solid var(--color-border-light);
  border-bottom:  8px solid var(--color-border);
  border-radius: 30px 0px;

  div {
    flex: 1;
    text-align: center;

    p { margin-bottom: 0px; }
  }

  .button-block a {
    margin-top: 6px;
    padding: 20px 30px;
    font-size: 1.2rem;
    line-height: 100%;
    border: 6px double var(--color-white);
  }
}
/* お問い合わせ End */

/* 関係リンク Start */
.container .main .kankei-link {
  text-align: center;
}
/* 関係リンク End */

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/* 1279px（タブレット）以下 */
@media screen and (max-width: 1279px) {
  /* メインコンテナ前 Start */
  .main-before-container {
     padding: 40px;
  }
  /* メインコンテナ前 End */

  /* タブ（お知らせ&更情報） Start */
  .container .main .tab-btn-oshirase {
    .btn:nth-child(1),
    .btn:nth-child(4),
    .btn:nth-child(5),
    .btn:nth-child(6) { flex-basis: 7%; }
    .btn:nth-child(2) { flex-basis: 9%; }
    .btn:nth-child(3) { flex-basis: 10%; }
  }
  /* タブ（お知らせ&更情報） End */

  /* お問い合わせ Start */
  .container .main .icci-contact {
    margin: 0px 20px 6.0rem 20px;
    padding: 15px 20px;
  }
  /* お問い合わせ End */
}

/* 767px（スマホ）以下 */
@media screen and (max-width: 767px) {
  /* メインコンテナ前 Start */
  .main-before-container {
    display: none;	
  }
  /* メインコンテナ End */

  /* タブ（お知らせ&更情報） Start */
  .container .main .tab-btn-oshirase {
    .btn:nth-child(1) { flex-basis: 15%; }
    .btn:not(:nth-child(1)) { display: none; }
  }
  /* タブ（お知らせ&更情報） End */

  /* タブ内容（お知らせ&更情報） Start */
  .container .main .tab-contents .tab-contents-item .entry-list li {
    flex-direction: column;
  }
  /* タブ内容（お知らせ&更情報） End */

  /* ビジネスサポート Start */
  .container .main .business-support {
    flex-direction: column;
  }
  /* ビジネスサポート End */

  /* 各種様式ダウンロード Start */
  .container .main .youshiki-download {
    flex-direction: column;
  }
  /* 各種様式ダウンロード End */

  /* お問い合わせ Start */
  .container .main .icci-contact {
    flex-direction: column;
    margin: 0px 0px 6.0rem 0px;
    padding: 15px 5px;
  }
  /* お問い合わせ End */

  /* 関係リンク Start */
  .container .main .kankei-link {
    img { width: 100%; }
  }  
  /* 関係リンク End */
}