@charset "UTF-8";
/*!
 * ギージー SEO スイート — 追加スタイル
 *
 * テーマの public/css/style.min.css を書き換えずに足すための CSS。
 * wp_enqueue_style() で読み込んでおり、テーマの <link>（header.php の直書き・
 * wp_head() より前）より必ず後に出る。つまり詳細度が同じなら後勝ちでこちらが勝つ。
 * !important は 1 つも使っていない。
 *
 * 読み込むのは記事ページ（info / useful）・ニュース一覧（/news/）・
 * ニュースカテゴリーの一覧（/news_category/<slug>/）だけ。
 *
 * 中身:
 *   1. ニュース一覧の絞り込みリンクとページ送り（.p-news .news-filters / .news-pagination / .news-empty）
 *   2. 記事末尾の関連記事（.c-related）
 *   3. 記事本文内の CTA（.geasy-cta）
 *
 * 元は theme の src/scss/pages/_news.scss ・ object/component/_related.scss ・
 * object/component/_geasy-cta.scss をビルドして style.min.css に足していたぶん。
 * プラグイン版ではビルド環境を要らなくするため、素の CSS で持っている。
 * 変数は展開済み（$white=#FFF / $text-color=#000 / $main-orange=#EA580C）。
 * @include sp は @media (max-width:768px)、@include pc は @media (min-width:769px)。
 */

/* =========================================================================
 * 1. ニュース一覧（絞り込みリンク・ページ送り・空状態）
 * ========================================================================= */
.p-news .news-filters {
  flex-wrap: wrap;
}
.p-news .news-filters .filter-btn {
  display: inline-block;
  text-decoration: none;
}
.p-news .news-filters a.filter-btn:hover {
  background-color: #EA580C;
  color: #FFF;
}
.p-news .news-empty {
  padding: 40px 0;
  text-align: center;
  color: #000;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.75;
  letter-spacing: calc(16px * 0.001 * 0);
}
.p-news .news-pagination {
  margin-top: 40px;
}
@media (max-width:768px) {
  .p-news .news-pagination {
    margin-top: 24px;
  }
}
.p-news .news-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-news .news-pagination li {
  list-style: none;
}
.p-news .news-pagination .page-numbers {
  display: block;
  min-width: 40px;
  padding: 8px 12px;
  border: 1px solid #EA580C;
  border-radius: 6px;
  background-color: #FFF;
  color: #EA580C;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s,color 0.2s;
}
@media (max-width:768px) {
  .p-news .news-pagination .page-numbers {
    min-width: 36px;
    padding: 8px 10px;
    font-size: 12px;
  }
}
.p-news .news-pagination .page-numbers.current,
.p-news .news-pagination a.page-numbers:hover {
  background-color: #EA580C;
  color: #FFF;
}
.p-news .news-pagination .page-numbers.dots {
  border-color: transparent;
  background-color: transparent;
  color: #000;
}

/* =========================================================================
 * 2. 記事末尾の関連記事（templates/template-parts/related-posts.php）
 * =========================================================================
 * .p-singlenews（ニュース記事）と .p-contact（お役立ち情報）のどちらの中にも
 * 置くため、親のコンテナに依存しない独立コンポーネントにしてある。
 */
.c-related {
  background: #FFF;
}
@media (min-width:769px) {
  .c-related {
    margin-top: 40px;
    padding: 30px;
    border-radius: 30px;
  }
}
@media (max-width:768px) {
  .c-related {
    margin-top: 24px;
    padding: 20px;
    border-radius: 20px;
  }
}
.c-related__heading {
  margin: 0 0 8px;
  color: #000;
}
@media (min-width:769px) {
  .c-related__heading {
    font-size: 1.44vw;
    font-weight: 700;
    font-style: normal;
    line-height: 1.75;
    letter-spacing: calc(1.44vw * 0.001 * 30);
  }
}
@media (max-width:768px) {
  .c-related__heading {
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.75;
    letter-spacing: calc(18px * 0.001 * 30);
  }
}
.c-related__list {
  display: flex;
  flex-direction: column;
}
.c-related__item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid #F2A474;
  color: #000;
  text-decoration: none;
}
.c-related__item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.c-related__item:hover .c-related__item-title {
  text-decoration: underline;
}
@media (max-width:768px) {
  .c-related__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
.c-related__date {
  flex: 0 0 auto;
  min-width: 90px;
  color: #EA580C;
  font-family: "Roboto",sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: calc(14px * 0.001 * 50);
}
.c-related__item-title {
  font-size: 16px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.75;
  letter-spacing: calc(16px * 0.001 * 30);
}
@media (max-width:768px) {
  .c-related__item-title {
    font-size: 15px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.75;
    letter-spacing: calc(15px * 0.001 * 30);
  }
}

/* =========================================================================
 * 3. 記事本文内の CTA（自動投稿側が入れている class="geasy-cta" のブロック）
 * =========================================================================
 * 目的: 現状は自動投稿側が記事 1 本ずつ同じインラインスタイルを本文に書き込んで
 * いるため、見た目を変えたいときに全記事の本文を書き換えることになる。同等の指定を
 * ここに置いておけば、以降の記事はインラインを外すだけでここ 1 か所で管理できる。
 *
 * 値は本番記事（ID 489 / gijiroku-kakikata-basic-template）の本文に入っている
 * インラインスタイルの実測値に合わせてある。
 *
 * 重要:
 * - !important は使わない。インラインスタイルは常に CSS より強いので、既存記事に
 *   インラインが残っていても見た目は現状のまま（＝壊れない）。インラインを外した
 *   記事だけがこの CSS で描かれる。
 * - 段落・リンクの区別に使えるクラスが本文側に無いため、構造（:first-child /
 *   :last-child / :first-of-type）で当てている。実物の構造は
 *     div.geasy-cta > p(見出し) + p(本文) + p(ボタン2つ + その間の br)
 *   で、段落が増減しても「先頭＝見出し / 末尾＝ボタン行 / 間＝本文」で成立する。
 *
 * 実物の HTML（本番 ID 489 から取得。インラインは付いたまま）:
 *   <div class="geasy-cta" style="margin:40px 0 8px;padding:32px 24px;
 *        background:#f5f7fb;border:2px solid #1B2A4A;border-radius:16px;text-align:center">
 *     <p style="font-size:1.25em;font-weight:700;color:#1B2A4A;margin:0 0 8px">…</p>
 *     <p style="margin:0 0 20px;color:#374151">…<br />…</p>
 *     <p style="margin:0;display:flex;flex-wrap:wrap;gap:12px;justify-content:center">
 *       <a style="…background:#F97316;color:#fff…">今すぐ始める</a><br />
 *       <a style="…background:#fff;color:#1B2A4A…">お問い合わせ</a>
 *     </p>
 *   </div>
 */
.geasy-cta {
  margin: 40px 0 8px;
  padding: 32px 24px;
  background: #f5f7fb;
  border: 2px solid #1B2A4A;
  border-radius: 16px;
  text-align: center;
}

/* 本文の段落（先頭の見出しでも末尾のボタン行でもない段落）。 */
.geasy-cta p:not(:first-child):not(:last-child) {
  margin: 0 0 20px;
  color: #374151;
}

/* 見出しの段落。 */
.geasy-cta p:first-child {
  margin: 0 0 8px;
  color: #1B2A4A;
  font-size: 1.25em;
  font-weight: 700;
}

/* ボタンを並べる段落。flex-wrap があるので SP では自動で折り返す。 */
.geasy-cta p:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 0;
}

/*
 * ボタン行に入っている <br>。flex の子になると空のフレックスアイテムとして
 * gap 1 つ分の幅を取ってしまうので、ボタン行の中だけ無効にする。
 * 本文中の <br>（2 番目の段落の改行）は残す。
 */
.geasy-cta p:last-child br {
  display: none;
}

/* 主ボタン。 */
.geasy-cta p a {
  display: inline-block;
  min-width: 200px;
  padding: 14px 32px;
  border-radius: 999px;
  background: #F97316;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

/* 副ボタン（2 つ目以降）。href では区別できないので順番で当てる。 */
.geasy-cta p a:not(:first-of-type) {
  background: #fff;
  color: #1B2A4A;
}

.geasy-cta p a:hover {
  opacity: .85;
}