:root {
--red:#e51b2b;
--red2:#b90f1c;
--black:#0b0c0f;
--ink:#17191f;
--gray:#666b75;
--line:#dfe2e8;
--light:#f4f5f7;
--white:#fff;
--max:1240px;
--radius:18px;
--shadow:0 22px 60px rgba(10, 12, 18, .14)
}
* {
	box-sizing:border-box
}
html {
	scroll-behavior:smooth;
	scroll-padding-top:100px
}
body {
	margin:0;
	color:var(--ink);
	font-family:"Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
	font-size:16px;
	line-height:1.85;
	background:#fff
}
body.menu-open {
	overflow:hidden
}
img {
	max-width:100%;
	height:auto;
	display:block
}
a {
	color:inherit;
	text-decoration:none
}
button, input, textarea {
	font:inherit
}
.container {
	width:min(calc(100% - 48px), var(--max));
	margin:auto
}
.narrow {
	max-width:900px
}
.site-header {
	height:82px;
	background:rgba(10, 11, 14, .96);
	color:#fff;
	position:sticky;
	top:0;
	z-index:1000;
	border-bottom:1px solid rgba(255, 255, 255, .08);
	backdrop-filter:blur(16px)
}
.header-inner {
	height:100%;
	width:min(calc(100% - 48px), var(--max));
	margin:auto;
	display:flex;
	align-items:center;
	justify-content:space-between
}
.brand {
	display:inline-flex;
	align-items:center;
	gap:12px
}
.brand-mark {
	width:44px;
	height:44px;
	display:grid;
	place-items:center;
	background:var(--red);
	color:#fff;
	font-size:28px;
	font-style:italic;
	font-weight:900;
	transform:skew(-7deg);
	border-radius:5px
}
.brand-copy {
	display:flex;
	flex-direction:column;
	line-height:1
}
.brand-copy strong {
	font-family:Arial, sans-serif;
	font-size:22px;
	letter-spacing:.16em
}
.brand-copy small {
	font-size:9px;
	color:#aeb2ba;
	letter-spacing:.2em;
	margin-top:6px
}
.global-nav {
	display:flex;
	align-items:center;
	gap:32px
}
.global-nav a {
	font-size:14px;
	font-weight:700;
	position:relative;
	padding:29px 0
}
.global-nav a:after {
	content:"";
	position:absolute;
	left:0;
	right:100%;
	bottom:19px;
	height:2px;
	background:var(--red);
transition:.3s
}
.global-nav a:hover:after, .global-nav a.is-current:after {
	right:0
}
.menu-button {
	display:none
}
.hero {
	height:min(780px, calc(100vh - 82px));
	min-height:620px;
	position:relative;
	overflow:hidden;
	background:#101116;
	color:#fff
}
.hero-bg {
	position:absolute;
	inset:0;
	background:linear-gradient(90deg, rgba(5, 6, 9, .96) 0%, rgba(5, 6, 9, .79) 45%, rgba(5, 6, 9, .23) 100%), url('/img/main.png') center/cover no-repeat;
	transform:scale(1.06);
	filter:saturate(.65)
}
.hero-bg:after {
	content:"";
	position:absolute;
	inset:0;
	background:radial-gradient(circle at 82% 45%, rgba(229, 27, 43, .32), transparent 35%), repeating-linear-gradient(115deg, transparent 0 150px, rgba(255, 255, 255, .025) 151px 152px)
}
.hero-inner {
	position:relative;
	z-index:2;
	width:min(calc(100% - 48px), var(--max));
	height:100%;
	margin:auto;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:flex-start;
	padding-bottom:30px
}
.eyebrow, .section-kicker {
	font-family:Arial, sans-serif;
	letter-spacing:.22em;
	font-size:12px;
	font-weight:700;
	color:var(--red);
	margin:0 0 22px
}
.hero h1 {
	font-size:clamp(54px, 7.2vw, 104px);
	line-height:1.04;
	letter-spacing:-.05em;
	margin:0 0 28px;
	font-weight:900
}
.hero h1 em {
	color:var(--red);
	font-style:normal
}
.hero-lead {
	font-size:clamp(17px, 2vw, 22px);
	line-height:1.8;
	color:#d8d9dc;
	margin:0 0 38px
}
.hero-actions {
	display:flex;
	gap:14px;
	flex-wrap:wrap
}
.button {
	min-height:56px;
	padding:0 28px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border:1px solid transparent;
	border-radius:999px;
	font-weight:700;
transition:.25s;
	cursor:pointer
}
.button:hover {
	transform:translateY(-2px)
}
.button-primary {
	background:var(--red);
	color:#fff;
	box-shadow:0 12px 30px rgba(229, 27, 43, .28)
}
.button-primary:hover {
	background:#f22a3a
}
.button-ghost {
	border-color:rgba(255, 255, 255, .45);
	color:#fff
}
.button-ghost:hover {
	background:#fff;
	color:#111
}
.button-dark {
	background:var(--black);
	color:#fff
}
.button-light {
	background:#fff;
	color:var(--black)
}
.button-ghost-dark {
	border-color:#aaa;
	background:#fff
}
.hero-spec {
	position:absolute;
	z-index:2;
	right:0;
	bottom:0;
	display:flex;
	background:rgba(9, 10, 13, .8);
	border-top:1px solid rgba(255, 255, 255, .12)
}
.hero-spec span {
	padding:18px 32px;
	border-left:1px solid rgba(255, 255, 255, .12);
	font:700 11px Arial;
	letter-spacing:.15em;
	color:#b9bcc3
}
.section {
	padding:110px 0
}
.section-gray {
	background:var(--light)
}
.section-dark {
	background:var(--black);
	color:#fff
}
.intro {
	text-align:center
}
.section-title {
	font-size:clamp(34px, 4.2vw, 58px);
	line-height:1.3;
	letter-spacing:-.035em;
	margin:0 0 26px
}
.section-lead {
	font-size:18px;
	color:var(--gray);
	margin:0
}
.section-dark .section-lead {
	color:#b8bac0
}
.section-heading {
	display:flex;
	align-items:end;
	justify-content:space-between;
	margin-bottom:50px
}
.section-heading .section-title {
	margin:0
}
.text-link {
	font-weight:700
}
.text-link span {
	color:var(--red);
	font-size:22px
}
.service-grid {
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:22px
}
.service-card {
	background:#17191e;
	border:1px solid #272a31;
	border-radius:var(--radius);
	overflow:hidden;
transition:.35s
}
.service-card:hover {
	transform:translateY(-8px);
	border-color:#4a4e58;
	box-shadow:0 25px 60px rgba(0, 0, 0, .35)
}
.service-image {
	aspect-ratio:16/10;
	overflow:hidden;
	background:#222
}
.service-image img {
	width:100%;
	height:100%;
	object-fit:cover;
	filter:saturate(.8);
transition:.5s
}
.service-card:hover .service-image img {
	transform:scale(1.05);
	filter:saturate(1)
}
.service-body {
	padding:28px
}
.service-body>span {
	color:var(--red);
	font:700 11px Arial;
	letter-spacing:.18em
}
.service-body h3 {
	font-size:22px;
	margin:10px 0 12px
}
.service-body p {
	color:#aeb1b8;
	font-size:14px;
	margin:0
}
.service-card-cta {
	background:linear-gradient(140deg, var(--red2), var(--red))
}
.service-card-cta a {
	height:100%;
	display:flex
}
.service-card-cta .service-body {
	display:flex;
	flex-direction:column;
	justify-content:center
}
.service-card-cta .service-body span, .service-card-cta .service-body p {
	color:#fff
}
.service-card-cta .service-body b {
	margin-top:30px
}
.feature-grid {
	display:grid;
grid-template-columns:1.05fr .95fr;
	gap:80px;
	align-items:center
}
.feature-photo {
	position:relative
}
.feature-photo img {
	width:100%;
	aspect-ratio:4/3;
	object-fit:cover;
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	image-rendering:auto
}
.feature-photo span {
	position:absolute;
	right:-32px;
	bottom:28px;
	background:var(--red);
	color:#fff;
	padding:20px 24px;
	font:800 13px/1.5 Arial;
	letter-spacing:.15em
}
.feature-copy>p:not(.section-kicker) {
color:var(--gray);
font-size:17px
}
.check-list {
	list-style:none;
	padding:0;
	margin:30px 0
}
.check-list li {
	padding:13px 0 13px 32px;
	border-bottom:1px solid var(--line);
	position:relative;
	font-weight:700
}
.check-list li:before {
	content:"✓";
	position:absolute;
	left:0;
	color:var(--red)
}
.contact-band {
	background:var(--red);
	color:#fff;
	padding:70px 0
}
.contact-band .container {
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:40px
}
.contact-band .section-kicker {
	color:#fff;
	margin-bottom:12px
}
.contact-band h2 {
	font-size:clamp(28px, 3.8vw, 46px);
	margin:0 0 8px
}
.contact-band p {
	margin:0
}
.site-footer {
	background:#08090b;
	color:#aaa;
	padding:70px 0 20px
}
.footer-inner {
	width:min(calc(100% - 48px), var(--max));
	margin:auto;
	display:grid;
grid-template-columns:1.2fr 1fr .6fr;
	gap:60px
}
.brand-footer {
	color:#fff;
	margin-bottom:20px
}
.footer-company strong {
	color:#fff
}
.footer-company p, .footer-inner>div>p {
	font-size:13px
}
.footer-links {
	display:flex;
	flex-direction:column;
	gap:9px
}
.footer-links a:hover {
	color:#fff
}
.copyright {
	text-align:center;
	border-top:1px solid #222;
	margin:55px 0 0;
	padding-top:18px;
	font-size:11px
}
.page-top {
	position:fixed;
	right:24px;
	bottom:24px;
	width:48px;
	height:48px;
	background:var(--black);
	color:#fff;
	border-radius:50%;
	display:grid;
	place-items:center;
	z-index:50;
	box-shadow:0 8px 24px rgba(0, 0, 0, .2)
}
.page-hero {
	background:linear-gradient(120deg, #0b0c10, #242732);
	color:#fff;
	padding:115px 0 95px;
	position:relative;
	overflow:hidden
}
.page-hero:after {
	content:"";
	position:absolute;
	width:500px;
	height:500px;
	border:90px solid rgba(229, 27, 43, .13);
	border-radius:50%;
	right:-80px;
	top:-230px
}
.page-hero .container {
	position:relative;
	z-index:1
}
.page-hero h1 {
	font-size:clamp(44px, 6vw, 76px);
	line-height:1.1;
	margin:0 0 22px
}
.page-hero p:last-child {
	color:#c3c5cb;
	font-size:18px
}
.page-hero.compact {
	padding:80px 0
}
.page-hero-company {
	background:linear-gradient(90deg, rgba(8, 9, 12, .94), rgba(8, 9, 12, .4)), url('/syouhin/img/active_test4.jpg') center/cover
}
.anchor-nav {
	position:sticky;
	top:82px;
	z-index:30;
	background:#fff;
	border-bottom:1px solid var(--line);
	box-shadow:0 6px 20px rgba(0, 0, 0, .05)
}
.anchor-nav .container {
	display:flex;
	overflow:auto
}
.anchor-nav a {
	flex:0 0 auto;
	padding:18px 20px;
	font-size:13px;
	font-weight:700;
	border-right:1px solid var(--line)
}
.anchor-nav a:hover {
	color:var(--red)
}
.product-section {
	padding:110px 0
}
.product-section.alt {
	background:var(--light)
}
.product-layout {
	display:grid;
grid-template-columns:.9fr 1.1fr;
	gap:75px;
	align-items:center
}
.product-layout.reverse {
grid-template-columns:1.1fr .9fr
}
.product-layout.reverse .product-copy {
	order:2
}
.number {
	font:900 72px/1 Arial;
	color:#e4e6ea;
	margin:0 0 -5px
}
.product-copy h2, .product-section h2 {
	font-size:clamp(34px, 4vw, 54px);
	line-height:1.25;
	margin:0 0 24px
}
.product-copy h3 {
	font-size:21px;
	margin:0 0 20px
}
.product-copy p {
	color:var(--gray)
}
.product-gallery {
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:14px
}
.product-gallery img {
	width:100%;
	height:240px;
	object-fit:cover;
	border-radius:14px;
	background:#fff;
	box-shadow:0 10px 35px rgba(0, 0, 0, .1);
	image-rendering:auto
}
.product-gallery img:first-child:last-child {
	grid-column:1/-1;
	height:380px
}
.product-gallery img:nth-child(3) {
grid-column:1/-1
}
.product-gallery.stacked {
	grid-template-columns:1fr
}
.product-gallery.stacked img {
	height:auto;
	min-height:180px
}
.spec-list {
	display:grid;
	gap:8px;
	margin-top:28px
}
.spec-list span {
	display:flex;
	justify-content:space-between;
	border-bottom:1px solid #ccc;
	padding:10px 0
}
.spec-list b {
	color:var(--red)
}
.compare {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:18px
}
.compare figure {
	margin:0;
	background:#fff;
	border-radius:14px;
	overflow:hidden;
	box-shadow:var(--shadow)
}
.compare img {
	width:100%;
	aspect-ratio:4/3;
	object-fit:cover
}
.compare figcaption {
	padding:14px;
	text-align:center;
	font-weight:700
}
.two-column {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:70px;
	align-items:center
}
.product-gallery.large img {
	height:310px
}
.process-grid {
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:16px;
	margin-top:55px
}
.process-grid figure {
	margin:0;
	position:relative;
	border-radius:12px;
	overflow:hidden
}
.process-grid img {
	width:100%;
	aspect-ratio:4/3;
	object-fit:cover
}
.process-grid figcaption {
	position:absolute;
	left:10px;
	top:10px;
	background:var(--red);
	color:#fff;
	width:34px;
	height:34px;
	border-radius:50%;
	display:grid;
	place-items:center;
	font:700 12px Arial
}
.table-wrap {
	overflow:auto;
	margin-top:50px
}
table {
	width:100%;
	border-collapse:collapse;
	background:#fff
}
th, td {
	padding:18px 20px;
	border:1px solid var(--line);
	text-align:left
}
th {
	background:var(--black);
	color:#fff
}
.plan-list {
	display:grid;
	gap:12px;
	margin-top:30px
}
.plan-list div {
	display:flex;
	justify-content:space-between;
	padding:16px 18px;
	background:var(--light);
	border-left:4px solid var(--red)
}
.color-chips {
	display:flex;
	gap:10px;
	margin-top:30px
}
.color-chips span {
	padding:10px 16px;
	background:#222;
	color:#fff;
	font:700 11px Arial;
	letter-spacing:.1em
}
.color-chips span:nth-child(1) {
background:#c51628
}
.color-chips span:nth-child(2) {
background:#2055ae
}
.color-chips span:nth-child(3) {
background:#b18420
}
.gallery-title {
	font-size:28px;
	margin:70px 0 25px
}
.case-grid {
	display:grid;
	grid-template-columns:repeat(5, 1fr);
	gap:12px
}
.case-grid img {
	width:100%;
	aspect-ratio:4/3;
	object-fit:cover;
	border-radius:10px
}
.company-layout {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:90px;
	align-items:center
}
.company-message p:not(.section-kicker) {
color:var(--gray)
}
.company-image img {
	width:100%;
	aspect-ratio:4/3;
	object-fit:cover;
	border-radius:var(--radius);
	box-shadow:var(--shadow)
}
.company-table {
	background:#fff;
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	padding:20px 45px
}
.company-table dl {
	display:grid;
	grid-template-columns:180px 1fr;
	margin:0
}
.company-table dt, .company-table dd {
	padding:24px 10px;
	border-bottom:1px solid var(--line);
	margin:0
}
.company-table dt {
	font-weight:700
}
.contact-layout {
	display:grid;
grid-template-columns:.75fr 1.25fr;
	gap:85px
}
.contact-info h2 {
	font-size:32px
}
.phone {
	font:800 clamp(32px, 4vw, 52px) Arial;
	color:var(--red)
}
.contact-note {
	margin-top:40px;
	background:var(--light);
	padding:25px;
	border-radius:12px
}
.contact-note p {
	font-size:14px;
	margin-bottom:0
}
.contact-form {
	display:grid;
	gap:22px
}
.field {
	display:grid;
	gap:8px
}
.field label {
	font-weight:700
}
.field em {
	font-style:normal;
	font-size:11px;
	background:var(--red);
	color:#fff;
	padding:3px 7px;
	margin-left:8px;
	border-radius:3px
}
.field input, .field textarea {
	width:100%;
	border:1px solid #cfd2d8;
	border-radius:8px;
	padding:14px 16px;
	background:#fff
}
.field input:focus, .field textarea:focus {
	outline:2px solid rgba(229, 27, 43, .18);
	border-color:var(--red)
}
.hp-field {
	position:absolute!important;
	left:-9999px!important
}
.form-submit {
	border:0;
	justify-self:start
}
.confirm-box, .thanks-box {
	background:#fff;
	border:1px solid var(--line);
	padding:45px;
	border-radius:var(--radius);
	box-shadow:var(--shadow)
}
.confirm-box dl {
	display:grid;
	grid-template-columns:180px 1fr
}
.confirm-box dt, .confirm-box dd {
	margin:0;
	padding:18px;
	border-bottom:1px solid var(--line)
}
.confirm-box dt {
	font-weight:700
}
.form-actions {
	display:flex;
	justify-content:center;
	gap:15px;
	margin-top:35px
}
.form-actions form {
	margin:0
}
.thanks-box {
	text-align:center
}
.thanks-box p {
	font-size:18px;
	margin-bottom:30px
}
.sitemap-list {
	display:grid;
	gap:0;
	border-top:1px solid var(--line)
}
.sitemap-list a {
	display:block;
	padding:18px 20px;
	border-bottom:1px solid var(--line);
	font-weight:700
}
.sitemap-list div a {
	padding-left:45px;
	font-weight:400
}
.reveal {
	opacity:0;
	transform:translateY(24px);
transition:opacity .7s ease, transform .7s ease
}
.reveal.is-visible {
	opacity:1;
	transform:none
}
@media(max-width:900px) {
.site-header {
height:72px
}
.header-inner {
width:calc(100% - 32px)
}
.brand-mark {
width:39px;
height:39px
}
.brand-copy strong {
font-size:18px
}
.menu-button {
display:flex;
width:45px;
height:50px;
border:0;
background:none;
color:#fff;
flex-direction:column;
justify-content:center;
gap:5px;
align-items:center
}
.menu-button span {
width:26px;
height:2px;
background:#fff;
transition:.3s
}
.menu-button b {
font:700 8px Arial;
letter-spacing:.1em
}
.global-nav {
position:fixed;
top:72px;
left:0;
right:0;
height:calc(100vh - 72px);
background:#0b0c0f;
display:flex;
flex-direction:column;
align-items:stretch;
gap:0;
padding:35px 24px;
transform:translateX(100%);
transition:.35s
}
.global-nav.is-open {
transform:none
}
.global-nav a {
font-size:18px;
padding:18px;
border-bottom:1px solid #2a2c31
}
.global-nav a:after {
display:none
}
.hero {
height:720px;
min-height:0
}
.hero-bg {
background-position:63% center
}
.hero-bg:before {
content:"";
position:absolute;
inset:0;
background:rgba(0, 0, 0, .25)
}
.hero-spec {
display:none
}
.service-grid {
grid-template-columns:repeat(2, 1fr)
}
.feature-grid, .product-layout, .product-layout.reverse, .two-column, .company-layout, .contact-layout {
grid-template-columns:1fr;
gap:45px
}
.product-layout.reverse .product-copy {
order:0
}
.feature-photo span {
right:10px
}
.case-grid {
grid-template-columns:repeat(3, 1fr)
}
.footer-inner {
grid-template-columns:1fr 1fr
}
.anchor-nav {
top:72px
}
.company-table dl {
grid-template-columns:140px 1fr
}
}
@media(max-width:620px) {
body {
font-size:15px
}
.container {
width:calc(100% - 32px)
}
.section {
padding:75px 0
}


.hero{
	height:610px;
	min-height:610px;
}





.hero-inner{
	width:calc(100% - 32px);
	height:auto;
	padding-top:70px;
	padding-bottom:0;
	justify-content:flex-start;
}






.hero h1{
	font-size:2.35rem;
	line-height:1.1;
	margin-bottom:20px;
}



.hero-lead br {
display:none
}
.hero-lead{
	font-size:1.15rem;
	line-height:1.7;
	margin-bottom:28px;
}




.hero-actions{
	width:100%;
	gap:12px;
}



.hero-actions .button {
width:100%
}
.page-hero {
padding:75px 0 65px
}
.service-grid {
grid-template-columns:1fr
}
.section-heading {
align-items:flex-start;
gap:20px
}
.section-heading .text-link {
display:none
}
.feature-grid {
gap:45px
}
.contact-band {
padding:55px 0
}
.contact-band .container {
align-items:flex-start;
flex-direction:column
}
.contact-band .button {
width:100%
}
.footer-inner {
grid-template-columns:1fr;
gap:35px;
width:calc(100% - 32px)
}
.product-section {
padding:75px 0
}
.product-gallery img, .product-gallery.large img {
height:180px
}
.product-gallery img:first-child:last-child {
height:250px
}
.compare {
grid-template-columns:1fr
}
.process-grid {
grid-template-columns:repeat(2, 1fr)
}
.case-grid {
grid-template-columns:repeat(2, 1fr)
}
.company-table {
padding:10px 20px
}
.company-table dl, .confirm-box dl {
grid-template-columns:1fr
}
.company-table dt, .confirm-box dt {
padding-bottom:5px;
border-bottom:0;
color:var(--red)
}
.company-table dd, .confirm-box dd {
padding-top:0
}
.confirm-box, .thanks-box {
padding:25px 20px
}
.form-actions {
flex-direction:column
}
.form-actions .button, .form-actions form {
width:100%
}
.page-top {
width:42px;
height:42px;
right:14px;
bottom:14px
}
}
.brand {
	display:flex;
	align-items:center;
}
.brand img {
	display:block;
	height:45px;
	width:auto;
}
 @media (max-width:768px) {
 .brand img {
 height:30px;
}
}
.pc {
	display:inline;
}
.sp {
	display:none;
}
 @media (max-width:768px) {
 .pc {
 display:none;
}
 .sp {
 display:inline;
}
}
 @media (max-width:768px) {
 .page-hero h1, .hero h1 {
 font-size:2.2rem;
 line-height:1.08;
}
}
 @media (max-width:620px) {
 .hero-inner {
 justify-content:flex-start;
 padding-top:65px;
 padding-bottom:30px;
}
}