/* 全体共通 */
body,
html {
	margin: 0;
	padding: 0;
	font-family: 'M PLUS 1', sans-serif;
}

a {
	cursor: pointer;
	text-decoration: none;
}

/* プレビュー用変数 */
:root {
	--imgpreview-backdrop-filter: blur(10px);
	--imgpreview-border-radius: 8px;
	--imgpreview-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
	--imgpreview-date-height: 40px;
	--imgpreview-font-size: 11pt;
	--imgpreview-transition-duration: .3s;
	--imgpreview-vertical-margin: 50px;
}

/* 全体 */
.clsImgPreview {
	display: none;

	opacity: 0;

	transition-duration: var(--imgpreview-transition-duration);
}

.clsImgPreviewShow {
	opacity: 1;
}

/* フィルター */
.clsImgPreviewFilter {
	position: fixed;
	top: 0;
	left: 0;
	background-image: url('../img/loading_img_preview.svg');
	background-position: center calc(50% + var(--imgpreview-date-height) / 2);
	background-size: 50px;
	background-repeat: no-repeat;

	background-color: rgba(0, 0, 0, .6);

	width: 100%;
	height: 100%;

	-webkit-backdrop-filter: var(--imgpreview-backdrop-filter);
	backdrop-filter: var(--imgpreview-backdrop-filter);
}

/* イメージ */
.clsImgPreviewImg {
	display: none;
	position: fixed;
	top: calc(50% + var(--imgpreview-date-height) / 2);
	left: 50%;

	transform: translate(-50%, -50%);

	border-radius: var(--imgpreview-border-radius);

	width: auto;
	max-width: 90%;
	height: auto;
	max-height: calc((100% - var(--imgpreview-date-height)) - var(--imgpreview-vertical-margin) * 2);
}

/* 日付 */
.clsImgPreviewDate {
	position: fixed;
	top: 0;
	box-shadow: var(--imgpreview-box-shadow);
	background-color: #000;

	width: 100%;
	height: var(--imgpreview-date-height);

	color: #fff;
	font-weight: bold;
	font-size: var(--imgpreview-font-size);
	line-height: var(--imgpreview-date-height);

	text-align: center;
}

/* 変数 */
:root {
	--backdrop-filter-default: blur(20px);
	--background-color-default: #fff;
	--border-color-default: #dcdcdc;
	--border-color-notice: #c7c7c7;
	--border-radius-default: 8px;
	--border-radius-notice: 10px;
	--border-radius-full: 999px;
	--box-shadow-default: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
	--color-default: #454545;
	--font-size-large: 20pt;
	--font-size-medium: 11pt;
	--font-size-small: 9pt;
	--font-size-xlarge: 28pt;
	--illustration-column-480: 4;
	--illustration-column-640: 5;
	--illustration-column-800: 6;
	--illustration-column-1024: 8;
	--line-clamp-sp: 2;
	--line-clamp-slate: 3;
	--link-column-480: 1;
	--link-column-640: 2;
	--link-column-800: 3;
	--link-column-1024: 4;
	--link-icon-size: 50px;
	--profile-icon-size: 80px;
	--text-shadow-title: 0 0 15px #00399d;
	--transition-duration-default: .3s;
	--transition-duration-mainshow: .8s;
	--margin-notice: 20px 0 0 0;
}

/* 全体共通 */
html,
body {
	min-height: 100vh;

	color: var(--color-default);
}

body::before {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;

	background-image: url('../img/komugi_field.webp');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;

	width: 100vw;
	height: 100vh;

	content: '';
}

/* メイン */
#idMain {
	opacity: 0;

	transition-duration: var(--transition-duration-mainshow);
	box-sizing: border-box;
	margin: 0 auto;
	padding: 60px 30px;
	min-width: 340px;
	max-width: 1024px;
}

#idMain.clsMainShow {
	opacity: 1;
}

/* ヘッダー */
#idHeader {
	margin: 0 0 10px 0;
}

#idHeaderTitle {
	color: #fff;
	font-size: var(--font-size-xlarge);
	font-family: 'Audiowide', sans-serif;

	text-align: center;
	text-shadow: var(--text-shadow-title);
}

/* コンテナ */
#idContainer {
	box-sizing: border-box;

	border-radius: 10px;
	background-color: rgba(255, 255, 255, .7);
	padding: 50px;
	width: 100%;

	-webkit-backdrop-filter: var(--backdrop-filter-default);
	backdrop-filter: var(--backdrop-filter-default);
}

/* セクション */
.clsSection {
	margin: 0 0 30px 0;
}

.clsSection:last-child {
	margin: 0;
}


/* プロフィールヘッダー */
#idProfileHeader {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	gap: 20px;

	margin: 0 0 20px 0;
}

/* プロフィールアイコン */
#idProfileIcon {
	box-sizing: border-box;

	border: 3px solid #fff;
	border-radius: var(--border-radius-full);
	width: var(--profile-icon-size);
	height: var(--profile-icon-size);
}

/* プロフィール名 */
#idProfileName {
	display: flex;
	flex-direction: column;

	gap: 5px;
}

/* プロフィール和名 */
#idProfileNameJP {

	margin: 0;
	font-weight: bold;
	font-size: var(--font-size-large);
}

/* プロフィール英名 */
#idProfileNameEN {

	margin: 0;
	font-weight: bold;
	font-size: var(--font-size-medium);
}

/* プロフィール説明 */
#idProfileDescription {
	font-size: var(--font-size-medium);
}

/* イベント情報 */
#idEventInfo {
	display: none;

	margin: var(--margin-notice);
}

/* ヘッダー */
#idEventInfoHeader {
	display: flex;
	align-items: center;

	gap: 3px;
	margin-bottom: 5px;

	width: 100%;
}

#idEventInfoHeader>.material-symbols-outlined {
	font-size: 24px;
}

#idEventInfoHeader>h2 {

	margin: 0;
	font-size: 16pt;
}

/* アイテムラッパー */
#idEventInfoItemWrapper {
	display: flex;
	flex-wrap: wrap;

	gap: 10px;

	margin: 0;
	padding: 0;

	list-style: none;
}

/* イベントアイテム */
.clsEventInfoItem {
	display: flex;
	flex-direction: column;

	gap: 5px;

	box-sizing: border-box;

	border: 1px solid var(--border-color-notice);
	border-radius: var(--border-radius-notice);
	background-color: var(--background-color-default);
	padding: 12px 15px;
}

.clsEventTitle {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	gap: 0 5px;
}

.clsEventTitle>h2 {

	margin: 0;
	font-size: 14pt;
}

.clsEventDate {
	display: flex;
	align-items: center;
	border-radius: 999px;
	background: linear-gradient(90deg, rgb(255 61 0), rgb(255 129 0));
	background-color: #ff8100;
	padding: 0 7px 0 7px;

	height: 24px;

	color: #fff;
	font-size: 9pt;
}

.clsEventOfficialLinkWrapper {
	display: flex;
	justify-content: flex-end;
}

.clsEventOfficialLink {
	display: flex;
	align-items: center;

	gap: 2px;

	width: fit-content;
	font-size: 11pt;
}

.clsEventOfficialLink>.material-symbols-outlined {
	font-size: 21px;
}

.clsCircleCut {
	max-width: 100%;
	max-height: 250px;

	object-fit: contain;
}

/* お知らせ */
#idNotice:empty {
	display: none;
}

#idNotice {

	margin: var(--margin-notice);

	border: 1px solid var(--border-color-notice);
	border-radius: var(--border-radius-notice);
	background-color: var(--background-color-default);
	padding: 15px;
	font-size: var(--font-size-medium);
}

/* リンク一覧 */
#idLinkList {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;

	gap: 20px;

	margin: 0;
	padding: 0;
}

/* リンク一覧項目 */
.clsLinkListItem {
	width: calc((100% - (20px * (var(--link-column-1024) - 1))) / var(--link-column-1024));
	height: fit-content;

	list-style: none;
}

/* リンク */
.clsLinkListItemLink {
	display: flex;
	position: relative;
	top: 0;
	flex-direction: column;

	gap: 7px;

	transition-duration: var(--transition-duration-default);

	box-sizing: border-box;
	box-shadow: var(--box-shadow-default);
	border-radius: var(--border-radius-default);
	background-color: var(--background-color-default);
	padding: 20px;
	width: 100%;
	height: 100%;

	color: var(--color-default);
}

@media(hover) {
	.clsLinkListItemLink:hover {
		top: -5px;
	}
}

/* リンクイメージ */
.clsLinkListItemLinkImg {
	align-self: center;

	border-radius: var(--border-radius-full);

	width: var(--link-icon-size);
	height: var(--link-icon-size);
}

/* リンクラベル */
.clsLinkListItemLinkLabel {
	display: flex;
	flex-direction: column;

	gap: 10px;
}

/* リンクラベルタイトル */
.clsLinkListItemLinkLabelTitle {
	display: -webkit-box;
	align-self: center;
	overflow: hidden;
	font-weight: bold;
	font-size: var(--font-size-small);
	-webkit-box-orient: vertical;

	-webkit-line-clamp: 1;
}

/* リンクラベル説明 */
.clsLinkListItemLinkLabelDescription {
	display: -webkit-box;
	overflow: hidden;
	font-size: 11pt;
	line-height: 150%;
	-webkit-box-orient: vertical;

	border-top: 1px solid var(--border-color-default);
	padding: 10px 0 0 0;

	height: calc(1em * 1.5 * var(--line-clamp-slate));

	-webkit-line-clamp: var(--line-clamp-slate);
}

/* Misskeyタイムライン */
#idMisskeyTLFrame {
	border: none;
	border-radius: var(--border-radius-default);
	background-color: #fff;
	width: 100%;
	height: 350px;
}

/* イラストリスト */
#idIllustrationList {
	display: flex;
	flex-wrap: wrap;

	gap: 10px;

	margin: 0;
	padding: 0;
}

/* イラストリスト項目 */
.clsIllustrationListItem {
	position: relative;
	top: 0;
	transition-duration: var(--transition-duration-default);

	cursor: pointer;

	border-radius: var(--border-radius-default);
	background-color: var(--background-color-default);

	width: calc((100% - (10px * (var(--illustration-column-1024) - 1))) / var(--illustration-column-1024));

	overflow: hidden;

	list-style: none;
}

.clsIllustrationListItem::before {
	display: block;

	padding-top: 100%;

	content: '';
}

@media(hover) {
	.clsIllustrationListItem:hover {
		top: -3px;
	}
}

.clsIllustrationListItemImg {
	position: absolute;
	top: 0;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center top;
}

/* フッター */
#idFooter {
	margin: 10px 0 0 0;
}

#idFooterCopyright {
	font-size: var(--font-size-small);

	text-align: center;
}

/* スケルトンスクリーン */
.clsSkeletonScreen {
	position: relative;

	background: #e0e0e0 !important;

	overflow: hidden;
}

.clsSkeletonScreen::after {
	display: block;
	position: absolute;
	top: 0;
	left: -150px;
	animation: loading 1.5s infinite;

	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);

	width: 150px;
	height: 100%;

	content: '';
}

@keyframes loading {
	0% {
		left: -150px;
	}

	100% {
		left: 100%;
	}
}

/* 画面が1024未満の場合 */
@media screen and (max-width: 1023px) {
	#idMain {
		max-width: 800px;
	}

	.clsLinkListItem {
		width: calc((100% - (20px * (var(--link-column-800) - 1))) / var(--link-column-800));
	}

	.clsIllustrationListItem {
		width: calc((100% - (10px * (var(--illustration-column-800) - 1))) / var(--illustration-column-800));
	}
}

/* 画面が800px未満の場合 */
@media screen and (max-width: 799px) {
	#idMain {
		max-width: 640px;
	}

	.clsLinkListItem {
		width: calc((100% - (20px * (var(--link-column-640) - 1))) / var(--link-column-640));
	}

	.clsIllustrationListItem {
		width: calc((100% - (10px * (var(--illustration-column-640) - 1))) / var(--illustration-column-640));
	}
}

/* 画面が640pxpx未満の場合 */
@media screen and (max-width: 639px) {
	#idMain {
		padding: 25px;
		max-width: 480px;
	}

	#idContainer {
		padding: 25px;
	}

	.clsSection {
		margin: 0 0 20px 0;
	}

	#idLinkList {
		gap: 15px;
	}

	.clsLinkListItem {
		width: 100%;
		width: calc((100% - (20px * (var(--link-column-480) - 1))) / var(--link-column-480));
	}

	.clsLinkListItemLink {
		flex-direction: row;

		gap: 15px;

		padding: 15px;
	}

	.clsLinkListItemLinkLabel {
		flex-grow: 1;
	}

	.clsLinkListItemLinkLabelTitle {
		align-self: flex-start;
	}

	.clsLinkListItemLinkLabelDescription {
		height: calc(1em * 1.5 * var(--line-clamp-sp));

		-webkit-line-clamp: var(--line-clamp-sp);
	}

	.clsIllustrationListItem {
		width: calc((100% - (10px * (var(--illustration-column-480) - 1))) / var(--illustration-column-480));
	}
}