/* ============================================================
   top.css — TOPページ: FV / ABOUT / SERVICE / FLOW / WORKS帯 / NEWS
   ※ タブレット/流体/1440超えなどの横断調整は overrides.css（最後に読込）にある
   ============================================================ */

/* ============================================================
   TOP: FV（Figma 291:52603 / SP 425:24532）
   ============================================================ */
.fv {
background: var(--color-bg-gray);
padding: 24px 35px 48px;
}

.fv__bg {
position: relative;
max-width: 1370px;
height: 628px;
margin: 0 auto;
border-radius: 20px;
overflow: hidden;
}

.fv__photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 27% 24%;
}

/* 写真の上のグラデーション */
.fv__bg::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(252deg, rgba(0, 0, 0, 0.2) 36.1%, rgba(255, 255, 255, 0.04) 87%);
pointer-events: none;
}

.fv__en {
position: absolute;
left: 29px;
top: auto;
bottom: 12px;  /* 1440カンプで top:552 = bottom:12 と等価。写真が伸びても下端に追従 */
font-family: var(--font-en);
font-weight: 600;
font-size: 64px;
line-height: 1;
letter-spacing: -2px;
color: #fff;
opacity: 0.6;
white-space: nowrap;
}

.fv__en span { display: inline; }

.fv__copy {
position: absolute;
right: 45px;
top: 70px;
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-start;
}

.fv__copy-lead {
font-size: 32px;
line-height: 1.6;
font-weight: 500;
color: #fff;
}

.fv__copy-main {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
font-weight: 500;
color: var(--color-navy);
}

.fv__copy-line {
display: inline-flex;
align-items: baseline;
background: var(--color-bg-gray);
border-radius: 8px;
padding: 8px 20px;
}

.fv__copy-l { font-size: 54px; line-height: 1.6; }

.fv__copy-s { font-size: 32px; line-height: 1.6; letter-spacing: 1.68px; }

@media (max-width: 767px) {
	.fv { padding: 20px 7.5px; }

	.fv__bg { width: 100%; height: auto; aspect-ratio: 6 / 11; max-height: 85svh; border-radius: 20px; }

	.fv__photo { width: 100%; height: 100%; aspect-ratio: auto; object-position: 20.6% 50%; }

	.fv__bg::before { background: linear-gradient(265.37deg, rgba(0, 0, 0, 0.2) 36.139%, rgba(255, 255, 255, 0.04) 87.009%); }

	.fv__en {
		left: 8px;
		right: auto;
		top: auto;
		bottom: 12px;
		font-size: clamp(32px, 8.53vw, 64px);
		letter-spacing: -2px;
		white-space: nowrap;
	}

	.fv__en span { display: block; }

	.fv__copy { right: 12px; left: auto; top: 47px; gap: 1.593px; }

	.fv__copy-lead { font-size: clamp(20px, 5.33vw, 40px); }

	.fv__copy-main { width: min(90.7vw, 690px); gap: 3.868px; }

	.fv__copy-line { padding: 3.868px 9.67px; border-radius: 3.868px; }

	.fv__copy-line:first-child { width: 100%; }

	.fv__copy-l { font-size: clamp(26.108px, 6.96vw, 52px); }

	.fv__copy-s { font-size: clamp(15.472px, 4.13vw, 31px); letter-spacing: 0.8101px; }

}

/* ============================================================
   TOP: ABOUT（Figma 229:36357 / SP 375:17442）
   ============================================================ */
.about {
position: relative;
background: var(--color-bg-gray);
padding: 80px 80px 100px;
display: flex;
flex-direction: column;
align-items: center;
}

.about__en {
align-self: flex-end;
margin-bottom: -100px;
font-family: var(--font-en);
font-weight: 600;
font-size: 180px;
line-height: 1;
letter-spacing: -2px;
color: #fff;
width: 600px;
text-align: left;
}

.about__contents {
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
padding: 0 60px;
position: relative;
z-index: 1;
}

.about__title-group { display: flex; gap: 46px; align-items: flex-start; }

.about__label {
writing-mode: vertical-rl;
font-feature-settings: 'vrt2' 1;
background: var(--color-bg-white);
border-radius: 8px;
padding: 20px 10px;
font-size: 32px;
line-height: 1.2;
font-weight: 500;
color: var(--color-navy);
}

.about__title {
display: flex;
gap: 8px;
align-items: flex-start;
padding-top: 32px;
font-weight: 500;
color: var(--color-navy);
}

.about__title-item {
writing-mode: vertical-rl;
font-feature-settings: 'vrt2' 1;
font-size: 64px;
line-height: 1.2;
}

.about__title-x {
writing-mode: vertical-rl; font-feature-settings: 'vrt2' 1;
font-size: 64px;
line-height: 1;
font-weight: 700;
color: var(--color-yellow-dusty);
align-self: center;
height: 372px;
display: flex;
align-items: center;
justify-content: center;
}

.about__text-group {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 50px;
width: 720px;
padding-top: 80px;
}

.about__text { display: flex; flex-direction: column; gap: 35px; }

.about__text p { font-size: 20px; line-height: 2; }

@media (max-width: 767px) {
	.about { padding: 40px 16px 64px; }

	.about__en {
		position: absolute;
		left: 4px;
		top: 412.34px;
		width: auto;
		margin: 0;
		font-size: 80px;
		font-weight: 700;
		letter-spacing: -2px;
		text-align: left;
		transform: scaleY(0.97);
		transform-origin: left top;
	}

	.about__contents { flex-direction: column; gap: 80px; padding: 0; }

	.about__title-group { 
    gap: 46px;
    width: 100%;
    padding: 0 16px;
    align-items: center;
    justify-content: center;
  }

	.about__label {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 70px;
		padding: 10px 20px;
		font-size: 32px;
		writing-mode: horizontal-tb;
		word-break: break-word;
	}

	.about__title { gap: 6px; padding-top: 20px; }

	.about__title-item {
		width: 46.445px;
		font-size: 46px;
		line-height: 1.2;
		writing-mode: horizontal-tb;
		word-break: break-word;
	}

	.about__title-item:first-child { line-height: 0; }

	.about__title-item:first-child > span { line-height: 1.2; }

	.about__title-item:first-child > .about__title-item-tight { line-height: 1; }

	.about__title-x { height: 246.825px; align-self: flex-start; justify-content: center; font-size: 42.464px; line-height: 1.6; }

	.about__text-group { width: 100%; padding-top: 0; gap: 50px; align-items: flex-end; }

	.about__text p { font-size: 20px; line-height: 2; }

	.about__text-group .btn { width: 287px; min-width: 0; }

}

/* ============================================================
   TOP: SERVICE（Figma 229:36376 / SP 375:17459）
   ============================================================ */
.service { position: relative; background: var(--color-bg-gray); }

.service::before {
content: '';
position: absolute;
inset: 0;
background: var(--color-gray-200);
border-radius: 45px 45px 0 0;
}

.service__inner {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 140px 80px;
}

.service__en {
align-self: flex-start;
margin-bottom: -32px;
font-family: var(--font-en);
font-weight: 600;
font-size: 180px;
line-height: 1;
letter-spacing: -2px;
color: var(--color-bg-gray-100);
transform: scaleY(0.97);
white-space: nowrap;
}

.service__contents {
display: flex;
flex-direction: column;
align-items: center;
gap: 64px;
width: 100%;
max-width: 1280px;
--service-pad: 60px;
padding: 0 var(--service-pad);
}

.service__main { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; }

/* カードM（照明・LED 766×460 ノッチ焼き込み画像 515:24625） */
.service-card-m { position: relative; width: min(766px, 100%); }

.service-card-m__img { display: block; width: 100%; height: auto; }

.service-card-m__label {
position: absolute;
left: 0;
bottom: 0;
display: flex;
flex-direction: column;
gap: 4px;
width: 280px;
max-width: 100%;
padding: 0 8px 9px;
}

.service-card-m__title {
display: flex;
align-items: center;
gap: 12px;
font-size: 28px;
line-height: 1.6;
font-weight: 500;
letter-spacing: 2px;
color: var(--color-navy);
white-space: nowrap;
}

.service-card-m__desc { font-size: 14px; line-height: 1; color: var(--color-font-black); }

/* 縦書きタイトル群（右側 515:24635） */
.service__title-group { display: flex; gap: 40px; align-items: flex-start; }

.service__lead {
display: flex;
gap: 8px;
align-items: flex-start;
padding-top: 40px;
}

.service__lead p {
writing-mode: vertical-rl;
font-feature-settings: 'vrt2' 1;
width: 30px;
font-size: 24px;
line-height: 1.2;
letter-spacing: 0.2em; /* Figma縦送り1.2相当 */
font-weight: 500;
color: var(--color-navy);
}

.service__title {
writing-mode: vertical-rl;
font-feature-settings: 'vrt2' 1;
width: 70px;
font-size: 64px;
line-height: 1.2;
letter-spacing: 0.2em;
font-weight: 500;
color: var(--color-navy);
text-align: center;
}

.service__title-x { color: var(--color-yellow-dusty); }

.service__label {
writing-mode: vertical-rl;
font-feature-settings: 'vrt2' 1;
box-sizing: border-box;
width: 70px;
background: var(--color-bg-white);
border-radius: 8px;
padding: 10px 20px;
font-size: 32px;
line-height: 1.2;
letter-spacing: 0.2em;
font-weight: 500;
color: var(--color-navy);
display: flex;
align-items: center;
}

/* カードS（ノッチ焼き込み画像 TOP-card-s 515:24644） */
.service__cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 40px;
row-gap: 64px;
width: 100%;
max-width: 1160px;
margin-inline: auto;
}

.service-card-s { position: relative; width: 100%; }

.service-card-s picture {
position: relative;
display: block;
overflow: hidden;
width: 100%;
}

.service-card-s__img { display: block; width: 100%; height: auto; }

/* 支給の配線写真に差し替え。既存画像のalphaでカードの切り抜き形状を保持する。 */
.service-card-s--wiring picture {
	background: url('../img/service/wiring-outlet-original.jpg') 50% 50% / 100% auto no-repeat;
	-webkit-mask: url('../img/service/card-01.png') 0 0 / 100% 100% no-repeat;
	mask: url('../img/service/card-01.png') 0 0 / 100% 100% no-repeat;
}
.service-card-s--wiring .service-card-s__img { opacity: 0; }
@media (max-width: 767px) {
	.service-card-s--wiring picture {
		-webkit-mask-image: url('../img/service/card-01-sp.png');
		mask-image: url('../img/service/card-01-sp.png');
	}
}

/* Figma 646:3756 の正式画像を使用。SPは既存カードと同じ縦横比を維持する。 */
@media (max-width: 767px) {
	.service-card-s--switch .service-card-s__img {
		aspect-ratio: 343 / 240;
		object-fit: fill;
	}
}

.service-card-s__label {
position: absolute;
z-index: 2;
left: 0;
bottom: -3px;
display: flex;
flex-direction: column;
gap: 4px;
width: min(237.396px, calc(100% - 40px));
padding-bottom: 10px;
}

.service-card-s__title {
display: flex;
align-items: center;
gap: 8px;
font-size: 18px;
line-height: 1.6;
font-weight: 500;
letter-spacing: 2px;
color: var(--color-navy);
white-space: nowrap;
}

.service-card-s__desc { font-size: 14px; line-height: 1; color: var(--color-font-black); white-space: nowrap; }

@media (min-width: 768px) and (max-width: 1199px) {
	.service__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 24px;
		row-gap: 40px;
	}

	.service-card-s__label { width: min(66%, calc(100% - 40px)); }

	.service-card-s__title { font-size: clamp(14px, 1.7vw, 18px); }

	.service-card-s__desc,
	.service-card-m__desc { font-size: clamp(11px, 1.2vw, 14px); }

}

/* 対応エリア */
.service-area {
width: 100%;
border: 0.667px solid var(--color-gray-600);
border-radius: 10px;
padding: 32.667px 40.667px;
display: flex;
flex-direction: column;
gap: 16px;
}

.service-area__title {
font-size: 28px;
line-height: 1.6;
font-weight: 500;
letter-spacing: 2px;
color: var(--color-navy);
}

.service-area__list { display: flex; flex-direction: column; gap: 4px; }

.service-area__item { display: flex; align-items: flex-start; gap: 8px; font-size: 16px; line-height: 1.6; color: var(--color-gray-900); }

.service-area__item img { margin-top: 3px; }

.service-area__note { font-size: 16px; line-height: 1.6; color: var(--color-gray-900); }

@media (min-width: 768px) {
	.service-area { width: calc(100% + var(--service-pad, 0px) * 2); margin: 0 calc(-1 * var(--service-pad, 0px)); }

}

@media (max-width: 767px) {
	.service::before { border-radius: 20px 20px 0 0; }

	.service__inner { padding: 64px 16px; }

	.service__contents,
	.service__main { display: contents; }

	.service__title-group {
		order: 1;
		justify-content: space-between;
		align-self: stretch;
		width: 100%;
		margin-bottom: -16px;
		padding: 0 32px 0 16px;
		gap: 0;
	}

	.service__en {
		order: 2;
		align-self: stretch;
		margin-bottom: -16px;
		font-size: 80px;
		font-weight: 700;
		letter-spacing: -2px;
	}

	.service-card-m { order: 3; margin-bottom: 32px; }

	.service__cards { order: 4; margin-bottom: 32px; }

	.service-area { order: 5; }

	.service-card-m { width: 100%; }

	.service-card-m picture,
	.service-card-s picture { display: block; width: 100%; height: auto; }

	.service-card-m__img,
	.service-card-s__img { width: 100%; height: auto; }

	.service-card-m__title { font-size: 18px; gap: 8px; }

	.service-card-m__title img { width: 12px; height: 12px; }

	.service-card-m__label { z-index: 2; top: calc(100% - 54px); bottom: auto; width: min(63.3%, calc(100% - 40px)); padding: 0 0 10px; }

	.service__label { order: 1; }

	.service__lead { order: 2; }

	.service__title { order: 3; }

	.service__lead { padding-top: 40px; }

	.service__title { width: 55px; font-size: 46px; }

	.service-area { padding: 32.667px 16.667px; }

	.service-area__title { font-size: 20px; letter-spacing: 2px; }

	.service-area__item { font-size: 16px; }

	.service-area__note { font-size: 16px; }

	.service__cards {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
	}

}

/* ============================================================
   TOP: FLOW（Figma 229:36424 / SP 375:17508）
   ============================================================ */
.flow { position: relative; background: var(--color-gray-200); }

.flow::before {
content: '';
position: absolute;
inset: 0;
background: var(--color-bg-gray);
border-radius: 45px 45px 0 0;
}

.flow__inner {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
max-width: 1280px;
margin: 0 auto;
padding: 140px 80px;
}

.flow__title-group { display: flex; flex-direction: column; gap: 120px; align-items: flex-start; }

.flow__en {
font-family: var(--font-en);
font-weight: 600;
font-size: 180px;
line-height: 1;
letter-spacing: -2px;
color: #fff;
margin-bottom: -54px;
transform: scaleY(0.97);
}

.flow__heading {
padding: 10px 20px;
font-size: 32px;
line-height: 1.6;
font-weight: 500;
color: var(--color-navy);
}

.flow-steps {
position: relative;
display: flex;
flex-direction: column;
gap: 64px;
width: 620px;
padding: 80px 60px 0 0;
}

/* ステップを結ぶ縦線 */
.flow-steps::before {
content: '';
position: absolute;
left: 8px;
top: 96px;
height: calc(100% - 176px);
border-left: 1px solid var(--color-yellow-dusty);
}

.flow-step { position: relative; display: flex; flex-direction: column; gap: 8px; }

.flow-step__head { display: flex; align-items: center; gap: 10px; }

.flow-step__dot {
width: 17px;
height: 17px;
border-radius: 50%;
background: var(--color-yellow-dusty);
margin-right: 13px;
position: relative;
z-index: 1;
}

.flow-step__num {
font-family: var(--font-en);
font-weight: 600;
font-size: 30px;
line-height: 1;
color: var(--color-navy);
}

.flow-step__title { font-size: 24px; line-height: 1.6; font-weight: 500; letter-spacing: 2px; color: var(--color-navy); }

.flow-step__desc { padding-left: 40px; font-size: 16px; line-height: 1.6; max-width: 543px; }

@media (max-width: 767px) {
	.flow::before { border-radius: 20px 20px 0 0; }

	.flow__inner { flex-direction: column; gap: 32px; padding: 64px 16px; }

	.flow__title-group { display: contents; }

	.flow__title { order: 1; }

	.flow-steps { order: 2; }

	.flow__title-group > .btn { order: 3; width: 100%; max-width: 400px; min-width: 0; margin-left: auto; margin-right: auto; }

	.flow__en { margin-bottom: -40px; font-size: 80px; font-weight: 700; }

	.flow__heading { padding: 10px 16px; font-size: 24px; }

	.flow-steps { width: 100%; padding: 0; gap: 40px; }

	.flow-steps::before { left: 8px; top: 8.5px; height: calc(100% - 17px); border-left: 1px solid var(--color-yellow-dusty); }

	.flow-step__head { gap: 8px; }

	.flow-step__dot { margin-right: 0; }

	.flow-step__title { margin-left: 2px; font-size: 20px; letter-spacing: 2px; }

	.flow-step__num { font-size: 30px; }

	.flow-step__desc { padding-left: 24px; font-size: 16px; }

}

/* ============================================================
   TOP: WORKS（Figma 229:36437 / SP 375:17520）
   ============================================================ */
.works { position: relative; background: var(--color-bg-gray); }

.works__texture {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.06;
pointer-events: none;
}

.works__title-bg { position: relative; height: 600px; overflow: hidden; }

.works__title-photo { width: 100%; height: 100%; object-fit: cover; }

.works__en {
position: absolute;
left: 100px;
top: 263px;
display: flex;
flex-direction: column;
font-family: var(--font-en);
font-weight: 600;
font-size: 180px;
line-height: 1;
letter-spacing: -2px;
color: var(--color-gray-200);
transform: scaleY(0.97);
}

.works__en span + span { margin-top: -20px; }

.works__wrap {
position: relative;
display: flex;
flex-direction: column;
gap: 64px;
padding: 100px 80px;
}

.works__contents { display: flex; align-items: flex-start; justify-content: space-between; }

.works__label {
writing-mode: vertical-rl;
font-feature-settings: 'vrt2' 1;
box-sizing: border-box;
width: 70px;
background: var(--color-bg-white);
border-radius: 6px;
padding: 9px 19px;
font-size: 32px;
line-height: 1;
letter-spacing: 0.2em;
font-weight: 500;
color: var(--color-navy);
}

.works__cards { display: flex; gap: 20px; width: 1138px; }

.works__cta { display: flex; justify-content: flex-end; max-width: 1280px; width: 100%; margin: 0 auto; }

@media (max-width: 767px) {
	.works__title-bg { height: auto; aspect-ratio: 5 / 4; }

	.works__title-photo { object-position: bottom; }

	.works__en { left: 8px; top: auto; bottom: 0; font-size: 80px; font-weight: 700; }

	.works__en span + span { margin-top: -20px; }

	.works__wrap { gap: 64px; padding: 64px 16px; }

	.works__contents { flex-direction: column; gap: 32px; }

	.works__label { align-self: stretch; width: 100%; padding: 10px 20px; font-size: 32px; letter-spacing: 0; writing-mode: horizontal-tb; }

	.works__cards { flex-direction: column; gap: 24px; width: 100%; }

	.works__cta { justify-content: center; }

}

/* ============================================================
   TOP: NEWS（Figma 467:35106 / SP 467:35336）
   ============================================================ */
.top-news { position: relative; padding: 140px 0; background: var(--color-bg-gray); }

.top-news__title-group {
position: absolute;
left: 80px;
top: 140px;
display: flex;
flex-direction: column;
gap: 98px;
align-items: flex-start;
}

.top-news__en {
font-family: var(--font-en);
font-weight: 600;
font-size: 180px;
line-height: 1;
letter-spacing: -2px;
color: var(--color-gray-200);
margin-bottom: -54px;
transform: scaleY(0.97);
}

.top-news__heading {
padding: 10px 20px;
font-size: 32px;
line-height: 1.6;
font-weight: 500;
color: var(--color-navy);
}

.top-news__wrap {
margin-left: auto;
margin-top: 120px;
width: 1010px;
background: var(--color-bg-white);
border-radius: 30px 0 0 30px;
padding: 32px 80px 80px 64px;
display: flex;
flex-direction: column;
gap: 80px;
}

.top-news__list { display: flex; flex-direction: column; }

.top-news__notice {
background: var(--color-gray-200);
border-radius: 10px;
padding: 24px 24px 40px;
display: flex;
flex-direction: column;
gap: 23px;
}

.top-news__notice-title { display: flex; flex-direction: column; gap: 4px; }

.top-news__notice-en { font-family: var(--font-en); font-weight: 600; font-size: 16px; line-height: 1; color: var(--color-navy); }

.top-news__notice-heading { font-size: 18px; line-height: 1.6; font-weight: 500; letter-spacing: 2px; color: var(--color-font-black); }

.top-news__notice-body p { font-size: 16px; line-height: 1.6; }

@media (max-width: 767px) {
	.top-news { display: flex; flex-direction: column; padding: 64px 0 32px; }

	.top-news__title-group { display: contents; }

	.top-news__title { order: 1; padding: 0 16px; margin-bottom: 16px; }

	.top-news__wrap { order: 2; }

	.top-news__title-group > .btn { display: none; }

	.top-news__en { font-size: 80px; margin-bottom: -40px; }

	.top-news__heading { font-size: 24px; padding: 10px 16px; }

	.top-news__wrap { width: 100%; margin: 0; border-radius: 30px 0 0 30px; padding: 16px 16px 32px; gap: 32px; }

	.top-news .news-link__date { width: 100%; }

	.top-news .news-link__title { width: auto; flex: 1; min-width: 0; max-width: none; white-space: normal; }

	.top-news__notice { padding: 24px 24px 40px; gap: 23px; }

	.top-news__notice-body p { font-size: 16px; }

	.works__wrap .btn:not(.btn--small) { width: 100%; }

}