@charset "utf-8";

.chapter-header__ttl .en {
	font-size: clamp(16px, 10vw, 50px);
}

.chapter-header__ttl .ja {
	font-size: clamp(14px, 1vw, 16px);
	padding: 3px;
}


/* ------------------------------------------- */


.Introduction {
	display: flex;
	flex-direction: column;
	gap: 2lh;
	
	& > * {
		margin-block: 0;
	}
}

.Introduction__header {
	
	& > *:first-child {
		margin-block-start: 0;
	}
	
	& > *:last-child {
		margin-block-end: 0;
	}
	
	& .section__ttl {
		display: flex;
		flex-direction: column;
		gap: 0.25lh;
		
		& .en {
			display: block;
			font-weight: 300;
			letter-spacing: 0.05em;
			font-size: clamp(3.75rem, 2.308rem + 6.41vw, 10rem);
			line-height: 1.3;
		}

		& .ja {
			display: block;
			font-size: 60%;
		}
	}
	
	& .section__subttl {
		font-size: clamp(1.875rem, 1.442rem + 1.923vw, 3.75rem);
		font-weight: bold;
		
		&.h-underline::before {
			width: 8ic;
		}
	}
}

/* --- Summaryページ見出しカスタマイズ：最終決定版 --- */

/* 1. 見出し全体のレイアウト（幅を制限して英語を改行させる） */
.Introduction__header .section__subttl {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* 横幅を制限することで、英語が適切な位置で改行されるようにします */
    max-width: 850px; 
}

/* 2. 日本語見出し（メイン） */
.Introduction__header .section__subttl .ja {
    order: 1; /* 日本語を上に */
    font-size: clamp(1.875rem, 1.442rem + 1.923vw, 3.75rem);
    font-weight: bold;
    line-height: 1.3;
    margin: 0;
    margin-bottom: 0.5em; /* 英語との間の余白 */
}

/* 3. 英語見出し（サブ：日本語と同じ黒、サイズを大きく） */
.Introduction__header .section__subttl .en {
    order: 2; /* 英語を下に */
    display: block;
    /* 英語サイズ：日本語に負けないよう大きく（最小2.2rem〜最大4.0rem） */
    font-size: clamp(1.8rem, 1.2rem + 2.5vw, 3.2rem); 
    font-weight: 500;
    margin: 0;
    
    /* 改行と行間の設定 */
    line-height: 1.2;
    letter-spacing: 0.01em;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-transform: none; /* 入力した通りの大文字小文字で表示 */
}

/* 4. アンダーライン（下線）の位置調整 */
.Introduction__header .section__subttl.h-underline::before {
    /* 英語が2行になっても被らないよう、位置を下げます */
    bottom: -35px; 
}

/* スマホ用の設定（画面が狭いときは幅制限を解除） */
@media screen and (max-width: 1023px) {
    .Introduction__header .section__subttl {
        max-width: 100%;
    }
    .Introduction__header .section__subttl .ja {
        margin-bottom: 0.3em;
    }
}

.Introduction__body {
	max-width: 50ic;
}


/* ------------------------------------------- */


.Overview {
	& .section__ttl {
		font-weight: 300;
	}
	
	& .base__body-txt {
		font-size: 1.2rem;
	}
}

@media screen and (min-width: 768px) {
	
	.Overview {
		& .base__body-txt {
			font-size: 1.4rem;
		}
	}
}


/* ------------------------------------------- */



section[id] {
	scroll-margin-top: 120px;
}

.chapter-body {
	scroll-padding-top: 120px;
}