@charset "UTF-8";

/*============================
	index 共通
============================*/

html.active {
    overflow-y: hidden;
}

@media screen and (max-width:1400px) {}

@media screen and (max-width:768px) {}

@media screen and (max-width:767px) {

    /* btn ▼*/
    .link__btn a {
        padding-right: 120px;
        background: url(../img/cmn/btn_arrow.png) no-repeat top 7px right/100px;
    }



    /* btn ▲*/
    .section__ttl {
        padding: 20px 0;
        font-size: 1.8rem;
        line-height: 40px;

    }

}


/*============================
	kv
============================*/
.kv {
    padding: 280px 0 180px;
    background:
        url(../img/top/hd_bg01.png) no-repeat top left/40%,
        url(../img/top/hd_bg02.png) no-repeat top right/35%;
    z-index: 9;
}

.kv__ttl {
    max-width: 322px;
    margin: 0 auto 90px;
}

.kv__txt {
    font-size: 3rem;
    text-align: center;
    font-weight: bold;
}


@media screen and (max-width:1400px) {
    .kv {
        padding: 160px 0 100px;
        background:
            url(../img/top/hd_bg01.png) no-repeat top left/40%,
            url(../img/top/hd_bg02.png) no-repeat top right/35%;
    }

    .kv__ttl {
        width: 23%;
        margin: 0 auto 40px;
    }

    .kv__txt {
        font-size: min(2rem, 2vw);
        text-align: center;
    }


}

@media screen and (max-width:768px) {}

@media screen and (max-width:767px) {
    .kv {
        padding: 100px 0 50px;
        background:
            url(../img/top/hd_bg01_sp.png) no-repeat top left/40%,
            url(../img/top/hd_bg02_sp.png) no-repeat top right/35%;
    }

    .kv__ttl {
        width: 160px;
        margin: 0 auto 30px;
    }

    .kv__txt {
        font-size: 1.5rem;
        text-align: left;
    }

}


/*============================
	data
============================*/


.data__h3 {
    font-size: 3.6rem;
    font-weight: bold;
    color: #66c0ac;
    letter-spacing: .1em;
    padding: 0 0 10px 50px;
    border-bottom: solid 3px #e5e5e5;
    margin-bottom: 50px;
    line-height: 1;
    background: url(../img/matome/ttl_icon.png) no-repeat left;

}

.data__tbl {
    width: 100%;
    font-weight: bold;
    border-spacing: 2px;
    border-collapse: separate;
    table-layout: fixed;
    margin-bottom: 20px;
}

.data__tbl th {
    width: 16.5%;
    padding: 30px 1%;
    text-align: center;
    font-size: 2rem;
    letter-spacing: .1em;
    background: #eeeeee;
    font-weight: bold;
    line-height: 1.4;
    vertical-align: middle;
}

.data__tbl--tr01 th {
    background: none;
}

.data__tbl th .small {
    font-size: 1.6rem;
    font-weight: bold;
}

.data__tbl td {
    width: 27.83%;
    padding: 30px 1%;
    text-align: center;
    font-size: 2rem;
    letter-spacing: .1em;
    font-weight: bold;
    line-height: 1.4;
}

.data__tbl--tr02 td {
    color: #fff;
    font-size: 3rem;
    letter-spacing: .1em;
}

.data__tbl .bg01 {
    background: #ebfae6;
}

.data__tbl .bg02 {
    background: #fbf2f2;
}

.data__tbl .bg03 {
    background: #e6f6f8;
}

.data__tbl--tr02 .bg01 {
    background: #92db7e;
}

.data__tbl--tr02 .bg02 {
    background: #f8c3c3;
}

.data__tbl--tr02 .bg03 {
    background: #6dd4e1;
}

.data__tbl--tr05 td {
    font-size: 3rem;
}

.data__tbl--tr05 td .large {
    font-size: 3.6rem;
    font-weight: bold;
    letter-spacing: .075em;
}

.data__tbl--tr05 .bg01 {
    color: #73d259;
}

.data__tbl--tr05 .bg02 {
    color: #e9878c;
}

.data__tbl--tr05 .bg03 {
    color: #46c6d6;
}

.data__caution {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 70px;
}

.data__talk {
    align-items: flex-end;
    margin-bottom: 170px;
}

.data__talk--left {
    width: 60%;
    padding: 0 1% 0 0;
}

.data__talk--right {
    width: 40%;
    padding: 0 0 0 1%;
}

.data__talk01 {
    padding-left: 150px;
    background: url(../img/matome/doctor.png) no-repeat left center/138px;
}

.data__talk01 span {
    display: block;
    width: calc(100% - 20px);
    margin: 0 0 0 auto;
    padding: 30px 5%;
    background: #f37e20;
    color: #fff;
    font-size: 1.8rem;
    border-radius: 10px;
    position: relative;
    font-weight: bold;
}

.data__talk01 span::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 20px 10px 0;
    border-color: transparent #f37f20 transparent transparent;
    left: -20px;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

}


.data__talk02 {
    padding-right: 110px;
    background: url(../img/matome/fisherman_01.png) no-repeat right bottom/105px;
}

.data__talk02 span {
    display: block;
    width: calc(100% - 20px);
    margin: 0 auto 0 0;
    padding: 30px 5%;
    background: #66c0ac;
    color: #fff;
    font-size: 1.8rem;
    border-radius: 10px;
    position: relative;
    font-weight: bold;
}

.data__talk02 span::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 20px;
    border-color: transparent transparent transparent #66c0ac;
    right: -20px;
    top: 70%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

}

.data__h3--02 {
    margin-bottom: 30px;
}

.data__txt {
    font-size: 2.2rem;
    font-weight: bold;
    margin-bottom: 70px;
}

.data__talk01--02 {
    margin-bottom: 100px;
}

.data__btm {
    align-items: flex-end;
}

.data__btm--left {
    width: 55%;
}

.data__btm--right {
    width: 45%;
    padding: 0 0 40px 3%;
}

.data__btm .data__talk02 {
    background: url(../img/matome/fisherman_02.png) no-repeat right bottom;
    padding-right: 130px;
}

.data__txt02 {
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: .05em;
}

.data__txt02 a {
    color: #51becc;
    text-decoration: underline;

}

@media screen and (max-width:1400px) {


    .data__h3 {
        font-size: 2.6rem;
        letter-spacing: .1em;
        padding: 0 0 10px 40px;
        border-bottom: solid 2px #e5e5e5;
        margin-bottom: 40px;
        line-height: 1;
        background: url(../img/matome/ttl_icon.png) no-repeat left /25px;

    }

    .data__tbl {
        width: 100%;
        font-weight: bold;
        border-spacing: 2px;
        border-collapse: separate;
        table-layout: fixed;
        margin-bottom: 10px;
    }

    .data__tbl th {
        width: 18%;
        padding: 20px 1%;
        text-align: center;
        font-size: 1.4rem;
        letter-spacing: .05em;
    }


    .data__tbl th .small {
        font-size: 1rem;
    }

    .data__tbl td {
        width: 27.33%;
        padding: 20px 1%;
        text-align: center;
        font-size: 1.4rem;
        letter-spacing: .05em;
    }

    .data__tbl--tr02 td {
        font-size: 2rem;
        letter-spacing: .1em;
    }

    .data__tbl--tr05 td {
        font-size: 2rem;
    }

    .data__tbl--tr05 td .large {
        font-size: 2.6rem;
        letter-spacing: .075em;
    }

    .data__caution {
        font-size: 1.2rem;
        margin-bottom: 50px;
    }

    .data__talk {
        align-items: flex-end;
        margin-bottom: 100px;
    }

    .data__talk--left {
        width: 60%;
        padding: 0 1% 0 0;
    }

    .data__talk--right {
        width: 40%;
        padding: 0 0 0 1%;
    }

    .data__talk01 {
        padding-left: 110px;

        background: url(../img/matome/doctor.png) no-repeat left center/100px;
    }

    .data__talk01 span {
        display: block;
        width: calc(100% - 20px);
        margin: 0 0 0 auto;
        padding: 20px 5%;
        font-size: 1.6rem;
        border-radius: 10px;
    }

    .data__talk01 span::before {
        border-width: 10px 20px 10px 0;
        border-color: transparent #f37f20 transparent transparent;
        left: -20px;
        top: 50%;

    }

    .data__talk02 {
        padding-right: 90px;
        background: url(../img/matome/fisherman_01.png) no-repeat right bottom/80px;
    }

    .data__talk02 span {
        width: calc(100% - 20px);
        margin: 0 auto 0 0;
        padding: 20px 5%;
        font-size: 1.6rem;
        border-radius: 10px;
    }

    .data__talk02 span::before {
        border-width: 10px 0 10px 20px;
        right: -20px;
        top: 70%;
    }

    .data__h3--02 {
        margin-bottom: 30px;
    }

    .data__txt {
        font-size: 1.8rem;
        margin-bottom: 50px;
    }

    .data__talk01--02 {
        margin-bottom: 60px;
    }

    .data__btm {
        align-items: flex-end;
        margin-bottom: 30px;
    }

    .data__btm--left {
        width: 50%;
    }

    .data__btm--right {
        width: 50%;
        padding: 0 0 0 3%;
    }

    .data__btm .data__talk02 {
        background: url(../img/matome/fisherman_02.png) no-repeat right bottom/80px;
        padding-right: 90px;
    }

    .data__txt02 {
        font-size: 1.4rem;
    }


}

@media screen and (max-width:768px) {}

@media screen and (max-width:767px) {
    .data__h3 {
        font-size: 1.8rem;
        padding: 0 0 10px 25px;
        border-bottom: solid 1px #e5e5e5;
        margin-bottom: 10px;
        background: url(../img/matome/ttl_icon.png) no-repeat left /18px;

    }

    .data__item {
        margin-bottom: 20px;
    }

    .data__tbl {
        width: 100%;
        border-spacing: 1px;
        margin-bottom: 10px;
        table-layout: auto;
    }

    .data__tbl th {
        width: 40%;
        padding: 20px 1%;
        text-align: center;
        font-size: 1.2rem;
        letter-spacing: .05em;
    }

    .data__tbl th .small {
        font-size: 1rem;
    }

    .data__tbl td {
        width: 60%;
        padding: 20px 1%;
        font-size: 1.2rem;
        letter-spacing: .05em;
    }

    .data__tbl--tr02 td {
        font-size: 1.4rem;
    }

    .data__tbl--tr05 td {
        font-size: 1.5rem;
    }

    .data__tbl--tr05 td .large {
        font-size: 2rem;
        letter-spacing: .075em;
    }

    .data__tbl--tr02 th {
        color: #fff;
        font-size: 1.5rem;
    }

    .data__tbl--img {
        margin-bottom: 10px;
    }

    .data__caution {
        font-size: 1.2rem;
        margin-bottom: 40px;
    }

    .data__talk {
        margin-bottom: 50px;
    }

    .data__talk--left {
        width: 100%;
        padding: 0;
        margin-bottom: 20px;
    }

    .data__talk--right {
        width: 100%;
        padding: 0;
    }

    .data__talk01 {
        padding-left: 80px;

        background: url(../img/matome/doctor.png) no-repeat left top 30%/75px;
    }

    .data__talk01 span {
        display: block;
        width: calc(100% - 10px);
        margin: 0 0 0 auto;
        padding: 20px 5%;
        font-size: 1.3rem;
        border-radius: 10px;
    }

    .data__talk01 span::before {
        border-width: 5px 10px 5px 0;
        left: -10px;
        top: 30%;

    }

    .data__talk02 {
        padding-right: 70px;
        background: url(../img/matome/fisherman_01.png) no-repeat right bottom/65px;
    }

    .data__talk02 span {
        width: calc(100% - 10px);
        margin: 0 auto 0 0;
        padding: 20px 5%;
        font-size: 1.3rem;
        border-radius: 5px;
    }

    .data__talk02 span::before {
        border-width: 5px 0 5px 10px;
        right: -10px;
        top: 70%;
    }

    .data__h3--02 {
        margin-bottom: 20px;
    }

    .data__txt {
        font-size: 1.3rem;
        margin-bottom: 20px;
    }

    .data__talk01--02 {
        margin-bottom: 30px;
    }

    .data__btm {
        margin-bottom: 20px;
    }

    .data__btm--left {
        width: 100%;
        margin-bottom: 30px;
    }

    .data__btm--right {
        width: 100%;
        padding: 0;
    }

    .data__btm .data__talk02 {
        background: url(../img/matome/fisherman_02.png) no-repeat right bottom/65px;
        padding-right: 70px;
    }

    .data__txt02 {
        font-size: 1.2rem;
    }

}

/*============================
	column
============================*/
.column {
    padding: 245px 0 110px;
    background: url(../img/matome/bg_column_top.jpg) no-repeat center top/100%, #f8f5ee;
}

.column__ttl {
    max-width: 328px;
    margin: 0 auto 70px;
}

.column__atc {
    width: 24%;
    max-width: 305px;
}

.column__img {
    margin-bottom: 20px;
    pointer-events: none;
}

.column__img img {
    -webkit-user-drag: none;
}

.column__h3 {
    font-size: 2.2rem;
    color: #55c3d1;
    line-height: 1.2;
    min-height: 55px;
    padding: 10px 0 15px;
    font-weight: bold;
}

.atc02 .column__h3 {
    padding: 0 0 10px;
}

.column__txt {
    font-size: 1.5rem;
    letter-spacing: .05em;
    font-weight: bold;
}

@media screen and (max-width:1400px) {
    .column {
        padding: 155px 0 80px;
        background: url(../img/matome/bg_column_top.jpg) no-repeat center top/100%, #f8f5ee;
    }

    .column__ttl {
        width: 25%;
        max-width: 328px;
        margin: 0 auto 50px;
    }

    .column__flex {
        flex-wrap: wrap;

    }

    .column__atc {
        width: 47%;
        max-width: none;
        margin-bottom: 30px;
    }

    .column__img {
        margin-bottom: 20px;
    }

    .column__h3 {
        font-size: 2rem;
        line-height: 1.2;
        min-height: 60px;
        padding: 10px 0 0;

    }

    .atc02 .column__h3 {
        padding: 0;
    }

    .column__txt {
        font-size: 1.4rem;
    }

}

@media screen and (max-width:768px) {}

@media screen and (max-width:767px) {
    .column {
        padding: 80px 0 60px;
        background: url(../img/matome/bg_column_top.jpg) no-repeat center top/100%, #f8f5ee;
    }

    .column__ttl {
        width: 160px;
        margin: 0 auto 40px;
    }

    .column__flex {
        flex-wrap: wrap;

    }

    .column__atc {
        width: 100%;
        max-width: none;
        margin-bottom: 30px;
    }

    .column__img {
        margin-bottom: 15px;
    }

    .column__h3 {
        font-size: 1.6rem;
        line-height: 1.2;
        min-height: auto;
        padding: 0;
        margin-bottom: 10px;

    }

    .column__txt {
        font-size: 1.3rem;
    }

}

/*============================
	challenge
============================*/
.challenge {
    background: #f8f5ee;
}

.challenge__box {
    padding: 220px 5% 110px;
    border: 20px solid #f9d84e;
    background: #fff;
}

.challenge__ttl {
    left: 50%;
    top: -50px;
    width: 620px;
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%);
}

.challenge__txt {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 40px;
    font-weight: bold;
}

.challenge__main {
    min-height: 640px;
}

.callege__main--flex {
    padding: 20px 0 40px;

}

.challenge__main--left {
    width: 45%;
}

.challenge__main--left {
    width: 55%;
}

.challenge__num {
    max-width: 150px;
    top: 0;
    left: 0;
}

.challenge__img {
    max-width: 400px;
    margin: 0 5% 0 auto;
}

.challenge__main--right {
    width: 60%;
}


.challenge__q {
    width: 100%;
    font-size: 3.6rem;
    font-weight: bold;
}

.challenge__btn {
    width: 45%;
    max-width: 500px;
    background: #6dd4e1;
    line-height: 100px;
    border-radius: 50px;
    font-size: 3rem;
    color: #fff;
    text-align: center;
    font-weight: bold;
    box-shadow: 0 9px 0 #44c1d1;
    cursor: pointer;
}

.challenge__or {
    width: 10%;
    text-align: center;
    font-size: 4.8rem;
    line-height: 1;

}

/* クイズ */
.challenge__correct {
    font-size: 4rem;
    font-weight: bold;
    text-align: center;
    width: 300px;
    height: 300px;
    line-height: 300px;
    margin: 0 auto 20px;
    position: relative;
    color: #ff0b00;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.challenge__correct::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: solid 20px #ff0b00;
    top: 0;
    left: 0;

}

.challenge__incorrect {
    font-size: 4rem;
    font-weight: bold;
    text-align: center;
    width: 300px;
    height: 300px;
    line-height: 300px;
    margin: 0 auto 20px;
    position: relative;
    color: #3f77e8;
    text-shadow:
        3px 3px 0px #fff,
        -3px -3px 0px #fff,
        -3px 3px 0px #fff,
        3px -3px 0px #fff,
        3px 0px 0px #fff,
        -3px -0px 0px #fff,
        0px 3px 0px #fff,
        0px -3px 0px #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.challenge__incorrect span {
    position: relative;
    z-index: 9;
    font-weight: bold;
}

.challenge__incorrect::before {
    content: "";
    position: absolute;
    width: 15px;
    height: 300px;
    background: #3f77e8;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);

}

.challenge__incorrect::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 300px;
    background: #3f77e8;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    -ms-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg);

}


.chllenge__next,
.back__btn {
    width: 45%;
    max-width: 500px;
    background: #6dd4e1;
    line-height: 100px;
    border-radius: 50px;
    font-size: 3rem;
    color: #fff;
    text-align: center;
    font-weight: bold;
    box-shadow: 0 9px 0 #44c1d1;
    cursor: pointer;
    margin: 0 auto;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%);
}

.challenge__result {
    padding: 30px 5%;
    border: solid 1px #111;
}

/* 結果 */
.result__txt {
    font-size: 4rem;
    text-align: center;
    line-height: 1;
    margin-bottom: 20px;
    font-weight: bold;
}

.result__txt02 {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 30px;
    line-height: 1;
    font-weight: bold;
}

.result__point {
    font-size: 8rem;
    color: #ff0b00;
    text-align: center;
    line-height: 1;
    font-weight: bold;
    letter-spacing: -.05em;
    margin-bottom: 20px;
}

.result__point span {
    font-weight: bold;
}

.result__point .small {
    font-size: 4rem;
    font-weight: bold;
}

.result__txt03 {
    font-size: 3rem;
    text-align: center;
    font-weight: bold;
    color: #66c0ac;
}

.challenge__correct,
.challenge__incorrect,
.chllenge__next,
.challenge__result {
    display: none;
}

.challenge__main.collect .challenge__image,
.challenge__main.incollect .challenge__image,
.challenge__main.finish .challenge__image,
.challenge__main.collect .challenge__main--right,
.challenge__main.incollect .challenge__main--right {
    display: none;
}

.challenge__main.collect .challenge__main--left,
.challenge__main.incollect .challenge__main--left {
    width: 100%;
}

.challenge__main.collect .challenge__correct {
    display: block;
}

.challenge__main.incollect .challenge__incorrect {
    display: block;
}

.challenge__main.collect .choice__btn,
.challenge__main.incollect .choice__btn,
.challenge__main.finish .choice__btn {
    display: none;
}

.challenge__main.collect .chllenge__next,
.challenge__main.incollect .chllenge__next {
    display: block;
}

.challenge__main.finish .challenge__result {
    display: block;
}

.challenge__main.finish .challenge__num,
.challenge__main.finish .challenge__q {
    display: none;
}

.challenge__main.incollect .challenge__num,
.challenge__main.collect .challenge__num {
    display: none;
}

@media screen and (max-width:1400px) {

    .challenge__box {
        padding: 160px 5% 80px;
        border: 10px solid #f9d84e;
        background: #fff;
    }

    .challenge__ttl {
        left: 50%;
        top: -28px;
        width: 400px;
    }

    .challenge__txt {
        font-size: 1.8rem;
        margin-bottom: 30px;

    }

    .challenge__main {
        padding: 20px 0 30px;
        min-height: 480px;
    }

    .challenge__num {
        max-width: 100px;
        top: 0;
        left: 0;
    }

    .challenge__img {
        max-width: 400px;
        width: 60%;
        margin: 0 1% 0 auto;
    }

    .challenge__q {
        width: 100%;
        font-size: 2.4rem;

    }

    .challenge__btn {
        width: 45%;
        line-height: 60px;
        border-radius: 30px;
        font-size: 2rem;
        box-shadow: 0 8px 0 #44c1d1;
    }

    .challenge__or {
        width: 10%;
        text-align: center;
        font-size: 3rem;
        line-height: 1;
    }

    /* クイズ */
    .challenge__correct {
        font-size: 3rem;
        width: 250px;
        height: 250px;
        line-height: 250px;
        margin: 0 auto 20px;
    }

    .challenge__incorrect {
        font-size: 2rem;
        width: 350px;
        height: 250px;
        line-height: 250px;
        margin: 0 auto 20px;
        text-shadow:
            3px 3px 0px #fff,
            -3px -3px 0px #fff,
            -3px 3px 0px #fff,
            3px -3px 0px #fff,
            3px 0px 0px #fff,
            -3px -0px 0px #fff,
            0px 3px 0px #fff,
            0px -3px 0px #fff;
    }

    .challenge__incorrect::before {
        width: 15px;
        height: 250px;
    }

    .challenge__incorrect::after {
        width: 15px;
        height: 250px;

    }

    .chllenge__next,
    .back__btn {
        width: 45%;
        line-height: 60px;
        border-radius: 30px;
    }

    /* 結果 */
    .result__txt {
        font-size: 3rem;
        margin-bottom: 20px;
    }

    .result__txt02 {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }

    .result__point {
        font-size: 6rem;
        letter-spacing: -.05em;
        margin-bottom: 20px;
    }


    .result__point .small {
        font-size: 3rem;
    }

    .result__txt03 {
        font-size: 2rem;
    }


}

@media screen and (max-width:768px) {}

@media screen and (max-width:767px) {

    .challenge__box {
        padding: 100px 5% 30px;
        border: 5px solid #f9d84e;
        border-radius: 5px;
    }

    .challenge__ttl {
        left: 50%;
        top: -24px;
        width: 300px;
        max-width: 90%;
    }

    .challenge__txt {
        font-size: 1.3rem;
        margin-bottom: 30px;
        text-align: left;

    }

    .challenge__txt br {
        display: none;
    }

    .challenge__main {
        padding: 100px 0 20px;
        min-height: 500px;
        max-height: 100vh;

    }

    .callege__main--flex {
        display: flex;
        flex-direction: column-reverse;
        padding: 0;
    }

    .challenge__num {
        max-width: 75px;
        top: 0;
        left: 50%;
        -webkit-transform: translate(-50%);
        -ms-transform: translate(-50%);
        transform: translate(-50%);
    }

    .challenge__main--left {
        width: 100%;
    }

    .challenge__main--right {
        width: 100%;
    }

    .challenge__img {
        width: 60%;
        margin: 0 auto;
    }

    .challenge__q {
        width: 100%;
        font-size: 1.8rem;
        margin-bottom: 30px;

    }

    .challenge__btnwrap {
        display: flex;
        margin-top: 10px;
    }

    .challenge__btn {
        width: 45%;
        line-height: 50px;
        border-radius: 25px;
        font-size: 1.8rem;
        box-shadow: 0 8px 0 #44c1d1;
    }

    .challenge__or {
        width: 12%;
        text-align: center;
        font-size: 2rem;
        line-height: 1;
        letter-spacing: -.2em;
    }


    /* クイズ */
    .challenge__correct {
        font-size: 3rem;
        width: 150px;
        height: 150px;
        line-height: 150px;
        margin: 0 auto 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .challenge__incorrect {
        font-size: 2rem;
        width: 150px;
        height: 150px;
        line-height: 150px;
        margin: 0 auto 20px;
        text-shadow:
            2px 2px 0px #fff,
            -2px -2px 0px #fff,
            -2px 2px 0px #fff,
            2px -2px 0px #fff,
            2px 0px 0px #fff,
            -2px -0px 0px #fff,
            0px 2px 0px #fff,
            0px -2px 0px #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .challenge__incorrect::before {
        width: 15px;
        height: 150px;
    }

    .challenge__incorrect::after {
        width: 15px;
        height: 150px;

    }

    .chllenge__next,
    .back__btn {
        width: 45%;
        line-height: 50px;
        border-radius: 25px;
        font-size: 1.8rem;
        bottom: 0;
    }

    /* 結果 */

    .result__txt {
        font-size: 3rem;
        margin-bottom: 20px;
    }

    .result__txt02 {
        font-size: 2rem;
        margin-bottom: 30px;
    }

    .result__point {
        font-size: 6rem;
        letter-spacing: -.05em;
        margin-bottom: 20px;
    }


    .result__point .small {
        font-size: 3rem;
    }

    .result__txt03 {
        font-size: 1.6rem;
    }


}

/*============================
	info
============================*/
.info {
    padding: 370px 0 220px;
    background:
        url(../img/matome/bg_info_top.jpg) no-repeat center top/100%,
        url(../img/matome/bg_info_left.png) no-repeat left top 500px/20%,
        url(../img/matome/bg_info_right.png) no-repeat right top 700px/20%;
}

.info__box {
    background: #3f77e8;
    padding: 110px 5% 90px;
    margin-bottom: 80px;

}

.info__box--inner {
    max-width: 1100px;
    margin: 0 auto;
}

.info__ttl {
    max-width: 615px;
    margin: 0 auto 40px;
}

.info__txt {
    font-size: 2.2rem;
    text-align: center;
    color: #fff;
    font-weight: bold;
    margin-bottom: 50px;
}

.info__dl {
    border-top: solid 1px #fff;
    color: #fff;
    margin-bottom: 50px;
}

.info__dt {
    padding: 20px 0 20px 5%;
    float: left;
    clear: both;
    font-size: 2rem;

}

.info__dt.large {
    padding: 60px 0 20px 5%;
}

.info__dt.middle {
    padding: 40px 0 20px 5%;
}

.info__dd {
    padding: 20px 5% 20px 250px;
    border-bottom: solid 1px #fff;
    font-size: 2rem;
}

.info iframe {
    width: 100%;
    height: 500px;
    margin-bottom: 40px;
}

.access__ttl {
    font-size: 2.6rem;
    text-align: center;
    color: #fff;
    background: #66c0ac;
    line-height: 50px;
    border-radius: 25px;
    width: 300px;
    margin: 0 auto;
    font-weight: bold;
    position: relative;
}

.access__box {
    padding: 60px 5% 40px;
    background: #fff;
    margin-top: -25px;
}

.access___ul {
    margin-bottom: 20px;
}

.access__li {
    font-weight: bold;
}

.access__txt {
    font-size: 2.2rem;
    color: #48b79e;
    font-weight: bold;
}

.info__btn a {
    display: block;
    max-width: 800px;
    margin: 0 auto;
}

@media screen and (max-width:1400px) {
    .info {
        padding: 200px 0 120px;
        background:
            url(../img/matome/bg_info_top.jpg) no-repeat center top/100%,
            url(../img/matome/bg_info_left.png) no-repeat left top 500px/20%,
            url(../img/matome/bg_info_right.png) no-repeat right top 700px/20%;
    }

    .info__box {
        background: #3f77e8;
        padding: 80px 5% 60px;
        margin-bottom: 60px;

    }

    .info__ttl {
        width: 80%;
        margin: 0 auto 30px;
    }

    .info__txt {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }

    .info__dl {
        margin-bottom: 40px;
    }

    .info__dt {
        padding: 15px 0 15px 3%;
        float: left;
        clear: both;
        font-size: 1.6rem;

    }

    .info__dt.large {
        padding: 50px 0 15px 3%;
    }

    .info__dt.middle {
        padding: 30px 0 20px 3%;
    }

    .info__dd {
        padding: 15px 5% 15px 220px;
        font-size: 1.6rem;
    }

    .info iframe {
        width: 100%;
        height: 400px;
        margin-bottom: 30px;
    }

    .access__ttl {
        font-size: 2rem;
        line-height: 40px;
        border-radius: 20px;
        width: 260px;
    }

    .access__box {
        padding: 60px 5% 40px;
        background: #fff;
        margin-top: -25px;
    }

    .access___ul {
        margin-bottom: 20px;
    }

    .access__li {
        font-weight: bold;
    }

    .access__txt {
        font-size: 1.8rem;
    }

    .info__btn a {
        display: block;
        max-width: 800px;
        width: 70%;
        margin: 0 auto;
    }

}

@media screen and (max-width:768px) {}

@media screen and (max-width:767px) {
    .info {
        padding: 100px 0 60px;
        background:
            url(../img/matome/bg_info_top.jpg) no-repeat center top/100%,
            url(../img/matome/bg_info_left.png) no-repeat left top 500px/20%,
            url(../img/matome/bg_info_right.png) no-repeat right top 700px/20%;
    }

    .info__box {
        padding: 45px 5% 25px;
        margin-bottom: 30px;

    }

    .info__ttl {
        width: 100%;
        margin: 0 auto 30px;
    }

    .info__txt {
        font-size: 1.3rem;
        text-align: left;
        margin-bottom: 20px;
    }

    .info__dl {
        margin-bottom: 20px;
        border: none;
    }

    .info__dt {
        padding: 0;
        line-height: 35px;
        text-align: center;
        float: none;
        font-size: 1.6rem;
        background: #4b86fc;

    }

    .info__dt.large,
    .info__dt.middle {
        padding: 0;
    }

    .info__dd {
        padding: 10px 0;
        font-size: 1.3rem;
        border: none;
    }

    .info iframe {
        width: 100%;
        height: 200px;
        margin-bottom: 20px;
    }

    .access__ttl {
        font-size: 1.5rem;
        line-height: 40px;
        border-radius: 20px;
        width: 150px;
    }

    .access__box {
        padding: 60px 5% 40px;
        background: #fff;
        margin-top: -25px;
    }

    .access___ul {
        margin-bottom: 20px;
    }

    .access__li {
        font-weight: bold;
        font-size: 1.2rem;
        border-bottom: solid 1px #ccc;
        padding: 0 0 10px;
        margin-bottom: 10px;
    }

    .access__txt {
        font-size: 1.5rem;
    }

    .info__btn a {
        width: 100%;
        margin: 0 auto;
    }

}

ruby.sm {
    letter-spacing: 2px;
}

.sm rt {
    font-size: 10px;
    letter-spacing: -2px;
}