@charset "utf-8";
/* =============================================================
   CLOUD HOMe 共通ヘッダー / フッター / ページトップ
   ・全て #ch- / .ch- で名前空間化。既存テーマCSSと衝突しません。
   ・自己完結（base.css に依存しない）ため、全ページで単独読み込みOK。
   ・rem は html{font-size:62.5%}（既存テーマが指定済み）前提で 1rem=10px。
   ============================================================= */

/* ---- 変数 ---- */
:root {
	--ch-navy: #253846;
	--ch-blue: #7ab9da;
}

/* ---- スコープ内リセット（ch外には影響しません） ---- */
#ch-header, #ch-header *,
#ch-footer, #ch-footer *,
#ch-pagetop, #ch-pagetop * {
	box-sizing: border-box;
}
#ch-header, #ch-footer {
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 1.6;
	color: #333;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}
#ch-header h1 {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: 1;
}
#ch-header ul, #ch-footer ul,
#ch-header li, #ch-footer li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#ch-header a, #ch-footer a {
	text-decoration: none;
	transition: .3s;
}
#ch-header a:hover, #ch-footer a:hover {
	opacity: .7;
}
#ch-header img, #ch-footer img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	border: 0;
}
#ch-header button {
	font-family: inherit;
}

/* ---- header ---- */
#ch-header {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	background: #fff;
	z-index: 1000;
}
.ch-header__inner {
	width: 90%;
	max-width: 1760px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 90px;
}
.ch-logo {
	width: 240px;
	line-height: 1;
}
.ch-logo a {
	display: block;
}
.ch-gnav__list {
	display: flex;
	align-items: center;
	gap: 34px;
}
.ch-gnav__list a {
	position: relative;
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--ch-navy);
	padding: 6px 0;
}

@media screen and (max-width: 1120px) {
	.ch-gnav__list {
	gap: 20px;
}
	.ch-gnav__list a {
		font-size: 1.2rem;
	}
}

@media screen and (max-width: 1120px) {
.ch-logo {
	width: 180px;
}
}

@media screen and (max-width: 800px) {
	.ch-header__inner {
		height: 70px;
		width: 95%;
	}
	.ch-logo {
	width: 150px;
}
	.ch-gnav__list {
	gap: 10px;
}
	.ch-gnav__list a {
		font-size: 1.1rem;
	}

}



.ch-gnav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--ch-blue);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s;
}
.ch-gnav__list a.is-current::after,
.ch-gnav__list a:hover::after {
	transform: scaleX(1);
}
.ch-gnav__list a:hover {
	opacity: 1;
}
.ch-menu {
	display: none;
}

/* ---- footer ---- */
#ch-footer {
	background: var(--ch-navy);
	color: #fff;
	padding: 30px 0 20px;
}
.ch-footer__inner {
	width: 90%;
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	justify-content:flex-start;
	gap: 40px;
}
.ch-footer__logo {
	width: 250px;
	line-height: 1;
	margin-bottom: 26px;
}
/* SP専用の装飾ライン（PCでは非表示） */
.ch-footer__divider {
	display: none;
}
.ch-footer__lead {
	font-size: 1.4rem;
	line-height: 1.9;
	color: #dfe4e8;
}
.ch-footer__nav {
	display: flex;
	gap: 70px;
	padding-top: 10px;
	margin-left: 10%;
}
.ch-footer__nav ul {
	width: 210px;
}
.ch-footer__nav li {
	border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.ch-footer__nav li:last-child {
	border-bottom: none;
}
.ch-footer__nav a {
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	display: flex;
	align-items: center;
	padding: 11px 2px;
}
.ch-footer__nav a::before {
	content: "";
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	margin-right: 14px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	transform: rotate(45deg);
}
.ch-footer__nav a:hover {
	opacity: .7;
}
.ch-copyright {
	width: 90%;
	max-width: 1400px;
	margin: 40px auto 0;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .15);
	text-align: center;
	font-size: 1.2rem;
	color: #b8c0c7;
	letter-spacing: .04em;
}

/* ---- page top ---- */
#ch-pagetop {
	position: fixed;
	right: 10px;
	bottom: 10px;
	width: 40px;
	height: 40px;
	cursor: pointer;
	background: var(--ch-navy);
	border: 1px solid #fff;
	border-radius: 50px;
	z-index: 900;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s;
}
#ch-pagetop.is-show {
	opacity: 1;
	visibility: visible;
}
#ch-pagetop::before {
	position: absolute;
	display: block;
	content: "";
	width: 10px;
	height: 10px;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	transform: rotate(-45deg);
	top: 40%;
	bottom: 50%;
}

/* ================= responsive ================= */
@media screen and (max-width: 1000px) {
	.ch-footer__nav {
		gap: 40px;
		margin-left: 4%;
	}
}

@media screen and (max-width: 768px) {
	/* header */
	.ch-header__inner {
		height: 64px;
		width: 92%;
	}
	.ch-logo {
		width: 180px;
	}
	.ch-gnav {
		position: fixed;
		top: 64px;
		left: 0;
		width: 100%;
		height: calc(100vh - 64px);
		background: rgba(37, 56, 70, .97);
		padding: 30px 0;
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s;
		z-index: 999;
	}
	.ch-gnav.is-open {
		opacity: 1;
		visibility: visible;
	}
	.ch-gnav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.ch-gnav__list li {
		border-bottom: 1px solid rgba(255, 255, 255, .15);
	}
	.ch-gnav__list a {
		display: block;
		color: #fff;
		padding: 18px 8%;
		font-size: 1.6rem;
	}
	.ch-gnav__list a::after {
		display: none;
	}
	.ch-menu {
		display: block;
		position: relative;
		width: 34px;
		height: 26px;
		background: none;
		border: none;
		cursor: pointer;
		z-index: 1001;
	}
	.ch-menu span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 1px;
		background: var(--ch-navy);
		transition: .3s;
	}
	.ch-menu span:nth-child(1) { top: 0; }
	.ch-menu span:nth-child(2) { top: 12px; }
	.ch-menu span:nth-child(3) { top: 24px; }
	.ch-menu.is-active span { background: var(--ch-navy); }
	.ch-menu.is-active span:nth-child(1) { top: 12px; transform: rotate(45deg); }
	.ch-menu.is-active span:nth-child(2) { opacity: 0; }
	.ch-menu.is-active span:nth-child(3) { top: 12px; transform: rotate(-45deg); }

	/* footer（SP：中央寄せの縦積みレイアウト） */
	#ch-footer {
		padding: 44px 0 60px;
	}
	.ch-footer__inner {
		max-width: 760px;
		display: block;
	}
	.ch-footer__info {
		text-align: center;
	}
	.ch-footer__logo {
		width: 220px;
		margin: 0 auto;
	}
	.ch-footer__divider {
		display: block;
		width: 60px;
		height: 1px;
		background: rgba(255, 255, 255, .45);
		margin: 22px auto;
	}
	.ch-footer__lead {
		font-size: 1.6rem;
		line-height: 1.85;
		color: #fff;
		letter-spacing: .04em;
	}
	.ch-footer__nav {
		justify-content: center;
		gap: 24px;
		margin: 10px 0 0;
		padding-top: 0;
	}
	.ch-footer__nav ul {
		flex: 1 1 0;
		width: auto;
		max-width: 330px;
	}
	.ch-footer__nav a {
		font-size: 1.4rem;
		padding: 15px 2px;
	}
	.ch-footer__nav a::before {
		margin-right: 12px;
	}
	.ch-copyright {
		max-width: 760px;
		margin: 30px auto 0;
		padding-top: 24px;
		font-size: 1.1rem;
	}
}

@media screen and (max-width: 380px) {
	.ch-footer__nav {
		gap: 14px;
	}
	.ch-footer__nav a {
		font-size: 1.3rem;
	}
	.ch-footer__nav a::before {
		margin-right: 9px;
	}
}




.ch-sitemap {
	display: flex;
	margin-bottom: 100px;
}

.ch-sitemap ul {
	font-size: 1.8rem;
	margin-right: 10%;
	width: 25%;
}


.ch-sitemap ul li a {
	width: 100%;
	display: block;
	padding: 20px;
	border-bottom: 1px solid #d6d6d6;
	position: relative;
}

.ch-sitemap ul li a::after {
	display: block;
	content: "";
	width: 8px;
	height: 8px;
	border-top: 2px solid #666;
	border-right: 2px solid #666;
	transform: rotate(45deg);
	position: absolute;
	left: 0;
	top: 45%;
}


@media screen and (max-width: 768px) {
	.ch-sitemap {
		display: block;
	}
	.ch-sitemap ul {
		width: 100%;
		font-size: 1.4rem;
	}
	
}