@charset "UTF-8";

/**********************************************************************
  共通用css
**********************************************************************/

/* アイコン */
.container .fa-solid,
.container .fa-regular {
  margin-right: 0.3rem;
}

/* 見出し関係 Start */
.container h1 {
  margin-bottom: 1.5rem;
  padding: 0.9rem;
  font-size: 1.5rem;
  font-weight: normal;
  color: var(--color-white);
  border: 10px double var(--color-white);
  background-color: var(--color-site-key);
}
.container h2 {
  margin-bottom: 1.5rem;
  padding: 0.9rem;
  font-size: 1.5rem;
  font-weight: normal;
  border-left: 8px solid var(--color-site-key);
  border-bottom: 4px solid var(--color-border);
}
.container h3 {
  margin-bottom: 1.5rem;
  padding: 0.9rem;
  font-size: 1.3rem;
  font-weight: normal;
  border-left: 5px solid var(--color-site-key);
}
.container h4 {
  margin-bottom: 1.5rem;
  padding: 0.9rem;
  font-size: 1.2rem;
  font-weight: bold;
  border-bottom: 2px dotted var(--color-site-key);
}
.container h5,
.container h6 {
  margin-bottom: 1.5rem;
  padding: 0.9rem;
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--color-site-key);
  border-bottom: 1px solid var(--color-border);
}
/* 見出し関係 End */

/* 空白ボックス Start */
/*---  グレー ---*/
.container .blank-box-gray {
  margin-bottom: 1.5rem;
  padding: 0.9rem 0.7rem;
  background-color: var(--color-back-gray);
  border-left: 10px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
}
/*---  グリーン ---*/
.container .blank-box-green {
  margin-bottom: 1.5rem;
  padding: 0.9rem 0.7rem;
  background-color: var(--color-back-green-light);
  border-left: 10px solid var(--color-back-green);
  border-bottom: 2px solid var(--color-border);
}
/* 空白ボックス End */

/* 段落 Start */
.container p {
  display: block;
  margin-bottom: 1.5rem;
}
/* 段落 End */

/* テキストマーク・強調 Start */
.container mark,
.container em {
 margin: 0;
 padding: 0;
}
/* テキストマーク・強調 End */

/* リンク Start */
.container a {
  color: var(--color-link);
  text-decoration: none;

  @media (any-hover: hover) {
    &:hover {
      text-decoration: underline;
      text-underline-offset: 4px;
      color: var(--color-link-hover);
      transition: 0.5s;
    }
  }
}
/* リンク End */

/* テーブル Start */
.container table {
  margin-bottom: 1.5rem;

  * { border: none !important;}

  tr {
    &:nth-child(even) {
      background-color: var(--color-back-gray) !important;
    }
    th {
      padding: 0.3rem 0.5rem;
      font-weight: normal;
      text-align: center;
      color: var(--color-white);
      background-color: var(--color-table-th);
      border: 1px solid var(--color-border) !important;
    }
    td {
      padding: 0.3rem 0.5rem;
      border: 1px solid var(--color-border) !important;

    }
  }
}
/* テーブル End */

/* リスト Start */
/*---  通常 ---*/
.container ul {
  margin-bottom: 1.5rem;
  padding: 0 0 0 1.5rem;
}
/*--- ●囲み右矢印→ ---*/
.container ul.list-circle-arrow {
  li {
    position: relative;
    list-style: none;

    &:before {
      content: "";
      position: absolute;
      top: 0.15rem;
      left: -1.5rem;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: var(--color-text);
    }
    &:after {
      content: "";
      position: absolute;
      top: 6px;
      left: -1.3rem;
      width: 10px;
      height: 8px;
      background-color: var(--color-white);
      clip-path: polygon(0 31%, 53% 31%, 53% 0, 100% 50%, 53% 100%, 53% 68%, 0 68%);
    }
  }
}
/*--- ●囲み右三角▸ ---*/
.container ul.list-circle-angle {
  li {
    position: relative;
    list-style: none;

    &:before {
      content: "";
      position: absolute;
      top: 0.15rem;
      left: -1.5rem;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: var(--color-white);
      color: var(--color-text);
    }
    &:after {
      content: "";
      position: absolute;
      top: 0.25rem;
      left: -1.25rem;
      width: 0;
      height: 0;
      border-top: 4px solid transparent;
      border-bottom: 4px solid transparent;
      border-left: 6px solid var(--color-text);
    }
  }
}
/*--- 右三角▸ ---*/
.container ul.list-angle {
  li {
    position: relative;
    list-style: none;

    &:before {
      content: "";
      position: absolute;
      top: 6px;
      left: -1.2rem;
      width: 0;
      height: 0;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-left: 8px solid var(--color-text);
    }
  }
}
/*--- 右三角▸（下線あり） ---*/
.container ul.list-angle-border {
  li {
    position: relative;
    margin-bottom: 0.3rem;
    padding-bottom: 0.3rem;
    list-style: none;
    border-bottom: 1px dashed var(--color-border);

    &:before {
      content: "";
      position: absolute;
      top: 6px;
      left: -1.2rem;
      width: 0;
      height: 0;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-left: 8px solid var(--color-text);
    }

    a {
      color: var(--color-text);

      @media (any-hover: hover) {
        &:hover {
          color: var(--color-link-hover);
          transition: 0.5s;
        }
      }
    }
  }
}
/*--- ※ ---*/
.container ul.list-notes {
  li {
    position: relative;
    list-style: none;

    &:before {
      content: "※";
      position: absolute;
      top: 0;
      left: -1.5rem;
    }
  }
}
/* リスト End */

/* 順序付きリスト Start */
/*---  通常 ---*/
.container ol {
  margin-bottom: 1.5rem;
  padding: 0;
  counter-reset: my-number;
  list-style: none;
}
/*---  通常 ---*/
.container ol {
  li {
    position: relative;
    padding-left: 2.0em;
  
    &::before {
      counter-increment: my-number;
      content: counter(my-number) ". ";
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}
/*---  括弧付き ---*/
.container ol.list-no-kakko {
  li {
    position: relative;
    padding-left: 3.0em;
  
    &::before {
      counter-increment: my-number;
      content: "（" counter(my-number) "） ";
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}
/* 順序付きリスト End */

/* ボタン Start */
.container button,
.container .button-block a,
.container input[type=submit] {
  display: inline-block;
  margin: 0px;
  padding: 8px 20px;
  font-weight: normal;
  text-decoration: none;
  color: var(--color-white);
  background-color: var(--color-site-subkey);
  border: 1.5px solid var(--color-white);
  border-radius: 8px;
  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;
    }
  }
}
.container .search-submit {
  color: var(--color-white);
  background-color: var(--color-text);
  border-radius: 50%;

  @media (any-hover: hover) {
    &:hover {
      opacity: 0.7;
      transform: scale(1.05);
      transition: 0.5s;
    }
  }
}
/* ボタン End */

/* テキストボックス Start */
.container input[type=text],
.container input[type=password],
.container input[type=search],
.container input[type=email],
.container textarea {
  margin: 0px;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
/* テキストボックス End */

/* 選択ボックス Start */
.container select {
  /* デフォルト矢印非表示 */
  -webkit-appearance: none;
  appearance: none;

  margin: 0px;
  padding: 0.3rem 2.0rem 0.3rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
.container .select-container {
  position: relative;
  display: inline-block;

  &::after {
    content: '';
    position: absolute;
    top: 16px;
    right: 10px;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-top: 8px solid var(--color-text);
    border-bottom: 0;
    pointer-events: none;
  }
}
/* 選択ボックス End */

/* タブ Start */
.container .main .tab-btn {
  display: flex;
  justify-content: start;
  flex-wrap: nowrap;
  flex-direction: row;
  gap: 5px;

  .btn {
    padding: 0.2rem 0.8rem;
    flex-basis: 6%;
    font-size: 0.9rem;
    text-align-last: justify;
    height: 30px;
    line-height: 1.4rem;
    border-radius: 4px 4px 0px 0px;

    @media (any-hover: hover) {
      &:hover {
        cursor: pointer;
        transition: 0.5s;
        opacity: 0.6;
      }
    }

    a { text-decoration: none; }
  }
}
/* タブ End */

/* タブ *** contents *** Start */
.container .main .tab-contents {
  margin-bottom: 1.5rem;
  padding: 20px 15px;
  height: auto;
  min-height: 500px;
  border: 1px solid var(--color-border);

  .tab-contents-item {
    display: none;
    justify-content: start;
  }
  .tab-contents-item.is-active { display: flex; }
}
.container .main .tab-contents .tab-contents-item.is-active > * {
  animation:  fadeinAnime 1.0s forwards;
}
 @keyframes fadeinAnime {
  from { opacity: 0; }
  to { opacity: 1; }
}    
/* タブ *** contents *** End */

/* ページナビゲーション */
.container .page-nav {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: center;
  flex-direction: row;
  gap: 0.5rem;
  margin: 3.0rem 0px;

  .page-numbers {
    padding: 0px 5px;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 45px;
    background-color: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: 50%;
  }
  .current,
  .prev,
  .next {
    width: auto;
    border: none;
    border-radius: 0;
    background-color: transparent;
  }
}

/* アコーディオン Start */
.container .wp-block-accordion {
  .wp-block-accordion-heading {
    padding: 0.9rem;

    button  {
      margin: 0;
      padding: 0 0 0.1rem 0;
      color: var(--color-text);
      background: none;
      border: none;
      box-shadow: none;

      @media (any-hover: hover) {
        &:hover {
          opacity: 100;
          transform: none;
        }
      }
      .wp-block-accordion-heading__toggle-icon { display: inline-flex; }
      .wp-block-accordion-heading__toggle-title {
        @media (any-hover: hover) {
          &:hover {
            text-decoration: underline;
            text-underline-offset: 4px;
            color: var(--color-link-hover);
            transition: 0.5s;
          }
        }
      }
    }
  }
}
/* アコーディオン End */

/* アコーディオン内Q&A Start */
.container .icci-faq {
  .wp-block-accordion-panel {
    h5 {
      position: relative;
      margin-left: 1.5rem;
      margin-right: 1.5rem;
      padding-left: 3.0rem;
      padding-right: 0rem;
      
      &::before {
        position: absolute;
        content: "Q.";
        left: 1.0rem;
        color: var(--color-border);
      }
    }
    p {
      position: relative;
      margin: 0 0 2.0rem 1.5rem;
      padding-left: 3.0rem;
      padding-right: 2.0rem;

      &::before {
        position: absolute;
        content: "A.";
        left: 1.0rem;
        color: var(--color-text-red);
      }
    }
  }
}
/* アコーディオン内Q&A End */

/* MetaSlider Start */
.container .metaslider-container {
  padding: 0 3.0rem;
}
/* MetaSlider End */

/* 404 Start */
.container .contents-404 {
  padding: 5.0rem;
  text-align: center;
  
  img { margin-bottom: 3.0rem; }
}
/* 404 End */

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

/* 767px（スマホ）以下 */
@media screen and (max-width: 767px) {
  /* 404 Start */
  .container .contents-404 {
    padding: 2.0rem;
  
    img { width: 90%; }
    span { display: none; }
  }
  /* 404 End */
}