@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Oswald:wght@200;400&family=Ysabeau+SC:wght@300&display=swap');


/*--- general -------------------------------------*/

body{
	margin: 0;
	padding: 0;
	min-height:110%;
}

#overWrapper{
	margin: 0 auto;
	padding: 3px;
	width: 1150px;
	border-left: double 15px rgb(0,80,145);
	border-right: double 15px rgb(0,80,145);
}

#contentWrapper{
	margin: 0 1px;
	padding: 0;
	width: 100%;
	text-align: center;
}

#header{
	margin: 0 0 10px 0;
	padding: 2em 0;
}

h1{
	margin: 0;
	padding: 5px 0 0 0;
	font-kerning: normal;
	text-transform: uppercase;
	font-family: 'Oswald', sans-serif;
	letter-spacing: 0.2em;
	font-size: 320%;
}

#header p{
	margin: 0;
	padding: 0;
	font-size:85%;
	font-family: 'Oswald', sans-serif;
	color: rgb(180.180,180);
	font-weight: lighter;
	letter-spacing: 2px;
	position: relative;
	top:-10px;
}


#footer p{
	margin: 2em 0 3em 0;
	padding: 0;
	font-size:85%;
	font-family: 'Oswald', sans-serif;
	color: rgb(180.180,180);
	font-weight: lighter;
	letter-spacing: 2px;
}

h2{
	width: 95%;
	text-align: left;
	vertical-align: middle;
	margin: 30px auto 10px auto;
	text-indent: 10px;
	font-kerning: normal;
	text-transform: uppercase;
	font-family: 'Oswald', sans-serif;
	border-left: solid 30px rgb(0,80,145);
}

h3{
	width: 90%;
	text-align: left;
	vertical-align: middle;
	margin: 5px auto 5px auto;
	text-indent: 25px;
	font-kerning: normal;
	font-size: 1em;
}


h3.topic{
	width:85%;
	border-left: solid 25px rgb(90,90,90);
	text-indent: 10px;
	padding: 5px 0 5px 0;
	background-color: rgb(240,240,240);
}

h4{
	width: 90%;
	text-align: left;
	vertical-align: middle;
	margin: 0 auto 5px auto;
	text-indent: 0;
	font-kerning: normal;
	font-size: 0.9em;
}

.subTopic{
	width: 82%;
	border-bottom: dotted 1px rgb(90,90,90);
	text-align: left;
	padding: 5px;
}

.contentBlock p{
	margin: 0 100px 0px 100px;
	padding: 0 0 30px 0;
	text-align: left;
}

.contentBlock ul{
	margin: -20px 100px 0px 105px;
	padding: 0 0 10px 0;
	text-align: left;
}

.contentBlock ul li{
	list-style: none;
}

.contentBlock ul li:before{
	content: "▶　";
	left : 1em;
	color: #aaaaaa;
	font-size: 70%;
	vertical-align: middle;
}

.supple{
	font-size:85%;
	color:rgb(60,60,60);
}

p.illus{
	padding-top: 10px;
	text-align: center;
}


a{
	text-decoration: none;
	color:rgb(0,0,255);
}

.contentBlock p a:hover,#footer a:hover,td a:hover,ul a:hover{
	text-decoration: underline;
	color:rgb(240,80,90);
}


a.iconLink{
	display: inline-block;
	vertical-align: middle;
	background: rgb(245,245,255);
	padding: 2px 4px;
	border-radius: 3px;
	text-decoration: none;
}

.il_YT::before{
	content: url("/material/doticon_yt.png");
	vertical-align: middle;
}
.il_X::before{
	content: url("/material/doticon_x.png");
	vertical-align: middle;
}

a.iconLink:hover{
	background: rgb(255,245,245);
}

a.boxedLink{
	display: inline-block;
	width: 90%;
	border: solid 2px rgb(20,80,200);
	border-radius: 5px;
	background: rgb(230,245,255);
	padding: 10px 7px 10px 13px;
	text-decoration: none;
	color: rgb(0,0,255);
	transition: ease-in-out 0.1s;
	&:hover{width:91%;padding: 13px 8px 13px 13px;}
}

a.boxedLink::before{
	content:"▶ ";
	font-size: 70%;
	vertical-align: middle;
}

a.boxedLink:hover{
	border: solid 2px rgb(240,100,100);
	background: rgb(255,240,235);
	color: rgb(240,80,90);
	font-weight: bold;
}


/*--- character -------------------------------------*/

em{
	font-style: normal;
	font-weight: bold;
}

hr{
	border: 0;
	height: 1px;
	background: linear-gradient(to right, #ffffff, #aaaaaa, #ffffff);
}

.eqColorSetting{
	font-size: 85%;
	color: rgb(110,110,110);
}

p.datetime{
	font-family: "Ysabeau SC", serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-size: 85%;
	text-align: right;
}

/*--- Equip table -------------------------------*/

table{
	margin: 0 auto;
	text-align: center;
	max-width: 99%;
}

tr{
	border-style: dotted none dotted none;
	border-width: 1px;
	border-color: rgb(90,90,90);
}

.od-row{
	background-color: rgb(240,240,255);
}

th{
	width: 70px;
	font-size: 90%;
	text-align: center;
	vertical-align: middle;
}

td{
	min-width: 250px;
	text-align: left;
	padding: 5px 30px 5px 10px;
	font-size: 90%;
}


/*--- tile -------------------------------------*/

figure.listItem{
	display: inline-block;
	margin: 5px;
	padding: 0;
	overflow: hidden;
	width: 320px;
	height: 180px;
}

figure.listItem img{
	width: 320px;
	height: 180px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	transition: ease-in-out 0.4s;
}

figure.listItem img:hover{
	overflow: hidden;
	transform: scale(1.1,1.1);
	filter: brightness(1.05);
	filter: contrast(1.1);
}


figcaption{
	display: block;
	margin: 0 auto;
	padding: 3px;
	text-align:center;
	width: 314px;
	font-family: 'Oswald', sans-serif;
	font-weight: lighter;
	position: relative;
	top: -38px;
	background-color: rgba(0,0,0,0.8);
	transition: ease-in-out 0.3s;
	&:hover{background-color:rgba(0,0,0,1);}
}

figure a{
	color:rgb(255,255,255);
	text-decoration: none;
}

figure.mirapriList{
	display: inline-block;
	margin: 5px;
	padding: 0;
	overflow: hidden;
	width: 160px;
	height: 320px;
}

figure.mirapriList img{
	width: 160px;
	height: 320px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	filter: saturate(0%);
}

figure.mirapriList img:hover{
	overflow: hidden;
	filter: saturate(100%);
}



/*--- narrow window -----------------------------------*/
@media screen and (max-width:1199px){

#overWrapper{
	width: 100%;
	border: none;
}

#contentWrapper{
	width: 100%;
	margin: 0 auto;
	margin: -50px auto 0 auto;
	min-height: 180px;
}

h1{
	padding: 30px 0 0 0;
	margin: 5px 0 0 0;
}

.contentBlock p{
	margin: 0 30px 0px 20px;
}

.contentBlock ul{
	margin: -20px 30px 0px 25px;
	padding: 0 0 10px 0;
	text-align: left;
}

img{
	width: 320px;
}


}