/* TOP: small screens retain readable content widths and natural section heights. */
.home,
.home #main-content {
	overflow-x: clip;
}

@media (max-width: 1023px) {
	.home #main-content, body { overflow-x:clip; }
	.libre-news__inner { grid-template-columns:100px minmax(0,1fr); gap:14px; padding-inline:18px; }
	.libre-news__row { grid-template-columns:76px 72px minmax(0,1fr) 18px; gap:8px; }
	.libre-news__title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
	.about-world__hero { width:100%; min-width:0; flex:0 0 100%; }
	.about-world__intro, .about-world__body { overflow-wrap:anywhere; }
	.libre-works { overflow:hidden; }
	.works-slider__viewport { overflow-x:auto; overflow-y:hidden; }
	.libre-works__header { padding-inline:clamp(24px,6vw,64px); }
	.libre-blog__header, .libre-contact__content { max-width:calc(100% - 48px); margin-inline:auto; }
}
@media (max-width: 767px) {
	.libre-news__row { grid-template-columns:82px minmax(0,1fr) 18px; }
	.libre-news__title { white-space:normal; }
	.home #main-content { overflow-x:clip; }
	.fv-video__content { justify-content:center; padding-top:40px; padding-bottom:60px; }
	.fv-video__title { font-size:clamp(30px,8.5vw,44px); }
	.fv-video__sub { font-size:12px; letter-spacing:.03em; }
	.about-world__main { min-height:0; }
	.about-world__hero { padding:180px 24px 48px; }
	.about-world__lead { font-size:min(8.9cqi,34px); }
	.about-world__intro { font-size:16px; line-height:1.9; }
	.about-world__body { font-size:14px; line-height:1.9; }
	.about-world__items-inner { gap:24px; padding:24px 24px 40px; }
	.about-world__item { padding:24px 12px; }
	.about-world__closing { padding:48px 24px 64px; }
	.about-world__closing-text { font-size:24px; }
	.service-draw__description { font-size:14px; line-height:1.9; }
	.libre-blog { padding-top:56px; padding-bottom:56px; }
	.libre-contact__description { font-size:14px; line-height:1.9; }
}

/* =========================================================
   TOP WORLD TRANSITIONS
   背景画像を変更せず、セクション端の空気・光だけを重ねて画像境界を馴染ませる。
   全レイヤーはコンテンツより背面、かつレイアウト寸法を増やさない。
========================================================= */
.home .about-world::after,
.home .service-draw::before,
.home .service-draw::after,
.home .libre-works::after,
.home .libre-blog::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	pointer-events: none;
}

/* ABOUT → SERVICE：青みを残した雲海の中を抜ける。 */
.home .about-world::after {
	bottom: 0;
	z-index: 0;
	height: clamp(180px, 16vw, 248px);
	background:
		radial-gradient(ellipse 34% 55% at 15% 88%, rgba(248,252,255,.78), transparent 72%),
		radial-gradient(ellipse 42% 62% at 72% 104%, rgba(239,249,255,.84), transparent 74%),
		linear-gradient(to bottom, transparent 0%, rgba(226,242,252,.18) 34%, rgba(242,249,252,.56) 70%, rgba(232,245,251,.76) 100%);
	filter: blur(12px);
}

.home .service-draw::before {
	top: 0;
	z-index: 2;
	height: clamp(190px, 17vw, 256px);
	background:
		radial-gradient(ellipse 38% 45% at 22% 0%, rgba(250,253,255,.72), transparent 76%),
		radial-gradient(ellipse 46% 52% at 82% -8%, rgba(240,249,253,.68), transparent 78%),
		linear-gradient(to bottom, rgba(231,245,251,.72) 0%, rgba(240,249,252,.42) 38%, rgba(239,248,252,.12) 72%, transparent 100%);
	filter: blur(10px);
}

/* SERVICE → WORKS：雲海から淡い青の霞を通り、王都へ降りる。 */
.home .service-draw::after {
	bottom: 0;
	z-index: 0;
	height: clamp(190px, 17vw, 252px);
	background:
		radial-gradient(ellipse 48% 50% at 18% 104%, rgba(219,235,244,.58), transparent 76%),
		radial-gradient(ellipse 42% 58% at 78% 110%, rgba(238,247,250,.64), transparent 78%),
		linear-gradient(to bottom, transparent 0%, rgba(199,222,235,.14) 30%, rgba(202,221,231,.48) 72%, rgba(190,207,218,.72) 100%);
	filter: blur(14px);
}

.home .libre-works__blend {
	height: clamp(184px, 17vw, 252px);
	background:
		radial-gradient(ellipse 45% 54% at 20% -8%, rgba(225,239,246,.58), transparent 76%),
		radial-gradient(ellipse 40% 52% at 78% 0%, rgba(235,244,247,.48), transparent 78%),
		linear-gradient(to bottom, rgba(190,207,218,.72) 0%, rgba(203,219,228,.42) 38%, rgba(213,225,231,.12) 74%, transparent 100%);
}

/* WORKS → BLOG：屋外の建築ディテールを、白と淡い金の室内光へ溶かす。 */
.home .libre-works::after {
	bottom: 0;
	z-index: 1;
	height: clamp(168px, 15vw, 228px);
	background:
		radial-gradient(ellipse 36% 58% at 18% 110%, rgba(255,244,211,.56), transparent 74%),
		radial-gradient(ellipse 48% 66% at 76% 108%, rgba(255,250,235,.72), transparent 78%),
		linear-gradient(to bottom, transparent 0%, rgba(244,237,216,.16) 30%, rgba(250,244,228,.52) 72%, rgba(248,243,231,.76) 100%);
	filter: blur(10px);
}

.home .libre-blog::before {
	top: 0;
	z-index: 1;
	height: clamp(166px, 15vw, 224px);
	background:
		radial-gradient(ellipse 42% 54% at 28% -5%, rgba(255,249,231,.72), transparent 76%),
		radial-gradient(ellipse 35% 50% at 82% 2%, rgba(247,239,213,.46), transparent 78%),
		linear-gradient(to bottom, rgba(248,243,231,.76) 0%, rgba(252,248,238,.42) 40%, rgba(255,252,244,.10) 76%, transparent 100%);
	filter: blur(9px);
}

/* BLOG → CONTACT：同じ宮殿内を進むよう、建築色を保った短いクロスフェード。 */
.home .libre-blog__blend--bottom {
	height: clamp(128px, 12vw, 184px);
	background:
		radial-gradient(ellipse 46% 58% at 24% 112%, rgba(250,242,218,.34), transparent 78%),
		linear-gradient(to bottom, transparent 0%, rgba(240,240,230,.18) 42%, rgba(222,231,230,.52) 100%);
}

.home .libre-contact__blend {
	height: clamp(126px, 12vw, 180px);
	background:
		radial-gradient(ellipse 40% 50% at 76% -4%, rgba(250,242,218,.28), transparent 76%),
		linear-gradient(to bottom, rgba(222,231,230,.52) 0%, rgba(236,239,230,.24) 42%, transparent 100%);
}

@media (max-width: 1199px) {
	.home .about-world::after { height: clamp(130px, 17vw, 176px); }
	.home .service-draw::before { height: clamp(132px, 18vw, 180px); }
	.home .service-draw::after,
	.home .libre-works__blend { height: clamp(132px, 18vw, 180px); }
	.home .libre-works::after,
	.home .libre-blog::before { height: clamp(120px, 17vw, 168px); }
	.home .libre-blog__blend--bottom,
	.home .libre-contact__blend { height: clamp(104px, 14vw, 144px); }
}

@media (max-width: 767px) {
	.home .about-world::after { height: clamp(92px, 27vw, 124px); filter: blur(8px); }
	.home .service-draw::before { height: clamp(96px, 28vw, 128px); filter: blur(7px); }
	.home .service-draw::after,
	.home .libre-works__blend { height: clamp(92px, 27vw, 124px); }
	.home .service-draw::after { filter: blur(9px); }
	.home .libre-works::after,
	.home .libre-blog::before { height: clamp(84px, 24vw, 112px); filter: blur(7px); }
	.home .libre-blog__blend--bottom,
	.home .libre-contact__blend { height: clamp(72px, 21vw, 96px); }
}

@media (prefers-reduced-motion: reduce) {
	.home .about-world::after,
	.home .service-draw::before,
	.home .service-draw::after,
	.home .libre-works::after,
	.home .libre-blog::before,
	.home .libre-works__blend,
	.home .libre-blog__blend--bottom,
	.home .libre-contact__blend {
		animation: none !important;
		transform: none !important;
	}
}