@layer theme {

	:root {
		--pls-brand-red: #ee141e;
		--pls-header-height-mobile: 86px;

		--navy: #1A2B5E;
		--navy-dark: #111E45;
		--navy-light: #2a3f7e;
		--gold: #C8960C;
		--gold-light: #e6ab14;
		--white: #FFFFFF;
		--gray-bg: #F5F6F8;
		--gray-text: #333333;
		--gray-muted: #666666;
		--gray-border: #DDDDDD;
		--font: 'Noto Sans JP', sans-serif;
	}

	body {
		font-family: var(--font);
		font-size: 15px;
		line-height: 1.7;
		color: var(--gray-text);
		background: var(--white);
	}

	.skip-link {
		position: absolute;
		top: 0.5rem;
		left: 0.5rem;
		z-index: 1080;
	}

	html {
		scroll-behavior: smooth;
	}

	@media (prefers-reduced-motion: reduce) {
		html {
			scroll-behavior: auto;
		}
	}

	[id] {
		scroll-margin-top: var(--pls-header-height-mobile);
	}

	.site-logo-text {
		font-size: 1.25rem;
		line-height: 1.45;
	}

	@media (max-width: 768px) {
		.site-logo-text {
			display: block;
			line-height: 0.5;
			white-space: nowrap;
		}
	}

	@media (max-width: 540px) {
		.site-logo {
			max-width: 100px;
			height: auto;
		}

		.site-logo-text {
			font-size: 1rem;
		}
	}

	.site-header .primary-nav > li > a {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.25rem;
		padding: 0.5rem;
		color: #212529;
		text-align: center;
		text-decoration: none;
	}

	.site-header .primary-nav > li > a::before {
		content: '';
		display: block;
		width: 29px;
		height: 29px;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}

	.site-header .primary-nav > .nav-carlife > a::before {
		background-image: url('../brand/nav_car.svg');
	}

	.site-header .primary-nav > .nav-dailylife > a::before {
		background-image: url('../brand/nav_headset.svg');
	}

	.site-header .primary-nav > .nav-houjin > a::before {
		background-image: url('../brand/nav_bus.svg');
	}

	.site-header .primary-nav > .nav-houjin > a {
		font-weight: 700;
	}

	.site-header .primary-nav > .nav-carlife span,
	.site-header .primary-nav > .nav-dailylife span {
		font-family: 'Open Sans Condensed', sans-serif;
		font-weight: 700;
	}

	/* レガシーは <br class="d-md-none"> で折っている。3.75em は 12px で 45px、15px で 56px。
	   LIFE CARE が収まり、法人のお客様 は3文字で折れる唯一の範囲 */
	@media (max-width: 767.98px) {
		.site-header .primary-nav span {
			max-width: 3.75em;
		}
	}

	@media (max-width: 768px) {
		.site-header .primary-nav > li > a {
			line-height: 1.28;
		}
	}

	@media (max-width: 540px) {
		.site-header .primary-nav span {
			font-size: 0.75rem;
		}
	}

	.site-header .primary-nav > li > a {
		position: relative;
	}

	.site-header .primary-nav > li > a::after {
		position: absolute;
		bottom: -3px;
		left: 0;
		content: '';
		width: 100%;
		height: 3px;
		background: #333;
		transform: scale(0, 1);
		transform-origin: left top;
		transition: transform 0.3s;
	}

	.site-header .primary-nav > li > a:hover::after,
	.site-header .primary-nav > .current-menu-item > a::after,
	.site-header .primary-nav > .current-menu-ancestor > a::after {
		transform: scale(1, 1);
	}

	@media (min-width: 992px) {
		.site-header .primary-nav > li > a::after {
			bottom: -12px;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.site-header .primary-nav > li > a::after {
			transition: none;
		}
	}

	@media (min-width: 768px) {
		.site-header .primary-nav > li > a {
			flex-direction: row;
			gap: 0.5rem;
		}
	}

	.site-footer {
		background: #F5F5F7;
	}

	/* line-height の !important は暫定。法人トップのページ CSS に #premio_houjin h2 があり、
	   body の id 経由でフッターまで届く。@scope の自動付与を入れたら外す */
	.site-footer .footer-column-title {
		font-size: 1.25rem;
		line-height: 1.2 !important;
	}

	.site-footer .footer-column-title a {
		line-height: 1.4;
	}

	.site-footer .footer-carlife .footer-column-title,
	.site-footer .footer-dailylife .footer-column-title {
		font-family: 'Open Sans Condensed', sans-serif;
	}

	.site-footer .footer-column ul {
		margin-bottom: 1rem;
	}

	.site-footer .footer-column li {
		margin-bottom: 0.25rem;
	}

	/* 共通メニューの直後に続く CPRA の同意設定リンク（footer.php）。
	   リストの最後の項目と同じ間隔で並べる */
	.site-footer .footer-general ul {
		margin-bottom: 0.25rem;
	}

	.site-footer .ot-sdk-show-settings {
		display: block;
		margin-top: 0.25rem;
	}

	/* レガシーは _inc/footer.php のインライン style で .footer-carlife にだけ付けている */
	@media (max-width: 767px) {
		.site-footer .footer-carlife {
			margin-top: 30px;
		}
	}

	.site-footer a {
		color: #6c757d;
		text-decoration: none;
	}

	.site-footer a:hover,
	.site-footer a:focus {
		text-decoration: underline;
	}

	.page-top {
		position: fixed;
		right: 1rem;
		bottom: 1rem;
		z-index: 1030;
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: var(--pls-brand-red);
		color: #fff;
		opacity: 0;
		transform: translateY(0.5rem);
		transition: opacity 0.2s ease, transform 0.2s ease;
	}

	.page-top[hidden] {
		display: none;
	}

	.page-top.is-visible {
		opacity: 1;
		transform: translateY(0);
	}

	@media (prefers-reduced-motion: reduce) {
		.page-top {
			transition: none;
		}
	}

	/* スクロール連動のフェードイン。JS が .reveal を監視して .is-revealed を付ける */
	.reveal {
		opacity: 0;
		transform: translateY(1rem);
		transition: opacity 0.6s ease, transform 0.6s ease;
	}

	.reveal.is-revealed {
		opacity: 1;
		transform: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.reveal {
			opacity: 1;
			transform: none;
			transition: none;
		}
	}

	/* レガシーの汎用クラス。本文の見出しで使われている */
	.f_en_narrow {
		font-family: 'Open Sans Condensed', sans-serif;
		font-weight: 700;
	}

	/* 本番は Font Awesome 5 Pro。同梱しているのは Free で、Regular の字形を
	   持つアイコンがごく一部しかない。レガシーが far で書いていたこの3つは
	   Free には Regular が無く、指定どおりだと空白になるので Solid を使う */
	.far.fa-angle-left,
	.far.fa-angle-right,
	.far.fa-times {
		font-weight: 900;
	}

	/* 事例などのモーダル。レガシーは Bootstrap の modal（jQuery 依存）だったので
	   <dialog> に置き換えた。開閉は theme.js */
	.cls-dialog {
		width: min(90vw, 600px);
		max-height: 90vh;
		padding: 0;
		border: 0;
		border-radius: 6px;
		overflow: auto;
	}

	.cls-dialog::backdrop {
		background: rgba(0, 0, 0, 0.5);
	}

	.cls-dialog img {
		display: block;
		width: 100%;
		height: auto;
	}
}