body{
	background: linear-gradient(to right, #700000 0%, #960000 10%, #960000 90%, #700000 100%);
}

a{
	color:#fff;
}
@media only screen and (min-width: 521px) {
	a:hover{
		text-decoration:underline;
	}
}

.anchor{
	padding:20px 0;
}

.anchor a{
	display: inline-block;
	position: relative;
	font-size:20px;
	margin: 0 5px;
	padding:10px 4px 18px;
	transition: .6s;
}

.anchor a::before{
	content: "";
	position: absolute;
	left: 0;
	right:0;
    bottom:10px;
    margin: auto;
    width: 10px;
    height: 10px;
    display: block;
    border-left: 2px solid #fff;
    border-top: 2px solid #fff;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    transition: .6s;
}
@media only screen and (min-width: 521px) {
	.anchor a:hover{
		text-decoration:none;
		color:#960000;
		background-color: #fff;
	}
	.anchor a:hover::before{
		border-left: 2px solid #960000;
    	border-top: 2px solid #960000;
	}
}


.story_box{
	margin: 0 auto;
	padding:60px 0 120px;
	max-width:900px;
	text-align:left;
	display: flex;
	flex-wrap:wrap;
}

.story{
	display:block;
	text-decoration:none;
	font-size:22em;
	color: #202020;
	width:calc(30% - 6px);
	height: auto;
	aspect-ratio:1 / 1;
	line-height: 0.9em;
	overflow: hidden;
	transition: .2s;
	float:left;
	border:solid 3px #202020;
	margin-bottom: auto;
}

.story_title{
	width:calc(70% - 20px);
	padding:0 0 0 20px;
}

.story_title_line{
	font-size:20px;
	letter-spacing:1px;
	display:flex;
	flex-wrap: wrap;
}
.main_title a:hover{
	text-decoration: none;
}

.story_title_line span{
	margin: auto 0;
}
.story_title_line span.main_title{
	display: block;
	border-bottom: #202020 2px solid;
	margin: auto 5px auto 0;
}

.story_intro p{
	margin:20px auto;
	line-height:150%;
	letter-spacing:0.1em;
	font-size:14px;
}

.story_index{
	font-weight:600;
	width: calc(70% - 20px);
	font-size:1.1em;
	letter-spacing: 0.1em;
	margin: 0 0 0 auto;
	padding:1.3em 0;
}

.story_index .single{
	display: block;
	margin-left:15px;
	padding:5px 0;
	border-bottom:1px #202020 solid;
}

.story_index .story_first{
	width:100%;
	text-align: center;
}

.story_index .story_first a{
	display: inline-block;
	text-align: center;
	border: 1px #fff solid;
	margin:0 10px 15px;
	padding:3px 15px;
	transition: .3s;
}
@media only screen and (min-width: 521px) {
	.story_index .story_first a:hover{
		text-decoration:none;
		background-color: #fff;
		color:#960000;
	}
}
.story_index .story_first p{
	width:100%;
	text-align: center;
	font-size: 120%;
}

.story_index .title-open{
	color:rgba(0,0,0,.7);
	cursor:pointer;
	padding:5px 0;
	border-bottom:1px #202020 solid;
}
.story_index .title-open span{
	display: inline-block;
	position: relative;
}

.story_index .title-open.active{
	color:#fff;
}

.story_index .title-open span::before{
	content: "";
	position: absolute;
	right: -1.3em;
    top:4px;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    width: 10px;
    height: 10px;
    display: block;
    border-left: 1px solid rgba(0,0,0,.7);
    border-top: 1px solid rgba(0,0,0,.7);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
}
.story_index .title-open.active span::before{
	content: "";
	top: -3px;
	-webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
	border-left: 1px solid #fff;
    border-top: 1px solid #fff;
}



.title-box{
	display: none;
}
.title-box p.sub{
	font-size:84%;
	color:rgba(255,255,255,.5);
	padding: 5px;
}

.title-box ul{
	list-style-type: none;
	padding:5px 0;
}
.title-box ul li{
	margin-left:15px;
	padding:5px 0;
	border-bottom:1px #202020 solid;
}



@media only screen and (min-width: 521px) {
	.story:hover {
		color: #fff;
		background:rgba(0,0,0,0);
		border:solid 3px rgba(0,0,0,0);
	}
	.story_index .title-open:hover{
		text-decoration:underline;
	}
}


@media only screen and (max-width: 900px) {
	.story_box{
		padding:30px 20px 120px;
	}
	.story{
		min-width:225px;
		font-size: 18.5em;
	}
	.story_title{
		width:calc(100% - 290px);
	}
	
	.story_index{
		width:calc(100% - 290px);
	}
}

@media only screen and (max-width: 767px) {
	
	.story_box{
		display: block;
		padding: 40px 25px 80px;
	}
	.story{
		float: none;
		margin: auto;
	}
	
	.story_title{
		width:100%;
		padding:10px 0 0;
	}
	.story_title_line{
		justify-content: center;
	}
	.story_intro p {
		font-size:13px;
	}
	
	.story_index{
		width:100%;
		font-size:0.9em;
	}
	.story_index .title-open {
		font-size:1.2em;
	}
}

@media only screen and (max-width: 520px) {
	.anchor {
    	padding: 10px 0;
	}
	.story_box{
		padding: 10px 25px 60px;
	}
	.story_index{
		padding: 0.5em 0 1em;
	}
	.story_index .story_first a {
	    margin: 0 8px 15px;
    	padding: 3px 10px;
	}
	.story_index .story_first p{
		font-size:1.3em;
		padding:1em 0 0.5em;
	}
}



/*----------------------*/
body.page{
	background:#efefef;
	color:#202020;
}

body.page main a{
	color:#202020;
}

body.page #page_top span{
	color:#202020;
}
body.page #page_top span::after{
	border-top:3px solid #202020;
	border-right:3px solid #202020;
}
@media only screen and (max-width: 520px) {
	body.page{
		background:#f4f4f4;
		color:#202020;
	}
	body.page #page_top{
		background-color: rgba(255,255,255,0.80);
	}
}
@media only screen and (min-width: 521px) {
	body.page #page_top:hover{
		text-decoration:none;
	}
}


header{
	background-color: #222;
	position: fixed;
	width: 100%;
	z-index: 20;
}

.header_box{
	max-width: 1200px;
	margin: auto;
	text-align: left;
	padding:10px 20px;
	display: flex;
	flex-wrap: wrap;
}
@media only screen and (max-width: 520px) {
	.header_box{
		padding:5px 20px;
	}
}

.header_box a.img{
	line-height: 0;
}

.header_box img{
	height:20px;
	width:auto;
}
.header_box p{
	color:#fff;
	margin: auto 10px;
}


.page main{
	padding:50px 0;
}

.page_box{
	margin: 60px auto;
	max-width: 900px;
	padding:0 20px;
	/*user-select:none;*/
}

.page_box h1{
	font-size: 5em;
}

.link_box{
	margin-bottom: 60px;
}
.link_box a{
	text-decoration: underline;
}


#text_box{
	margin: 30px auto 120px;
}

.page_box h2 span{
	display: inline-block;
	padding:0 8px;
	border-bottom: 2px #ddd solid;
	margin-bottom: 10px;
}
.page_box h2 span.len{
	border-color:#1c0031;
}
.page_box h2 span.shino{
	border-color:#f9d6d7;
}
.page_box h2 span.tsutsuji{
	border-color:#be006c;
}
.page_box h2 span.haku{
	border-color:#bfdace;
}



.page_box h3{
	margin-bottom: 30px;
}


#text_box p{
	text-align: left;
	font-size:16px;
	padding:1.85em 0 0;
	line-height: 1.8em;
}

.page_btn{
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
}

.page_btn div{
	display: flex;
	flex-wrap: wrap;
}
.page_btn div a,
.page_btn div span{
	margin: auto;
}

.page_btn div:nth-child(odd) a{
	display: inline-block;
	background-color: #ccc;
	color: #fff;
	font-size:1.6em;
	line-height: 1.5em;
	padding:0 3em 0.15em;
	border-radius: 5px;
	transition: .2s;
}

.page_btn div.gray:nth-child(odd) a{
	background-color: #eee;
	color: #eee;
	pointer-events: none;
}

.page_btn div:nth-child(odd) a.end{
	padding:0 3em;
}
.page_btn div:nth-child(odd) a.end span{
	display: inline-block;
}

.index_num span{
	display: inline-block;
	margin: auto 4px;
	padding:0 1px;
}


@media only screen and (min-width: 521px) {
	.header_box a:hover{
		text-decoration: none;
	}
	.page_btn div a:hover{
		text-decoration: none;
	}
	.page_btn div:nth-child(odd) a:hover{
		background-color: #f4f4f4;
		color: #202020;
	}
	.page_btn div.gray:nth-child(odd) a:hover{
		background-color: #eee;
		color: #eee;
	}
}

@media only screen and (max-width: 767px) {
	
	.page main{
		padding:50px 0 20px;
	}
}

@media only screen and (max-width: 520px) {
	
	.page main{
		padding:50px 0 0;
	}
	.page_box {
		margin: 30px auto;
	}
	#text_box{
		margin:30px auto 80px;
	}
	#text_box p{
		font-size:14.5px;
		padding:1.9em 0 0;
	}

	.page_btn div:nth-child(odd) a,
	.page_btn div:nth-child(odd) a.end{
		font-size:1.2em;
		line-height: 1.8em;
		padding:0 1.7em;
	}
	.page_btn div:nth-child(odd) a.end{
		padding:0 1.35em;
	}
	
	.page_btn div.gray:nth-child(odd) a{
		background-color: #f4f4f4;
		color: #f4f4f4;
	}
}

@media only screen and (max-width: 374px) {
	.page_btn div{
		font-size: 90%;
	}
}


/*----------------------*/
@media only screen and (min-width: 768px) {
	#text_box div.gradation{
		background:-webkit-linear-gradient(-90deg,#202020,#707070);
		color:#202020;
		-webkit-background-clip:text;
		-webkit-text-fill-color:transparent;
	}
}
@media only screen and (max-width: 767px) {
	#text_box div.gradation{
		color:#555;
	}
}


@media only screen and (max-width: 520px) {
	#text_box p.center.sp{
		display: block;
		text-align: center;
	}
}


/*----------鵺：真書------------*/

body.page.nue{
	background:#fbfaf5;
}

body.page.nue #text_box{
	font-family: 'Noto Serif JP', serif;
}
body.page.nue #text_box p{
	letter-spacing: 0.1em;
	line-height:200%;
}


body.page.nue .page_box h2 span {
	border-bottom: #333 solid 2px;
}



/*----------wiki------------*/

#text_box.wiki p.wiki_title{
	font-size: 2em;
	border-bottom: 1px #a2a9b1 solid;
	padding: 0px;
	margin-bottom: 0.25em;
}
#text_box.wiki p.wiki_head{
	font-size: 1.6em;
	border-bottom: 1px #a2a9b1 solid;
	padding: 1.5em 0 0;
	margin-bottom: 0.25em;
}
#text_box.wiki p.wiki_index{
	font-size: 1.2em;
	font-weight:600;
	padding:0;
}
#text_box.wiki p{
	font-size: 15px;
	line-height: 1.6em;
	padding: 0 0 1.5em 0;
	
}
#text_box.wiki p a{
	color: #3366cc;
}

#text_box.wiki ul{
	width:calc(100% - 40px);
	margin: auto;
}
#text_box.wiki ul li{
	text-align: left;
	font-size: 15px;
}

@media only screen and (max-width: 520px) {	
	#text_box.wiki p.wiki_head{
		padding: 0.8em 0 0;
	}
	#text_box.wiki p,
	#text_box.wiki ul li{
		font-size: 14px;
	}
}


/*----------報告書------------*/

#text_box.report p{
	line-height: 1.6em;
}

#text_box.report p.main_title{
	font-size: 1.8em;
	line-height: 1.2em;
}

#text_box.report p.report_sub{
	padding: 0 5px;
	margin-top:1.85em;
	border-left:4px solid #333;
	font-size: 0.9em;
	font-weight:600;
	line-height: 1.4em;
}

#text_box.report p.report_index{
	font-size: 1.5em;
	border-bottom: 1px #a2a9b1 solid;
	margin-bottom: 0.25em;
}
#text_box.report p.report_inner{
	padding-top: 0;
}

#text_box.report .report_graph{
	max-width: 700px;
	margin:5px auto;
	height:25px;
	background-color: #333;
}
#text_box.report .report_graph.len{
	background: linear-gradient(to right,#47277d 23%,#342e2c 23%,#342e2c 98%,#d0d0d0 98%);
}
#text_box.report .report_graph.shino{
	background: linear-gradient(to right,#fff 65%,#c6382e 65%,#c6382e 80%,#d0d0d0 80%);
}

#text_box.report p.bold{
	font-weight:bold;
}

#text_box.report p.center{
	text-align:center;
	font-weight:600;
}

#text_box.report p span{
	background: linear-gradient(to bottom,rgba(255,255,255,0) 60%,rgba(255,230,0,.7) 60%);
}

.result_wrap{
	display: flex;
	flex-wrap: wrap;
	max-width: 700px;
	margin: auto;
}
.result_inner{
	width: 50%;
}
@media only screen and (max-width: 700px) {
	.result_wrap{
		display: block;
	}
	.result_inner{
		width: 90%;
		margin: auto;
	}
}
@media only screen and (max-width: 520px) {
	.result_inner{
		width: 100%;
	}
}


/*----------レビュー------------*/

.gourmet_shop{
	max-width: 600px;
	margin:20px auto 40px;
}

.cafe_title_sub{
	text-align: left;
	color:#BDA516;
	font-size:0.9em;
	font-weight:bold;
}

.cafe_title{
	text-align: left;
	font-size:2.3em;
	font-weight:bold;
}

.gourmet_shop .gourmet_star{
	padding:5px 0;
	border-top:#e0dccc 1px dotted;
	border-bottom:none;
}

.gourmet_tag{
	text-align: left;
	padding:10px 0;
	line-height: 1.5em;
	font-size:0.9em;
}



.gourmet_box{
	border: 1px solid #e0dccc;
	background-color: #f5f5f5;
    border-radius: 5px;
	max-width: 600px;
	margin:20px auto;
}
.gourmet_head{
	display: flex;
	flex-wrap: wrap;
	padding:20px;
}
.gourmet_head .sq{
	background: rgba(0,0,0,.25);
	display: block;
	width:40px;
	height:40px;
	border-radius: 5px;
}
.gourmet_name span{
	display: block;
	padding-left:10px;
	text-align: left;
}
.gourmet_name span:nth-child(1){
	font-weight:600;
}

.gourmet_star{
	text-align: left;
	display: flex;
	flex-wrap: wrap;
	align-items:flex-end;
	border-top:#e0dccc 1px solid;
	border-bottom:#e0dccc 1px solid;
	padding:5px 20px;
}

.gourmet_star div:nth-child(1){
	font-size: 1.4em;
	color:#FF9300;
	letter-spacing:0.1em;
}
.gourmet_star div:nth-child(1) span{
	color:#ccc;
}

.gourmet_star div:nth-child(2){
	margin-left: 5px;
	margin-bottom: 2px;
	color:#C50B0B;
	font-weight:600;
	line-height: 1;
	font-size:2em;
}
.gourmet_star div:nth-child(3){
	margin:auto 0 auto 10px;
	color:#595959;
	font-size:0.9em;
}

.gourmet_main{
	padding: 10px 20px 20px;
}
#text_box .gourmet_main p{
	padding: 4px 0;
	font-size: 13px;
}
#text_box .gourmet_main p.gourmet_index{
	font-weight:bold;
	font-size: 1.2em;
}



/*----------ch------------*/

#text_box.ch .post{
	text-align: left;
	padding: 50px 0 40px;
	border-bottom: 1px solid rgba(0,0,0,.1);
}
#text_box.ch .post a{
	color:rgba(155,77,202,1);
	text-decoration: underline;
}
#text_box.ch .post p{
	padding-top: 0;
}

#text_box.ch .post .post_time{
	color:rgba(14,14,110,1);
	font-size: 13px;
	padding-bottom: 10px;
}

#text_box.ch .post .post_time span:nth-child(1){
	padding-right: 10px;
}
#text_box.ch .post .post_time span:nth-child(1):before{
	content: "▼ ";
}
#text_box.ch .post .post_time span:nth-child(2){
	font-weight:600;
}

#text_box.ch .post .quote{
	background-color:rgba(0,0,0,.05);
	margin: 1em 0;
	padding:10px 20px;
}

@media only screen and (max-width: 520px) {
	#text_box.ch .post{
		padding: 37px 0 15px;
	}
	#text_box.ch .post .quote{
		font-size: 13px;
		padding:20px;
	}
}

/*----------karasu_dream------------*/

body.dream{
	background-color: #f8f4e6;
}

body.dream .page_btn div:nth-child(odd) a{
    background-color:rgba(0,0,0,.2);
}
@media only screen and (min-width: 521px) {
	body.dream .page_btn div:nth-child(odd) a:hover{
		background-color: #f8f4e6;
		color: #444;
	}
}


/*----------chat------------*/
#text_box.chat p{
	display: flex;
	flex-wrap:wrap;
	width:100%;
	margin: auto;
	padding: 0 0 1.4em 0;
}
#text_box.chat p span:nth-child(1){
	display: block;
	width:140px;
}
#text_box.chat p span:nth-child(2){
	display: block;
	width:calc(100% - 140px);
}

@media only screen and (max-width: 520px) {
	#text_box.chat p span:nth-child(1){
		display: block;
		width:100px;
		font-size:0.9em;
		padding:0 8px;
		background-color: #ddd;
		border-radius: 5px;
		margin-bottom: auto;
	}
	#text_box.chat p span:nth-child(2){
		display: block;
		padding-left: 10px;
		width:calc(100% - 126px);
	}
}

/*----------chat_twt企画------------*/

#text_box.chat.twt .img_area img{
	width:100%;
	max-width: 500px;
}
#text_box.chat.twt p.bold{
	font-weight:600;
}
#text_box.chat.twt p span:nth-child(1){
	width:120px;
	padding-left: 5px;
}
#text_box.chat.twt p.len span:nth-child(1){
	border-left:5px solid #1c0031;
}
#text_box.chat.twt p.shino span:nth-child(1){
	border-left:5px solid #f9d6d7;
}
#text_box.chat.twt p.haku span:nth-child(1){
	border-left:5px solid #bfdace;
}
#text_box.chat.twt p.tsutsuji span:nth-child(1){
	border-left:5px solid #be006c;
}

#text_box.chat.twt p span:nth-child(2){
	width:calc(100% - 150px);
	padding-left: 20px;
}

@media only screen and (max-width: 520px) {
	#text_box.chat.twt p.bold{
		background-color:#fff;
		padding: 0.2em 0.7em 0.3em;
		margin-bottom: 1.2em;
		width:calc(100% - 1.4em);
	}
	#text_box.chat.twt p span:nth-child(1){
		width:70px;
		border-radius: 5px;
		text-align: center;
		padding-left: 8px;
	}
	#text_box.chat.twt p.len span:nth-child(1){
		background-color: #1c0031;
		color:#fff;
		border: none;
	}
	#text_box.chat.twt p.shino span:nth-child(1){
		background-color: #f9d6d7;
		border: none;
	}
	#text_box.chat.twt p.haku span:nth-child(1){
		background-color: #bfdace;
		border: none;
	}
	#text_box.chat.twt p.tsutsuji span:nth-child(1){
		background-color: #be006c;
		color:#fff;
		border: none;
	}
	#text_box.chat.twt p span:nth-child(2){
		width:calc(100% - 96px);
		padding-left: 10px;
	}
}



/*----------prof_baku------------*/

#text_box .baku_prof_box{
	display: flex;
	flex-wrap: wrap;
	margin:20px auto 0;
	max-width:600px;
	border-top:1px #333 dotted;
	border-bottom:1px #333 dotted;
	padding-bottom: 1em;
}
#text_box .baku_prof_box p{
	padding-top:1em;
}
#text_box .baku_prof_box p:nth-child(3n-2){
	width:70px;
}
#text_box .baku_prof_box p:nth-child(3n-1){
	width:50px;
	text-align: center;
}
#text_box .baku_prof_box p:nth-child(3n){
	width:calc(100% - 120px);
}

@media only screen and (max-width: 520px) {
	#text_box .baku_prof_box p:nth-child(3n-2){
		width:60px;
	}
	#text_box .baku_prof_box p:nth-child(3n){
		width:calc(100% - 110px);
	}
}



/*----------chirp_baku------------*/
#text_box .chirp{
	width:calc(80% - 60px);
	padding:20px 30px;
	margin: 1.85em auto 0;
	border:1px #d5d5d5 solid;
	border-radius: 12px;
	background-color: #f9f9f9;
	text-align: left;
	font-size:15px;
	line-height: 1.5em;
}
#text_box .chirp_icon{
	display: flex;
	flex-wrap: wrap;
}
#text_box .chirp_icon img{
	width:40px;
	border-radius: 50%;
}
#text_box .chirp_icon span{
	margin: auto 0;
}
#text_box .chirp_name span:nth-child(1){
	margin-top: 0;
	margin-left: 10px;
	font-weight:600;
}
#text_box .chirp_name span:nth-child(2){
	margin-top: 0;
	color:rgb(83, 100, 113);
}
#text_box .chirp_text{
	padding-left: 50px;
	margin-top: -1.3em;
}

#text_box .chirp_comment{
	display: flex;
	flex-wrap: wrap;
	margin-top: 1em;
	padding-left: 50px;
}
#text_box .chirp_comment span{
	color:rgb(81, 102, 118);
	font-size:14px;
}
#text_box .chirp_comment svg{
	height:22px;
	width:auto;
	fill:rgb(81, 102, 118);
	margin-right: 5px;
}
#text_box .chirp_comment svg.heart{
	margin-left: 10px;
}

@media only screen and (max-width: 767px) {
	#text_box .chirp{
		width:calc(100% - 60px);
	}
}

@media only screen and (max-width: 520px) {
	#text_box .chirp{
		font-size:14px;
		width:calc(100% - 50px);
		padding:20px 25px;
	}
	#text_box .chirp_name span:nth-child(1),
	#text_box .chirp_name span:nth-child(2){
		margin-top: auto;
		display: block;
		margin-left: 0;
	}
	#text_box .chirp_name{
		margin-left: 10px;
	}
	#text_box .chirp_text{
		margin-top: 0;
		padding-left: 0;
	}
	#text_box .chirp_comment{
		padding-left: 0;
	}
	
}