@charset "utf-8";
/* ====================================================================

	Default
	
==================================================================== */
:root {
	--main-width: 1200px;
	--bw: 1600;/* ブラウザ幅の想定値（デザインアートボードの横幅） */
	--px: clamp(0.75px, (100vw / var(--bw)), 1px); /* 許容範囲をclampで表現 */
	/* --px: (100vw / var(--bw)); 教養範囲なしバージョン */

	--m: calc(15 * var(--px));
    --m2: calc( var(--m) * 2 );
    --m3: calc( var(--m) * 3 );
    --m4: calc( var(--m) * 4 );
    --m5: calc( var(--m) * 5 );
    --m6: calc( var(--m) * 6 );
    --m7: calc( var(--m) * 7 );
    --m8: calc( var(--m) * 8 );
    --m9: calc( var(--m) * 9 );
    --m10: calc( var(--m) * 10 );
    --ms: calc( var(--m) / 3 * 2 );

	--black: #080808;
	--dark: #242424;
	--gray: #525252;
	--slate: #a3a3a3;
	--light: #e3e3e3;
	--pale: #fafafa;
	--green: #b1ff14;
	--cyan: #61ecff;
	--sky: #d6faff;
	--emerald: #14ffb5;
	--red: #ff4f3b;

	--text: var(--black, black);
	--border: var(--gray, lightgray);
	--base: var(--pale, white);
	--action: var(--green, blue);
	--alert: var(--red, red);


	--wrap-padding-inline: var(--m4);
    --header-height: calc(100 * var(--px));

	--huge-size: calc(75 * var(--px));
	--tagline-size: calc(48 * var(--px));
	--label-size: calc(36 * var(--px));
	--headline-size: calc(21 * var(--px));
	--regular-size: calc(16 * var(--px));
	--date-size: calc(13 * var(--px));
	--small-size: calc(12 * var(--px));


	-webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
	font-feature-settings: "palt";

	scroll-snap-type: y proximity;
	scroll-padding-top: var(--m2, 30px);
	/*
		scroll-behavior: smooth;
		上記プロパティを設定すると、フォームバリデーション時にsubmitからバリデーションエラー箇所までスクロールが必要な場合エラーメッセージが表示されない
		-> jsでスムーススクロールを実装
	*/
	
	interpolate-size: allow-keywords;/* width, heightの伸び縮みアニメーションを有効化する */

	--transition: 0.3s 0s ease;
}
:target {
	scroll-margin-block: 2lh;
}

/** スマホ想定の可変型単位計算 */
@media screen and (max-width: 767px) {
	:root {
		--bw: 375;
		--main-width: 100%;

		--m: calc(12 * var(--px));

		--wrap-padding-inline: var(--m2);
		--header-height: calc(70 * var(--px));

		--huge-size: calc(54 * var(--px));
		--tagline-size: calc(30 * var(--px));
		--label-size: calc(26 * var(--px));
		--headline-size: calc(21 * var(--px));
		--regular-size: calc(15 * var(--px));
		--date-size: calc(11 * var(--px));
		--small-size: calc(10 * var(--px));
	}
}

body {
	width: 100svw;
	background: black;

	font-family: "Noto Sans JP",
				 -apple-system, blinkMacSystemFont, /* Macの欧文はSan Francisco (OS X 10.11以降) */
                 'Helvetica Neue', /* Macの欧文 (OS X 10.10以前) */
                 'Segoe UI',       /* Windowsの欧文 */
				 'Hiragino Kaku Gothic ProN', /* Macのヒラギノ */
                 YuGothicM,        /* Windows8.1以上は游ゴシック */
                 YuGothic,         /* Macの游ゴシック */
                 Meiryo,           /* 游ゴシックが入っていないWindows */
                 sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;

	overflow-x: clip;
	position: relative;

}
body:not(#home) {
	scroll-padding-top: var(--header-height, 0px);
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}


* {
	box-sizing: border-box;
}
/** 疑似要素   
-------------------------------------------------------------------- */
*::before,
*::after {
	content: "";
	display: none;
	box-sizing: border-box;
}

/**  PC/SP出し分け
-------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	:is(.sp, .sp-only) {
		display: none;
	}
}
@media screen and (max-width: 767px) {
	:is(.pc, .pc-only) {
		display: none;
	}
}
/** 改行   
-------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	:is(br, wbr)[sp] {
		display: none;
	}
	:is(br, wbr)[pc] {
		display: revert;
	}
}
@media screen and (max-width: 767px) {
	:is(br, wbr)[pc] {
		display: none;
	}
	:is(br, wbr)[sp] {
		display: revert;
	}
}

button, img, iframe, video, input, optgroup, select, textarea {
	vertical-align: top;
}
button {
	display: block;
}

/** イメージ   
-------------------------------------------------------------------- */
img,
iframe,
video {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
}
img {
	outline: 0;
	-o-object-fit: contain;
	object-fit: contain;
}
picture {
	line-height: 0;
	overflow: hidden;
}
:where(a, button, .button) svg {
	display: inline-block;
	max-width: 100%;
	max-height: 1lh;
	fill: currentColor;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}


/** リンク   
-------------------------------------------------------------------- */
a {
	color: inherit;
    text-decoration: none;
}
a:has(img) {
	display: block;
}
a:not([class]) {
	color: currentColor;
	text-decoration: underline;
	text-underline-offset: 4px;
	position :relative;
}
a:not([class])::after {
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: content-box;
	padding-block: 0.1lh;
	padding-inline: 0.3ic;
	border-radius: 3px;
	background: var(var(--normal-anchor-bg-hover), var(--light));
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	transition: var(--transition);
}
@media (any-hover: hover) {
	a {
    	transition: var(--transition);
	}
	a:not([class]) {
		text-decoration: underline;
	}
	a:not([class]):hover {
		text-decoration: none;
	}
	a:not([class]):hover::after {
		opacity: 1;
	}
}

a:where(:link) {
	color: var(--link-color, inherit);
}
a:where(:visited) {
	color: var(--visited-color, var(--link-color, inherit));
}
a:where(:focus) {
	background: var(--focus-bg, var(--hover-bg, inherit));
	color: var(--focus-color, var(--hover-color, inherit));
}
@media (any-hover: hover) {
	a:where(:hover) {
		background: var(--hover-bg, inherit);
		color: var(--hover-color, inherit);
	}
}
@media screen and (min-width: 768px) {
    a[href*="tel:"] {
        pointer-events: none;
    }
}
@media screen and (max-width: 767px) {}


/** ボタン   
-------------------------------------------------------------------- */
.button {
    display: block;
    width: fit-content;
	min-width: 360px;
	padding-block: 0.75lh;
    padding-inline: 2ic calc(33px + 3ic);
	border-radius: 6px;
    background: var(--button-bg, var(--action, inherit));
	box-shadow: inset 0 0 0 4px var(--button-bg, var(--action, inherit)), inset 0 0 0 5px rgb(0 0 0 / 0.1);

	font-size: inherit;
    color: var(--button-color, black);
	line-height: 1.5;
	font-weight: 700;

	position: relative;
	z-index: 1;
}
.button {
	display: flex;
	align-items: center;
}
.button:not(:has(svg, i, .icon))::after {
	display: block;
	width: 33px;
	height: 1px;
	background: currentColor;
	position: absolute;
	right: 1ic;
	top: 50%;
	translate: 0 -50%;
}

i.icon {
	display: block;
	width: 1lh;
	height: 1lh;
	position: absolute;
	right: 1ic;
	top: 50%;
	translate: 0 -50%;
}
i.external::before,
i.external::after {
	display: block;
	width: 1.064em;
	height: 0.8em;
	box-shadow: inset 0 0 0 1px currentColor;
	position: absolute;
	left: 50%;
	top: 50%;
}
i.external::before {
	border-radius: 2px;
	translate: -50% -50%;
}
i.external::after {
	border-radius: 3px;
	clip-path: polygon(0 2px, calc(100% - 3px) 2px, calc(100% - 3px) 100%, 0 100%);
	translate: calc(-50% - 3px) calc(-50% + 3px);
}

@media (any-hover: hover) {
	.button,
	i::before,
	i::after {
		transition: var(--transition);
	}
	.button:hover {
		background: var(--button-hover-bg, transparent);
		box-shadow: inset 0 0 0 2px currentColor;
		color: var(--button-hover-color, var(--button-color, white));
	}
	.button :is(svg, i, .icon),
	.button:not(:has(svg, i, .icon))::after {
		transition: translate 0.4s 0s ease-in, var(--transition);
	}
	.button:not(:has(svg, i, .icon)):hover::after {
		translate: 75% -50%;
	}
	.button:not(:has(svg, i, .icon)):hover::after {
		height: 2px;
	}
	.button:hover i.external::before,
	.button:hover i.external::after {
		box-shadow: inset 0 0 0 1px currentColor;
	}
	.button:hover i.external::before {
		translate: calc(-50% + 2px) calc(-50% - 2px);
	}
}
:where(a, button, .button) svg:first-child {
	margin-right: 0.3ic;
}
@media screen and (max-width: 767px) {
	.button {
		min-width: unset;
		width: 100%;
		padding-block: 0.75lh;
	}
	.button:has(svg) {
		justify-content: center;
	}
}










/** ラッパー   
-------------------------------------------------------------------- */
.wrap {
	width: auto;
	max-width: var(--wrap-width, var(--main-width));
	box-sizing: border-box;
	padding-inline: var(--wrap-padding-inline);
	margin-inline: auto;

	position: relative;
	z-index: 0;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}



/** テキスト   
-------------------------------------------------------------------- */
:is(.tagline, .label, .headline, .subline) {
	font-weight: 700;
	line-height: 1.5;
}
.tagline {
	color: white;
	font-size: var(--tagline-size);
	letter-spacing: 0.05ic;
}

.label {
	font-size: var(--label-size);
	letter-spacing: 0.05ic;
}
.label.en {
	color: var(--gray);
	letter-spacing: 0.5em;
}
.label.center {
	text-align: center;
}
.label.en.center {
	text-indent: 0.5em;
}
.label:has( + p) {
	margin-bottom: 0.5lh;
}
.label.center + p {
	text-align: center;
}

.headline {
	font-size: var(--headline-size);
	letter-spacing: 0.05ic;
}
.neon {
	color: var(--accent-color, var(--green));
	text-shadow: 0 0 20px rgb(from currentColor r g b / 0.6);
}
.small {
	font-size: 75%;
}
.note {
	display: block;
	text-indent: -1ic;
	padding-left: 1ic;
}
.lato {
	font-family: "Lato", sans-serif;
	font-weight: 900;
	font-style: italic;
}

ul {
	line-height: 1.5;
}
li {
	position: relative;
    padding-left: 2ic;
}
li::before {
    display: block;
    position: absolute;
    left: 0;
    top: 0.2lh;
    width: 1.16ic;
    height: 1ic;
    background: url('../imgs/common/icon-list.svg') no-repeat center / contain;
}
li + li {
	margin-top: 1lh;
}



/** ヘッダー  / フッター
-------------------------------------------------------------------- */
header, footer {
	padding-inline: var(--wrap-padding-inline);
	color: white;
}
header, footer .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
:is(header, footer) .logo {
	display: block;
}
header {
	width: 100%;
	height: var(--header-height);

	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;

	transition: var(--transition);
}
header.is_lower {
	background: rgb(0 0 0 / 0.1);
	backdrop-filter: blur(3px);
	mix-blend-mode: difference;
}

footer {
	background: black;
	--normal-anchor-bg-hover: rgb(from var(--light) r g b / 0.2);
}
footer .wrap {
	max-width: unset;
	padding-inline: 0;
}
footer .container {
	border-top: 1px solid currentColor;
	padding-bottom: var(--m10);
}
footer nav.global {
	height: var(--header-height);
}
footer nav.global nav.sub {
	width: max-content;
	background: rgb(from var(--dark) r g b / 0.6);
	position: absolute;
	bottom: 100%;
	transition: var(--transition);
}
footer nav.global .group:not(.is_active) nav.sub {
	pointer-events: none;
	opacity: 0;
	z-index: -1;
}
footer nav.other {
	text-align: center;
	font-size: var(--small-size);
	margin-block: var(--m2);
}
footer nav.other a {
	text-decoration: none;
}
footer nav.other a + a {
	margin-left: 2ic;
}
footer .copyright {
	padding-bottom: var(--m6);
	font-size: var(--small-size);
	text-align: center;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
}

@media (any-hover: hover) {
	:is(header, footer) :is(a, button):hover {
		color: var(--action);
	}
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	header {
		padding-right: 0;
	}
	header .logo {
		width: 70%;
	}
	footer .container {
		padding-block: var(--m2) var(--m6);
		display: block;
	}
	footer .logo {
		width: 50%;
		margin-inline: auto;
		color: var(--action);
	}
}


/** ナビゲーション
-------------------------------------------------------------------- */
nav.global {
	height: 100%;
	display: flex;
	justify-content: flex-end;
}
nav.global > * {
	height: 100%;
	padding-inline: var(--m2);
	display: flex;
	justify-content: center;
	align-items: center;
}
nav.global :is(a, .group button) {
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.03em;
}
nav.global .group {
	--currentColor: currentColor;
	position: relative;
}
header nav.global .group button {
	padding-right: 1.2em;
	position: relative;
}
header nav.global .group button::before,
header nav.global .group button::after {
	display: block;
	position: absolute;
}
header nav.global .group button::before {
	width: 0.35em;
	height: 0.35em;
	border-right: 1px solid var(--black);
	border-bottom: 1px solid var(--black);
	rotate: 45deg;
	right: 0.4em;
	bottom: 0;
	translate: 50% -75%;
	z-index: 2;
}
header nav.global .group button::after {
	width: 0.8em;
	height: 0.8em;
	background: currentColor;
	border-radius: 0.8em;
	right: 0;
	bottom: 0;
	z-index: 1;
}
header nav.global nav.sub {
	width: max-content;
	background: rgb(from var(--dark) r g b / 0.6);
	position: absolute;
	left: 0;
	top: 100%;
	transition: var(--transition);
}
header nav.global .group:not(.is_active) nav.sub {
	pointer-events: none;
	opacity: 0;
	z-index: -1;
}
 nav.global nav.sub a {
	display: block;
	padding: var(--m) var(--m2);
	line-height: 1.5;
	font-size: 75%;
	letter-spacing: 0.2em;
	color: rgb(255 255 255 / 0.5);
}
nav.global nav.sub a hr {
	border-color: var(--gray);
}
nav.global nav.sub a span {
	display: block;
	margin-top: 0.3em;
	font-size: 133%;
	letter-spacing: 0;
	color: white;
}
nav.global nav.sub *:has(> i.icon) {
	position: relative;
}

@media (any-hover: hover) {
	nav.global .group {
		transition: var(--transition);
	}
	nav.global > *:hover {
		background: rgb(from var(--dark) r g b / 0.5);
	}
	nav.global .group button:hover::before {
		border-color: currentColor;
		translate: 50% -50%;
		transition: border-color 0.3s 0s ease, translate 0.4s 0s ease-in-out;
	}
	nav.global .group button:hover::after {
		opacity: 0;
		transition: var(--transition);
	}
}
@media screen and (max-width: 767px) {
	nav.global {
		flex-direction: column;
		justify-content: flex-start;
	}
	header nav.global {
		width: 100svw;
		height: calc(100svh - var(--header-height));
		padding-bottom: var(--m2);
		overflow-y: scroll;
		background: rgb(255 255 255 / 0.95);
		backdrop-filter: blur(3px);

		color: var(--black);

		position: absolute;
		left: 0;
		top: var(--header-height);
		bottom: 0;
		z-index: 10;
		transition: var(--transition);
	}
	footer nav.global {
		margin-top: var(--m2);
		height: auto;
	}

	nav.global > * {
		height: auto;
		padding: var(--m2);
		display: block;
		position: relative;
	}
	footer nav.global > * {
		height: auto;
		padding-inline: 0;
	}

	nav.global a {
		position: relative;
	}
	nav.global a::before {
		display: block;
		width: 8px;
		height: 8px;
		border-top: 1px solid currentColor;
		border-right: 1px solid currentColor;
		rotate: 45deg;

		position: absolute;
		right: var(--m);
		top: 50%;
		translate: 0 -50%;
	}
	header nav.global a::before {
		right: var(--m3);
	}
	nav.global > * + *::after {
		display: block;
		width: 100%;
		height: 1px;
		background: currentColor;
		position: absolute;
		left: 50%;
		top: 0;
		translate: -50% -50%;
	}
	header nav.global > * + *::after {
		width: calc(100% - var(--m4));
	}
	footer nav.global > * + *::after {
		background: var(--gray);
	}

	footer nav.global .group {
		width: 100%;
		display: block;
	}
	footer nav.global nav.sub,
	footer nav.global .group:not(.is_active) nav.sub {
		width: 100%;
		position: static;
		background: transparent;
		opacity: 1;
		pointer-events: auto;
		z-index: auto;
	}
	nav.global .group button {
		width: 100%;
		transition: var(--transition);
	}
	header nav.global .group button::before {
		border-color: white;
		right: var(--m);
		bottom: 0.5lh;
		translate: 50% 25%;
		transition: var(--transition);
	}
	header nav.global .group.is_active button::before {
		rotate: -135deg;
		translate: 50% 75%;
	}
	header nav.global .group button::after {
		width: var(--m2);
		height: 1lh;
		border-radius: 3px;
	}
	nav.global .group.is_active button,
	footer nav.global .group button {
		color: var(--slate);
		margin-bottom: var(--m2);
	}


	header nav.global nav.sub {
		width: 100%;
		padding-bottom: 0;
		background: transparent;
		position: static;
	}
	header nav.global .group:not(.is_active) nav.sub {
		height: 0;
		padding: 0;
	}
	nav.global nav.sub a {
		padding-block: var(--m) var(--m2);
		padding-inline: 0 var(--m);
		font-size: 75%;
		letter-spacing: 0.05em;
		color: var(--gray);
	}
	footer nav.global nav.sub a {
		padding-inline: 0;
		color: rgb(255 255 255 / 0.5);
	}

	nav.global nav.sub a + a {
		border-top: 1px solid currentColor;
		padding-block: var(--m2) var(--m);
	}
	footer nav.global nav.sub a + a {
		border-color: var(--gray);
	}
	nav.global nav.sub a hr {
		display: none;
	}
	nav.global nav.sub a::before {
		right: var(--m);
	}
	nav.global nav.sub *:has(> i.icon) {
		position: static;
	}
	nav.global nav.sub a:has(i.icon)::before {
		display: none;
	}
	nav.global nav.sub a i.icon {
		right: 0;
	}
	header nav.global nav.sub a {
		color: var(--gray);
	}
	header nav.global nav.sub a span {
		margin-top: 0.3em;
		display: block;
		font-size: 133%;
		color: var(--black);
	}
	footer nav.global nav.sub a span {
		margin-top: 0.3em;
		display: block;
		font-size: 133%;
		color: white;
	}

	

}

/** ヘッダー/ハンバーガー   
-------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	header .burger {
		display: none;
	}
}
@media screen and (max-width: 767px) {
	body.is_show_navigation {
		overflow: clip;
	}
	header .burger {
		width: var(--header-height);
		height: var(--header-height);
		position: relative;
	}
	body:not(.is_show_navigation) header::after,
	body:not(.is_show_navigation) header nav.global {
		pointer-events: none;
		opacity: 0;
		z-index: -1;
	}
	body:is(.is_show_navigation) header::after ,
	body:is(.is_show_navigation) header nav.global {
		pointer-events: all;
		opacity: 1;
	}

	/** ハンバーガー：２本線→バツ */
	header .burger::before,
	header .burger::after {
		display: block;
		width: calc(100% - var(--m3));
		height: 1px;
		background: white;

		position: absolute;
		left: 50%;
		top: 50%;
		translate: -50% -50%;

		transition: var(--transition);
	}
	body:not(.is_show_navigation) header .burger::before {
		margin-top: -5px;
	}
	body:not(.is_show_navigation) header .burger::after {
		margin-top: 5px;
	}
	body:is(.is_show_navigation) header .burger::before {
		rotate: 45deg;
	}
	body:is(.is_show_navigation) header .burger::after {
		rotate: -45deg;
	}
}





/** セクション   
-------------------------------------------------------------------- */
main.content section {
	position: relative;
	z-index: 0;
}
main.content p {
	text-align: justify;
}
section:not(.section) {
	/*min-height: 100svh;*/
}



@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	main.content section {
		overflow-x: clip;
	}
}






/** ヒーローエリア
---------------------------------------------------------*/
section.hero {
	padding-top: var(--header-height);
	padding-bottom: var(--m6);
	min-height: 580px;
	background: black;
	overflow: hidden;
	position: relative;
}
section.hero .wrap {
	padding-top: var(--m8);
}
section.hero .label {
	color: var(--gray);
	margin-bottom: 0.3lh;
}
section.hero .tagline {
	letter-spacing: 0.05em;
	margin-bottom: 0.5lh;
}

body.page section#hero .tagline {
    font-size: var(--tagline-size);
}

section.hero .headline {
	color: var(--green);
	letter-spacing: 0.05em;
	font-weight: 700;
}

section#hero .background {
    width: 48%;
	position: absolute;
    right: 0;
    top: 50%;
	translate: 0 -50%;
	z-index: -1;
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	section.hero {
		min-height: 320px;
		padding-bottom: var(--m4);
	}
	section.hero .wrap {
		padding-top: var(--m3);
	}
	section.hero .label {
		font-size: calc(var(--label-size) * 0.75);
	}
	section#hero .background {
		width: 70%;
	}
}






/** 冒頭見出し
---------------------------------------------------------*/
section.overview {
	min-height: unset;
	background: black;
}
section.overview .wrap {
	min-height: calc(740 * var(--px));
	display: flex;
	align-items: center;
}
section.overview .label {
	font-size: calc(var(--label-size) * 0.6);
	margin-bottom: var(--m4);
}
section.overview .tagline {
	margin-bottom: 0.75lh;
}
section.overview .tagline + p {
	color: white;
}
section.overview .background {
	position: absolute;
	z-index: -1;
}
body.page section.overview .background {
	width: calc(1184 * var(--px));
	right: 0;
	top: 50%;
	translate: 0 -50%;
	z-index: -1;
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	section.overview .wrap {
		min-height: calc(400 * var(--px));
	}
	body.page section.overview .background {
		width: calc(400 * var(--px));
	}
}






/** 大枠
---------------------------------------------------------*/
section.section {}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}




/** CTA   
-------------------------------------------------------------------- */
section#cta {
	padding-block: var(--m8);
	position: relative;
}
section#cta .wrap {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--m7);
}
section#cta .heading {
	flex: 1 0 auto;
}
section#cta .label {
	margin-bottom: 0.75lh;
}
section#cta .nav-contact {
	--button-hover-color: var(--black);
	flex: 0 0 auto;
}
section#cta .background {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	section#cta {
		padding-block: var(--m4);
	}
	section#cta .wrap {
		display: block;
	}
	section#cta .heading {}
	section#cta .label {}
	section#cta .nav-contact {
		margin-top: var(--m4);
	}
	section#cta .background {}
}


/** 枠付き見出し   
-------------------------------------------------------------------- */

.heading:where(.frame) .headline {
	padding-block: 0.3lh;
	padding-inline: calc(var(--label-size) * 1.3) 1em;
	border-left: 10px solid var(--accent-color, var(--green));
	margin-left: calc(var(--label-size) * -1.3 - 10px);
}
.heading:where(.frame) .headline + .label {
	padding-top: 0.5lh;
}
.heading:where(.frame) .label {
    width: fit-content;
    padding-block: 0.8lh;
    padding-inline: calc(var(--label-size) * 1.3) 1em;
    border-left: 10px solid var(--accent-color, var(--green));
    margin-left: calc(var(--label-size) * -1.3 - 10px);
    margin-bottom: 0.5lh;
    color: white;
    position: relative;
}
.heading:where(.frame) .label::after {
    display: block;
    width: 100svw;
    height: calc(100% - 0.6lh);
    border: 1px solid var(--frame-color, var(--gray));
    position: absolute;
    right: 0;
    top: 0.3lh;
}
.heading:where(.frame) .label + p {}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
}


/** videoと代替サムネイル、キャプション
-------------------------------------------------------------------- */
video.movie {
    cursor: pointer;
    width: 100%;
    position: relative;
	object-fit: cover;
}
.movie img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    pointer-events: none;
    transition: var(--transition);
}
.movie.is_playing img {
    opacity: 0;
}
.movie .caption {
    width: 100%;
    padding-block: 0.5lh;
    font-size: calc(var(--headline-size) * 0.85);
    font-weight: 700;
    line-height: 1.5;
    color: var(--gray);
    text-align: right;
    position: absolute;
    left: 0;
    top: 100%;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	.movie:is(.is_playing)::before,
	.movie:is(.is_playing)::after {
		pointer-events: none;
		opacity: 0;
	}
	.movie::before,
	.movie::after {
		display: block;
		position: absolute;
		left: 50%;
		top: 50%;
		transition: var(--transition);
	}
	.movie::before {
		width: 12px;
		height: 18px;
		background: black;
		clip-path: polygon(0 0, 100% 50%, 0 100%);
		translate: -35% -50%;
		z-index: 5;
	}
	.movie::after {
		width: 36px;
		height: 36px;
		border-radius: 3px;
		background: var(--action);
		translate: -50% -50%;
		z-index: 4;
	}
}







/** 汎用セクション   
-------------------------------------------------------------------- */
section.general {
	padding-block: var(--m10) var(--m8);
	background: radial-gradient(circle at center top, var(--pale) 0%, var(--pale) 21%, var(--light) 100%);
	color: var(--black);
}
section.general.black {
	background: black;
	color: white;
}
section.general a.button {
	margin-top: var(--m10);
	margin-inline: auto;
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}


/** バナーエリア   
-------------------------------------------------------------------- */
.banners {
	padding-block: var(--m6);
	background: black;
}
.banners .container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--m4);
}
.banners a.banner {
	position: relative;
}
.banners a.banner::after {
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: content-box;
	border: 1px solid white;
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	transition: var(--transition);
}
@media (any-hover: hover) {
	.banners a.banner:hover::after {
		border-width: 3px;
		padding: 12px;
		opacity: 1;
	}
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}





/** シングル＆テンプレなし固定ページ   
-------------------------------------------------------------------- */
.article {
    padding-block: var(--m6) var(--m8);
    background: radial-gradient(circle at center top, var(--pale) 0%, var(--pale) 21%, var(--light) 100%);
}
.article .nav-back {
    margin-top: var(--m10);
    margin-inline: auto;
    --button-hover-color: var(--black);
}
.article :is(h2, h3, h4, h5, h6) {
	font-weight: 700;
	margin-block: 2lh 0.5lh;
}
.article p {
    line-height: 1.75;
}
.article p + p {
    margin-top: 1lh;
}
.article :is(ol, ul) {
	margin-block: 1lh;
	padding-left: 1.25ic;
}
.article ol {
	list-style: decimal;
}
.article ul {
	list-style: disc;
}
.article li {
	padding-left: 0;
}
.article li::before {
	display: none;
}
.article li + li {
	margin-top: 0.5lh;
}
.article figure {
    margin-bottom: var(--m4);
}
.article * + figure {
    margin-top: var(--m4);
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}


/** 404   
-------------------------------------------------------------------- */
body#error404 .general .headline {
	margin-block: var(--m4) 1lh;
	padding-bottom: 0.5lh;
	border-bottom: 1px solid currentColor;
}
body#error404 nav.sitemap {
	padding-inline: var(--m2);
}
body#error404 nav.sitemap a {
	display: block;
	width: fit-content;
	position: relative;
}
body#error404 nav.sitemap a::before {
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: content-box;
	padding-block: 0.1lh;
	padding-inline: 0.3ic;
	border-radius: 3px;
	background: var(--light);
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	transition: var(--transition);
}
body#error404 nav.sitemap a::after {
	display: inline;
	content: "(https://changevision.jp" attr(href) ")";
	margin-left: 1em;
	font-size: 75%;
	color: var(--slate);
	text-decoration: none;
}

body#error404 nav.sitemap :is(a, .group) + :is(a, .group) {
	margin-top: 0.75lh;
}
body#error404 .group button {
	color: var(--slate);
	cursor: auto;
}
body#error404 nav.sub {
	padding-top: 0.5lh;
	margin-left: 2em;
}
body#error404 nav.sub hr {
	display: none;
}
body#error404 nav.sub span::before {
	display: inline;
	content: "-";
	margin-inline: 1em;
	text-decoration: none;
}

@media (any-hover: hover) {
	body#error404 nav.sitemap a {
		
		transition: var(--transition);
	}
	body#error404 nav.sitemap a:hover::before {
		opacity: 1;
	}
}