@charset "UTF-8";

#sp_nav{
    display: none;
}
.pc_none{ display: none;}
.sp_none{}

@media only screen and (max-width: 1024px) {
    .swf { display: none; }

    #common_header .inner_content{
        width: 100%;
    }
    #header_socialnav{
        margin-left: 30px;
    }
    ul#header_members{
        float: right;
        position: relative;
        display: block;
        width: 60%;
        text-align: right;
    }
    #home-mainimage ul.linkbtn{
        right: 30px;
    }
}

@media only screen and (max-width: 640px) {
    .pc_none { display: inline; }
    hr.pc_none,
    br.pc_none { display: block; }
    .sp_none { display: none; }
    .swf { display: none; }

    iframe{
        width: 100%;
    }

    .w300px{ width: 100%; }
    .w350px{ width: 100%; }
    .w400px{ width: 100%; }

    .fL { float: none !important; }
    .fR { float: none !important; }
    .imgL {
        float: none !important;
        margin-left: 0;
        margin-right: 0;
    }
    .imgR {
        float: none !important;
        margin-left: 0;
        margin-right: 0;
    }

    .inner_content{
        width: 100%;
    }



    #subnavi,
    #gnavi {
        display: none;
    }


    .sp_nav_open #sp_menu{
        background: #FFFFFF;
        color: #173767;
        z-index: 100;
    }

    #sp_nav{
        position: fixed;
        display: block;
        z-index: 10;
        width: 100%;
        height: 50%;
        bottom: 0;
        overflow: scroll;
        padding: 0px 0 80px;
        box-shadow: 0 -5px 10px rgba(0,0,0,.3);
        background: #173767;
        -webkit-transition: transform 0.3s ease;
        -moz-transition: transform 0.3s ease;
        -ms-transition: transform 0.3s ease;
        -o-transition: transform 0.3s ease;
        transition: transform 0.3s ease;
        -webkit-transform: translate3d(0,110%,0);
        -moz-transform: translate3d(0,110%,0);
        -ms-transform: translate3d(0,110%,0);
        -o-transform: translate3d(0,110%,0);
        transform: translate3d(0,110%,0);
    }
    .sp_nav_open #sp_nav{
        /*display: block;*/
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    #sp_nav dl{
        margin: 0;
        padding: 0;
    }
    #sp_nav dt{
        position: relative;
        margin: 0;
        padding: 10px 20px;
        color: #FFFFFF;
        background: #173767;
    }
    #sp_nav dt:after{
        position: absolute;
        right: 15px;
        top: 10px;
        content: '▼';
        display: inline-block;
        font-size: 9px;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
        -webkit-transform: rotateZ(-90deg);
        -moz-transform: rotateZ(-90deg);
        -ms-transform: rotateZ(-90deg);
        -o-transform: rotateZ(-90deg);
        transform: rotateZ(-90deg);
    }
    #sp_nav dt.open:after{
        -webkit-transform: rotateZ(0deg);
        -moz-transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
        -o-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }

    #sp_nav dd{
        height: 1px;
        overflow: hidden;
        margin: 0;
        padding: 0 0px;
        background: rgba(20,40,90,.8);
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -ms-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        transition: all 0.2s ease;
    }
    #sp_nav dd.open{
        height: auto;
        padding: 5px 0px;
        /*overflow: auto;*/
    }


    #sp_nav dd ul{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #sp_nav dd ul li{
        margin: 0;
        padding: 0 10px;
    }
    #sp_nav dd ul li a{
        display: block;
        margin: 0;
        padding: 10px 10px;
        color: #FFFFFF;
    }
    #sp_nav dd ul li a:before{
        content: "-";
        display: inline;
        margin-right: 10px;
        color: #EFEFEF;
    }
    #sp_nav dl{}




    #tab_navi{
        /*display: none !important;*/
    }

    /*サイドバー*/
    #sidebar.stickynavi,
    #sidebar {
        position: relative;
        clear: both;
        float: none;
        width: auto;
        margin: 15px;
        border: 4px solid #E2E2E2;
        z-index: initial;
        /*display: none;*/
    }
    #sidebar>ul {
        margin: 20px;
    }
    #sidebar>ul>li{
        margin-bottom: 5px;
    }
    #sidebar>ul>li+li{
        padding-top: 5px;
        border-top: 1px solid #E2E2E2;
    }
    #sidebar>ul>li ul{
        margin-left: 0px;
        padding-left: 12px;
        padding-bottom: 10px;
    }
    #sidebar>ul:last-of-type>li ul{
        padding-bottom: 0;
    }

    #sidebar>ul>li li{
        padding-top: 2px;
        border-top: 1px solid #E2E2E2;
    }
    #sidebar>ul>li li a{
        padding: 3px 3px;
        display: block;
    }

    #sidebar>ul>li#sidenavi-product-index > ul{ padding-left: 10px; }
    #sidebar>ul>li#sidenavi-product-index > ul > li{ margin-bottom: 4px; }
    #sidebar>ul>li#sidenavi-product-index > ul a{ padding-left: 23px; }
    #sidenavi-product-index-menu7 a{ background: url("/images/common/pnavicn_smp.svg") no-repeat 2px center;}


    #categorytitle p{
        font-size: 11px;
    }
    #categorytitle p span{
        margin-right: 10px;
    }


    /*ヘッダ*/
    #breadcrumbs{
        padding: 10px 15px 0;
    }
    #common_header{
        position: relative;
        /*display: none;*/
        min-height: 35px;
        top: 50px;
        z-index: 200;
    }
    #common_header .inner_content{
        padding: 0;
    }
    ul#header_socialnav{
        position: absolute;
        display: inline-block;
        width: auto;
        top: -40px;
        left: auto;
        right: 10px;
        float: right;
        text-align: right;
        height: 35px;

    }
    ul#header_socialnav li{
        margin-right: 0;
        height: 35px;

    }
    ul#header_socialnav li a{
        line-height: 35px;
    }
    ul#header_members {
        float: none;
        width: 100%;
        height: 35px !important;
    }

    ul#header_members li{
        font-size: 10px;
        width: 33%;
        height: 35px !important;
        text-align: left;
    }
    ul#header_members li:first-of-type{
        border-left: none;
    }
    ul#header_members li a{
        padding: 0px 10px 0 10px;
        text-align: center;
        line-height: 35px;
        height: 35px;
        background-position: 10px center !important;
    }
    #header{
        z-index: 2000;
        top: -35px;
        margin-bottom: -5px;
    }
    #header .inner_content{
        padding: 10px;
    }
    #logo{
        width: 130px;
        height: auto;
        margin: 3px 0 0;
    }

    #category_subtitle{
        padding: 5px 10px;
        margin-bottom: 10px;
        font-size: 14px;
    }



    /*フッタ*/
    #footer {
        padding: 0;
    }
    #footer .inner_content{
        padding: 20px;
    }
    p#footlogo{
        text-align: center;
        padding-bottom: 0px;
    }
    #footer nav.row{
        padding: 0;
    }
    #footer .col5{
        margin-bottom: 20px;
        min-height: 0;
    }

    #footer .col5.col1of5{ width: 100%;left:0; position: relative; float: none; clear: both;}
    #footer .col5.col2of5{ width: 49%; left:0; position: relative; float: left; clear: both;}
    #footer .col5.col3of5{ width: 49%; left:0; position: relative; float: right;}
    #footer .col5.col4of5{ width: 49%; left:0; position: relative; float: left; clear: both;}
    #footer .col5.col5of5{ width: 49%; left:0; position: relative; float: right;}
    #footer .col5 dl{
        margin-bottom: 15px;
    }
    #footer .col5 dl li{
        margin: 0 0 5px;
    }
    #footer .col5.col1of5 li{
        text-align: center;
    }
    #footer2{
        padding: 0;
    }
    #footer2 .inner_content{
        padding: 15px;
    }
    #footer2 ul{
        position: relative;
    }
    #footer2 ul li{
        border-left: 1px solid #B3B3B3;
    }
    #footer2 ul li:last-of-type{
        border-right: 1px solid #B3B3B3;
    }

    #footer2 ul a{
        white-space: nowrap;
    }
    #footer2 #copyright{
        text-align: center;
    }



    #category_main{
        width: 100%;
        padding: 15px;
    }

    #category_main img{
        width: 100%;
        height: auto;
    }
    .mainimg, #product_mainimg{
        position: relative;
    }


    /**
     * 製品情報
     */

    /* 製品一覧 */
    .products{
        padding-top: 10px;
        padding-bottom: 20px;
    }
    .products>.product{
        float: left;
        width: 49%;
        padding: 5px;
        margin-right: 0px;
        margin-bottom: 5px;
        border: 3px solid #E6E6E6;
    }
    .products>.product:nth-of-type(2n){
        float: right;
    }
    .products>.product:nth-of-type(3n+1){
        clear: inherit;
    }
    .products>.product:nth-of-type(2n+1){
        clear: initial;
    }
    .products>.product .img{
        width: 100%;
        height: auto;
    }
    .products>.product dt{
        font-size: 13px;
        min-height: 4.5em;
    }
    .products>.product dd.text{
        font-size: 11px;
    }
    .products>.product dd.more a{
        font-size: 11px;
    }
    .products>.product dd.btns ul li a{
        padding: 4px 1px 4px 18px;
        font-size: 9px;
        background-position: 3px center !important;
    }

    /* キャラクター一覧 */
    .charactors{
        padding-top: 20px;
        padding-bottom: 30px;
    }
    .charactors>.charactor{
        float: left;
        width: 49%;
        padding: 5px;
        margin-right: 0px;
        margin-bottom: 5px;
        border: 3px solid #E6E6E6;
    }
    .charactors>.charactor:nth-of-type(2n){
        float: right;
    }
    .charactors>.charactor:nth-of-type(3n+1){
        clear: inherit;
    }
    .charactors>.charactor:nth-of-type(2n+1){
        clear: initial;
    }

    .charactors>.charactor .img{
        width: 100%;
        height: auto;
    }
    .charactors>.charactor .img a:hover img{
        opacity: 1;
    }


    .charactors>.charactor h4{
        font-size: 13px;
        line-height: 1.5;
    }
    .charactors>.charactor p.text{
        min-height: 3em;
        margin-bottom: 10px;
        line-height: 1.5;
        font-size: 11px;
    }





    #sp_menu{
        display: block;
        position: fixed;
        opacity: 0.9;
        bottom: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background: #173767;
        color: #FFFFFF;
        border-radius: 5px;
        z-index: 1;
        font-size: 10px;
    }


    #sp_detail_menu{
        display: block;
        position: absolute;
        width: auto;
        height: 40px;
        line-height: 40px;
        font-size: 12px;
        left: 0px;
        right: 0px;
        background: #173767;
        color: #FFFFFF;
        text-align: center;
    }
    #sp_detail_menu:after{
        position: absolute;
        margin-left: 10px;
        content: "▼";
        font-size: 10px;
        display: inline-block;
        color: #FFFFFF;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        -webkit-transform: rotateZ(-90deg);
        -moz-transform: rotateZ(-90deg);
        -ms-transform: rotateZ(-90deg);
        -o-transform: rotateZ(-90deg);
        transform: rotateZ(-90deg);
    }
    #sp_detail_menu.open:after{
        -webkit-transform: rotateZ(0deg);
        -moz-transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
        -o-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }

    /*
    #sp_detail_menu ~ #categorytitle{
        margin-bottom: 43px;
    }
    */

    #sp_detail_menu.stickynavi{
        left: 0;
        width: 100%;
        top: 0;
        position: fixed;
        z-index: 1000;
    }

    .cate-history #sp_detail_menu{
        display: none;
    }

    ul#tab_navi.open,
    ul#product_mainnavi.open{
        height: auto;
        /*overflow: auto;*/
        padding: 5px 0;
        background-color: #173767;
    }
    ul#tab_navi,
    ul#product_mainnavi{
        position: relative;
        width: 100%;
        top: 0px;
        left: 0;
        height: 0;
        padding: 0px 0;
        overflow: hidden;
        /*box-shadow: 0 0 5px #999999;*/
        z-index: 999;
        background: #FFFFFF;
        border-bottom:none;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
    }

    ul#tab_navi.stickynavi,
    ul#product_mainnavi.stickynavi{
        top: 40px;
    }
    ul#tab_navi.stickynavi+*,
    ul#product_mainnavi.stickynavi+*{
        /*padding: 0;*/
        padding-top: 50px;
    }
    ul#tab_navi li,
    ul#product_mainnavi li {
        display: block;
        float: none;
        width: 100%;
        border-bottom: 1px solid #173767;
        font-size: 12px;
        background: #152B5D;
    }
    ul#tab_navi li a,
    ul#product_mainnavi li a{
        display: block;
        text-align: left;
        width: 100%;
        padding: 0;
        line-height: initial;
        height: auto;
        color: #FFFFFF;
        border: none;
    }
    ul#tab_navi li:first-of-type a,
    ul#product_mainnavi li:first-of-type a{
        border: none;
    }
    ul#tab_navi li a span,
    ul#product_mainnavi li a span{
        padding: 7px 15px;
        display: block;
    }
    ul#tab_navi li a span:before,
    ul#product_mainnavi li a span:before{
        content: "-";
        display: inline-block;
        margin-right: 10px;
    }


    ul#tab_navi li.active,
    ul#product_mainnavi li.active{
        border-bottom: none;
        background: #173767;
    }
    ul#tab_navi li:hover,
    ul#product_mainnavi li:hover{
        border-bottom: none;
        background: #173767;
    }

    .basecontent{}
    .basecontent h2{
        font-size: 16px;
    }


    .bgbox{
        background: #F1F1F1;
        padding: 15px 20px;
        margin-bottom: 20px;
    }
    .bgbox li,
    .bgbox p{
        font-size: 12px;
        line-height: 1.6;
    }
    .bgbox p:last-child{
        margin-bottom: 0;
    }
    .bgbox h3{
        font-size: 13px;
    }

    .bgbox .aC{
        text-align: left !important;
    }

    .basecontent .rules_scroll h3{
        font-size: 14px;
    }
    .basecontent .rules_scroll {
        font-size: 12px;
        line-height: 1.5;
    }
    .basecontent .rules_scroll ul,
    .basecontent .rules_scroll ol{
        padding-left: 20px;
        margin-left: 0;
    }


    /*Table:体験版などのサムネイル月*/
    table.thumbnail_table{
        width: 100%;
        margin-bottom: 15px;
    }
    table.thumbnail_table th,
    table.thumbnail_table td{
        display: block;
        border: none;
        width: 100%;
    }
    table.thumbnail_table th{
        border-top: 1px solid #E4E4E4;
        padding-bottom: 0;
        padding-top: 20px;

        /*background: #EAEAEA;*/
    }
    table.thumbnail_table ul{
        margin-left: 25px;
    }
    table.thumbnail_table li{
        font-size: 12px;
    }
    table.thumbnail_table h4 {
        font-size: 14px;
        margin-bottom: 5px;
    }
    table.thumbnail_table p {
        font-size: 12px;
        line-height: 1.5;
    }
    table.thumbnail_table p:last-of-type {
        margin-bottom: 0;
    }

    /* form table*/

    table.form_table{
        margin-top: 10px;
    }
    table.form_table{
        width: 100%;
        margin: 10px 0 30px;
        border:2px solid #E6E6E6;
    }
    table.form_table th,
    table.form_table td{
        display: block;
        padding: 7px 10px;
        border: 0px solid #E6E6E6;
    }
    table.form_table th{
        border-top: 0px solid #E6E6E6;
        background: #F1F1F1;
        width:100%;
    }
    table.form_table td{
    }
    em.required,
    table.form_table em{
        font-size: 12px;
        line-height: 1.4;
    }
    table.form_table table{
        width: 100%;
        border: none;
        margin: 5px 0 20px;
    }
    table.form_table table th,
    table.form_table table td{
        border: none;
        padding: 3px 5px;
    }



    /* フォーム要素 */
    textarea{
        width: 100% !important;
    }



    dl.support_step{
        width: 100%;
        float: none;
        margin-right: 0%;
        margin-bottom: 20px;
    }
    dl.support_step dt{  }
    dl.support_step dt:after{
        content:"";
        display: inline-block;
        position: absolute;
        left: initial;
        right: initial;
        margin: 0;
        margin-left: -40px;
        bottom: -25px ;
        border-color: #E6E6E6 transparent transparent transparent;
    }
    dl.support_step dd{
        margin-right: 0;
    }
    dl.support_step dd br{
        display: none;
    }


    /* マイページログイン */
    .securenote{
        font-size: 11px;
        padding-right: 10px;
    }
    .loginbox table.form_table{
        width: 100%;
    }
    .loginbox table.form_table th,
    .loginbox table.form_table td{
        padding: 10px 10px;
    }
    .loginbox table.form_table th{
        padding: 10px 10px;
        width: 100%;
    }


    /* 会員登録 */
    .regist_alert{
        display: block;
        padding: 0px 30px;
        margin: 0 auto;
        font-size: 14px;
        line-height: 1.3;
        background-position: 0 center;
        background-size: 25px auto;
        text-align: left;
    }
    ol.regist_step{
        width: 100%;
        margin: 30px 0 0px;
        padding: 0;
    }
    ol.regist_step+.p30 {
        padding-top: 0px !important;
    }

    ol.regist_step.s4{
        /*text-align: center;*/
    }
    ol.regist_step.s4 li{
        padding: 0 10px 0 20px;
        display: block;
    }
    ol.regist_step li{
        position: relative;
        display: block;
        width: 100%;
        margin:0 0 20px;
        padding: 0 0 0 5px;
        float: none;
        text-align: left;
        line-height: 30px;
        height: 30px;
        font-size: 12px;
    }

    ol.regist_step li:after{
        display: inline-block;
        position: absolute;
        left: 20px;
        right: initial;
        bottom: -25px;
        margin: 0;
        border:15px solid #E6E6E6;
        border-color:  #E6E6E6 transparent transparent transparent;
    }
    ol.regist_step li.active:after{
        border-color:  #FD8346 transparent transparent transparent;
    }

    /* 体験版*/
    dl.downloaditem{}
    dl.downloaditem dd{
        word-wrap: break-word;
        font-size: 12px;
    }
    dl.downloaditem dd.btn{
        font-size: 13px;
        max-width: 100%;
        white-space: normal;
    }

    dl.downloaditem dd.btn a{
        display: block;
        padding: 5px 10px 5px 10px;
        background-image: none;
    }
    dl.downloaditem:nth-of-type(2n+1){
        clear: both;
    }


    /*テーブルのスクロール*/
    .scroll_tablewrap{
        overflow: auto;/*tableをスクロールさせる*/
        white-space: nowrap;/*tableのセル内にある文字の折り返しを禁止*/
    }
    .scroll_tablewrap::-webkit-scrollbar{/*tableにスクロールバーを追加*/
        height: 5px;
    }
    .scroll_tablewrap::-webkit-scrollbar-track{/*tableにスクロールバーを追加*/
        background: #F1F1F1;
    }
    .scroll_tablewrap::-webkit-scrollbar-thumb {/*tableにスクロールバーを追加*/
        background: #BCBCBC;
    }

    /*シェアボタン*/
    .sharrre{
        position: relative;
        top: 0;
        margin-left: 80px;
        margin-bottom: 10px;
    }
    .sharrre .buttons{}
    .sharrre .button{}
    .sharrre .button iframe{}

    /* SNSボタン */
    ul.sns_sharebtn{
        margin-top:-15px;
    }

}