@charset "utf-8";
/* ==========================================================================================================
   ksp-header / ksp-footer — 完全新規・独立スタイルシート
   HTML/CSS/JSをすべてゼロから作り直したヘッダー・フッター専用のCSS。
   このファイル単体で完結し、root/common/css/base.css（レガシーの共有スタイルシート）には
   一切依存しない・参照しない・追記もしない。テーマ内の css/ ディレクトリに置くことで、
   サイト共通の古いアセット群（/common/）からも独立させている。

   ・PC（1301px～）:  html の font-size を 62.5%（1rem=10px）に固定
   ・タブレット（751px～1300px）: html の font-size を 0.75vw にし、PCと同じ比率のまま縮小表示
   ・SP（～750px）: 62.5% に戻し、@media (max-width:750px) で個別に調整
   （参考実装: geowintec-sanyo プロジェクトの common_pc.css / common_sp.css の方式を踏襲）
   ========================================================================================================== */

:root {
	--ksp-color-accent: #1c6eae;
	--ksp-color-accent-dark: #124d78;
	--ksp-color-header-bg: #17181b;
	--ksp-radius-sm: 0.6rem;
	--ksp-radius-lg: 1.6rem;
	--ksp-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.1);
}

/* サードパーティ埋め込み（WordPressの自己oEmbed等）が生成する position:absolute の
   計測用要素は、祖先に position 指定が無いと初期包含ブロック（viewport）基準で配置され、
   overflow:hidden をどこに置いても局所的には防げない。html 自体で確実に断ち切る。 */
html { overflow-x: hidden; font-size: 62.5%; scroll-behavior: smooth; }
@media screen and (max-width: 1300px) and (min-width: 751px) {
	html { font-size: 0.75vw; }
}
@media screen and (max-width: 750px) {
	html { font-size: 62.5%; }
}

.ksp-header,
.ksp-header * { box-sizing: border-box; }

.ksp-header { position: sticky; top: 0; left: 0; z-index: 200; width: 100%; background: var(--ksp-color-header-bg); box-shadow: var(--ksp-shadow); font-family: 'Noto Sans JP', sans-serif; }

.ksp-header__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; max-width: 100rem; margin: 0 auto; padding: 1.2rem 2rem; }
.ksp-header__logo { flex: 0 1 auto; min-width: 0; display: block; line-height: 0; }
.ksp-header__logo img { display: block; height: 4rem; width: auto; max-width: 100%; }

.ksp-header__search { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; }
.ksp-header__search-form { display: flex; align-items: center; width: 100%; max-width: 24rem; background: rgba(255, 255, 255, 0.1); border-radius: 999rem; padding: 0.3rem; }
.ksp-header__search-input { flex: 1 1 auto; min-width: 0; width: 0; margin: 0; padding: 0.9rem 1.4rem; border: none; border-radius: 999rem 0 0 999rem; background: transparent; color: #fff; font-size: 1.4rem; font-family: inherit; line-height: normal; outline: none; -webkit-appearance: none; appearance: none; }
.ksp-header__search-input::placeholder { color: rgba(255, 255, 255, 0.5); }
.ksp-header__search-submit { flex: 0 0 auto; width: 3.4rem; height: 3.4rem; margin: 0; padding: 0; border: none; border-radius: 50%; background-color: var(--ksp-color-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='19' y1='19' x2='15.2' y2='15.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 1.6rem; text-indent: -9999px; cursor: pointer; outline: none; transition: background-color .2s ease; }
.ksp-header__search-submit:hover { background-color: var(--ksp-color-accent-dark); }

.ksp-header__menu-toggle { display: none; }

.ksp-header__nav { border-top: 0.1rem solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); }
.ksp-header__nav-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; max-width: 100rem; margin: 0 auto; padding: 0.6rem 1.2rem; list-style: none; }
.ksp-header__nav-list li { flex: 0 0 auto; font-size: 1.3rem; }
.ksp-header__nav-list a { display: flex; align-items: center; height: 3.6rem; padding: 0 1.6rem; border-radius: 999rem; color: rgba(255, 255, 255, 0.72); text-decoration: none; white-space: nowrap; transition: background .2s ease, color .2s ease; }
.ksp-header__nav-list a:hover { background: var(--ksp-color-accent); color: #fff; }

.ksp-footer,
.ksp-footer * { box-sizing: border-box; }

.ksp-footer { background: var(--ksp-color-header-bg); padding: 6rem 2rem 10rem; font-family: 'Noto Sans JP', sans-serif; }
.ksp-footer__inner { max-width: 100rem; margin: 0 auto; }

.ksp-footer__about { padding: 3.2rem; border-radius: var(--ksp-radius-lg); background: rgba(255, 255, 255, 0.04); }
.ksp-footer__about-title { margin: 0 0 2rem; padding-bottom: 1.2rem; border-bottom: 0.1rem solid rgba(255, 255, 255, 0.12); color: #fff; font-size: 1.5rem; font-weight: 600; letter-spacing: 0.04em; }
.ksp-footer__about-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2.4rem; }
.ksp-footer__about-head { display: flex; flex: 0 0 auto; align-items: flex-start; gap: 2.4rem; }
.ksp-footer__avatar { flex: 0 0 auto; display: block; width: 8rem; height: 8rem; border-radius: 50%; object-fit: cover; }
.ksp-footer__profile { flex: 0 0 auto; min-width: 14rem; margin: 0; font-size: 1.3rem; }
.ksp-footer__profile dt { margin: 0 0 0.2rem; line-height: 1.4; color: rgba(255, 255, 255, 0.55); font-size: 1.2rem; }
.ksp-footer__profile dd { margin: 0 0 1.2rem; color: #fff; font-weight: 600; }
.ksp-footer__bio { flex: 1 1 30rem; min-width: 0; font-size: 1.4rem; line-height: 1.8; }
.ksp-footer__bio p { margin: 0 0 1.6rem; color: rgba(255, 255, 255, 0.8); }
.ksp-footer__link { display: inline-flex; align-items: center; height: 3.6rem; padding: 0 1.8rem; border-radius: var(--ksp-radius-sm); background: rgba(255, 255, 255, 0.1); color: #fff; text-decoration: none; transition: background .2s ease; }
.ksp-footer__link:hover { background: var(--ksp-color-accent); color: #fff; text-decoration: none; }

.ksp-footer__copyright { margin: 3.2rem 0 0; color: rgba(255, 255, 255, 0.5); font-size: 1.2rem; text-align: center; }

.ksp-footer__totop { position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 999; display: flex; align-items: center; justify-content: center; width: 4.8rem; height: 4.8rem; border: none; border-radius: 50%; background-color: var(--ksp-color-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 15 12 9 18 15'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 1.8rem; cursor: pointer; box-shadow: var(--ksp-shadow); transition: background-color .2s ease, transform .2s ease; }
.ksp-footer__totop:hover { background-color: var(--ksp-color-accent-dark); transform: translateY(-0.2rem); }

/* パンくず・ページタイトル（header.php が出力、ヘッダー直下に表示される共通チラム） */
.ksp-breadcrumb,
.ksp-breadcrumb * { box-sizing: border-box; }
.ksp-breadcrumb { border-bottom: 0.1rem solid #e6e6e6; background: #f5f6f7; }
.ksp-breadcrumb ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; max-width: 100rem; margin: 0 auto; padding: 1.2rem 2rem; list-style: none; font-size: 1.2rem; }
.ksp-breadcrumb li { display: flex; align-items: center; gap: 0.8rem; color: #6b6b6b; }
.ksp-breadcrumb li:not(:first-child)::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #c9c9c9; }
.ksp-breadcrumb a { color: #6b6b6b; text-decoration: none; }
.ksp-breadcrumb a:hover { color: var(--ksp-color-accent); }

.ksp-page-title,
.ksp-page-title * { box-sizing: border-box; }
.ksp-page-title { display: block; text-decoration: none; }
.ksp-page-title__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; min-height: 12rem; padding: 3.2rem 2rem; background: #fff; text-align: center; }
.ksp-page-title__heading { margin: 0; font-size: 2.4rem; font-weight: 700; color: #222222; line-height: 1.5; }
.ksp-page-title__heading .keyword { color: var(--ksp-color-accent); }
.ksp-page-title__heading .result { color: var(--ksp-color-accent); font-weight: 700; }
.ksp-page-title__desc { max-width: 72rem; font-size: 1.3rem; line-height: 1.7; color: #6b6b6b; }

.ksp-ad-slot { margin: 2.4rem auto; max-width: 100rem; padding: 0 2rem; text-align: center; overflow: hidden; box-sizing: border-box; }
.ksp-ad-slot ins.adsbygoogle { max-width: 100%; }

@media screen and (max-width: 750px) {
	.ksp-breadcrumb ul { padding: 1rem 1.6rem; font-size: 1.1rem; }
	.ksp-page-title__inner { min-height: 9rem; padding: 2.4rem 1.6rem; }
	.ksp-page-title__heading { font-size: 1.9rem; }

	.ksp-header__bar-inner { padding: 1rem 1.6rem; gap: 0.8rem; }
	.ksp-header__logo img { height: 3.2rem; }
	.ksp-header__search-form { max-width: 15rem; }
	.ksp-header__search-input { padding: 0.7rem 1rem; font-size: 1.2rem; }
	.ksp-header__search-submit { width: 2.8rem; height: 2.8rem; background-size: 1.3rem; }

	.ksp-header__menu-toggle { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; width: 4rem; height: 4rem; margin: 0; padding: 0; border: none; border-radius: var(--ksp-radius-sm); background: rgba(255, 255, 255, 0.1); cursor: pointer; }
	.ksp-header__menu-toggle-bar { display: block; width: 1.8rem; height: 0.2rem; border-radius: 999rem; background: #fff; transition: transform .2s ease, opacity .2s ease; }
	.ksp-header__menu-toggle-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
	.ksp-header.is-nav-open .ksp-header__menu-toggle-bar:nth-child(1) { transform: translateY(0.6rem) rotate(45deg); }
	.ksp-header.is-nav-open .ksp-header__menu-toggle-bar:nth-child(2) { opacity: 0; }
	.ksp-header.is-nav-open .ksp-header__menu-toggle-bar:nth-child(3) { transform: translateY(-0.6rem) rotate(-45deg); }

	.ksp-header__nav { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 6rem); overflow-y: auto; border-top: 0.1rem solid rgba(255, 255, 255, 0.08); background: var(--ksp-color-header-bg); box-shadow: var(--ksp-shadow); }
	.ksp-header.is-nav-open .ksp-header__nav { display: block; }
	.ksp-header__nav-list { flex-direction: column; align-items: stretch; max-width: none; padding: 0.8rem; gap: 0.2rem; }
	.ksp-header__nav-list li { flex: 1 1 auto; }
	.ksp-header__nav-list a { justify-content: flex-start; height: 4.4rem; padding: 0 1.6rem; font-size: 1.3rem; }

	.ksp-footer { padding: 3.2rem 1.6rem 7rem; }
	.ksp-footer__about { padding: 2rem; }
	.ksp-footer__about-title { margin-bottom: 1.4rem; padding-bottom: 0.8rem; }
	.ksp-footer__about-body { flex-direction: column; align-items: stretch; gap: 1.2rem; }
	/* flex-basis:30rem はPCの横並びレイアウト用（残り幅を埋めるための「幅」の目安）。
	   column方向ではflex-basisは高さの目安になってしまい、実際の文章より背が高い
	   空白ができる原因になっていたため、SPではコンテンツ量に応じた高さに戻す。 */
	.ksp-footer__bio { flex-basis: auto; }
	.ksp-footer__profile dd { margin-bottom: 0.8rem; }
	.ksp-footer__profile dd:last-child { margin-bottom: 0; }
	.ksp-footer__bio p { margin-bottom: 1.2rem; }
	.ksp-footer__bio p:last-child { margin-bottom: 0; }
	.ksp-footer__copyright { margin-top: 2rem; }
	.ksp-footer__totop { right: 1.2rem; bottom: 1.2rem; width: 4.2rem; height: 4.2rem; }
}