/* CSS Document */

*{
	z-index:90;
}


header{
	display:block;
	position:relative;
	width:99vw;
	height:auto;
	margin:5vh auto 0 auto;
}

header div:nth-child(1){
	display:block;
	position:relative;
	width:100%;
	height:max(30vh,300px);
	margin:5vh auto 0 auto;
}


header dl:nth-child(2){
	display:block;
	position:relative;
	width:100%;
	height:auto;
	background-color:rgba(0,0,0,0.7);
	padding:20px 0;
}

header dl:nth-child(2) dt{
	display:block;
	position:relative;
	width:fit-content;
	height:fit-content;
	margin:0 auto;
}

header dl:nth-child(2) dt h1{
	width:fit-content;
	height:fit-content;
	font-size:2.7em;
	font-weight:bold;
	color:white;
	-webkit-text-stroke: 0.5px rgba(0,0,0,1.0);
	text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

header dl:nth-child(2) dd{
	display:block;
	position:relative;
	width:fit-content;
	height:fit-content;
	margin:0 auto;
	font-size:1.5em;
	color:white;
	-webkit-text-stroke: 0.3px rgba(0,0,0,1.0);
	text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}


.introduce{
	display:flex;
	position:relative;
	width:99vw;
	height:300px;
	margin:0 auto 3vh auto;
}

.introduce article:nth-child(1),
.introduce article:nth-child(2){
	display:block;
	position:relative;
	width:50%;
	height:100%;
	overflow:hidden;
}

.introduce article:nth-child(1) div{
	display:flex;
	position:relative;
	width:198vw;
	height:100%;
	animation:index_introduce 30s linear infinite;
}

@keyframes index_introduce{
	  0%{transform:translateX(0);}
	100%{transform:translateX(-75%);}
}


.introduce article:nth-child(1) div figure:nth-child(1),
.introduce article:nth-child(1) div figure:nth-child(2),
.introduce article:nth-child(1) div figure:nth-child(3),
.introduce article:nth-child(1) div figure:nth-child(4){
	display:block;
	position:relative;
	width:25%;
	height:100%;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;	
}

.introduce article:nth-child(1) div figure:nth-child(1),
.introduce article:nth-child(1) div figure:nth-child(4){
	background-image:url("../image/index_introduce_3.gif");	
}

.introduce article:nth-child(1) div figure:nth-child(2){
	background-image:url("../image/index_introduce_2.gif");	
}

.introduce article:nth-child(1) div figure:nth-child(3){
	background-image:url("../image/index_introduce_1.gif");	
}

.introduce article:nth-child(2) dl{
	display:block;
	position:relative;
	width:80%;
	height:80%;
	margin:5%;
}

.introduce article:nth-child(2) dl dt h2{
	display:block;
	position:relative;
	width:100%;
	height:fit-content;
	font-size:1.4em;
	font-weight:bolder;
}

.introduce article:nth-child(2) dl dt  h2 span{
	display:block;
	width:100%;
	height:fit-content;	
	padding:1% 0;
	font-size:1em;
	font-weight:bold;
}

.introduce article:nth-child(2) dl dd{
	display:block;
	position:relative;
	width:100%;
	height:fit-content;
	padding:1% 0;
}

.rule{
	display:block;
	position:relative;
	width:60%;
	height:fit-content;
	margin:10vh auto;
}


.rule dl {
	display:block;
	position:relative;
	width:100%;
	height:fit-content;
	margin:3vh auto;
}

.rule dl dt {
	display:block;
	position:relative;
	width:80%;
	height:fit-content;
	background-image:url("../image/mokume.gif");
	background-size:cover;
	background-repeat:repeat;
	background-position:center;
	margin:5vh auto;
	border:double 7px white;
}

.rule dl dt h3{
	display:block;
	position:relatie;
	width:fit-content;
	heght:fit-content;
	font-size:1.4em;
	padding:5px;
	margin:auto;
}

.rule dl dd{
	display:blck;
	position:relative;
	width:90%;
	height:fit-contet;
	padding:2px 0 2px 1em;
	margin:0 0 10px 5%;
	font-size:1.2em;
	font-weight:bold;
	border-left:solid 10px rgba(0,152,205,1.0);
}

.rule dl dd span{
	display:block;
	width:fit-content;
	height:fit-content;
	padding:3px 0 10px 0;
	color:dimgray;
}