/* PC〜タブレット横 */
.yw-home-hero {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 24px;
	align-items: stretch;
}

/* スマホ */
@media (max-width: 760px) {
	.yw-home-hero {
		grid-template-columns: 1fr;
	}

	.yw-home-hero__copy {
		padding: 8px 6px;
	}
}

.yw-home-hero__copy p { font-weight: 650; line-height: 1.85; }
.yw-brush-copy {
	margin: 0 0 20px;
	font-size: clamp(1.65rem, 2.5vw, 2.5rem);
	line-height: 1.45 !important;
	font-weight: 900 !important;
	color: #173a59;
	letter-spacing: .03em;
}
.yw-brush-copy span {
	display: block;
	white-space: nowrap;
}

.yw-home-hero__copy {
	padding: 28px 10px 10px 8px;

	background-image:
		linear-gradient(
			180deg,
			rgba(255,255,255,.04),
			rgba(255,255,255,.12)
		),
		url("https://yokohama-window.com/wp-content/uploads/2026/09/file_0000000058c08207b3b1d29690e156a9.png");

	background-size: 100% 100%;
	background-position: center bottom;
	background-repeat: no-repeat;
}

.yw-home-hero__live {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 190px;
	border-radius: var(--yw-radius);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--yw-shadow);
	border: 1px solid rgba(198,226,242,.8);
}
.yw-live-preview {
	position: relative;
	min-height: 370px;
	background-image: url("https://yokohama-window.com/wp-content/uploads/2026/09/LIVE.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}
.yw-live-preview__badge {
	position: absolute;
	z-index: 3;
	top: 14px;
	left: 14px;
	background: var(--yw-red);
	color: #fff;
	padding: 7px 13px;
	border-radius: 7px;
	font-weight: 900;
}

.yw-live-preview__caption {
	position: absolute;
	left: 14px;
	bottom: 14px;
	margin: 0;
	color: #fff;
	background: rgba(11,30,43,.78);
	padding: 7px 11px;
	border-radius: 6px;
	font-weight: 800;
}

.yw-live-info { padding: 20px 16px; display: flex; flex-direction: column; gap: 18px; background: linear-gradient(#f8fdff,#fff); }
.yw-live-info div { padding-bottom: 14px; border-bottom: 1px solid var(--yw-line); }
.yw-live-info span { display: block; color: var(--yw-blue); font-weight: 800; font-size: .8rem; margin-bottom: 5px; }
.yw-live-info strong { font-size: .9rem; line-height: 1.55; }
.yw-live-info .yw-button { margin-top: auto; }

.yw-feature-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 12px;
	margin: 20px 0 30px;
}
.yw-feature-card {
	--card-color: #1686d9;

	min-width: 0;
	min-height: 150px;
	padding: 17px 12px 15px;
	border-radius: 15px;

	display: flex;
	flex-direction: column;
	align-items: center;

	text-align: center;
	border: 1px solid #e6f1f7;
	box-shadow: 0 4px 18px rgba(19,79,116,.06);
}
.yw-feature-card:nth-child(1) {
	--card-color: #e7333f;
	background: linear-gradient(180deg, #fff0f2, #fffafa);
}
.yw-feature-card:nth-child(2) {
	--card-color: #1686d9;
	background: linear-gradient(180deg, #edf8ff, #fbfdff);
}
.yw-feature-card:nth-child(3) {
	--card-color: #16a765;
	background: linear-gradient(180deg, #edfbf3, #fbfefc);
}
.yw-feature-card:nth-child(4) {
	--card-color: #f28a18;
	background: linear-gradient(180deg, #fff7e8, #fffdf8);
}
.yw-feature-card:nth-child(5) {
	--card-color: #8d4de8;
	background: linear-gradient(180deg, #f7efff, #fdfaff);
}
.yw-feature-card:nth-child(6) {
	--card-color: #ed2b78;
	background: linear-gradient(180deg, #fff0f6, #fffafd);
}
.yw-feature-card__icon {
	width: 48px;
	height: 48px;
	margin-bottom: 8px;

	display: flex;
	align-items: center;
	justify-content: center;
}
.yw-feature-card__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.yw-feature-card h2 {
	margin: 3px 0 6px;
	font-size: 1rem;
	line-height: 1.35;
	font-weight: 800;
	color: var(--card-color);
}
.yw-feature-card p {
	margin: 0;
	font-size: .8rem;
	line-height: 1.55;
	color: #526b7e;
}

.yw-section { margin: 26px 0; padding: 22px; background: linear-gradient(180deg,#f0faff,#fff); border: 1px solid #e0eef7; border-radius: var(--yw-radius); }
.yw-section__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.yw-section__heading > div { display: flex; align-items: center; gap: 12px; }
.yw-section__heading h2 { margin: 0; color: var(--yw-blue-deep); font-size: 1.35rem; }
.yw-section__heading p { margin: 0; color: var(--yw-muted); font-size: .85rem; }
.yw-card-grid { display: grid; gap: 14px; }
.yw-card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.yw-content-card { background: #fff; border-radius: 13px; overflow: hidden; box-shadow: 0 5px 17px rgba(16,76,113,.08); }
.yw-content-card__thumb { aspect-ratio: 16/9; background: linear-gradient(145deg,#79cef1 0 45%,#f8b25f 45% 60%,#8ab1c5 60%); }
.yw-content-card:nth-child(2) .yw-content-card__thumb { background: linear-gradient(145deg,#feae61,#6269a4); }
.yw-content-card:nth-child(3) .yw-content-card__thumb { background: linear-gradient(145deg,#9bb6c9,#5b6875); }
.yw-content-card:nth-child(4) .yw-content-card__thumb { background: linear-gradient(145deg,#d4ecf7,#c7d1d8); }
.yw-content-card h3 { margin: 10px 12px 4px; font-size: .98rem; }
.yw-content-card p { margin: 0 12px 14px; font-size: .82rem; color: var(--yw-muted); }

.yw-bottom-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 18px; margin-top: 20px; }
.yw-info-panel { padding: 20px; border-top: 1px solid var(--yw-line); }
.yw-info-panel + .yw-info-panel { border-left: 1px solid var(--yw-line); }
.yw-info-panel__heading { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.yw-info-panel__heading h2 { margin: 0; color: var(--yw-blue-deep); font-size: 1.2rem; }
.yw-info-panel > p { color: #506a7d; line-height: 1.75; }
.yw-news-list { list-style: none; padding: 0; margin: 0; }
.yw-news-list li { display: grid; grid-template-columns: 88px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--yw-line); font-size: .88rem; }
.yw-news-list time { color: var(--yw-muted); }

@media (max-width: 960px) {
	.yw-home-hero { grid-template-columns: 1fr; minmax(260px, .9fr) 2fr; }
	.yw-home-hero__copy { padding: 8px 6px; }
	.yw-feature-grid { grid-template-columns: repeat(3,1fr); }
	.yw-card-grid--4 { grid-template-columns: repeat(2,1fr); }
	.yw-bottom-grid { grid-template-columns: 1fr; }
	.yw-info-panel + .yw-info-panel { border-left: 0; }
}

@media (max-width: 640px) {
	.yw-home-hero__live { grid-template-columns: 1fr; }
	.yw-live-preview { min-height: 250px; }
	.yw-live-info { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
	.yw-live-info .yw-button { grid-column: 1/-1; }
	.yw-feature-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
	.yw-section { padding: 16px 12px; }
	.yw-section__heading { display: block; }
	.yw-section__heading > p { margin-top: 6px; }
	.yw-card-grid--4 { grid-template-columns: 1fr; }
}


/* WP-WEB-01 v0.3.0: completion-mock finishing */
.yw-pickup {
	padding: 18px 16px 16px;
	background: linear-gradient(180deg, #eef9ff 0%, #f8fcff 100%);
}

.yw-pickup__heading {
	align-items: center;
}

.yw-section__title-row {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.yw-section__title-row p {
	margin: 0 0 0 6px;
	font-size: .85rem;
	color: var(--yw-muted);
	white-space: nowrap;
}

.yw-text-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--yw-blue) !important;
	font-weight: 800;
	font-size: .84rem;
	text-decoration: none !important;
	white-space: nowrap;
}

.yw-text-link:hover {
	text-decoration: underline !important;
}

.yw-content-card {
	min-width: 0;
	border: 1px solid #e5eff5;
	box-shadow: 0 5px 16px rgba(16,76,113,.06);
}

.yw-content-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #dcebf3;
}

.yw-content-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.yw-content-card__duration {
	position: absolute;
	right: 8px;
	bottom: 7px;
	padding: 2px 6px;
	border-radius: 4px;
	background: rgba(0,0,0,.76);
	color: #fff;
	font-size: .76rem;
	font-weight: 800;
	line-height: 1.35;
}

.yw-content-card__body {
	padding: 10px 12px 12px;
}

.yw-content-card__body h3 {
	margin: 0 0 5px;
	font-size: .98rem;
	line-height: 1.45;
	color: var(--yw-ink);
}

.yw-content-card__body p {
	margin: 0 0 7px;
	font-size: .82rem;
	line-height: 1.55;
	color: #4f687b;
}

.yw-content-card__body time {
	display: block;
	font-size: .76rem;
	color: var(--yw-muted);
}

.yw-bottom-grid {
	align-items: stretch;
	margin-top: 26px;
	border-top: 1px solid var(--yw-line);
}

.yw-info-panel {
	padding: 18px 16px 12px;
	border-top: 0;
}

.yw-info-panel__heading {
	min-height: 34px;
	margin-bottom: 14px;
}

.yw-info-panel__heading--how {
	gap: 8px;
}

.yw-label--gear {
	padding: 4px 8px;
	font-size: 1rem;
	line-height: 1;
}

.yw-label--small {
	margin-left: auto;
	padding: 3px 7px;
	font-size: .63rem;
}

.yw-news-list li {
	grid-template-columns: 76px minmax(0, 1fr);
	gap: 10px;
	padding: 10px 0;
	line-height: 1.45;
}

.yw-info-panel__footer {
	display: flex;
	justify-content: flex-end;
	padding-top: 10px;
}

.yw-info-feature {
	display: grid;
	grid-template-columns: 102px minmax(0, 1fr);
	gap: 14px;
	align-items: stretch;
}

.yw-info-feature__image {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 178px;
	object-fit: cover;
	border-radius: 10px;
	background: #edf6fb;
}

.yw-info-feature__body {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
}

.yw-info-feature__body h3 {
	margin: 0 0 9px;
	font-size: .98rem;
	line-height: 1.55;
	color: var(--yw-blue-deep);
}

.yw-info-feature__body p {
	margin: 0 0 12px;
	font-size: .82rem;
	line-height: 1.7;
	color: #506a7d;
}

.yw-info-feature__body .yw-outline-button {
	min-height: 38px;
	margin-top: auto;
	padding: 0 16px;
	font-size: .8rem;
}

@media (max-width: 960px) {
	.yw-section__title-row {
		flex-wrap: wrap;
	}

	.yw-section__title-row p {
		width: 100%;
		margin-left: 0;
	}

	.yw-bottom-grid {
		border-top: 0;
	}

	.yw-info-panel {
		border-top: 1px solid var(--yw-line);
	}

	.yw-info-panel + .yw-info-panel {
		border-left: 0;
	}

	.yw-info-feature {
		grid-template-columns: 132px minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.yw-pickup {
		padding: 15px 11px 13px;
	}

	.yw-pickup__heading {
		display: flex;
		align-items: flex-start;
	}

	.yw-pickup__heading .yw-text-link {
		margin-left: auto;
	}

	.yw-section__title-row {
		gap: 8px;
	}

	.yw-section__title-row h2 {
		font-size: 1.16rem;
	}

	.yw-section__title-row p {
		font-size: .78rem;
	}

	.yw-card-grid--4 {
		grid-template-columns: 1fr;
	}

	.yw-info-panel {
		padding: 18px 4px;
	}

	.yw-info-feature {
		grid-template-columns: 112px minmax(0, 1fr);
		gap: 12px;
	}

	.yw-info-feature__image {
		min-height: 164px;
	}
}

@media (max-width: 420px) {
	.yw-pickup__heading {
		flex-wrap: wrap;
	}

	.yw-pickup__heading .yw-text-link {
		margin-left: 0;
	}

	.yw-info-feature {
		grid-template-columns: 94px minmax(0, 1fr);
	}
}