/** Common styles CSS
 Mediaqueries:
 * for SP: up to 750px
 * for PC: from 751px
 * for Tablet and Narrow screen: from 751px to 1200px
 Design Aspects:
 * for SP: 375px width
 * for PC: 1440px inner 1200px width
 * for Tablet and Narrow screen: 980px width
 color scheme:
 * - text color: #000 or #222
 * - background color: #fff or #f7f7f7
 * - link color: #000
 * - button hover bg color: #0E3B38
 Font Families:
 * - Noto Sans JP (weights: 400, 500, 600, 700)
 * - Montserrat (weights: 400, 500, 600)
*/

:root {
	--sp-w: 375;
	--pc-w: 1440;
	--tab-w: 980;
	--wqhd-w: 2560;
}

body {
	color: #000;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 2.0;
}

/* Noto Sans JP Font */
.notosansjp {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;/*Regular*/
}
.notosansjp.light {
	font-weight: 300;
}
.notosansjp.medium {
	font-weight: 500;
}
.notosansjp.semibold {
	font-weight: 600;
}
.notosansjp.bold {
	font-weight: 700;
}
/* Montserrat Font */
.montserrat {
	font-family: "Montserrat", sans-serif;
	font-weight: 400;/*Regular*/
}
.montserrat.medium {
	font-weight: 500;
}
.montserrat.semibold {
	font-weight: 600;
}
.montserrat.bold {
	font-weight: 700;
}

a,
a:visited {
	color: #000;
	text-decoration: underline;
	transition: opacity 300ms 0s ease;
}
a:hover,
a:focus {
	opacity: 0.7;
}

/* breadcrumb common style */
.breadcrumb {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: 100%;
	height: 52px;
	margin: 0 auto 10px;
	color: #222;
	font-size: 12px;
	line-height: 1;
	overflow-x: auto;
    white-space: nowrap;
}
.breadcrumb li {
	display: flex;
	align-items: center;
}
.breadcrumb li + li::before {
	content: url("/wp-content/themes/grainworks/assets/img/breadcrumb-arrow.svg");
	display: inline-block;
	width: 5px;
	height: 10px;
	margin: 0 0.5em;
}

/* gnav common style */
.gnav {
	color: #222;
}
.gnav .floatmenu {
	width: 80px;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1001;
}
.gnav .floatmenu li {
	width: 80px;
	height: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background: rgba(34, 34, 34, 0.8);
	cursor: pointer;
}
.gnav .floatmenu li + li {
	border-top: 1px solid #ccc;
}
.gnav .floatmenu .menu:hover {
	opacity: 0.7;
}
.gnav .floatmenu .menu span {
	display: none;
}
.gnav .floatmenu .menu::before,
.gnav .floatmenu .menu::after {
	content: "";
	display: block;
	width: 45px;
	height: 10px;
	border-top:1px solid #fff;
	transition: transform 300ms 0s ease;
}
.gnav .floatmenu .menu::after {
	border-bottom:1px solid #fff;
}
.gnav.open .floatmenu .menu::before {
	top: 50%;
	height: 0px;
	transform: rotate(30deg);
}
.gnav.open .floatmenu .menu::after {
	top: 50%;
	height: 0px;
	transform: rotate(-30deg);
	border-bottom: none;
}
.gnav .floatmenu .mail a {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.gnav .floatmenu .mail img {
	width: 49px;
	height: 49px;
}
.gnav.open .floatmenu .mail {
	display: none;
}
.gnav .inner {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	background: #f7f7f7;
	padding-left: 50%;
	opacity: 0;
	z-index: -1;
	transition: opacity 400ms 0s ease;
}
.gnav.open .inner {
	display: block;
	opacity: 1;
}
.gnav .logo {
	width: 168px;
	height: 142px;
	margin: 40px auto 20px;
}
.gnav dl,
.gnav p {
	max-width: 484px;
	width: 67.2222%;
	margin: 0 auto;
}
.gnav dl {
	margin-top: 46px;
}
.gnav dl dt {
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 13px;
}
.gnav dl dd + dt {
	margin-top: 50px;
}
.gnav dl dt::after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: rgba(34, 34, 34, 0.3);
	background: linear-gradient(90deg, rgba(34, 34, 34, 1) 50%, rgba(34, 34, 34, 0.3) 50%);
	margin-top: 15px;
}
.gnav dl li {
	display: flex;
	align-items: center;
	line-height: 2.2;
}
.gnav dl li::before {
	content: "• ";
	display: inline-block;
	width: 6px;
	height: 6px;
	background: #0E3B38;
	border-radius: 100%;
	text-indent: 100px;
	overflow: hidden;
	margin-right: 11px;
}
.gnav a,
.gnav a:visited {
	text-decoration: none;
}
.gnav p.sns {
	margin: 32px auto 40px;
}
.gnav .sns a {
	display: flex;
	align-items: center;
}
.gnav .sns img {
	width: 30px;
	margin-right: 14px;
}

/* button common style */
.btn,
.btn:visited {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 64px;
	border-radius: 32px;
	background: #fff;
	outline: 1px solid #fff;
	outline-offset: -1.1px;
	color: #222;
	font-size: 18px;
	font-weight: 500;/*Medium*/
	line-height: 1;
	text-decoration: none;
	position: relative;
	transition: all 500ms 0s ease;
}
.btn:hover {
	background: rgba(255, 255, 255, 0.0);
	color: #fff;
	opacity: 1;
}
.btn.gr,
.btn.gr:visited {
	outline: 1px solid #0E3B38;
	outline-offset: -1.1px;
	background: #0E3B38;
	color: #fff;
}
.btn.gr:hover {
	background: #fff;
	color: #0E3B38;
}

/* ==================================================
	for SP
	Screen width: up to 1024px(is the width of the iPad-pro)
	Design Aspects width: 375px
	To set the vw value...
		--sp-w: 375;
	and if 'width: 10px' 
		width: calc(100vw * 10 / var(--sp-w));
	Then, at 375px screen width, it becomes 10px.(2.6455vw)

	font-size: calc(100vw * 14 / var(--sp-w)) (dainamic 14px)
	line-height: 2.0 or 1.7
================================================== */
@media screen and (max-width: 750px) {

	body {
		font-size: calc(100vw * 14 / var(--sp-w));
	}

	/* reset images */
	header img,
	.gnav img,
	.breadcrumb img {
		display: block;
		width: 100%;
		height: auto;
	}

	/* header */
	header {
		height: calc(100vw * 282 / var(--sp-w));
		background: url("/wp-content/themes/grainworks/assets/img/low-hd-policy.webp") no-repeat 50% 50%;
		background-size: auto 100%;
	}
	body.company header {
		background-image: url(/wp-content/themes/grainworks/assets/img/low-hd-company.webp);
	}
	body.privacy-policy header {
		background-image: url(/wp-content/themes/grainworks/assets/img/low-hd-policy.webp);
	}
	body.faq header {
		background-image: url(/wp-content/themes/grainworks/assets/img/low-hd-faq.webp);
	}
	body.contact header,
	body.thanks header,
	body.error header {
		background-image: url(/wp-content/themes/grainworks/assets/img/low-hd-contact.webp);
	}
	body.oem header {
		background-image: url(/wp-content/themes/grainworks/assets/img/low-hd-oem.webp);
	}
	body.our-story header {
		background-image: url(/wp-content/themes/grainworks/assets/img/low-hd-story.webp);
	}
	body.works header {
		background-image: url(/wp-content/themes/grainworks/assets/img/low-hd-works.webp);
	}
	body.factories header {
		background-image: url(/wp-content/themes/grainworks/assets/img/low-hd-factories.webp);
	}
	body.blog header {
		background-image: url(/wp-content/themes/grainworks/assets/img/low-hd-blog.webp);
	}
	header .inner {
		padding: calc(100vw * 23.5 / var(--sp-w)) 0 0;
	}
	header .logo {
		width: calc(100vw * 96 / var(--sp-w));
		height: auto;
		margin: 0 auto;
	}
	header h1 {
		margin: calc(100vw * 51 / var(--sp-w)) auto 0;
		text-align: center;
		color: #fff;
		line-height: 1.0;
	}
	header h1 .sub {
		display: block;
		font-size: calc(100vw * 16 / var(--sp-w));
		font-weight: 700;
	}
	header h1 .main {
		display: block;
		font-family: "Montserrat", sans-serif;
		font-weight: 600;
		font-size: calc(100vw * 38 / var(--sp-w));
		margin-top: calc(100vw * 16 / var(--sp-w));
	}

	/* breadcrumb */
	.breadcrumb {
		height: calc(100vw * 47.5 / var(--sp-w));
		padding: 0 calc(100vw * 20 / var(--sp-w));
		margin-bottom: calc(100vw * 10 / var(--sp-w));
		font-size: calc(100vw * 11 / var(--sp-w));
	}
	.breadcrumb li + li::before {
		width: calc(100vw * 5 / var(--sp-w));
		height: calc(100vw * 10 / var(--sp-w));
	}

	/* gnav */
	.gnav {
		color: #222;
	}
	.gnav .floatmenu {
		width: calc(100vw * 54 / var(--sp-w));
	}
	.gnav .floatmenu li {
		width: calc(100vw * 54 / var(--sp-w));
		height: calc(100vw * 54 / var(--sp-w));
	}
	.gnav .floatmenu .menu::before,
	.gnav .floatmenu .menu::after {
		width: calc(100vw * 33 / var(--sp-w));
		height: calc(100vw * 7 / var(--sp-w));;
	}
	.gnav .floatmenu .mail img {
		width: calc(100vw * 35 / var(--sp-w));
		height: calc(100vw * 35 / var(--sp-w));
	}
	.gnav .inner{
		padding: calc(100vw * 49.5 / var(--sp-w)) 0 calc(100vw * 50 / var(--sp-w));
		overflow: auto;
	}
	.gnav .logo {
		width: calc(100vw * 102 / var(--sp-w));
		height: auto;
		margin: 0 auto calc(100vw * 45 / var(--sp-w));
	}
	.gnav dl,
	.gnav p {
		width: calc(100vw * 285 / var(--sp-w));
	}
	.gnav dl dt {
		font-size: calc(100vw * 20 / var(--sp-w));
		margin-bottom: calc(100vw * 12 / var(--sp-w));
	}
	.gnav dl dd + dt {
		margin-top: calc(100vw * 50 / var(--sp-w));
	}
	.gnav dl dt::after {
		margin-top: calc(100vw * 15 / var(--sp-w));
	}
	.gnav dl li {
		font-size: calc(100vw * 16 / var(--sp-w));
	}
	.gnav dl li::before {
		margin-right: calc(100vw * 11 / var(--sp-w));
	}
	.gnav p.sns {
		margin: calc(100vw * 26 / var(--sp-w)) auto 0;
	}
	.gnav .sns img {
		width: calc(100vw * 30 / var(--sp-w));
		margin-right: calc(100vw * 14 / var(--sp-w));
	}

	/* footer */
	footer {
		background: #f7f7f7;
		color: #222;
	}
	footer a,
	footer a:visited {
		text-decoration: none;
	}
	footer .inner {
		padding: calc(100vw * 57.5 / var(--sp-w)) calc(100vw * 20 / var(--sp-w)) calc(100vw * 35 / var(--sp-w));
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	footer .inner > * {
		width: 100%;
	}
	footer .inner > *:nth-child(2),
	footer .inner > *:nth-child(3) {
		width: 50%;
	}
	footer .addless {
		text-align: center;
		margin-bottom: calc(100vw * 30 / var(--sp-w));
	}
	footer .addless addless {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	footer addless p:first-child {
		width: 100%;
	}
	footer addless p:last-child {
		margin-left: 0.35em;
	}
	footer .logo {
		width: calc(100vw * 132 / var(--sp-w));
		height: auto;
		margin: 0 auto calc(100vw * 25 / var(--sp-w));
	}
	footer .logo a {
		display: block;
	}

	footer dl > * {
		line-height: 2.4;
	}
	footer dt {
		font-weight: 700;
	}
	footer .sns a {
		display: flex;
		align-items: center;
	}
	footer .sns img {
		width: 30px;
		margin-right: 14px;
	}
	footer .copy {
		margin-top: calc(100vw * 35 / var(--sp-w));
		font-size: calc(100vw * 11 / var(--sp-w));
		line-height: 1;
		text-align: center;
	}

	/* ft contact */
	.ft-contact {
		height: calc(100vw * 793 / var(--sp-w));
		background: url("/wp-content/themes/grainworks/assets/img/ft-contact-bg-sp.webp") no-repeat 50% 50%;
		background-size: auto 100%;
		margin-top: calc(100vw * 68 / var(--sp-w));
	}
	.ft-contact .inner {
		height: 100%;
		padding: 0 calc(100vw * 20 / var(--sp-w)) calc(100vw * 60 / var(--sp-w));
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}
	.ft-contact h2 {
		text-align: center;
	}
	.ft-contact h2 .sub {
		display: block;
		font-size: calc(100vw * 16 / var(--sp-w));
		font-weight: 600;
		letter-spacing: 0.025em;
		margin-bottom: calc(100vw * -9 / var(--sp-w));
	}
	.ft-contact h2 .main {
		display: block;
		font-family: "Montserrat", sans-serif;
		font-weight: 600;
		font-size: calc(100vw * 40 / var(--sp-w));
		letter-spacing: 0.015em;
		margin: 0 0 calc(100vw * 28 / var(--sp-w));
	}
	.ft-contact p:has(.btn) {
		margin-top: calc(100vw * 22 / var(--sp-w));
	}
	.ft-contact .btn {
		width: calc(100vw * 270 / var(--sp-w));
		height: calc(100vw * 56 / var(--sp-w));
		font-size: calc(100vw * 16 / var(--sp-w));
		margin: 0 auto;
	}

	.btn {
		width: calc(100vw * 270 / var(--sp-w));
		height: calc(100vw * 56 / var(--sp-w));
		border-radius: calc(100vw * 28 / var(--sp-w));
		font-size: calc(100vw * 16 / var(--sp-w));
		margin: 0 auto;
	}

	/* main */
	main {
		padding: 0 calc(100vw * 20 / var(--sp-w));
	}

}
/* ==================================================
	for PC
	Design Aspects width: 1440px
	Inner Max width: 1200px
	Variable width including margins ...
		--pc-w: 1440;
	and if 'width: 10px'
		width: min(calc(100vw * 10 / var(--pc-w)), 10px);
	or
		max-width: 10px;
		width: calc(100vw * 10 / var(--pc-w));
	Then, at 1440px screen width, it becomes 10px.(0.6944vw)

	font-size: 16px(static)
	line-height: 2.0
================================================== */
@media screen and (min-width: 751px) {

	/* reset images */
	header img,
	.gnav img,
	.breadcrumb img {
		display: block;
		width: 100%;
		height: auto;
	}

	/* header */
	header {
		height: 282px;
		background: url("/wp-content/themes/grainworks/assets/img/low-hd-policy.webp") no-repeat 50% 50%;
		background-size: cover;
	}
	body.company header {
		background-image: url(/wp-content/themes/grainworks/assets/img/low-hd-company.webp);
	}
	body.privacy-policy header {
		background-image: url(/wp-content/themes/grainworks/assets/img/low-hd-policy.webp);
	}
	body.faq header {
		background-image: url(/wp-content/themes/grainworks/assets/img/low-hd-faq.webp);
	}
	body.contact header,
	body.thanks header,
	body.error header {
		background-image: url(/wp-content/themes/grainworks/assets/img/low-hd-contact.webp);
	}
	body.oem header {
		background-image: url(/wp-content/themes/grainworks/assets/img/low-hd-oem.webp);
	}
	body.our-story header {
		background-image: url(/wp-content/themes/grainworks/assets/img/low-hd-story.webp);
	}
	body.works header {
		background-image: url(/wp-content/themes/grainworks/assets/img/low-hd-works.webp);
	}
	body.factories header {
		background-image: url(/wp-content/themes/grainworks/assets/img/low-hd-factories.webp);
	}
	body.blog header {
		background-image: url(/wp-content/themes/grainworks/assets/img/low-hd-blog.webp);
	}
	header .inner {
		width: min(calc(100vw * 1200 / var(--pc-w)), 1200px);
		margin: 0 auto;
		position: relative;
	}
	header .logo {
		width: 150px;
		height: 142px;
		position: absolute;
		top: 70px;
		left: 0;
	}
	header h1 {
		width: fit-content;
		position: absolute;
		top: 70px;
		right: 0;
		left: 0;
		margin: 0 auto;
		text-align: center;
		color: #fff;
		line-height: 1.0;
	}
	header h1 .sub {
		font-weight: 700;
	}
	header h1 .main {
		display: block;
		font-family: "Montserrat", sans-serif;
		font-weight: 600;
		/*font-size: 80px;*/
		font-size: min(calc(100vw * 80 / var(--pc-w)), 80px);
		margin-top: 17px;
	}

	/* breadcrumb */
	.breadcrumb {
		width: min(calc(100vw * 1200 / var(--pc-w)), 1200px);
		height: 52px;
		margin-bottom: 10px;
		font-size: 12px;
	}
	.breadcrumb li + li::before {
		width: 5px;
		height: 10px;
	}

	/* gnav */
	.gnav .inner {
		overflow: auto;
	}
	.gnav .inner::after {
		content: "";
		display: block;
		width: calc(100vw / 2);
		height: 100%;
		background: url("/wp-content/themes/grainworks/assets/img/gnav-bg.webp") no-repeat 50% 50%;
		background-size: cover;
		position: fixed;
		top: 0;
		left: 0;
	}

	/* btn arrow (PC only)*/
	.btn {
		width: 400px;
	}
	.btn::after {
		content: "";
		display: inline-block;
		mask-image: url("/wp-content/themes/grainworks/assets/img/btn-arrow.svg");
		mask-size: contain;
		mask-repeat: no-repeat;
		mask-position: center;
		background-color: #000;
		width: 15px;
		height: 15px;
		position: absolute;
		right: 40px;
		transition: all 500ms 0s ease;
	}
	.btn:hover::after {
		background-color: #fff;
	}
	.btn.gr::after {
		background-color: #fff;
	}
	.btn.gr:hover::after {
		background-color: #0E3B38;
	}

	/* footer */
	footer {
		background: #f7f7f7;
		color: #222;
	}
	footer a,
	footer a:visited {
		text-decoration: none;
	}
	footer .inner {
		width: min(calc(100vw * 1096 / var(--pc-w)), 1096px);
		padding: 0 0 67px;
		margin: 0 auto;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	footer .inner > * {
		margin: 103px 0 0 0;
	}
	footer .inner > *:first-child {
		margin-top: 64px;
	}
	footer .inner > *:nth-child(2) {
		width: min(calc(100vw * 284 / var(--pc-w)), 284px);
		margin-left: auto;
	}
	footer .inner > *:nth-child(3) {
		width: min(calc(100vw * 232 / var(--pc-w)), 232px);
	}
	footer .inner > *:nth-child(4) {
		width: min(calc(100vw * 129 / var(--pc-w)), 129px);
	}
	footer .inner > .copy {
		width: 100%;
		margin-top: 60px;
		text-align: right;
		font-size: 14px;
		line-height: 1;
	}

	footer .logo {
		width: 168px;
		height: 142px;
		margin: 0 0 25px;
	}
	footer .logo a {
		display: block;
	}

	footer dt {
		font-weight: 700;
	}
	footer .sns a {
		display: flex;
		align-items: center;
	}
	footer .sns img {
		width: 30px;
		margin-right: 14px;
	}

	/* ft contact */
	.ft-contact {
		width: 100%;
		height: 665px;
		background: url("/wp-content/themes/grainworks/assets/img/ft-contact-bg.webp") no-repeat 50% 50%;
		background-size: cover;
	}
	.ft-contact .inner {
		width: min(calc(100vw * 1200 / var(--pc-w)), 1200px);
		padding: 165px 0 0;
		margin: 0 auto;
		color: #fff;
	}

	.ft-contact h2 .sub {
		display: block;
		font-weight: 600;
		letter-spacing: 0.05em;
		margin-bottom: -2em;
	}
	.ft-contact h2 .main {
		display: block;
		font-family: "Montserrat", sans-serif;
		font-weight: 600;
		font-size: 80px;
		letter-spacing: 0.01em;
		text-indent: -0.075em;
		margin: 8px 0 25px;
	}
	.ft-contact p {
		width: 470px;
	}
	.ft-contact p:has(.btn) {
		margin-top: 45px;
	}
	.ft-contact .btn {
		width: 400px;
	}

	/* main */
	main {
		width: min(calc(100vw * 1200 / var(--pc-w)), 1200px);
		padding: 0 0 80px;
		margin: 0 auto 0;
	}

}
/*** for Wide screen ***/
@media screen and (1441px <= width) {
	.gnav .floatmenu {
		width: max(calc(100vw * 120 / var(--wqhd-w)), 80px);
	}
	.gnav .floatmenu li {
		width: max(calc(100vw * 120 / var(--wqhd-w)), 80px);
		height: max(calc(100vw * 120 / var(--wqhd-w)), 80px);
	}
}