@charset "utf-8";

/* ==========================================================================
   wp.css — WordPress にしたことで必要になった部分だけ
   base.css / style.css はもとの静的サイトのまま触っていません。
   静的サイト側を直したときは、その2つを上書きコピーすれば反映できます。
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. ヘッダーのメニュー（管理画面で作ったメニューは <ul> で出力されます）
   -------------------------------------------------------------------------- */
.gnav__list {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gnav__list a {
  color: var(--green);
}

.gnav__list a:hover {
  color: var(--red);
}

/* 「無料相談を申し込む」だけボタンにする。
   管理画面でメニューを作る場合は、その項目の「CSSクラス」欄に
   menu-item-cta または btn-cta と入れてください（どちらでも同じ見た目になります）。

   ※ 文字色をここで白に指定しているのが要点です。
      指定しないと、上の .gnav__list a の緑が勝ってしまい、
      「緑地に緑文字」で読めなくなります。 */
.gnav__list .menu-item-cta > a,
.gnav__list .btn-cta > a {
  background: var(--green);
  color: var(--bg);
  padding: 10px 18px;
  font-weight: 700;
}

/* ホバー時は背景がアクセント色（赤）に変わります。文字は白のままです */
.gnav__list .menu-item-cta > a:hover,
.gnav__list .btn-cta > a:hover {
  background: var(--red);
  color: var(--bg);
}

/* 今いるページのメニュー項目 */
.gnav__list .current-menu-item > a {
  border-bottom: 1px solid currentColor;
}

.gnav__list .menu-item-cta.current-menu-item > a {
  border-bottom: 0;
}

/* ロゴをホームへのリンクにした */
.logo__link {
  color: var(--ink);
}

.logo__link:hover {
  color: var(--red);
}


/* --------------------------------------------------------------------------
   2. 記事カード（アイキャッチ未設定のとき）
   -------------------------------------------------------------------------- */

/* 画像がない記事は、斜線をカード全面に広げる */
.post--noimg .post__bg {
  -webkit-mask-image: none;
          mask-image: none;
}

.journal-empty {
  font-size: 14px;
  line-height: 2;
  color: var(--gray);
  border: 1px dashed var(--ink);
  padding: 28px 24px;
  text-align: center;
}


/* --------------------------------------------------------------------------
   3. 記事ページ
   -------------------------------------------------------------------------- */
.entry {
  max-width: 760px;
}

.entry__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gray);
  margin-bottom: 10px;
}

.entry__title {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  line-height: 1.5;
  letter-spacing: -0.05em;
  margin-bottom: 28px;
  text-wrap: pretty;
}

.entry__thumb {
  margin: 0 0 32px;
}

.entry__thumb img {
  width: 100%;
  border: 1px solid var(--ink);
}

.entry__tags {
  margin-top: 32px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gray);
}

.entry__tags a {
  border-bottom: 1px solid var(--line);
}


/* --------------------------------------------------------------------------
   4. 記事本文（管理画面のエディタで書いた中身）
   -------------------------------------------------------------------------- */
.entry-content {
  font-size: 15px;
  line-height: 2.1;
}

.entry-content > * + * {
  margin-top: 1.6em;
}

.entry-content h2 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.04em;
  line-height: 1.6;
  margin-top: 2.4em;
  padding-left: 14px;
  border-left: 4px solid var(--green);
}

.entry-content h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.04em;
  line-height: 1.7;
  margin-top: 2.2em;
}

.entry-content h4 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  margin-top: 2em;
}

.entry-content a {
  border-bottom: 1px solid var(--green);
}

.entry-content a:hover {
  border-bottom-color: var(--red);
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.4em;
}

.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }

.entry-content li + li {
  margin-top: 0.4em;
}

.entry-content strong {
  font-weight: 700;
}

.entry-content blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 4px 0 4px 20px;
  border-left: 1px solid var(--ink);
  color: var(--gray);
}

.entry-content img {
  max-width: 100%;
  height: auto;
}

.entry-content figure {
  margin-left: 0;
  margin-right: 0;
}

.entry-content figcaption {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--gray);
  margin-top: 8px;
}

.entry-content hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 3em 0;
}

.entry-content code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--hover-bg);
  padding: 2px 5px;
}

.entry-content pre {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
  background: var(--hover-bg);
  border: 1px solid var(--line);
  padding: 16px;
  overflow-x: auto;
}

.entry-content pre code {
  background: none;
  padding: 0;
}

/* 記事の中の表も、狭い画面では横スクロールできるようにする */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--ink);
  font-size: 14px;
  display: block;
  overflow-x: auto;
}

.entry-content th,
.entry-content td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.entry-content th {
  background: var(--green);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
}


/* --------------------------------------------------------------------------
   5. 前後の記事 / 一覧へ戻る / ページ送り
   -------------------------------------------------------------------------- */
.entry-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--ink);
  max-width: 760px;
}

.entry-nav__side--right {
  text-align: right;
}

.entry-nav a {
  display: block;
  color: var(--ink);
}

.entry-nav a:hover .entry-nav__title {
  color: var(--red);
}

.entry-nav__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--green);
  margin-bottom: 6px;
}

.entry-nav__title {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.7;
}

.entry-back {
  margin-top: 32px;
}

/* ページ送り */
.pagination {
  margin-top: 48px;
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.pagination .page-numbers {
  display: inline-block;
  min-width: 40px;
  padding: 10px 12px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  border: 1px solid var(--ink);
  color: var(--ink);
}

.pagination .page-numbers:hover {
  background: var(--hover-bg);
  color: var(--ink);
}

.pagination .page-numbers.current {
  background: var(--green);
  border-color: var(--green);
  color: var(--bg);
}

.pagination .page-numbers.dots {
  border-color: transparent;
}


/* --------------------------------------------------------------------------
   6. 記事下の相談への導線
   -------------------------------------------------------------------------- */
.contact__inner--compact {
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 40px;
}

.contact--compact .section-title--light {
  margin-bottom: 12px;
}

.contact--compact .contact__text {
  margin-bottom: 0;
}

/* 濃緑の上に置くボタンなので、白地に緑文字で反転させる */
.btn-oncontact {
  display: inline-block;
  background: var(--bg);
  color: var(--green);
  padding: 16px 32px;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}

.btn-oncontact:hover {
  background: var(--red);
  color: var(--bg);
}


/* --------------------------------------------------------------------------
   7. WordPress が標準で出すクラス
   -------------------------------------------------------------------------- */

/* 画面には出さず、読み上げソフトにだけ伝える文字 */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.alignleft {
  float: left;
  margin: 0 1.5em 1em 0;
}

.alignright {
  float: right;
  margin: 0 0 1em 1.5em;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignwide,
.alignfull {
  max-width: 100%;
}

.wp-caption {
  max-width: 100%;
}

.wp-caption-text {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--gray);
  margin-top: 8px;
}

/* ログイン中は画面上部に管理バー（黒い帯）が出ます。
   追従ヘッダーがその下に潜り込まないよう、バーの高さぶん下げます。
   ※ ログアウト状態の来訪者には関係ありません。 */
.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

/* 幅600px以下では管理バーが固定表示ではなくなるので、ずらす必要がない */
@media screen and (max-width: 600px) {
  .admin-bar .site-header { top: 0; }
}


/* --------------------------------------------------------------------------
   8. お問い合わせフォーム（Contact Form 7）

   ★ ここの指定は「クラス名に頼らない」書き方にしています。

   管理画面でフォームの中身を書き換えても、class を付け忘れても、
   デザインが崩れないようにするためです。
   （<label> や <input type="text"> といった、HTMLの種類だけで判定します）

   Contact Form 7 は、こちらが書いたHTMLに次のものを足して出力します。
   そのままだと余白や色が崩れるので、ここで元のデザインに合わせています。

     ・入力欄を <span class="wpcf7-form-control-wrap"> で包む
     ・入力ミスの案内（.wpcf7-not-valid-tip）
     ・送信結果のメッセージ（.wpcf7-response-output）
     ・送信中のくるくる（.wpcf7-spinner）

   フォームの作り方は docs/Contact_Form_7の設定手順.md を参照してください。
   -------------------------------------------------------------------------- */

/* --- 全体の間隔（元の .form と同じ） --- */
.form-card .wpcf7-form {
  display: grid;
  gap: 18px;
}

/* CF7 が余分に足す入れものは、間隔を作らないようにする */
.form-card .wpcf7-form p {
  margin: 0;
}

/* 万一 <br> が入っても、行がずれないようにする
   （CF7 の自動改行は functions.php で切っていますが、念のため） */
.form-card .wpcf7-form br {
  display: none;
}


/* --- 項目のかたまり（元の .field と同じ）---
   class="field" が付いていなくても、<label> だけで同じ見た目にします */
.form-card .wpcf7-form label,
.form-card .wpcf7-form .field {
  display: grid;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

/* 入力欄の包みを「1行」として扱う */
.form-card .wpcf7-form .wpcf7-form-control-wrap {
  display: block;
}


/* --- 入力欄（元の .field input / textarea と同じ）---
   種類を並べて指定しています。
   チェックボックスや送信ボタンに幅100%が当たらないようにするためです */
.form-card .wpcf7-form input[type="text"],
.form-card .wpcf7-form input[type="email"],
.form-card .wpcf7-form input[type="url"],
.form-card .wpcf7-form input[type="tel"],
.form-card .wpcf7-form input[type="number"],
.form-card .wpcf7-form input[type="date"],
.form-card .wpcf7-form select,
.form-card .wpcf7-form textarea {
  border: 1px solid var(--ink);
  background: var(--bg);
  padding: 12px;
  font-size: 14px;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  width: 100%;
}

/* メール欄・URL欄は等幅フォント（class:input-mono が無くても効きます） */
.form-card .wpcf7-form input[type="email"],
.form-card .wpcf7-form input[type="url"] {
  font-family: var(--font-mono);
}

.form-card .wpcf7-form textarea {
  resize: vertical;
}

/* キーボード操作でどこを選んでいるか分かるようにする */
.form-card .wpcf7-form input:focus,
.form-card .wpcf7-form select:focus,
.form-card .wpcf7-form textarea:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}


/* --- 送信ボタン（元の .btn-submit と同じ）---
   class:btn-submit が付いていなくても、この見た目になります */
.form-card .wpcf7-form input[type="submit"],
.form-card .wpcf7-form button[type="submit"] {
  background: var(--green);
  color: var(--bg);
  border: 0;
  padding: 16px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-head);
  letter-spacing: -0.02em;
  cursor: pointer;
  width: 100%;
}

.form-card .wpcf7-form input[type="submit"]:hover,
.form-card .wpcf7-form button[type="submit"]:hover {
  background: var(--red);
}


/* --- チェックボックス・ラジオボタン（同意欄などを足したとき用）--- */
.form-card .wpcf7-form .wpcf7-list-item {
  margin: 0;
}

.form-card .wpcf7-form .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
}

.form-card .wpcf7-form input[type="checkbox"],
.form-card .wpcf7-form input[type="radio"] {
  width: auto;
  margin: 0;
}


/* --- 入力ミスの案内（例：メールアドレスの形式が正しくありません）--- */
.form-card .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--red);
}

/* 入力ミスがある欄は、枠を赤くする */
.form-card .wpcf7-form .wpcf7-not-valid {
  border-color: var(--red);
}

/* 送信後のメッセージ。CF7 の標準デザイン（青い太枠）を打ち消します */
.form-card .wpcf7 form .wpcf7-response-output {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--ink);
  font-size: 13px;
  line-height: 1.7;
}

/* 送信できたとき */
.form-card .wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--green);
  color: var(--green);
}

/* 入力ミス・送信失敗・スパム判定のとき */
.form-card .wpcf7 form.invalid .wpcf7-response-output,
.form-card .wpcf7 form.unaccepted .wpcf7-response-output,
.form-card .wpcf7 form.payment-required .wpcf7-response-output,
.form-card .wpcf7 form.failed .wpcf7-response-output,
.form-card .wpcf7 form.aborted .wpcf7-response-output,
.form-card .wpcf7 form.spam .wpcf7-response-output {
  border-color: var(--red);
  color: var(--red);
}

/* 送信中のくるくる。
   出しっぱなしだと送信前から1行ぶんの余白ができてしまうので、
   送信している間だけ表示します（元のフォームと同じ間隔を保つため）。 */
.form-card .wpcf7-spinner {
  display: none;
}

.form-card .wpcf7-form.submitting .wpcf7-spinner {
  display: block;
  margin: 0 auto;
}

/* フォームがまだ準備できていないときに出す、メールへの案内ボタン */
.form-card .btn-fallback {
  display: block;
  text-align: center;
}


/* --------------------------------------------------------------------------
   9. スマホ・タブレットのメニュー（ハンバーガー）

   960px以下では、メニューをボタンで開閉する形にします。
   それまでは横1列に収まらないぶんを2段に折り返していましたが、
   スマホでは追従ヘッダーが148pxになり、画面の2割を占めていました。

   開閉の状態は <html class="nav-open"> だけで表しています（assets/js/nav.js）。
   JavaScriptが動かない環境では、functions.php の techsuke_nav_noscript() が
   ボタンを隠してメニューを常に表示します。
   -------------------------------------------------------------------------- */

/* 開閉ボタンはPC表示では出しません */
.nav-toggle {
  display: none;
}

@media (max-width: 960px) {

  /* 追従ヘッダーの高さ。
     アンカーで飛んだときの位置合わせ（scroll-margin-top）にも使う値なので、
     実際の高さと必ず一致させてください。ずれると見出しがヘッダーに隠れます。 */
  :root {
    --header-h: 65px;
  }

  /* 2段に折り返す指定（style.css）を打ち消して、1段に戻します */
  .site-header__inner {
    height: 64px;
    flex-wrap: nowrap;
    padding-top: 0;
    padding-bottom: 0;
    gap: 16px;
  }

  /* --- 開閉ボタン --- */
  .nav-toggle {
    display: block;
    position: relative;
    width: 44px;            /* 指で押しやすい大きさ（44px以上が目安） */
    height: 44px;
    margin-right: -10px;    /* 線の位置を、ロゴ側の余白と揃えます */
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
  }

  /* 3本の線。真ん中が span 本体、上下が ::before / ::after です */
  .nav-toggle__bars {
    position: absolute;
    top: 21px;
    left: 11px;
    width: 22px;
    height: 2px;
    background: currentColor;
    /* 真ん中の線は色を消して見えなくするので、そこも滑らかに変えます */
    transition: background-color 0.15s ease;
  }

  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: currentColor;
    transition: transform 0.2s ease;
  }

  .nav-toggle__bars::before { top: -7px; }
  .nav-toggle__bars::after  { top: 7px; }

  /* 開いているあいだは × の形にします */
  .nav-open .nav-toggle__bars {
    background: transparent;
  }

  .nav-open .nav-toggle__bars::before {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-open .nav-toggle__bars::after {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* --- メニュー本体（ヘッダーの下に開きます）---

     ※ display で出し入れすると動きを付けられないため、
       透明度と位置で開閉します。閉じているあいだは visibility: hidden なので、
       押せませんし、読み上げソフトにも読まれません。 */
  .gnav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--ink);
    padding: 4px var(--pad-x) 20px;
    /* 項目が増えても画面からはみ出さないようにします */
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;

    /* 閉じている状態 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);

    /* 開くときは、少し下りてきながら現れます。
       visibility も指定しているのは、消えるのを動きの終わりまで待たせるためです
       （すぐ hidden にすると、フェードアウトが見えません）。 */
    transition:
      opacity 0.18s ease,
      transform 0.18s ease,
      visibility 0.18s;
  }

  /* 開いている状態 */
  .nav-open .gnav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* 横並びから縦並びへ */
  .gnav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .gnav__list .menu-item {
    border-top: 1px solid var(--line);
  }

  /* 1つ目だけ線を消します。
     すぐ上にヘッダーの下線があるため、二重線に見えてしまうからです */
  .gnav__list .menu-item:first-child {
    border-top: 0;
  }

  /* 行全体を押せるようにします（指で押しやすくするため） */
  .gnav__list a {
    display: block;
    padding: 15px 2px;
    font-size: 15px;
  }

  /* 「無料相談を申し込む」は、行いっぱいのボタンにします */
  .gnav__list .menu-item-cta,
  .gnav__list .btn-cta {
    border-top: 0;
    margin-top: 14px;
  }

  .gnav__list .menu-item-cta > a,
  .gnav__list .btn-cta > a {
    padding: 15px;
    text-align: center;
  }
}

/* 動きを控えたい設定（OSの「視差効果を減らす」など）にしている人には、
   動きを付けずに切り替えます */
@media (prefers-reduced-motion: reduce) {
  .gnav,
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    transition: none;
  }

  .gnav,
  .nav-open .gnav {
    transform: none;
  }
}


/* --------------------------------------------------------------------------
   10. 追従CTA（画面下に出る「電話する / 無料相談」のバー）

   スマホ・タブレットだけ、トップページだけに出ます。
   PCはヘッダーにCTAが常に見えているため不要です。

   出し入れの条件は assets/js/nav.js（2.）にあります。
     出す … 1画面ぶんの6割をスクロールしたら
     消す … お問い合わせ欄が見えてきたら
   -------------------------------------------------------------------------- */

/* PC表示では出しません */
.cta-bar {
  display: none;
}

@media (max-width: 960px) {

  .cta-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;   /* ヘッダー（100）より下。メニューを開いたら隠れます */
    border-top: 1px solid var(--ink);
    background: var(--bg);

    /* iPhoneの下部（ホームバーの帯）に隠れないようにします */
    padding-bottom: env(safe-area-inset-bottom, 0px);

    /* 閉じている状態。下に隠しておきます。
       visibility も切るのは、見えない状態のリンクに
       キーボード操作で入ってしまうのを防ぐためです。 */
    visibility: hidden;
    transform: translateY(100%);
    transition:
      transform 0.22s ease,
      visibility 0.22s;
  }

  /* 出ている状態 */
  .cta-visible .cta-bar {
    visibility: visible;
    transform: translateY(0);
  }

  /* メニューを開いているあいだは、CTAを隠します
     （画面が二重に塞がるのを避けるため） */
  .nav-open .cta-bar {
    visibility: hidden;
    transform: translateY(100%);
  }

  /* --- 2つのボタン --- */
  .cta-bar__tel,
  .cta-bar__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 56px;   /* 指で押しやすい高さ */
    padding: 8px 6px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: -0.02em;
    text-align: center;
  }

  /* 左：電話（白地） */
  .cta-bar__tel {
    color: var(--ink);
    border-right: 1px solid var(--ink);
  }

  .cta-bar__note {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 400;
    color: var(--gray);
    letter-spacing: 0;
  }

  /* 右：無料相談（緑地）。ヘッダーのCTAと同じ見た目です */
  .cta-bar__main {
    background: var(--green);
    color: var(--bg);
  }

  .cta-bar__main:hover {
    background: var(--red);
    color: var(--bg);
  }
}

/* 動きを控えたい設定にしている人には、動きを付けません */
@media (prefers-reduced-motion: reduce) {
  .cta-bar {
    transition: none;
  }
}


/* --------------------------------------------------------------------------
   11. フッターのリンク

   プライバシーポリシー・特定商取引法・記録一覧へのリンクです。
   実際に存在するページだけが出ます（footer.php で確認しています）。
   -------------------------------------------------------------------------- */

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  font-size: 12.5px;
}

.site-footer__links a {
  color: var(--gray);
}

.site-footer__links a:hover {
  color: var(--red);
}

@media (max-width: 640px) {

  /* スマホでは3つが横に並びきらないので、左寄せで折り返します */
  .site-footer__inner {
    justify-content: flex-start;
    gap: 14px;
  }

  .site-footer__links {
    width: 100%;
    gap: 16px;
  }
}


/* --------------------------------------------------------------------------
   12. 画面幅に合わせた調整
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .contact__inner--compact {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 640px) {
  .gnav__list {
    flex-wrap: wrap;
    gap: 16px;
  }

  .entry-nav {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .entry-nav__side--right {
    text-align: left;
  }

  .entry-content { font-size: 14.5px; }
  .entry-content h2 { font-size: 21px; }
  .entry-content h3 { font-size: 18px; }

  .btn-oncontact {
    display: block;
    text-align: center;
  }

  .alignleft,
  .alignright {
    float: none;
    margin: 0 0 1em;
  }
}