@charset 'utf-8';

/*---------------------------------------------------------------------- */
/* Business Styles
------------------------------------------------------------------------ */

/* Utilities
---------------------------------------------------------- */

/* Unit --------------------------------- */

/* .unit-business */

.unit-business {
	margin-top: 7rem;
}

/* .unit-imgs */

.unit-imgs {
	display: grid;
	gap: 2rem 0;
	margin-top: 4rem;
}

/* .unit-about */

.unit-about {
	display: grid;
	gap: 3rem 0;
	margin-top: 9rem;
	padding: 5rem 3rem;
	background: #fff;
	clip-path: inset(0 0 round 2rem);
}

.unit-about > .title {
	padding: .8rem 0;
	line-height: 1.65;
	background: var(--warm-color03);
	border-radius: 1rem;
	color: #fff;
	font-size: 1.8rem;
	text-align: center;
	letter-spacing: .05;
}

.unit-about > .link > .btn {
	height: 7.7rem;
	text-align: left;
}

/* List --------------------------------- */

/* .list-business */

.list-business {
	display: flex;
	flex-flow: column;
	gap: 3.5rem 0;
	margin-top: 8rem;
}

.list-business > li {
	background: #fff;
	clip-path: inset(0 0 round 2rem);
}

.list-business > li > .unit01 {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	gap: 3rem 0;
	height: 25.3rem;
}

.list-business > li > .unit01 > .title {
	display: flex;
	justify-content: center;
	line-height: 1.55;
	font-size: 2.2rem;
	text-align: center;
	letter-spacing: .05em;
}

/* .list-product */

.list-product {
	display: flex;
	flex-flow: column;
	gap: 3.5rem 0;
	margin-top: 4rem;
}

.list-product > li {
	display: flex;
	flex-flow: column;
	font-weight: 700;
	text-align: center;
}

.list-product > li > .title {
	margin-top: 1.5rem;
	line-height: 1.6;
	font-size: 2rem;
	letter-spacing: .05em;
}

.list-product > li > .txt {
	font-size: 1.4rem;
	letter-spacing: .05em;
}

.list-product > li > .splide {
	order: -1;
	clip-path: inset(0 0 round 2rem);
}

.list-product .splide__arrow,
.list-product .splide__arrow svg {
	width: 2.6rem;
	height: 2.6rem;
}

.list-product .splide__arrow svg {
	fill: var(--txt-color);
}

.list-product .splide__arrow {
	background: none;
	opacity: 1;
}

.list-product .splide__arrow--prev {
	left: .5rem;
}

.list-product .splide__arrow--next {
	right: .5rem;
}

/* .list-process */

.list-process {
	display: flex;
	flex-flow: column;
	gap: 4.5rem 0;
	margin-top: 5rem;
}

.list-process > li {
	display: flex;
	flex-flow: column;
	gap: 2rem 0;
}

.list-process > li > .num {
	align-self: center;
	display: grid;
	place-content: center;
	padding-bottom: .1em;
	width: 4.7rem;
	height: 4.7rem;
	background: var(--btn-color);
	border-radius: 50%;
	font-weight: 700;
	font-size: 2.5rem;
	letter-spacing: 0;
}

.list-process > li > .txt {
	text-align: justify;
}

/* .list-work */

.list-work {
	display: flex;
	flex-flow: column;
	gap: 5rem 0;
	margin-top: 5.5rem;
}

.list-work > li {
	display: flex;
	flex-flow: column;
}

.list-work > li > .title {
	margin-top: 3rem;
	line-height: 1.55;
	font-size: 2.2rem;
	letter-spacing: .05em;
}

.list-work > li > .txt {
	margin-top: 2.5rem;
	font-weight: 700;
}

.list-work > li > .img {
	order: -1;
}

.list-work > li:nth-of-type(odd) > .img {
	margin-left: -3rem;
	clip-path: inset(0 0 round 0 2rem 2rem 0);
}

.list-work > li:nth-of-type(even) > .img {
	margin-right: -3rem;
	clip-path: inset(0 0 round 2rem 0 0 2rem);
}


/* Layout
---------------------------------------------------------- */

/* Craft - Paper Page --------------------------------- */

.business-craft-paper #main-content > .img,
.business-craft-paper #main-content > .txt {
	margin-top: 7rem;
}

.business-craft-paper :is(#product, #forbusiness) {
	padding-top: 0;
}

.business-craft-paper #forbusiness > .lead {
	margin-top: 4rem;
}

.business-craft-paper #forbusiness > .img {
	margin-top: 5rem;
}

/* Craft - Coffee Page --------------------------------- */

.business-craft-coffee #product {
	padding-top: 0;
}

/* Craft - Assembly Page --------------------------------- */

.business-craft-assembly #case {
	padding-top: 0;
}

/* Craft - Voice Page --------------------------------- */

.business-craft-voices #main {
	padding-bottom: 0;
}

/* Remote Work - Voices Page --------------------------------- */

.business-remote-voices .section > .link {
	margin-top: 6rem;
}

.business-remote-voices .section > .link:last-of-type {
	margin-top: 3rem;
}



/*---------------------------------------------------------------------- */
/* 768px Tablet & PC Styles
------------------------------------------------------------------------ */

@media screen and (min-width: 768px), print {

/* Utilities
---------------------------------------------------------- */

/* Block --------------------------------- */

/* .unit-business */

.unit-business {
	margin: 10rem -15rem 0;
}

/* .unit-imgs */

.unit-imgs {
	grid-template-columns: 53.1rem auto;
	gap: 0 2.5rem;
	margin-top: 8rem;
	width: 100rem;
}

/* .unit-about */

.unit-about {
	grid-template-areas:
		'title title'
		'txt   img'
		'link  link';
		grid-template-columns: auto 31.6rem;
	gap: 5rem 7rem;
	padding: 9.5rem;
	width: 100rem;
	clip-path: inset(0 0 round 4rem);
}

.unit-about > .title {
	grid-area: title;
	font-size: 2.4rem;
}

.unit-about > .txt {
	grid-area: txt;
}

.unit-about > .img {
	grid-area: img;
}

.unit-about > .link {
	grid-area: link;
}

.unit-about > .link > .btn {
	padding-top: 0;
	padding-bottom: 0;
	width: 55.8rem;
}

/* List --------------------------------- */

/* .list-business */

.list-business {
	gap: 6rem 0;
	margin: 20rem -4rem 0;
}

.list-business > li {
	display: flex;
	clip-path: inset(0 0 round 3rem);
}

.list-business > li:nth-of-type(even) {
	flex-flow: row-reverse;
}

.list-business > li > [class^="unit"] {
	width: 50%;
}

.list-business > li > .unit01 {
	align-items: flex-start;
	justify-content: space-between;
	gap: 0;
	padding: 7rem 9rem;
	height: auto;
}

.list-business > li > .unit01 > .title {
	height: auto;
	line-height: 1.75;
	font-size: 2.5rem;
	text-align: left;
}

/* .list-product */

.list-product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 7rem 8rem;
	margin-top: 8rem;
	width: 120rem;
}

.list-product > li > .title {
	margin-top: 4.5rem;
	font-size: 2.6rem;
}

.list-product > li > .txt {
	font-size: 1.7rem;
}

.list-product > li > .splide {
	clip-path: inset(0 0 round 3rem);
}

.list-product .splide__arrow,
.list-product .splide__arrow svg {
	width: 4rem;
	height: 4rem;
}

.list-product .splide__arrow--prev {
	left: 1rem;
}

.list-product .splide__arrow--next {
	right: 1rem;
}

/* .list-process */

.list-process {
	gap: 6rem 0;
	margin-top: 12rem;
}

.list-process > li {
	display: flex;
	flex-flow: row nowrap;
	gap: 0 4.5rem;
}

.list-process > li > .num {
	align-self: flex-start;
	width: 6.7rem;
	height: 6.7rem;
	font-size: 3.5rem;
}

.list-process > li > .img {
	width: 41.8rem;
}

/* .list-work */

.list-work {
	gap: 10rem 0;
	margin-top: 16rem;
}

.list-work > li {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 5rem;
}

.list-work > li:nth-of-type(odd) {
	grid-template-areas:
		'img title'
		'img txt  ';
	grid-template-columns: 49rem auto;
}

.list-work > li:nth-of-type(even) {
	grid-template-areas:
		'title img'
		'txt   img';
	grid-template-columns: auto 49rem;
}

.list-work > li > .title {
	grid-area: title;
	margin-top: 0;
	font-size: 2.6rem;
}

.list-work > li > .txt {
	grid-area: txt;
	margin-top: 0;
}

.list-work > li > .img {
	grid-area: img;
}

.list-work > li:nth-of-type(odd) > .img {
	margin-left: 0;
	clip-path: inset(0 0 round 3rem);
}

.list-work > li:nth-of-type(even) > .img {
	margin-right: 0;
	clip-path: inset(0 0 round 3rem);
}


/* Layout
---------------------------------------------------------- */

/* Craft - Paper Page --------------------------------- */

.business-craft-paper #main-content > .img,
.business-craft-paper #main-content > .txt {
	margin-top: 11rem;
}

.business-craft-paper #forbusiness > .lead {
	margin-top: 5rem;
}

.business-craft-paper #forbusiness > .img {
	margin-top: 8rem;
	width: 56rem;
}

/* Craft - Assembly Page --------------------------------- */

.business-craft-assembly #case > .img {
	width: 71.8rem;
}

/* Craft - Voice Page --------------------------------- */

.business-craft-voices #main {
	padding-bottom: 26rem;
}

.business-craft-voices .block-overview {
	padding-bottom: 11rem;
}

/* Remote Page --------------------------------- */

.business-remote .section > .link {
	margin-top: 9rem;
}

.business-remote .section > .link:has(.btn-large) {
	margin-top: 16rem;
}

.business-remote .section > .link:last-of-type {
	margin-top: 6rem;
}

/* Remote Work - Workstyle Page --------------------------------- */

.business-remote-workstyle #environment > .img {
	width: 70rem;
}

/* Remote Work - Voices Page --------------------------------- */

.business-remote-voices .block-overview {
	padding-bottom: 11rem;
}

.business-remote-voices .block-voices > .byline {
	margin-top: 20rem;
}

}