/* =========================================================
   header-footer-v2.css
   myakuraku_top_design_draft.html のヘッダー/フッターデザインを
   全ページ共通のheader.php / footer.phpに適用するための上書きCSS。
   * 既存のマークアップ・クラス名・JS連動（#sp_menu_btn等）は変更せず、
     配色・フォント・ボタン形状などの見た目のみをここで上書きする。
   * カスタムプロパティは既存の :root 定義（gaibu.css等）と衝突しないよう
     すべて --mk- プレフィックスを付けている。
   ========================================================= */

:root {
	--mk-blue: #1B7FD4;
	--mk-blue-dk: #136BB8;
	--mk-blue-pale: #E9F3FA;
	--mk-red: #E53E2F;
	--mk-ink: #16202E;
	--mk-mut: #748699;
	--mk-line: #D5E3EF;
	--mk-line-dk: #B9CFE0;
}

/* ---------- ヘッダー（PC） ---------- */
#header,
.sp_menu_right {
	font-family: 'Noto Sans JP', sans-serif;
}

#header {
	background: rgba(255, 255, 255, .97);
	border-top: none;
}

#header .pc_head .logo a img {
	filter: none;
}

/* サイト共通CSSの justify-content:space-between + flex:1 だと項目数が
   5個に減った際に間隔が間延びするため、draft同様の固定gapに変更する */
#header .pc_head nav ul.gnav {
	flex: none;
	justify-content: flex-start;
	gap: 26px;
	margin-right: 30px;
}

#header .pc_head nav ul.gnav li a {
	color: var(--mk-ink);
	font-weight: 700;
}

#header .pc_head nav ul.gnav li a:hover {
	color: var(--mk-blue);
}

/* 「無料プランを試す」：青いピルボタン */
#header .pc_head nav a.free {
	background: var(--mk-blue);
	border-radius: 100px;
	padding: 9px 20px;
	font-size: 13.5px;
}

body.is-pc #header .pc_head nav a.free:hover {
	background: var(--mk-blue-dk);
}

/* 「ログイン」：ボタンではなくテキストリンク */
#header .pc_head nav a.login {
	background: none;
	color: var(--mk-ink);
	padding: 8px 6px;
	font-size: 13.5px;
}

body.is-pc #header .pc_head nav a.login:hover {
	background: none;
	color: var(--mk-blue);
}

/* 「お役立ち資料」：白地+枠線のピルボタン（新規追加） */
#header .pc_head nav a.doc-link {
	color: var(--mk-ink);
	background: #fff;
	border: 1px solid var(--mk-line-dk);
	text-align: center;
	display: block;
	padding: 8px 19px;
	border-radius: 100px;
	white-space: nowrap;
	font-weight: 700;
	font-size: 13.5px;
	transition: .3s ease;
}

body.is-pc #header .pc_head nav a.doc-link:hover {
	border-color: var(--mk-blue);
	color: var(--mk-blue);
}

/* ---------- ヘッダー（SPメニュー） ---------- */
.sp_menu_right {
	background: #fff;
}

.sp_menu_right ul.nav li a {
	color: var(--mk-ink);
}

.sp_menu_right ul.nav li a:hover {
	color: var(--mk-blue);
}

#header .sp_menu_right div.btns {
	flex-wrap: wrap;
}

#header .sp_menu_right a.free {
	background: var(--mk-blue);
	border-radius: 100px;
	flex: 1;
}

#header .sp_menu_right a.free:hover {
	background: var(--mk-blue-dk);
}

#header .sp_menu_right a.login {
	background: none;
	color: var(--mk-ink);
	border: 1px solid var(--mk-line-dk);
	border-radius: 100px;
	flex: 1;
}

#header .sp_menu_right a.login:hover {
	color: var(--mk-blue);
	border-color: var(--mk-blue);
}

#header .sp_menu_right a.doc-link {
	display: block;
	flex: 1 1 100%;
	order: -1;
	text-align: center;
	color: var(--mk-ink);
	background: #fff;
	border: 1px solid var(--mk-line-dk);
	border-radius: 100px;
	padding: 8px 10px;
	font-weight: 700;
	white-space: nowrap;
	margin-bottom: 8px;
}

.menu_line {
	background: var(--mk-ink);
}

/* ---------- フッター ---------- */
footer[role="contentinfo"] {
	font-family: 'Noto Sans JP', sans-serif;
	background: #fff;
	border-top: 1px solid var(--mk-line-dk);
	padding: 54px 0 28px;
	font-size: 13px;
	color: var(--mk-mut);
}

footer[role="contentinfo"] .f-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

footer[role="contentinfo"] .f-top {
	display: flex;
	justify-content: space-between;
	gap: 44px;
	flex-wrap: wrap;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--mk-line);
}

footer[role="contentinfo"] .f-brand .f-logo {
	display: block;
	font-size: 25px;
	font-weight: 900;
	margin-bottom: 12px;
}

footer[role="contentinfo"] .f-brand .f-logo .m {
	color: var(--mk-blue);
}

footer[role="contentinfo"] .f-brand .f-logo .r {
	color: var(--mk-red);
}

footer[role="contentinfo"] .f-co {
	font-size: 12.5px;
	line-height: 1.9;
	color: var(--mk-mut);
}

footer[role="contentinfo"] .f-links {
	display: flex;
	gap: 56px;
	flex-wrap: wrap;
}

footer[role="contentinfo"] .f-col h5 {
	font-size: 11.5px;
	font-weight: 900;
	letter-spacing: .1em;
	color: var(--mk-ink);
	margin-bottom: 13px;
}

footer[role="contentinfo"] .f-col a {
	display: block;
	font-size: 13px;
	color: var(--mk-mut);
	padding: 5px 0;
	transition: .14s;
}

footer[role="contentinfo"] .f-col a:hover {
	color: var(--mk-blue);
}

footer[role="contentinfo"] .f-btm {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: 22px;
	font-size: 11.5px;
	color: #9FB6C9;
}

footer[role="contentinfo"] .f-btm a {
	color: #9FB6C9;
	text-decoration: underline;
}

footer[role="contentinfo"] .f-btm a:hover {
	color: var(--mk-blue);
}

footer[role="contentinfo"] .copy {
	display: none;
}

@media (max-width: 780px) {
	footer[role="contentinfo"] .f-top {
		flex-direction: column;
	}

	footer[role="contentinfo"] .f-links {
		gap: 30px 40px;
	}
}