@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&family=Zen+Kaku+Gothic+New&display=swap');

/* 全体 */
html{
	scroll-behavior: smooth;
	scrollbar-color: var(--color-main) var(--color-base);
    scrollbar-width: thin;
}

body{
	position: relative;
	padding: 2em 0 1em 0;
	font-family: var(--font-family);
	font-weight: 400;
	overflow-x: hidden;
	background: var(--color-base);
	background-image: url("../img/bg.png") ;
	background-repeat: no-repeat;
	background-size:100% auto;
	color: var(--color-text);
}


#news-body{
	background: var(--color-base);
	background-image: none;
	padding: 0 1em;
}

a#return{
	display: none;
}

a{
	color: var(--color-link);
	text-decoration: none;
}

a:hover{
	color: var(--color-accent);
}

.text-box{
	margin-bottom: 1em;
}


#left-navi,#main-contents,#right-navi,#main-contents-memo{
	height: 82vh;
	margin-bottom: 1em;
}

#left-navi{
	position: relative;
	float: left;
	width: 20%;
}

#main-contents{
	background: var(--color-sub);
	float: left;
	width: 60%;
	border-radius: var(--border-radius);
	overflow: scroll;
	overflow-x: hidden;
}

#main-contents-memo{
	background: var(--color-sub);
	float: left;
	width: 60%;
	border-radius: var(--border-radius);
	overflow:  hidden;
}

#right-navi{
	position: relative;
	float: right;
	width: 20%;
}

h2{
	display: inline;
	padding-bottom: 2px;
	border-bottom: dashed 2px var(--color-accent);
	position: relative;
	font-size: 1.4em;
}

h3{
	margin-top: 2em;
	margin-bottom: 0.2em;
}

.h3top{
	margin-top: 0;
}

/* メニュー */
#logo{
	position: absolute;
	bottom: 0;
	right: 0;
	margin-right: 1em;
	width: 65%;
}

nav{
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 1em 2em 7em 2em;
}

nav li{
	list-style: none;
}

nav a{
	text-decoration: none;
	color: var(--color-text);
	font-weight: 600;
	font-size: 1.6em;
}

nav a.current{
	color: var(--color-main);
}

nav a:hover{
	color: var(--color-accent);
}

/* 右サイド */
.tobira-home{
	position: absolute;
	bottom: 0;
	left: 1em;
	margin-right: 1em;
	width: 40%;
}

.tobira-home-text{
	position: absolute;
	bottom: 10em;
	left: 3em;
	margin-right: 1em;
	font-size: 0.8em;
	text-align: center;
}

.bold{
	font-weight: 600;
}


/* コンテンツ部分 */
.main-box{
	margin: 2em 2.5em;
}

.newiine_btn i{
	color: var(--color-accent);
}

.main-box i{
	color: var(--color-main);
	margin-right: 0.2em;
}

.caution{
	color: #F16578;
}

.contents-box{
	margin-top: 1.2em;
	margin-bottom: 3em;
}

.contents-box-index{
	margin-top: 1.2em;
	margin-bottom: 2.5em;
}

#top-img,#top-img-m{
	width: 100%;
	display: block;
	margin-bottom: 1.5em;
}

iframe{
	width: 100%;
	height: 82vh;
	border: none;
	overflow: hidden;
}

dl{
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.6rem 1rem;
}

dt{
	margin-inline-start: 0;
	font-weight: 600;
}


.small-text{
	font-size: 0.8em;
}

.news{
	width: 80%;
	height: 80px;
	border: none;
	border-radius: var(--border-radius)
}

.news-text{
	font-size: 1.5rem;
}


.new-memo{
	width: 60%;
	height: 300px;
	border-radius: var(--border-radius);
	margin-top: 0;
}

.contents-box-index-memo{
	margin-top: 1.2em;
	margin-bottom: 0;
}

ul{
	margin-top: 0;
	margin-bottom: 1em;
}

.link-list{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	padding-left: 0;
	margin: 1em 0;
}

.link-list li{
	margin-right: 2em;
	margin-bottom: 0.3em;
}

.contents-box ul{
	list-style: none;
	padding: 0;
}

.contents-box ul a{
	font-weight: 600;
}

summary{
	cursor: pointer;
	margin-bottom: 1em;
}

.tatami-fanart summary{
	margin-top: 1em;
	background: var(--color-main);
	padding-left: 1em;
	cursor: pointer;
	color: var(--color-text);
	font-size: 1em;
	border-radius: 4px;
	font-weight: 600;
}


.tatami-top{
	margin-top: 0.2em;
}

/* イラストページ */
.newillust{
	width: 60%;
	height: 330px;
	pointer-events: none;
}

.memolink a{
	color: var(--color-text);
	text-decoration: underline;
}

.memolink i{
	color: var(--color-text);
}

.illust-category{
	margin-top: 2em;
	margin-bottom: 4em;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: 30px;
}


.illust-category li img{
	margin: 0 auto;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: var(--border-radius);
}

.illust-category li p{
	margin: 0 auto;
	color: var(--color-text);
	text-align: center;
	font-weight: 400;
	font-size: 0.9em;
}

.illust-category li p:hover{
	color: var(--color-accent);
}

.illust-page{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 5em;
}

.illust-page li{
	position: relative;
	width: calc(100% / 6 - 5px);
}

.illust-page li:before{
	content: "";
	display: block;
	padding-top: 100%;
}

.illust-page li a img{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	object-fit: cover;
	border-radius: var(--border-radius);
}

.illust-box{
	margin: 5em auto;
	text-align: center;
}



.guide-text li a{
	color: var(--color-text);
	font-weight: 400;
	text-decoration: underline;
}

.guide-text li{
	margin-bottom: 0.3em;
}

p#fuwaimg_caption_text {
	color: var(--color-base);
}


/* フッター */
footer{
	max-width: 110rem;
	margin: 0 auto;
	clear: both;
}

footer p{
	text-align: center;
	color: var(--color-text);
	margin: 0;
	font-size: 0.7em;
}

.policy{
	margin-top: 0.8em;
	margin-bottom: 0.3em;
	font-size: 1em;
}


/* モバイルメニュー */
@media(min-width: 768px) {
	ul#m-menu {
		display: none;
	}
	
@media(min-width: 768px) {
	#m-logo {
		display: none;
	}
	
@media(min-width: 768px) {
	#top-img-m {
		display: none;
	}


@media(min-width: 768px) {
	#m-tobira {
		display: none;
	}