@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Allura&family=Zen+Old+Mincho:wght@400;500&display=swap');

* {
	margin: 0;
	padding: 0;
	font-weight: 400;
	font-size: inherit;
	font-style: normal;
	word-break: break-all;
	box-sizing: border-box;
}


*:focus {
	outline: none;
}

ul,
ol {
	list-style: none;
}

:root {
	/* ヘッダー背景画像 */
	--head_inner_bg: url(img/one-h.jpg) no-repeat center/cover;
	/* メインコンテンツとテキストページの横幅　最大値(700px) */
	--main-width: 70rem;
	/* フォント　色 */
	--font: #353535;
	/* 見出し2の色 */
	--sub: #8a93a1;
	--sub4: #ffe9db;
	/* サブカラー*/
	--sub-2: #A0D8EF;
	--sub-3: #bd6745;
	/* 下線マーカー*/
	--marker: linear-gradient(rgba(0, 0, 0, 0) 50%, #ececec 30%);
	/* 白 */
	--white: 255, 255, 255;
	/* 黒*/
	--black: 0, 0, 0;
	/* body　フォントサイズ */
	--body-font-size: clamp(1.85rem, 2.9vw, 1.6rem);
	/* heading1 タイトル　フォントサイズ */
	--h1-font-size: clamp(4.4rem, 6vw, 3.5rem);
	--h2-font-size: clamp(1.9rem, 4.75vw, 2.5rem);
	--h3-font-size: clamp(1.2rem, 3vw, 1.6rem);
	--texttitle: clamp(1.5rem, 3.75vw, 1.7rem);
}



html {
	font-size: 62.5%;
	scrollbar-width: thin;
	scrollbar-color: var(--sub-2) transparent;
}

html, body {
	width: 100%;
	height: 100%;
}

::-webkit-scrollbar {
	width: 6px;
}

::-webkit-scrollbar-track {
	background-color: transparent;
	border: none;
}

::-webkit-scrollbar-thumb {
	background: var(--sub-2);
	box-shadow: none;
	border-radius: 5px;
}

body {
	font: var(--body-font-size)/1.8 "Zen Old Mincho", serif;
	background: rgba(var(--white), 1);
	color: var(--font);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	letter-spacing: .13em;
	overflow-x: clip;
}


a {
	color: var(--sub);
	text-decoration: none;
	transition: .4s;
}

main a:hover {
	color: rgba(var(--white), 1);
	text-shadow: 0 0 0.3rem var(--sub-2);
}

b, .bold {
	font-weight: bold;
}

em {
	font-style: normal;
	background: #f0d3d3;
	padding: 0 0.2rem;
}

.new, .up {
	font-size: inherit !important;
	padding-inline: 0 !important;
	background: none !important;
}

.new::after {
	content: "New";
	font-size: .9em;
	color: var(--sub-3);
	margin: 0 0.7rem;
	font-weight: 400;
}

.up::after {
	content: "Up";
	font-size: .9em;
	color: var(--sub-3);
	margin: 0 0.7rem;
	font-weight: 400;
}

.marker {
	background: var(--marker);
	line-height: 1;
}

img {
	vertical-align: bottom;
	max-width: 100%;
	height: auto;
}

h1,
h2 {
	font-family: "Allura", "Zen Old Mincho", cursive;
	font-weight: 500;
}

h1 {
	font-size: var(--h1-font-size);
	color: var(--sub-2);
	text-align: center;
}

.subtitle {
	color: var(--font);
}

h2 {
	font-size: var(--h2-font-size);
	color: var(--sub-2);
	letter-spacing: 0.03em;
	margin: 0 auto;
	position: relative;
	display: table;
}

.h2_sub {
	font-size: .9em;
	text-align: center;
	margin-top: -0.5rem;
}

.h2_sub.color {
	font-size: inherit;
	color: var(--sub-2);
	letter-spacing: .1em;
	transition: text-shadow .4s;
	cursor: pointer;
}

.h2_sub.color:hover {
	text-shadow: 0 0 0.3rem var(--sub-2);
}

h3 {
	font-size: var(--h3-font-size);
	color: rgba(var(--black), .8);
	position: relative;
}

h3::before {
	content: "";
	position: absolute;
	top: calc(50% - 0.1rem);
	left: -1.7rem;
	height: 0.2rem;
	width: 1.2rem;
	background: var(--sub);
}

.wrap {
	margin: 0 auto;
	padding: 0 3vw;
}

header {
	width: 95vw;
	margin: 0 calc(50% - 50vw);
	position: sticky;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	left: 2.5vw;
	height: 80dvh;
	height: 80vh;
}

header::before {
	content: "";
	position: absolute;
	width: calc(100% - 6rem);
	height: calc(80dvh - 8rem);
	height: calc(80vh - 8rem);
	top: 4rem;
	right: 3rem;
	background: var(--head_inner_bg);
	border-radius: 1.5rem;
	z-index: -1;
}

@-moz-document url-prefix() {
	.wrap {
		padding: 0;
	}

	header {
		width: 95vw;
		margin: 0;
	}
}

header canvas {
	position: absolute;
	width: calc(100% - 6rem);
	height: calc(100dvh - 8rem);
	top: 4rem;
	right: 3rem;
	z-index: -1;
	border-radius: 1.5rem;
	overflow: hidden;
}

.head_img {
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 6rem;
}

.head_img::before, .head_img::after {
	content: "";
	flex-grow: 1;
	height: 0.2rem;
	background: var(--sub);
	mix-blend-mode: color-dodge;
	z-index: 0;
}

.head_img>* {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.head_img h1 {
	position: relative;
	top: 0;
	left: 0;
	justify-content: end;
}

.head_img h1::after {
	content: "";
	position: absolute;
	top: -1rem;
	width: 0.1rem;
	height: 160%;
	left: 110%;
	background: rgba(var(--black), .5);
	transform: rotate(35deg);
}

.head_img .subtitle {
	justify-content: start;
	position: relative;
	top: 3rem;
	left: -1.5rem;
}

main {
	width: 100vw;
	margin: 5rem calc(50% - 50vw) 0;
	padding: 2rem 3.5rem;
	background: rgba(var(--white), 1);
	position: relative;
	z-index: 0;
}

main::before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 7rem;
	left: 0;
	top: -7rem;
	background: linear-gradient(to bottom, rgba(var(--white), 0), rgba(var(--white), 1));
	z-index: 1;
}

section {
	width: min(100%, var(--main-width));
	margin: 0 auto 5rem;
}

.single {
	display: block;
}

.text {
	width: min(100%, var(--main-width));
	margin: 6rem auto;
	padding: 0 2rem;
}

.texttitle {
	margin-bottom: 3rem;
}

.search {
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
}

.inner {
	display: flex;
	flex-direction: column;
	row-gap: 1.5rem;
	margin: 2.5rem 0;
}

.ac {
	padding-bottom: 1rem;
	position: relative;
}

.ac::after {
	content: "";
	position: absolute;
	display: block;
	color: var(--sub);
	width: 1.4rem;
	height: 1.4rem;
	left: calc(50% - 0.7rem);
	top: calc(0% + 2.2rem);
	border-left: 0.1rem solid;
	border-bottom: 0.1rem solid;
	transform: rotate(-45deg);
	opacity: 1;
	transition: opacity .3s ease;
}

.ac.no-arrow::after {
	opacity: 0;
}

.ac .search {
	overflow: hidden;
	transition: height .3s ease, opacity .8s ease .2s;
	height: 0;
	opacity: 0;
}

.search.open {
	height: auto;
	opacity: 1;
}

.search.close {
	height: 0;
	opacity: 0;
}

.search_box_label {
	position: relative;
	font-weight: bold;
	display: table;
	padding-inline: 1rem;
	margin: 0 auto 2rem;
	color: var(--sub-2);
}

.search_box_label::after {
	content: "";
	position: absolute;
	bottom: -0.7rem;
	left: calc(50% - 1.5rem);
	height: 0.3rem;
	width: 3rem;
	border-radius: 0.3rem;
	background: var(--sub-2);
	opacity: .5;
}

input[type], textarea, button, select {
	font-family: inherit;
	margin: 0;
	font-size: inherit;
	height: initial;
	width: inherit;
	max-width: inherit;
	line-height: 1.7;
	letter-spacing: 0.15rem;
	color: var(--font);
	background: rgba(var(--white), 1);
	padding: 0;
	appearance: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	transition: all .3s;
}

.search input[type="radio"], .search input[type="checkbox"] {
	position: relative;
	display: inline-block;
	width: 1.6rem;
	height: 1.6rem;
	margin-right: 0.3rem;
	border: 0.1rem solid rgba(var(--black), .4);
	vertical-align: middle;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	background: transparent;
}

.search input[type="radio"] {
	border-radius: 50%;
}

.search input[type="radio"]:checked::before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 0.9rem;
	height: 0.9rem;
	border-radius: 50%;
	background: var(--sub);
	content: '';
}

.search input[type="checkbox"] {
	border-radius: 0.3rem;
}

.search input[type="checkbox"]:checked::before {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 30%;
	height: 60%;
	border-bottom: 0.2em solid var(--sub);
	border-right: 0.2em solid var(--sub);
	transform: translate(-50%, 0) rotate(45deg);
}

.search input[type="radio"]+input[type="radio"],
.search input[type="checkbox"]+input[type="checkbox"] {
	margin-left: 1rem;
}

.search_box label {
	display: inline-block;
	margin-right: 1rem;
	cursor: pointer;
	line-height: 3;
}

.search_box label:not(:last-child) {
	padding-right: 0.6rem;
}

.filter-controls {
	display: flex;
	justify-content: center;
	gap: 0 1rem;
}

.filter-controls button {
	border: 0.1rem solid var(--sub-2);
	padding: 0.2rem 0.7rem;
	border-radius: 0.3rem;
	cursor: pointer;
	min-width: 7.5rem;
}

.filter-controls button:hover {
	background: var(--sub-2);
	color: rgba(var(--white), 1);
}

.sort_item.is-hide {
	display: none;
}

.img-ctn {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem 4rem;
	margin-bottom: 1.5rem;
}

.img-ctn>li {
	width: calc(100% / 2 - 2rem);
	position: relative;
}

.img-ctn>li {
	position: relative;
}

.img-ctn>li>a {
	position: relative;
	width: 100%;
	display: block;
	word-break: normal;
	filter: none;
}

.img-ctn>li .number>li {
	display: inline-block;
}

.img-ctn>li a:hover {
	filter: contrast(1.3)
}

.img-ctn>li a::before {
	content: attr(data-text);
	text-align: center;
	color: rgba(var(--black), 1);
	width: calc(100% - 2px);
	left: 1px;
	position: absolute;
	top: 26%;
	-webkit-backdrop-filter: blur(0.2rem);
	backdrop-filter: blur(0.2rem);
	transform: translateY(-25%);
	background: linear-gradient(90deg, rgba(var(--white), 0) 0%, rgba(var(--white), .45) 25%, rgba(var(--white), 0.85) 50%, rgba(var(--white), .45) 75%, rgba(var(--white), 0) 100%);
}

.img-ctn>li .img-shadow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: scaleX(1.03) scaleY(1.06);
	filter: blur(0.8rem) opacity(0.4) saturate(1.8) contrast(1.4);
	z-index: -1;
	transform-origin: center;
}

.img-ctn img {
	width: 100%;
	height: 15rem;
	object-fit: cover;
	border-radius: 0.6rem;
}

.img-ctn li>div {
	padding-left: 3.2rem;
	min-height: 5em;
}

.img-ctn li .category {
	position: absolute;
	letter-spacing: inherit;
	padding-top: 2rem;
	color: var(--sub-2);
	white-space: nowrap;
	writing-mode: vertical-rl;
	text-orientation: sideways;
}

.img-ctn>li .category::before {
	content: "";
	position: absolute;
	bottom: calc(100% - 1.5rem);
	left: calc(50% - 0.1rem);
	width: 0.1rem;
	height: 3rem;
	background: rgba(var(--white), 1);
	mix-blend-mode: difference;
}

.img-ctn li span {
	font-size: .85em;
	display: inline-block;
	padding-inline: 0.4rem;
	margin-bottom: 0.5rem;
	border: 0.05rem solid rgba(var(--black), .3);
	color: var(--sub-2);
}

.img-ctn li span+span {
	margin-left: 0.6rem;
}

.img-ctn li p:not(.category):nth-of-type(1) {
	padding-block: 1.3rem 0rem;
	margin-bottom: 0.5rem;
	color: rgba(var(--black), 1);
	border-bottom: 0.1rem solid rgba(var(--black), .2);
}

.img-ctn li p:not(.category):nth-of-type(2) {
	font-size: .9em;
}

.pointer-none {
	pointer-events: none;
}

.list {
	padding: 1rem 0 1rem 1.1em;
	list-style-position: inside;
}

.list li {
	list-style: disc;
	margin-bottom: 1rem;
}

.list li::marker {
	color: rgba(var(--black), .2);
}

.inline li {
	display: inline;
}

.inline span {
	display: inline-block;
	font-size: .8em;
	margin-left: 0.6rem;
	background: var(--marker);
	color: rgba(var(--black), 1);
	line-height: 1.2;
}

.inline li:not(:last-child)::after {
	content: "|";
	padding: 0 0.2rem;
	opacity: .8;
	position: relative;
	top: -0.1rem;
}

.block span {
	display: inline-block;
	font-size: .8em;
	margin-left: 0.6rem;
	background: var(--marker);
	color: rgba(var(--black), 1);
	line-height: 1.2;
}

.block p {
	font-size: .9em;
	opacity: .9;
	margin-left: 1.2rem;
	padding: 0.7rem 0.7rem 0.7rem 1.2rem;
	border-left: 0.1rem solid rgba(var(--black), .3);
}

.single {
	display: block;
	position: relative;
	padding-top: 3rem !important;
	width: 100%;
}

.single::before, .single::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 3rem;
	width: 100%;
}

.single .text {
	width: min(100%, calc(var(--main-width) - 5rem));
	margin: 0 auto;
	padding: 2.8rem 2.8rem 1rem;
	gap: 1rem;
	background: none;
}

.single .text::before {
	display: none;
}

.single::after {
	background: var(--head_inner_bg);
}

.namechange {
	text-align: center;
	padding: 1.5rem 0;
}

.namechange input[type] {
	font-size: inherit;
	width: 13rem;
	padding: 0.2rem 0.4rem;
	margin-bottom: 1rem;
	border: 1px solid var(--sub);
	background: rgba(var(--white), .7);
}

.namechange input[type="submit"], .namechange input[type="reset"] {
	width: 8rem;
	background: var(--sub-2);
	color: rgba(var(--white), 1);
	cursor: pointer;
}

:is(input)::placeholder {
	color: var(--font);
	opacity: .6;
}

:is(input):focus::placeholder {
	color: transparent;
	transition: 0.4s;
}

.single .text {
	width: min(100%, calc(var(--main-width) - 5rem));
	margin: 0 auto;
	padding: 2.8rem 2.8rem 1rem;
	gap: 1rem;
	background: none;
}

.single .texttitle {
	font-size: calc(var(--body-font-size) + 0.15em);
	font-family: inherit;
	text-align: center;
}

dl.acmenu {
	width: 100%;
}

.acmenu dt {
	color: var(--sub-4);
	cursor: pointer;
	text-align: center;
	padding-bottom: 1.5rem;
	margin: 0;
	text-decoration: underline;
	text-decoration-thickness: 0.05rem;
	text-underline-offset: 5px;
	text-decoration-color: var(--sub-2);
}

.acmenu dd {
	font-size: .95em;
	margin-bottom: 1.5rem;
	padding: 1.5rem;
	background: rgba(var(--white), .5);
	display: none;
	opacity: 0;
	transition: opacity .5s ease;
}

.acmenu dd.show {
	display: block;
	opacity: 1;
}

.single>p {
	position: relative;
	margin: 2rem 0 0;
}

.single>p::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	height: 0.1rem;
	width: 22rem;
	background: rgba(var(--black), .5);
	transform: translate(-50%, -50%) rotate(-45deg);
	z-index: -1;
}

.single>p img {
	width: 12rem;
	aspect-ratio: 1/1;
	display: block;
	margin: 3rem auto 1rem;
	box-shadow: rgba(var(--black), .4) 0 2rem 2rem -1.5rem;
	object-fit: cover;
}

.single .inner {
	gap: 2rem;
	width: 100%;
	margin: 1rem 0;
}

.single .list_block, .single .list_inline {
	counter-reset: number;
}

.single .list_block a, .single .block a {
	display: table;
	line-height: 2.3;
}

.single .list_block a::before, .single .list_inline a::before {
	counter-increment: number;
	content: counter(number, decimal-leading-zero) ".";
	font-size: .98em;
	padding-right: 0.25rem;
	color: var(--font);
	display: inline-block;
	text-shadow: none;
}

.single .list_block a:hover::before, .single .list_inline a:hover::before {
	text-shadow: none;
	color: var(--font);
}

.single .list_inline a {
	margin-right: 0.3rem;
	display: inline-block;
}

.single .list_block p {
	font-size: .9em;
	display: block;
	padding: 0.7rem 0 0.7rem 1.5rem;
	margin: 0.5rem 0 0.5rem 3rem;
	border-left: 0.1rem solid rgba(var(--black), .3);
}


.single .list_block span, .single .block span {
	font-size: .9em;
	display: table;
	line-height: 1.2;
	margin: 0 0 0.8rem;
	background: var(--marker);
	color: rgba(var(--black), 1);
}

.single .inline a:not(:last-of-type) {
	margin-right: 0.6rem;
}

.single .inline span {
	display: inline-block;
	margin-right: 0.3rem;
}

.top {
	text-align: center;
	margin-bottom: 1.5rem;
}

.top li {
	display: inline-block;
	padding-right: 0.4rem;
	line-height: 2.5;
}

.top li:not(:last-of-type)::after {
	display: none;
}

.footer {
	font-size: calc(var(--body-font-size) - 0.1em);
	padding: 1.5rem 0 1rem;
	text-align: center;
}

.footer a {
	margin: 0.5rem;
}

#ToTop.visible {
	opacity: 1;
	pointer-events: auto;
}

#ToTop {
	position: fixed;
	color: var(--sub-2);
	width: 25px;
	height: 25px;
	border: 1px solid;
	background: rgba(var(--white), .4);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	z-index: 1;
	bottom: 3rem;
	right: 2rem;
	padding: 10px;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity .5s ease-in-out;
}

#ToTop::after {
	content: "";
	color: var(--sub-2);
	opacity: .7;
	position: absolute;
	bottom: 0px;
	margin: auto;
	vertical-align: middle;
	left: 7px;
	top: 4px;
	width: 8px;
	height: 8px;
	border-top: 1px solid;
	border-right: 1px solid;
	transform: rotate(315deg);
}

textarea.copy-clipboard {
	font-size: calc(var(--body-font-size) - 0.18em);
	width: min(100%, 700px);
	height: 6rem;
	margin: 0.5rem 0;
	padding: 0.5rem 1rem;
	border: 0.05rem solid rgba(var(--black), .06);
	background: rgba(var(--black), .04);
	box-shadow: 0 0 1rem 0 rgba(var(--black), .08);
	scrollbar-width: thin;
}

p.source {
	width: 8rem;

	aspect-ratio: 1/1;
	object-fit: cover;
}

p.source a img {
	aspect-ratio: 1/1;
	object-fit: cover;
}

_::-webkit-full-page-media, _:future, :root .img-ctn>li .img-shadow {
	transform: scaleX(1.03) scaleY(1.06) translate3d(0, 0, 0);
}

_::-webkit-full-page-media, _:future, :root .img-ctn>li .category::before, .head_img::before {
	transform: translate3d(0, 0, 0);
}

_::-webkit-full-page-media, _:future, :root header>canvas {
	transform: translateZ(0);
}

@media screen and (min-color-index:0) and (-webkit-min-device-pixel-ratio:0) {
	.img-ctn>li .img-shadow {
		transform: scaleX(1.03) scaleY(1.06) translate3d(0, 0, 0);
	}

	.img-ctn>li .category::before, .head_img::before {
		transform: translate3d(0, 0, 0);
	}

	header>canvas {
		transform: translateZ(0);
	}
}

@media screen and (max-width: 1024px) {
	.wrap {
		padding: 0;
	}

	header {
		height: 70vh;
	}

	header::before {
		content: "";
		position: absolute;
		height: calc(70vh - 8rem);
		top: 4rem;
	}



	main {
		margin: 5rem auto;
		width: 100%;

	}

	main::before {
		content: "";
		position: absolute;
		display: block;
		width: 100%;
		height: 7rem;
		left: 0;
		top: -7rem;
		background: linear-gradient(to bottom, rgba(var(--white), 0), rgba(var(--white), 1));
		z-index: 1;
	}

	.h2_sub.color:active {
		text-shadow: 0 0 0.3rem var(--sub);
	}

	.filter-controls button:active {
		background: var(--sub-2);
		color: rgba(var(--white), 1);
	}
}

@media screen and (max-width: 820px) {

	header::before {
		width: calc(100% - 4rem);
		height: calc(70vh - 6rem);
		top: 3rem;
		left: 2rem;
	}

	header canvas {
		top: 3rem;
		left: 2rem;
	}

	.search input[type="radio"], .search input[type="checkbox"] {
		vertical-align: text-bottom;
	}
}

@media screen and (max-width: 767px) {
	header::before {
		width: calc(100% - 3rem);
		height: calc(100% - 3rem);
		top: 1.5rem;
		left: 1.5rem;
		border-radius: 0;
	}

	header canvas {
		width: calc(100% - 3rem);
		height: calc(100% - 3rem);
		top: 1.5rem;
		left: 1.5rem;
	}

	.head_img {
		width: calc(100% - 3rem);
		flex-direction: column;
		gap: 1rem;
	}

	.head_img h1::after {
		transform: none;
		height: 0.1rem;
		width: 100%;
		top: 100%;
		left: 0;
	}

	.head_img .subtitle {
		top: 0;
		left: 0;
	}
}

@media screen and (max-width: 600px) {
	main {
		padding: 1.5rem 2.8rem;
	}

	.img-ctn {
		flex-direction: column;
	}

	.img-ctn>li {
		width: 100%;
		padding-inline: 0.5rem;
	}

}