/* ==========================================================
   3D-Design Project Theme
   ========================================================== */

:root {
	--green: #79a900;
	--green-dark: #587d00;
	--green-deep: #426000;
	--green-light: #eef5dc;

	--text: #303030;
	--text-light: #666666;

	--background: #ffffff;
	--background-alt: #f7f9f3;

	--border: #dddddd;

	--container-width: 1100px;
}


/* ==========================================================
   Base
   ========================================================== */

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding-top: 72px;

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		"Noto Sans JP",
		"Yu Gothic",
		"YuGothic",
		"Meiryo",
		sans-serif;

	font-size: 16px;
	line-height: 1.8;

	color: var(--text);
	background: var(--background);
}

.container {
	max-width: var(--container-width);
}

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

a {
	color: var(--green-dark);
	text-decoration: none;
}

a:hover {
	color: var(--green);
	text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--text);
	line-height: 1.4;
}


/* ==========================================================
   Accessibility
   ========================================================== */

.skip-link {
	position: absolute;
	top: -100px;
	left: 10px;

	z-index: 9999;

	padding: 10px 16px;

	color: #ffffff;
	background: #000000;
}

.skip-link:focus {
	top: 10px;
}


/* ==========================================================
   Navbar
   ========================================================== */

.project-navbar {
	min-height: 72px;

	background: rgba(255, 255, 255, 0.98);

	border-bottom: 3px solid var(--green);

	box-shadow:
		0 2px 8px rgba(0, 0, 0, 0.07);
}

.project-navbar .navbar-brand {
	color: var(--green-dark);

	font-size: 20px;
	font-weight: 600;

	letter-spacing: 0;
}

.project-navbar .navbar-brand:hover {
	color: var(--green);

	text-decoration: none;
}

.navbar-brand-desktop {
	display: inline;
}

.navbar-brand-mobile {
	display: none;
}

.project-navbar .nav-link {
	padding-left: 12px !important;
	padding-right: 12px !important;

	color: #444444 !important;

	font-size: 14px;
	font-weight: 500;
}

.project-navbar .nav-link:hover {
	color: var(--green-dark) !important;

	text-decoration: none;
}

.project-navbar .navbar-toggler {
	border-color: #cccccc;
}


/* ==========================================================
   Hero
   ========================================================== */

.project-hero-content {
	color: var(--text);
}

.project-organization {
	margin: 0 0 4px;
	color: var(--green-dark);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
}

.project-hero-content h1 {
	margin: 0 0 8px;
	color: var(--text);
	font-size: 38px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0;
}

.project-hero-slogan {
	max-width: none;
	margin: 0 0 4px;
	color: var(--text);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.7;
}

.project-hero-description {
	max-width: none;
	margin: 0;
	color: var(--text-light);
	font-size: 15px;
	line-height: 1.8;
}

.project-hero-image {
	display: block;
	width: 100%;
	height: auto;
	margin: 16px 0 0;
}


/* ==========================================================
   Main sections
   ========================================================== */

.project-main {
	background: #ffffff;
}

.project-section {
	padding: 58px 0;

	scroll-margin-top: 90px;
}

.project-section-alt {
	background: var(--background-alt);
}

.section-heading {
	margin-bottom: 34px;
}

.section-heading h2 {
	margin: 0;

	padding-left: 14px;

	border-left: 5px solid var(--green);

	font-size: 29px;
	font-weight: 500;
}

.section-content {
	max-width: 950px;

	font-size: 16px;
	line-height: 1.9;
}

.section-content p {
	margin-top: 0;
	margin-bottom: 1.4em;
}

.section-content h2 {
	margin-top: 2.2em;
	margin-bottom: 0.85em;

	font-size: 25px;
	font-weight: 600;
}

.section-content h3 {
	margin-top: 1.9em;
	margin-bottom: 0.75em;

	color: var(--green-deep);

	font-size: 21px;
	font-weight: 600;
}

.section-content h4 {
	margin-top: 1.8em;
	margin-bottom: 0.7em;

	font-size: 18px;
	font-weight: 600;
}

.section-content ul,
.section-content ol {
	margin-top: 0;
	margin-bottom: 1.5em;

	padding-left: 1.8em;
}

.section-content li {
	margin-bottom: 0.4em;
}

.section-content img {
	margin: 20px 0;

	border-radius: 4px;
}

.section-content table {
	width: 100%;

	margin: 24px 0;

	border-collapse: collapse;
}

.section-content th,
.section-content td {
	padding: 10px 12px;

	border: 1px solid #d7d7d7;
}

.section-content th {
	background: var(--green-light);
}


/* ==========================================================
   News gallery
   ========================================================== */

.news-gallery {
	margin-bottom: 32px;
}

.news-gallery-grid {
	display: grid;

	grid-template-columns: repeat(4, minmax(0, 1fr));

	gap: 14px;
}

.news-gallery-item {
	display: block;

	overflow: hidden;

	color: var(--text);
	background: #ffffff;

	border: 1px solid var(--border);
	border-radius: 5px;

	transition:
		box-shadow 0.15s ease,
		transform 0.15s ease;
}

.news-gallery-item:hover {
	color: var(--text);

	text-decoration: none;

	box-shadow:
		0 4px 14px rgba(0, 0, 0, 0.10);

	transform: translateY(-2px);
}

.news-gallery-image {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 100%;

	aspect-ratio: 4 / 3;

	overflow: hidden;

	background: #f3f3f3;
}

.news-gallery-image img {
	display: block;

	width: 100%;
	height: 100%;

	margin: 0;

	object-fit: contain;
}

.news-gallery-caption {
	padding: 8px 10px 9px;

	color: var(--text-light);

	font-size: 13px;
	line-height: 1.4;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


/* ==========================================================
   News
   ========================================================== */

.news-list {
	border-top: 1px solid var(--border);
}

.news-item {
	display: grid;

	grid-template-columns: 120px 1fr;
	gap: 20px;

	padding: 12px 4px;

	border-bottom: 1px solid var(--border);
}

.news-date {
	color: var(--text-light);

	font-size: 14px;
	line-height: 1.6;
}

.news-body {
	display: flex;
	align-items: center;
}

.news-body h3 {
	margin: 0;

	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
}

.news-body h3 a {
	color: var(--green-deep);
}

.news-body h3 a:hover {
	color: var(--green);
}

.news-empty {
	color: var(--text-light);
}


/* ==========================================================
   News archive
   ========================================================== */

.news-archive {
	margin-top: 18px;
}

.news-archive summary {
	display: inline-block;

	cursor: pointer;

	color: var(--green-dark);

	font-size: 14px;
	font-weight: 500;

	list-style: none;
}

.news-archive summary::-webkit-details-marker {
	display: none;
}

.news-archive summary::before {
	content: "＋";

	display: inline-block;

	width: 1.4em;

	font-weight: 600;
}

.news-archive[open] summary::before {
	content: "－";
}

.news-archive summary:hover {
	color: var(--green);

	text-decoration: underline;
}

.news-archive-count {
	color: var(--text-light);

	font-weight: 400;
}

.news-archive-list {
	margin-top: 14px;
}


/* ==========================================================
   Breadcrumb
   ========================================================== */

.breadcrumb-nav {
	padding: 14px 0;

	background: var(--background-alt);

	border-bottom: 1px solid var(--border);
}

.breadcrumb {
	margin: 0;

	font-size: 14px;
}


/* ==========================================================
   Individual page / blog article
   ========================================================== */

article.page {
	padding: 52px 0 68px;
}

.page-inner {
	max-width: 850px;

	margin: 0 auto;
}

.page-header {
	margin-bottom: 30px;
}

.page-header h1 {
	margin-top: 0;
	margin-bottom: 12px;

	font-size: 34px;
	font-weight: 500;
}

.page-meta {
	color: var(--text-light);

	font-size: 14px;
}

.page-description {
	margin-top: 17px;

	color: var(--text-light);

	font-size: 17px;
	line-height: 1.8;
}

.page-cover-image-wrapper {
	margin: 26px 0;
}

.page-cover-image {
	display: block;

	width: 100%;
	height: auto;
}

.page-content {
	font-size: 16px;
	line-height: 1.9;
}

.page-content p {
	margin-top: 0;
	margin-bottom: 1.4em;
}

.page-content h2 {
	margin-top: 2.2em;
	margin-bottom: 0.85em;

	padding-left: 12px;

	border-left: 4px solid var(--green);

	font-size: 25px;
	font-weight: 600;
}

.page-content h3 {
	margin-top: 1.9em;
	margin-bottom: 0.75em;

	font-size: 21px;
	font-weight: 600;
}

.page-content h4 {
	margin-top: 1.8em;
	margin-bottom: 0.7em;

	font-size: 18px;
	font-weight: 600;
}

.page-content ul,
.page-content ol {
	margin-bottom: 1.5em;

	padding-left: 1.8em;
}

.page-content li {
	margin-bottom: 0.4em;
}

.page-content img {
	max-width: 100%;
	height: auto;

	margin: 20px 0;
}

.page-content table {
	width: 100%;

	margin: 24px 0;

	border-collapse: collapse;
}

.page-content th,
.page-content td {
	padding: 10px 12px;

	border: 1px solid #dddddd;
}

.page-content th {
	background: var(--green-light);
}

.back-home {
	margin-top: 42px;
	padding-top: 22px;

	border-top: 1px solid var(--border);
}


/* ==========================================================
   Footer
   ========================================================== */

.project-footer {
	padding: 27px 0;

	color: #ffffff;
	background: var(--green-dark);

	text-align: center;
}

.project-footer p {
	margin: 3px 0;
}

.footer-title {
	font-size: 17px;
	font-weight: 600;
}

.footer-organization {
	font-size: 14px;
}

.footer-custom {
	font-size: 13px;
}

.footer-copyright {
	margin-top: 10px !important;

	font-size: 12px;

	opacity: 0.85;
}


/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 991px) {

	body {
		padding-top: 66px;
	}

	.project-navbar {
		min-height: 66px;
	}

	.project-navbar .navbar-collapse {
		margin-top: 12px;
		padding: 10px 0 14px;

		border-top: 1px solid #eeeeee;
	}

	.project-navbar .nav-link {
		padding-top: 9px !important;
		padding-bottom: 9px !important;
	}

	.project-hero-content h1 {
		font-size: 36px;
	}

	.project-section {
		padding-top: 52px;
		padding-bottom: 52px;
	}

	.news-gallery-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}


@media (max-width: 767px) {

	.navbar-brand-desktop {
		display: none;
	}

	.navbar-brand-mobile {
		display: inline;
	}

	.project-navbar .navbar-brand {
		font-size: 18px;
	}

	.project-organization {
		font-size: 14px;
	}

	.project-hero-content h1 {
		margin-bottom: 0;

		font-size: 30px;
	}

	.project-hero-slogan,
	.project-hero-description {
		display: none;
	}

	.project-section {
		padding-top: 44px;
		padding-bottom: 44px;
	}

	.section-heading {
		margin-bottom: 28px;
	}

	.section-heading h2 {
		font-size: 24px;
	}

	.news-gallery {
		margin-bottom: 27px;
	}

	.news-gallery-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));

		gap: 10px;
	}

	.news-gallery-caption {
		font-size: 12px;
	}

	.news-item {
		display: block;

		padding: 10px 2px;
	}

	.news-date {
		margin-bottom: 2px;
	}

	.news-body {
		display: block;
	}

	.news-archive {
		margin-top: 15px;
	}

	.page-header h1 {
		font-size: 28px;
	}

	article.page {
		padding-top: 36px;
	}

}