body {
    font-family: 'Noto Serif JP', serif;
}

.page_ttl .cap {
    left: auto;
    right: 5px;
    bottom: 5px;
}

.sec_inner {
    max-width: 1054px;
    width: 90%;
    margin: 0 auto;
}

.sec01 .sec_ttl {
    max-width: 370px;
    width: 90%;
    margin: 20px auto 0;
}

.sec01 .sec_lead {
    text-align: center;
    font-size: clamp(18px,2vw,25px);
    font-weight: 700;
}

.sec01 .sec_lead .large {
    font-size: clamp(22px,3vw,30px);
    color: #095D9C;
}

.sec01 .wrap01 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px 0 50px;
}

.sec01 .wrap01 .image_wrap {
    width: 48%;
}

.sec01 .wrap01 .image_wrap .image .cap {
    right: 20%;
}

.sec01 .wrap01 .txt_wrap {
    margin: 0 auto;
    text-align: center;
}

.sec01 .wrap01 .txt_wrap .lead {
    color: #7B6A3E;
    font-size: clamp(18px,2vw,20px);
    margin-bottom: 20px;
}

.sec01 .wrap01 .txt_wrap .lead::after {
    display: block;
    margin-top: 10px;
    content: '';
    width: 100%;
    height: 2px;
    background: linear-gradient(
        to right,
        transparent 0%,
        #7b6a3eb3 50%,
        transparent 100%
    );
}

.sec01 .wrap01 .txt_wrap .txt {
    line-height: 1.8;
    font-size: clamp(13px,1.5vw,16px);
}

.sec01 .wrap02 {
    position: relative;
    display: flex;
    justify-content: space-between;
}

.sec01 .wrap02::before {
    position: absolute;
    translate: -50% -50%;
    left: 50%;
    top: 30%;
    content: '';
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url(../images/gokinjo/arrow_deco.svg);
    width: 10%;
    height: 50%;
    z-index: 2;
}

.sec01 .wrap02 .box {
    width: 46%;
}

.sec01 .wrap02 .box .txt_wrap {
    background-color: #EBE7D6;
    padding: 20px 0;
}

.sec01 .wrap02 .box .flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 2%;
}

.sec01 .wrap02 .box .flex .ttl {
    font-weight: bold;
    color: #7B6A3E;
    font-size: clamp(20px,2.5vw,28px);
}

.sec01 .wrap02 .box .flex .txt {
    font-size: clamp(12px,1.4vw,15px);
}

.sec01 .wrap02 .box .btn {
    width: 80%;
    margin: 20px auto 0;
}

.sec01 .wrap02 .box .btn a {
    font-size: clamp(15px,1.6vw,18px);
    border: 1px solid #fff;
    border-radius: 30px;
    padding: 10px;
    text-align: center;
    display: block;
    color: #fff;
    background: linear-gradient(
        to right,
        #807346 0%,
        #B69D60 50%,
        #807346 100%
    );
    position: relative;
}

.sec01 .wrap02 .box .btn a::before {
    position: absolute;
    translate: 0 -50%;
    right: 8px;
    top: 50%;
    content: '';
    background-image: url(../images/gokinjo/btn_deco.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 30px;
    height: 30px;
}

/* SP調整 */
@media screen and (max-width:730px) {
    .page_ttl .cap {
        top: auto;
    }

    .sec01 .sec_ttl {
        width: 80%;
        margin: 20px auto 10px;
    }

    .sec01 .sec_lead .large {
        display: block;
    }

    .sec01 .wrap01 {
        flex-direction: column;
        gap: 30px 0;
        margin-bottom: 40px;
    }

    .sec01 .wrap01 .image_wrap {
        width: 100%;
    }

    .sec01 .wrap01 .txt_wrap .lead {
        margin-bottom: 15px;
    }

    .sec01 .wrap02 {
        flex-direction: column;
        gap: 60px 0;
    }

    .sec01 .wrap02::before {
        width: 70px;
        height: 85px;
        top: 50%;
    }

    .sec01 .wrap02 .box {
        width: 100%;
    }

    .sec01 .wrap02 .box .btn {
        margin-top: 15px;
    }

    .sec01 .wrap02 .box02 {
        display: flex;
        flex-direction: column;
    }

    .sec01 .wrap02 .box02 .txt_wrap {
        order: -1;
    }
}


#digital .sec_ttl,
#real .sec_ttl {
    max-width: 350px;
    width: 70%;
    margin: 0 auto;
}

#digital .sec_lead,
#real .sec_lead {
    max-width: 350px;
    width: 90%;
    margin: 30px auto 0;
    text-align: center;
    color: #7B6A3E;
    font-size: clamp(18px,2vw,20px);
}

#real .sec_lead {
    max-width: 450px;
}

#digital .sec_lead::after,
#real .sec_lead::after {
    display: block;
    margin-top: 10px;
    content: '';
    width: 100%;
    height: 2px;
    background: linear-gradient(
        to right,
        transparent 0%,
        #7b6a3eb3 50%,
        transparent 100%
    );
}


/* SP調整 */
@media screen and (max-width:730px) {

    #digital .sec_lead,
    #real .sec_lead {
        margin-top: 20px;
    }
}


#digital {
    background-color: #D3E4E3;
    padding: 50px 0 80px;
    margin-top: 80px;
}


#digital .contents {
    display: flex;
    flex-direction: column;
    gap: 80px 0;
    max-width: 1054px;
    width: 90%;
    margin: 80px auto 0;

}

#digital .container_border {
    background: linear-gradient(
        to right,
        #807346 0%,
        #B69D60 50%,
        #807346 100%
    );
    padding: 5px;
}

#digital .container_inner {
    outline: 1px solid #7b6a3e;
    outline-offset: -5px;
    background-color: #fff;
    padding: 30px;
    display: flex;
    justify-content: space-between;
}

#digital .container .num {
    width: 25%;
    margin: 0 0 20px 20%;
}

#digital .container .box01 {
    width: 43%;
}

#digital .container .box01 .top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

#digital .container .box01 .top .image {
    width: 48%;
    filter: drop-shadow(3px 3px 3px #00000076);
    margin: -45% 0 0 -15%;
}

#digital .container .box01 .top .txt_wrap {
    width: 62%;
    background: linear-gradient(
        to right,
        #807346 0%,
        #B69D60 20%,
        #B69D60 80%,
        #807346 100%
    );
    color: #fff;
    text-align: center;
    padding: 20px 30px;
}

#digital .container .box01 .top .txt_wrap .lead {
    font-size: clamp(25px,3.4vw,37px);
}

#digital .container .box01 .top .txt_wrap .txt {
    font-size: clamp(13px,1.4vw,17px);
    letter-spacing: 0.05em;
    margin-top: 10px;
}

#digital .container .box01 .bottom {
    margin-top: 30px;
}

#digital .container .box01 .bottom .lead {
    color: #7b6a3e;
    border-bottom: 1px solid #7b6a3e;
    padding-bottom: 10px;
    font-size: clamp(18px,2vw,23px);
    text-align: center;
}

#digital .container .box01 .bottom .txt {
    font-size: clamp(15px,1.6vw,18px);
    text-align: center;
    margin: 20px 0;
}

#digital .container .box02 {
    width: 55%;
    align-self: center;
}

#digital .container .box02 .txt {
    width: 75%;
    margin: 30px auto;
    font-size: clamp(13px,1.6vw,16px);
}

#digital .con01 .box02 .balloon01 {
    width: 80%;
}

#digital .con01 .box02 .balloon02 {
    width: 80%;
    margin: 20px 0 0 auto;
}

#digital .con01 .box02 .balloon03 {
    width: 75%;
    margin: 0 auto;
}
#digital .con01 .box02 .balloon04 {
    width: 75%;
    margin: 10px auto 0;
}




#digital .con02 .box02 .balloon01 {
    width: 80%;
}

#digital .con02 .box02 .balloon02 {
    width: 80%;
    margin: 20px 0 0 auto;
}

#digital .con02 .box02 .list_wrap {
    max-width: 335px;
    width: 75%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 0;
}

#digital .con02 .box02 .list_wrap li {
    width: 47%;
}

#digital .con02 .box02 .list_wrap li .ttl {
    color: #7b6a3e;
    font-size: clamp(13px,1.4vw,15px);
    text-align: center;
    margin-top: 3px;
}

#digital .con03 .box01 .bottom {
    margin-left: 30px;
}

#digital .con03 .box01 .balloon01 {
    width: calc(100% + 30px);
    margin: 20px 0 0 -30px;
}

#digital .con03 .box01 .balloon_txt {
    width: 85%;
    margin: 20px auto 0;
    font-size: clamp(13px,1.6vw,16px);
}

#digital .con03 .box02 {
    width: 43%;
    margin: 0 auto;
}

#digital .con03 .box02 .txt {
    width: 100%;
}

#digital .con03 .box02 .top .lead {
    color: #7b6a3e;
    border-bottom: 1px solid #7b6a3e;
    padding-bottom: 10px;
    font-size: clamp(18px,2vw,23px);
    text-align: center;
}

#digital .con03 .box02 .top .txt {
    font-size: clamp(14px,1.6vw,18px);
    text-align: center;
    margin: 20px 0;
}

#digital .con03 .box02 .balloon02 {
    width: calc(100% + 30px);
    margin: 20px 0 0;
}

#digital .con03 .box02 .list_wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 0;
}

#digital .con03 .box02 .list_wrap li {
    width: 47%;
}

#digital .con03 .box02 .list_wrap li .ttl {
    color: #7b6a3e;
    font-size: clamp(13px,1.4vw,15px);
    text-align: center;
    margin-top: 3px;
}

/* SP調整 */
@media screen and (max-width:730px) {

    #digital {
        margin-top: 50px;
        padding: 40px 0;
    }

    #digital .contents {
        width: 80%;
    }

    #digital .container .num {
        width: 50%;
        margin: 0 15px 20px auto;
    }

    #digital .container_inner {
        padding: 20px 20px 30px;
        flex-direction: column;
    }

    #digital .container .box01 {
        width: 100%;
    }

    #digital .container .box01 .top .txt_wrap {
        width: 60%;
        padding: 10px 0 15px;
    }

    #digital .container .box01 .bottom .txt {
        margin: 10px 0 20px;
    }

    #digital .container .box02 {
        width: 100%;
    }

    #digital .container .box02 .txt {
        width: 100%;
        margin: 10px 0 20px;
    }


    #digital .con01 .box02 .balloon01 {
        width: 120%;
        margin: 20px 0 0 -20%;
        position: relative;
        z-index: 1;
    }

    #digital .con01 .box02 .balloon02 {
        width: 120%;
        margin: 20px -20% 0 0;
        position: relative;
        z-index: 1;
    }

    #digital .con01 .box02 .balloon03,
    #digital .con01 .box02 .balloon04 {
        width: 100%;
    }

    #digital .con02 .box02 .balloon01 {
        width: 120%;
        margin: 20px 0 0 -20%;
        position: relative;
        z-index: 1;
    }

    #digital .con02 .box02 .balloon02 {
        width: 120%;
        margin: 20px -20% 0 0;
        position: relative;
        z-index: 1;
    }

    #digital .con02 .box02 .list_wrap {
        width: 100%;
    }

    #digital .con03 .box01 .bottom {
        margin-left: 0;
    }

    #digital .con03 .box01 .balloon01 {
        width: 120%;
        margin: 20px 0 0 -20%;
        position: relative;
        z-index: 1;
    }

    #digital .con03 .box01 .balloon_txt {
        width: 100%;
        margin: 20px 0 40px;
    }

    #digital .con03 .box02 .top .txt {
        margin: 10px 0 20px;
    }

    #digital .con03 .box02 .balloon02 {
        width: 120%;
        margin: 20px -20% 0 0;
        position: relative;
        z-index: 1;
    }
}

#real {
    background-color: #f2eae3;
    padding: 50px 0 80px;
}

#real .real_img {
    max-width: 350px;
    width: 70%;
    margin: 30px auto 0;
}

#real .wrap01 {
    margin: 20px 0 0;
}

#real .wrap01 .txt {
    text-align: center;
    font-size: clamp(16px,1.8vw,18px);
}

#real .wrap01 .image {
    max-width: 1000px;
    margin: 40px auto 0;
}

#real .wrap02 {
    max-width: 800px;
    width: 90%;
    margin: 80px auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 55px 5%;
}

#real .wrap02 .top {
    background: linear-gradient( to right, #807346 0%, #B69D60 50%, #807346 100% );
    outline: 1px solid #fff;
    outline-offset: -8px;
    padding: 20px;
    position: relative;
}

#real .wrap02 .top .lead {
    text-align: center;
    font-size: clamp(20px,2vw,20px);
    color: #fff;
    margin-bottom: 20px;
}

#real .wrap02 .top .image_wrap {
    display: flex;
    justify-content: space-between;
}

#real .wrap02 .top .image_wrap .image {
    width: 50%;
}

#real .wrap02 .top::after {
    position: absolute;
    content: url(../images/gokinjo/real_arrow.svg);
    width: 80px;
    translate: -50% 100%;
    bottom: 1px;
    left: 50%;
    z-index: 1;
}


#real .wrap02 .bottom {
    margin-top: 40px;
    background: linear-gradient( to right, #807346 0%, #B69D60 50%, #807346 100% );
    clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%, 0% 40px);
    padding: 3px;
}

#real .wrap02 .bottom_inner {
    position: relative;
    background-color: #fff;
    clip-path: polygon(40px 0%, 100% 0, 100% 100%, 0 100%, 0 40px, 40px 40px);
    padding:30px 20px 20px;
}

#real .wrap02 .bottom .event_lead {
    max-width: 90px;
    margin: 0 auto 20px;
}

#real .wrap02 .bottom .lead {
    background: linear-gradient( to right, #807346 0%, #B69D60 50%, #807346 100% );
    color: #ffffff;
    padding: 8px 0;
    text-align: center;
    font-size: clamp(22px,2.3vw,23px);
}

#real .wrap02 .bottom .txt {
    text-align: center;
    color: #7b6a3e;
    font-size: clamp(13px,1.4vw,14px);
    margin-top: 13px;
}

#real .wrap02 .box05 .flex {
    margin: 20px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 20px;
}

#real .wrap02 .box05 .flex .image {
    width: 35%;
}

#real .wrap02 .box05 .flex .txt_wrap {
    width: 50%;
    color: #7b6a3e;
}

#real .wrap02 .box05 .flex .flex_ttl {
    font-size: clamp(17px,2vw,20px);
}

#real .wrap02 .box05 .flex .flex_txt {
    font-size: clamp(12px,1.2vw,12px);
}

#real .wrap02 .box06 {
    display: flex;
    flex-direction: column;
}

#real .wrap02 .box06 .bottom {
    margin-bottom: 20px;
}

#real .wrap02 .box06 .note {
    margin-top: auto;
    font-size: clamp(10px,1.2vw,12px);
}


.kids_design {
    max-width: 800px;
    width: 90%;
    margin: 50px auto;
    /* display: flex;
    justify-content: space-between;
    align-items: center; */
}

.kids_design .box01 {
    width: 40%;
}

.kids_design .box02 {
    width: 15%;
}

.kids_design .box03 .txt {
    /* border-top: 1px solid #231815;
    border-bottom: 1px solid #231815;
    padding: 20px 0; */
    text-align: center;
    font-size: clamp(10px,1.2vw,13px);
}


/* SP調整 */
@media screen and (max-width:730px) {

    #real {
        padding: 40px 0;
    }

    #real .wrap01 {
        margin: 20px 0 0;
    }

    #real .wrap01 .image {
        margin-top: 0;
    }

    #real .wrap02 {
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        gap: 50px 0;
    }

    #real .wrap02 .top::after {
        width: 75px;
    }

    #real .wrap02 .bottom {
        margin-top: 35px;
    }




    .kids_design {
        /* display: grid;
        grid-template-columns: 1fr 28%;
        gap: 0 5%; */
        margin: 30px auto 80px;
    }

    .kids_design .box01 {
        width: 90%;
        margin: 0 auto;
    }

    .kids_design .box02 {
        width: 90%;
        margin: 0 auto;
        grid-column: 2;
        grid-row: 1/3;
    }

    .kids_design .box03 .txt {
        /* padding: 15px 0;
        margin: 15px 0 0 0; */
    }
}