@charset "utf-8";



@media print {
	.u-print-break{
		/* break-before: page; */
	}
	.u-print-hide{
		display: none !important;
	}
	.l-main--casestudy :is(h1, h2, h3, h4, h5, h6, p, .c-box){
		break-inside: avoid;
	}
	.l-header{
		display: none !important;
	}
}

:root{
	scroll-padding-top: 111px;
}
@media (min-width: 1216px){
	.u-for-sp{ display: none !important; }
}
@media (max-width: 1215px){
	:root{
		scroll-padding-top: 64px;
	}
	.u-for-pc{ display: none !important; }
}

.l-main--casestudy{
	--device-ratio: 1;
}
@media (max-width: 1215px){
	.l-main--casestudy{
		--device-ratio: .8;
		font-size: .875em;
	}
}
@media (min-width: 1216px){
	.l-body:has(> .l-main--casestudy){
		padding-top: 111px;
	}
}

.l-container{
	max-width: min(1600px, 90vw);
	margin-inline: auto;
}

.l-container--article{
	max-width: min(1000px, 90vw);
}



.l-split{
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
}

.l-split--interview-header{
	grid-template-columns: 6fr 4fr;
	align-items: center;
	gap: 1.875em 3.75em;
	
	& :where(.l-split__image){
		order: 1;
	}
	& :where(.l-split__image > img){
		width: 100%;
	}
}
@media (max-width: 1215px){
	.l-split--interview-header{
		grid-template-columns: auto;
		grid-auto-flow: row;
	}
}

.l-split--profile{
	align-items: center;
	grid-template-columns: 6fr 4fr;
	gap: 1.875em 3.75em;
	
	& :where(.l-split__image){
		order: 1;
		
		& > :where(img){
			width: 100%;
		}
	}
}
@media (max-width: 1215px){
	.l-split--profile{
		grid-template-columns: auto;
		grid-auto-flow: row;
	}
}

.l-cards{
	display: grid;
	grid-template-columns: repeat(var(--l-cards-repeat, 3), var(--l-cards-basis, 1fr));
	gap: var(--l-cards-gap, 1em);
}

.l-cards--joiner{
	--l-cards-unit-size: 140px;
	
	--l-cards-repeat: auto-fit;
	--l-cards-basis: minmax(min(var(--l-cards-unit-size), 100%), 1fr);
	--l-cards-gap: .5em;
}
@media (max-width: 575px){
	.l-cards--joiner{
		--l-cards-unit-size: 100px;
	}
}




.u-stack{
	& > *{
		--u-stack: 0;
		margin-block: 0;
	}
	& > * + *{
		margin-top: var(--u-stack);
	}
	&:where(.u-stack--page) > * + *{
		--u-stack: calc(6.875rem * var(--device-ratio, 1));
	}
	&:where(.u-stack--section) > * + *{
		--u-stack: calc(5rem * var(--device-ratio, 1));
	}
	&:where(.u-stack--content) > * + *{
		--u-stack: calc(3.125rem * var(--device-ratio, 1));
	}
	&:where(.u-stack--sentence) > * + *{
		--u-stack: calc(1.25rem * var(--device-ratio, 1));
	}
}

@media print {
	.u-stack{
		&:where(.u-stack--page) > * + *{
			--u-stack: 3.4375rem;
		}
		&:where(.u-stack--section) > * + *{
			--u-stack: 2.5rem;
		}
		&:where(.u-stack--content) > * + *{
			--u-stack: 1.5625rem;
		}
		&:where(.u-stack--sentence) > * + *{
			--u-stack: 0.625rem;
		}
	}
}



.c-ttl{
	line-height: 1.5;
	font-weight: bold;
}

.c-ttl-page{
	/* font-size: 1.5em; */
	font-size: max(1.5em * var(--device-ratio, 1), 1em);
	
	&:where([data-ruby]){
		display: grid;
		grid-template-areas: "ruby" "main";
		gap: .833em;
	}
	
	&:where([data-ruby])::before{
		content: attr(data-ruby);
		font-size: .583em;
		grid-area: ruby;
	}
	
	&:where([data-ruby])::after{
		content: "";
		border-bottom: 1px solid;
		width: 1.25em;
		
		grid-area: ruby;
		align-self: center;
		translate: calc(-100% - .5em) 0;
	}
}

@media (max-width: 1215px){
	.c-ttl-page{
		/* font-size: max(1.25em * var(--device-ratio, 1), 1em); */
	}
}

.c-ttl-sect{
	/* font-size: 2em; */
	font-size: max(2em * var(--device-ratio, 1), 1em);
	border-bottom: 2px solid #aeaeae;
	padding-bottom: .25em;
}
@media (max-width: 1215px){
	.c-ttl-sect{
		font-size: max(1.875em * var(--device-ratio, 1), 1em);
	}
}

.c-ttl-content{
	/* font-size: 1.25em; */
	font-size: max(1.25em * var(--device-ratio, 1), 1em);
	background: #f2f1ef;
	border-radius: .25em;
	padding: .9em;
	padding-left: 2em;
	
	&:where([data-ruby]){
		display: flex;
		gap: 1em;
		
		&::before{
			content: attr(data-ruby);
			font-size: .5em;
			font-weight: normal;
			align-self: center;
			color: white;
			background: #333;
			border-radius: .5em;
			padding: .5em 1em;
		}
	}
}

.c-ttl--step{
	font-size: 1.125em;
	font-size: max(1.125em * var(--device-ratio, 1), 1em);
}

.c-ttl-question{
	/* background: #f2f1ef linear-gradient(#377E22 0 0) no-repeat left center / 1em 2px; */
	background: #f2f1ef linear-gradient(#377E22 0 0) no-repeat 1em center / 2px calc(100% - 1.333lh);
}
@media print {
	.c-ttl-question{
		border-image: linear-gradient(#f2f1ef 0 0) 1 fill;
	}
}

.c-ttl-sentence{
	display: flex;
	gap: .5em;
}

.c-ttl--profile{
	display: grid;
}

.c-ttl--joiner-wrap{
	text-align: center;
	border-bottom: none;
	padding-bottom: 0;
}

.c-ttl--joiner{
	font-size: 1.25em;
	text-align: center;
}

.c-ttl--interview-cover{
	line-height: 2.5;
	font-size: 2em;
	color: white;
	background: #377E22;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	
	border-radius: .25em;
	display: inline;
	padding: .5em .75em;
}

.c-ttl--interview-cover-profile{
	&:where([data-ruby]){
		&::before{
			content: attr(data-ruby);
			font-size: .7em;
			color: #377E22;
			display: block;
			margin-bottom: .5em;
		}
	}
}

.c-ttl--interview-header{
	line-height: 1.875;
}

.c-note{
	line-height: 1.5;
}

.c-note-center{
	text-align: center;
}

.c-note-notice{
	text-align: right;
}

.c-note--place{
	font-weight: normal;
}

.c-note--name{
	font-size: 2em;
}

.c-note--unit{
	font-size: .5em;
}

.c-btn{
	text-align: center;
	border-radius: 100vmax;
	
	display: block;
	padding: 1em;
	
	&:where(:any-link){
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 1em;
		
		&::after{
			content: "";
			border-style: solid;
			border-width: 1px 1px 0 0;
			rotate: .125turn;
			align-self: center;
			width: .333em;
			height: .333em;
		}
	}
	
}

.c-btn-more{
	color: #377E22;
	background: white;
	max-width: 23.75em;
	
	&:hover{
		color: #377E22;
	}
}

.c-box{
	background: #ecf6e9;
	border-radius: .3125em;
	padding: 1.875em;
}
@media print{
	.c-box{
		border-image: linear-gradient(#ecf6e9 0 0 ) 1 fill;
	}
}

.c-box--interview-header,
.c-box--profile{
	color: white;
	background: #377E22 linear-gradient(#f2f1ef 0 0) no-repeat right bottom / 15em 15em;
}
@media print {
	.c-box--interview-header,
	.c-box--profile{
		color: white;
		border-image: linear-gradient(#377E22 0 0) 1 fill;
	}
}

.c-box--joiner{
	background: white;
}
@media print {
	.c-box--joiner{
		border-image: linear-gradient(white 0 0) 1 fill;
	}
}


.c-box--notice{
	border: 1px solid #D9D9D9;
	background: none;
}

.c-box--rice-procedure{
	background: #ecf6e9 url(../tabuchi-farm/img/illust1.png) no-repeat right 1em bottom 1em;
}

.c-define{
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1em;
	
	& :where(dt){
		/* font-size: .75em;
		color: white;
		background: #333;
		border-radius: .2em;
		padding: .5em 1em; */
		
		font-weight: bold;
		color: #377e22;
		
		&::before{
			content: "・";
		}
		
	}
}

.c-withicon{
	display: flex;
	align-items: center;
	gap: 1em;
}
.c-label{
	font-size: .75em;
	background: #ccc;
	border-radius: .25em;
	padding: .25em .75em;
}
.c-label--step{
	font-size: .666em;
	font-weight: normal;
	color: white;
	background: #333;
}


.p-toc{
	border-image: linear-gradient(#f2f1ef 0 0) 1 fill / 1 / 7.5em 100vw 0;
	padding-block: 3.75em;
}

.c-box--toc{
	background: white;
}

.c-ttl--toc{
	font-size: 1.25em;
	color: #377e22;
	
	border-bottom: 1px solid;
	border-image: linear-gradient(#f4f4f4 0 0) 1 / 1 / 0 1.875rem;
	padding-bottom: .5em;
}

.c-toc{
	& > * + *{
		border-top: 1px dotted #999;
		padding-top: 1em;
		margin-top: 1em;
	}
	
	& :where(:any-link){
		color: inherit;
	}
}

.c-link--toc{
	display: flex;
	align-items: center;
	gap: .75em;
	
	&:where(:any-link){
		text-decoration: underline;
		
		&:hover{
			text-decoration: none;
			color: #377E22;
		}
	}
	
	&::before{
		content: "";
		/* background:
			linear-gradient(to right, white 1px, transparent 0) no-repeat center / 20% 20%,
			linear-gradient(to top, white 1px, transparent 0) no-repeat center / 20% 20%,
			#377E22; */
		/* border: 3px solid red;
		border-radius: 100vmax; */
		
		border-style: solid;
		border-width: 0 0 1px 1px;
		rotate: -.125turn;
		
		display: block;
		width: .5em;
		height: .5em;
	}
}

.c-marker{
	color: #377E22;
	background: white;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding: .25em .5em;
	border-radius: .25em;
}

.c-hr{}

.c-hr--profile{
	border-color: white;
	max-width: 7.5em;
	translate: -1.875rem 0;
}

.c-banner--joiner{
	border: 1px solid #999;
	border-radius: .5em;
	padding: .75em;
	
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: contain;
}

.c-img{
	
}
@media print {
	.c-img{
		max-width: 64% !important;
		display: block !important;
		margin-inline: auto !important;
	}
}
.c-img--round{
	border-radius: .5em;
}
.c-img--insert{
	border-radius: .5em;
	width: 100%;
}
.c-img--insert-right{
	border-radius: .5em;
	max-width: max(40%, 180px);
	float: right;
	margin-left: 1em;
	margin-bottom: 1em;
}
@media (max-width: 1215px){
	.c-img--insert-right{
		float: none;
		width: 80%;
		display: block;
		margin-inline: auto;
		max-width: none;
	}
}
.c-img--footer-portrait{
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: .5em;
}

/* @media screen and (max-width: 1215px){
	.c-scroller{
		overflow: auto;
		
		&::after{
			content: "👆️左右にスクロールできます";
			font-size: .875em;
			color: #666;
			position: sticky;
			left: 0;
			display: block;
			text-align: center;
			margin-top: 1em;
		}
		& > img{
			max-width: none;
		}
	}
} */


.p-interview-cover{
	position: relative;
	z-index: 1;
	
	display: grid;
	
	& > *{
		grid-area: 1 / 1;
	}
}
.p-interview-cover__image{
	justify-self: end;
	z-index: -1;
	
	& > :where(img){
		height: 100%;
		object-fit: cover;
	}
}
.p-interview-cover__body{
	justify-self: start;
	align-self: center;
}
.u-stack--interview-cover > * + *{
	margin-top: 3.125rem;
}

.c-box--interview-cover{
	background: white;
	padding: 1.5em;
}
@media (min-width: 1216px){
	.c-box--interview-cover{
		max-width: fit-content;
	}
}

@media (max-width: 1215px){
	.p-interview-cover{
		/* row-gap: 1em; */
		
		& > *{
			grid-area: auto;
		}
	}
	.p-interview-cover__image{
		order: -1;
	}
	.p-interview-cover__body{
		margin-top: -3.5lh;
		justify-self: stretch;
	}
	.c-ttl--interview-cover{
		font-size: 1.25em;
	}
	.u-stack--interview-cover > * + *{
		margin-top: 1rem;
	}
}

.p-interview{
	:where(&, .c-ttl) + &{
		margin-top: calc(3.125rem * var(--device-ratio, 1));
	}
	& > * + *{
		margin-top: calc(1.25rem * var(--device-ratio, 1));
	}
}

@media (max-width: 1215px){
	.c-img--hero{
		aspect-ratio: 4 / 3;
	}
}

.p-joiner{
	border-image: linear-gradient(#f2f1ef 0 0) 1 fill / 1 / 0 100vw;
	padding-block: 3.75em;
}

.p-procedure{
	--grid-gap: 1em;
	counter-reset: i;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	align-items: start;
	gap: var(--grid-gap);
	
	& > *{
		counter-increment: i;
		
		display: grid;
		grid-template-areas: "step" "main";
		gap: 1em;
		
		&::before{
			content: "STEP" counter(i);
			font-size: .75em;
			font-weight: normal;
			align-self: center;
			color: white;
			background: #333;
			border-radius: .5em;
			padding: .5em 1em;
			
			grid-area: step;
			align-self: center;
			justify-self: start;
			z-index: 1;
		}
	}
}
@media (min-width: 1216px){
	.p-procedure{
		& > :where(:not(:last-child)){
			&::after{
				content: "";
				border-bottom: 1px dotted #377E22;
				margin-right: calc(var(--grid-gap) * -1);
				grid-area: step;
				align-self: center;
			}
		}
		
	}
}
@media (max-width: 1215px){
	.p-procedure{
		grid-template-columns: none;
		gap: 0;
		
		& > *{
			border-left: 1px dotted #377E22;
			padding-left: .5em;
			padding-bottom: var(--grid-gap);
		}
	}
}


.p-harvest-grid{
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	
	& > *{
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 3;
	}
}

@media (min-width: 1216px){
	.p-harvest-grid{
		row-gap: .5em;
	}
}

@media (max-width: 1215px){
	.p-harvest-grid{
		grid-auto-flow: row;
		grid-template-columns: repeat(2, auto) 1fr;
		column-gap: 1em;
		
		& > *{
			grid-template-columns: subgrid;
			grid-column: span 3;
		}
	}
}

@media (min-width: 1216px){
	.p-harvest-calendar{
		
		&::before{
			content: "";
			grid-row: 2;
			grid-column: 1;
			align-self: center;
		}
		&:not(:last-child)::before{
			border-bottom: 2px dotted #377E22;
		}
	}
	.p-harvest-calendar__month{
		grid-row: 1;
	}
	.p-harvest-calendar__step{
		grid-row: 2;
		grid-column: 1;
		place-self: center start;
	}
	.c-note--harvest-calendar{
		grid-row: 3;
	}
}

@media (max-width: 1215px){
	.p-harvest-calendar{
		&::before{
			content: "";
			grid-row: 1;
			grid-column: 2;
			place-self: stretch center;
		}
		&:not(:last-child)::before{
			border-left: 2px dotted #377E22;
		}
	}
	
	.p-harvest-calendar__month{
		grid-column: 1;
	}
	.p-harvest-calendar__step{
		place-self: start start;
		
		grid-row: 1;
		grid-column: 2;
	}
	.c-note--harvest-calendar{
		grid-column: 3;
	}
}

.c-label--harvest-calendar{
	color: white;
	background: #333;
}

.c-note--harvest-calendar{
	--offset: 1.875em;
}
@media (min-width: 1216px){
	.c-note--harvest-calendar{
		padding-right: var(--offset);
	}
}
@media (max-width: 1215px){
	.c-note--harvest-calendar{
		padding-bottom: var(--offset);
	}
}