@charset "UTF-8";

/* reset.css 追記 */
a {
	text-decoration: none;
}

img {
	max-width: 100%;
	vertical-align: top;
}

svg {
	width: 100%;
	height: 100%;
	vertical-align: top;

	&.svg-sprite {
		/* display: none; */
		position: absolute;
		z-index: -200;
		width: 0px;
		height: 0px;
		overflow: hidden;
	}
}


/* 
 CSS変数
 https://zenn.dev/catnose99/articles/ee6787afe2182c
 https://zenn.dev/wagashi_osushi/books/94efd21a66ccaa/viewer/394571
 */
:root {
	--color-base: #FFFFFF;
	--color-main: #3371AD;
	--color-sub: #EBF1F7;
	--color-accent: #3371AD;
	--color-text: #3B3B3B;

	--font-noto-sans-jp: "Noto Sans JP", sans-serif;

	/* WordPress 管理バー対策 */
	--global--admin-bar--height: 0px;

	/* scroll対策 */
	--header--height: 0px;

	/* font-size指定 */
	--fs-title: 24px;
	--fs-basic: 16px;
	--fs-small: 14px;

	@media (min-width: 600px) {
		--fs-title: 32px;
		--fs-basic: 20px;
		--fs-small: 16px;
	}
}


/* 
 scroll-padding
 全体に対してheader分の余白確保
 */
html {
	height: auto;
	scroll-behavior: smooth;
	scroll-padding-top: var(--header--height);
}

/*
 scroll-margin
 特定要素に対してheader分の余白確保
 */
:target {
	scroll-margin-top: var(--header--height);
}


body {
	/* 基本設定：font */
	font-family: var(--font-noto-sans-jp);
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;

	/* 基本設定：color */
	color: var(--color-text);
	background-color: var(--color-base);

	/* header, footerを常に画面上下端に配置 */
	position: relative;
	height: auto;
	min-height: 100dvh;
	margin: 0;

	>header {
		position: sticky;
		top: var(--global--admin-bar--height);
		z-index: 20;

		ul {
			margin: 0;
			padding: 0;
		}
	}

	>footer {
		position: sticky;
		top: 100vh;
		z-index: 16;

		ul {
			margin: 0;
			padding: 0;
		}
	}

	/*
	 [word-break: auto-phrase;] 
	 CJKテキストを適切な位置で改行。意図しない改行の可能性有。<wbr>の使用を検討
	 [text-wrap: balance;] 文字数を揃えて改行
	 https://blanche-toile.com/web/css-text-wrap-balance
	
	 英字URLに対しては個別対応が必要
	 (table-layoutは癖があるため注意)
	 https://qiita.com/debiru/items/0a349bee3669b776d8e2
	 https://qiita.com/ist-a-k/items/2b1385574e1a1babdde1
	
	 overflow-wrap: anywhere;
	*/
	/*
	h1, h2, h3, h4, h5, h6 {
		font-weight: 600;
		word-break: keep-all;
		overflow-wrap: break-word;
	}
	*/
}


/*
 WordPressでAdmin Barと固定したヘッダーを重ねない方法 – kwLog
 https://blog.makotokw.com/2021/02/21/wordpress-sticky-header-with-admin-bar/
 */
:has(.admin-bar) {
	--global--admin-bar--height: 32px;

	@media only screen and (max-width: 782px) {
		--global--admin-bar--height: 46px;
	}
}

#wpadminbar {
	position: fixed !important;
}






/* svg-sprite [ratio] */
.logo-ccj {
	aspect-ratio: 60 / 60;
}

.careconne_e-contract_lplogo {
	aspect-ratio: 230 / 186;
}