/* 変数
---------------------------------------------*/
:root {
	/* 幅・高さ */
	--percent100: 100%;
	--per100: 100%;

	/* 黒 */
	--my-black: black;
	--my-black-50: color-mix(in srgb, var(--my-black) 50%, transparent);
	--my-black-75: color-mix(in srgb, var(--my-black) 75%, transparent);
	--my-white: white;
}

/* 初期化
---------------------------------------------*/

* {
	border: none;
	overflow-wrap: break-word;
	text-rendering: optimizeLegibility;
	margin: 0;
	padding: 0;
	min-height: 0vw;
}

html {
	scroll-behavior: smooth;
}

body,
header,
footer {
	position: relative;
	width: var(--percent100);
	container-type: inline-size;
}

body {
	display: flex;
	flex-flow: column nowrap;
	min-height: 100vh;
	z-index: 0;
	font-feature-settings: "palt" 1;
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 1.8;
}

header,
footer,
table,
th,
td,
ol,
ul,
li {
	line-height: 1.0;
}

table,
th,
td {
	vertical-align: middle;
}

nav ul,
ol,
ul {
	list-style: none;
	padding: 0;
	font-size: 0;
}

/* div, */
table,
ol,
ul,
header,
footer,
nav {
	width: var(--per100);
	margin: 0 auto;
}

input,
button,
textarea,
select {
	font: inherit
}

img {
	max-width: var(--per100);
	height: auto;
}

picture,
video,
canvas {
	display: block;
	max-width: var(--per100)
}

/* ---------------------------------------------
   アンカー
--------------------------------------------- */

a {
	text-decoration: none;
	transition: .2s linear;
}

a:hover,
a:active {
	text-decoration: none;
}

/* ---------------------------------------------
   見出し
--------------------------------------------- */

/* h1（無理やり下に隠す） */
h1 {
	position: absolute;
	z-index: -3;
	color: transparent;
}

/* ---------------------------------------------
   見出し
--------------------------------------------- */

/* ボックス */
.box {
	margin: 1.0rem auto;
	padding: 1.5rem;
	background-color: color-mix(in srgb, var(--my-color) 25%, transparent);
	color: var(--my-text-color);
	border-radius: 0.3rem;
}

/* ---------------------------------------------
   その他
--------------------------------------------- */

/* 左にリンクアイコン（https://fontawesome.com/icons/external-link-alt?style=solid） */

.link {
	/* display: inline-block; */
	display: inline-flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	/* width: auto;
	height: 100%; */
	margin: 0 0.25rem;
	padding: 0;
	font-weight: 900;
	font-family: var(--my-fonts);
	/* background-color: aqua; */
}

.link::before {
	display: inline-block;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f35d";
	margin: 0 0.25rem 0 0;
	color: var(--my-text-color);
	width: 1.0rem;
	height: 1.0rem;
}