@charset "UTF-8";

/*既存定義のリセット*/

#line_page #contents .line_content h1 {
    border-left:none;
    text-indent:none;
    background:none;
    width: 100%;
    margin: 0 auto 0 auto;
    box-shadow: none;
    -webkit-box-shadow: none;
}

#line_page #contents .line_content h2 {
    text-indent: 0;
    color: #000;
    padding: 8px 0 8px;
    letter-spacing: normal;
    background: none;
    text-align: center;
    font-size: 24px;
}

#line_page #contents .line_content h3 {
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: none;
    text-align: center;
}

#line_page #contents .line_content h4 {
    border-bottom: none;
    font-size: 18px;
    letter-spacing: normal;
    font-weight: 500;
    padding: 6px 0 6px;
    text-indent: none;
    width: 100%;
    margin-left: 0;
    text-align: center;
}

#line_page #contents .line_content img {
    width: 100%;
    height: auto;
}

/**/

.block {
    display: block;
}

.inline-block {
    margin: 0 0 0 0;
    display: inline-block;
}

.bk_white {
    background-color: #fff;
}

.red {
    color:#e91010;
}

.center {
    text-align: center;
}

.text-large {
    font-size: 110%;
}

.text-x-large {
    font-size: 125%;
}

.text-bold {
    font-weight: bold;
}

.margin-8 {
    margin-block: 8px;
}

.margin-16 {
    margin-block: 16px;
}

/**/

.line_content {
    padding: 32px;
    padding-block-start: 16px;
    background-color: #eef6e9;
    border:4px solid #53C853;
    border-radius: 16px;
}

@media (width < 600px) {
    .line_content {
        margin-inline: 8px;
        padding: 16px;
        border:2px solid #53C853;
    }
}

.line_lead-title {
    padding-block: 16px !important;
    background-color: #ffe699 !important;
}

.lead-text {
    padding-block: 16px;
    background-color: #fff;
    font-size: 20px;
    font-weight: bold !important;
    text-align: center;
}

.line_lead-list li {
    margin-block: 24px;
    padding: 0 0 0 0;
}

@media (width < 600px) {
    .line_lead-list li {
        margin-block: 8px;
    }
}

@media (width >= 600px) {
    .lead-img-photo-sp {
        display: none;
    }
}

.line_lead-img {
    display: grid;
    grid-template-columns: 70% 1fr;
    align-items: end;
    gap: 16px;
    margin: 0 auto;
    padding: 0;
}

.line_lead-list li:nth-child(2n) .line_lead-img {
    grid-template-columns: 30% 1fr;
}

.line_lead-list li:nth-child(2n) .line_lead-img .lead-img-photo {
    order: 2;
}
.line_lead-list li:nth-child(2n) .line_lead-img .lead-img-illust {
    order: 1;
}

@media (width < 600px) {
    .line_lead-img {
        display: none;
    }
}

.lead-img-illust {
    width: 90%;
    height: auto;
}

.step_lead-title {
    margin-block: 16px;
    font-size: 32px !important;
    font-weight: bold !important;
    color:#e91010 !important;
}

@media (width < 600px) {
    .step_lead-title {
        padding-block: 16px !important;
        font-size: 28px !important;
        background: #ffe699 !important;
    }
}

.step_list {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin: 32px auto ;
    padding: 0;
    list-style: none    
}

@media (width < 600px) {
    .step_list {
        margin-block-start: 48px;
        gap: 8px;
    }
}

.step_list::after {
    content: '';
    position: absolute;
    top:-30px;
    right: -16px;
    width: 230px;
    height: 47px;
    background: url(../img/easy_counseling.png) center center / contain;
}

@media (width < 600px) {
    .step_list::after {
        top:-36px;
        right: -8px;
        width: 180px;
        height: 37px;
    }
}

.text-note {
    margin: 16px;
    padding-left: 1em;
    text-indent: -1em;
}

.text-point {
    margin: 16px auto;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color:#e91010;
}

.emoji_large {
    font-size: 200%;
    vertical-align: baseline;
}


.step_content-title {
    position: relative;
    margin: 24px auto 32px auto !important;
    background-color: #4472c4;
    padding: 16px !important;
    text-align: center;
    font-size: 24px !important;
    font-weight: bold !important;
    color:#fff;
}

@media (width < 600px) {
    .step_content-title {
        font-size: 20px !important;
        text-align: left !important;
    }
}

.step_content-title::after {
    content: '';
    position: absolute;
    top: 0;
    bottom:0;
    right: 16px;
    margin: auto;
    width: 100px;
    height: 100px;
}

@media (width < 600px) {
    .step_content-title::after {
        right: 0px;
        width: 60px;
        height: 60px;
    }
}

.title-step1::after {
    background: url(../img/step-illust01.png) center center / contain;
}
.title-step2::after {
    background: url(../img/step-illust02.png) center center / contain;
}
.title-step3::after {
    background: url(../img/step-illust03.png) center center / contain;
}

.step_content_add {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 0 auto;
    padding: 0;
}

@media (width < 600px) {
    .step_content_add {
        grid-template-columns: 1fr;
    }
}

.step_content-subtitle {
    width: calc(100% - 40px) !important;
    margin: 16px auto;
    padding: 16px 0 16px 2em !important;
    text-indent: -2em;
    text-align: left ! important;
    font-size: 16px;
    font-weight: bold !important;
    border-bottom:2px solid #4472c4 !important;
}

.step_content-photo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 0 auto;
    padding: 0;
}

@media (width < 600px) {
    .step_content-photo {
        grid-template-columns: 1fr;
    }
}


.step2-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 0 auto;
    padding: 0;
}

@media (width < 600px) {
    .step2-content {
        grid-template-columns: 1fr;
    }
    .screen-sample01 {
        margin-inline: auto;
        width: 70% !important;
        height: auto;
    }
}

.step_content-end {
    display: grid;
    grid-template-columns: 40% 1fr;
    align-items: top;
    gap: 16px;
    margin: 0 auto;
    padding: 0;
}

.screen-sample02 {
    margin: 0 0 0 0;
}

@media (width < 600px) {
    .step_content-end {
        grid-template-columns: 1fr;
    }
    .screen-sample02 {
        margin-inline: auto;
        width: 70% !important;
        height: auto;
    }
}

.end-img {
    margin-top: 24px;
    position: relative;
}

.end-illust {
    position: absolute;
    right:-16px;
    bottom:-16px;
    width: 55% !important;
    height: auto;
    z-index: 2;
}

@media (width < 600px) {
    .end-illust {
        width: 40% !important;
        right:-4px;
        bottom:-4px;
    }
}