@charset "UTF-8";
/* ============================================================
   デザインページ（design/）
   数値は支給デザイン（1920px）の実測値。
   ・font-size：clamp(最小, px÷19.2 vw, 1920時の値)
   ・縦余白：rem（1440px表示時＝デザイン×0.75）／横方向：%
   ============================================================ */

/* ===== 共通変数 ===== */
.design {
	--c-text: #333;
	--f-serif: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
	--f-en: "Jost", "Josefin Sans", "Noto Sans JP", sans-serif;
	color: var(--c-text);
	font-family: var(--f-serif);
	line-height: 1.6;
	padding-top: 100px; /* 固定ヘッダー分（PC 100px） */
}
.design img { max-width: 100%; height: auto; display: block; }
.design :where(p, h2) { margin: 0; padding: 0; }
.design .pc { display: inline; }
.design .sp { display: none; }

/* ===== 共通見出し・本文 ===== */
.design__title {
	font-family: var(--f-en);
	font-weight: 300;
	font-size: clamp(1.500rem, 2.083vw, 2.500rem);
	letter-spacing: 0;
	line-height: 1.2;
	text-align: center;
	margin-bottom: 1.594rem;
}
.design__lead {
	font-size: clamp(0.875rem, 1.250vw, 1.500rem);
	letter-spacing: .075em;
	line-height: 1.6;
	text-align: center;
}
.design__body {
	font-size: clamp(0.625rem, 0.833vw, 1.000rem);
	letter-spacing: .03em;
	line-height: 2.375;
	text-align: center;
	margin-top: 1.289rem;
}
.design__note {
	width: 70%;
	margin: 5.250rem auto 0;
	font-size: clamp(0.625rem, 0.781vw, 0.938rem);
	line-height: 1.36;
	text-align: center;
}

/* ===== 写真 ===== */
.design-hero__img img,
.design-front__img img,
.design-entrance__img img { width: 100%; }
.design-front__img { position: relative; }
.design-front__hint { display: none; }

/* ===== テキストブロック ===== */
.design-hero__txt { margin: 4.922rem auto 4.983rem; }
.design-front__txt { margin: 4.819rem auto 4.983rem; }
.design-entrance__txt { margin: 3.928rem auto 0; }
.design-entrance { padding-bottom: 6.094rem; }

/* ============================================================
   SP（〜1023px）
   ============================================================ */
@media (max-width: 1023px) {
	.design .pc { display: none; }
	.design .sp { display: inline; }
	.design-hero__txt, .design-front__txt, .design-entrance__txt { width: 88%; margin: 2.5rem auto 3rem; }
	.design-entrance__txt { margin-bottom: 0; }
	.design__title { font-size: 1.75rem; margin-bottom: 1.2rem; }
	.design__lead { font-size: 1.05rem; line-height: 1.75; text-align: left; letter-spacing: .04em; }
	.design__body { font-size: .875rem; line-height: 2; text-align: left; margin-top: .8rem; }
	.design__note { width: 88%; font-size: .6875rem; line-height: 1.7; text-align: left; margin-top: 2rem; }
	.design-entrance { padding-bottom: 3rem; }
	/* SP：横長の外観CGは横スクロールで全体を確認できるようにする */
	.design-front__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.design-front__scroll img { width: 185%; max-width: none; }
	.design-front__hint {
		display: flex; flex-direction: column; align-items: center;
		position: absolute; right: 4%; top: 6%; /* 右上に配置 */
		width: max-content;
		color: #fff;
		font-family: var(--f-en);
		font-size: .75rem;
		letter-spacing: .05em;
		line-height: 1.2;
		text-shadow: 0 0 6px rgba(0,0,0,.6);
		pointer-events: none;
		transition: opacity .4s;
		animation: hscrollHint 1.6s ease-in-out infinite;
	}
	.design-front__hint svg { filter: drop-shadow(0 0 4px rgba(0,0,0,.6)); margin-bottom: .2rem; }
	.design-front__hint.is-hidden { opacity: 0; }
	@keyframes hscrollHint { 0%,100% { transform: translateX(0); } 50% { transform: translateX(10px); } }
}
@media (max-width: 768px) {
	.design { padding-top: 76px; }
}