@charset "utf-8";
:root{
  --ink:#1A1A1A;
  --grn:#1B4D3E;
  --grn-deep:#123528;
  --gray:#6E736F;
  --line:#E6E8E6;
  --mist:#F3F6F4;
  --paper:#FFFFFF;
  --serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --en:"Inter","Helvetica Neue",Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--grn);color:#fff}
a{color:inherit}
img{max-width:100%;display:block}

/* ---------- echo rule：本線＋残響の淡い線 ---------- */
.echo-rule{
  border:0;height:9px;position:relative;
  background:
    linear-gradient(var(--line),var(--line)) top/100% 1px no-repeat,
    linear-gradient(rgba(27,77,62,.14),rgba(27,77,62,.14)) bottom/100% 1px no-repeat;
}

/* ---------- header ---------- */
header{
	position:fixed;
	inset:0 0 auto 0;
	z-index:100;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:20px clamp(20px,4vw,56px);
	background:rgba(255,255,255,.92);
	backdrop-filter:blur(8px);
	border-bottom:1px solid transparent;
	transition: .3s;
}
header.scrolled{
	border-bottom-color:var(--line);
}
.brand{
	font-family:var(--serif);
	font-weight:600;
	font-size:20px;
	text-decoration:none;
	letter-spacing:.08em;
	white-space:nowrap;
}
.brand div{
	display: flex;
	align-items: flex-start;
}
.brand div img{
	width: 30px;
	margin-right: 5px;
	flex-shrink: 0;
}
.brand small{
	font-family:var(--en);
	font-weight:500;
	font-size:10px;
	color:var(--gray);
	letter-spacing:.22em;
	display:block;
	line-height:1.2;
	text-align: right;
}
nav{
	margin-left:24px;
}
nav ul{
	display:flex;
	gap:clamp(16px,2.5vw,36px);
	list-style:none;
	white-space:nowrap;
}
nav a{
	font-size:13px;
	font-weight:500;
	text-decoration:none;
	color:var(--ink);
	letter-spacing:.06em;
	padding:6px 0;
	position:relative;
}
nav a::after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	height:1px;
	width:0;
	background:var(--grn);
	transition:width .3s;
}
nav a:hover::after{
	width:100%;
}

/* ---------- hero ---------- */
.hero{
	position:relative;
	overflow:hidden;
	padding:calc(96px + 12vh) clamp(20px,6vw,80px) 14vh;
	min-height:88vh;
	display:flex;
	flex-direction:column;
	justify-content:center;
	height: 100vh;
	background-image: url(../images/hero.jpg);
	background-size: cover;
	background-position: bottom center;
}
.hero-echo{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	right:clamp(8px,6vw,90px);
	display:flex;
	flex-direction:row-reverse;
	gap:clamp(12px,3vw,52px);
	pointer-events:none;
	user-select:none;
	font-family:var(--serif);
	font-weight:700;
	font-size:clamp(110px,18vh,180px);
	line-height:1;
	letter-spacing:.16em;
}
.hero-echo span{
	writing-mode:vertical-rl;
	color:transparent;
	-webkit-text-stroke:1px rgba(27,77,62,.30);
}
.hero-echo span:nth-child(2){
	-webkit-text-stroke-color:rgba(27,77,62,.16);
}
.hero-echo span:nth-child(3){
	-webkit-text-stroke-color:rgba(27,77,62,.07);
}
.hero-eyebrow{
	font-family:var(--en);
	font-size:12px;
	font-weight:600;
	letter-spacing:.3em;
	color:var(--grn);
	margin-bottom:28px;
}
.hero h1{
	font-family:var(--serif);
	font-weight:600;
	font-size:clamp(34px,6vw,72px);
	line-height:1.5;letter-spacing:.06em;
}
.hero h1 .thin{
	color:var(--gray);
}
.hero p{
	margin-top:36px;
	max-width:34em;
	font-size:clamp(14px,1.4vw,16px);
	color:var(--gray);
}
.hero-cta{
	margin-top:48px;
	display:flex;
	flex-wrap:wrap;
	gap:16px;
}
.reveal-line{
	display:block;
	overflow:hidden;
}
.reveal-line>span{
	display:block;
	transform:translateY(110%);
	animation:rise .9s cubic-bezier(.19,1,.22,1) forwards;
}
.reveal-line:nth-child(2)>span{
	animation-delay:.15s
}
@keyframes rise{
	to{
		transform:translateY(0)
	}
}

/* ---------- buttons ---------- */
.btn{
	display:inline-block;
	padding:16px 36px;
	font-size:14px;
	font-weight:500;
	letter-spacing:.1em;
	text-decoration:none;
	border:1px solid var(--ink);
	background:var(--ink);
	color:#fff;
	transition:background .3s,color .3s,border-color .3s;
}
.btn:hover{
	background:transparent;
	color:var(--ink);
}
.btn.primary{
	background:var(--grn);
	border-color:var(--grn);
	color:#fff;
}
.btn.primary:hover{
	background:transparent;
	color:var(--grn);
}
.btn.ghost{
	border-color:rgba(255,255,255,.5);
	color:#fff;
}
.btn.ghost:hover{
	background:#fff;
	color:var(--grn-deep);
	border-color:#fff;
}

/* ---------- section scaffold ---------- */
section{
	padding:clamp(72px,11vh,130px) clamp(20px,6vw,80px);
}
.sec-grid{
	display:grid;
	grid-template-columns:280px 1fr;
	gap:40px;
	max-width:1200px;
	margin:0 auto;
}
.sec-label{
	position:sticky;
	top:110px;
	align-self:start;
}
.sec-label .jp{
	font-size:15px;
	font-weight:700;
	letter-spacing:.12em;
}
.sec-label .jp::before{
	content:"/";
	color:var(--grn);
	margin-right:.7em;
	font-weight:400;
}
.sec-label .en{
	font-family:var(--en);
	font-size:11px;
	font-weight:500;
	letter-spacing:.28em;
	color:var(--gray);
	margin-left:1.6em;
	text-transform:uppercase;
}
h2.lead{
	font-family:var(--serif);
	font-weight:600;
	font-size:clamp(22px,2.8vw,34px);
	line-height:1.8;
	letter-spacing:.04em;
	margin-bottom:40px;
}
.note{
	color:var(--gray);
	font-size:14px;
}

/* ---------- about table ---------- */
.about-table{
	width:100%;
	border-collapse:collapse;
}
.about-table th,.about-table td{
	text-align:left;
	font-weight:400;
	vertical-align:top;
	padding:22px 8px;
	border-bottom:1px solid var(--line);
	font-size:15px;
}
.about-table th{
	width:9em;
	color:var(--gray);
	letter-spacing:.1em;
}

/* ---------- services ---------- */
.business-grid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-row-gap: 50px;
	grid-column-gap: 20px;
}
.business-box{
	position:relative;
	padding:20px 30px 20px;
	background: #fff;
	border:1px solid var(--line);
}
.business-num{
    position:absolute;
    top:-15px;
    left:50%;
    transform:translateX(-50%);
    width:200px;
    height:30px;
    background:var(--grn);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:1.1rem;
	letter-spacing: .1em;
}
.business-box h2{
	text-align: center;
}
.business-box img{
	margin: 10px auto;
}
.business-box ul{
	margin: 20px 0 0 20px;
	font-size: .9rem;
}

/* ---------- opinion（主力事業） ---------- */
#memorandum{
	background:var(--mist);
}
.op-facts{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
	gap:1px;
	background:var(--line);
	border:1px solid var(--line);
	margin:48px 0;
}
.op-facts div{
	background:#fff;
	padding:28px 24px;
}
.op-facts .k{
	font-family:var(--en);
	font-size:11px;
	font-weight:600;
	letter-spacing:.2em;
	color:var(--gray);
	text-transform:uppercase;
}
.op-facts .v{
	font-family:var(--serif);
	font-size:clamp(20px,2vw,26px);
	font-weight:600;
	margin-top:10px;
	line-height:1.5;
}
.op-facts .v small{
	font-size:13px;
	font-family:var(--sans);
	font-weight:400;
	color:var(--gray);
	display:block;
}
.op-flow{
	display:grid;
	gap:0;
	border-top:1px solid var(--line);
}
.op-step{
	display:grid;
	grid-template-columns:64px 1fr;
	gap:20px;
	padding:34px 8px;
	border-bottom:1px solid var(--line);
}
.op-step .no{
	font-family:var(--en);
	font-weight:500;
	font-size:13px;
	color:var(--grn);
	letter-spacing:.08em;
	padding-top:6px;
}
.op-step h3{
	font-family:var(--serif);
	font-size:19px;
	font-weight:600;
	letter-spacing:.06em;
	margin-bottom:10px;
}
.op-step p{
	font-size:15px;
	color:#3c403d;
}
.op-step .links{
	margin-top:18px;
	display:flex;
	flex-wrap:wrap;
	gap:14px;
}
.doc-link{
	display:inline-flex;
	align-items:center;
	gap:10px;
	font-size:14px;
	text-decoration:none;
	padding:12px 20px;
	border:1px solid var(--line);
	background:#fff;
	transition:border-color .3s;
}
.doc-link:hover{
	border-color:var(--grn);
}
.doc-link .tag{
	font-family:var(--en);
	font-size:10px;
	font-weight:600;
	color:#fff;
	background:var(--grn);
	padding:2px 7px;
	letter-spacing:.1em;
}
.doc-link small{
	color:var(--gray);
}

/* ---------- contact ---------- */
#contact{
	background:var(--grn-deep);
	color:#fff;
	position:relative;
	overflow:hidden;
}
#contact .sec-label .jp{
	color:#fff;
}
#contact .sec-label .jp::before{
	color:#9DC3B;
}
#contact .sec-label .en{
	color:#9DC3B2;
}
#contact h2.lead{
	color:#fff;
}
.contact-echo{
  position:absolute;right:-1%;bottom:-14%;pointer-events:none;user-select:none;
  font-family:var(--en);font-weight:600;font-size:clamp(90px,14vw,190px);
  line-height:1;letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.10);white-space:nowrap;
}
.contact-mail{
  font-family:var(--en);font-size:clamp(18px,2.4vw,26px);font-weight:500;
  color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);
  padding-bottom:4px;transition:border-color .3s;
}
.contact-mail:hover{border-color:#fff;}
#contact .note{color:#9DC3B2;margin-top:14px;}
#contact .hero-cta{margin-top:40px;}

/* ---------- privacy ---------- */
#pp details{border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
#pp summary{
  cursor:pointer;list-style:none;padding:26px 8px;
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:.06em;
}
#pp summary::-webkit-details-marker{display:none;}
#pp summary::after{
  content:"＋";font-family:var(--en);color:var(--grn);font-size:18px;transition:transform .3s;
}
#pp details[open] summary::after{transform:rotate(45deg);}
.pp-body{padding:4px 8px 34px;font-size:13.5px;color:#3c403d;}
.pp-body ol{margin:16px 0 0 1.4em;}
.pp-body li{margin-bottom:14px;}
.pp-body li b{display:block;font-weight:700;letter-spacing:.06em;}

/* ---------- footer ---------- */
footer{
	padding:40px clamp(20px,6vw,80px);
	display:flex;
	flex-wrap:wrap;
	gap:16px;
	align-items:center;
	justify-content:space-between;
	border-top:1px solid var(--line);
}
footer .brand{
	font-size:16p;
}
footer p{
	font-family:var(--en);
	font-size:11px;
	color:var(--gray);
	letter-spacing:.12em;
}

/* ---------- scroll reveal ---------- */
.fade{
	opacity:0;
	transform:translateY(24px);
	transition:opacity .8s ease,transform .8s ease;
}
.fade.in{
	opacity:1;
	transform:none;
}

/* ---------- responsive ---------- */
@media (max-width:860px){
	.sec-grid{
		grid-template-columns:1fr;
		gap:28px
	}
	.sec-label{
		position:static;
	}
	.hero{
		min-height:72vh;
	}
	.hero-echo{
		display: none;
	}
	.op-step{
		grid-template-columns:1fr;
		gap:8px;
	}
	header{
		padding:14px 20px;
	}
	.brand small{
		display:none;
	}
	header nav{
		display:none;
	}
	.business-grid{
		grid-template-columns: repeat(1, 1fr);
}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal-line>span{animation:none;transform:none}
  .fade{opacity:1;transform:none;transition:none}
}