/* =====================================================================
 * めしハプ メインスタイル — デスクトップ版（Figma: meshihapu_re_web_v7 準拠）
 * デスクトップファースト。〜960px でモバイル折返し。
 * ===================================================================== */

:root {
	--c-pink:        #ff3ba0;
	--c-pink-bright: #ff5fb8;
	--c-pink-deep:   #d6248a;
	--c-magenta:     #ff2e9a;
	--c-purple:      #9b3df0;
	--c-purple-deep: #6a1fb5;
	--c-cyan:        #28e6ff;
	--c-yellow:      #ffd23f;
	--c-white:       #ffffff;
	--c-ink:         #2a0f33;

	--bg-page:
		radial-gradient(70% 40% at 92% 5%,  rgba(40,230,255,.34) 0%, rgba(40,230,255,0) 38%),
		radial-gradient(60% 38% at 5% 24%,  rgba(150,61,240,.30) 0%, rgba(150,61,240,0) 42%),
		linear-gradient(168deg, #ff5cc0 0%, #e83bb6 32%, #d23bc4 58%, #c23bd2 78%, #b23ce0 100%);
	--grad-pink-purple: linear-gradient(135deg, var(--c-pink) 0%, var(--c-purple) 100%);
	--grad-btn:         linear-gradient(135deg, #ff4fae 0%, #c23be0 100%);

	--r-pill: 999px;
	--r-card: 18px;
	--r-sm:   10px;

	--wrap: 1280px;       /* コンテンツ最大幅（1920デザインを縮約） */
	--pad:  24px;

	--glow-pink: 0 0 16px rgba(255,59,160,.6);
	--glow-cyan: 0 0 14px rgba(40,230,255,.65);
	--shadow:    0 10px 28px rgba(60,0,80,.28);

	--font-round: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
	--font-body:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	color: var(--c-white);
	font-family: var(--font-body);
	line-height: 1.7;
	background-color: #6a2bb0;
	background-image: url('../img/bg-page.jpg');
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100% 100%;   /* ページ全体に縦グラデ(ピンク→シアン)をマップ */
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

/* 汎用 */
.tag {
	display: inline-block;
	padding: 2px 10px;
	border-radius: var(--r-pill);
	background: rgba(255,255,255,.20);
	border: 1px solid rgba(255,255,255,.45);
	font-size: .68rem;
	font-weight: 500;
	white-space: nowrap;
}
.stars { color: var(--c-yellow); font-weight: 800; white-space: nowrap; font-size: .95rem; }
.more-btn {
	display: block;
	width: max-content;
	margin-top: 14px;
	padding: 9px 28px;
	border-radius: var(--r-pill);
	background: rgba(255,255,255,.92);
	color: var(--c-pink-deep);
	font-family: var(--font-round);
	font-weight: 700;
	font-size: .9rem;
	box-shadow: 0 6px 16px rgba(120,0,90,.3);
}
.more-btn--center { margin-inline: auto; }

/* セクション見出し */
.sec-head { display: flex; align-items: center; gap: 10px; margin: 44px 0 18px; }
.head-ico { width: 34px; height: 29px; flex: none; color: #ff28c8; filter: drop-shadow(0 0 6px rgba(255,40,200,.7)); }
.sec-head__t {
	margin: 0;
	font-family: var(--font-round);
	font-weight: 800;
	font-size: 1.7rem;
	letter-spacing: .02em;
	text-shadow: 0 2px 8px rgba(120,0,90,.4);
}
.sec-head__t .yt { color: #fff; }
.sec-head__more { margin-left: auto; font-size: .85rem; opacity: .9; }

/* =====================================================================
 * ヘッダー
 * ===================================================================== */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: linear-gradient(90deg, #fc4895 0%, #ec56a8 50%, #f164a6 100%);
	border-bottom: 1px solid rgba(255,255,255,.3);
	box-shadow: 0 4px 18px rgba(60,0,80,.3);
}
.site-header__inner { display: flex; align-items: center; gap: 16px; height: 68px; }
.site-header__logo {
	font-family: var(--font-round); font-weight: 900; font-size: 1.7rem; color: #fff;
	text-shadow: 0 2px 6px rgba(120,0,80,.5); flex: none;
}
.site-header__sub { font-size: .82rem; opacity: .95; }
.site-header__nav { margin-left: auto; }
.gnav { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; }
.gnav a { font-size: .9rem; font-weight: 500; opacity: .95; }
.gnav a:hover { opacity: 1; text-decoration: underline; }

/* =====================================================================
 * ヒーロー（2カラム）
 * ===================================================================== */
.hero { position: relative; isolation: isolate; padding-bottom: 70px; overflow: hidden; }
.hero__bg {
	position: absolute; inset: 0; z-index: -2;
	background-color: #2a0030; background-position: 70% 35%; background-size: cover; background-repeat: no-repeat;
}
.hero__bg::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(96deg, rgba(214,36,138,.86) 0%, rgba(214,36,138,.55) 30%, rgba(150,40,170,.2) 55%, rgba(60,20,90,0) 76%),
		linear-gradient(180deg, rgba(60,10,80,.15), rgba(40,0,60,.45));
}
.hero__inner { display: grid; grid-template-columns: 1.25fr 1fr; gap: 30px; padding-top: 38px; min-height: 560px; }
.hero__left { align-self: start; }
.hero__title {
	font-family: var(--font-round); font-weight: 900;
	font-size: clamp(2.6rem, 4.4vw, 3.9rem); line-height: 1.16; margin: 0 0 18px;
	background: linear-gradient(180deg, #fff 0%, #ffd9f0 55%, #ff8fd0 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	text-shadow: 0 0 30px rgba(255,90,180,.5);
}
.hero__title .em { background: linear-gradient(180deg,#fff,#ffe27a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lead { font-weight: 500; line-height: 1.8; margin: 0 0 22px; text-shadow: 0 1px 6px rgba(0,0,0,.5); }

/* 検索 */
.search { margin-bottom: 16px; }
.search__row { display: flex; gap: 10px; }
.search__select, .search__input {
	height: 48px; border: 1px solid rgba(255,255,255,.55); border-radius: 14px;
	background: rgba(255,255,255,.16); color: #fff; font-size: .95rem;
	display: flex; align-items: center; padding: 0 18px; backdrop-filter: blur(6px);
}
.search__input::placeholder { color: rgba(255,255,255,.78); }
.search__select { flex: 0 0 200px; gap: 6px; justify-content: flex-start; }
.search__select .caret { margin-left: auto; color: #fff; }
.search__field { flex: 1 1 auto; min-width: 0; position: relative; display: flex; align-items: center; }
.search__ico { position: absolute; left: 16px; width: 18px; height: 18px; color: #fff; pointer-events: none; }
.search__field .search__input { flex: 1 1 auto; padding-left: 44px; }
.search__input { flex: 1 1 auto; min-width: 0; }
.search__btn {
	flex: none; padding: 0 30px; border: none; border-radius: 14px;
	background: linear-gradient(135deg, #ff5cc0, #f24abc); color: #fff; font-family: var(--font-round); font-weight: 800;
	box-shadow: var(--glow-pink);
}
.areas { display: flex; gap: 12px; align-items: baseline; font-size: .9rem; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.28); }
.areas__label { font-family: var(--font-round); font-weight: 700; white-space: nowrap; }
.areas__list { font-weight: 500; }

/* ハッシュタグ箱 */
.hashbox { background: none; border: none; padding: 0; box-shadow: none; }
.hashbox__label { font-family: var(--font-round); font-weight: 700; font-size: .82rem; margin-bottom: 8px; }
.hashbox__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.hchip {
	display: flex; align-items: center; justify-content: space-between; gap: 6px;
	padding: 4px 10px; border-radius: 8px; white-space: nowrap;
	background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.4); color: #fff; font-weight: 700; font-size: .66rem;
}
.hchip__n { color: rgba(255,255,255,.85); font-size: .64rem; }
@media (max-width: 900px) { .hashbox__grid { grid-template-columns: repeat(3, 1fr); } }
.hero__search-panel { max-width: 720px; padding: 20px 22px; border-radius: 22px;
	background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.4); box-shadow: var(--shadow); backdrop-filter: blur(12px); }

/* めしあクレジット（ロゴ＋説明を横一列・下に区切り線） */
.hero__right { position: relative; align-self: start; padding-top: 26px; }
.hero__credit { display: flex; align-items: flex-end; gap: 22px;
	border-bottom: 1.5px solid rgba(255,255,255,.65); padding-bottom: 12px;
	text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.hero__credit-name { flex: none; line-height: 1; }
.hero__title img { width: clamp(360px, 42vw, 580px); height: auto; display: block; }
.hero__credit-name img { width: clamp(140px, 12vw, 172px); height: auto; }
.hero__credit-desc { font-size: .78rem; opacity: .96; padding-bottom: 6px; white-space: nowrap; }

/* カテゴリ円（大きい楕円・マゼンタ寄り） */
.cats { display: flex; justify-content: flex-end; gap: 26px; margin-top: 28px; position: relative; z-index: 3; }
.cat {
	width: 152px; height: 168px; border-radius: 50%;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
	background: linear-gradient(180deg, #ff64c6 0%, #ec2398 55%, #d61a8e 100%);
	border: 2px solid rgba(255,255,255,.6);
	box-shadow: 0 0 22px rgba(255,40,160,.6), inset 0 0 22px rgba(255,255,255,.18);
	font-family: var(--font-round); font-weight: 800; font-size: .95rem; color: #fff;
}
.cat__ico { width: 48px; height: 48px; object-fit: contain; filter: brightness(0) invert(1); }

/* =====================================================================
 * feature: YouTube+ランキング(左) / PICK UP(右)
 * ===================================================================== */
.feature { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; }

/* YouTube */
.yt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.yt-card { border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 16/10; background: #2a0030; box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,.18); }
.yt-card img { width: 100%; height: 100%; object-fit: cover; }

/* ランキング タブ */
.rank-tabs { margin-left: auto; display: inline-flex; padding: 4px; border-radius: var(--r-pill); background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.4); }
.rank-tab { border: none; background: transparent; color: #fff; padding: 6px 22px; border-radius: var(--r-pill); font-family: var(--font-round); font-weight: 700; font-size: .85rem; }
.rank-tab.is-active { background: linear-gradient(135deg,#fff,#ffd9f0); color: var(--c-purple-deep); }

/* TOP3 */
.top3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.top3-card {
	position: relative; border-radius: var(--r-card); overflow: hidden;
	background: rgba(40,8,60,.5); border: 2px solid rgba(255,255,255,.5); box-shadow: var(--shadow);
	display: flex; flex-direction: column;
}
.top3-card.rank-1 { border-color: var(--c-yellow); box-shadow: 0 0 18px rgba(255,210,63,.6); }
.top3-card.rank-2 { border-color: #cfd6e6; }
.top3-card.rank-3 { border-color: #e8a06a; }
.top3-card__img { aspect-ratio: 16/9; background: #1a0726 center/cover; }
.top3-card__num {
	position: absolute; top: 6px; left: 10px;
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	font-family: var(--font-round); font-weight: 900; font-size: 2.4rem; line-height: 1; color: var(--c-yellow);
	filter: drop-shadow(0 2px 6px rgba(0,0,0,.7));
}
.top3-card__delta { font-size: 1rem; line-height: 1; }
.rank-1 .top3-card__delta { color: var(--c-magenta); }
.rank-2 .top3-card__delta { color: var(--c-cyan); }
.rank-3 .top3-card__delta { color: #4a8cff; }
.top3-card__crown { position: absolute; top: -2px; left: 8px; z-index: 2; font-size: 1.1rem; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.top3-card__body { padding: 12px 14px; display: grid; gap: 8px; }
.top3-card__name { font-family: var(--font-round); font-weight: 800; font-size: 1.05rem; }
.top3-card__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.top3-card__foot { display: flex; align-items: center; justify-content: space-between; }
.more-pill { padding: 5px 14px; border-radius: var(--r-pill); background: rgba(255,255,255,.9); color: var(--c-pink-deep); font-weight: 700; font-size: .72rem; }

/* 4〜13位 2列 */
.ranklist {
	display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px;
	background: linear-gradient(135deg, rgba(255,70,180,.92) 0%, rgba(210,45,170,.86) 50%, rgba(170,55,210,.85) 100%);
	border: 1px solid rgba(255,255,255,.55); border-radius: var(--r-card);
	padding: 8px 22px; box-shadow: var(--glow-pink), var(--shadow);
}
.rrow { display: flex; align-items: center; gap: 12px; padding: 13px 4px; border-bottom: 1px solid rgba(255,255,255,.28); }
.rrow__num { font-family: var(--font-round); font-weight: 900; font-size: 1.4rem; color: #fff; flex: none; width: 26px; text-align: center; }
.rrow__info { flex: 1 1 auto; min-width: 0; }
.rrow__name { font-family: var(--font-round); font-weight: 800; font-size: 1rem; }
.rrow__tags { display: flex; gap: 5px; margin-top: 2px; flex-wrap: wrap; }
.rrow__arrow { flex: none; width: 32px; height: 32px; display: grid; place-content: center; border-radius: 50%; background: rgba(255,255,255,.85); color: var(--c-pink-deep); }

/* PICK UP レール */
.feature__side { background: rgba(40,8,60,.45); border: 1px solid rgba(255,255,255,.3); border-radius: var(--r-card); padding: 14px; box-shadow: var(--shadow); }
.pickup-head { font-family: var(--font-round); font-weight: 800; font-size: 1.05rem; text-align: center; margin-bottom: 10px; text-shadow: var(--glow-pink); }
.pickup-tabs { text-align: center; margin: 6px 0 10px; }
.pickup-tab { display: inline-block; padding: 4px 22px; border-radius: var(--r-pill); background: linear-gradient(135deg,#fff,#ffd9f0); color: var(--c-purple-deep); font-family: var(--font-round); font-weight: 700; font-size: .82rem; }
.ev-card { display: block; border-radius: var(--r-sm); overflow: hidden; margin-bottom: 12px; background: rgba(20,0,30,.4); border: 1px solid rgba(255,255,255,.2); }
.ev-card__img { aspect-ratio: 16/9; background: #1a0726 center/cover; }
.ev-card__cap { padding: 8px 10px; font-size: .8rem; font-weight: 600; }
.ev-card__cap strong { display: block; font-family: var(--font-round); font-weight: 800; font-size: .9rem; }
.feature__side .more-btn { margin-inline: auto; }

/* =====================================================================
 * エリア特集
 * ===================================================================== */
.spot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.spot {
	display: block; border-radius: var(--r-card); overflow: hidden;
	box-shadow: var(--shadow), 0 0 0 1px rgba(40,230,255,.4);
	transition: transform .2s;
}
.spot:hover { transform: translateY(-3px); }
.spot img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 540 / 250; }

/* =====================================================================
 * picks: 推し記事(左) / 協賛(右)
 * ===================================================================== */
.picks { display: grid; grid-template-columns: 1fr 230px; gap: 28px; align-items: start; }
.art-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.art {
	border-radius: var(--r-card); overflow: hidden; background: rgba(255,255,255,.1);
	border: 1px solid rgba(40,230,255,.4); box-shadow: var(--glow-cyan); display: flex; flex-direction: column;
}
.art__thumb { aspect-ratio: 4/3; background: #2a0030 center/cover; }
.art__body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.art__title { font-family: var(--font-round); font-weight: 800; font-size: 1rem; margin: 0; }
.art__date { font-size: .7rem; opacity: .8; }
.art__exc { font-size: .78rem; margin: 0; opacity: .95; flex: 1 1 auto; }
.art__tags { display: flex; gap: 6px; flex-wrap: wrap; }

/* 協賛 */
.picks__side { display: grid; gap: 14px; align-content: start; }
.spon-head { font-family: var(--font-round); font-weight: 800; text-align: center; padding: 6px; }
.spon { display: grid; place-content: center; min-height: 92px; border-radius: var(--r-card); font-family: var(--font-round); font-weight: 800; font-size: 1.2rem; text-align: center; box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,.3); }
.spon--scarlet { background: linear-gradient(135deg,#2a0030,#5a1040); }
.spon--cure    { background: linear-gradient(135deg,#ff5fb8,#ff2e9a); }
.spon--aiseki  { background: linear-gradient(135deg,#1a0726,#3a1050); }
.spon--recruit { background: var(--grad-btn); line-height: 1.3; }

/* =====================================================================
 * お問い合わせ
 * ===================================================================== */
.contact { max-width: 860px; margin-inline: auto; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4); border-radius: var(--r-card); padding: 34px 40px; box-shadow: var(--shadow); backdrop-filter: blur(8px); }
.contact__field { display: block; margin-bottom: 20px; }
.contact__field > span { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 8px; }
.contact__field input, .contact__field textarea { width: 100%; border: none; border-radius: var(--r-sm); padding: 12px 14px; font: inherit; color: var(--c-ink); background: rgba(255,255,255,.95); }
.contact__submit { display: block; margin: 8px auto 0; padding: 11px 46px; border: none; border-radius: var(--r-pill); background: var(--grad-btn); color: #fff; font-family: var(--font-round); font-weight: 700; box-shadow: var(--glow-pink); }

.backtop { display: block; width: max-content; margin: 40px auto 50px; padding: 11px 40px; border-radius: var(--r-pill); background: var(--grad-btn); color: #fff; font-family: var(--font-round); font-weight: 700; box-shadow: var(--glow-pink); }

/* =====================================================================
 * フッター
 * ===================================================================== */
.site-footer { background: linear-gradient(90deg, #ff2e9a 0%, #9b3df0 60%, #7b2ff7 100%); }
.site-footer__inner { display: flex; align-items: center; gap: 40px; padding-block: 30px; }
.site-footer__brand { display: flex; align-items: center; gap: 16px; }
.site-footer__logo { font-family: var(--font-round); font-weight: 900; font-size: 1.8rem; }
.site-footer__face { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.6); }
.site-footer__nav { display: flex; gap: 60px; margin-left: auto; }
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer__nav a { font-size: .88rem; opacity: .95; }
.site-footer__nav a:hover { text-decoration: underline; }
.site-footer__copy { text-align: center; padding: 14px; font-size: .8rem; background: rgba(20,0,30,.3); margin: 0; }

/* =====================================================================
 * レスポンシブ（タブレット〜モバイル）
 * ===================================================================== */
@media (max-width: 1080px) {
	.feature, .picks { grid-template-columns: 1fr; }
	.art-grid { grid-template-columns: repeat(2, 1fr); }
	.picks__side { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
	/* ヘッダー: ロゴ下にナビを折返し表示（メニュー設定時もモバイルでアクセス可能） */
	.site-header__inner { height: auto; flex-wrap: wrap; padding-block: 10px; gap: 4px 16px; }
	.site-header__nav { margin-left: 0; width: 100%; }
	.gnav { flex-wrap: wrap; gap: 8px 16px; }
	.gnav a { font-size: .85rem; }

	.hero { padding-bottom: 40px; }
	.hero__inner { grid-template-columns: 1fr; min-height: 0; gap: 16px; padding-top: 24px; }
	.hero__title { font-size: clamp(1.85rem, 8vw, 2.45rem); line-height: 1.2; }
	.hero__bg { background-position: 62% 28%; }
	.hero__bg::after { background: linear-gradient(180deg, rgba(214,36,138,.55) 0%, rgba(40,5,55,.4) 45%, rgba(20,0,30,.72) 100%); }
	.hero__right { min-height: 200px; }
	.hero__credit { position: static; text-align: left; }
	/* 検索を縦に */
	.search__row { flex-wrap: wrap; gap: 8px; }
	.search__select { flex: 1 1 100%; }
	.search__field { flex: 1 1 60%; }
	.search__btn { flex: 1 1 30%; padding-inline: 0; }
	.areas { flex-direction: column; gap: 4px; }
	.hashbox { max-width: none; }
	.hashbox__grid { grid-template-columns: repeat(2, 1fr); }
	.cats { justify-content: center; flex-wrap: wrap; margin-top: 24px; }
	.yt-grid, .top3 { grid-template-columns: 1fr; }
	.ranklist { grid-template-columns: 1fr; }
	.spot-grid { grid-template-columns: 1fr; }
	.art-grid { grid-template-columns: 1fr; }
	.picks__side { grid-template-columns: repeat(2, 1fr); }
	.site-footer__inner { flex-direction: column; align-items: flex-start; gap: 20px; }
	.site-footer__nav { margin-left: 0; gap: 30px; }
}

/* レビュー一覧ページネーション */
.rv-pagination { margin: 28px 0 8px; }
.rv-pagination .nav-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}
.rv-pagination .page-numbers {
	display: inline-grid;
	place-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: var(--r-pill);
	background: rgba(255,255,255,.14);
	border: 1px solid rgba(255,255,255,.35);
	font-weight: 700;
	font-size: .9rem;
}
.rv-pagination .page-numbers.current {
	background: var(--grad-pink-purple);
	box-shadow: var(--glow-pink);
}

/* 検索のエリアセレクト（ネイティブ select をピル型に） */
select.search__select {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	padding-left: 40px;
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20151%20196%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M97.7443%2052.9806C69.7276%2024.7639%2025.2165%2064.8639%2051.3609%2095.0973C79.0943%20127.169%20127.833%2083.2861%2097.7443%2052.9806ZM75.5331%20195.069C53.0609%20163.931%2016.5387%20131.519%203.71647%2094.7861C-8.48353%2059.8472%2010.5276%2021.6917%2043.572%206.83613C104.105%20-20.375%20171.594%2038.2806%20144.294%20101.058C129.15%20135.869%2097.1943%20164.353%2075.5331%20195.069Z%27%20fill%3D%27%23C8FFFF%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat, no-repeat;
	background-position: left 15px center, right 16px center;
	background-size: 14px auto, 14px auto;
}

/* お問い合わせ: ハニーポット（非表示）と送信通知 */
.contact__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact__notice {
	max-width: 640px;
	margin: 0 0 16px;
	padding: 12px 18px;
	border-radius: var(--r-card);
	font-weight: 700;
}
.contact__notice--ok {
	background: rgba(40,230,255,.16);
	border: 1px solid var(--c-cyan);
	color: #eafdff;
}
.contact__notice--ng {
	background: rgba(255,59,160,.16);
	border: 1px solid var(--c-pink);
	color: #ffe9f5;
}

/* めしあのYouTube カルーセル */
.yt-carousel { position: relative; margin: 8px 0 4px; }
.yt-carousel__track {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 4px 2px 12px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.yt-carousel__track .yt-card {
	flex: 0 0 clamp(220px, 42%, 300px);
	scroll-snap-align: start;
	aspect-ratio: 16 / 9;
	border-radius: var(--r-sm);
	overflow: hidden;
	background: rgba(0,0,0,.3);
	box-shadow: var(--shadow-card);
}
.yt-carousel__track .yt-card img { width: 100%; height: 100%; object-fit: cover; }

/* YouTube カルーセル（デザイン版：蝶アイコン・光る枠・時間バッジ・ドット） */
.sec-head--yt { display: flex; align-items: center; gap: 10px; }
.sec-head--yt .yt-bf { width: 46px; height: 40px; flex: none; overflow: visible; }
.yt-carousel__track .yt-card {
	position: relative;
	flex: 0 0 clamp(240px, 46%, 320px);
	scroll-snap-align: start;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
	background: #100016;
	box-shadow: 0 0 0 2px rgba(255,40,200,.9), 0 0 16px rgba(255,40,200,.6);
}
.yt-carousel__track .yt-card img { width: 100%; height: 100%; object-fit: cover; }
.yt-card__time {
	position: absolute;
	right: 8px; bottom: 8px;
	display: inline-flex; align-items: center; gap: 4px;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(18,0,24,.82);
	color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .02em;
}
.yt-card__time::before { content: "\25B6"; font-size: .58rem; }
.yt-carousel__dots {
	display: flex; justify-content: center; align-items: center; gap: 9px;
	width: max-content; max-width: 90%;
	margin: 10px auto 0; padding: 9px 18px;
	border-radius: 999px;
	background: rgba(255,255,255,.5);
}
.yt-carousel__dot {
	width: 8px; height: 8px; padding: 0;
	border: none; border-radius: 999px;
	background: rgba(120,40,110,.45); cursor: pointer;
	transition: width .2s, height .2s, background .2s;
}
.yt-carousel__dot.is-active { width: 11px; height: 11px; background: var(--c-pink); box-shadow: var(--glow-pink); }

/* エリア特集（Figma準拠：写真カード＋店舗数オーバーレイ） */
.area-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.area-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 16 / 8;
	border-radius: var(--r-card);
	overflow: hidden;
	background: #1a0726 center/cover no-repeat;
	box-shadow: 0 0 0 2px rgba(255,40,200,.8), var(--shadow);
	color: #fff;
}
.area-card::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20,0,30,0) 45%, rgba(20,0,30,.78) 100%);
}
.area-card__label {
	position: relative; z-index: 1;
	margin: 14px 16px;
	display: inline-flex; align-items: baseline; gap: 4px;
	font-family: var(--font-round); font-weight: 800; font-size: 1.15rem;
	text-shadow: 0 1px 8px rgba(0,0,0,.7);
}
.area-card__pin { font-size: .9em; margin-right: 2px; }
.area-card__count { font-size: 1rem; opacity: .95; }
@media (max-width: 900px) { .area-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .area-grid { grid-template-columns: 1fr; } }

/* =====================================================================
 * レビュー記事 詳細（single-review）— Figma node 8-4280 準拠
 * 淡いピンクのカード／ピンク見出し／2カラム（本文＋右レール）
 * ===================================================================== */
.rv-herowrap { padding-top: 26px; margin-bottom: 26px; }
.rv-hero {
	position: relative; isolation: isolate; overflow: hidden;
	min-height: 280px;
	display: flex; flex-direction: column; justify-content: center;
	padding: 28px 32px;
	background: #2a0030 center/cover no-repeat;
	border-radius: 22px;
	box-shadow: 0 0 0 3px rgba(255,40,200,.85), 0 0 22px rgba(255,40,200,.5), var(--shadow);
}
.rv-hero__scrim { position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(30,0,40,.25) 0%, rgba(30,0,40,.5) 100%); }
.rv-hero__vote { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
	background: rgba(20,0,28,.6); border: 1px solid rgba(255,255,255,.3); border-radius: 999px;
	padding: 5px 12px; font-weight: 800; margin-bottom: 14px; }
.rv-stars5 { color: var(--c-yellow); letter-spacing: 1px; }
.rv-vote { background: var(--grad-btn); color: #fff; border-radius: 999px; padding: 2px 12px; font-size: .78rem; }
.rv-hero__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.rv-hero__title { font-family: var(--font-round); font-weight: 900; font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 0;
	background: linear-gradient(180deg, #d6fbff 0%, #4fe3ff 55%, #28b6e6 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.rv-hero__area { font-weight: 800; font-size: 1.05rem; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.rv-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tag--solid { background: var(--grad-pink-purple); border: none; color: #fff; font-weight: 700; box-shadow: var(--glow-pink); }
.rv-rank-badge { position: absolute; top: 22px; right: 26px; z-index: 1;
	width: 104px; height: 104px; border-radius: 999px;
	display: grid; place-content: center; text-align: center; line-height: 1.1; gap: 2px;
	background: radial-gradient(circle at 50% 30%, #fff3b0, #ffcb3d 55%, #e08a08);
	color: #7a3b00; box-shadow: 0 0 0 4px rgba(255,255,255,.65), 0 0 18px rgba(255,200,60,.7), 0 6px 18px rgba(0,0,0,.4); }
.rv-rank-badge__crown { font-size: 1.1rem; }
.rv-rank-badge__num { font-family: var(--font-round); font-weight: 900; font-size: 1.5rem; }
.rv-rank-badge__label { font-size: .54rem; font-weight: 800; letter-spacing: .08em; }

/* レイアウト */
.rv-layout { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; padding-bottom: 50px; }
.rv-main { display: flex; flex-direction: column; gap: 26px; min-width: 0; }

/* カード（淡ピンク・濃い文字） */
.rv-card { background: rgba(252,228,248,.92); color: var(--c-ink); border-radius: 26px;
	padding: 28px 30px; box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 0 26px rgba(255,90,200,.35), 0 14px 34px rgba(80,0,80,.22); }

/* バナー見出し */
.rv-banner { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; }
.rv-banner--center { justify-content: center; }
.rv-banner .head-ico { width: 30px; height: 26px; flex: none; }
.rv-banner__txt { position: relative; font-family: var(--font-round); font-weight: 900;
	font-size: 1.55rem; color: var(--c-magenta); letter-spacing: .02em;
	text-shadow: 0 2px 0 #fff, 0 0 10px rgba(255,90,200,.45); transform: rotate(-1.5deg); }

/* ハートリスト */
.rv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.rv-list li { position: relative; padding-left: 1.9em; font-size: .95rem; line-height: 1.7; }
.rv-list li::before { content: ""; position: absolute; left: 0; top: .15em; width: 1.2em; height: 1.05em;
	background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2066%2056%27%20fill%3D%27%23ff3ba0%27%3E%3Cpath%20d%3D%27M8.44283%208.01001C6.42283%2020.33%2011.4128%2027.67%2021.3828%2030.87C18.8428%2031.02%2016.0628%2032.95%2014.9128%2035.36C13.7628%2037.77%2015.8328%2042.26%2015.5728%2043.73C15.3128%2045.2%2013.5428%2046.5999%2013.8428%2047.0399C14.1428%2047.4799%2014.7428%2046.1%2017.0628%2045.41C18.6528%2044.93%2021.3928%2045.5199%2024.4828%2044.1699C27.5728%2042.8199%2029.8028%2039.4%2031.5128%2035.36C33.2228%2031.32%2032.9728%2022.23%2027.8028%2016.46C20.2228%207.99996%208.45283%208%208.45283%208L8.44283%208.01001Z%27%2F%3E%3Cpath%20d%3D%27M57.5331%208.01001C59.5531%2020.33%2054.5631%2027.67%2044.5931%2030.87C47.1331%2031.02%2049.9131%2032.95%2051.0631%2035.36C52.2131%2037.77%2050.1431%2042.26%2050.4031%2043.73C50.6631%2045.2%2052.4331%2046.5999%2052.1331%2047.0399C51.8331%2047.4799%2051.2331%2046.1%2048.9131%2045.41C47.3231%2044.93%2044.5831%2045.5199%2041.4931%2044.1699C38.4031%2042.8199%2036.1731%2039.4%2034.4631%2035.36C32.7531%2031.32%2033.0031%2022.23%2038.1731%2016.46C45.7531%207.99996%2057.5231%208%2057.5231%208L57.5331%208.01001Z%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain; }
.rv-cols2 .rv-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 26px; }

/* めしあグラフ */
.rv-graph { display: flex; flex-direction: column; gap: 14px; }
.rv-graph__row { display: grid; grid-template-columns: 9em 1fr 2.6em; align-items: center; gap: 12px; }
.rv-graph__label { font-weight: 700; font-size: .92rem; }
.rv-graph__bar { height: 12px; border-radius: 999px; background: rgba(150,40,120,.18); overflow: hidden; }
.rv-graph__fill { display: block; height: 100%; border-radius: 999px; background: var(--grad-pink-purple); position: relative; min-width: 14px; }
.rv-graph__fill::after { content: "♥"; position: absolute; right: 3px; top: 50%; transform: translateY(-50%); color: #fff; font-size: .8rem; line-height: 1; text-shadow: 0 0 4px rgba(255,40,200,.8); }
.rv-graph__val { font-weight: 800; color: var(--c-pink-deep); font-size: .85rem; text-align: right; }

/* フロア/ルーム（写真＋本文） */
.rv-split { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: center; overflow: hidden; }
.rv-split--rev { grid-template-columns: 1fr 300px; }
.rv-split--rev .rv-split__img { order: 2; }
.rv-split__img { align-self: stretch; min-height: 200px; border-radius: 16px; background: #2a0030 center/cover no-repeat; }

/* めしあ推し（3カラム） */
.rv-oshi__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rv-oshi__head { font-weight: 800; color: var(--c-pink-deep); margin: 0 0 8px; font-size: .95rem; }
.rv-oshi__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rv-oshi__list li { position: relative; padding-left: 1.1em; font-size: .88rem; line-height: 1.55; }
.rv-oshi__list li::before { content: "▶"; position: absolute; left: 0; color: var(--c-pink); font-size: .7em; top: .25em; }

/* 純度100%のホンネ（カードグリッド） */
.rv-honne__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.rv-honne__item { background: #fff; border-radius: 14px; padding: 16px 14px; font-size: .86rem; line-height: 1.6;
	box-shadow: 0 4px 12px rgba(120,0,90,.12); border: 1px solid rgba(255,90,180,.25); }

/* 店舗情報 */
.rv-info__dl { margin: 0; display: grid; gap: 0; }
.rv-info__row { display: grid; grid-template-columns: 9em 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px dashed rgba(120,30,90,.25); font-size: .9rem; }
.rv-info__row dt { margin: 0; font-weight: 700; color: var(--c-pink-deep); }
.rv-info__row dd { margin: 0; }

/* 写真ギャラリー */
.rv-gallery { display: grid; grid-template-columns: 1.9fr 1fr; grid-auto-rows: 1fr; gap: 12px; height: 340px; }
.rv-gallery__big { grid-row: 1 / span 2; }
.rv-gallery figure { margin: 0; position: relative; border-radius: 14px; overflow: hidden; }
.rv-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-gallery figcaption { position: absolute; right: 8px; bottom: 8px; background: rgba(18,0,24,.78); color: #fff;
	font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; }

/* 関連記事 */
.rv-related { display: flex; flex-direction: column; gap: 16px; }

/* 右レール */
.rv-rail { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 84px; }
.rv-rail__head { display: flex; align-items: center; gap: 8px; font-family: var(--font-round); font-weight: 800; font-size: 1.05rem; }
.rv-rail__yt { display: flex; flex-direction: column; gap: 10px; }
.rv-rail__ytcard { position: relative; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); display: block; }
.rv-rail__ytcard img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.rv-rail__yttime { position: absolute; right: 6px; bottom: 6px; background: rgba(18,0,24,.82); color: #fff;
	font-size: .72rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.rv-rail__spon { display: grid; gap: 12px; }

@media (max-width: 960px) {
	.rv-layout { grid-template-columns: 1fr; }
	.rv-rail { position: static; }
	.rv-oshi__grid, .rv-honne__grid { grid-template-columns: 1fr 1fr; }
	.rv-cols2 .rv-list { grid-template-columns: 1fr; }
	.rv-split, .rv-split--rev { grid-template-columns: 1fr; }
	.rv-split--rev .rv-split__img { order: 0; }
}
@media (max-width: 560px) {
	.rv-oshi__grid, .rv-honne__grid { grid-template-columns: 1fr; }
	.rv-gallery { height: auto; grid-template-columns: 1fr 1fr; }
	.rv-gallery__big { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 16/9; }
	.rv-gallery__sm { aspect-ratio: 4/3; }
}

/* 固定ページ（マニュアル等） */
.page-card { background: rgba(255,255,255,.96); color: var(--c-ink); border-radius: 22px;
	padding: 34px 40px; margin: 30px auto 50px; max-width: 920px; box-shadow: var(--shadow); }
.page-card__title { font-family: var(--font-round); font-weight: 900; font-size: 1.9rem; color: var(--c-pink-deep); margin: 0 0 22px; }
.page-content { line-height: 1.85; }
.page-content h2 { font-family: var(--font-round); font-weight: 800; font-size: 1.35rem; color: var(--c-magenta);
	margin: 34px 0 12px; padding-bottom: 6px; border-bottom: 2px solid rgba(255,59,160,.3); }
.page-content h3 { font-weight: 800; font-size: 1.08rem; color: var(--c-pink-deep); margin: 22px 0 8px; }
.page-content p { margin: 0 0 1em; }
.page-content ul, .page-content ol { margin: 0 0 1em; padding-left: 1.4em; }
.page-content li { margin-bottom: .35em; }
.page-content a { color: var(--c-magenta); text-decoration: underline; }
.page-content code { background: rgba(255,59,160,.1); padding: 2px 6px; border-radius: 6px; font-size: .9em; }
.page-content pre { background: #2a0f33; color: #ffe9f7; padding: 14px 16px; border-radius: 10px; overflow-x: auto; }
.page-content pre code { background: none; padding: 0; color: inherit; }
.page-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: .92rem; }
.page-content th, .page-content td { border: 1px solid rgba(120,30,90,.25); padding: 8px 12px; text-align: left; vertical-align: top; }
.page-content th { background: rgba(255,59,160,.12); font-weight: 700; }
.page-content hr { border: none; border-top: 1px dashed rgba(120,30,90,.3); margin: 28px 0; }
.page-content blockquote { margin: 0 0 1em; padding: 10px 16px; background: rgba(255,59,160,.07);
	border-left: 4px solid var(--c-pink); border-radius: 0 8px 8px 0; }