@charset "UTF-8";

/* L1 ########################################  ######################################## */
/* L2 ****************************************  **************************************** */
/* L3 ========================================  ======================================== */
/* L4 ----------------------------------------  ---------------------------------------- */

/* L1 ######################################## font-face ######################################## */

/* noto-sans-jp-regular - japanese_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/noto-sans-jp-v55-japanese_latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-jp-700 - japanese_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/noto-sans-jp-v55-japanese_latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* zen-maru-gothic-regular - japanese_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Zen Maru Gothic';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/zen-maru-gothic-v19-japanese_latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* zen-maru-gothic-500 - japanese_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Zen Maru Gothic';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/zen-maru-gothic-v19-japanese_latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* zen-maru-gothic-700 - japanese_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Zen Maru Gothic';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/zen-maru-gothic-v19-japanese_latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/poppins-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/poppins-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* L1 ######################################## 共通スタイル ######################################## */

:root {
	scroll-behavior: smooth;
	overscroll-behavior: none;
	
	--background-color: #ffffff;
	--fixed-background-width: 200vw;
}

@media (orientation: portrait) {
	:root {
	  --fixed-background-width: 200vh;
	}
}

:target {
	scroll-margin-top: 1em;
}

body {
	color: #444444;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(1rem, 0.855rem + 0.73vw, 1.4rem);
	line-height: 1.6;
	font-weight: 500;
	background-color: var(--background-color);
}

body::before,
body::after {
	--cocentration-color: rgba(0, 140, 207, 0.1);
	--half-background-width: calc(var(--fixed-background-width) / 2);
	
	content: "";
	display: block;
	position: fixed;
	z-index: -1;
	inset-inline-start: calc(50% - var(--half-background-width));
	inset-block-start: calc(50% - var(--half-background-width));
	block-size: var(--fixed-background-width);
	inline-size: var(--fixed-background-width);
	
	background-image: 
		repeating-conic-gradient(
			transparent 0,
			transparent 12deg,
			var(--cocentration-color) 12deg,
			var(--cocentration-color) 34deg
		),
		repeating-conic-gradient(
			transparent 0,
			transparent 22deg,
			var(--cocentration-color) 22deg,
			var(--cocentration-color) 25deg
		),
		repeating-conic-gradient(
			transparent 0,
			transparent 4deg,
			var(--cocentration-color) 4deg,
			var(--cocentration-color) 7deg
		);
	
	mask-image:
		radial-gradient(
			transparent 0%,
			transparent 7%,
			white 18%,
			white
		);
}

body::before {
	animation: bgAnimation 250s infinite linear;
}

body::after {
	animation: bgAnimation 500s infinite linear;
}

@keyframes bgAnimation {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(360deg);
	}
}

/* L2 **************************************** 画像・動画埋め込み 周り **************************************** */

div.image-center,
div.video-center {
	inline-size: fit-content;
	margin-block: 0.5em;
	margin-inline: auto;
	text-align: center;
}

figure {
	display: inline-block;
	margin: 10px;
	padding-block: 10px;
	padding-inline: 10px;
	text-align: center;
	background: rgba(255, 255, 255, 0.5);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

figure:has(> figcaption) {
	padding-block-end: 8px;
}

figcaption {
	padding-block-start: 8px;
	color: #666666;
	font-size: 90%;
	text-align: center;
	line-height: 1.0;
}

figcaption::before {
	content: "\f03e";
	margin-inline-end: 0.3em;
	font-family: "Font Awesome 6 Free";
	font-weight: 400;
}

figure:has(> iframe) figcaption::before {
	content: "\f167";
	font-family: "Font Awesome 6 Brands";
}

figure img {
	inline-size: 100%;
	block-size: auto;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

figure iframe {
	inline-size: 100%;
	block-size: auto;
	margin-inline: auto;
	aspect-ratio: 16/9;
}

/* L2 **************************************** a 要素  **************************************** */

a {
	text-decoration: underline;
}

/* L2 **************************************** ルビ  **************************************** */

ruby {
	line-height: 1.0;
}

ruby rp,
ruby rt {
	font-size: max(9px, 50%);
}

/* L2 **************************************** フォント 周り **************************************** */

.fs-x70 { font-size: 70%;}
.fs-x80 { font-size: 80%;}
.fs-x90 { font-size: 90%;}
.fs-x110 { font-size: 110%;}
.fs-x120 { font-size: 120%;}
.fs-x130 { font-size: 130%;}
.fs-x140 { font-size: 140%;}
.fs-x150 { font-size: 150%;}
.fs-x160 { font-size: 160%;}
.fs-x170 { font-size: 170%;}
.fs-x180 { font-size: 180%;}
.fs-x190 { font-size: 190%;}
.fs-x200 { font-size: 200%;}

strong {
	padding-block: 0.4em;
	text-decoration: underline;
	text-decoration-thickness: 0.4em;
	text-underline-offset: -0.1em;
	text-decoration-skip-ink: none;
}

strong {
	text-decoration-color: rgba(66, 66, 66, 0.3);
}

strong.blue {
	text-decoration-color: rgba(0, 140, 207, 0.3);
}
strong.red {
	text-decoration-color: rgba(200, 22, 29, 0.3);
}
strong.orange {
	text-decoration-color: rgba(204, 102, 0, 0.3);
}
strong.gold {
	text-decoration-color: rgba(110, 110, 30, 0.3);
}

span.br {
	display: inline-block;
}

ins {
	color: #ff0000 !important;
	text-decoration: none;
}

/* L2 **************************************** data-auto-show **************************************** */

*[data-auto-show] {
	display: none !important;
}

/* L1 ######################################## ヘッダ ######################################## */

header {
	position: relative;
}

/* L2 **************************************** ナビゲーションバー  **************************************** */

#menu {
    position: fixed;
    top: 0;
    z-index: 1000;
    inline-size: 100%;
    color: #ffffff;
    font-size: 80%;
    background: rgba(0, 0, 0, 0.80);
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 50%, transparent 50%), linear-gradient(to right, rgba(255, 255, 255, 0.1) 50%, transparent 50%);
	background-size: 3px 3px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#menu.hidden {
	display: none;
}

#menu ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
    gap: 2em;
    padding-block: 1em;
}

#menu li {
    
}

#menu a {
	position: relative;
    display: block;
    color: white;
    text-align: center;
    text-decoration: none;
}

#menu a[href]::before {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline: 50%;
	z-index: 20;
	inline-size: 0;
	block-size: 2px;
	background: #ffff00;
	
	transition-property: inset-inline, inline-size, background-color;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
}

#menu a[href]:hover::before {
	inset-inline: 0;
	inline-size: 100%;
}

#menu a::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	z-index: 10;
	inset-inline: 0;
	inline-size: 100%;
	block-size: 2px;
	background: #666666;
}

/* L1 ######################################## メイン ######################################## */

main {
	margin-block-start: calc(100vh + 25px);
	padding-block-end: 25px;
	background: rgba(255, 255, 255, 0.5);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

/* L1 ######################################## フッタ ######################################## */

footer {
	position: relative;
	padding-block: 1em;
	padding-inline: 4%;
	text-align: center;
	font-family: "Poppins", sans-serif;
	font-size: 90%;
	/* background: #ffffff; */
}

/*
footer::before {
	overflow: hidden;
	content: "";
	display: block;
	position: absolute;
	inset-inline: 0;
	inline-size: 100%;
	block-size: min(6vw, 40px);
	background-size: min(6vw, 40px) 100%;
	background-position: 0 0;
}

footer::before {
	inset-block-start: max(-6vw, -40px);
	background-image: linear-gradient(45deg, #ffffff 25%, transparent 25%), linear-gradient(-45deg, #ffffff 25%, transparent 25%);
	animation: moveGizaGizaLR 1s linear infinite;
}
*/

/* L1 ######################################## 管理用 ######################################## */

#admin {
	position: relative;
	z-index: 2;
	padding: 0.5em 4%;
	background: #dd0000;
}

#admin p {
	position: relative;
	display: list-item;
	list-style-type: none;
	margin: 0.5em 0;
	padding-inline-start: 20px;
	color: #ffffff;
	font-size: 80%;
	font-weight: bold;
}

#admin p::before {
	content: "\f071";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	font-family: "FontAwesome";
}