@charset "utf-8";


/*▼▼別口のIE用CSSのアニメーション・背景画像について設定用の必要追記記述箇所▼▼*/

/*
IEについて、レスポンシブによるビューポート判定が効かず、
個別にCSSを作る必要があると判断し、HTML側で幅判定による、複数のIE用のCSSを読み込ませる。
その上で、個別のこのＣＳＳ側にも、アニメーション関連のCSSは記述しなくては反映されない為、追記する。
*/



/*--▼index.html▼--*/
/*---------------▼アニメーション▼------------------*/

/*↓index*/
@keyframes title_font_fade_In {
    0% {
        transform:translateY(10px);
        opacity:0;
    }
    100% {
        transform:translateY(0px);	
        vertical-align: middle;
        opacity:1;
    }
}


@keyframes list_font_fade_In {
    0% {
        transform:translateY(-10px);
        opacity:0;
    }
    100% {
        transform:translateY(-0px);	
        vertical-align: middle;
        opacity:1;
    }
}


@keyframes list_hover_IN_background {
    0% {
        background-color:black;
        opacity:0;
    }

    15% {
        opacity:0.5;
    }

    100% {
        background-color:white;
        opacity:1;
    }
}



/*↓TOP(index)の右側のテキストのアニメーション*/

@keyframes main_Right_Text_1_Animation{
    0% {
        margin-top:96px;
        letter-spacing:1.0em;
        opacity:0;
    }
    100% {
        letter-spacing:0.0em;
        vertical-align: middle;
        opacity:1;
    }
}


@keyframes main_Right_Text_2_Animation{
    0% {
        margin-top:-296px;
        letter-spacing:-1.0em;
        opacity:0;
    }
    100% {
        letter-spacing:0.0em;
        vertical-align: middle;
        opacity:1;
    }
}



@keyframes main_Right_Text_3_Animation{
    0% {
        margin-left:-296px;
        letter-spacing:-1.0em;
        opacity:0;
    }
    100% {
        letter-spacing:-0.1em;
        vertical-align: middle;
        opacity:1;
    }
}



@keyframes main_Right_Text_4_Animation{
    0% {
        margin-left:-199px;
        letter-spacing:-1.0em;
        opacity:0;
    }

    15% {
        margin-left:-199px;
        letter-spacing:-1.0em;
        opacity:0;
    }

    100% {
        letter-spacing:-0.12em;
        vertical-align: middle;
        opacity:1;
    }
}


@keyframes main_Right_Text_5_Animation{
    0% {
        margin-left:-140px;
        letter-spacing:-1.0em;
        opacity:0;
    }

    25% {
        margin-left:-140px;
        letter-spacing:-1.0em;
        opacity:0;
    }

    100% {
        letter-spacing:-0.12em;
        vertical-align: middle;
        opacity:1;
    }
}





@keyframes main_Title_Animation{
    0% {
        margin-top:-296px;
        opacity:0;
    }
    100% {
        letter-spacing:0.0em;
        vertical-align: middle;
        opacity:1;
    }
}



@keyframes main_Title_Font_Animation{
    0% {
        margin-top:0px;
        margin-bottom:0px;
        padding-top:0px;
        padding-bottom:0px;
        margin-left:1100px;
        letter-spacing:-1.0em;
        opacity:0;
        white-space: nowrap;
    }


    100% {
        margin-top:0px;
        margin-bottom:0px;
        padding-top:0px;
        padding-bottom:0px;
        margin-left:0px;
        letter-spacing:-0.01em;
        opacity:1;
        white-space: nowrap;
    }
}


@keyframes Aticle_Font_Animation{
    0% {
        opacity:0;
    }


    100% {
        opacity:1;
    }
}


.main_Left{
	background-image: url("../svg/Plaid_Whie_And_Black.svg");
}


/*▲▲別口のIE用CSSのアニメーション・背景画像について設定用の必要追記記述箇所▲▲*/






/*↓-----------------IE対策用-----------------*/
@media all and (-ms-high-contrast: none) {

    .logo_title{
        padding-top:10px;
        padding-bottom:18px;
        padding-left:10px;
        padding-right:10px;
        margin-left:22px;
        margin-top:0;
    }

    
    

    #title{
        font-family: 'ExodusDemo-Regular', serif;
        font-size:21px;
        transform: rotate(0.001deg);
    }


    #Chess_Types tbody tr td{
        transform: rotate(0.001deg);
    }



    #main_Title div{
        background-color:white;
        height:auto;
        width: auto;
        font-size:34px;
        display:table-cell;
        vertical-align: middle;
        padding-left:110px;
        padding-bottom:0px;
        letter-spacing:-0.01em;
        font-family: 'Yu Gothic','Yu Mincho',sans-serif;
        transform: rotate(0.001deg);
    }





    #navi_area ul li a{
        font-family: 'Yu Mincho',sans-serif;
        transform: rotate(0.001deg);
    }

    .main_Article{
        width:auto;
        margin-left:1px;
        margin-right: 1px;
        background-color:white;
        padding-left:7%;
        padding-right:7%;
        padding-bottom:7%;
        padding-top:150px;
    }

    footer small div{
        font-family: 'Yu Mincho',sans-serif;
        transform: rotate(0.001deg);
    }

    footer small div{
        font-family: 'Oranienbaum', serif;
        transform: rotate(0.001deg);
        font-size:22px;
    }

    .main_Article article section h3{
        font-family: 'Yu Gothic','Yu Mincho',sans-serif;
        transform: rotate(0.001deg);
        font-size:16px;
        font-weight: normal;
    }


    .main_Article h3 article span ul.article_Notes_ul li{
    margin-bottom:0px;
    }

    .main_Article h3 article span ul.article_Annotation_ul li{
    margin-bottom:0px;
    }


    h3{
        padding-top:17px;
    }

    h3 span:first-child{
        font-size:42px;
        font-family: 'Hannari', serif;
        transform: rotate(0.001deg);
    }

    .main_Article article section h3 span:last-child{
        font-size:29px;
        font-family:'ExodusDemo-Regular',serif;
        transform: rotate(0.001deg);
    }



    #main_Title div h2{
        font-family: 'Hannari', serif;
        transform: rotate(0.001deg);
        padding-top:22px;
    }

    .main_Article article section h3{
        font-size:43px;
        font-family: 'Hannari', serif;
        transform: rotate(0.001deg);
    }


    .main_Article h4{
        font-family: 'Hannari', serif;
        transform: rotate(0.001deg);
    }


    .main_Article article section ul li{
        font-family: 'Hannari', serif;
        transform: rotate(0.001deg);
    }

    .main_Article article section ul li{
        font-family: 'Hannari', serif;
        transform: rotate(0.001deg);
        font-weight: 500;
        font-size:21px;
    }


    #Access_ID{
        font-family: 'Hannari', serif;
        transform: rotate(0.001deg);
    }

    .Access_Area div:nth-child(3){
        font-family: 'Hannari', serif;
        font-size:22px;
    }

    .main_Article h3 article span ul.article_Notes_ul li{
        font-size:21px;
        font-family: 'Hannari', serif;
        transform: rotate(0.001deg);
    }

    .main_Article h3{
        font-size:23px;
        line-height: 38px;
        font-family: 'Hannari', serif;
        transform: rotate(0.001deg);
    }

    .main_Article h3 article span ul.article_Annotation_ul li{
        font-size:21px;
        font-family: 'Hannari', serif;
        transform: rotate(0.001deg);
        line-height: 30px;
    }



    .main_Right_Text_1{
        font-family:'ExodusDemo-Regular',serif;
        transform: rotate(0.001deg);
        margin-top:102px;
        font-weight: 700;
        font-size:24px;
        margin-right:1%;
    }


    .main_Right_Text_2{
        font-family:'ExodusDemo-Regular',serif;
        transform: rotate(0.001deg);
        font-size:25px;
        margin-top:20%;
        margin-right:1%;
    }

    .main_Right_Text_3{
        font-family: 'Hannari', serif;
        transform: rotate(0.001deg);
        font-size:25px;
        margin-left:8%;
        margin-top:6%;
    }

    .main_Right_Text_4{
        font-family: 'Hannari', serif;
        transform: rotate(0.001deg);
        font-size:21px;
        margin-bottom:9%;
        margin-left:20%;
    }

    .main_Right_Text_5{
        font-family: 'Hannari', serif;
        transform: rotate(0.001deg);
        font-size:21px;
        margin-bottom:0%;
        margin-left:23%;
    }
    
    
    #navi_area nav ul li{
    	padding-top:4px;
    }
    
    
    #main_Title{
	    position: absolute;
	    top: 121px;
	    left: 0px;
	    right: 0px;
	    background-color: black;
	    width: 100%;
	    height: 80px;
	    display: table;
	    padding-top: 2px;
	    padding-bottom: 2px;
	    animation-duration: 1s;
	    animation-timing-function: ease-out;
	    text-align: center;
	    vertical-align: middle;
    }
    

    #main_Title div{
    	padding-left:0px;
    }
    
    
    #main_Title div h2{
    	white-space: nowrap;
    	font-size:20px;
    	margin: 0px;
    	padding-top:0px;
    	letter-spacing: -0.01em;
    	font-weight: normal;
    	font-family: 'Hannari','Yu Gothic','Yu Mincho',sans-serif;
    }
    
    
    .main_Article article section h3{
    	font-size:25px;
	}
	
	
	#Chess_Types thead tr th{
		font-size:12px;
		font-weight:500px;
	}
	
	
	#Chess_Types tbody tr td p:nth-child(1){
		font-size:12px;
	}
	
	
	.main_Article article section h3{
		padding-left:0px;
		padding-right:0px;
	}
	
	.main_Article h3{
		margin-left:0%;
		margin-right:0%;
	}
	
	

}
/*▲-----------------IE対策用-----------------▲*/