@charset "utf-8";

/**
 * font
 * 
 */
@font-face {
	font-family: 'fontello';
	src: url('../font/fontello.eot?4387305');
	src: url('../font/fontello.eot?4387305#iefix') format('embedded-opentype'),  
		 url('../font/fontello.woff2?4387305') format('woff2'),  
		 url('../font/fontello.woff?4387305') format('woff'),  
		 url('../font/fontello.ttf?4387305') format('truetype'),  
		 url('../font/fontello.svg?4387305#fontello') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'yumincho-r';
	src: local('YuMincho-Demibold'), local('YuMincho Demibold');
}



/**
 * 
 * 
 */
:root {
	--key-color: #295001;
	--active-key-color: #3B7401;
	--bg-color: rgba(41, 80, 1, 0.05);
	--section-bg-color: rgba(41, 80, 1, 0.025);
	/*--border-color: #e0e0e0;*/
	--border-color: rgba(41, 80, 1, 0.1);
	--related-border-color: rgba(41, 80, 1, 0.5);
	
	--regular: 400;
	--medium: 500;
	--semibold: 600;
	--bold: 700;
	--extrabold: 800;
}



/**
 * Global
 * 
 */
* {
	margin: 0;
	padding: 0;
}
html, body {
	height: 100%;
}
body {
	background: #fff;
	color: #222;
	font-size: 15px;
	/*font-family : "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", 'Yu Mincho','YuMincho', 'Noto Serif JP', serif;*/
	font-family: "Shippori Mincho", serif;
	/*font-weight: bold;*/
	font-weight: var(--semibold);
	/*letter-spacing: 0.04em;*/
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	font-feature-settings: 'palt';
}
h1, h2, h3 {
	font-weight: var(--extrabold);
}
img {
	border: 0;
}
img, input, textarea {
	vertical-align: bottom;
}
figure {
	overflow: hidden;
}
figure img {
	width: 100%;
	height: auto;
}
hr {
	border-top: 1px dotted #8c8b8b;
	color: #FFFFFF;
}
em {
	font-style: normal;
}
a:link, 
a:visited {
	color: #000;
	text-decoration: none;
	outline: none;
}
a, a img, a::after, a span, a dl, a dl dt, a dl dd, a *,
label, label img, input, button,
section div {
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease, text-decoration .2s ease;
}
i, address {
	font-style: normal;
}
b {
	font-weight: normal;
	font-style: normal;
}

.icon-linkto {
	stroke: #295001;
}
.link-to {
}
.link-to a {
	display: block;
	box-sizing: border-box;
	padding: 14px 16px;
	border: 1px solid #295001;
	border-radius: 2px;
	line-height: 1;
	color: #295001;
}
.link-to a i {
	float: right;
	margin-top: -3px;
}
.link-to .icon-linkto {
	width: auto;
	height: 7px;
}

footer.global #scroll-top a,
.price,
.date {
	/*font-family: 'Hiragino Sans', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;*/
	font-family: "Noto Sans JP", sans-serif;
	/*font-optical-sizing: auto;*/
	font-weight: 400;
}



/**
 * #body
 * 
 */
#body {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	min-height: 100%;
}
#body #header-container {
	flex-shrink: 0;
	position: sticky;
	top: 0;
	padding: 24px;
	width: 192px;
}
#body #content-container {
	align-self: stretch;
	position: relative;
	padding-top: 24px;
	padding-bottom: 280px;
	width: calc(100% - 240px);
	
}
#body #content-container .content {
	box-sizing: border-box;
	padding-bottom: 80px;
}



/**
 * header.global
 * 
 */
header.global {
	border-top: 4px solid #295001;
	border-bottom: 4px solid #295001;
}
header.global #logo {
	padding: 24px 0 32px;
	text-align: center;
}
header.global #logo img {
	width: 152px;
	height: auto;
}
header.global nav ul {
	line-height: 1;
}
header.global nav ul li {
	display: block;
}
header.global nav ul li a {
	display: block;
	padding: 8px 0;
}
header.global nav ul li a i {
	float: right;
	margin-top: -3px;
}
header.global nav #nav-container > ul > li {
	padding: 16px 0;
	border-top: 1px solid #295001;
}
header.global nav #nav-container > ul > li > a {
	line-height: 18px;
}
header.global nav #nav-container > ul > li:not(#nav-contact) > a span {
	vertical-align: middle;
}
header.global nav #nav-container > ul > li:not(#nav-contact) > a span::before {
	content: url(../images/pc/icon-nav.svg);
	display: inline-block;
	vertical-align: middle;
	width: 18px;
	height: 15px;
	margin-top: -6px;
	margin-right: 6px;
}
header.global nav #nav-container > ul > li#nav-contact {
}
header.global nav #nav-container ul li ul li {
	margin-left: 24px;
	font-size: 13px;
}
header.global nav #nav-container ul li ul li a {
	color: #295001;
}
header.global nav #nav-container ul li#nav-contact {
	padding: 24px 0;
}
header.global nav #nav-container ul li#nav-contact a {
	padding: 10px 14px 10px 16px;
	border: 1px solid #295001;
	border-radius: 2px;
	color: #295001;
	font-size: 13px;
}

header.global nav #nav-container ul li a.current,
header.global nav #nav-container ul li a:hover {
	color: #3B7401;
}
header.global nav #nav-container ul li a.current .icon-linkto,
header.global nav #nav-container ul li a:hover .icon-linkto {
	stroke: #3B7401;
}
header.global nav #nav-container ul li#nav-contact a.current, 
header.global nav #nav-container ul li#nav-contact a:hover {
	border-color: #3B7401;
	background-color: #3B7401;
	color: #fff;
}

header.global nav #nav-container ul li#nav-contact a.current .icon-linkto, 
header.global nav #nav-container ul li#nav-contact a:hover .icon-linkto {
	stroke: #fff;
}




/**
 * footer.global
 * 
 */
footer.global {
	position: absolute;
	bottom: 0;
	box-sizing: border-box;
	margin-top: -280px;
	padding: 48px 0 0;
	border-top: 1px solid #e0e0e0;
	width: 100%;
	height: 280px;
}
footer.global .container {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	> div:not(#copyright) {
		flex-grow: 2;
	}
	h1 img {
		width: auto;
		height: 40px;
	}
	#operations {
		margin: 16px 0 -0.2em;
		line-height: 1.4;
		font-size: 12px;
		dt {
			margin-bottom: 4px;
		}
	}
	ul {
		margin-top: 20px;
		width: 320px;
		li {
			display: block;
			a {
				padding: 12px 16px;
				border: none;
				background-color: rgba(41, 80, 1, 0.05);
				font-size: 12px;
				&:hover, &.current {
					background-color: #3B7401;
					color: #fff;
					svg {
						stroke: #fff;
					}
				}
			}
		}
	}
	#grant-label {
		display: flex;
		align-items: flex-end;
		gap: 8px;
		line-height: 1;
		font-size: 12px;
		dd img {
			width: 40px;
			height: auto;
		}
	}
	#copyright {
		flex-basis: 100%;
		margin-top: 24px;
		small {
			display: block;
			color: #707070;
			line-height: 1;
			font-size: 10px;
		}
	}
	#scroll-top {
		position: absolute;
		top: -32px;
		right: 48px;
		width: 40px;
		text-align: center;
		line-height: 1;
		a {
			line-height: 1.3;
			font-size: 10px;
			font-weight: normal;
			text-align: center;
			i {
				display: block;
				margin-bottom: 6px;
				text-align: center;
				svg {
					stroke: #000;
				}
			}
			span {
				display: block;
			}
			&:hover {
				color: #3B7401;
				svg {
					stroke: #3B7401;
				}
			}
		}
	}
}


/**
 * .container
 * 
 */
.container {
	margin: 0 auto;
	padding: 0 48px;
	max-width: 1030px;
}





/**
 * .slides
 * 
 */
.slides .slick-list {
	/*position: relative;*/
}
/*#slider-for .slick-list .slick-track,*/
.slides .slick-list .slick-track {
/*	position: absolute;
	top: 0;
	left: 0;*/
	height: 100%;
}
/*#slider-for .slider .slick-list .slick-track .slick-slide,
.slides .slick-list .slick-track .slick-slide {
	height: 100%;
}*/
.cover .slides .slick-list .slick-track .slick-slide img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}


.text {
}
.text h2 {
	margin-top: -0.25em;
	margin-bottom: -0.25em;
	line-height: 1.5;;
	font-size: 24px;
	letter-spacing: 0.06em;
}
.text p {
	margin-top: -0.4em;
	margin-bottom: -0.4em;
	line-height: 1.8;
	letter-spacing: 0.04em;
}
.text h2 + p {
	margin-top: calc(24px - 0.4em);
}
.text p + p {
	margin-top: calc(24px - 0.4em);
}


.filter-nav {
	padding: 16px 8px;
	background-color: var(--bg-color);
	border-radius: 4px;
	dl {
		+ dl {
			margin-top: 16px;
		}
		font-size: 14px;
		dt {
			margin-bottom: 8px;
			line-height: 1;
		}
		dd {
			margin: -0.2em 0;
			line-height: 1.4;
			ul {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: -8px;
				li {
					display: block;
					margin-bottom: 8px;
					&:not(:last-of-type) {
						margin-right: 8px;
					}
					a {
						padding: 0 8px;
						background-color: #fff;
						border-radius: 2px;
						color: var(--key-color);
						font-size: 13px;
						font-weight: var(--bold);
						&:hover, &[aria-selected="true"] {
							background-color: var(--key-color);
							color: #fff;
						}
					}
				}
			}
		}
	}
	+ .content-wrapper {
		margin-top: 24px;
	}
}
	


.factories-wrapper, .products-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}
.products-wrapper {
	row-gap: 32px;
}
.factory-cell, .product-cell {
	flex-basis: calc((100% - 72px) / 4);
	/*flex-basis: calc((100% - 96px) / 5);*/
	a {
		display: block;
		position: relative;
		&:hover {
			.name {
				color: var(--key-color);
			}
		}
	}
	figure {
		/*margin-bottom: 8px;*/
		aspect-ratio: 1 / 1;
		img {
			object-fit: cover;
			width: 100%;
			height: 100%;
		}
	}
	.terms {
		position: absolute;
		top: 0;
		left: 0;
		box-sizing: border-box;
		padding: 8px 0;
		width: 100%;
		aspect-ratio: 1 / 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		gap: 8px;
	}
	ul {
		display: flex;
		flex-direction: column;
		gap: 2px;
/*		position: absolute;
		left: 0;*/
		width: fit-content;
		line-height: 1.4;
		font-size: 12px;
		font-weight: var(--bold);
		li {
			display: block;
			padding: 0 8px;
			background-color: rgba(255,255,255,0.7);
			width: fit-content;
/*			+ li {
				margin-top: 2px;
			}*/
		}
		&.types {
			/*font-size: 13px;*/
			/*top: 8px;*/
			li {
				background-color: rgba(0,0,0,0.7);
				color: #fff;
			}
		}
		&.tags {
			li {
			}
			/*bottom: 8px;*/
		}
	}
	.name {
		margin: 8px 0 0;
		line-height: 1.3;
	}
	
}
.factory-cell {
	box-sizing: border-box;
	padding: 8px 8px 16px;
	background-color: var(--bg-color);
}
.product-cell {
	a {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
	.price {
		/*flex-grow: 2;*/
		margin-top: 8px;
		line-height: 1;
		font-feature-settings: normal;
		span {
			font-size: 12px;
		}
		.note {
			display: block;
			margin-top: calc(8px - 0.2em);
			margin-bottom: -0.2em;
			line-height: 1.4;
		}
	}
	.factory {
		margin-top: 12px;
		/*padding-top: 8px;*/
		/*border-top: 1px dashed var(--border-color);*/
		padding: 4px 8px;
		background-color: var(--bg-color);
		width: fit-content;
		line-height: 1;
		font-size: 12px;
	}
}


.topics-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 24px 16px;
	flex-wrap: wrap;
}
.topic-cell {
	flex-basis: calc((100% - 64px) / 5);
	flex-shrink: 0;
	a {
		display: block;
		position: relative;
	}
	figure {
		aspect-ratio: 1 / 1;
		img {
			object-fit: cover;
			width: 100%;
			height: 100%;
		}
	}
	dl {
		margin-top: 8px;
		line-height: 1;
		dt {
			margin-bottom: 8px;
			font-size: 11px;
		}
		dd {
		}
		dd.title {
			margin: -0.2em 0;
			line-height: 1.4;
		}
	
	}
	.terms {
		position: absolute;
		top: 0;
		left: 0;
		box-sizing: border-box;
		padding: 8px 0;
		width: 100%;
		aspect-ratio: 1 / 1;
/*		margin-top: 12px;*/
		font-size: 12px;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		gap: 4px;
		li {
			display: block;
			padding: 0 8px;
			background-color: rgba(255,255,255,0.7);
			width: fit-content;
			line-height: 1.4;
			font-size: 12px;
			font-weight: var(--bold);
		}
	}
}


#content-title {
	margin: 12px 0 36px;
	/*margin-top: 12px;*/
	line-height: 1;
	font-size: 23px;
	font-weight: var(--bold);
	#archive-container & {
	}
	#single-container & {
		margin-bottom: 24px;
		font-size: 18px;
		img {
			height: 22px;
		}
	}
	i, span {
		display: inline-block;
		vertical-align: baseline;
	}
	i {
		margin-right: 10px;
	}
	img {
		width: auto;
		height: 32px;
		vertical-align: baseline;
	}
}


#article-body > section:not(#related-topics) {
	margin-top: 48px;
	&:not(:first-of-type) {
		padding-top: 24px;
		border-top: 1px solid var(--border-color);
	}
	header {
		margin-bottom: 24px;
		h1 {
			color: var(--key-color);
			line-height: 1;
			font-size: 20px;
			&:has(+ .filter-nav) {
				margin-bottom: 16px;
			}
		}
	}
	+ section:not(#related-topics) {
/*		padding-top: 24px;
		border-top: 1px solid var(--border-color);*/
	}
}



#related-topics {
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid var(--related-border-color);
	header {
		margin-bottom: 24px;
		h1 {
			display: flex;
			align-items: baseline;
			line-height: 1;
			font-size: 20px;
			/*color: #000;*/
			img {
				width: auto;
				height: 24px;
			}
		}
	}
}



/**
 * #home
 * 
 */
#home #cover {
}
#home .cover .slides .slick-list {
	aspect-ratio: 1124 / 550;
	/*padding-top: calc(100% * 550 / 1124);*/
}

#home .link-to {
	position: absolute;
	top: 0;
	right: 48px;
	flex-shrink: 0;
	/*width: calc((100% - 160px) / 3);*/
	width: 320px;
}
#home .link-to a:hover {
	border-color: #3B7401;
	background-color: #3B7401;
	color: #fff;
}
#home .link-to a:hover .icon-linkto {
	stroke: #fff;
}

#home > section {
	margin-top: 56px;
}
#home section .container {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	position: relative;
}
#home section header {
	width: calc(100% - (100% - 48px) / 3 - 32px);
	min-height: 44px;
	h1 {
		line-height: 24px;
		font-size: 20px;
		span, i {
			display: inline-block;
		vertical-align: baseline;
		line-height: 1;
		}
		i {
			margin-right: 8px;
			img {
				width: auto;
				height: 24px;
			}
		}
	}
	.excerpt {
		margin-top: 16px;
		font-size: 13px;
	}
}
#home section .container .section-content {
	flex-shrink: 0;
	width: 100%;
	margin-top: 24px;
}
#home #about {
	#about-body {
		align-items: stretch;
		.text {
			flex-basis: calc(100% - 320px);
			word-break: keep-all;
			overflow-wrap: anywhere;
			h2 {
				width: calc(1.06em * 20);
			}
			p {
				width: calc(1.04em * 32);
			}
		}
		.link-and-logo {
			flex-basis: 320px;
			display: flex;
			flex-direction: column;
			justify-content: end;
			.link-to {
			}
			.logo {
				text-align: center;
				img {
					width: 208px;
					height: auto;
				}
			}
		}
			
	}
	> figure {
		margin-top: 56px;
		.slick-list {
			height: calc((100vw - 240px) * 206 / 1124);
			.slick-slide + .slick-slide {
				margin-left: 3px;
			}
			.slick-track .slick-slide img {
				width: auto !important;
				height: 100% !important;
			}
		}
	}
}

#home #projects {
	padding: 56px 0;
	background-color: var(--section-bg-color);
	.section-content {
		display: flex;
		gap: 32px 32px;
		flex-wrap: wrap;
		> div {
			flex-basis: calc((100% - 32px) / 2);
			a {
				display: block;
				&:hover {
					h2 {
						color: var(--key-color);
					}
				}
			}
			figure {
				margin-bottom: 16px;
				aspect-ratio: 3 / 1;
				img {
					object-fit: cover;
					width: 100%;
					height: 100%;
				}
			}
			h2 {
				margin-bottom: 16px;
				line-height: 1;
				font-size: 16px;
			}
			.excerpt {
				margin: -0.3em 0;
				line-height: 1.6;
			}
		}
	}
}

#home #factories-and-products {
	padding: 0 0 56px;
	background-color: var(--section-bg-color);
	/*padding: 56px 0;*/
	/*border-top: 1px solid var(--related-border-color);*/
	.container {
		display: flex;
		gap: 32px;
		
	}
	section {
		position: relative;
		flex-basis: calc((100% - 32px) / 2);
		padding-top: 32px;
		border-top: 1px solid var(--related-border-color);
		/*background-color: var(--section-bg-color);*/
		.link-to {
			position: static;
			/*margin: 24px auto 0;*/
			margin-top: 24px;
		}
	}
}




.heading-icon {
	
}
article > header {
	margin-bottom: 32px;
	p:has(+ h1) {
		margin-bottom: 12px;
		line-height: 1;
		/*font-size: 16px;*/
	}
	h1 {
		line-height: 1;
		font-size: 24px;
	}
	.heading-icon {
		margin-right: 8px;
		width: auto;
		height: 22px;
	}
}



#about {}
#about .overview {
	margin-bottom: 16px;
}

#about article > figure {
	margin-bottom: 20px;
}
#about article #article-body section {
	+ section {
		margin-top: 80px;
	}
}
#about #about-orae .section-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	> div {
		flex-basis: calc((100% - 16px) / 2);
	}
	#philosophy-overview {
		h2 {
			margin-top: -0.25em;
			margin-bottom: -0.25em;
			line-height: 1.5;;
			font-size: 20px;
			letter-spacing: 0.06em;
		}
		p {
			margin-top: -0.4em;
			margin-bottom: -0.4em;
			line-height: 1.8;
			/*font-size: 13px;*/
			letter-spacing: 0.04em;
			+ p {
				margin-top: calc(24px - 0.4em);
			}
		}
		figure {
			display: flex;
			justify-content: space-between;
			align-items: stretch;
			margin: 64px auto;
			max-width: 400px;
			img {
				align-self: flex-start;
				width: calc((100% - 24px) / 2);
			}
			ul {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 24px 0;
				li {
					display: block;
					position: relative;
					font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
					font-size: 16px;
					&::before {
						content: '';
						position: absolute;
						top: 50%;
						left: calc(-100% - 8px);
						width: 100%;
						border-bottom: 2px dotted #222;
					}
				}
			}
		}
	}
	#philosophy-detail {
		dl {
			box-sizing: border-box;
			padding: 16px;
			background-color: rgba(41, 80, 1, 0.05);
			border-radius: 4px;
			+ dl {
				margin-top: 16px;
			}
			dt {
				margin-bottom: 12px;
				line-height: 1;
				font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
				font-size: 12px;
			}
			dd {
				h3 {
					margin: -0.2em 0 -0.2em;
					line-height: 1.4;
					font-size: 16px;
				}
				strong {
					display: block;
					margin-top: 12px;
					color: var(--key-color);
					/*font-size: 14px;*/
				}
				p + p {
					margin-top: 0.4em;
				}
			}
		}
	}
}
#about .section-content .overview {
	/*margin-bottom: 24px;*/
}
#about #activity {
	.activity {
		display: flex;
		align-items: center;
		gap: 24px;
		margin-top: 24px;
		.text, figure {
			flex-basis: calc((100% - 24px) / 2);
			flex-shrink: 0;
		}
		.text {
			h2 {
				margin: -0.2em 0;
				line-height: 1.4;
				font-size: 20px;
				+ p {
					margin-top: 12px;
				}
			}
		}
		figure {
			/*position: relative;*/
			/*height: 100%;*/
			img {
/*				position: absolute;
				top: 0;*/
				object-fit: cover;
				width: 100%;
				height: 100%;
			}
		}
		+ .activity {
			
		}
	}
}
#about #akita-souzounomori {
	--column-gap: 24px;
	.overview h2 {
		font-size: 20px;
	}
	.wrapper {
		display: flex;
		gap: var(--column-gap);
		/*align-items: center;*/
		> * {
			flex-basis: calc((100% - var(--column-gap)) / 2);
			flex-shrink: 0;
		}
		.text {
			h2 {
				margin: -0.2em 0;
				line-height: 1.4;
				font-size: 20px;
				+ p {
					margin-top: 12px;
				}
			}
		}
	
	}
	.links {
/*		display: flex;
		gap: var(--column-gap);
		flex-wrap: wrap;*/
		margin-top: 24px;
		li {
			/*flex-basis: calc((100% - var(--column-gap)) / 2);*/
			display: block;
			+ li {
				margin-top: 24px;
			}
		}
		a:hover {
			background-color: var(--key-color);
			color: #fff;
			svg {
				stroke: #fff;
			}
		}
	}
}



main#projects {
	.archive-content {
		display: flex;
		gap: 48px;
		flex-wrap: wrap;
		> div {
			flex-basis: calc((100% - 48px) / 2);
			a {
				display: block;
				&:hover {
					h2 {
						color: var(--key-color);
					}
				}
			}
			figure {
				margin-bottom: 16px;
				aspect-ratio: 2 / 1;
				img {
					object-fit: cover;
					width: 100%;
					height: 100%;
				}
			}
			h2 {
				margin-bottom: 16px;
				line-height: 1;
				font-size: 20px;
				
			}
			.excerpt {
				margin: -0.3em 0;
				line-height: 1.6;
			}
		}
	}
}

#project #single-container #article-body {
	.overview {
		display: flex;
		gap: 48px;
		> div, > figure {
		}
		> figure {
		}
		> div {
			flex-basis: 40em;
			flex-shrink: 0;
			margin: -0.34em 0;
			line-height: 1.68;
		}
	}
}


:is(#product, #factory) #article-body header .terms {
	display: flex;
	gap: 8px;
	flex-direction: column;
	/*flex-wrap: wrap;*/
	margin-bottom: 12px;
	ul {
		display: flex;
		gap: 2px;
		width: fit-content;
		line-height: 1.4;
		font-size: 12px;
		font-weight: var(--bold);
		li {
			display: block;
			padding: 0 8px;
			width: fit-content;
			box-sizing: border-box;
		}
		&.types li {
			background-color: rgba(0,0,0,0.7);
			color: #fff;
		}
		&.tags li {
			border: 1px solid rgba(0,0,0,0.4);
		}
	}
}


#products {}
/*#products .products .category-nav {
	margin-bottom: 40px;
}*/

#product #photos {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}
#product #slider-for {
	width: calc(100% * 544 / 664);
	margin-right: 24px;
}
#product #slider-for .slick-list {
	position: relative;
	/*padding-top: calc(100% * 2 / 3);*/
	padding-top: 100%;
	/*border: 1px solid #e0e0e0;*/
	/*background-color: rgba(41, 80, 1, 0.05);*/
}
#product #slider-for .slick-list .slick-track .slick-slide img {
	object-fit: contain;
	width: 100%;
	height: 100%;
}
#product .slider-for .slick-list .slick-track {
}
#product .slider .slick-list .slick-track .slick-slide {
}
#product .slider .slick-list .slick-track .slick-slide img {
}
#product .slider .slick-list .slick-track .slick-slide figcaption {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 8px;
	background-color: rgba(255, 255, 255, 0.7);
	line-height: 1;
	font-size: 12px;
}
#product #slider-nav {
	position: relative;
	overflow-y: hidden;
	width: calc(100% * 120 / 664);
	padding-top: calc(((100% - 24px) * 544 / 664) * 2 / 3);
}
#product #slider-nav ul#thumbnails {
	position: absolute;
	top: 0;
	width: 100%;
}
#product #slider-nav ul#thumbnails li {
	display: block;
	position: relative;
	box-sizing: border-box;
	/*padding-top: calc(100% * 2 / 3);*/
	padding-top: calc(100% - 2px);
	border: 1px solid transparent;
	cursor: pointer;
}
#product #slider-nav ul#thumbnails li.current {
	border-color: #295001;
}
#product #slider-nav ul#thumbnails > li + li {
	margin-top: 24px;
}
#product #slider-nav ul#thumbnails > li img {
	position: absolute;
	top: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
}
#product #slider-nav #arrows {
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	pointer-events: none;
}
#product #slider-nav {
}
#product #slider-nav.scrolled:hover #arrows {
	display: block;
}
#product #slider-nav #arrows a {
	display: none;
}
#product #slider-nav.scrolled  #arrows a {
	display: block;
	position: absolute;
	width: 100%;
	z-index: 10;
	left: 0;
	/*background-color: rgba(255, 255, 255, 0.75);*/
	/*background-color: rgba(41, 80, 1, 0.85);*/
	background-color: #295001;
	cursor: pointer;
	text-align: center;
	opacity: 0;
	pointer-events: none;
}
#product #slider-nav.scrolled:hover #arrows a.on {
	opacity: 1;
	pointer-events: auto;
}
#product #slider-nav.scrolled #arrows a:hover {
	/*background-color: rgba(41, 80, 1, 1);*/
	background-color: #3B7401;
}
#product #slider-nav #arrows a#up {
	bottom: 0;
}
#product #slider-nav #arrows a#down {
	top: 0;
}
#product #slider-nav.scrolled #arrows a svg {
	stroke: #fff;
}



#product #slider-nav .slider {
	position: relative;
	height: 100% !important;
}
#product #slider-nav .slider .slick-list {
	height: 476px !important;
}
#product #slider-nav .slider .slick-track {
	margin-top: -24px;
}
#product #slider-nav .slider .slick-slide {
	position: relative;
	padding-top: calc(100% * 2 / 3 + 24px);
	border: none;
}
#product #slider-nav .slick-slide + .slick-slide {
}
#product #slider-nav .slick-slide span {
	position: absolute;
	box-sizing: border-box;
	top: 24px;
	width: 100%;
	height: calc(100% - 24px);
	border: 1px solid transparent;
}
#product #slider-nav .slider .slick-current span {
	border: 1px solid #295001;
}
#product #slider-nav .slick-slide img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}


#product article #article-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
	/*margin-top: 32px;*/
	/*padding-top: 32px;*/
	/*border-top: 1px solid #e0e0e0;*/
}
#product article #article-wrapper #article-body {
	/*width: calc((100%) - (100% - 64px) / 3 - 32px);*/
}
#product article #article-wrapper #handlers {
	/*flex-basis: calc((100% - 80px) / 3);*/
	box-sizing: border-box;
	flex-basis: 280px;
	flex-shrink: 0;
}
#product article header {
	/*margin-top: 38px;*/
	margin-bottom: 32px;
	h1 {
		margin-top: -0.2em;
		margin-bottom: -0.2em;
		line-height: 1.4;
		font-size: 23px;
	}
	.price {
		margin-top: 16px;
		line-height: 1;
		font-size: 20px;
		font-feature-settings: normal;
		span {
			font-size: 16px;
			&.note {
				display: block;
				margin-top: 12px;
				font-size: 13px;
			}
		}
	}
}


#product article #desctiption {
}
#product article #desctiption p {
	margin-top: -0.5em;
	margin-bottom: -0.5em;
	line-height: 2;
}
#product article #gellery {
	margin-top: 32px;
}
#product article #gellery > figure + figure {
	margin-top: 16px;
}
#product article #gellery > figure figcaption {
	margin-top: calc(8px - 0.2em);
	margin-bottom: -0.2em;
	line-height: 1.4;
	font-size: 12px;
	letter-spacing: 0.06em;
}
#product article #gellery img {
	width: 100%;
	height: auto;
}

#product article #material-and-size {
	margin-top: 24px;
	padding: 12px;
	border: 1px solid #e3e0e0;
	width: fit-content;
	dl {
		margin-left: 12px;
		line-height: 1;
		+ dl {
			margin-top: 16px;
		}
		dt {
			font-size: 13px;
			&::before {
				display: inline-block;
				vertical-align: middle;
				margin-top: -2px;
				margin-left: -12px;
				width: 12px;
				font-family: "fontello";
				font-style: normal;
				font-weight: normal;
				speak: none;
				content: '\f10c';
				font-size: 10px;
				transform: scale(0.8);
			}
		}
		dd {
			margin-top: 8px;
		}
	}
}
#product #handlers {
	padding: 16px 8px 16px;
	background-color: var(--bg-color);
	> h1 {
		margin-bottom: 16px;
		color: var(--key-color);
		line-height: 1;
		font-size: 14px;
		/*text-align: center;*/
	}
	section {
/*		padding: 8px 8px 16px;
		background-color: var(--bg-color);*/
		+ section {
			margin-top: 24px;
		}
		figure {
			margin-bottom: 16px;
			aspect-ratio: 1 / 1;
			img {
				object-fit: cover;
				width: 100%;
				height: 100%;
			}
		}
		h1 {
			margin: -0.25em 8px;
			line-height: 1.5;
			font-size: 16px;
		}
		.overview {
			margin-top: 12px;
			p {
				margin: -0.3em 8px;
				line-height: 1.6;
				font-size: 13px;
			}
		}
		.link-to {
			margin: 16px 8px 0;
			a {
				padding: 14px 24px;
				/*border-radius: calc(1em + 28px);*/
				text-align: center;
				font-size: 13px;
				letter-spacing: 0.04em;
				&:hover {
					border-color: #3B7401;
					background-color: #3B7401;
					color: #fff;
					.icon-linkto {
						stroke: #fff;
					}
				}
			}
		}
	}
}
/*#product article #article-wrapper #article-aside > h1 {
	margin-bottom: 12px;
	padding: 12px 12px;
	background-color: #295001;
	border-radius: 2px;
	line-height: 1;
	color: #fff;
	font-size: 14px;
}
#product article #order {
	display: block;
	box-sizing: border-box;
	padding: 12px 12px;
	background-color: #295001;
	border-radius: 2px;
	line-height: 1;
	color: #fff;
}
#product article #order #order-description {
	margin: -0.2em 0;
	line-height: 1.4;
	font-size: 12px;
}
#product article #order #order-description span {
	display: inline-block;
}
#product article #order .order-to {
	margin-top: 12px;
}
#product article #order .order-to a {
	display: block;
	position: relative;
	padding: 12px 12px;
	border-radius: 4px;
	background-color: #fff;
	color: #295001;
}
#product article #order .order-to a span {
	display: block;
	margin-top: 8px;
	font-size: 11px;
}
#product article #order .order-to a b {
	position: absolute;
	top: 12px;
	right: 12px;
	text-align: center;
	font-family: "Helvetica Neue","Helvetica","Arial",sans-serif;
	font-size: 12px;
}
#product article #order .order-to a b i {
	display: block;
}
#product article #order .order-to a b i + i {
	margin-top: 4px;
}
#product article #order .order-to a i svg {
	stroke: #295001;
}
#product article #order .order-to a:hover {
	color: #3B7401;
}
#product article #order .order-to a:hover i svg {
	stroke: #3B7401;
}

#product article #buy {
}
#product article #buy a {
	display: block;
	background-color: #295001;
	border-radius: 2px;
	color: #fff;
}
#product article #buy a .icon-linkto {
	stroke: #fff;
}
#product article #factories {
}
#product article #factories section {
	padding: 8px 8px 16px;
	background-color: rgba(41, 80, 1, 0.05);
}
#product article #factories section + section {
	margin-top: 16px;
}
#product article #factories section figure {
	position: relative;
	margin-bottom: 16px;
	padding-top: 100%;
}
#product article #factories section figure img {
	position: absolute;
	object-fit: cover;
	top: 0;
	width: 100%;
	height: 100%;
}*/
/*#product article #factories section h1 {
			
}
#product article #factories section .overview {
	
}
#product article #factories section .overview p {
				
}*/
/*#product article #factories section*/ 
/*#product article #factories section .link-to a {

}
#product article #buy a:hover, 
#product article #factories section .link-to a:hover {
					
}
#product article #buy a:hover .icon-linkto, 
#product article #factories section .link-to a:hover .icon-linkto {
	
}*/

#product #related {
	margin-top: 48px;
}

/*#article-body > section h1,*/
.related-archive h1 {
	line-height: 1;
	font-size: 18px;
}
/*#article-body > section h1 i,*/ 
/*#article-body > section h1 span,*/
.related-archive h1 i, 
.related-archive h1 span {
	display: inline-block;
	vertical-align: middle;
}
/*#article-body > section h1 i,*/
.related-archive h1 i {
	margin-right: 8px; 
}
/*#article-body > section h1 i img,*/
.related-archive h1 i img {
	width: auto;
	height: 24px;
	vertical-align: baseline;
}
.related-archive .section-content {
	margin-top: 16px;
}
.related-archive .wrapper.thumbnails {
	margin-top: -48px;
	margin-left: -32px;
}



#factory {
}
#factory #article-wrapper, 
#factory #article-wrapper #article-aside .wrapper {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
#factory #article-wrapper > div {
	width: calc((100% - 48px) / 2);
}
#factory #article-wrapper #article-body {
	header {
		margin-bottom: 32px;
		h1 {
			margin-top: -0.2em;
			margin-bottom: -0.2em;
			line-height: 1.4;
			font-size: 23px;
		}
	}
	#business-description {
		margin-top: calc(16px - 0.2em);
		margin-bottom: -0.2em;
		line-height: 1.4;
		font-size: 13px;
	}
	#desctiption {
		p {
			margin-top: -0.5em;
			margin-bottom: -0.5em;
			line-height: 2;
			letter-spacing: 0.04em;
			
		}
		+ p {
			margin-top: calc(24px - 0.5em);
		}
	}
	#factory-data {
		margin-top: 32px;
		dl {
			display: flex;
			justify-content: space-between;
			align-items: first baseline;
			padding: 12px 0;
			border-bottom: 1px solid var(--border-color);
			&:first-of-type {
				border-top: 1px solid var(--border-color);
			}
			dt {
				width: 72px;
				font-size: 13px;
			}
			dd {
				width: calc(100% - 72px);
				> a:hover {
					color: #3B7401;
				}
			}
			&.address dd span {
				display: block;
			}
			&.sns dd ul {
				margin-left: -8px;
				line-height: 1;
				li {
					display: inline-block;
					margin-left: 8px;
					a svg {
						fill: #666;
					}
					a:hover svg {
						fill: #3B7401;
					}
				}
			}
		}
	}
	.related-projects {
		margin-top: 32px;
		padding: 12px 12px 16px;
		border: 1px solid var(--border-color);
		/*background-color: var(--bg-color);*/
		line-height: 1;
		dt {
			/*color: var(--key-color);*/
			font-size: 14px;
			font-weight: var(--bold);
			.heading-icon {
				margin-right: 8px;
				img {
					width: auto;
					height: 18px;
				}
			}
		}
		dd {
			margin-top: 16px;
			font-size: 13px;
			ul {
				li {
					display: block;
					margin-left: 12px;
					&::before {
						content: '\f10c';
						display: inline-block;
						vertical-align: middle;
						margin-top: -2px;
						margin-left: -12px;
						width: 12px;
						font-family: "fontello";
						font-style: normal;
						font-weight: normal;
						speak: none;
						font-size: 10px;
						transform: scale(0.5);
					}
					+ li {
						margin-top: 8px;
					}
					a:hover {
						color: var(--key-color);
					}
				}
			}
		}
	}
}

#factory #article-wrapper #article-aside {
	figure {
		aspect-ratio: 1 /1;
		img {
			object-fit: cover;
			width: 100%;
			height: 100%;
		}
	}
	.wrapper {
		margin-top: 24px;
		> div {
			width: calc((100% - 24px) / 2);
		}
	}
	#message {
		margin: -0.4em 0 -0.4em;
		line-height: 1.8;
		font-size: 12px;
	}
	#participant-name {
		margin-top: 12px;
		margin-bottom: 12px;
		border-top: 1px solid #e0e0e0;
		padding-top: 12px;
		line-height: 1;
		font-size: 15px;
	}
	#personality {
		margin: -0.4em 0 -0.4em;
		line-height: 1.8;
		font-size: 12px;
	}
}
#factory section.related-archive {
	margin-top: 48px;
}
#factory #factories {
	margin-top: 48px;
	padding-top: 48px;
	border-top: 1px solid #e0e0e0;
}
#factory #factories .wrapper.thumbnails {
	margin-top: -32px;
}



/*#single-container #article-body section {
	padding-top: 16px;
}
#single-container #article-body section + section {
	margin-top: 32px;
}
#single-container #article-body section h1 {
	margin-bottom: 16px;
}*/



/**
 * #page-nav
 * 
 */
#page-nav {
	margin-top: 48px;
	line-height: 26px;
	text-align: center;
}
#paginate-links .page-numbers {
	display: inline-block;
	box-sizing: border-box;
	margin: 0 4px;
	border: 1px solid transparent;
	width: 28px;
	text-align: center;
}
#paginate-links a {
	color: #295001;
}
#paginate-links a:not(.next):not(.prev):hover,
#paginate-links .current {
	border-color: #295001;
}
#paginate-links a i {
	display: inline-block;
}
#paginate-links .next i svg,
#paginate-links .prev i svg {
	display: inline-block;
	vertical-align: middle;
	margin-top: -2px;
	width: 8px;
	height: auto;
	stroke: #295001;
}
#paginate-links .next:hover i svg,
#paginate-links .prev:hover i svg {
	stroke: #222;
}




#topic {}
#topic #article-wrapper {
}
#topic #article-wrapper article {
	margin: 0 auto;
	max-width: calc((100%) - (100% - 64px) / 3 - 32px);
	min-width: 688px;
}
#topic article > header {
	margin-bottom: 40px;
	padding-bottom: 24px;
	border-bottom: 1px solid #e0e0e0;
}
#topic article > header .date {
	margin-bottom: 16px;
	line-height: 1;
	font-size: 12px;
}
#topic article > header h1 {
	margin-top: -0.2em;
	margin-bottom: -0.2em;
	line-height: 1.4;
	font-size: 23px;
}
#topic article #article-body #spec {
	margin-bottom: 32px;
	font-size: 13px;
}
#topic article #article-body #spec dl {
	display: flex;
	align-items: flex-start;
}
#topic article #article-body #spec dl + dl {
}
#topic article #article-body #spec dl dt {
	flex-shrink: 0;
	margin-left: 12px;
	width: 3em;
}
#topic article #article-body h2 {
	margin-top: 24px;
	font-size: 16px;
}
#topic article #article-body ul {
	margin-top: calc(16px - 0.5em);
}
#topic article #article-body ul li {
	display: block;
	margin-left: 12px;
}
#topic article #article-body ul li::before {
	display: inline-block;
	vertical-align: middle;
	margin-top: -2px;
	margin-left: -12px;
	width: 12px;
	font-family: "fontello";
	font-style: normal;
	font-weight: normal;
	speak: none;
	content: '\f10c';
	font-size: 10px;
	transform: scale(0.8);
}
#topic article #article-body p {
	margin-top: -0.5em;
	margin-bottom: -0.5em;
	line-height: 2;
	letter-spacing: 0.06em;
	text-align: justify;
}
#topic article #article-body p + p {
	margin-top: calc(32px - 0.5em);
}
#topic article #article-body h2 + p {
	margin-top: calc(16px - 0.5em);
}
#topic article #article-body img {
	margin-bottom: -1em;
	width: 100%;
	height: auto;
}
#topic article #article-body .section {
	margin-top: 48px;
	padding: 16px;
	/*background-color: rgba(41, 80, 1, 0.05);*/
	border: 1px solid #e0e0e0;
}
#topic article #article-body .section + .section {
	margin-top: 24px;
}
#topic article #article-body .section h2 {
	margin-top: 0;
	line-height: 1;
}
#topic article #article-body .section h2 + .excerpt {
	margin-top: 20px;
}
#topic article #article-body .section .excerpt p {
	line-height: 1.6;
}
#topic article #article-body .section .excerpt + dl {
	margin-top: 16px;
}
#topic article #article-body .section dl + dl {
	margin-top: 8px;
}
#topic article #article-body .section dl {
	display: flex;
	justify-content:flex-start;
}
#topic article #article-body .section dl dt {
	margin-right: 1em;
}

#topic #related {
	margin-top: 48px;
}


/**
 * 
 * 
 */
#gallery .cover .slides .slick-list {
	/*padding-top: calc(100% * 550 / 1124);*/
	aspect-ratio: 1124 / 550;
}
#gallery #gallery-profile {
	display: flex;
	justify-content: space-between;
	gap: 48px;
	margin-top: 48px;
	> div {
		box-sizing: border-box;
		flex-basis: calc((100% - 48px) / 2);
		flex-shrink: 0;
	}
	.contact-data {
		/*padding: 16px;*/
		/*background-color: var(--bg-color);*/
		/*border: 1px solid var(--border-color);*/
		dl {
			display: flex;
			align-items: baseline;
			gap: 8px;
			padding: 12px 8px;
			border-top: 1px solid var(--border-color);
			line-height: 1;
			&:last-of-type {
				border-bottom: 1px solid var(--border-color);
			}
			dt {
				flex-basis: 5em;
				/*color: var(--key-color);*/
				font-size: 13px;
			}
			+ dl {
				/*margin-top: 12px;*/
			}
			&.address dd span {
				margin-right: 8px;
			}
		}
	}
}


/**
 * 
 * 
 */
#contact {}
#contact #article-body {
	margin: 0 auto;
	max-width: calc((100%) - (100% - 64px) / 3 - 32px);
	min-width: 688px;
}
#contact .wpcf7 {
	margin-top: 24px;
}
#contact #form-body dl {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
#contact #form-body dl + dl {
	margin-top: 16px;
}
#contact #form-body dl dt {
	padding: 8px 0;
}
#contact #form-body dl dd {
	width: calc(100% - (100% - 96px) / 4);
}
#contact #form-body dl dd input, 
#contact #form-body dl dd textarea {
	padding: 8px;
	width: 100%;
	border: 1px solid #295001;
	border-radius: 2px;
	font: inherit;
}
#contact #acceptance {
	margin-top: 24px;
	line-height: 1;
	font-size: 12px;
}
#contact #acceptance dd {
	margin-top: 12px;
}
#contact #acceptance dt a {
	color: #295001;
}
#contact #acceptance dt a:hover {
	color: #3B7401;
}
#contact #acceptance .wpcf7-list-item {
	margin: 0;
}
#contact #acceptance .wpcf7-list-item label input, 
#contact #acceptance .wpcf7-list-item label span {
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
}
#contact #acceptance .wpcf7-list-item label input {
	margin-right: 8px;
}
#contact #submit {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 24px;
	line-height: 1;
}
#contact #submit > p {
	position: relative;
	margin-left: calc((100% - 96px) / 4);
	flex-shrink: 0;
	width: calc((100% - 64px) / 3);
}
#contact #submit > p i {
	position: absolute;
	top: 50%;
	right: 12px;
	margin-top: -9px;
	width: 12px;
	pointer-events: none;
}
#contact #submit > p .icon-linkto {
	vertical-align: middle;
	stroke: #295001;
}
#contact #submit input:disabled {
	color: #888;
	border-color: #888;
	cursor: auto;
}
#contact #submit input {
	display: block;
	padding-left: 1em;
	background-color: transparent;
	border: 1px solid #295001;
	border-radius: 2px;
	width: 100%;
	height: 40px;
	font: inherit;
	color: #295001;
	letter-spacing: 1em;
	cursor: pointer;
}
#contact #submit input:enabled:hover {
	background-color: #3B7401;
	border-color: #3B7401;
	color: #fff;
}
#contact #submit > p input:enabled:hover + i .icon-linkto {
	stroke: #fff;
}

.wpcf7-not-valid-tip {
	margin-top: 8px;
	line-height: 1;
	font-size: 12px !important;
	font-weight: bold !important;
}
#contact .wpcf7 form .wpcf7-response-output {
	flex-shrink: 0;
	margin: 0;
	padding: 0;
	border: none;
	width: calc((100% - 64px) / 2);
	line-height: 1.4;
	font-size: 12px;
}
.wpcf7 form.invalid .wpcf7-response-output {
	border: none;
	color: #dc3232;
}



#privacy-policy {}
#privacy-policy article #article-body {
	margin-top: 0;
}
#privacy-policy article #article-body h2 {
	margin-top: 40px;
	margin-bottom: 28px;
	padding: 4px 10px;
	background-color: rgba(41, 80, 1, 0.05);
	line-height: 1.7;
	font-size: 15px;
}
#privacy-policy article #article-body h2 em {
	display: inline-block;
}
#privacy-policy article #article-body h2 em::before {
	content: '';
	display: inline-block;
	box-sizing: border-box;
	margin-right: 8px;
	height: 12px;
	width: 2px;
	border-left: 2px solid #000;
}
#privacy-policy article #article-body p, 
#privacy-policy article #article-body ol {
	margin-top: -0.4375em;
	margin-bottom: -0.4375em;
	line-height: 1.875;
}
#privacy-policy article #article-body p + p {
	margin-top: 0.4375em;
}
#privacy-policy article #article-body ol + p,
#privacy-policy article #article-body p + ol {
	margin-top: calc(24px - 0.4375em);
}
#privacy-policy article #article-body ol li {
	margin-left: 1.5em;
	list-style-type: none;
	list-style-position: inside;
	counter-increment: cnt;
}
#privacy-policy article #article-body ol li::before {
	display: inline-block;
	content: "("counter(cnt)"）";
	margin-left: -1.5em;
}
#privacy-policy article #article-body a {
	color: #295001;
}
#privacy-policy article #article-body a:hover {
	color: #3B7401;
}

@media only screen and (max-width: 1365px) {
	.products .category-nav ul li {
		width: calc((100% - 32px) / 4);
	}
	
}