@charset "UTF-8";
/* topicページスタイル */

/* サムネイル */
.topic-thumbnail {
  max-width: 1200px;
  margin: 40px auto 0;

  img {
    width: 100%;
    height: auto;
  }
}

/* パンくず */
.breadcrumbs-wrapper {
  .breadcrumbs {
    min-height: 20px;
  }
}

.topic {
  margin: 0 0 100px 0;
  padding: 30px 15px 0 15px;
}

.topic__inner {
  max-width: 1200px;
  margin: 0 auto;

  h1 {
    color: #0e3571;
    font-size: 3.4rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
  }
}

/* 見出し */
h1.wp-block-heading {
  color: #0e3571;
  font-size: 3.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

h2.wp-block-heading {
  color: #081b39;
  font-size: 3rem;
  font-weight: 500;
  margin: 30px 0 30px 0;
  padding: 0 0 7px 0;
  letter-spacing: 0.02em;
  line-height: 1.2;
  position: relative;

  /* 下線 */
  &::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    background-color: #003991;
    width: 100%;
    height: 2px;
  }
}

h3.wp-block-heading {
  color: #003991;
  font-size: 2.4rem;
  font-weight: 500;
  margin: 30px 0 20px 14px;
  position: relative;

  /* 四角 */
  &::before {
    content: "";
    background-color: #217fc4;
    border-radius: 1.5px;
    height: 24px;
    left: -14px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
  }
}

h4.wp-block-heading {
  color: #081b39;
  font-size: 2.2rem;
  margin: 30px 0 18px 0;
  position: relative;

  /*下線*/
  &::after {
    background-color: #081b39;
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%;
  }
}

h5.wp-block-heading {
  color: #003991;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 30px 0 12px 0;
}

/* 見出しここまで */

p {
  color: #081b39;
  line-height: 1.8;
  margin-bottom: 20px;

  /* リンク */
  a {
    color: #003991;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.4s;

    &:hover {
      color: #115dce;
    }
  }
  /* 外部リンクアイコン */
  a[target="_blank"]::after {
    content: "";
    width: 0.9375em;
    aspect-ratio: 15.187/15.037;
    display: inline-block;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15.187" height="15.037" viewBox="0 0 15.187 15.037"><g id="link" transform="translate(-931.891 16.033)"><path id="パス_152" data-name="パス 152" d="M2696.319,348.091h-4.844l.036,9.858h9.718v-4.183" transform="translate(-1759.082 -359.444)" fill="none" stroke="%23124897" stroke-width="1"/><g id="flowKitConnector" transform="translate(931.104 -6.624) rotate(-45)"><path id="line" d="M0,0H9.539" transform="translate(3.029 4.557)" fill="none" stroke="%23124897" stroke-width="1"/><path id="rightEdge" d="M0,0,3.593,3.764,0,7.528" transform="translate(9.556 0.879)" fill="none" stroke="%23124897" stroke-width="1"/></g></g></svg>');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }
}

/* スマホ用　文字サイズ調整 */
@media (max-width: 767px) {
  .topic__inner h1,
  h1.wp-block-heading {
    font-size: 2.5rem;
  }
  h2.wp-block-heading {
    font-size: 2.5rem;
    margin: 60px 0 24px 0;
  }
  h3.wp-block-heading {
    font-size: 2rem;
    margin: 24px 0 18px 14px;
  }
  h4.wp-block-heading {
    font-size: 1.8rem;
    margin: 24px 0 16px 0;
  }
  h5.wp-block-heading {
    font-size: 1.6rem;
    margin: 24px 0 10px 0;
  }
  p,
  a {
    font-size: 1.4rem;
    margin: 10px 0 0 0;
  }
}

/* ボタン */
.wp-block-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;

  .wp-block-button {
    font-size: 1.6rem;
    min-width: 350px;

    .wp-element-button {
      background-color: #003991;
      border: 1px solid #003991;
      transition: 0.4s;
      width: 100%;

      &:hover {
        background-color: #fff;
        color: #003991;
      }
    }

    /* 白抜きボタン */
    &.is-style-outline--1 {
      .wp-element-button {
        background-color: #fff;
        color: #003991;
        transition: 0.4s;

        &:hover {
          background-color: #003991;
          color: #fff;
        }
      }
    }

    /* ダウンロードボタン */
    &.is-style-btn-pdf-download,
    &.is-style-btn-doc-download {
      width: 100%;
      .wp-element-button {
        display: flex;
        align-items: center;
        gap: 9px;
        justify-content: flex-start;
        width: 100%;
        color: #e80033;
        background-color: #fff;
        border: 2px solid #e80033;
        border-radius: 8px;
        line-height: 1.688;
        padding: 15px 16px 15px 20px;
        transition:
          background-color 0.4s,
          color 0.4s;
        min-width: auto;
        &:hover {
          background-color: #e80033;
          color: #fff;
        }
      }

      /* アイコン部分 */
      .wp-block-button__link {
        &::after {
          content: "";
          display: inline-block;
          min-width: 15px;
          min-height: 15px;
          background: url(../images/product/ico_triangle_red.png) no-repeat
            center center / contain;
          margin: 0 0 0 auto;
          transition: background-image 0.4s;
        }
        &:hover::after {
          background: url(../images/product/ico_triangle_wht.png) no-repeat
            center center / contain;
        }
      }
      .wp-element-button {
        font-weight: 700;
        &::before {
          content: "";
          display: inline-block;
          min-width: 22px;
          min-height: 22px;
          transition: background-image 0.4s;
        }
      }
    }

    /* ダウンロードアイコンの出し分け */
    &.is-style-btn-pdf-download .wp-element-button {
      &::before {
        background: url(../images/product/ico_pdf_red.png) no-repeat center
          center / contain;
      }
      &:hover::before {
        background: url(../images/product/ico_pdf_wht.png) no-repeat center
          center / contain;
      }
    }
    &.is-style-btn-doc-download .wp-element-button {
      &::before {
        background: url(../images/product/ico_pdf_red.png) no-repeat center
          center / contain;
      }
      &:hover::before {
        background: url(../images/product/ico_pdf_wht.png) no-repeat center
          center / contain;
      }
    }
  }
}

/* スマホ用　ボタン */
@media (max-width: 767px) {
  .wp-block-buttons {
    .wp-block-button {
      min-width: unset;
      width: 100%;

      .wp-block-button__link {
        font-size: 1.4rem;
        height: 60px;
      }

      a {
        align-items: center;
        display: flex;
        justify-content: center;
      }
    }

    .wp-element-button {
      font-size: 1.4rem;
    }
  }
}

/* テーブル */
.wp-block-table {
  margin: 20px 0;

  table {
    border-collapse: collapse;
    border: none;
  }

  /* 縦方向のヘッダ */
  td:first-child {
    background-color: #fafafa;
    padding: 19px 15px;
    width: 300px;
  }

  /* 横方向のヘッダ */
  &.is-style-regular {
    thead {
      border-bottom: none;
      th {
        background-color: #fafafa;
      }
    }
    tbody th:first-child td {
      border-right: none;
    }
    tbody td:first-child {
      background-color: #fff;
      border-left: hidden;
      border-right: none;
    }

    th:not(:first-child),
    td:not(:first-child) {
      border-left: 1px solid #b8bfcb;
    }

    thead th,
    tbody td {
      text-align: center;
    }
  }

  /* テーブル共通 */
  td,
  th {
    border-bottom: 1px solid #b8bfcb;
    border-left: 0 solid transparent;
    border-right: 0 solid transparent;
    padding: 20px 16px;
  }
  tr:first-child td,
  tr:first-child th {
    border-top: 1px solid #b8bfcb;
  }
}

/* スマホ用　テーブル */
@media (max-width: 767px) {
  .wp-block-table {
    td {
      min-width: 180px;
      width: 180px;
    }

    &.is-style-regular tr {
      th,
      td {
        min-width: 180px;
        width: 180px;
      }
    }
  }
}

/* 数字リスト */
ol,
ul {
  &.wp-block-list {
    line-height: 1.8;
    margin-left: 40px;
    &::first-child {
      margin-top: 40px;
    }
  }
}
ol.wp-block-list {
  list-style-position: outside;
  list-style-type: decimal;

  ol,
  ul {
    margin-left: 20px;
  }

  li {
    margin-top: 4px;
  }
}

/* 箇条書きリスト */
ul.wp-block-list {
  list-style-position: outside;
  list-style-type: disc;

  ol,
  ul {
    margin-left: 20px;
  }

  li {
    margin-top: 4px;
  }
}

/* ページ内リンクリスト */
ul.wp-block-list.is-style-list-page-link {
  display: flex;
  font-weight: 700;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: 0;

  > li {
    color: #003991;
    cursor: pointer;
    list-style-type: none;
    margin-right: 70px;
    position: relative;

    &::after {
      content: "";
      background-image:
        url(../images/ico_top-scroll_pc.png),
        radial-gradient(circle, #003991 0%, #003991 100%);
      background-repeat: no-repeat;
      background-position: center;
      background-size:
        10px 10px,
        100% 100%;
      border-radius: 50%;
      height: 24px;
      position: absolute;
      transform: translateX(12px) translateY(-0.5px) scaleY(-1);
      width: 24px;
    }

    &:hover {
      color: #86aeeb;
      text-decoration: underline;
      text-underline-offset: 3px;
      transition: 0.4s;
    }
  }
}

/* グループ */
.wp-block-group {
  align-items: center;
  display: flex;
  background-color: #f2f4f7;
  border: 1px solid #f2f4f7;
  border-radius: 8px;
  margin-bottom: 30px;

  &.is-style-group-outline {
    background-color: #fff;
    border: 1px solid #b8bfcb;
    border-radius: 8px;
  }

  .wp-block-group__inner-container {
    padding: 12px;

    p {
      margin-bottom: 0;
    }
  }
}

/* カラム */
.wp-block-columns {
  .wp-block-column-is-layout-flow {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;

    /* テキストは中央揃え */
    p {
      align-items: center;
      display: flex;
      height: 100%;
    }
  }
}

@media (max-width: 767px) {
  .wp-block-columns {
    flex-direction: column;
    gap: 0;
    margin-bottom: 10px;

    p {
      margin-top: 12px;
    }

    .wp-block-column-is-layout-flow {
      margin-bottom: 0;
    }

    .sp-column-order-0 {
      order: 0;
    }

    .sp-column-order-1 {
      order: 1;
    }

    .sp-column-order-2 {
      order: 2;
    }

    .sp-column-order-3 {
      order: 3;
    }
  }
}

/* キャプション付き画像 */
.wp-block-image {
  height: auto;
  width: 100%;

  figure {
    width: 100%;
  }
}

.wp-element-caption {
  color: #747474;
  font-size: 12px;
  margin-top: 8px;
  text-align: center;
}

/* 埋め込み */
.wp-block-embed__wrapper {
  display: flex;
  justify-content: center;

  iframe {
    aspect-ratio: 16 / 9;
    height: auto;
    width: 100%;
  }
}

/* cta */
.contact-cta__inner {
  max-width: 1200px;
  margin: 0 auto;
  justify-content: space-between;

  .contact-cta__main {
    margin: 0;
    width: auto;

    .contact-cta_contact::before {
      background-image: url(../images/ico_mail_navy.png);
    }

    .contact-cta_catalog::before {
      background-image: url(../images/ico_book_navy.png);
    }
  }

  .contact-cta__main-text {
    color: #fff;
  }
}

/* スマホ用 cta */
@media (max-width: 767px) {
  .contact-cta__inner {
    flex-direction: column;
    gap: 80px;

    .contact-cta__main {
      width: 100%;

      .contact-cta__link {
        justify-content: center;
      }
    }

    .contact-cta__link {
      width: 100%;

      .contact-cta__link-text {
        padding: 0;
      }
    }

    .contact-cta__main-text {
      margin-bottom: 0;
    }
  }
}

/* 画面右端のお問い合わせボタン *******************/
.sticky-button-wrapper {
  position: fixed;
  right: 0;
  z-index: 1;

  &.sticky-button-contact {
    top: 162px;
    .sticky-button {
      height: 200px;
      &::before {
        background: url(../images/ico_mail_navy.png) no-repeat center center /
          contain;
      }
    }
  }

  &.sticky-button-catalog {
    top: 400px;
    .sticky-button {
      height: 300px;
      &::before {
        background: url(../images/ico_book_navy.png) no-repeat center center /
          contain;
      }
    }
  }

  .sticky-button {
    color: #222;
    font-size: 1.6rem;
    letter-spacing: 0.05em;
    line-height: 1.125;
    font-weight: 700;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    background: #e6bf00;
    width: 55px;
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.15));
    border: 2px solid #e6bf00;
    transition:
      color 0.4s,
      background-color 0.4s;

    &::before {
      content: "";
      width: 20px;
      height: 20px;
      display: inline-block;
      transition: background-image 0.4s;
    }

    &:hover {
      background: #fff;
    }
  }
}

@media (max-width: 767px) {
  .sticky-button-wrapper {
    opacity: 0;
    visibility: hidden;
  }
}