@charset "UTF-8";

/* ============================
common
============================ */
:root {
    --primary-pink: #E87575;
    --primary-lightGreen: #00B900;
    --primary-white:#FFF;
    --contentWidth: 91.4%;
    --contentPadding: 4.2%;
}

html {
    /* font-size: 62.5%; */
    font-size: calc(100vw / 375 * 10);
}
@media screen and (min-width: 1025px) {
    html {
        font-size: 62.5%;
    }
}/* pc 769px */

body {
    font-family:
    "dnp-shuei-mgothic-std", sans-serif;
    font-style: normal;
    font-weight: 400;
    color: #000;
    line-height: 1.5;
}

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

.btn {
    display: block;
    width: 230px;
    height: 53px;
    color: var(--primary-white,#FFF);
    font-size: min(2.4rem, 24px);
    font-weight: 600;
    line-height: 1;
    border-radius: 10px;
    background: var(--primary-lightGreen,#00B900);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
@media screen and (min-width: 1025px) {
    .btn {
        display: block;
        color: var(--primary-white,#FFF);
        font-weight: 600;
        line-height: 1;
        border-radius: 10px;
        background: var(--primary-lightGreen,#00B900);
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        text-align: center;
        padding: 12px 0;
        width: 53.8vw;
        height: 5.9vw;
        max-width: 778px;
        max-height: 86px;
        font-size: 2.4rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }   
}/* pc 769px */

@media screen and (min-width: 1025px) {
    .btn:hover {
        background: var(--primary-lightGreen,#00B900);
        opacity: 0.6;
    }    
}/* pc 769px */

.topic {
    font-size: min(1.6rem, 28px);
    font-weight: 700;
}
@media screen and (min-width: 1025px) {
    .topic {
        font-size:2.4rem;
        font-weight: 600;
    }
}/* pc 769px */


/* ============================
header
============================ */

.heroHeader {
    background-image: url(../img/mainViewSp.jpg);
    height: 570px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    }
 @media screen and (min-width:769px) {
        .heroHeader {
            background-image: url(../img/mainViewTab.jpg);
            object-fit: cover;
            object-position: center;
            height: 751px;
            max-width: 1920px;
            margin: 0 auto;
        }
    }/* pc 769px */
    
@media screen and (min-width:1025px) {
    .heroHeader {
        background-image: url(../img/mainViewPc.jpg);
        object-fit: cover;
        object-position: center;
        height: 751px;
        max-width: 1920px;
        margin: 0 auto;
    }
}/* pc 769px */


    .nav__header {
        background-color: rgba(255, 255, 255, 0.90);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 5%;
    }
    @media screen and (min-width:1025px) {
        .nav__header {
            background-color: rgba(255, 255, 255, 0.90);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 17px 5%;
        }
    }/* pc 769px */

    
    .header__icon {
        width:114px
    }
    @media screen and (min-width:1025px) {
        .header__icon {
            width: 138px;
        }
    }/* pc 769px */


    /* navigation */
    .nav__group{
    padding: 0 5%;
    background-color: rgba(255, 255, 255, 0.90);
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transform: translateX(100%);
    transition: transform 0.4s;
    /* 仮 */
    height: 100%;
    overflow-y: scroll;
    }

    /* .nav.active表示 */
    .nav__group.active {
        transform: translateX(0);
    }

    .nav__list {
        margin-top: 42px;
    }

    .nav__item {
        margin-top: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        position: relative;
    }
    .nav__item::after {
        position: absolute; 
        display:block;
        content: '';
        background: url(../img/lineBorder.png);
        width: 93%;
        max-width: 343px;
        height: 4px;
        bottom: -15px;
    }

    .nav__img {
        display: block;
        width: 41px;
    }

    .nav__img--resize {
        width: 30px;
    }

    .nav__txt {
        display: block;
        width: 224px;
        font-size: min(1.6rem, 16px);
        margin-left: 10px;
    }

    .nav__guidance {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 55px;
    }

    .nav__guidanceTxt {
        margin-left: 8px;
        color: #000;
        font-size: min(1.2rem, 12px);
        font-weight: 600;
    }

    .header__close {
        width: 38px;
    }

    .btn--nav {
        margin-top: 10px;
    }
    @media screen and (min-width:1025px) {
        .btn--nav {
            width: 230px;
            height: 53px;
            font-size: 2.4rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }/* pc 769px */

    .header__btn {
        width: 40px;
    }
    @media screen and (min-width:1025px) {
        .header__btn {
            width: 50px;
        }
    }/* pc 769px */
    

    .header__group {
        margin-top: 75px;
    }
    @media screen and (min-width:1025px) {
        .header__group {
            position: relative;
            width: 99vw;
            max-width: 900px;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 25px;
        }
    }/* pc 769px */
    


    .header__block {
        background-color: rgba(232, 117, 117, 0.50);
        padding: 5px 0 5px 3.5vw;
        border-radius: 0px 15px 15px 0px;
        margin:0 8% 13px 0;
        max-width: 700px;
    }
    @media screen and (min-width:1025px) {
        .header__block {
            background-color: rgba(232, 117, 117, 0.50);
            padding: 5px 10px 5px 15px;
            position: absolute;
            border-radius: 0px 40px 40px 0px;
            margin:0 8% 13px 0;
            white-space: nowrap;
            max-width: 1000px;
        }
    }/* pc 769px */

    .header__txtSub {
        color: #FFF;
        font-size: min(1.4rem, 26px);
        display: block;
        min-width: 322px;
    }
    @media screen and (min-width:1025px) {
        .header__txtSub {
            font-size:3.2rem;
            margin-left: 66px;
        }
    }/* pc 769px */

    .header__title {
        width: 92%;
        margin: 0 auto;
    }

    @media screen and (min-width:1025px) {
        .header__title {    
        width: 615px;
        margin: 0 6vw;
        }
    }/* pc 769px */


    .header__txt {
        text-align: center;
        color: #333;
        font-size: min(1.6rem, 26px);
        font-weight: 600;
        text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF,
                    -2px 2px 0 #FFF, 2px -2px 0 #FFF,
                    0px 2px 0 #FFF,  0-2px 0 #FFF,
                    -2px 0 0 #FFF, 2px 0 0 #FFF;
    }
    @media screen and (min-width:1025px) {
        .header__txt {
            margin-top: 100px;
            font-size: 3.2rem;
            font-weight: 600;
        }
    }/* pc 769px */


    .header__txtPink {
        color: #E87575;
        font-size: min(2.4rem,36px);
        font-weight: 600;
        line-height: 1;
    }
    @media screen and (min-width:1025px) {
        .header__txtPink {
            font-size: 4.8rem;
            font-weight: 600;
        }
    }/* pc 769px */

    .header__txtPinkBold {
        color: #E87575;
        font-size: min(3.2rem,40px);
        font-weight: 600;
        line-height: 1;
    }
    @media screen and (min-width:1025px) {
        .header__txtPinkBold {
            font-size: 4.8rem;
            font-weight: 600;
        }
    }/* pc 769px */


    .btn--header {
        display: none;
    }
    @media screen and (min-width:1025px) {
        .btn--header {
            width: 19.9vw;
            height: 5.9vw;
            max-width: 287px;
            max-height: 70px;
            font-size: 2.4rem;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 50px 13% 0;
        }
    }/* pc 769px */

    .pcBr {
        display: none;
    }

    @media screen and (min-width:1025px) {
        .spBr {
            display: none;
        }
        .pcBr{
            display: block;
        }
    }/* pc 769px */


/* ============================
main
============================ */

/* ============================
section__intro
============================ */

.section__intro {
    background-color:#F7F3EB;
    padding: 22px 0 28px;
    max-width: 1920px;
    margin: 0 auto;
}
@media screen and (min-width:1025px) {
    .section__intro {
        padding: 40px 0;
    }
}/* pc 769px */

.btn--intro {
    margin:0 auto;
}
@media screen and (min-width:1025px) {
    .btn--intro {
        display: none;
    }
}/* pc 769px */


.siteTitle {
    max-width: 420px;
    margin: 22px auto 0;
    text-align: center;
    font-size: min(1.2rem,24px);
    line-height: 2;
    position: relative;
    z-index: 0;
}
@media screen and (min-width:1025px) {
    .siteTitle {
        max-width: none;
        font-size: 3rem;
        font-weight: 600;
        width: max-content;
    }
}/* pc 769px */

.txtGreen {
    color: #759900;
    font-size: min(1.6rem,30px);
}
@media screen and (min-width:1025px) {
    .txtGreen {
        font-size: 3rem;
        font-weight: 600;
    }
}/* pc 769px */

.txtPink {
    color: var(--primary-pink,#E87575);
    font-size: min(1.6rem,30px);
}
@media screen and (min-width:1025px) {
    .txtPink {
        font-size: 4rem;
        font-weight: 600;
    }
}/* pc 769px */

.siteTitle::before {
    content: '';
    background-image: url(../img/hokkaido.png);
    display: block;
    position: absolute;
    background-position: center;
    background-size: cover;
    left: 10px;
    top: 13%;
    width: 109px;
    height: 81px;
    z-index: -1;
    opacity: 0.3;
}
@media screen and (min-width:1025px) {
    .siteTitle::before {
        content: '';
        background-image: url(../img/hokkaido.png);
        display: block;
        position: absolute;
        background-position: center;
        background-size: cover;
        left:-15px;
        top: 30px;
        width: 18vw;
        max-width: 204px;
        height: 13vw;
        max-height: 134px;
        z-index: -1;
        opacity: 0.3;
    }
}/* pc 769px */


/* ============================
section__reason
============================ */
.section__reason {
    max-width: 1920px;
    margin: 0 auto;
}

.title {
    text-align: center;
    font-size:min(2rem,30px);
    font-weight: 600;
    line-height: 1.5;
    padding-top: 25px;
}
@media screen and (min-width:1025px) {
    .title {
        font-size:3.2rem;
    }
}/* pc 769px */

.txtBold {
    font-size: min(3.2rem,50px);
    font-weight: 600;
}
@media screen and (min-width:1025px) {
    .txtBold {
        font-size: 4.8rem;
    }
}/* pc 769px */

.lineBreak__first {
    position: relative;
}

.lineBreak__first::after {
    position: absolute;
    content: '';
    background-image: url(../img/marker.svg); 
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    height: 10px;
    left: 50%;
    top: 90%;
    transform: translateX(-50%);
}

.lineBreak__second {
    position: relative;
}

.lineBreak__second::after {
    position: absolute;
    content: '';
    background-image: url(../img/marker.svg); 
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    height: 10px;
    left: 50%;
    top: 95%;
    transform: translateX(-50%);
}

@media screen and (min-width:1025px) {
    .reason {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4.5vw;
    }
}/* pc 769px */

.reason__group{
    margin-top: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 10vw;
}
@media screen and (min-width:1025px) {
    .reason__group {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}/* pc 769px */

.reason__group:first-of-type {
    margin-top: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 10vw;
}
@media screen and (min-width:1025px) {
    .reason__group:first-of-type {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}/* pc 769px */

@media screen and (min-width:1025px) {
    .reason__topic {
        height: 200px;
    }
}/* pc 769px */


.reason__img {
    width: 40%;
    max-width: 220px;
    object-fit: contain;
    object-position: center;
}
@media screen and (min-width:1025px) {
    .reason__img {
        width: 290px;
    }
}/* pc 769px */

@media screen and (min-width:1025px) {
    .topic--reason {
        text-align: center;
    }
}/* pc 769px */

.reason__txt {
    font-size:min(1.4rem, 20px);
    font-weight: 400;
    line-height: 1.6; /* 142.857% */
}
@media screen and (min-width:1025px) {
    .reason__txt {
        font-size:1.6rem;
        margin-top: 10px;
    }
}/* pc 769px */

.line__advice{
    margin: 30px 0 50px;
}

.line__content {
    font-size: min(1.6rem, 32px);
    text-align: center;
}
@media screen and (min-width:1025px) {
    .line__content {
        font-size: 3rem;
    }
}/* pc 769px */

.txtLightGreen {
    color: var(--primary-lightGreen);
}

.line__detail {
    margin-top: 3px;
    text-align: center;
    font-size: min(1.2rem, 24px);
}
@media screen and (min-width:1025px) {
    .line__detail {
        font-size: 3rem;
    }
}/* pc 769px */

.btn--reason {
    margin-top: 12px;
}

/* ============================
section__worries
============================ */
.section--worries{
    max-width: 1920px;
    margin: 0 auto;
}

.section__worries{
    height: 500px;
    background-color: #FFFAE3;
    position: relative;
    max-width: 1920px;
    margin: 0 auto;

}
@media screen and (min-width:1025px) {
    .section__worries{
        height:50vw;
        max-height: 685px;
    }
}/* pc 769px */

.section__worries{
    position: relative;
}

.section__worries::after {
    position: absolute;
    content: '';
    background-image: url(../img/arrowSymbol.svg);
    width: 206px;
    height: 108px;
    display: block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    bottom: -17%;
    left: 50%; 
    transform: translateX(-50%);
}
@media screen and (min-width:1025px) {
    .section__worries::after {
        width: 27vw;
        height: 12.5vw;
        max-width: 390px;
        max-height: 181px;
        bottom: -100px;
    }
}/* pc 769px */


.worries__span {
    position: relative;
} 

.worries__span::after {
    position: absolute;
    content: '';
    background-image: url(../img/marker.svg); 
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    height: 10px;
    left: 50%;
    top: 90%;
    transform: translateX(-50%);
}
       
.txtBlodPink {
    color: var(--primary-pink);
    font-size: min(3.2rem, 50px);
    font-weight: 600;
}
@media screen and (min-width:1025px) {
    .txtBlodPink { 
        font-size: 4.8rem;
    }
}/* pc 769px */

.commentImg {
    width: 343px;
    display: block;
    margin: 40px auto 0;

    opacity : 0;
    transform : translate(0, 50px);
    transition : all 1s;
}
.commentImg.active{
    opacity : 1;
    transform : translate(0, 0);
}

@media screen and (min-width:769px) {
    .commentImg {
        display: none;
    }
}/* pc 769px */


.worries__img {
    width: 192px;
    display: block;
    margin: 0 auto;
}
@media screen and (min-width:769px) {
    .worries__img {
        display: none;
    }
}/* pc 769px */


.worries__imgPC {
    display: none;
}
@media screen and (min-width:769px) {
    .worries__imgPC {
        display: block;
        width: 80vw;
        max-width: 1154px;
        max-height: 425px;
        margin: 64px auto;

        opacity : 0;
        transform : translate(0, 50px);
        transition : all 1s;
}

    .worries__imgPC.active{
        opacity : 1;
        transform : translate(0, 0);
}
}/* pc 769px */

.worries__suggestion{
    margin: 100px auto 0;
    background-image: url(../img/backImgSp.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 1000px;
    max-height: 1000px;
    height: 50vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
@media screen and (min-width:1025px) {
    .worries__suggestion{
        padding: 120px 0 0;
        margin: 3.6vw auto;
        background-image: url(../img/backImgPc.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        max-width: 1576px;
        height: 45vw;
        max-height: 675px;
        

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}/* pc 769px */

.worries__topic {
    text-align: center;
    padding: 10px 0 0;
    font-size: min(1.4rem,24px);
    font-weight: 600;
    line-height: 1.5; /* 71.429% */
    text-shadow: 2px 2px 0 #FFF, -2px -2px 0 #FFF, -2px 2px 0 #FFF, 2px -2px 0 #FFF, 0px 2px 0 #FFF, 0 -2px 0 #FFF, -2px 0 0 #FFF, 2px 0 0 #FFF;
    }
@media screen and (min-width:1025px) {
    .worries__topic {
        font-size: 2.8em;
        }
}/* pc 769px */
    

.txtNormalPink {
    color: var(--primary-pink);
    font-size: min(2.4rem, 40px);
    font-weight: 600;
    line-height: 1.5;
}
@media screen and (min-width:1025px) {
    .txtNormalPink {
        font-size: 4.8rem;
        }
}/* pc 769px */

.worries__txt {
    margin-top: 15px;
    text-align: center;
    font-size:  min(1.4rem,24px);
    font-weight: 600;
    line-height: 1.5; /* 71.429% */
    text-shadow: 2px 2px 0 #FFF, -2px -2px 0 #FFF, -2px 2px 0 #FFF, 2px -2px 0 #FFF, 0px 2px 0 #FFF, 0 -2px 0 #FFF, -2px 0 0 #FFF, 2px 0 0 #FFF;
    position: relative;
}
.worries__txt::after{
    position: absolute;
    display: block;
    content: '';
    background-image: url(../img/guidance.png);
    background-position: center;
    background-size: contain;
    background-repeat:no-repeat ;
    width: 28vw;
    height: 28vw;
    top: 40%;
    right: -15vw;
}
@media screen and (min-width:1025px) {
    .worries__txt::after{
        width: 28vw;
        height: 28vw;
        max-width: 300px;
        max-height: 300px;
        top: -20px;
        right: -250px;
    }
}/* pc 769px */


@media screen and (min-width:1025px) {
    .worries__txt {
        font-size: 2.8rem;
        }
}/* pc 769px */

.txtBoldGreen {
    color: var(--primary-lightGreen);
    font-size: min(1.4rem,24px);
    font-weight: 600;
    line-height: 1.5;
    text-shadow: 2px 2px 0 #FFF, -2px -2px 0 #FFF, -2px 2px 0 #FFF, 2px -2px 0 #FFF, 0px 2px 0 #FFF, 0 -2px 0 #FFF, -2px 0 0 #FFF, 2px 0 0 #FFF;
}
@media screen and (min-width:1025px) {
    .txtBoldGreen {
        font-size: 3.2rem;
        }
}/* pc 769px */

.btn--worries {
    margin: 40px auto;
}

/* ============================
section__possible
============================ */

.section__possible {
    background-color: #F7F3EB;
    padding:0 0 40px;
    max-width: 1920px;
    margin: 0 auto;
}
@media screen and (min-width:1025px) {
    .title--possible {
        font-size: 3.2rem;
    }
}/* pc 769px */

.title--possible {
    text-align: center;
    font-size: min(2rem,30px);
    font-weight: 600;
}
@media screen and (min-width:1025px) {
    .title--possible {
        font-size: 3.2rem;
    }
}/* pc 769px */


.possible__span {
    position: relative;
}

.possible__span::after {
    position: absolute;
    content: '';
    background-image: url(../img/marker.svg); 
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    height: 10px;
    left: 50%;
    top: 90%;
    transform: translateX(-50%);
}

.txtBlodBlack {
    font-size: min(3.2rem, 50px);
    font-weight: 600;
}
@media screen and (min-width:1025px) {
    .txtBlodBlack {
        font-size: 4.8rem;
    }
}/* pc 769px */


@media screen and (min-width:1025px) {
    .possible__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 96vw;
        max-width: 1200px;
        margin: 45px auto;
    }
}/* pc 769px */

.possible__group {
    width: 89vw;
    max-width: 580px;
    height: 75vw;
    max-height: 490px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: var(--primary-white);
    margin: 45px auto;
    border: solid 5px #E8D575;
    border-radius: 50px;
}
@media screen and (min-width:1025px) {
    .possible__group {
        width: 46vw;
        max-width: 560px;
        max-height: 404px;
        
    }
}/* pc 769px */

.possible__img {
    display: block;
    width: 35vw;
    max-width: 220px;
    margin: 0 auto;
}

.possible__topic {
    width: 100%;
}

.possible__content {
    width:90%;
    min-width: 210px;
    margin: 20px auto 15px;
    position: relative;
}

.possible__content::before {
    position: absolute;
    display: block;
    content: '';
    background-image: url(../img/lineBorder.png);
    width: 100%;
    height: 4px;
    top:-15px;
    left: 50%;
    transform: translateX(-50%);
}


.topic--possible {
    text-align: center;
}

.possible_txt {
    font-size: min(1.4rem, 20px);
    font-weight: 400;
    line-height: 1.6;
    width: max-content;
    margin: 0 auto;
    text-align: left;
}
@media screen and (min-width:1025px) {
    .possible_txt {
        font-size: 1.6rem;
    }
}/* pc 769px */

/* ============================
section__step
============================ */


.txtBlodLightGreen {
    color: #06C755;
    text-align: center;
    font-size: min(3.2rem, 50px);
    font-weight: 600;
    line-height: 1.5; /* 125% */
}
@media screen and (min-width:1025px) {
    .txtBlodLightGreen {
        font-size: 4.8;
    }
}/* pc 769px */

.txtRegure {
    font-size: min(2rem, 30px);
    font-weight: 600;
}
@media screen and (min-width:1025px) {
    .txtRegure {
        font-size: 3.2rem;
    }
}/* pc 769px */

.section__step {
    background-color: #FFFAE3;
    padding-bottom: 36px;
    max-width: 1920px;
    margin: 0 auto;
}

.firstBreak{
    position: relative;
}
.firstBreak::before {
    position: absolute;
    content: '';
    background-image: url(../img/speechBubbleSp.svg);
    background-repeat: no-repeat;
    width: 130px;
    height: 60px;
    top: -50px;
    left: -80px;

}
@media screen and (min-width:1025px) {
    .firstBreak::before {
        position: absolute;
        content: '';
        background-image: url(../img/speechBubblePc.svg);
        background-repeat: no-repeat;
        width: 180px;
        height: 100px;
        top: -50px;
        left: -100px;
    }
}/* pc 769px */

.firstBreak::after {
    position: absolute;
    content: '';
    background-image: url(../img/marker.svg); 
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    height: 10px;
    left: 50%;
    top: 90%;
    transform: translateX(-50%);
}


.secondBreak{
    position: relative;
}

.secondBreak::after {
    position: absolute;
    content: '';
    background-image: url(../img/marker.svg); 
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    height: 10px;
    left: 50%;
    top: 90%;
    transform: translateX(-50%);
}

.step__list {
    display: flex;
    flex-direction: column;
    margin-top: 29px;
    gap: 30px;
}
@media screen and (min-width:1025px) {
.step__list {
    display: flex;
    flex-direction: column;
    margin: 29px auto 0;
    gap: 30px;
    width: 83vw;
    max-width: 1200px;
}
}/* pc 769px */


.step__item:nth-of-type(odd) {
    background-color: #FFED9C;
    margin-left: 0;
    width: 95.4vw;
    height: 100vw;
    max-height: 555px;
    margin-right: auto;
    border-radius: 0px 50px 50px 0px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
@media screen and (min-width:1025px) {
    .step__item:nth-of-type(odd){
        border-radius:min(6.9vw, 100px);
        width: 72.7vw;
        height: 33vw;
        max-width: 1048px;
        max-height: 375px;
        margin-left: auto;
        margin-right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }/* pc 769px */
}


.step__item:nth-of-type(even) {
    background-color: #FFED9C;
    margin-left: auto;
    margin-right: 0;
    width: 95.4vw;
    height: 100vw;
    max-height: 555px;
    border-radius: 50px 0px 0px 50px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
@media screen and (min-width:1025px) {
    .step__item:nth-of-type(even){
        border-radius:min(6.9vw, 100px);
        width: 72.7vw;
        height: 33vw;
        max-width: 1048px;
        max-height: 375px;
        margin-left: 0;
        margin-right: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }/* pc 769px */
}

.step__item:first-of-type::before {
    position: absolute;
    content: '01';
    display: block;
    color: #E8D575;
    text-align: center;
    text-shadow: 0px 4px 4px rgb(0, 0, 0);
    text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, 0px 2px 0 #000, 0 -2px 0 #000, -2px 0 0 #000, 2px 0 0 #000;
    font-size: min(8rem, 120px);
    top: -16%;
    left: 5%;
}
@media screen and (min-width:1025px) {
    .step__item:first-of-type::before {
        left: 1%;
    }/* pc 769px */
}

.step__item:nth-of-type(2):before {
    position: absolute;
    content: '02';
    display: block;
    color: #E8D575;
    text-align: center;
    text-shadow: 0px 4px 4px rgb(0, 0, 0);
    text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, 0px 2px 0 #000, 0 -2px 0 #000, -2px 0 0 #000, 2px 0 0 #000;
    font-size: min(8rem, 120px);
    top: -16%;
    right: 5%;
}
@media screen and (min-width:1025px) {
    .step__item:nth-of-type(2):before {
        right: 1%;
    }/* pc 769px */
}

.step__item:nth-of-type(3):before {
    position: absolute;
    content: '03';
    display: block;
    color: #E8D575;
    text-align: center;
    text-shadow: 0px 4px 4px rgb(0, 0, 0);
    text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, 0px 2px 0 #000, 0 -2px 0 #000, -2px 0 0 #000, 2px 0 0 #000;
    font-size: min(8rem, 120px);
    top: -16%;
    left: 5%;
}
@media screen and (min-width:1025px) {
    .step__item:nth-of-type(3):before {
        left: 1%;
    }/* pc 769px */
}


.step__item:nth-of-type(4):before {
    position: absolute;
    content: '04';
    display: block;
    color: #E8D575;
    text-align: center;
    text-shadow: 0px 4px 4px rgb(0, 0, 0);
    text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, 0px 2px 0 #000, 0 -2px 0 #000, -2px 0 0 #000, 2px 0 0 #000;
    font-size: min(8rem, 120px);
    top: -16%;
    right: 5%;
}
@media screen and (min-width:1025px) {
    .step__item:nth-of-type(4):before {
        right: 1%;
    }/* pc 769px */
}


.step__item:nth-of-type(odd)  .step__box {
    width: 75vw;
    max-width: 500px;
}

@media screen and (min-width:1025px) {
    .step__item:nth-of-type(odd)  .step__box{
        margin: 0;
        width: auto;
        max-width: none;
    }/* pc 769px */
}


.step__item:nth-of-type(even)  .step__box{
    width: 75vw;
    max-width: 500px;
}
@media screen and (min-width:1025px) {
    .step__item:nth-of-type(even)  .step__box{
        margin: 0;
        width: auto;
        max-width: none;
        display: flex;
        flex-direction: row-reverse;
        gap: 0 23px;
    }/* pc 769px */
}


.step__detail {
    width: 100%;
}

.step__boxFirst {
    display: flex;
    flex-direction: column;
}
@media screen and (min-width:1025px) {
    .step__boxFirst {
        flex-direction: row;
    }/* pc 769px */
}

.step__boxSecond {
    display: flex;
    flex-direction: column;
    height: 88vw;
    max-height: 500px;
    justify-content: space-between;
}
@media screen and (min-width:1025px) {
    .step__boxSecond {
        display: flex;
        flex-direction: row;
        gap: 0;
        height: auto;
    }/* pc 769px */
}


.step__boxThird {
    display: flex;
    flex-direction: column;
    gap: 3.5vw;
}
@media screen and (min-width:1025px) {
    .step__boxThird {
        display: flex;
        flex-direction: row;
        gap: 0;
    }/* pc 769px */
}


.step__boxForth {
    display: flex;
    flex-direction: column;
    gap: 0.5vw;
}
@media screen and (min-width:1025px) {
    .step__boxForth {
        align-items: center;
    }/* pc 769px */
}


.step__title {
    font-size: min(1.6rem, 28px);
    font-weight: 600;
}
@media screen and (min-width:1025px) {
    .step__title {
        font-size: 2.5rem;
    }/* pc 769px */
}

.step__txt {
    font-size: min(1.4rem, 24px);
    font-weight: 400;
    width: max-content;
}
@media screen and (min-width:1025px) {
    .step__txt {
        font-size: 2.5rem;
    }/* pc 769px */
}

.step__txtPink {
    color: var(--primary-pink);
}

.step__img {
    margin-top: 15px;
}
@media screen and (min-width:1025px) {
    div .step__img {
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 3.1vw;
    }/* pc 769px */
}


.step__img--background {
    width: 52vw;
    height: 45vw;
    max-width: 270px;
    max-height: 230px;
    background-color: white;
    border-radius: 40px;
    margin:20px auto 6px;
    display: flex;
    justify-items: center;
    align-items: center;
}
@media screen and (min-width:1025px) {
    .step__img--background {
        width: 19vw;
        height: 16.9vw;
        max-width: 344px;
        max-height: 298px;
        background-color: white;
        border-radius: 40px;
        margin:20px auto 6px;
        display: flex;
        justify-items: center;
        align-items: center;
    }/* pc 769px */
}

.step__qr {
    display: none;
}
@media screen and (min-width:1025px) {
    .step__qr {
        display: block;
        width: 12.5vw;
        height: 12.5vw;
        max-width: 180px;
        max-height: 180px;
    }/* pc 769px */
}

.btn--step {
    width: 37.3vw;
    height: 8.2vw;
    max-width: 200px;
    max-height: 45px;
    font-size:min(1.4rem, 20px);
    font-weight: 600;
    line-height: 1;
    position: relative;
}
.btn--step::after {
    position:absolute;
    content: '';
    background-image: url(../img/click.png);
    width: 47.103px;
    height: 48.185px;
    top: -50px;
    right: 0;
    animation: diagonal-move-anim 0.5s linear infinite alternate;
    }

@keyframes diagonal-move-anim {

  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(10px, -10px);
  }

}

@media screen and (min-width:1025px) {
    .btn--step{
        display: none;
    }/* pc 769px */
}

.step__phoneImg {
    width: 36.4vw;
    max-width: 195px;
    display: block;
    margin: 15px auto 0;
}
@media screen and (min-width:1025px) {
    .step__phoneImg {
        width: 15.4vw;
        height: 20.9vw;
        max-width: 237px;
        max-height: 316px;
    }
}/* pc 769px */


.step__phoneImg--survey {
    width: 44vw;
    max-width: 245px;
}
@media screen and (min-width:1025px) {
    .step__phoneImg--survey {
        width: 19.3vw;
        height: 20.1vw;
        max-width: 308px;
        max-height: 319px;
    }
}/* pc 769px */


.step__phoneImg--calling {
    width: 34.6vw;
    max-width: 195px;
}
@media screen and (min-width:1025px) {
    .step__phoneImg--calling {
        width: 15.4vw;
        height: 20.9vw;
        max-width: 237px;
        max-height: 316px;
    }
}/* pc 769px */


.step__phoneImg--hearing {
    width: 34.6vw;
    max-width: 195px;
}
@media screen and (min-width:1025px) {
    .step__phoneImg--hearing {
        width: 32vw;
        height: 19vw;
        max-width: 275px;
        max-height: 285px;
    }/* pc 769px */
}

/* ============================
section__question
============================ */

.section--question {
    max-width: 1920px;
    margin: 0 auto;
}
.question {
    padding: 80%;
}

.question__span {
    position: relative;
}
.question__span::after {
    position: absolute;
    content: '';
    background-image: url(../img/marker.svg); 
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    width:100%;
    height: 10px;
    left: 50%;
    top: 90%;
    transform: translateX(-50%);
}

.section__question {
    width: max-content;
    margin: 15px auto 0;
}
.question__detail {
    display: block;
    font-size: min(1.4rem, 20px);
    font-weight: 400;
    line-height: 1.5; /* 107.143% */
    text-align: center;
    }
    @media screen and (min-width:1025px) {
        .question__detail {
            font-size: 2.4rem;
        }/* pc 769px */
    }
    

.question__list {
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.question__item {
    position: relative;
}

.question__item:not(:first-child)::after {
    position: absolute;
    display: block;
    content: '';
    background-image: url(../img/lineBorder.png);
    width: 100%;
    height: 4px;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
}

.question__Qimg {
    width: 6vw;
}
@media screen and (min-width:1025px) {
    .question__Qimg {
        width: 3.7vw;
        max-width: 71px;
    }/* pc 769px */
}


.question__Aimg {
    width: 6.5vw;
}
@media screen and (min-width:1025px) {
    .question__Aimg {
        width: 3.7vw;
        max-width: 71px;
    }/* pc 769px */
}
.question__txt {
    display: block;
    margin-top: 10px;
    font-size: min(1.4rem, 20px);
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 10px;
}
@media screen and (min-width:1025px) {
    .question__txt {
        font-size: 2.4rem;
    }/* pc 769px */
}

.question__img {
    display: flex;
    gap: 2vw;
    margin-top: 31px;
    justify-content: center;
    align-items: center;
}

.question__houseImg,
.question__familyImg {
    width: 43vw;
    display: block;
    border-radius: 0px 20%;
    object-fit: contain;
    object-position: center;
}
@media screen and (min-width:1025px) {
    .question__houseImg,
    .question__familyImg {
        width: 37.7vw;
        max-width: 543px;
    }/* pc 769px */
}



/* lastTxt */

.section--lastTxt{
    max-width: 1920px;
    margin: 0 auto;   
}

.lastTxt__span {
    position: relative;
}

.lastTxt__span::after {
    position: absolute;
    content: '';
    background-image: url(../img/marker.svg); 
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    height: 10px;
    left: 50%;
    top: 90%;
    transform: translateX(-50%);
}

.title--lastTxt {
    padding: 41px 0 0;
}

.lastTxt__detail {
    display: block;
    margin-top: 14px;
    text-align: center;
    font-size: min(1.4rem, 20px);
    font-weight: 400;
}
@media screen and (min-width:1025px) {
    .lastTxt__detail {
        font-size: 2.4rem;
    }/* pc 769px */
}


.txtPink--Bold {
    font-weight: 600;
}

.lastTxt__block {
    width: 91vw;
    height: 40vw;
    max-width: 700px;
    max-height: 290px;
    background-color: #E8D575;
    margin: 37px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (min-width:1025px) {
    .lastTxt__block {
        width: 71vw;
        height: 23.2vw;
        max-width: 1023px;
        max-height: 335px;
        background-color: #00B900;
        margin: 37px auto;
        padding: 19px 14px;
        display: flex;
    }/* pc 769px */
}

.lastTxt__txtBox {
    width: max-content;
    margin: 0 auto;
}

.lastTxt__white {
    color: #FFF;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-size: min(1.4rem, 24px);
    font-weight: 600;
    margin-top: 2%;
}
@media screen and (min-width:1025px) {
    .lastTxt__white {
    font-size: 2.4rem;
    }
}/* pc 769px */

.lastTxt__pcTopic {
    display: none;
    }
@media screen and (min-width:1025px) {
    .lastTxt__pcTopic {
    display: block;
    font-size: 2.4rem;
    color: #FFF;
    }
}/* pc 769px */

.lastTxt__pcTxt {
    display: none;
    }
@media screen and (min-width:1025px) {
    .lastTxt__pcTxt {
        display: block;
        font-size: 1.6rem;
        color: #FFF;
    }
}/* pc 769px */

@media screen and (min-width:1025px) {
    .lastTxt__txtTopic {
        display: flex;
        flex-direction: column;
        margin-left: 15px;
    }
}/* pc 769px */

.lastTxt__group{
    display: flex;
    justify-items: center;
    align-items: center;
}
@media screen and (min-width:1025px) {
    .lastTxt__group{
        gap: min(1vw , 54px);
        margin-top: 30px;
        position: relative;
    }

    .lastTxt__group::after {
        position: absolute;
        content: '';
        background-image: url(../img/whiteBoderPc.svg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        display: block;
        width: 100%;
        height: 2px;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
    }
    
}/* pc 769px */

.lastTxt__qr {
    display: none;
}
@media screen and (min-width:1025px) { 
    .lastTxt__qr {
    display: block;
    width: 10vw;
    max-width: 130px;
}
}

.lastTxt__img {
    width: 22vw;
    max-width: 169px;
    margin: 5px 2.6vw 0 0;
}
@media screen and (min-width:1025px) {
    .lastTxt__img {
        display: none;
    }/* pc 769px */
}


.lastTxt__imgPC {
    display: none;
}

@media screen and (min-width:1025px) {
    .lastTxt__imgPC {
        display: block;
        width: 17.2vw;
        max-width: 248px;
    }/* pc 769px */
}


.btn--lastTxt {
    position: relative;
}

.btn--lastTxt::after {
    position: absolute;
    content: '';
    background-image: url(../img/whiteBoderSp.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    height: 2px;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
}

.btn--lastTxt {
    width: 51vw;
    height: 11.4vw;
    max-width: 350px;
    max-height: 60px;
    margin: 10% auto 0;
    font-size: min(1.6rem, 20px);
    font-weight: 600;
}
@media screen and (min-width:1025px) {
    .btn--lastTxt {
        display: none;
    }/* pc 769px */
}
.btn--lastTxt::before {
    position:absolute;
    content: '';
    background-image: url(../img/click.png);
    width: 47.103px;
    height: 48.185px;
    top: -50px;
    right: 0;
    z-index: 10;
    animation: diagonal-move-anim 0.5s linear infinite alternate;
    }

@keyframes diagonal-move-anim {

  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(10px, -10px);
  }

}



/* ============================
footer
============================ */

.footer {
    max-width: 1920px;
    margin: 0 auto;
}

.deaie__footer {
    padding: 15.5px 13%;
    background-color: #FFFAE3;
}

.footer__sns {
    display: flex;
    justify-content: space-between;
}
@media screen and (min-width:1025px) {
    .footer__sns {
        justify-content: center;
        gap: 50px;
    }/* pc 769px */
}

.sns {
    display: flex;
    gap: 0 2.5vw;
}
@media screen and (min-width:1025px) {
    .sns {
        gap: 0 20px;
    }
}

.sns__instagram,
.sns__line {
    width: 44px;
    height: 44px;
}

/* .copy */
.copy {
    padding: 7.5px 13%;
}

.footer__copy{
    text-align: center;
}

.footer__copy small{
    font-size: min(1rem, 16px);
    font-weight: 400;
}
@media screen and (min-width:1025px) {
    .footer__copy small {
        font-size: 1.6rem;
    }/* pc 769px */
}

.pageTop {
    display: block;
}
#page-top {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99;
}

#page-top a img{
width: 15vw;
min-width: 60px;
max-width: 80px;
display: block;
transition: all .3s ease;
opacity: 0.8;
z-index: 99;
}

#page-top a:hover {
text-decoration: none;
opacity: 0.5;
}

@media screen and (min-width:1025px) {

    .pageTop {
        display: block;
    }
    #page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
  }

  #page-top a img{
    width: 8.75vw;
    max-width: 126.66px;
    display: block;
    opacity: 0.8;
    transition: all .3s ease;
    z-index: 99;
  }

  #page-top a:hover {
    text-decoration: none;
    opacity: 0.5;
  }
}