html, body {
    padding: 0;
    margin: 0;
}

.clear {
    clear: both;
}

/* メニュー（路線図）*/
#contents-list {
    width: 100%;
    height: 100%;
    /*position: relative;*/
    /*width: 20%;*/
    /*height: 100%;*/
    /*min-width: 100px;*/
    /*background-color: #cfffcf;*/
}

#contents-list #line {
    position: absolute;
    left: 30px;
    width: 15px;
    height: 100%;
    background-color: #FFA500;
}

#contents-list .tag {
    position: absolute;
    left: 20px;
    width: 100%;
    padding: 0;
    margin: 0;

    transform-origin:left 15px;
    transform:rotate(-35deg) scale(1.0);
    transition-duration: 0.3s
}

/*#contents-list .tag:hover,*/
#contents-list .tag:active {
    transform-origin:left 5px;
    transform:rotate(-10deg) scale(1.5) translate(-10px, -10px);
    transition-duration: 0.3s
}

#contents-list .tag .circle {
    position: absolute;
    width: 30px;
    height: 30px;
    background: white;
    border: 5px solid #FFA500;
    border-radius: 50%;
    display: block;
}

#contents-list .tag .title {
    position: absolute;
    line-height: 40px;
    left: 45px;
    top: calc(50% - 5px);

    font-size: 14px;
    color: #FFA500;
}
/* メニュー（路線図）*/

#door-right, #door-left {
    width: auto;
    height: auto;
    transition: all 0.5s ease-in-out;
    position: fixed;
    z-index: 500;

    visibility:hidden;//初期レイアウト時に見えてしまうのを防ぐため
}
#door-left {
    transform: scale(-1,1);
}

#copyright {
    z-index: 1500;
    position: absolute;
    right: 5px;
    bottom: 5px;
    color: white;
    text-shadow: 2px 2px 3px rgb(0,0,0);
    font-size: 14px;
}
#copyright a {
    text-decoration: none;
    color: inherit;
}

#ui-layer, #wipe {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}


#illustration_content, #information_content {
    min-height: 100%;
    background-color: rgba(255,255,255,0.75);
}

#illustration_info_area {
    width: 90%;
    position:relative;
    z-index:0;
    align-content: center;
    text-align: center;
    margin: auto;
    padding: 0;
}

.tape{
    background:rgba(255,255,255,0.4);
    border-left:2px dotted rgba(0,0,0,0.1);
    border-right:2px dotted rgba(0,0,0,0.1);
    box-shadow:0 0 5px rgba(0,0,0,0.2);
    width:120px;
    height:40px;
    position:absolute;
    top:-13px;
    left:38%;
    -webkit-transform:rotate(-6deg);
}
#illustration_image_full {
    position: relative;
    /*box-shadow:1px 1px 8px rgba(0,0,0,0.3),0 0 50px rgba(0,0,0,0.1) inset;*/
}

#illustration_image {
    box-shadow:1px 1px 8px rgba(0,0,0,0.3),0 0 50px rgba(0,0,0,0.1) inset;
    max-width: 90%;
    height: auto;
    border-style: solid;
    border-width: 10px;
    border-color: #fff;
    align-content: center;
    text-align: center;
    position: relative;
    transform: rotate(1.0deg);
}

/*#illustration_image::after {*/
    /*content:"";*/
    /*display:block;*/
    /*position: absolute;*/
    /*z-index: -1;*/
    /*bottom: 5px;*/
    /*right: 0;*/
    /*height: 15px;*/
    /*width: 89%;*/
    /*background: rgba(0,0,0,0.5);*/
    /*box-shadow: 0 5px 5px rgba(0,0,0,0.3);*/
    /*transform: rotate(2deg);*/

/*}*/

#illustration_info {
    display: inline-block;
    vertical-align: middle;
    max-height: 100%;
    padding: 0;
    margin: 0;
    text-align: center;
    align-content: center;
    color: black;
    text-shadow: 1px 1px 1px #fff, -1px -1px 1px gray;
    pointer-events: auto;
    overflow-y: auto;
    display: inline-block;
}
#illustration_title_area {
    padding: 10px;
    margin-bottom: 20px;
    transform: rotate(-1.0deg);
}
#illustration_title_area p {
    max-width: 400px;
    margin: auto;
    /*font-family: Helvetica Neue, Helvetica, Arial, sans-serif;*/
    font-family: 'HuiFont';
    font-size: 24px;
    text-align: left;
    padding: 0.75em;
    position: relative;
    /* グラデーションで折り目がついた感じに */
    background: linear-gradient(to right, #ffffcc 0%, #f1f1c1 0.5%, #f1f1c1 13%, #ffffcc 16%);
}

#illustration_title_area p::after {
    content:"";
    display:block;
    position: absolute;
    z-index: -1;
    bottom: 5px;
    right: 0;
    height: 15px;
    width: 99%;
    background: rgba(0,0,0,0.5);
    box-shadow: 0 5px 5px rgba(0,0,0,0.3);
    transform: rotate(1.5deg);
}

#illustration_caption_area {
    margin: 10px;
    padding: 10px;
}
#illustration_caption_area div {
    margin: auto;
    max-width: 400px;
    min-height: 100px;
    text-align: left;
    line-height: 200%;
    /*font-family: Helvetica Neue, Helvetica, Arial, sans-serif;*/
    font-family: 'HuiFont';
    font-size: 18px;
    padding: 1.0em;
    position: relative;
    background: linear-gradient(to right, #FDF8E6 0%, #F5ECDA 0.5%, #F5ECDA 13%, #FDF8E6 16%);
}
#illustration_caption_area div::after {
    content:"";
    display:block;
    position: absolute;
    z-index: -1;
    bottom: 5px;
    right: 0;
    height: 15px;
    width: 99%;
    background: rgba(0,0,0,0.5);
    box-shadow: 0 5px 5px rgba(0,0,0,0.3);
    transform: rotate(2deg);
}

.over_wrap {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1000;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    overflow: hidden;
}

.over_wrap-inner {
    width: calc(100% + 20px);
    height: 100%;
    padding-top: 0;
    padding-right: 20px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.over_wrap-content {
    width: 100%;
    height: auto;
    align-content: center;
    text-align: center;
    margin: 0;
}

.information_element {
    float: left;
    width: 320px;
    margin: auto;
    padding: 10px;
}

#information_profile {
    transform: rotate(-1.5deg) translate3d(0, 0, 0);
}

#element_id-card {
    position: relative;
    width: 300px;
    height: 190px;

    border-radius: 10px;
    overflow: hidden;

    background-color: #efefef;
    box-shadow: inset 50px 20px 30px rgb(230,230,255), inset 2px 2px 3px rgb(255,255,255), 5px 5px 10px rgba(0,0,0,.5);
    padding: 5px;
}

#id-card-header {
    position: absolute;
    top: 5px;
    left: -5px;
    right: 0;
    height: 30px;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,7db9e8+100&1+0,1+62,0.7+68,0+100;Blue+to+Transparent+Sharp */
    background: -moz-linear-gradient(-45deg, rgba(30,87,153,1) 0%, rgba(89,148,202,1) 62%, rgba(95,154,207,0.7) 68%, rgba(125,185,232,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(95,154,207,0.7) 68%,rgba(125,185,232,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(95,154,207,0.7) 68%,rgba(125,185,232,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#id-card-header-img {
    height: 20px;
    width: auto;
    margin: 5px;
    margin-left: 15px;
}

#id-card-title {
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    margin: auto;
    font-family: "Sawarabi Mincho";
    font-size: 14px;
    letter-spacing: 8px;
    color: white;
}

#id-card-title-sub {
    margin-top: 35px;
    font-family: "Sawarabi Mincho";
    font-size: 10px;
    letter-spacing: 2px;
}

.id-card-item {
    font-family: "Sawarabi Mincho";
    font-size: 10px;
    line-height: 9px;
    letter-spacing: 2px;
    text-align: left;
}

#id-card-img {
    width: 50px;
    height: 50px;
}
#id-card-name {
    position: absolute;
    top: -15px;
    left: 0px;
    width: 120px;
    display: inline-block;
    font-family: 'HuiFont';
    font-size: 22px;
    text-align: left;
    line-height: 35px;
    padding-left: 30px;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxIiBoZWlnaHQ9IjM1Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6bm9uZTt9PC9zdHlsZT48L2RlZnM+PGcgaWQ9IuODrOOCpOODpOODvF8yIiBkYXRhLW5hbWU9IuODrOOCpOODpOODvCAyIj48ZyBpZD0i44Os44Kk44Ok44O8XzEtMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMSI+PHBhdGggZD0iTTAgMzRoMXYxSDB6Ii8+PHBhdGggZD0iTTAgMGgxdjM0SDB6IiBjbGFzcz0iY2xzLTEiLz48L2c+PC9nPjwvc3ZnPg==);
}

#id-card-content {
    top: 60px;
    left: 70px;
    position: absolute;
    text-align: left;
    display: inline-block;
    margin: 0;
    padding: 0;
}

#id-card-stamp {
    width: 80px;
    height: auto;
    position: absolute;
    bottom: 15px;
    right: 15px;
    opacity: 0.8;
}

#id-card-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 25px;
}

#information_overview {
    transform: rotate(1.0deg) translate3d(0, 0, 0);
}

#element_note-paper {
    background-color: #eeeeee;
    box-shadow: inset 100px 100px 100px rgb(220,200,210), inset 1px 1px 3px rgb(255,255,255), 5px 5px 10px rgba(0,0,0,.5);
    padding: 20px;
}
#element_note-paper p {
    font-family: 'HuiFont';
    font-size: 14px;
    line-height: 35px;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxIiBoZWlnaHQ9IjM1Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6bm9uZTt9PC9zdHlsZT48L2RlZnM+PGcgaWQ9IuODrOOCpOODpOODvF8yIiBkYXRhLW5hbWU9IuODrOOCpOODpOODvCAyIj48ZyBpZD0i44Os44Kk44Ok44O8XzEtMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMSI+PHBhdGggZD0iTTAgMzRoMXYxSDB6Ii8+PHBhdGggZD0iTTAgMGgxdjM0SDB6IiBjbGFzcz0iY2xzLTEiLz48L2c+PC9nPjwvc3ZnPg==);
    /*box-shadow: inset 1px 1px 2px rgb(220,200,210);*/
}


#information_twitter {
    transform: rotate(-1.0deg) translate3d(0, 0, 0);
}
#element_smart-phone {
    /*!* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#959595+0,0d0d0d+46,010101+50,0a0a0a+53,4e4e4e+76,383838+87,1b1b1b+100;Black+Gloss+Pipe *!*/
    /*background: rgb(149,149,149); !* Old browsers *!*/
    /*background: -moz-linear-gradient(-45deg, rgba(149,149,149,1) 0%, rgba(13,13,13,1) 46%, rgba(1,1,1,1) 50%, rgba(10,10,10,1) 53%, rgba(78,78,78,1) 76%, rgba(56,56,56,1) 87%, rgba(27,27,27,1) 100%); !* FF3.6-15 *!*/
    /*background: -webkit-linear-gradient(-45deg, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); !* Chrome10-25,Safari5.1-6 *!*/
    /*background: linear-gradient(135deg, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); !* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *!*/
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=1 ); !* IE6-9 fallback on horizontal gradient *!*/

    background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #fef1f1), color-stop(0.51, #f8d2d2), color-stop(0.50, #f7e5e5), color-stop(0.00, #fffefe));
    background: -webkit-linear-gradient(top, #fffefe 0%, #f7e5e5 50%, #f8d2d2 51%, #fef1f1 100%);
    background: -moz-linear-gradient(top, #fffefe 0%, #f7e5e5 50%, #f8d2d2 51%, #fef1f1 100%);
    background: -o-linear-gradient(top, #fffefe 0%, #f7e5e5 50%, #f8d2d2 51%, #fef1f1 100%);
    background: -ms-linear-gradient(top, #fffefe 0%, #f7e5e5 50%, #f8d2d2 51%, #fef1f1 100%);
    background: linear-gradient(top, #fffefe 0%, #f7e5e5 50%, #f8d2d2 51%, #fef1f1 100%);


    box-shadow: inset -2px -3px 6px rgb(0,0,0), inset 1px 1px 3px rgb(255,255,255), 5px 5px 10px rgba(0,0,0,.5);
    border-radius: 10px;

    margin: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 3px;
    padding-right: 3px;
    width: 300px;
}
#element_smart-phone_mic {
    border-color: gray;
    border-width: 1px;
    border-style: solid;
    box-shadow: inset 0 0 8px rgba(0,0,0, .7);
    border-radius: 3px;
    height: 3px;
    width: 60px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}
#element_smart-phone_incam {
    border-color: gray;
    border-width: 1px;
    border-style: solid;
    box-shadow: inset 0 0 10px rgb(0,0,0);
    border-radius: 5px;
    height: 5px;
    width: 5px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}
#element_smart-phone_home_button {
    /*!* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0e0e0e+0,7d7e7d+100 *!*/
    /*background: rgb(14,14,14); !* Old browsers *!*/
    /*background: -moz-linear-gradient(-45deg, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%); !* FF3.6-15 *!*/
    /*background: -webkit-linear-gradient(-45deg, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%); !* Chrome10-25,Safari5.1-6 *!*/
    /*background: linear-gradient(135deg, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%); !* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *!*/
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e0e0e', endColorstr='#7d7e7d',GradientType=1 ); !* IE6-9 fallback on horizontal gradient *!*/

    background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #fef1f1), color-stop(0.51, #f8d2d2), color-stop(0.50, #f7e5e5), color-stop(0.00, #fffefe));
    background: -webkit-linear-gradient(top, #fffefe 0%, #f7e5e5 50%, #f8d2d2 51%, #fef1f1 100%);
    background: -moz-linear-gradient(top, #fffefe 0%, #f7e5e5 50%, #f8d2d2 51%, #fef1f1 100%);
    background: -o-linear-gradient(top, #fffefe 0%, #f7e5e5 50%, #f8d2d2 51%, #fef1f1 100%);
    background: -ms-linear-gradient(top, #fffefe 0%, #f7e5e5 50%, #f8d2d2 51%, #fef1f1 100%);
    background: linear-gradient(top, #fffefe 0%, #f7e5e5 50%, #f8d2d2 51%, #fef1f1 100%);


    border-color: gray;
    border-width: 1px;
    border-style: solid;
    box-shadow: inset 0 0 8px rgba(180,188,188, .3);
    border-radius: 50%;
    height: 40px;
    width: 40px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}
#element_smart-phone_home_button_inner {
    box-shadow: inset 0 0 15px rgba(180,188,188, .5);
    height: 20px;
    width: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}

#twitter-timeline-outer {
    box-shadow: 0 0 5px rgba(0,0,0,.5);
    border-color: black;
    border-radius: 3px;
    border-width: 1px;
    border-style: solid;
    background-color: white;
    width: 280px;
    height: 460px;
    margin: auto;
    overflow: hidden;
}

.twitter-timeline {
    margin: 0;
}

#other_content {
    background-color: rgba(255,255,255,0.75);

}

#menu_icon {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 10px;
    left:10px;
    z-index: 950;
    -webkit-filter: drop-shadow(3px 3px 8px rgba(0,0,0,0.2));
}
#site_menu {
    z-index: 900;
}

#menu {
    /*position: absolute;*/
    width: 80%;
    max-width: 400px;
    min-width: 200px;
    height: 100%;
    display: grid;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+40,f7deaf+58,ff976b+70,ff6b92+82,6b70ff+90,f79621+100&1+0,1+58,0+100 */
    background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 40%, rgba(247,222,175,1) 58%, rgba(255,151,107,0.71) 70%, rgba(255,107,146,0.43) 82%, rgba(107,112,255,0.24) 90%, rgba(247,150,33,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 40%,rgba(247,222,175,1) 58%,rgba(255,151,107,0.71) 70%,rgba(255,107,146,0.43) 82%,rgba(107,112,255,0.24) 90%,rgba(247,150,33,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 40%,rgba(247,222,175,1) 58%,rgba(255,151,107,0.71) 70%,rgba(255,107,146,0.43) 82%,rgba(107,112,255,0.24) 90%,rgba(247,150,33,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00f79621',GradientType=1 ); /* IE6-9 */

    /*padding: 120px 5px 5px;*/
    padding-left: 50px;
}

.blur {
    pointer-events: none;
    transition: all .2s ease-out;
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
}

/*--------- CardGame*/

.balloon-wrapper {
    position:absolute;
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.balloon {
    background-color:#fff;
    color: black;
    border-radius:5px;
    position:relative;
    padding: 10px 5px;
    -webkit-filter:drop-shadow(4px 4px 2px rgba(0,0,0,0.5));
}

.balloon:after {
    border:10px solid transparent;
    border-right-color:#fff;
    border-left-width:0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    left:-10px;
    content:"";
    display:block;
    bottom:7px;
    position:absolute;
    width:0;
}

.modal-window {
    -webkit-transform: translate(0, 100%);
    -moz-transform: translate(0, 100%);
    -o-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    transform: translate(0, 100%);
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    opacity: 0;
    line-height: 1.3;
    display: none;

    -webkit-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    transition: opacity 0.4s;

    z-index: 2000;
}

.modal-window:target {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
}

.modal-window:target + body {
    overflow: hidden;
}

.is-active.modal-window {
    display: block;
}

.modal-window:target {
    display: block;
}

.modal-window .modal-inner {
    min-width: 65%;
    max-width: 90%;
    height: auto;
    max-height: 90%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    z-index: 20;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 2px;
    background: #fff;
    -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
}

.modal-window .modal-inner p {
    padding: 0 10px;
}

.modal-window .modal-close {
    display: block;
    text-indent: -100px;
    overflow: hidden;
}

.modal-window .modal-close:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.5);
}

.modal-window .modal-close:after {
    color: rgba(255, 255, 255, 0);
    content: '\00d7';
    position: absolute;
    top: 10%;
    left: 10%;
    z-index: 20;
}

.clear {
    clear: both;
}

.card {
    margin: 3px;
    padding: 0;
    /*position: absolute;*/
    border-color: black;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    overflow:hidden;
}
.card-shadow {
    -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
    z-index: 1;
    transition: all 0.2s ease-in-out;
}
.card-shadow-dragging {
    -webkit-box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.6);
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.6);
    z-index: 2;
}
.card-inner {
    position: relative;
    margin: 0;
    padding: 0;
    pointer-events: none;
    background-color: darkgrey;
}
.card-inner .back {
    position: relative;
    width: 100%;
    height: 100%;
    transition: all 0.6s ease-in-out;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    perspective: 1000;
}

.card-inner .reverse {
    transform: rotateY(180deg) scale(-1,1);
}

.card-inner .back-normal,
.card-inner .back-reverse {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
.card-inner .back-normal {
    background-color: blue;
}

.card-inner .back-reverse {
    transform: rotateY(180deg);
    background-color: yellow;
    /*visibility: hidden;*/
}

.card-inner .top,
.card-inner .bottom,
.card-inner .left,
.card-inner .right {
    margin: 0;
    padding: 0;
    font-size: 16px;
    pointer-events: none;
}
.card-inner .top {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.card-inner .bottom {
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.card-inner .left {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.card-inner .right {
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

#table {
    width: 300px;
    padding: 0;
    margin: 0;
    float: none;
    transition: all 1.0s ease-in-out;
}

#table_area {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
}
#hand_area,
#rival_hand_area {
    position: fixed;
    width: 100%;
    margin: 0;
    overflow: hidden;
    transition: all 0.6s ease-in-out;
    z-index: 100;
}
#hand_area {
    left: 0;
    bottom: 0;
}
.hand-inner {
    height: calc(100% + 18px);
    width: 100%;
    padding-bottom: 18px;
    overflow-x: auto;
    overflow-y: hidden;
}
#rival_hand_area {
    left: 0;
    top: 0;
}
.cell {
    padding: 0;
    margin: 0;
    border-color: grey;
    border-style: dotted;
    /*background-color: #7d8fa3;*/
    border-width: 1px;
    float: left;
}
/*--------- CardGame*/