/* For Frontpages */

header {
	width: 100%;
	height: 100vh;
	background: none;
	position: relative;
	overflow: hidden;
}
header video {
	display: block;
	width: 100%;
	height: 100vh;
	object-fit: cover;
	position: relative;
	z-index: 0;
}
header .video-container {
	position: relative;
	overflow: hidden;
}
header .video-container::before {
	content: "";
	display: block;
	width: 100%;
	height: 100vh;
	background: rgba(44, 31, 19, 0.4);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
header .inner {
	width: 100%;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

@media screen and (max-width: 750px) {
	.pc-only {
		display: none !important;
	}
	header,
	header video,
	header .video-container::before,
	header .inner {
		min-height: calc(100vw * 677 / var(--sp-w));
	}
	header .inner {
		padding: 0;
		min-height: calc(100vw * 667 / var(--sp-w));
	}
	header .logo {
		width: calc(100vw * 82 / var(--sp-w));
		margin-top: calc(100vw * 20 / var(--sp-w));
		margin-left: calc(100vw * 20 / var(--sp-w));
	}
	header h1 {
		width: calc(100vw * 161 / var(--sp-w));
		font-size: calc(100vw * 10 / var(--sp-w));
		line-height: 2.0;
		text-align: left;
		position: absolute;
		top: calc(100vw * 30 / var(--sp-w));
		left: calc(100vw * 126 / var(--sp-w));
		margin: 0;
	}
	header .lead {
		color: #fff;
		font-size: calc(100vw * 18 / var(--sp-w));
		position: absolute;
		bottom: calc(100vw * 55 / var(--sp-w));
		left: calc(100vw * 36 / var(--sp-w));
	}

	main {
		padding: 0;
		letter-spacing: 0.016em;
	}

	h2 {
		text-align: center;
	}
	h2 .sub {
		display: block;
		font-size: calc(100vw * 14 / var(--sp-w));
		font-weight: 600;
		letter-spacing: 0.025em;
		margin-bottom: calc(100vw * -18 / var(--sp-w));
	}
	h2 .main {
		display: block;
		font-family: "Montserrat", sans-serif;
		font-weight: 600;
		font-size: calc(100vw * 46 / var(--sp-w));
		letter-spacing: 0.015em;
		margin: 0 0 calc(100vw * 16 / var(--sp-w));
	}

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

	.concept {
		padding: calc(100vw * 64 / var(--sp-w)) calc(100vw * 18 / var(--sp-w)) calc(100vw * 60 / var(--sp-w));
	}
	.concept .summary {
		font-size: calc(100vw * 18 / var(--sp-w));
		font-weight: 500;
	}
	.concept .summary + * {
		margin-top: calc(100vw * 40 / var(--sp-w));
	}
	.concept p:not(.summary) + p:not(:has(.btn)) {
		margin-top: calc(1em * 2);
	}
	.concept p:has(.btn) {
		margin-top: calc(100vw * 38 / var(--sp-w));
	}
	.concept picture {
		display: block;
		margin-top: calc(100vw * 38 / var(--sp-w));
	}

	.our-work {
		padding: calc(100vw * 64 / var(--sp-w)) 0 calc(100vw * 75 / var(--sp-w));
	}
	.our-work p {
		padding: 0 calc(100vw * 18 / var(--sp-w));
	}
	.our-work .slider {
		margin-top: calc(100vw * 35 / var(--sp-w));
	}
	.our-work p:has(.btn) {
		margin-top: calc(100vw * 55 / var(--sp-w));
	}
	.our-work img {
		width: 319px;
	}

	.our-factories {
		min-height: calc(100vw * 950 / var(--sp-w));
		padding: calc(100vw * 70 / var(--sp-w)) 0 calc(100vw * 116 / var(--sp-w));/*R60*/
		background: url("/wp-content/themes/grainworks/assets/img/top/ourfactories-bg-sp.webp") 50% 0% no-repeat;
		background-size: cover;
		display: flex;
		flex-direction: column;
		color: #fff;
	}
	.our-factories > p {
		padding: 0 calc(100vw * 18 / var(--sp-w));
	}
	.our-factories .summary {
		font-size: calc(100vw * 18 / var(--sp-w));
		margin-top: auto;
		margin-bottom: 0;
	}
	.our-factories .summary + p {
		margin-top: calc(1em * 2);
		margin-bottom: 0;
	}
	.our-factories :has(.btn) {
		margin-top: calc(100vw * 38 / var(--sp-w));
		margin-bottom: 0;
	}

	.oem-process {
		padding: calc(100vw * 80 / var(--sp-w)) 0 calc(100vw * 87 / var(--sp-w));
		background: #F4F0ED;
		border-radius: calc(100vw * 60 / var(--sp-w)) 0 calc(100vw * 60 / var(--sp-w)) 0;
		margin-top: calc(100vw * -60 / var(--sp-w));
	}
	.oem-process p {
		padding: 0 calc(100vw * 20 / var(--sp-w));
	}
	.oem-process p:has(.btn) {
		margin-top: calc(100vw * 38 / var(--sp-w));
	}
	.oem-process .steps {
		padding: 0 calc(100vw * 20 / var(--sp-w));
		margin-top: calc(100vw * 42 / var(--sp-w));
		display: grid;
		grid-template-columns: /*1fr 1fr*/ repeat(2, calc((100% - calc(100vw * 20 / var(--sp-w))) / 2));
		column-gap: calc(100vw * 20 / var(--sp-w));
		row-gap: calc(100vw * 30 / var(--sp-w));
	}
	.oem-process .clm {
		display: flex;
		flex-direction: column;
	}
	.oem-process dt {
		font-size: calc(100vw * 16 / var(--sp-w));
		letter-spacing: 0.05em;
		line-height: 1.25;
		white-space: nowrap;
		display: flex;
		align-items: center;
		margin-top: calc(100vw * 14 / var(--sp-w));
	}
	.oem-process .stepno {
		font-family: "Montserrat", sans-serif;
		font-size: calc(100vw * 11.49 / var(--sp-w));
		font-weight: 500;
		letter-spacing: 0.1em;
		line-height: 1.6;
		text-align: center;
		margin-right: calc(100vw * 10 / var(--sp-w));
	}
	.oem-process .stepno span {
		display: block;
		font-size: calc(100vw * 21.7 / var(--sp-w));
		line-height: 1;
	}
	.oem-process .text span {
		display: block;
		font-size: calc(100vw * 12 / var(--sp-w));
	}
	.oem-process dd {
		width: 100%;
		font-size: calc(100vw * 13 / var(--sp-w));
		line-height: 1.5;
		margin-top: calc(100vw * 5 / var(--sp-w));
	}
	.oem-process dd:has(img) {
		order: -1;
		margin: 0;
	}
	.oem-process .line {
		display: none;
	}

	.blog {
		padding: calc(100vw * 56 / var(--sp-w)) calc(100vw * 20 / var(--sp-w)) calc(100vw * 76 / var(--sp-w));
	}
	.blog li + li {
		margin-top: calc(100vw * 30 / var(--sp-w));
	}
	.blog .date {
		line-height: 1.7;
		margin-top: calc(100vw * 15 / var(--sp-w));
	}
	.blog .date span {
		font-family: "Montserrat", sans-serif;
	}
	.blog .title {
		font-size: calc(100vw * 16 / var(--sp-w));
		font-weight: 500;
		line-height: 1.7;
		margin-top: calc(100vw * 4 / var(--sp-w));
	}
	p:has(.btn) {
		margin-top: calc(100vw * 30 / var(--sp-w));
	}
	.blog a:not(.btn) {
		display: block;
	}
	.blog a:not(.btn),
	.blog a:not(.btn):visited {
		text-decoration: none;
	}

	.ft-contact {
		margin-top: 0;
	}
}

@media screen and (min-width: 751px) {
	.sp-only {
		display: none !important;
	}
	header,
	header .video-container::before,
	header video {
		min-height: 600px;
	}
	header .inner {
		width: min(calc(100vw * 1200 / var(--pc-w)), 1200px);
		min-height: 600px;
		left: 0;
		right: 0;
		margin: 0 auto;
		letter-spacing: 0.05em;
	}
	header .logo {
		width: 150px;
		height: 142px;
		margin: 0;
		position: absolute;
		top: 51px;
		left: 0;
	}
	header h1 {
		font-size: 14px;
		font-weight: 400;
		text-align: right;
		line-height: 2.0;
		position: absolute;
		top: 32px;
		right: 10px;
		left: auto;
		margin: 0;
	}
	header .lead {
		color: #fff;
		font-size: 38px;
		position: absolute;
		bottom: 112px;
		left: 0;
	}

	main {
		width: 100%;
		padding: 0;
		letter-spacing: 0.01em;
	}

	h2 .sub {
		display: block;
		font-weight: 600;
		letter-spacing: 0.05em;
		margin-bottom: -2em;
	}
	h2 .main {
		display: block;
		font-family: "Montserrat", sans-serif;
		font-weight: 600;
		font-size: 80px;
		letter-spacing: 0.01em;
		text-indent: -0.075em;
	}

	.concept {
		width: min(calc(100vw * 1200 / var(--pc-w)), 1200px);
		padding: 77px 0 85px;
		margin: 0 auto;
		display: grid;
		grid-template-columns: min(calc(100vw * 584 / var(--pc-w)), 584px) min(calc(100vw * 638 / var(--pc-w)), 638px);
		column-gap: min(calc(100vw * 28 / var(--pc-w)), 28px);
	}
	.concept h2 {
		margin-bottom: 16px;
	}
	.concept .summary {
		font-size: 26px;
		margin-top: 17px;
	}
	.concept .summary + * {
		margin-top: 46px;
	}
	.concept p:not(.summary) + p:not(:has(.btn)) {
		margin-top: calc(1em * 2);
	}
	.concept p:has(.btn) {
		margin-top: 70px;
	}
	.concept picture {
		padding-top: 128px;
	}
	.concept picture img {
		display: block;
		width: 100%;
		height: auto;
	}

	.our-work {
		padding: 77px 0 142px;
	}
	.our-work h2 {
		width: min(calc(100vw * 1200 / var(--pc-w)), 1200px);
		margin: 0 auto;
	}
	.our-work p {
		width: min(calc(100vw * 1200 / var(--pc-w)), 1200px);
		margin: 0 auto;
	}
	.our-work p:has(.btn) {
		width: fit-content;
		margin-top: 40px;
	}
	.our-work .slider {
		width: 100%;
		margin-top: 50px;
	}

	.our-factories {
		padding: 121px 0 198px;
		background: url("/wp-content/themes/grainworks/assets/img/top/ourfactories-bg.webp") 50% 50% no-repeat;
		background-size: cover;
		color: #fff;
	}
	.our-factories > * {
		width: min(calc(100vw * 1200 / var(--pc-w)), 1200px);
		margin: 0 auto;
	}
	.our-factories .summary {
		font-size: 26px;
		margin-top: 17px;
	}
	.our-factories .summary + p {
		padding-right: calc(min(calc(100vw * 1200 / var(--pc-w)), 1200px) - 584px);
		margin-top: 46px;
	}
	.our-factories :has(.btn) {
		margin-top: 50px;
	}

	.oem-process {
		padding: 119px 0 90px;
		background: #F4F0ED;
		border-radius: 92px 0 92px 0;
		margin-top: -92px;
	}
	.oem-process p,
	.oem-process h2 {
		text-align: center;
	}
	.oem-process p:has(.btn) {
		width: fit-content;
		margin: 45px auto 0;
	}
	.oem-process .steps {
		width: min(calc(100vw * 1080 / var(--pc-w)), 1080px);
		margin: 58px auto 0;
		display: grid;
		grid-template-columns: min(calc(100vw * 244 / var(--pc-w)), 244px) min(calc(100vw * 110 / var(--pc-w)), 110px) min(calc(100vw * 244 / var(--pc-w)), 244px) min(calc(100vw * 110 / var(--pc-w)), 110px) min(calc(100vw * 244 / var(--pc-w)), 244px);
		column-gap: min(calc(100vw * 35 / var(--pc-w)), 35px);
		row-gap: 54px;
	}
	.oem-process .clm {
		display: flex;
		flex-direction: column;
	}
	.oem-process dt {
		font-size: 20px;
		letter-spacing: 0.05em;
		line-height: 1.5;
		white-space: nowrap;
		display: flex;
		align-items: center;
		margin-top: 19px;
	}
	.oem-process .stepno {
		font-family: "Montserrat", sans-serif;
		font-weight: 500;
		font-size: 18px;
		letter-spacing: 0.1em;
		line-height: 1.6;
		text-align: center;
		margin-right: min(calc(100vw * 16 / var(--pc-w)), 16px);
	}
	.oem-process .stepno span {
		display: block;
		font-size: 34px;
		line-height: 1;
	}
	.oem-process .text span {
		display: block;
		font-size: 18px;
	}
	.oem-process dd {
		width: 100%;
		margin-top: 5px;
	}
	.oem-process dd:has(img) {
		order: -1;
		margin: 0;
	}
	.oem-process dd img {
		display: block;
		width: 100%;
		height: auto;
	}
	.oem-process .line {
		display: block;
		width: 100%;
		height: 3px;
		background: url("/wp-content/themes/grainworks/assets/img/top/oem/border.webp") 0 0 repeat-x;
		background-size: auto 2px;
		position: relative;
		top: min(calc(100vw * 137 / var(--pc-w)), 137px);
	}

	.blog {
		padding: 90px 0 112px;
		width: min(calc(100vw * 1200 / var(--pc-w)), 1200px);
		margin: 0 auto;
	}
	.blog h2 {
		text-align: center;
	}
	.blog p:has(.btn) {
		width: fit-content;
		margin: 51px auto 0;
	}
	.blog ul {
		margin-top: 50px;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 30px;
		row-gap: 50px;
	}
	.blog li {
		width: min(calc(100vw * 380 / var(--pc-w)), 380px);
		color: #2D344A;
		line-height: 1.7;
	}
	.blog li a {
		display: block;
		text-decoration: none;
	}
	.blog li a:visited {
		text-decoration: none;
	}
	.blog li img {
		display: block;
		width: 100%;
		height: auto;
	}
	.blog li .date {
		font-size: 14px;
		margin-top: 17px;
	}
	.blog li .date span {
		font-family: "Montserrat", sans-serif;
	}
	.blog li .title {
		margin-top: 4px;
		font-size: 18px;
		font-weight: 500;
		letter-spacing: 0.05em;
	}
}
/*** for Tablet and Narrow screen ***/
@media screen and (751px <= width <= 1200px) {
	.concept {
		width: min(calc(100vw * 1200 / var(--pc-w)), 1200px);
		padding: 77px 0 85px;
		margin: 0 auto;
		display: block;
		grid-template-columns: none;
		column-gap: none;
	}
	.concept .clm p > br:not(.concept .clm picture + p > br:first-child) {
		display: none;
	}
	.concept picture img {
		width: min(calc(100vw * 638 / var(--tab-w)), 638px);
		margin: 40px auto;
	}
	.concept p:has(.btn) {
		width: fit-content;
		margin: 55px auto 0;
	}
}
@media screen and (1201px <= width <= 1412px) {
	.concept .clm p > br.hide-1 {
		display: none;
	}
}
/*** for Wide screen ***/
@media screen and (1441px <= width) {
	header .inner {
		width: calc(100vw * 2254 / var(--wqhd-w));
	}
	header .logo {
		width: max(calc(100vw * 225 / var(--wqhd-w)), 150px);
		height: max(calc(100vw * 213 / var(--wqhd-w)), 142px);
		top: max(calc(100vw * 90 / var(--wqhd-w)), 51px);
	}
	header h1 {
		font-size: max(calc(100vw * 24 / var(--wqhd-w)), 14px);
		top: max(calc(100vw * 87 / var(--wqhd-w)), 32px);
		right: max(calc(100vw * 52 / var(--wqhd-w)), 10px);
	}
	header .lead {
		font-size: max(calc(100vw * 62 / var(--wqhd-w)), 38px);
		bottom: max(calc(100vw * 160 / var(--wqhd-w)), 112px);
	}
}