/* =============================================================================
 * 令和トラベル Engineering Blog — はてなブログ デザインCSS
 *
 * 前提:
 *   - テーマ: Blank
 *   - デザイン → スマートフォン → レスポンシブデザイン: ON
 *   - トップページの表示形式: 一覧
 *   - 「タイトル下」HTML に title-below.html、フッタHTML に footer.html を貼る
 *
 * 移植元: https://engineering.reiwatravel.co.jp (src/styles, src/components)
 * ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap");

/* -----------------------------------------------------------------------------
 * ① トークン (src/styles/theme.css)
 * -------------------------------------------------------------------------- */

:root {
  /* Colors */
  --color-primary: #00cd68;
  --color-primary-light: #eef4f1;
  --color-primary-dark: #00b33f;
  --color-gray: #757575;
  --color-gray-light: #cbcbcb;
  --color-white: #fff;
  --color-black: #000;
  --color-border: rgba(0, 0, 0, 0.1);
  --color-border-primary: rgba(0, 203, 104, 0.3);
  /* 本文リンク。本家(react-notion-x)の .notion-link と同じ濃いグレー */
  --color-link: #37352f;
  --color-link-underline: rgba(55, 53, 47, 0.4);
  --color-link-underline-hover: rgba(55, 53, 47, 0.9);

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space: 4px;
  --space-2x: 8px;
  --space-3x: 12px;
  --space-4x: 16px;
  --space-5x: 20px;
  --space-6x: 24px;
  --space-8x: 32px;
  --space-10x: 40px;
  --space-12x: 48px;
  --space-14x: 56px;
  --space-16x: 64px;
  --space-20x: 80px;
  --space-30x: 120px;
  --space-40x: 160px;

  /* Shadow */
  --shadow: 1px 1px 1px rgba(0, 0, 0, 0.01);

  /* Radius */
  --rounded-card: 20px;
  --rounded-xs: 4px;
  --rounded-md: 16px;
  --rounded-lg: 24px;

  /* Font Size */
  --fontSize-xs: 10px;
  --fontSize-sm: 12px;
  --fontSize-base: 14px;
  --fontSize-lg: 16px;
  --fontSize-xl: 18px;
  --fontSize-2xl: 20px;
  --fontSize-3xl: 24px;
  --fontSize-4xl: 28px;
  --fontSize-5xl: 32px;

  /* Layout */
  --container: 1064px;
}

/* -----------------------------------------------------------------------------
 * ② リセット (src/styles/reset.css + global.css の必要分のみ)
 * -------------------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

body {
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-size: var(--fontSize-base);
  line-height: 1.7;
  color: var(--color-black);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  border-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
pre {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

/* はてな標準CSSは #footer li のようにIDを含むセレクタで li に余白を付けてくるため、
 * 型セレクタのリセットでは詳細度で負ける。自作ヘッダ／フッタを差し込む2領域に限り
 * 同じ詳細度で打ち消す。li に margin / padding / list-style を指定している
 * コンポーネント側のルールは無いので、これで衝突しない。 */
#top-editarea li,
#bottom-editarea li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* -----------------------------------------------------------------------------
 * ③ レイアウト — 本家 Container (max-width 1064px / padding 0 20px) 相当
 * -------------------------------------------------------------------------- */

#container,
#container-inner {
  width: 100%;
}

#content {
  padding-bottom: var(--space-40x);
}

#content-inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-5x);
}

#wrapper {
  width: 100%;
}

/* 本家はサイドバーを持たない1カラムなので、はてなのサイドバーは表示しない。
 * HTML自体を出さないほうが素直なので、はてな側で
 * 「デザイン → カスタマイズ → サイドバー」のモジュールを全て削除するのが本筋。
 * ここでの display: none はそれをしていない場合の保険。
 * サイドバーを使いたくなった場合の2カラム化スニペットは README を参照。 */
#box2 {
  display: none;
}

/* -----------------------------------------------------------------------------
 * ④ ヘッダ — はてな標準のブログタイトルは隠し、title-below.html の自作ヘッダを使う
 * -------------------------------------------------------------------------- */

#blog-title,
#blog-title-inner {
  display: none;
}

/* はてな標準CSSがこの領域に高さ制限・overflow・flex などを付けていると、
 * 中のヒーローが薄い帯に潰れる。素の block に戻して中身の高さをそのまま出す。 */
#top-editarea {
  display: block;
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
  max-height: none;
  overflow: visible;
}

.rt-header {
  height: 80px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
  box-shadow: var(--shadow);
  background-color: var(--color-white);
}

.rt-header__inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-5x);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rt-header__logo {
  display: flex;
  align-items: center;
}

.rt-header__logo img {
  display: block;
}

.rt-header__logo .rt-pc {
  width: 255px;
  height: 17px;
}

.rt-header__logo .rt-sp {
  width: 115px;
  height: 44px;
  display: none;
}

/* 採用情報ボタン — 本家 Button variant="solid" size="sm" */
.rt-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--space-8x);
  padding: 0 var(--space-6x);
  font-size: var(--fontSize-base);
  font-weight: bold;
  white-space: nowrap;
  border: 1px solid var(--color-primary);
  border-radius: var(--rounded-lg);
  background-color: var(--color-primary);
  color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.rt-button:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* ヒーロー — 本家 Hero */
.rt-hero {
  width: 100%;
  height: 400px;
  min-height: 400px;
  flex-shrink: 0;
  background-color: #faf2e0;
  background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/r/reiwatravel/20260826/20260826232755.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* カテゴリナビ — 本家 CategoryFilter の横スクロールUI */
.rt-categories {
  max-width: var(--container);
  margin: 60px auto 0;
  padding: 0 var(--space-5x) 0 calc(var(--space-5x) + var(--space-2));
}

.rt-categories__list {
  display: flex;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  font-weight: 600;
}

.rt-categories__list::-webkit-scrollbar {
  height: 3px;
}

.rt-categories__list::-webkit-scrollbar-thumb {
  background-color: #eee;
  border-radius: 2px;
}

.rt-categories__list::-webkit-scrollbar-track {
  border-radius: 2px;
}

.rt-categories__list a {
  display: block;
  padding: var(--space-3x);
  white-space: nowrap;
  color: var(--color-gray);
  transition: opacity 0.3s;
}

.rt-categories__list a:hover {
  opacity: 0.5;
}

.rt-categories__list a.is-current {
  color: var(--color-black);
  font-weight: bold;
}

/* 本家の記事詳細にはヒーローもカテゴリフィルタも無いので、一覧系ページだけに出す */
body.page-entry .rt-hero,
body.page-entry .rt-categories {
  display: none;
}

/* -----------------------------------------------------------------------------
 * ⑤ 記事一覧 — 本家 PostList / PostCard
 *    「一覧」表示形式で出力される .archive-entries > .archive-entry が対象
 *
 *    はてな標準CSS(blog.css)が下の2つを詳細度 (0,2,0) で当ててくる。
 *      .page-archive .archive-entry { display: block }
 *      .page-archive .entry-thumb   { width:120px; height:120px; float:left; margin-right:10px }
 *    単一クラスでは負けてグリッドが組まれず、DOM順(日付→タイトル→カテゴリ→サムネ)で
 *    並んでしまうため、こちらも .archive-entries を前置して詳細度を上げる。
 *    blog.css より後に読まれるので同点なら勝つ。
 *    なお <body> にはトップページでも page-archive が付くので、上の指定はトップにも効く。
 * -------------------------------------------------------------------------- */

.archive-entries {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-16x) var(--space-10x);
  margin-bottom: 60px;
  padding-top: 100px;
}

/* パンくずとアーカイブ見出しは非表示。
 * 本家にはどちらも無く、絞り込み中のカテゴリは上部のカテゴリナビが太字で示すので
 * 情報としても重複する。はてなはパンくずを記事詳細にも出すため、まとめて消す。
 * 表示したい場合は README のスニペットを参照。 */
.breadcrumb,
.archive-header-category,
.archive-heading {
  display: none;
}

/* PostCard 化。ラッパーを display:contents で解体し、grid-area で本家の並び
 * (サムネ → タイトル → カテゴリ+日付) に組み替える */
.archive-entries .archive-entry {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "thumb thumb"
    "title title"
    "cats  date";
  align-items: center;
  /* サムネイル未設定の記事でもタイトルが上詰めになるようにする */
  align-content: start;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

/* blog.css の clearfix 疑似要素はグリッドアイテムになって1行増やすので消す */
.archive-entries .archive-entry::after {
  display: none;
}

.archive-entries .archive-entry-header,
.archive-entries .archive-entry-body {
  display: contents;
}

/* サムネイル — 16:9 / radius 8px / border #eee / hover で 1.05 拡大 */
.archive-entries .archive-entry .entry-thumb-link {
  grid-area: thumb;
  display: block;
  overflow: hidden;
  border: 1px solid #eee;
  border-radius: 8px;
}

/* height を明示しないと blog.css の height:120px が残り、definite height が
 * aspect-ratio に勝って横長の帯になる。float と margin も打ち消す。 */
.archive-entries .archive-entry .entry-thumb {
  display: block;
  float: none;
  width: 100%;
  height: auto;
  margin: 0;
  aspect-ratio: 1280 / 670;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #f5f5f5;
  transition: transform 0.3s ease-in-out;
}

.archive-entries .archive-entry .entry-thumb-link:hover .entry-thumb {
  transform: scale(1.05);
}

/* タイトル — 16px/700, 2行クランプ, 高さ60px固定 */
.archive-entries .archive-entry .entry-title {
  grid-area: title;
  height: 60px;
  margin: var(--space-5x) 0;
  font-size: var(--fontSize-lg);
  font-weight: 700;
  line-height: 30px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.archive-entries .archive-entry .entry-title a {
  color: var(--color-black);
}

.archive-entries .archive-entry .categories {
  grid-area: cats;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space);
  margin: 0;
}

.archive-entries .archive-entry .date {
  grid-area: date;
  justify-self: end;
  margin: 0;
  font-size: var(--fontSize-base);
  color: var(--color-gray);
  white-space: nowrap;
}

.archive-entries .archive-entry .date a {
  color: var(--color-gray);
}

/* 本家カードは抜粋・シェアボタン・タグを出さない。
 * 残すと grid-area 未指定のグリッドアイテムとして暗黙の行に流れ、カードが伸びる。 */
.archive-entries .archive-entry .entry-description,
.archive-entries .archive-entry .social-buttons,
.archive-entries .archive-entry .archive-entry-tags-wrapper,
.archive-entries .archive-entry .entry-footer {
  display: none;
}

/* 本家は yyyy/MM/dd 表記。はてなが出力する区切りハイフンをスラッシュに差し替える */
.date .hyphen {
  font-size: 0;
}

.date .hyphen::before {
  content: "/";
  font-size: var(--fontSize-base);
}

/* -----------------------------------------------------------------------------
 * ⑥ カテゴリバッジ — 本家 Category
 * -------------------------------------------------------------------------- */

.categories a,
.entry-category-link {
  display: inline-flex;
  align-items: center;
  height: 25px;
  padding: 8px 12px;
  font-size: var(--fontSize-sm);
  font-weight: 600;
  color: var(--color-primary);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 160px;
  transition: opacity 0.3s;
}

.categories a:hover,
.entry-category-link:hover {
  opacity: 0.5;
}

/* 記事詳細のカテゴリは size="md" 相当 */
.entry .entry-header .categories a,
.entry .entry-header .entry-categories a {
  height: 34px;
  padding: 12px 20px;
  font-size: var(--fontSize-base);
}

/* -----------------------------------------------------------------------------
 * ⑦ 記事詳細 — 本家 PostDetailPage
 * -------------------------------------------------------------------------- */

/* 装飾テーマ対策。テーマが .entry / .entry-content に敷く背景・罫線・書体・行間・字送りを
 * 一度リセットする。この直後に本家のスタイルを当て直すので、必要なものは戻る。
 * テーマを Blank にしていればここは実質ノーオペ。
 * 詳細度が要るのは、テーマが `.entry-content p` のように子要素を直接指定してくるため。 */
.entry,
.entry-inner,
.entry-content {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.entry-content,
.entry-content p,
.entry-content li,
.entry-content dt,
.entry-content dd,
.entry-content div,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content blockquote,
.entry-content table {
  background: none;
  border: 0;
  box-shadow: none;
  text-shadow: none;
  color: inherit;
  font-family: inherit;
  line-height: inherit;
  letter-spacing: normal;
}

/* コードは等幅を維持したいので font-family を inherit にしない */
.entry-content pre,
.entry-content code {
  background: none;
  border: 0;
  box-shadow: none;
  text-shadow: none;
  color: inherit;
  letter-spacing: normal;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono", monospace;
}

.entry {
  padding-top: var(--space-14x);
}

.entry-inner {
  max-width: 1024px;
  margin: 0 auto;
}

/* 本家は カテゴリ → タイトル → 日付 の順。はてなの出力順(日付 → タイトル → カテゴリ)に
 * 依存しないよう grid-area で並べ替える */
.entry .entry-header {
  display: grid;
  grid-template-areas:
    "cats"
    "title"
    "meta";
  margin-bottom: var(--space-10x);
}

.entry .entry-header .categories,
.entry .entry-header .entry-categories {
  grid-area: cats;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space);
  margin: 0 0 var(--space-10x);
}

.entry .entry-title {
  grid-area: title;
  margin: var(--space-2) 0 var(--space-5x);
  font-size: var(--fontSize-5xl);
  font-weight: bold;
  line-height: 150%;
}

.entry .entry-title a {
  color: var(--color-black);
}

.entry .entry-header .date {
  grid-area: meta;
  display: inline-flex;
  margin: 0;
  font-size: var(--fontSize-sm);
  color: var(--color-gray);
}

.entry .entry-header .date a {
  color: var(--color-gray);
}

/* 記事の編集メニューは本家に無いので出さない */
.entry .entry-header-menu {
  display: none;
}

/* 本文 */
/* 本文は本家(react-notion-x の --notion-max-width)と同じ 720px の中央寄せ。
 * カテゴリ・タイトル・日付を含むヘッダは本家同様 1024px のまま。 */
.entry-content {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--fontSize-lg);
  line-height: 1.9;
  word-wrap: break-word;
}

.entry-content > * + * {
  margin-top: var(--space-6x);
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5 {
  font-weight: 700;
  line-height: 1.5;
}

.entry-content h1,
.entry-content h2 {
  margin-top: var(--space-16x);
  font-size: var(--fontSize-4xl);
}

.entry-content h3 {
  margin-top: var(--space-12x);
  font-size: var(--fontSize-3xl);
}

.entry-content h4 {
  margin-top: var(--space-10x);
  font-size: var(--fontSize-2xl);
}

.entry-content h5 {
  margin-top: var(--space-8x);
  font-size: var(--fontSize-xl);
}

/* 本文リンクは濃いグレー + 薄いグレーの下線。本家(.notion-link)と同じ見た目。
 * primary の緑は本文中に散らばると視線が散るため使わない。 */
.entry-content a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: var(--color-link-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.entry-content a:hover {
  text-decoration-color: var(--color-link-underline-hover);
}

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

.entry-content li + li {
  margin-top: var(--space);
}

.entry-content blockquote {
  padding: var(--space-4x) var(--space-6x);
  border-left: 3px solid var(--color-primary);
  background-color: #fafafa;
  color: var(--color-gray);
}

.entry-content blockquote > * + * {
  margin-top: var(--space-4x);
}

.entry-content pre,
.entry-content pre.code {
  padding: var(--space-5x);
  border: 1px solid #eee;
  border-radius: 8px;
  background-color: #fafafa;
  font-size: var(--fontSize-base);
  line-height: 1.6;
  overflow-x: auto;
}

.entry-content code {
  padding: 2px 6px;
  border-radius: var(--rounded-xs);
  background-color: var(--color-primary-light);
  font-size: 0.9em;
}

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

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fontSize-base);
}

.entry-content th,
.entry-content td {
  padding: var(--space-2x) var(--space-3x);
  border: 1px solid #eee;
  text-align: left;
}

.entry-content th {
  background-color: #fafafa;
  font-weight: 600;
}

.entry-content img {
  border-radius: 8px;
}

.entry-content hr {
  height: 1px;
  border: 0;
  background-color: var(--color-border);
}

/* 目次 */
.entry-content .table-of-contents {
  padding: var(--space-6x) var(--space-8x);
  border: 1px solid var(--color-gray-light);
  border-radius: 8px;
  background-color: #fafafa;
  font-size: var(--fontSize-base);
  list-style: none;
}

.entry-content .table-of-contents a {
  color: var(--color-black);
  text-decoration: none;
}

.entry-content .table-of-contents a:hover {
  color: var(--color-primary);
}

/* タグ — 本家の .tags ボックス */
/* タグ — 非表示。はてなはタグが未設定でもラッパーを出力するため、
 * 本家の .tags ボックスを再現すると記事末尾に空のグレーの箱が残る。
 * カテゴリは記事ヘッダのバッジで出しているので情報としても重複する。
 * 表示したい場合は README のスニペットを参照。 */
.entry-tags-wrapper,
.entry-footer .entry-tags {
  display: none;
}

/* シェアボタン — 本家の3分割ボックス */
/* シェアボタン — 本家の3分割ボックスに寄せた帯。
 * はてなは .social-buttons を空で出力し、中身を後から JS で差し込むので、
 * 空のまま枠を引くと記事末尾に空の箱が残る。:empty のときは出さない
 * (JS が差し込んだ時点で :empty が外れて表示される)。
 * 子要素は本家の li ではなく .social-button-item。 */
.entry-footer .social-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4x);
  min-height: 116px;
  margin-top: var(--space-20x);
  padding: 0;
  border-top: 1px solid var(--color-gray-light);
  border-bottom: 1px solid var(--color-gray-light);
  list-style: none;
}

/* :empty は空白テキストノードがあると一致しないので、要素の有無で判定する */
.entry-footer .social-buttons:not(:has(*)) {
  display: none;
}

.entry-footer .entry-footer-section,
.entry-footer .entry-footer-modules,
.hatena-star-container {
  margin-top: var(--space-8x);
  font-size: var(--fontSize-sm);
  color: var(--color-gray);
}

/* -----------------------------------------------------------------------------
 * ⑧ ページャ — 本家 NewButton
 *    一覧（トップ・アーカイブ）では出し、記事詳細の「前の記事／次の記事」は出さない。
 *    はてなは両方とも .pager で出力するので、body のページ種別クラスで振り分ける。
 * -------------------------------------------------------------------------- */

.pager {
  display: flex;
  justify-content: center;
  gap: var(--space-5x);
  margin-top: var(--space-16x);
}

.pager a,
.pager span.pager-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--space-20x);
  padding: 0 var(--space-10x);
  font-size: var(--fontSize-base);
  font-weight: 500;
  color: var(--color-black);
  background-color: transparent;
  border: 1px solid var(--color-border-primary);
  border-radius: 90px;
  white-space: nowrap;
  transition:
    border-color 0.4s ease,
    color 0.4s ease;
}

.pager a:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.pager .pager-arrow {
  display: none;
}

/* 記事詳細のページャ（前の記事／次の記事）は出さない */
body.page-entry .pager {
  display: none;
}

/* -----------------------------------------------------------------------------
 * ⑨ サイドバー
 * -------------------------------------------------------------------------- */

.hatena-module {
  margin-bottom: var(--space-12x);
  font-size: var(--fontSize-base);
}

.hatena-module-title {
  margin-bottom: var(--space-5x);
  font-size: var(--fontSize-base);
  font-weight: 600;
  color: var(--color-primary);
}

.hatena-module-body ul {
  list-style: none;
}

.hatena-module-body li + li {
  margin-top: var(--space-3x);
}

.hatena-module-body a {
  transition: opacity 0.3s;
}

.hatena-module-body a:hover {
  opacity: 0.5;
}

/* -----------------------------------------------------------------------------
 * ⑩ フッタ — footer.html 用 (本家 Footer / RecruitSection)
 * -------------------------------------------------------------------------- */

#footer,
#footer-inner {
  padding: 0;
  margin: 0;
}

.rt-recruit {
  padding: var(--space-40x) 0;
  background-color: var(--color-primary-light);
}

.rt-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-5x);
}

.rt-recruit__title {
  margin-bottom: var(--space-16x);
  font-size: var(--fontSize-2xl);
  color: var(--color-primary);
}

.rt-recruit__title + .rt-recruit__subtitle {
  margin-bottom: var(--space-16x);
  font-size: 35px;
  font-weight: 700;
  line-height: 52px;
}

.rt-linkcard + .rt-recruit__title,
.rt-recruit__actions + .rt-recruit__title {
  margin-top: var(--space-40x);
}

/* LinkCard */
.rt-linkcard {
  display: flex;
  align-items: center;
  height: 160px;
  padding: var(--space-6x);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-primary);
  border-radius: 10px;
  transition: border-color 0.4s ease;
}

.rt-linkcard + .rt-linkcard {
  margin-top: var(--space-10x);
}

.rt-linkcard:hover {
  border-color: var(--color-primary);
}

.rt-linkcard:hover .rt-linkcard__icon {
  transform: translateX(10px);
}

.rt-linkcard__image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  height: 100%;
  overflow: hidden;
  border-radius: var(--rounded-xs);
}

.rt-linkcard__image img {
  width: 120px;
  height: 70px;
  max-height: 100%;
  object-fit: contain;
}

.rt-linkcard__image--cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rt-linkcard__body {
  display: grid;
  grid-template-columns: 1fr 102px;
  grid-template-areas:
    "title icon"
    "text  icon";
  column-gap: var(--space-12x);
  width: 100%;
  padding-left: var(--space-6x);
}

.rt-linkcard__title {
  grid-area: title;
  font-size: var(--fontSize-2xl);
  font-weight: 600;
  line-height: 36px;
}

.rt-linkcard__text {
  grid-area: text;
  display: flex;
  align-items: center;
}

.rt-linkcard__icon {
  grid-area: icon;
  display: grid;
  place-content: center;
  transition: transform 0.4s ease-in-out;
}

/* オープンポジションボタン (NewButton) */
.rt-recruit__actions {
  margin-top: var(--space-16x);
}

.rt-newbutton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--space-20x);
  padding: 0 var(--space-10x);
  font-size: var(--fontSize-base);
  font-weight: 500;
  color: var(--color-black);
  background-color: transparent;
  border: 1px solid var(--color-border-primary);
  border-radius: 90px;
  white-space: nowrap;
  transition:
    border-color 0.4s ease,
    color 0.4s ease;
}

.rt-newbutton:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.rt-newbutton__icon {
  display: inline-flex;
  align-items: center;
  margin-right: var(--space-10x);
  transition: transform 0.4s ease-in-out;
}

.rt-newbutton:hover .rt-newbutton__icon {
  transform: translateX(10px);
}

/* フッタ本体 */
.rt-footer {
  margin-bottom: var(--space-8x);
}

.rt-footer a {
  transition: opacity 0.3s;
}

.rt-footer a:hover {
  opacity: 0.5;
}

.rt-footer__logo {
  margin-top: var(--space-40x);
}

.rt-footer__logo .rt-pc {
  width: 265px;
  height: 38px;
}

.rt-footer__logo .rt-sp {
  width: 209px;
  height: 30px;
  display: none;
}

.rt-footer__main {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16x);
  margin-top: var(--space-20x);
  margin-bottom: var(--space-8x);
  padding-top: var(--space-30x);
  border-top: 1px solid var(--color-border);
}

.rt-footer__section {
  display: flex;
  gap: var(--space-12x);
  font-size: var(--fontSize-base);
}

.rt-footer__section + .rt-footer__section {
  margin-top: 52px;
}

.rt-footer__section-title {
  width: 40px;
  font-size: var(--fontSize-base);
  font-weight: 600;
  color: var(--color-primary);
}

.rt-footer__section > ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-8x);
  list-style: none;
}

.rt-footer__section > ul > li {
  display: flex;
  flex-direction: column;
  gap: var(--space-5x);
}

.rt-footer__section > ul > li > a {
  font-weight: 700;
}

.rt-footer__section > ul > li > ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4x);
  color: var(--color-gray);
  font-weight: 400;
  list-style: none;
}

.rt-footer__link-icon {
  display: inline-flex;
  margin-left: 10px;
  vertical-align: middle;
}

/* アプリDLブロック */
.rt-footer__app {
  width: 360px;
  padding: var(--space-8x);
  border-radius: 10px;
  background-color: #f1f1f1;
}

.rt-footer__app-head {
  display: flex;
  justify-content: space-between;
}

/* グローバルの img { height: auto } は幅を絞ったときの歪み防止用だが、flex の中では
 * 既定の align-items: stretch で縦に伸び、アスペクト比計算でも本家(next/image が
 * 実寸を出力)と1〜2pxずれる。自作ヘッダ・フッタの画像は本家と同じ実寸を明示する。 */
.rt-footer__app-head img {
  width: 96px;
  height: 96px;
}

.rt-footer__app-head .rt-footer__section-title + p {
  margin-top: var(--space-6x);
  font-size: var(--fontSize-xl);
  font-weight: 700;
}

.rt-footer__app-links {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-8x);
}

.rt-footer__app-links > img {
  width: 106px;
  height: 106px;
}

.rt-footer__app-badges {
  display: flex;
  flex-direction: column;
  gap: var(--space-4x);
}

.rt-footer__app-badges a {
  max-width: 140px;
}

/* SNS */
.rt-footer__sns {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-4x);
  margin-top: var(--space-30x);
}

.rt-footer__sns img {
  width: 32px;
  height: 32px;
}

.rt-footer__bottom {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-4x);
  padding-bottom: var(--space-14x);
  border-top: 1px solid whitesmoke;
  font-size: var(--fontSize-xs);
  font-weight: 500;
}

/* -----------------------------------------------------------------------------
 * ⑪ レスポンシブ
 * -------------------------------------------------------------------------- */

@media screen and (max-width: 768px) {
  #content {
    padding-top: 30px;
    padding-bottom: var(--space-20x);
  }

  /* ヘッダ */
  .rt-header__logo .rt-pc {
    display: none;
  }

  .rt-header__logo .rt-sp {
    display: block;
  }

  .rt-hero {
    height: 160px;
    min-height: 160px;
    background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/r/reiwatravel/20260826/20260826232803.jpg");
  }

  .rt-categories {
    margin-top: 30px;
    padding-right: 0;
  }

  /* 一覧 — 1カラム */
  .archive-entries {
    display: block;
    margin-bottom: 30px;
    padding-top: 30px;
  }

  /* メディアクエリは詳細度を上げないので、ベース側の
   * `.archive-entries .archive-entry ...` と同じ詳細度に揃える */
  .archive-entries .archive-entry + .archive-entry {
    margin-top: 30px;
  }

  .archive-entries .archive-entry .entry-title {
    height: auto;
    margin-bottom: var(--space-2x);
  }

  .archive-entries .archive-entry .date {
    font-size: var(--fontSize-sm);
  }

  /* 記事 */
  .entry .entry-header .categories {
    margin-bottom: var(--space-5x);
  }

  .entry .entry-title {
    font-size: var(--fontSize-2xl);
  }

  .entry-content {
    font-size: var(--fontSize-base);
  }

  .entry-content h1,
  .entry-content h2 {
    font-size: var(--fontSize-3xl);
  }

  .entry-content h3 {
    font-size: var(--fontSize-2xl);
  }

  .entry-content h4 {
    font-size: var(--fontSize-xl);
  }

  /* Recruit */
  .rt-recruit {
    padding: var(--space-20x) 0;
  }

  .rt-recruit__title {
    margin-bottom: var(--space-8x);
    font-size: var(--fontSize-lg);
  }

  .rt-recruit__title + .rt-recruit__subtitle {
    margin-bottom: var(--space-8x);
    font-size: var(--fontSize-2xl);
    line-height: 40px;
  }

  .rt-linkcard + .rt-recruit__title,
  .rt-recruit__actions + .rt-recruit__title {
    margin-top: var(--space-20x);
  }

  .rt-linkcard {
    flex-direction: column;
    align-items: center;
    height: auto;
    padding: var(--space-5x);
    border-radius: var(--rounded-card);
  }

  .rt-linkcard__image {
    width: 100%;
  }

  .rt-linkcard__body {
    grid-template-columns: 1fr 44px;
    grid-template-areas:
      "title title"
      "text  icon";
    column-gap: var(--space-6x);
    margin-top: var(--space-4x);
    padding-left: 0;
  }

  .rt-linkcard__title {
    font-size: var(--fontSize-xl);
  }

  .rt-linkcard__text {
    font-size: var(--fontSize-base);
    line-height: 24px;
  }

  /* フッタ */
  .rt-footer__logo {
    margin-top: var(--space-30x);
  }

  .rt-footer__logo .rt-pc {
    display: none;
  }

  .rt-footer__logo .rt-sp {
    display: block;
  }

  .rt-footer__main {
    flex-direction: column;
    margin-top: var(--space-12x);
    padding-top: var(--space-12x);
  }

  .rt-footer__sub {
    display: flex;
    flex-direction: column-reverse;
  }

  .rt-footer__section {
    flex-direction: column;
  }

  .rt-footer__section > ul > li {
    gap: var(--space-6x);
  }

  .rt-footer__section > ul > li > ul {
    flex-direction: column;
  }

  .rt-footer__app {
    width: 100%;
  }

  .rt-footer__sns {
    justify-content: flex-start;
    margin-top: var(--space-4x);
    margin-bottom: var(--space-16x);
  }

  .rt-footer__bottom {
    justify-content: flex-start;
  }
}

@media screen and (max-width: 1100px) {
  .rt-header__logo .rt-pc {
    display: none;
  }

  .rt-header__logo .rt-sp {
    display: block;
  }
}

/* -----------------------------------------------------------------------------
 * ⑫ ページ遷移 — View Transition
 *    一覧 → 記事詳細で、カードのサムネイルを記事本文の先頭画像へ引き継ぐ。
 *    どの要素を繋ぐかは head.html のスクリプトが view-transition-name を付けて決める。
 *    非対応ブラウザ (Firefox など) では単に通常遷移になり、見た目は今までどおり。
 * -------------------------------------------------------------------------- */

@view-transition {
  navigation: auto;
}

/* KV の引き継ぎ */
::view-transition-group(rt-kv) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

/* 一覧は 16:9 のトリミング、記事は元の比率。object-fit を cover にしないと
 * 縦横比の差でスナップショットが引き伸ばされる */
::view-transition-old(rt-kv),
::view-transition-new(rt-kv) {
  height: 100%;
  object-fit: cover;
  overflow: clip;
}

/* ページ全体のクロスフェードは控えめに */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.25s;
}

/* 視差を抑える設定をしている環境ではアニメーションしない */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}