@charset "UTF-8";

@media screen and (max-width:768px){

    body{
        font-family: "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
        background: #fff;
        font-size: 14px;
        color: #434a54;
    }

    /*レイアウト*/
    #wrapper{
        min-height: 100vh;
        position: relative;
        padding-bottom: 200px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .inner{
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
    }
    header{
        padding: 0;
        height: 50px;
        position: relative;
    }
    nav{
        background: #374270;
    }
    #container{
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
        margin-top: 0px;
    }
    #side{
        display: none;
    }
    #content{
        width: 100%;
        float: none;
        padding: 0 10px;
    }
    footer{
        background: #374270;
        color: #fff;
        padding: 0 0 10px 0;
        position: absolute;
        bottom: 0;
        width: 100%;
    }

    /*共通*/
    a{
        color: #4366ca;
        -webkit-transition: all .3s;
        transition: all .3s;
    }
    a:hover{
        color: #374270;
    }

    .fs-s{
        font-size: 12px;
    }
    .fs-l{
        font-size: 16px;
    }
    .fc-red{
        color: #d2392e;
    }
    .fw-bold{
        font-weight: bold;
    }
    .mt-10{
        margin-top: 10px;
    }
    .mt-40{
        margin-top: 30px;
    }
    .mb-10{
        margin-bottom: 10px;
    }
    .mr-10{
        margin-right: 10px;
    }

    .fl-left{
        float: left;
    }
    .ta-right{
        text-align: right;
    }
    .highlight{
        background-color: yellow; margin-right: 0 !important;
    }

    table{
        border-collapse: collapse;
    }

    /*/----------HEADER----------/*/

    /*ロゴ*/
    h1{
        margin: 0;
        text-align: center;
    }
    h1 img{
        height: 26px;
        margin: 12px auto;
    }

    /*ボタンエリア*/
    ul.top-nav{
        position: absolute;
        right: 0;
        top: 0;
        overflow: hidden;
        margin-top: 0;
    }
    ul.top-nav li{
        float: left;
        margin: 0;
        font-size: 16px;
    }
    ul.top-nav li a{
        display: block;
        border-radius: 0;
        color: #fff;
        text-decoration: none;
        padding: 10px;
        height: 50px;
    }
    ul.top-nav li a span{
        display: none;
    }
    ul.top-nav li a.btn-cart{
        background: #d25a2e url(../img/icn_cart.png) no-repeat center center;
        background-size: 25px auto;
        padding-left: 40px;
    }
    ul.top-nav li a.btn-mypage{
        background: #e4b124 url(../img/icn_mypage.png) no-repeat center center;
        background-size: 22px auto;
        padding-left: 38px;
    }

    ul.top-nav-sp{
        position: absolute;
        left: 50px;
        top: 0;
        overflow: hidden;
        margin-top: 0;
    }
    ul.top-nav-sp li{
        float: left;
        margin: 0;
        font-size: 16px;
    }
    ul.top-nav-sp li a{
        display: block;
        border-radius: 0;
        color: #fff;
        text-decoration: none;
        padding: 10px;
        height: 50px;
    }
    ul.top-nav-sp li a.btn-category-sp{
        background: #5ba9c6 url(../img/icn_category.png) no-repeat center center;
        background-size: 24px auto;
        padding-left: 40px;
    }
    ul.top-nav-sp li a.btn-login-sp{
        background: #d7deea url(../img/icn_login.png) no-repeat center center;
        background-size: 20px auto;
        padding-left: 38px;
    }

    /*カテゴリメニュー*/
    #sp-menu {
        list-style-type: none;
        width: 100%;
        background: #75bed1;
        position: absolute;
        left: 0px;
        top: 50px;
        z-index: 990;
        display: none;
        text-align: center;
    }
    #sp-menu .category-title{
        padding: 10px 15px;
        font-weight: bold;
        color: #333;
        border-bottom: 1px solid #add4e3;
        font-size: 16px;
    }
    #sp-menu .category-title-link{
        padding: 10px 15px;
        font-weight: bold;
        color: #333;
        border-bottom: 1px solid #fff;
        font-size: 16px;
    }
    #sp-menu .category-title-link a{
        text-decoration: none;
        color: #333;
        position: relative;
    }
    #sp-menu .category-title-link a:after{
        content: "";
        position: absolute;
        right: -15px;
        top: 34%;
        display: block;
        width: 6px;
        height: 6px;
        border-top: solid 2px #fff;
        border-right: solid 2px #fff;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    #sp-menu ul{
        overflow: hidden;
        border-bottom: 1px solid #fff;
    }
    #sp-menu li {
        width: 100%;
        padding: 0 20px;
        text-align: left;
        border-bottom: 1px solid #add4e3;
        border-right: 1px solid #add4e3;
    }
    #sp-menu li:nth-child(2n) {
        border-right: none;
    }
    #sp-menu li a {
        text-decoration: none;
        display: block;
        padding: 7px 0;
        color:#333;
    }
    #sp-icon {
        width: 50px;
        height: 50px;
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 999;
        background: #5ba9c6;
    }
    #sp-icon span,
    #sp-icon span:before,
    #sp-icon span:after {
        display: inline-block;
        width: 24px;
        height: 3px;
        background: #fff;
        position: absolute;
        -webkit-transition-property: -webkit-transform;
        transition-property: -webkit-transform;
        transition-property: transform;
        transition-property: transform, -webkit-transform;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
    }
    #sp-icon span {
        left: 50%;
        top: 50%;
        -webkit-transform: translate( -50%, -50% );
        transform: translate( -50%, -50% );
    }
    #sp-icon span:before {
        content: "";
        -webkit-transform: translateY( -10px ) rotate( 0deg );
        transform: translateY( -10px ) rotate( 0deg );
    }
    #sp-icon span:after {
        content: "";
        -webkit-transform: translateY( 10px ) rotate( 0deg );
        transform: translateY( 10px ) rotate( 0deg );
    }
    .sp-open span {
        background: transparent !important;
    }
    .sp-open span:before {
        -webkit-transform: rotate( 45deg ) !important;
        transform: rotate( 45deg ) !important;
    }
    .sp-open span:after {
        -webkit-transform: rotate( -45deg ) !important;
        transform: rotate( -45deg ) !important;
    }


    /*/----------NAV----------/*/
    .global-menu{
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
    }
    .global-menu .menu{
        width: calc(100%/2);
        float: left;
        text-align: center;
        font-size: 14px;
        border-bottom: 1px solid #707693;
        border-right: 1px solid #707693;
    }
    .global-menu .menu:nth-child(2n){
        border-right: none;
    }
    .global-menu .menu a{
        display: block;
        color: #fff;
        text-decoration: none;
        padding: 8px 0;
        position: relative;
        -webkit-transition: all .3s;
        transition: all .3s;
    }
    .global-menu .menu a:before{
        content: none;
    }
    .global-menu .menu:first-child a:before{
        content: none;
    }

    /*/----------SEARCH BAR----------/*/

    /*検索バー*/
    #search-bar{
        background: #d7deea;
        padding: 10px;
    }
    .search-box{
        margin: 0 auto;
        text-align: center;
    }
    .search-box ul{
        display: table;
    }
    .search-box li{
        display: table-cell;
        vertical-align: middle;
        padding-right: 5px;
    }
    .search-box li.input-search{
        width: 100%;
    }
    .search-box li.input-search input{
        border: none;
        width: 100%;
    }
    .search-box li:last-child{
        display: none;
    }
    .search-box li button {
        width: 65px;
    }

    /*ログインボタン*/
    .btn-login{
        display: none;
    }

    /*/----------CONTENT----------/*/
    #content section{
        margin-bottom: 30px;
    }
    .txt-box{
        margin-bottom: 20px;
    }

    /*見出し*/
    h2.page-ttl{
        margin-bottom: 20px;
        position: relative;
        padding-left: 20px;
        font-size: 18px;
        overflow: hidden;
    }
    h2.page-ttl::after {
        position: absolute;
        top: 17px;
        left:0;
        -webkit-transform:translateY(-50%);
        transform:translateY(-50%);
        content: '';
        width: 14px;
        height:14px;
        border: solid 3px #d25a2e;
        border-radius:100%;
    }
    h3{
        text-align: center;
    }
    h3 p,
    h3 p.yearly{
        font-size: 18px;
        font-weight: bold;
        border-top: solid 2px #878ea9;
        position: relative;
        display: inline-block;
        padding: 5px 0;
        margin-bottom: 10px;
    }
    h3 p:after {
        position: absolute;
        content: "";
        display: block;
        border-top: solid 2px #ebd495;
        top: -2px;
        width: 18px;
    }
    h3 p.yearly:after{
        border-top: solid 2px #db7b58;
    }
    h3.page-sub-ttl{
        text-align: left;
        margin-bottom: 10px;
        position: relative;
        padding-left: 20px;
        font-size: 16px;
    }
    h3.page-sub-ttl::after {
        position: absolute;
        top: 50%;
        left:0;
        -webkit-transform:translateY(-50%);
        transform:translateY(-50%);
        content: '';
        width: 12px;
        height:12px;
        border: solid 3px #3cabc9;
        border-radius:100%;
    }
    h4{
        background: #eff2f7;
        padding: 5px 10px;
        border-radius: 3px;
        font-size: 15px;
        margin-bottom: 10px;
        border-left: 5px solid #5f688d;
    }

    /*トップカルーセル*/
    .slide-box{
        margin-left: -10px;
        margin-right: -10px;

    }
    .slide-box img{
        width: 100%;
    }
    #content section.slide-box{
        margin-bottom: 60px;
    }

    /*パンくず*/
    .breadcrumb ul{
        overflow: hidden;
        margin: 15px 0 20px 0;
    }
    .breadcrumb li{
        float: left;
        vertical-align: middle;
        padding-right: 26px;
        position: relative;
    }
    .breadcrumb ul li:after {
        position: absolute;
        display: block;
        content: '';
        content: ">";
        top: -1px;
        right: 8px;
    }
    .breadcrumb ul li:last-child{
        padding-right: 0;
    }
    .breadcrumb ul li:last-child::after {
        content: none;
    }

    /*お知らせ*/
    .news-box ul{
        padding: 0;
    }
    .news-box li{
        margin-bottom: 10px;
    }
    .news-box.news-sp li{
        border-bottom: 1px solid #d7deea;
        padding-bottom: 10px;
    }
    .news-box li span{
        margin-right: 0;
        display: block;
    }
    .news-box .news-detail{
        padding: 10px 15px 20px 15px;
        border-bottom: 1px solid #d7deea;
        margin-bottom: 10px;
    }

    /*商品一覧*/
    .item-list-box{
        overflow: hidden;
        width: 100%;
    }
    .item-list-box li{
        float: left;
        width: calc((100% - (10px * 1)) / 2);
        margin: 0 0 10px 0;
        margin-left: 10px;
        background: #f7f8fb;
        padding: 10px;
        text-align: center;
    }
    .item-list-box li:nth-child(2n+1){
        margin-left: 0;
    }
    .item-list-box li dt{
        display: inline-block;
        width: 71%;
        position: relative;
        padding-top: 100%;
    }
    .item-list-box li dt img{
        -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        margin: 0 auto;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }
    .item-list-box li dd{
        display: block;
        padding: 10px 0 0 0;
        text-align: left;
    }
    .item-category{
        display: inline;
        color: #fff;
        background: #5ba9c6;
        font-size: 13px; 
        padding: 3px 5px;
    }
    .item-list-box li dd h2{
        font-size: 15px;
        font-weight: bold;
        margin: 5px 0 10px 0;
    }

    /*最新号*/
    .new-item-box dl{
        background: #f7f8fb;
        padding: 10px;
        display: table;
    }
    .new-item-box dt{
        display: table-cell;
        width: 35%;
    }
    .new-item-box dt img{
        width: 100%;
        -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    .new-item-box dd{
        display: table-cell;
        padding: 0 0 0 20px;
        vertical-align: top;
    }
    .new-item-box dd p{
        margin-bottom: 5px;
    }
    .new-item-box dd h2{
        font-size: 16px;
        margin: 5px 0;
    }

    /*バックナンバー一覧*/
    .back-number-box ul{
        border-top: 1px dotted #9ba0b7;
        margin-bottom: 10px;
    }
    .back-number-box li{
        border-bottom: 1px dotted #9ba0b7;
        padding: 10px 5px;
    }
    .back-number-box li div{
        vertical-align: middle;
    }
    .back-number-box li div a{
        font-weight: bold;
        display: block;
        margin:5px 0;
    }
    .back-number-box li p{
        margin-top: -20px;
    }
    .back-number-box li div span.item-category{
        margin-right: 5px;
    }
    .to-item-detail{
        width: 100%;
        text-align: right;
    }
    .to-item-detail .btn-item-detail{
        font-weight: normal;
        display: inline-block;
        margin: 0;
    }
    /*正誤表*/
    .back-number-box .errata-list li{
        padding: 5px;
        overflow: hidden;
    }
    .to-errata-detail{
        float: right;
    }
    .back-number-box .errata-list li div.to-errata-detail a{
        background: url(../img/icn_pdf.png) no-repeat 0 3px;
        background-size: 16px auto;
        padding: 2px 0 2px 22px;
        font-weight: normal;
    }

    /*ページャー*/
    .pager {
        text-align: center;
    }
    .pager ul{
        border-top: none;
    }
    .pager li {
        display: inline-block;
        margin: 0 2px;
        padding: 0;
        display: inline-block;
        background:#d7deea;
        width: 24px;
        height: 24px;
        text-align: center;
        position: relative;
        border-bottom: none;
    }
    .pager li a{
        vertical-align: middle;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        display:table;
        color: #333;
        text-decoration: none;
    }
    .pager li a span{
        display:table-cell;
        vertical-align:middle;
    }
    .pager li a:hover,
    .pager li a.active{
        color: #fff;
        background: #737a9b;
    }

    /*商品詳細*/
    #content section.item-detail-box{
        background: #f7f8fb;
        padding: 15px 0;
        margin: -10px 0 30px 0;
        overflow: hidden;
    }

    .detail-btn-box{
        padding: 10px;
        float: left;
    }
    .detail-btn-box br{
        display: none;
    }
    .detail-btn-box a{
        margin-right: 5px;
        font-weight: normal;
        padding: 5px 15px;
        font-size: 14px;
        color: #333;
        background: #fff;
    }
    .detail-btn-box .btn-subscribe{
        color: #3cabc9;
    }
    .detail-btn-box .btn-booklet{
        color: #e4b124;
    }

    .item-detail-box dl{
        display: block;
    }
    .item-detail-box dt{
        display: block;
        position: relative;
        text-align: center;
        margin-bottom: 15px;
    }
    .item-detail-box dt img{
        width: 50%;
        -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    .item-detail-box dd{
        display: block;
    }
    .item-detail-box dd .item-info{
        border-bottom: 1px solid #9ba0b7;
        padding: 0 10px;
        padding-bottom: 5px;
    }
    .item-detail-box dd .item-info p{
        margin-bottom: 10px;
    }
    .item-info p select{
        padding: 5px 10px;
        margin-bottom: 10px;
    }
    .item-detail-box dd h2{
        font-size: 18px;
        margin: 5px 0 15px 0;
    }
    .item-detail-box dd li{
        border-bottom: 1px dotted #9ba0b7;
        padding: 10px;
        display: block;
    }
    .item-detail-box dd li.pdf-box{
        background:#fdf5f4;
    }
    .item-detail-box dd li div{
        display: block;
    }
    span.ttl-booklet{
        background: #e4b124;
        padding: 5px 10px;
        color: #fff;
        border-radius: 30px;
    }
    span.ttl-electronic{
        background: #3d65d1;
        padding: 5px 10px;
        color: #fff;
        border-radius: 30px;
    }
    span.ttl-pdf{
        background: #d2392e;
        padding: 5px 10px;
        color: #fff;
        border-radius: 30px;
    }
    .item-detail-box dd li p.price{
        margin-top: 10px;
    }
    .item-detail-box dd li p.price span{
        font-weight: bold;
        font-size: 15px;
    }
    .item-detail-box dd li p.price br{
        display: none;
    }
    p.pdf-txt{
        margin-top: 10px;
        font-size: 12px;
    }
    .to-cart{
        text-align: right;
        vertical-align: middle;
        margin-top: 10px;
    }
    .to-cart input{
        text-align: center;
        width: 50px !important;
    }
    .to-cart .select-wrap {
        display: inline-block;
        margin: 0 5px;
    }
    p.to-cart-txt{
        font-size: 12px;
        margin-top: 5px;
        text-align: right;
        padding: 0;
    }
    p.to-cart-txt a{
        font-size: 12px;
        font-weight: normal;
        text-decoration: underline;
        color: #4366ca;
        padding: 0;
    }


    .btn-booklet{
        background: #e4b124;
        border: 1px solid #e4b124;
    }
    .btn-electronic{
        background: #3d65d1;
        border: 1px solid #3d65d1;
    }
    .btn-pdf{
        background: #d2392e;
        border: 1px solid #d2392e;
    }
    .btn-subscribe{
        background: #3cabc9;
        border: 1px solid #3cabc9;
    }
    .btn-bookelec{
        background: #9bc13a;
        border: 1px solid #9bc13a;
    }

    .detail-btn-box{
        padding: 10px;
        float: left;
    }
    .detail-btn-box br{
        display: none;
    }
    .detail-btn-box a{
        margin-right: 5px;
        font-weight: normal;
        padding: 5px 15px;
        font-size: 14px;
        color: #333;
        background: #fff;
    }


    .link-errata{
        float: right;
        text-align: right;
        margin-top: 10px;
        padding-right: 10px;
    }
    .link-errata a{
        display: inline-block;
        background: url(../img/icn_pdf.png) no-repeat 0 2px;
        background-size: 16px auto;
        padding-left: 20px;
    }

    .item-content-box ul{
        margin-bottom: 30px;
    }
    .item-content-box li{
        border-bottom: 1px dotted #aeb1c0;
        padding: 5px 10px;
        overflow: hidden;
    }
    .item-content-box li p{
        font-weight: bold;
    }
    .item-content-box li div.pdf-info{
        text-align: right;
        float: left;
        width: 60%;
        padding-top: 15px;
        padding-right: 10px;
    }
    .item-content-box li div.pdf-info span{
        font-weight: bold;
        margin-left: 20px;
    }
    .item-content-box li div.pdf-cart{
        text-align: right;
        float: right;
        margin-top: 5px;
        width: 40%;
    }

    /*ご利用について*/
    table.guide-tbl{
        margin: 10px 0;
        border-top: 1px solid #bfc5d4;
        width: 100%;
    }
    table.guide-tbl th{
        display: block;
        background: #f3f5f9;
        text-align: left;
        padding: 8px 15px;
        border-bottom: 1px solid #bfc5d4;
        width: 100%;
    }
    table.guide-tbl td{
        display: block;
        padding: 10px 15px;
        border-bottom: 1px solid #bfc5d4;
    }

    ul.buy-flow{
        margin-bottom: 10px;
    }
    ul.buy-flow li{
        display: block;
        text-align: center;
        position: relative;
        padding:15px 40px;
        background: #f3f5f9;
        border-radius: 80px;
        font-size: 13px;
    } 
    ul.buy-flow li.arrow{
        content: '';
        background: url(../img/icn_arrow_down.png) no-repeat center center;
        background-size: 16px auto;
        vertical-align: middle;
        padding: 15px 20px;
    }
    ul.buy-flow li br{
        display: none;
    }
    ul.buy-flow li p{
        font-weight: bold;
        font-size: 16px;
        margin: 3px 0 5px 0;
        color: #374270;
    }
    ul.buy-flow li img{
        width: 30px;
    }

    ul.one-col-list{
        margin:20px 0;
    }
    ul.one-col-list li{
        margin-bottom: 10px;
        padding-left: 10px;
    }
    ul.one-col-list li:before {
        content: "";
        width: 3px;
        height: 3px;
        display: inline-block;
        background-color: #5f688d;
        border-radius: 50%;
        position: relative;
        top: -3px;
        right: 8px;
    }

    ul.two-col-list{
        margin:20px 0 0 5px;
    }
    ul.two-col-list li{
        margin-bottom: 10px;
        padding-left: 10px;
    }
    ul.two-col-list li:before {
        content: "";
        width: 3px;
        height: 3px;
        display: inline-block;
        background-color: #5f688d;
        border-radius: 50%;
        position: relative;
        top: -3px;
        right: 8px;
    }

    .to-guide-nav{
        display: block;
        font-size: 14px;
        font-weight: normal;
        margin-top: 5px;
        text-align: right;
    }
    .to-guide-nav span{
        color: #d25a2e;
        margin-right: 5px;
    }
    .to-guide-nav a{
        color: #d25a2e;
    }

    .sp-img{
        width: 100%;
    }

    /*ご利用ガイドメニュー*/
    ul.guide-nav {
        overflow: hidden;
        border-right: 1px solid #9ba4bb;
        border-top: 1px solid #9ba4bb;
    }
    ul.guide-nav li{
        border-left: 1px solid #9ba4bb;
        border-bottom: 1px solid #9ba4bb;
        background: #f3f5f9;
    }
    ul.guide-nav li a{
        display: block;
        padding: 10px 15px;
        color: #333;
        text-decoration: none;
    }
    ul.guide-nav li.current a{
        font-weight: bold;
        position: relative;
        padding-left: 30px;
    }
    ul.guide-nav li.current a:before {
        content: "";
        position: absolute;
        left: 15px;
        top: 42%;
        display: block;
        width: 6px;
        height: 6px;
        border-top: solid 2px #d25a2e;
        border-right: solid 2px #d25a2e;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    ul.guide-nav li a:hover{
        background: #fff;
    }

    ul.faq li{
        padding: 15px 0;
        margin-bottom: 10px;
        margin-top: -15px;
    }
    ul.faq li p{
        font-weight: bold;
        padding-bottom: 5px;
        margin-bottom: 10px;
        border-bottom: 1px solid #9ba4bb;
        font-size: 15px;
    }
    ul.faq li span{
        color: #5f688d;
        font-weight: bold;
        margin-right: 10px;
        font-size: 16px;
    }

    .guide-txt{
        margin-bottom: 30px;
    }

    .guide-cart li{
        background: #f3f5f9;
        padding: 10px;
    }
    .guide-cart li.arrow{
        content: '';
        background: url(../img/icn_arrow_down.png) no-repeat center center;
        background-size: 16px auto;
        vertical-align: middle;
        padding: 15px 20px;
    } 
    .guide-cart li p{
        font-weight: bold;
        color: #374270;
        font-size: 15px;
        margin-bottom: 10px;
    } 
    .guide-cart li p span{
        color: #fff;
        background: #5f688d;
        padding: 3px 4px;
        margin-right: 10px;
        font-weight: normal;
        font-size: 12px;
    }
    .guide-cart.dissertation img {
        display: block;
        margin: 15px auto 0;
        width: 100%;
    }

    /*マイページメニュー*/
    ul.mypage-nav {
        overflow: hidden;
        border-right: 1px solid #f2dc99;
        border-top: 1px solid #f2dc99;
    }
    ul.mypage-nav li{
        width: 100%;
        border-left: 1px solid #f2dc99;
        border-bottom: 1px solid #f2dc99;
        background: #fdfbf2;
    }
    ul.mypage-nav li a{
        display: block;
        padding: 10px 15px;
        color: #333;
        text-decoration: none;
    }
    ul.mypage-nav li.current a{
        font-weight: bold;
        position: relative;
        padding-left: 30px;
    }
    ul.mypage-nav li.current a:before {
        content: "";
        position: absolute;
        left: 15px;
        top: 42%;
        display: block;
        width: 6px;
        height: 6px;
        border-top: solid 2px #d25a2e;
        border-right: solid 2px #d25a2e;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    /*カートの中*/
    .cart-box{
        position: relative;
        padding: 10px;
        border-top: 1px solid #d7deea;
    }
    .cart-box dl{
        display: table;
    }
    .cart-box dt,
    .cart-box dd{
        display: table-cell;
        vertical-align: top;
    }
    .cart-box dt img{
        width: 90px;
        margin-right: 10px;
    }
    .cart-box dd{
        padding-right: 10px;
    }
    .cart-box button.btn-del{
        background-color: #9ba4bb;
        border-radius: 50%;
        padding: 0;
        position: absolute;
        top: 10px;
        right: 0;
        width: 20px;
        height: 20px;
        color: #fff;
    }
    .total-box{
        background: #eff2f7;
        text-align: right;
        padding: 15px 20px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .total-box span{
        color: #d2392e;
    }
    .total-box p{
        border-top: 1px solid #9ba4bb;
        margin-top: 10px;
        padding-top: 10px;
        font-size: 16px;
        font-weight: bold;
    }

    /*購入ステップ*/
    .progressbar {
        counter-reset: step;
        z-index: 0;
        position: relative;
        overflow: hidden;
        margin-bottom: 30px;
        margin-top: 15px;
    }
    .progressbar li {
        width: 25%;
        float: left;
        font-size: 13px;
        position: relative;
        text-align: center;
        text-transform: uppercase;
        color: #aaa;
    }
    .progressbar li:before {
        width: 30px;
        height: 30px;
        content: counter(step);
        counter-increment: step;
        line-height: 30px;
        display: block;
        text-align: center;
        margin: 0 auto 10px auto;
        border-radius: 50%;
        background-color: #eee;
    }
    .progressbar li:after {
        width: 100%;
        height: 2px;
        content: '';
        position: absolute;
        background-color: #eee;
        top: 15px;
        left: -50%;
        z-index: -1;
    }
    .progressbar li:first-child:after {
        content: none;
    }
    .progressbar li.active {
        color:#374270;
    }
    .progressbar li.active:before {
        background-color: #3cabc9;
        color:#fff;
    }
    .progressbar li.active + li:after {
        background-color: #3cabc9;
    }

    /*ページ内利用規約*/
    .order-tos{
        margin-bottom: 40px;
        border: 1px solid #9ba4bb;
        height: 300px;
        overflow-y: auto;
        padding: 10px;
    }
    .order-tos h4{
        font-size: 14px;
        border-left: 4px solid #5f688d;
    }

    /*お届け先情報*/
    #delivery-address{
        display: none;
    }

    /*クレジットカード情報*/
    .credit-info{
        margin-top: 20px;
    }
    .credit-info a{
        display: inline-block;
        margin: 20px 0;
    }
    .new-credit-info{
        border: 1px solid #9ba4bb;
        padding: 10px;
    }
    .new-credit-info ul.form-list{
        margin-top: 10px;
    }

    /*購入履歴*/
    .tabs {
        padding-bottom: 40px;
        width: 100%;
    }
    .tab_item {
        width: calc(100%);
        height: 45px;
        line-height: 45px;
        text-align: center;
        color: #333;
        display: block;
        float: left;
        text-align: center;
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease;
        border-top: 1px solid #d7deea;
        border-right: 1px solid #d7deea;
        border-left: 1px solid #d7deea;
    }
    .tab_item:nth-last-of-type(1){
        border-bottom: 1px solid #d7deea;
    }
    input[name="tab_item"] {
        display: none;
    }
    .tab_content {
        display: none;
        padding:20px 0 0 0;
        clear: both;
        overflow: hidden;
    }
    #order-top:checked ~ #order-top_content,
    #order-pdf:checked ~ #order-pdf_content,
    #order-year-book:checked ~ #order-year-book_content,
    #order-year-ebook:checked ~ #order-year-ebook_content,
    #order-single:checked ~ #order-single_content,
    #order-magazine:checked ~ #order-magazine_content{
        display: block;
    }
    .tabs input:checked + .tab_item {
        background: #f3f5f9;
        color: #333;
        font-weight: bold;
    }
    .tabs h3{
        margin-bottom: 10px;
    }
    .tab_content .back-number-box li p{
        margin-top: 10px;
    }
    .tab_content .back-number-box ul{
        margin-bottom: 30px;
    }
    .tab_content .back-number-box li div a{
        display: inline-block;
    }
    .order-detail{
        margin-top:10px;
        overflow: hidden;
    }
    .order-detail p{
        float: left;
    }
    .order-detail .btn{
        font-weight: normal;
        background: url(../img/icn_pdf.png) no-repeat 12px 7px;
        background-size: 16px auto;
        padding-left: 36px;
        float: right;
        margin-top: 10px;
    }
    .order-btn{
        text-align: center;
        margin-top: 10px;
    }

    h4 span.item-category{
        font-size: 16px;
        margin-right: 10px;
    }


    /*/----------FORM----------/*/

    /*フォームレイアウト*/
    ul.form-list{
        margin: 15px 0;
        border-top: 1px solid #d7deea;
    }
    ul.form-list li{
        padding: 10px 10px 13px 10px;
        border-bottom: 1px solid #d7deea;
    }
    .form-name{
        font-weight: bold;
        margin-bottom: 5px;
    }
    .form-name span{
        font-weight: normal;
        background: #9bc13a;
        color: #fff;
        padding: 2px 6px 3px 6px;
        margin-left: 5px;
        border-radius: 20px;
        font-size: 12px;
    }
    .required{
        font-weight: normal;
        background: #9bc13a;
        color: #fff;
        padding: 2px 6px 3px 6px;
        border-radius: 20px;
        font-size: 12px;
    }

    .form-inline div{
        margin-bottom: 5px;
    }
    .form-inline div:last-child{
        margin-bottom: 0;
    }

    .f-cmmt{
        font-size: 13px;
        color: #9ba0b7;
    }

    /*フォームリセット*/
    input,
    button,
    select,
    textarea {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: transparent;
        background-image: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        font: inherit;
        outline: none;
        text-indent: 0.01px;
        text-overflow: ellipsis;
    }
    textarea {
        resize: vertical;
    }
    input[type='radio']{
        display: none;
    }
    input[type='submit'],
    input[type='button'],
    label,
    button,
    select {
        cursor: pointer;
    }
    select::-ms-expand {
        display: none;
    }

    /*フォームカスタマイズ*/
    .w-full{
        width: 100%;
    }
    input[type='text'],input[type='password']{
        padding: 5px;
        border-radius: 5px;
        border: 1px solid #bfc5d4;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background: #fff;
    }
    .radio-wrap label{
        margin-right: 20px;
        display: inline-block;
    }
    .radio-wrap input{
        display: none;
    }
    .radio-wrap input + span{
        padding-left: 22px;
        position:relative;
    }
    .radio-wrap input + span::before{
        content: "";
        background-image: url(../img/radio.png);
        background-size: 18px 18px;
        display: block;
        position: absolute;
        top: -2px;
        left: 0;
        width: 18px;
        height: 18px;
    }
    .radio-wrap input:checked + span{
        font-weight: bold;
    }
    .radio-wrap input:checked + span::after{
        content: "";
        background-image: url(../img/radio-checked.png);
        background-size: 18px 18px;
        display: block;
        position: absolute;
        top: -2px;
        left: 0;
        width: 18px;
        height: 18px;
    }
    .checkbox-wrap label{
        margin-right: 20px;
        display: inline-block;
    }
    .checkbox-wrap input{
        display: none;
    }
    .checkbox-wrap input + span{
        padding-left: 22px;
        position:relative;
    }
    .checkbox-wrap input + span::before{
        content: "";
        background-image: url(../img/check.png);
        background-size: 18px 18px;
        display: block;
        position: absolute;
        top: -2px;
        left: 0;
        width: 18px;
        height: 18px;
    }
    .checkbox-wrap input:checked + span{
        font-weight: bold;
    }
    .checkbox-wrap input:checked + span::after{
        content: "";
        background-image: url(../img/check-checked.png);
        background-size: 18px 18px;
        display: block;
        position: absolute;
        top: -2px;
        left: 0;
        width: 18px;
        height: 18px;
    }
    .select-wrap{
        display: inline-block;
        position: relative;
        border:1px solid #bfc5d4;
        background-color: #fff;
        border-radius: 5px;
    }
    .select-wrap:before {
        position: absolute;
        top: 50%;
        right: 10px;
        -webkit-transform: translateY(-50%) translateX(0);
        transform: translateY(-50%) translateX(0);
        content: '';
        width: 10px;
        height: 10px;
        background: url(../img/select.png) no-repeat;
        background-size: contain;
        pointer-events: none;
    }
    .select-wrap select{
        padding: 5px 38px 5px 10px;
        max-width: 350px;
    }
    textarea{
        width: 100%;
        height: 300px;
        padding: 5px;
        border-radius: 5px;
        border: 1px solid #bfc5d4;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }

    /*error*/
    ul.form-list li.error input,
    ul.form-list li.error .select-wrap{
        border: 1px solid #dd0000;
    }
    ul.form-list li.error .form-name span{
        background: #dd0000;
    }
    ul.form-list li.error p,
    ul.form-list li.error .checkbox-wrap,
    ul.form-list li.error .radio-wrap,
    .radio-wrap.error label{
        color: #dd0000;
    }
    ul.form-list li.error p.form-name{
        color:#434a54
    }
    ul.form-list li.error p.f-cmmt{
        color: #f19999;
    }

    /*フォームボタン*/
    .form-btn{
        text-align: center;
    }
    .form-btn button{
        display: inline-block;
        margin: 0 auto 5px;
    }

    .btn{
        display: inline-block;
        border-radius: 5px;
        color: #fff;
        text-decoration: none;
        cursor: pointer;
    }
    .btn:hover{
        color: #fff;
    }
    .btn.disable{
        cursor: default;
        background-color: #ddd;
        border: 1px solid #ddd;
    }

    .btn-sml{
        padding: 5px 15px;
        font-size: 14px;
    }
    .btn-md{
        padding: 6px 15px;
        font-size: 15px;
    }
    .btn-lrg{
        padding: 8px 25px;
        font-weight: bold;
        font-size: 16px;
    }
    .btn-s80 {
        width: 80%;
    }

    .btn-icon{
        padding: 8px 20px 8px 40px;
    }

    .btn-primary{
        background: #374270;
    }
    .btn-secondary{
        background: #707693;
    }
    .btn-white{
        background: #f7f8fb;
        color: #5f688d;
        border: 1px solid #eff2f7;
    }

    .btn-item-detail{
        padding: 5px 25px 5px 15px;
        position: relative;
    }
    .btn-item-detail::before{
        position: absolute;
        content: "";
        vertical-align: middle;
        top: 36%;
        right: 7px;
        width: 5px;
        height: 5px;
        border: 5px solid transparent;
        border-left: 5px solid #9ba1b8;
    }

    .btn-sample{
        background: #374270 url(../img/icn_sample.png) no-repeat 14px 10px;
        background-size: 14px auto;
    }

    .form-btn button.btn-block-sp{
        display: block;
        margin: 0 auto;
        margin-bottom: 10px;
    }

    .btn-dl{
        background: #d2392e url(../img/icn_dl.png) no-repeat 14px 10px;
        background-size: 12px auto;
        padding-left: 35px;
        margin-top: 5px;
    }
    .btn-view{
        background: #3d65d1 url(../img/icn_view.png) no-repeat 14px 11px;
        background-size: 18px auto;
        padding-left: 40px;
        margin-top: 5px;
    }
    .btn-logout a{
        display: inline-block;
        color: #333;
        font-size: 14px;
        padding: 6px 15px 6px 0;
        background: #fff url(../img/icn_logout.png) no-repeat 14px 8px;
        background-size: 11px auto;
        padding-left: 35px;
        margin-top: 5px;
    }

    /*/----------FOOTER----------/*/
    .footer-logo{
        float: none;
        text-align: center;
        font-size: 12px;
        margin-bottom: 30px;
    }
    .footer-logo img{
        margin-top: 20px;
        width: 35%;
    }
    .footer-nav{
        float: none;
        text-align: center;
    }
    .footer-nav li{
        float: left;
        padding: 0;
        border-right: 1px solid #a4a9be;
        border-bottom: 1px solid #a4a9be;
    }
    .footer-nav li.col2{
        width: 50%;
    }
    .footer-nav li.col3{
        width: 33.3333%;
    }
    .footer-nav li:nth-of-type(2),
    .footer-nav li:last-child{
        border-right: none;
        padding-right: 0;
    }
    .footer-nav li a{
        text-decoration: none;
        color: #fff;
        display: block;
        background: #5a6389;
        padding: 8px 0;
        font-size: 13px;
    }
    footer .inner{
        position: relative;
    }
    .copyright{
        position: absolute;
        width: 100%;
        text-align: center;
        font-size: 12px;
        color: #aeb1c0;
        bottom: 0;
    }
    .page-top{
        width: 40px;
        height: 40px;
        position: fixed;
        right: 10px;
        bottom: 10px;
        background: #dfa800;
        opacity: 0.6;
        border-radius: 50%;
        z-index: 99;
    }
    .page-top a{
        display: block;
        background: url(../img/icn_pagetop.png) no-repeat center center;
        background-size: 20px 20px;
        width: 40px;
        height: 40px;
    }

}