@charset "utf-8";
:root {

	--black: #0f2433;
	--dark: #193b54;
	--blue-gray: #668094;
	--gray: #c8ccca;
	--light: #f5faf8;

	--emerald: #0aadad;
	--emerald-blue: #1d96b3;
	--blue: #3580b7;
	--pink: #e87979;

	--text: var(--black, black);
	--border: var(--gray, lightgray);
	--action: var(--emerald, blue);
	--alert: var(--pink, red);

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

	--transition: 0.2s 0s ease-out;


	--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 );


	--wrap-padding-inline: var(--m);
    --header-height: calc(90 * var(--px));

	--heading-large-size: 48px;
	--heading-medium-size: 36px;
	--heading-regular-size: 24px;
	--heading-small-size: 21px;
	--regular-size: 16px;
	--small-size: 12px;
}
/** スマホ想定の可変型単位計算 */
@media screen and (max-width: 767px) {
	:root {
		--bw: 375;
		--main-width: 100%;
		--header-height: calc(60 * var(--px));

		--heading-large-size: calc(30 * var(--px));
		--heading-medium-size: calc(24 * var(--px));
		--heading-regular-size: calc(21 * var(--px));
		--heading-small-size: calc(18 * var(--px));
		--regular-size: calc(15 * var(--px));
		--small-size: calc(11 * var(--px));
	}
}

:target {
	scroll-margin-block: 2lh;
}

body {
	width: 100svw;

	font-family: "Roboto", "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: var(--regular-size);
    font-weight: 400;
    line-height: 1.75;
	color: black;
	background: var(--light);
	overflow-x: clip;
	position: relative;
}
@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;
}



/** 改行   
-------------------------------------------------------------------- */
@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;
	}
}




/** テキスト   
-------------------------------------------------------------------- */
:is(h1, h2, h3, h4, h5, h6, a) {
	line-height: 1.5;
}
:is(h1, h2, h3, h4, h5, h6) {}
p {
	line-height: 1.75;
}
p + p:not([class]),
li + li {
	margin-top: 1lh;
}
b, strong {
	font-weight: inherit;
}

.small {
	font-size: 75%;
}
.marker {
	color: var(--marker-text-color, var(--blue));
	background: linear-gradient(to top, var(--lemon) , var(--lemon) 40%, transparent 40%, transparent);
}
.note {
    font-size: 75%;
	text-indent: -1ic;
	padding-left: 1ic;
}

.label {
	text-align: center;
}
:where(section, section .wrap) > .label {
	width: fit-content;
	margin-inline: auto;
	margin-bottom: var(--m4);
}
.label b {
	display: block;
	font-size: 45px;
	font-weight: inherit;
	letter-spacing: 0.03em;
}
.label span {
	font-size: var(--regular-size);
}
:is(.label, .headline) svg.icon {
	fill: currentColor;
}

.label.horizontal {
	display: flex;
	align-items: center;
	text-align: left;
}
.label.horizontal b {
	display: inline;
}
.label.horizontal b::after {
	content: "―";
	display: inline;
	margin-inline: 0.3ic 0.1ic;
}
.label.horizontal svg.icon {
	translate: 0 -15%;
}
.label.horizontal span {
	vertical-align: super;
}

@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
	p {
		text-align: justify;
	}
	.label b {
		font-size: calc(36 * var(--px));
		line-height: 1;
		margin-bottom: 0.2lh;
	}
}


/** リンク   
-------------------------------------------------------------------- */
a {
	color: inherit;
    text-decoration: none;
}
a:has(img) {
	display: block;
}
p a:not([class]) {
	color: currentColor;
	text-underline-offset: 4px;
}
@media (any-hover: hover) {
	a, button {
		transition: var(--transition);
	}
	a:hover {
		
	}
	p a:not([class]) {
		text-decoration: underline;
	}
	p a:not([class]):hover {
		color: var(--action);
		text-decoration: none;
	}
}


.button {
	display: block;
    margin-top: var(--m6);
	margin-inline: auto;
	width: fit-content;
	min-width: 300px;
	padding-block: 0.5lh;
	padding-inline: 2ic;
	background: var(--emerald);
	color: white;
	font-size: 21px;
	font-weight: 700;
	text-align: center;
}
.button svg.arrow {
	width: 0.75lh;
	fill: currentColor;
	vertical-align: text-top;
	margin-left: 0.5ic;
}

@media (any-hover: hover) {
	.button:hover {
		filter: brightness(120%);
	}
}
@media screen and (max-width: 767px) {
	.button {
		margin-top: var(--m3);
	}
}

/** イメージ   
-------------------------------------------------------------------- */
svg:is(.icon, .arrow, .symbol) {
	aspect-ratio: 1 / 1;
	display: inline-block;
}

img,
iframe {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	vertical-align: top;
}
img {
	outline: 0;
	-o-object-fit: contain;
	object-fit: contain;
}
picture {
	line-height: 0;
	overflow: hidden;
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}


/** ラッパー   
-------------------------------------------------------------------- */
.wrap {
	width: auto;
	max-width: var(--main-width);
	box-sizing: content-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) {}



/** セクション   
-------------------------------------------------------------------- */
main.content {}
section {
	padding-block: var(--m6);
	position: relative;
	z-index: 0;
}
section .background {
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	object-fit: cover;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	main.content {
		padding-top: var(--header-height);
	}
	section {
		padding-block: var(--m3);
	}
}






/** 共通スタイル   
-------------------------------------------------------------------- */
.gradient {
	overflow: clip;
	background: linear-gradient(160deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.1) 20%, transparent 20%, transparent 80%, rgb(255 255 255 / 0.1) 80%, rgb(255 255 255 / 0.1)),
				var(--gradient, linear-gradient(150deg, var(--emerald) 10%, var(--blue) 150%));
}
.gradient svg.symbol {
	width: calc(870 * var(--px));
	fill: rgb(from var(--black) r g b / 0.1);
	position: absolute;
	left: 55%;
	top: calc(-1 * var(--m8));
	z-index: -1;
}


.feather {
	position: relative;
}
.feather::after {
	display: block;
	width: var(--feather-width, calc(25 * var(--px)));
	height: var(--feather-height, calc(45 * var(--px)));
	border-inline: 1px solid currentColor;
	position: absolute;
	left: 0;
	top: 100%;
	transform: skewX(-45deg);
	transform-origin: left bottom;
}


@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	.gradient svg.symbol {
		width: calc(240 * var(--px));
		left: 45%;
		top: var(--m4);
	}
}



/** ヘッダー   
-------------------------------------------------------------------- */
header#header {
	background: white;
}
header#header .wrap {
	height: var(--header-height);
	position: static;
}
header#header .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
header#header .logo {
	width: calc(234 * var(--px));
}
header#header nav.global {
	height: 100%;
	display: flex;
	justify-content: flex-end;
}
header#header nav.global a {
	height: 100%;
	padding-inline: calc(20 * var(--px));
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
header#header nav.global b {
	display: block;
	font-weight: 500;
}
header#header nav.global .small {
	font-size: var(--small-size);
}
header#header nav.global .nav-contact {
	background: var(--pink);
	color: white;
}
header#header nav.global .nav-letter {
	background: var(--dark);
	color: white;
}
@media (any-hover: hover) {
	header#header nav.global a:not(.nav-contact, .nav-letter):hover {
		background: var(--action);
		color: white;
	}
	header#header nav.global .nav-contact:hover {
		filter: brightness(110%);
	}
	header#header nav.global .nav-letter:hover {
		filter: brightness(150%);
	}
}

@media screen and (min-width: 768px) {
	.burger {
		display: none;
	}
}
@media screen and (max-width: 767px) {
	header#header {
		position: fixed;
		top: 0;
		z-index: 10;
	}
	header#header .logo {
		width: 50%;
	}
	.burger {
		--size: var(--m2);
		display: block;
		width: var(--size);
		height: var(--size);
		position: relative;
	}
	.burger::before,
	.burger::after {
		display: block;
		width: 100%;
		height: 2px;
		background: var(--black);
		position: absolute;
		left: 0;
		transition: var(--transition);
	}
	.burger::before {
		top: 9px;
	}
	.burger::after {
		bottom: 9px;
	}
	header#header nav.global {
		transition: var(--transition);
		flex-direction: column;
		justify-content: space-between;
		width: 100svw;
		height: calc(100dvh - var(--header-height));
		background: rgb(from white r g b / 0.9);
		position: fixed;
		left: 0;
		top: var(--header-height);
		z-index: 100;
	}
	body.is_show_navigation {
		overflow: clip;
	}
	body:not(.is_show_navigation) header#header nav.global {
		pointer-events: none;
		opacity: 0;
	}
	body.is_show_navigation header#header nav.global {
		pointer-events: all;
		opacity: 1;
	}
	body.is_show_navigation .burger::before,
	body.is_show_navigation .burger::after {
		left: 50%;
		top: 50%;
		translate: -50% -50%;
	}
	body.is_show_navigation .burger::before {
		rotate: 45deg;
	}
	body.is_show_navigation .burger::after {
		rotate: -45deg;
	}
	header#header nav.global a {
		flex: 1 0 auto;
		height: auto;
		padding-block: var(--m);
	}
}




/** 下部ページFV   
-------------------------------------------------------------------- */
body:where(.page, .archive, .single) section#hero {
	padding-block: 0;
}
body:where(.page, .archive, .single) section#hero .heading {
	height: calc(270 * var(--px));
	background: var(--service-color, var(--emerald-blue));
	color: white;
	display: grid;
	place-items: center;
}
body:where(.page, .archive, .single) section#hero svg.icon {
	width: calc(38 * var(--px));
}
.taglines .block {
	min-height: calc(600 * var(--px));
	padding-block: var(--m4);
	display: flex;
	align-items: center;
	position: relative;
}
.taglines .wrap {
	width: calc(960 * var(--px));
	box-sizing: border-box;
	padding-inline: 0;
}
.taglines .block:nth-of-type(even) .wrap {
	padding-left: calc(240 * var(--px));
}
.taglines :is(.numbering, .tagline, .subline) {
	font-weight: 700;
}
.taglines .numbering {
	color: var(--service-color);
}
.taglines .numbering span {
	display: inline-block;
	padding-inline: 0.3ic;
	background: var(--service-color);
	color: white;
	line-height: 1.2;
	margin-left: 0.5ic;
}
.taglines .tagline {
	margin-block: 0.3lh 0.5lh;
	font-size: var(--heading-large-size);
	font-feature-settings: "palt";
	letter-spacing: 0.12ic;
}
.taglines .subline {
	font-size: 30px;
	letter-spacing: 0.03ic;
	margin-bottom: 1.2lh;
}
.taglines .subline + p {
	width: calc(720 * var(--px));
}
.taglines .background {
	width: 100%;
	height: 100%;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	body:where(.page, .archive, .single) section#hero .heading {
		height: calc(210 * var(--px));
	}
	.taglines .block {
		min-height: unset;
		overflow: clip;
	}
	.taglines .wrap {
		padding-block: var(--m6) var(--m3);
		width: 100%;
		padding-inline: var(--m2);
	}
	.taglines .block:nth-of-type(even) .wrap {
		padding-left: var(--m2);
	}
	.taglines .tagline {
		letter-spacing: 0.03ic;
		margin-right: -0.5ic;
	}
	.taglines .subline {
		font-size: calc(18 * var(--px));
	}
	.taglines .subline + p {
		width: 100%;
	}
}




/** サービスページ＞３つの約束  
-------------------------------------------------------------------- */
section#promise {
	padding-top: var(--m3);
	color: white;
}
section#promise .headline {
	font-size: 30px;
	text-align: center;
	margin-bottom: var(--m2);
}
section#promise .headline svg.icon {
	display: block;
	width: var(--m4);
	margin-inline: auto;
}
section#promise .wrap {
	max-width: calc(840 * var(--px));
}
section#promise .block {
	padding-block: var(--m2);
	padding-inline: var(--m7) var(--m2);
	border: 1px solid currentColor;
	position: relative;
}
section#promise .block + .block {
	margin-top: var(--m2);
}
section#promise .block .numbering {
	font-size: 60px;
	font-weight: 700;
	color: var(--service-color);
	line-height: 1.1;
	width: fit-content;
	padding-inline: 0.5ic;
	background: white;
	position: absolute;
	left: 0;
	top: 50%;
	translate: -50% -50%;
	transform: skewX(-10deg);
}
section#promise .block p {
	font-size: 21px;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	section#promise {
		padding-inline: var(--m2);
	}
	section#promise .headline {
		font-size: calc(27 * var(--px));
		margin-bottom: var(--m4);
	}
	section#promise .headline .small {
		font-size: 50%;
	}
	section#promise .block {
		padding-block: var(--m2) var(--m);
		padding-inline: var(--m2);
	}
	section#promise .block + .block {
		margin-top: var(--m4);
	}
	section#promise .block .numbering {
		font-size: calc(39 * var(--px));
		left: 50%;
		top: 0;
	}
	section#promise .block p {
		font-size: calc(18 * var(--px));
	}
}




/** サービスページ＞メニュー  
-------------------------------------------------------------------- */
section#menu .container {
	display: flex;
	flex-wrap: wrap;
	gap: var(--m2);
}
section#menu .block {
	flex: 1 0 30%;
	background: white;
}
section#menu .numbering {
	width: calc(56 * var(--px));
	height: calc(56 * var(--px));
	border-radius: calc(56 * var(--px));
	background: var(--service-color);
	margin-inline: auto;
	margin-top: calc(-28 * var(--px));
	display: grid;
	place-items: center;
	font-size: 27px;
	font-style: italic;
	color: white;
	position: relative;
}
section#menu .headline {
	margin-block: 0.5lh;
	font-size: var(--heading-regular-size);
	font-weight: 700;
	text-align: center;
}
section#menu .headline + p {
	padding-inline: var(--m2);
	padding-bottom: var(--m2);
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	section#menu .block {
		flex: 0 0 100%;
	}
}




/** サービスページ＞流れ 
-------------------------------------------------------------------- */
section#flow {
	color: white;
	--gradient: var(--service-color);
}
section#flow .caption {
	 width: calc(280 * var(--px));
	 padding-block: 0.1lh;
	 background: var(--black);
	 margin-inline: auto;
	 font-size: var(--heading-small-size);
	 font-weight: 700;
	 text-align: center;
	 letter-spacing: 0.03ic;
}
section#flow .step + .caption {
	margin-top: var(--m5);
}
section#flow .step {
	margin-top: var(--m2);
	display: flex;
	flex-wrap: wrap;
	gap: var(--m) 0;
}
section#flow .step .block {
	flex: 1 0 25%;
	min-height: calc(250 * var(--px));
	padding-block: var(--m3) var(--m2);
	padding-inline: var(--m3);
	color: var(--black);
	position: relative;
	z-index: auto;
}
section#flow .step .block::after {
	--arrow-size: 45 * var(--px);
	display: block;
	width: calc(100% + var(--arrow-size));
	height: 100%;
	background: white;
	clip-path: polygon(1px 0, calc(100% - var(--arrow-size) - 1px) 0, calc(100% - 1px) 50%, calc(100% - var(--arrow-size) - 1px) 100%, 1px 100%, calc(var(--arrow-size) + 1px) 50%);
	position: absolute;
	left: 50%;
	top: 0;
	translate: -50% 0;
	z-index: -1;
}
section#flow .step .block:first-of-type::after {
    width: calc(100% + var(--arrow-size) / 2);
    clip-path: polygon(0 0, calc(100% - var(--arrow-size) - 1px) 0, calc(100% - 1px) 50%, calc(100% - var(--arrow-size) - 1px) 100%, 0 100%);
    left: 0;
    translate: none;
}

section#flow .step .shoulder {
	width: fit-content;
	padding-inline: 0.5ic;
	background: var(--service-color);
	color: white;
	text-align: center;
	position: absolute;
	left: 50%;
	top: var(--m4);
	translate: -50% -100%;
}
section#flow .step .name {
	font-size: var(--heading-regular-size);
	font-weight: 700;
	text-align: center;
	height: 2lh;
	margin-bottom: 0.2lh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
} 
section#flow .notice {
	margin-top: var(--m6);
	width: calc(960 * var(--px));
	padding-block: var(--m2);
	padding-inline: var(--m3);
	border: 1px solid white;
	margin-inline: auto;
	font-size: 21px;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	section#flow .step {
		gap: 0;
	}
	section#flow .step .block {
		flex: 0 0 100%;
		min-height: unset;
		padding-block: var(--m4) var(--m3);
	}
	section#flow .step .block::after {
		width: 100%;
		height: calc(100% + var(--arrow-size));
		clip-path: polygon(0 1px, 50% calc(var(--arrow-size) + 1px), 100% 1px, 100% calc(100% - var(--arrow-size) - 1px), 50% calc(100% - 1px), 0 calc(100% - var(--arrow-size) - 1px));
		left: 0;
		top: 50%;
		translate: 0 -50%;
	}
	section#flow .step .block:first-of-type {
		padding-top: var(--m3);
	}
	section#flow .step .block:first-of-type::after {
        width: 100%;
        height: calc(100% + var(--arrow-size) / 2);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--arrow-size) - 1px), 50% calc(100% - 1px), 0 calc(100% - var(--arrow-size) - 1px));
        top: 0;
        translate: none;
    }

	section#flow .step .shoulder {
		position: static;
		margin-inline: auto;
		translate: 0;
	}
	section#flow .step .name {
		height: auto;
	}
	section#flow .notice {
		margin-top: var(--m3);
		width: auto;
		padding-inline: var(--m2);
		margin-inline: var(--m);
		font-size: calc(16 * var(--px));
	}
}





/** CTA   
-------------------------------------------------------------------- */
section.cta {
	color: white;
	--gradient: linear-gradient(90deg, var(--emerald), var(--blue));
}
section.cta .headline {
	font-size: var(--heading-medium-size);
	font-feature-settings: "palt";
	text-align: justify;
	padding-bottom: var(--m2);
	border-bottom: 1px solid currentColor;
	margin-bottom: var(--m6);
}
section.cta nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--m6);
}
section.cta nav a {
	flex: 0 0 auto;
	width: calc((100% - var(--m6)) / 2);
	display: block;
	padding-block: var(--m2) var(--m3);
	padding-inline: var(--m4);
	position: relative;
}
section.cta nav a b {
	display: block;
	font-size: var(--heading-medium-size);
	letter-spacing: 0.03ic;
	margin-bottom: 0.1lh;
}
section.cta .nav-contact {
	background: var(--pink);
}
section.cta .nav-letter {
	background: var(--dark);
}
section.cta svg.arrow {
	width: calc(40 * var(--px));
	fill: currentColor;
	position: absolute;
	right: var(--m2);
	top: 50%;
	translate: 0 -50%;
}
@media (any-hover: hover) {
	section.cta .nav-contact:hover {
		filter: brightness(110%);
	}
	section.cta .nav-letter:hover {
		filter: brightness(150%);
	}
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	section.cta nav {
		gap: var(--m2);
	}
	section.cta nav a {
		flex: 0 0 100%;
		padding-block: var(--m2);
		padding-inline: var(--m2);
	}
	section.cta nav a b {
		padding-bottom: var(--m);
		border-bottom: 1px solid currentColor;
		margin-bottom: var(--m);
	}
	section.cta nav a p {
		width: 75%;
	}
	section.cta svg.arrow {
		width: calc(30 * var(--px));
		top: 75%;
	}
}





/** フッター   
-------------------------------------------------------------------- */
footer#footer {
	background: var(--black);
	color: white;
}
footer#footer .wrap {
	padding-block: var(--m6) var(--m5);
	position: relative;
}
footer#footer .nav-header {
	width: calc(60 * var(--px));
	height: calc(42 * var(--px));
	background: white;
	color: var(--black);
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	right: 0;
	top: 0;
}
footer#footer .nav-header::before {
	display: block;
	width: var(--m);
	height: var(--m);
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	rotate: -45deg;
	translate: 0 25%;
}
@media (any-hover: hover) {
	footer#footer .nav-header:hover {
		color: white;
		background: var(--blue);
	}
}

footer#footer .container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--m2);
	padding-bottom: var(--m2);
	border-bottom: 1px solid var(--dark);
	margin-bottom: var(--m2);
}
footer#footer .logo {
	width: calc(235 * var(--px));
}
footer#footer nav.sns {
	display: flex;
	gap: var(--m);
}
footer#footer svg.icon {
	width: calc(38 * var(--px));
	fill: currentColor;
}
footer#footer nav.global {
	display: flex;
	flex-wrap: wrap;
	gap: 2ic;
}
footer#footer .copyright {
	text-align: center;
	font-size: var(--small-size);
	padding-block: 1.5lh;
	background: var(--dark);
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	footer#footer .container {
		flex-direction: column;
		align-items: center;
	}
	footer#footer svg.icon {
		width: calc(30 * var(--px));
	}
	footer#footer nav.global {
		justify-content: center;
	}
}

body:where(#thanks, #error404) main.content .wrap {
	max-width: 840px;
}
body:where(#thanks, #error404) h1 {
	font-size: 27px;
	font-weight: 700;
	padding-bottom: 0.5lh;
	border-bottom: 1px solid currentColor;
	margin-bottom: 0.5lh;
}



body#error404 main.content .wrap {
	padding-block: var(--m10);
	min-height: 300px;
	display: grid;
	place-items: center;
}
body#error404 h1 {
	position: relative;
}
body#error404 h1::before {
	display: block;
	content: "404";
	font-size: 180px;
	font-style: italic;
	line-height: 1;
	color: var(--emerald);
	opacity: 0.1;
	position: absolute;
	right: 0;
	bottom: -0.1lh;
	z-index: -1;
	animation: alert 5s 0s ease-in-out infinite;
}
@keyframes alert {
	0% {
		opacity: 0.1;
	}
	10% {
		opacity: 0.3;
	}
	20% {
		opacity: 0.1;
	}
	30% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.1;
	}
}
@media screen and (max-width: 767px) {
	body:where(.page-template-default, #error404) h1 {
		font-size: calc(24 * var(--px));
		text-align: center;
	}
	body#error404 h1::before {
		font-size: calc(120 * var(--px));
		right: 50%;
		bottom: 100%;
		translate: 50% 0;
	}
}