/* RESET */
*{-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;margin-block-start:0;margin-block-end:0;margin-inline-start:0;margin-inline-end:0;-webkit-margin-before:0;-webkit-margin-after:0;padding:0;-webkit-padding-start:0;-webkit-padding-end:0;-webkit-padding-before:0;-webkit-padding-after:0;border:0;outline:0;font-weight:inherit;vertical-align:center;box-sizing:border-box;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,main,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;color:inherit;font-size:1em;cursor:pointer;text-decoration:none;vertical-align:baseline;background:transparent}a:focus,:focus{outline:none}img{max-width:100%}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}button{background-color:transparent;border:none;cursor:pointer;outline:none;padding:0;appearance:none}

html, body {
    font-size: 10px;
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #D8E5EE;
}
@media (max-width: 750px) {
    html, body {
        font-size: calc(10 / 750 * 100vw);
    }
}

main {
    width: 100%; max-width: 750px;
    margin: 0 auto;
    display: block;
}

.underline {
    position: relative;
}
.underline::after {
    content: '';
    width: 100%;
    margin: 0 auto;
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    border-bottom: 8px solid #EEFF29;
    border-radius: 100px;
}

/* ------------------------------
    ファーストビュー
------------------------------ */
.fv {
    width: 100%; height: 150.7rem;
    margin: 0 auto 4.8rem;
    position: relative;
}
.fv--animation {
    width: 27.5rem; height: 27.5rem;
    position: absolute;
    bottom: 35.4rem; left: 3.2rem;
    object-fit: cover;
    border: 5px solid #fff;
    border-radius: 100%;
}

/* ------------------------------
    設問エリア
------------------------------ */
.question {
    width: calc(706 / 750 * 100vw); max-width: 706px;
    margin: 0 auto 4.8rem;
    padding: 8.8rem 0 8rem;
    border: 0.8rem solid #132A46;
    border-radius: 40px;
    background-color: #fff;
}
.question--head_icon {
    width: calc(304 / 750 * 100vw); max-width: 304px;
    margin: 0 auto 4.6rem;
    display: block;
}
.question--head_text {
    margin: 0 auto 5.7rem;
    font-size: 4.8rem; font-weight: 700;
    line-height: 1.35em;
    text-align: center;
}
.question--head_text.q3 {
    line-height: 1.5em;
}
.question--image {
    width: 57rem;
    margin: 0 auto 8.8rem;
    display: block;
}
.question--image.-q1 {
    margin: 0 auto 7.8rem;
}
.question--answer_wrap {
    width: 57rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
}

/* ------------------------------
    回答ボタン
------------------------------ */
.answer_button {
    width: 27rem;
    padding: 8px;
    margin-bottom: 2.8rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    font-size: 4rem; font-weight: 700;
    color: #132A46;
    text-align: center;
    border: 0.6rem solid #132A46;
    border-radius: 24px;
    background-color: #DCE9F2;
}
.answer_button:nth-last-of-type(1), .answer_button:nth-last-of-type(2) {
    margin-bottom: 0;
}
.answer_button.-q1 {
    padding: 3.9rem 0 3.8rem;
}
.answer_button.-q3 {
    font-size: 3.2rem;
}
.answer_button.-selected {
    color: #fff;
    background-color: #132A46;
}
.answer_image {
    margin-bottom: 1.9rem;
    border-radius: 16px;
}
.answer_image.-q3 {
    width: 23.8rem; height: 16.8rem;
    object-fit: cover; object-position: top;
}

/* ------------------------------
    回答を完了するボタン
------------------------------ */
.send_button {
    width: 56.8rem;
    margin: 7.6rem auto 0;
    padding: 4rem 0;
    display: block;
    position: relative;
    font-size: 4rem; font-weight: 700;
    line-height: 1.2em;
    color: #fff;
    border-radius: 100px;
    background-color: #132A46;
}
.send_button:disabled {
    background-color: #B9B9B9;
}
.send_button::after {
    content: '';
    width: 4.8rem; height: 4.8rem;
    margin: 0 auto;
    position: absolute;
    top: 50%; right: 2.4rem;
    transform: translateY(-50%);
    background-image: url('https://www.abemashopping.jp/wp-content/uploads/2023/12/send_button-arrow.svg');
    background-size: contain; background-position: center; background-repeat: no-repeat;
}

/* ------------------------------
    コラム
------------------------------ */
.column {
    width: 65.6rem;
    margin: 8rem auto 0;
    padding: 3.6rem 1.8rem 4.7rem;
    border-radius: 32px;
    background-color: #2D7EB6;
}
.column--head {
    width: 58.8rem;
    margin: 0 auto;
    display: block;
}
.column--head_text {
    margin-bottom: 2.4rem;
    font-size: 5.6rem; font-weight: 700;
    line-height: 1.8em;
    text-align: center;
    color: #fff;
    letter-spacing: -0.05em;
}
.column--head_text .-big {
    font-size: 6.4rem; font-weight: 700;
    letter-spacing: 0;
}
.column--head_text .-dot {
    position: relative;
    font-size: 5.6rem; font-weight: 700;
}
.column--head_text .-dot::after {
    content: '・';
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: -1.5em; left: 0; right: 0;
    font-size: 3.2rem;
}
.column--head_text .-question {
    margin-left: -0.1em;
    font-weight: 700;
}
.column--point_box {
    width: 100%;
    margin: 0 auto 4rem;

    border-radius: 24px;
    overflow: hidden;
    background-color: #fff;
}
.column--point_box:nth-last-of-type(1) {
    margin: 0 auto;
}
.column--point_text {
    width: 56.2rem;
    margin: 1rem auto 2rem;
    font-size: 3.2rem; font-weight: 500;
    line-height: 1.7em;
    color: #777;
    text-align: justify;
}
.column--point_text.-point2 {
    margin: 0 auto 2rem;
    letter-spacing: 0.1em;
}
.column--point_text .-bold {
    font-weight: 700;
    color: #242424;
}
.column--point_text .-red {
    font-weight: inherit;
    color: #CD082C;
}

/* ------------------------------
    オファーエリア
------------------------------ */
.offer--thankyou {
    width: 62.4rem;
    margin: 10.2rem auto 4.8rem;
    padding: 0.6rem 0;
    font-size: 3.6rem; font-weight: 500;
    color: #fff;
    line-height: 1em;
    text-align: center;
    border-radius: 1000px;
    background-color: #132A46;
}
.offer--head {
    margin-bottom: 4.3rem;
    font-size: 5.6rem; font-weight: 700;
    color: #132A46;
    line-height: 1.2em;
    text-align: center;
}

.offer--navyblue {
    padding-bottom: 5.3rem;
    background-color: #132A46;
}
.offer--navyblue::before {         
    content: '';   
    width: 75rem; height: 6.6rem;
    display: block;
    position: relative;
    top: -1px;
    clip-path: polygon(0 0, 0 1%, 50% 100%,100% 1%, 100% 0);
    background-color: #D8E5EE;
}

.offer--worry {
    width: 69rem;
    margin: 5.5rem auto;
    padding: 2.5rem 0 2rem;
    font-size: 6.4rem; font-weight: 700;
    text-align: center;
    color: #132A46;
    position: relative;
    background-color: #fff;
}
.offer--worry .-dot {
    position: relative;
}
.offer--worry .-dot::after {
    content: '・';
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: -0.3em; left: 0; right: 0;
    font-size: 4rem;
}
.offer--worry::after {
    content: '';
    width: 4.4rem; height: 2.3rem;
    margin: 0 auto;
    display: block;
    position: absolute;
    bottom: -2.2rem; left: 0; right: 0;
    clip-path: polygon(0 0, 0 1%, 50% 100%,100% 1%, 100% 0);
    background-color: #fff;
}

.offer--box {
    width: 69rem;
    margin: 0 auto;
    padding: 1.7rem 2.5rem 3.6rem;
    border-radius: 40px;
    background-color: #fff;
}
.offer--item_name {
    width: 100%;
    margin-bottom: 1.7rem;
    font-size: 6.3rem; font-weight: 700;
    line-height: 9.3rem;
    color: #132A46;
    text-align: center;
}
.offer--box_hr {
    width: 60.8rem;
    margin: 0 auto 3.3rem;
    border-top: 2.13px solid #242424;
}
.offer--main {
    width: 100%;
    margin: 0 auto 4.5rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.offer--main_image {
    width: 17.3rem;
}
.offer--main_detail {
    width: 45.7rem;
}
.offer--other {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}
.offer--other_head {
    width: 63rem;
    margin: 0 auto 4.1rem;
    padding: 0.8rem 0 1.2rem;
    font-size: 3.3rem; font-weight: 500;
    color: #fff;
    text-align: center;
    position: relative;
    background-color: #132A46;
}
.offer--other_head::after {
    content: '';
    width: 3.9rem; height: 1.4rem;
    margin: 0 auto;
    display: block;
    position: absolute;
    bottom: -1.3rem; left: 0; right: 0;
    clip-path: polygon(0 0, 0 1%, 50% 100%,100% 1%, 100% 0);
    background-color: #132A46;
}
.offer--other_course {
    width: 29.9rem;
}
.offer--notice {
    margin: 2.6rem auto 3.6rem;
    font-size: 2.8rem; font-weight: 400;
    line-height: 1.35em;
    text-align: center;
}
.offer--points_box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}
.offer--point {
    width: 19rem;
    padding: 2.4rem 0;
    font-size: 3.2rem; font-weight: 700;
    line-height: 1.35em;
    color: #132A46;
    text-align: center;
    border: 4px solid #000;
    border-radius: 24px;
}


/* ------------------------------
    CTAボタン
------------------------------ */
.offer_button {
    width: 63rem;
    margin: 5.6rem auto 2.6rem;
    padding: 4.25rem 0;
    display: flex;
    position: relative;
    font-size: 3.6rem; font-weight: 700;
    line-height: 120%;
    color: #FFF;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.50);
    border-radius: 100px;
    background: radial-gradient(100% 100% at 50% 0%, #58E155 0%, #46BF4C 57.28%, #2E8F3F 57.29%, #207337 100%);
}
.offer_button::after {
    content: '';
    width: 4.8rem; height: 4.8rem;
    margin: 0 auto;
    position: absolute;
    top: 50%; right: 2.4rem;
    transform: translateY(-50%);
    background-image: url('https://www.abemashopping.jp/wp-content/uploads/2023/12/send_button-arrow.svg');
    background-size: contain; background-position: center; background-repeat: no-repeat;
}