/* ===== トップページ ===== */

/* ボタン(金色・矢印つき / ピンク・採用) */
.top-btn {
	display: inline-flex;
	align-items: flex-start;
	gap: 33px;
	height: 58px;
	padding: 14px 19px 14px 40px;
	border: 1px solid #fff;
	border-radius: 5px;
	background: linear-gradient(#ad8838, #d5ba8e);
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
	color: #fff;
	font-weight: 700;
	line-height: 28px;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity .2s;
}
.top-btn::after {
	content: "";
	flex: none;
	width: 24px;
	height: 24px;
	background: url(../images/top/icon-arrow.svg) 0 0 / 100% 100% no-repeat;
}
.top-btn:hover { opacity: .85; }
.top-btn--entry {
	align-items: center;
	gap: 12px;
	padding: 0 26px 0 20px;
	border-color: var(--c-pink-border);
	background: linear-gradient(#fe8181, #fb9987);
}
.top-btn--entry::after { content: none; }
.top-btn--entry img { flex: none; width: 32px; height: 32px; }

/* 背景の写真・ぼかしを置くセクション共通 */
.top-mv,
.top-work,
.top-concept {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.top-mv__bg::before,
.top-mv__bg::after,
.top-mv::after,
.top-work::before,
.top-work::after,
.top-concept::before,
.top-concept::after,
.top-concept__inner::before {
	content: "";
	position: absolute;
	z-index: -1;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/* MV(ヘッダー86pxの下から。Figmaのyから86を引く) */
.top-mv { height: 748px; }
.top-mv__bg { position: absolute; inset: 0; z-index: -1; }
.top-mv__bg::before {
	top: -86px;
	left: 50%;
	width: max(100%, 1442px);
	height: 834px;
	transform: translateX(-50%);
	background-image: url(../images/top/mv-photo.webp);
}
.top-mv__bg::after {
	top: -109px;
	left: 50%;
	width: max(100% + 22px, 1462px);
	height: 645px;
	transform: translateX(-50%);
	background-image: url(../images/top/mv-sky.webp);
	mix-blend-mode: overlay;
}
.top-mv::after {
	top: -89px;
	left: 50%;
	width: max(100%, 1440px);
	height: 620px;
	transform: translateX(-50%);
	background-image: linear-gradient(-11.07deg, rgba(144, 193, 247, 0) 34.1%, #0f81ff 92.7%);
}
.top-mv__inner {
	width: min(1200px, 100% - 40px);
	margin-inline: auto;
	padding-top: 118px;
}
.top-mv__title {
	font-family: var(--f-serif);
	font-size: 60px;
	font-weight: 700;
	line-height: 100px;
	white-space: nowrap;
}
.top-mv__line { display: block; }
.top-mv__line--1 { text-indent: -36px; }
.top-mv__br { display: none; }
.top-mv__small { margin-left: -31px; font-size: 40px; }
.top-mv__lead {
	margin-top: -1px;
	font-size: 20px;
	font-weight: 500;
	line-height: 40px;
}
.top-mv__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 40px;
}

/* 数字で見る田嶋畜産 */
.top-numbers {
	padding-bottom: 79px;
	background: var(--c-brown-light);
}
.top-numbers__list {
	display: grid;
	grid-template-columns: repeat(4, 180px);
	justify-content: center;
	column-gap: 70px;
	margin-top: 2px;
}
.top-numbers__photo {
	position: relative;
	width: 180px;
	height: 180px;
	padding: 11px;
}
.top-numbers__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url(../images/top/num-ring.svg) 0 0 / 100% 100% no-repeat;
}
.top-numbers__photo img {
	display: block;
	width: 158px;
	height: 158px;
	border-radius: 50%;
}
.top-numbers__data {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	margin-top: 3px;
	line-height: 28px;
}
.top-numbers__label {
	font-size: 18px;
	font-weight: 500;
}
.top-numbers__value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 3px;
	height: 28px;
}
.top-numbers__num {
	color: var(--c-red);
	font-family: var(--f-en);
	font-size: 50px;
	font-weight: 600;
	line-height: 28px;
}
.top-numbers__unit {
	font-weight: 700;
	line-height: 28px;
}
.top-numbers__item--red .top-numbers__unit { color: var(--c-red); }

/* いのちを育てて、食卓へ。 */
.top-work { padding-bottom: 70px; }
.top-work::before {
	top: 0;
	left: max(calc(50% - 268px), calc(100% - 1000px));
	width: 1000px;
	height: 707px;
	background-image: url(../images/top/work-bg.webp);
	background-size: cover;
}
.top-work::after {
	top: 0;
	left: calc(50% - 477px);
	width: 720px;
	height: 633px;
	background-image:
		linear-gradient(263.64deg, #fff9fb 54.12%, rgba(255, 255, 255, 0) 91.22%),
		linear-gradient(96.36deg, #fff9fb 54.12%, rgba(255, 255, 255, 0) 91.22%);
	background-position: 0 0, 292px 0;
	background-size: 428px 633px;
}
.top-work__inner {
	display: flex;
	align-items: center;
	gap: 42px;
	width: min(1200px, 100% - 40px);
	margin: 21px auto 0;
}
.top-work__img {
	flex: none;
	width: 405px;
	height: 270px;
	border-radius: 10px;
	object-fit: cover;
}
.top-work__body {
	max-width: 655px;
	line-height: 32px;
}

/* 私たちの『日本一美味しい豚肉を作る』 */
.top-concept { height: 461px; }
.top-concept::before {
	z-index: -3;
	top: -86px;
	left: max(calc(50% - 275px), calc(100% - 1000px));
	width: 1000px;
	height: 595px;
	background-image: url(../images/top/concept-bokeh.webp);
	background-size: cover;
}
.top-concept::after {
	z-index: -2;
	top: -82px;
	left: calc(50% - 1030px);
	width: 1249px;
	height: 937px;
	background-image: url(../images/top/concept-pig.webp);
}
.top-concept__inner {
	position: relative;
	width: min(1200px, 100% - 40px);
	margin-inline: auto;
	padding: 116px 0 0 531px;
}
.top-concept__inner::before {
	top: 0;
	left: calc(50% - 254.5px);
	width: 438px;
	height: 461px;
	background-image: linear-gradient(217.63deg, #fdfaf6 32.21%, rgba(255, 255, 255, 0) 50.16%);
}
.top-concept__title {
	font-family: var(--f-serif);
	font-size: 22px;
	font-weight: 700;
	line-height: 40px;
}
.top-concept__line { display: block; height: 40px; }
.top-concept__line + .top-concept__line { margin-top: 16px; }
.top-concept__em { font-size: 36px; }
.top-concept__sign {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 11px;
	line-height: 32px;
}
.top-concept__name {
	font-family: var(--f-serif);
	font-size: 22px;
	font-weight: 700;
}
.top-concept__btn { margin-top: 41px; }

/* 田嶋畜産への3つの入り口 */
.top-guide {
	padding-bottom: 80px;
	background: var(--c-brown-light);
}
.top-guide__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 321px));
	justify-content: center;
	column-gap: 20px;
	width: min(1003px, 100% - 40px);
	margin-inline: auto;
}
.top-guide__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.top-guide__img {
	display: block;
	width: calc(100% - 3px);
	aspect-ratio: 318 / 202;
	margin-inline: auto;
	border-radius: 10px;
	object-fit: cover;
}
.top-guide__title {
	position: relative;
	align-self: stretch;
	margin-top: 20px;
	padding: 0 0 10px 39px;
	border-bottom: 2px solid var(--c-brown-line);
	color: var(--c-logo-brown);
	font-size: 20px;
	font-weight: 500;
	line-height: 32px;
}
.top-guide__title::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 0;
	width: 27px;
	height: 26px;
	background: url(../images/top/icon-check.png) 0 0 / 100% 100% no-repeat;
	opacity: .5;
	mix-blend-mode: multiply;
}
.top-guide__text {
	flex: 1;
	margin-top: 6px;
	padding-left: 3px;
	line-height: 32px;
}
.top-guide__btn { margin: 14px 0 0 22px; }

/* ===== タブレット ===== */
@media (max-width: 1239px) {
	.top-mv { height: auto; padding-bottom: 80px; }
	.top-mv__inner { padding-top: 100px; }
	.top-mv__bg::before { left: 0; width: 100%; height: calc(100% + 86px); transform: none; background-size: cover; background-position: center bottom; }
	.top-mv__bg::after { left: 0; width: 100%; height: 78%; transform: none; }
	.top-mv::after { left: 0; width: 100%; height: 75%; transform: none; }
	.top-mv__title { font-size: min(60px, 4.6vw); line-height: 1.65; }
	.top-mv__line--1 { text-indent: -.6em; }
	.top-mv__small { margin-left: -.775em; font-size: .67em; }
	.top-concept { height: auto; padding-bottom: 51px; }
	.top-concept__line { height: auto; }
	.top-concept__inner { padding-left: min(531px, 45%); }
	.top-concept__inner::before { left: calc(min(531px, 45%) - 186px); }
	.top-concept__em { display: block; }
}

@media (max-width: 1023px) {
	.top-numbers__list { grid-template-columns: repeat(2, 180px); row-gap: 40px; }
	.top-work::after { left: -300px; }
	.top-work__inner { flex-direction: column; align-items: center; gap: 32px; width: min(655px, 100% - 40px); }
	.top-work__img { width: min(405px, 100%); height: auto; aspect-ratio: 405 / 270; }
	.top-concept { height: auto; padding-bottom: 60px; }
	.top-concept::after { left: -560px; }
	.top-concept__inner { padding: 80px 0 0 min(400px, 40%); }
	.top-concept__inner::before { content: none; }
	.top-concept__inner::after {
		content: "";
		position: absolute;
		z-index: -1;
		inset: 0 -20px -60px calc(min(400px, 40%) - 80px);
		background: linear-gradient(90deg, rgba(253, 250, 246, 0), rgba(253, 250, 246, .85) 80px);
	}
	.top-concept__em { font-size: 30px; }
	.top-guide__list { grid-template-columns: minmax(0, 420px); row-gap: 40px; }
	.top-guide__btn { margin-top: 16px; }
}

/* ===== スマホ ===== */
@media (max-width: 767px) {
	.top-btn { padding-left: 24px; gap: 20px; }
	.top-btn--entry { padding: 0 20px 0 16px; gap: 10px; }
	.top-mv { padding-bottom: 56px; }
	.top-mv__bg::before { background-position: 70% bottom; }
	.top-mv__bg::after { top: 0; height: 70%; background-size: cover; }
	.top-mv::after { top: 0; }
	.top-mv__inner { padding-top: 56px; }
	.top-mv__title { font-size: min(32px, 7.4vw); line-height: 1.6; }
	.top-mv__br { display: inline; }
	.top-mv__line--1 { text-indent: -.5em; }
	.top-mv__lead { margin-top: 16px; font-size: 15px; line-height: 2; }
	.top-mv__lead br { display: none; }
	.top-mv__btns { margin-top: 28px; gap: 12px; }
	.top-numbers { padding-bottom: 56px; }
	.top-numbers__list { grid-template-columns: repeat(2, minmax(0, 150px)); column-gap: 24px; }
	.top-numbers__photo { width: 100%; height: auto; aspect-ratio: 1; padding: 6%; }
	.top-numbers__photo img { width: 100%; height: auto; }
	.top-numbers__label { font-size: 16px; }
	.top-numbers__num { font-size: 40px; }
	.top-work { padding-bottom: 56px; }
	.top-work__inner { margin-top: 0; }
	.top-work__body { line-height: 1.9; }
	.top-concept { padding-bottom: 48px; }
	.top-concept::before { left: 0; width: 100%; height: 100%; top: 0; }
	.top-concept::after { top: auto; bottom: 0; left: -40px; width: 520px; height: 390px; opacity: .45; }
	.top-concept__inner { padding: 48px 0 0; }
	.top-concept__inner::after { content: none; }
	.top-concept__title { font-size: 18px; line-height: 1.8; }
	.top-concept__line + .top-concept__line { margin-top: 6px; }
	.top-concept__em { font-size: min(26px, 6vw); line-height: 1.5; }
	.top-concept__name { font-size: 20px; }
	.top-concept__btn { margin-top: 28px; }
	.top-guide { padding-bottom: 56px; }
	.top-guide__title { font-size: 18px; }
	.top-guide__text { line-height: 1.9; }
	.top-guide__btn { margin-left: 3px; }
}