@charset "UTF-8";
/*
Theme Name: 一般社団法人漁業情報サービスセンター
Version: 1.0.0
*/


:root {
	--color-body-1: #000;
	--color-theme-1: #0092CA;
	--color-theme-1-1: #0A4D91;
	--color-theme-1-2: #D9F4FF;
	--color-theme-1-3: #0192CB;
	--color-theme-1-4: #EFFBFF;
	--color-theme-2: #FFD000;
	--color-theme-2-1: #F4B626;
	--color-theme-3: #4FBFC0;
	--color-theme-4: #FAEE00;
	--color-gray-1: #F1F1F1;
	--color-gray-2: #E7E6E6;

	--noto-sans: "Noto Sans JP", sans-serif;
	--num: "Urbanist", sans-serif;
	--en: "Ubuntu", sans-serif;
	--fw: 400;
	--lh: calc(32 / 15);
	--op: 0.6;
	--ts: 0.3s;

	--content-w: 1030px;
	--container: var(--content-w);
	--padding: 20px;
	--stack: 80px;
}

@media(max-width: 991px) {
	:root {
		--stack: 60px;
	}
}

html {
	scroll-behavior: smooth;
}

* {
	--font-size: calc((var(--fs) / 16) * 1rem);
	font-size: var(--font-size);
}

::after,
::before,
:where(b, strong, span, i, em) {
	--font-size: calc((var(--fs) / 16) * 1rem);
	font-size: inherit;
}

body {
	--fs: 16;
	line-height: calc(32 / 15);
	color: var(--color-body-1);
	font-family: var(--noto-sans);
	font-weight: var(--fw);
}

@media(max-width: 991px) {
	body {
		--fs: 15;
	}
	body.noscroll {
		overflow: hidden;
		touch-action: pinch-zoom;
	}
}

img {
	max-width: 100%;
	height: auto;
}

[id] {
	scroll-margin-top: 90px;
}

/* :where(a, button) {
	transition: opacity var(--ts);
	&:hover {
		opacity: var(--op);
	}
} */

a {
	color: var(--color-body-1);
	text-decoration: none;
}

a:where(:not([href]), [href=""]) {
	pointer-events: none;
}

a:hover {
	opacity: var(--op);
}

p.small {
	--fs: 14;
	line-height: 1.6;
}

@media (min-width: 768px) {
	a[href^="tel:"] {
		pointer-events: none;
	}
}

main {
	overflow: clip;
}

.container {
	padding-inline: var(--padding);
	max-width: calc(var(--padding) * 2 + var(--container));
}

.stack {
	padding-top: var(--stack);
	padding-bottom: var(--stack);
}

.text-color-theme-1 {
	color: var(--color-theme-1)!important;
}

.text-color-theme-1-1 {
	color: var(--color-theme-1-1)!important;
}

.bg-theme-1-2 {
	background: var(--color-theme-1-2)!important;
}

.bg-theme-1-4 {
	background: var(--color-theme-1-4)!important;
}

/*		header		*/
header {
	position: fixed;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	min-height: 76px;
	background: #FFF;
	padding: 10px 50px;
	top: 0;
	right: 0;
	left: 0;
	box-shadow: 0 4px 4px rgba(0,0,0,0.1);
	z-index: 500;
}

.header-title {
	position: relative;
	margin-bottom: 0;
	z-index: 999;
	.header-logo {
		display: flex;
	}
}

.global-nav-button {
	position: relative;
	width: 50px;
	height: 50px;
	background: var(--color-theme-1);
	border: none;
	border-radius: 50%;
	padding: 0;
	z-index: 999;
	span {
		width: 25px;
		height: 2px;
		background: #FFF;
		position: absolute;
		top: 50%;
		left: 50%;
		border-radius: 2px;
		transition: 0.4s;
		&:nth-child(1) {
			transform: translate(-50%,calc(-50% - 7px));
		}
		&:nth-child(2) {
			transform: translate(-50%,-50%);
		}
		&:nth-child(3) {
			transform: translate(-50%,calc(-50% + 7px));
		}
	}
}

body.noscroll .global-nav-button span {
	&:nth-child(1) {
		transform: translate(-50%,-50%) rotate(45deg);
	}
	&:nth-child(2) {
		opacity: 0;
	}
	&:nth-child(3) {
		transform: translate(-50%,-50%) rotate(-45deg);
	}
}

.header-menu {
	display: flex;
	align-items: center;
	gap: 5px;
	font-family: var(--zen-kaku);
	font-weight: 500;
	list-style: none;
	line-height: calc(20 / 15);
	padding: 0;
	margin-bottom: 0;
	.header-menu-item {
		.header-menu-link {
			--fs: 16;
			font-weight: 500;
			padding: 5px 10px;
		}
		&.header-menu-contact .header-menu-link {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 48px;
			height: 48px;
			background: var(--color-theme-1);
			border-radius: 50%;
			margin-left: 15px;
		}
	}
}

.fixed-nav {
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 5;
}

.fixed-nav-item {
	display: grid;
	grid-template-columns: 54px 1fr;
	align-items: center;
	text-align: center;
	height: 190px;
	--fs: 15;
	font-weight: 500;
	letter-spacing: 0.05em;
	writing-mode: vertical-rl;
	border: 2px solid #FFF;
	border-right: none;
	border-radius: 5px 0 0 5px;
	img {
		height: 100%;
		border-radius: 3px 0 0 0;
	}
	&:nth-child(1) {
		background: var(--color-theme-2);
	}
	&:nth-child(2) {
		color: #FFF;
		background: var(--color-theme-1-1);
	}
	&:nth-child(3) {
		color: #FFF;
		background: var(--color-theme-1);
	}
}

@media(max-width: 1299px) {
	header {
		padding: 10px 25px;
	}
	.header-menu {
		.header-menu-item {
			.header-menu-link {
				--fs: 15;
				padding: 5px;
			}
		}
	}
}

@media(max-width: 1199px) {
	header {
		padding: 10px 20px;
	}
	.header-logo img {
		width: 230px;
	}
	.header-menu {
		.header-menu-item {
			.header-menu-link {
				--fs: 13;
				padding: 5px;
			}
			&.header-menu-contact .header-menu-link {
				width: 40px;
				height: 40px;
				margin-left: 5px;
			}
		}
	}
}

@media(max-width: 991px) {
	body.noscroll header::before {
		content: "";
		width: 100%;
		height: 100%;
		background: #FFF;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		box-shadow: 0 4px 4px rgba(0,0,0,0.1);
		z-index: 50;
	}
	.header-nav {
		width: 100vw;
		height: 100vh;
		background: #FFF;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		overflow: scroll;
		padding: 100px 20px;
		opacity: 0;
		visibility: hidden;
		transition: 0;
	}
	body.noscroll .header-nav {
		opacity: 1;
		visibility: visible;
		transition: 0.4s;
	}
	.header-menu {
		display: block;
		max-width: 600px;
		flex-direction: column;
		margin-inline: auto;
		margin-bottom: 60px;
		.header-menu-item {
			border-bottom: 1px solid #979797;
			.header-menu-link {
				display: block;
				--fs: 20;
				padding: 20px 10px;
			}
			&.header-menu-contact {
				display: none;
			}
		}
	}
	.fixed-nav {
		width: 100%;
		flex-direction: row;
		gap: 0;
		top: auto;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);	
	}
	.fixed-nav-item {
		grid-template-columns: 60px 1fr;
		width: calc(100% / 3);
		height: auto;
		writing-mode: initial;
		border: none;
		border-top: 2px solid #FFF;
		border-radius: 0;
		img {
			border-radius: 0;
		}
	}
}

@media(max-width: 575px) {
	header {
		min-height: 65px;
		padding: 5px 20px;
	}
	.header-menu {
		.header-menu-item {
            .header-menu-link {
				--fs: 16;
				padding: 15px 10px;
			}
		}
	}
	.global-nav-button {
		width: 45px;
		height: 45px;
		span {
			width: 22px;
		}
	}
	.fixed-nav-item {
		min-height: 50px;
		grid-template-columns: 1fr;
		img {
			display: none;
		}
	}
}

/*		フッター		*/
.footer {
	position: relative;
	--container: 1130px;
	padding-block: 100px;
}

.footer-content {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 30px;
	margin-bottom: 70px;
}

.footer-logo {
	display: inline-block;
	margin-bottom: 30px;
}

.footer-address {
	--fs: 15;
	font-size: var(--font-size);
	line-height: calc(28 / 15);
	margin-bottom: 0;
}

.footer-list {
	column-count: 2;
	list-style: none;
	padding: 0;
	margin-bottom: 0;
	li {
		margin-bottom: 20px;
	}
	a {
		display: block;
		--fs: 15;
		line-height: calc(20 / 15);
		padding: 5px;
	}
}

.footer-other-content {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	border-top: 1px solid #979797;
	padding-top: 20px;
}

.footer-other-list {
	display: flex;
	gap: 25px;
	list-style: none;
	padding: 0;
	margin-bottom: 0;
	a {
		--fs: 14;
		color: var(--color-theme-1-1);
	}
}

.copyright {
	--fs: 14;
	font-size: var(--font-size);
	color: #979797;
	margin-bottom: 0;
}

.page-top {
	width: 48px;
	height: 48px;
	border-radius: 10px 0 0 0;
	background: var(--color-theme-1);
	position: absolute;
	bottom: 0;
	right: 0;
	&::before {
		content: "";
		width: 16px;
		aspect-ratio: 16 / 14;
		background: url(images/arrow-right-bold.svg) center / cover;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%) rotate(-90deg);
	}
}

@media(max-width: 991px) {
	.footer {
		padding-top: 70px;
		padding-bottom: 160px;
	}
	.footer-content {
		grid-template-columns: 1fr;
		margin-bottom: 10px;
	}
	.footer-list {
		li {
			a {
				position: relative;
				padding-left: 25px;
				&::before {
					content: "";
					width: 16px;
					aspect-ratio: 49 / 23;
					background: url(images/icon-fish.svg) no-repeat center / cover;
					position: absolute;
					top: 12px;
					left: 0;
				}
			}
		}
	}
	.footer-other-content {
		display: block;
	}
	.footer-other-list {
		margin-bottom: 30px;
	}
	.copyright {
		text-align: center;
	}
	.page-top {
		bottom: 60px;
	}
}

@media(max-width: 575px) {
	.footer {
		padding-bottom: 100px;
	}
	.footer-logo {
		margin-bottom: 10px;
	}
	.footer-content {
		margin-bottom: 20px;
	}
	.footer-list {
		column-count: 1;
		li {
			margin-bottom: 5px;
			a {
				--fs: 14;
			}
		}
	}
	.footer-other-list {
		display: grid;
		grid-template-columns: repeat(2,1fr);
		gap: 0 20px;
	}
	.copyright {
		--fs: 12;
	}
	.page-top {
		bottom: 50px;
	}
}

/*		共通		*/

.section-title {
	display: grid;
	gap: 10px;
	margin-bottom: 25px;
}

.section-title-ja {
	--fs: 34;
	font-size: var(--font-size);
	font-weight: bold;
	letter-spacing: 0.05em;
	margin-bottom: 0;
}

.section-title-en {
	display: flex;
	gap: 13px;
	--fs: 16;
	font-size: var(--font-size);
	font-family: var(--en);
	font-weight: bold;
	line-height: 1;
	color: var(--color-theme-1);
	order: -1;
	&::before {
		content: "";
		display: block;
		width: 27px;
		aspect-ratio: 27 / 13;
		background: url(images/icon-fish.svg) no-repeat center / contain;
	}
}

.more-link {
	--fs: 15;
	font-size: var(--font-size);
	display: flex;
	gap: 10px;
	align-items: center;
	max-inline-size: max-content;
	&::after {
		content: "";
		width: 24px;
		height: 24px;
		background: url(images/arrow-right.svg) no-repeat center / 10px, var(--color-theme-1-1);
		border-radius: 50%;
	}
}

.more-button {
	display: block;
	--fs: 16;
	font-weight: 500;
	line-height: calc(23 / 16);
	color: #FFF;
	text-align: center;
	background: var(--color-theme-1-1);
	border-radius: 50px;
	min-width: min(280px,100%);
	max-inline-size: max-content;
	padding: 12px 50px;
	box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
	position: relative;
	&::after {
		content: "";
		width: 16px;
		aspect-ratio: 16 / 14;
		background: url(images/arrow-right-bold.svg) center / cover;
		position: absolute;
		top: 50%;
		right: 20px;
		transform: translateY(-50%);
	}
	&[target="_blank"]::after {
		width: 15px;
		aspect-ratio: 1 / 1;
		background: url(images/icon-tab.svg) center / cover;
	}
	&[download]::after {
		width: 13px;
		aspect-ratio: 13 / 15;
		background: #FFF;
		--mask: url(images/icon-download.svg) no-repeat center / contain;
		-webkit-mask: var(--mask);
        mask: var(--mask);
	}
}

@media(max-width: 991px) {
	.section-title {
		gap: 5px;
	}
	.section-title-ja {
		--fs: 28;
	}
	.section-title-en {
		gap: 5px;
		--fs: 15;
		&::before {
			width: 22px;
		}
	}
}

/*		トップページ		*/
.top-hero {
	--container: 1140px;
	background: url(images/hero-bg@2x.jpg) center / cover;
}

.top-hero-text {
	display: grid;
	place-content: center start;
	max-height: 800px;
	height: 100svh;
	padding-top: 250px;
	h2 {
		--fs: 52;
		font-size: var(--font-size);
		line-height: calc(74 / 52);
		font-weight: bold;
		color: #FFF;
		text-shadow: 4px 4px 4px rgba(0,0,0,0.2);
		margin-bottom: 20px;
		span {
			--fs: 66;
			font-size: var(--font-size);
			margin-inline: -0.25em;
		}
	}
	ul {
		list-style: none;
		padding: 0;
		margin-bottom: 10px;
		li {
			--fs: 33;
			font-size: var(--font-size);
			font-weight: 500;
			line-height: 1;
			color: #FFF;
			background: var(--color-theme-1-1);
			max-inline-size: max-content;
			padding: 5px 8px;
			margin-bottom: 12px;
		}
	}
	p {
		--fs: 30;
		line-height: calc(57 / 30);
		font-weight: bold;
		letter-spacing: 0.05em;
		color: #FFF;
		text-shadow: 4px 4px 4px rgba(0,0,0,0.2);
		margin-bottom: 0;
	}
}

@media(max-width: 991px) {
	.top-hero-text {
		height: auto;
		min-height: 600px;
		padding-top: 230px;
		h2 {
			--fs: 40;
			span {
				--fs: 50;
			}
		}
		ul {
			margin-bottom: 0;
			li {
				--fs: 18;
				margin-bottom: 5px;
			}
		}
		p {
			--fs: 25;
		}
	}
}

@media(max-width: 575px) {
	.top-hero-text {
		padding-bottom: 40px;
	}
}



.top-nav {
	position: relative;
	padding-bottom: 150px;
	&::before {
		content: "";
		width: 100%;
		height: 100%;
		background: linear-gradient(to bottom, #CAE5F8 0%, #CAE5F8 75%, #FFFFFF 100%);
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		z-index: -1;
	}
}

.top-nav-content {
	display: grid;
	grid-template-columns: 18% 1fr;
	gap: 100px;
	margin-top: -30px;
}

.top-nav-list {
	display: grid;
	gap: 5px;
	list-style: none;
	padding: 0;
	margin-bottom: 0;
	a {
		display: grid;
		grid-template-columns: 68px 1fr 49px;
		align-items: center;
		gap: 25px;
		--fs: 23;
		letter-spacing: 0.05em;
		font-weight: bold;
		background: #FFF;
		padding: 10px 30px;
		&::after {
			content: "";
			width: 49px;
			aspect-ratio: 49 / 23;
			background: url(images/arrow-fish.svg) no-repeat center / cover;
		}
	}
}

@media(max-width: 991px) {
	.top-nav {
		padding-bottom: 100px;
	}
	.top-nav-content {
		grid-template-columns: 1fr;
		padding-top: 50px;
		margin-top: 0;
		h2 {
			display: none;
		}
	}
	.top-nav-list {
		a {
			grid-template-columns: 40px 1fr 40px;
			gap: 10px;
			--fs: 18;
			letter-spacing: 0;
			padding: 10px 15px;
			&::after {
				width: 40px;
			}
		}
	}
}

/*		新着情報		*/
.top-information {
	padding-top: 60px;
}

.top-information-content {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 20px 100px;
	.top-information-link {
		grid-column: span 2;
		order: -1;
	}
}

@media(max-width: 991px) {
	.top-information-content {
		grid-template-columns: 1fr;
		gap: 0;
		.top-information-link {
			grid-column: auto;
			order: 1;
		}
	}
}

/*		提供サービス		*/
.top-service {

}

.service-list {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 36px;
	max-width: 1030px;
	margin-inline: auto;
}

.service-list-item {
	background: var(--color-gray-1);
	padding: 30px;
	img {
		width: 100%;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		margin-bottom: 30px;
	}
	h3 {
		--fs: 18;
		font-size: var(--font-size);
		font-weight: 500;
		text-align: center;
		text-decoration: underline;
		margin-bottom: 15px;
	}
	p {
		line-height: calc(25 / 16);
		margin-bottom: 0;
	}
}

@media(max-width: 991px) {
	.service-list {
		gap: 20px;
	}
}

@media(max-width: 767px) {
	.service-list {
		grid-template-columns: 1fr;
	}
}

@media(max-width: 575px) {
	.service-list-item {
		padding: 20px;
		img {
			margin-bottom: 15px;
		}
	}
}

/*		委託事業・補助事業		*/
.top-support {
	padding-bottom: calc(var(--stack) * 2);
}

.top-support-content {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	grid-template-rows: auto 1fr;
	gap: 18px 36px;
	margin-bottom: 65px;
}

.top-support-item {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
	align-items: center;
	background: var(--color-gray-1);
	padding: 30px;
	img {
		width: 100%;
		aspect-ratio: 260 / 185;
		object-fit: cover;
	}
	h3 {
		--fs: 18;
		font-size: var(--font-size);
		text-decoration: underline;
		text-align: center;
		margin-bottom: 0;
	}
}

@media(max-width: 991px) {
	.top-support-content {
		gap: 20px;
		margin-bottom: 50px;
	}
}

@media(max-width: 767px) {
	.top-support-content {
		grid-template-columns: 1fr;
	}
}

@media(max-width: 575px) {
	.top-support-item {
		gap: 15px;
		padding: 20px;
	}
}

/*		CTA		*/
.cta {
	background: var(--color-gray-1);
}

.cta-content {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
}

.cta-item {
	display: block;
	font-weight: 500;
	text-align: center;
	color: #FFF;
	max-width: 360px;
	width: 100%;
	border-radius: 50px;
	padding: 20px 80px;
	box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
	position: relative;
	&::after {
		content: "";
		width: 16px;
		aspect-ratio: 16 / 14;
		background: url(images/arrow-right-bold.svg) center / cover;
		position: absolute;
		top: 50%;
		right: 25px;
		transform: translateY(-50%);
	}
	&.cta-contact {
		background: var(--color-theme-1-1);
		&::before {
			content: "";
			width: 20px;
			aspect-ratio: 20 / 15;
			background: url(images/icon-mail.svg) center / cover;
			position: absolute;
			top: 50%;
			left: 45px;
			transform: translateY(-50%);
		}
	}
	&.cta-access {
		background: var(--color-theme-1);
		&::before {
			content: "";
			width: 18px;
			aspect-ratio: 18 / 21;
			background: url(images/icon-map.svg) center / cover;
			position: absolute;
			top: 50%;
			left: 45px;
			transform: translateY(-50%);
		}
	}
}

@media(max-width: 991px) {
	.cta-item {
		max-width: 280px;
		padding: 15px 60px;
		&::after {
			right: 20px;
		}
		&.cta-contact {
			&::before {
				left: 25px;
			}
		}
		&.cta-contact {
			&::before {
				left: 30px;
			}
		}
	}
}

/*		下層ページ		*/
.page-content {
	padding-top: 76px;
}

.breadcrumbs {
	--container: 1130px;
}

.breadcrumbs__list {
	display: flex;
	list-style: none;
	padding: 10px 0;
	margin-bottom: 0;
	li {
		display: flex;
		line-height: 1.2;
		&:last-child {
			flex: 1;
			min-width: 0;
		}
		&:not(:last-child)::after {
			content: "/";
			display: inline-block;
			--fs: 12;
			font-size: var(--font-size);
			font-weight: bold;
			margin-inline: 10px;
		}
		a,span {
			display: inline-block;
			--fs: 13;
			font-size: var(--font-size);
			font-weight: bold;
		}
		a {
			display: block;
			color: var(--color-theme-1);
			text-decoration: underline;
		}
		&:not(:first-child):last-child a,
		span {
			pointer-events: none;
			color: var(--color-body-1);
			overflow: hidden;
			text-decoration: none;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}

.page-header {
	--container: 1130px;
	position: relative;
	background: linear-gradient(to bottom, var(--color-theme-1) 0%,var(--color-theme-1) 10%, #005EAA 100%);
	padding-block: 35px;
	overflow: hidden;
	z-index: 1;
	&::before {
		content: "";
		width: 120vw;
		max-width: 1371px;
		aspect-ratio: 1371 / 464;
		background: url(images/page-header-bg.png) no-repeat center / cover;
		position: absolute;
		top: 50%;
		left: 20%;
		transform: translateY(-60%);
		filter: blur(6px);
		z-index: -1;
	}
}

.page-header-title {
	display: grid;
	gap: 5px;
	place-content: end start;
	min-height: 165px;
}

.page-header-title-ja {
	--fs: 50;
	font-size: var(--font-size);
	font-weight: bold;
	line-height: calc(75 / 52);
	color: #FFF;
	margin-bottom: 0;
}

.page-header-title-en {
	display: flex;
	align-items: center;
	gap: 20px;
	--fs: 25;
	font-size: var(--font-size);
	font-weight: bold;
	font-family: var(--en);
	line-height: 1;
	color: #FFF;
	order: -1;
	margin-bottom: 0;
	&::before {
		content: "";
		width: 43px;
		aspect-ratio: 43 / 21;
		background: url(images/icon-fish.svg) no-repeat center / contain;
	}
}

.page-body {
	--container: 1130px;
	padding-block: 80px 160px;
}

@media(max-width: 991px) {
	.page-header-title-ja {
		--fs: 38;
	}
	.page-header-title-en {
		--fs: 20;
		&::before {
			width: 35px;
		}
	}
	.page-body {
		padding-block: 60px 120px;
	}
}

@media(max-width: 575px) {
	.page-header {
		padding-block: 25px;
		&::before {
			min-width: 600px;
			filter: blur(4px);
		}
	}
	.page-header-title {
		min-height: 125px;
	}
	.page-header-title-ja {
		--fs: 30;
	}
	.page-header-title-en {
		--fs: 18;
		gap: 15px;
		&::before {
			width: 30px;
		}
	}
}

.page-body h2:not([class]),
.mt-style-h-1 {
	display: grid;
	gap: 20px;
	--fs: 32;
	font-size: var(--font-size);
	line-height: 1.2;
	color: var(--color-theme-1);
	margin-bottom: 20px;
	&::after {
		content: "";
		width: 40px;
		height: 4px;
		background: linear-gradient(to right,var(--color-theme-1) 50%,var(--color-theme-1-1) 50%);
	}
	&[style="text-align: center;"]::after,
	&.text-center::after {
		margin-inline: auto;
	}
	&.text-end::after {
		margin-right: 0;
		margin-left: auto;
	}
}

.page-body * + h2:not([class]) {
	margin-top: calc(var(--stack) * 2);
}

.page-body h3:not([class]),
.mt-style-h-2 {
	position: relative;
	display: grid;
	grid-template-columns: 8px auto;
	gap: 10px;
	align-items: baseline;
	--fs: 25;
	font-size: var(--font-size);
	font-weight: bold;
	line-height: 1.2;
	border-bottom: 1px solid #979797;
	padding-bottom: 15px;
	margin-bottom: 15px;
	&::before {
		content: "";
		width: 8px;
		height: 20px;
		background: linear-gradient(to bottom, var(--color-theme-1) 0 8px, transparent 8px 12px, var(--color-theme-1-1) 12px 20px);
	}
}

.page-body * + h3:not([class]) {
	margin-top: 50px;
}

.mt-style-h-3 {
	--fs: 20;
	font-size: var(--font-size);
	line-height: 1.2;
	font-weight: bold;
	margin-bottom: 15px;
}

.mt-style-list-1 {
	list-style: none;
	padding: 0;
	li {
		text-indent: -1em;
		margin-left: 1em;
		line-height: 1.4;
		&:not(:last-child) {
			margin-bottom: 5px;
		}
		&::before {
			content: "・";
		}
	}
}

.mt-style-table-1 {
	width: 100%;
	th {
		--fs: 15;
		font-size: var(--font-size);
		font-weight: bold;
		line-height: calc(25 / 16);
		white-space: nowrap;
		border-bottom: 1px solid #ACACAC;
		vertical-align: baseline;
		padding: 20px 15px;
	}
	td {
		--fs: 16;
		line-height: calc(25 / 16);
		border-bottom: 1px solid #ACACAC;
		padding: 20px 15px;
	}
}

.mt-style-table-2 {
	width: 100%;
	thead {
		th {
			--fs: 15;
			font-weight: 500;
			text-align: center;
			line-height: 1.4;
			background: var(--color-theme-1-2);
			border: 1px solid var(--color-body-1);
			padding: 5px;
		}
	}
	tbody {
		td,th {
			--fs: 15;
			line-height: 1.4;
			background: #FFF;
			border: 1px solid var(--color-body-1);
			padding: 5px;
		}
		th {
			background: var(--color-theme-1-2);
		}
		ul {
			--fs: 15;
			font-size: var(--font-size);
			list-style: none;
			padding: 0;
			margin-bottom: 0;
			li {
				text-indent: -0.5em;
				margin-left: 1em;
				margin-bottom: 2px;
				&::before {
					content: "・";
					display: inline-block;
				}
			}
		}
	}
}

ul:not([class]) {
	list-style: none;
	padding: 0;
	li {
		position: relative;
		line-height: 1.5;
		background: var(--color-gray-1);
		padding: 10px;
		&:nth-child(even) {
			background: transparent;
		}
		a {
			display: block;
			text-decoration: underline;
			&::before {
				content: "";
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
			}
		}
		ul {
			li {
				background: transparent;
				padding: 5px 1em;
			}
		}
	}
}

@media(max-width: 991px) {
	.page-body h2:not([class]),
	.mt-style-h-1 {
		--fs: 25;
		gap: 15px;
		margin-bottom: 15px;
	}
	.page-body h3:not([class]),
	.mt-style-h-2 {
		--fs: 20;
		grid-template-columns: 6px auto;
		gap: 5px;
		padding-bottom: 10px;
		margin-bottom: 10px;
		&::before {
			width: 6px;
			height: 16px;
			background: linear-gradient(to bottom, var(--color-theme-1) 0 6px, transparent 6px 10px, var(--color-theme-1-1) 10px 16px);
		}
	}
	.page-body * + h3:not([class]) {
		margin-top: 30px;
	}
	.mt-style-h-3 {
		--fs: 18;		
	}
	.mt-style-table-2 {
		thead {
			th {
				--fs: 14;
				padding: 2px;
			}
		}
		tbody {
			td,th {
				--fs: 14;
				padding: 2px;
			}
			ul {
				--fs: 14;
			}
		}
	}
	.js-scrollable table {
		min-width: 880px;
	}
}

@media(max-width: 767px) {
	.mt-style-table-1 {
		th {
			display: block;
			width: 100%;
			border-bottom: none;
			padding: 15px 10px 5px 10px;
		}
		td {
			display: block;
			width: 100%;
			--fs: 15;
			padding: 5px 10px 15px 10px;
		}
	}
}

/*		漁海況情報		*/
.sea-information-about-content {
	display: grid;
	grid-template-columns: 50% 1fr;
	gap: 30px;
}

.collapse-list {
	display: grid;
	gap: 15px;
	list-style: none;
	padding: 0;
	margin-bottom: 30px;
}

.collapse-item {
	background: var(--color-gray-1);
}

.collapse-item-title {
	--fs: 20;
	font-size: var(--font-size);
	line-height: calc(24 / 20);
	margin-bottom: 0;
	button {
		color: var(--color-body-1);
		position: relative;
		width: 100%;
		border: none;
		outline: none;
		background: transparent;
		text-align: start;
		padding: 35px 115px 35px 65px;
		&::after {
			content: "";
			width: 38px;
			height: 38px;
			background: url(images/icon-minus.svg) no-repeat center / auto, #ACACAC;
			border-radius: 50%;
			position: absolute;
			right: 60px;
			top: 28px;
			transition: 0.2s;
		}
		&.collapsed::after {
			background: url(images/icon-plus.svg) no-repeat center / auto, var(--color-theme-1-1);
		}
	}
}

.collapse-item-body {
	max-width: calc(100vw - var(--padding) * 2);
	padding-block: 30px 50px;
	padding-inline: 65px;
}

@media(max-width: 991px) {
	.sea-information-about-content {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.collapse-list {
		gap: 10px;
		margin-bottom: 15px;
	}
	.collapse-item-title {
		--fs: 16;
		button {
			padding: 20px 60px 20px 20px;
			&::after {
				width: 30px;
				height: 30px;
				right: 15px;
				top: 15px;
			}
		}
	}
	.collapse-item-body {
		padding-block: 10px;
		padding-inline: 20px;
	}
}

/*		エビスくん		*/
.ebisukun-about-content {
	display: grid;
	grid-template-columns: 50% 1fr;
	gap: 30px;
}

.ebisukun-service {
	position: relative;
	&::before {
		content: "";
		width: 100vw;
		height: 100%;
		background: var(--color-gray-1);
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		z-index: -1;
	}	
}

.ebisukun-service-content {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 24px;
	max-width: 985px;
	margin-inline: auto;
}

.ebisukun-service-item {
	background: #FFF;
	padding: 30px 20px;
	box-shadow: 4px 4px 20px rgba(0,0,0,0.1);
	& > * {
		max-width: 360px;
		margin-inline: auto;
	}
	ul {
		list-style: none;
		padding: 0;
		margin-bottom: 0;
		li {
			--fs: 15;
			line-height: 1.3;
			text-indent: -0.5em;
			margin-left: 1em;
			&::before {
				content: "・";
				display: inline-block;
			}
			&:not(:last-child) {
				margin-bottom: 5px;
			}
		}
	}
}

.ebisukun-sample-content {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 60px 24px;
	&:not(:last-child) {
		margin-bottom: 140px;
	}
}

.ebisukun-sample-item {
	figure {
		margin-bottom: 20px;
	}
	figcaption {
		--fs: 18;
		font-size: var(--font-size);
		font-weight: 500;
		text-align: center;
		line-height: calc(26 / 18);
		color: #FFF;
		background: var(--color-theme-1-1);
		padding: 2px 5px;
	}
	p {
		--fs: 15;
		line-height: calc(25 / 15);
		margin-bottom: 0;
	}
}

.ebisukun-application-button {
	display: grid;
	grid-template-columns: 23px auto;
	justify-content: center;
	align-items: center;
	gap: 15px;
	--fs: 16;
	font-weight: 500;
	line-height: 1.4;
	background: var(--color-theme-2-1);
	min-width: min(360px,100%);
	min-height: 70px;
	max-inline-size: max-content;
	border-radius: 999px;
	padding: 10px 15px;
	&::before {
		content: "";
		display: block;
		width: 23px;
		aspect-ratio: 23 / 22;
		background: url(/images/service-image01@2x.png) center / cover;
	}
}

.link-list {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 27px 20px;
	list-style: none;
	padding: 0;
	margin-bottom: 0;
	li:has(a) {
		display: contents;
	}
}

.link-list a,
.link-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
	line-height: calc(23 / 16);
	color: var(--color-theme-1-1);
	min-height: 48px;
	background: #FFF;
	border: 1px solid var(--color-theme-1-1);
	border-radius: 999px;
	padding: 5px 15px;
	&[download] {
		padding: 5px 45px;
		&::after {
			content: "";
			width: 13px;
			aspect-ratio: 13 / 15;
			background: url(images/icon-download.svg) no-repeat center / cover;
			position: absolute;
			top: 50%;
			right: 25px;
			transform: translateY(-50%);
		}
	}
}

.ebisukun-contact-content {
	max-width: 600px;
	background: var(--color-theme-1-4);
	padding-block: 55px 75px;
	padding-inline: 20px;
	margin-inline: auto;
	p {
		--fs: 15;
	}
	.tel-link {
		display: grid;
		align-items: center;
		grid-template-columns: 31px auto;
		gap: 15px;
		--fs: 43;
		font-weight: 900;
		line-height: 1;
		color: var(--color-theme-1-1);
		max-inline-size: max-content;
		margin-inline: auto;
	}
}

.ebisukun-collapse-item {
	background: #FFF;
	padding: 30px 15px;
	&:not(:last-child) {
		margin-bottom: 20px;
	}
	> * {
		max-width: 900px;
		margin-inline: auto;
	}
	.mt-style-h-2 {
		--fs: 20;
	}
	p {
		line-height: 1.6;
	}
}

@media(max-width: 991px) {
	.ebisukun-about-content {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.ebisukun-service-content {
		grid-template-columns: 1fr;
	}
	.ebisukun-service-item {
		padding: 20px;
		& > * {
			max-width: 100%;
		}
	}
	.ebisukun-sample-content {
		grid-template-columns: repeat(2,1fr);
	}
	.ebisukun-sample-item {
		figure {
			margin-bottom: 10px;
		}
		figcaption {
			--fs: 16;
		}
	}
	.link-list {
		grid-template-columns: repeat(2,1fr);
	}
	.ebisukun-contact-content {
		padding-block: 40px 50px;
		.tel-link {
			--fs: 35;
			gap: 10px;
		}
	}
	.ebisukun-collapse-item {
		padding: 25px 15px;
		.mt-style-h-2 {
			--fs: 18;
		}
	}
}

@media(max-width: 575px) {
	.ebisukun-sample-content {
		grid-template-columns: 1fr;
		gap: 40px;
		&:not(:last-child) {
			margin-bottom: 80px;
		}
	}
	.link-list {
		grid-template-columns: 1fr;
		gap: 10px;
	}
}

/*		組織概要		*/
.overview-about {
	position: relative;
	&::before {
		content: "";
		width: 907px;
		aspect-ratio: 907 / 494;
		background: url(images/overview-about-bg01.png) center / cover;
		position: absolute;
		top: 15%;
		right: 0;
		transform: translateX(30%);
		z-index: -1;
	}
	&::after {
		content: "";
		width: 308px;
		aspect-ratio: 308 / 160;
		background: url(images/overview-about-bg02.png) center / cover;
		position: absolute;
		top: 64%;
		left: 0;
		transform: translateX(-50%);
		z-index: -1;
	}
}

.overview-about-content {
	display: grid;
	grid-template-columns: 50% 1fr;
	gap: 30px;
}

.overview-about-tables {
	max-width: 936px;
	margin-top: 120px;
	margin-inline: auto;
}

.overview-greeting {
	max-width: 936px;
	margin-inline: auto;
}

.overview-greeting-sign {
	--fs: 15;
	font-weight: bold;
	letter-spacing: 0.05em;
	max-inline-size: max-content;
	margin-top: 70px;
	margin-right: 0;
	margin-left: auto;
	margin-bottom: 0;
	span {
		--fs: 20;
		font-size: var(--font-size);
	}
}

.overview-pamphlet {
	position: relative;
	width: 100vw;
	background: var(--color-gray-1);
	margin-left: calc((100vw - 100%) / -2);
	overflow: hidden;
	z-index: 1;
	&::before {
		content: "";
		max-width: 246px;
		height: 100%;
		aspect-ratio: 246 / 1087;
		background: url(images/jafic.svg) no-repeat center / cover;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: -1;
	}
	&::after {
		content: "";
		max-width: 246px;
		height: 100%;
		aspect-ratio: 246 / 1087;
		background: url(images/jafic.svg) no-repeat center / cover;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		transform: scale(-1,-1);
		z-index: -1;
	}
}

.overview-access-content {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 90px 95px;
}

.overview-access-item {
	display: grid;
	grid-template-rows: auto 1fr auto;
	&.head-office {
		display: block;
		grid-column: span 2;
	}
	p {
		--fs: 15;
		line-height: calc(25 / 15);
	}
}

.overview-access-info {
	max-width: 380px;
	background: var(--color-theme-1-4);
	padding: 15px 20px;
	margin-bottom: 5px;
	p {
		--fs: 15;
		font-weight: bold;
		text-align: center;
		line-height: 1.3;
		color: #FFF;
		background: var(--color-theme-1);
		min-width: 162px;
		max-inline-size: max-content;
		border-radius: 999px;
		padding: 2px 10px;
		margin-bottom: 5px;
	}
	ul {
		--fs: 15;
		max-width: 300px;
		list-style: none;
		padding: 0;
		margin-bottom: 0;
		margin-inline: auto;
		li {
			display: flex;
			justify-content: space-between;
			&:not(:first-child) {
				border-top: 1px dashed #D9D9D9;
			}
		}
	}
}

.access-map iframe {
	width: 100%;
	height: 350px;
	aspect-ratio: 51 / 35;
	object-fit: cover;
}

.head-office .access-map iframe {
	aspect-ratio: 1 / 1;
	height: auto;
	max-height: 575px;
}

.overview-guide {
	max-width: 620px;
	margin-inline: auto;
}

@media(max-width: 991px) {
	.overview-about-content {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.overview-about {
		&::before {
			width: 300px;
			top: 20%;
		}
		&::after {
			width: 200px;
			top: 75%;
			transform: translateX(-20%);
		}
	}
	.overview-about-tables {
		margin-top: 60px;
	}
	.overview-greeting-sign {
		--fs: 14;
		margin-top: 40px;
		span {
			--fs: 18;
		}
	}
	.overview-access-content {
		grid-template-columns: 1fr;
		gap: 60px;
	}
	.overview-access-item {
		display: block;
		&.head-office {
			grid-column: auto;
		}
	}
}

@media(max-width: 767px) {
	.overview-pamphlet::before,
	.overview-pamphlet::after {
		content: none;
	}
}


/*		お問い合わせ		*/
.contact-tel,
.contact-mail {
	max-width: 1030px;
	margin-inline: auto;
}

.form-content {
	background: var(--color-theme-1-4);
	border-radius: 15px;
	padding: 50px 20px;
}

.contact-tel-content {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 20px 30px;
}

.contact-tel-item {
	background: var(--color-theme-1-4);
	border-radius: 15px;
	padding: 25px 20px;
	> * {
		max-width: 420px;
		margin-inline: auto;
	}
	h3 {
		--fs: 20;
		font-size: var(--font-size);
		font-weight: 500;
		line-height: 1.35;
		color: var(--color-theme-1-1);
		border-bottom: 1px solid #979797;
		padding-bottom: 10px;
		margin-bottom: 10px;
	}
	p {
		--fs: 15;
		font-size: var(--font-size);
		line-height: calc(30 / 15);
		margin-bottom: 0;
	}
}

@media(max-width: 991px) {
	.form-content {
		padding: 40px 20px;
	}
	.contact-tel-item {
		h3 {
			--fs: 18;
		}
	}
}

@media(max-width: 767px) {
	.contact-tel-content {
		grid-template-columns: 1fr;
	}
	.contact-tel-item {
		> * {
			max-width: 100%;
		}
	}
}

/*		お知らせ一覧		*/
.information-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 30px;
}


.information-list {
	display: grid;
	list-style: none;
	padding: 0;
	margin-bottom: 0;
}

.information-item {
	border-top: 1px dashed #ACACAC;
	&:last-child {
		border-bottom: 1px dashed #ACACAC;
	}
	a {
		display: block;
		padding: 30px 30px;
	}
}

.information-item-info {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 5px;
}

.information-item-date {
	--fs: 14;
	font-size: var(--font-size);
	font-weight: 500;
	color: var(--color-theme-1-1);
}

.information-item-category {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5;
	span {
		--fs: 14;
		font-size: var(--font-size);
		font-weight: 500;
		line-height: 1;
		background: var(--color-theme-1-2);
		border-radius: 100px;
		padding: 4px 20px;
	}
}

.information-item-title {
	line-height: calc(28 / 16);
	margin-bottom: 0;
}

.information-sidebar {
	order: -1;
	p {
		position: relative;
		--fs: 15;
		font-size: var(--font-size);
		font-weight: 500;
		line-height: calc(22 / 15);
		padding-block: 5px;
		padding-left: 12px;
		margin-bottom: 20px;
		&::before {
			content: "";
			width: 3px;
			height: 32px;
			background: var(--color-theme-1);
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	* + p {
		margin-top: 80px;
	}
}

.category-list {
	display: grid;
	gap: 15px;
	list-style: none;
	padding: 0;
	margin-bottom: 0;
	li {
		display: contents;
	}
	a {
		display: block;
		--fs: 14;
		font-size: var(--font-size);
		font-weight: 500;
		line-height: 1;
		text-align: center;
		color: var(--color-body-1);
		max-inline-size: max-content;
		background: var(--color-theme-1-2);
		border-radius: 999px;
		padding: 5px 20px;
		&.active {
			pointer-events: none;
			color: #FFF;
			background: var(--color-theme-1);
		}
	}
}

.year-list {
	display: grid;
	gap: 5px;
	justify-content: start;
	list-style: none;
	padding: 0;
	margin-bottom: 0;
	li {
		display: contents;
	}
	a {
		display: inline-block;
		--fs: 16;
		font-weight: 500;
		font-size: var(--font-size);
		line-height: 1;
		padding-block: 5px;
		&.active {
			color: var(--color-theme-1);
		}
	}
}

.pagination {
	justify-content: space-between;
	gap: 20px;
	&:has(.next,.prev) {
		margin-top: 60px;
	}
	.prev {
		display: flex;
		align-items: center;
		gap: 10px;
		&::after {
			content: "";
			width: 16px;
			aspect-ratio: 16 / 14;
			--mask: url(images/arrow-right-bold.svg) center / cover;
			-webkit-mask: var(--mask);
			mask: var(--mask);
			display: block;
			transform: scale(-1,1);
			background: var(--color-theme-1-1);
			order: -1;
		}
	}
	.next {
		display: flex;
		align-items: center;
		gap: 10px;
		&::after {
			content: "";
			width: 16px;
			aspect-ratio: 16 / 14;
			--mask: url(images/arrow-right-bold.svg) center / cover;
			-webkit-mask: var(--mask);
			mask: var(--mask);
			display: block;
			background: var(--color-theme-1-1);
		}
	}
}

@media(max-width: 991px) {
	.information-layout {
		grid-template-columns: 1fr;
		gap: 100px;
	}
	.information-sidebar {
		order: 1;
	}
	.category-list {
		display: flex;
		flex-wrap: wrap;
		gap: 10px 15px;
	}
	.year-list {
		display: flex;
		flex-wrap: wrap;
		gap: 10px 20px;
	}
	.information-list {
		margin-bottom: 30px;
	}
	.information-item {
		a {
			padding: 15px 5px;
		}
	}
	.information-item-info {
		gap: 10px;
	}
	.information-sidebar {
		p {
			margin-bottom: 15px;
		}
		* + p {
			margin-top: 40px;
		}
	}
}

/*		お知らせ詳細		*/
.information-content-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
}

.single-information-title {
	--fs: 32;
	font-size: var(--font-size);
	line-height: 1.5;
	font-weight: bold;
	color: var(--color-theme-1-1);
	border-bottom: 1px solid #979797;
	padding-bottom: 35px;
	margin-bottom: 40px;
}

.single-information-content {
	margin-bottom: 130px;
	a {
		text-decoration: underline;
	}
}

@media(max-width: 991px) {
	.single-information-title {
		--fs: 18;
		padding-bottom: 20px;
		margin-bottom: 30px;
	}
	.single-information-content {
		--fs: 14;
		margin-bottom: 60px;
	}
	.information-content-info {
		margin-bottom: 10px;
	}
}

/*		おさかなひろば		*/
.data-content {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 30px;
	/* align-items: flex-start; */
}

.data-item {
	background: var(--color-theme-1-4);
	border-radius: 15px;
	padding: 20px 20px;
	p {
		line-height: 1.4;
	}
	.link-item {
		justify-content: space-between;
		min-height: 40px;
		gap: 5px;
		padding: 5px 35px;
		&[download] {
			padding: 5px 25px;
			&::after {
				min-width: 13px;
				position: relative;
				top: auto;
				right: auto;
				transform: none;
			}
		}
	}
}

@media(max-width: 991px) {
	.data-content {
		grid-template-columns: repeat(2,1fr);
	}
}

@media(max-width: 767px) {
	.data-content {
		grid-template-columns: 1fr;
		gap: 15px;
	}
}

/*		JAFIC contact		*/
.jafic-contact-content {
	padding: 40px 60px;
	background: var(--color-theme-1-4);
	border-radius: 15px;
	> * {
		max-width: 900px;
		margin-inline: auto;
	}
}


.custom-more-button {
	position: relative;
	display: block;
	font-size: 16px;
	font-weight: 500;
	line-height: calc(23 / 16);
	color: #FFF;
	text-align: center!important;
	background: #0A4D91;
	border-radius: 50px;
	min-width: min(280px,100%);
	max-inline-size: max-content;
	padding: 12px 50px;
	box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
	position: relative;
	&::after {
		content: "";
		width: 16px;
		aspect-ratio: 16 / 14;
		background: url(images/arrow-right-bold.svg) center / cover;
		position: absolute;
		top: 50%;
		right: 20px;
		transform: translateY(-50%);
	}
	&[target="_blank"]::after {
		width: 15px;
		aspect-ratio: 1 / 1;
		background: url(images/icon-tab.svg) center / cover;
	}
	&[download]::after {
		width: 13px;
		aspect-ratio: 13 / 15;
		background: #FFF;
		--mask: url(images/icon-download.svg) no-repeat center / contain;
		-webkit-mask: var(--mask);
        	mask: var(--mask);
	}
	&[style="text-align: left;"] {
		margin-left: 0;
	}
	&[style="text-align: center;"] {
		margin-inline: auto;	
	}
	&[style="text-align: right;"] {
		margin-right: 0;
		margin-left: auto;
	}
	a {
		color: #FFF;
		&::before {
			content: "";
			width: 100%;
			height: 100%;
			border-radius: 9999px;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
}

.market-content {
	max-width: 900px;
	margin-inline: auto;
}

@media(max-width: 767px) {
    h2 {
        text-align: center;
        &::after {
            margin-inline: auto;
        }
    }
}


/*		TAC採捕実績		*/

.tac-layout {
	display: grid;
    grid-template-columns: 300px 1fr;
	align-items: start;
    gap: 50px;
}

.tac-sidebar {
	background: var(--color-theme-1-4);
	border-radius: 15px;
	padding: 24px;
	order: -1;
	p {
		position: relative;
        --fs: 15;
        font-size: var(--font-size);
        font-weight: 500;
        line-height: calc(22 / 15);
        padding-block: 5px;
        padding-left: 12px;
        margin-bottom: 20px;
		&::before {
			content: "";
            width: 3px;
            height: 32px;
            background: var(--color-theme-1);
            position: absolute;
            top: 0;
            left: 0;
		}
	}
}

.tac-sidebar-list,
.technicalreview-archive {
	list-style: none;
	padding: 0;
	margin-bottom: 10px;
	li {
		line-height: 1.4;
		&:not(:last-child) {
			margin-bottom: 5px;
		}
		a {
			display: block;
			--fs: 15;
			font-size: var(--font-size);
			padding: 5px 0;
		}
	}
}

@media(max-width: 991px) {
	.tac-layout {
		grid-template-columns: 1fr;
	}
	.tac-sidebar {
		order: 1;
	}
}

/*		JAFICテクニカルレビュー		*/
.technicalreview-top {
	max-width: 936px;
	margin-inline: auto;
}

.technicalreview-list {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 27px 16px;
	list-style: none;
	padding: 0;
	padding-top: 20px;
	margin-bottom: 0;
	a {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		min-height: 48px;
		color: var(--color-theme-1-1);
		font-weight: 500;
		background: #FFF;
		border: 1px solid var(--color-theme-1-1);
		border-radius: 999px;
		padding: 5px 45px;
		&::after {
			content: "";
			width: 16px;
			aspect-ratio: 16 / 14;
			background: var(--color-theme-1-1);
			--mask: url(images/arrow-right-bold.svg) no-repeat center / contain;
			-webkit-mask: var(--mask);
			mask: var(--mask);
			position: absolute;
			top: 50%;
			right: 15px;
			transform: translateY(-50%);
		}
	}
	li {
		display: contents;
		&:first-child {
			a {
				color: #FFF;
				background: var(--color-theme-2-1);
				border: 1px solid var(--color-theme-2-1);
				&::before {
					content: "";
					width: 72px;
					aspect-ratio: 72 / 19;
					background: url(/images/technicalreview-new.svg) no-repeat center / cover;
					position: absolute;
					top: -3px;
					left: 0;
					transform: translateY(-100%);
				}
				&::after {
					background: #FFF;
				}
			}
		}
	}
}

.technicalreview-top {
	.mt-site-search-form {
		position: relative;
		display: flex;
		align-items: center;
		border: 1px solid #979797;
		border-radius: 5px;
		max-width: 657px;
		width: 100%;
		padding: 7px;
		padding-left: 70px;
		&::before {
			content: "";
			width: 26px;
			aspect-ratio: 1 / 1;
			background: url(images/icon-search.svg) no-repeat center / cover;
			position: absolute;
			top: 50%;
			left: 30px;
			transform: translateY(-50%);
		}
	}
	.mt-site-search-form__query {
      background: #FFF;
		outline: none;
		min-height: 48px;
		width: 100%;
		border: none;
		padding: 0;
	}
	.mt-site-search-form__button {
		display: flex;
		align-items: center;
		justify-content: center;
		--fs: 16;
		font-size: var(--font-size);
		font-weight: 500;
		color: #FFF;
		background: var(--color-theme-1-1);
		width: 104px;
		min-height: 48px;
		border: none;
		border-radius: 5px;
		outline: none;
		padding: 5px 15px;
		margin: 0;
	}
}

.mt-site-search-container + .search-list {
	margin-top: 40px;
}

.search-list {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 12px;
	list-style: none;
	padding: 0;
	margin-bottom: 0;
	li {
		display: contents;
	}
	a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 48px;
		width: 100%;
		--fs: 16;
		font-size: var(--font-size);
		font-weight: 500;
		color: var(--color-theme-1-1);
		background: var(--color-gray-1);
		border-radius: 999px;
		transition: 0.2s;
		&:hover {
			color: #FFF;
			background: var(--color-theme-1-1);
			opacity: 1;
		}
	}
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
}

@media(max-width: 991px) {
	.technicalreview-list {
		grid-template-columns: repeat(2,1fr);
	}
	.search-list {
		grid-template-columns: repeat(3,1fr);
	}
}

@media(max-width: 575px) {
	.technicalreview-list {
		grid-template-columns: 1fr;
		gap: 15px;
	}
	.mt-site-search-container + .search-list {
		margin-top: 25px;
	}
	.search-list {
		grid-template-columns: repeat(2,1fr);
		a {
			--fs: 15;
			min-height: 40px;
		}
	}
	.technicalreview-top {
		.mt-site-search-form {
			padding: 5px;
			padding-left: 40px;
		}
		.mt-site-search-form {
			&::before {
				width: 22px;
				left: 10px;	
			}
		}
		.mt-site-search-form__query {
			min-height: 36px;
		}
		.mt-site-search-form__button {
			--fs: 15;
			width: 70px;
			min-height: 36px;
			line-height: 1;
		}
	}
}

/*		検索結果		*/
.technicalreview-layout {
	display: grid;
    grid-template-columns: 300px 1fr;
	align-items: start;
    gap: 50px;
}

.technicalreview-sidebar {
	background: var(--color-theme-1-4);
	border-radius: 15px;
	padding: 24px;
	order: -1;
	p {
		position: relative;
        --fs: 15;
        font-size: var(--font-size);
        font-weight: 500;
        line-height: calc(22 / 15);
        padding-block: 5px;
        padding-left: 12px;
        margin-bottom: 20px;
		&::before {
			content: "";
            width: 3px;
            height: 32px;
            background: var(--color-theme-1);
            position: absolute;
            top: 0;
            left: 0;
		}
	}
	.mt-site-search-form {
		/* display: grid;
		gap: 5px;
		background: #FFF;
		border-radius: 5px;
		border: 1px solid #979797;
		padding: 10px; */
		position: relative;
		&::before {
			content: "";
			width: 22px;
			aspect-ratio: 1 / 1;
			background: url(images/icon-search.svg) no-repeat center / cover;
			position: absolute;
			top: 12px;
			left: 7px;
			z-index: 1;
		}
	}
	.mt-site-search-form__query {
		background: #FFF;
		border: none;
		width: 100%;
		border: 1px solid #979797;
		border-radius: 5px;
		padding: 5px;
		padding-left: 40px;
		position: relative;
		margin-bottom: 5px;
		
	}
	.mt-site-search-form__button {
		width: 100%;
		margin: 0;
		color: #FFF;
		background: var(--color-theme-1-1);
		border: none;
		border-radius: 5px;
	}
}

.single-technicalreview > .mt-be-file {
    &:not(:last-child) {
        margin-bottom: 10px;
    }
    a {
        display: block;
        line-height: 1.5;
        background: var(--color-gray-1);
        border-radius: 15px;
        padding: 20px;
        position: relative;
        &[href$=".pdf"]::after {
            content: "";
            display: inline-block;
            width: 20px;
            aspect-ratio: 20 / 24;
            background: url(images/icon-pdf.svg) no-repeat center / cover;
            vertical-align: bottom;
            margin-left: 10px;
        }
    }
}

.sidebar-search-list {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 10px;
	list-style: none;
	padding: 0;
	margin-top: 20px;
	margin-bottom: 0;
	li {
		display: contents;
	}
	a {
		--fs: 14;
		font-size: var(--font-size);
		line-height: 1;
		color: var(--color-theme-1-1);
		background: var(--color-gray-1);
		border-radius: 999px;
		padding: 5px 20px;
		transition: 0.2s;
		&:hover {
			opacity: 1;
			background: var(--color-theme-1-1);
			color: #FFF;
		}
	}
}

.mt-site-search-result-item {
	a {
		display: block;
		line-height: 1.5;
		background: var(--color-gray-1);
		border-radius: 15px;
		padding: 20px;
	}
	.mt-site-search-result-item__excerpt,
	.mt-site-search-result-item__url {
		display: none;
	}
	.mt-site-search-result-item__label {
		position: relative;
		&::after {
			content: "";
			display: inline-block;
			width: 20px;
			aspect-ratio: 20 / 24;
			background: url(images/icon-pdf.svg) no-repeat center / cover;
			vertical-align: bottom;
			margin-left: 10px;
		}
	}
}

.mt-site-search__pagination {
	margin-top: 50px;
	ul {
		display: flex;
		justify-content: center;
		gap: 10px;
		li {
			padding: 0;
			background: transparent;
		}
	}
	.mt-site-search-pagination-item__link {
		display: flex;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		width: 34px;
		height: 34px;
		--fs: 14;
		font-size: var(--font-size);
		color: var(--color-theme-1-1);
		font-weight: 500;
		border: 1px solid var(--color-theme-1-1);
		border-radius: 50%;
		&::before {
			content: none;
		}
		&:has(strong) {
			pointer-events: none;
			color: #FFF;
			background: var(--color-theme-1-1);
		}
	}
}

@media(max-width: 991px) {
	.technicalreview-layout {
		grid-template-columns: 1fr;
	}
	.single-technicalreview {
		order: -2;
	}
	.technicalreview-sidebar {
		order: 1;
		.mt-site-search-form {
			position: relative;
			display: flex;
			align-items: center;
			background: #FFF;
			border: 1px solid #979797;
			border-radius: 5px;
			max-width: 100%;
			width: 100%;
			padding: 7px;
			padding-left: 70px;
			&::before {
				content: "";
				width: 26px;
				aspect-ratio: 1 / 1;
				background: url(images/icon-search.svg) no-repeat center / cover;
				position: absolute;
				top: 50%;
				left: 30px;
				transform: translateY(-50%);
			}
		}
		.mt-site-search-form__query {
			outline: none;
			min-height: 48px;
			width: 100%;
			border: none;
			padding: 0;
			margin-bottom: 0;
		}
		.mt-site-search-form__button {
			display: flex;
			align-items: center;
			justify-content: center;
			--fs: 16;
			font-size: var(--font-size);
			font-weight: 500;
			color: #FFF;
			background: var(--color-theme-1-1);
			width: 104px;
			min-height: 48px;
			border: none;
			border-radius: 5px;
			outline: none;
			padding: 5px 15px;
			margin: 0;
		}
	}
}

@media(max-width: 575px) {
	.technicalreview-sidebar {
		.mt-site-search-form {
			padding: 5px;
			padding-left: 40px;
		}
		.mt-site-search-form {
			&::before {
				width: 22px;
				left: 10px;	
			}
		}
		.mt-site-search-form__query {
			min-height: 36px;
		}
		.mt-site-search-form__button {
			--fs: 15;
			width: 70px;
			min-height: 36px;
			line-height: 1;
		}
	}
}

.sitemap-list {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 30px;
	list-style: none;
	padding: 0;
	margin-bottom: 0;
	> li {
		overflow: hidden;
		border-radius: 5px;
	}
	> li > a {
		display: block;
		width: 100%;
		background: var(--color-gray-1);
		padding: 15px 30px;
		position: relative;
		&::after {
			content: "";
			width: 16px;
			aspect-ratio: 16 / 14;
			background: var(--color-theme-1-1);
			--mask: url(images/arrow-right-bold.svg) no-repeat center / contain;
			-webkit-mask: var(--mask);
			mask: var(--mask);
			position: absolute;
			top: 50%;
			right: 15px;
			transform: translateY(-50%);
		}
	}
}

.sitemap-sub-list {
	list-style: none;
	padding: 0;
	margin: 0;
	background: var(--color-gray-1);
	padding-bottom: 15px;
	> li {

	}
	> li > a {
		display: block;
		--fs: 14;
		width: 100%;
		position: relative;
		padding: 0px 30px;
		padding-left: 70px;
		&::before {
			content: "";
			width: 16px;
			aspect-ratio: 49 / 23;
			background: url(images/icon-fish.svg) no-repeat center / cover;
			position: absolute;
			top: 12px;
			left: calc(30px + 1em);
		}
	}
}

@media(max-width: 991px) {
	.sitemap-list {
		grid-template-columns: 1fr;
		gap: 15px;
	}
}

.pdf-custom-block {
	display: block;
	line-height: 1.5;
	background: #F1F1F1;
	border-radius: 15px;
	padding: 20px;
	position: relative;
	&:not(:last-child) {
		margin-bottom: 10px;
	}
	&:hover {
		text-decoration: underline;
		opacity: 0.6;
      p {
        text-decoration: underline;
      }
	}
	.mt-be-file:not(:has( + p)) {
		display: inline-block;
	}
	a {
		color: #000;
	}
	a:hover {
		opacity: 1;
	}
	a::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	&::after {
		content: "";
		display: inline-block;
		width: 20px;
		aspect-ratio: 20 / 24;
		background: url(images/icon-pdf.svg) no-repeat center / cover;
		vertical-align: bottom;
		margin-left: 10px;
	}
	p {
		display: inline-block;
		margin-bottom: 0;
	}
}