@charset "UTF-8";

/* Noto Sans JP + Noto Serif JP */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');

/* Oswald */
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

:root {
	--black1: #1a1a1a;
	--white: #ffffff;
	--navy: #1e2a3a;
	--grey1: #8a8a8a;
	--small: .875rem; /* 14px */
}


html { font: 500 16px/1.5 'Noto Sans JP', "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; -webkit-text-size-adjust: 100%; animation: fadeIn 1.5s ease 0s 1 normal; }
@keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} }

body { position: relative; }

.wrap { width: 95%; max-width: 1140px; margin: 0 auto; }
.center { text-align: center; }

a { transition: .25s; }
a:hover { opacity: .75; transition: .25s; }

section { padding: 3rem 0; }
.alternating-bg > section:nth-of-type(even) { background: #d9d9d9; }

hgroup { text-align: center; margin: 0 auto 2rem auto; }
hgroup p { color: var(--grey1); }
h2 { font: 400 2.75rem/1.25 "Anton"; text-align: center; }

@media screen and ( 768px <= width ), print {
	hgroup { text-align: center; margin: 0 auto 3rem auto; }
	h2 { font-size: 5rem; }
}

.link { text-align: center; margin-top: 3rem; }
.link p + .btn { margin-top: 1rem; }

.btn { position: relative; display: inline-block; background: var(--navy); color: var(--white); text-align: center; padding: 1rem 3rem 1rem 2rem; }
.btn::after { content: "↗"; position: absolute; right: 1rem; }

/* ---------------------------------------------------------------------------------------------
	ヘッダー / グローバルナビ
---------------------------------------------------------------------------------------------*/

header { position: sticky; top: 0; background: var(--black1); color: var(--grey1); padding: 12px 0; z-index: 1; }
header .wrap { max-width: 95%; }
header .logo p { font-size: .75rem; color: var(--white); margin-bottom: .5rem; }
header .logo img { width: 100%; max-width: 240px; }
header nav ul { font: 400 1.5rem/1 "Anton"; letter-spacing: 0.75px; display: flex; flex-direction: column; gap: 2rem 1rem; }
header nav ul li:last-of-type a { color: #006cf5; }

@media screen and ( 768px <= width ), print {
	header .wrap { max-width: 95%; display: flex; justify-content: space-between; align-items: flex-end; }
	header nav ul { flex-direction: row; }
}

@media screen and ( width <= 767px ) {
	.drawer_menu .drawer_bg { width: 100%; height: 100%; position: fixed; z-index: 45; background: #00000080; display: none; backdrop-filter: blur(3px); top: 0; left: 0; }
	.drawer_menu button.drawer_button { width: 52px; height: 52px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; background: none; border: none; padding: 16px 8px; letter-spacing: 0.1em; cursor: pointer; position: absolute; top: 0; right: 0; z-index: 50; text-align: center; outline: none; transition: .6s; }
	.drawer_menu button.drawer_button > span { display: block; height: 1px; width: 24px; border-radius: 50px; transition: all 0.2s; transform-origin: 0 0; transform: scaleY(2); }
	.drawer_menu button.drawer_button.active > span { position: relative; }
	.drawer_menu button.drawer_button.active > span:nth-child(1) { transform: rotate(25deg) scaleY(2); top: -1px; right: -2px; }
	.drawer_menu button.drawer_button.active > span:nth-child(2) { transform: rotate(-25deg) scaleY(2); top: 0px; left: 1px; }
	.drawer_menu button.drawer_button.active.fixed { opacity: 1; transition: .6s; }

	/*+++ wrapper +++*/
	.drawer_menu .drawer_nav_wrapper { width: 100%; height: 100%; transition: all 0.2s; transform: translate(100%); position: fixed; top: 0; right: 0; z-index: 45; background: var(--black1); overflow-y: auto; }
	.drawer_menu .drawer_nav_wrapper.open { transform: translate(0); }
	.drawer_menu .drawer_nav_wrapper.open > div { font-size: 1em; margin: 52px 0 0 0; }

	.drawer_nav_wrapper ul { margin: 4rem 0 0 2rem; }

	/*+++ Button Color +++*/
	.drawer_menu button.drawer_button > span { background: var(--white); background: var(--white); }
}

/* ---------------------------------------------------------------------------------------------
	フッター
---------------------------------------------------------------------------------------------*/

footer { background: var(--black1); color: var(--white); }
footer .address { padding: 24px 0 12px 0; }
footer .address p:first-of-type { font-size: 1.25rem; }
footer .copyright { font-size: .75rem; text-align: center; padding: 8px 0; }

@media screen and ( 768px <= width ), print {
	footer .address { padding: 24px 0 0 0; }
	footer .copyright { text-align: right; }
}

/* ---------------------------------------------------------------------------------------------
	セクション
---------------------------------------------------------------------------------------------*/

/* ---------- HERO ---------- */

section.hero { padding-top: 0; }

.hero-image { position: relative; height: 480px; }
.hero-image .text-area { max-width: 95%; margin: 0 auto; padding: 1rem; }
.hero-image .text-area .text1 { font-size: 2rem; font-weight: 500; line-height: 1.25; color: var(--white); }
.hero-image .text-area > div { color: var(--white); line-height: 2; margin-top: 1rem; }
.hero-image .text-area .text2 { font-size: 1.25rem; font-weight: 600; }
.hero-image .text-area .text3 { font-size: var(--small); }
.hero-image .image { position: absolute; right: 0; top: 0; z-index: -1; }

@media screen and ( 768px <= width ), print {
	/* .hero-image { height: 480px; } */
	.hero-image .text-area .text1 { font-size: 4rem; color: var(--black1); text-shadow: 0px 0px 8px #ffffff88, 0px 0px 16px #ffffff88; }
	.hero-image .text-area > div { color: var(--black1); margin-top: 2rem; text-shadow: 0px 0px 8px var(--white), 0px 0px 16px var(--white); }
}

ul.buttons { display: grid; grid-template-columns: 1fr; gap: 8px; text-align: center; align-items: stretch; }
ul.buttons li { display: block; }
ul.buttons li a { min-height: 90px; position: relative; display: flex; align-items: center; justify-content: center; border: 1px solid var(--black1); height: 100%; padding: 1rem; }
ul.buttons li:first-of-type a { background: var(--black1); color: var(--white); }
ul.buttons li:last-of-type a { background: var(--white); }

ul.buttons li a::after { content: "↗"; position: absolute; right: 1rem; font-size: 2rem; }
ul.buttons li:first-of-type a::after { color: var(--white); }
ul.buttons li:last-of-type a::after { color: var(--black1); }

ul.buttons + .achievement { margin-top: 1.5rem; }

.achievement { background: var(--navy); font-weight: 400; font-size: 1.25rem; color: var(--white); text-align: center; line-height: 1.5; padding: 2rem 0; }
.achievement ul { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .75rem 0; }
.achievement ul li { width: 172px; }
.achievement ul li + li { border-left: 1px solid var(--grey1); }
.achievement ul li.fs { font-size: var(--small); }
.achievement ul li span { font-size: .75rem; color: var(--grey1); display: block; }

@media screen and ( 768px <= width ), print {
	ul.buttons { grid-template-columns: repeat(2, 1fr); }
	ul.buttons li a { min-height: auto; }
}


/* ---------- OUR APPROACH ---------- */

section.approach .flexbox { display: flex; flex-direction: column; gap: 3rem; }

section.approach h3 { font-size: 1.75rem; margin-bottom: 0.75rem; }
section.approach p { line-height: 2; }

section.approach figure { text-align: center; }
section.approach figure figcaption { font-size: var(--small); margin-top: .75rem; }

section.approach table { width: 100%; margin-top: 1rem; }
section.approach :is(th, td) { text-align: center; padding: 8px 20px; }
section.approach tr { border-bottom: 1px solid var(--black1); }
section.approach th { background: var(--grey1); color: var(--white) }
section.approach th:nth-of-type(2) { text-align: left; }
section.approach td:nth-of-type(2) { text-align: left; }

@media screen and ( 768px <= width ), print {
	section.approach .flexbox { flex-direction: row; }
}

/* ---------- CASE ---------- */

section.case ul { width: fit-content; display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1rem auto; }

section.case ul li > a { width: 340px; max-width: 340px; background-size: cover; background-position: 50% 50%; aspect-ratio: 17/8; position: relative; }

section.case ul li > a { background-size: 100%; transition: background-size 0.5s ease-in-out; }
section.case ul li > a:hover { opacity: 1; background-blend-mode: color; background-size: 150%; transition: background-size 0.5s ease-in-out; }

/* section.case ul li > a:hover { opacity: 1; }
section.case ul li > a:hover { backdrop-filter: brightness(50%); } */
/* section.case ul li > a:hover::after { background: #FF0000; } */
section.case ul li:nth-of-type(1) > a { background-image: url(../img/case01.jpg); }
section.case ul li:nth-of-type(2) > a { background-image: url(../img/case02.jpg); }
section.case ul li:nth-of-type(3) > a { background-image: url(../img/case03.jpg); }
section.case ul li:nth-of-type(4) > a { background-image: url(../img/case04.jpg); }
section.case ul li:nth-of-type(5) > a { background-image: url(../img/case05.jpg); }
section.case ul li:nth-of-type(6) > a { background-image: url(../img/case06.jpg); }

section.case ul li > a { position: relative; display: block; color: var(--white); }
section.case ul li > a span { display: inline-block; font-size: var(--small); color: var(--grey1); background: #000; padding: .25rem .75rem; }
section.case ul li > a p { font-size: 1.375rem; line-height: 1.25; color: var(--white); padding: 0 .75rem; }
section.case ul li > a::after { content: "この事例の詳細へ↗"; font-size: var(--small); background: var(--grey1); border: 1px solid var(--white); position: absolute; bottom: 12px; left: 50%; transform: translate(-50%, 0); padding: .25rem .75rem; }

section.case ul li > p { text-align: center; }
section.case ul li > p a::after { content: "↗"; }

@media screen and ( 768px <= width ), print {
	section.case ul { grid-template-columns: repeat(2, 2fr); }
}

/* ---------- PRODUCTS ---------- */

section.products ul { max-width: 600px; margin: 1rem auto; padding: 0 1rem; }
section.products ul li { border-top: 1px solid var(--grey1); }
section.products ul li:last-of-type { border-bottom: 1px solid var(--grey1); }
section.products ul li a { display: block; position: relative; padding: 1rem; }
section.products ul li a::after { content: "↗"; position: absolute; right: 1rem; margin-left: .75rem; }
section.products ul li span { font-size: .825rem; color: var(--grey1); }

/* ---------- TRUST ---------- */

section.trust .grid { max-width: 700px; display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0 auto; }
section.trust .grid > div { background: var(--black1); color: var(--white); padding: 1rem; }
section.trust .grid > div p { color: #d9d9d9; }

section.trust .grid h3 { font-size: 1.25rem; margin-bottom: .75rem; }

section.trust .div3 .box { background: #9f9f9f; color: var(--black1); text-align: center; padding: 1rem; margin-top: 1rem; }
section.trust .div3 .box > div { font-size: 1.5rem; }
section.trust .div3 .box > p { font-size: var(--small); color: var(--black1); }
section.trust .div3 .box ul { display: flex; justify-content: center; gap: 1rem; background: #4f4f4f; color: #d9d9d9; margin: 0 auto; padding: .5rem; margin-top: 1rem;}
section.trust .div3 .box ul li { font-size: 1.5rem; }
section.trust .div3 .box ul li span { display: block; font-size: 1rem; }

@media screen and ( 768px <= width ), print {
	section.trust .grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
	section.trust .div1 { grid-area: 1 / 1 / 2 / 2; }
	section.trust .div2 { grid-area: 2 / 1 / 3 / 2; }
	section.trust .div3 { grid-area: 1 / 2 / 3 / 3; }
}

section.trust .certifications { text-align: center; margin-top: 3rem; }
section.trust .certifications h3 { font-size: 1.5rem; margin-bottom: .5rem; }
section.trust .certifications div { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; }
section.trust .certifications div figure img { height: 90px; }

@media screen and ( 768px <= width ), print {

}

/* ---------- NETWORK ---------- */

section.network .flexbox { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 2rem; }

section.network figure.map { max-width: 100%; flex-shrink: 0; }
section.network figure.map img { width: 100%; }

section.network .flexbox ul { display: flex; }
section.network .flexbox ul li::after { content: "／"; }
section.network .flexbox ul li:last-of-type::after { content: none; }
section.network .flexbox ul li.prod::before { content: "生産"; font-size: .625rem; background: var(--navy); color: var(--white); border-radius: 4px; padding: 1px 4px; margin: 0 4px 0 0; }

section.network dl { margin-bottom: 2rem; }
section.network dl > div { padding: 1rem 0; }
section.network dl > div:first-of-type { padding-top: 0; }
section.network dl > div { border-bottom: 1px solid var(--black1); }
section.network dl dd { font-size: var(--small); }
section.network p { font-size: var(--small); }

@media screen and ( 768px <= width ), print {
	section.network .flexbox { flex-direction: row; }
	section.network figure.map { max-width: 360px; }
}

/* ---------- TECHNICAL GUIDANCE ---------- */

section.tech .wrap { max-width: 700px; position: relative; }
section.tech h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: .75rem; }
section.tech p { line-height: 2; }
section.tech .flexbox { display: flex; flex-direction: column; gap: 2rem; }
section.tech .flexbox .boxes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; text-align: center; }

section.tech .flexbox .boxes .caption { margin-bottom: .5rem; }
section.tech .flexbox .boxes ul { height: calc(100% - 1rem); display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 1rem; }

section.tech .flexbox .boxes ul {
	background-color: #f1f1f1;
	background-image: repeating-linear-gradient(45deg, var(--white), var(--white) 8px, transparent 0, transparent 10px);
}

section.tech .flexbox .right p { font-size: var(--small); }

@media screen and ( 768px <= width ), print {
	section.tech .flexbox { display: flex; flex-direction: row; gap: 2rem; }
	section.tech .flexbox .boxes ul { height: calc(100% - 3rem); flex-wrap: wrap; }
}

/* ---------- Text Area（お客様とともに～） ---------- */

section.text-area { font-size: 2rem; }

/* ---------- CONTACT ---------- */

section.contact { background: url(../img/contact-bg.jpg) 50% 50% / cover; padding: 4rem 0; }
section.contact .buttons { margin-top: 1rem; }

@media screen and ( 768px <= width ), print {
	section.contact { padding: 7rem 0; }
}