@charset "UTF-8";

@media screen and (min-width:769px){

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

    /*レイアウト*/
    #wrapper{
        min-height: 100vh;
        position: relative;
        padding-bottom: 130px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .inner{
        width: 1200px;
        margin: 0 auto;
        overflow: hidden;
    }
    header{
        padding: 15px 0 10px 0;
    }
    nav{
        background: #374270;
    }
    #container{
        width: 1200px;
        margin: 0 auto;
        overflow: hidden;
        margin-top: 30px;
    }
    #side{
        width: 260px;
        float: left;
    }
    #content{
        width: 900px;
        float: right;
    }
    #content.back-end{
        width: 860px;
        float: none;
        margin: 0 auto;
    }
    footer{
        width: 100%;
        background: #374270;
        color: #fff;
        padding: 30px 0;
        position: absolute;
        bottom: 0; 
    }

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

    table{
        border-collapse: collapse;
    }

    .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: 40px;
    }
    .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;
    }

    /*/----------HEADER----------/*/
    h1{
        float: left;
    }
    h1 img{
        height: 40px;
    }
    ul.top-nav{
        float: right;
        overflow: hidden;
    }
    ul.top-nav li{
        float: left;
        margin: 0 10px;
        font-size: 16px;
    }
    #sp-menu, #sp-icon, .top-nav-sp{
        display: none;
    }


    /*/----------NAV----------/*/
    .global-menu{
        width: 1200px;
        margin: 0 auto;
        overflow: hidden;
    }
    .global-menu .menu{
        width: calc(100%/4);
        float: left;
        text-align: center;
        font-size: 16px;
    }
    .global-menu .menu a{
        display: block;
        color: #fff;
        text-decoration: none;
        padding: 13px 0;
        position: relative;
        -webkit-transition: all .3s;
        transition: all .3s;
    }
    .global-menu .menu a:before{
        position: absolute;
        content: "";
        display: block;
        border-right: 1px solid #707693;
        top: 14px;
        height: 20px;
    }
    .global-menu .menu:first-child a:before{
        content: none;
    }
    .global-menu .menu a:hover{
        background: #5f688d;
    }

    /*/----------SEARCH BAR----------/*/
    #search-bar{
        background: #d7deea;
        padding: 10px 0;
    }
    .search-box{
        float: left;
        background: url(../img/icn_search.png) no-repeat 0 center;
        background-size: 25px auto;
        padding-left: 35px;
        margin-top: 2px;
    }
    .search-box ul{
        display: table;
    }
    .search-box li{
        display: table-cell;
        vertical-align: middle;
        padding-right: 5px;
    }
    .search-box li.input-search{
        width: 400px;
    }
    .search-box li.input-search input{
        border: none;
        width: 100%;
    }
    .search-detail{
        display: inline-block;
        background: url(../img/icn_info.png) no-repeat 0 2px;
        background-size: 16px auto;
        padding-left: 22px;
        color: #333;
        margin-left: 15px;
        font-size: 12px;
    }
    .btn-login,
    .btn-logout{
        float: right;
    }
    .btn-login a{
        display: block;
        color: #333;
        font-size: 16px;
        padding: 6px 20px 6px 0;
        background: #fff url(../img/icn_login.png) no-repeat 14px 9px;
        background-size: 13px auto;
        padding-left: 37px;
    }
    .btn-logout a{
        display: block;
        color: #333;
        font-size: 16px;
        padding: 6px 20px 6px 0;
        background: #fff url(../img/icn_logout.png) no-repeat 14px 9px;
        background-size: 13px auto;
        padding-left: 37px;
    }
    .btn-login a:hover,
    .btn-logout a:hover{
        color: #333;
    }


    /*/----------SIDE----------/*/
    .accordion-container{
        position: relative;
        width: 100%;
        outline: 0;
        cursor: pointer;
        border-top: 5px solid #374270;
    }
    .article-title{
        display: block;
        position: relative;
        margin: 0;
        padding: 15px;
        font-size: 16px;
        color: #333;
        cursor: pointer;
        border-bottom: 5px solid #eff2f7;
    }
    .article-title:after{
        content: "";
        position: absolute;
        right: 25px;
        top: 38%;
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        display: block;
        width: 8px;
        height: 8px;
        border-top: solid 2px #374270;
        border-right: solid 2px #374270;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    .article-title.open:after{
        border-top: solid 2px #9ba0b7;
        border-right: solid 2px #9ba0b7;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top: 45%;
    }
    .accordion-content{
        display: none;
        padding: 10px 20px;
        background: #f3f5f9;
    }
    .accordion-content li{
        margin-bottom: 10px;
    }
    .accordion-content li a{
        color: #333;
        text-decoration: none;
        position: relative;
        padding-left: 15px;
    }
    .accordion-content li a:hover{
        color: #374270;
    }
    .accordion-content li a:before{
        content: "";
        position: absolute;
        left: 0px;
        top: 34%;
        display: block;
        width: 6px;
        height: 6px;
        border-top: solid 1px #9ba4bb;
        border-right: solid 1px #9ba4bb;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .accordion-content li a:hover:before{
        border-top: solid 2px #374270;
        border-right: solid 2px #374270;
    }
    .article-title-link a{
        display: block;
        margin: 0;
        padding: 15px;
        font-size: 16px;
        color: #333;
        cursor: pointer;
        border-bottom: 5px solid #eff2f7;
        text-decoration: none;
    }

    /*/----------CONTENT----------/*/
    #content section{
        margin-bottom: 50px;
    }
    #content section.mb-10{
        margin-bottom: 10px;
    }

    /*見出し*/

    h2.page-ttl{
        margin-bottom: 20px;
        position: relative;
        padding-left: 20px;
    }
    h2.page-ttl::after {
        position: absolute;
        top: 50%;
        left:0;
        -webkit-transform:translateY(-50%);
        transform:translateY(-50%);
        content: '';
        width: 14px;
        height:14px;
        border: solid 3px #d25a2e;
        border-radius:100%;
    }
    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{
        margin-bottom: 15px;
        position: relative;
        padding-left: 20px;
        font-size: 18px;
    }
    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: 16px;
        margin-bottom: 10px;
        border-left: 5px solid #5f688d;
    }
    h4 span.item-category{
        font-size: 16px;
        margin-right: 10px;
    }

    /*カルーセル*/
    .slide-box img{
        width: 100%;
    }

    .breadcrumb ul{
        display: table;
        margin-bottom: 20px;
    }
    .breadcrumb li{
        display: table-cell;
        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::after {
        content: none;
    }

    .txt-box{
        margin-bottom: 20px;
        padding: 0 10px;
    }

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

    /*商品一覧*/
    .item-list-box{
        overflow: hidden;
    }
    .item-list-box li{
        float: left;
        width: 430px;
        margin: 0 40px 40px 0;
        background: #f7f8fb;
        display: table;
        padding: 15px;
    }
    .item-list-box li:nth-child(2n){
        margin-right: 0;
    }
    .item-list-box li dt{
        display: table-cell;
        width: 150px;
    }
    .item-list-box li dt img{
        width: 150px;
        -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    .item-list-box li dd{
        display: table-cell;
        padding: 0 0 0 20px;
        vertical-align: top;
    }
    .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: 15px;
        display: table;
        width: 100%;
    }
    .new-item-box dt{
        display: table-cell;
        width: 150px;
        position: relative;
    }
    .new-item-box dt img{
        width: 150px;
        -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: 10px;
    }
    .new-item-box dd h2{
        font-size: 18px;
        margin: 5px 0 15px 0;
    }

    /*バックナンバー一覧*/
    .back-number-box ul{
        border-top: 1px dotted #9ba0b7;
        margin-bottom: 20px;
    }
    .back-number-box li{
        border-bottom: 1px dotted #9ba0b7;
        padding: 15px 10px 25px 10px;
        display: table;
        width: 100%;
    }
    .back-number-box li div{
        display: table-cell;
        vertical-align: middle;
    }
    .back-number-box li div a{
        font-weight: bold;
    }
    .back-number-box li p{
        margin-top: 10px;
    }
    .back-number-box li span{
        margin-right: 15px;
    }

    .to-item-detail{
        width: 15%;
    }
    .to-item-detail .btn-item-detail{
        font-weight: normal;
    }

    /*正誤表*/
    .back-number-box .errata-list li{
        padding: 10px;
    }
    .back-number-box .errata-list li div a{
        font-weight: normal;
    }
    .to-errata-detail{
        width: 30%;
    }
    .to-errata-detail a,
    .to-errata-detail a:hover{
        background: url(../img/icn_pdf.png) no-repeat 0 1px;
        background-size: 16px auto;
        padding: 2px 0 2px 22px;
    }

    /*ページャー*/
    .pager {
        text-align: right;
    }
    .pager ul{
        border-top: none;
    }
    .pager li {
        display: inline-block;
        margin: 0 2px;
        padding: 0;
        display: inline-block;
        background:#d7deea;
        width: 30px;
        height: 30px;
        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;
    }

    /*商品詳細*/
    .item-detail-box{
        background: #f7f8fb;
        padding: 15px;
        margin-top: -10px;
        position: relative;
    }
    .detail-btn-box{
        position: absolute;
        top: 15px;
        right: 15px;
        text-align: right;
    }
    .detail-btn-box a{
        min-width: 180px;
        text-align: center;
        margin-bottom: 10px;
        font-weight: normal;
        padding: 5px 15px;
        font-size: 14px;
        color: #333;
        background: #fff;
    }
    .detail-btn-box a.btn-subscribe,
    .detail-btn-box a.btn-subscribe:hover{
        color: #3cabc9;
    }
    .detail-btn-box .btn-booklet,
    .detail-btn-box .btn-booklet:hover{
        color: #e4b124;
    }
    .detail-btn-box .btn-pdf,
    .detail-btn-box .btn-pdf:hover{
        color: #d2392e;
    }

    .item-detail-box dl{
        display: table;
        width: 100%;
    }
    .item-detail-box dt{
        display: table-cell;
        width: 200px;
        position: relative;
    }
    .item-detail-box dt img{
        width: 200px;
        -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: table-cell;
        padding: 0 0 0 20px;
        vertical-align: middle;
    }
    .item-detail-box dd .item-info{
        border-bottom: 1px solid #9ba0b7;
        padding-bottom: 5px;
    }
    .item-detail-box dd .item-info.bb-none{
        border-bottom: none;
    }
    .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;
        width: 465px;
    }
    .item-detail-box dd li{
        border-bottom: 1px dotted #9ba0b7;
        padding: 15px 10px;
        display: table;
        width: 100%;
    }
    .item-detail-box dd li.pdf-box{
        background:#fdf5f4;
    }
    .item-detail-box dd li div{
        display: table-cell;
    }
    .ttl-booklet{
        background: #e4b124;
        display: inline-block;
        padding: 2px 10px 1px 10px;
        color: #fff;
        border-radius: 30px;
    }
    .ttl-electronic{
        background: #3d65d1;
        display: inline-block;
        padding: 2px 10px 1px 10px;
        color: #fff;
        border-radius: 30px;
    }
    .ttl-pdf{
        background: #d2392e;
        display: inline-block;
        padding: 2px 10px 1px 10px;
        color: #fff;
        border-radius: 30px;
    }
    .ttl-bookelec{
        background: #9bc13a;
        display: inline-block;
        padding: 2px 10px 1px 10px;
        color: #fff;
        border-radius: 30px;
    }
    .item-detail-box dd li p.price{
        margin-top: 10px;
    }
    p.pdf-txt{
        margin-top: 10px;
        font-size: 12px;
    }
    .item-detail-box dd li p.price span{
        font-weight: bold;
        font-size: 15px;
    }
    .to-cart{
        text-align: right;
        vertical-align: middle;
    }
    .to-cart input{
        text-align: center;
        margin-right: 3px;
        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;
    }
    .link-errata{
        text-align: right;
        margin-top: 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 15px;
        display: table;
        width: 100%;
    }
    .item-content-box li p{
        font-weight: bold;
    }
    .item-content-box li div{
        display: table-cell;
        vertical-align: middle;
    }
    .item-content-box li div.pdf-info{
        width: 160px;
        text-align: center;
    }
    .item-content-box li div.pdf-info span{
        font-weight: bold;
        margin-left: 30px;
    }
    .item-content-box li div.pdf-cart{
        width: 140px;
    }

    table.guide-tbl{
        margin: 10px 0;
        border-top: 1px solid #bfc5d4;
        width: 100%;
    }
    table.guide-tbl th{
        background: #f3f5f9;
        text-align: left;
        padding: 10px 15px;
        border-bottom: 1px solid #bfc5d4;
        width: 180px;
    }
    table.guide-tbl td{
        padding: 10px 15px;
        border-bottom: 1px solid #bfc5d4;
    }

    ul.buy-flow{
        display: table;
        margin-bottom: 10px;
    }
    ul.buy-flow li{
        display: table-cell;
        text-align: center;
        position: relative;
        padding:15px 40px;
        background: #f3f5f9;
        width: 230px;
        border-radius: 80px;
        font-size: 13px;
    } 
    ul.buy-flow li.arrow{
        content: '';
        width: 16px;
        background: url(../img/icn_arrow.png) no-repeat center center;
        background-size: 16px auto;
        vertical-align: middle;
        padding: 15px 20px;
    }
    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.two-col-list{
        margin:20px 25px 10px 25px;
        overflow: hidden;
    }
    ul.two-col-list li{
        float: left;
        width: calc(100%/2);
        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;
    }
    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;
    }

    .to-guide-nav{
        float: right;
        font-size: 14px;
        font-weight: normal;
    }
    .to-guide-nav span{
        color: #d25a2e;
        margin-right: 5px;
    }
    .to-guide-nav a{
        color: #d25a2e;
    }

    ul.guide-nav {
        overflow: hidden;
        border-right: 1px solid #9ba4bb;
        border-top: 1px solid #9ba4bb;
    }
    ul.guide-nav li{
        float: left;
        width: calc(100%/3);
        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{
        padding-left: 25px;
        margin-top: -10px;
    }
    ul.faq li{
        padding: 15px 0;
        margin-bottom: 10px;
    }
    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: 5px;
        font-size: 16px;
    }

    .guide-txt{
        padding: 0 20px;
        margin-bottom: 40px;
    }

    .guide-cart li{
        background: #f3f5f9;
        padding: 15px;
    }
    .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: 600px;
    }

    ul.tos-list{
        list-style: decimal;
        margin-left: 15px;
    }
    ul.tos-list li{
        margin: 5px 0;
    }

    .mypage-menu{
        border-top: 5px solid #e5b933;
        margin-bottom: 30px;
    }
    .mypage-menu li{
        border-bottom: 3px solid #faf2d9;
    }
    .mypage-menu li a{
        display: block;
        padding: 10px 15px;
        font-size: 15px;
        color: #333;
        text-decoration: none;
        position: relative;
    }
    .mypage-menu li.mypage-sub p{
        padding: 10px 15px;
        font-size: 15px;
        color: #333;
    }
    .mypage-menu li.mypage-sub li{
        border-top: 2px solid #fcf6e6;
        border-bottom: none;
    }
    .mypage-menu li.mypage-sub li a{
        display: inline-block;
        font-size: 13px;
        padding: 8px 15px 8px 35px;
        position: relative;
    }
    .mypage-menu li.mypage-sub li a:before{
        content: "";
        position: absolute;
        left: 20px;
        top: 38%;
        display: block;
        width: 6px;
        height: 6px;
        border-top: solid 1px #e5b933;
        border-right: solid 1px #e5b933;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .mypage-nav{
        display: none;
    }

    .cart-box{
        position: relative;
        padding: 10px 15px;
        border-top: 1px solid #d7deea;
    }
    .cart-box dl{
        display: table;
    }
    .cart-box dt,
    .cart-box dd{
        display: table-cell;
        vertical-align: middle;
    }
    .cart-box dt img{
        width: 100px;
        margin-right: 30px;
    }
    .cart-box dd{
        line-height: 28px;
        padding-right: 20px;
    }
    .cart-box button.btn-del{
        background-color: #9ba4bb;
        border-radius: 50%;
        padding: 0;
        position: absolute;
        top: 10px;
        right: 10px;
        width: 20px;
        height: 20px;
        color: #fff;
    }
    .total-box{
        background: #eff2f7;
        text-align: right;
        padding: 15px 30px;
        margin-bottom: 40px;
    }
    .total-box span{
        color: #d2392e;
        font-weight: bold;
    }
    .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;
    }
    .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: 15px 20px;
    }
    .new-credit-info ul.form-list{
        margin-top: 10px;
    }

    /*購入履歴*/
    .tabs {
        padding-bottom: 40px;
        width: 100%;
    }
    .tab_item {
        width: calc(100%/5);
        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-bottom: 1px solid #d7deea;
        border-right: 1px solid #d7deea;
    }
    .tab_item:first-of-type {
        border-left: 1px solid #d7deea;
    }
    .tab_item:hover {
        opacity: 0.8;
    }
    input[name="tab_item"] {
        display: none;
    }
    .tab_content {
        display: none;
        padding:20px 0 0 10px;
        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;
    }

    .order-detail{
        width: 21%;
        padding-left: 10px;
    }
    .order-detail .btn{
        font-weight: normal;
        margin-top: 5px;
        background: url(../img/icn_pdf.png) no-repeat 12px 7px;
        background-size: 16px auto;
        padding-left: 36px;
    }
    .order-btn{
        width: 22%;
        text-align: right;
    }

    /*/----------FORM----------/*/
    ul.form-list{
        margin: 20px 0;
        border-top: 1px solid #d7deea;
    }
    ul.form-list li{
        padding: 15px 10px;
        border-bottom: 1px solid #d7deea;
    }
    .form-name{
        font-weight: bold;
        margin-bottom: 10px;
    }
    .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{
        display: table;
        width: 100%;
    }
    .form-inline div{
        display: table-cell;
        padding-right: 20px;
        width: 50%;
    }
    .form-inline div div{
        padding-right: 0;
        width: auto;
    }
    .f-cmmt{
        font-size: 13px;
        color: #9ba0b7;
    }

    /*form reset*/
    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;
    }

    /*form setting*/
    .w-full{
        width: 100%;
    }
    input[type='text'], input[type='password']{
        padding: 5px;
        border-radius: 5px;
        border: 1px solid #bfc5d4;
        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;
    }
    input::-webkit-input-placeholder{
        color: #666;
    }
    input:-ms-input-placeholder{
        color: #666;
    }
    input::placeholder{
        color: #666;
    }
    /*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;
    }

    /*button*/
    .form-btn{
        text-align: center;
    }
    .form-btn button{
        display: inline-block;
        margin: 0 15px;
    }

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

    .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;
        letter-spacing: 1px;
    }

    .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-white:hover{
        color: #5f688d;
    }

    .btn-cart{
        background: #d25a2e url(../img/icn_cart.png) no-repeat 14px 10px;
        background-size: 18px auto;
    }
    .btn-mypage{
        background: #e4b124 url(../img/icn_mypage.png) no-repeat 14px 12px;
        background-size: 16px auto;
    }

    a.btn-item-detail{
        padding: 8px 25px 8px 15px;
        position: relative;
    }
    a.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-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;
    }

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

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

    /*/----------FOOTER----------/*/
    .footer-logo{
        float: left;
        font-size: 12px;
    }
    .footer-logo img{
        height: 30px;
    }
    .footer-nav{
        float: right;
        text-align: right;
    }
    .footer-nav li{
        float: left;
        padding: 0 15px;
        border-right: 1px solid #707693;
    }
    .footer-nav li:last-child{
        border-right: none;
        padding-right: 0;
    }
    .footer-nav li a{
        text-decoration: none;
        color: #fff;
    }
    footer .inner{
        position: relative;
    }
    .copyright{
        position: absolute;
        font-size: 12px;
        color: #aeb1c0;
        bottom: 0;
        right: 0;
    }
    .page-top{
        width: 50px;
        height: 50px;
        position: fixed;
        right: 20px;
        bottom: 40px;
        background: #dfa800;
        opacity: 0.6;
        border-radius: 50%;
    }
    .page-top a{
        display: block;
        background: url(../img/icn_pagetop.png) no-repeat center center;
        background-size: 20px 20px;
        width: 50px;
        height: 50px;
    }

}