/* カラー定義 */
:root {
    --bg01: #a0d6dd;
    --bg02: #bcd959;
    --bg03: #8ed6f6;
    --bg04: #d0b0d2;
    --bg05: #9cd8d6;
    --bg06: #a0d6dd;
    --cyan: #6cc4c2;
    --red: #e84709;
    --blue: #00b0ec;
    --font-mplus:"M PLUS Rounded 1c", sans-serif;

}





/* =================================================
ナビゲーション（PC）
================================================= */

#main #main_wrapper {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    #breadcrumb{
        width: 100%;
        background: var(--cyan);
    }

    #sidenav_pc .sidenav_pc_contents {
        width: 170px;
        height: auto;
    }
}

#main #main_wrapper.bg01{
    background: var(--bg01);

    .sidenav_pc_contents{
        background: var(--bg01);
    }
}

#main #main_wrapper.bg02{
    background: var(--bg02);

    .sidenav_pc_contents{
        background: var(--bg02);
    }
}
#main #main_wrapper.bg03{
    background: var(--bg03);

    .sidenav_pc_contents{
        background: var(--bg03);
    }
}
#main #main_wrapper.bg04{
    background: var(--bg04);

    .sidenav_pc_contents{
        background: var(--bg04);
    }
}
#main #main_wrapper.bg05{
    background: var(--bg05);
    background-image: linear-gradient(-90deg, #fff 50%, transparent 50%);
    background-size: 4px 4px;

    .sidenav_pc_contents{
        background: var(--bg05);
        background-image: linear-gradient(-90deg, #fff 50%, transparent 50%);
        background-size: 4px 4px;
    }
}
#main #main_wrapper.bg06{
    background: var(--bg06);

    .sidenav_pc_contents{
        background: var(--bg06);
    }
}



#main #main_wrapper #sidenav_pc .sidenav_pc_contents span {
    font-size: 0.8em;
}

#main #main_wrapper #sidenav_pc .sidenav_pc_contents ul {
    width: 160px;
    margin: 170px 0 80px 0;
}

#main #main_wrapper #sidenav_pc .sidenav_pc_contents
.sidenav_pc_container {

    li{
        margin-bottom: 15px;
        position:relative;

    }
    li a{
        display: block;
        padding-left: 14px;
        padding: 20px 10px 20px 15px;
        position:relative;
        font-weight: 700;
    }

    li:nth-child(1) a{
        font-size: 16px;
        background: url(../../images/troubles/menu_01.svg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .red{
            font-weight: 600;
            color: var(--red);
            font-size: 16px;
        }
    }
    li:nth-child(2) a{
        font-size: 17px;
        background: url(../../images/troubles/menu_02.svg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        color: #fff;
        .sub-txt{
            font-size: 14px;
            color: #000;
            font-weight: 600;
        }
    }
    li:nth-child(3) a{
        font-size: 17px;
        color: #fff;
        background: url(../../images/troubles/menu_03.svg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .sub-txt{
            font-size: 14px;
            color: #000;
            font-weight: 600;
        }
    }
    li:nth-child(4) a{
        font-size: 17px;
        color: #fff;
        background: url(../../images/troubles/menu_04.svg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .sub-txt{
            font-size: 14px;
            color: #000;
            font-weight: 600;
        }
    }
    li:nth-child(5) a{
        font-size: 13px;
        background: url(../../images/troubles/menu_05.svg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .normal{
            font-size: 13px;
            font-weight: 400;
        }
    }
    li:nth-child(6) a{
        font-size: 15px;
        background: url(../../images/troubles/menu_06.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position:relative;

        padding: 40px 10px 40px 30px;
    }
    li:nth-child(6).current-menu06 a{
        background: none;
        z-index: 1;
    }

    li:nth-child(6).current-menu06 a::after{
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 118%;
        height: 100%;
        background: url(../../images/troubles/menu_06.png);
        background-repeat: no-repeat;
        background-size: cover;
        z-index: -1;
    }


    li:nth-child(6) a:before{
        content: "";
        display: block;
        position: absolute;
        width: 18px;
        height: 59px;
        background: url(../../images/troubles/pin.svg);
        background-repeat: no-repeat;
        background-size: contain;
        top:-10px;
        left: 5px;
    }

    .current-menu01::before{
        content: "";
        position:absolute;
        width: 100%;
        height: 100%;
        background: url(../../images/troubles/menu_01.svg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        top: 0;
        left: 20px;
    }
    .current-menu02::before{
        content: "";
        position:absolute;
        width: 100%;
        height: 100%;
        background: url(../../images/troubles/menu_02.svg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        top: 0;
        left: 20px;
    }
    .current-menu03::before{
        content: "";
        position:absolute;
        width: 100%;
        height: 100%;
        background: url(../../images/troubles/menu_03.svg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        top: 0;
        left: 20px;
    }
    .current-menu04::before{
        content: "";
        position:absolute;
        width: 100%;
        height: 100%;
        background: url(../../images/troubles/menu_04.svg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        top: 0;
        left: 20px;
    }
    .current-menu05::before{
        content: "";
        position:absolute;
        width: 100%;
        height: 100%;
        background: url(../../images/troubles/menu_05.svg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        top: 0;
        left: 20px;
    }
}

#main #main_wrapper #sidenav_pc .sidenav_pc_contents ul li a {
    color: #000;
    font-family: var(--font-mplus);
    font-weight: 600;
}



#sidenav_sp {
    display: none;
}

@media screen and (max-width:768px) {
    #main #main_wrapper #sidenav_pc {
        display: none;
    }
}

/* =================================================
    コンテンツ
================================================= */

#main #main_wrapper .main_content {
    width: 790px;
    padding-right: 20px;
    font-family: var(--font-mplus);

    .red{
        color: var(--red);
    }

    .troubles_title{
        padding-top: 30px;
        padding-bottom: 10px;
        padding-left: 20px;

        .lead-txt{
            font-weight: 800;
            font-size: 16px;
            letter-spacing: 0.1em;
            position:relative;
            z-index: 2;
            span{
                font-weight: 800;
                color: #fff;
            }
        }
        .ttl-txt{
            margin-top: 10px;
            padding-left: 30px;
            font-weight: 800;
            font-size: 29px;
            position: relative;
            line-height: 1.2;
            letter-spacing: 0.1em;
            position: relative;
            display: inline-block;
            span{
                font-weight: 800;
            }
        }

        .lead-txt:before{
            position: absolute;
            content: "";
            display: block;
            width: 50px;
            height: 50px;
            top:-10px;
            left:-15px;
            background: url(../../images/troubles/top_img_01.png);
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }

        .ttl-txt:before{
            position: absolute;
            content: "";
            display: block;
            width: 50px;
            height: 70px;
            bottom: 0px;
            right: -75px;
            background: url(../../images/troubles/top_img_02.png);
            background-repeat: no-repeat;
            background-size: contain;
        }
    }

    .troubles_title.second-page{
        padding-left: 0;
        display: flex;
        justify-content: flex-start;
        column-gap: 170px;
        align-items: flex-end;
        /*padding-right: 20px;*/
        position: relative;

        .ttl-txt02{
            margin-top: 10px;
            padding-left: 20px;
            font-weight: 800;
            font-size: 32px;
            position: relative;
            line-height: 1.2;
            letter-spacing: 0.1em;
            position: relative;
            z-index: 2;
            font-weight: 800;
            display: block;
            .padding-l {
                padding-left: 60px;
            }
        }
        .lead-txt02{
            font-weight: 800;
            font-size: 20px;
            position:relative;
            padding-left: 35px;
            .small{
                font-weight: 800;
                font-size: 14px;
            }
        }
        .ttl-txt02:before{
            position: absolute;
            content: "";
            display: block;
            width: 85px;
            height: 85px;
            top:-15px;
            left:5px;
            background: url(../../images/troubles/top_img_01.png);
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }

        .spec{
            position: relative;
            li{
                font-size: 12px;
                font-weight: 600;
                color: #000;
                margin-bottom: 5px;
                position: relative;
            }
            li::before{
                position: absolute;
                content: "";
                display: block;
                width: 1em;
                height: 1em;
                background: url(../../images/troubles/circle.png);
                background-repeat: no-repeat;
                background-size: contain;
                top: 3px;
                left: -15px;
            }
        }

        .ttl-txt03{
            margin-top: 10px;
            margin-bottom: 20px;
            padding-left: 40px;
            font-weight: 800;
            font-size: 28px;
            position: relative;
            line-height: 1.4;
            letter-spacing: 0.05em;
            position: relative;
            z-index: 2;
            font-weight: 800;
            display: block;

        }

        .ttl-txt03:before{
            position: absolute;
            content: "";
            display: block;
            width: 115px;
            height: 115px;
            top:-5px;
            left:5px;
            background: url(../../images/troubles/top_img_01.png);
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }

    }

    .troubles_title.page02 {

        column-gap: 140px;
    }

    .troubles_title::before{
        content: "";
        position: absolute;
        display: block;
        width: 120px;
        height: 140px;
        background: url(../../images/troubles/chara01_01.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 0 100%;
        bottom: -1px;
        left: 37%;
    }
    .troubles_title.chara-none::before{
        display: none;
    }

    .troubles_title.page02::before{
        content: "";
        position: absolute;
        display: block;
        width: 120px;
        height: 140px;
        background: url(../../images/troubles/chara02_01.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 0 100%;
        bottom: -1px;
        left: 37%;
    }

    .troubles_title.page03::before{
        content: "";
        position: absolute;
        display: block;
        width: 120px;
        height: 140px;
        background: url(../../images/troubles/chara03_01.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 0 100%;
        bottom: -1px;
        left: 39%;
    }

    .content_body{
        width: 100%;
        padding: 50px 0 10px 30px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 40px;
        margin-bottom: 30px;
    }

    .content_body.page01,
    .content_body.page02,
    .content_body.page03{
        background-color: #ffffff;
        background-image: radial-gradient(circle, #cce37f 1px, transparent 1px);
        background-position: 0 0;
        background-size: 4px 4px;
        padding: 0 20px 10px 20px;
    }

    .content_body.page02{
        background-image: radial-gradient(circle, var(--bg03) 1px, transparent 1px);
    }

    .content_body.page03{
        background-image: radial-gradient(circle, var(--bg04) 1px, transparent 1px);
    }

    .content_body.page05{
        margin-top: 40px;
        padding: 40px 30px 10px 30px;
    }


    .text-common{
        padding-left: 30px;
        padding-right: 30px;
        p {
            font-size: 17px;
            font-weight: 600;
            line-height: 1.8;
            margin-bottom: 15px;

            .red{
                font-weight: 600;
            }
        }
    }
}

#main #main_wrapper .main_content.bg01{
    background: var(--bg01);
}


.image-common01{
    width: 100%;
    padding-left: 30px;
    padding-right: 60px;
    margin-top: 50px;

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

.image-common02{
    width: 100%;
    padding-left: 0;
    padding-right: 0;

    img{
        width: 100%;
        height: auto;
        vertical-align: bottom;
    }
}

.ttl-area01{
    display: flex;
    justify-content: center;
    margin-top: 100px;
    h2{
        span {
            font-size: 22px;
            font-weight: 800;
            position: relative;
            color: var(--red);
            border-bottom: 3px dotted var(--red);
            display: block;
            letter-spacing: 0.1em;
            position: relative;
        }
        span:last-child::after{
            content: "";
            position: absolute;
            display: block;
            width: 20px;
            height: 30px;
            bottom: 36px;
            right: 20px;
            background: url(../../images/troubles/top_img_04.png);
            background-repeat: no-repeat;
            background-size: contain;
        }
    }
}

.link-area{
    padding-left: 30px;
    margin-top: 30px;
    .link-part{
        display: flex;
        background-color: #ffffff;
        background-image: radial-gradient(circle, #cce37f 1px, transparent 1px);
        background-position: 0 0;
        background-size: 3px 4px;
        padding: 10px 0 10px 20px;
        clip-path: polygon(100% 0, 100% 100%, 0% 100%, 3% 50%, 0% 0%);
        justify-content: space-between;
        margin-bottom: 15px;

        .ttl-block{
            padding-left: 30px;
            h3{
                font-size:  22px;
                font-weight: 800;
                color: #000;
                position: relative;
                z-index: 2;
            }
            .lead-txt{
                font-size: 17px;
                font-weight: 700;
                color: #000;
            }
            .case-txt{
                font-size: 13px;
                font-weight: 600;
                color: #000;
                padding: 0 5px;
                text-align: center;
                margin-top: 10px;
                width: 200px;
                background:#fff;
                border: 3px solid var(--bg02);
                border-radius: 30px;
                span{
                    font-size: 15px;
                    font-weight: 700;
                    color: #000;
                }
                .normal{
                    font-size: 13px;
                    font-weight: 400;
                }
                transform: translateX(120px);
            }
        }
        .image-common{
            width: 180px;
            padding-top: 5px;
            img{
                width: 100%;
                height: auto;
            }
        }
        .link-ttl{
            position: relative;
            display: flex;
            align-items: center;
            background: url(../../images/troubles/link_part_01.png);
            background-repeat: no-repeat;
            background-size: cover;
            padding-left: 30px;
            padding-right: 20px;
            li{
                display: block;
                -webkit-writing-mode: vertical-rl; /* Safari用 */
                writing-mode: vertical-rl;        /* 基本の指定（右から左へ流れる） */
            }
            li:last-child{
                color: #fff;
                font-size: 13px;
                font-weight: 700;
            }
            li:first-child{
                color: #000;
                font-size: 13px;
                font-weight: 700;
            }
        }

        .link-ttl::before {
            content: "";
            position: absolute;
            display: block;
            width: 170px;
            height: 170px;
            top: 5%;
            left: -240px;
            background: url(../../images/troubles/top_img_05.png);
            background-repeat: no-repeat;
            background-size: contain;
            z-index: 1;
        }
    }
}

.link-area a:nth-child(2){
    .link-ttl::before {
        background: url(../../images/troubles/top_img_06.png);
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 1;
    }
    .link-part {
        background-image: radial-gradient(circle, var(--bg03) 1px, transparent 1px);

        .ttl-block {
            .case-txt {
                border: 3px solid var(--bg03);
            }
        }
        .link-ttl {
            background: url(../../images/troubles/link_part_02.png);
            background-repeat: no-repeat;
            background-size: cover;
        }
    }
}

.link-area a:nth-child(3){
    .link-ttl::before {
        background: url(../../images/troubles/top_img_07.png);
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 1;
    }
    .link-part {
        background-image: radial-gradient(circle, #d6cad6 1px, transparent 1px);

        .ttl-block {
            .case-txt {
                border: 3px solid var(--bg04);
            }
        }
        .link-ttl {
            background: url(../../images/troubles/link_part_03.png);
            background-repeat: no-repeat;
            background-size: cover;
        }
    }
}

.ttl-area02{
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 100px;
    text-align: center;
    h2{
        font-size: 22px;
        font-weight: 700;
        position: relative;
        display: block;
        letter-spacing: 0.1em;
        position: relative;
        .cyan{
            color: var(--cyan);
            font-weight: 700;
        }
    }
}

/* 下層ページ */
.block-area02{
    background: #fff;
    border-radius: 20px;
    margin-left: 20px;
    margin-right: 20px;
    box-sizing: border-box;
    position: relative;
    border: 3px solid var(--bg02);

    .evaluation{
        padding:5px 20px 5px 40px;
        background: var(--bg02);
        display: inline-block;
        font-size: 15px;
        font-weight: 700;
        border-radius: 30px;
        position: absolute;
        top: -17px;
        left: 20px;

    }
    .evaluation::before{
        position: absolute;
        content: "";
        display: block;
        width: 1em;
        height: 1em;
        background: url(../../images/troubles/circle.png);
        background-repeat: no-repeat;
        background-size: contain;
        top: 8px;
        left: 20px;
    }
    .question{
        font-weight: 700;
        font-size: 18px;
        padding: 30px 0 30px 90px;
        position: relative;
        .red{
            color:var(--red);
            font-weight: 700;
        }
        .blue{
            color:var(--blue);
            font-weight: 700;
        }
    }
    .question::before{
        position: absolute;
        content: "";
        display: block;
        width: 40px;
        height: 50px;
        background: url(../../images/troubles/question_icon.png);
        background-repeat: no-repeat;
        background-size: contain;
        top: 23px;
        left: 40px;
    }

    .wrapper01{
        border-bottom: 3px solid var(--bg02);
        padding-bottom: 10px;
        position: relative;
    }
    .wrapper01:last-child{
        border-bottom: none;
        padding-bottom: 0;
    }

    .image-common01{
        width: 100%;
        margin-top: 0;
        padding: 0 20px 0 100px;
        img{
            width: 100%;
            height: auto;
        }
    }
    .image-common02{
        width: 100%;
        padding: 0 40px 0 50px;
        img{
            width: 100%;
            height: auto;
        }
    }

    .ttl-area{
        display: flex;
        justify-content: space-between;
        padding-left: 50px;
        padding-top: 30px;
        box-sizing: border-box;
        div{
            width: 33%;
            display: flex;
            align-items: center;
            box-sizing: border-box;


            p:first-child{
                font-size: 30px;
                font-weight: 700;
                color: var(--cyan);
                margin-right: 5px;
            }
            p:last-child{
                font-size: 17px;
                font-weight: 700;
            }
        }
        div:first-child{
            margin-right: 30px;
        }
        div:nth-child(2){
            margin-right: 15px;
        }

    }

    .normal{
        font-weight: 400;
        font-family: var(--font-mplus);
    }
}

.block-area02.page02{

    border: 3px solid var(--bg03);
    .evaluation {
        background: var(--bg03);
    }

    .wrapper01 {
        border-bottom: 3px solid var(--bg03);
    }
    .wrapper01:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}
.block-area02.page03{

    border: 3px solid var(--bg04);
    .evaluation {
        background: var(--bg04);
    }

    .wrapper01 {
        border-bottom: 3px solid var(--bg04);
    }
    .wrapper01:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}

.block-area03{
    position: relative;
    margin-top: 50px;
    padding-left: 20px;
    .wrapper01{
        width: 75%;
        background: #fff;
        border-radius: 20px;
        border: 5px dotted var(--bg02);
        padding: 0 30px 20px 30px;

    }

    .evaluation{
        padding:5px 20px 5px 40px;
        background: var(--bg02);
        display: inline-block;
        font-size: 15px;
        font-weight: 700;
        border-radius: 30px;
        position: relative;
        top: -17px;
        left: -10px;

    }
    .evaluation::before{
        position: absolute;
        content: "";
        display: block;
        width: 1em;
        height: 1em;
        background: url(../../images/troubles/circle.png);
        background-repeat: no-repeat;
        background-size: contain;
        top: 8px;
        left: 20px;
    }

    .image-common01{
        width: 100%;
        margin-top: 0;
        padding: 0;
        img{
            width: 100%;
            height: auto;
        }
    }
}

.block-area03::after{
    content: "";
    position: absolute;
    display: block;
    width: 110px;
    height: 135px;
    background: url(../../images/troubles/chara01_02.png);
    background-repeat: no-repeat;
    background-size: contain;
    right: 44px;
    bottom: 0;
}


.block-area03 .wrapper01::before{
    content: "";
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 5px dotted var(--bg02);
    border-radius: 50px;
    right: 170px;
    top:-10px;
}
.block-area03 .wrapper01::after{
    content: "";
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    background: #fff;
    border: 5px dotted var(--bg02);
    border-radius: 50px;
    right: 150px;
    top:15px;
}

.block-area03.page02{
    .wrapper01 {
        border: 5px dotted var(--bg03);
    }
    .evaluation {
        background: var(--bg03);
    }
    .wrapper01::before,
    .wrapper01::after {
        border: 5px dotted var(--bg03);
    }
}
.block-area03.page02::after {
    background: url(../../images/troubles/chara02_02.png);
    background-repeat: no-repeat;
    background-size: contain;
}


.block-area03.page03{
    .wrapper01 {
        border: 5px dotted var(--bg04);
    }
    .evaluation {
        background: var(--bg04);
    }
    .wrapper01::before,
    .wrapper01::after {
        border: 5px dotted var(--bg04);
    }
}
.block-area03.page03::after {
    background: url(../../images/troubles/chara03_02.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 80px;
    height: 150px;
}



.block-area04{
    position: relative;
    margin-top: 80px;
    padding-left: 20px;
    padding-right: 30px;
    margin-bottom: 150px;
    .wrapper01{
        width: 100%;
        background: #dff0f2;
        border-radius: 0 10px 50px 0;
        padding: 0 40px 20px 0;

    }

    .dr_evaluation{
        padding:5px 30px 5px 20px;
        background: var(--bg02);
        display: inline-block;
        font-size: 17px;
        color: #fff;
        background: #6cc4c2;
        font-weight: 700;
        border-radius: 0 30px 30px 0;
        border-left: 20px solid #28b5b3;
        position: relative;
        top: -17px;
        left: 0;

    }
    .evaluation::before{
        position: absolute;
        content: "";
        display: block;
        width: 1em;
        height: 1em;
        background: url(../../images/troubles/circle.png);
        background-repeat: no-repeat;
        background-size: contain;
        top: 8px;
        left: 20px;
    }

    .image-common01{
        width: 100%;
        margin-top: 0;
        padding: 0 10px 0 60px;
        img{
            width: 100%;
            height: auto;
        }
    }

    .split-area{
        position: relative;
        margin-top: 30px;
        .memo-board{
            position: absolute;
            bottom: -30px;
            left: -20px;
            width: 120px;
            height: 160px;
            background: url(../../images/troubles/memo_board.png);
            background-repeat: no-repeat;
            background-size: contain;
            display: flex;
            align-items: center;
            justify-content: center;
            p{
                font-size: 13px;
                font-weight: 600;
                padding-top: 20px;
                position: relative;
            }
            p::after{
                position: absolute;
                content: "";
                display: block;
                width: 19px;
                height: 28px;
                background: url(../../images/troubles/fire.png);
                background-repeat: no-repeat;
                background-size: contain;
                bottom: -10px;
                right: 0px;
            }
        }
        .comment01{
            position: relative;
            padding-left: 120px;
            font-size: 16px;
            font-weight: 500;
            .red{
                font-weight: 500;
            }
        }
        .comment02{
            margin-top: 10px;
            position: relative;
            padding-left: 120px;
            font-size: 16px;
            font-weight: 500;
            .red{
                font-weight: 500;
            }
        }

    }
}

.block-area04:before{
    content: "";
    position: absolute;
    display: block;
    width: 44px;
    height: 27px;
    background: url(../../images/troubles/fukidashi.png);
    background-repeat: no-repeat;
    background-size: contain;
    bottom: -23px;
    right: 150px;
}

.block-area04:after{
    content: "";
    position: absolute;
    display: block;
    width: 106px;
    height: 104px;
    background: url(../../images/troubles/dr01.png);
    background-repeat: no-repeat;
    background-size: contain;
    bottom: -55px;
    right: 30px;
}

.block-area04.page02:after {
    background: url(../../images/troubles/dr02.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.block-area04.page03:after {
    background: url(../../images/troubles/dr03.png);
    background-repeat: no-repeat;
    background-size: contain;
}


.block-area05 {
    position: relative;
    margin-top: 0;
    padding-left: 40px;
    padding-right: 70px;
    margin-bottom: 40px;
    
    .ttl01{
        position: relative;
        font-size: 22px;
        color: var(--cyan);
        font-weight: 700;
        text-align: center;
        margin-bottom: 30px;
        
    }

    .wrapper01 {
        width: 100%;


        padding: 10px 0 0 0;
        margin-bottom: 20px;
        .ttl02{
            display: inline-block;
            border-radius: 20px 20px 0 0;
            font-size: 18px;
            background: var(--cyan);
            font-weight: 700;
            color: #fff;
            padding: 8px 50px;
            position: relative;
        }
        .ttl02::before{
            content: "";
            position: absolute;
            display: block;
            width: 100%;
            height: 20px;
            background: var(--cyan);
            left: 0;
            bottom: -20px;
        }


        .wrapper02{
            padding: 40px 20px 40px 70px;
            background: #fff;
            border: 3px solid #e4f3f5;
            border-radius: 20px;
            position: relative;
            ul{
                display: flex;
                flex-wrap: wrap;
                column-gap: 40px;
                row-gap: 10px;
                li{
                    color: var(--cyan);
                    font-size: 16px;
                    font-weight: 400;
                    position: relative;

                }
                li::before{
                    content: "";
                    position: absolute;
                    display: block;
                    width: 1em;
                    height: 1em;
                    background: url(../../images/troubles/circle02.png);
                    background-repeat: no-repeat;
                    background-size: contain;
                    top: 50%;
                    left: -20px;
                    transform: translateY(-50%);
                }
            }
        }
        .wrapper02::before{
            content: "";
            position: absolute;
            display: block;
            width: 40px;
            height: 30px;
            background: url(../../images/troubles/example_icon.png);
            background-repeat: no-repeat;
            background-size: contain;
            top: 7px;
            left: 15px;
        }
    }
}

.block-area06 {
    position: relative;
    margin-top: 0;
    padding-left: 40px;
    padding-right: 70px;
    margin-bottom: 170px;
    .wrapper01 {
        display: flex;
        justify-content: space-between;
    }

    .lead-txt{
        font-size: 18px;
        font-weight: 800;
        line-height: 1.8;
        .cyan{
            color: var(--cyan);
            font-weight: 800;
        }
    }
    .image-common{
        width: 20%;
        img{
            width: 100%;
            height: auto;
        }
    }


}



.content_body.page05{
    .ttl{
        position: relative;
        font-size: 26px;
        font-weight: 800;
        color: #45bab8;
        width: 100%;
        padding-left: 20px;
    }
    .ttl:after{
        content: "";
        position: absolute;
        display: block;
        width: 300px;
        height: 220px;
        background: url(../../images/troubles/dr_message.png);
        background-repeat: no-repeat;
        background-size: contain;
        top: -70px;
        right: -65px;
    }
}

.block-area07{
    margin-top: 30px;
    padding-left: 20px;
    padding-right: 20px;
    .supervision{
        text-align: right;
        font-size: 14px;
        font-weight: 500;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        color: #000;
        margin-bottom: 30px;

    }
    .main-txt{
        font-size: 15px;
        margin-bottom: 20px;
        font-weight: 500;
        .bold{
            font-weight: 700;
        }
    }

    .image-common {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 70px;
        margin-bottom: 340px;
        img{
            width: 100%;
            height: auto;
        }
    }

    .inline-number{
        display: inline-block;
        width: 1.5em;
        height: auto;
        padding-left: 2px;
        padding-right: 2px;
        transform: translateY(3px);
    }
}


p.txt-pagetop {
    margin: 0 0 30px;
    text-align: right;
}
p.txt-pagetop.pr-adjust01{
    padding-right: 30px;
}

.supervision{
    font-weight: 400;
    strong{
        font-weight: 400;
    }

}


.mt30{
    margin-top: 30px;
}


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

    #main #main_wrapper .main_content .student_content .ttl01 {
        height: auto;
        min-height: 62px;
        font-size: 24px;
        padding: 10px 4%;
    }
    .ttl02_text {
        h3 {
            font-size: 20px;
        }
        .small{
            font-size: 16px;
        }
    }

    .content_body {
        padding: 30px 4% 10px;
    }



    #main #breadcrumb {
        height: 0;
        padding: 0;
    }

    .under_header{
        width: 100%;
        padding: 3px 20px;
        background: var(--cyan);

        text-align: center;
        .lead-txt{
            font-size: 14px;
            font-weight: 700;
            color: #fff;
        }
    }

    .sub-menu{
        display: flex;
        flex-wrap: wrap;
        font-family: var(--font-mplus);
        background: var(--bg01);
        justify-content: space-between;

        li{
            width: 33%;
            display: flex;
            align-items: center;
            border: none;
            margin-top: 5px;

            padding: 5px 0;
            a{
                padding: 10px 5px 10px 10px;
                font-size: 13px;
                font-weight: 600;
                line-height: 1.2;
                width: 100%;
            }
        }
        li:nth-child(1) {
            background: url(../../images/troubles/menu_01.svg);
            background-repeat: no-repeat;
            background-size: 100% 100%;

            a {
                font-size: 12px;
                color: #000;

                .red {
                    font-weight: 600;
                    color: var(--red);
                }
            }
        }
        li:nth-child(2) {

            background: url(../../images/troubles/menu_02.svg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            a {
                font-size: 13px;
                color: #fff;

                .sub-txt {
                    font-weight: 600;
                    color: #000;
                    font-size: 12px;
                    margin-top: 5px;
                    display: inline-block;
                }
            }
        }
        li:nth-child(3) {

            background: url(../../images/troubles/menu_03.svg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            a {
                font-size: 13px;
                color: #fff;

                .sub-txt {
                    font-weight: 600;
                    color: #000;
                    font-size: 12px;
                    margin-top: 5px;
                    display: inline-block;
                }
            }
        }
        li:nth-child(4) {

            background: url(../../images/troubles/menu_04.svg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            a {
                font-size: 13px;
                color: #fff;

                .sub-txt {
                    font-weight: 600;
                    color: #000;
                    font-size: 12px;
                    margin-top: 5px;
                    display: inline-block;
                }
            }
        }
        li:nth-child(5) {

            background: url(../../images/troubles/menu_05.svg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            a {
                font-size: 12px;
                color: #000;
            }
        }
        li:nth-child(6) {

            background: url(../../images/troubles/menu_06_sp.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            box-shadow: 10px 3px 5px 0 rgba(0, 0, 0, 0.3);
            position: relative;
            a {
                font-size: 13px;
                color: #000;
                padding-left: 23px;
            }
        }

        li:nth-child(6)::before {
            content: "";
            position: absolute;
            display: block;
            width: 15px;
            height: 40px;
            background: url(../../images/troubles/pin.svg);
            background-repeat: no-repeat;
            background-size: contain;
            top: -7px;
            left: 10px;
        }
    }

    #main #main_wrapper .main_content {
        width: 100%;
        padding-right: 0;
        font-family: var(--font-mplus);

        .red{
            color: var(--red);
        }

        .troubles_title{
            padding-left: 20px;
            padding-right: 0;
            padding-top: 10px;

            .lead-txt{
                font-size: 3.5vw;
                letter-spacing: 0;
            }
            .ttl-txt{
                padding-left: 2vw;
                padding-right: 0;
                font-size: 5.5vw;
                letter-spacing:0;
            }

            .lead-txt:before{
                width: 7vw;
                height: 6vw;
                top:0;
                left:-10px;
            }

            .ttl-txt:before{
                width: 6vw;
                height: 8vw;
                bottom: 0;
                right: -7vw;
            }
        }

        .content_body{
            width: 100%;
            padding: 30px 5px 10px 5px;
            border-radius: 30px;
        }

        .text-common{
            padding-left: 20px;
            padding-right: 20px;
            p {
                font-size: 16px;
                line-height: 1.6;
            }
        }

        .troubles_title.second-page {
            padding-right: 0;
            flex-wrap: wrap;
            justify-content: center;

            .ttl-txt02 {
                margin-top: 20px;
                padding-left: 30px;
                padding-right: 30px;
                font-size: 26px;
                letter-spacing: 0;

                .padding-l {
                    padding-left: 0;
                }
            }

            .ttl-txt02:before {
                position: absolute;
                content: "";
                display: block;
                width: 70px;
                height: 70px;
                top: -10px;
                left: 17px;
                background: url(../../images/troubles/top_img_01.png);
                background-repeat: no-repeat;
                background-size: contain;
                z-index: -1;
            }

            .ttl-txt03{
                font-size: 22px;
                margin-bottom: 0;
                .padding-l{
                    padding-left: 50px;
                }
            }

            .ttl-txt03:before {
                width: 85px;
                height: 85px;
                top: -5px;
                left: 10px;
            }

            .lead-txt02 {
                padding-left: 95px;
            }

            .spec {
                padding-left: 30px;
                padding-right: 20px;

                li {
                    font-size: 14px
                }

                li::before {
                    left: -18px;
                }
            }
        }

        .troubles_title::before {
            content: "";
            position: absolute;
            display: block;
            width: 90px;
            height: 100px;
            bottom: 10px;
            left: auto;
            right: 10px;
        }

        .troubles_title.page02::before {
            width: 90px;
            height: 100px;
            bottom: 10px;
            left: auto;
            right: 10px;
        }
        .troubles_title.page03::before {
            width: 90px;
            height: 100px;
            bottom: 10px;
            left: auto;
            right: 10px;
        }

    }

    .image-common01 {
        width: 100%;
        padding-left: 20px;
        padding-right:20px;
        margin-top: 20px;
    }

    .image-common02 {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .ttl-area01 {
        margin-top: 50px;
        h2 {
            span {
                font-size: 18px;
                letter-spacing: 0;
            }

            span:last-child::after {
                width: 20px;
                height: 20px;
                bottom: 36px;
                right: 5px;
            }
        }
    }




    .link-area{
        padding-left: 20px;
        margin-top: 20px;
        .link-part{
            padding: 10px 0 10px 20px;
            margin-bottom: 15px;

            .ttl-block{
                padding-left: 10px;
                z-index: 2;

                h3{
                    font-size:  17px;
                }
                .lead-txt{
                    font-size: 14px;
                }
                .case-txt{
                    font-size: 13px;
                    padding: 0 5px;
                    width: 200px;
                    background:#fff;
                    border: 3px solid var(--bg02);
                    border-radius: 30px;
                    span{
                        font-size: 14px;
                        font-weight: 700;
                        color: #000;
                    }
                    .normal{
                        font-size: 12px;
                    }
                    transform: translateX(0);
                }
            }
            .image-common{
                width: 180px;
                padding-top: 5px;
                img{
                    width: 100%;
                    height: auto;
                }
            }
            .link-ttl{
                padding-left: 20px;
                padding-right: 10px;
                li{
                }
                li:last-child{
                    font-size: 13px;
                    line-height: 1.2;
                }
                li:first-child{
                    line-height: 1.4;
                }
            }

            .link-ttl::before {
                width: 100px;
                height: 100px;
                top: 25%;
                left: -90px;
            }
        }
    }

    .ttl-area02 {
        h2 {
            font-size: 18px;
            letter-spacing: 0;
        }
    }


    .block-area02 {
        margin-left: 10px;
        margin-right: 10px;
        border: 2px solid var(--bg02);
        margin-top: 10px;

        .evaluation {
            padding: 5px 15px 5px 30px;
            background: var(--bg02);
            display: inline-block;
            font-size: 14px;
            font-weight: 700;
            border-radius: 30px;
            position: absolute;
            top: -17px;
            left: 15px;
        }
        .evaluation::before {
            left: 10px;
        }

        .question {
            font-size: 17px;
            padding: 30px 0 0 50px;
            position: relative;
        }

        .question::before {
            width: 25px;
            height: 30px;
            top: 28px;
            left: 20px;
        }

        .image-common01 {
            width: 100%;
            margin-top: 0;
            padding: 20px 20px 10px 20px;
        }

        .ttl-area {
            padding-left: 15px;
            padding-top: 15px;
            div {
                width: 33%;
                margin-top: 10px;

                p:first-child {
                    font-size: 26px;
                    margin-right: 5px;
                }

                p:last-child {
                    font-size: 14px;
                }
            }

            div:first-child {
                margin-right: 10px;
            }
            div:nth-child(2) {
                margin-right: 10px;
            }
        }

        .image-common02 {
            width: 100%;
            padding: 0 15px 0 15px;
        }
    }

    .block-area03 {
        padding-left: 10px;
        padding-right: 10px;
        .wrapper01 {
            width: 100%;
            border: 3px dotted var(--bg02);
            padding: 0 20px 20px 20px;
        }
        .wrapper01::before,
        .wrapper01::after{
            display: none;
        }
    }

    .block-area03::after {
        width: 80px;
        height: 100px;
        right: 0;
        bottom: -20px;
    }
    .block-area03.page03::after {
        width: 80px;
        height: 100px;
        right: -30px;
        bottom: -20px;
    }

    .block-area04 {
        position: relative;
        margin-top: 60px;
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 100px;
        .wrapper01 {
            width: 100%;
            padding: 0 0 50px 0;
        }

        .image-common01 {
            width: 100%;
            margin-top: 0;
            padding: 0 10px 0 10px;
        }

        .split-area {
            margin-top: 20px;
            display: flex;
            flex-wrap: wrap;
            .memo-board {
                position: relative;
                bottom: auto;
                top: -10px;
                left: -10px;
            }
            .comment01 {
                width: calc(100% - 120px - 10px);
                padding-left: 10px;
                padding-right: 0;
            }

            .comment02 {
                padding-left: 20px;
                padding-right: 0;
            }
        }
    }

    .block-area04:before {
        right: 120px;
    }

    .block-area04:after {
        bottom: -55px;
        right: 10px;
    }

    .block-area05 {
        margin-top: 0;
        padding-left: 20px;
        padding-right: 20px;
        margin-bottom: 20px;

        .ttl01 {
            font-size: 18px;
            margin-bottom: 10px;
        }

        .wrapper01 {
            margin-bottom: 10px;
            .ttl02 {
                border-radius: 15px 15px 0 0;
                font-size: 16px;
                padding: 8px 20px;
            }

            .wrapper02 {
                padding: 15px 20px 15px 70px;
                border-radius: 15px;
                ul {
                    row-gap: 5px;
                    li {
                        font-size: 14px;
                    }
                }
            }
            .wrapper02::before {
                width: 30px;
                height: 25px;
                top: 12px;
                left: 10px;
            }
        }
    }

    .block-area06 {
        padding-left: 20px;
        padding-right: 20px;
        .wrapper01 {
            flex-wrap: wrap;
            justify-content: center;

            .image-common {
                width: 30%;
                margin-top: 20px;
            }
        }
    }


    #main #main_wrapper .main_content {
        .content_body.page05 {
            margin-top: 20px;
            padding: 20px 20px 10px 20px;
        }
    }

    .content_body.page05 {
        .ttl {
            font-size: 22px;
            padding-left: 0;
        }
        .ttl:after {
            width: 180px;
            height: 140px;
            top: -50px;
            right: -25px;
        }

        .supervision {
            text-align: left;
            width: 100%;
            font-size: 14px;
        }
    }

    .block-area07{
        padding-left: 0;
        padding-right: 0;
        .image-common {
            padding-left: 0;
            padding-right: 0;
            margin-top: 30px;
            margin-bottom: 30px;
        }
    }

}