/* ===========================================================================
   wp.css — WordPress化で追加した分

   ・トップページの見た目は base.css / site.css / lower.css が持っています。
     ここには「WordPressで動かすために足したもの」だけを書いています。
   ・今後のデザイン調整は、まずこのファイルの ①トークン を触ってください。
     余白・文字サイズ・色・角丸・線をここでまとめて変えられます。
   =========================================================================== */

/* ---------------------------------------------------------------------------
   ① トークン（ここを変えると下層ページ全体に反映されます）
   --------------------------------------------------------------------------- */
:root {
	/* 下層ページの横幅と左右の余白 */
	--yt-page-max: 1040px;
	--yt-page-gutter: clamp(20px, 5vw, 48px);

	/* セクションの上下の余白 */
	--yt-block-y: clamp(40px, 6vw, 84px);
	--yt-gap: clamp(18px, 2.4vw, 30px);

	/* 文字 */
	--yt-title: clamp(1.5rem, 3.4vw, 2.3rem);   /* ページタイトル */
	--yt-lead: clamp(0.95rem, 1.3vw, 1.05rem); /* リード・サブコピー */
	--yt-text: clamp(0.94rem, 1.2vw, 1rem);    /* 本文 */
	--yt-small: 0.8rem;                        /* 日付・パンくず */
	--yt-prose-lh: 2.05;                       /* 本文の行間 */

	/* 色（トップと同じ白＋グリーンを基調に。黄み・ベージュ系は使わない） */
	--yt-ink: #082936;
	--yt-accent: var(--green, #14553c); /* トップページと同じメイングリーン（site.css の --green）を再利用 */
	--yt-page-bg: #f8faf7;    /* ページ全体の背景 */
	--yt-paper-card: #ffffff; /* 記事本文・サイドバーカードの背景 */
	--yt-tint-green: #f4f8f3; /* 薄いグリーン背景（タグ・シェア枠など） */
	--yt-border: var(--line, #dde6de); /* トップページと同じ薄いグリーンの線 */
	--yt-chip-bg: #d7e9e2;

	/* 装飾 */
	--yt-radius: 4px;
	--yt-card-shadow: 0 1px 2px #5d4c3c42;

	/* 記事カードのタイトルを何行で切るか */
	--yt-card-title-lines: 3;

	/* 「動物に会いに行った国」の上の余白（砂浜との間）。数字を変えるだけで広さが変わります */
	--yt-journey-space: calc(56 * var(--u, 1px));
	--yt-journey-space-sp: 24px;

	/* 背景装飾の葉の揺れ。amp=振れ幅（角度）、dur=1往復にかかる時間 */
	--yt-leaf-amp: 2.2deg;
	--yt-leaf-dur: 9s;

	/* 飛行機の航路（点線）。元の絵の雰囲気に合わせた薄いグリーンと細い点 */
	--yt-route-color: #99a895;
	--yt-route-width: 2.4px;
	--yt-route-dash: 2.6 4.2;   /* 点の長さ と すき間 */

	/* 記事ページ：サイドバー幅・カテゴリー/タグの色分け */
	--yt-sidebar-width: 300px;
	--yt-sidebar-gap: clamp(28px, 4vw, 56px);
	--yt-cat-bg: var(--yt-chip-bg);
	--yt-cat-fg: #0c3d2c;
	--yt-tag-bg: var(--yt-tint-green);
	--yt-tag-border: var(--yt-border);
	--yt-tag-fg: #3f5750;
}

/* ---------------------------------------------------------------------------
   ② 下層ページの土台
   --------------------------------------------------------------------------- */
.yt-page {
	padding: calc(82px + var(--yt-block-y)) 0 var(--yt-block-y); /* 固定ヘッダーの高さぶん空ける */
	color: var(--yt-ink);
	/* トップページの黄みがかった紙背景（.yl-page）を、下層ページだけ白系に上書き */
	background: var(--yt-page-bg);
	/* .yl-page の overflow:clip（トップの装飾はみ出し用）が付いていると
	   サイドバーの position:sticky が効かなくなるため、下層ページだけ解除する */
	overflow: visible;
}
.yt-inner {
	max-width: var(--yt-page-max);
	margin-inline: auto;
	padding-inline: var(--yt-page-gutter);
}
.yt-page a { color: inherit; }

/* 下層では固定ヘッダーを常に出す（site.css でトップ用に隠しているのを戻す） */
@media (min-width: 1041px) {
	body:not(.home) .site-header { transform: none; }
}

/* 下層ページのヘッダーは、フッター（.yl-footer--lower）と同じ色に。トップページは変更しない */
body:not(.home) .site-header { background: #fffdf8; }

.yt-skip {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: 10px 18px;
	background: var(--card, #fff);
}
.yt-skip:focus { left: 12px; top: 12px; }

/* ---------------------------------------------------------------------------
   ③ ページ見出し・パンくず
   --------------------------------------------------------------------------- */
.yt-head { margin-bottom: var(--yt-block-y); }
.yt-head .yl-eyebrow { color: var(--yt-accent); margin-bottom: 6px; }
.yt-head__title {
	margin: 0 0 12px;
	font-family: "Noto Sans JP", sans-serif;
	font-size: var(--yt-title);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -.02em;
	color: var(--yt-ink);
}
.yt-head .yl-sub { font-size: var(--yt-lead); color: #4a5a55; }

/* カテゴリー・タグ・検索結果などの一覧ページは、記事ページの見出しほど
   下の余白を大きくしなくていいので、ここだけ詰める */
.yt-page-head { margin-bottom: 28px; }

.yt-crumbs { margin-bottom: 18px; font-size: var(--yt-small); color: #6a7873; }
.yt-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.yt-crumbs li + li::before { content: "›"; margin-right: 6px; opacity: .6; }
.yt-crumbs a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   ④ 記事カードの一覧（トップのカードを流用）
   --------------------------------------------------------------------------- */
.yt-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--yt-gap);
}
@media (max-width: 900px) { .yt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .yt-grid { grid-template-columns: 1fr; } }

/* 一覧用のカード。トップの固定寸法を解いて、中身の量に追従させる */
.yl-article--list {
	height: auto;
	display: flex;
	flex-direction: column;
	padding: 8px 8px 14px;
}
.yl-article--list img {
	height: auto;
	aspect-ratio: 16 / 9;
	width: 100%;
	object-fit: cover;
}
.yl-article--list time { font-size: var(--yt-small); margin: 10px 6px 0; }
.yl-article--list h3 {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.6;
	margin: 6px 6px 10px;
}
.yl-article--list .yl-chips { margin-top: auto; flex-wrap: wrap; white-space: normal; row-gap: 5px; }
.yl-article--list:hover { transform: translateY(-3px); }
.yl-article--list { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1); }
.yl-article--list:hover { box-shadow: 0 10px 22px #5d4c3c33; }

/* タイトルが長くてもカードの高さが揃うように、行数で切る */
.yl-article h3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--yt-card-title-lines);
	line-clamp: var(--yt-card-title-lines);
	overflow: hidden;
}
/* トップの3枚は2行で固定（デザイン通り） */
.yl-journal-grid .yl-article { --yt-card-title-lines: 2; }

/* 画像が1枚も無いときの箱 */
.yt-noimage {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: repeating-linear-gradient(45deg, #efe8da, #efe8da 8px, #e7dfd0 8px, #e7dfd0 16px);
}
.yl-animal .yt-noimage, .yl-country .yt-noimage { aspect-ratio: 1.15; }

/* ---------------------------------------------------------------------------
   ⑤ ページ送り
   --------------------------------------------------------------------------- */
.yt-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: var(--yt-block-y);
}
.yt-pager .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--yt-border);
	border-radius: var(--yt-radius);
	background: var(--yt-paper-card);
	font-size: .9rem;
}
.yt-pager .page-numbers:hover { border-color: var(--yt-accent); }
.yt-pager .page-numbers.current { background: var(--yt-accent); border-color: var(--yt-accent); color: #fffdf2; }
.yt-pager .dots { border: 0; background: none; }

/* ---------------------------------------------------------------------------
   ⑥ 個別記事・固定ページ
   --------------------------------------------------------------------------- */

/* PC：本文＋サイドバーの2カラム。SP（900px以下）は1カラムでサイドバー非表示 */
/* align-itemsは既定のstretchのまま（サイドバーを本文と同じ高さまで伸ばし、
   関連記事だけがその中でsticky＝追従できるようにするため。⑳のスロット参照） */
.yt-single-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--yt-sidebar-width); gap: var(--yt-sidebar-gap); }
.yt-single-main { min-width: 0; }

.yt-single__header .yt-crumbs { margin-bottom: 20px; }
.yt-single__meta { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; width: fit-content; }
.yt-single__date { font-size: var(--yt-small); color: #6a7873; }

/* カテゴリーバッジ（トップと同じ緑のピル＝.yt-cat-bg。タグとは見た目を分ける） */
.yt-cat-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 36px;
	padding: 5px 16px;
	border-radius: 999px;
	background: var(--yt-cat-bg);
	color: var(--yt-cat-fg);
	font-size: .8rem;
	font-weight: 700;
}
.yt-cat-badge:hover { text-decoration: underline; }
.yt-cat-badge__icon { width: 14px; height: 14px; flex: none; }

/* 記事タイトルは共通トークンより小さく、PCで約38pxを基準に（添付見本のバランスに合わせる） */
.yt-single__header .yt-head__title { font-size: clamp(1.4rem, 2.4vw, 2.375rem); }

/*
 * 飛行機の装飾は、日付・カテゴリーバッジのすぐ右に続けて置く純粋な装飾。
 * 基準は .yt-single__meta（日付・カテゴリーの行）。position:absoluteで
 * flexの並びからは外れるので、日付・カテゴリー2つのレイアウトには影響しない。
 */
.yt-single__meta .yt-single__deco {
	display: none;
	position: absolute;
	left: 100%;
	top: -10%;
	transform: translateY(-50%);
	margin-left: 120px;
	width: clamp(220px, 18vw, 340px);
	max-width: none;
	height: auto;
	pointer-events: none;
}
@media (min-width: 901px) { .yt-single__meta .yt-single__deco { display: block; } }

.yt-single .yl-chips { margin: 14px 0 0; flex-wrap: wrap; white-space: normal; row-gap: 6px; }
.yt-single__thumb { margin: 0 0 var(--yt-block-y); padding: 10px; }
/* マスキングテープは幅いっぱいだと間延びするので、幅を固定にする */
.yt-single__thumb::before { left: 50%; width: 120px; margin-left: -60px; height: 22px; top: -9px; }
.yt-single__thumb img { width: 100%; height: auto; display: block; }

.yt-prose { font-size: var(--yt-text); line-height: var(--yt-prose-lh); }
.yt-prose > * + * { margin-top: 1.4em; }
.yt-prose h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 2.4em;
	padding-bottom: .5em;
	border-bottom: 2px solid var(--yt-chip-bg);
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0;
	color: var(--yt-accent);
}
.yt-prose h2::before {
	content: "";
	flex: none;
	width: 26px;
	height: 26px;
	background: var(--yt-h2-icon, url(../img/icons/animal-paw.svg)) no-repeat center / contain;
}
.yt-prose h3 {
	margin-top: 2em;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.6;
	color: var(--yt-accent);
}
.yt-prose h4 { font-size: 1.02em; font-weight: 700; margin-top: 1.8em; }
.yt-prose p { margin-block: 0; }
.yt-prose a { color: var(--yt-accent); text-decoration: underline; text-underline-offset: 3px; }
.yt-prose img, .yt-prose iframe, .yt-prose video { max-width: 100%; height: auto; border-radius: var(--yt-radius); }
/* アフィリエイトの計測用1x1画像（<img width="1" height="1">）は、.yl-page imgの
   width:100%リセットで巨大化してしまうため、本来のサイズに戻す */
.yt-prose img[width="1"][height="1"] {
	display: inline-block;
	width: 1px;
	height: 1px;
	max-width: none;
	border-radius: 0;
}
.yt-prose figure { margin: 0; }
.yt-prose figcaption { margin-top: .6em; font-size: var(--yt-small); color: #6a7873; text-align: center; }
.yt-prose ul, .yt-prose ol { padding-left: 1.4em; }
.yt-prose li + li { margin-top: .5em; }
.yt-prose blockquote {
	margin-inline: 0;
	padding: 1em 1.2em;
	border-left: 3px solid var(--yt-chip-bg);
	background: var(--yt-paper-card);
	color: #4a5a55;
}
/* 広告表記（アフィリエイトリンクの注記）は強調する内容ではないので、
   囲み枠・背景・左のバーなしのただの小さい文字にする */
.yt-prose blockquote.yt-ad-note {
	padding: 0;
	border-left: none;
	background: none;
	font-size: .82em;
	color: var(--yt-single-muted, #6a7873);
}
.yt-prose table { width: 100%; border-collapse: collapse; font-size: .92em; }
.yt-prose th, .yt-prose td { padding: .7em .9em; border: 1px solid var(--yt-border); text-align: left; }
.yt-prose th { background: var(--yt-chip-bg); }
.yt-prose code { padding: .1em .4em; background: var(--yt-paper-card); border-radius: 3px; font-size: .92em; }
.yt-prose .wp-block-table { overflow-x: auto; }

/* お問い合わせフォーム（Contact Form 7）。テーマ自体にはCF7用のスタイルが無かったため追加 */
.yt-prose .wpcf7-form p { margin-top: 1.2em; }
.yt-prose .wpcf7-form label { display: block; font-weight: 700; }
.yt-prose .wpcf7-form input[type="text"],
.yt-prose .wpcf7-form input[type="email"],
.yt-prose .wpcf7-form input[type="tel"],
.yt-prose .wpcf7-form textarea {
	display: block;
	width: 100%;
	margin-top: .5em;
	padding: .8em 1em;
	border: 1px solid var(--yt-border);
	border-radius: var(--yt-radius);
	background: var(--yt-paper-card);
	color: var(--yt-ink);
	font: inherit;
}
.yt-prose .wpcf7-form textarea { resize: vertical; }
.yt-prose .wpcf7-form input:focus-visible,
.yt-prose .wpcf7-form textarea:focus-visible { outline: 2px solid var(--yt-accent); outline-offset: 1px; }
.yt-prose .wpcf7-form .wpcf7-submit {
	display: block;
	width: 100%;
	max-width: 320px;
	margin: .4em auto 0;
	padding: .8em 2em;
	border: 0;
	border-radius: 999px;
	background: var(--yt-accent);
	color: #fff;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
}
.yt-prose .wpcf7-form .wpcf7-submit:hover { opacity: .88; }
.yt-prose .wpcf7-not-valid-tip { color: #b3372c; font-size: var(--yt-small); margin-top: .4em; }
.yt-prose .wpcf7-response-output { margin-top: 1.2em; padding: .9em 1.1em; border: 1px solid var(--yt-border); border-radius: var(--yt-radius); }

/* 前後の記事 */
.yt-adjacent {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--yt-gap);
	margin-top: var(--yt-block-y);
}
.yt-adjacent__item {
	padding: 16px 18px;
	background: var(--yt-paper-card);
	border: 1px solid var(--yt-border);
	border-radius: var(--yt-radius);
	font-size: .92rem;
	line-height: 1.7;
	box-shadow: var(--yt-card-shadow);
}
.yt-adjacent__item span { display: block; margin-bottom: 4px; font-size: var(--yt-small); color: #6a7873; }
.yt-adjacent__item.is-next { text-align: right; grid-column: 2; }
.yt-adjacent__item:hover { border-color: var(--yt-accent); }
@media (max-width: 560px) {
	.yt-adjacent { grid-template-columns: 1fr; }
	.yt-adjacent__item.is-next { grid-column: 1; text-align: left; }
}

/* 本文下のカテゴリー・タグ（カテゴリーは緑のピル、タグはそれと違う薄い縁取り） */
.yt-terms {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: var(--yt-single-gap);
	padding-top: var(--yt-single-gap);
	border-top: 1px solid var(--yt-single-border);
}
.yt-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.yt-tags a {
	display: inline-block;
	padding: 5px 13px;
	border: 1px solid var(--yt-tag-border);
	border-radius: 999px;
	background: var(--yt-tag-bg);
	color: var(--yt-tag-fg);
	font-size: .82rem;
}
.yt-tags a:hover { border-color: var(--yt-accent); color: var(--yt-accent); }

/* 関連記事 */
.yt-related { margin-top: var(--yt-block-y); }
/* 記事ページ本文側の関連記事は、PCではサイドバーに同じものがあるので重複表示しない（SPのみ表示） */
@media (min-width: 901px) {
	.yt-single-main .yt-related { display: none; }
}
.yt-related__title {
	margin: 0 0 20px;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--yt-accent);
}
/* ---------------------------------------------------------------------------
   ⑦ 検索フォーム・空の状態・コメント
   --------------------------------------------------------------------------- */
.yt-search { display: flex; gap: 8px; max-width: 460px; margin-top: 18px; }
.yt-search input[type="search"] {
	flex: 1;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--yt-border);
	border-radius: var(--yt-radius);
	background: var(--yt-paper-card);
	font: inherit;
	font-size: .95rem;
}
.yt-search button {
	min-height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: var(--yt-radius);
	background: var(--yt-accent);
	color: #fffdf2;
	font: inherit;
	font-size: .92rem;
	cursor: pointer;
}
.yt-empty { font-size: var(--yt-lead); }

.yt-comments { margin-top: var(--yt-block-y); }
.yt-comments__list { list-style: none; margin: 0 0 var(--yt-gap); padding: 0; }
.yt-comments input:not([type="submit"]), .yt-comments textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--yt-border);
	border-radius: var(--yt-radius);
	background: var(--yt-paper-card);
	font: inherit;
}
.yt-comments .submit {
	min-height: 48px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--yt-radius);
	background: var(--yt-accent);
	color: #fffdf2;
	font: inherit;
	cursor: pointer;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   ⑧ トップページ側の、WordPress化にともなう微調整
   --------------------------------------------------------------------------- */

/* ヘッダー・ヒーローのナビは wp_nav_menu が <a> を出すので、元のCSSがそのまま効きます。
   メニュー項目が増えたときにはみ出さないようにだけしておく */
.hero__nav { gap: 2.2cqw; }
.hero__nav a { white-space: nowrap; }
.nav { flex-wrap: wrap; row-gap: 4px; }
.yl-footer nav { flex-wrap: wrap; max-width: calc(440 * var(--u)); }

/* ファーストビュー（PC）のコピーとボタンを少し右へ寄せ、ノートとの間を詰める。
   ずらす量は --yt-hero-shift（ステージの幅に対する％）。0 で元の位置に戻ります。 */
@media (min-width: 1041px) {
	.hero--route-a { --yt-hero-shift: 2.6%; }
	.hero--route-a .hero__copy    { left: calc(4.0% + var(--yt-hero-shift)); }
	.hero--route-a .hero__lead    { left: calc(4.2% + var(--yt-hero-shift)); }
	.hero--route-a .hero__actions { left: calc(4.4% + var(--yt-hero-shift)); }
}

/* ファーストビュー下の「Find by Animal」まわりの余白を詰める（元：上10〜18px・下18〜32px、線24〜40px） */
.hero--route-a .scroll-cue {
	gap: clamp(6px, .7vw, 10px);
	padding: clamp(6px, .7vw, 10px) 0 clamp(8px, 1vw, 14px);
}
.hero--route-a .scroll-cue__line { height: clamp(18px, 2.2vw, 28px); }

/* 記事のタイトルが1行でも、カードの高さが揃うように */
.yl-journal-grid .yl-article { display: flex; flex-direction: column; }
.yl-journal-grid .yl-article .yl-chips { margin-top: auto; }

/* 「動物に会いに行った国」の上に余白を足す。
   セクションごと下げるので、下の砂浜・丘・ヤシの装飾の重なりはそのまま保たれます。 */
.yl-journey { margin-top: var(--yt-journey-space); }
@media (max-width: 700px) { .yl-journey { margin-top: var(--yt-journey-space-sp); } }

/* 丘とヤシの装飾を、セクションの外へはみ出して描けるようにする。
   背景画像のままだとセクションの高さで切り取られ、右上のヤシの先が切れてしまうため、
   疑似要素に移して下端ぞろえで originalサイズ分の高さを確保している。
   journey-edges.webp は 1024 x 307。差し替えるときは下の 307 も合わせてください。 */
@media (min-width: 701px) {
	.yl-journey { background-image: none; }
	.yl-journey::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: calc(307 * var(--u));
		background: url('../img/lower/journey-edges.webp?v=5') center bottom / 100% 100% no-repeat;
		pointer-events: none;
	}
}

/* 管理バー表示中にヒーローがずれないように */
.admin-bar .yt-page { padding-top: calc(82px + 32px + var(--yt-block-y)); }
@media screen and (max-width: 782px) { .admin-bar .yt-page { padding-top: calc(72px + 46px + var(--yt-block-y)); } }
@media (max-width: 1040px) { .yt-page { padding-top: calc(72px + var(--yt-block-y)); } }


/* ---------------------------------------------------------------------------
   ⑨ 背景装飾の葉（そよそよ揺れる分）

   ornaments.webp から切り出した葉・花を、元の絵と同じ位置に重ねています。
   数字は ornaments.webp（1024 x 2048）の中でのピクセル位置なので、
   切り出した座標をそのまま書けば元の絵とぴったり重なります。

   ・揺れの加減 … 上の --yt-leaf-amp（振れ幅）/ --yt-leaf-dur（1往復の時間）
   ・葉ごとに変えたいときは、各ブロックの中で上書きしてください
   ・transform-origin は「枝の付け根」。ここを軸に回ります
   ・animation-delay をばらしているのは、全部が同じ動きにならないようにするためです
   --------------------------------------------------------------------------- */
.yl-leaf {
	position: absolute;
	display: block;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
	will-change: transform;
	animation: ytLeafSway var(--yt-leaf-dur) ease-in-out infinite;
	animation-delay: var(--yt-leaf-delay, 0s);
}

/* 左上の葉（切り出し元: x0-112 / y88-344。切れていた葉先2枚を描き足して幅124） */
.yl-leaf--top-left {
	left: calc(0 * var(--u));
	top: calc(88 * var(--u));
	width: calc(124 * var(--u));
	height: calc(256 * var(--u));
	background-image: url('../img/lower/leaf-top-left.webp?v=6');
	transform-origin: 0% 45%;
	--yt-leaf-dur: 8.5s;
	--yt-leaf-delay: 0s;
}

/* 右上の葉（切り出し元: x896-1024 / y122-294） */
.yl-leaf--top-right {
	left: calc(896 * var(--u));
	top: calc(122 * var(--u));
	width: calc(128 * var(--u));
	height: calc(172 * var(--u));
	background-image: url('../img/lower/leaf-top-right.webp?v=2');
	transform-origin: 100% 45%;
	--yt-leaf-dur: 9.6s;
	--yt-leaf-delay: -3.2s;
}

/* 左中の葉（位置: x2-84 / y406-520） */
.yl-leaf--left-mid {
	left: calc(2 * var(--u));
	top: calc(406 * var(--u));
	width: calc(82 * var(--u));
	height: calc(114 * var(--u));
	background-image: url('../img/lower/leaf-left-mid.webp?v=2');
	transform-origin: 0% 8%;
	--yt-leaf-dur: 9s;
	--yt-leaf-delay: -1.5s;
}

/* プルメリアと葉（位置: x2-110 / y506-650） */
.yl-leaf--plumeria {
	left: calc(2 * var(--u));
	top: calc(506 * var(--u));
	width: calc(108 * var(--u));
	height: calc(144 * var(--u));
	background-image: url('../img/lower/leaf-plumeria.webp?v=2');
	transform-origin: 0% 48%;
	--yt-leaf-dur: 10.4s;
	--yt-leaf-delay: -5s;
	--yt-leaf-amp: 1.5deg;   /* 花は少し控えめに */
}

/* 左の葉（切り出し元: x0-86 / y918-1034） */
.yl-leaf--left {
	left: calc(0 * var(--u));
	top: calc(918 * var(--u));
	width: calc(86 * var(--u));
	height: calc(116 * var(--u));
	background-image: url('../img/lower/leaf-left.webp?v=3');
	transform-origin: 0% 45%;
	--yt-leaf-dur: 8.8s;
	--yt-leaf-delay: -2.4s;
}

/* 右の葉（カメラの下）（位置: x920-1024 / y918-1026） ※右上の葉を元に作り直し（元の絵に継ぎ目があったため） */
.yl-leaf--right {
	left: calc(920 * var(--u));
	top: calc(918 * var(--u));
	width: calc(104 * var(--u));
	height: calc(108 * var(--u));
	background-image: url('../img/lower/leaf-right.webp?v=2');
	transform-origin: 100% 46%;
	--yt-leaf-dur: 9.9s;
	--yt-leaf-delay: -6.1s;
}

/* 左下の葉（切り出し元: x16-104 / y1188-1336） */
.yl-leaf--left-bottom {
	left: calc(16 * var(--u));
	top: calc(1188 * var(--u));
	width: calc(88 * var(--u));
	height: calc(148 * var(--u));
	background-image: url('../img/lower/leaf-left-bottom.webp?v=2');
	transform-origin: 12% 95%;
	--yt-leaf-dur: 8.2s;
	--yt-leaf-delay: -4.3s;
}

/* ハイビスカスと葉（切り出し元: x898-1024 / y1148-1386） */
.yl-leaf--hibiscus {
	left: calc(898 * var(--u));
	top: calc(1148 * var(--u));
	width: calc(126 * var(--u));
	height: calc(238 * var(--u));
	background-image: url('../img/lower/leaf-hibiscus.webp?v=3');
	transform-origin: 100% 72%;
	--yt-leaf-dur: 11s;
	--yt-leaf-delay: -7.5s;
	--yt-leaf-amp: 1.5deg;   /* 花は少し控えめに */
}

@keyframes ytLeafSway {
	0%, 100% { transform: rotate(calc(var(--yt-leaf-amp) * -1)); }
	50%      { transform: rotate(var(--yt-leaf-amp)); }
}

/* 動きを減らす設定の人には止める */
@media (prefers-reduced-motion: reduce) {
	.yl-leaf { animation: none; }
}


/* ---------------------------------------------------------------------------
   ⑩ 飛行機の航路（スクロールに合わせて進む点線）

   ・座標系は ornaments.webp と同じ 1024 x 2048。SVGが装飾レイヤーに重なります
   ・見えている点線と、その上に「どこまで見せるか」を決めるマスクの線の2本立て
   ・初期値は「到着した状態」。JavaScriptが動かない場合はこの状態で止まります
   ・線の太さは px で書いていますが、SVG内の単位なので画面幅に合わせて伸縮します
   --------------------------------------------------------------------------- */
.yl-routes {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.yl-route__line {
	fill: none;
	stroke: var(--yt-route-color);
	stroke-width: var(--yt-route-width);
	stroke-linecap: round;
	stroke-dasharray: var(--yt-route-dash);
}

/* マスク側。白く塗った分だけ点線が見える。既定は全部見えている状態 */
.yl-route__reveal {
	fill: none;
	stroke: #fff;
	stroke-width: 14;
	stroke-linecap: round;
}

.yl-route__plane image { image-rendering: auto; }

/* スマホでは装飾レイヤーごと非表示（lower.css）。ここでも念のため止める */
@media (max-width: 700px) {
	.yl-routes { display: none; }
}

/* ---------------------------------------------------------------------------
   ⑪ スマホの見出しの飾り（700px以下だけ）

   PCでは背景の装飾（ornaments.webp）が同じ役割をしているので、ここは非表示。
   スマホは装飾レイヤーを出していないため、見出しの横に小さく添えています。
   ・大きさは各 --deco-w（幅）で調整。高さは絵の比率から自動で決まります
   ・右端の画面ぎわに寄せたいものは --deco-bleed で右にはみ出させています
   --------------------------------------------------------------------------- */
.yl-heading__deco,
.yl-sp-route {
	display: none;
}

@media (max-width: 700px) {

	/* 横に絵を置く見出し：文字を左、絵を右の2列にする */
	.yl-heading.has-deco-side {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 12px;
		align-items: center;
	}
	.yl-heading.has-deco-side > .yl-eyebrow,
	.yl-heading.has-deco-side > h2,
	.yl-heading.has-deco-side > .yl-sub {
		grid-column: 1;
	}

	.yl-heading__deco {
		display: block;
		width: var(--deco-w);
		aspect-ratio: var(--deco-ratio);
		background: no-repeat center / contain;
		pointer-events: none;
	}

	/* 見出しブロックの右側に置くもの */
	.yl-heading__deco--side {
		grid-column: 2;
		grid-row: 1 / span 3;
		margin-right: calc(var(--deco-bleed, 0px) * -1);
	}
	.has-sp-route .yl-heading__deco--side {
		grid-row: 2 / span 3;
	}

	/* 見出しの文字のすぐ右に置くもの */
	.yl-heading__deco--inline {
		display: inline-block;
		margin-left: 10px;
		vertical-align: -3px;
	}

	/* 絵ごとの設定（ratio は元画像の 幅 / 高さ） */
	.yl-heading__deco--paw {
		--deco-w: 26px;
		--deco-ratio: 33 / 38;
		background-image: url('../img/lower/sp-paw.webp');
	}
	.yl-heading__deco--stamp-world {
		--deco-w: 78px;
		--deco-ratio: 108 / 97;
		background-image: url('../img/lower/sp-stamp-world.webp');
	}
	.yl-heading__deco--camera {
		--deco-w: 62px;
		--deco-ratio: 83 / 132;
		background-image: url('../img/lower/sp-camera.webp');
	}
	.yl-heading__deco--hibiscus {
		--deco-w: 66px;
		--deco-ratio: 126 / 238;
		--deco-bleed: 24px;          /* 右の葉が画面の外へ抜けるように */
		background-image: url('../img/lower/leaf-hibiscus.webp?v=3');
	}
	.yl-heading__deco--stamp-earth {
		--deco-w: 92px;
		--deco-ratio: 177 / 162;
		background-image: url('../img/lower/sp-stamp-earth.webp');
	}

	/* 見出しの上の飛行機と点線（PCの航路と同じ色・点） */
	.yl-sp-route {
		display: block;
		grid-column: 1 / -1;
		width: 180px;
		height: 44px;
		margin: 0 0 6px;
	}
	.yl-sp-route svg {
		display: block;
		width: 100%;
		height: 100%;
		overflow: visible;
	}
	.yl-sp-route__line {
		fill: none;
		stroke: var(--yt-route-color);
		stroke-width: 2;
		stroke-linecap: round;
		stroke-dasharray: var(--yt-route-dash);
	}
	/* 点線を「どこまで見せるか」を決めるマスクの線。既定は全部見えている */
	.yl-sp-route__reveal {
		fill: none;
		stroke: #fff;
		stroke-width: 10;
		stroke-linecap: round;
	}
}

/* ---------------------------------------------------------------------------
   ⑫ スマホの余白（スクロール量を減らすために詰めた分）

   元の値（lower.css）→ いまの値
     セクションの上下 …………… 48px → --yt-sp-section-y
     見出し → カード …………… 30px → --yt-sp-head-gap（最新の記事 20px→16px）
     旅のテーマのタグ ………… 上48px・間50px → 36px・40px（ひもの分は残す）
     「もっと見る」の上 ………… 25px → 18px
     私についての写真の上下 … 28px → 20px
     見出しの上の飛行機 ……… 高さ44px → 36px
   元に戻したいときは、この⑫のブロックを丸ごと消せばOKです。
   --------------------------------------------------------------------------- */
@media (max-width: 700px) {
	:root {
		--yt-sp-section-y: 32px;
		--yt-sp-head-gap: 22px;
	}

	.yl-section {
		padding-top: var(--yt-sp-section-y);
		padding-bottom: var(--yt-sp-section-y);
	}
	.yl-journey {
		padding-top: 20px;
		padding-bottom: 36px;
	}

	.yt-carousel {
		margin-top: var(--yt-sp-head-gap);
	}
	.yl-journal-grid {
		margin-top: 16px;
	}
	.yl-theme-grid {
		margin-top: 36px;
		row-gap: 40px;
	}

	.yl-animals .yl-more,
	.yl-countries .yl-more {
		margin-top: 18px;
	}

	.yl-about-photo {
		margin: 20px auto;
	}

	.yl-sp-route {
		height: 36px;
		margin-bottom: 2px;
	}

	/* この3つは見出しの上に飛行機の飾り（.yl-sp-route）が付く分だけ、
	   前のセクションとの余白が「私について」などより大きく見えていたので、
	   その分だけ上の余白を削って揃える。下の余白（padding-bottom）は変えない */
	.yl-countries,
	.yl-journal,
	.yl-themes {
		padding-top: 0;
	}
}

/* ---------------------------------------------------------------------------
   ⑬ SPのファーストビューの背景

   PCは背景画像（fv-bg.jpg）全体が少し濃いめのベージュ。
   SPは背景がページと同じ明るい色で、ノートの画像のまわりだけ濃く見えていたため、
   FV全体をPCの背景画像と同じ色にそろえています（色はPCの画像から測ったもの）。
   ノートの画像のふちは、背景色になじむように少しだけぼかしています。
   --------------------------------------------------------------------------- */
@media (max-width: 1040px) {
	:root {
		--yt-fv-bg-sp: #f3e8da;
	}

	.hero--route-a .hero__stage {
		background: var(--yt-fv-bg-sp);
	}

	.hero--route-a .hero__mobile-visual img {
		border-radius: 0;
		-webkit-mask-image:
			linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
			linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
		-webkit-mask-composite: source-in;
		mask-image:
			linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
			linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
		mask-composite: intersect;
	}
}

/* ---------------------------------------------------------------------------
   ⑭ 丘のヤシとフラミンゴ（「動物に会いに行った国」の左・PCのみ）

   丘の絵（⑩の上にある journey-edges.webp）と同じ位置・大きさに重ねたSVG。
   色は丘や既存のヤシに合わせた濃い緑。スマホは丘の絵自体を出していないので非表示。
   --------------------------------------------------------------------------- */
.yl-journey-deco {
	display: none;
}
@media (min-width: 701px) {
	.yl-journey-deco {
		--yt-journey-deco-color: #2d4e3a;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		display: block;
		width: 100%;
		height: calc(307 * var(--u));
		overflow: visible;
		fill: var(--yt-journey-deco-color);
		pointer-events: none;
	}
}

/* ---------------------------------------------------------------------------
   ⑮ 地図の点と凡例（「動物に会いに行った国」）

   右のリストと同じ2種類にそろえています。
     濃い緑 … 記事を読める国（点はクリックでその国の記事一覧へ）
     オレンジ … これから書く国（行ったけれど、まだ記事にしていない国）
   --------------------------------------------------------------------------- */
:root {
	--yt-map-written: #07594d;
	--yt-map-coming: #f57d42;
}
.yl-legend span.is-written { color: var(--yt-map-written); }
.yl-legend span.is-coming  { color: var(--yt-map-coming); }

.yl-map-pin.is-written { background: var(--yt-map-written); z-index: 2; }
.yl-map-pin.is-coming {
	background: var(--yt-map-coming);
	scale: .4;
	pointer-events: none;
}
@media (max-width: 700px) {
	.yl-map-pin.is-coming { scale: .42; }
}

/* ---------------------------------------------------------------------------
   ⑯ カードのカルーセル（「動物で探す」「国から探す」）

   ・動かすのは手動だけ。PCはドラッグと左右の矢印、スマホはスワイプです。
     手を離すと、いちばん近いカードの区切りでぴたっと止まります。
   ・端まで行っても終わらないよう、カードを複製してぐるっとつなげています。
   ・枚数・カードの大きさ・間は、セクションごとの変数（--animals / --countries）で変えられます。
       --yt-carousel-card-w / -card-h / -gap … 1024 の中での大きさ
       --yt-carousel-visible ………………… PCで一度に見せる枚数
   ・自動でゆっくり流したくなったら --yt-carousel-speed を 22 くらいにしてください
     （マウスを乗せている間は止まり、動きを減らす設定の人には流しません）。
   ・動かす仕組みは assets/js/carousel.js。
   --------------------------------------------------------------------------- */
:root {
	--yt-carousel-speed: 0;       /* 自動で流れる速さ（1秒あたりの px。PC 1024px 幅のとき）。0 = 手動だけ */
}

/* ---- 共通 ---- */
.yt-carousel {
	/* 見える枠の幅（カード＋間 × 枚数）。各セクションの数字から自動で決まります */
	--yt-carousel-view-w: calc(var(--yt-carousel-visible) * (var(--yt-carousel-card-w) + var(--yt-carousel-gap)) * var(--u));
	--yt-carousel-btn: calc(40 * var(--u));
	position: absolute;
	left: 0;
	right: 0;
}
.yt-carousel__viewport {
	width: var(--yt-carousel-view-w);
	height: 100%;
	margin-inline: auto;
	overflow: hidden;
	cursor: grab;
	touch-action: pan-y;
}
.yt-carousel.is-dragging .yt-carousel__viewport { cursor: grabbing; }
.yt-carousel.is-dragging a { pointer-events: none; }

.yt-carousel__track {
	display: flex;
	align-items: flex-start;
	gap: calc(var(--yt-carousel-gap) * var(--u));
	width: max-content;
	/* 上はマスキングテープの分。左は両端のカードの外にも間の半分ずつ空けるため */
	padding: calc(14 * var(--u)) 0 0 calc(var(--yt-carousel-gap) / 2 * var(--u));
	will-change: transform;
	user-select: none;
	-webkit-user-select: none;
}
.yt-carousel__track img { -webkit-user-drag: none; }

/* カードは全部同じ大きさ */
.yt-carousel__track > * {
	flex: none;
	width: calc(var(--yt-carousel-card-w) * var(--u));
	height: calc(var(--yt-carousel-card-h) * var(--u));
	margin: 0;
}

/* 左右の矢印 */
.yt-carousel__btn {
	position: absolute;
	z-index: 3;
	display: grid;
	place-items: center;
	width: var(--yt-carousel-btn);
	height: var(--yt-carousel-btn);
	padding: 0;
	border: 1px solid var(--yt-border);
	border-radius: 50%;
	background: #fffdf8e6;
	color: var(--yt-ink);
	box-shadow: 0 1px 4px #5d4c3c2e;
	cursor: pointer;
	translate: 0 -50%;
	transition: background-color .2s;
}
.yt-carousel__btn:hover { background: #fff; }
.yt-carousel__btn svg { width: 46%; height: 46%; }
.yt-carousel__btn.is-next svg { scale: -1 1; }

/* ---- 動物で探す ---- */
.yt-carousel--animals {
	--yt-carousel-card-w: 118;
	--yt-carousel-card-h: 146;
	--yt-carousel-gap: 26;
	--yt-carousel-visible: 5;     /* 両脇の余白から植物がのぞく枚数 */
	top: calc(90 * var(--u));
	height: calc(166 * var(--u));
}
.yt-carousel--animals .yl-animal {
	transform: translateY(calc(var(--dy) * var(--u))) rotate(var(--rot));
}
.yt-carousel--animals .yl-animal img {
	height: calc((var(--yt-carousel-card-h) - 33) * var(--u));
}
.yt-carousel--animals .yl-animal::before { display: block; }

/* 上下（--dy）と角度（--rot）のずらし方。6枚でひと回り */
.yt-carousel--animals .yl-animal:nth-child(6n+1) { --dy: 6;  --rot: -3deg; }
.yt-carousel--animals .yl-animal:nth-child(6n+2) { --dy: -2; --rot: 2deg; }
.yt-carousel--animals .yl-animal:nth-child(6n+3) { --dy: 3;  --rot: -1.5deg; }
.yt-carousel--animals .yl-animal:nth-child(6n+4) { --dy: -4; --rot: 2.5deg; }
.yt-carousel--animals .yl-animal:nth-child(6n+5) { --dy: 5;  --rot: -2deg; }
.yt-carousel--animals .yl-animal:nth-child(6n)   { --dy: 0;  --rot: 1deg; }

/* 矢印は見える枠のすぐ外側 */
.yt-carousel--animals .yt-carousel__btn { top: 50%; }
.yt-carousel--animals .is-prev { left: calc(50% - var(--yt-carousel-view-w) / 2 - 46 * var(--u)); }
.yt-carousel--animals .is-next { right: calc(50% - var(--yt-carousel-view-w) / 2 - 46 * var(--u)); }

/* 「動物との出会いを探す →」は、カードの流れと重ならないよう見出しの右へ */
@media (min-width: 701px) {
	.yl-animals .yl-more { top: calc(66 * var(--u)); right: calc(118 * var(--u)); }
}

/* ---- 国から探す ---- */
.yt-carousel--countries {
	--yt-carousel-card-w: 190;
	--yt-carousel-card-h: 135;
	--yt-carousel-gap: 9;
	--yt-carousel-visible: 4;
	top: calc(127 * var(--u));
	height: calc(156 * var(--u));
}
/* マスキングテープはなし（記事カードなど他のカードと同じ見た目に揃える） */
.yt-carousel--countries .yl-country::before { display: none; }

/* 矢印は両脇の写真に半分かかる位置（写真の高さの真ん中） */
.yt-carousel--countries .yt-carousel__btn { top: calc((14 + 6 + 46) * var(--u)); }
.yt-carousel--countries .is-prev { left: calc(50% - var(--yt-carousel-view-w) / 2 - var(--yt-carousel-btn) / 2 + 4 * var(--u)); }
.yt-carousel--countries .is-next { right: calc(50% - var(--yt-carousel-view-w) / 2 - var(--yt-carousel-btn) / 2 + 4 * var(--u)); }

/* ---- スマホ ---- */
@media (max-width: 700px) {
	:root {
		--yt-carousel-sp-gap: 18px;
	}
	.yt-carousel {
		position: relative;
		top: auto;
		height: auto;
		margin-left: -24px;
		margin-right: -24px;
	}
	.yt-carousel__viewport {
		width: auto;
		-webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
		mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
	}
	.yt-carousel__track {
		gap: var(--yt-carousel-sp-gap);
		padding: 14px 0 16px var(--yt-carousel-sp-gap);
	}
	.yt-carousel__track > * {
		width: var(--yt-carousel-sp-card-w);
		height: auto;
	}
	.yt-carousel__btn { display: none; }

	.yt-carousel--animals { --yt-carousel-sp-card-w: 150px; }
	.yt-carousel--animals .yl-animal {
		padding: 7px;
		transform: translateY(calc(var(--dy) * 1px)) rotate(var(--rot));
	}
	.yt-carousel--animals .yl-animal img { height: 124px; aspect-ratio: auto; }

	.yt-carousel--countries { --yt-carousel-sp-card-w: 150px; }
}

/* ---------------------------------------------------------------------------
   ⑰ ファーストビューの横並び表示（481〜1040px）

   縦に積むとコピーの横が大きく空いてしまうので、タブレットと大きめの画面では
   左にコピーとボタン、右にノートの絵を並べます。
   縦積みにするのはスマホ（480px以下。いちばん大きい iPhone でも 430〜440px）だけ。
   左下には、PCの背景にある地図の切れ端と葉（fv-corner.webp）を置いています。
   PCと同じ1枚絵の配置（1041px以上）は、この幅だと文字が小さくなりすぎるため使っていません。
   --------------------------------------------------------------------------- */
.hero__corner { display: none; }

@media (min-width: 481px) and (max-width: 1040px) {
	.hero--route-a .hero__stage {
		display: grid;
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.25fr); /* 左：コピー ／ 右：ノート */
		/* 左の3つ（コピー・説明・ボタン）は、ノートの高さの中で上下中央にまとめる */
		grid-template-rows: 1fr auto auto auto 1fr;
		grid-template-areas:
			".       visual"
			"copy    visual"
			"lead    visual"
			"actions visual"
			".       visual";
		align-content: center;
		column-gap: clamp(20px, 3.4vw, 40px);
		padding: 22px clamp(24px, 4.6vw, 48px) 36px;
	}
	.hero--route-a .hero__stage {
		position: relative;
		padding-bottom: 5%; /* 左下の地図の切れ端のぶん（ボタンが少しかかってもOK） */
	}
	.hero--route-a .hero__stage > * { position: relative; z-index: 1; top: auto; left: auto; } /* PC用の位置指定は使わない */
	.hero--route-a .hero__stage > .hero__corner {
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 0;
		display: block;
		width: 34%;
		height: auto;
		pointer-events: none;
		-webkit-mask-image:
			linear-gradient(to left, transparent, #000 22%),
			linear-gradient(to bottom, transparent, #000 30%);
		-webkit-mask-composite: source-in;
		mask-image:
			linear-gradient(to left, transparent, #000 22%),
			linear-gradient(to bottom, transparent, #000 30%);
		mask-composite: intersect;
	}
	.hero--route-a .hero__copy { grid-area: copy; }
	.hero--route-a .hero__lead { grid-area: lead; }
	.hero--route-a .hero__actions { grid-area: actions; }
	.hero--route-a .hero__mobile-visual {
		grid-area: visual;
		align-self: center;
		/* ノートは右の余白の中まで少し広げて大きく見せる（ふちはぼかしてあるので切れ目は出ない） */
		width: calc(100% + clamp(24px, 4.6vw, 48px) - 6px);
		margin: 0;
	}

	.hero--route-a h1 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); }
	.hero--route-a .hero__lead {
		margin-top: 14px;
		font-size: clamp(.84rem, 1.55vw, 1.05rem);
		line-height: 1.85;
	}
	.hero--route-a .hero__actions {
		max-width: 270px;
		margin-top: 20px;
		gap: 9px;
	}
	.hero--route-a .btn {
		min-height: 44px;
		padding: 0 40px;
		font-size: clamp(.8rem, 1.35vw, .92rem);
	}
	.hero--route-a .btn svg.btn__icon { left: 15px; width: 19px; height: 19px; }
	.hero--route-a .btn svg.btn__arrow { right: 14px; width: 22px; }
}

/* 481〜700px は列が細いので、文字とボタンを少し小さく */
@media (min-width: 481px) and (max-width: 700px) {
	.hero--route-a .hero__stage {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 16px;
		padding: 20px 16px 28px;
	}
	.hero--route-a .hero__mobile-visual { width: calc(100% + 10px); }
	.hero--route-a h1 { font-size: clamp(1.3rem, 4.6vw, 1.9rem); }
	.hero--route-a .hero__lead { margin-top: 10px; font-size: clamp(.7rem, 2.4vw, .84rem); line-height: 1.8; letter-spacing: .02em; }
	.hero--route-a .hero__actions { margin-top: 14px; gap: 7px; }
	.hero--route-a .btn { min-height: 38px; padding: 0 32px; font-size: .76rem; letter-spacing: .06em; }
	.hero--route-a .btn svg.btn__icon { left: 11px; width: 15px; height: 15px; }
	.hero--route-a .btn svg.btn__arrow { right: 10px; width: 17px; }
}

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

   ・項目は「外観 → メニュー」の主要メニュー。アイコンと下の一言は inc/config.php の 'menu'。
   ・文字は Noto Sans JP。色・大きさは下の変数でまとめて変えられます。
   ・×ボタンは固定ヘッダーのものを前に出して使い、ロゴはメニュー側（yu-trips-logo-menu.svg）を出します。
   --------------------------------------------------------------------------- */
.yt-menu {
	--yt-menu-bg: #f6f1e7;
	--yt-menu-ink: #173d30;       /* 項目名 */
	--yt-menu-sub: #5f6b65;       /* 下の一言 */
	--yt-menu-icon: #3f6b53;      /* アイコン */
	--yt-menu-line: #e1d8c6;      /* 区切り線 */
	--yt-menu-accent: #2e5a45;    /* 検索ボタン */
	justify-content: flex-start;
	gap: 0;
	padding: 84px 24px 32px;
	overflow-y: auto;
	background: var(--yt-menu-bg);
	font-family: "Noto Sans JP", sans-serif;
	color: var(--yt-menu-ink);
}
.yt-menu > * { width: 100%; max-width: 560px; margin-inline: auto; }

/* ロゴ（SVG/yu-trips-logo.svg と同じもの）。ヘッダーのロゴと同じ位置に出し、ヘッダー側は隠す */
.yt-menu__logo {
	position: absolute;
	top: 16px;
	left: clamp(18px, 5vw, 72px);
	width: 196px;
	max-width: none;
	margin: 0;
}
.yt-menu__logo img { display: block; width: 100%; height: auto; }
.nav-open .site-header {
	z-index: 50;
	background: transparent;
	border-bottom-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	pointer-events: none;
}
.nav-open .site-header .brand { visibility: hidden; }
.nav-open .site-header .nav-toggle { pointer-events: auto; }

/* 項目 */
.yt-menu .yt-menu__nav {
	display: block;
	margin-top: 12px;
	font-family: inherit;
	font-size: inherit;
	letter-spacing: 0;
}
.yt-menu__list { margin: 0; padding: 0; list-style: none; }
.yt-menu__list li { border-bottom: 1px solid var(--yt-menu-line); }
.yt-menu .yt-menu__item {
	display: grid;
	grid-template-columns: 34px 1fr 18px;
	align-items: center;
	gap: 18px;
	padding: 16px 4px;
	background: none;
	color: inherit;
}
.yt-menu__icon { width: 32px; height: 32px; color: var(--yt-menu-icon); }
.yt-menu__text { display: grid; gap: 4px; }
.yt-menu__text strong,
.yt-menu__search-title strong {
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .06em;
	color: var(--yt-menu-ink);
}
.yt-menu__text small {
	font-size: .8rem;
	line-height: 1.5;
	letter-spacing: .08em;
	color: var(--yt-menu-sub);
}
.yt-menu__chev { width: 18px; height: 18px; color: var(--yt-menu-ink); scale: -1 1; }
.yt-menu .yt-menu__item:hover strong,
.yt-menu .yt-menu__item:focus-visible strong { color: var(--yt-menu-icon); }

/* 開いたときに上から順にふわっと出す */
.yt-menu__list li,
.yt-menu__search {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .5s var(--ease-out-expo), transform .5s var(--ease-out-expo);
}
.nav-open .yt-menu__list li,
.nav-open .yt-menu__search { opacity: 1; transform: none; }
.nav-open .yt-menu__list li:nth-child(2) { transition-delay: .04s; }
.nav-open .yt-menu__list li:nth-child(3) { transition-delay: .08s; }
.nav-open .yt-menu__list li:nth-child(4) { transition-delay: .12s; }
.nav-open .yt-menu__list li:nth-child(5) { transition-delay: .16s; }
.nav-open .yt-menu__list li:nth-child(6) { transition-delay: .2s; }
.nav-open .yt-menu__search { transition-delay: .24s; }

/* 検索 */
.yt-menu__search { padding: 22px 4px 0; }
.yt-menu__search-title {
	display: grid;
	grid-template-columns: 34px 1fr;
	align-items: center;
	gap: 18px;
	margin: 0;
}
.yt-menu__form {
	position: relative;
	display: flex;
	align-items: center;
	margin: 14px 0 0 52px;
}
.yt-menu__form input {
	flex: 1;
	min-width: 0;
	height: 50px;
	padding: 0 64px 0 22px;
	border: 1px solid #cfc5b0;
	border-radius: 999px;
	background: #faf7f0;
	font: inherit;
	font-size: .95rem;
	letter-spacing: .06em;
	color: var(--yt-menu-ink);
	-webkit-appearance: none;
	appearance: none;
}
.yt-menu__form input::placeholder { color: #9a9f98; }
.yt-menu__form input:focus { outline: 2px solid var(--yt-menu-icon); outline-offset: 2px; }
.yt-menu__form button {
	position: absolute;
	right: -4px;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--yt-menu-accent);
	color: #fff;
	cursor: pointer;
}
.yt-menu__form button svg { width: 22px; height: 22px; stroke-width: 1.8; }

/* 右下のスタンプと小枝 */
.yt-menu__deco {
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	gap: 0;
	margin-top: auto;
	padding-top: 20px;
	opacity: .55;
	pointer-events: none;
}
.yt-menu__deco img { width: 64px; height: auto; margin-right: -6px; }
.yt-menu__deco svg {
	width: 30px;
	height: auto;
	fill: none;
	stroke: #7f9a86;
	stroke-width: 1.3;
	stroke-linecap: round;
}
.yt-menu__deco svg path + path { fill: #9bb09f; stroke: none; }

/* ×ボタン：メニューを開いたらまっすぐな×に */
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(4.25px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { transform: translateY(-4.25px) rotate(-45deg); }

@media (max-width: 380px) {
	.yt-menu .yt-menu__item { gap: 14px; padding: 13px 2px; }
	.yt-menu__search { padding-inline: 2px; }
	.yt-menu__search-title { gap: 14px; }
	.yt-menu__form { margin-left: 48px; }
	.yt-menu__text strong,
	.yt-menu__search-title strong { font-size: 1.15rem; }
}

/* ---------------------------------------------------------------------------
   ⑲ 記事ページ：目次・SNSシェア・著者ボックス
   --------------------------------------------------------------------------- */
:root {
	--yt-single-max: 760px;      /* 本文まわりの読みやすい幅 */
	--yt-single-gap: clamp(20px, 3vw, 32px);
	--yt-single-radius: var(--yt-radius);
	--yt-single-border: var(--yt-border);
	--yt-single-muted: #6a7873;
}

.yt-single__header,
.yt-single .yt-prose,
.yt-single .yt-terms,
.yt-single .yt-share,
.yt-single .yt-author {
	max-width: var(--yt-single-max);
	margin-inline: auto;
}

/*
 * 目次（core プラグインが組み立てる .aj-toc を、そのまま器だけ変える）。
 * <summary>目次</summary> の文字は font-size:0 で見せずに消し、
 * ::before（アイコン）・::after（見出し文字）で「☰ この記事の目次」に見せている
 * （読み上げ内容は「目次」のまま。意味は変わらないので問題ない）。
 */
.aj-toc {
	margin: 0;
	padding: 16px 18px 18px;
	background: var(--yt-paper-card);
	border: 1px solid var(--yt-single-border);
	border-radius: var(--yt-single-radius);
	font-size: .92rem;
}
.aj-toc summary {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--yt-single-border);
	cursor: pointer;
	font-size: 0;
	list-style: none;
}
.aj-toc summary::-webkit-details-marker { display: none; }
.aj-toc summary::before {
	content: "";
	width: 19px;
	height: 19px;
	flex: none;
	background: var(--yt-accent);
	-webkit-mask: url(../img/icons/list.svg) center / contain no-repeat;
	mask: url(../img/icons/list.svg) center / contain no-repeat;
}
.aj-toc summary::after { content: "この記事の目次"; font-size: 1rem; font-weight: 700; color: var(--yt-ink); }

/* SP：開閉できることが分かるよう、見出しの右にシェブロンを添える（開くと向きが変わる） */
.yt-toc--mobile .aj-toc summary::after { content: "この記事の目次 ⌄"; flex: 1; }
.yt-toc--mobile .aj-toc details[open] summary::after { content: "この記事の目次 ⌃"; }

.aj-toc ol {
	counter-reset: yt-toc;
	margin: 14px 0 0;
	padding-left: 0;
	list-style: none;
	line-height: 1.6;
}
.aj-toc ol ol { counter-reset: none; margin: 8px 0 0 34px; }
.aj-toc ol ol li { margin-top: 6px; padding-left: 0; font-size: .93em; }
.aj-toc li { position: relative; margin-top: 12px; padding-left: 34px; }
.aj-toc li:first-child { margin-top: 0; }
.aj-toc ol > li::before {
	counter-increment: yt-toc;
	content: counter(yt-toc);
	position: absolute;
	left: 0;
	top: -1px;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--yt-accent);
	color: #fffdf2;
	font-size: .78rem;
	font-weight: 700;
}
.aj-toc ol ol > li::before { content: none; }
.aj-toc a { color: inherit; text-decoration: none; }
.aj-toc a:hover { text-decoration: underline; }

/* PCサイドバー：常に開いた状態で見せる（クリックできる見た目にしない・開閉三角も消す） */
.yt-toc--sidebar summary { cursor: default; }
.yt-toc--sidebar summary::marker,
.yt-toc--sidebar summary::-webkit-details-marker { display: none; content: ""; }

/* SP：本文の上、折りたたみ。ネイティブの開閉三角（▶/▼）をそのまま使う */
.yt-toc--mobile { margin: var(--yt-single-gap) 0; }
.yt-toc--mobile .aj-toc summary { cursor: pointer; }
.yt-toc--mobile .aj-toc details[open] summary { margin-bottom: 4px; }

/* SNSシェア（記事下だけ） */
.yt-share {
	margin-top: var(--yt-block-y);
	padding: 0 clamp(18px, 3vw, 28px);
	border-radius: var(--yt-single-radius);
	background: var(--yt-tint-green);
}
.yt-share__heading { display: flex; align-items: center; gap: 14px; justify-content: center; text-align: center; flex-wrap: wrap; }
.yt-share__title { margin: 0; font-weight: 700; color: var(--yt-accent); }
.yt-share__sub { margin: 2px 0 0; font-size: var(--yt-small); color: var(--yt-single-muted); }
.yt-share__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}
.yt-share__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	font: inherit;
	font-size: .78rem;
	color: var(--yt-ink);
	cursor: pointer;
}
/* ラベルは2つのspanに分けてあるが、PCでは1行につなげて表示する */
.yt-share__label-a, .yt-share__label-b { display: inline; }
.yt-share__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--card, #fff);
	box-shadow: 0 2px 6px #5d4c3c26;
	color: #fff;
	transition: transform .25s ease;
}
/* Font Awesome のアイコンはブランドごとに描画の余白が違うので、
   フォントサイズを個別に微調整して見た目の大きさを揃える（LINEが小さく見えないように） */
.yt-share__icon i { font-size: 19px; line-height: 1; }
.yt-share__icon--x i { font-size: 18px; }
.yt-share__icon--copy i { font-size: 18px; }
.yt-share__icon--x { background: #000; }
.yt-share__icon--facebook { background: #1877f2; }
.yt-share__icon--copy { background: #fff; color: #6a7873; }

.yt-share__icon--line {
	background-color: #06C755;
}

.yt-share__line-stack {
	position: relative;
	display: block;
	width: 36px;
	height: 36px;
}

/* Qiitaの fa-circle fa-lg 相当 */
.yt-share__line-stack .fa-circle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 24px;
	color: #fff;
}

/* Qiitaの fa-line fa-2x 相当 */
.yt-share__line-stack .fa-line {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 32px;
	color: #06C755;
}

.yt-share__item:hover .yt-share__icon { transform: translateY(-2px); }

/* 著者ボックス（本文の下・写真つき） */
.yt-author {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	margin-top: var(--yt-single-gap);
	padding: 22px;
	background: var(--yt-paper-card);
	border: 1px solid var(--yt-single-border);
	border-radius: var(--yt-single-radius);
}
.yt-author .yt-author__avatar { width: 88px; height: 88px; border-radius: 50%; flex: none; object-fit: cover; }
.yt-author__body { flex: 1; min-width: 0; }
.yt-author__eyebrow { display: block; margin-bottom: 6px; font-size: var(--yt-small); letter-spacing: .06em; color: var(--yt-single-muted); }
.yt-author__name { margin: 0; font-weight: 700; font-size: 1.05rem; }
.yt-author__role { margin: 2px 0 0; font-size: .82rem; color: var(--yt-accent); }
.yt-author__bio { margin-top: 8px; font-size: .9rem; line-height: 1.8; color: var(--yt-single-muted); }
.yt-author .yt-author__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: 12px;
	padding: 8px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--yt-accent);
	font-size: .85rem;
	font-weight: 700;
	color: #fff;
}
.yt-author .yt-author__link:hover { background: var(--green-deep, #0e3b2a); }

/* ---------------------------------------------------------------------------
   ⑳ 楽天アフィリエイト商品カードのレスポンシブ対応
   （元：本番Cocoon子テーマのstyle.css。セレクターを .entry-content → .yt-prose に変更）
   --------------------------------------------------------------------------- */
.yt-prose table[border="0"] > tbody > tr > td > div[style*="width:624px"] {
	width: 100% !important;
	max-width: 624px;
	box-sizing: border-box;
}
@media screen and (max-width: 660px) {
	.yt-prose table[border="0"] > tbody > tr > td > div[style*="width:624px"] > table > tbody > tr {
		display: flex;
		flex-direction: column;
	}
	.yt-prose table[border="0"] > tbody > tr > td > div[style*="width:624px"] > table > tbody > tr > td {
		display: block;
		width: 100% !important;
	}
	.yt-prose table[border="0"] > tbody > tr > td > div[style*="width:624px"] img {
		max-width: 100% !important;
		height: auto !important;
	}
	.yt-prose table[border="0"] > tbody > tr > td > div[style*="width:624px"] div[style*="margin:15px"] {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
	}
	.yt-prose table[border="0"] > tbody > tr > td > div[style*="width:624px"] div[style*="float:right"] {
		float: none !important;
		width: auto !important;
	}
}

/* ---------------------------------------------------------------------------
   ㉑ 記事ページ：PCサイドバー
   --------------------------------------------------------------------------- */
.yt-sidebar { display: flex; flex-direction: column; gap: 24px; }

.yt-side-block {
	padding: 18px;
	background: var(--yt-paper-card);
	border: 1px solid var(--yt-single-border);
	border-radius: var(--yt-single-radius);
}
.yt-side-block__title {
	display: flex;
	align-items: center;
	gap: 8px;
	/* margin は .yl-page h2 { margin:0 } の方が詳細度で勝つため、下の .yt-side-block を
	   付けたセレクタ側でだけ上書きする（!important は使わない） */
	margin: 0;
	font-family: "Noto Sans JP", sans-serif; /* h1,h2の既定（明朝体）を、他と同じ書体に上書き */
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: normal;
	color: var(--yt-ink);
}
.yt-side-block__icon { width: 18px; height: 18px; flex: none; color: var(--yt-accent); }
.yt-side-block .yt-side-block__title { margin-bottom: 10px; }

/* 記事検索：丸い入力欄の中に、右側の緑の虫眼鏡ボタンを重ねる形。 */
.yt-side-search { position: relative; display: block; }
.yt-side-search input[type="search"] {
	width: 100%;
	min-height: 44px;
	padding: 0 48px 0 16px;
	border: 1px solid var(--yt-border);
	border-radius: 999px;
	background: #fff;
	color: var(--yt-ink);
	font: inherit;
	font-size: .88rem;
}
.yt-side-search input[type="search"]:focus {
	outline: none;
	border-color: var(--yt-accent);
	box-shadow: 0 0 0 2px rgba(20, 85, 60, .25);
}
.yt-side-search button {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--yt-accent);
	cursor: pointer;
}
.yt-side-search button svg { width: 18px; height: 18px; }

/* 著者プロフィール（コンパクト版） */
.yt-side-author { text-align: center; }
.yt-side-author .yt-side-author__avatar { display: block; width: 88px; height: 88px; margin: 0 auto 10px; border-radius: 50%; object-fit: cover; }
.yt-side-author__name { margin: 0; font-weight: 700; }
.yt-side-author__role { margin: 4px 0 0; font-size: .78rem; color: var(--yt-single-muted); }
.yt-side-author__bio { margin-top: 10px; font-size: .82rem; line-height: 1.8; color: var(--yt-single-muted); text-align: left; }
.yt-side-author .yt-side-author__link {
	display: inline-block;
	margin-top: 14px;
	padding: 7px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--yt-accent);
	font-size: .8rem;
	font-weight: 700;
	color: #fff;
}
.yt-side-author .yt-side-author__link:hover { background: var(--green-deep, #0e3b2a); }

/* カテゴリー・タグ（本文下と同じ .yt-cat-badge / .yt-tags を使用） */
.yt-side-block .yt-tags { margin-top: 0; }

/*
 * 関連記事（サイドバー最下部だけスクロールに追従＝Cocoonの人気記事欄と同じ挙動）。
 * .yt-side-related-slot が本文と同じ高さまで伸びる「のりしろ」（.yt-single-layoutの
 * stretchで.yt-sidebarが本文と同じ高さになり、flex:1のこのslotがサイドバー内の
 * 残り全部を受け持つ）。その中で .yt-side-related だけがstickyで追従し、
 * のりしろの終わり＝本文の終わりで自然に追従が止まる（フッターに重ならない）。
 */
.yt-side-related-slot { flex: 1; min-height: 0; }
.yt-side-related { position: sticky; top: 100px; }
.yt-side-related__list { display: flex; flex-direction: column; gap: 14px; }
.yt-side-related__item { display: flex; gap: 10px; align-items: flex-start; }
.yt-side-related__thumb { flex: none; display: block; width: 76px; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; }
.yt-side-related__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-side-related__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.yt-side-related__title {
	font-size: .85rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--yt-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.yt-side-related__item time { font-size: .72rem; color: var(--yt-single-muted); }
.yt-side-related__item:hover .yt-side-related__title { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   ㉒ 記事ページ：「動物から探す」CTA（完成バナー画像。テキストは重ねない）
   --------------------------------------------------------------------------- */
.yt-animal-cta { display: block; margin-top: var(--yt-block-y); border-radius: var(--yt-radius); overflow: hidden; }
/* width/height属性のない画像なので、読み込み前に高さが0になってガクッと動かないよう
   アスペクト比だけ先に確保しておく（PC横長バナー／SP正方形で比率が違う） */
.yt-animal-cta img { display: block; width: 100%; height: auto; aspect-ratio: 1536 / 348; }
.yt-animal-cta:hover { opacity: .93; }
@media (max-width: 700px) {
	.yt-animal-cta img { aspect-ratio: 1 / 1; }
}

/* ---------------------------------------------------------------------------
   ㉓ フッター（下層ページだけ）：植物装飾・Instagramのみのsns・明るい配色
   トップページ（.yl-footer--lower が付かない）は既存の緑背景フッターのまま。
   --------------------------------------------------------------------------- */
.yl-footer--lower { background: #fffdf8; color: var(--yt-ink); overflow: clip; }
.yl-footer-plant { position: absolute; bottom: 0; height: auto; pointer-events: none; z-index: 0; }
.yl-footer-plant--left { left: 0; width: 92px; }
.yl-footer-plant--right { right: 0; width: 80px; }
.yl-footer--lower .yl-footer-logo,
.yl-footer--lower nav,
.yl-footer--lower .yl-footer-contact,
.yl-footer--lower .yl-footer-sns,
.yl-footer--lower .yl-footer-note,
.yl-footer--lower .yl-copyright,
.yl-footer--lower .yl-top { z-index: 1; }
/* 「お問い合わせ」を、ナビの中に入れて他の項目と同じ並び・間隔にする（下層フッターだけ） */
.yl-footer--lower .yl-footer-contact { position: static; margin: 0; }

.yl-footer-sns {
	position: absolute;
	right: calc(50 * var(--u));
	top: calc(28 * var(--u));
	width: calc(34 * var(--u));
	height: calc(34 * var(--u));
	display: grid;
	place-items: center;
	border: 1px solid var(--yt-border);
	border-radius: 50%;
	color: var(--yt-ink);
}
.yl-footer-sns svg { width: 60%; height: 60%; }
.yl-footer-sns:hover { border-color: var(--yt-accent); color: var(--yt-accent); }

@media (max-width: 700px) {
	.yl-footer-plant--left { width: 118px; }
	.yl-footer-plant--right { width: 102px; }
	.yl-footer-sns { position: static; width: 40px; height: 40px; margin: 18px auto 0; }
}

/* ---------------------------------------------------------------------------
   ㉔ 記事ページのレスポンシブ（900px以下：1カラム・サイドバー非表示・目次は本文上に折りたたみ）
   --------------------------------------------------------------------------- */
.yt-toc--mobile { display: none; }

@media (max-width: 900px) {
	.yt-single-layout { grid-template-columns: 1fr; gap: 0; }
	.yt-sidebar { display: none; }
	.yt-toc--mobile { display: block; }

	.yt-single__meta { gap: 8px; }
	.yt-cat-badge { font-size: .76rem; }

	.yt-prose h2 { font-size: 1.2em; gap: 8px; }
	.yt-prose h2::before { width: 22px; height: 22px; }

	.yt-share { padding: 0 16px; }
	.yt-share__heading { justify-content: flex-start; text-align: left; }
	.yt-share__list { justify-content: space-between; gap: 8px; flex-wrap: nowrap; }
	.yt-share__item { flex: 1; }
	.yt-share__icon { width: 52px; height: 52px; }
	.yt-share__icon i { font-size: 21px; }
	.yt-share__icon--x i { font-size: 20px; }
	.yt-share__icon--copy i { font-size: 20px; }
	/* ラベルが長い「Facebookでシェア」なども2行に分けて、4つを1列に収める */
	.yt-share__label { display: block; text-align: center; }
	.yt-share__label-a, .yt-share__label-b { display: block; white-space: nowrap; }

	.yt-author { flex-direction: column; align-items: center; text-align: center; padding: 20px; }
	.yt-author__body { text-align: center; }

	.yt-terms { justify-content: flex-start; }
}

/* ---------------------------------------------------------------------------
   ㉕ 本文内「この旅の記事」（yu-trips-core プラグインの aj-trip）の見た目調整
   プラグインのCSS（aj-link-parts.css）はテーマのwp.cssより後に読み込まれるため、
   .yt-prose を付けて詳細度で確実に上書きする。見出しの丸いアイコンと、
   カードの枠線（下にラインのように見えていたもの）を消し、
   「国から探す」などの記事カード（.yl-article）と同じ、線なし＋ホバーだけ
   影が付く見た目に揃える。
   --------------------------------------------------------------------------- */
.yt-prose .aj-trip__head::before { content: none; }
/* 見出し下の注記（同じ旅で書いた記事です）が .yl-page p{margin:0} のリセットに
   巻き込まれて本文とくっついていたので、下の余白を戻す */
.yt-prose .aj-trip__note { margin: 0 0 10px; }
.yt-prose .aj-trip__link {
	border: none;
	box-shadow: var(--yt-card-shadow);
	transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.yt-prose .aj-trip__link:hover {
	box-shadow: 0 10px 22px #5d4c3c33;
	transform: translateY(-3px);
}

/*
 * 本文内のキャラ吹き出し（yu-trips-core の [aj_talk]）の見た目調整。
 * ・キャラ画像の枠線とベージュの背景色を消す
 * ・見出しラベル（「注意」など）はdisplay:blockで既に改行しているのに、
 *   直後に<br>が続くので改行が二重になり本文との間が空きすぎる → そのbrだけ非表示に
 */
.yt-prose .aj-talk__icon { border: none; background: none; }
.yt-prose .aj-talk__label + br { display: none; }

/*
 * 本文内の「この旅の続き」（yu-trips-core の [aj_next]）の見た目調整。
 * ・ラベルと「記事を読む」の色を、記事のメインカテゴリーのタグ色に合わせる
 *   （--yt-cat-color は content.php で --yt-h2-icon と同じ場所に渡している）
 * ・カードの枠線（下にラインのように見えていたもの）を消し、aj-trip と同じ
 *   線なし＋ホバーで影が付くだけの見た目に揃える
 * ・「記事を読む」の矢印は border を回転させる作り方だと角がガタついて見えるため、
 *   SVGのシェブロン（mask）に置き換えて、色は currentColor でテキストと揃える
 */
.yt-prose .aj-next__label { background: var(--yt-cat-color, #b04a2c); }
.yt-prose .aj-next__more { color: var(--yt-cat-color, #b04a2c); }
.yt-prose .aj-next__more::after {
	width: 7px;
	height: 12px;
	border: none;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	transform: none;
}
.yt-prose .aj-next__link {
	border: none;
	box-shadow: var(--yt-card-shadow);
	transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.yt-prose .aj-next__link:hover {
	box-shadow: 0 10px 22px #5d4c3c33;
	transform: translateY(-3px);
}
.yt-prose .aj-next__link:hover .aj-next__more::after { transform: none; }

/*
 * 本文内の特典フック（yu-trips-core の [aj_perk]。「使った特典を見る」のカード）の見た目調整。
 * ・<a>の中に<p>（見出し文）が入っていると、ブロック要素をまたぐ場所でブラウザが
 *   <a>を2つに割って描画してしまい、点線の枠が2つに分かれて見えていた。
 *   本文側のHTMLで<p class="aj-perk__hook">を<span>に変更済み（displayだけここで補う）。
 * ・POINTSのスタンプと「使った特典を見る」ボタンは、特典系の内容なので
 *   「特典で旅する」タグと同じマスタード色に揃える。
 * ・<span>に変えたことで改行がwpautopの<br>頼みになり、spanをdisplay:blockに
 *   したことと合わさって余白が二重に空いていたため、その<br>は非表示にする。
 */
.yt-prose .aj-perk__link > br { display: none; }
.yt-prose .aj-perk__hook { display: block; }
.yt-prose .aj-perk__link { border-color: #A98732; }
.yt-prose .aj-perk__link:hover { border-color: #8a6b28; }
.yt-prose .aj-perk__stamp { background: #A98732; }
.yt-prose .aj-perk__more { background: #A98732; }
.yt-prose .aj-perk__link:hover .aj-perk__more { background: #8a6b28; }