@charset "utf-8";


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

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

/*---------------▼アニメーション▼------------------*/

/*↓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(-20px);
        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% {
        margin-right:0x;
        margin-top:0x;
        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% {
        margin-right:0x;
        margin-top:0x;
        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% {
        margin-right:0x;
        margin-top:0x;
        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% {
        margin-right:0x;
        margin-top:0x;
        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% {
        margin-right:0x;
        margin-top:0x;
        letter-spacing:-0.12em;
        vertical-align: middle;
        opacity:1;
    }
}





@keyframes main_Title_Animation{
    0% {
        margin-top:-296px;
        opacity:0;
    }
    100% {
        margin-right:0x;
        margin-top:0x;
        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;
    }
    
    
    100% {
        margin-top:0px;
        margin-bottom:0px;
        padding-top:0px;
        padding-bottom:0px;
        margin-left:0px;
        letter-spacing:-0.01em;
        opacity:1;
    }
}


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




.main_Left{
    background-image: url("../svg/Plaid_Whie_And_Black.svg");
    width : 700px\9; 
}

.main_Right{
    width : 700px\9; 
}



/*▲▲別口の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;
    }
    

    
    #content{
        min-width:1180px;
    }
    

    
    
    #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;
    }
    

    

    
    #navi_area ul li a{
        font-family: 'Yu Mincho',sans-serif;
    }
    
    .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;
    }
    
    footer small div{
        font-family: 'Oranienbaum', serif;
        font-size:22px;
    }
 
    .main_Article article section h3{
        font-family: 'Yu Gothic','Yu Mincho',sans-serif;
        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;
    }
    
    .main_Article article section h3 span:last-child{
        font-size:29px;
        font-family:'ExodusDemo-Regular',serif;
    }
    

    
    #main_Title div h2{
        font-family: 'Hannari', serif;
    }
    
    .main_Article article section h3{
        font-size:43px;
        font-family: 'Hannari', serif;
    }
    
    
    .main_Article h4{
        font-family: 'Hannari', serif;
    }
    
    
    .main_Article article section ul li{
        font-family: 'Hannari', serif;
    }
    
    .main_Article article section ul li{
        font-family: 'Hannari', serif;
        font-weight: 500;
        font-size:21px;
    }
    
    
    #Access_ID{
        font-family: 'Hannari', serif;
    }
    
    .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;
    }
    
    .main_Article h3{
        font-size:23px;
        line-height: 38px;
        font-family: 'Hannari', serif;
    }
    
    .main_Article h3 article span ul.article_Annotation_ul li{
        font-size:21px;
        font-family: 'Hannari', serif;
        line-height: 30px;
    }
    
    .main_Right_Text_1{
        font-family:'ExodusDemo-Regular',serif;
        font-weight: 700;
        margin-top:140px;
        font-size:67px\9;
        margin-right:58px\9;
        margin-top:35px\9;
    }

    
    .main_Right_Text_2{
        font-family:'ExodusDemo-Regular',serif;
        margin-top:160px;
        font-size:43px\9;
        margin-right:156px\9;
        margin-top:96px\9;
    }
    
    .main_Right_Text_3{
        font-family: 'Hannari', serif;
        font-size:21px\9;
        margin-left:38px\9;
        margin-top:345px\9;
    }
    
    .main_Right_Text_4{
        font-family: 'Hannari', serif;
        font-size:21px\9;
        margin-left:50px\9;
        margin-top:382px\9;
    }
    
    .main_Right_Text_5{
        font-family: 'Hannari', serif;
        font-size:21px\9;
        margin-left:60px\9;
        margin-top:405px\9;
    }
    
    .main_Right_Text_3 font{
        font-family: 'Hannari', serif;
        font-size:41px;
    }
}
/*▲-----------------IE対策用-----------------▲*/