/* COMES A TIME 30th / Silver and Gold 25th ANNIVERSARY EVENT */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@600&family=Open+Sans:wght@400;600;700;800&display=swap');

/* 英字は Open Sans、日本語はサイト共通のゴシック体（Open Sans に無い文字だけ後ろのフォントで表示される） */
.cat30-wrap,
.cat30-wrap .lato,
.cat30-wrap button {
	font-family: 'Open Sans', YuGothic, "Yu Gothic", 游ゴシック, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
}

/*
 * ファーストビュー（メイン画像まで）は白地に黒のアイコン、それ以降は黒地。
 * 固定表示のアイコン類は、スクロールで黒い部分に重なったら白に切り替える
 * （body に付く cat30-dark-side / cat30-dark-top。テンプレート末尾のスクリプト）
 */
body {
	background-color: #0d0c0a !important;
	color: #ece6da;
}
.loading-frame {
	background-color: #fff !important;
}
/*
 * ヘッダーはページの上に重ねて置き、場所を取らないようにする（メイン画像をページの一番上から置くため）。
 * body を基準にするのは、ログイン中の管理バーでページが下がったときも一緒に下がるように
 */
body {
	position: relative;
}
.header-pc {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
}
/* スマホのヘッダーは固定表示なので、その下に入っている高さ 48px の空きを無くす */
.header-mobile + .visible-xs {
	display: none !important;
}
.header-mobile {
	background-color: #fff !important;
	transition: background-color 0.3s;
}
.header-mobile img,
.right-tab-pc img,
img[alt="by comes a time co.,ltd production"] {
	transition: filter 0.3s;
}
.right-tab-pc li a {
	transition: color 0.3s, opacity 0.3s;
}
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
	transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000), background-color 0.3s;
}

/* 黒い部分に重なったら：左右の固定アイコン（画面の中ほど） */
body.cat30-dark-side .right-tab-pc img,
body.cat30-dark-side img[alt="by comes a time co.,ltd production"] {
	filter: invert(1);
}
body.cat30-dark-side .right-tab-pc li a,
body.cat30-dark-side .right-tab-pc li a:hover {
	color: #ece6da;
}
/* 黒い部分に重なったら：画面上端のヘッダー・メニューボタン */
body.cat30-dark-top .header-mobile {
	background-color: #0d0c0a !important;
}
body.cat30-dark-top .header-mobile img {
	filter: invert(1);
}
body.cat30-dark-top .drawer-hamburger-icon,
body.cat30-dark-top .drawer-hamburger-icon:before,
body.cat30-dark-top .drawer-hamburger-icon:after {
	background-color: #ece6da;
}
.drawer-open .drawer-hamburger-icon,
body.cat30-dark-top.drawer-open .drawer-hamburger-icon {
	background-color: transparent;
}
/* 開いたメニューは白地のままなので × は黒に戻す */
.drawer-open .drawer-hamburger-icon:before,
.drawer-open .drawer-hamburger-icon:after,
body.cat30-dark-top.drawer-open .drawer-hamburger-icon:before,
body.cat30-dark-top.drawer-open .drawer-hamburger-icon:after {
	background-color: #222;
}

/* フッターは常に黒い部分にある */
.footer img {
	filter: invert(1);
}
.footer,
.footer .text-black {
	color: #ece6da;
}
.btn-index .btn-black {
	background-color: transparent;
	border: #ece6da 1px solid;
}
.btn-index .btn-black:hover {
	background-color: #ece6da;
	color: #0d0c0a;
}
.cat30-wrap {
	width: 80%;
	max-width: 1040px;
	margin: 0 auto;
	padding: 0;
	color: #ece6da;
}
.cat30-wrap img {
	display: block;
	width: 100%;
	height: auto;
}
.cat30-noimage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #1d1a15;
	color: #5c5345;
	font-size: 1.4rem;
	letter-spacing: 0.2em;
}
.cat30-caption {
	font-size: 1.1rem;
	color: #9b9182;
	margin: 8px 0 0;
}

/* HERO */
.cat30-hero {
	text-align: center;
	margin: 0;
}
/*
 * メイン画像の白い枠は、ページの一番上から画面の高さぴったり（100vh）。
 * 上下に同じ余白（ヘッダーの高さ分）をとって画像を画面の中央に置く。
 * 幅は左右の固定アイコン・縦書き文字をよける。位置を測る必要がないので、読み込み途中も大きさが変わらない
 */
.cat30-hero-img {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: calc(100vw - 140px);
	height: 100vh;
	padding: 82px 0;
	margin: 0 0 0 calc(50% - 50vw + 70px);
	background: #fff;
	/* 画像の下端から上を、左右いっぱい・ページ上端まで白にする（ヘッダーの後ろも白）。
	   影は横スクロールを生まないので、白い影を広げて下側だけ切り取る */
	box-shadow: 0 0 0 100vmax #fff;
	clip-path: inset(-100vmax -100vmax 0 -100vmax);
}
.cat30-hero-img img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}
/* メイン画像の下の見出し・日付・会場（上下に広めの余白） */
.cat30-hero-text {
	padding: 140px 0 150px;
}
.cat30-hero-title {
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 36px;
}
/* 3行とも同じ大きさ。1・2行目（COMES A TIME／Silver and Gold）は銀色、3行目（ANNIVERSARY）は金色。
   画面幅に合わせて縮み、いちばん長い行も1行に収まる */
.cat30-hero-line {
	display: block;
	font-size: clamp(3.6rem, 5vw, 6.4rem);
	letter-spacing: 0.02em;
	color: #c4c7cc;
}
.cat30-hero-line3 {
	color: #c9a96e;
}
.cat30-hero-date {
	font-size: 2.2rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	margin: 0 0 8px;
}
.cat30-hero-venue {
	font-size: 1.4rem;
	letter-spacing: 0.1em;
	margin: 0;
}
.cat30-hero-venue span {
	display: inline-block;
}

/*
 * 背景のロゴ：画面の中央に固定し、スクロールしても黒地にうっすら見える。
 * 白地に黒のロゴ画像を反転して白抜きにし、screen で重ねて黒い部分を透明にする。
 * ファーストビューの白い枠や、カードなどの背景がある部分はその上に重なる
 */
.cat30-bg-logo {
	position: fixed;
	inset: 0;
	z-index: -1;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.cat30-bg-logo img {
	width: min(86vw, 1400px);
	max-height: 86vh;
	object-fit: contain;
	filter: invert(1);
	mix-blend-mode: screen;
	opacity: 0.045;
}

/* INTRO */
.cat30-intro {
	text-align: center;
	margin: 0;
	padding: 0 0 120px;
}
.cat30-intro p {
	font-size: 1.5rem;
	line-height: 2.2;
	margin: 0 0 1.6em;
}

/* SECTION */
/*
 * セクションごとに背景を黒とグレーの帯で交互にする（画面の幅いっぱい）。
 * 帯は影を左右に広げて作るので横スクロールは出ない。グレーは少し透けて背景のロゴが見える
 */
.cat30-section {
	padding: 110px 0;
	margin: 0;
	background: #0d0c0a;
	box-shadow: 0 0 0 100vmax #0d0c0a;
	clip-path: inset(0 -100vmax);
}
.cat30-section:nth-of-type(odd) {
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 0 0 100vmax rgba(255, 255, 255, 0.08);
}
/* グレーの帯の見出しはシルバー（黒の帯は金色） */
.cat30-wrap .cat30-section:nth-of-type(odd) .cat30-heading span {
	color: #c4c7cc;
}
/* 黒の帯は、背景のロゴが見えるよう透明にする */
.cat30-section:nth-of-type(even) {
	background: transparent;
	box-shadow: none;
}
/* セクションの見出し：BRUTUS のように、英字を大きく詰めて置き、その下に日本語を小さく */
.cat30-heading {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-align: center;
	margin: 0 0 48px;
}
.cat30-wrap .cat30-heading span {
	display: block;
	/* Futura に近い形の Jost（英字だけ） */
	font-family: 'Jost', 'Open Sans', sans-serif;
	font-size: clamp(4.4rem, 5.4vw, 8.4rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	color: #c9a96e;
	margin: 0 0 12px;
}
.cat30-lead {
	font-size: 1.5rem;
	line-height: 2;
	text-align: center;
	margin: 0 0 40px;
}
.cat30-note {
	font-size: 1.2rem;
	line-height: 1.8;
	color: #9b9182;
	margin: 24px 0 0;
}

/* DAYS (2カラム共通) */
.cat30-days {
	display: flex;
	gap: 40px;
}
.cat30-days > * {
	flex: 1;
	min-width: 0;
}
.cat30-day {
	background: rgba(0, 0, 0, 0.35);
	padding: 36px 40px;
}
.cat30-day-label {
	display: inline-block;
	background: #c9a96e;
	color: #0d0c0a;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	padding: 4px 14px;
	margin: 0 0 12px;
}
.cat30-day-date {
	font-size: 2rem;
	font-weight: 600;
	margin: 0 0 20px;
}
.cat30-day dl {
	margin: 0;
}
.cat30-day dt {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 16px 0 4px;
	border-top: #2f2b25 1px solid;
}
.cat30-day dd {
	font-size: 1.4rem;
	line-height: 1.8;
	margin: 0 0 16px;
}
.cat30-day dd b {
	display: block;
}
/* SPACE 1 アイテム */
.cat30-saletime {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 6px 28px;
	max-width: 720px;
	margin: 0 auto 50px;
	padding: 18px 24px;
	border-top: #2f2b25 1px solid;
	border-bottom: #2f2b25 1px solid;
}
.cat30-saletime dt {
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	color: #c9a96e;
}
.cat30-saletime dd {
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0;
}
.cat30-brand-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 8px;
	margin: 0 0 40px;
}
.cat30-brand-filter button {
	background: transparent;
	border: #2f2b25 1px solid;
	color: #9b9182;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	padding: 7px 14px;
	cursor: pointer;
	transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.cat30-brand-filter button:hover {
	color: #ece6da;
	border-color: #9b9182;
}
.cat30-brand-filter button.is-active {
	color: #0d0c0a;
	background: #c9a96e;
	border-color: #c9a96e;
}
.cat30-items {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px 24px;
}
.cat30-item[hidden] {
	display: none;
}
/* ブランドのルック画像（1300×1580 など）に合わせた縦長。比率が違う画像は上下左右を切って合わせる */
.cat30-item-img img,
.cat30-item-img .cat30-noimage {
	aspect-ratio: 1300 / 1580;
	object-fit: cover;
	object-position: center top;
}
.cat30-item-brand {
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.05em;
	margin: 12px 0 0;
}
.cat30-item-name {
	font-size: 1.3rem;
	line-height: 1.6;
	color: #9b9182;
	margin: 4px 0 0;
}

/* SCHEDULE の下の会場住所 */
.cat30-schedule-venues {
	display: flex;
	gap: 40px;
	margin: 30px 0 0;
	padding: 24px 0 0;
	border-top: #2f2b25 1px solid;
}
.cat30-schedule-venues > div {
	flex: 1;
	min-width: 0;
}
.cat30-schedule-venues dt {
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 4px;
}
.cat30-schedule-venues dd {
	font-size: 1.4rem;
	line-height: 1.8;
	color: #9b9182;
	margin: 0;
}

/* TABLE */
.cat30-table {
	width: 100%;
	border-top: #2f2b25 1px solid;
}
.cat30-table th,
.cat30-table td {
	font-size: 1.4rem;
	line-height: 1.8;
	vertical-align: top;
	padding: 14px 0;
	border-bottom: #2f2b25 1px solid;
}
.cat30-table th {
	width: 5em;
	font-weight: 600;
}
.cat30-table small {
	font-size: 1.2rem;
	color: #9b9182;
}

/* FILM */
.cat30-film-body,
.cat30-media {
	display: flex;
	gap: 50px;
	align-items: flex-start;
}
.cat30-film-img,
.cat30-media-img {
	flex: 0 0 55%;
}
/* FILM SCREENING は画像を幅いっぱいに大きく、文章と表はその下に（縦並び） */
.cat30-film-body {
	flex-direction: column;
	align-items: stretch;
	gap: 40px;
}
.cat30-film-img {
	flex: none;
	width: 100%;
}
.cat30-film-text {
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}
.cat30-film-text .cat30-table {
	text-align: left;
}
.cat30-film-text,
.cat30-media-text {
	flex: 1;
	min-width: 0;
}
/* UNTITLED は写真を幅いっぱいに大きく、文章はその下に中央ぞろえ（縦並び） */
.cat30-media {
	flex-direction: column;
	align-items: stretch;
	gap: 40px;
}
.cat30-media-img {
	flex: none;
	width: 100%;
}
.cat30-media-text {
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}
.cat30-film-catch {
	display: inline-block;
	font-size: 1.8rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	color: #c9a96e;
	border-bottom: #c9a96e 2px solid;
	padding: 0 0 4px;
	margin: 0 0 20px;
}
.cat30-film-text p,
.cat30-media-text p {
	font-size: 1.5rem;
	line-height: 2;
	margin: 0 0 1.4em;
}

/* FOOD */
.cat30-food-list {
	display: flex;
	flex-wrap: wrap;
	gap: 50px 40px;
}
.cat30-food-item {
	flex: 0 0 calc(50% - 20px);
	min-width: 0;
}
.cat30-food-img {
	margin: 0 0 18px;
}
.cat30-food-img img,
.cat30-food-img .cat30-noimage {
	aspect-ratio: 16 / 10;
	object-fit: cover;
}
.cat30-food-no {
	display: inline-block;
	background: #c9a96e;
	color: #0d0c0a;
	font-size: 1.2rem;
	letter-spacing: 0.1em;
	padding: 2px 10px;
	margin: 0 0 10px;
}
.cat30-food-item h4 {
	font-size: 2.2rem;
	font-weight: 700;
	margin: 0 0 8px;
}
.cat30-food-item p {
	font-size: 1.4rem;
	line-height: 1.8;
	margin: 0 0 8px;
}
.cat30-food-item .cat30-food-shop {
	font-size: 1.5rem;
	font-weight: 600;
}
.cat30-ig {
	display: inline-block;
	font-size: 1.3rem;
	color: #ece6da;
	margin: 4px 0 0;
}
.cat30-ig:hover {
	color: #c9a96e;
	text-decoration: none;
}

/* AFTER PARTY */
.cat30-party .cat30-table {
	max-width: 600px;
	margin: 0 auto;
}
.cat30-party .cat30-note {
	text-align: center;
}

/* ACCESS */
/* 会場ごとに文字の行数が違っても、地図の位置と高さが左右でそろうよう、地図を下端に寄せる */
.cat30-venue {
	display: flex;
	flex-direction: column;
}
.cat30-venue .cat30-venue-label {
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: #c9a96e;
	margin: 0 0 4px;
}
.cat30-venue h4 {
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 12px;
}
.cat30-venue p {
	font-size: 1.4rem;
	line-height: 1.8;
	margin: 0 0 8px;
}
.cat30-venue-date {
	color: #9b9182;
}
.cat30-venue-date {
	margin-bottom: 16px !important;
}
.cat30-map {
	position: relative;
	aspect-ratio: 4 / 3;
	margin: auto 0 0;
}
.cat30-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.cat30-footer-note {
	font-size: 1.4rem;
	line-height: 2;
	text-align: center;
	margin: 80px 0 60px;
}

/* SP */
@media (max-width: 767px) {
	.cat30-wrap {
		width: auto;
		padding: 0 16px;
	}
	.cat30-hero-img {
		width: calc(100vw - 16px);
		padding: 48px 0;
		margin: 0 0 0 calc(50% - 50vw + 8px);
	}
	.cat30-schedule-venues {
		flex-direction: column;
		gap: 16px;
	}
	.cat30-items {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px 16px;
	}
	.cat30-brand-filter {
		gap: 8px 6px;
		margin-bottom: 28px;
	}
	.cat30-brand-filter button {
		font-size: 1.1rem;
		padding: 6px 10px;
	}
	.cat30-saletime {
		flex-direction: column;
		align-items: center;
		margin-bottom: 36px;
		padding: 16px 0;
	}
	.cat30-hero-text {
		padding: 80px 0 90px;
	}
	.cat30-hero-title {
		margin-bottom: 28px;
	}
	.cat30-hero-line {
		font-size: 2.8rem;
		letter-spacing: 0.01em;
	}
	.cat30-hero-date {
		font-size: 1.7rem;
	}
	.cat30-hero-venue {
		font-size: 1.2rem;
	}
	.cat30-intro {
		text-align: left;
		padding-bottom: 80px;
	}
	.cat30-intro p,
	.cat30-lead {
		font-size: 1.4rem;
		text-align: left;
	}
	.cat30-section {
		padding: 70px 0;
	}
	.cat30-wrap .cat30-heading span {
		font-size: 3.6rem;
	}
	.cat30-heading {
		font-size: 1.3rem;
		margin-bottom: 36px;
	}
	.cat30-days,
	.cat30-film-body,
	.cat30-media {
		flex-direction: column;
		gap: 24px;
	}
	.cat30-film-img,
	.cat30-media-img {
		flex: none;
		width: 100%;
	}
	.cat30-media-text,
	.cat30-film-text {
		text-align: left;
	}
	.cat30-day {
		padding: 24px 20px;
	}
	.cat30-food-item {
		flex: 0 0 100%;
	}
	.cat30-party .cat30-note {
		text-align: left;
	}
}

/*
 * このページ用のナビ（テンプレート末尾のスクリプトが作る）。
 * メイン画像を過ぎたら上から表示（body.cat30-dark-top）。今見ているセクションは金色
 */
html {
	scroll-behavior: smooth;
}
.cat30-section[data-nav] {
	scroll-margin-top: 72px;
}
.cat30-pagenav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 30;
	height: 56px;
	padding: 0 80px;
	background: rgba(13, 12, 10, 0.88);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: #2f2b25 1px solid;
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.5s;
}
body.cat30-dark-top .cat30-pagenav {
	transform: none;
	opacity: 1;
	pointer-events: auto;
}
/* ログイン中は管理バーの下に出す */
body.admin-bar .cat30-pagenav {
	top: 32px;
}
.cat30-pagenav ul {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 34px;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cat30-pagenav li {
	flex: none;
}
.cat30-pagenav a {
	display: block;
	position: relative;
	padding: 6px 0;
	font-family: 'Jost', 'Open Sans', sans-serif;
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: #9b9182;
	text-decoration: none;
	transition: color 0.3s;
}
.cat30-pagenav a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: #c9a96e;
	transform: scaleX(0);
	transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cat30-pagenav a:hover,
.cat30-pagenav a:focus,
.cat30-pagenav a.is-current {
	color: #c9a96e;
	text-decoration: none;
}
.cat30-pagenav a.is-current::after {
	transform: none;
}
@media (max-width: 767px) {
	/* スマホはサイトのヘッダー（48px）の下に出し、横にスワイプして選ぶ */
	.cat30-section[data-nav] {
		scroll-margin-top: 100px;
	}
	.cat30-pagenav {
		top: 48px;
		height: 44px;
		padding: 0;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.cat30-pagenav::-webkit-scrollbar {
		display: none;
	}
	.cat30-pagenav ul {
		justify-content: flex-start;
		gap: 0 24px;
		padding: 0 16px;
		width: max-content;
	}
	.cat30-pagenav a {
		font-size: 1.2rem;
		letter-spacing: 0.08em;
	}
	body.admin-bar .cat30-pagenav {
		top: 48px;
	}
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/*
 * エフェクト
 * html に cat30-anim が付いたとき（テンプレート末尾のスクリプト。動きを減らす設定の人には付けない）だけ動かす。
 * スクリプトが動かなくても、内容はそのまま表示される
 */

/* メイン画像：少し大きい状態からゆっくりフェードイン */
.cat30-anim .cat30-hero-img img,
.cat30-anim .cat30-hero-img .cat30-noimage {
	animation: cat30-hero-in 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
}
@keyframes cat30-hero-in {
	from {
		opacity: 0;
		transform: scale(1.06);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* スクロールで画面に入ったら、下からふわっと現れる */
.cat30-anim .cat30-reveal {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cat30-anim .cat30-reveal.is-inview {
	opacity: 1;
	transform: none;
}

/* 絞り込みで表示されたカード */
.cat30-anim .cat30-item.is-pop {
	animation: cat30-pop 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes cat30-pop {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* 商品・飲食のカード：マウスを乗せると画像がゆっくり拡大 */
.cat30-item-img,
.cat30-food-img {
	overflow: hidden;
}
.cat30-item-img img,
.cat30-food-img img {
	transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.4s;
}
.cat30-item:hover .cat30-item-img img,
.cat30-food-item:hover .cat30-food-img img {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.cat30-item-img img,
	.cat30-food-img img {
		transition: none;
	}
}