@charset "utf-8";

/* =========================================================
   地域みらい留学 LP  style.css
   - モバイルファースト（min-width:768px でPC）
   - LP専用の広域スタイルは .ccd_c-mirai にスコープ
     （アーカイブ .ccd_c-mirai-news 等へ副作用を出さない）
   ========================================================= */

:root {
	--cm-blue:       #004AAD; /* プライマリ（READ MORE / リンク / スポンサー背景 / 詳しく見る） */
	--cm-navy:       #12263A; /* 本文テキスト / フッター背景 */
	--cm-yellow:     #FFF000; /* タブ非選択 / アクセント */
	--cm-sky:        #EAF4FB; /* とは・フィールド・奨学金セクション背景 */
	--cm-sky-dot:    #D6E4F0; /* 背景ドット地紋 */
	--cm-card:       #D5ECF7; /* 特徴カード背景（PDF実測） */
	--cm-cream:      #FCFBEB; /* 学校セクション背景 / テーブル偶数行 */
	--cm-cream-row:  #FADDA9; /* テーブル奇数行 */
	--cm-cream-alt:  #FCFBEB; /* テーブル偶数行（明） */
	--cm-orange:     #F2A93B; /* テーブルヘッダ */
	--cm-orange-bd:  #ECAE5B; /* テーブル枠 */
	--cm-white:      #ffffff;
	--cm-badge:      #AFDFF9; /* セクション見出しのCSS帯（水色）PDF実測 */
}

/* ---- 広域（LP本体のみ） ---- */
/* テーマは全体的な box-sizing リセットを持たないため、LP内でのみ border-box を適用
   （width:100% + padding のはみ出しを防ぐ。アーカイブ .ccd_c-mirai-news 等には非適用） */
.ccd_c-mirai main,
.ccd_c-mirai main *,
.ccd_c-mirai main *::before,
.ccd_c-mirai main *::after {
	box-sizing: border-box;
}

.ccd_c-mirai main {
	background-color: var(--cm-white);
	color: var(--cm-navy);
	padding: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	position: relative;
	overflow-x: hidden;
}

/* 共通コンテナ */
.cmirai-inner {
	width: 100%;
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 20px;
}

/* 固定 MouLa ロゴ */
.cmirai-moulalogo {
	position: fixed;
	top: 12px;
	left: 15px;
	width: 92px;
	z-index: 100;

	& a { display: block; }
	& img { width: 100%; height: auto; display: block; }
}

/* セクション見出し（文字のみ画像 ＋ CSS帯）
   帯: 水色ベタ＋黄色のスクエア影（右下ずらし）。文字画像は透過・実寸表示。
   SP: 帯はほぼ全幅（.cmirai-inner の padding 20px を負マージンで突き抜け）。
   PC: 帯は文字にパディングで追従（inline-block）。 */
.cmirai-heading {
	text-align: center;
	line-height: 1;
	margin: 0 0 34px;

	& .-badge {
		display: block;
		margin: 0 -14px; /* 内側 padding20px を突き抜け、画面端から左右約6px */
		padding: 10px 16px;
		background-color: var(--cm-badge);
		box-shadow: 4px 6px 0 var(--cm-yellow); /* 角丸なし（スクエア） */
	}

	& .-badge img {
		display: block;
		max-width: 100%; /* SP: 帯内に収める（長い1行タイトルの保護）。表示幅は width/height 属性（実寸÷2）が基準 */
		height: auto;
		margin: 0 auto;
	}
}

/* SP（≤767px）: PC/SP 共通の1行タイトル画像はデザイン（PDF）準拠で縮小。
   自然サイズ（÷2）だと帯からはみ出す・大きすぎるため、PDF実測の表示幅に合わせる。
   直下 img のみ対象（picture の _sp 2行版は対象外・自然サイズのまま） */
@media (max-width: 767px) {
	.sec-cmirai-posts   .cmirai-heading .-badge > img { width: 134px; }
	.sec-cmirai-schools .cmirai-heading .-badge > img { width: 238px; }
	.sec-cmirai-sponsor .cmirai-heading .-badge > img { width: 137px; }
}


/* =========================================================
   KV
   ========================================================= */
.sec-cmirai-kv {
	background-color: var(--cm-white);
	padding-top: 64px; /* 上部の白帯。固定ロゴ（top12+高さ41px）を余白込みで収める */

	& h1 { margin: 0; line-height: 0; }
	& img { width: 100%; height: auto; display: block; }
}


/* =========================================================
   NEW POSTS（タブ）
   ========================================================= */
.sec-cmirai-posts {
	padding: 56px 0 40px;

	& .cmirai-tabs { position: relative; }

	& .-tab {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
		position: relative;
		z-index: 2;

		& li { display: flex; }

		& a {
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			width: 100%;
			background-color: var(--cm-yellow);
			color: var(--cm-navy);
			font-weight: 700;
			font-size: 1.4rem;
			line-height: 1.3;
			padding: 1.1em 6px;
			border: 2px solid var(--cm-blue);
			border-radius: 10px;
			text-decoration: none;
			transition: background-color .25s, color .25s;
		}

		& a[aria-selected="true"] {
			background-color: var(--cm-white);
			color: var(--cm-blue);
		}
	}

	& .-tab-contents {
		display: none;
		position: relative;
		z-index: 1;
		border: 2px solid var(--cm-blue);
		border-radius: 14px;
		background: var(--cm-white);
		padding: 24px 18px;
		margin-top: 10px;

		&.is-active { display: block; }
	}

	& .-wrap {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 40px;

		& .-post {
			& .-img {
				position: relative;
				margin-bottom: 14px;
				overflow: hidden;
				border-radius: 4px;

				& a { display: block; overflow: hidden; }
				& img {
					width: 100%;
					height: 100%;
					aspect-ratio: 4 / 3;
					object-fit: cover;
					display: block;
					transition: transform .4s;
				}
				& a:hover img { transform: scale(1.06); }

				& .-category a {
					position: absolute;
					left: 0; top: 0;
					background-color: var(--cm-blue);
					color: #fff;
					font-size: 1.2rem;
					line-height: 1;
					padding: 7px 9px;
				}
			}

			& time {
				display: block;
				color: var(--cm-blue);
				font-weight: 700;
				font-size: 1.3rem;
				margin-bottom: 6px;
			}

			& .-title {
				font-size: 1.7rem;
				font-weight: 700;
				line-height: 1.5;
				margin: 0 0 8px;

				& a { color: var(--cm-navy); }
			}

			& .-summary {
				font-size: 1.4rem;
				line-height: 1.8;
				color: var(--cm-navy);
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
			}
		}
	}

	& .-btn {
		text-align: center;
		margin-top: 34px;

		& a {
			display: inline-block;
			background-color: var(--cm-blue);
			color: #fff;
			font-weight: 700;
			font-size: 1.6rem;
			letter-spacing: .04em;
			line-height: 1;
			padding: 1.05em 3em;
			border-radius: 999px;
			text-decoration: none;
			transition: opacity .25s, transform .25s;

			&:hover { opacity: .85; transform: translateY(-2px); }
		}
	}
}


/* =========================================================
   地域みらい留学とは / 学びのフィールド / 奨学金（水色＋ドット）
   ========================================================= */
.sec-cmirai-about,
.sec-cmirai-scholarship {
	background-color: var(--cm-sky);
	background-image: radial-gradient(var(--cm-sky-dot) 1.4px, transparent 1.5px);
	background-size: 22px 22px;
	background-position: 0 0;
}
/* 学びのフィールドは白背景（イラレ準拠） */

/* 本文（共通リード）: 通常テキスト SP14px / PC18px（イラレ準拠） */
.cmirai-lead {
	& p {
		font-size: 1.4rem;
		font-weight: 500;
		line-height: 2.1;
		color: var(--cm-navy);
		margin: 0 0 1.6em;

		&:last-child { margin-bottom: 0; }
	}
}

/* --- とは --- */
.sec-cmirai-about {
	padding: 60px 0 64px;

	& .-logo {
		text-align: center;
		margin: 0 0 22px;

		& img { display: inline-block; width: 220px; max-width: 68%; height: auto; }
	}

	& .cmirai-lead { margin-bottom: 34px; }

	& .cmirai-cards {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}

	& .cmirai-card {
		background-color: var(--cm-card);
		/* 縦横の点線グリッド（デザイナー書き出しタイル 121px=2x） */
		background-image: url(assets/images/dotted.webp);
		background-size: 60.5px 60.5px;
		border: 2px solid var(--cm-blue);
		border-radius: 14px;
		padding: 20px 14px 22px;
		position: relative;
		z-index: 0; /* ::before(z-index:-1)の楕円をカード背景より前に置くための文脈 */

		& .-title {
			color: var(--cm-blue);
			font-weight: 900;
			font-size: 1.55rem;
			line-height: 1.5;
			text-align: center;
			margin: 14px 0 22px;
			padding: 0 4px;
			position: relative;

			/* 見出しの背面に手描きの黄色い楕円。見出しブロックより少し大きく敷き、
			   デザイン同様カードごとの見出しサイズに合わせて伸縮させる */
			&::before {
				content: "";
				position: absolute;
				left: 50%;
				top: 50%;
				translate: -50% -50%;
				width: 104%;
				height: calc(100% + 44px);
				background: url(assets/images/circle_card.webp) center / 100% 100% no-repeat;
				pointer-events: none;
				z-index: -1;
			}
		}

		& .-txt {
			color: var(--cm-navy);
			font-size: 1.2rem;
			font-weight: 500;
			line-height: 1.75;
			margin: 0;
		}
	}
}

/* --- 学びのフィールド --- */
.sec-cmirai-field {
	padding: 56px 0 60px;

	& .-cols { display: flex; flex-direction: column; gap: 26px; }

	& .-text { order: 1; }
	& .-photo { order: 2; }

	& .cmirai-lead { margin-bottom: 24px; }

	& .cmirai-bubbles {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 14px;

		& li { line-height: 0; }
		& img { display: block; width: 100%; max-width: 408px; height: auto; }
	}

	& .-photo img {
		width: 100%;
		height: auto;
		display: block;
		/* 黄フレームは webp に焼き込み済みのため角丸は付けない */
	}
}

/* --- 奨学金 --- */
.sec-cmirai-scholarship {
	padding: 56px 0 64px;

	& .cmirai-lead { margin-bottom: 30px; }

	& .-bnr {
		margin: 0 auto;
		max-width: 640px;

		& img { width: 100%; height: auto; display: block; }
	}

	& .-btn { text-align: center; margin-top: 30px; }
}

/* 詳しく見る（濃紺ピル）
   共通CSSのリンク色に負けないよう main 配下にスコープして特異性を確保 */
.ccd_c-mirai main .cmirai-pill {
	display: inline-block;
	background-color: var(--cm-blue);
	color: #fff;
	font-weight: 700;
	font-size: 1.7rem;
	line-height: 1;
	letter-spacing: .05em;
	padding: 1.1em 3.4em;
	border-radius: 999px;
	text-decoration: none;
	transition: opacity .25s, transform .25s;

	&:visited, &:focus { color: #fff; }
	&:hover { color: #fff; opacity: .85; transform: translateY(-2px); }
}


/* =========================================================
   北海道の地域みらい留学校（クリーム背景）
   ========================================================= */
.sec-cmirai-schools {
	background-color: var(--cm-cream);
	padding: 60px 0 64px;

	& .-intro { display: flex; flex-direction: column; gap: 24px; }

	& .-photo img {
		width: 100%;
		height: auto;
		display: block;
		/* ブロブ形＋黄色ずらし背景は webp に焼き込み済みのため角丸は付けない */
	}

	& .cmirai-lead { margin-bottom: 24px; }

	& .-check {
		text-align: center;

		& .-checkbtn {
			display: inline-block;
			background: var(--cm-orange);
			color: #fff;
			font-size: 1.7rem;
			font-weight: 900;
			line-height: 1;
			letter-spacing: .04em;
			padding: 1.6rem 3.2rem;
			border-radius: 999px;
			text-decoration: none;
			transition: transform .25s;

			&:hover { transform: translateY(-2px); }
		}

		/* 指差しCheck!はボタンの右下に重ねる（イラレ準拠） */
		& .-checkicon {
			display: block;
			width: 108px;
			height: auto;
			margin: 6px auto 0;
			transform: translateX(110px);
			pointer-events: none;
		}
	}
}

/* エリア別テーブル */
.cmirai-tablewrap {
	margin-top: 34px;
	overflow-x: auto;
	border-radius: 6px;
}

.cmirai-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 1.2rem;
	line-height: 1.7;
	border: 1px solid var(--cm-orange-bd);

	& th[scope="col"] {
		background-color: var(--cm-orange);
		color: #fff;
		font-weight: 700;
		text-align: center;
		padding: 12px 8px;
		border: 1px solid var(--cm-orange-bd);
	}

	& th[scope="col"]:first-child { width: 34%; }

	& th[scope="row"] {
		background-color: transparent;
		color: var(--cm-navy);
		font-weight: 700;
		text-align: center;
		vertical-align: middle;
		padding: 14px 8px;
		border: 1px solid var(--cm-orange-bd);
	}

	& td {
		color: var(--cm-navy);
		padding: 14px 12px;
		border: 1px solid var(--cm-orange-bd);
		vertical-align: middle;
	}

	& td a {
		color: var(--cm-navy);
		text-decoration: underline;
		text-underline-offset: 2px;
		transition: color .2s;

		&:hover { color: var(--cm-blue); }
	}

	& tbody tr:nth-child(odd)  { background-color: var(--cm-cream-row); }
	& tbody tr:nth-child(even) { background-color: var(--cm-cream-alt); }
}


/* =========================================================
   スポンサー企業（ロイヤルブルー背景）
   ========================================================= */
.sec-cmirai-sponsor {
	background-color: var(--cm-blue);
	padding: 56px 0 64px;

	& .-toppartner {
		color: #fff;
		font-weight: 700;
		font-size: 1.5rem;
		margin: 0 0 12px;

		& span { color: var(--cm-yellow); margin-right: 2px; }
	}

	& .-topbox {
		background-color: #fff;
		border-radius: 2px;
		aspect-ratio: 16 / 6;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 0 20px;
		padding: 12px 18px;

		& span { color: #9aa4ad; font-size: 1.5rem; }
		& img { width: 78%; height: auto; }
	}

	/* パートナー階層（ファウンディング/ローカルトップ。ロゴ追加時は最大横3列で折返し） */
	& .-tier { margin-top: 30px; }

	& .-tierlabel {
		color: #fff;
		font-weight: 700;
		font-size: 1.5rem;
		margin: 0 0 12px;

		& span { color: var(--cm-yellow); margin-right: 2px; }
	}

	& .-tiernote {
		color: #fff;
		font-size: 1.2rem;
		text-align: right;
		margin: 8px 0 0;
	}

	& .cmirai-partner-grid {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px;

		& li {
			background-color: #fff;
			border-radius: 2px;
			aspect-ratio: 16 / 6;
			width: calc(50% - 6px);
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10px 14px;

			& img { width: auto; height: auto; max-width: 86%; max-height: 100%; }

			&.-nologo span {
				color: var(--cm-navy);
				font-weight: 700;
				font-size: 1.3rem;
				text-align: center;
				line-height: 1.4;
			}
		}
	}
}


/* =========================================================
   LP専用フッター（濃紺）
   ========================================================= */
.sec-cmirai-footer {
	background-color: var(--cm-navy);
	color: #fff;
	text-align: center;
	padding: 46px 20px 40px;

	& .cmirai-inner { padding: 0; }

	& .-org {
		font-size: 1.5rem;
		font-weight: 500;
		margin: 0 0 28px;
	}

	& .-logo {
		margin: 0 0 14px;

		& img { display: inline-block; width: 130px; height: auto; }
	}

	& .-copy {
		font-size: 1.35rem;
		margin: 0 0 6px;
	}

	& .-credit {
		font-size: 1.3rem;
		margin: 0;

		& a {
			color: #fff;
			text-decoration: underline;
			text-underline-offset: 2px;

			&:hover { opacity: .8; }
		}
	}
}


/* =========================================================
   スクロールアニメーション
   ========================================================= */
.cmirai-anim {
	& .cmirai-pop {
		opacity: 0;
		transform: scale(.9);
		transition: opacity .5s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
	}
	& .cmirai-pop.is-shown { opacity: 1; transform: scale(1); }

	& .cmirai-reveal {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity .5s ease, transform .5s ease;
	}
	& .cmirai-reveal.is-shown { opacity: 1; transform: translateY(0); }

	/* スタッガー（カード・記事・スポンサー枠） */
	& .cmirai-stagger > * {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity .5s ease, transform .5s ease;
	}
	& .cmirai-stagger > *.is-shown { opacity: 1; transform: translateY(0); }

	/* 吹き出しはポップイン */
	& .cmirai-stagger.is-bubbles > * {
		transform: scale(.85);
		transition: opacity .5s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
	}
	& .cmirai-stagger.is-bubbles > *.is-shown { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.cmirai-anim .cmirai-pop,
	.cmirai-anim .cmirai-reveal,
	.cmirai-anim .cmirai-stagger > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}


/* =========================================================
   PC（min-width:768px）
   ========================================================= */
@media screen and (min-width: 768px) {

	.cmirai-inner { padding: 0 20px; }

	.cmirai-moulalogo { top: 18px; left: 22px; width: 130px; }

	.cmirai-heading { margin: 0 0 44px; }

	/* 見出し帯: PCは文字にパディングで追従（inline-block・帯幅は文字幅＋左右パディング） */
	.cmirai-heading .-badge {
		display: inline-block;
		max-width: 100%;
		margin: 0;
		padding: 11px 26px;
	}

	/* KV */
	.sec-cmirai-kv { padding-top: 88px; } /* 固定ロゴ（top18+高さ58px）を余白込みで収める */

	/* NEW POSTS */
	.sec-cmirai-posts {
		padding: 90px 0 60px;

		& .-tab {
			grid-template-columns: repeat(4, 1fr);
			gap: 0;

			& li:not(:first-child) { margin-left: -2px; }

			& a {
				font-size: 1.7rem;
				padding: 1.2em 8px;
				border-bottom: none;
				border-radius: 12px 12px 0 0;
				position: relative;
			}

			& a[aria-selected="true"] {
				z-index: 3;

				&::after {
					content: "";
					position: absolute;
					left: 0;
					right: 0;
					bottom: -2px;
					height: 3px;
					background: var(--cm-white);
				}
			}
		}

		& .-tab-contents {
			margin-top: 0;
			border-radius: 0 0 14px 14px;
			padding: 44px 40px;
		}

		& .-wrap {
			grid-template-columns: repeat(3, 1fr);
			gap: 34px;

			& .-post {
				& .-title { font-size: 1.8rem; }
				& .-summary { font-size: 1.45rem; }
			}
		}

		& .-btn a { font-size: 1.9rem; padding: 1.05em 3.4em; }
	}

	/* とは */
	.sec-cmirai-about {
		padding: 96px 0 100px;

		& .-logo { margin-bottom: 30px; }
		& .-logo img { width: 320px; max-width: 320px; }

		& .cmirai-lead {
			max-width: 1010px;
			margin: 0 auto 50px;

			/* とはセクションのみPC20px（イラレ準拠） */
			& p { font-size: 2rem; line-height: 2.2; }
		}

		& .cmirai-cards {
			grid-template-columns: repeat(4, 1fr);
			gap: 22px;
		}

		& .cmirai-card {
			padding: 26px 18px 28px;

			& .-title { font-size: 1.8rem; }
			& .-txt { font-size: 1.6rem; }
		}
	}

	/* 学びのフィールド */
	.sec-cmirai-field {
		padding: 84px 0 90px;

		& .-cols {
			flex-direction: row;
			align-items: flex-start;
			gap: 46px;
		}

		& .-text { order: 1; flex: 1 1 46%; }
		& .-photo { order: 2; flex: 1 1 54%; }

		& .cmirai-lead {
			margin-bottom: 30px;
			& p { font-size: 1.8rem; }
		}

		& .cmirai-bubbles { gap: 18px; }
	}

	/* 学校 */
	.sec-cmirai-schools {
		padding: 96px 0 100px;

		& .-intro {
			flex-direction: row;
			align-items: center;
			gap: 46px;
		}

		& .-photo { flex: 1 1 44%; }
		& .-text  { flex: 1 1 56%; }

		& .cmirai-lead {
			margin-bottom: 30px;
			& p { font-size: 1.8rem; }
		}

		& .-check {
			& .-checkbtn { font-size: 1.8rem; padding: 1.7rem 3.6rem; }
			& .-checkicon { width: 120px; margin-top: 10px; transform: translateX(140px); }
		}
	}

	.cmirai-table {
		font-size: 1.6rem;

		& th[scope="col"] { padding: 15px 10px; }
		& th[scope="row"] { padding: 18px 10px; }
		& td { padding: 18px 18px; }
	}

	/* 奨学金 */
	.sec-cmirai-scholarship {
		padding: 90px 0 100px;

		& .cmirai-lead {
			max-width: 1010px;
			margin: 0 auto 40px;
			& p { font-size: 1.8rem; line-height: 2.2; }
		}

		& .-bnr { max-width: 800px; }
		& .-btn { margin-top: 40px; }
	}

	/* スポンサー */
	.sec-cmirai-sponsor {
		padding: 90px 0 110px;

		& .-toppartner {
			max-width: 420px;
			margin: 0 auto 16px;
			text-align: left;
			font-size: 1.7rem;
		}

		& .-topbox {
			max-width: 420px;
			margin: 0 auto 34px;
			aspect-ratio: 16 / 5;

			& span { font-size: 1.7rem; }
		}

		& .-tier { margin-top: 40px; text-align: center; }
		& .-tierinner { display: inline-block; text-align: left; }
		& .-tierlabel { font-size: 1.7rem; margin-bottom: 16px; }

		& .cmirai-partner-grid {
			gap: 22px;

			& li { width: 314px; aspect-ratio: 16 / 5; padding: 12px 18px; }
			& li.-nologo span { font-size: 1.6rem; }
		}
	}

	/* フッター */
	.sec-cmirai-footer {
		padding: 70px 20px 60px;

		& .-org { font-size: 1.9rem; margin-bottom: 40px; }
		& .-logo img { width: 150px; }
		& .-copy { font-size: 1.5rem; }
		& .-credit { font-size: 1.45rem; }
	}
}