@charset "utf-8";

@media screen and (max-width:768px){.desktop{display:none}}.mobile{display:none}@media screen and (max-width:768px){.mobile{display:block}}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;padding:0;border:0;background:transparent;box-sizing:border-box;vertical-align:baseline;outline:0;word-break:break-word;font-feature-settings:"palt"}main,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{/* display:block; */}html{font-size:62.5%}body{width:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;color:#2F2C52;font-size:1.6rem;font-weight:300;word-wrap:break-word;line-height:1;font-feature-settings:"palt";font-family: "Helvetica Neue",Helvetica,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;box-sizing:border-box;background:transparent;text-decoration:none;transition:all .2s ease}a:hover{opacity:.7}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}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}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}[type="text"],[type="email"],[type="tel"],select,textarea{width:100%;height: 30px;padding:0 1em;border-radius:3px;border:0px solid #3E3E3E;background:#fff;transition:all .4s ease;box-sizing:border-box;}[type="text"]:focus,[type="email"]:focus,[type="tel"]:focus,select:focus,textarea:focus{outline:none}.oa{overflow:auto}.oh{overflow:hidden}.ti{text-indent:-9999px}.db{display:block}.dib{display:inline-block}.dn{display:none}.di{display:inline}.dt{display:table;width:100%}.dtr{display:table-row}.dtc{display:table-cell;vertical-align:top}.flL{float:left}.flR{float:right}.clr{clear:both}.clr_after:after{content:"";clear:both;display:table}.tal{text-align:left}.tar{text-align:right}.tac{text-align:center}.vat{vertical-align:top}.vam{vertical-align:middle}.vab{vertical-align:bottom}.vabl{vertical-align:baseline}.fz12{font-size:12px}.fz16{font-size:16px}.fz18{font-size:18px}.fwb{font-weight:700}.m00{margin:0}.p00{padding:0}.m05{margin:5px}.p05{padding:5px}.m10{margin:10px}.p10{padding:10px}.m15{margin:15px}.p15{padding:15px}.m20{margin:20px}.p20{padding:20px}.m25{margin:25px}.p25{padding:25px}.m30{margin:30px}.p30{padding:30px}.m35{margin:35px}.p35{padding:35px}.m40{margin:40px}.p40{padding:40px}.m45{margin:45px}.p45{padding:45px}.m50{margin:50px}.p50{padding:50px}.m55{margin:55px}.p55{padding:55px}.m60{margin:60px}.p60{padding:60px}.m65{margin:65px}.p65{padding:65px}.m70{margin:70px}.p70{padding:70px}.m75{margin:75px}.p75{padding:75px}.m80{margin:80px}.p80{padding:80px}.m85{margin:85px}.p85{padding:85px}.m90{margin:90px}.p90{padding:90px}.m95{margin:95px}.p95{padding:95px}.m100{margin:100px}.p100{padding:100px}.mt00{margin-top:0}.pt00{padding-top:0}.mt05{margin-top:5px}.pt05{padding-top:5px}.mt10{margin-top:10px}.pt10{padding-top:10px}.mt15{margin-top:15px}.pt15{padding-top:15px}.mt20{margin-top:20px}.pt20{padding-top:20px}.mt25{margin-top:25px}.pt25{padding-top:25px}.mt30{margin-top:30px}.pt30{padding-top:30px}.mt35{margin-top:35px}.pt35{padding-top:35px}.mt40{margin-top:40px}.pt40{padding-top:40px}.mt45{margin-top:45px}.pt45{padding-top:45px}.mt50{margin-top:50px}.pt50{padding-top:50px}.mt55{margin-top:55px}.pt55{padding-top:55px}.mt60{margin-top:60px}.pt60{padding-top:60px}.mt65{margin-top:65px}.pt65{padding-top:65px}.mt70{margin-top:70px}.pt70{padding-top:70px}.mt75{margin-top:75px}.pt75{padding-top:75px}.mt80{margin-top:80px}.pt80{padding-top:80px}.mt85{margin-top:85px}.pt85{padding-top:85px}.mt90{margin-top:90px}.pt90{padding-top:90px}.mt95{margin-top:95px}.pt95{padding-top:95px}.mt100{margin-top:100px}.pt100{padding-top:100px}.mb00{margin-bottom:0}.pb00{padding-bottom:0}.mb05{margin-bottom:5px}.pb05{padding-bottom:5px}.mb10{margin-bottom:10px}.pb10{padding-bottom:10px}.mb15{margin-bottom:15px}.pb15{padding-bottom:15px}.mb20{margin-bottom:20px}.pb20{padding-bottom:20px}.mb25{margin-bottom:25px}.pb25{padding-bottom:25px}.mb30{margin-bottom:30px}.pb30{padding-bottom:30px}.mb35{margin-bottom:35px}.pb35{padding-bottom:35px}.mb40{margin-bottom:40px}.pb40{padding-bottom:40px}.mb45{margin-bottom:45px}.pb45{padding-bottom:45px}.mb50{margin-bottom:50px}.pb50{padding-bottom:50px}.mb55{margin-bottom:55px}.pb55{padding-bottom:55px}.mb60{margin-bottom:60px}.pb60{padding-bottom:60px}.mb65{margin-bottom:65px}.pb65{padding-bottom:65px}.mb70{margin-bottom:70px}.pb70{padding-bottom:70px}.mb75{margin-bottom:75px}.pb75{padding-bottom:75px}.mb80{margin-bottom:80px}.pb80{padding-bottom:80px}.mb85{margin-bottom:85px}.pb85{padding-bottom:85px}.mb90{margin-bottom:90px}.pb90{padding-bottom:90px}.mb95{margin-bottom:95px}.pb95{padding-bottom:95px}.mb100{margin-bottom:100px}.pb100{padding-bottom:100px}.ml00{margin-left:0}.pl00{padding-left:0}.ml05{margin-left:5px}.pl05{padding-left:5px}.ml10{margin-left:10px}.pl10{padding-left:10px}.ml15{margin-left:15px}.pl15{padding-left:15px}.ml20{margin-left:20px}.pl20{padding-left:20px}.ml25{margin-left:25px}.pl25{padding-left:25px}.ml30{margin-left:30px}.pl30{padding-left:30px}.ml35{margin-left:35px}.pl35{padding-left:35px}.ml40{margin-left:40px}.pl40{padding-left:40px}.ml45{margin-left:45px}.pl45{padding-left:45px}.ml50{margin-left:50px}.pl50{padding-left:50px}.ml55{margin-left:55px}.pl55{padding-left:55px}.ml60{margin-left:60px}.pl60{padding-left:60px}.ml65{margin-left:65px}.pl65{padding-left:65px}.ml70{margin-left:70px}.pl70{padding-left:70px}.ml75{margin-left:75px}.pl75{padding-left:75px}.ml80{margin-left:80px}.pl80{padding-left:80px}.ml85{margin-left:85px}.pl85{padding-left:85px}.ml90{margin-left:90px}.pl90{padding-left:90px}.ml95{margin-left:95px}.pl95{padding-left:95px}.ml100{margin-left:100px}.pl100{padding-left:100px}.mr00{margin-right:0}.pr00{padding-right:0}.mr05{margin-right:5px}.pr05{padding-right:5px}.mr10{margin-right:10px}.pr10{padding-right:10px}.mr15{margin-right:15px}.pr15{padding-right:15px}.mr20{margin-right:20px}.pr20{padding-right:20px}.mr25{margin-right:25px}.pr25{padding-right:25px}.mr30{margin-right:30px}.pr30{padding-right:30px}.mr35{margin-right:35px}.pr35{padding-right:35px}.mr40{margin-right:40px}.pr40{padding-right:40px}.mr45{margin-right:45px}.pr45{padding-right:45px}.mr50{margin-right:50px}.pr50{padding-right:50px}.mr55{margin-right:55px}.pr55{padding-right:55px}.mr60{margin-right:60px}.pr60{padding-right:60px}.mr65{margin-right:65px}.pr65{padding-right:65px}.mr70{margin-right:70px}.pr70{padding-right:70px}.mr75{margin-right:75px}.pr75{padding-right:75px}.mr80{margin-right:80px}.pr80{padding-right:80px}.mr85{margin-right:85px}.pr85{padding-right:85px}.mr90{margin-right:90px}.pr90{padding-right:90px}.mr95{margin-right:95px}.pr95{padding-right:95px}.mr100{margin-right:100px}.pr100{padding-right:100px}.bdn{border:none}.bdtn{border-top:none}.bdrn{border-right:none}.bdbn{border-bottom:none}.bdln{border-left:none}.por{position:relative}.poa{position:absolute}.pof{position:fixed}.flex-wrap{display:flex;flex-wrap:wrap;justify-content:space-around}.flex-row{flex-direction:row}:root{--color-primary:#FF7DA3;--color-selected:#FF5385;--color-selectedBG:#FFE8EE;--color-buttonPink:#F23064;--color-primaryGray:silver;--color-textGray:#777;--color-error:#db0000}*::-moz-selection{background:rgba(0,0,0,.08)}*::selection{background:rgba(0,0,0,.08)}

.reuse_form {
    display: flex;
    flex-direction: column;
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "Meiryo", "メイリオ", "MS Pゴシック", sans-serif;
    color: #3e3e3e;
}

@media screen and (max-width: 768px) {
    .reuse_form {
        font-size: 1.4rem
    }
    .horizonal{
     width:100% !important;   
    }
}

.reuse_form .container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 380px;
    margin: auto;
    /* padding: 9px 0; */
}



@media screen and (max-width: 768px) {
    .reuse_form .container {
        flex-direction: column;
        max-width: none;
        min-width: initial;
        width: 100%;
        padding: 0 15px;
    }
    #sec2 .button-wrap {
        margin-top: 20px;
    }
    #sec3 .button-wrap {
        margin-top: 20px;
    }
}

.vt {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    -webkit-text-orientation: upright;
    text-orientation: upright
}

.button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 485px;
    height: 60px;
    margin: 0 auto;
    padding: 0 25px;
    border: none;
    border-radius: 50px;
    background: var(--color-primaryGray);
    font-size: 18px;
    /*font-weight: bold;*/
    color: #fff;
    transition: all .2s ease;
    cursor: not-allowed;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
}

@media screen and (max-width: 768px) {
    .button {
        width: 100%
    }
}

.button.is-active {
    background: var(--color-buttonPink);
    cursor: pointer
}

.button:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    display: block;
    width: 6px;
    height: 6px;
    margin-left: auto;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translateY(-50%) rotate(45deg)
}

@media screen and (max-width: 768px) {
    .button:after {
        right: 10px
    }
}

.button-submit {
    flex-direction: column;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 10px 0;
    border-radius: 10px;
    /*font-weight: bold;*/
}

.button-submit.enable{
    background: #f23064 !important;

}

@media screen and (max-width: 768px) {
    .button-submit {
        margin: 5px 0 0;
        padding: 17px
    }
}

@media screen and (max-width: 768px) {
    .button-submit .small {
        font-size: 12px
    }
}

.button-submit .large {
    font-size: 20px;
}

@media screen and (max-width: 768px) {
    .button-submit .large {
        font-size: 18px
    }
}

.button-submit:after {
    display: none
}

.pink {
    /* color: var(--color-primary); */
    padding: 5px 5px 3px 5px;
    background: #fff;
    border-radius: 5px;
    margin: 0 2% 0 0;
    font-size: 2vw;
    color: #FF8888;
}
@media screen and (max-width: 768px) {
    .pink {
    padding: 2% 1%;
    border-radius: 5px;
    margin: 0 2% 0 0;
    font-size: 3.4vw;
    }
}

.small {
    font-size: 10px;
    font-weight: normal;
    /* align-items: center; */
    /* color: #fff; */
}

.is-hidden {
    display: none
}

.sec {
    display: none;
    padding: 70px 0;
}



@media screen and (max-width: 768px) {
    .sec {
        padding: 15px 0 30px
    }
}

.sec.is-shown {
    display: block
}

.sec:nth-of-type(1),
.sec:nth-of-type(2),
.sec:nth-of-type(3),
.sec:nth-of-type(4) {
    background: #FBF7F3;
}

.sec-title {
    display: flex;
    align-items: center;
    margin: 0 0 5px;
    font-size: 11px;
    font-weight: normal;
    /* padding-top: 5px; */
}

@media screen and (max-width: 768px) {
    .sec-title {
        flex-wrap: wrap;
        align-items: flex-start;
        font-size: 16px
    }
}

.sec-title.required:before {
    content: "必須";
    flex: none;
    margin-right: 7px;
    padding: 6px 7px;
    background: #FF316D;
    font-size: 11px;
    color: #fff;
    line-height: 1;
    border-radius: 5px;
}

@media screen and (max-width: 768px) {
    .sec-title.required:before {
        margin-right: 5px;
        padding: 4px;
        font-size: 13px
    }
}

.sec-title .text {
    flex: 1;
    padding-top: 2px;
}

.sec-title .small {
    margin-left: 25px
}

@media screen and (max-width: 768px) {
    .sec-title .small {
        width: 100%;
        margin: 5px 0 0;
        padding-left: 39px;
        font-size: 12px
    }
}

.sec-notice {
    width: 100%;
    margin-bottom: 20px;
    padding: 8px 0;
    border-radius: 10px;
    background: #e4e4e4;
    font-size: 22px;
    line-height: 1;
    text-align: center
}

@media screen and (max-width: 768px) {
    .sec-notice {
        padding: 12px 15px;
        font-size: 18px;
        line-height: 1.1
    }
}

@media screen and (max-width: 365px) {
    .sec-notice {
        font-size: 17px;
    }
}

.is-vertical .sec:not(#sec1) {
    min-height: 200vh
}

.sec2 .footer,
.sec4 .footer {
    background: #F9F9F9
}

.label-input {
    display: none
}

.label-box {
    display: flex;
    align-items: center;
    padding: 15px 10px;
    width: 100%;
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    font-weight: bold;
    color: var(--color-textGray);
    line-height: 1.1;
    cursor: pointer;
    transition: all .2s ease;
    font-weight: normal;
}

@media screen and (max-width: 768px) {
    .label-box {
        padding: 13px;
        font-size: 16px;
    }
}

.label-box__height {
    height: 100%
}

@media screen and (max-width: 768px) {
    .label-box__sp {
        min-height: 65px
    }
}

.label-text {
    display: inline-table;
    align-items: center;
}

.label-text .small {
    margin-left: 10px;
}

@media screen and (max-width: 768px) {
    .label-text .small {
        margin-left: 5px;
        font-size: 10px
    }
}

.label-radio {
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    border: 1px solid var(--color-primaryGray);
    border-radius: 50%;
    background: #fff;
    transition: all .2s ease
}

@media screen and (max-width: 768px) {
    .label-radio {
        width: 20px;
        height: 20px
    }
}

.label-radio:before {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-primary);
    opacity: 0;
    transition: all .2s ease
}

.label-checkbox {
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    padding-bottom: 3px;
    border-radius: 3px;
    border: 1px solid var(--color-primaryGray);
    background: #fff;
    transition: all .2s ease;
}

@media screen and (max-width: 768px) {
    .label-checkbox {
        width: 20px;
        height: 20px
    }
}

.label-checkbox:before {
    content: "";
    display: block;
    width: 7px;
    height: 3px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transition: all .2s ease
}

.label-notice {
    margin: 5px 0 0;
    font-size: 12px;
    text-align: center;
    line-height: 1.2
}
#sec1 .button-wrap {
    margin-top: 10px !important;
}
#sec4 .button-wrap {
    margin-top: 0px !important;
}
#sec4 .input+.error-message, .select+.error-message, .select-text+.error-message {
    /margin: 0px 0 0 !important;
}
@media screen and (max-width: 768px) {
    .label-notice {
        font-size: 10px;
        text-align: left
    }
}

.label-input:checked~.label-box {
    border-color: var(--color-primary);
    background: var(--color-selectedBG);
    color: var(--color-selected)
}

.label-input:checked~.label-box .label-radio {
    border-color: var(--color-primary)
}

.label-input:checked~.label-box .label-radio:before {
    opacity: 1
}

.label-input:checked~.label-box .label-checkbox {
    border-color: var(--color-primary);
    background: var(--color-primary)
}

.label-input:checked~.label-box .label-checkbox:before {
    transform: rotate(-45deg)
}

.input,
.textarea,
.select {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    width: 100%;
    min-height: 30px;
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    color: var(--color-textGray);
    line-height: 1.3;
    cursor: pointer;
    transition: all .2s ease;
    margin: 4px 0 0;
    height: 100%;
}

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

    .input,
    .textarea,
    .select {
        min-height: 30px;
        padding: 10px 16px;
        font-size: 13px;
    }
}

.input:focus,
.textarea:focus,
.select:focus {
    background: var(--color-selectedBG)
}

.textarea {
    resize: vertical;
    /* min-height: 30px; */
}

::-moz-placeholder {
    font-weight: normal;
    color: #C6C6C6
}

:-ms-input-placeholder {
    font-weight: normal;
    color: #C6C6C6
}

::placeholder {
    font-weight: normal;
    color: #C6C6C6
}

.select {
    position: relative;
    resize: vertical;
    /* height: 50px; */
}

.select:after {
    content: "";
    position: absolute;
    top: 55%;
    right: 20px;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-top: 7px solid var(--color-primaryGray);
    z-index: 3
}

@media screen and (max-width: 768px) {
    .select:after {
        right: 5px
    }
}

.select-select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 5px;
    background: none;
    font-size: 13px;
    color: var(--color-textGray);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    vertical-align: middle
}
#sec3 .select-select{
    padding: 20px;
}

@media screen and (max-width: 768px) {
    .select-select {
        padding: 0 10px;
        font-size: 16px;
        height: 100%;
    }
}

.error-message {
    display: none;
    /* font-weight: bold; */
    color: var(--color-error);
    font-size: 13px;
}

.input+.error-message,
.select+.error-message,
.select-text+.error-message {
    margin: 8px 0 0;
}

.is-error .label-box,
.is-error .select,
.is-error .input {
    border-color: var(--color-error);
    background: var(--color-selectedBG);
    color: var(--color-error)
}

.is-error .label-checkbox {
    border-color: var(--color-error)
}

.is-error .select-select {
    color: var(--color-error)
}

.is-error .error-message {
    display: block
}

.is-filled .label-box,
.is-filled .select,
.is-filled .input {
    border-color: var(--color-primary);
    background: var(--color-selectedBG);
    color: var(--color-primary)
}

.is-filled .select-select:-webkit-autofill,
.is-filled .input:-webkit-autofill {
    box-shadow: 0 0 0 1000px var(--color-selectedBG) inset;
    color: var(--color-primary);
    /* margin: 0px 0 4px; */
}

.is-filled .select-select {
    color: var(--color-primary)
}

.horizonal {
    background: #FBF7F3;
    width: 480px;
}

.button.enable {
    background: #799BE9;
    cursor: pointer;
}

.header-logo {
    padding: 10px 0 15px;
    text-align: center
}

@media screen and (max-width: 768px) {
    .header-logo {
        padding: 5px 0
    }
}

.header-logo img {
    width: 180px
}

@media screen and (max-width: 768px) {
    .header-logo img {
        width: 150px
    }
}

.header-title {
    padding: 0 0 8px;
    text-align: center
}

@media screen and (max-width: 768px) {
    .header-title {
        padding: 8px 0px;
    }
}

.header-title__text {
    font-size: 28px;
    padding: 13px;
    background: #FF8888;
    color: #fff;
    margin: 0 auto 15px;
    width: 96%;
    border-radius: 8px;
}

@media screen and (max-width: 768px) {
    .header-title__text {
        margin-bottom: 10px;
        font-size: 18px;
        padding: 15px 1px;
    }
}

.header-title__notice {
    font-size: 12px
}

@media screen and (max-width: 768px) {
    .header-title__notice {
        line-height: 1.2
    }
}

.nav {
    position: -webkit-sticky;
    /* position: sticky; */
    top: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 10px 0 0;
    background: #FBF7F3;
    text-align: center
}

@media screen and (max-width: 768px) {
    .nav {
        padding: 4px 0 0;
        /* width: 50%; */
        margin: 0 auto;
        text-align: center;
        /* background: #FBF7F3; */
    }
}

.nav-ul {
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-bottom: 8px; */
}

.nav-li {
    display: flex;
    align-items: center
}

.nav-li .circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primaryGray);
    /*font-family: "Roboto Condensed", sans-serif;*/
    font-weight: bold;
    color: #fff
}

@media screen and (max-width: 768px) {
    .nav-li .circle {
        width: 25px;
        height: 25px
    }
}

.nav-li:after {
    content: "";
    display: block;
    margin: 0 10px;
    width: 44px;
    height: 5px;
    background: url(/entry/re/images/nav-dot-gray.svg) 0 no-repeat
}

@media screen and (max-width: 768px) {
    .nav-li:after {
        width: 22px;
        height: 4px;
        margin: 0 8px;
        background: url(/entry/re/images/sp-nav-dot-gray.svg) 0 no-repeat
    }
}

.nav-li.is-complete:after {
    content: "";
    display: block;
    margin: 0 10px;
    width: 44px;
    height: 5px;
    background: url(/entry/re/images/nav-dot-pink.svg) 0 no-repeat
}

@media screen and (max-width: 768px) {
    .nav-li.is-complete:after {
        width: 22px;
        height: 4px;
        margin: 0 8px;
        background: url(/entry/re/images/sp-nav-dot-pink.svg) 0 no-repeat
    }
}

.nav-li.is-complete .circle {
    width: 20px;
    height: 20px;
    background: #ffe8ee;
    color: var(--color-primary);
    border:1px var(--color-primary) solid;
}

.nav-li.is-active {
    /*font-size: 22px*/
}

.nav-li.is-active .circle {
    width: 32px;
    height: 32px;
    background: var(--color-primary);
    color: #fff
}

@media screen and (max-width: 768px) {
    .nav-li.is-active .circle {
        width: 32px;
        height: 32px
    }
}

.nav-li.is-shown .circle {
    cursor: pointer
}

.nav-li.is-error .circle {
    border-color: var(--color-error);
    background: var(--color-error);
    color: #fff;
}

.nav-li:last-child:after {
    display: none
}

.nav-li.enable .circle {
    cursor: pointer
}

.nav-notice {
    font-size: 11px;
    background: #fbf7f3;
    text-align: center;
    padding-bottom: 13px;
}

@media screen and (max-width: 768px) {
    .nav-notice {
        padding-bottom: 15px;
    }
}

.footer {
    /* padding-top: 20px; */
}

.footer-small {
    display: block;
    /* margin-top: 50px; */
    padding: 24px 0;
    background: #2D2C52;
    font-size: 12px;
    color: #fff;
    text-align: center
}

.footer-dial {
    display: flex;
    flex-direction: column;
    align-items: center
}

.footer-dial__link {
    display: block;
    margin-bottom: 20px;
    text-align: center
}

.footer-dial__link .title {
    margin-bottom: 5px;
    font-size: 18px;
    font-weight: bold;
    color: #7ecef4
}

.footer-dial__link .num {
    display: flex;
    align-items: center;
    justify-content: center
}

.footer-dial__link .num-img {
    width: 35px;
    margin-right: 10px
}

.footer-dial__link .num-text {
    font-size: 30px;
    /*font-family: "Roboto Condensed", sans-serif;*/
    font-weight: bold;
    color: #00a1e9;
    padding-top: 8px;
    line-height: 1
}

.footer-dial__text {
    border-radius: 20px;
    background: #DDD;
    font-size: 13px;
    padding: 3px 15px
}

@media screen and (max-width: 768px) {
    .footer-dial__text {
        font-size: 11px
    }
}

.col1 {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    /* margin-top: 5px; */
    /* height: 100%; */
}

@media screen and (max-width: 768px) {
    .col1 {
        gap: 10px;
        /* margin-bottom: 20px; */
    }
}

.col1 .label {
    width: 100%
}

.col1-border {
    padding-top: 15px;
    border-top: 1px solid #E0E0E0
}

.col2 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    margin-bottom: 20px
}

@media screen and (max-width: 768px) {
    .col2 {
        gap: 10px;
        margin-bottom: 20px
    }
}

.col2 .label {
    width: calc(50% - 7.5px)
}

@media screen and (max-width: 768px) {
    .col2-sp1 .label {
        width: 100%
    }
}

.df-row {
  /*   display: flex;
    align-items: center;
    width: 100%;
    height: 35px;
}

@media screen and (max-width: 768px) {
    .df-row {
 /*       display: block */
    }
}

.df-row__title {
    width: 50px;
    font-size: 13px;
}

@media screen and (max-width: 768px) {
    .df-row__title {
        margin-bottom: 3px;
        font-size: 12px
    }
}

.df-row__child {
    flex: 1;
}

.df-column__title {
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    margin-bottom: 5px;
    font-size: 13px;
}
.df-column__title .small{
    margin-left: 1rem;
}
@media screen and (max-width: 768px) {
    .df-column__title {
        margin-bottom: 10px;
        font-size: 12px;
    }
    .df-column__title .small{
        font-size: 11px;
    }
}
.df-column__notice {
    padding: 3px 10px 3px;
    border-radius: 20px;
    background: #FEE288;
    font-size: 1.2rem;
}
@media screen and (max-width: 768px) {
    .df-column__notice {
        /* margin: 0 0 0 auto;
        transform: translateY(8px); */
        font-size: 1rem;
    }
}

#sec1 {
    /* padding-top: 20px; */
}

@media screen and (max-width: 768px) {
    #sec1 {
        padding-top: 20px
    }
}

.zip-input {
    position: relative;
    /* height: 60px; */
}

.zip-input:before {
    content: "〒";
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: bold
}

.zip .input {
    height: 0px;
    padding-left: 50px;
}

.zip .small {
    display: inline-block;
    margin: 10px 10px 5px 0;
    vertical-align: middle
}

@media screen and (max-width: 768px) {
    .zip .small {
        display: block;
        margin: 5px 0 0;
        font-size: 12px
    }
}

.zip.is-error .zip-input:before {
    color: var(--color-error)
}

.zip.is-filled .zip-input:before {
    color: var(--color-primary)
}

.birth {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 20px;
    font-size: 13px;
}

.birth-box {
    position: relative;
    display: flex;
    /* align-items: center; */
    /* flex-wrap: wrap; */
}

@media screen and (max-width: 768px) {
    .birth-box:nth-of-type(1) {
        width: 42%
    }
}

@media screen and (max-width: 768px) {
    .birth-box:nth-of-type(2) {
        width: 29%
    }
}

@media screen and (max-width: 768px) {
    .birth-box:nth-of-type(3) {
        width: 29%
    }
}

.birth .error-message {
    position: absolute;
    left: 0;
    bottom: -20px
}

.birth .error-message.wide {
    width: 50vw;
}

@media screen and (max-width: 768px) {
    .birth .error-message {
        font-size: 12px
    }

    .birth .error-message.wide {
        width: 90vw;
    }
}

.birth .select {
    margin-right: 8px
}

.year {
    width: 100px;
}

@media screen and (max-width: 768px) {
    .year {
        width: 75%
    }
}

.month {
    width: 100px;
}

@media screen and (max-width: 768px) {
    .month {
        width: 70%
    }
}

.date {
    width: 100px;
}

@media screen and (max-width: 768px) {
    .date {
        width: 70%
    }
}

.links {
    display: block;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 5px;
    font-size: 8px;
}

@media screen and (max-width: 768px) {
    .links {
        /* display: block; */
        margin-bottom: 10px;
        line-height: 2;
        margin: 5px auto;
        width: 100%;
    }
}

.links-link {
    display: flex;
    align-items: center;
    margin: 0 10px;
    color: #777777;
    font-size: 11px;
}


@media screen and (max-width: 768px) {
    .links-link {
        margin: 0
    }
}

.links-link:before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    margin-right: 3px;
    border-top: 2px solid #777777;
    border-right: 2px solid #777777;
    transform: rotate(45deg)
}

.horizonal .form_main {
    position: relative;
    height: auto;
    transition: all .4s ease;
    overflow: hidden;
    /* 横EF(PC):初期高さ */
    font-size: 10px;
    min-height: 480px;
}

@media screen and (max-width: 768px) {
    .horizonal .form_main {
        /* max-height: 850px; */
        /* 横EF(SP):初期高さ */
        min-height: 580px;
        max-height: 720px;
    }
}

.horizonal .h-adr {
    position: absolute;
    top: 0;
    display: flex;
    align-items: flex-start;
    width: 500%;
    height: 100%;
    transition: all .8s ease
}

.horizonal .sec {
    display: block;
    width: calc(100%/5);
    padding: 0px 0;
    /* margin: 10px 0; */
    max-height: 680px;
}

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

.horizonal .button {
    margin: 0;
    font-weight: normal;
}

@media screen and (max-width: 768px) {
    .horizonal .button {
        font-size: 16px;
    }
}

.horizonal .button-wrap {
    display: inherit;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
}

.horizonal .button-prev {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    margin: 0 10px;
    padding: 0 40px;
    border-radius: 50px;
    background: var(--color-primaryGray);
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    transition: all .2s ease;
    cursor: pointer;
    font-weight: normal;
    width: 100%;
}

@media screen and (max-width: 768px) {
    .horizonal .button-prev {
        /* flex: none; */
        padding: 0 15px 0 25px;
        font-size: 16px;
    }
}

.horizonal .button-prev:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 20px;
    display: block;
    width: 6px;
    height: 6px;
    margin-left: auto;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: translateY(-50%) rotate(-45deg)
}
section#sec3 .select{
    height: 60px;
    /* margin-top: 20px; */
    padding: 10p 0 0;
}

@media screen and (max-width: 768px) {
    .horizonal .button-prev:before {
        left: 10px
    }
}

.horizonal .button-submit {
    margin: 0 auto 5px;
    /* width: 225px; */
    /* float: left; */
}

.horizonal .footer {
    margin-top: 0
}

.horizonal.sec1 .nav-li:nth-child(1) .circle {
    width: 32px;
    height: 32px;
    background: var(--color-primary);
    color: #fff;
    /*font-size: 22px*/
}

.horizonal.sec1 .h-adr {
    left: 0
}

.horizonal.sec2 .nav-li:nth-child(2) .circle {
    width: 32px;
    height: 32px;
    background: var(--color-primary);
    color: #fff;
    /*font-size: 22px*/
}

.horizonal.sec2 .h-adr {
    left: -100%;
    background: #fbf7f3;
}

.horizonal.sec3 .nav-li:nth-child(3) .circle {
    width: 32px;
    height: 32px;
    background: var(--color-primary);
    color: #fff;
    /*font-size: 22px*/
}

.horizonal.sec3 .h-adr {
    left: -200%
}

.horizonal.sec4 .nav-li:nth-child(4) .circle {
    width: 32px;
    height: 32px;
    background: var(--color-primary);
    color: #fff;
    /*font-size: 22px*/
}

.horizonal.sec4 .h-adr {
    left: -300%;
}

.horizonal.sec5 .nav-li:nth-child(5) .circle {
    width: 50px;
    height: 50px;
    background: var(--color-primary);
    color: #fff;
    font-size: 22px
}

.horizonal.sec5 .h-adr {
    left: -400%
}

.horizonal .nav-ul .nav-li.is-error .circle {
    border-color: var(--color-error);
    background: var(--color-error);
    color: #fff;
}

.err_msg p {
    font-size: 12px;
    text-align: center;
    padding: 10px 0 0;
    line-height: 1.3;
    color: var(--color-error);
}

.cmt-dd {
    position: relative;
}

.cmt-textarea {
    opacity: .7;
}

.cmt-placeholder {
    position: absolute;
    top: 5px;
    left: 20px;
    font-size: 11px;
}
@media screen and (max-width: 768px) {
    .cmt-placeholder {
        top: 10px;
        left: 18px;
        font-size: 13px;
    }
}


.info-container{
    padding: 0px 20px 10px;
    background: #FFF;
}
@media screen and (max-width: 768px) {
    .info-container{
        padding: 0px 20px 10px;
        background: #FFF;
    }
}

.info-container .info-item.sec1{
    display: block;
}
@media screen and (max-width: 768px) {
    .info-container .info-item.sec1{
        display: block;
    }
}

.info-container .announce .inner {
    display: flex;
    align-items: center;
    justify-content: center;
}
@media screen and (max-width: 768px) {
    .info-container .announce .inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.info-container .announce .inner .img {
    display: flex;
    justify-content: right;
    height: 80px;
}
@media screen and (max-width: 768px) {
    .info-container .announce .inner .img {
        width: 15%;
        display: flex;
        justify-content: center;
        height: 80px;
    }
}

.info-container .announce .inner .text {
    position: relative;
    background: #FBF7F3;
    border-radius: 30px;
    width: 50%;
    flex-shrink: 1;
    height: 80px;
    padding: 0 12px 0 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left
}
@media screen and (max-width: 768px) {
    .info-container .announce .inner .text {
        position: relative;
        background: #FBF7F3;
        border-radius: 30px;
        width: 80%;
        flex-shrink: 1;
        height: 80px;
        padding: 0 12px 0 24px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: left
    }
}

.info-container .announce .inner .text::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -10px;
    transform: translateY(-50%);
    border-radius: 0px;
    border-right: 30px solid #FBF7F3;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}
@media screen and (max-width: 768px) {
    .info-container .announce .inner .text::before {
        content: '';
        position: absolute;
        top: 50%;
        left: -10px;
        transform: translateY(-50%);
        border-radius: 0px;
        border-right: 30px solid #FBF7F3;
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
    }
}

.info-container .announce .inner .text p {
    font-size: 12px;
    line-height: 1.2;
}
@media screen and (max-width: 768px) {
    .info-container .announce .inner .text p {
        font-size: 12px;
        line-height: 1.2;
    }
}

.info-container .announce .inner .text b{
    font-weight: bold;
    color: #FF8888;
}
@media screen and (max-width: 768px) {
    .info-container .announce .inner .text b{
        font-weight: bold;
        color: #FF8888;
    }
}

/* MAG_UNEI-12044 */
.label-box2 {
    display: flex;
    width: 100%;
    font-size: 14px;
    color: var(--color-textGray);
    line-height: 1.1;
    cursor: pointer;
    transition: all .2s ease;
    font-weight: normal;
    margin: 10px 0px;
    position: relative;
    top: 10%;
    left: 17px;
    padding-right: 18px;
}
.label-checkbox.label-checkbox2 {
    margin-right: 3px 5px 0 0;
    position: relative;
    top: 2px;
}
@media screen and (max-width: 768px) {
    .label-checkbox.label-checkbox2 {
        margin-right: 2px 5px 0 0;
        top: 0px;
    }
}
@media screen and (max-width: 768px) {
    .label-box2 {
        padding: 13px 13px 0 0;
        font-size: 16px;
        left: 2px;
    }
}
.label-input:checked~.label-box2 .label-checkbox {
    border-color: var(--color-primary);
    background: var(--color-primary)
}

.label-input:checked~.label-box2 .label-checkbox:before {
    transform: rotate(-45deg)
}
.ofr-text {
    font-size: 12px;
    line-height: 1.8em;
}