:root{
--space-0:0px;
--space-sm:8px;
--space-md:16px;
--space-lg:32px;
--space-xl:48px;
--space-2xl:64px;
--space-3xl:80px;
--space-4xl:96px;

--gap-size:30px;
}
body{font-family:'Noto Sans JP',sans-serif;line-height:1.6;color:#333;}
.container{width:100%;max-width:var(--container-width);margin:0 auto;padding:0 var(--space-0);}
.mt-sm{margin-top:var(--space-sm);}
.mt-md{margin-top:var(--space-md);}
.mt-lg{margin-top:var(--space-lg);}
.mb-sm{margin-bottom:var(--space-sm);}
.mb-md{margin-bottom:var(--space-md);}
.mb-lg{margin-bottom:var(--space-lg);}
.mb-xl{margin-bottom:var(--space-xl);}
.mb-2xl{margin-bottom:var(--space-2xl);}
.site-header,.site-footer{padding:var(--space-xl) var(--space-2xl);}

:root {
--color-bg: #ffffff;
--color-text: #1a1a1a;
--color-muted: #e3e6ef;
--color-accent-red: #d92323;
--color-accent-green: #03a63c;
--color-h1: #035aa6;
--color-h2: #0367a6;
--color-navy: #13335a;
--color-orange: #ef9f25;
}

:root {
	--container: 1200px;
	--gutter: 30px;
}

*, *::before, *::after {
  box-sizing: border-box;
}
html {
font-size: 16px;
}

/* 基本のマージン・パディング調整 */
body, h1, h2, h3, h4, h5, h6, p, figure {
margin: 0;
padding: 0;
}

/* リストのデフォルトスタイルを削除 */
ul, ol {
list-style: none;
padding: 0;
margin: 0;
}

/* 画像の余白を消して、レスポンシブ対応 */
img {
max-width: 100%;
height: auto;
display: block;
}

/* ボタンの標準スタイルを調整 */
button {
background: none;
border: none;
cursor: pointer;
}

/* フォーム要素のリセット */
input, textarea, select {
font: inherit;
border: none;
outline: none;
}

/* aタグのデフォルト装飾を削除 */
a {
text-decoration: none;
color: inherit;
}
@media (hover: hover) and (pointer: fine) {
a:hover,
a img:hover {
transition: .3s;
}
}

@media (min-width:601px) {
a[href^="tel:"] {
pointer-events: none;
color: inherit;
}
}


body {
	position: relative;
	font-family: "Noto Sans JP", sans-serif;
	overflow-wrap: anywhere; /* 収まらない場合に折り返す */
	word-break: normal; /* 単語の分割はデフォルトに依存 */
	line-break: strict; /* 禁則処理を厳格に適用 */
	background: #f4fbfc;
	overflow-x: hidden;
	font-size: clamp(15px, 1.2vw, 18px);
}

body {font-size: clamp(1rem, 4vw, 1rem); /* 画面のサイズに応じて動き、最小1rem、最大2rem */}
h1 {font-size: clamp(1.5rem, 6vw, 2.5rem);}
h2 {font-size: clamp(1.25rem, 5vw, 1.75rem);}
h3 {font-size: clamp(1.375rem, 6vw, 1.5rem);}
h4 {font-size: clamp(1.25rem, 5vw, 1.5rem);}
h5 {font-size: clamp(1.125rem, 6vw, 1.25rem);}
h6 {font-size: clamp(1.125rem, 5vw, 1.25rem);}
p {font-size: clamp(0.937rem, 3vw, 1rem);}

h1,h2,h3,h4,h5 {
  font-family: "BIZ UDPGothic", sans-serif;
  font-weight: 700;
  font-style: normal;
}


/********************************
	TEXT
********************************/

@media (max-width: 834px) {
body {font-size: clamp(1rem, 5vw, 1rem); /* タブレット用 */}
}
@media (max-width: 600px) {
body {font-size: clamp(1rem, 6vw, 1.2rem); /* スマホ用 */}
}

a{color: var(--color-accent-red);}
a:hover{color: var(--color-accent-green);}

.text-center{text-align: center;}
.text-md-center{text-align: center;}
.text-end{text-align: right;}
.text-start{text-align: left !important;}

.container{
width: 1200px;
max-width: 100%;
margin: 0 auto;
padding-left: 30px;
padding-right: 30px;
box-sizing: border-box;
}

.grid{
display:grid;
width: 100%;
box-sizing: border-box;
--gap-size: 30px; /* デフォルトのgap */
gap: var(--gap-size);
}
.gap-5 { --gap-size: 5px; }
.gap-10 { --gap-size: 10px; }
.gap-15 { --gap-size: 15px; }
.gap-20 { --gap-size: 20px; }
.gap-30 { --gap-size: 30px; }
.gap-60 { --gap-size: 60px; }
.gap-80 { --gap-size: 80px; }
.gap-90 { --gap-size: 90px; }

.grid-2{grid-template-columns: calc(50% - var(--gap-size) / 2) calc(50% - var(--gap-size) / 2);}
.grid-3{grid-template-columns: repeat(3, calc((100% - 2 * var(--gap-size)) / 3));}
.grid-4{grid-template-columns: repeat(4, calc((100% - 3 * var(--gap-size)) / 4));}
.grid-5{grid-template-columns: repeat(5, calc((100% - 4 * var(--gap-size)) / 5));}
.grid-1-2 {grid-template-columns: calc((100% - var(--gap-size)) * (1 / 3)) calc((100% - var(--gap-size)) * (2 / 3));}
.grid-2-1 {grid-template-columns: calc((100% - var(--gap-size)) * (2 / 3)) calc((100% - var(--gap-size)) * (1 / 3));}

.grid-1-3 {grid-template-columns: 1fr 3fr;gap: var(--gap-size);}


.w-900{
max-width: 900px;
margin: 0 auto;
}
.w-800{
max-width: 800px;
margin: 0 auto;
}
.w-600{
max-width: 600px;
margin: 0 auto;
}
.pc{display: block;}
.tablet{display: none;}
.sp{display: none;}

@media (max-width:1199px) {
.container{
width: 100%;
padding: 0 60px;
}
}
@media (max-width:834px) {
.container{
width: 100%;
padding: 0 30px;
}
.text-md-center{
text-align: left;
}
.pc{display: none;}
.tablet{display: block;}
.sp{display: none;}
}
@media (max-width:600px) {
.container{
width: 100%;
max-width: 100%;
}
.pc{display: none;}
.tablet{display: none;}
.sp{display: block;}
.grid-2{
grid-template-columns: 1fr;
}
.grid-3{
grid-template-columns: 1fr;
}
.grid-4{
grid-template-columns: 1fr;
}
.grid-1-2{
grid-template-columns: 1fr;
}
.grid-2-1{
grid-template-columns: 1fr;
}
}

.section{
padding: 4rem 0;
}

.center-center {
display: grid;
place-content: center;
gap: 1ch;
}

.section{
padding: 2.5rem 0;
}
.d-block{
display: block;
}
.mx-auto{
margin: 0 auto;
}

/********************************

	UTILITY

********************************/

.btn{
display: block;
padding: .5rem 2rem;
background-color: #fff;
border: 1px solid #000;
width: fit-content;
}
.btn-basic{
display: block;
margin: 1rem 0 0;
padding: .375rem 1rem;
background-color: #fff;
width: fit-content;
border-radius: 100px;
font-family: var(--biz);
letter-spacing: .05em;
color: var(--color-text);
border: 3px solid var(--color-accent-green);
}

/** CARD **/
section .card{
position: relative;
margin: 0 0 2.5rem;
padding: 0 2rem 2rem;
background-color: #fff;
border: 2px solid var(--color-h1);
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
section .card h3 {
position: relative;
margin: 0 0 1.5rem;
padding-top: 4rem;
font-size: 1.25rem;
}
section .card h3 span{
display: block;
position: absolute;
left: 0;
right: 0;
top: -40px;
margin: 0 auto;
}
section .card h3 span img{
display: block;
left: 0;
right: 0;
margin: 0 auto;
background-color: #fff;
border: 2px solid var(--color-h1);
border-radius: 50%;
}
section .card ul {
position: relative;
margin: 0 0 1rem;
padding: 0;
}
section .card ul li{
position: relative;
padding: .25rem 0;
font-size: 1rem;
font-weight: 600;
}
section .card ul li::before{
content: "▶";
position: relative;
top: -2px;
display: inline-block;
margin: 0 .5em 0 0;
font-size: .5rem;
color: var(--color-h1);
}
section .card ul li:not(:last-child) {
border-bottom: 1px solid #ccc;
}


/********************************
  CTA
********************************/
.cta{
background-color: var(--color-bg);
}

.btn-contact{
	position:relative;
	display:inline-flex;
	align-items:center;
	gap:16px;
	padding:22px 18px 22px 44px ;
	color: var(--color-text);
	background:var(--color-orange);
	font-size:18px;
	font-weight:700;
	text-decoration:none;
	overflow:hidden;
	transition:.35s;
	left: 50%;
	transform: translateX(-50%);
}
.btn-contact:hover{
	color: #fff;
}
.btn-contact::before{
	content:"";
	position:absolute;
	inset:0;
	background:var(--color-navy);
	transform:translateX(-100%);
	transition:transform .45s cubic-bezier(.22,1,.36,1);
	z-index:0;
}

.btn-contact span,
.btn-contact svg{
	position:relative;
	z-index:1;
}

.btn-contact svg{
	width:22px;
	height:22px;
	fill:none;
	stroke:#fff;
	stroke-width:1.5;
	stroke-linecap:round;
	stroke-linejoin:round;
	transition:.35s;
}

.btn-contact:hover::before{
	transform:translateX(0);
}

.btn-contact:hover svg{
	transform:translateX(18px);
}


a.cta{
display: block;
padding: 1rem 2rem;
background-color: var(--color-accent-green);
margin:0 auto 2.5rem;
width: fit-content;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
border-radius: 4px;
}
a.cta:hover{
background-color: var(--color-orange);
}

/********************************
  HEADER
********************************/

.site-header{
display:grid;
grid-template-columns:300px 1fr;
}
header .site-id{
grid-column:1 / 2;
grid-row:1 / 2;
}
header .main-nav{
grid-column:2 / 3;
grid-row:1 / 2;
}

/********************************
    NAVIGATION
********************************/

/* === バーガー（スマホ・タブレット専用） === */
.burger {
position: fixed;
top: 24px;
right: 20px;
width: 30px;
height: 30px;
display: none; /* PCでは非表示 */
justify-content: space-between;
align-items: center;
padding: 8px;
border-radius: 50px;
background-color: transparent;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
z-index: 9999;
box-sizing: content-box;
}
.burger .dot {
width: 5px;
height: 5px;
background: black;
border-radius: 50%;
transition: transform 0.3s ease, opacity 0.3s ease;
}

.burger.open {
background-color: rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4px);
}
.burger.open .dot:nth-child(1) {
transform: translateX(12.5px);
}
.burger.open .dot:nth-child(3) {
transform: translateX(-12.5px);
}
.burger.open .dot:nth-child(2) {
opacity: 0;
}

.menu-overlay {
position: fixed;
top: 0;
right: 0;
width: 100%;
max-width: 600px;
height: 100vh;
background-color: rgb(255 255 255 / .85);
backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform: translateX(100%);
z-index: 999;
}
.menu-overlay ul.menu-list {
list-style: none;
margin: 0;
padding: 0;
}
.menu-overlay a {
color: black;
text-decoration: none;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 1.5rem;
margin: 20px 0;
opacity: 0; /* GSAP 初期値と合わせる */
}

.main-nav .nav-list li.current-menu-item a{
color: var(--color-h1);
}

@media(min-width:901px){
.menu-item a {
position: relative;
display: inline-block;
padding: .4em;
text-decoration: none;
}
.menu-item a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
background-color: var(--color-accent-red);
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.menu-item a:hover::after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
}

/********************************
    HEADER
********************************/

.site-id {
margin: 0;
padding: 0;
display: grid;
place-content: center;
gap: 1ch;
}


/* === PCナビ（横並び） === */
.nav-list{
display: flex;
justify-content: end;
gap: 24px;
padding: 0;
margin: 0;
font-family: "BIZ UDPGothic", sans-serif;
font-weight: 700;
}
.nav-list li {
list-style: none;
}

.main-nav .nav-list li a {
display: block;
padding: 8px 0;
color: inherit;
text-decoration: none;
}

/********************************
    RESPONSIVE
********************************/

/* 900px以下：バーガー表示、PCナビは非表示 */
@media (max-width: 900px) {

  /* バーガーを表示 */
  .burger {
    display: flex;
  }

  /* PCナビを隠す */
  .main-nav .nav-list {
    display: none;
  }
}


/********************************

	FOOTER

********************************/
footer{
position: relative;
margin: 0;
padding: 4rem 0;
color: var(--color-muted);
background-color: var(--color-navy);
}
.footer-nav{
margin: 0 0 2rem;
display: flex;
justify-content: end;
}
.footer-nav li a{
display: block;
padding: .5rem;
color: var(--color-muted);
}
.footer-nav li:not(:last-child) {
margin-right: 1em;
}
footer p br{
display: none;
}

footer h3 {
margin-bottom: 0.5rem;
font-size: 1.25rem;
font-weight: bold;
}
footer p.copyright {
margin-top: 2rem;
font-size: .75rem;
text-align: center;
}
.copyright{
font-family: 'Roboto Condensed', sans-serif;
font-weight: 600;
font-size: .75rem;
letter-spacing: .15em;
text-align: center;
}


/********************************
    LAYOUT
********************************/

.more-text {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: all 0.5s ease;
}
.read-more-check {
display: none;
}
.read-more-label {
color: #007bff;
cursor: pointer;
text-decoration: underline;
font-weight: bold;
}
.read-more-label::before {
content: "続きを読む";
}
.read-more-check:checked ~ .content .more-text {
max-height: 500px;
opacity: 1;
margin-top: 10px;
}
.read-more-check:checked ~ .read-more-label::before {
content: "閉じる";
}




.split {
	display: grid;
	grid-template-columns: 50vw 1fr;
}

.split__image {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
}

.split__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	scale: 1.08;
	will-change: transform;
}
.split__content {
	min-width: 0;
}
.split__inner {
	max-width: 700px;
	padding: 120px 30px 120px 60px;
}

.flow .split__content{
	color: var(--color-muted);
	background-color: var(--color-navy);
}

.split__inner h2{
	margin: 0 0 var(--space-lg);
}

.hero{
	padding: 0 0 var(--space-2xl);
}
.hero h1{
	padding: var(--space-lg) 0;
	text-align: center;
}
.contact-cta{
	padding: var(--space-2xl) 0;
}
.contact-cta h2{
	margin:0 auto var(--space-xl) 0;
	text-align: center;
}
.contact-cta p{
	margin:0 auto var(--space-lg) 0;
	text-align: center;
	font-size: larger;
}

/*page-header*/
.page-header h1{
	margin:0 0 var(--space-lg) 0;
}
.page-header p:not(:last-child){
	margin: 0 0 var(--space-lg);
	font-weight: 600;
	font-size: large;
}
.page-header p:last-child{
	margin: 0 0 var(--space-2xl);
}

/*トップページ*/
.hero__img{
	position: relative;
	height: 50vh;
	overflow: hidden;
}
.hero__img img{
}

.service_front{
	background-color: var(--color-muted);
}
.safety {
	padding: var(--space-2xl) 0;
}
.safety h2{
	margin: 0 0 var(--space-xl);
	text-align: center;
}
.safety p{
	margin: 0 0 var(--space-xl);
	text-align: center;
}
.safety p.lead{
	margin: 0 0 var(--space-md);
	font-size: large;
	font-weight: 600;
}
.safety-list{
	display: grid;
	grid-template-columns: repeat(5 ,1fr);
	gap: var(--gap-size);
}

.flow-list__item{
	position: relative;
	margin: 0 0 var(--space-4xl);
	padding: var(--space-md);
	background-color: rgb(0 0 0 /.15);
	border: 1px solid var(--color-muted);
}
.flow-list__item:not(:last-child) {
margin-bottom: var(--space-lg);
}
.flow-list__item:not(:last-child)::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 12px solid transparent;
	border-left: 12px solid transparent;
	border-top: 21px solid var(--color-muted);
	border-bottom: 0;
	position: absolute;
	bottom: -21px;
	left: 50%;
	transform: translateX(-50%);	
}

.flow-list__item figure{
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: 30px;
	align-items: center;
}
.flow-list__item figure img{
	width: 48px;
}
.flow-list__number{
	color: var(--color-orange);
}
.flow-list__content h3{
	color: #fff;
}


.service-contact{
	color: var(--color-navy);
background-color: var(--color-muted);
}


/*選ばれる理由*/
.selection-points h2,
.before-after h2{
	margin: 0 auto var(--space-2xl);
	text-align: center;
}

.selection-points{
	padding: var(--space-4xl) 0;
	color: var(--color-navy);
	background-color: var(--color-muted);
}
.selection-points table{
	margin: 0 0 var(--space-2xl);
	width: 100%;
}
.selection-points table th,
.selection-points table td{
	padding: var(--space-md);
	border-bottom: 1px solid var(--color-navy);
}
.selection-points table thead th{
	font-weight: 500;
	color: var(--color-text);
}
.selection-points table tbody th{
	color: var(--color-text);
}
.selection-points table tbody td{
	font-weight: 600;
	font-size: large;
}

.before-after{
	padding: var(--space-4xl) 0;
	color: var(--color-muted);
	background-color: var(--color-navy);
}
.before-after table{
	margin: 0 0 var(--space-2xl);
	width: 100%;
}
.before-after table th,
.before-after table td{
	padding: var(--space-md);
	border-bottom: 1px solid var(--color-muted);
}
.before-after table thead th{
	font-weight: 500;
	color: var(--color-muted);
}
.before-after table tbody th{
	color: var(--color-text);
}
.before-after table tbody td{
	font-weight: 600;
	font-size: large;
}
.before-after table td:last-child{
background-color: rgb(255 255 255 /.1);
}

/*会社案内*/
.download-list{
	margin: 0 0 var(--space-2xl);
	display: grid;
	grid-template-columns: repeat(3 ,1fr);
	gap: var(--gap-size);
}

@media (max-width: 834px) {

	.split {
		display: block;
	}

	.split__image {
		position: relative;
		height: min(70svh, 640px);
	}

	.split__inner {
		max-width: none;
		padding: 64px 24px;
	}

}


@media(max-width:600px){
}