@charset "UTF-8";

/* ==========================================================================
   front.css — トップページ

   本番 https://jc766.com/ の実測値に合わせている（ビューポート1440px時）。
   コンテナは 1160px センタリング（x=133〜1293）。

     1. hero      MV 565px | gap 30px | 最新情報 565px      y=100  h=909
     2. about     見出し + 区切り線 + 2カラム               y=1059 h=657
     3. greeting  #EDBE38 のブロック                        y=1766 h=492
     4. movie     3カラム（各 300px）                        y=2258 h=417
     5. banners   背景 #F2F2F2 / padding 50px 0             y=2674 h=234
   ========================================================================== */

/* --------------------------------------------------------------------------
   セクション共通の見出し
   -------------------------------------------------------------------------- */

.front-section__title {
	margin: 0;
	color: var(--scjc-text);
	font-size: 22px;
	font-weight: 700;
	line-height: 30px;
	text-align: center;
}

.front-section__title--onYellow {
	color: var(--scjc-white);
	text-align: left;
}

/* 見出し下の区切り線（本番は幅340pxのセンター配置） */
.front-section__divider {
	width: 340px;
	height: 0;
	margin: 15px auto;
	border-top: 1px solid var(--scjc-blue);
}

.front-section__divider--onYellow {
	margin-inline: 0;
	border-top-color: var(--scjc-white);
}

/* --------------------------------------------------------------------------
   1. メインビジュアル + 最新情報
   -------------------------------------------------------------------------- */

.front-hero__inner {
	display: flex;
	align-items: flex-start;
	gap: 30px;
}

.front-hero__mv,
.front-hero__news {
	flex: 0 0 565px;
	width: 565px;
	min-width: 0;
}

/* --------------------------------------------------------------------------
   2. 埼玉中央青年会議所について
   -------------------------------------------------------------------------- */

/* 本番は about セクションの中身がコンテナからさらに左右53px内側にある */
.front-about {
	margin-top: 50px;
	padding-block: 53px;
}

.front-about > .container {
	padding-inline: 53px;
}

.front-about__body {
	display: flex;
	align-items: flex-start;
	gap: 50px;
	margin-top: 66px;
}

.front-about__left {
	flex: 0 0 502px;
	width: 502px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.front-about__logo {
	width: 300px;
	height: 130px;
	object-fit: contain;
}

.front-about__intro {
	margin: 50px 0 0;
	color: #000;
	font-size: 16px;
	font-weight: 400;
	line-height: 30px;
}

.front-about__right {
	flex: 0 0 502px;
	width: 502px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

/* リンクボタン：半透明の青／全角丸 */
.front-about__btn {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 50px;
	padding-inline: 10px;
	background: rgba(0, 151, 215, 0.6);
	border-radius: 200px;
	text-decoration: none;
	box-sizing: border-box;
}

.front-about__btn:hover {
	background: rgba(0, 151, 215, 0.8);
}

.front-about__btn-dot {
	flex: 0 0 15px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--scjc-white);
}

.front-about__btn-label {
	color: var(--scjc-white);
	font-size: 16px;
	font-weight: 500;
	line-height: 30px;
}

/* --------------------------------------------------------------------------
   3. ごあいさつ
   -------------------------------------------------------------------------- */

/* 本番は about セクションとの間に50pxの空きがある */
.front-greeting {
	margin-top: 50px;
}

/* 枠の高さは左のテキスト列だけで決まる。
   理事長写真は枠より14px高く、本番でも下にはみ出して表示されている。
   写真列の高さを0にして、画像をそのまま溢れさせることで同じ見た目にする。 */
.front-greeting__box {
	display: flex;
	align-items: flex-start;
	background: var(--scjc-btn);
}

.front-greeting__text {
	flex: 0 0 605px;
	width: 605px;
	padding: 50px;
	box-sizing: border-box;
}

.front-greeting__org,
.front-greeting__role {
	margin: 0;
	color: var(--scjc-white);
	font-size: 20px;
	font-weight: 500;
	line-height: 30px;
}

.front-greeting__org {
	margin-top: 35px;
}

.front-greeting__name {
	margin: 20px 0 0;
	color: var(--scjc-white);
	font-size: 24px;
	font-weight: 500;
	line-height: 30px;
}

.front-greeting__lead {
	margin: 50px 0 0;
	color: var(--scjc-white);
	font-size: 16px;
	font-weight: 400;
	line-height: 30px;
}

.front-greeting__action {
	margin: 15px 0 0;
}

.front-greeting__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 180px;
	height: 46px;
	background: var(--scjc-white);
	color: var(--scjc-btn);
	font-size: 20px;
	font-weight: 500;
	border-radius: 200px;
	text-decoration: none;
}

.front-greeting__btn:hover {
	opacity: 0.88;
}

.front-greeting__photo {
	flex: 0 0 555px;
	width: 555px;
	height: 0;
}

.front-greeting__img {
	display: block;
	width: 555px;
	height: auto;
}

/* --------------------------------------------------------------------------
   4. 動画
   -------------------------------------------------------------------------- */

/* 本番は動画セクションの中身がコンテナからさらに左右33px内側にある */
.front-movie {
	padding-block: 83px;
}

.front-movie > .container {
	padding-inline: 33px;
}

.front-movie__grid {
	display: grid;
	grid-template-columns: repeat(3, 300px);
	justify-content: space-between;
	gap: 51px;
}

.front-movie__title {
	margin: 0 0 51px;
	color: var(--scjc-text);
	font-size: 22px;
	font-weight: 700;
	line-height: 30px;
}

.front-movie__thumb {
	display: block;
}

.front-movie__thumb img {
	display: block;
	width: 300px;
	height: 170px;
	object-fit: cover;
}

.front-movie__video {
	display: block;
	width: 300px;
	height: 170px;
	background: #000;
}

/* --------------------------------------------------------------------------
   5. バナーリンク集
   -------------------------------------------------------------------------- */

.front-banners {
	background: #f2f2f2;
}

.front-banners .container {
	padding-block: 50px;
}

/* --------------------------------------------------------------------------
   タブレット（〜1201px）
   -------------------------------------------------------------------------- */

@media (max-width: 1201px) {
	/* 本番はタブレット(768px)でも MV と最新情報の2カラムを維持する
	   （MV 344px | gap 20px | 最新情報 344px）。縦積みになるのは750px以下。 */
	.front-hero__inner {
		gap: 20px;
	}

	.front-hero__mv,
	.front-hero__news {
		flex: 1 1 0;
		width: auto;
	}

	.front-about__body {
		gap: 32px;
	}

	.front-about__left,
	.front-about__right {
		flex: 1 1 0;
		width: auto;
	}

	.front-greeting__text {
		flex: 1 1 auto;
		width: auto;
		padding: 40px;
	}

	.front-greeting__photo {
		flex: 0 0 40%;
		width: 40%;
		height: auto;
	}

	.front-greeting__img {
		width: 100%;
	}

	.front-movie__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}

	.front-movie__thumb img,
	.front-movie__video {
		width: 100%;
		height: auto;
		aspect-ratio: 300 / 170;
	}
}

/* --------------------------------------------------------------------------
   モバイル（〜750px）
   -------------------------------------------------------------------------- */

@media (max-width: 750px) {
	/* ===== 本番モバイル(375px)の実測値に合わせる =====
	   about     セクション y=1826 h=718 / 内側 292px @x42
	   greeting  黄枠 338x667 @x19 / 画像は見出しの直下（縦積み）
	   movie     1カラム 272px @x52
	   banners   2カラム 161.75px gap14 / ロゴ 160x46
	   ============================================== */

	/* --- ヒーロー：MVは全幅（コンテナ余白を打ち消す） --- */
	.front-hero__inner {
		flex-direction: column;
		gap: 0;
		padding-inline: 0;
		max-width: none;
	}

	.front-hero__mv {
		width: 100%;
	}

	.front-hero__news {
		width: 100%;
		padding-inline: var(--scjc-container-padding);
		box-sizing: border-box;
		margin-top: 20px;
	}

	/* --- 埼玉中央青年会議所について --- */
	.front-about {
		margin-top: 50px;
		padding-block: 23px 24px;
	}

	.front-about > .container {
		padding-inline: 42px;
	}

	.front-section__title {
		font-size: 17px;
		line-height: 30px;
	}

	.front-section__divider {
		width: 100%;
		margin: 15px 0;
	}

	.front-about__body {
		flex-direction: column;
		align-items: stretch;
		margin-top: 26px;
		gap: 0;
	}

	.front-about__left,
	.front-about__right {
		flex: 1 1 auto;
		width: auto;
	}

	.front-about__logo {
		width: 140px;
		height: 61px;
	}

	.front-about__intro {
		margin-top: 49px;
		font-size: 13px;
		line-height: 25px;
	}

	.front-about__btn {
		height: 40px;
		padding-inline: 5px;
	}

	/* --- ごあいさつ：縦積み、写真は見出しの直下 --- */
	.front-greeting {
		margin-top: 49px;
	}

	.front-greeting__box {
		flex-direction: column;
		/* テキスト列は display:contents なので、中身が直接この flex の子になる。
		   stretch にしないと各行が内容幅に縮んでしまう。 */
		align-items: stretch;
		min-height: 0;
		padding: 20px;
		box-sizing: border-box;
	}

	.front-greeting__text {
		flex: 1 1 auto;
		width: auto;
		padding: 0;
		display: contents;
	}

	.front-section__title--onYellow {
		order: 1;
	}

	.front-section__divider--onYellow {
		order: 2;
		width: 100%;
		margin: 15px 0;
	}

	.front-greeting__photo {
		order: 3;
		flex: 1 1 auto;
		width: 100%;
		height: auto;
	}

	.front-greeting__img {
		width: 100%;
		height: auto;
	}

	.front-greeting__org    { order: 4; margin-top: 20px; font-size: 13px; }
	.front-greeting__role   { order: 5; font-size: 13px; }
	.front-greeting__name   { order: 6; margin-top: 0; font-size: 16px; }
	.front-greeting__lead   { order: 7; margin-top: 30px; font-size: 13px; line-height: 25px; }
	.front-greeting__action { order: 8; margin-top: 15px; text-align: center; }

	.front-greeting__btn {
		width: 145px;
		height: 40px;
		font-size: 13px;
	}

	/* --- 動画：1カラム（本番は上83px・下33px、項目の間隔97px） --- */
	.front-movie {
		padding-block: 83px 33px;
	}

	/* バナー帯はモバイルだと上下30px */
	.front-banners .container {
		padding-block: 30px;
	}

	.front-movie > .container {
		padding-inline: 52px;
	}

	.front-movie__grid {
		grid-template-columns: 1fr;
		gap: 97px;
	}

	.front-movie__title {
		margin-bottom: 51px;
		font-size: 17px;
	}

	.front-movie__thumb img,
	.front-movie__video {
		width: 100%;
		height: auto;
		aspect-ratio: 272 / 153;
	}
}