@charset "UTF-8";

/* ==========================================================================
   layout.css — サイト共通ヘッダー / フッター

   本番 https://jc766.com/ をブラウザで実測した値に合わせている
   （ビューポート 1440px、コンテンツ幅 1160px）。

   ヘッダー   外枠 白 / 高さ100px、内側 1160px センタリング / 高さ60px（上下20px）
              左カラム 600px（ロゴ + 社名）、右カラム 560px（入会案内 + ハンバーガー、gap 30px）
   フッター   1段目 1160px / padding-top 200px、2段目 グラデーション帯 60px
   ========================================================================== */

/* --------------------------------------------------------------------------
   ヘッダー
   -------------------------------------------------------------------------- */

.site-header {
	background: var(--scjc-white);
	position: relative;
	z-index: 100;
}

/* 高さ100px = 中身60px + 上下20px。
   border-box にしておかないと、タブレット幅で足す左右パディングが
   幅に上乗せされて画面をはみ出す。 */
.site-header__inner {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: var(--scjc-container);
	height: 100px;
	margin-inline: auto;
	padding-block: 20px;
	box-sizing: border-box;
}

/* 左：ロゴ + 社名 */

.site-header__brand {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	flex: 0 0 600px;
	width: 600px;
	height: 60px;
}

.site-header__logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	line-height: 1;
}

.site-header__logo img {
	width: 135px;
	height: 60px;
	object-fit: contain;
}

/* 本番は block 積み上げ（h3 24px + h2 30px）で行の上端に揃っている */
.site-header__name {
	display: block;
	margin: 0;
	color: #000;
}

.site-header__name-sub,
.site-header__name-main,
.site-header__name-member {
	display: block;
}

.site-header__name-sub {
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
}

.site-header__name-main {
	font-size: 22px;
	font-weight: 700;
	line-height: 30px;
}

/* メンバー専用ヘッダーのみ表示される3行目 */
.site-header__name-member {
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--scjc-blue);
}

/* 右：入会案内 + ハンバーガー */

.site-header__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 30px;
	flex: 1 1 auto;
	height: 60px;
}

.site-header__cta {
	margin: 0;
}

/* 入会案内ボタン。本番は 215x50 / padding 10px 40px / gap 5px、
   中に電球アイコン25pxと白文字24px 500 が横並び。 */
.site-header__cta .btn--cta {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	width: 215px;
	height: 50px;
	padding: 10px 40px;
	background: var(--scjc-btn);
	text-decoration: none;
	border-radius: 0;
	box-sizing: border-box;
	white-space: nowrap;
}

.btn--cta__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 25px;
	width: 25px;
	height: 25px;
}

.btn--cta__icon svg {
	width: 100%;
	height: 100%;
	fill: var(--scjc-white);
}

.btn--cta__label {
	color: var(--scjc-white);
	font-size: 24px;
	font-weight: 500;
	line-height: 24px;
}

.site-header__cta .btn--cta:hover {
	opacity: 0.88;
}

/* ハンバーガーの外枠。
   本番はアイコン(32x26)の上端が行の上端から21pxの位置にある。
   本番の実装は line-height に依存したベースライン配置で、フォントメトリクスに
   左右されて再現が不安定なため、こちらでは位置を直接指定して一致させる。 */
.site-header__actions .hamburger-menu-wrapper {
	align-self: flex-start;
	line-height: 1;
}

/* hamburger.css 側が PC/SP の出し分けで .hamburger-menu-wrapper.pc に
   display を指定しているため、外枠ではなくアイコン自身で位置を決める。
   アイコンを block 化してベースラインの影響を切り、行の上端から21px下げる。 */
.site-header__actions .hamburger-icon {
	display: flex;
	margin-top: 21px;
}

/* 検索はハンバーガーメニュー内にあるので、ヘッダー直下には出さない */
.site-header__search {
	display: none;
}

/* --------------------------------------------------------------------------
   メイン
   -------------------------------------------------------------------------- */

.site-main {
	display: block;
}

/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */

.site-footer {
	background: var(--scjc-white);
}

.site-footer__inner {
	width: 100%;
	max-width: var(--scjc-container);
	margin-inline: auto;
	padding-top: 200px;
}

/* 本番のフッター1段目は 200px(padding-top) + 125px(本体) = 325px。
   その下に30pxの空きを置いてコピーライト帯(60px)が続き、合計415pxになる。 */
.site-footer__row {
	display: flex;
	align-items: flex-start;
	width: 100%;
}

/* 左：ロゴ */
.site-footer__brand {
	flex: 0 0 284px;
	padding-left: 27px;
}

.site-footer__logo img {
	width: 230px;
	height: 100px;
	object-fit: contain;
}

/* 中：社名 + 住所 */
.site-footer__org {
	flex: 0 0 438px;
	color: var(--scjc-text);
}

.site-footer__org-name {
	margin: 0;
	font-size: 17px;
	font-weight: 500;
	line-height: 30px;
}

.site-footer__address {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 19px;
	font-style: normal;
}

.site-footer__address a {
	color: inherit;
	text-decoration: none;
}

/* 右：SNS + サブリンク */
.site-footer__side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	flex: 1 1 auto;
}

.site-footer__sns {
	display: flex;
	align-items: center;
	gap: 0;
}

.site-footer__sns a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	color: var(--scjc-blue);
}

.site-footer__sns svg {
	width: 25px;
	height: 25px;
	fill: currentColor;
}

.site-footer__sublinks {
	margin: 0;
	color: #888;
	font-size: 17px;
	font-weight: 500;
	line-height: 24px;
}

.site-footer__sublinks a {
	color: inherit;
	text-decoration: none;
}

.site-footer__sublinks a:hover {
	text-decoration: underline;
}

/* コピーライト帯 */

.site-footer__bar {
	margin-top: 30px;
	background-image: linear-gradient(90deg, #2f9cd8 0%, #6ec5ce 100%);
}

.site-footer__bar-inner {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: var(--scjc-container);
	height: 60px;
	margin-inline: auto;
}

.site-footer__copyright {
	margin: 0;
	color: var(--scjc-white);
	font-size: 10px;
	font-weight: 700;
	line-height: 15px;
	text-align: left;
}

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

@media (max-width: 1201px) {
	/* 本番タブレット(768px)の実測:
	   ヘッダー100px / 内側 708px @x23（上23px・高さ55px）
	   ロゴ 120x55 / 社名 18px(lh14) + 22px(lh18)
	   入会案内 215x50（アイコン23px・文字20px）/ ハンバーガー 50x50 @y23 */
	.site-header__inner {
		height: 100px;
		padding-block: 23px 22px;
		padding-inline: var(--scjc-container-padding);
	}

	.site-header__brand {
		flex: 0 0 auto;
		width: auto;
		gap: 10px;
		height: 55px;
	}

	.site-header__logo img {
		width: 120px;
		height: 55px;
	}

	/* 本番は社名ブロックが行の上端から6px下、2行の間隔が10px */
	.site-header__name {
		padding-top: 6px;
	}

	.site-header__name-sub {
		font-size: 18px;
		line-height: 14px;
	}

	.site-header__name-main {
		margin-top: 10px;
		font-size: 22px;
		line-height: 18px;
	}

	.site-header__actions {
		align-items: flex-start;
		gap: 20px;
		height: 55px;
	}

	/* タブレットでは中身が中央寄せになり、左右パディングは無い */
	.site-header__cta .btn--cta {
		justify-content: center;
		gap: 0;
		height: 50px;
		padding: 0;
	}

	.btn--cta__icon {
		flex: 0 0 23px;
		width: 23px;
		height: 23px;
	}

	.btn--cta__label {
		font-size: 20px;
		line-height: 20px;
	}

	.site-footer__inner,
	.site-footer__bar-inner {
		padding-inline: var(--scjc-container-padding);
	}

	.site-footer__inner {
		padding-top: 100px;
	}

	.site-footer__row {
		flex-wrap: wrap;
		gap: 32px;
	}

	.site-footer__brand,
	.site-footer__org {
		flex: 0 0 auto;
		padding-left: 0;
	}
}

/* ハンバーガーは1024px以下でSP版(50x50)に切り替わる（hamburger.css の指定）。
   デスクトップ用に入れている21pxの下げは、その領域では解除する。 */
@media (max-width: 1024px) {
	.site-header__actions .hamburger-menu-wrapper {
		align-self: center;
	}

	.site-header__actions .hamburger-icon {
		margin-top: 0;
	}
}

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

@media (max-width: 750px) {
	/* 本番モバイル(375px)の実測:
	   ヘッダー 375x52 / 内側 356 は左19pxから右端まで
	   ロゴ 67x30 @(19,11) / 社名 11px+13px @x95
	   入会案内 50x52 @x275（黄色の正方形・アイコン+10px白文字）
	   ハンバーガー 50x50 @x325 */
	.site-header__inner {
		height: 52px;
		padding-block: 0;
		padding-inline: 19px 0;
		max-width: none;
	}

	.site-header__brand {
		align-items: center;
		gap: 5px;
		height: 52px;
	}

	.site-header__logo img {
		width: 67px;
		height: 30px;
	}

	.site-header__name {
		padding-left: 5px;
	}

	.site-header__name-sub {
		font-size: 11px;
		line-height: 14px;
	}

	.site-header__name-main {
		font-size: 13px;
		font-weight: 700;
		line-height: 14px;
	}

	.site-header__actions {
		gap: 0;
		height: 52px;
	}

	/* 入会案内は50pxの正方形になり、アイコンの下に10pxの文字が入る。
	   本番はアイコン上端15px・文字上端37px（＝下から5px）。 */
	.site-header__cta .btn--cta {
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		gap: 5px;
		width: 50px;
		height: 52px;
		padding: 5px;
	}

	.btn--cta__icon {
		flex: 0 0 17px;
		width: 17px;
		height: 17px;
	}

	.btn--cta__label {
		font-size: 10px;
		line-height: 10px;
	}

	/* ハンバーガーは50x50。デスクトップ用の位置指定を解除する */
	.site-header__actions .hamburger-menu-wrapper {
		align-self: center;
	}

	.site-header__actions .hamburger-icon {
		margin-top: 0;
	}

	/* --- フッター（本番モバイル375pxの実測）---
	   全体 375x519 / 上パディング130px
	   ロゴ 150x65 @x19 → 社名(+20) → 住所(gap0) → SNS(+30) → サブリンク(+12)
	   → 帯(+33, 高さ60) */
	.site-footer__inner {
		padding-top: 130px;
	}

	.site-footer__row {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.site-footer__brand,
	.site-footer__org,
	.site-footer__side {
		flex: 1 1 auto;
		width: auto;
		padding-left: 0;
	}

	.site-footer__logo img {
		width: 150px;
		height: 65px;
	}

	.site-footer__org {
		margin-top: 20px;
	}

	/* SNSリンクは45pxの箱に25pxのアイコンが中央配置される。
	   本番はアイコン上端が住所の30px下（＝箱の上端は20px下）。 */
	.site-footer__side {
		align-items: flex-start;
		margin-top: 20px;
	}

	.site-footer__sublinks {
		margin-top: 2px;
		font-size: 13px;
		line-height: 19px;
	}

	.site-footer__bar {
		margin-top: 33px;
	}

	.site-footer__bar-inner {
		height: 60px;
		padding-inline: 11px;
		max-width: none;
	}

	.site-footer__copyright {
		font-size: 13px;
		font-weight: 700;
		line-height: 20px;
	}
}