@charset "UTF-8";
/**********************************************************
* CSS表記
**********************************************************/
/* --black / --font-* は common.css :root。以下は js が読むオープニング用のみ */
:root {
	--opening-illust-anime-duration: 2.25s;
	--opening-illust-settle-ratio: 0.51;
	--ds-sub-color: #008c96;
}

/* インタビューの非表示用 */
.interview_hidden {
	display: none;
}

/*== ぼかしから出現 ==*/
.blur{
	animation-name: blurAnime;
	animation-duration:0.75s;
	animation-fill-mode:forwards;
}
@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.1);
	opacity: 0;
  }
  to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.opening_reveal{
	opacity: 0;
}
.opening_reveal--delay-01 {
	animation-delay: 400ms;
}
.opening_reveal--delay-02 {
	animation-delay: 800ms;
}
.opening_reveal--delay-03 {
	animation-delay: 1800ms;
}

/* オープニング〜FVメインイラスト登場アニメ終了まで背景スクロール禁止（js が html に fv-scroll-lock を付与） */
html.fv-scroll-lock {
	overflow: hidden;
	height: 100%;
}
html.fv-scroll-lock body {
	overflow: hidden;
	touch-action: none;
}

/**********************************************************
* オープニングアニメーション
**********************************************************/
.opening_root {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	min-width: 1200px;
	height: 100vh;
	background-color: #fff;
	z-index: 100;
	opacity: 1;
}
.opening_root.opening_root--fade-out {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}
.opening_background,
.first-view {
	background-image: url(../img/background_mosaic.png);
	background-size: 3400px auto;
	background-position: center top;
	background-repeat: no-repeat;
}
.opening_background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-height: 680px;
	z-index: -1;
}
.opening_background.opening_background--border-out {
	border: 0;
	border-radius: 0;
}
.opening_content{
	width: 100%;
}
.opening_content_title {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: clamp(20px, 7.353vw, 50px);
	width: 100%;
	/* left/top/transform は併用せず padding のみで中央付近→左上へ（対角に近い一本の補間） */
	padding-top: max(28px, calc(50vh - 200px));
	padding-right: max(40px, calc(50vw - 300px));
	padding-bottom: 0;
	padding-left: max(40px, calc(50vw - 300px));
	transition:
		padding 1.45s cubic-bezier(0.33, 1, 0.32, 1),
		gap 1.45s cubic-bezier(0.33, 1, 0.32, 1);
}
.opening_content_title img {
	width: 100%;
}
.opening_title_logo {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px 40px;
	width: min(100% - 40px, 500px);
	transition:
		gap 1.45s cubic-bezier(0.33, 1, 0.32, 1),
		width 0.75s cubic-bezier(0.33, 1, 0.32, 1);
}
.opening_title_logo .kyojo {
	width: 210px;
	transition: width 0.75s cubic-bezier(0.33, 1, 0.32, 1);
}
.opening_title_logo .ds {
	width: 250px;
	transition: width 0.75s cubic-bezier(0.33, 1, 0.32, 1);
}
.opening_title_slogan{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 20px;
	width: 100%;
	transition: gap 1.45s cubic-bezier(0.33, 1, 0.32, 1);
}
.opening_title_slogan_en {
	width: min(100% - 40px, 600px);
	transition: all 1.45s cubic-bezier(0.33, 1, 0.32, 1);
}
.opening_title_slogan_ja {
	width: min(100% - 40px, 340px);
	transition: all 1.45s cubic-bezier(0.33, 1, 0.32, 1);
}

/**********************************************************
* オープニング：タイトルエリアを compact 配置へ（.opening_content_title--move-up）
**********************************************************/
.opening_content_title.opening_content_title--move-up {
	gap: 20px;
	padding: 40px 0 0 50px;
}
.opening_content_title--move-up .opening_title_logo {
	justify-content: flex-start;
	gap: 10px 30px;
	width: 100%;
}
.opening_content_title--move-up .opening_title_logo .kyojo {
	width: 147px;
}
.opening_content_title--move-up .opening_title_logo .ds {
	width: 175px;
}
.opening_content_title--move-up .opening_title_slogan {
	align-items: flex-start;
	gap: 10px;
}
.opening_content_title--move-up .opening_title_slogan_en {
	width: 320px;
}
.opening_content_title--move-up .opening_title_slogan_ja {
	width: 250px;
}

@media (width <= 680px) {
	.opening_root {
		min-width: auto;
	}
	.opening_content_title {
		padding-top: max(20px, calc(50vh - 180px));
		padding-right: max(20px, calc(50vw - 300px));
		padding-left: max(20px, calc(50vw - 300px));
	}
	.opening_content_title.opening_content_title--move-up {
		padding: 20px 20px 0;
	}
	.opening_title_logo {
		flex-direction: column;
		align-items: center;
	}
	.opening_content_title--move-up .opening_title_logo {
		flex-direction: column;
		align-items: flex-start;
	}
	.opening_content_title--move-up .opening_title_slogan_en {
		width: min(100%, 320px);
	}
	.opening_content_title--move-up .opening_title_slogan_ja {
		width: min(100%, 250px);
	}
}
.opening_content_illust {
	position: absolute;
	bottom: -160px;
	left: 50%;
	transform: translateX(-50%) translateY(100vh);
	width: clamp(240px, 66.667vw, 300px);
	aspect-ratio: 300/430;
}
.opening_content_illust.opening_content_illust--fly {
	animation-name: illustAnime;
	animation-duration: var(--opening-illust-anime-duration);
	animation-fill-mode: forwards;
}
/* 下から着弾 → 大きく2回はねて静止（細かい余韻キーは省略）→ 待機後に画面下へ */
@keyframes illustAnime {
	0% {transform: translateX(-50%) translateY(100vh);}
	8% {transform: translateX(-50%) translateY(-32.27%);}
	14% {transform: translateX(-50%) translateY(11%);}
	22% {transform: translateX(-50%) translateY(-3.2%);}
	30% {transform: translateX(-50%) translateY(0);}
	46%,
	51% {transform: translateX(-50%) translateY(0);}
	66% {transform: translateX(-50%) translateY(62vh);}
	100% {transform: translateX(-50%) translateY(100vh);}
}

/**********************************************************
* ファーストビュー
**********************************************************/
/* オープニング中のチラ見え防止（load 時に body へ付与、シーケンス開始時に除去。html 属性は不要） */
body.fv-preseq .fv_main__title,
body.fv-preseq .fv_speech_bubbles .fv_speech_bubbles__link {
	opacity: 0;
	pointer-events: none;
}
/* AOS 代替：fade-down 相当（.is-in 付与で表示）。0.55s は js の FV_FADE_MS(550) と同期 */
.fv_main__title.fv_fade_down:not(.is-in),
.fv_speech_bubbles .fv_speech_bubbles__link.fv_fade_down:not(.is-in) {
	opacity: 0;
	transform: translateY(-26px);
	transition: opacity 0.55s ease-out, transform 0.55s ease-out;
	pointer-events: none;
}
.fv_main__title.fv_fade_down.is-in,
.fv_speech_bubbles .fv_speech_bubbles__link.fv_fade_down.is-in {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.55s ease-out, transform 0.55s ease-out;
	pointer-events: auto;
}
.fv_main__illust.fv_main__illust--wait {
	opacity: 0;
	pointer-events: none;
}
/* illustAnime 着弾〜静止フェーズと同じ translateY%・時間は var で illustAnime と一元管理 */
.fv_main__illust.fv_main__illust--pop {
	animation: fvMainIllustPop
		calc(var(--opening-illust-anime-duration) * var(--opening-illust-settle-ratio))
		forwards;
}
@keyframes fvMainIllustPop {
	0% {
		opacity: 0;
		transform: translateY(100vh);
	}
	/* 以下の%は illustAnime 着弾〜静止と同一時刻: (キー% / 51) * 100 */
	15.6863% {
		opacity: 1;
		transform: translateY(-32.27%);
	}
	27.451% {
		opacity: 1;
		transform: translateY(11%);
	}
	43.1373% {
		opacity: 1;
		transform: translateY(-3.2%);
	}
	58.8235% {
		opacity: 1;
		transform: translateY(0);
	}
	90.1961%,
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
.first-view {
	width: 100%;
}
.fv_contents {
	position: relative;
	width: 100%;

	height: 100%;
}
.fv_cont_header {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	padding: 40px 0 0 50px;
}
.fv_logo {	
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: flex-start;
	gap: 10px 30px;
	flex-wrap: wrap;
	width: 100%;
}
.fv_logo .kyojo {
	width: 147px;
}
.fv_logo .ds {
	width: 175px;
}
.fv_slogan {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}
.fv_slogan_en {
	width: 320px;
}
.fv_slogan_ja {
	width: 250px;
}
.fv_main {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	position: relative;
	margin-top: -53px;
}
.fv_main__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
}
.fv_main__title-logo {
	width: clamp(224px, 62.2222vw, 280px);
	margin-bottom: -16px;
	z-index: 2;
	}
.fv_main__title-heading {
	width: min(100% - 40px, 720px);
	font-size: clamp(2.4rem, 6.6667vw, 3.6rem);
	font-weight: 700;
	line-height: 1.3333333333333333;
	text-align: center;
	letter-spacing: 0.075em;
	border-radius: 9999px;
	background-color: #fff;
	padding: 38px 35px;
	word-break: keep-all;
	overflow-wrap: break-word;
	z-index: 1;
}
.fv_main__illust {
	position: relative;
	width: clamp(240px, 66.6667vw, 300px);
	margin: -18px 0 calc(clamp(70px, 19.44444vw, 80px) * -1);
	z-index: 3;
}
.fv_main__illust img {
	width: 100%;
}
.fv_main__illust::before {
	content: '';
	position: absolute;
	top: 90px;
	left: -100px;
	width: 110px;
	aspect-ratio: 3.1976744186;
	transform: rotate(-15deg);
	background: url(../img/Illust_fv_msg.svg) no-repeat center center / cover;
}
.fv_speech_bubbles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.fv_speech_bubbles__inner {
	position: relative;
	width: 1200px;
	margin: 0 auto;
	height: 100%;
}
/* 親の fv_fade_down は .fv_speech_bubbles__link の transform、浮遊は img の transform で分離 */
@keyframes fv_speech_bubbles_float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-11px);
	}
}
.fv_speech_bubbles__link {
	position: absolute;
	z-index: 2;
	width: clamp(200px, 55.5556vw, 250px);
	transition: transform 0.2s ease-in-out;
}
/* ホバー可能な入力（マウス等）では :hover、タッチ主体では :active で同じ拡大 */
@media (hover: hover) {
	.fv_speech_bubbles__link:hover {
		transform: scale(1.2);
	}
	.fv_speech_bubbles__link.fv_fade_down.is-in:hover {
		transform: translateY(0) scale(1.2);
	}
	/* 狭幅 --03 は中央寄せで translateX(-50%) 必須。hover で scale のみにすると位置がずれホバーが外れる */
	@media (width <= 680px) {
		.fv_speech_bubbles__link--03:hover {
			transform: translateX(-50%) scale(1.2);
		}
		.fv_speech_bubbles__link--03.fv_fade_down.is-in:hover {
			transform: translateX(-50%) translateY(0) scale(1.2);
		}
	}
}
@media (hover: none) {
	.fv_speech_bubbles__link:active {
		transform: scale(1.2);
	}
	.fv_speech_bubbles__link.fv_fade_down.is-in:active {
		transform: translateY(0) scale(1.2);
	}
	@media (width <= 680px) {
		.fv_speech_bubbles__link--03:active {
			transform: translateX(-50%) scale(1.2);
		}
		.fv_speech_bubbles__link--03.fv_fade_down.is-in:active {
			transform: translateX(-50%) translateY(0) scale(1.2);
		}
	}
}
.fv_speech_bubbles__link img {
	width: 100%;
	animation-name: fv_speech_bubbles_float;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	will-change: transform;
}
.fv_speech_bubbles__link--01 img {
	animation-duration: 5.6s;
	animation-delay: 0s;
}
.fv_speech_bubbles__link--02 img {
	animation-duration: 7.2s;
	animation-delay: -2.15s;
}
.fv_speech_bubbles__link--03 img {
	animation-duration: 6.1s;
	animation-delay: -4.4s;
}
.fv_speech_bubbles__link--04 img {
	animation-duration: 6.8s;
	animation-delay: -1.05s;
}
.fv_speech_bubbles__link--05 img {
	animation-duration: 5.9s;
	animation-delay: -3.65s;
}
@media (prefers-reduced-motion: reduce) {
	.fv_speech_bubbles__link img {
		animation: none;
		will-change: auto;
	}
}
.fv_speech_bubbles__link--01 {
	top: 339px;
	left: 36px;
}
.fv_speech_bubbles__link--02 {
	top: 529px;
	left: 187px;
}
.fv_speech_bubbles__link--03 {
	top: 373px;
	left: 706px;
}
.fv_speech_bubbles__link--04 {
	top: 313px;
	left: 952px;
}
.fv_speech_bubbles__link--05 {
	top: 538px;
	left: 872px;
}

@media (width <= 680px) {
	.fv_cont_header {
		padding: 20px 20px 0;
	}
	.fv_logo {	
		flex-direction: column;
		align-items: flex-start;
	}
	.fv_main {
		margin-top: 36px;
	}
	.fv_main__illust::before {
		top: 50px;
		left: auto;
		right: -44px;
		transform: rotate(15deg);
	}
	.fv_speech_bubbles {
		position: static;
	}
	.fv_speech_bubbles__inner {
		position: relative;
		width: min(100%, 500px);
		height: 480px;
	}
	.fv_speech_bubbles__link--01 {
		top: 60px;
		left: -10px;
	}
	.fv_speech_bubbles__link--02 {
		top: 105px;
		left: auto;
		right: -10px;
	}
	.fv_speech_bubbles__link--03 {
		top: 210px;
		left: 50%;
		transform: translateX(-50%);
	}
	.fv_speech_bubbles__link--04 {
		top: 320px;
		left: 0px;
	}
	.fv_speech_bubbles__link--05 {
		top: 360px;
		left: auto;
		right: 0;
	}
}

/**********************************************************
* データサイエンス学部紹介
**********************************************************/
.ds_section {
	position: relative;
	--ds-main-width: min(100% - 40px, 660px);
	--ds-rail-icon: 50px;
	--ds-rail-label-strip: 20px;
	--ds-rail-label-gap: 10px;
	--ds-rail-label-w: 180px;
	--ds-rail-track-w: calc(
		var(--ds-rail-icon) + var(--ds-rail-label-gap) + var(--ds-rail-label-w)
	);
	--ds-rail-view-collapsed-w: calc(
		var(--ds-rail-icon) + var(--ds-rail-label-gap) + var(--ds-rail-label-strip)
	);
	--ds-rail-gap: 20px;
	padding: clamp(60px, 11.1111vw, 120px) 0 0;
}
.ds_section_main {
	width: 100%;
}
.ds_section_main_contents {
	width: 100%;
}
.ds_article_block {
	width: 100%;
	padding: clamp(80px, 22.2222vw, 100px) 0 clamp(70px, 19.4444vw, 100px);
}
.ds_article_block:nth-child(2n) {
	background-color: #f0faff;
}
.ds_article_block.pink {
	--ds-article-color: #dc78ff;
}
.ds_article_block.blue {
	--ds-article-color: #37d7b4;
}
.ds_article_block_inner {
	width: var(--ds-main-width);
	margin: 0 auto;
}
.ds_article_heading {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 10px 20px;
	width: 100%;
	font-size: clamp(2.4rem, 6.6667vw, 3.2rem);
	font-weight: 700;
	color: var(--ds-article-color);
	line-height: 1.3333;
	letter-spacing: 0.075em;
	text-align: left;
	border-top: 4px solid var(--ds-article-color);
	padding-top: 36px;
	margin-bottom: 36px;
}
.ds_article_heading::before {
	content: '';
	flex-shrink: 0;
	width: clamp(64px, 17.7778vw, 80px);
	aspect-ratio: 1;
}
#ds-q01 .ds_article_heading::before {
	background: url(../img/number_icon_01.svg) no-repeat center center / cover;
}
#ds-q02 .ds_article_heading::before {
	background: url(../img/number_icon_02.svg) no-repeat center center / cover;
}
#ds-q03 .ds_article_heading::before {
	background: url(../img/number_icon_03.svg) no-repeat center center / cover;
}
#ds-q04 .ds_article_heading::before {
	background: url(../img/number_icon_04.svg) no-repeat center center / cover;
}
#ds-q05 .ds_article_heading::before {
	background: url(../img/number_icon_05.svg) no-repeat center center / cover;
}
.ds_article_answer_text {
	position: relative;
	font-size: clamp(2.2rem, 6.1111vw, 2.6rem);
	font-weight: 700;
	line-height: 1.45454545;
	letter-spacing: 0.05em;
	text-align: center;
	padding: clamp(36px, 10vw, 50px) 45px;
	word-break: keep-all;
	overflow-wrap: break-word;
	border: 3px solid var(--black);
	border-radius: 9999px;
	background-color: #fff;
}
.ds_article_answer_text::after {
	content: '';
	display: block;
	width: clamp(27px, 7.5vw, 54px);
	aspect-ratio: 1;
	position: absolute;
	bottom: 0;
	left: 17%;
	transform: translateY(75%);
	background: url(../img/speechBubble.svg) no-repeat center center / cover;
	word-break: keep-all;
	overflow-wrap: break-word;
}
.ds_article_answer_text span {
	display: inline-block;
}
.ds_article_answer_illust {
	position: relative;
	z-index: 2;
	width: clamp(160px, 44.4444vw, 200px);
	aspect-ratio: 200/300;
	margin: 0 auto;
	margin-top: -30px;
}
.ds_article_answer_illust img {
	width: 100%;
}
@media (width <= 680px) {
	.ds_article_heading {
		flex-direction: column;
		text-align: center;
		padding-top: 20px;
		margin-bottom: 36px;
	}
	.ds_article_answer_text::after {
		left: 37.5%;
	}
	.ds_article_answer_illust {
		margin-top: 30px;
	}
}
.ds_article_lead {
	margin-top: clamp(30px, 8.3333vw, 55px);
}
.ds_article_lead_heading {
	font-size: clamp(2rem, 5.5556vw, 2.2rem);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.025em;
	color: var(--ds-article-color);
	word-break: keep-all;
	overflow-wrap: break-word;
	margin-bottom: 20px;
}
.ds_article_lead_text {
	text-align: justify;
	letter-spacing: 0.025em;
	margin-bottom: 40px;
}
.ds_article_lead_text:last-of-type {
	margin-bottom: 0;
}

/**********************************************************
* #ds-q01 モノ＆コト（アイコン CSS Grid＋.detail アコーディオン）
**********************************************************/
.ds_article_icons {
	width: 100%;
	margin-top: 70px;
}
.ds_article_icons__title {
	margin-bottom: clamp(30px, 8.3333vw, 50px);
	padding: 21px 0;
	border-top: 1px solid var(--black);
	border-bottom: 1px solid var(--black);
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.55556;
	letter-spacing: 0.15em;
	text-align: center;
	color: var(--ds-sub-color);
	word-break: keep-all;
	overflow-wrap: break-word;
}
.ds_article_icons__title span {
	display: inline-block;
}
.ds_article_icons__list {
	--ds-icons-gap: clamp(32px, 7.3529412vw, 50px);
	display: grid;
	grid-template-columns: repeat(
		auto-fit,
		minmax(min(
			100%,max(144px,calc((100% - 2 * var(--ds-icons-gap)) / 3))
			),1fr)
		);
	gap: var(--ds-icons-gap);
	justify-items: stretch;
}
.ds_article_icons__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	min-width: 0;
}
.ds_article_icons__btn {
	display: block;
	width: 100%;
	max-width: 100%;
	text-align: center;
}
.ds_article_icons__btn:focus {
	outline: none;
}
.ds_article_icons__btn:focus-visible {
	outline: 2px solid var(--ds-sub-color);
	outline-offset: 4px;
}
.ds_article_icons__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}
.ds_article_icons__img {
	width: clamp(144px, 40vw, 180px);
	min-width: 144px;
	max-width: 180px;
	height: auto;
}
.ds_article_icons__label {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 2;
	letter-spacing: 0.1em;
	color: var(--ds-sub-color);
}
.ds_article_icons__more {
	display: inline-block;
	padding: 2px 10px;
	border: 1px solid currentColor;
	border-radius: 999px;
	background-color: transparent;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.08em;
	color: var(--ds-sub-color);
	transition: background-color 0.2s ease, color 0.2s ease;
}
@media (hover: hover) {
	.ds_article_icons__more:hover {
		background-color: var(--ds-sub-color);
		color: #fff;
	}
}
@media (hover: none) {
	.ds_article_icons__more:active {
		background-color: var(--ds-sub-color);
		color: #fff;
	}
}
.ds_article_icons__more:focus {
	outline: none;
}
.ds_article_icons__more:focus-visible {
	outline: 2px solid var(--ds-sub-color);
	outline-offset: 2px;
}
.ds_article_icons__item.is_icons_open .ds_article_icons__more {
	display: none;
}
.ds_article_icons__item.is_icons_closing .ds_article_icons__more {
	display: none;
}
.ds_article_icons__detail {
	position: relative;
	width: 100%;
	margin-top: clamp(16px, 3.3333vw, 24px);
	padding: clamp(14px, 3.8889vw, 20px);
	border-radius: 10px;
	background-color: var(--ds-sub-color);
	color: #fff;
	opacity: 0;
	pointer-events: none;
	transform-origin: top center;
	transform: translateY(-8px)
		scale(
			var(--ds-icons-morph-scale-x, 0.35),
			var(--ds-icons-morph-scale-y, 0.3)
		);
	transition: transform 0.28s ease, opacity 0.2s ease;
}
.ds_article_icons__detail::before {
	--arrow-size: clamp(16px, 4.4444vw, 20px);
	content: '';
	position: absolute;
	top: calc(var(--arrow-size) * -0.7 + 1px);
	left: 50%;
	transform: translateX(-50%);
	width: var(--arrow-size);
	aspect-ratio: 1.42857143;
	background-color: var(--ds-sub-color);
	clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
.ds_article_icons__detail_title {
	margin-bottom: 0.65em;
	font-size: clamp(1.2rem, 3.3333vw, 1.4rem);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0.025em;
	text-align: center;
}
.ds_article_icons__detail_text {
	font-size: clamp(1.2rem, 3.3333vw, 1.4rem);
	line-height: 1.7;
	letter-spacing: 0.025em;
	text-align: justify;
}
.ds_article_icons__item.is_icons_open .ds_article_icons__detail {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.ds_article_icons__detail {
		transition: none;
	}
}

/**********************************************************
*  インタビュー（JS アコーディオン） 
**********************************************************/
.ds_article_interview {
	margin-top: clamp(40px, 8.3333vw, 56px);
}
.ds_article_interview__eyebrow {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.2rem;
	margin-bottom: 3rem;
}
.ds_article_interview__eyebrow_en {
	width: 113px;
}
.ds_article_interview__eyebrow_en img {
	width: 100%;
}
.ds_article_interview__eyebrow_ja {
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1em;
}
.ds_article_interview__trigger {
	text-align: left;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 27px 20px;
	width: 100%;
	padding: 22px 0;
	border-top: 1px solid var(--black);
	border-bottom: 1px solid var(--black);
}
.ds_article_interview__trigger:focus {
	outline: none;
}
.ds_article_interview__trigger:focus-visible {
	/* タブ移動時フォーカス設定 */
	outline: 2px solid var(--ds-sub-color);
	outline-offset: 4px;
}
.ds_article_interview__thumb {
	flex-shrink: 0;
	width: 80px;
}
.ds_article_interview__thumb img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: top;
}
.ds_article_interview__trigger_text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}
.ds_article_interview__headline {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.3333;
	letter-spacing: 0.05em;
	color: var(--ds-sub-color);
	word-break: keep-all;
	overflow-wrap: break-word;
}
.ds_article_interview__meta {
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.025em;
}
@media (width <= 680px) {
	.ds_article_interview__trigger {
		text-align: center;
		flex-direction: column;
		padding: 30px 0 20px;
	}
	.ds_article_interview__thumb {
		width: 210px;
	}
	.ds_article_interview__trigger_text {
		gap: 1.8rem;
	}
	.ds_article_interview__headline {
		font-size: 2.4rem;
	}
}
.ds_article_interview__switch {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(44px, 12vw, 50px);
	height: clamp(44px, 12vw, 50px);
}
.ds_article_interview__switch img {
	width: 100%;
	height: auto;
	transition: transform 0.35s cubic-bezier(0.33, 1, 0.32, 1);
}
.ds_article_interview__item.is_interview_open .ds_article_interview__switch img {
	transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
	.ds_article_interview__switch img {
		transition-duration: 0.01ms;
	}
}
.ds_article_interview__panel_inner {
	padding: 40px 0 50px;
	border-bottom: 1px solid var(--black);
}
.ds_article_interview__content_title {
	margin-bottom: 32px;
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.05em;
	text-align: center;
	color: var(--ds-sub-color);
	word-break: keep-all;
	overflow-wrap: break-word;
}
.ds_article_interview__body {
	display: grid;
	grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
	gap: 36px;
	align-items: start;
}
.ds_article_interview__figure {
	min-width: 0;
}
.ds_article_interview__figure img {
	width: 100%;
	height: auto;
}
.ds_article_interview__text_col {
	display: flex;
	flex-direction: column;
	gap: 3.6rem;
	min-width: 0;
}
.ds_article_interview__subhead {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.5556;
	letter-spacing: 0.025em;
	margin-bottom: 2rem;
}
.ds_article_interview__para {
	letter-spacing: 0.025em;
	color: var(--black);
	text-align: justify;
}
@media (width <= 680px) {
	.ds_article_interview__body {
		grid-template-columns: 1fr;
	}
	.ds_article_interview__figure {
		display: none;
	}
	.ds_article_interview__content_title  {
		display: none;
	}
}
/**********************************************************
* Q5：カードグリッド（#ds-q05）
* flex-wrap + 行内でカード高さを揃える2カラムグリッド
**********************************************************/
/* ---------- #ds-q05：イントロ＋カードグリッド ---------- */
.ds_article_block.orange {
	--ds-article-color: #f59619;
	background: url(../img/column05_back.png) repeat;
	padding: 100px 0 clamp(100px, 22.0588vw, 150px);
}
.ds_article_block.orange .ds_article_block_inner {
	width: min(100% - 60px, 800px);
	margin: 0 auto;
}
.ds_article_block.orange .ds_article_heading {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	line-height: 1;
	letter-spacing: 0;
	text-align: left;
	border-top: none;
	padding-top: 0	;
	margin-bottom: 0;
}
.ds_article_block.orange .ds_article_heading img {
	flex: 1 1 auto;
	min-width: 0;
	width: min(100%, 320px);
	max-width: 100%;
	height: auto;
}
.ds_q05_intro {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 30px;
	width: min(100%, 600px);
	padding-bottom: 50px;
	margin: 0 auto;
}
.ds_q05_intro__text {
	flex: 1 1 70%;
	width: 70%;
}
.ds_q05_intro__lead {
	margin-bottom: 1rem;
	letter-spacing: 0.05em;
	text-align: justify;
	color: var(--black);
}
a.ds_q05_intro__link {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--ds-article-color);
}
a.ds_q05_intro__link::before {
	content: '';
	display: inline-block;
	flex-shrink: 0;
	width: 40px;
	aspect-ratio: 40 / 6;
	overflow: hidden;
	background-image: url(../img/link_arrow.svg);
	background-repeat: no-repeat;
	background-position: 0 50%;
	background-size: 40px auto;
}
@media (prefers-reduced-motion: no-preference) {
	a.ds_q05_intro__link:hover::before,
	a.ds_q05_intro__link:focus-visible::before {
		animation: ds_q05_link_arrow_slide 0.55s cubic-bezier(0.33, 1, 0.32, 1) both;
	}
}
@keyframes ds_q05_link_arrow_slide {
	0% {
		background-position: 0 50%;
	}
	42% {
		background-position: 48px 50%;
	}
	43% {
		background-position: -48px 50%;
	}
	100% {
		background-position: 0 50%;
	}
}
.ds_q05_intro__illust {
	position: absolute;
	bottom: 30px;
	right: 0;
	flex: 0 1 200px;
	width: 200px;
}
.ds_q05_intro__illust img {
	width: 100%;
	height: auto;
}
@media (width <= 550px) {
	.ds_article_block.orange {
		padding-top: 30px;
	}
	.ds_q05_intro {
		padding-bottom: 270px;
		margin: 0 auto -155px;
	}
	.ds_q05_intro__text {
		flex: 1 1 70%;
		width: 70%;
	}
	/* ネガティブマージンでカードと重なるとき、イラストよりカードを手前に */
	.ds_q05_intro__illust {
		z-index: 0;
	}
	.ds_masonry {
		position: relative;
		z-index: 1;
	}
}
@media (width <= 420px) {
	.ds_q05_intro {
		padding-bottom: 325px;
		margin: 0 auto -155px;
	}
	.ds_q05_intro__text {
		flex: 1 1 100%;
		width: 100%;
	}
}
.ds_masonry {
	--ds-masonry-gap: 30px;
	width: 100%;
}
@media (width <= 680px) {
	.ds_masonry {
		--ds-masonry-gap: 20px;
	}
}
.ds_masonry {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--ds-masonry-gap);
}
.ds_masonry .ds_masonry__item {
	display: flex;
	width: 100%;
	min-width: 0;
}
@media (width > 680px) {
	.ds_masonry .ds_masonry__item {
		width: calc((100% - var(--ds-masonry-gap)) / 2);
	}
}
.ds_masonry_card {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	min-height: 100%;
	padding: clamp(30px, 8.3333vw, 40px);
	border: 2px solid var(--ds-article-color);
	border-radius: clamp(20px, 5.5556vw, 27px);
	background-color: #fff;
}
.ds_masonry_card__title {
	font-size: clamp(1.8rem, 4.5833vw, 2rem);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.025em;
	color: var(--ds-article-color);
	margin-bottom: clamp(1.2rem, 6.6667vw, 1.8rem);
	word-break: keep-all;
	overflow-wrap: break-word;
}
.ds_masonry_card__text {
	text-align: justify;
	letter-spacing: 0.025em;
}
.ds_masonry_card__text + .ds_masonry_card__media {
	margin-top: 1.25rem;
}
.ds_masonry .ds_masonry_card__text + .ds_masonry_card__media {
	margin-top: auto;
	padding-top: 1.25rem;
}
.ds_masonry_card__media {
	width: 100%;
}
.ds_masonry_card__media img {
	width: 100%;
	height: auto;
}
/**********************************************************
* 以下　ページ内ナビゲーション
* 680px以上: 右端固定レール
* 680px以下: ハンバーガー＋全画面メニュー
**********************************************************/
/* ページ内ナビ（width > 680px：右端レール／FV通過後〜ds_section末尾手前で .is-visible） */
.ds_inpage_nav {
	position: fixed;
	right: 0;
	top: 50%;
	z-index: 50;
	width: auto;
	pointer-events: none;
}
@media (width > 680px) {
	.ds_inpage_nav {
		transform: translateY(-50%) translateX(calc(100% + 8px));
		transition: transform 0.48s cubic-bezier(0.33, 1, 0.32, 1);
	}
	.ds_inpage_nav.is-visible {
		transform: translateY(-50%) translateX(0);
	}
	.ds_inpage_nav:not(.is-visible) .ds_inpage_nav__list {
		pointer-events: none;
	}
	.ds_inpage_nav.is-visible .ds_inpage_nav__list {
		pointer-events: auto;
	}
}
.ds_inpage_nav__list {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--ds-rail-gap);
}
.ds_inpage_nav__link {
	display: inline-flex;
	flex-direction: row;
	align-items: stretch;
	width: var(--ds-rail-view-collapsed-w);
	overflow: hidden;
	border-radius: 4px 0 0 4px;
	vertical-align: top;
	transition: width 0.38s cubic-bezier(0.33, 1, 0.32, 1);
}
.ds_inpage_nav__label-track {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	flex: 0 0 var(--ds-rail-label-strip);
	width: var(--ds-rail-label-strip);
	min-width: 0;
	overflow: hidden;
	transition:
		flex-basis 0.38s cubic-bezier(0.33, 1, 0.32, 1),
		width 0.38s cubic-bezier(0.33, 1, 0.32, 1);
}
.ds_inpage_nav__link--01 {
	--ds-rail-accent: #dc78ff;
}
.ds_inpage_nav__link--02 {
	--ds-rail-accent: #37d7b4;
}
.ds_inpage_nav__link--03 {
	--ds-rail-accent: #dc78ff;
}
.ds_inpage_nav__link--04 {
	--ds-rail-accent: #37d7b4;
}
.ds_inpage_nav__link--05 {
	--ds-rail-accent: #f59619;
}
.ds_inpage_nav__icon {
	flex: 0 0 var(--ds-rail-icon);
	width: var(--ds-rail-icon);
	min-width: var(--ds-rail-icon);
	min-height: var(--ds-rail-icon);
	margin-right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}
.ds_inpage_nav__icon img {
	width: var(--ds-rail-icon);
	height: auto;
	max-height: 100%;
	object-fit: contain;
}
/* ポータル幅 20px→180px。角丸はシェルでクリップ */
.ds_inpage_nav__label-clip {
	flex: 0 0 var(--ds-rail-label-strip);
	width: var(--ds-rail-label-strip);
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	border-radius: 10px 0 0 10px;
	display: flex;
	justify-content: flex-end;
	align-items: stretch;
	align-self: stretch;
	transition:
		flex-basis 0.38s cubic-bezier(0.33, 1, 0.32, 1),
		width 0.38s cubic-bezier(0.33, 1, 0.32, 1);
}
.ds_inpage_nav__label {
	flex: 0 0 var(--ds-rail-label-w);
	width: var(--ds-rail-label-w);
	max-width: var(--ds-rail-label-w);
	display: flex;
	align-items: center;
	font-family: var(--font-ja-sans);
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.15;
	color: transparent;
	background: var(--ds-rail-accent);
	padding: 10px var(--ds-rail-label-strip) 10px 14px;
	overflow: hidden;
	white-space: nowrap;
	transition:
		padding 0.38s cubic-bezier(0.33, 1, 0.32, 1),
		color 0.2s ease;
}
/* ページ内ナビ（右端レール）のホバー展開はデスクトップ幅のみ（680px 以下ドロワーでは幅 100% を維持） */
@media (hover: hover) and (pointer: fine) and (width > 680px) {
	.ds_inpage_nav__link:hover,
	.ds_inpage_nav__link:focus-visible {
		width: var(--ds-rail-track-w);
	}
	.ds_inpage_nav__link:hover .ds_inpage_nav__label-track,
	.ds_inpage_nav__link:focus-visible .ds_inpage_nav__label-track {
		flex: 0 0 var(--ds-rail-label-w);
		width: var(--ds-rail-label-w);
	}
	.ds_inpage_nav__link:hover .ds_inpage_nav__label-clip,
	.ds_inpage_nav__link:focus-visible .ds_inpage_nav__label-clip {
		flex: 0 0 var(--ds-rail-label-w);
		width: var(--ds-rail-label-w);
	}
	.ds_inpage_nav__link:hover .ds_inpage_nav__label,
	.ds_inpage_nav__link:focus-visible .ds_inpage_nav__label {
		color: #fff;
		padding: 10px 12px 10px 14px;
	}
}
.ds_inpage_nav__toggle {
	display: none;
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 210;
	width: 48px;
	height: 48px;
	border: 3px solid var(--black);
	border-radius: 4px;
	background: #fff;
	align-items: center;
	justify-content: center;
}
.ds_inpage_nav__toggle_lines {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 22px;
	height: 19px;
}
.ds_inpage_nav__toggle_bar {
	display: block;
	height: 3px;
	width: 100%;
	background: var(--black);
	border-radius: 999px;
	transition: transform 0.25s ease, opacity 0.2s ease;
}
/* 3px×3本＋gap5×2 → 隣接する行の中心距離は8px */
body.is_inpage_nav_open .ds_inpage_nav__toggle_bar:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}
body.is_inpage_nav_open .ds_inpage_nav__toggle_bar:nth-child(2) {
	opacity: 0;
}
body.is_inpage_nav_open .ds_inpage_nav__toggle_bar:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}
.ds_inpage_nav__backdrop {
	display: none;
	pointer-events: none;
}
/* ハンバーガー全画面メニュー内フッター（width > 680px では非表示） */
.ds_inpage_nav__drawer_footer {
	display: none;
}
@media (width <= 680px) {
	body.is_inpage_nav_open {
		overflow: hidden;
		touch-action: none;
	}
	.ds_inpage_nav {
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		z-index: 205;
		/* 上部を詰めつつハンバーガーと干渉しにくい余白（元 56px+env よりやや小さく） */
		padding: calc(52px + env(safe-area-inset-top, 0px)) 0
			calc(8px + env(safe-area-inset-bottom, 0px));
		margin: 0;
		background: #fff;
		overflow-y: auto;
		overscroll-behavior: contain;
		pointer-events: none;
		transform: translateX(100%);
		transition: transform 0.3s cubic-bezier(0.33, 1, 0.32, 1);
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
	body.is_inpage_nav_open .ds_inpage_nav {
		transform: translateX(0);
		pointer-events: auto;
	}
	.ds_inpage_nav__list {
		align-items: stretch;
		width: 100%;
		max-width: none;
		gap: 0;
		flex: 1 1 auto;
		max-height: 66vh;
		max-height: 66dvh;
		min-height: 0;
		overflow-y: auto;
	}
	.ds_inpage_nav__item {
		flex: 1 0 auto;
		display: flex;
		flex-direction: column;
		min-height: 0;
	}
	/* 全幅カラー帯・白文字（360px 幅想定のモバイルメニュー） */
	.ds_inpage_nav__link {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex: 1 1 auto;
		min-height: 0;
		gap: 0;
		max-width: none;
		width: 100%;
		overflow: visible;
		border-radius: 0;
		padding: clamp(14px, 3.88889vw, 20px) clamp(14px, 4.2vw, 20px);
		background: var(--ds-rail-accent);
		color: #fff;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}
	.ds_inpage_nav__link:active {
		opacity: 0.92;
		transform: scale(0.99);
	}
	.ds_inpage_nav__link:focus-visible {
		outline: 2px solid #fff;
		outline-offset: -4px;
	}
	.ds_inpage_nav__label-track {
		display: contents;
		width: auto;
		flex: unset;
		overflow: visible;
		transition: none;
	}
	.ds_inpage_nav__label-clip {
		display: contents;
		width: auto;
		flex: unset;
		overflow: visible;
		border-radius: 0;
		transition: none;
	}
	.ds_inpage_nav__icon {
		flex: 0 0 50px;
		width: 50px;
		aspect-ratio: 1;
		margin-right: 8px;
	}
	.ds_inpage_nav__icon img {
		width: 100%;
	}
	.ds_inpage_nav__label {
		grid-column: auto;
		justify-self: auto;
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		max-width: none;
		padding: 0;
		white-space: normal;
		background: transparent;
		color: #fff;
		font-size: 1.8rem;
		font-weight: 700;
		line-height: 1.12;
		border-radius: 0;
		transition: none;
	}
	.ds_inpage_nav__drawer_footer {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		gap: 18px;
		flex: 1 1 auto;
		margin-top: 0;
		padding: 5px 0 30px;
		width: 100%;
		max-width: none;
	}
	.ds_inpage_nav__drawer_logo {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: center;
		gap: 12px 20px;
		line-height: 0;
		width: 100%;
		max-width: 340px;
	}
	.ds_inpage_nav__drawer_logo .kyojo {
		width: 210px;
		height: auto;
	}
	.ds_inpage_nav__drawer_logo .ds {
		width: 180px;
		height: auto;
	}
	.ds_inpage_nav__drawer_footer .sns-wrap {
		gap: 0;
	}
	.ds_inpage_nav__drawer_footer .sns img {
		width: 42px;
		aspect-ratio: 1;
	}
	.ds_inpage_nav__toggle {
		display: flex;
		top: max(20px, env(safe-area-inset-top, 0px));
		right: max(20px, env(safe-area-inset-right, 0px));
	}
	.ds_inpage_nav__backdrop {
		display: none !important;
		pointer-events: none !important;
	}
}
@media (prefers-reduced-motion: reduce) {
	.ds_inpage_nav {
		transition: none;
	}
	.ds_inpage_nav__link,
	.ds_inpage_nav__label-track,
	.ds_inpage_nav__label-clip,
	.ds_inpage_nav__label {
		transition: none;
	}
	.ds_inpage_nav__link:active {
		transform: none;
	}
	.ds_inpage_nav__toggle_bar {
		transition: none;
	}
}


/**********************************************************
* 以下　京女共通フッターCSS
**********************************************************/
/*	DS Slogan Footer	*/
.ds_slogan_footer {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	width: 100%;
	height: 200px;
	background: url(../img/background_mosaic_short.png) no-repeat center center / cover;
}
.ds_slogan_footer::before {
	content: '';
	position: absolute;
	z-index: 2;
	top: -40%;
	left: 50%;
	margin-left: -432px;
	width: clamp(136px, 37.7778vw, 170px);
	aspect-ratio: 170 / 164;
	background: url(../img/Illust_footer01.svg) no-repeat center center / cover;
}
.ds_slogan_footer::after {
	content: '';
	position: absolute;
	z-index: 2;
	bottom: -20%;
	right: 50%;
	margin-right: -432px;
	width: clamp(136px, 37.7778vw, 170px);
	aspect-ratio: 170 / 142;
	background: url(../img/Illust_footer02.svg) no-repeat center center / cover;
}
@media (width <= 680px) {
	.ds_slogan_footer {
		height: 360px;
	}
	.ds_slogan_footer::before {
		top: -10%;
		left: 10px;
		margin-left: 0;
	}
	.ds_slogan_footer::after {
		bottom: -4%;
		right: 0;
		margin-right: 0;
	}
}
.footer_slogan_en {
	display: inline-block;
	width: min(100% - 40px, 320px);
}
.footer_slogan_ja {
	display: inline-block;
	width: min(100% - 40px, 250px);
}
/*	Footer	*/
.footer-wrap {
	position: relative;
	width: 100%;
	z-index: 1;
}
.footer_to_top {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 65px;
	aspect-ratio: 1;
}
.footer_to_top img {
	width: 100%;
}
.footer-wrap .l-wrapper{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 280px;
}
.footer-wrap .footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 40px;
	width: 100%;
}
.footer__logo {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px 40px;
	width: min(100% - 80px, 500px);
}
.footer__logo .kyojo {
	width: 210px;
}
.footer__logo .ds {
	width: 250px;
}
.sns-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
}
.sns:not(:first-of-type) {
	margin-left: 15px;
}
.sns a {
	display: block;
}
.sns img {
	width: 42px;
}
.copyright {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 34px;
	background: #000;
	padding-bottom: 2px;
	font-size: 1.0rem;
	font-weight: 400;
	line-height: 1;
	text-align: center;
	color: #fff;
}