@charset 'utf-8';

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&family=Reddit+Sans+Condensed:wght@200..900&display=swap');

*{
margin:0;
padding:0;
border:none;
box-sizing:border-box;

background-repeat:no-repeat;

text-align:left;
text-decoration:none;

color:#2c3048;
font-family:sans-serif;
font-weight:normal;
font-style:normal;
word-break:break-all;

list-style-type:none;
outline:none;

@media (min-width:1040px){font-family:'メイリオ','Noto Color Emoji',sans-serif;}
@media (max-width:1039px){font-family:'M PLUS 1','Noto Color Emoji',sans-serif;}
}


:root{
/*フォントサイズ RegularSmallLarge*/
--fontR:1.4rem;
--fontS:1.2rem;
--fontL:1.6rem;

--fontM:1.3rem;
--fontT:1.1rem;
--fontF:1.5rem;

/*文字色*/

--fontC-a:#736185;/*リンク色*/
--fontC-h:#4d4866;/*ホバー色*/

/*背景色*/
--bgc:#ebead7;

/*ボーダーカラー Base,PC,Mobile*/
--bc-P:#8c96a3;
--bc-M:#ede3c2;

--colorW:#fff;
--colorP:#2c3048;
}

html{font-size:62.5%;}
body{background-color:var(--bgc);}

a{color:var(--fontC-a);
	&:hover{color:var(--fontC-h); background-color:var(--colorW);}
	}

h2{font-size:var(--fontL);}
p,h3,li,em,strong,span,a{font-size:var(--fontR);}

h2,h3{
position:relative;
margin-bottom:10px;
	i{margin-right:10px;}
}

input,textarea{
border:1px solid var(--bc-P);
padding:1px;
font-size:var(--fontR);}
:is(input,textarea,select):focus{outline:none;}
input:is([type="submit"],[type="reset"],[type="button"]){cursor:pointer;}

.toplink{
position:fixed;
right:15px;
bottom:15px;}
.toplink a i{font-size:5.5rem; color:var(--colorP);}

.wrapper{
@media (min-width:1010px){width:850px;margin:0 auto; padding:50px 0 50px 20px; }
@media (max-width:1009px){margin:20px;}

	header{
		background-image:url(./logo.svg);
		background-size:55px;
		margin-bottom:100px;
		h1{
		color:#40466a;
		font-size:4rem;
		font-family:'Reddit Sans Condensed';
		font-weight:700;
		line-height:1.5;
		margin-bottom:40px;
		padding:0 0 5px 70px;
		border-bottom:1px solid var(--bc-P);}
		.menu{margin-bottom:30px;
			ul{display:flex; gap:15px;
				li a,li i{font-size:var(--fontL);}
				li i{margin-right:7px;}
			}
		}
		.url{margin-bottom:15px;
			ul{display:flex; @media (max-width:1009px){display:block;}}
				li{margin-right:10px;
					span{color:#515b7a;font-size:var(--fontT);position:relative;top:-1px;left:3px;}
				}
			}
		}
		p{margin-bottom:15px;
			em{
				&+a{margin-right:10px;}
				}
			strong{
			text-decoration:underline;
		  text-decoration-color:var(--bc-P);
		  text-underline-offset:3px;}
		  i{margin-right:5px;}
		}
	}

	.entry-area{
	margin-bottom:150px;
		h2{margin-bottom:20px;}
		.entry-result{margin-bottom:15px;}
		.namechange-form{
		display:flex;
		@media (max-width:1009px){display:block;}
		margin-bottom:15px;}
		input{
			width:110px;
			@media (max-width:1009px){width:calc(96%/2);}
			margin:0 5px 10px 0;
			padding:3px;
			border:1px solid var(--bc-P);
			border-radius:3px;
			font-size:1.4rem;
			 &::placeholder{font-size:var(--fontS);}
			}
		.entry-input{margin-right:10px;}
		.namechange-submit{
			input{width:70px; @media (max-width:1009px){width:calc(93%/2);} text-align:center; background-color:var(--colorP); border:none; color:var(--bgc);}
		}
		p.guide{font-size:var(--fontS); @media (max-width:1009px){br{display:none;}}}
	}


	.list-area{margin-bottom:70px;

		p.info{margin-bottom:30px;font-size:1.2rem;}

		.list-box{display:flex; gap:20px; flex-wrap:wrap;
			.list{
			padding:15px 5px 20px 5px;
			border:1px solid var(--bc-P);
			border-radius:3px;
				@media (min-width:1010px){width:400px;}
				@media (max-width:1009px){width:100%;}
				h3{
					margin-bottom:15px;
					padding:0 0 10px 10px;
					border-bottom:1px solid var(--bc-P);
					font-size:var(--fontL);
					line-height:1;
						&::before{content:'\f02b';font:var(--fa-font-solid);margin-right:7px;}
				}
				.sub{margin-bottom:15px;
					h4{margin:0 0 5px 10px; font-size:var(--fontR); i{margin-right:5px;}}
					ul{display:flex;flex-wrap:wrap;
						li::after{content:'/';font-size:1.4rem;color:#beb59d;margin:0 3px;}
		 				li:last-of-type::after{content:none;}
					}
					h5{margin:10px 0 3px 10px;font-size:var(--fontR);}
				}
				ul{padding:0 10px;
					li{
						&.ss a::after{content:'ss';}
						&.sp a::after{content:'sp';}
						&.ss a::after,&.sp a::after{
						color:#32394c;
						font-size:var(--fontS);
						line-height:1;
						border:1px solid #515b7a;
						border-radius:3px;
						display:inline-block;
						height:12px;
						padding:0 2px;
						position:relative;
						top:-1px;
						margin:0 5px;
						opacity:0.4;}
					}
				}
				.sub2 h4:nth-of-type(2){margin-top:5px;}
				.sub3 ul{
								li{
									em{
									line-height:1;
									border:1px solid #515b7a;
									border-radius:3px;
									display:inline-block;
									height:14px;
									padding:1px 2px 0 1px;
									position:relative;
									top:-1px;
									margin-left:4px;
									font-size:1.1rem;
									opacity:0.6;}
								}
							}
			}/*list*/
		}/*list-box*/

	}/*list-area*/

	.readme-block{margin:-50px 0 70px 0;
		section{
			&:has(.note){margin-bottom:50px;}
			margin-bottom:100px;
			.note{
				margin:15px 25px;
				@media (max-width:1009px){margin:0;}
				padding:20px 20px 5px 20px;
				border:1px solid var(--bc-P);
				border-radius:6px;
					p{font-size:var(--fontF);}
			}

			h3{font-size:var(--fontF);}
			h4{font-size:var(--fontR); margin:30px 0 5px 0;}
			p{margin-bottom:15px; line-height:1.6; letter-spacing:0.5px;}

			ul{margin:0 0 30px 30px;
				li{
					margin-bottom:5px; list-style-type:circle;
				}
			}
		}/*section*/

			.navi{margin-bottom:150px;
				ul{display:flex;
					li{margin-right:15px;
						i{font-size:var(--fontR); margin-right:5px;}
					}
				}
			}

	}/*readme*/

	footer{
		@media (max-width:1009px){margin-bottom:100px;}
	}

}/*wrapper*/