/*
Theme Name: OnTrails
Theme URI: https://blog.ontrails.jp/
Author: OnTrails
Description: 写真、余白、細い罫線と文字組みを中心にしたアウトドアジャーナル。共通ヘッダーとフッター、記事一覧、目次、検索を備えます。
Version: 3.2.10
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ontrails
Tags: blog, three-columns, right-sidebar, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   フォント

   サイト名だけに使う書体。Poppins（SIL OFL 1.1）。
   外部リクエストを増やさないよう、テーマに同梱して自己ホストしている。
   ライセンス全文は assets/fonts/Poppins-OFL.txt。
   ラテン文字のサブセットのみ（7.8KB）。

   Futura 系（t に足がなく、i の点が丸い幾何学サンセリフ）を狙っている。
   Futura は市販で同梱できないため、同型で再配布できるものを選んだ。
   ========================================================================== */

@font-face {
  font-family: "Poppins OnTrails";
  src: url("assets/fonts/poppins-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   トークン
   ========================================================================== */

:root {
  --ot-accent: #f2d94e;          /* 黄色。道標・注意喚起の色 */
  --ot-accent-dark: #d9be2d;
  --ot-ink: #1b1b1b;             /* ヒーローとフッターの濃色 */
  --ot-text: #333333;
  --ot-muted: #8b9096;
  --ot-line: rgba(200, 200, 200, .5);
  --ot-bg: #fdfdfd;
  --ot-card: #ffffff;
  --ot-soft: #f4f5f6;
  --ot-warn-bg: #fdf6e8;
  --ot-warn-line: #e0b878;
  /* 角丸はほぼ落とす。丸みと柔らかい影で揃っていると、
     筆で殴り書いたロゴだけが浮いて見える。影もぼかさない。 */
  --ot-r: 0px;
  --ot-r-lg: 0px;
  --ot-shadow: 4px 4px 0 rgba(27, 27, 27, .14);
  --ot-shadow-lift: 7px 7px 0 rgba(27, 27, 27, .22);
  --ot-ease: cubic-bezier(.22, .61, .36, 1);
  --ot-max: 1200px;
  --ot-side: 300px;
}

/* ==========================================================================
   土台
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--ot-bg); }

body {
  margin: 0;
  background: transparent;   /* 稜線（.ot-ridge）を後ろに敷くため */
  color: var(--ot-text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .02em;
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; }
a { color: inherit; }

/* 左右の余白は変数にしておく。ヘッダー右上に絶対配置するものが、
   同じ余白に揃える必要があるため（値を2か所に書くとずれる）。 */
:root { --ot-gutter: 24px; }
@media (max-width: 640px) { :root { --ot-gutter: 16px; } }
.ot-container { max-width: var(--ot-max); margin-inline: auto; padding-inline: var(--ot-gutter); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -9999px; background: var(--ot-ink); color: #fff; padding: .6em 1em; z-index: 100; }
.skip-link:focus { left: 1rem; top: 1rem; }

/* ==========================================================================
   ヘッダー
   ========================================================================== */

.ot-topbar { height: 8px; background: var(--ot-accent); }
/* 出しは トップだけ。記事を開くたびに毎回動くと、読みに来た人の邪魔になる */
.home .ot-topbar {
  transform-origin: left;
  animation: ot-rule .75s var(--ot-ease) both;
}
@keyframes ot-rule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.site-header {
  background: var(--ot-bg);
  position: sticky; top: 0; z-index: 50;
  transition: box-shadow .3s var(--ot-ease), background-color .3s var(--ot-ease);
}
.site-header.is-scrolled {
  background: rgba(253, 253, 253, .82);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 1px 0 var(--ot-line), 0 6px 20px rgba(0, 0, 0, .05);
}
/* ロゴを左に大きく置き、ナビと虫めがねは右下に寄せる。
   下端で揃えると、ロゴの高さが変わっても関係が崩れない。 */
.site-header__inner {
  position: relative;
  display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: 16px 24px;
  padding-block: 16px;
  transition: padding .3s var(--ot-ease);
}
.site-header.is-scrolled .site-header__inner { padding-block: 10px; }

.site-branding .custom-logo-link { display: block; }

/*
 * ロゴは、左から吹き付けて書かれるように出す。
 *
 * 塗られた側は最初からくっきりしている。ぼけるのは「今まさに吹いている
 * 先端」だけで、そこから粒が前へ散る。全体がぼけて最後に締まるのは
 * フェードインであってスプレーではない。
 *
 * そのため filter は使わず、マスクの形だけで作る。3枚を重ねる。
 *   1 塗り  … 塗り終わった側。不透明で、すぐ止まる（＝くっきり）
 *   2 霧    … 先端の少し前。薄く伸びて、吹き付けの霧になる
 *   3 粒    … 全面に置いた細かい穴。2 と重なった所だけ粒立って見える
 *
 * 3 は intersect（積）で抜く。add（和）だと粒が埋まって何も起きない。
 * 要素の大きさは変えない。動くのはマスクの位置だけ。
 */
.home .custom-logo {
  /* 塗り。49%→51.2% で落とす。マスク幅300%なので、ロゴ上では約7%の幅。
     ここが「もう乾いている」側で、最初からくっきりしている */
  --ot-paint: linear-gradient(94deg,
    #000 0 49%, rgba(0, 0, 0, .88) 50.2%, transparent 51.2%);
  /* 霧。塗りの先端をまたいで、前方へ薄く伸びる */
  --ot-mist: linear-gradient(94deg,
    #000 0 49%, rgba(0, 0, 0, .5) 51.5%, rgba(0, 0, 0, .22) 54%,
    rgba(0, 0, 0, .07) 56.5%, transparent 58.5%);
  /* 粒。霧と重なった所にだけ穴が見える（塗り側は和で埋め戻される） */
  --ot-grit: radial-gradient(circle at 50% 50%, #000 34%, transparent 35%);

  -webkit-mask-image: var(--ot-mist); mask-image: var(--ot-mist);
  -webkit-mask-size: 300% 100%;       mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;     mask-repeat: no-repeat;

  animation: ot-write 1.25s cubic-bezier(.45, .05, .35, 1) .15s both;
}

/* 粒は、積で合成できる環境だけ。古い環境では霧の掃きだけが残る */
@supports (mask-composite: intersect) or (-webkit-mask-composite: source-in) {
  .home .custom-logo {
    -webkit-mask-image: var(--ot-paint), var(--ot-mist), var(--ot-grit);
            mask-image: var(--ot-paint), var(--ot-mist), var(--ot-grit);
    -webkit-mask-size: 300% 100%, 300% 100%, 2.5px 2.5px;
            mask-size: 300% 100%, 300% 100%, 2.5px 2.5px;
    -webkit-mask-repeat: no-repeat, no-repeat, repeat;
            mask-repeat: no-repeat, no-repeat, repeat;
    /* 塗り ∪（霧 ∩ 粒）。塗った所は粒に削られない＝くっきり残る */
    -webkit-mask-composite: source-over, source-in;
            mask-composite: add, intersect;
  }
}

/*
 * 動かすのはマスクの位置だけ。filter は一切使わない。
 * 粒は動かさない（動かすと縞に見える）。
 *
 * 88%→24% の区間だけを使う。100%→0% にすると、両端に何も起きない
 * 時間ができる（先端がロゴの外にいる間）。区間を詰めて全部を動きに使う。
 *
 * 霧は塗りより先の % まで伸ばしてあるので、位置は同じでよい。
 * マスク幅は 300%。位置 % は「コンテナ幅−マスク幅」に対する割合なので、
 * 幅を大きく取らないと動かない（108% だと数 % しか動かず、一瞬で終わる）。
 */
@keyframes ot-write {
  from {
    -webkit-mask-position: 88% 0, 88% 0, 0 0;
            mask-position: 88% 0, 88% 0, 0 0;
  }
  to {
    -webkit-mask-position: 24% 0, 24% 0, 0 0;
            mask-position: 24% 0, 24% 0, 0 0;
  }
}

/* 動きを減らす設定では、書かずに出す */
@media (prefers-reduced-motion: reduce) {
  .home .custom-logo {
    -webkit-mask-image: none; mask-image: none;
    animation: none;
  }
}
/*
 * 書き終わったらマスクを外す。JSが .is-written を付ける。
 * 以前は .is-scrolled で外していたが、上に戻ってクラスが消えると
 * animation が付き直して、そのたびに書き直していた。
 * 状態が行き来する条件で animation を切り替えてはいけない。
 */
.home .custom-logo.is-written {
  -webkit-mask-image: none; mask-image: none;
  animation: none;
}
.custom-logo {
  display: block;
  width: 280px; height: auto;      /* フッターのロゴと同じ幅 */
  transition: width .3s var(--ot-ease);
}
.site-header.is-scrolled .custom-logo { width: 190px; }

.site-title {
  margin: 0;
  /* Poppins を同梱している。入らない環境では Futura（Apple）→
     Century Gothic（Windows）と、同じ幾何学系に落ちるよう並べる。 */
  font-family: "Poppins OnTrails", Futura, "Century Gothic", "Avenir Next",
    "Hiragino Sans", sans-serif;
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: .005em;  /* Poppins は字幅があるので、ほぼ詰めない */
  line-height: 1.1;
}
.site-title a { text-decoration: none; }
.site-description {
  margin: 3px 0 0;
  font-size: .68rem;
  color: var(--ot-muted);
  letter-spacing: .04em;
  line-height: 1.6;
  max-width: 34em;          /* 説明的なコピーでもナビを押し出さない */
  /* ヘッダーでは2行に抑える。全文はヒーローとmetaに出る */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 780px) { .site-description { display: none; } }

.site-nav { margin-left: auto; }
.site-nav > ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 30px; margin: 0; padding: 0; list-style: none; }
.site-nav a {
  position: relative;
  display: block; text-decoration: none;
  font-size: .92rem; font-weight: 700; line-height: 1.3; text-align: center;
  padding-bottom: 6px;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; border-radius: 2px; background: var(--ot-accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform .32s var(--ot-ease);
}
.site-nav a:hover::after, .site-nav .current-menu-item > a::after {
  transform: scaleX(1); transform-origin: left;
}
.site-nav .ot-nav-sub { display: block; font-size: .62rem; font-weight: 600; color: var(--ot-muted); letter-spacing: .06em; }

/* 虫めがね。ナビの右隣に並べる。 */
.ot-search { position: relative; margin-bottom: 2px; }
.ot-searchbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 0;
  text-decoration: none; color: var(--ot-text);
  cursor: pointer;
  list-style: none;                       /* 三角のマーカーを消す */
  transition: background-color .2s var(--ot-ease);
}
.ot-searchbtn::-webkit-details-marker { display: none; }
.ot-searchbtn::marker { content: ""; }
.ot-searchbtn:hover { background: var(--ot-soft); }
.ot-search[open] > .ot-searchbtn { background: var(--ot-accent); color: var(--ot-ink); }

.ot-search__panel {
  position: absolute; right: 0; top: calc(100% + 10px);
  z-index: 60;
  width: min(320px, calc(100vw - 32px));
  padding: 14px;
  background: var(--ot-card);
  border: 1px solid var(--ot-line);
  border-radius: var(--ot-r);
  box-shadow: var(--ot-shadow-lift);
}
.ot-search__panel::before {
  content: "";
  position: absolute; right: 13px; top: -6px;
  width: 11px; height: 11px;
  background: var(--ot-card);
  border-left: 1px solid var(--ot-line);
  border-top: 1px solid var(--ot-line);
  transform: rotate(45deg);
}
.ot-search__panel .ot-searchform { margin: 0; }

@media (max-width: 780px) {
  /*
   * 上からロゴ・カテゴリ・検索窓の3段。すべて中央に寄せる。
   * 検索は虫めがねを押させず、入力枠を開いたまま出す（open はJSが付ける）。
   */
  /*
   * この幅では追従させない。ロゴ・カテゴリ・検索の3段で縦を使うので、
   * 貼り付いたままだと画面の上を常に占有して本文の邪魔になる。
   * 上に戻る導線は右下のボタン（.ot-totop）が受け持つ。
   */
  .site-header { position: static; }
  .site-header.is-scrolled {
    background: var(--ot-bg);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: none;
  }

  .site-header__inner {
    flex-direction: column; align-items: center;
    gap: 10px; padding-block: 14px;
  }
  /* 追従しないので、スクロールで縮める意味もない */
  .site-header.is-scrolled .site-header__inner { padding-block: 14px; }
  .site-branding { width: 100%; text-align: center; }
  .site-branding .custom-logo-link { display: inline-block; }
  /* 中央に1段使うので、画面幅に合わせて大きく見せる */
  .custom-logo { width: min(320px, 74vw); }
  .site-header.is-scrolled .custom-logo { width: min(320px, 74vw); }
  .site-title { font-size: 1.5rem; }

  .site-nav { width: 100%; overflow-x: auto; }
  .site-nav > ul {
    justify-content: center;
    gap: 18px; flex-wrap: nowrap; padding-bottom: 4px;
  }
  .site-nav a { white-space: nowrap; font-size: .82rem; padding-bottom: 4px; }

  .ot-search { width: 100%; margin: 0; }
  .ot-search[open] > .ot-searchbtn { display: none; }  /* 開いていれば虫めがねは要らない */
  .ot-searchbtn { width: 34px; height: 34px; margin-inline: auto; }
  /* 浮かせず、その場に置く。吹き出しの三角も要らない */
  .ot-search__panel {
    position: static; width: auto; padding: 0;
    background: none; border: none; box-shadow: none;
  }
  .ot-search__panel::before { display: none; }

  /* 追従するヘッダーの下に見出しが隠れる分の逃がしは、この幅では要らない */
  .entry-content h2, .entry-content h3 { scroll-margin-top: 16px; }
}
@media (max-width: 560px) {
  /* 件数は2行目を作るだけで、この幅では情報として効いていない */
  .site-nav .ot-nav-sub { display: none; }
  .site-title { font-size: 1.32rem; }
  .custom-logo { width: min(270px, 76vw); }
  .site-header.is-scrolled .custom-logo { width: min(270px, 76vw); }
}

/* ==========================================================================
   ヒーロー（濃色・下だけ大きく角丸）
   ========================================================================== */

/* 濃色の面に粒子を乗せる。刷り物のざらつきを出すためで、
   きれいなベタ面のままだと、ロゴの筆致だけが浮いてしまう。 */
:root {
  --ot-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ot-hero::after, .site-footer::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background-image: var(--ot-grain);
  background-size: 160px 160px;
  /* overlay は下地が暗いとほとんど変化しない。黒に近い面では効かないので、
     明るい側へ寄せる screen を使う。粒が白く浮いて、刷った紙のざらつきになる */
  opacity: .20;
  mix-blend-mode: screen;
  pointer-events: none;
}
.site-footer { position: relative; }
.site-footer > * { position: relative; z-index: 1; }

/* 明るい面は screen では変わらない（白は白のまま）。
   下地を暗い側へ寄せる multiply を使う。紙のざらつきになる */
.site-header::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background-image: var(--ot-grain);
  background-size: 160px 160px;
  opacity: .13;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.site-header__inner { z-index: 1; }

.ot-hero {
  position: relative;              /* 粒子（::after）を重ねるため */
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(242, 217, 78, .10), transparent 60%),
    var(--ot-ink);
  color: #fff;
  border-radius: var(--ot-r-lg);   /* 上下とも角丸 */
  overflow: hidden;
  padding: 40px 0 44px;
  /* 左右の余白をなくして端まで伸ばす。角の丸い板が浮いているより、
     切りっぱなしの面のほうがロゴと釣り合う。 */
  margin: 0 0 48px;
  border-bottom: 5px solid var(--ot-accent);
}
@media (max-width: 640px) {
  .ot-hero { padding: 24px 0 32px; margin: 0 0 32px; }
}

/* 矢印。JSが動いたときだけ出す。無くてもスワイプで動く */
.ot-hero__wrap { position: relative; z-index: 1; }
/*
 * 縦位置は「画像の中央」に合わせる。
 *
 * wrap には画像の下にタイトルも入るので、top: 50% だと中心が下へずれる。
 * 以前は - 34px で戻していたが、タイトルが2行になると狂う。
 *
 * 画像の高さは カラム幅 × 10/16（.ot-card__thumb の aspect-ratio）で決まる。
 * top の % は「高さ」基準なので使えないが、margin の % は「幅」基準なので、
 * そちらで画像の高さの半分を作る。タイトルが何行でもずれない。
 *
 *   カラム幅   = (wrap幅 - 40px) / 3
 *   画像の高さ = カラム幅 × 0.625
 *   その半分   = wrap幅 × 0.104167 - 4.167px
 *   さらにボタンの高さ(40px)の半分を引く
 */
.ot-hero__arrow {
  position: absolute; top: 0; z-index: 3;
  margin-top: calc(10.4167% - 24.17px);
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 0;
  background: rgba(27, 27, 27, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s var(--ot-ease), color .2s var(--ot-ease),
    border-color .2s var(--ot-ease), opacity .2s var(--ot-ease);
}
.ot-hero__wrap.is-ready .ot-hero__arrow:not([hidden]) { display: flex; }
.ot-hero__arrow[hidden] { display: none; }
.ot-hero__arrow svg { width: 17px; height: 17px; fill: currentColor; }
.ot-hero__arrow:hover { background: var(--ot-accent); border-color: var(--ot-accent); color: var(--ot-ink); }
.ot-hero__arrow[disabled] { opacity: 0; pointer-events: none; }
.ot-hero__arrow--prev { left: -14px; }
.ot-hero__arrow--next { right: -14px; }
@media (max-width: 1100px) {
  .ot-hero__arrow--prev { left: 6px; }
  .ot-hero__arrow--next { right: 6px; }
}
/* カラムが2つになる幅。カラム幅 = (wrap幅 - 20px) / 2 */
@media (max-width: 900px) {
  .ot-hero__arrow { margin-top: calc(15.625% - 23.13px); }
}
/* 指で動かせる幅では矢印を出さない。代わりに右端をぼかして続きがあると示す */
@media (max-width: 640px) {
  .ot-hero__wrap.is-ready .ot-hero__arrow { display: none; }
  .ot-hero__wrap.is-ready::after {
    content: "";
    position: absolute; top: 0; bottom: 8px; right: -16px;
    width: 44px;
    background: linear-gradient(to right, rgba(27, 27, 27, 0), rgba(27, 27, 27, .9));
    pointer-events: none;
    z-index: 2;
  }
  /* 右端まで送ったら消す */
  .ot-hero__wrap.is-end::after { opacity: 0; transition: opacity .2s var(--ot-ease); }
}

/* 横スクロールする注目記事。JSを使わずスクロールスナップで動かす */
.ot-hero__slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 40px) / 3);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.ot-hero__slider::-webkit-scrollbar { display: none; }
.ot-hero__slider > * { scroll-snap-align: start; }
@media (max-width: 900px) { .ot-hero__slider { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (max-width: 640px) { .ot-hero__slider { grid-auto-columns: 86%; gap: 14px; } }

.ot-hero__copy { text-align: center; padding: 44px 16px 28px; }
.ot-hero__copy h2 {
  margin: 0 0 10px;
  font-size: clamp(1.2rem, 3.2vw, 2rem);
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.6;
}
.ot-hero__copy .ot-hero__quote { color: var(--ot-accent); }
/* サブコピーは文（。）ごとに改行する */
.ot-hero__copy p span { display: block; }

.ot-hero__copy p {
  margin: 0 auto;
  max-width: 46em;
  font-size: clamp(.78rem, 1.4vw, .92rem);
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: .03em;
  opacity: .85;
}

/* カテゴリタブ */
.ot-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.ot-tab {
  position: relative;
  display: block;
  min-width: 190px;
  /* 190px の下限があるので、狭い画面では4つ目だけが次の行へ落ちて
     横長に伸びていた。下の media query で格子に組み替える。 */
  padding: .85em 1.4em;
  background: #fff;
  color: var(--ot-text);
  border-radius: 0;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: .95rem;
}
.ot-tab {
  transition: transform .25s var(--ot-ease), box-shadow .25s var(--ot-ease), background-color .25s var(--ot-ease);
}
.ot-tab:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .25); }
.ot-tab.is-active { background: var(--ot-accent); }
.ot-tab.is-active::after {
  content: "";
  position: absolute; left: 50%; bottom: -9px;
  transform: translateX(-50%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid var(--ot-accent);
}
@media (max-width: 640px) {
  /* flex の 30% だと3つ並んで4つ目だけが横長に伸びる。
     格子にして、いくつあっても幅が揃うようにする。 */
  .ot-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ot-tab { min-width: 0; font-size: .82rem; padding: .7em .6em; }
  /* 1列に並んでいたときは下が空いていたので三角を出せたが、
     格子では真下にボタンが来て重なる。色で分かるので出さない。 */
  .ot-tab.is-active::after { display: none; }
}

/* ==========================================================================
   レイアウト
   ========================================================================== */

.ot-main { padding-bottom: 72px; }

/* 記事ページは本文＋サイドバーの2カラム */
.ot-main--sided {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ot-side);
  gap: 40px;
  align-items: start;
  padding-top: 28px;
}
@media (max-width: 980px) { .ot-main--sided { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* 一覧はサイドバーなしの全幅 */
.ot-main--wide { padding-top: 8px; }

/* ==========================================================================
   カード
   ========================================================================== */

.ot-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 24px;
}
@media (max-width: 900px) { .ot-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; } }
@media (max-width: 560px) { .ot-cards { grid-template-columns: minmax(0, 1fr); } }

.ot-card { display: flex; flex-direction: column; gap: 12px; }

.ot-card__thumb {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ot-soft);
  /* 枠と、ぼかさずずらした影。刷ったものを重ねた見え方 */
  border: 2px solid var(--ot-ink);
  box-shadow: 5px 5px 0 var(--ot-ink);
  transition: transform .18s var(--ot-ease), box-shadow .18s var(--ot-ease);
}
.ot-card:hover .ot-card__thumb {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--ot-ink);
}
.ot-card__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ot-ease);
}
.ot-card:hover .ot-card__thumb img { transform: scale(1.06); }

/* 下側をわずかに暗くして、白いバッジと文字を読みやすくする */
.ot-card__thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .28), transparent 45%);
  opacity: 0; transition: opacity .4s var(--ot-ease);
}
.ot-card:hover .ot-card__thumb::after { opacity: 1; }

.ot-card__thumb {
  transition: box-shadow .35s var(--ot-ease), transform .35s var(--ot-ease);
}
.ot-card:hover .ot-card__thumb { box-shadow: var(--ot-shadow-lift); transform: translateY(-3px); }

/*
 * 押せることを見せる。
 *
 * 影が動くだけだと「浮いた」としか読めないので、行き先の合図を角に出す。
 * hover の無い端末では出しっぱなしにする。指で触る画面では、
 * 触れてから出る合図に意味がない。
 */
.ot-card__thumb::before {
  content: "";
  position: absolute; right: 0; bottom: 0; z-index: 2;
  width: 34px; height: 34px;
  background: var(--ot-accent) center / 15px 15px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231b1b1b'%3E%3Cpath d='M7 17.6 16.6 8H9V6h11v11h-2V9.4L8.4 19z'/%3E%3C/svg%3E");
  transform: translate(6px, 6px);
  opacity: 0;
  transition: transform .25s var(--ot-ease), opacity .25s var(--ot-ease);
}
.ot-card:hover .ot-card__thumb::before,
.ot-card:focus-within .ot-card__thumb::before {
  transform: translate(0, 0); opacity: 1;
}
@media (hover: none) {
  .ot-card__thumb::before { transform: none; opacity: .92; }
}

/* タイトルの下線を左から引く */
.ot-card__title a { background-image: linear-gradient(var(--ot-accent), var(--ot-accent));
  background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .35s var(--ot-ease); padding-bottom: 1px; }
.ot-card:hover .ot-card__title a { background-size: 100% 2px; }

/* サムネの上に載せるカテゴリバッジ */
.ot-badge {
  position: absolute; top: 10px; right: 10px;
  background: var(--ot-accent);
  color: var(--ot-ink);
  font-size: .7rem; font-weight: 800;
  letter-spacing: .06em;
  padding: .3em .8em;
  /* 角丸と影のぼかしをやめる。貼ったテープに見せたい。
     わずかに傾けているのは、機械が置いたのではなく人が貼った感じを出すため */
  border-radius: 0;
  transform: rotate(-1.6deg);
  box-shadow: 3px 3px 0 rgba(27, 27, 27, .82);
  text-decoration: none;
}
.ot-badge { transition: background-color .25s var(--ot-ease), color .25s var(--ot-ease), transform .25s var(--ot-ease); }
.ot-card:hover .ot-badge { transform: rotate(1.4deg); }
.ot-badge:hover { background: var(--ot-ink); color: var(--ot-accent); }

.ot-card__title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.6; }
.ot-card__title a { text-decoration: none; }

.ot-card__excerpt { margin: 0; font-size: .82rem; line-height: 1.8; color: var(--ot-muted); }

.ot-card__meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: .72rem; color: var(--ot-muted); }
.ot-card__meta span { display: inline-flex; align-items: center; gap: 4px; }

/* ヒーロー内のカードは文字が白 */
.ot-hero .ot-card__title a { color: #fff; }
.ot-hero .ot-card__excerpt, .ot-hero .ot-card__meta { color: rgba(255, 255, 255, .7); }

/* ==========================================================================
   画面内に入ったら出す（JSが .ot-reveal を付けた要素だけが対象）
   ========================================================================== */

.ot-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ot-ease), transform .6s var(--ot-ease);
  will-change: opacity, transform;
}
.ot-reveal.is-visible { opacity: 1; transform: none; }

/* 画像は読み込み完了でふわっと出す */
.ot-img-fade { opacity: 0; transition: opacity .5s var(--ot-ease); }
.ot-img-fade.is-loaded { opacity: 1; }

/* ==========================================================================
   セクション見出し・ページャ
   ========================================================================== */

.ot-section-title {
  margin: 0 0 22px;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: .04em;
  display: flex; align-items: center; gap: .6em;
}
.ot-section-title::before {
  /* 細い棒をやめ、刷り損じのように傾いた塊にする */
  content: ""; width: 16px; height: 15px;
  background: var(--ot-accent); border-radius: 0;
  transform: skewX(-14deg);
  transform-origin: left;
  transition: transform .5s var(--ot-ease) .1s;
}
.ot-section-title::before { transform: skewX(-14deg) scaleX(0); }
.ot-section-title.is-visible::before, .ot-section-title:not(.ot-reveal)::before { transform: skewX(-14deg) scaleX(1); }

.ot-pagination { margin-top: 44px; text-align: center; }
.ot-pagination .page-numbers {
  display: inline-block; min-width: 2.4em; text-align: center;
  padding: .5em .7em; margin: 0 4px;
  background: #fff; border: 1.5px solid var(--ot-ink); border-radius: 0;
  text-decoration: none; font-size: .88rem; font-weight: 800;
  box-shadow: 3px 3px 0 rgba(27, 27, 27, .18);
}
.ot-pagination .page-numbers {
  transition: transform .2s var(--ot-ease), border-color .2s var(--ot-ease), background-color .2s var(--ot-ease);
}
.ot-pagination a.page-numbers:hover { transform: translateY(-2px); border-color: var(--ot-accent); }
.ot-pagination .page-numbers.current { background: var(--ot-accent); border-color: var(--ot-accent); }

.ot-breadcrumb { font-size: .75rem; color: var(--ot-muted); margin-bottom: 14px; }
.ot-breadcrumb a { color: var(--ot-muted); text-decoration: none; }
.ot-breadcrumb span + span::before { content: "›"; margin: 0 .5em; }

/* ==========================================================================
   記事本文
   ========================================================================== */

.ot-article {
  background: var(--ot-card);
  border-radius: var(--ot-r);
  box-shadow: var(--ot-shadow);
  padding: 32px 36px 44px;
}
@media (max-width: 640px) {
  .ot-article { padding: 22px 18px 32px; border-radius: 0; margin-inline: -16px; }
}

.ot-article__title { margin: 0 0 14px; font-size: 1.65rem; line-height: 1.55; font-weight: 800; }
@media (max-width: 640px) { .ot-article__title { font-size: 1.3rem; } }

.ot-article__meta {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  font-size: .76rem; color: var(--ot-muted);
  padding-bottom: 18px; border-bottom: 1px solid var(--ot-line); margin-bottom: 26px;
}
.ot-article__meta .ot-badge { position: static; background: var(--ot-accent); color: var(--ot-ink); }
/* 更新日。主張しすぎない大きさで、バッジの右に置く */
.ot-article__updated { letter-spacing: .04em; }

.ot-article__thumb { margin: 0 0 28px; }
.ot-article__thumb img { border-radius: var(--ot-r); width: 100%; }

.entry-content > *:first-child { margin-top: 0; }

/* 本文は少し大きく、行間を広めに。長い記事を読み通せることを優先する */
.entry-content {
  font-size: 1.02rem;
  line-height: 2.05;
}
.entry-content p { margin-block: 1.7em; }
@media (max-width: 640px) {
  .entry-content { font-size: .98rem; line-height: 1.95; }
  .entry-content p { margin-block: 1.5em; }
}

/* 太字にマーカーを引く。
   下寄りのグラデーションで線を作るので、行が折り返しても途切れない。
   注記・クレジット・表の見出しには引かない（そこは強調の場ではない）。 */
.entry-content strong {
  font-weight: 700;
  background-image: linear-gradient(transparent 58%, rgba(242, 217, 78, .55) 58%);
  padding-bottom: .05em;
}
.entry-content .ot-notice strong,
.entry-content .ot-credits strong,
.entry-content th strong,
.entry-content .ot-toc strong {
  background-image: none;
  padding-bottom: 0;
}
/* 本文のリンクは黒のまま。青字は本文の流れを切るので使わない。
   色を外すぶん、下線だけがリンクの手がかりになる。消さないこと。 */
.entry-content a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(27, 27, 27, .35);
  transition: text-decoration-color .2s var(--ot-ease), background-size .2s var(--ot-ease);
  background-image: linear-gradient(var(--ot-accent), var(--ot-accent));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0 6px;
}
.entry-content a:hover {
  text-decoration-color: currentColor;
  background-size: 100% 6px;
}

.entry-content h2 {
  position: relative;
  margin-top: 2.8em; margin-bottom: 1em;
  padding: .6em .9em .6em 1.1em;
  background: var(--ot-ink);
  color: #fff;
  border-left: 8px solid var(--ot-accent);   /* 黒帯の頭に黄色を差す */
  font-size: 1.25rem; line-height: 1.5;
  scroll-margin-top: 90px;
}
/* この記事でわかること。
   記事の中身ではなく案内なので、黒帯の見出しを使わず囲みにする。 */
.ot-summary {
  margin-block: 2.4em;
  padding: 1.5em 1.6em 1.3em;
  background: var(--ot-soft);
  border: 1px solid var(--ot-line);
  border-radius: var(--ot-r);
}
.entry-content .ot-summary__title {
  margin: 0 0 .8em;
  padding: 0 0 0 .7em;   /* h2 から継いだ左の黄色い帯に、文字が触れないように */
  background: none;
  color: var(--ot-ink);
  border-radius: 0;
  font-size: 1rem;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
}
/* 印は h2 の左の黄色い帯だけにする。
   ここに ::before の棒を足すと、黄色が2つ並んで意味が薄れる。 */
.entry-content .ot-summary ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.entry-content .ot-summary li {
  margin-block: .5em;
  padding-left: 1.35em;
  position: relative;
  font-size: .95rem;
  line-height: 1.85;
}
.entry-content .ot-summary li::before {
  content: "";
  position: absolute;
  left: .15em; top: .72em;
  width: 7px; height: 7px;
  border-right: 2px solid var(--ot-accent-dark);
  border-bottom: 2px solid var(--ot-accent-dark);
  transform: rotate(-45deg);
}

.entry-content h3 {
  margin-top: 2.2em; margin-bottom: .8em;
  padding-left: .7em;
  border-left: 5px solid var(--ot-accent);
  font-size: 1.08rem; line-height: 1.6;
  scroll-margin-top: 90px;
}
.entry-content h4 { margin-top: 1.8em; font-size: 1rem; }

.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content li { margin-block: .6em; line-height: 1.95; }
.entry-content ul, .entry-content ol { margin-block: 1.6em; }

.entry-content img { border-radius: var(--ot-r); }
.entry-content > p > img:only-child { display: block; margin-block: 2.2em; }
.entry-content img[width="1"] { border-radius: 0; display: inline; }

.entry-content a[target="_blank"] { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }

.entry-content blockquote {
  margin-block: 1.8em; margin-inline: 0; padding: 1em 1.2em;
  border: none; border-left: 4px solid var(--ot-warn-line);
  background: var(--ot-warn-bg);
  border-radius: 0 var(--ot-r) var(--ot-r) 0;
  font-size: .92rem; color: #4a4a4a;
}
.entry-content blockquote p { margin-block: .5em; }

/* 冒頭のPR表記と免責。
   本文の一次ソース引用と区別して、控えめに置く。
   ただしPR表記はステマ規制（景品表示法）で「一般消費者が容易に認識できる」
   表示が求められるため、読めなくなるほど小さくはしない。 */
.entry-content blockquote.ot-notice {
  margin-block: .7em;
  padding: .7em 1em;
  border: none;
  border-left: 2px solid var(--ot-line);
  background: none;
  border-radius: 0;
  font-size: .78rem;
  line-height: 1.85;
  color: #5c5c5c;
  letter-spacing: .01em;
}
.entry-content blockquote.ot-notice:first-child { margin-top: 0; }
.entry-content blockquote.ot-notice + blockquote.ot-notice { margin-top: .4em; }
.entry-content blockquote.ot-notice p { margin-block: 0; }
.entry-content blockquote.ot-notice strong { font-weight: 700; }

/* 画像クレジット。
   CC BY / CC BY-SA は表記が条件なので省けないが、
   本文と同じ大きさで見せる必要はない。 */
.entry-content .ot-credits {
  margin-top: 3em;
  padding-top: 1.2em;
  border-top: 1px solid var(--ot-line);
  font-size: .72rem;
  line-height: 1.8;
  color: #6b6b6b;
}
.entry-content .ot-credits h2 {
  margin: 0 0 .6em;
  padding: 0;
  background: none;
  color: inherit;
  border: none;
  border-radius: 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.entry-content .ot-credits p { margin-block: .5em; }
.entry-content .ot-credits ul { padding-left: 1.2em; margin-block: .5em; }
.entry-content .ot-credits li { margin-block: .15em; line-height: 1.75; }
.entry-content .ot-credits a { color: inherit; }

.entry-content figure.wp-block-table {
  overflow-x: auto; margin-block: 2em; -webkit-overflow-scrolling: touch;
}
.entry-content table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .9rem; }
.entry-content th {
  background: var(--ot-ink); color: #fff; font-weight: 700; text-align: left; white-space: nowrap;
}
.entry-content th, .entry-content td { border: 1px solid var(--ot-line); padding: .8em 1em; vertical-align: top; }
.entry-content tbody tr:nth-child(even) { background: var(--ot-soft); }

/* ==========================================================================
   目次
   ========================================================================== */

.ot-toc {
  background: var(--ot-soft);
  border-radius: var(--ot-r);
  padding: 20px 24px;
  margin-block: 2.2em;
}
.ot-toc__title { font-weight: 800; font-size: .95rem; margin-bottom: .7em; display: flex; align-items: center; gap: .5em; }
.ot-toc__title::before { content: ""; width: 14px; height: 13px; background: var(--ot-accent); transform: skewX(-14deg); }
.ot-toc ol { margin: 0; padding-left: 1.3em; }
.ot-toc li { margin-block: .4em; line-height: 1.7; font-size: .89rem; }
.ot-toc a { text-decoration: none; }
.ot-toc a { transition: color .2s var(--ot-ease); }
.ot-toc a:hover { text-decoration: underline; }
.ot-toc a.is-current {
  color: var(--ot-ink); font-weight: 700;
  box-shadow: inset 0 -.5em 0 rgba(242, 217, 78, .45);
}
.ot-toc ol ol { padding-left: 1.1em; margin-top: .4em; }
.ot-toc ol ol li { font-size: .83rem; color: var(--ot-muted); }

/* ==========================================================================
   アフィリエイトブロック
   ========================================================================== */

.ontrails-affiliate {
  margin-block: 2.2em; padding: 1.3em;
  border: 1px solid var(--ot-line); border-radius: var(--ot-r);
  background: #fff; box-shadow: var(--ot-shadow); text-align: center;
}
.ontrails-affiliate > a {
  display: inline-block; padding: .8em 1.8em; border-radius: 0;
  background: var(--ot-accent); color: var(--ot-ink);
  font-weight: 800; text-decoration: none;
}
.ontrails-affiliate > a {
  transition: transform .22s var(--ot-ease), box-shadow .22s var(--ot-ease), background-color .22s var(--ot-ease);
}
.ontrails-affiliate > a:hover {
  background: var(--ot-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(242, 217, 78, .35);
}
.ontrails-affiliate { transition: box-shadow .3s var(--ot-ease); }
.ontrails-affiliate:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
.ontrails-affiliate img[width="1"] { display: inline; border-radius: 0; }

/* 画像バナーの広告は、テキストリンク用の黄色いボタン装飾を当てない。
   バナー自体が意匠を持っているので、枠を足すと二重になる。
   :has() が使えない環境では従来どおりボタンとして出る（崩れはしない）。 */
.ontrails-affiliate > a:has(img:not([width="1"])) {
  display: inline-block; padding: 0;
  background: none; color: inherit;
  font-weight: inherit;
}
.ontrails-affiliate > a:has(img:not([width="1"])):hover {
  background: none; transform: none; box-shadow: none;
}
.ontrails-affiliate > a > img:not([width="1"]) { display: block; max-width: 100%; height: auto; }
.ontrails-affiliate .easyLink-box a {
  padding: initial; border-radius: initial; background: initial; color: initial; font-weight: initial;
}

/* ==========================================================================
   アプリ紹介カード

   左にアイコン、右に説明とダウンロードボタン。
   本文の途中に置くので、広告ブロックとは違う質感にして
   「運営元のアプリ」であることが分かるようにする。
   ========================================================================== */

.entry-content .ot-appcard {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-block: 2.4em;
  padding: 24px 26px;
  border: 1px solid var(--ot-line);
  border-left: 4px solid var(--ot-accent);
  border-radius: var(--ot-r);
  background: linear-gradient(180deg, #fffdf5, #fff);
  box-shadow: var(--ot-shadow);
}

.entry-content .ot-appcard__visual { flex: 0 0 104px; }
.entry-content .ot-appcard__icon {
  display: block;
  width: 104px; height: 104px;
  margin: 0;
  border-radius: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
}

.entry-content .ot-appcard__body { min-width: 0; flex: 1 1 auto; }

.entry-content .ot-appcard__label {
  margin: 0 0 .2em;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  color: var(--ot-muted);
}
.entry-content .ot-appcard__name {
  margin: 0 0 .45em;
  font-size: 1.35rem; font-weight: 800; letter-spacing: .02em; line-height: 1.3;
}
.entry-content .ot-appcard__desc {
  margin: 0 0 1em;
  font-size: .82rem; line-height: 1.85; color: var(--ot-text);
}

.entry-content .ot-appcard__links {
  margin: 0 0 .7em;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.entry-content .ot-appcard__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .7em 1.5em;
  border: none; border-radius: 0;
  background: var(--ot-ink); color: #fff;
  font-size: .84rem; font-weight: 700; letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
  transition: transform .2s var(--ot-ease), background-color .2s var(--ot-ease),
    color .2s var(--ot-ease), box-shadow .2s var(--ot-ease);
}
.entry-content .ot-appcard__btn:hover {
  background: var(--ot-accent); color: var(--ot-ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(242, 217, 78, .45);
}

.entry-content .ot-appcard__more { margin: 0; font-size: .76rem; }
.entry-content .ot-appcard__more a { color: var(--ot-muted); }

@media (max-width: 620px) {
  .entry-content .ot-appcard {
    flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px;
  }
  .entry-content .ot-appcard__visual { flex-basis: 84px; }
  .entry-content .ot-appcard__icon { width: 84px; height: 84px; border-radius: 0; }
  .entry-content .ot-appcard__links { width: 100%; }
  .entry-content .ot-appcard__btn { flex: 1 1 100%; }
}

/* ==========================================================================
   記事下
   ========================================================================== */

/* ==========================================================================
   シェア

   各社のスクリプトは読み込まない。共有用URLへのリンクとSVGだけ。
   ブランド色で塗ると記事の下が賑やかになりすぎるので、
   通常は枠線だけにして、ホバーでその色に変わるようにしている。
   ========================================================================== */

.ot-share {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--ot-line);
}
.ot-share__label {
  display: block;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  color: var(--ot-muted);
  margin-bottom: 12px;
}
.ot-share__list {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 0; padding: 0; list-style: none;
}
.ot-share__btn {
  --ot-share-color: var(--ot-ink);
  display: inline-flex; align-items: center; gap: .5em;
  padding: .6em 1em;
  border: 1px solid var(--ot-line);
  border-radius: 0;
  background: var(--ot-card);
  color: var(--ot-text);
  font: inherit;
  font-size: .82rem; font-weight: 700; line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--ot-ease), color .2s var(--ot-ease),
    border-color .2s var(--ot-ease), transform .2s var(--ot-ease);
}
.ot-share__btn svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.ot-share__btn:hover {
  background: var(--ot-share-color);
  border-color: var(--ot-share-color);
  color: #fff;
  transform: translateY(-1px);
}
.ot-share__btn--x { --ot-share-color: #000000; }
.ot-share__btn--fb { --ot-share-color: #1877f2; }
.ot-share__btn--line { --ot-share-color: #06c755; }
.ot-share__btn--hatena { --ot-share-color: #00a4de; }
.ot-share__btn--native { --ot-share-color: var(--ot-ink); }
.ot-share__btn--copy { --ot-share-color: var(--ot-accent-dark); }
.ot-share__btn--copy:hover { color: var(--ot-ink); }
.ot-share__btn--copy.is-done {
  background: var(--ot-accent);
  border-color: var(--ot-accent-dark);
  color: var(--ot-ink);
}

/* -------------------------------------------------------------
 * Xのフォローリンク（ヘッダー・フッター・記事末尾・サイドバー）
 * シェアボタンとは役割が違うので、見た目もはっきり分ける。
 * ---------------------------------------------------------- */
.ot-x-follow {
  display: inline-flex; align-items: center; gap: .5em;
  color: inherit; text-decoration: none;
}
.ot-x-follow svg { width: 16px; height: 16px; fill: currentColor; flex: none; }

/* ヘッダー右上。ロゴの高さぶん空いている場所に置く。
   行の中に入れるとナビや虫めがねと同じ高さに揃ってしまい、
   カテゴリーの並びに紛れる。ヘッダーを高くしたくないので、
   行を足さずに空きへ逃がす（.site-header__inner は position: relative）。 */
.site-header__social {
  position: absolute; top: 2px; right: var(--ot-gutter);
  display: flex; gap: 2px;
}
.ot-x-follow--head {
  justify-content: center;
  width: 30px; height: 30px;
  color: var(--ot-muted);                 /* ナビより一段弱く。主役はカテゴリー */
  transition: background-color .2s var(--ot-ease), color .2s var(--ot-ease);
}
.ot-x-follow--head svg { width: 15px; height: 15px; }
.ot-x-follow--head:hover { background: var(--ot-soft); color: var(--ot-ink); }
/* 右上ではアイコンだけ。行き先は aria-label が持っている */
.ot-x-follow--head span { display: none; }

@media (max-width: 780px) {
  /*
   * この幅ではヘッダーが縦積みでロゴが中央に来る。右上に置くと、
   * 画面が狭いほどロゴの端と重なる（320px幅で重なる）。列に戻す。
   *
   * ただし戻すとアイコンが1行に取り残される。字形1つだけだと何のリンクか
   * 分からないので、ここでは文字を出して小さなボタンとして成立させる。
   */
  /* 列の gap だけだと検索枠と等間隔で、ナビ・フォロー・検索が
     どれも同じ距離で並んで見える。下を広げて検索と切り離す。 */
  /*
   * 枠線だけの小さな札は、ナビの並びに埋もれて押されない。
   * X の色（黒地に白）で塗って、リンクではなく行き先のある操作に見せる。
   * 幅は文字ぶんだけ。1段まるごと使うと、ロゴと検索の間に壁ができる。
   */
  .site-header__social { position: static; margin-bottom: 12px; }
  .ot-x-follow--head {
    width: auto; height: auto;
    gap: .5em;
    padding: 9px 16px;
    border: 0;
    border-radius: 999px;
    background: #000;
    color: #fff;
    font-size: .78rem; font-weight: 700; line-height: 1;
    letter-spacing: .02em;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .18);
    transition: transform .12s var(--ot-ease), opacity .12s var(--ot-ease);
  }
  /* 指で押した手応え。hover は当てにできない */
  .ot-x-follow--head:active { transform: translateY(1px); opacity: .88; }
  .ot-x-follow--head:hover { background: #000; color: #fff; }
  .ot-x-follow--head svg { width: 14px; height: 14px; }
  .ot-x-follow--head span { display: inline; }
}

/* 枠つきのボタン。記事末尾とサイドバーで使う */
.ot-x-follow--btn {
  padding: .6em 1em;
  border: 1px solid var(--ot-line);
  background: var(--ot-card);
  color: var(--ot-text);
  font-size: .82rem; font-weight: 700; line-height: 1;
  transition: background-color .2s var(--ot-ease), color .2s var(--ot-ease),
    border-color .2s var(--ot-ease), transform .2s var(--ot-ease);
}
.ot-x-follow--btn:hover {
  background: var(--ot-ink);
  border-color: var(--ot-ink);
  color: #fff;
  transform: translateY(-1px);
}

/* 記事末尾。シェアの列と続けて置くので、間を空けて別のかたまりに見せる */
.ot-follow {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--ot-line);
}
.ot-follow__text {
  margin: 0;
  font-size: .82rem; font-weight: 700;
  color: var(--ot-text);
}

/* フッター。濃色の上なので白で描く。
   下は .site-footer__foot の区切り線がすぐ来るので、余白を持たせて離す。 */
.site-footer__social { margin-top: 14px; margin-bottom: 26px; text-align: center; }
.ot-x-follow--foot {
  padding: .55em .9em;
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  font-size: .8rem; font-weight: 700; line-height: 1;
  transition: background-color .2s var(--ot-ease), color .2s var(--ot-ease),
    border-color .2s var(--ot-ease);
}
.ot-x-follow--foot:hover { background: #fff; border-color: #fff; color: var(--ot-ink); }

/* サイドバーのフォロー枠 */
.ot-widget--x .ot-widget__note {
  margin: 0 0 12px;
  font-size: .8rem; color: var(--ot-muted);
}

/* キーボード操作で行き先が分かるようにする。アイコンだけの箇所は特に要る */
.ot-x-follow:focus-visible {
  outline: 2px solid var(--ot-accent-dark);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .ot-follow { gap: 10px; }
  .ot-follow__text { font-size: .78rem; }
}

@media (max-width: 640px) {
  .ot-share__list { gap: 8px; }
  .ot-share__btn { padding: .55em .8em; font-size: .76rem; }
  /* 画面が狭いときは文字を落としてアイコンだけにする */
  .ot-share__btn span { display: none; }
  .ot-share__btn--copy.is-done span { display: inline; }
  .ot-share__btn--native span { display: inline; }

  /* 共有シートが使える端末では、各社のボタンを隠して1つにまとめる。
     同じことが2通りあると迷ううえ、個別のボタンはアプリを開けない。 */
  .ot-share.has-native .ot-share__list > li:not(.ot-share__native):not(:last-child) { display: none; }
  .ot-share.has-native .ot-share__btn--native {
    background: var(--ot-accent);
    border-color: var(--ot-accent-dark);
    color: var(--ot-ink);
  }
}

.ot-tags { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.ot-tags a {
  font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  color: var(--ot-text);
  background: none;
  border: 1.5px solid var(--ot-ink);
  border-radius: 0;                       /* 丸いピルをやめる */
  padding: .22em .8em; text-decoration: none;
  transition: background-color .18s var(--ot-ease), color .18s var(--ot-ease);
}
.ot-tags a:hover { background: var(--ot-ink); color: var(--ot-accent); }

.ot-pagenav { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px; font-size: .84rem; }
.ot-pagenav a { text-decoration: none; }
.ot-related { margin-top: 52px; }

/* ==========================================================================
   サイドバー
   ========================================================================== */

.site-sidebar { position: sticky; top: 96px; }
@media (max-width: 980px) { .site-sidebar { position: static; } }

.ot-widget {
  background: var(--ot-card);
  border-radius: var(--ot-r);
  box-shadow: var(--ot-shadow);
  padding: 20px 22px;
  margin-bottom: 22px;
  font-size: .86rem;
}
.ot-widget .widget-title, .ot-widget__title {
  margin: 0 0 14px; font-size: .9rem; font-weight: 800;
  display: flex; align-items: center; gap: .5em;
}
.ot-widget .widget-title::before, .ot-widget__title::before {
  content: ""; width: 14px; height: 13px; background: var(--ot-accent); transform: skewX(-14deg);
}
.ot-widget ul { list-style: none; margin: 0; padding: 0; }
.ot-widget li { padding-block: .55em; border-bottom: 1px solid var(--ot-line); }
.ot-widget li:last-child { border-bottom: none; }
.ot-widget a { text-decoration: none; line-height: 1.65; }
.ot-widget a:hover { color: var(--ot-accent-dark); }

.ot-recent { display: flex; gap: 12px; align-items: flex-start; }
.ot-recent__thumb {
  position: relative;
  flex: 0 0 64px; aspect-ratio: 1 / 1;
  border-radius: 0; overflow: hidden; background: var(--ot-soft);
}

/* 人気記事の順位。1〜3位は金銀銅 */
.ot-rank {
  position: absolute; top: -4px; left: -4px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 0;
  border: 2px solid var(--ot-bg);
  background: #6b6b6b; color: #fff;
  font-size: .68rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ot-rank--1 { background: #d4af37; color: #3a2f05; }   /* 金 */
.ot-rank--2 { background: #b9bcc0; color: #33373a; }   /* 銀 */
.ot-rank--3 { background: #b87333; color: #fff; }      /* 銅 */

/* 順位が隠れないよう、サムネの角丸から少しはみ出させる */
.ot-widget--ranking .ot-recent__thumb { overflow: visible; }
.ot-widget--ranking .ot-recent__thumb img { border-radius: 0; }
.ot-footer-widgets .ot-rank { border-color: var(--ot-ink); }
.ot-recent__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ot-recent__title { font-size: .8rem; line-height: 1.55; font-weight: 600; }
.ot-recent__date { font-size: .7rem; color: var(--ot-muted); }

.ot-searchform { display: flex; gap: 8px; }
.ot-searchform input[type="search"] {
  flex: 1 1 auto; min-width: 0; padding: .55em .8em;
  border: 1px solid var(--ot-line); border-radius: 0; font-size: .86rem;
}
/* WordPress標準の検索ブロック（ウィジェットとして置かれた場合）。
   テーマの検索フォームと同じ見た目に揃える。
   既定のままだと入力欄が縦に伸びて不格好になる。 */
.ot-widget .wp-block-search { margin: 0; }
.ot-widget .wp-block-search__label {
  display: block;
  margin: 0 0 12px;
  font-size: .9rem; font-weight: 800;
  display: flex; align-items: center; gap: .5em;
}
.ot-widget .wp-block-search__label::before {
  content: ""; width: 14px; height: 13px; background: var(--ot-accent); transform: skewX(-14deg);
}
.ot-widget .wp-block-search__inside-wrapper {
  display: flex; gap: 8px; align-items: stretch;
}
.ot-widget .wp-block-search__input {
  flex: 1 1 auto; min-width: 0; width: auto;
  padding: .55em .9em;
  border: 1px solid var(--ot-line);
  border-radius: 0;
  background: #fff;
  font-size: .86rem;
  line-height: 1.6;
  height: auto;
}
.ot-widget .wp-block-search__input:focus {
  outline: 2px solid var(--ot-accent); outline-offset: 1px; border-color: var(--ot-accent);
}
.ot-widget .wp-block-search__button {
  flex: 0 0 auto;
  padding: .55em 1.1em;
  border: none; border-radius: 0;
  background: var(--ot-accent); color: var(--ot-ink);
  font-size: .84rem; font-weight: 700; line-height: 1.6;
  cursor: pointer;
  transition: background-color .2s var(--ot-ease), color .2s var(--ot-ease);
}
.ot-widget .wp-block-search__button:hover { background: var(--ot-ink); color: var(--ot-accent); }

/* フッターに置かれた場合 */
.ot-footer-widgets .wp-block-search__input { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); color: #fff; }
.ot-footer-widgets .wp-block-search__button { background: var(--ot-accent); color: var(--ot-ink); }

.ot-searchform button {
  padding: .55em 1.1em; border: none; border-radius: 0;
  background: var(--ot-accent); color: var(--ot-ink);
  font-size: .84rem; font-weight: 800; letter-spacing: .04em; cursor: pointer;
  box-shadow: 3px 3px 0 var(--ot-ink);
  transition: transform .12s var(--ot-ease), box-shadow .12s var(--ot-ease);
}
/* 押したら紙が沈む。影の分だけ動かす */
.ot-searchform button:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ot-ink);
}

/* ==========================================================================
   フッター（濃色・3列）
   ========================================================================== */

.site-footer { background: var(--ot-ink); color: #fff; }  /* 上の余白は .ot-ridge が持つ */
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--ot-accent); }

.ot-footer-widgets {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 28px; padding-block: 48px;
}
@media (max-width: 1040px) { .ot-footer-widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ot-footer-widgets { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-block: 32px; } }

.ot-footer-widgets .ot-widget {
  background: transparent; box-shadow: none; padding: 0; margin: 0; font-size: .84rem;
}
.ot-footer-widgets .ot-widget li { border-bottom-color: rgba(255, 255, 255, .15); }
.ot-footer-widgets .ot-recent__thumb { background: rgba(255, 255, 255, .1); }
.ot-footer-widgets .ot-recent__date { color: rgba(255, 255, 255, .55); }
.ot-footer-widgets .ot-tags a {
  background: var(--ot-accent);
  color: var(--ot-ink);
  font-weight: 700;
}
.ot-footer-widgets .ot-tags a:hover { background: #fff; color: var(--ot-ink); }

.site-footer__logo {
  padding-block: 26px 22px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, .16);   /* ウィジェットとの区切り */
}
.site-footer__logo img { width: min(280px, 62%); height: auto; opacity: .92; }

.site-footer__foot {
  border-top: 1px solid rgba(255, 255, 255, .15);
  padding-block: 22px;
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center;
  font-size: .78rem; color: rgba(255, 255, 255, .7);
}
.site-footer__foot nav ul { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; list-style: none; }
.site-footer__copy { margin-left: auto; }
@media (max-width: 640px) { .site-footer__copy { margin-left: 0; } }

/* ==========================================================================
   上へ戻るボタン（JSが生成する）
   ========================================================================== */

/* 狭い画面のときだけ効かせる改行。広い画面では入れない */
.ot-br-sp { display: none; }
@media (max-width: 780px) {
  .ot-br-sp { display: inline; }
}

/* --------------------------------------------------------------------------
   フッターの上の稜線
   -------------------------------------------------------------------------- */

.ot-ridge {
  position: relative;
  overflow: hidden;              /* せり上がる分をはみ出させない */
  margin-top: 40px;              /* もとは .site-footer に付いていた余白 */
  height: clamp(80px, 10vw, 160px);
  line-height: 0;
}
.ot-ridge svg {
  display: block; width: 100%; height: 100%;
  /* JSが 0→1 を入れる。動かなければ出たままで、それで困らない */
  transform: translateY(calc((1 - var(--ot-ridge, 1)) * 10%));
  will-change: transform;
}
/* 奥ほど薄く。手前はフッターと同じ色にして、そのまま濃色へつなぐ */
.ot-ridge__l3 { fill: #f0ede7; }
.ot-ridge__l2 { fill: #cfc8bd; }
.ot-ridge__l1 { fill: var(--ot-ink); }

@media (prefers-reduced-motion: reduce) {
  .ot-ridge svg { transform: none; }
  .home .ot-topbar, .home .custom-logo { animation: none; }
  .home .custom-logo { -webkit-mask-image: none; mask-image: none; }
}

/* --------------------------------------------------------------------------
   楽天ウィジェット（おまかせ表示）
   -------------------------------------------------------------------------- */

.ot-rakuten[hidden] { display: none; }
.ot-rakuten {
  margin: 40px 0 0;
  padding: 14px 0 0;
  border-top: 1.5px solid var(--ot-line);
}
/* 幅の決まった画像なので、狭い画面では縮める */
.ot-rakuten a { display: inline-block; line-height: 0; }
.ot-rakuten img { max-width: 100%; height: auto; }
.ot-rakuten__imp { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ot-rakuten__label {
  margin: 0 0 8px;
  font-size: .68rem; font-weight: 800; letter-spacing: .12em;
  color: var(--ot-muted);
}
/* 一覧の下では中央に */
.ot-main--wide .ot-rakuten { margin-top: 8px; text-align: center; }
.ot-main--wide .ot-rakuten__label { text-align: left; }
/* サイドバーでは、ウィジェットの並びに合わせる */
.site-sidebar .ot-rakuten { margin: 0 0 28px; padding-top: 0; border-top: none; }

.ot-totop {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 0;
  background: var(--ot-ink); color: #fff;
  box-shadow: var(--ot-shadow-lift);
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s var(--ot-ease), transform .3s var(--ot-ease), visibility .3s;
}
.ot-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.ot-totop:hover { background: var(--ot-accent); color: var(--ot-ink); }

/* ==========================================================================
   その他
   ========================================================================== */

.ot-notfound {
  background: var(--ot-card); border-radius: var(--ot-r); box-shadow: var(--ot-shadow);
  padding: 48px 32px; text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .ot-reveal { opacity: 1; transform: none; }
  .ot-section-title::before { transform: scaleX(1); }
}

@media print {
  .ot-topbar, .site-header, .ot-hero, .site-sidebar, .site-footer,
  .ontrails-affiliate, .ot-toc, .ot-related, .ot-pagenav, .ot-totop, .ot-share, .ot-ridge { display: none; }
  .ot-reveal { opacity: 1 !important; transform: none !important; }
  .ot-article { box-shadow: none; padding: 0; }
  .entry-content h2 { background: none; color: #000; border-left: 3px solid #000; border-radius: 0; }
}

/* -------------------------------------------------------------
 * お問い合わせフォーム
 * 検索フォームと同じ作り（角丸なし・黄色のボタン・影は落とさない）に揃える。
 * ---------------------------------------------------------- */
.ot-contact { margin: 0 0 8px; }

.ot-contact__row { margin: 0 0 18px; }
.ot-contact__row label {
  display: block; margin-bottom: 6px;
  font-size: .82rem; font-weight: 700; color: var(--ot-ink);
}
.ot-contact__row input,
.ot-contact__row textarea {
  display: block; width: 100%; max-width: 100%;
  padding: .6em .8em;
  border: 1px solid var(--ot-line); border-radius: 0;
  background: var(--ot-card); color: var(--ot-text);
  font: inherit; font-size: .9rem; line-height: 1.6;
}
.ot-contact__row textarea { min-height: 180px; resize: vertical; }
.ot-contact__row input:focus,
.ot-contact__row textarea:focus {
  outline: 2px solid var(--ot-accent-dark); outline-offset: 1px;
  border-color: var(--ot-ink);
}

/* 自動投稿よけ。画面からは消すが、読み上げの対象からも外す */
.ot-contact__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ot-contact__note { margin: 0 0 18px; font-size: .78rem; color: var(--ot-muted); }

.ot-contact__submit { margin: 0; }
.ot-contact__submit button {
  padding: .7em 2em; border: none; border-radius: 0;
  background: var(--ot-accent); color: var(--ot-ink);
  font: inherit; font-size: .9rem; font-weight: 800; letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ot-ink);
  transition: transform .12s var(--ot-ease), box-shadow .12s var(--ot-ease);
}
.ot-contact__submit button:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ot-ink); }
.ot-contact__submit button:active { transform: translate(3px, 3px); box-shadow: none; }

/* 送信結果 */
.ot-contact__done,
.ot-contact__error {
  margin: 0 0 20px; padding: 14px 16px;
  border-left: 4px solid var(--ot-accent-dark);
  background: var(--ot-warn-bg);
  font-size: .86rem; font-weight: 700; color: var(--ot-ink);
}
.ot-contact__error { border-left-color: #c0392b; }

@media (max-width: 640px) {
  .ot-contact__row { margin-bottom: 14px; }
  .ot-contact__row textarea { min-height: 150px; }
  .ot-contact__submit button { width: 100%; }
}