/* tokens.css is imported globally */

*{ box-sizing:border-box; }
html{ height:100%; }
body{ min-height:100%; }
html{ scroll-behavior:smooth; }
body {
	margin: 0;
	font-family: "Zen Kaku Gothic New", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
	font-size: var(--km-font-body);
	line-height: var(--km-line-height-body);
	color: var(--km-text);
	background: var(--km-bg); /* 元の薄い背景色を復活 */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	/* カスタムカーソル設定 */
	cursor: url('data:image/svg+xml;utf8,<svg width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M26.3004 1.14366C26.7811 1.65629 26.7315 2.4866 26.1871 2.99709C24.1406 4.94876 14.3768 14.2348 12.7272 15.4779C13.5724 16.9322 13.0466 19.0286 11.43 20.5445L6.79887 24.8871C6.09336 25.5486 5.0924 25.6316 4.56934 25.0738C4.04628 24.516 4.33679 23.6753 5.0423 23.0138L8.21245 20.0412L7.78538 19.697L4.1023 23.1506C3.39679 23.8122 2.39584 23.8952 1.87278 23.3373C1.34972 22.7795 1.49683 21.786 2.20234 21.1244L5.88727 17.6691L5.58678 17.2781L2.43515 20.2334C1.72964 20.8949 0.836228 21.0926 0.313168 20.5348C-0.209892 19.977 -0.0627784 18.9834 0.642729 18.3219L5.27389 13.9793C6.80897 12.5398 8.9885 12.1551 10.4179 13.0485C10.9512 12.4929 13.2867 10.2147 23.7331 0.380042C24.2757 -0.128708 25.1093 -0.126634 25.59 0.386002L26.2972 1.14018L26.3004 1.14366Z" fill="%23C3C7C8"/></svg>') 13 13, auto;
}

/* リンク等も同じカスタムカーソルを維持（または必要に応じてポインタに変更） */
a, button, [role="button"], .km-advancedChip {
	cursor: url('data:image/svg+xml;utf8,<svg width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M26.3004 1.14366C26.7811 1.65629 26.7315 2.4866 26.1871 2.99709C24.1406 4.94876 14.3768 14.2348 12.7272 15.4779C13.5724 16.9322 13.0466 19.0286 11.43 20.5445L6.79887 24.8871C6.09336 25.5486 5.0924 25.6316 4.56934 25.0738C4.04628 24.516 4.33679 23.6753 5.0423 23.0138L8.21245 20.0412L7.78538 19.697L4.1023 23.1506C3.39679 23.8122 2.39584 23.8952 1.87278 23.3373C1.34972 22.7795 1.49683 21.786 2.20234 21.1244L5.88727 17.6691L5.58678 17.2781L2.43515 20.2334C1.72964 20.8949 0.836228 21.0926 0.313168 20.5348C-0.209892 19.977 -0.0627784 18.9834 0.642729 18.3219L5.27389 13.9793C6.80897 12.5398 8.9885 12.1551 10.4179 13.0485C10.9512 12.4929 13.2867 10.2147 23.7331 0.380042C24.2757 -0.128708 25.1093 -0.126634 25.59 0.386002L26.2972 1.14018L26.3004 1.14366Z" fill="%23C3C7C8"/></svg>') 13 13, pointer;
}

a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s;
}

a:hover {
	opacity: 0.8;
}

.km-container {
	max-width: var(--km-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: 80px;
	padding-right: 80px;
	width: 100%;
}

/* --- Global Responsive Rules (Shared) --- */
@media (max-width: 1023px) {
	.km-container {
		padding-left: clamp(16px, 5vw, 40px);
		padding-right: clamp(16px, 5vw, 40px);
	}

	.km-layout {
		display: block; /* sidebar stacks below content */
		width: 100%;
	}
}

@media (max-width: 640px) {
	.km-header__inner {
		gap: 8px;
		padding-top: 8px;
		padding-bottom: 8px;
	}

	.km-container {
		padding-left: 16px;
		padding-right: 16px;
	}

	.km-header__menuBtn {
		width: 58px;
		height: 58px;
		min-width: 58px;
		padding: 0;
		margin-right: 4px;
		background: transparent;
		border-radius: 0;
		box-shadow: none;
	}

	.km-menuButton {
		width: 58px;
		height: 58px;
		min-width: 58px;
		margin-right: 4px;
		background: transparent;
		border-radius: 0;
		box-shadow: none;
	}
}
.km-header.is-sticky {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	transition: background 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.km-header {
	border-bottom: 1px solid transparent;
}

.admin-bar .km-header.is-sticky {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .km-header.is-sticky {
		top: 46px;
	}
}

.km-header.is-sticky .km-header__inner {
	padding-top: 12px;
	padding-bottom: 12px;
}


/* 地域で探すページの横幅を広げる */
.km-page-area .km-container {
	max-width: 1600px;
	padding-left: 40px;
	padding-right: 40px;
}

/* うまいもん特集セクションは標準幅に戻す（スライダーカードが大きくなりすぎるため） */
.km-page-area .km-umaimonSection .km-container {
	max-width: var(--km-container);
	padding-left: 80px;
	padding-right: 80px;
}

@media (max-width: 900px) {
	.km-container {
		padding-left: 32px;
		padding-right: 32px;
	}
	.km-page-area .km-umaimonSection .km-container {
		padding-left: 32px;
		padding-right: 32px;
	}
}

@media (max-width: 560px) {
	.km-container {
		padding-left: 20px;
		padding-right: 20px;
	}
	.km-page-area .km-umaimonSection .km-container {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* --- Section Title --- */
.km-sectionTitle {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: clamp(28px, 3.2vw, 44px);
	font-weight: 700;
	color: var(--km-text);
	text-align: center;
	margin: 0 auto 40px;
	position: relative;
	display: block;
	width: fit-content;
}

.km-sectionTitle::after {
	content: "";
	position: absolute;
	bottom: -12px;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 4px;
	background: var(--km-yellow);
	border-radius: 2px;
}

.km-main {
	padding-bottom: 64px;
}

/* --- Sidebar --- */
/* Styles moved to sidebar.css */
.km-sidebar {
	width: 100%;
}

.km-widget {
	width: 100%;
}

.km-widget__title {
	background: var(--km-gray);
	border-radius: 8px;
	padding: 12px 16px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--km-text);
	margin: 0 0 20px;
}

/* Profile Widget */
.km-profileWidget {
	text-align: center;
	padding: 0 8px;
}

.km-profileWidget__avatar {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto 16px;
	background: var(--km-sand);
}

.km-profileWidget__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.km-profileWidget__name {
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0 0 8px;
}

.km-profileWidget__desc {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--km-text-muted);
	margin: 0;
	text-align: left;
}

/* Sidebar List */
.km-sideList {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.km-sideList__item {
	border-bottom: 1px solid var(--km-gray);
	padding-bottom: 16px;
}

.km-sideList__item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.km-sideList__link {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.km-sideList__media {
	width: 100px;
	height: 75px;
	border-radius: 6px;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--km-sand);
}

.km-sideList__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.km-sideList__title {
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
	color: var(--km-text);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- WordPress Standard Gallery & Image Support --- */
.km-article__body img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.gallery {
	margin: 32px auto;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
}

.gallery-item {
	margin: 0;
	flex: 1 1 auto;
}

.gallery-columns-1 .gallery-item { width: 100%; }
.gallery-columns-2 .gallery-item { width: calc(50% - 8px); }
.gallery-columns-3 .gallery-item { width: calc(33.333% - 11px); }
.gallery-columns-4 .gallery-item { width: calc(25% - 12px); }

.gallery-icon img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
	object-fit: cover;
}

.gallery-caption {
	font-size: 15px;
	color: var(--km-text-muted);
	margin-top: 8px;
	text-align: center;
}

/* --- Header (Kence Meshi 2.0 Light) --- */
.km-header--light {
  position: sticky;
  top: 0;
  z-index: 1200;
  background: #FDF9F1; /* ライトサンド */
  color: var(--km-text);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.km-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
}

.km-header__logos {
  display: flex;
  align-items: center;
  gap: 12px;
}

.km-header__iconLink {
  display: block;
  line-height: 0;
}

.km-header__icon {
  width: 54px;
  height: 54px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ヘッダー豚アイコン: 通常時のみ2.2倍、ミニゲーム中は現状サイズを維持 */
body:not(.is-pig-game-playing) .km-header__icon {
  width: 119px;
  height: 119px;
}

body.is-pig-game-playing .km-header__icon {
  width: 54px;
  height: 54px;
}

@media (max-width: 768px) {
  .km-header__icon {
    width: 44px;
    height: 44px;
  }
  body:not(.is-pig-game-playing) .km-header__icon {
    width: 97px;
    height: 97px;
  }
  body.is-pig-game-playing .km-header__icon {
    width: 44px;
    height: 44px;
  }
  .km-header__logos {
    gap: 8px;
  }
}

.km-header__nav {
  display: flex;
  gap: 24px;
}

.km-navCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  min-width: 80px;
}

.km-navCard__iconImg {
  width: 36px;
  height: 32px;
}

.km-navCard__label {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.km-header__menuBtn {
  border: none;
  background: transparent;
  padding: 0;
  width: 112px;
  height: 112px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  z-index: 3105;
  border-radius: 0;
  box-shadow: none;
  transition: transform 0.2s ease, background 0.2s ease;
}

.km-header__menuBtn:hover {
  transform: translateY(-1px);
}

.km-header__menuBtnIcon {
  width: 72px;
  height: 72px;
  display: block;
  background: url('../img/icon-menu-custom.svg') center/contain no-repeat;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

body.is-menu-open .km-header__menuBtnIcon,
.km-header__menuBtn[aria-expanded="true"] .km-header__menuBtnIcon {
  background-image: url('../img/icon-menu-open.svg');
  transform: scale(1.02);
  opacity: 1;
}

body.is-menu-open .km-header__menuBtn,
.km-header__menuBtn[aria-expanded="true"] {
  background: transparent;
  box-shadow: none;
}

.km-menuButton {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

@media (max-width: 640px) {
	body .km-header__menuBtn,
	body .km-header__menuBtn:hover,
	body.is-menu-open .km-header__menuBtn,
	body .km-header__menuBtn[aria-expanded="true"] {
		width: 56px;
		height: 56px;
		min-width: 56px;
		padding: 0;
		margin-right: 0;
		background: transparent;
		box-shadow: none;
		border-radius: 0;
		transform: none;
	}

	body .km-menuButton {
		width: 56px;
		height: 56px;
		min-width: 56px;
		margin-right: 0;
		padding: 0;
		background: transparent;
		border-radius: 0;
		box-shadow: none;
	}
}

/* --- Footer (Kence Meshi 2.0 Dark) --- */
.km-footer--dark {
  background: #443F33; /* ダークブラウン */
  color: var(--km-white);
  padding: 80px 0 40px;
  position: relative;
  overflow: hidden;
}

.km-footer__main {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  margin-bottom: 60px;
}

.km-footer__logo img {
  width: 220px;
  height: auto;
  filter: brightness(0) invert(1);
}

.km-footer__content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 32px;
}

.km-footer__left {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.km-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.km-footer__navRow {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
}

.km-footer__navRow a {
  color: var(--km-white);
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
}

.km-footer__navRow--sub a {
  font-size: 16px;
  opacity: 0.9;
}

.km-footer__sns {
  display: flex;
  gap: 20px;
  margin-top: 10px;
}

.km-footer__lineIcon {
	display: block;
	width: 30px;
	height: 30px;
	filter: brightness(0) invert(1);
	transform: translateY(0);
}

.km-footer__copyright {
  font-size: 14px;
  opacity: 0.8;
}

.km-footer__copyright a {
  color: inherit;
  text-decoration: underline;
}

.km-footer__mascot {
  display: flex;
  align-items: flex-end;
  gap: 0;
  position: absolute;
  left: 0;
  bottom: 0;
}

@media (max-width: 1023px) {
  .km-header__nav {
    display: none; /* モバイルではハンバーガーメニューへ */
  }
  .km-footer__main {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 32px;
  }
  .km-footer__content {
    align-items: center;
    text-align: center;
  }
  .km-footer__navRow {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .km-footer__mascot {
    display: none;
  }
}

@media (max-width: 640px) {
	.km-footer--dark {
		padding-top: 76px;
		padding-bottom: 34px;
		overflow: visible;
	}

	.km-footer__main {
		gap: 24px;
		margin-bottom: 30px;
	}

	.km-footer__logo img {
		width: 186px;
	}

	.km-footer__content {
		width: 100%;
		max-width: 440px;
		gap: 26px;
	}

	.km-footer__nav {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 34px;
		row-gap: 0;
		width: 100%;
	}

	.km-footer__navRow {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		flex-wrap: nowrap;
		gap: 18px;
	}

	.km-footer__navRow a,
	.km-footer__navRow--sub a {
		font-size: 14px;
		line-height: 1.5;
	}

	.km-footer__sns {
		justify-content: center;
	}

	.km-footer__copyright {
		font-size: 13px;
		line-height: 1.6;
		text-align: center;
	}

	.km-footer__mascot.km-pig-game {
		display: block;
		left: 50%;
		top: -84px;
		bottom: auto;
		right: auto;
		transform: translateX(-50%);
		width: min(92vw, 360px);
		height: 140px;
		z-index: 3;
	}

	.km-footer__mascot .km-pig-game__field {
		max-width: 100%;
	}
}





/* Layout (content + sidebar) */
.km-layout{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap:24px;
  align-items:start;
}
.tax-km20_outing_place .km-layout{
  grid-template-columns: 320px minmax(0, 1fr);
}
.tax-km20_outing_place .km-sidebar{
  grid-column: 1;
  grid-row: 1;
}
.tax-km20_outing_place .km-content{
  grid-column: 2;
  grid-row: 1;
}
.km-content{
  min-width:0;
}
.km-content--narrow {
  max-width: 800px;
  margin: 0 auto;
}
@media (max-width: 900px){
  .km-layout{
    grid-template-columns: 1fr;
  }
}


.km-article__title{
  margin: 0 0 14px;
  font-size: 28px;
  font-weight: 900;
}
.km-article__body{
  line-height: 1.9;
}
.km-archiveCard{
  background:var(--km-white);
  border:1px solid rgba(0,0,0,.06);
  border-radius: 20px;
  padding: 16px;
  box-shadow: var(--km-shadow);
  margin-bottom: 12px;
}
.km-archiveCard__title{
  margin:0;
  font-size: 18px;
  font-weight: 900;
}

.km-footerPoweredBar--raised {
	position: relative;
	z-index: 150;
}

/* Footer内ミニゲームとAIブタチェ波動演出。テンプレート内<style>依存を外し、保守先をCSSに集約する。 */
.km-pig-game {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -12px;
	height: 120px;
	z-index: 100;
	pointer-events: none;
	transition: all 0.5s ease;
}

.km-pig-game__ui {
	position: absolute;
	top: -40px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 15px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease;
}

.km-pig-game__ui.is-visible {
	opacity: 1;
	visibility: visible;
}

.km-pig-game__score {
	position: relative;
	background: #f19a2a;
	color: #fff;
	padding: 6px 20px;
	border-radius: 25px;
	font-weight: 900;
	font-size: 1.1rem;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	white-space: nowrap;
}

.km-pig-game__timer {
	background: #d63030;
	padding: 6px 20px;
	border-radius: 25px;
	font-weight: 900;
	font-size: 1.1rem;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	white-space: nowrap;
}

.km-score-pop {
	position: absolute;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
	color: #f19a2a;
	font-weight: 900;
	font-size: 1.4rem;
	pointer-events: none;
	animation: km-score-float 0.8s ease-out forwards;
}

@keyframes km-score-float {
	0% {
		opacity: 0;
		transform: translateY(0);
	}
	30% {
		opacity: 1;
		transform: translateY(-20px);
	}
	100% {
		opacity: 0;
		transform: translateY(-40px);
	}
}

.km-pig-game__message {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.5);
	background: rgba(255, 255, 255, 0.95);
	color: #d63030;
	padding: 20px 40px;
	border-radius: 50px;
	font-size: 2rem;
	font-weight: 900;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.km-pig-game__message.is-active {
	animation: km-msg-pop 2s ease-out forwards;
	visibility: visible;
}

@keyframes km-msg-pop {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.5);
	}
	20%,
	80% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(1.2);
	}
}

.km-pig-game__field {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	height: 100%;
	overflow: hidden;
}

.km-pig-game__item {
	position: absolute;
	bottom: 0;
	cursor: pointer;
	transform: translateY(120%);
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), left 0.8s ease-in-out;
	pointer-events: auto;
	width: 80px;
}

.km-pig-game__item.is-active {
	transform: translateY(0);
}

.km-pig-game__hit-effect {
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	color: #d63030;
	font-weight: 900;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 0.8rem;
	opacity: 0;
	pointer-events: none;
}

.km-pig-game__item[data-type="pig"] .km-pig-game__hit-effect {
	color: #f19a2a;
}

.km-pig-game__item[data-type="bad"] .km-pig-game__hit-effect {
	color: #d63030;
}

.km-pig-game__item.is-hit {
	animation: km-pig-hit 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
	pointer-events: none;
	z-index: 200;
}

.km-pig-game__item.is-hit .km-pig-game__hit-effect {
	animation: km-text-pop 0.6s ease-out forwards;
}

@keyframes km-pig-hit {
	0% {
		transform: translateY(0) rotate(0) scale(1);
		opacity: 1;
	}
	40% {
		transform: translateY(-80px) rotate(15deg) scale(1.2);
		opacity: 1;
	}
	100% {
		transform: translateY(100px) rotate(30deg) scale(0.5);
		opacity: 0;
	}
}

@keyframes km-text-pop {
	0% {
		opacity: 0;
		transform: translate(-50%, 0);
	}
	50% {
		opacity: 1;
		transform: translate(-50%, -40px);
	}
	100% {
		opacity: 0;
		transform: translate(-50%, -60px);
	}
}

.km-pig-game__ranking {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.9);
	width: min(320px, 90vw);
	background: #fff;
	border-radius: 20px;
	padding: 24px;
	z-index: 2000;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	color: #333;
	font-family: sans-serif;
	pointer-events: auto;
}

.km-pig-game__ranking.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -50%) scale(1);
}

.km-pig-game__rankingInner {
	text-align: center;
}

.km-pig-game__rankingTitle {
	font-size: 1.2rem;
	font-weight: 900;
	color: #f19a2a;
	margin: 0 0 15px;
}

.km-pig-game__rankList {
	text-align: left;
	max-height: 250px;
	overflow-y: auto;
	margin-bottom: 20px;
	font-size: 0.9rem;
}

.km-pig-game__rankItem {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	border-bottom: 1px solid #eee;
}

.km-pig-game__rankItem--new {
	background: #fff9e6;
	font-weight: 800;
}

.km-pig-game__nameForm {
	display: none;
	margin-top: 15px;
	padding: 15px;
	background: #f7f1e7;
	border-radius: 10px;
}

.km-pig-game__nameForm.is-visible {
	display: block;
}

.km-pig-game__rankInMsg {
	font-weight: 800;
	color: #d63030;
	font-size: 0.8rem;
	margin-bottom: 10px;
}

.km-pig-game__nameForm input {
	width: 100%;
	padding: 8px;
	border: 2px solid #f19a2a;
	border-radius: 5px;
	margin-bottom: 10px;
	text-align: center;
	font-size: 1rem;
}

.km-pig-game__nameForm button,
.km-pig-game__closeBtn {
	background: #f19a2a;
	color: #fff;
	border: none;
	padding: 8px 20px;
	border-radius: 50px;
	font-weight: 800;
	cursor: pointer;
	width: 100%;
}

.km-pig-game__closeBtn {
	background: #666;
	margin-top: 10px;
}

.km-pig-game__rankEmpty {
	text-align: center;
}

@media (max-width: 640px) {
	/* フッター豚チェの説明・ランキング表示をSPで縦長化させない */
	.km-pig-game__message {
		width: min(92vw, 360px);
		padding: 12px 16px;
		border-radius: 20px;
		font-size: clamp(1rem, 4.2vw, 1.25rem);
		line-height: 1.35;
		text-align: center;
	}

	.km-pig-game__ranking {
		width: min(92vw, 360px);
		max-height: min(76vh, 560px);
		padding: 16px 14px;
		border-radius: 16px;
		overflow-y: auto;
	}

	.km-pig-game__rankingTitle {
		font-size: 1.02rem;
		margin-bottom: 10px;
	}

	.km-pig-game__rankList {
		max-height: min(34vh, 220px);
		margin-bottom: 12px;
		font-size: 0.84rem;
	}

	.km-pig-game__nameForm {
		margin-top: 10px;
		padding: 10px;
	}

	.km-pig-game__nameForm input {
		padding: 7px 8px;
		font-size: 0.95rem;
	}

	.km-pig-game__nameForm button,
	.km-pig-game__closeBtn {
		padding: 8px 14px;
		font-size: 0.9rem;
	}
}

.km-sidebarButacheSimple__link:hover .km-sidebarButacheSimple__img,
.km-butacheCommon__mascot:hover img {
	animation: km-butache-vibrate 0.1s linear infinite;
}

@keyframes km-butache-vibrate {
	0%,
	100% {
		transform: translate(0, 0);
	}
	25% {
		transform: translate(1.5px, -1.5px);
	}
	50% {
		transform: translate(-1.5px, 1.5px);
	}
	75% {
		transform: translate(1.5px, 1.5px);
	}
}

.km-butache-wave {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60px;
	height: 60px;
	border: 3px solid #f19a2a;
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	z-index: 10;
}

.km-butache-wave.is-active {
	animation: km-psycho-pulse 1s ease-out forwards;
}

@keyframes km-psycho-pulse {
	0% {
		width: 60px;
		height: 60px;
		opacity: 1;
		border-width: 6px;
	}
	100% {
		width: 400px;
		height: 400px;
		opacity: 0;
		border-width: 1px;
	}
}

/* フッター社名表記をデザイン基準の配色に合わせる */
.km-footer--dark .km-footer__copyright {
	color: var(--km-white);
	opacity: 1;
}

.km-footer--dark .km-footer__copyright a {
	color: inherit;
	text-decoration: none;
}

.km-footerPoweredBar {
	background: #e9e9e9;
}

.km-footerPoweredBar .km-container {
	text-align: right;
}

.km-footerPoweredBar span,
.km-footerPoweredBar a {
	color: #544B3C;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	line-height: 1.5;
}

.km-footerPoweredBar a {
	text-decoration: none;
}

/* ============================================================
   共通: 画像未設定プレースホルダー
   画像を設定すべき箇所でサムネイルが未設定の場合に表示
   ============================================================ */

.km-magazineCard__placeholder,
.km-magazineCard__media--placeholder,
.km-latestCard__media--placeholder,
.km-recommendCard__media--placeholder,
.km-hero__recommendedMedia--placeholder,
.km-magArchiveCard__placeholder,
.km-modelCourseCard__placeholder,
.km-outingCard__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 120px;
	background:
		repeating-linear-gradient(
			-45deg,
			#f0f0f0 0px,
			#f0f0f0 5px,
			var(--km-border) 5px,
			var(--km-border) 10px
		);
	position: relative;
}

.km-magazineCard__placeholder::after,
.km-magazineCard__media--placeholder::after,
.km-latestCard__media--placeholder::after,
.km-recommendCard__media--placeholder::after,
.km-hero__recommendedMedia--placeholder::after,
.km-magArchiveCard__placeholder::after,
.km-modelCourseCard__placeholder::after,
.km-outingCard__placeholder::after {
	content: "📷 画像未設定";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--km-placeholder);
	pointer-events: none;
}

/* ------------------------------------------------------------
 * Button styles (moved from top.css to be available site-wide)
 * ---------------------------------------------------------- */
.km-button--primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 50px;
	background: var(--km-accent);
	color: white;
	border-radius: 40px;
	border: 0;
	text-decoration: none;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.80px;
	transition: transform 0.2s, box-shadow 0.2s;
}

.km-button--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255, 130, 63, 0.3);
}

.km-button--primary:active {
	transform: translateY(1px) scale(0.99);
	box-shadow: 0 2px 8px rgba(255, 130, 63, 0.22);
}

.km-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 50px;
	background: white;
	border-radius: 40px;
	outline: 1px solid var(--km-text);
	outline-offset: -1px;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.80px;
	color: var(--km-text);
	text-decoration: none;
	transition: background 0.2s, color 0.2s, transform 0.12s;
}

.km-button:hover {
	background: var(--km-text);
	color: white;
}

.km-button:active,
.km-button--outline:active,
.km-button--filled:active {
	transform: translateY(1px) scale(0.99);
}

.km-button--outline {
	background: white;
	color: var(--km-text);
}

.km-button--filled {
	background: var(--km-yellow);
	color: var(--km-text);
	outline: none;
}

.km-button--filled:hover {
	background: var(--km-text);
	color: white;
}

.km-button svg {
	flex-shrink: 0;
}

/* =============================================
   公式SNS CTA セクション（全ページ共通）
   ============================================= */
.km-snsCta {
	position: relative;
	overflow: visible;
	z-index: 20; /* 確実にフッターより上、または適切な階層に */
	background: var(--km-bg);
	padding: 22px 0 34px;
}

.km-snsCta__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	border-radius: inherit;
}

.km-snsCta__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.km-snsCta__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding: 44px 56px 38px;
	overflow: hidden;
	border-radius: 30px;
	min-height: 420px;
	background: rgba(198, 226, 245, 0.18);
}

.km-snsCta__left {
	display: flex;
	flex-direction: column;
	gap: 20px;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 700px;
	padding-top: 2px;
}

.km-snsCta__heading {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding-right: 168px;
	max-width: calc(100% - 8px);
}

.km-snsCta__logo {
	height: 58px;
	width: auto;
}

.km-snsCta__headingLabel {
	font-size: 40px;
	font-weight: 700;
	color: var(--km-text, var(--km-text));
	letter-spacing: 0.01em;
	line-height: 1.05;
	max-width: 100%;
	word-break: keep-all;
}

.km-snsCta__icons {
	display: flex;
	gap: 16px;
	align-items: center;
	margin-top: 2px;
}

.km-snsCta__iconLink {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	background: var(--km-white);
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	transition: transform 0.2s, box-shadow 0.2s;
}

.km-snsCta__iconLink img {
	width: 38px;
	height: 38px;
	object-fit: contain;
}

.km-snsCta__iconLink:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.km-snsCta__card {
	background: rgba(255, 255, 255, 0.94);
	border-radius: 24px;
	overflow: visible;
	max-width: 780px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
	position: relative;
	padding: 18px 22px 22px;
	margin-top: 16px;
}

.km-snsCta__cardLead {
	background: var(--km-yellow, var(--km-yellow));
	padding: 10px 20px;
	font-size: 18px;
	font-weight: 700;
	color: var(--km-text, var(--km-text));
	margin: 0;
	display: inline-block;
	min-width: 360px;
	line-height: 1.2;
}

.km-snsCta__cardText {
	padding: 16px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--km-text, var(--km-text));
	margin: 0;
	font-weight: 600;
	max-width: 640px;
}

.km-snsCta__right {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 8px;
	flex-shrink: 0;
	width: 262px;
	padding-top: 6px;
	position: relative;
	z-index: 2;
}

.km-snsCta__pig {
	position: absolute;
	right: 108px;
	top: -170px;
	width: 164px;
	height: auto;
	z-index: 4;
}

.km-snsCta__phone {
	width: 220px;
	height: auto;
	transform: rotate(18deg);
	transform-origin: 50% 50%;
	filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.2));
}

@media (max-width: 1023px) {
	.km-snsCta {
		padding: 36px 0 30px;
	}

	.km-snsCta__inner {
		padding: 32px 18px 26px;
		border-radius: 30px;
		flex-direction: column;
		gap: 0;
		max-width: 352px;
		margin: 0 auto;
		text-align: center;
		min-height: 540px;
		isolation: isolate;
	}

	.km-snsCta__left {
		align-items: center;
		width: 100%;
		position: relative;
		z-index: 2;
	}

	.km-snsCta__logo {
		height: 56px;
		margin-bottom: 6px;
		width: auto;
	}

	.km-snsCta__heading {
		padding-right: 0;
		justify-content: center;
		max-width: 100%;
	}

	.km-snsCta__headingLabel {
		font-size: 28px;
		margin-bottom: 0;
		font-weight: 800;
	}

	.km-snsCta__icons {
		gap: 14px;
		margin: 18px 0 20px;
		justify-content: center;
	}

	.km-snsCta__iconLink {
		width: 62px;
		height: 62px;
	}

	.km-snsCta__iconLink img {
		width: 33px;
		height: 33px;
		object-fit: contain;
	}

	.km-snsCta__card {
		max-width: 100%;
		padding: 12px 14px 14px;
		border-radius: 20px;
		text-align: left;
		background: rgba(255, 255, 255, 0.96);
		min-height: 210px;
		margin-top: 18px;
	}

	.km-snsCta__cardLead {
		display: inline-block;
		font-size: 19px;
		padding: 4px 10px;
		margin-bottom: 10px;
		line-height: 1.2;
		max-width: calc(100% - 106px);
		min-width: 0;
	}

	.km-snsCta__cardText {
		font-size: 14px;
		line-height: 1.6;
		padding: 2px 0 0;
		max-width: calc(100% - 132px);
	}

	.km-snsCta__right {
		display: flex;
		position: absolute;
		inset: 0;
		pointer-events: none;
		z-index: 3;
		width: auto;
	}

	.km-snsCta__pig {
		position: absolute;
		top: -22px;
		right: 18px;
		width: 84px;
		height: auto;
	}

	.km-snsCta__phone {
		position: absolute;
		right: 2px;
		bottom: 34px;
		width: 122px;
		height: auto;
		transform: rotate(16deg);
	}
}

@media (max-width: 640px) {
	.km-snsCta__inner {
		max-width: 360px;
		padding: 28px 14px 22px;
	}

	.km-snsCta__headingLabel {
		font-size: 26px;
	}

	.km-snsCta__cardLead {
		font-size: 16px;
		max-width: calc(100% - 100px);
	}

	.km-snsCta__cardText {
		font-size: 13px;
		max-width: calc(100% - 120px);
	}

	.km-snsCta__pig {
		width: 76px;
		top: -20px;
	}

	.km-snsCta__phone {
		width: 116px;
		right: 0;
		bottom: 30px;
	}
}

/* =============================
   ページトップボタン
   ============================= */
.km-pageTopBtn {
	position: fixed;
	bottom: 32px;
	right: 32px;
	z-index: 200;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-decoration: none;
	opacity: 0;
	pointer-events: none;
	transform: translateY(12px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.km-pageTopBtn.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.km-pageTopBtn__img {
	width: 80px;
	height: auto;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
	transition: transform 0.25s ease;
}

.km-pageTopBtn:hover .km-pageTopBtn__img {
	transform: translateY(-4px);
}

.km-pageTopBtn__text {
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--km-accent, var(--km-accent));
	letter-spacing: 0.05em;
}

@media (max-width: 640px) {
	.km-pageTopBtn {
		bottom: 20px;
		right: 16px;
	}
	.km-pageTopBtn__img {
		width: 54px;
	}
}

/* ==========================================================================
   Page Loader (Bouncing Pig Animation)
   ========================================================================== */
/* TOP初回訪問時の動画ローディングオーバーレイ */
.km-firstVisitVideo {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(24, 24, 24, 0.84);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.28s ease, visibility 0.28s ease;
}

.km-firstVisitVideo.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.km-firstVisitVideo.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.km-firstVisitVideo__inner {
	position: relative;
	width: min(960px, calc(100vw - 48px));
	max-height: min(78vh, 760px);
	padding: 2px;
	border-radius: 14px;
	background: linear-gradient(135deg, #ffd58a 0%, #ff8b5a 45%, #73bdd9 100%);
}

.km-firstVisitVideo__player {
	display: block;
	width: 100%;
	height: auto;
	max-height: inherit;
	background: #000;
	object-fit: contain;
	border-radius: 12px;
}

.km-firstVisitVideo__skip {
	position: absolute;
	top: 14px;
	right: 14px;
	border: 0;
	border-radius: 9999px;
	padding: 8px 16px;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #3b3125;
	background: rgba(255, 255, 255, 0.94);
	cursor: pointer;
}

.km-firstVisitVideo__skip:hover {
	background: #fff;
}

@media (max-width: 640px) {
	.km-firstVisitVideo__inner {
		width: calc(100vw - 24px);
		padding: 2px;
		border-radius: 12px;
	}

	.km-firstVisitVideo__player {
		border-radius: 10px;
	}

	.km-firstVisitVideo__skip {
		top: 10px;
		right: 10px;
		padding: 6px 12px;
		font-size: 12px;
	}
}

@keyframes km-pig-bounce {
    0% { transform: translateY(0) scale(1, 1); }
    100% { transform: translateY(-40px) scale(0.95, 1.05); }
}

@keyframes km-loader-text-flow {
    0% { transform: translateX(-6px); opacity: 0.7; }
    50% { transform: translateX(6px); opacity: 1; }
    100% { transform: translateX(-6px); opacity: 0.7; }
}

/* Google Maps InfoWindow (magazine_map / manual_magazine_map) */
.km-mapInfoWindow {
    max-width: 200px;
    line-height: 1.3;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.km-mapInfoWindow__title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: #333;
}

.km-mapInfoWindow__address,
.km-mapInfoWindow__phone {
    margin: 0 0 8px;
    font-size: 12px;
    color: #666;
    line-height: 1.3;
}

.km-mapInfoWindow__button {
    width: 100%;
    margin-top: 4px;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 11px;
    cursor: pointer;
    background: #0073aa;
    color: #fff;
}

/* 記事内の店舗情報へスクロールした直後の視線誘導用ハイライト */
.store-card.is-store-highlighted {
    border: 3px solid #0073aa;
    box-shadow: 0 0 10px rgba(0, 115, 170, 0.3);
}

/* SNS Icons in Header (Mobile) */
.km-header__sns {
	display: none;
	align-items: center;
	gap: 12px;
	margin-right: 12px;
}

.km-header__snsItem {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s;
}

.km-header__snsItem:hover {
	opacity: 0.7;
}

.km-header__snsItem img {
	width: auto;
	height: 28px;
	display: block;
}

/* X logo specific adjustment */
.km-header__snsItem img[alt="X"] {
	height: 24px;
}

@media (max-width: 1024px) {
	.km-header__sns {
		display: flex;
	}
}

/* Helper for SP-only visibility */
.km-u-sp-only {
  display: none;
}

@media (max-width: 640px) {
  .km-u-sp-only {
    display: block;
  }
  span.km-u-sp-only {
    display: inline;
  }
}

/* ------------------------------------------------------------
 * モバイルヘッダー最終調整
 * - 競合が多いヘッダー定義の最終値をここで固定
 * ---------------------------------------------------------- */
@media (max-width: 640px) {
	.km-header {
		overflow: visible;
	}

	.km-header__inner {
		position: static;
	}

	.km-header__inner.km-container {
		padding-left: 20px;
		padding-right: 12px;
	}

	body .km-header__logos {
		flex: 1 1 auto;
		min-width: 0;
		max-width: calc(100% - 152px);
		overflow: hidden;
	}

	.km-header__iconLink {
		margin-left: 2px;
	}

	body:not(.is-pig-game-playing) .km-header__icon {
		width: 80px;
		height: 80px;
	}

	body.is-pig-game-playing .km-header__icon {
		width: 44px;
		height: 44px;
	}

	body .km-header__menuBtnIcon {
		width: 52px;
		height: 52px;
	}

	body .km-header__menuBtn {
		width: 66px;
		height: 66px;
		min-width: 66px;
	}

	body .km-header__sns {
		position: static;
		top: auto;
		right: auto;
		gap: 10px;
		margin-right: 0;
		margin-left: 4px;
		flex: 0 0 auto;
		z-index: auto;
	}

	body .km-header__snsItem img {
		height: 30px;
	}

	body .km-header__snsItem img[alt="X"] {
		height: 27px;
	}
}