/*PC css*/

.site-header	{background-color: #192159;}
.site-header .container { position: relative;}
.site-header .purchase-history	{display: block; position: absolute;}
.site-header .purchase-history a	{display: block; width: 150px; height: 40px; color: #ffffff; background-color: #a28f54; font-weight: bold; text-align: center; border-radius: 20px; line-height: 40px;}
.site-header nav .purchase-history a:hover, .site-header .purchase-history a:active	{color: #ffffff; background-color: #4a000d;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-ms-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;}
.site-header nav	{ background-color: #192159; position: relative; }
.site-header nav ul li:first-child	{margin-left: 0; padding-left: 0; border-left: none;}
.site-header nav ul li a{font-weight: bold;}
.site-header nav ul li a:before	{display: inline-block; content: ""; width: 40px; height: 40px; margin-right: 10px; border-radius: 20px; vertical-align: top;}
.site-header nav ul li a:hover:before	{transform: rotateY(180deg); -webkit-transition: all 0.5s;-moz-transition: all 0.5s;-ms-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;}
.site-header nav ul li.navPurchase a:before	{background: #ffffff url("../images/icon-purchase.png") no-repeat center center; background-size: 40px;}
.site-header nav ul li.navHowto a:before {background: #ffffff url("../images/icon-howto.png") no-repeat center center; background-size: 40px;}
.site-header nav ul li.navFaq a:before {background: #ffffff url("../images/icon-faq.png") no-repeat center center; background-size: 40px;}
.item-footer	{ color: #ffffff; background-color: #4a000d;}

@media only screen and (min-width: 1001px) {
.site-header h1 img	{height: 50px;}
.site-header .purchase-history	{top: 20px;right: 0;}
.site-header .purchase-history a	{display: block; width: 150px; height: 40px; color: #ffffff; background-color: #a28f54; font-weight: bold; text-align: center; border-radius: 20px; line-height: 40px;}
.site-header nav ul li a	{display: block; height: 40px; line-height: 40px; color: #ffffff;}
.item-footer	{padding: 40px 0; font-size: 14px; text-align: center;}
.item-footer ul	{margin-bottom: 20px; font-size: 0px;}
.item-footer ul li	{display: inline-block; margin: 0 0; padding: 0 20px; border-left: 1px solid #ffffff; font-size: 14px; line-height: 1.0;}
.site-header nav ul	{ float: right; margin-right: 170px; text-align: right;}
.site-header nav ul li	{display: inline-block; margin: 20px 0 20px 20px; padding-left: 20px; border-left: 1px solid rgba(255,255,255,0.5); vertical-align: top;}
.item-footer ul li:first-child	{border-left: none;}
.item-footer ul li a	{color: #ffffff;}
}
@media only screen and (max-width: 1000px) {
.site-header	{position: relative; padding: 10px;}
.site-header h1 img	{height: 40px; vertical-align: top;}
.site-header .purchase-history	{top: 10px; right: 10px;}
.site-header .purchase-history a {width: 110px; padding: 0 1em; font-size: 12px;}
.site-header nav ul { float: none; margin-right: 0; text-align: center;margin-left: 0;}
.site-header nav ul li	{display: inline-block; margin: 15px 0 0 0; padding: 0 10px; border-left: 1px solid rgba(255,255,255,0.5); vertical-align: top;}
.site-header nav ul li a:before	{display: inline-block; content: ""; width: 20px; height: 20px; margin-right: 5px; border-radius: 10px; vertical-align: top;}
.site-header nav ul li a	{display: block; height: 20px; line-height: 20px; color: #ffffff; font-size: 14px;}
.site-header nav ul li.navPurchase a:before	{background: #ffffff url("../images/icon-purchase.png") no-repeat center center; background-size: 20px;}
.site-header nav ul li.navHowto a:before	{background: #ffffff url("../images/icon-howto.png") no-repeat center center; background-size: 20px;}
.site-header nav ul li.navFaq a:before	{background: #ffffff url("../images/icon-faq.png") no-repeat center center; background-size: 20px;}
.item-footer	{padding: 20px; font-size: 14px; text-align: center;}
.item-footer ul	{margin-bottom: 20px; font-size: 0px;}
.item-footer ul li	{display: inline-block; width: 47.959%; margin: 1.020% 0 0 1.020%; font-size: 16px; vertical-align: top;}
.item-footer ul li:nth-child(odd)	{margin-left: 0;}
.item-footer ul li a	{display: block; padding: 10px 0; color: #ffffff; background-color: rgba(0,0,0,0.5); font-size: 12px;}
}
@media only screen and (max-width: 361px) {
.site-header .purchase-history a {width: 90px;  padding: 0 1em; border-radius: 17px;}
.site-header nav ul li	{margin: 10px 0 0 0; }	
.site-header nav ul li a{font-size: 12px;}
.item-footer ul li a	{font-size: 10px;}
}







@media only screen and (min-width: 1001px) {
    .pc {
        display: block;
    }
    .sp{
        display:none;
    }
    .hearder-container, .footer-container {
        width: 100%;
        max-width: 980px;
        margin-right: auto;
        margin-left: auto;
        position: relative;
        display: table;
    }
    /*.site-header nav ul li:first-child {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }
    .site-header nav ul li {
        display: inline-block;
        margin: 20px 0 20px 20px;
        padding-left: 20px;
        border-left: 1px solid rgba(255,255,255,0.5);
        vertical-align: top;
    }
    .site-header nav ul li a{
        font-weight: bold; display: block;
        height: 40px;
        line-height: 40px;
        color: #ffffff;
        font-size: 16px;
    }
    .site-header button	{display: none;}*/
}
/*Mobile device css*/
@media only screen and (max-width: 1000px) {
    .pc {
        display: none;
    }
    .sp{
        display:block;
    }
    /*Header & Footer CSS*/
   .hearder-container .col{
        padding-top: 0px;
        display:block;
    }
    .site-header nav {
        padding-top: 10px;
    }
    /*.site-header	{position: relative; padding: 10px;}
    .site-header h1 img	{height: 40px; vertical-align: top;}
    .site-header button	{position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; line-height: 40px; padding: 0; overflow: hidden; color: #ffffff; background-color: transparent; border: none; outline: none;}
    .site-header button:before	{display: block; content: "\f0c9"; width: 40px; height: 40px; line-height: 40px; font-family: fontAwesome; font-size: 20px; text-align: center;}
    .site-header nav {position: fixed;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%;background-color: rgba(155,0,32,0.9);visibility: hidden;opacity: 0;}
    .open .site-header nav { display:table; -webkit-transition: all .5s; transition: all .5s;visibility: visible; opacity: 1; z-index: 999;}
    .open .site-header nav:before { display: block; content: ""; position: absolute; top: 28px; right: 10px; width: 40px; height: 2px; background-color: #ffffff; transform: rotate(-45deg);}
    .open .site-header nav:after { display: block; content: ""; position: absolute; top: 28px; right: 10px; width: 40px; height: 2px; background-color: #ffffff; transform: rotate(45deg);}
    .open .site-header nav ul { display: table-cell; position: relative; text-align: center; vertical-align: middle;}
    .open .site-header nav ul:before { display: block; content: "CLOSE"; position: fixed; top: 50px; right: 10px; width: 40px; color: #ffffff; font-size: 10px;}
    .open .site-header nav .purchase-history a	{
        width: 100%;
        margin: 0 auto;
        padding: 12px 0;
        border-radius: 100px;
        text-align: center;
        height: auto;
        border-bottom: none;
    }
    .open .site-header nav .purchase-history{
        position: absolute;
        top: 180px;
    }
    .open .site-header nav ul { width: 80%; margin: 0 auto;}
    .site-header nav ul li {
        width: 100%;
        border-left: none;
    }
    .open .site-header nav ul li a {
        display: block;
        line-height: 40px;
        color: #ffffff;
        border-bottom: 1px solid #ffffff;
        font-size: 20px;
        text-align: left;
        padding: 20px;
    }
    .open .site-header nav ul li a:before	{vertical-align: top;}*/
    .site-footer{padding: 20px; font-size: 14px; text-align: center;}
    .site-footer ul	{margin-bottom: 20px; font-size: 0px;}
    .site-footer ul li	{
        display: inline-block;
        width: 47.959%;
        margin-top: 3px;
        font-size: 16px;
        vertical-align: top;
        padding: 0px;
        border: 1px solid #fff !important;
    }
    .site-footer ul li:nth-child(odd)	{margin-left: 0;}
    .site-footer ul li a	{display: block; padding: 10px 0; color: #ffffff; font-size: 12px}
    .site-footer p{font-size: 14px;}
    /*Header & Footer CSS*/
}
/*Small device css*/
@media only screen and (max-width: 320px) {
    .site-footer ul li a {font-size: 10px}
}