@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/
#header {
  position: static;
}
#content {
  a {
    color: var(--color_link);
  }
  img {
    width: inherit;
    height: inherit;
    vertical-align: baseline;
  }
}

/* テーマ調整 */
#main_content .post_content {
  --blue300: #7ba5d1;
  --gray500: #f5f7f9;
  font-size: 15px;

  p,
  span,
  ol,
  li,
  th,
  td {
    font-size: 15px;
  }
  h2,
  h3,
  h4 {
    color: inherit;
    line-height: 1.4;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0.5em;
    &::before {
      content: none;
    }
  }
  h2 {
    font-size: 1.4em;
    background-color: var(--gray500);
    border-top: var(--blue300) 2px solid;
  }
  h3 {
    font-size: 1.3em;
    background-color: var(--gray500);
    border-left: var(--blue300) 3px solid;
    padding: 0.5em;
  }
  h4 {
    font-size: 1.2em;
    border-left: var(--blue300) 2px solid;
  }

  .is-style-btn_solid.red_ {
    --the-btn-color: #d85a6c;
    --the-solid-shadow: #c34c5d;
    a {
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;

      &::before {
        width: 24px;
        height: 24px;
        background-color: #fff;
        border-radius: 999px;
        content: "";
        position: absolute;
        right: 10px;
        z-index: 2;
      }
      &::after {
        width: 8px;
        height: 8px;
        border-top: 2px solid var(--the-btn-color);
        border-right: 2px solid var(--the-btn-color);
        content: "";
        position: absolute;
        top: 50%;
        right: 22px;
        transform: rotate(45deg) translateY(-50%);
        z-index: 3;
      }
      span {
        padding-left: 1em;
        padding-right: 1em;
      }
    }
  }

  @media screen and (max-width: 600px) {
    font-size: 3.8vw;
    p,
    span,
    ol,
    li,
    td,
    td {
      font-size: 3.8vw;
    }
    h2 {
      font-size: 1.2em;
    }
    h3 {
      font-size: 1.1em;
    }
    h4 {
      font-size: 1.05em;
    }
  }
}
/* 下線の色 */
.mark_orange {
  background: linear-gradient(transparent 60%, #ffd7e1ff 0%);
  /* 太字の設定 */
  font-weight: bold;
}
/* SWELL標準目次の文字色を強制的に黒にする */
.p-toc .p-toc__link {
  color: #333 !important;
}
/* PC・スマホ共通：タイトルを太字にする */
.c-postTitle__ttl {
  font-weight: bold !important;
}
/* スマホの時だけ：文字サイズを画面幅に合わせる*/
@media screen and (max-width: 600px) {
  .c-postTitle__ttl {
    font-size: 5vw !important;
    line-height: 1.4 !important;
    width: 100%;
  }
}
/* 記事下のカテゴリーリンクを参考サイトのデザインに合わせる */
.p-articleFoot .c-categoryList__link,
.l-articleBottom .c-categoryList__link {
    background-color: #7aa4d0 !important; /* 背景色：指定の青色 */
    color: #fff !important;               /* 文字色：白 */
    border-radius: 1px;                   /* 角の丸み：1px */
    padding: 4px 0.5em;                   /* 余白：上下4px、左右0.5文字分 */
    line-height: 1;                       /* 行の高さ：1 */
    text-decoration: none;                /* 下線を消す */
    display: inline-block;                /* ブロック状に表示 */
}
/* 記事下のフォルダアイコン（カテゴリーリスト全体）の色を青にする */
.p-articleMetas__termList.c-categoryList {
    color: #7aa4d0 !important;
}
  .caption-box2 {
    .cap_box_ttl {
      background-color: #7aa4d0;
      span {
        font-size: 14px;
        font-weight: bold;
      }
    }
    .cap_box_content {
      background-color: #fff;
      border-color: #7aa4d0;
      padding: 1em;
      ul {
        list-style: disc;
        padding: 0;
        li {
          border-bottom: 1px dashed var(--color_border);
          font-size: 14px;
          padding-bottom: 0.75em;
          a {
            color: var(--color_link);
            font-weight: bold;
            text-decoration: underline;
          }
        }
      }
    }
  }
/* キャプションボックス内のリストに左余白をつける */
.caption-box2 .cap_box_content ul {
    padding-left: 1em !important; /* 左に2文字分の余白を追加 */
    margin-left: 0.5em !important; /* 必要なら外側の余白も少し調整 */
}