@charset "utf-8";
/* font-color */
.text-lightgreen {
    color: #A7AF48;
}
.text-lightgray {
    color: #666666;
}
/* //font-color */

/* background-color */
.bg-lightyellow {
    background-color: #F1F5D9;
}
.bg-lightblue {
    background-color: #c3e2e2;
}
.bg-green {
    background-color: #91B71C;
}
.bg-lightgray {
    background-color: #F4F5F5;
}
/* //background-color */

/* border-radius */
.br-5px {
    border-radius: 5px;
}
.br-30px {
    border-radius: 30px;
}
/* //border-radius */

/* line-height */
.lh-1_454545454545455 {
    line-height: 1.454545454545455;
}
.lh-2_0625 {
    line-height: 2.0625;
}
.lh-2_125 {
    line-height: 2.125;
}
/* //line-height */

/* 余白 */
.pt-24px {
    padding-top: 24px;
}
.mt-18px {
    margin-top: 18px;
}
.ttl-pattern_4.mb-8px {
    margin-bottom: 8px;
}
.ttl-pattern_4.mb-24px {
    margin-bottom: 24px;
}
/* //余白 */

/* common */
.container-knowledge-hint-inner {
    width: 87%;
    margin: 0 auto;
}
.knowledge-hint-py {
    padding-top: 39px;
    padding-bottom: 35px;
}
@media all and (min-width: 992px) {
    .container-knowledge-hint-inner {
        width: 99%;
    }
}
/* //common */

/* ブロックエディタエリア用 */
.knowledge-contents .blockeditor-area p {
    line-height: 2.125;
}
/* //ブロックエディタエリア用 */

/* fv */
.fv-wrap {
    padding: 35px 0 66px;
}
.box-white-outer {
    position: relative;
    z-index: 1;
}
.box-white-outer::before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: #C4CB75;
    border-radius: 30px;
    position: absolute;
    top: 11px;
    left: 0;
    z-index: -1;
}
.box-white {
    background-color: #fff;
    padding: 8.7vw 8vw 5.4vw;
}
.fv-ttl {
    font-size: 2.1875rem;
    margin-bottom: 22px;
    text-align: center;
}
.fv-p {
    margin-top: 18px;
}


@media all and (min-width: 576px) {
    .box-white {
        padding: 29px 31.5px 26px;
    }
}
@media all and (min-width: 768px) {
}
@media all and (min-width: 992px) {
    .fv-wrap {
        padding: 0 0 66px;
    }
    .fv-inner {
        margin-top: 55px;
    }
    .fv-ttl {
        text-align: left;
    }
    .box-white {
        padding: 26px 50px 24px;
        /* display: flex; */
    }
    .box-white-inner {
        margin-left: -50px;
        margin-right: -50px;
    }
    .fv-txt {
        width: 56%;
    }
    .box-white-inner .img {
        width: 44%;
    }
    .fv-txt,
    .box-white-inner .img {
        padding: 0 50px;
    }
}
@media all and (min-width: 1200px) {
    .fv-txt {
        max-width: 458px;
    }
    .box-white-inner .img {
        max-width: 416px;
    }
}
@media all and (min-width: 1400px) {
    .box-white-inner {
        margin-left: -114px;
        margin-right: -114px;
    }
    .fv-txt {
        max-width: 586px;
    }
    .box-white-inner .img {
        max-width: 544px;
    }
    .fv-txt,
    .box-white-inner .img {
        padding: 0 114px;
    }
}
/* //fv */

/* tab */
.tab-row {
    display: flex;
    margin-left: -5px;
    margin-right: -5px;
}
.tab-wrap {
    width: 50%;
    padding: 0 5px;
    max-width: 493px;
}
.tab {
    border-radius: 20px 20px 0 0;
    padding: 9.5px 0;
    position: relative;
    font-size: 1.25rem;
    line-height: 1.2;
    width: 100%;
    border: none;
}
.tab.active {
    padding: 12.5px 0 23.5px;
}
.tab.active::before {
    content: '';
    width: 15px;
    height: 10px;
    background: url(../images/knowledge-hint/tab-arrow-white.svg) no-repeat center center/contain;
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
}
.tab-yougo {
    background-color: #c3e2e2;
    color: #666666;
}
.tab-yougo.active {
    background-color: #7CB7BB;
    color: #fff;
}
.tab-arekore {
    background-color: #E4EF9F;
    color: #666666;
}
.tab-arekore.active {
    background-color: #91B71C;
    color: #fff;
}
.tab-contents {
    display: none;
}
.tab-contents.active {
    display: block;
}
.Q-box.q-box-has-arrow::before {
    content: none;
}
.FAQ-items .Q-box.q-box-has-arrow::after {
    transform: translateY(-50%) rotate(45deg);
    right: 20px;
}
.FAQ-items.is-opened .Q-box.q-box-has-arrow::after {
    transform: translateY(-50%) rotate(135deg);
}
.FAQ-wrap {
    border-top: 2px solid #ECEFF3;
}
.tab-content .FAQ-wrap .FAQ-items {
    border: none;
}
.tab-content .FAQ-wrap .FAQ-items:not(:last-of-type) {
    margin-bottom: 12px;
}
.A-box-inner .img {
    max-width: 305px;
}
.tab-contents-yougo .A-box-inner .img {
    margin: 0 auto 20px;
}
.tab-contents-arekore .A-box-inner .img {
    margin: 0 auto 13px;
}
.FAQ-wrap details .Q-box-inner {
    display: block;
    padding: 12px 20px 14px 73px;
}
.FAQ-wrap details .Q-box-inner::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.knowledge-contents .wp-block-group {
    margin-bottom: 3rem;
}
.icon-wrap {
    text-align: center;
    width: 30px;
    height: 34px;
    margin-right: .75rem;
}
.icon-wrap img {
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
    width: 100%;
    height: 100%;
}
.yougo-ttl-wrap {
    margin: 0 0 12px;
}
.yougo-ttl-wrap2 {
    margin: 20px 0 7px;
}
.yougo-ttl {
    color: #052F6F;
}
.yougo-index {
    width: 46px;
    height: 46px;
    display: inline-block;
    border: 1px solid #052F6F;
    border-radius: 50%;
    position: relative;
    margin-right: 9px;
}
.yougo-index span {
    font-size: 1.625rem;
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.q-box-ttl {
    font-size: 1.375rem;
}
.A-box {
    padding-bottom: 6px;
}
.A-box .A-box-inner {
    padding: 8px 0 25px 0;
}
.tab-contents-yougo .A-box {
    padding-top: 14px;
}
.tab-contents-arekore .A-box {
    padding-top: 18px;
}
.A-box .close {
    position: relative;
    width: fit-content;
    margin: 0 auto;
    padding-top: 14px;
}
.A-box .close::before {
    content: '';
    width: 12px;
    height: 14px;
    background: url(../images/knowledge-hint/arrow-up.svg) no-repeat center center/contain;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
}
.arekore-span {
    margin-bottom: 42px;
}
.arekore-span2 {
    margin-bottom: 24px;
}
.hide {
    display: none;
}
.txt-cont p {
    line-height: 2.125;
    font-weight: 400;
    margin-bottom: 0;
}
.tab-contents-arekore .button-close {
    padding-top: 8px;
}
.knowledge-word.blockeditor-area h4 {
    border-left: none;
    padding-left: 0;
    line-height: 1.7;
}
.knowledge-word.blockeditor-area h4:first-letter {
    border: 1px solid #052F6F;
    border-radius: 50%;
    padding: 0 7px 3px;
    margin-right: 10px;
    font-weight: 400;
}
.knowledge-contents .A-box a {
  text-decoration: underline;
}
@media all and (min-width: 576px) {
}
@media all and (min-width: 768px) {
}
@media all and (min-width: 992px) {
    .knowledge-hint-py {
        padding-top: 56px;
        padding-bottom: 49px;
    }
    .tab {
        font-size: 1.625rem;
        padding: 14.4px 0;
    }
    .tab.active {
        padding: 15.9px 0 32.9px;
    }
    .tab.active::before {
        bottom: 16px;
    }
    .Q-box .Q-box-inner {
        padding: 15px 26px 15px 29px;
    }
    .tab-contents-yougo .A-box-inner .img,
    .tab-contents-arekore .A-box-inner .img {
        padding: 0 31.5px;
        width: 35.22%;
        margin: 0;
        max-width: 395px;
    }
    .yougo-index span {
        font-size: 1.625rem;
    }
    .q-box-ttl {
        font-size: 1.625rem;
    }
    .yougo-ttl-wrap {
        margin: 0 0 12px;
    }
    .tab-content .FAQ-wrap .FAQ-items:not(:last-of-type) {
        margin-bottom: 18.7px;
    }
    .A-box {
        padding-bottom: 57.4px;
        padding-left: 30px;
        padding-right: 30px;
    }
    .A-box .A-box-inner {
        padding: 12px 0 36px 0;
    }
    .tab-contents-yougo .button-close {
        padding-top: 8px;
    }
    .tab-contents-arekore .button-close {
        padding-top: 14px;
    }
    .icon-wrap {
        width: 35px;
        height: 40px;
        margin-right: 1.25rem;
    }
}
@media all and (min-width: 1200px) {
}
@media all and (min-width: 1400px) {
}
@media all and (max-width: 389px) {
    .tab {
        font-size: 1.1875rem;
    }
}
@media all and (max-width: 374px) {
    .tab {
        font-size: 0.9375rem;
    }
    .q-box-ttl {
        font-size: 1.25rem;
    }
}
/* //tab */