@charset "utf-8";


/*---------------▼基本設定▼------------------*/

html{
    margin:0px;
    padding:0px;
}


a{
    text-decoration: none;
    color:#353635;
}

figure{
    margin:0;
    padding:0;
}

.article_a_link_Class{
    color:#e36666;
}


/*---------------▼フォント設定▼------------------*/

@font-face {
  font-family: 'ExodusDemo-Regular';
  src: url('font/ExodusDemo-Regular.otf');
}

@font-face {
  font-family: 'Oranienbaum';
  src: url('font/Oranienbaum.ttf');
}

@font-face {
  font-family: 'Raleway Thin';
  src: url('font/Raleway Thin.otf');
}


@font-face {
  font-family: 'Butler_Bold';
  src: url('font/Butler_Bold.otf');
}


@font-face {
  font-family: 'Hannari';
  src: url('font/Hannari.otf');
}


/*▼------------横幅712px以上の設定--------------▼*/
@media screen and (min-width:712px){
    
    
    body{
        margin:0px;
        padding:0px;
        min-width: 900px;
        background-color:black;
    }

    

    /*--▼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(-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% {
            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;
        }


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



    /*---------------▼ＴＯＰスライドショー▼------------------*/


    .image_1{
        width:100%;
        height: 100%;
        position:absolute;
        opacity: 0;
        transition: 2s ease-in-out;
        -webkit-transition: 2s ease-in-out;
    }

    .image_2{
        width:100%;
        height: 100%;
        opacity: 1;
        transition: 2s ease-in-out;
        -webkit-transition: 2s ease-in-out;
    }



    /*---------------↓ロゴ・タイトル------------------*/



    header{
        margin:0px;
        padding:0px;
        width:100%;
        height: 51px;
        background-color: Black;
        min-width:inherit;
        position:relative;
    }

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

    #title{
        font-size:14px;
    }

    #logo_area{
        width:700px;
        height:auto;
        float:left;
    }

    .logo{
        margin-left:42px;
        vertical-align: middle;
        display: inline-block;
    }

    .logo img{
        height: 30px;
        width: 30px;
        vertical-align: middle;
    }

    /*↓文字の合間の幅を指定*/
    .logo_title{
        letter-spacing:4px;
        padding-top:4px;
        padding-bottom:14px;
        padding-left:10px;
        padding-right:10px;
        margin-left:22px;
        display: inline-block;
        font-size:14px;
        vertical-align: middle;
        color:white;
        font-family: 'ExodusDemo-Regular', serif;
        animation-name: title_font_fade_In;
        animation-duration: 2s;
        animation-timing-function:ease-out;
        transition: background-color 1s,
            padding-left 1s,
            padding-right 1s,
            margin-left 1s,
            color 1s;
        -webkit-transition: background-color 1s,
            padding-left 1s,
            padding-right 1s,
            margin-left 1s,
            color 1s;
    }

    .logo_title:hover{
        padding-left:20px;
        padding-right:20px;
        margin-left:12px;
        background-color:white;
        color:black;
        text-shadow:3px 3px 4px #7f8484;
    }


    /*--------------リスト-------------------*/



    #navi_area{
        text-align: right;
        margin-right: 17px;
    }

    #navi_area nav ul{
        list-style: none;
        margin-top:0px;
        margin-bottom:0px;
        white-space:nowrap;
    }

    #navi_area nav ul li{
        font-family: 'Oranienbaum', serif;
        display:inline-block;
        padding-top:25px;
        padding-bottom:19px;
        padding-right:10px;
        padding-left:10px;
        margin-left:22px;
        font-size:15px;
        font-weight:700;
        animation-name: list_font_fade_In;
        animation-duration: 2s;
        animation-timing-function:ease-out;
        transition: background-color 1s;
            -webkit-transition: background-color 1s;
    }

    ul li:hover{
        background-color:white;
    }

    ul li:hover a{
        color:black;
        text-decoration: none;
        text-shadow:2px 2px 3px #7f8484;
    }


    ul li a{
        color:white;
        text-decoration: none;
        transition: color 1s;
        -webkit-transition: color 1s;
    }


    /*--------------▼メイン▼-------------------*/



    #content{
        clear: both;
        height: auto;
        width:100%;
        min-width:1130px;
        background-color:white;
        /*↓inlin-blockの改行防止用*/
        text-indent: -1em;
        letter-spacing: -1em;
        white-space: nowrap;
        font-size:0;
    }


    h2{
        margin:0;
        padding:0;
    }


    .main_Left{
        height: 98vh;
        background-color:white;
        background-image: url("svg/Plaid_Whie_And_Black.svg");
        width:57%;
        display: inline-block;
        vertical-align:top;
        position:relative;
        /*↓inlin-blockの改行防止用*/
        letter-spacing: normal;
        white-space: normal;
    }


    .main_Right{
        width:43%;
        height: 98vh;
        background-color:white;
        display: inline-block;
        vertical-align:top;
        position:relative;
        /*↓inlin-blockの改行防止用*/
        letter-spacing: normal;
        white-space: normal;
    }


    .main_Right_Text_1{
        font-size:11vh;
          -webkit-writing-mode: vertical-rl;
          -ms-writing-mode: tb-rl;
              writing-mode: vertical-rl;
          position: absolute;
        right: 0;
        margin-right:58px;
        margin-top:35px;
        font-family: 'Butler_Bold' , serif;
        white-space: nowrap;
        animation-name: main_Right_Text_1_Animation;
        animation-duration: 1s;
        animation-timing-function:ease-out;
    }


    .main_Right_Text_2{
        font-size:6vh;
          -webkit-writing-mode: vertical-rl;
          -ms-writing-mode: tb-rl;
              writing-mode: vertical-rl;
          position: absolute;
        right: 0;
        margin-right:156px;
        margin-top:96px;
        font-family: 'Butler_Bold' , serif;
        white-space: nowrap;
        animation-name: main_Right_Text_2_Animation;
        animation-duration: 1s;
        animation-timing-function:ease-out;
    }


    .main_Right_Text_3{
        font-style :italic;
        font-size:1.4vw;
        position: absolute;
        left : 0;
        margin-left:8%;
        margin-top:66%;
        font-weight: 700;
        letter-spacing:-0.1em;
        font-family: 'Hannari', serif;
        white-space: nowrap;
        animation-name: main_Right_Text_3_Animation;
        animation-duration: 1s;
        animation-timing-function:ease-out;

    }


    .main_Right_Text_3 font{
        font-style :italic;
        font-size:29px;
        margin-right:5px;
        letter-spacing:-0.2em;
        font-family: 'Hannari', serif;
    }


    .main_Right_Text_4{
        font-style :italic;
        font-size:1.3vw;
        position: absolute;
        left : 0;
        margin-left:11%;
        margin-top:74%;
        font-weight: 900;
        letter-spacing:-0.12em;
        font-family: 'Hannari', serif;
        white-space: nowrap;
        animation-name: main_Right_Text_4_Animation;
        animation-duration: 1s;
        animation-timing-function:ease-out;
    }


    .main_Right_Text_5{
        font-style :italic;
        font-size:1.3vw;
        position: absolute;
        left : 0;
        margin-left:12%;
        margin-top:79%;
        font-weight: 900;
        letter-spacing:-0.12em;
        font-family: 'Hannari', serif;
        white-space: nowrap;
        animation-name: main_Right_Text_5_Animation;
        animation-duration: 1s;
        animation-timing-function:ease-out;
    }






    /*▼--------------フッター------------------▼*/


    footer{
        width:100%;
        height:auto;
        margin:0px;
        padding:0px;
        background-color: black;
        text-align:center;
        vertical-align: middle;
        font-family: 'Oranienbaum', serif;
        font-size:16px;
        letter-spacing:2px;
        padding-top:6px;
        padding-bottom:6px;
        font-weight:700;
    }

    footer small div{
        display:inline-block;
        color:white;
    }

    #footer_date{
        margin-left: 22px;
    }

    /*▲--------------フッター------------------▲*/


    /*▼--------------メインコンテンツ-----------------▼*/

    #main_ID{
        height: auto;
        width:100%;
        background-color:white;
        clear: both;
         min-width:1130px;
    }

    .main_Contents{
        width:auto;
        margin-left:7%;
        margin-right: 7%;
        background-color:black;
    }


    #main_Title{
        position: absolute;
        top:92px;
        left:0px;
        right:0px;
        background-color:black;
        width:100%;
         min-width:1130px;
        height:100px;
        display:table;
        padding-top:2px;
        padding-bottom:2px;

        animation-name: main_Title_Animation;
        animation-duration: 1s;
        animation-timing-function:ease-out;
    }

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


    #main_Title div h2{
        margin-top:0px;
        margin-bottom:0px;
        padding-top:0px;
        padding-bottom:0px;
        animation-name: main_Title_Font_Animation;
        animation-duration: 1s;
        animation-timing-function:ease-out;
        font-weight: normal;
    }


    #main_Title div span:nth-child(2){
        font-size:24px;
        margin-left:12px;
        margin-right:0px;
    }

    #main_Title div span:nth-child(3){
        font-size:31px;
        margin-left:0px;
        margin-right:0px;
    }

    #main_Title div span:nth-child(4){
        font-size:24px;
        margin-left:0px;
        margin-right:0px;
    }


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



    .main_Article article section section{
        border-top: 1px dashed #3d3d3d;
        margin-top:154px;
        margin-bottom:31px;
        font-family: 'Hannari','Yu Gothic','Yu Mincho',sans-serif;
        font-size:23px;
        font-weight: 500;
        color:#3b3b3b;
    }

    .main_Article article section section:first-child{
        border-top: 0px;
        margin-top:54px;
        margin-bottom:31px;
    }



    .main_Article h3{
        font-family: 'Hannari','Yu Gothic','Yu Mincho',sans-serif;
        font-size:21px;
        font-weight: normal;
        margin-top:32px;
    }


    .main_Article article section span{
        margin-left:52px;
        margin-right: 52px;
        margin-top:32px;
        margin-bottom:32px;
    }


    .main_Article h4{
        font-weight:500;
        margin-left:31px;
        margin-right:31px;
        margin-top:33px;
    }

    .main_Article h3 article span ul.article_Nomarl_ul{
        margin-left:40px;
        margin-right: 40px;
    }

    .main_Article h3 article span ul.article_Nomarl_ul li{
        list-style-type:circle;
    }

    .main_Article h3 article span ul.article_ul li:nth-child(1){
        margin-bottom:14px;
    }


    .main_Article h3 article span ul.article_Annotation_ul{
        list-style-type: none;
        margin-left:0px;
        margin-right:0px;
        margin-top:42px;
        margin-bottom:42px;
        padding-left:12px;
        padding-right:12px;
        padding-top:22px;
        padding-bottom:22px;
        border-top: 1px dashed #3d3d3d;
        border-bottom: 1px dashed #3d3d3d;
    }

    .main_Article h3 article span ul.article_Annotation_ul li{
        padding-left: 1em;
        text-indent: -1em;
        line-height: 30px;
        margin-bottom:8px;
    }



    .main_Article h3 article span ul.article_Notes_ul{
        list-style-type: none;
        margin-left:0px;
        margin-right:0px;
        margin-top:42px;
        margin-bottom:42px;
        padding-left:12px;
        padding-right:12px;
        padding-top:22px;
        padding-bottom:22px;
        border-top: 1px solid #3d3d3d;
        border-bottom: 1px solid #3d3d3d;
        border-left: 1px dashed #babfbc;
        border-right: 1px dashed #babfbc;
    }

    .main_Article h3 article span ul.article_Notes_ul li{
        padding-left: 1em;
        text-indent: -1em;
        line-height: 30px;
        margin-bottom:8px;
    }


    .main_Article h3 article, .main_Article section{
        animation-name: Aticle_Font_Animation;
        animation-duration: 1.4s;
        animation-timing-function:ease-out;
    }





    /*▲--------------メインコンテンツ-----------------▲*/











    #Chess_Types{
        width:100%;
        height:auto;
        margin-top:12px;
        margin-bottom:12px;
        margin-left:20px;
        margin-right:20px;
        border-collapse:separate;
        border-spacing: 0;
    }

    #Chess_Types caption{
        font-size:22px;
        letter-spacing:17px;
        font-family: 'Hannari', serif;
        margin-top:22px;
        padding-bottom:12px;
    }

    #Chess_Types thead tr th:first-child{
      border-radius: 6px 0 0 0;
    }

    #Chess_Types thead tr th:last-child{
      border-radius: 0 6px 0 0;
    }

    #Chess_Types thead tr th{
      line-height: 42px;
        padding-bottom:4px;
    }


    #Chess_Types thead tr th{
      font-family: 'Hannari', serif;
        font-size:18px;
        font-weight: 400;
      text-align: center;
      color:white;
      background: linear-gradient(#727572,#4d544d);
      border-left: 1px solid #3f403f;
      border-top: 1px solid #3f403f;
      border-bottom: 1px solid #3f403f;
      box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
      width: 33%;
    }


    #Chess_Types tbody tr td{
      text-align: center;
      border-left: 1px solid #2a2b2a;
      border-bottom: 1px solid #2a2b2a;
      border-top:none;
      box-shadow: 0px -3px 5px 1px #eee inset;
      width: 25%;
      padding: 10px 0;
    }



    #Chess_Types tbody tr td:last-child{
      border-right: 1px solid #3f403f;
    }

    #Chess_Types tbody tr:last-child td:first-child {
      border-radius: 0 0 0 6px;
    }

    #Chess_Types tbody tr:last-child td:last-child {
      border-radius: 0 0 6px 0;
    }


    #Chess_Types tbody tr td{
        text-align: center;
        vertical-align: middle;
        padding:12px;
        font-size:25px;
        font-family: 'Hannari', serif;
    }


    #Chess_Types tbody tr td:nth-child(2){
        font-size:31px;
    }

    #Chess_Types tbody tr td img{
        width:85px;
        height:152px;
        font-size:82px;
    }

    #Chess_Types tbody tr td p:first-child{
        margin-top:22px;
        padding-bottom:24px;
        border-bottom: 1px solid #c9c1c1;
    }


    
    #Chess_Types tbody tr td:nth-child(1):hover{
        background-color:#5e5e5e;
        color:white;
    }
    
    #Chess_Types tbody tr td:nth-child(1):hover > a p{
        background-color:#5e5e5e;
        color:white;
    }

    
    .main_Article article section ul li{
        margin-bottom:52px;
        line-height: 29px;
    }


    .main_Article article section h3{
        margin-left:32px;
        margin-right:32px;
        padding-bottom:31px;
        padding-left:20px;
        padding-right:20px;
        border-bottom:1px solid #a3a3a3;
        font-size:33px;
        font-family: 'Hannari', serif;
    }

    .main_Article article section h3 span:last-child{
        margin-left:37px;
        font-size:19px;
        letter-spacing:7px;
        font-family:'ExodusDemo-Regular',serif;
        color:#7a7676;
    }




    /*▼-----------問合せ----------------▼*/

    #Access_ID{

        padding-bottom:42px;
        padding-top:43px;
        padding-left:33px;
        padding-right:33px;
        margin-top:32px;
        margin-bottom:32px;
        margin-left:12px;
        margin-right:12px;
        color: #5d627b;
        background: white;
        border-top: solid 5px #3b3b3b;
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
        font-size:24px;
    }



    .Access_Area {
        margin-top:74px;
        padding:0px;
        border: solid 2px #9c9c9c;
    }



    .Access_Area .Access_Title_Area {
        margin:0px;
        padding-left:23px;
        padding-right:23px;
        padding-top:12px;
        padding-bottom:16px;
        font-size:23px;
        background: #474747;
        color: #ffffff;
        font-weight: 400;
        font-family: 'Raleway Thin',serif;
        border: 2px solid #ffffff;
    }

    .Access_Area div:nth-child(2) {
        display: inline-block;
        width:47%;
        vertical-align: middle;
        text-align: center;
        margin: 0; 
        padding-bottom:5px;
        margin-bottom:57px;
        margin-top:55px;
    }

    .Access_Area div:nth-child(3) {
        display: inline-block;
        width:51%;
        vertical-align: middle;
        height: auto;
        border-left: 2px solid #9c9c9c;
        text-align: center;
        margin: 0; 
        font-size:18px;
    }

    .Access_Area div:nth-child(3) div{
        padding:20px;
        margin-bottom:12px;
    }



    /*▲-----------問合せ----------------▲*/





    /*▼-----------ルール、駒の種類----------------▼*/


    .ul_list_Cicle_Class{
        list-style-type: circle;
    }


    .Article_Right_Area_Image_Set_Box_1_Class{
        width:60%;
        height: auto;
        display: inline-block;
        margin-bottom:43px;
    }



    .Article_Right_Area_Image_Set_Box_2_Class{
        text-align: right;
        vertical-align: top;
        height: auto;
        width:34%;
        padding-left:15px;
        padding-right:0;
        padding-bottom:0;
        padding-top:0px;
        margin:0;
        display: inline-block;
        margin-bottom:90px;
    }




    .Article_Right_Area_Image_Set_Box_2_Class img{
        width:305px;
        height:305px;
    }


    .list_Asterisk_Mark_Set{
        list-style-type: none;
        padding-left: 1em;
        text-indent: -1em;
        line-height: 30px;
        margin-bottom:8px;
        font-size:19px;
        margin-top:32px;
        font-weight: 600;
    }


    .Article_Right_Area_Image_Set_Box_1_Class ul.ul_list_Cicle_Class{
        margin-top:0;
        margin-bottom:0;
        padding-top:0;
        padding-bottom:0;
    }


    .cicle_Red_Color_Class{
        color:red;
    }

    .cicle_Bule_Color_Class{
        color:#5A9BD3;
    }


    /*▲-----------ルール、駒の種類----------------▲*/







    /*▼-----------------Firefox対策用-----------------▼*/
    @-moz-document url-prefix() {

        html{
            color:#404040;
        }

        #main_Title div h2{
            color:#636363;
        }

        .main_Article article section h3{
            color:#636363;
        }

        .main_Article article section ul li{
            color:#636363;
        }

        .main_Article h4{
            color:#636363;
        }

        #Chess_Types caption{
            color:#636363;
        }

        #Chess_Types tbody tr td p:first-child{
            color:#636363;
        }

        #Chess_Types tbody tr td:nth-child(2){
            color:#636363;
        }

        .list_Asterisk_Mark_Set{
            font-weight: 500;
        }

        .Access_Area{
            letter-spacing: -0.4em;
            word-spacing: 0.1em;
        }



        .Access_Area div:nth-child(1){
            letter-spacing: normal;
        }

        .Access_Area div:nth-child(2){
            width:48%;
            display: inline-block;
            letter-spacing: normal;
        }

        .Access_Area div:nth-child(3){
            width:42%;
            text-align: center;
            padding-left:12px;
            display: inline-block;
            letter-spacing: normal;
        }

        .Access_Area div:nth-child(3) div{
            padding:0;
            font-size:14px;
            padding-left:12px;
        }
    }
    /*▲-----------------Firefox対策用-----------------▲*/

}
/*▲------------横幅712px以上の設定--------------▲*/













/*▼------------横幅711px以下の設定--------------▼*/
@media screen and (max-width:711px){
    
    
    
    
    
    body{
        margin:0px;
        padding:0px;
        background-color:black;
    }
    




    /*--▼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(-1px);	
            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;
        }
    }



    /*---------------▼ＴＯＰスライドショー▼------------------*/


    .image_1{
        width:100%;
        height: 100%;
        position:absolute;
        opacity: 0;
        transition: 2s ease-in-out;
        -webkit-transition: 2s ease-in-out;
    }

    .image_2{
        width:100%;
        height: 100%;
        opacity: 1;
        transition: 2s ease-in-out;
        -webkit-transition: 2s ease-in-out;
    }



    /*---------------↓ロゴ・タイトル------------------*/



    header{
        margin:0px;
        padding:0px;
        width:100%;
        height: auto;
        background-color: Black;
        min-width:inherit;
    }

    h1{
        margin:0px;
        margin-top:9px;
        padding:0px;
    }

    #title{
        font-size:21px;
    }

    #logo_area{
        width:100%;
        height:auto;
        border-bottom:1px solid #FFFFFF;
    }

    .logo{
        margin-left:22px;
        vertical-align: middle;
        display: inline-block;
    }

    .logo img{
        height: 44px;
        width: 44px;
        vertical-align: middle;
    }

    /*↓文字の合間の幅を指定*/
    .logo_title{
        letter-spacing:4px;
        padding-top:4px;
        padding-bottom:14px;
        padding-left:10px;
        padding-right:10px;
        margin-left:22px;
        display: inline-block;
        font-size:14px;
        vertical-align: middle;
        color:white;
        font-family: 'ExodusDemo-Regular', serif;
        animation-name: title_font_fade_In;
        animation-duration: 2s;
        animation-timing-function:ease-out;
        transition: background-color 1s,
            padding-left 1s,
            padding-right 1s,
            margin-left 1s,
            color 1s;
        -webkit-transition: background-color 1s,
            padding-left 1s,
            padding-right 1s,
            margin-left 1s,
            color 1s;
    }

    .logo_title:hover{
        margin-left:12px;
        background-color:white;
        color:black;
        text-shadow:3px 3px 4px #7f8484;
    }


    /*--------------リスト-------------------*/



    #navi_area{
        width:100%;
        text-align: center;
    }

    #navi_area nav ul{
        width:100%;
        list-style: none;
        margin-top:0px;
        margin-bottom:0px;
        margin-right: 0;
        margin-left:0;
        padding:0;
    }

    #navi_area nav ul li{
        font-family:'Oranienbaum', serif;
        display:inline-block;
        margin:0;
        width:15%;
        padding-left:1%;
        padding-right: 1%;
        font-weight:700;
        animation-name: list_font_fade_In;
        animation-duration: 2s;
        animation-timing-function:ease-out;
        transition: background-color 1s;
            -webkit-transition: background-color 1s;
    }

    ul li:hover{
        background-color:white;
    }

    ul li:hover a{
        color:black;
        text-decoration: none;
        text-shadow:2px 2px 3px #7f8484;
    }


    ul li a{
        color:white;
        text-decoration: none;
        transition: color 1s;
        -webkit-transition: color 1s;
    }


    /*--------------▼メイン▼-------------------*/



    #content{
        clear: both;
        height: 580px;
        width:100%;
        background-color:white;
        /*↓inlin-blockの改行防止用*/
        text-indent: -1em;
        letter-spacing: -1em;
        white-space: nowrap;
        font-size:0;
    }


    h2{
        margin:0;
        padding:0;
    }


    .main_Left{
        background-color:white;
        background-image: url("svg/Plaid_Whie_And_Black.svg");
        height: 300px;
        width:100%;
        display: inline-block;
        vertical-align:top;
        position:relative;
        /*↓inlin-blockの改行防止用*/
        letter-spacing: normal;
        white-space: normal;
    }


    .main_Right{
        height: 230px;
        width:92%;
        background-color:white;
        vertical-align:top;
        position:relative;
        /*↓inlin-blockの改行防止用*/
        letter-spacing: normal;
        white-space: normal;
    }

    
    
    .main_Right_Text_1{
        font-size:37px;
        position: absolute;
        margin-top:62px;
        right: 0;
        font-family: 'Butler_Bold' , serif;
        white-space: nowrap;
        animation-name: main_Right_Text_1_Animation;
        animation-duration: 1s;
        animation-timing-function:ease-out;
    }


    .main_Right_Text_2{
        font-size:8vw;
        position: absolute;
        right: 0;
        margin-top:116px;
        font-family: 'Butler_Bold' , serif;
        white-space: nowrap;
        animation-name: main_Right_Text_2_Animation;
        animation-duration: 1s;
        animation-timing-function:ease-out;
    }


    .main_Right_Text_3{
        font-style :italic;
        font-size:17px;
        margin-left:5%;
        margin-top:2%;
        position: absolute;
        font-weight: 700;
        letter-spacing:-0.1em;
        font-family: 'Hannari', serif;
        white-space: nowrap;
        animation-name: main_Right_Text_3_Animation;
        animation-duration: 1s;
        animation-timing-function:ease-out;

    }


    .main_Right_Text_3 font{
        font-style :italic;
        font-size:29px;
        margin-left:5%;
        margin-top:2%;
        letter-spacing:-0.2em;
        font-family: 'Hannari', serif;
    }


    .main_Right_Text_4{
        font-style :italic;
        font-size:19px;
        position: absolute;
        margin-left:12%;
        margin-bottom:5%;
        left : 0;
        bottom:0;
        font-weight: 900;
        letter-spacing:-0.12em;
        font-family: 'Hannari', serif;
        white-space: nowrap;
        animation-name: main_Right_Text_4_Animation;
        animation-duration: 1s;
        animation-timing-function:ease-out;
    }


    .main_Right_Text_5{
        font-style :italic;
        font-size:17px;
        position: absolute;
        margin-left:19%;
        margin-bottom:0%;
        left : 0;
        bottom:0;
        font-weight: 900;
        letter-spacing:-0.12em;
        font-family: 'Hannari', serif;
        white-space: nowrap;
        animation-name: main_Right_Text_5_Animation;
        animation-duration: 1s;
        animation-timing-function:ease-out;
    }






    /*▼--------------フッター------------------▼*/


    footer{
        width:100%;
        height:auto;
        margin:0px;
        padding:0px;
        background-color: black;
        text-align:center;
        vertical-align: middle;
        font-family: 'Oranienbaum', serif;
        font-size:16px;
        letter-spacing:2px;
        padding-top:6px;
        padding-bottom:6px;
        font-weight:700;
    }

    footer small div{
        display:inline-block;
        color:white;
    }

    #footer_date{
        margin-left: 22px;
    }

    /*▲--------------フッター------------------▲*/


    /*▼--------------メインコンテンツ-----------------▼*/

    #main_ID{
        height: auto;
        width:100%;
        background-color:white;
        padding-bottom:74px;
    }

    .main_Contents{
        width:auto;
        background-color:black;
    }


    #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{
        background-color:white;
        height:auto;
        width: auto;
        padding-top:8px;
        padding-bottom:8px;
        display:table-cell;
        vertical-align: middle;
        letter-spacing:-0.01em;
        font-family: 'Hannari','Yu Gothic','Yu Mincho',sans-serif;
    }


    #main_Title div h2{
        margin-top:0px;
        margin-bottom:0px;
        padding-top:0px;
        padding-bottom:0px;
        animation-name: main_Title_Font_Animation;
        animation-duration: 1s;
        animation-timing-function:ease-out;
        font-weight: normal;
        white-space:normal;
    }


    #main_Title div span:nth-child(1){
        width:100%;
        vertical-align: middle;
        text-align: center;
        display: table;
    }
    


    #main_Title div span:nth-child(4){
        font-size:24px;
    }


    .main_Article{
        width:100%;
        background-color:white;
        line-height:28px;
        padding-top:122px;
    }



    .main_Article article section section{
        border-top: 1px dashed #3d3d3d;
        margin-top:74px;
        font-family: 'Hannari','Yu Gothic','Yu Mincho',sans-serif;
        font-size:23px;
        font-weight: 500;
        color:#3b3b3b;
    }

    .main_Article article section section:first-child{
        border-top: 0px;
        margin-top:54px;
    }



    .main_Article h3{
        font-family: 'Hannari','Yu Gothic','Yu Mincho',sans-serif;
        font-size:21px;
        font-weight: normal;
        margin-top:32px;
        margin-left:4%;
        margin-right:4%;
    }


    .main_Article article section span{
        margin-left:52px;
        margin-right: 52px;
        margin-top:32px;
        margin-bottom:32px;
    }


    .main_Article h4{
        font-weight:500;
        padding-left:4%;
        padding-right:4%;
        margin-top:33px;
        font-size:21px;
    }

    .main_Article h3 article span ul.article_Nomarl_ul{
        margin-left:20px;
        margin-right: 40px;
    }

    .main_Article h3 article span ul.article_Nomarl_ul li{
        list-style-type:circle;
    }

    .main_Article h3 article span ul.article_ul li:nth-child(1){
        margin-bottom:14px;
    }


    .main_Article h3 article span ul.article_Annotation_ul{
        list-style-type: none;
        margin-left:0px;
        margin-right:0px;
        margin-top:42px;
        margin-bottom:42px;
        padding-left:12px;
        padding-right:12px;
        padding-top:22px;
        padding-bottom:22px;
        border-top: 1px dashed #3d3d3d;
        border-bottom: 1px dashed #3d3d3d;
    }

    .main_Article h3 article span ul.article_Annotation_ul li{
        padding-left: 1em;
        text-indent: -1em;
        line-height: 30px;
        margin-bottom:8px;
    }



    .main_Article h3 article span ul.article_Notes_ul{
        list-style-type: none;
        margin-left:3%;
        margin-right:3%;
        margin-top:42px;
        margin-bottom:42px;
        padding-left:12px;
        padding-right:12px;
        padding-top:22px;
        padding-bottom:22px;
        border-top: 1px solid #3d3d3d;
        border-bottom: 1px solid #3d3d3d;
        border-left: 1px dashed #babfbc;
        border-right: 1px dashed #babfbc;
    }

    .main_Article h3 article span ul.article_Notes_ul li{
        padding-left: 1em;
        text-indent: -1em;
        line-height: 30px;
        margin-bottom:8px;
    }


    .main_Article h3 article, .main_Article section{
        animation-name: Aticle_Font_Animation;
        animation-duration: 1.4s;
        animation-timing-function:ease-out;
    }





    /*▲--------------メインコンテンツ-----------------▲*/











    #Chess_Types{
        width:100%;
        height:auto;
        margin-top:12px;
        margin-bottom:12px;
        margin-left:0;
        margin-right:0;
        padding-left:4%;
        padding-right:4%;
        border-collapse:separate;
        border-spacing: 0;
    }

    #Chess_Types caption{
        font-size:22px;
        letter-spacing:17px;
        font-family: 'Hannari', serif;
        margin-top:22px;
        padding-bottom:12px;
    }

    #Chess_Types thead tr th:first-child{
      border-radius: 6px 0 0 0;
    }

    #Chess_Types thead tr th:last-child{
      border-radius: 0 6px 0 0;
    }

    #Chess_Types thead tr th{
      line-height: 42px;
        padding-bottom:4px;
      font-family: 'Hannari', serif;
        font-size:13px;
        font-weight: 400;
      text-align: center;
      color:white;
      background: linear-gradient(#727572,#4d544d);
      border-left: 1px solid #3f403f;
      border-top: 1px solid #3f403f;
      border-bottom: 1px solid #3f403f;
      box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
      width: 33%;
        
    }


    #Chess_Types tbody tr td{
      text-align: center;
      border-left: 1px solid #2a2b2a;
      border-bottom: 1px solid #2a2b2a;
      border-top:none;
      box-shadow: 0px -3px 5px 1px #eee inset;
      width: 25%;
      padding: 10px 0;
    }

	#Chess_Types tbody tr td p:nth-child(1){
		font-size:15px;
	}






	#Chess_Types tbody tr td:last-child{
      border-right: 1px solid #3f403f;
    }



    #Chess_Types tbody tr:last-child td:first-child {
      border-radius: 0 0 0 6px;
    }

    #Chess_Types tbody tr:last-child td:last-child {
      border-radius: 0 0 6px 0;
    }


    #Chess_Types tbody tr td{
        text-align: center;
        vertical-align: middle;
        padding:12px;
        font-size:21px;
        font-family: 'Hannari', serif;
    }


    #Chess_Types tbody tr td:nth-child(2){
        font-size:21px;
    }

    #Chess_Types tbody tr td img{
        width:85px;
        height:152px;
        font-size:82px;
    }

    #Chess_Types tbody tr td p:first-child{
        margin-top:22px;
        padding-bottom:24px;
        border-bottom: 1px solid #c9c1c1;
    }


    
    #Chess_Types tbody tr td:nth-child(1):hover{
        background-color:#5e5e5e;
        color:white;
    }
    
    #Chess_Types tbody tr td:nth-child(1):hover > a p{
        background-color:#5e5e5e;
        color:white;
    }

    
    .main_Article article section ul li{
        margin-top:24px;
        line-height: 29px;
        margin-right:4%;
    }


    .main_Article article section h3{
        text-align: center;
        padding-bottom:31px;
        padding-left:20px;
        padding-right:20px;
        border-bottom:1px solid #a3a3a3;
        font-size:24px;
        font-family: 'Hannari', serif;
    }

    .main_Article article section h3 span:last-child{
        font-size:19px;
        letter-spacing:12px;
        font-family:'ExodusDemo-Regular',serif;
        color:#7a7676;
        text-align: center;
    }




    /*▼-----------問合せ----------------▼*/

    #Access_ID{

        padding-bottom:42px;
        padding-top:43px;
        padding-left:8%;
        padding-right:8%;
        margin-top:32px;
        margin-bottom:32px;
        margin-left:2%;
        margin-right:2%;
        color: #5d627b;
        background: white;
        border-top: solid 5px #3b3b3b;
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
        font-size:18px;
    }



    .Access_Area {
        margin-top:74px;
        padding:0px;
        border: solid 2px #9c9c9c;
    }



    .Access_Area .Access_Title_Area {
        margin:0px;
        padding-left:23px;
        padding-right:23px;
        padding-top:12px;
        padding-bottom:16px;
        font-size:23px;
        background: #474747;
        color: #ffffff;
        font-weight: 400;
        font-family: 'Raleway Thin',serif;
        border: 2px solid #ffffff;
    }

    .Access_Area div:nth-child(2) {
        width:100%;
        vertical-align: middle;
        text-align: center;
        margin: 0; 
        padding-bottom:5px;
        margin-bottom:27px;
        margin-top:25px;
    }

    .Access_Area div:nth-child(3) {
        width:100%;
        padding-top:10px;
        vertical-align: middle;
        height: auto;
        border-top: 2px solid #9c9c9c;
        text-align: center;
        margin: 0; 
        font-size:18px;
    }

    .Access_Area div:nth-child(3) div{
        padding:20px;
        margin-bottom:12px;
    }



    /*▲-----------問合せ----------------▲*/





    /*▼-----------ルール、駒の種類----------------▼*/


    .ul_list_Cicle_Class{
        margin-left:3%;
        padding-right:3%;
        margin-bottom:0;
        list-style-type: circle;
        font-size:21px;
    }


    .Article_Right_Area_Image_Set_Box_1_Class{
        height: auto;
        margin-bottom:43px;
    }



    .Article_Right_Area_Image_Set_Box_2_Class{
        text-align: center;
        vertical-align: middle;
        height: auto;
        width:100%;
        padding-left:0;
        padding-right:0;
        padding-bottom:0;
        padding-top:0px;
        margin:0;
        margin-bottom:90px;
    }




    .Article_Right_Area_Image_Set_Box_2_Class img{
        width:80%;
        height:80%;
    }


    .list_Asterisk_Mark_Set{
        list-style-type: none;
        padding-left: 1em;
        text-indent: -1em;
        line-height: 30px;
        margin-bottom:8px;
        font-size:18px;
        margin-top:32px;
        font-weight: 500;
        padding-right:8%;
    }


    .Article_Right_Area_Image_Set_Box_1_Class ul.ul_list_Cicle_Class{
        margin-top:0;
        margin-bottom:0;
        padding-top:0;
        padding-bottom:0;
    }


    .cicle_Red_Color_Class{
        color:red;
    }

    .cicle_Bule_Color_Class{
        color:#5A9BD3;
    }


    /*▲-----------ルール、駒の種類----------------▲*/





    /*▼-----------------Firefox対策用-----------------▼*/
    @-moz-document url-prefix() {

        html{
            color:#404040;
        }

        #main_Title div h2{
            color:#636363;
        }

        .main_Article article section h3{
            color:#636363;
        }

        .main_Article article section ul li{
            color:#636363;
        }

        .main_Article h4{
            color:#636363;
        }

        #Chess_Types caption{
            color:#636363;
        }

        #Chess_Types tbody tr td p:first-child{
            color:#636363;
        }

        #Chess_Types tbody tr td:nth-child(2){
            color:#636363;
        }

        .list_Asterisk_Mark_Set{
            font-weight: 500;
        }

        .Access_Area{
            letter-spacing: -0.4em;
            word-spacing: 0.1em;
        }



        .Access_Area div:nth-child(1){
            letter-spacing: normal;
        }

        .Access_Area div:nth-child(2){
            width:100%;
            letter-spacing: normal;
        }

        .Access_Area div:nth-child(3){
            width:100%;
            text-align: center;
            letter-spacing: normal;
        }

        .Access_Area div:nth-child(3) div{
            padding:0;
            font-size:12px;
            padding-left:12px;
        }
    }
    /*▲-----------------Firefox対策用-----------------▲*/

}
/*▲------------横幅712px以上の設定--------------▲*/