@charset "utf-8";
/* CSS Document */

    .sub-heading_banner h3.headline {
        font-size: 18px;
    }

    .bag-type-content {
        margin-top: 30px;
    }

    .bag-type-content h2 {
        color: #FC9829;
    }

    .bag-type-content .bag-type-menu ul {
        display: flex;
        flex-wrap: wrap;
    }

    .bag-type-content .bag-type-menu li {
        background: #EBEBEB;
        color: #333333;
        font-weight: bold;
        text-align: center;
        width: 49%;
        padding: 15px 0;
        font-size: 16px;
        border-right: 0.5px solid #333333;
        border-left: 0.5px solid #333333;
        cursor: pointer
    }

    .bag-type-menu li:hover {
        color: #fc9829
    }

    .bag-type-content .bag-type-menu li:first-child {
        border-right: 0.5px solid #333333;
        border-left: none;
    }

    .bag-type-content .bag-type-menu li:last-child {
        border-right: none;
        border-left: 0.5px solid #333333;
    }

    .bag-type-content .bag-type-menu li.is-select {
        background: #FFEFD4;
        color: #FC9829;
        position: relative;
        border-color: #FC9829;
    }

    .bag-type-content .bag-type-menu li.is-select::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -15px;
        border: 15px solid transparent;
        border-top: 15px solid #FFEFD4;
    }

    .bag-type-wrap {
        margin-top: 20px;
    }

    .bag-type-wrap .head-text {
        font-size: 16px;
        margin: auto;
        font-weight: bold;
    }

    .tab-headline {
        color: #fc9829;
        border-bottom: 1px solid #eee;
        font-size: 1pc;
    }

    .bag-type-wrap ul {
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
    }

    .bag-type-wrap ul li {
        display: flex;
        width: 31%;
        border: 1px solid #f0f0f0;
        padding: 15px;
        margin: 1%;
    }

    .bag-type-wrap ul li a {
        display: flex;
        width: 100%;
    }

    .item-3 ul li,
    .bag-type-wrap ul li {
        position: relative;
    }

    .item-3 ul li::before {
        content: '';
        display: inline-block;
        width: 15px;
        height: 15px;
        background-image: url(/html/plugin/Exp/assets/images/cp/tutorial/btnarrow_gr.png);
        background-size: contain;
        background-repeat: no-repeat;
        vertical-align: middle;
        position: absolute;
        right: 5%;
        top: 43%;
    }

    .item-3 ul li img {
        margin-right: 10px;
    }

    .item-3 ul li:first-child,
    .item-3 ul li:nth-child(4),
    .item-3 ul li:nth-child(7) {
        margin-left: 0;
    }

    .item-3 ul li:nth-child(3),
    .item-3 ul li:nth-child(6) {
        margin-right: 0;
    }

    .bag-type-des {
        margin-left: 5px;
    }

    .bag-type-des p {
        margin-top: 10px;
        font-size: 14px;
    }

    .isSP {
        display: none;
    }

    .isPC {
        display: block;
    }

    @media only screen and (max-width: 667px) {
        .isSP {
            display: block;
        }

        .isPC {
            display: none;
        }

        .bag-type-content .bag-type-menu li,
        .bag-type-content .bag-type-menu li:first-child,
        .bag-type-content .bag-type-menu li:last-child {
            width: 50%;
            font-size: 12px;
            flex-wrap: wrap;
            border: 1px solid transparent;
            border-bottom: 3px solid #333333;
            margin: 0;
            position: relative;
        }

        .bag-type-content .bag-type-menu ul {
            justify-content: space-between;
        }

        .bag-type-content .bag-type-menu li.is-select::before {
            content: none;
        }

        .bag-type-content .bag-type-menu li.is-select:first-child,
        .bag-type-content .bag-type-menu li.is-select:last-child {
            border-bottom: 3px solid #FC9829;
        }

        .bag-type-content .bag-type-menu li:after {
            content: "\f107";
            font-family: "Font Awesome 5 Free";
            display: inline-block;
            width: 10px;
            height: 10px;
            position: absolute;
            right: 5%;
            top: 31%;
        }

        .bag-type-wrap ul li {
            display: flex;
            width: 100%;
            border: 1px solid #f0f0f0;
            padding: 10px;
            margin: 1%;
        }

        .bag-type-wrap h3 {
            font-size: 14px;
            margin: auto auto auto 5px;
        }

        .sub-heading_banner .figure,
        .sub-heading_banner .headline {
            display: block;
            height: auto;
            width: 100%;
            font-size: 14px;
            margin-bottom: 10px;
            padding-left: 0;
        }

        .sub-heading_banner {
            padding: 0;
        }

        .sub-heading_banner .figure {
            width: 100%;
        }

    }

    .generic-heading {
        border-bottom: 1px solid #eee;
        margin: 40px 0 20px 0;
    }

    .generic-subheading {
        margin: 20px 0 50px 0;
    }

    .generic-subheading h4 {
        margin: 20px 0;
    }

    .generic-heading_headline {
        font-size: 24px;
        color: #FF9F1A;
    }

    .generic-subheading_headline {
        border-bottom: none;
        color: #FF9F1A;
        font-size: 18px;
        margin-bottom: 15px;
    }

    .border-heading {
font-size:24px;
        color: #FF9F1A;
        margin: 0 0 20px 0;
        padding: 0px 0 10px 0px;
    }

    .base-column {
        margin: 0 0 50px 0;
    }

    .base-column .gazo_commentary .headline {
        height: 2.5em;
        font-size: 14px;
    }

    .point .column .figure {
        width: 25%;
    }

    .point .column .comment {
        width: 75%;
font-size:20px;
    }

    .gazo_figure {
        border: 1px solid #eee;
    }

    .font-s {
        font-size: 16px;
    }

    .btn_category {
        margin-bottom: 100px;
    }

    @media only screen and (max-width:768px) {
        .border-heading {
            font-size: 16px;
        }
        .point .column .figure {
            width: 100%;
        }

        .point .column .comment {
            width: 100%;
            font-size: 14px;
        }
        

        .btn_category {
            margin-bottom: 50px;
        }

    }

    .img-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .img-box ul {
        width: 49%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .img-box li,
    .img-box p {
        width: 49%;
        font-size: 16px;
    }
    .text-link {
        color: #5B9BD5 !important;
        text-decoration: underline !important;
    }

    .isSP {
        display: none !important;
    }

    @media screen and (max-width: 667px) {
        .isSP {
            display: block !important;
        }

        .img-box {
            display: block;
        }

        .img-box ul {
            margin-bottom: 10px;
            width: 100%;
        }

        .img-box p {
            width: 100%;
        }

        .ac-body {
            overflow: scroll hidden;
        }

        .middle-category-page-ranking.accordion {
            position: relative;
        }

        .slider-item {
            display: flex;
        }

        .sp-panel.col5 {
            width: 800px;
            justify-content: flex-start;
            overflow: scroll hidden;
            flex-wrap: nowrap;
        }

        .slick-next {
            display: block;
            width: 30px;
            height: 30px;
            top: 50%;
            right: 0;
            z-index: 99;
            padding: 8px 10px 0 10px;
        }

        .slick-next:before {
            font-size: 23px;
            color: #d71618;
        }

    }

    .tutorial-box ul {
        display: flex;
        flex-wrap: wrap;
        margin: 30px 0;
    }

    .tutorial-box li {
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        margin-right: 17px;
        width: calc(33% - 17px);
        padding: 15px;
        border: 3px solid #F2A127;
        border-radius: 5px;
        position: relative;
        transition: all 0.25s ease-out;
    }

    .tutorial-box li:hover {
        border: 3px solid transparent;
        background: #F2A127;
    }

    .tutorial-box li:hover:after {
        color: #FFF;
    }

    .tutorial-box li:hover p {
        color: #fff;
    }

    .tutorial-box a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .tutorial-box li:after {
        content: '\f105';
        position: absolute;
        font-size: 24px;
        font-weight: bold;
        color: #F2A127;
        font-family: "Font Awesome 5 Free";
        font-display: swap;
        right: 5%;
        top: auto;
    }

    @media only screen and (max-width:768px) {
        .tutorial-box li {
            width: 100%;
            margin: 0;
            margin-top: 17px;
            height: 70px;
            padding: 5px;
        }

        .tutorial-box li img {
            width: 55px;
        }

        .tutorial-box li:after {
            top: 15px;
        }

    }