@charset "utf-8";
/*===========================================================================
  パターンC「縦書き」
  top-renewal.css の後に読み込むと、TOPの見た目がこのパターンに切り替わります。
  PC  ：全面写真＋右側に縦書きのキャッチ、サービスは3枚横並び
  スマホ：縦書きキャッチを右に大きく、サービスは横スワイプ
===========================================================================*/

/*メインビジュアル：全体を均一に暗くし、右側を少し濃く*/
.top-hero::after {
	background:
		linear-gradient(270deg, rgba(6,26,46,.85) 0%, rgba(6,26,46,.5) 35%, rgba(6,26,46,.25) 70%),
		linear-gradient(180deg, rgba(6,26,46,.45) 0%, rgba(6,26,46,0) 25%);
}
.top-hero-inner {
	left: auto;
	right: calc(var(--top-gutter) + 40px);
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	gap: clamp(20px, 2.4vw, 40px);
	max-width: none;
	height: min(72%, 640px);
}
.top-hero-eyebrow,
.top-hero-title,
.top-hero-name {
	writing-mode: vertical-rl;
	margin: 0;
}
.top-hero-eyebrow {
	font-size: clamp(.75rem, .9vw, .9rem);
	letter-spacing: .32em;
	color: rgba(255,255,255,.8);
}
.top-hero-eyebrow::before {
	width: 1px;
	height: 56px;
	margin: 0 0 18px;
}
.top-hero-title {
	font-size: clamp(2.4rem, 4.6vw, 4.6rem);
	line-height: 1.5;
	letter-spacing: .14em;
}
/*縦書きでは『を上にぶら下げる*/
.top-hero-title .br:first-child {margin-left: 0; margin-top: -.5em;}
.top-hero-title .br:nth-child(2) {padding-top: 2.2em;}	/*2行目を下げて段差をつける*/
.top-hero-name {
	align-self: flex-end;
	font-size: clamp(1rem, 1.4vw, 1.3rem);
	letter-spacing: .6em;
}
.top-hero-name::before {margin: 0 0 4px;}

/*左下に大きな英字を透かしで*/
.top-hero-bar {gap: 24px;}
.top-hero-slides::after {
	content: "UENO SETSUBI";
	position: absolute;
	z-index: 2;
	left: var(--top-gutter);
	bottom: clamp(70px, 8vw, 110px);
	font-family: var(--top-en);
	font-weight: 600;
	font-size: clamp(3rem, 7vw, 7rem);
	line-height: .8;
	letter-spacing: .02em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255,255,255,.35);
	pointer-events: none;
}
.top-hero-scroll {display: none;}

/*サービス案内：PCは3枚横並び（同じ高さの写真カード）
  3枚とも「写真の余白／小見出し／見出し／ボタン」の4段を共有（subgrid）して、
  小見出し・見出し・ボタンの高さが横一列にそろうようにしています。*/
.top-service {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	grid-template-rows: minmax(clamp(150px, 15vw, 240px), 1fr) auto auto auto;
	column-gap: clamp(14px, 1.6vw, 24px);
	row-gap: 0;
	max-width: none;
}
.top-cards {display: contents;}
.top-feature,
.top-card {
	position: relative;
	display: grid !important;
	grid-template-columns: 1fr;
	grid-template-rows: subgrid;
	grid-row: 1 / span 4;
	min-height: 0;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 6px;
	overflow: hidden;
	color: #fff !important;
	background: var(--top-overlay);
	isolation: isolate;
}
.top-card:hover {transform: none; box-shadow: none;}
.top-card-img {
	position: absolute;
	inset: 0;
	z-index: -1;
	aspect-ratio: auto;
}
.top-card-img::after,
.top-feature-img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(10,37,64,.95) 0%, rgba(10,37,64,.7) 40%, rgba(10,37,64,.1) 75%);
}
.top-feature-body,
.top-card-body {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: 2 / span 3;
	align-self: stretch;
	margin: 0;
	padding: 0 clamp(24px, 2.4vw, 40px) clamp(24px, 2.4vw, 40px);
	max-width: none;
}
/*小見出し：行数が違っても下端をそろえる*/
.top-feature .top-label,
.top-card .top-label {
	align-self: end;
	margin: 0 0 14px;
	color: var(--top-accent-on-dark);
}
/*見出し：3枚とも同じ大きさ・同じ太さで、1行目の高さをそろえる*/
.top-feature-title,
.top-card-title {
	align-self: start;
	margin: 0 0 24px;
	color: #fff;
	font-weight: 700;
	font-size: clamp(1.05rem, 1.45vw, 1.5rem);
	line-height: 1.55;
	letter-spacing: .03em;
}
.top-feature .top-more,
.top-card .top-more {
	align-self: end;
	justify-self: start;
	margin: 0;
	color: #fff;
}
.top-card .top-more::after {
	background-color: #f1efef;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23174f41' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/*タブレット：大きいカードを上段に、下に2枚*/
@media screen and (min-width: 768px) and (max-width: 1100px) {
	.top-service {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: minmax(180px, 1fr) auto auto auto 16px minmax(180px, 1fr) auto auto auto;
	}
	.top-feature {grid-column: 1 / -1;}
	.top-card {grid-row: 6 / span 4;}
	.top-feature-title,
	.top-card-title {font-size: clamp(1.05rem, 2.2vw, 1.4rem);}
}

/*スマホ*/
@media screen and (max-width: 767px) {
	.top-hero-inner {
		right: 20px;
		top: 96px;
		transform: none;
		height: auto;
		gap: 14px;
	}
	.top-hero-title {font-size: clamp(2rem, 9.4vw, 2.7rem); letter-spacing: .1em;}
	.top-hero-title .br:nth-child(2) {padding-top: 1.6em;}
	.top-hero-eyebrow {font-size: .68rem;}
	.top-hero-eyebrow::before {height: 32px;}
	.top-hero-name {font-size: .95rem; letter-spacing: .5em;}
	.top-hero::after {
		background:
			linear-gradient(270deg, rgba(6,26,46,.85) 0%, rgba(6,26,46,.45) 55%, rgba(6,26,46,.3) 100%),
			linear-gradient(0deg, rgba(6,26,46,.7) 0%, rgba(6,26,46,0) 30%);
	}
	.top-hero-slides::after {font-size: 2.6rem; bottom: 76px; left: 20px; line-height: .9; width: 5em;}

	/*サービスは横スワイプ（3枚の文字の高さはPCと同じ仕組みでそろえる）*/
	.top-service {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 82%;
		grid-template-rows: minmax(150px, 1fr) auto auto auto;
		column-gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding: 32px 16px 40px;
		scroll-padding: 0 16px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.top-service::-webkit-scrollbar {display: none;}
	.top-feature,
	.top-card {scroll-snap-align: start;}
	.top-feature-body,
	.top-card-body {padding: 0 20px 20px;}
	.top-feature .top-label,
	.top-card .top-label {margin-bottom: 10px;}
	.top-feature .top-label::before {margin-bottom: 10px;}
	.top-feature-title,
	.top-card-title {font-size: clamp(1rem, 4.4vw, 1.15rem); letter-spacing: .02em; margin-bottom: 18px;}
}


/*写真の見せる位置（2026.10 写真差し替え：案B）
---------------------------------------------------------------------------*/
.top-hero-slide:nth-child(2) img {object-position: 40% 35%;}	/*コア抜き*/
.top-hero-slide:nth-child(3) img {object-position: 60% 60%;}	/*ポンプ車*/
.top-feature-img img {object-position: 30% 45%;}
.top-card:nth-child(1) .top-card-img img {object-position: 60% 60%;}
.top-card:nth-child(2) .top-card-img img {object-position: 55% 60%;}
@media screen and (max-width: 767px) {
	.top-hero-slide:nth-child(2) img {object-position: 45% 50%;}
	.top-hero-slide:nth-child(3) img {object-position: 62% 50%;}
}