@charset "UTF-8";

/* ==========================================
	1. ベース設定（フォント・共通レイアウト）
=========================================== */
body.noto_sans_font {
	font-family: 'Noto Sans JP', sans-serif, serif !important;
}

/* すべての要素の基準幅を1000pxに統一 */
.fixed_inner {
	width: 1000px !important;
	max-width: 95% !important;
	margin: 0 auto !important;
}

/* メインレイアウトの上下余白 */
.case_detail_container {
	background-color: var(--white);
	font-size: 1.0625rem;
	padding-top: 25px; 
}

/* パンくずリスト */
.breadcrumb {
	margin-top: 5px !important;
	margin-bottom: 25px !important;
	font-size: 0.9rem;
	color: var(--gray) !important;
}
.breadcrumb a {
	color: var(--theme_color);
	text-decoration: none;
}


/* ==========================================
	2. ヘッダー設定（PC用：絶対1000pxロック・青ベース固定）
=========================================== */
@media screen and (min-width: 640.1px) {
	/* スクロール時も含め、常にヘッダーを青色に完全ロック */
	nav#gnav,
	nav#gnav.fixed {
		width: 100% !important;
		background-color: var(--theme_color) !important;
	}
	
	/* 要素が左右に吹き飛ぶのを防ぐ1000px幅の完全ロック（基準点） */
	nav#gnav ul.menu_list_container.fixed_inner {
		width: 1000px !important;
		max-width: 95% !important;
		margin: 0 auto !important;
		display: flex !important;
		justify-content: space-between !important; 
		align-items: center !important;
		padding: 0 !important;
		height: 80px !important;
		position: relative !important;
	}

	/* ヘッダー内のフォント同期 */
	.nav_menu_text_only,
	.header_application_btn {
		font-family: 'Noto Sans JP', sans-serif !important;
		font-weight: bold !important;
	}

	/* 左端：ロゴボックス */
	.logo_item_box {
		padding: 0 !important;
		display: flex !important;
		align-items: center !important;
		height: 100% !important;
		z-index: 2; 
	}
	.header_logo_link {
		display: flex !important;
		align-items: center !important;
		width: 190px;
	}
	.header_logo_link img {
		width: 100%;
		height: auto;
		display: block;
	}

	/* 中央：「活用事例」メニュー（絶対配置でド真ん中に固定・矢印なし） */
	.nav_link_container {
		padding: 0 !important;
		margin: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		position: absolute !important;
		left: 50% !important;
		top: 50% !important;
		transform: translate(-50%, -50%) !important; 
		height: 100% !important;
		z-index: 1;
	}
	.nav_menu_text_only {
		font-size: 1rem !important;
		color: #FFF !important; /* スクロールしても白文字をキープ */
		display: inline-block !important;
		line-height: 1 !important; 
		cursor: default; 
		padding-right: 0 !important; 
	}

	/* 右端：申込ボタン */
	.cta_item_box {
		padding: 0 !important;
		display: flex !important;
		align-items: center !important;
		height: 100% !important;
		z-index: 2;
	}
	.header_application_btn {
		display: inline-block !important;
		background-color: transparent !important;
		border: 2px solid #FFF !important;
		color: #FFF !important;
		font-size: 0.95rem !important;
		padding: 10px 26px !important;
		border-radius: 50px !important;
		text-decoration: none !important;
		transition: all 0.25s ease;
		white-space: nowrap;
		line-height: 1.2 !important;
	}
	.header_application_btn:hover {
		background-color: #FFF !important;
		color: var(--theme_color) !important;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
	}

	/* スクロール固定時の余白バグをリセット */
	nav#gnav.fixed .menu_item_container { padding: 0 !important; }
}


/* ==========================================
	3. 記事ヘッダー（ロゴ・タグ・タイトル）
=========================================== */
.case_hero {
	border-bottom: none !important;
	padding-bottom: 10px;
	margin-bottom: 40px !important; 
}
.case_hero_flex {
	display: flex;
	align-items: stretch !important; 
	justify-content: space-between;
	width: 100%;
}
.case_hero_text {
	flex-grow: 1;
	margin-right: 30px; 
}

/* タグデザイン（青枠・白背景・疑似要素による＃制御） */
.case_hero_tag {
	display: inline-block !important;
	background-color: var(--white) !important;
	border: 1px solid var(--theme_color) !important;
	color: var(--theme_color) !important; 
	font-weight: bold;
	padding: 4px 14px 4px 10px !important;
	border-radius: 50px;
	font-size: 0.875rem;
	margin-bottom: 12px;
	margin-right: 8px !important; 
}
.case_hero_tag::before {
	content: "＃";
	font-weight: bold;
	margin-right: 2px;
	display: inline-block;
}

/* 大学名・タイトル・様の下揃え */
.case_hero_university {
	display: flex !important;
	align-items: flex-end !important; 
	justify-content: flex-start;
	font-size: 1.65rem;
	font-weight: bold;
	color: #111;
	margin-bottom: 12px;
	line-height: 1.2 !important;
}
.university_honorific {
	font-size: 1.15rem !important; 
	font-weight: bold;
	color: #111;
	margin-left: 10px; 
	display: inline-block;
}
.case_hero_title {
	font-size: 2.35rem;
	font-weight: bold;
	color: #222;
	line-height: 1.4;
}
.case_hero_subtitle {
	font-size: 1.45rem;
	font-weight: normal;
	color: var(--gray) !important;
	margin-top: 12px;
	display: block;
}

/* 右側の大学ロゴ（サイズ上限引き上げ版） */
.case_hero_logo {
	width: auto !important;
	min-width: 200px;            
	max-width: 420px;            
	height: auto !important;
	margin-left: 0;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	overflow: hidden;
	flex-shrink: 0;              
}

.case_hero_logo img {
	max-width: 100%;
	max-height: 140px;           
	width: auto;
	height: auto;
	object-fit: contain;
}


/* ==========================================
	4. インタビュー前段（ななめストライプボックス）
=========================================== */
.interview_intro_box {
	border-radius: 12px;
	padding: 2em;
	margin-bottom: 60px;
	line-height: 1.6; 
	background-image: repeating-linear-gradient(
		-45deg,
		#f2f5f8 0,
		#f2f5f8 3px,
		transparent 3px,
		transparent 6px
	);
}
.interview_intro_label {
	font-weight: bold;
	color: var(--theme_color);
	font-size: 1.15rem;
	margin-bottom: 16px;
	display: block;
	text-align: center;
}
.interview_intro_text {
	color: #000;
	margin: 0;
	font-size: 1.05rem;
	text-align: center;
}


/* ==========================================
	5. インタビュー本文（Q&A・中央画像・リスト）
=========================================== */
.interview_wrapper {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 auto;
}
.interview_block {
	margin-bottom: 85px;
}

/* 質問（Q） */
.interview_q {
	font-size: 1.25rem; 
	font-weight: bold;
	color: #000 !important; 
	line-height: 1.6;
	margin-top: 0;
	margin-bottom: 18px; 
	text-align: left;
	padding-left: 2.2em; 
	text-indent: -2.2em; 
}

/* 🆕 追加：CSSのbeforeで「――」を全質問に自動付与 */
.interview_q::before {
	content: "――";
	margin-right: 0.2em; /* 記号と文字の間に絶妙なゆとりを確保 */
}

/* 回答（A） */
.interview_a {
	font-size: 1.0625rem;
	line-height: 2.1;
	color: #111;
	margin-bottom: 0;
	padding-left: 0; 
}
.interview_a p { margin-bottom: 15px; }
.interview_a p:last-child { margin-bottom: 0; }

/* 挿入画像エリア（中央配置・クリック拡大機能は無効化） */
.interview_thumb_area {
	width: 480px; 
	margin: 30px auto 45px auto; 
	clear: both;
	text-align: center;
}
.interview_thumb_img {
	width: 100%;
	height: auto;
	border-radius: 6px;
	border: 1px solid #EAEAEA;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}
.interview_thumb_caption {
	font-size: 0.85rem;
	font-weight: bold;
	color: var(--gray) !important;
	margin-top: 10px;
	display: block;
}

/* 青蛍光マーカー風アンダーライン */
.marker_blue {
	background: linear-gradient(transparent 55%, #D4E9F7 55%);
	font-weight: bold;
	padding: 2px 2px;
}

/* 箇条書きカード */
.case_bullet_card {
	margin: 20px 0 20px 20px;
	padding-left: 0;
	border: none;
}
.case_bullet_item {
	display: block;
	margin-bottom: 10px;
	font-size: 1.0625rem;
	color: #111;
}
.case_bullet_item:last-child { margin-bottom: 0; }


/* ==========================================
	6. 参考資料エリア（モダン縦並びカード・課題シート）
=========================================== */
.resource_section {
	border-radius: 8px;
	padding: 35px 40px !important;
	margin: 70px 0 0 0;
	clear: both;
	background-image: repeating-linear-gradient(
		-45deg,
		#f2f5f8 0,
		#f2f5f8 3px,
		transparent 3px,
		transparent 6px
	);
}
.resource_title {
	font-size: 1.225rem !important; 
	font-weight: bold !important;
	margin-top: 0 !important;
	margin-bottom: 25px !important; 
	color: #000 !important;
	line-height: 1.6;
	text-align: left;
}

/* カードレイアウトコンテナ */
.resource_list {
	display: block !important;
	width: 100% !important;
}
.resource_item_modern {
	display: block !important;
	background-color: var(--white) !important;
	border: 1px solid #DDD !important; 
	border-radius: 6px;
	padding: 22px 24px !important; 
	margin-bottom: 16px !important; 
	text-decoration: none;
	transition: border-color 0.2s, box-shadow 0.2s;
	box-sizing: border-box;
	width: 100% !important;
}
.resource_item_modern:last-child { margin-bottom: 0 !important; }
.resource_item_modern:hover {
	border-color: var(--theme_color) !important;
	box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

/* カード内テキスト＆ダウンロードボタン */
.resource_info_modern {
	display: block !important;
	width: 100% !important;
	margin-bottom: 15px; 
	text-align: left;
}
.resource_name_modern {
	font-size: 1.05rem !important; 
	font-weight: bold !important;
	color: #000 !important;
	line-height: 1.5;
	display: block;
	width: 100% !important;
}
.resource_action_group_modern {
	display: flex !important;
	align-items: center !important; 
	justify-content: flex-start;
	width: fit-content;
}
.resource_icon_modern {
	font-size: 1.65rem !important; 
	margin-right: 12px !important;
	line-height: 1 !important;
	color: #2b579a;
	display: inline-block !important;
}
.resource_btn_modern {
	display: inline-block !important;
	background-color: var(--theme_color);
	color: #FFF !important;
	font-size: 0.9rem !important; 
	font-weight: bold !important;
	padding: 9px 26px !important; 
	border-radius: 4px;
	text-align: center;
	white-space: nowrap;
	line-height: 1.2 !important;
}
.resource_item_modern:hover .resource_btn_modern { opacity: 0.85; }

/* 記事末尾の実施日 */
.case_meta_info {
	text-align: right;
	font-size: 0.9rem;
	font-weight: bold;
	color: #000 !important;
	margin-top: 20px;
	margin-bottom: 60px; 
}


/* ==========================================
	7. スマホ用レスポンシブ（一括指定）
=========================================== */
@media screen and (max-width: 640px) {
	/* ヘッダー */
	.header_logo_link { width: 150px; }
	
	/* 記事メイン */
	.case_detail_container { padding-top: 25%; }
	.case_hero_flex { flex-direction: column-reverse; }
	.case_hero_logo { display: none !important; }
	.case_hero_title { font-size: 1.75rem; }
	.case_hero_subtitle { font-size: 1.15rem; }
	.case_hero_university {	font-size: 1.4rem; }
	.university_honorific { font-size: 1rem !important; }
	.case_hero_text {
			margin-right: 0 !important;
			width: 100% !important;
		}

	/* インタビュー本文 */
	.interview_wrapper { max-width: 100%; }
	.interview_q { font-size: 1.15rem; }
	.interview_a { font-size: 1rem; line-height: 1.9; }
	.interview_thumb_area { width: 100%; margin: 20px 0; }
	.case_bullet_card { margin-left: 20px; }
	
	/* リソース（課題シート） */
	.resource_list { flex-direction: column; gap: 15px; }
	.resource_item_modern { width: 100% !important; padding: 20px !important; }

    /* スマホヘッダーをド真ん中配置に強制上書き */
	.sp_header_container {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		height: 65px !important; /* タップしやすい適度な高さ */
		width: 100% !important;
	}

	/* 中央ロゴのサイズ調整 */
	.sp_center_logo_link {
		display: block;
		width: 170px; /* スマホで大きすぎず小さすぎないベストな横幅 */
	}
	.sp_center_logo_img {
		width: 100%;
		height: auto;
		display: block;
	}

	/* ハンバーガーメニューの中身（PC用メニュー）をスマホでは完全に非表示にする */
	ul.menu_list_container {
		display: none !important;
	}
}