/*
 * oto-v2.css — リニューアル版（ヘッダー・TOP・フッター）
 *
 * 旧 style.css の後に読み込み、新しいクラスはすべて oto2- 接頭辞。
 * 他サイトのCSS・クラス名は使っていない（モックから自前で書き起こし）。
 *
 * 背景のルール（間隔は16px、線は細く薄く）
 *   方眼 : ヒーロー・黒セクション・フッター
 *   ドット: カテゴリバナー・白い記事セクション（推し活・グルメ）
 * 境界は 2px の黒（--oto2-ink）。角丸 16px。影は下だけにずらす。
 *
 * ブレークポイント: 〜719px = SP / 720〜1023px = タブレット / 1024px〜 = PC
 */

:root {
	--oto2-ink: #201e1d;
	--oto2-dark: #1c1917;
	--oto2-gray: #ecebe7;
	--oto2-oshi: #1116ed;
	--oto2-hotel: #f1c242;
	--oto2-gourmet: #10a02a;
	--oto2-area: #e73946;
	--oto2-ui: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Sans", sans-serif;
	--oto2-en: "Archivo", "Noto Sans JP", sans-serif;
	--oto2-grid: 16px;
	--oto2-pad: 18px;
	--oto2-shadow: 0 6px 0 rgba(32, 30, 29, 0.14);
}

/* カテゴリーごとの色（--c = 面の色 / --cd = 文字用の濃い色 / --on = 面の上の文字色） */
.oto2-c-oshi { --c: #1116ed; --cd: #1116ed; --on: #fff; }
.oto2-c-hotel { --c: #f1c242; --cd: #8a6206; --on: #201e1d; }
.oto2-c-gourmet { --c: #10a02a; --cd: #0b7a20; --on: #fff; }
.oto2-c-area { --c: #e73946; --cd: #b7202c; --on: #fff; }

/* 共通部品 */
.oto2-top,
.oto2-header,
.oto2-footer-wrap {
	font-family: var(--oto2-ui);
	color: var(--oto2-ink);
}
.oto2-top *,
.oto2-header *,
.oto2-footer-wrap * {
	box-sizing: border-box;
}
:where(.oto2-top, .oto2-header, .oto2-footer-wrap) a {
	color: inherit;
	text-decoration: none;
}
.oto2-wrap {
	max-width: 940px;
	margin: 0 auto;
	padding: 0 var(--oto2-pad);
}
.oto2-thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #ddd;
}
.oto2-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 背景パターン */
.oto2-hero,
.oto2-footer-wrap {
	background-color: #fff;
	background-image:
		linear-gradient(to right, rgba(32, 30, 29, 0.07) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(32, 30, 29, 0.07) 1px, transparent 1px);
	background-size: var(--oto2-grid) var(--oto2-grid);
}
.oto2-dark {
	background-color: var(--oto2-dark);
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
	background-size: var(--oto2-grid) var(--oto2-grid);
	color: #fff;
}
.oto2-dots,
.oto2-cat {
	background-color: #fff;
	background-image: radial-gradient(rgba(32, 30, 29, 0.26) 1.2px, transparent 1.4px);
	background-size: var(--oto2-grid) var(--oto2-grid);
	background-position: calc(var(--oto2-grid) / 2) calc(var(--oto2-grid) / 2);
}
.oto2-cat {
	background-color: var(--oto2-gray);
	border-top: 2px solid var(--oto2-ink);
}

/* =========================================================
   ヘッダー
   ========================================================= */
.oto2-header {
	background: #fff;
	border-bottom: 2px solid var(--oto2-ink);
}
.oto2-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: 940px;
	margin: 0 auto;
	padding: 10px 16px;
}
.oto2-header__brand {
	display: block;
	flex: none;
}
.oto2-header__logo {
	display: block;
	height: 24px;
	width: auto;
}
.oto2-header__title {
	font: 900 18px/1 var(--oto2-ui);
}
.oto2-header__right {
	display: flex;
	align-items: center;
	gap: 28px;
}
.oto2-header__nav {
	display: none;
	align-items: center;
	gap: 26px;
}
.oto2-header__link {
	display: inline-flex;
	align-items: center;
	padding: 6px 0 7px;
	border-bottom: 4px solid var(--c);
	font: 900 14px/1 var(--oto2-ui);
	color: var(--oto2-ink);
}
.oto2-header__link::after {
	content: "\203A";
	margin-left: 6px;
	font-weight: 900;
}
.oto2-header__link:hover,
.oto2-header__link:focus-visible {
	background: var(--c);
	color: var(--on);
}
.oto2-header__contact {
	display: inline-flex;
	gap: 6px;
	padding: 11px 14px;
	border-radius: 99px;
	background: var(--oto2-ink);
	color: #fff;
	font: 900 12px/1 var(--oto2-ui);
}
.oto2-header__contact:hover,
.oto2-header__contact:focus-visible {
	background: var(--oto2-oshi);
}

/* =========================================================
   ヒーロー
   ========================================================= */
.oto2-hero {
	padding: 28px 16px 34px;
}
.oto2-hero__inner {
	max-width: 640px;
	margin: 0 auto;
}
.oto2-hero__tabs {
	display: flex;
	gap: 6px;
	height: 14px;
	margin-bottom: -2px;
	padding-left: 18px;
	position: relative;
	z-index: 1;
}
.oto2-hero__tabs i {
	display: block;
	width: 44px;
	height: 14px;
	background: var(--c);
	border: 2px solid var(--oto2-ink);
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
}
.oto2-hero__card {
	padding: 30px 22px;
	background: #fff;
	border: 2px solid var(--oto2-ink);
	border-radius: 18px;
	box-shadow: 0 8px 0 rgba(32, 30, 29, 0.16);
}
.oto2-hero__lead {
	margin: 0 0 10px;
	font: 900 11px/1 var(--oto2-en);
	letter-spacing: 0.14em;
	color: #5c5853;
}
.oto2-hero__h1 {
	margin: 0;
	font: 900 38px/1.2 var(--oto2-ui);
	letter-spacing: 0.01em;
}
.oto2-hero__h1 span {
	display: block;
	width: fit-content;
}
.oto2-mk {
	margin-top: 4px;
	padding: 0 0.18em;
	background: var(--oto2-oshi);
	color: #fff;
}
.oto2-hero__sub {
	margin: 12px 0 0;
	font: 700 13px/1.8 var(--oto2-ui);
	color: #3a3733;
}

/* =========================================================
   共通：セクション見出し・チップ
   ========================================================= */
.oto2-sh {
	margin-bottom: 20px;
}
.oto2-chip {
	display: inline-block;
	padding: 6px 11px;
	border-radius: 99px;
	font: 900 11px/1 var(--oto2-en);
	letter-spacing: 0.16em;
}
.oto2-chip--ink {
	background: var(--oto2-ink);
	color: #fff;
}
.oto2-chip--c {
	background: var(--c);
	color: var(--on);
	border: 2px solid var(--oto2-ink);
}
.oto2-dark .oto2-chip--c {
	border: 0;
}
.oto2-sh__h2 {
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	background: none;
	font: 900 30px/1.2 var(--oto2-ui);
	color: inherit;
}
.oto2-sh__sub {
	margin: 6px 0 0;
	font: 700 12px/1.6 var(--oto2-ui);
	color: #5c5853;
}
.oto2-dark .oto2-sh__sub {
	color: rgba(255, 255, 255, 0.75);
}

/* =========================================================
   カテゴリバナー（SP: 色ベタ2×2 / PC: 横長2列）
   ========================================================= */
.oto2-cat {
	padding: 34px 0 38px;
}
.oto2-bns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.oto2-bn {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 16px 14px 18px;
	background: var(--c);
	color: var(--on);
	border: 2px solid var(--oto2-ink);
	border-radius: 16px;
	box-shadow: 0 6px 0 rgba(32, 30, 29, 0.16);
}
.oto2-bn__l {
	display: block;
	color: inherit;
}
.oto2-bn__l small {
	display: block;
	color: inherit;
	font: 900 10px/1 var(--oto2-en);
	letter-spacing: 0.18em;
	opacity: 0.85;
}
.oto2-bn__l b {
	display: block;
	margin-top: 8px;
	font: 900 24px/1.1 var(--oto2-ui);
}
.oto2-bn__r em {
	display: none;
	font: 700 12px/1.4 var(--oto2-ui);
	font-style: normal;
	color: #5c5853;
}
.oto2-bn__p {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}
.oto2-pl {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border: 2px solid var(--oto2-ink);
	border-radius: 99px;
	background: #fff;
	color: var(--oto2-ink);
	font: 900 11.5px/1 var(--oto2-ui);
	white-space: nowrap;
}
.oto2-pl i {
	display: none;
	font-style: normal;
}
.oto2-pl:hover,
.oto2-pl:focus-visible {
	background: var(--oto2-ink);
	color: #fff;
}
.oto2-go {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 2px solid var(--oto2-ink);
	border-radius: 50%;
	background: #fff;
	color: var(--oto2-ink);
	font: 900 14px/1 var(--oto2-ui);
}

/* =========================================================
   PICK UP（黒・横スクロール）
   ========================================================= */
.oto2-pickup {
	padding: 34px 0 30px;
}
.oto2-eb {
	margin: 0 0 8px;
	font: 900 12px/1 var(--oto2-en);
	letter-spacing: 0.18em;
	color: var(--oto2-hotel);
}
.oto2-pickup__h2 {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	background: none;
	font: 900 28px/1.25 var(--oto2-ui);
	color: #fff;
}
.oto2-track {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 10px var(--oto2-pad) 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.oto2-track::-webkit-scrollbar {
	display: none;
}
.oto2-track {
	scroll-padding-left: var(--oto2-pad);
	scroll-padding-right: var(--oto2-pad);
}
.oto2-track:focus-visible {
	outline: 3px solid var(--oto2-hotel);
	outline-offset: -3px;
}
.oto2-pw {
	position: relative;
	flex: 0 0 250px;
	padding-top: 26px;
	scroll-snap-align: start;
	color: var(--oto2-ink);
}
.oto2-ptab {
	position: absolute;
	top: 0;
	left: 16px;
	z-index: 2;
	display: flex;
	align-items: center;
	height: 28px;
	padding: 0 13px;
	border-radius: 10px 10px 0 0;
	background: var(--c);
	color: var(--on);
	font: 900 12px/1 var(--oto2-ui);
}
.oto2-pcard {
	display: block;
	overflow: hidden;
	border-radius: 16px;
	background: #fff;
}
.oto2-ptx {
	display: block;
	padding: 12px 14px 14px;
}
.oto2-ptx__title {
	display: -webkit-box;
	overflow: hidden;
	font: 900 14px/1.55 var(--oto2-ui);
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.oto2-ptx__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 10px;
	margin-top: 8px;
	font: 700 11px/1.4 var(--oto2-ui);
	color: var(--cd);
}
.oto2-ctl {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 4px;
}
.oto2-seg {
	display: flex;
	gap: 6px;
}
.oto2-seg i {
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.35);
	transition: width 0.2s;
}
.oto2-seg i.on {
	width: 28px;
	background: #fff;
}
.oto2-arr {
	display: flex;
	gap: 10px;
}
.oto2-arr button {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	font: 900 18px/1 var(--oto2-ui);
	cursor: pointer;
}
.oto2-arr button:hover,
.oto2-arr button:focus-visible {
	background: #fff;
	color: var(--oto2-ink);
}
.oto2-arr button:focus-visible {
	outline: 3px solid var(--oto2-hotel);
	outline-offset: 2px;
}

/* =========================================================
   カテゴリー別新着（見出し＋大1＋2×2＋下ボタン）
   ========================================================= */
.oto2-new {
	padding: 34px 0 38px;
}
.oto2-nb {
	display: grid;
	gap: 16px;
}
.oto2-nb__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 12px;
}
.oto2-ncard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 2px solid var(--oto2-ink);
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--oto2-shadow);
	color: var(--oto2-ink);
}
.oto2-dark .oto2-ncard {
	border: 0;
	box-shadow: none;
}
.oto2-ncard__tx {
	display: block;
	padding: 11px 12px 13px;
}
.oto2-ncard__title {
	display: -webkit-box;
	overflow: hidden;
	font: 900 12.5px/1.55 var(--oto2-ui);
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}
.oto2-ncard--big .oto2-ncard__tx {
	padding: 14px 16px 16px;
}
.oto2-ncard--big .oto2-ncard__title {
	font-size: 16px;
	-webkit-line-clamp: 3;
}
.oto2-mbw {
	display: flex;
	justify-content: center;
	margin-top: 26px;
}
.oto2-mb {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	padding: 16px 20px;
	border-radius: 14px;
	font: 900 15px/1 var(--oto2-ui);
}
.oto2-mb i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font: 900 14px/1 var(--oto2-ui);
	font-style: normal;
}
/* 白背景：カテゴリー色ベタ */
.oto2-dots .oto2-mb {
	border: 2px solid var(--oto2-ink);
	background: var(--c);
	color: var(--on);
	box-shadow: 0 6px 0 rgba(32, 30, 29, 0.22);
}
.oto2-dots .oto2-mb i {
	background: #fff;
	color: var(--c);
}
.oto2-dots.oto2-c-hotel .oto2-mb i {
	color: var(--oto2-ink);
}
/* 黒背景：白ボタン */
.oto2-dark .oto2-mb {
	background: #fff;
	color: var(--oto2-ink);
	box-shadow: 0 6px 0 rgba(255, 255, 255, 0.22);
}
.oto2-dark .oto2-mb i {
	background: var(--c);
	color: var(--on);
}
.oto2-mb:hover,
.oto2-mb:focus-visible {
	transform: translateY(2px);
}

/* =========================================================
   フッター（F1：タブ付きカード）
   ========================================================= */
.oto2-footer-wrap {
	margin-top: 0;
	border-top: 2px solid var(--oto2-ink);
}
.oto2-footer {
	max-width: 940px;
	margin: 0 auto;
	padding: 36px var(--oto2-pad) 28px;
}
.oto2-fcols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 14px;
}
.oto2-fc {
	position: relative;
	padding-top: 26px;
}
.oto2-ftab {
	position: absolute;
	top: 0;
	left: 14px;
	z-index: 2;
	display: flex;
	align-items: center;
	height: 28px;
	padding: 0 13px;
	border: 2px solid var(--oto2-ink);
	border-bottom: 0;
	border-radius: 10px 10px 0 0;
	background: var(--c);
	color: var(--on);
	font: 900 12px/1 var(--oto2-ui);
}
.oto2-fcard {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 14px 14px 16px;
	list-style: none;
	border: 2px solid var(--oto2-ink);
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--oto2-shadow);
}
.oto2-fcard a {
	font: 700 13px/1.4 var(--oto2-ui);
}
.oto2-fcard a::after {
	content: "\00a0\203A";
	font-weight: 900;
}
.oto2-fcard a:hover,
.oto2-fcard a:focus-visible {
	text-decoration: underline;
}
.oto2-sub-short {
	display: none;
}
.oto2-ftags {
	margin-top: 30px;
}
.oto2-flabel {
	margin: 0 0 12px;
	font: 900 11px/1 var(--oto2-en);
	letter-spacing: 0.16em;
}
.oto2-tgs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.oto2-tg {
	display: inline-flex;
	gap: 2px;
	padding: 7px 12px;
	border: 2px solid var(--oto2-ink);
	border-radius: 99px;
	background: #fff;
	font: 900 12px/1 var(--oto2-ui);
}
.oto2-tg i {
	font-style: normal;
	color: #8a857f;
}
.oto2-tg--pc {
	display: none;
}
.oto2-tg:hover,
.oto2-tg:focus-visible {
	background: var(--oto2-ink);
	color: #fff;
}
.oto2-frow {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 2px solid var(--oto2-ink);
}
.oto2-flinks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	font: 700 12px/1.4 var(--oto2-ui);
}
.oto2-flinks a {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.oto2-fright {
	display: flex;
	align-items: center;
	gap: 12px;
}
.oto2-follow {
	display: flex;
	gap: 12px;
}
.oto2-follow .oto-follow__icon img {
	display: block;
	width: 38px;
	height: 38px;
}
.oto2-top {
	margin-left: auto;
}
.oto2-fright .oto2-top {
	padding: 9px 14px;
	border: 2px solid var(--oto2-ink);
	border-radius: 99px;
	background: #fff;
	font: 900 12px/1 var(--oto2-ui);
}
.oto2-fband {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin-top: 26px;
	padding: 16px 18px;
	border: 2px solid var(--oto2-ink);
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--oto2-shadow);
}
.oto2-flogo {
	display: block;
	height: 26px;
	width: auto;
}
.oto2-flogo-text {
	font: 900 16px/1 var(--oto2-ui);
}
.oto2-ftagline {
	margin: 0;
	font: 900 13px/1 var(--oto2-ui);
}
.oto2-fcopy {
	font: 700 11px/1 var(--oto2-en);
	color: #6b6661;
}

/* =========================================================
   タブレット（720〜1023px）
   ========================================================= */
@media (min-width: 720px) and (max-width: 1099px) {
	:root {
		--oto2-pad: 28px;
	}
	.oto2-nb {
		grid-template-columns: 1fr 1fr;
		gap: 20px;
		align-items: start;
	}
	.oto2-mb {
		width: 360px;
	}
	.oto2-bns {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	.oto2-fcols {
		grid-template-columns: repeat(4, 1fr);
	}
	.oto2-tg--pc {
		display: inline-flex;
	}
	.oto2-sub-short {
		display: none;
	}
}

/* =========================================================
   PC（1024px〜）
   ========================================================= */
@media (min-width: 1024px) and (max-width: 1099px) {
	:root {
		--oto2-pad: 40px;
	}
	.oto2-header__bar {
		padding: 12px 40px;
	}
	.oto2-header__logo {
		height: 30px;
	}
	.oto2-header__nav {
		display: flex;
	}
	.oto2-header__contact {
		padding: 12px 20px;
		font-size: 13px;
	}

	.oto2-hero {
		padding: 36px 40px 44px;
	}
	.oto2-hero__card {
		padding: 30px 36px 32px;
	}
	.oto2-hero__lead {
		margin-bottom: 8px;
	}
	.oto2-hero__h1 {
		font-size: 44px;
		white-space: nowrap;
	}
	.oto2-hero__h1 span {
		display: inline-block;
		vertical-align: middle;
	}
	.oto2-mk {
		margin: 0 0 0 0.1em;
	}
	.oto2-hero__sub {
		margin-top: 12px;
		font-size: 14px;
	}

	.oto2-cat {
		padding: 48px 0 54px;
	}
	/* 横長バナー：左に色ブロック、右にサブ文と小カテゴリ */
	.oto2-bn {
		flex-direction: row;
		align-items: stretch;
		gap: 0;
		padding: 0;
		overflow: hidden;
		background: #fff;
		color: var(--oto2-ink);
		box-shadow: var(--oto2-shadow);
	}
	.oto2-bn__l {
		flex: 0 0 130px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 16px 14px;
		background: var(--c);
		color: var(--on);
	}
	.oto2-bn__l b {
		margin-top: 6px;
	}
	.oto2-bn__r {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 8px;
		padding: 14px 54px 14px 16px;
	}
	.oto2-bn__r em {
		display: block;
	}
	.oto2-bn__p {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.oto2-pl i {
		display: inline;
	}
	.oto2-go {
		top: 50%;
		right: 14px;
		width: 30px;
		height: 30px;
		margin-top: -15px;
		background: var(--c);
		color: var(--on);
	}

	.oto2-pickup {
		padding: 48px 0 40px;
	}
	.oto2-pw {
		flex-basis: 280px;
	}
	.oto2-track {
		padding-left: max(var(--oto2-pad), calc((100vw - 860px) / 2));
		padding-right: max(var(--oto2-pad), calc((100vw - 860px) / 2));
		scroll-padding-left: max(var(--oto2-pad), calc((100vw - 860px) / 2));
	}

	.oto2-new {
		padding: 48px 0 54px;
	}
	.oto2-nb {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
		align-items: start;
	}
	.oto2-nb__grid {
		gap: 16px;
	}
	.oto2-mb {
		width: 360px;
	}

	.oto2-footer {
		padding: 48px var(--oto2-pad) 34px;
	}
	.oto2-fcols {
		gap: 24px;
	}
	.oto2-frow {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.oto2-fright .oto2-top {
		margin-left: 8px;
	}
	.oto2-flogo {
		height: 32px;
	}
	.oto2-fcopy {
		margin-left: auto;
	}
}

/* 狭いSP（〜520px）：フッターのサブリンクは短縮表記 */
@media (max-width: 520px) {
	.oto2-sub-full {
		display: none;
	}
	.oto2-fcard a::after {
		display: none;
	}
	.oto2-sub-short {
		display: inline;
	}
}

@media (prefers-reduced-motion: reduce) {
	.oto2-seg i,
	.oto2-mb {
		transition: none;
	}
	.oto2-mb:hover,
	.oto2-mb:focus-visible {
		transform: none;
	}
	.oto2-track {
		scroll-behavior: auto;
	}
}

/* =========================================================
   一覧ページ（カテゴリー・タグ・日付）— 見出しは色ベタの帯（H2案）
   ========================================================= */
.oto2-c-ink { --c: #201e1d; --cd: #201e1d; --on: #fff; }

.oto2-archive {
	font-family: var(--oto2-ui);
	color: var(--oto2-ink);
}
.oto2-archive * {
	box-sizing: border-box;
}
.oto2-archive a {
	color: inherit;
	text-decoration: none;
}

/* パンくず：背景・柄なしの白。上下の余白は同じ（14px）。 */
.oto2-bc {
	background: #fff;
}
.oto2-bc .oto-breadcrumb {
	padding: 14px 0;
	font: 700 11px/1.4 var(--oto2-ui);
	color: #6b6661;
}
.oto2-bc .oto-breadcrumb a {
	color: #6b6661;
}
.oto2-bc .oto-breadcrumb a:hover,
.oto2-bc .oto-breadcrumb a:focus-visible {
	color: var(--oto2-ink);
	text-decoration: underline;
}
.oto2-bc .oto-breadcrumb__current {
	color: var(--oto2-ink);
}
.oto2-bc .oto-breadcrumb__sep {
	padding: 0 8px;
	color: #b3b3b3;
}

.oto2-ahead {
	padding: 26px 0 30px;
	background-color: var(--c);
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.16) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
	background-size: var(--oto2-grid) var(--oto2-grid);
	border-top: 2px solid var(--oto2-ink);
	border-bottom: 2px solid var(--oto2-ink);
	color: var(--on);
}
.oto2-ahead__en {
	margin: 0 0 8px;
	font: 900 11px/1 var(--oto2-en);
	letter-spacing: 0.18em;
	opacity: 0.9;
}
.oto2-ahead__title {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: 900 36px/1.15 var(--oto2-ui);
	color: inherit;
}
.oto2-ahead__desc {
	max-width: 60ch;
	margin-top: 12px;
	font: 700 13px/1.8 var(--oto2-ui);
}
.oto2-ahead__desc p {
	margin: 0;
}

.oto2-alist {
	padding: 22px 0 34px;
}
.oto2-tc {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 22px;
}
.oto2-tc__label {
	margin-right: 4px;
	font: 900 11px/1 var(--oto2-en);
	letter-spacing: 0.16em;
}
.oto2-tch {
	display: inline-flex;
	gap: 2px;
	padding: 7px 12px;
	border: 2px solid var(--oto2-ink);
	border-radius: 99px;
	background: #fff;
	font: 900 12px/1 var(--oto2-ui);
}
.oto2-tch i {
	font-style: normal;
	color: #8a857f;
}
.oto2-tch.is-on {
	background: var(--c);
	color: var(--on);
}
.oto2-tch:hover,
.oto2-tch:focus-visible {
	background: var(--oto2-ink);
	color: #fff;
}
.oto2-lg {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 12px;
}
.oto2-lc {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 2px solid var(--oto2-ink);
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--oto2-shadow);
	color: var(--oto2-ink);
}
.oto2-lc__tx {
	display: block;
	padding: 11px 12px 13px;
}
.oto2-lc__title {
	display: -webkit-box;
	overflow: hidden;
	font: 900 12.5px/1.55 var(--oto2-ui);
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.oto2-lc__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 8px;
	margin-top: 8px;
	font: 700 11px/1.4 var(--oto2-ui);
	color: var(--cd);
}
.oto2-empty {
	margin: 0;
	font: 700 14px/1.8 var(--oto2-ui);
}
.oto2-pg {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 34px;
}
.oto2-pg .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 10px;
	border: 2px solid var(--oto2-ink);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 3px 0 rgba(32, 30, 29, 0.14);
	font: 900 14px/1 var(--oto2-ui);
}
.oto2-pg .page-numbers.current {
	background: var(--c);
	color: var(--on);
}
.oto2-pg .page-numbers.dots {
	min-width: 0;
	padding: 0 2px;
	border: 0;
	background: none;
	box-shadow: none;
}
.oto2-pg .page-numbers.prev,
.oto2-pg .page-numbers.next {
	padding: 0 16px;
}
.oto2-pg a.page-numbers:hover,
.oto2-pg a.page-numbers:focus-visible {
	background: var(--oto2-ink);
	color: #fff;
}

@media (min-width: 1024px) and (max-width: 1099px) {
	.oto2-ahead {
		padding: 40px 0 44px;
	}
	.oto2-ahead__title {
		font-size: 48px;
	}
	.oto2-ahead__desc {
		font-size: 14px;
	}
	.oto2-alist {
		padding: 28px 0 54px;
	}
	.oto2-lg {
		grid-template-columns: repeat(3, 1fr);
		gap: 22px 20px;
	}
	.oto2-lc__title {
		font-size: 14px;
	}
}

/* =========================================================
   記事ページ（1カラム・見出しは色ベタの帯＋アイキャッチが重なる＝P1案）
   ========================================================= */
.oto2-single {
	font-family: var(--oto2-ui);
	color: var(--oto2-ink);
	background-color: #fff;
	background-image: radial-gradient(rgba(32, 30, 29, 0.26) 1.2px, transparent 1.4px);
	background-size: var(--oto2-grid) var(--oto2-grid);
	background-position: calc(var(--oto2-grid) / 2) calc(var(--oto2-grid) / 2);
}
.oto2-single * {
	box-sizing: border-box;
}
:where(.oto2-single) a {
	color: inherit;
}
/* 旧記事CSSの白い面・幅の指定を外す（本文だけを白いカードにする） */
.oto2-single .oto-article {
	max-width: none;
	margin: 0;
	background: none;
}
.oto2-single .oto-article-body {
	padding: 0;
}

.oto2-ahead--article {
	padding: 26px 0 78px;
}
.oto2-ameta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-bottom: 14px;
}
.oto2-ctab {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 12px;
	border: 2px solid var(--oto2-ink);
	border-radius: 99px;
	background: #fff;
	color: var(--oto2-ink);
	font: 900 12px/1 var(--oto2-ui);
}
.oto2-adate {
	font: 700 12px/1 var(--oto2-en);
	letter-spacing: 0.06em;
}
.oto2-adnotice {
	font: 700 11px/1 var(--oto2-ui);
	opacity: 0.9;
}
.oto2-atitle {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: 900 24px/1.45 var(--oto2-ui);
	color: inherit;
	text-wrap: pretty;
}
.oto2-atags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
}
.oto2-atags__label {
	margin-right: 4px;
	font: 900 11px/1 var(--oto2-en);
	letter-spacing: 0.16em;
}
.oto2-tch--plain {
	color: var(--oto2-ink);
}
.oto2-tch--plain i {
	color: var(--cd);
}
.oto2-eyew {
	margin-top: -52px;
	position: relative;
	z-index: 1;
}
.oto2-eye {
	overflow: hidden;
	border: 2px solid var(--oto2-ink);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 8px 0 rgba(32, 30, 29, 0.16);
}
.oto2-eye img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.oto2-art {
	padding: 30px 0 40px;
	margin-top: -52px;
	padding-top: 82px;
}

/* 本文：白いカード（旧スタイルの部品はそのまま中に入る） */
.oto2-single .oto-entry-body {
	max-width: none;
	margin: 0;
	padding: 28px 18px 34px;
	background: #fff;
	border: 2px solid var(--oto2-ink);
	border-radius: 18px;
	box-shadow: 0 8px 0 rgba(32, 30, 29, 0.14);
	--pad-x: 18px;
}

/* SHARE */
.oto2-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 40px;
	padding: 18px;
	background: #fff;
	border: 2px solid var(--oto2-ink);
	border-radius: 16px;
	box-shadow: var(--oto2-shadow);
}
.oto2-share__label {
	margin-right: 4px;
	font: 900 11px/1 var(--oto2-en);
	letter-spacing: 0.16em;
}
.oto2-shb {
	padding: 9px 16px;
	border: 2px solid var(--oto2-ink);
	border-radius: 99px;
	background: #fff;
	color: var(--oto2-ink);
	font: 900 12px/1 var(--oto2-ui);
	cursor: pointer;
}
.oto2-shb--x {
	background: var(--oto2-ink);
	color: #fff;
}
.oto2-shb:hover,
.oto2-shb:focus-visible {
	background: var(--c);
	color: var(--on);
}
.oto2-share__note {
	flex-basis: 100%;
	margin: 4px 0 0;
	font: 700 12px/1.6 var(--oto2-ui);
	color: #5c5853;
}

/* RELATED */
.oto2-rel {
	margin-top: 44px;
}
.oto2-rel__h2 {
	margin: 8px 0 18px;
	padding: 0;
	border: 0;
	background: none;
	font: 900 26px/1.2 var(--oto2-ui);
	color: inherit;
}
.oto2-rel__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

@media (min-width: 1024px) and (max-width: 1099px) {
	.oto2-ahead--article {
		padding: 40px 0 100px;
	}
	.oto2-atitle {
		font-size: 34px;
		line-height: 1.4;
	}
	.oto2-eyew {
		margin-top: -76px;
	}
	.oto2-art {
		margin-top: -76px;
		padding: 100px 0 60px;
	}
	.oto2-wrap--read {
		max-width: 940px; /* 860px + 左右のpadding */
	}
	.oto2-single .oto-entry-body {
		padding: 40px 44px 48px;
		--pad-x: 0px;
	}
	.oto2-rel__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 18px;
	}
}

/* 記事ページ（PC）：パンくず・見出しの帯・アイキャッチ・フッターの幅を本文（860px）にそろえる */
@media (min-width: 1024px) and (max-width: 1099px) {
	.oto2-single .oto2-wrap {
		max-width: 940px; /* 860px + 左右のpadding 40px */
	}
	body.single .oto2-footer {
		max-width: 940px;
	}
}

/* =========================================================
   検索ボックス・固定ページ・404 など
   ========================================================= */
.oto2-sform {
	margin-bottom: 22px;
}
.oto2-archive .oto-search-form {
	display: flex;
	gap: 10px;
	max-width: 560px;
	margin: 0;
}
.oto2-archive .oto-search-form__field {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 18px;
	border: 2px solid var(--oto2-ink);
	border-radius: 99px;
	background: #fff;
	color: var(--oto2-ink);
	font: 700 14px/1 var(--oto2-ui);
	box-shadow: 0 4px 0 rgba(32, 30, 29, 0.14);
}
.oto2-archive .oto-search-form__field:focus-visible {
	outline: 3px solid var(--oto2-hotel);
	outline-offset: 2px;
}
.oto2-archive .oto-search-form__submit {
	height: 48px;
	padding: 0 22px;
	border: 2px solid var(--oto2-ink);
	border-radius: 99px;
	background: var(--oto2-ink);
	color: #fff;
	font: 900 14px/1 var(--oto2-ui);
	cursor: pointer;
}
.oto2-archive .oto-search-form__submit:hover,
.oto2-archive .oto-search-form__submit:focus-visible {
	background: var(--oto2-oshi);
	border-color: var(--oto2-ink);
}
.oto2-sh--list {
	margin: 32px 0 18px;
}
.oto2-sh--list .oto2-sh__h2 {
	margin-top: 8px;
}
/* 固定ページ：見出しの帯は、タイトルだけの低い帯にする */
.oto2-ahead--page {
	padding: 26px 0 30px;
}
.oto2-art--page {
	margin-top: 0;
	padding-top: 30px;
}
@media (min-width: 1024px) and (max-width: 1099px) {
	.oto2-ahead--page {
		padding: 40px 0 44px;
	}
	.oto2-art--page {
		margin-top: 0;
		padding-top: 40px;
	}
}


/* =========================================================
   PC（1100px〜）：全ページ共通。中央560pxの列＋左右サイド情報
   --- 720px/1024px用の指定は max-width:1099px に限定してあるので、
       この幅では列の中身はSP同様の見た目になる。
   ========================================================= */
.oto2-sidel,
.oto2-sider {
	display: none;
}
@media (min-width: 1100px) {
	body.oto2-side {
		--oto2-pad: 18px;
		background: #eceae5;
	}
	body.oto2-side .oto2-header,
	body.oto2-side #oto-content,
	body.oto2-side .oto2-footer-wrap {
		width: 560px;
		margin-left: auto;
		margin-right: auto;
		border-left: 2px solid var(--oto2-ink);
		border-right: 2px solid var(--oto2-ink);
	}
	body.oto2-side #oto-content { background: #fff; }
	body.oto2-side .oto2-header__nav { display: none; }
	/* カテゴリバナーのタグは横1行 */
	body.oto2-side .oto2-bn__p { flex-direction: row; flex-wrap: nowrap; gap: 6px; }

	/* 左右サイド（画面に固定） */
	body.oto2-side .oto2-sidel,
	body.oto2-side .oto2-sider {
		display: flex;
		position: fixed;
		top: 0;
		bottom: 0;
		width: calc((100vw - 560px) / 2 - 2px);
		padding-top: 64px;
		overflow-x: hidden;
		overflow-y: auto;
		padding-bottom: 32px;
		scrollbar-width: none;
		font-family: var(--oto2-ui);
		color: var(--oto2-ink);
		z-index: 5;
	}
	body.oto2-side .oto2-sidel {
		left: 0;
		flex-direction: column;
		align-items: flex-end;
		gap: 22px;
		padding-right: clamp(24px, 4vw, 56px);
	}
	body.oto2-side .oto2-sider {
		right: 0;
		flex-direction: column;
		align-items: flex-start;
		padding-left: clamp(24px, 4vw, 56px);
	}
	.oto2-sidel a, .oto2-sider a { color: inherit; text-decoration: none; }
	.oto2-sidel__img { display: block; width: 230px; max-width: 100%; height: auto; }
	.oto2-sidel__copy { margin: 0; text-align: right; font: 900 24px/1.5 var(--oto2-ui); }
	.oto2-sidel__copy .oto2-mk { display: inline-block; margin-top: 4px; }
	.oto2-sidel__nav { display: grid; gap: 12px; justify-items: end; }
	.oto2-sidel__nav a {
		display: inline-flex;
		align-items: center;
		padding: 6px 0 7px;
		border-bottom: 4px solid var(--c);
		font: 900 15px/1 var(--oto2-ui);
	}
	.oto2-sidel__nav a::after { content: "\203A"; margin-left: 8px; }
	.oto2-sidel__contact {
		display: inline-flex;
		gap: 6px;
		padding: 13px 22px;
		border-radius: 99px;
		background: var(--oto2-ink);
		color: #fff !important;
		font: 900 13px/1 var(--oto2-ui);
	}
	.oto2-sider__h { margin: 0 0 14px; font: 900 11px/1 var(--oto2-en); letter-spacing: 0.2em; }
	.oto2-sider__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: 250px; max-width: 100%; }
	.oto2-sider__list a {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 14px;
		border: 2px solid transparent;
		border-radius: 12px;
		font: 700 14px/1.4 var(--oto2-ui);
		color: #5c5853;
	}
	.oto2-sider__list b { font: 900 12px/1 var(--oto2-en); color: #8a857f; }
	.oto2-sider__list a:hover { color: var(--oto2-ink); }
	.oto2-sider__list a.is-on {
		background: #fff;
		border-color: var(--oto2-ink);
		color: var(--oto2-ink);
		box-shadow: 0 4px 0 rgba(32, 30, 29, 0.14);
	}
	.oto2-sider__list a.is-on b { color: var(--oto2-oshi); }
}


/* TOP：ヒーローの上下の黒い細い帯（メリハリ用） */
.oto2-strip {
	height: 16px;
	background: var(--oto2-ink);
}


/* TOP：ヘッダー下の帯＝黒地の方眼（文字なし。黒いセクションと同じ方眼） */
.oto2-strip--grid {
	height: 32px;
	background-color: var(--oto2-dark);
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
	background-size: var(--oto2-grid) var(--oto2-grid);
}

/* TOP：ヒーロー下の人気タグの帯（黄色の地。横にスクロールできる1行） */
.oto2-strip--tags {
	height: auto;
	padding: 12px 0;
	border-top: 2px solid var(--oto2-ink);
	background: var(--oto2-hotel);
}
.oto2-strip--tags .oto2-tgs {
	flex-wrap: nowrap;
	gap: 8px;
	padding: 0 var(--oto2-pad);
	overflow-x: auto;
	scrollbar-width: none;
}
.oto2-strip--tags .oto2-tgs::-webkit-scrollbar {
	display: none;
}
.oto2-strip--tags .oto2-tg {
	flex: none;
	white-space: nowrap;
}


/* ヘッダー：ロゴとお問い合わせを、黒枠・角丸のカードに入れる（白い方眼の地の上） */
.oto2-header {
	padding: 12px var(--oto2-pad);
	background-color: #fff;
	background-image:
		linear-gradient(to right, rgba(32, 30, 29, 0.07) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(32, 30, 29, 0.07) 1px, transparent 1px);
	background-size: var(--oto2-grid) var(--oto2-grid);
}
.oto2-header__bar {
	max-width: 860px;
	padding: 10px 16px;
	border: 2px solid var(--oto2-ink);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 6px 0 rgba(32, 30, 29, 0.14);
}
@media (min-width: 1024px) and (max-width: 1099px) {
	.oto2-header__bar {
		padding: 12px 22px;
	}
}

/* TOP：ヘッダーとヒーローの境界線をなくし、方眼の背景をつなげる
   （ヘッダーの高さを方眼の整数倍＝80px にして、線の位置をヒーローとそろえる） */
body.home .oto2-header {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: 80px;
	padding-top: 0;
	padding-bottom: 0;
	border-bottom: 0;
}
body.home .oto2-header__bar {
	width: 100%;
}

/* 左サイドのロゴ：画像の白い背景を、乗算で、灰色の地に溶け込ませる（透過PNGがなくても白い四角が出ない） */
.oto2-sidel__img {
	mix-blend-mode: multiply;
}
/* 乗算の相手（背景）が必要なので、ロゴのリンクに、サイドの背景と同じ灰色を付ける（固定配置のため、ページの背景とは混ざらない） */
.oto2-sidel__logo {
	display: block;
	background: #eceae5;
}