@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/* 全体設定 */
html {
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    /* Prevent adjustments of font size after orientation changes in iOS */
}

body {
    font-size: 1.5rem;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    /* 行間 */
    letter-spacing: 0;
    /* 字間(em) */
    color: #1C1C1C;
}

.l-login__form {

    input,
    optgroup,
    select,
    textarea {
        font-size: 1.5rem;
        font-family: "Noto Sans JP", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        outline: none;
        border: 0;
        box-sizing: border-box;
        height: 2.9rem;
        padding: .5rem;
        line-height: 2.9rem;
        /* 行間 */
        letter-spacing: 0;
        /* 字間(em) */
    }
}

.c-entry__item a {
    background-color: transparent;
    text-decoration: none;
    color: inherit;
}

textarea {
    height: auto;
    line-height: 1.32;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
}

/* ヘッダー */

.l-header {
    padding: 1.0rem 3.0rem;
}

.l-header__inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.l-header__contact a {
    text-decoration: none;
}

.l-header__contact:hover {
    text-decoration: underline 2px #0060B2;
    text-underline-offset: 0.5rem;
}

.l-header__contact::before {
    content: '';
    width: 1.7rem;
    height: 1.3rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: .5rem;
    background: url(../img/icon_mail.svg) no-repeat center center / contain;
}

/* グローバルメニュー・ハンバーガーメニュー */

.l-menu__list {
    display: flex;
    gap: 2rem;
}

@media screen and (max-width: 767px) {
    .l-menu__list {
        display: none;
    }
}

.l-menu__item {
    position: relative;
}

.l-menu__item.op a::before {
    content: '';
    width: 1.7rem;
    height: 1.3rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: .5rem;
    background: url(../img/icon_mail.svg) no-repeat center center / contain;
}

.l-menu__item a {
    text-decoration: none;
    display: block;
    padding: 1.0rem 0;
    color: #000;
    /* background: #ddd; */
}

.l-menu__item a:hover {
    text-decoration: underline 0.12rem #0060B2;
    text-underline-offset: 0.5rem;
}

.l-menu__item .sub {

    /* padding: 0.1rem 0; */
    border-radius: .5rem;
    overflow: hidden;
    position: absolute;
    z-index: 100;
    width: 20rem;
    display: none;
}

.l-menu__item .sub.show {
    display: block;
}

.l-menu__item .sub .sub-inner {
    &:not(:last-child) {
        border-bottom: .1rem solid #fff;
    }
}

.l-menu__item .sub .sub-inner a {
    padding: 1rem 1.5rem;
    display: block;
    background: #D8E7F2;
}

.l-menu__item .sub .sub-inner a::before {
    content: '';
    width: 1.7rem;
    height: 1.3rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: .5rem;
    background: url(../img/menu_sub_triangle.svg) no-repeat center center / contain;
}

.l-hamburger__btn {
    display: none;
}

@media screen and (max-width: 767px) {
    .l-hamburger__btn {
        display: block;
    }
}

/*下層ページ用共通ヘッダー*/

.l-container__wrap {
    width: 100%;
    background-color: #205DAC;
    padding: 1.2rem 3.0rem;
}

.l-container__inner {
    max-width: 93.4rem;
    color: #fff;
    display: flex;
    margin: auto;
    align-items: center;
    font-size: 1.4rem;
    font-weight: 700;
}


@media screen and (max-width: 767px) {
    .l-container__inner {
        display: block;
        width: 100%;
        margin: 0 auto;
    }
}

.l-container__inner-number {
    padding-right: 4.3rem;
}

@media screen and (max-width: 767px) {
    .l-container__inner-number {
        padding-bottom: 1rem;
    }
}

.l-container__inner-number::before {
    content: '';
    width: 3.05rem;
    height: 2.11rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: 1rem;
    position: relative;
    top: -0.1rem;
    background: url(../img/your_num-icon.svg) no-repeat center center / contain;
}

.l-container__inner-timelimit::before {
    content: '';
    width: 2.52rem;
    height: 2.52rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: 1rem;
    position: relative;
    top: -0.1rem;
    background: url(../img/time-icon.svg) no-repeat center center / contain;
}

.l-container__attention {
    width: 100%;
    background-color: #FBEEEE;
    border: solid 1px #E71D36;
    /* padding: 1.3rem 3.0rem; */
    position: relative;
    padding: 0 3.0rem;
}

.l-container__warning {
    width: 100%;
    background-color: #fbfbee;
    border: solid 1px #e7da1d;
    /* padding: 1.3rem 3.0rem; */
    position: relative;
    padding: 0 3.0rem;
}

@media screen and (max-width: 767px) {
    .l-container__attention {
        padding: 0;
    }
}

.l-container__attention-inner {
    max-width: 93.4rem;
    display: flex;
    align-items: center;
    margin: 0 auto;
    background: #E71D36;
    justify-content: space-between;
}

.l-container__warning-inner {
    max-width: 93.4rem;
    display: flex;
    align-items: center;
    margin: 0 auto;
    background: #e7e41d;
    justify-content: space-between;
}

@media screen and (max-width: 767px) {
    .l-container__attention-inner {
        display: block;
        width: 100%;
    }
}

.l-container__attention-title {
    background-color: #E71D36;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    padding: 1.3rem 1.8rem 1.3rem 0;
    position: relative;
    z-index: 2;
}

.l-container__warning-title {
    background-color: #e4e70c;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 14px;
    color: #595757;
    padding: 1.3rem 1.8rem 1.3rem 0;
    position: relative;
    z-index: 2;
}

@media screen and (max-width: 767px) {
    .l-container__attention-title {
        padding: 1rem 0;
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

.l-container__attention-inner::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    display: block;
    width: max(3.0rem, calc((100% - 93.4rem) / 2));
    height: 100%;
    background-color: #E71D36;
    /* background: #ddd; */
    z-index: 1;
}

.l-container__warning-inner::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    display: block;
    width: max(3.0rem, calc((100% - 93.4rem) / 2));
    height: 100%;
    background-color: #e4e71d;
    /* background: #ddd; */
    z-index: 1;
}

@media screen and (max-width: 767px) {
    .l-container__attention-inner::before {
        display: none;
    }
}

.l-container__attention-text {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 1.4rem;
    color: #595757;
    padding: 1.3rem 0 1.3rem 1.8rem;
    background: #FBEEEE;
    width: calc(100% - 12rem);
}

.l-container__warning-text {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 1.4rem;
    color: #595957;
    padding: 1.3rem 0 1.3rem 1.8rem;
    background: #fbfbee;
    width: calc(100% - 12rem);
}

@media screen and (max-width: 767px) {
    .l-container__attention-text {
        padding: 1.5rem 3.0rem;
        width: 100%;
    }
}

.l-content__wrap {
    width: 100%;
    background-color: #F2F5F6;
    padding: 1.7rem 3rem;
}

/* パンくずリスト */

.l-breadcrumbs {
    max-width: 93.4rem;
    margin: auto;
    display: flex;
    font-size: 1.4rem;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0;
}

.l-breadcrumbs::before {
    content: '';
    width: 1.6rem;
    height: 1.6rem;
    display: inline-block;
    position: relative;
    top: 0.22rem;
    background: url(../img/breadcrumbs_home.svg) no-repeat center center / contain;
}

.l-breadcrumbs li:not(:last-child)::after {
    content: '';
    width: 1.4rem;
    height: 1.4rem;
    display: inline-block;
    position: relative;
    top: 0.15rem;
    margin-left: 0.7rem;
    background: url(../img/breadcrumbs_after.svg) no-repeat center center / contain;
}

.l-breadcrumbs a {
    text-decoration: none;
}

.l-breadcrumbs a:hover {
    text-decoration: underline 1px #333333;
    text-underline-offset: 0.2rem;
}



.l-content__title-wrap {
    width: 100%;
    background-color: #F2F5F6;
    padding: 2rem 3rem 1.3rem 3rem;
}

.l-content__title {
    max-width: 93.4rem;
    margin: auto;
    display: flex;
    font-size: 2.4rem;
    color: #595757;
    align-items: center;
}

.l-content__title::before {
    content: '';
    width: 2.33rem;
    height: 2.33rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.8rem;
    background: url(../img/jyukourireki_arrow.svg) no-repeat center center / contain;
}

/* ログインフォーム */

.l-login__form {
    /* width: calc(100% - 18rem); */
    width: 100%;
    background-color: #6FB1EB;
    color: #fff;
    position: relative;
    padding: 0 3.0rem;
}

@media screen and (max-width: 767px) {
    .l-login__form {
        padding: 0 0;
    }
}

.l-login__form::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    display: block;
    /* width: calc((100% - 93.4rem) / 2); */
    width: max(3.0rem, calc((100% - 93.4rem) / 2));
    height: 100%;
    background-color: #0060B2;
    z-index: 1;
}

@media screen and (max-width: 767px) {
    .l-login__form::before {
        display: none;
    }
}


.l-login__form-inner {
    max-width: 93.4rem;
    margin: 0 auto;
    display: flex;
}

@media screen and (max-width: 767px) {
    .l-login__form-inner {
        display: block;
        width: 100%;
    }
}

.l-login__title {
    background-color: #0060B2;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 14px;
    /* padding:0 1rem 0 3rem; */
    width: 13rem;
}

@media screen and (max-width: 767px) {
    .l-login__title {
        display: block;
        width: 100%;
        margin: 0 auto;
        text-align: center;
        padding: 1rem 0;
    }
}

.l-login__title::before {
    content: '';
    width: 1.6rem;
    height: 2.0rem;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.5rem;
    background: url(../img/login_item1.svg) no-repeat center center / contain;
}

.l-login__content-wrap {
    width: calc(100% - 13rem);
    padding: 1.2rem 0 1.2rem 1.6rem;
    align-items: center;
    display: flex;
}

@media screen and (max-width: 767px) {
    .l-login__content-wrap {
        width: 100%;
        padding-right: 1.6rem;
    }
}

.l-login__content {
    width: 100%;
    /* background-color: #9e9c3d; */
    display: flex;
    row-gap: 1rem;
    flex-wrap: wrap;
    justify-content: space-between;
}

@media screen and (max-width: 767px) {
    .l-login__content {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
}

.l-login__index {
    font-size: 1.4rem;
    /* background-color: #8a5196; */
    display: flex;
    align-items: center;
    margin-right: 1rem;
}

@media screen and (max-width: 767px) {
    .l-login__index {
        display: flex;
        margin: 0 auto;
        /* background-color: #a51cc1; */
    }
}

.l-login__content-inner {
    display: flex;
    /* background-color: #787877; */
}

@media screen and (max-width: 767px) {
    .l-login__content-inner {
        flex-direction: column;
        align-items: center;
        row-gap: 1rem;
        margin: 0 auto;
        /* background-color: #484846; */
    }
}

.l-login__input {
    background-color: #fff;
    color: #1C1C1C;
    appearance: auto;
    -webkit-appearance: auto;
    margin-left: 1.0rem;
    font-size: 1.4rem;
}

.l-login__input--id {
    width: 20.1rem;
}

.l-login__index-birth {
    display: flex;
    align-items: center;
    /* background-color: #e48bc9; */
    margin-right: 1.5rem;
}

@media screen and (max-width: 767px) {
    .l-login__index-birth {
        align-items: center;
        row-gap: 1rem;
        margin: 0;
    }
}


.l-login__input--w2 {
    width: 4.5rem;
}

@media screen and (max-width: 767px) {
    .l-login__input--w2 {
        width: 5.4rem;
    }
}

.l-login__button {
    display: flex;
    padding: 0 1.6rem;
    width: 10.5rem;
    background-color: #FFAE45;
    border-radius: .6rem;
    font-size: 1.4rem;
    font-weight: 700;
    position: relative;
    align-items: center;
    /* justify-content: center; */
}

.l-login__button::after {
    position: absolute;
    content: '';
    width: 0.8rem;
    height: 1.3rem;
    display: inline-block;
    vertical-align: middle;
    padding: 0 0 0 1.8rem;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    background: url(../img/Login-triangle.svg) no-repeat center center / contain;
}

.l-login__button:hover {
    background-color: #fb8f03;
}

/* セクション */
.l-main {
    width: 100%;
    padding: 4rem 3.0rem 4.0rem 3.0rem;
}

.l-main__inner {
    max-width: 93.4rem;
    margin: 0 auto;
    text-align: left;
    /* background-color: #9c9b9b; */
}

.l-section {
    max-width: 93.4rem;
    margin: 0 auto;
}

.l-section+* {
    margin-top: 4rem;
}

.l-section__header {
    display: flex;
    justify-content: space-between;
    border-bottom: .2rem solid #6FB1EB;
    padding-bottom: 1rem;

    +* {
        margin-top: 2.0rem;
    }
}

.l-section__title {
    font-size: 2.0rem;
    font-weight: 700;
}

/* フッター */
.l-footer {
    background-color: #BFDEF5;
    width: 100%;
    text-align: center;
    padding: 5.0rem 3.0rem;
}

.l-footer__inner {
    max-width: 93.4rem;
    margin: 0 auto;
}

.l-footer-organization__name {
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: .2rem;
}

.l-footer-organization__name span {
    font-size: 1.3rem;
}

.l-footer-organization__address {
    margin-top: 2rem;
}

.l-footer__privacy {
    margin-top: 1.6rem;
}

.l-footer__privacy::before {
    content: '▶';
    /* width: 1.2rem;
    height: 1.2rem; */
    display: inline-block;
    vertical-align: middle;
    margin-right: .5rem;
    font-size: 1.2rem;
    transform: translateY(-0.2rem);
    /* background: url(../img/triangle-privacy.svg)  no-repeat center center / contain ; */
}

.l-footer__copyright {
    margin-top: 1.6rem;
    font-size: 1.2rem;
    color: #386688;
}

.l-footer-link {
    background: #fff;
    display: flex;
    padding: 1.5rem 0;
    margin-top: 2.5rem;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 767px) {
    .l-footer-link {
        display: inline-block;
    }
}

.l-footer-link__list {
    font-size: 1.3rem;
    text-align: left;
    /* padding-left: 1rem; */
}

@media screen and (min-width: 768px) {
    .l-footer-link__list {
        font-size: 1.4rem;
    }
}

.l-footer-link__about {
    line-height: 2.8rem;
    text-align: left;
}

@media screen and (max-width: 767px) {
    .l-footer-link__about {
        display: inline-block;
        padding: 0 1rem 1rem;
    }
}

.l-footer-link__about::before {
    content: '';
    width: 1.7rem;
    height: 1.3rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: .5rem;
    background: url(../img/about-link.svg) no-repeat center center / contain;
}

.l-footer-link__banner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* width: calc(100% - 18.8rem); */
    /* display: flex; */
    width: calc(100% - 2rem);
    padding-left: 1.5rem;
    align-items: center;
    gap: 1.5rem;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .l-footer-link__banner {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        padding-left: 1.5rem;
        width: calc(100% - 18.8rem);
        align-items: center;
        gap: 2rem;
    }
}

@media screen and (min-width: 1024px) {
    .l-footer-link__banner {
        display: flex;
        padding-left: 1.5rem;
        width: calc(100% - 18.8rem);
        align-items: center;
        gap: 1.5rem;
    }
}

/* 共通パーツ */
.c-button {
    width: 12.2rem;
    height: 3rem;
    border-radius: .6rem;
    display: inline-block;
    /* text-align: center; */
    background-color: #fff;
    border: solid 2px #6FB1EB;
    font-weight: 700;
    font-size: 1.4rem;
    color: #6FB1EB;
    padding: 0.2rem 0 0 1.3rem;
    position: relative;

    &.op-large {
        width: 14rem;
        height: 6rem;
        font-size: 2.0rem;
        margin: auto;
    }
}

.c-button::after {
    content: '';
    width: 0.8rem;
    height: 1.3rem;
    display: inline-block;
    vertical-align: middle;
    /* padding-left: 1.8rem; */
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    background: url(../img/triangle-all-list.svg) no-repeat center center / contain;
    position: absolute;
}

.c-button:hover {
    background-color: #6FB1EB;
    border: solid 2px #6FB1EB;
    color: #fff;
}

.c-button:hover::after {
    content: '';
    width: 0.8rem;
    height: 1.3rem;
    display: inline-block;
    vertical-align: middle;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    background: url(../img/triangle-all-list-hover.svg) no-repeat center center / contain;
    position: absolute;
}

/* 記事のリスト */
/* .c-entry__list {

} */

.c-entry__item {
    width: 100%;
    border-bottom: 1px dotted #AAAAAA;
}

.c-entry__item a {
    width: 100%;
    display: block;
    padding: 1.5rem 0;
}

@media screen and (min-width: 768px) {
    .c-entry__item a {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.c-entry__day {
    width: 7.5em;
}

.c-entry__information-icon {
    width: 7.9rem;
    border-radius: .6rem;
    display: inline-block;
    text-align: center;
    background-color: #fff;
    border: solid 2px #F88400;
    font-weight: 700;
    font-size: 1.4rem;
    color: #F88400;
    padding: .2rem 0;
    position: relative;
    margin: 0.6rem 1rem;
}

.c-entry__information-text {
    width: 100%;
}

@media screen and (min-width: 768px) {
    .c-entry__information-text {
        /* 7.9rem + ( 1.5rem * 2  ) + 7.5em */
        width: calc(100% - (10.9rem + 7.5em));
    }
}

/* 関連バナー */

.c-banner__list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.c-banner__list.op-x6 {
    grid-template-columns: repeat(4, 1fr);
}

.c-banner__list img {
    max-width: inherit;
    width: 100%;
}

@media screen and (min-width: 768px) {
    .c-banner__list {
        grid-template-columns: repeat(3, 1fr);
    }

    .c-banner__list.op-x6 {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* 下層ページ　セクション */

.l-article>*+* {
    margin-top: 1.5rem;
}

.l-article h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #0060B2;
    padding-bottom: 1.5rem;
}

.l-article h2::before {
    content: '';
    width: 0.8rem;
    height: 2.55rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: .8rem;
    background: url(../img/blue_2lines.svg) no-repeat center center / contain;
}

.l-article h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    padding: 1.3rem 2.1rem;
    background-color: #7E7E7E;
    border-radius: .4rem;
    margin-bottom: 1.5rem;

    &:not(:first-child) {
        margin-top: 3.6rem;
    }
}

.l-article dt {
    margin-bottom: 1.2rem;
    position: relative;
    padding-left: 1.8rem;
    font-weight: 400;
}

.l-article dt::before {
    content: '';
    width: 2.8rem;
    height: 1.6rem;
    display: inline-block;
    position: absolute;
    top: 0.8rem;
    left: -0.8rem;
    transform: translateY(-0.4rem);
    background: url(../img/article_triangle.svg) no-repeat center center / contain;
}

.l-article dd a:hover {
    color: #0076ff;
}

.l-article dd {
    padding-left: 1.8rem;
    margin-bottom: 1.2rem;
}

.l-article__text-red {
    color: #E71D36;
    font-weight: 700;
}

.l-article h4 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0060B2;
    padding: 1rem 2.1rem;
    background-color: #D8E7F2;
    border-radius: 0.4rem;
    margin-bottom: 1.5rem;
}

.l-article ol {
    list-style-type: decimal;
    padding-left: 2rem;
    margin-bottom: 1.5rem;
}

.l-article ol li {
    padding: 0.5rem 0;
    line-height: 1.6;
    border: none;
}

.l-article ul li {
    position: relative;
    padding-left: 1.8rem;
}

.l-article ul li:not(:last-child) {
    margin-bottom: .5rem;
}

.l-article ul li::before {
    content: '';
    width: .8rem;
    height: .8rem;
    background: #7E7E7E;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: .8rem;
    left: 0;
}

/* スマホメニュー */

.l-mobilenavi__wrapper {
    width: 100%;
    height: 100vh;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: none;
}

@media screen and (max-width: 767px) {
    [data-mobilenavi="on"] .l-mobilenavi__wrapper {
        display: block;
    }
}


.l-mobilenavi__close {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 2rem 1rem 0;
}

.l-mobilenavi__list {
    width: 100%;
}

.l-mobilenavi__item>a {
    display: block;
    padding: 1.2rem 2rem;
    border-bottom: #AAA 1px solid;

    &.op-sub {
        display: grid;
        grid-template-columns: auto 2.5rem;
        align-items: center;

        button {
            line-height: 1;

            img {
                height: auto;
                max-width: inherit;
                width: 100%;
            }
        }
    }
}

.l-mobilenavi__item>a:hover {
    background-color: #D8E7F2;
}

.sub {
    display: none;
}

@media screen and (max-width: 767px) {
    .l-mobilenavi__item.open .sub {
        display: block;
    }
}

.sub-inner>a {
    display: block;
    padding: 1.5rem 0;
    border-bottom: #AAA 1px solid;
    padding-left: 3.5rem;
}

.sub-inner>a:hover {
    background-color: #D8E7F2;
}


/* 下層ページ テスト問題 */

.c-test__title {
    margin: 3rem 0 2rem;
    width: 100%;
    display: grid;
    /* align-items: center; */
    grid-template-columns: auto auto 1fr;
}

.c-test__title-category {
    background-color: #0060B2;
    color: #fff;
    font-weight: 700;
    padding: 0rem 1.2rem;
    display: flex;
    align-items: center;
    height: 100%;
}

.c-test__title-type {
    background-color: #D8E7F2;
    padding: 0rem 4rem;
    border-right: solid 0.2rem #fff;
    text-align: center;
    display: flex;
    align-items: center;
}

.c-test__title-text {
    background-color: #D8E7F2;
    padding: 1rem 1.3rem 1rem 2rem;
    justify-content: center;
}

.c-test__qanda {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.0rem, 1fr));
    gap: 1.9rem;
    margin-top: 2.5rem;
    width: 100%;
    height: auto;
}

.c-test__qanda-item {
    display: grid;
    grid-template-columns: auto 1fr;
    width: 100%;
    /* background: #ddd; */
}

.c-test__qanda-q {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    background-color: #AAAAAA;
    border: solid 1px #AAAAAA;
    padding: .8rem 0;
    display: flex;
    width: 2.5em;
    height: 100%;
    justify-content: center;
    align-items: center;
    word-break: keep-all;
}

.c-test__qanda-a {
    font-size: 2.1rem;
    color: #1C1C1C;
    background-color: #fff;
    border: solid 1px #AAAAAA;
    padding: 0.4rem 1.6rem;
    align-items: center;
    display: flex;
    /* width: calc( 100% - 2.5em ); */
    justify-content: center;
}

.c-test__qanda-a.op-bad {
    color: #E71D36;
    font-weight: 700;
}

.c-test__related {
    margin-top: 1.5rem;
}

.c-test__related:hover {
    color: #0060B2;
}

/* トップに戻るボタン */
#l-pageTopBtn {
    position: fixed;
    bottom: 1rem;
    right: 0;
    width: 4.5rem;
    height: 4.5rem;
    transition: all .5s;
}

/* 回答ボタン */

.btnnavi {
    display: flex;
    margin-top: 2.0rem;
    justify-content: center;
}

/* @media screen and ( max-width: 767px ) {
    .btnnavi {
        justify-content: center;
    }
} */

.button {
    display: flex;
    font-size: 1.8rem;
    color: #000;

    &::before,
    &::after {
        content: "▶";
        color: #0060B2;
    }

    &:not(:last-child) {
        padding-right: 2.0rem;
        margin-right: 2.0rem;
        border-right: 1px solid #7E7E7E;
    }

    &.prev {
        &::before {
            margin-right: .5rem;
            transform: scale(-1, 1);
        }

        &::after {
            display: none;
        }
    }

    &.next {
        &::before {

            display: none;
        }

        &::after {
            margin-left: .5rem;
        }
    }
}

.correct-answer {
    width: fit-content;
    height: auto;
    font-size: 3.6rem;
    font-weight: bold;
    border-radius: .5rem;
    box-shadow: 0 0 1.0rem inset rgba(0, 0, 0, .1);
    background-color: #fff;
    border: solid 2px #AAAAAA;
    padding: 1.2rem 2rem;
    line-height: 1.32;
    align-items: center;
    display: flex;
    justify-content: center;
}

.answer-select__list {
    display: flex;
    flex-wrap: wrap;
    gap: 2.0rem;
    align-items: center;
    font-size: 0;
}

@media screen and (max-width: 767px) {
    .answer-select__list {
        /* display: grid;
        grid-template-columns: auto auto;
        gap: 2.0rem;
        align-items: center;
        justify-content: center; */

        .c-button {
            /* grid-column: span 2;
            justify-self: center; */
        }
    }
}


.answer-select__item {
    display: block;

    input[type="radio"]:checked {

        +label {
            background: #0060B2;
            color: #fff;
        }
    }
}

.answer-question-header {
    +* {
        margin-top: 2.0rem;
    }
}

.answer-qustion__no {
    span {
        font-size: .8em;
        color: #808080;
    }

    +* {
        margin-top: 1.5rem;
    }
}

.answer-question__title {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    font-size: 1.8rem;
    font-weight: bold;

    +* {
        margin-top: 2.0rem;
    }

    &::before {
        content: '？';
        font-weight: bold;
        font-size: 2.0rem;
        width: 2.8rem;
        height: 2.8rem;
        border-radius: 50%;
        border: 2px solid #f19ca7;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #f19ca7;
    }
}

#popupscr {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    visibility: hidden;
}

#popup {
    width: auto;
    padding: 30px 20px;
    border: 1px solid #333;
    background-color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#popup div.buttonnavi {
    margin-top: 2em;
    text-align: right;
}

/* CKEditor Marker Style */
.marker {
    background-color: Yellow;
}