@charset "UTF-8";

body #contents .ocContainer {
    width: 100%
}
@media (max-width:705px) {
    body #contents .ocContainer {
        margin: 30px auto;
        /*padding: 0 20px*/
    }
}
@media (min-width:706px) {
    body #contents .ocContainer {
        max-width: 1050px;
        padding: 0 10px;
        margin: 80px auto 0
    }
}
body #contents .ocContainer .ocContainer-icon {
    margin: 0 auto;
    display: block;
    max-width: 70px
}
@media (max-width:705px) {
    body #contents .ocContainer .ocContainer-icon {
        width: 20%
    }
}
@media (min-width:706px) {
    body #contents .ocContainer .ocContainer-icon {
        width: 7%
    }
}
body #contents .ocContainer .ocContainer-icon img {
    width: 100%
}
@media (max-width:705px) {
    body #contents .ocContainer .ocTitle {
        margin: 9px auto 0
    }
}
@media (min-width:706px) {
    body #contents .ocContainer .ocTitle {
        margin: 10px auto 0
    }
}
body #contents .ocContainer .ocTitle picture {
    display: block;
    margin: 0 auto
}
@media (max-width:705px) {
    body #contents .ocContainer .ocTitle picture {
        width: 67%;
        max-width: 238px
    }
}
@media (min-width:706px) {
    body #contents .ocContainer .ocTitle picture {
        width: 37%;
        max-width: 386px
    }
}
body #contents .ocContainer .ocTitle picture img {
    width: 100%
}
body #contents .ocContainer .ocTabList {
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}
@media (max-width:705px) {
    body #contents .ocContainer .ocTabList {
        margin-top: 28px
    }
}
@media (min-width:706px) {
    body #contents .ocContainer .ocTabList {
        margin-top: 40px
    }
}
@media (max-width:705px) {
    body #contents .ocContainer .ocTabList li {
        margin-bottom: 15px
    }
}
body #contents .ocContainer .ocTabList li.is-active button {
    border: 2px solid #009dff;
    color: #009dff
}
body #contents .ocContainer .ocTabList li+li {
    margin-left: 6px
}
body #contents .ocContainer .ocTabList button {
    border: 2px solid #d6dbe2;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    color: #333;
    padding: 10px;
    border-radius: 30px
}
@media (max-width:705px) {
    body #contents .ocContainer .ocTabList button {
        font-size: 12px;
        min-width: 74px
    }
}
@media (min-width:706px) {
    body #contents .ocContainer .ocTabList button {
        font-size: 14px;
        min-width: 86px
    }
}
@media (min-width:706px) {
    body #contents .ocContainer .ocTabList button:hover {
        transition: .3s;
        opacity: .7
    }
}
@media (max-width:705px) {
    body #contents .ocContainer .ocColumn {
        margin: 30px 0 0
    }
}
@media (min-width:706px) {
    body #contents .ocContainer .ocColumn {
        margin: 40px 0 0
    }
}
body #contents .ocContainer .ocColumn .ocColumn-wrap {
    display: block
}

body #contents .ocContainer .ocColumn .ocColumn-list {
    display: flex;
    flex-wrap: wrap
}
@media (max-width:705px) {
    body #contents .ocContainer .ocColumn .ocColumn-list li {
        width: 49%
    }
    body #contents .ocContainer .ocColumn .ocColumn-list li:nth-child(even) {
        margin-left: 2%
    }
    body #contents .ocContainer .ocColumn .ocColumn-list li:nth-child(n+3) {
        margin-top: 30px
    }
}
@media (min-width:706px) {
    body #contents .ocContainer .ocColumn .ocColumn-list li {
        width: 23.5%;
        margin-right: 1.5%
    }
    body #contents .ocContainer .ocColumn .ocColumn-list li:nth-child(4n) {
        margin-right: 0
    }
    body #contents .ocContainer .ocColumn .ocColumn-list li:nth-child(n+5) {
        margin-top: 30px
    }
}

body #contents .ocInfoContainer {
    width: 100%;
    background-color: #fdfeea
}
@media (max-width:705px) {
    body #contents .ocInfoContainer {
        margin: 60px auto 0;
        padding: 40px 00
    }
}
@media (min-width:706px) {
    body #contents .ocInfoContainer {
        margin: 98px auto 0;
        padding: 0
    }
}
@media (min-width:706px) {
    body #contents .ocInfoContainer .ocInfoContainer-inner {
        max-width: 1050px;
        padding: 60px 10px 20px;
        margin: 0 auto
    }
}
@media (max-width:705px) {
    body #contents .ocInfoContainer .ocInfoContainer-inner {
        padding: 0 1.5%;
    }
}

body #contents .ocInfoContainer .ocInfoContainer-icon {
    margin: 0 auto;
    display: block;
    max-width: 48px
}
@media (max-width:705px) {
    body #contents .ocInfoContainer .ocInfoContainer-icon {
        width: 14%
    }
}
@media (min-width:706px) {
    body #contents .ocInfoContainer .ocInfoContainer-icon {
        width: 5%
    }
}
body #contents .ocInfoContainer .ocInfoContainer-icon img {
    width: 100%
}
@media (max-width:705px) {
    body #contents .ocInfoContainer .ocInfoTitle {
        margin: 9px auto 0
    }
}
@media (min-width:706px) {
    body #contents .ocInfoContainer .ocInfoTitle {
        margin: 10px auto 0
    }
}
body #contents .ocInfoContainer .ocInfoTitle picture {
    display: block;
    margin: 0 auto
}
@media (max-width:705px) {
    body #contents .ocInfoContainer .ocInfoTitle picture {
        width: 67%;
        max-width: 238px
    }
}
@media (min-width:706px) {
    body #contents .ocInfoContainer .ocInfoTitle picture {
        width: 41%;
        max-width: 425px
    }
}
body #contents .ocInfoContainer .ocInfoTitle picture img {
    width: 100%
}
@media (max-width:705px) {
    body #contents .ocInfoContainer .ocInfoList {
        margin: 30px auto 0
    }
}
@media (min-width:706px) {
    body #contents .ocInfoContainer .ocInfoList {
        margin: 40px auto 0;
        display: flex;
        flex-wrap: wrap
    }
}
@media (max-width:705px) {
    body #contents .ocInfoContainer .ocInfoList li+li {
        margin-top: 14px
    }
}
@media (min-width:706px) {
    body #contents .ocInfoContainer .ocInfoList li {
        width: 49%
    }
    body #contents .ocInfoContainer .ocInfoList li:nth-child(even) {
        margin-left: 2%
    }
    body #contents .ocInfoContainer .ocInfoList li:nth-child(n+3) {
        margin-top: 20px
    }
}
body #contents .ocInfoContainer .ocInfoList a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    text-decoration: none;
    border-radius: 6px;
    border: 2px solid #aadaf8;
    position: relative;
    box-shadow: 0 3px 0 rgba(16, 121, 186, .15)
}
@media (max-width:705px) {
    body #contents .ocInfoContainer .ocInfoList a {
        padding: 11px 30px 11px 11px
    }
}
@media (min-width:706px) {
    body #contents .ocInfoContainer .ocInfoList a {
        padding: 12px 9% 12px 12px
    }
}
body #contents .ocInfoContainer .ocInfoList a:after {
    content: "";
    position: absolute;
    width: 12px;
    height: 10px;
    right: 15px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    background: url(https://manabi-contents.benesse.ne.jp/noauth/_sharedZ_New/img/icon/ico-arrow-blue.svg) center no-repeat;
    background-size: contain
}
@media (min-width:706px) {
    body #contents .ocInfoContainer .ocInfoList a:hover {
        transform: translateY(3px);
        box-shadow: 0 0 0 rgba(16, 121, 186, .15);
        text-decoration: underline;
        color: #009dff
    }
}
body #contents .ocInfoContainer .ocInfoList a figure {
    width: 55%
}
body #contents .ocInfoContainer .ocInfoList a figure img {
    width: 100%
}
body #contents .ocInfoContainer .ocInfoList a p {
    padding: 0;
    width: 41%;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5
}

body #contents .ocQaContainer {
    width: 100%;
    background-color: #fdfeea
}
@media (max-width:705px) {
    body #contents .ocQaContainer {
        padding: 56px 0 60px
    }
}
@media (min-width:706px) {
    body #contents .ocQaContainer {
        padding: 60px 0 60px
    }
}
@media (min-width:706px) {
    body #contents .ocQaContainer .ocQaContainer-inner {
        max-width: 1050px;
        padding: 0 10px;
        margin: 0 auto
    }
}
@media (max-width:705px) {
    body #contents .ocQaContainer .ocQaContainer-inner {
        padding: 0 1.5%;
    }
}
body #contents .ocQaContainer .ocQaContainer-icon {
    margin: 0 auto;
    display: block;
    max-width: 45px
}
@media (max-width:705px) {
    body #contents .ocQaContainer .ocQaContainer-icon {
        width: 12%
    }
}
@media (min-width:706px) {
    body #contents .ocQaContainer .ocQaContainer-icon {
        width: 4.3%
    }
}
body #contents .ocQaContainer .ocQaContainer-icon img {
    width: 100%
}
@media (max-width:705px) {
    body #contents .ocQaContainer .ocQaTitle {
        margin: 9px auto 0
    }
}
@media (min-width:706px) {
    body #contents .ocQaContainer .ocQaTitle {
        margin: 10px auto 0
    }
}
body #contents .ocQaContainer .ocQaTitle picture {
    display: block;
    margin: 0 auto
}
@media (max-width:705px) {
    body #contents .ocQaContainer .ocQaTitle picture {
        width: 67%;
        max-width: 238px
    }
}
@media (min-width:706px) {
    body #contents .ocQaContainer .ocQaTitle picture {
        width: 35%;
        max-width: 362px
    }
}
body #contents .ocQaContainer .ocQaTitle picture img {
    width: 100%
}
@media (max-width:705px) {
    body #contents .ocQaContainer .ocQaList {
        margin: 30px 0 0
    }
}
@media (min-width:706px) {
    body #contents .ocQaContainer .ocQaList {
        margin: 40px 0 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center
    }
}
body #contents .ocQaContainer .ocQaList li {
    background-color: #fff;
    border-radius: 6px;
    overflow: hidden
}
@media (max-width:705px) {
    body #contents .ocQaContainer .ocQaList li+li {
        margin-top: 14px
    }
}
@media (min-width:706px) {
    body #contents .ocQaContainer .ocQaList li {
        width: 32%
    }
    body #contents .ocQaContainer .ocQaList li+li {
        margin-left: 2%
    }
    body #contents .ocQaContainer .ocQaList li:nth-child(4) {
        margin-left: 0
    }
    body #contents .ocQaContainer .ocQaList li:nth-child(n+4) {
        margin-top: 12px
    }
}
body #contents .ocQaContainer .ocQaList .ocQaList-head {
    text-align: center;
    padding: 20px 0 28px
}
body #contents .ocQaContainer .ocQaList .ocQaList-head img {
    width: 42px
}
body #contents .ocQaContainer .ocQaList .ocQaList-head span {
    display: block;
    font-weight: 700;
    font-size: 18px;
    margin-top: 10px;
    line-height: 1.5
}
body #contents .ocQaContainer .ocQaList .ocQaList-body {
    background-color: #e6fbff;
    padding: 20px;
    position: relative;
    height: 100%
}
body #contents .ocQaContainer .ocQaList .ocQaList-body:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 17px 16px 17px;
    border-color: transparent transparent #e6fbff transparent;
    top: -16px;
    left: 50%;
    transform: translateX(-50%)
}
body #contents .ocQaContainer .ocQaList .ocQaList-body span {
    display: block;
    text-align: center;
    font-weight: 700;
    color: #009dff;
    font-size: 18px;
    line-height: 1.5
}
body #contents .ocQaContainer .ocQaList .ocQaList-body p {
    padding: 0;
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: #333
}

#contents .ocContainer .label, #contents .ocContainers .label {
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    color: #009dff;
    background-color: #e5f8fd;
    line-height: 1;
    border-radius: 4px;
    padding: 4px 10px
}
#contents .ocContainer .thumbnailLink .lead, #contents .ocContainers .thumbnailLink .lead {
    font-size: 16px
}
#contents .ocContainer .thumbnailLink .label, #contents .ocContainer .thumbnailLink .label {
    margin: 10px 0 0
}
#contents .ocContainer .thumbnailLink .lead, #contents .ocContainers .thumbnailLink .lead {
    display: block;
    font-weight: bold;
    line-height: 1.5;
    margin-top: 10px
}
#contents .ocContainer .ocColumn ul li a.thumbnailLink {
    text-decoration: none;
}