@charset "UTF-8";

.wrapper {
    width: 1130px;
    margin: auto;
    position: relative;
    box-sizing: border-box;

    &.mjMain{
        margin-top: 50px;
        margin-bottom: 50px;
    }
}

.head {
    width: 100%;
    background: #c7e8fa;
    position:relative;
    box-sizing: border-box;

    &:before{
        content: "";
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 2560/1062;
        background: url(/newtemp/useful/img/circulatory/gout-treatment-continuation-navi/top_01.png);
        background-repeat: no-repeat;
        background-size: contain;
        pointer-events: none;
    }

    .date{
        position:relative;
        padding-top: 20px;
        margin-left: 20px;
        font-size: 16px;
    }

    .content-title{
        width: 60%;
        display: block;
        margin-top: 40px;
        margin-left: 50px;
        position:relative;
        img{
            width: 100%;
            height: auto;
        }
    }

    .director-area{
        display: flex;
        align-items: flex-start;
        gap: 20px;
        padding: 50px 0 50px 50px;
        position:relative;
        img{
            width: 130px;
            height: auto;
        }

        .block-part{
            display: flex;
            flex-direction: column;
            gap: 10px;

            dl {
                display: flex;
                dt {
                    white-space: nowrap;
                    font-size: 16px;
                    padding-top: 4px;
                }
                dd{
                    font-size: 18px;
                    .large{
                        font-size: 22px;
                        font-weight: bold;
                    }
                }
            }
            .career{
                font-size: 13px;
                width: 49%;
            }

        }
    }
}

.main-article{
    margin-top: 60px;
}

.main-text{
    font-size: 17px;
    line-height: 1.6;

    &.mt-adjust{
        margin-top: 40px;
    }
}

.menu-area{
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 50px;
    a {
        width: 47%;
        display: flex;
        .menu-part {
            position: relative;
            width: 100%;
            padding: 0 30px 30px 30px;
            border: 1px solid #0e357f;
            display: flex;
            flex-direction: column;
            align-items: center;

            &:before {
                content: "";
                position: absolute;
                display: block;
                background: #dff2fc;
                width: 100%;
                height: 100%;
                top: 5px;
                left: 5px;
                z-index: -1;
            }

            &:after {
                content: "";
                position: absolute;
                display: block;
                background: url(/newtemp/useful/img/circulatory/gout-treatment-continuation-navi/top_04.png);
                background-repeat: no-repeat;
                background-size: contain;
                width: 100px;
                aspect-ratio: 1/1;
                top: 0;
                right: 0;
            }

            .type-name{
                color: #fff;
                font-size: 22px;
                font-weight: bold;

                text-align: center;
                ul {
                    display: flex;
                    li {
                        padding: 5px 10px;

                        &:first-child {
                            background: #0e357f;
                        }

                        &:last-child {
                            background: #942439;
                        }
                    }
                }
            }

            .menu-title{
                font-size: 24px;
                color: #0a257c;
                font-weight: bold;
                margin-top: 30px;
                text-align: center;
            }

            img{
                width: 90%;
                height: auto;
                margin-top: 20px;

            }
        }
        &:nth-child(1){
            .menu-part{
                img{
                    margin-top: 54px;
                }
            }
        }
    }
}

cite{
    font-size: 13px;
    margin-top: 20px;
    display: block;
    font-style: normal;
    &.right{
        text-align: right;
    }
}

.shizai_number{
    display: flex;
    justify-content: space-between;
    margin-top: 100px;
    margin-bottom: 50px;
}


/* 下層 ----------------------------------------------------------------------------- */

.head-second{

    width: 100%;
    border: 1px solid #0e357f;
    position:relative;
    box-sizing: border-box;
    display: flex;
    gap: 20px;
    padding-top: 50px;

    &:before {
        content: "";
        position: absolute;
        display: block;
        background: #dff2fc;
        width: 100%;
        height: 100%;
        top: 8px;
        left: 8px;
        z-index: -1;
    }

    .type-name{
        display: flex;
        justify-content: center;
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);

        li{
         padding: 5px 15px;
            font-size: 22px;
            font-weight: bold;
            color: #fff;
            &:first-child {
                background: #0e357f;
            }

            &:last-child {
                background: #942439;
            }
        }
    }

    .title-area {
        width: 55%;

        h2 {
            font-size: 34px;
            font-weight: bold;
            color: #0e357f;
            margin-top: 30px;
            padding-left: 50px;
        }
        .lead-txt{
            font-size: 16px;
            margin-top: 30px;
            padding-left: 50px;

        }
    }
    .img-area{
        width: 35%;
        position:relative;
        padding-bottom: 30px;
        img{
            width: 100%;
            height: auto;
        }

        .comment{
            position: absolute;
            padding: 10px 20px;
            border-radius: 10px;
            background: #fff;
            top: 0;
            font-size: 12px;
            text-align: center;
            box-shadow: 1px 1px 5px #cdcdcd;
            &:first-of-type{
                top: 50px;
                left: -30px;
            }
            &:nth-of-type(2){
                top: 10px;
                right: -50px;
            }
        }

    }
}

.block-title{
    background: #dff2fc;
    padding: 15px 100px;
    font-size: 25px;
    font-weight: bold;
    color: #0a257c;
    position: relative;
    border-bottom: 1px solid #0e357f;
    .large{
        font-size: 30px;
        color: #942439;
    }

    .director{
        text-align: right;
        color: black;
        font-weight: normal;
        font-size: 18px;
        .large{
            color: black;
            font-weight: bold;
            font-size: 24px;
        }
    }

    &:before{
        content: "";
        position: absolute;
        display: block;
        width: 65px;
        height: auto;
        aspect-ratio: 989/1272;
        background: url(/newtemp/useful/img/circulatory/gout-treatment-continuation-navi/type_a_01.png);
        background-repeat: no-repeat;
        background-size: contain;
        top: -20px;
        left: 20px;
    }

    &.icon01-01:after{
        content: "";
        position: absolute;
        display: block;
        width: 100px;
        height: auto;
        aspect-ratio: 177/161;
        background: url(/newtemp/useful/img/circulatory/gout-treatment-continuation-navi/type_a_02.png);
        background-repeat: no-repeat;
        background-size: contain;
        top: -20px;
        right: 20px;
    }
    &.icon01-01.icon-b:after{
        background: url(/newtemp/useful/img/circulatory/gout-treatment-continuation-navi/type_b_02.png);
        background-repeat: no-repeat;
        background-size: contain;
    }


    &.icon01-02:after{
        content: "";
        position: absolute;
        display: block;
        width: 100px;
        height: auto;
        aspect-ratio: 177/161;
        background: url(/newtemp/useful/img/circulatory/gout-treatment-continuation-navi/type_a_07.png);
        background-repeat: no-repeat;
        background-size: contain;
        top: -20px;
        right: 20px;
    }
    &.icon01-03:after{
        content: "";
        position: absolute;
        display: block;
        width: 100px;
        height: auto;
        aspect-ratio: 177/161;
        background: url(/newtemp/useful/img/circulatory/gout-treatment-continuation-navi/type_a_10.png);
        background-repeat: no-repeat;
        background-size: contain;
        top: -20px;
        right: 20px;
    }
    &.icon01-03.type-b:after{
        background: url(/newtemp/useful/img/circulatory/gout-treatment-continuation-navi/type_b_10.png);
        background-repeat: no-repeat;
        background-size: contain;
    }
    &.dr-01:after{
        content: "";
        position: absolute;
        display: block;
        width: auto;
        height: 100%;
        aspect-ratio: 241/303;
        background: url(/newtemp/useful/img/circulatory/gout-treatment-continuation-navi/type_a_11.png);
        background-repeat: no-repeat;
        background-size: contain;
        top: 0;
        right: 0;
    }

    &.mt-adjust{
        margin-top: 120px;
    }

}


.title02{
    color: #0a257c;
    font-size: 24px;
    font-weight: bold;
    margin-top: 40px;
    margin-bottom: 20px;
}

.list-text01{

    position:relative;
    li {
        padding-left: 1em;
        position:relative;
        margin-top: 1em;
        &:before {
            content: "・";
            position: absolute;
            display: block;
            top: 0;
            left: 0;
        }
    }
}

.img-area01{

    background: #dff2fc;
    border-top: 1px dotted #0e357f;
    border-bottom: 1px dotted #0e357f;
    padding: 30px;
    margin-top: 40px;
    .inner-back{
        background: #fff;
        border-radius: 12px;
        box-shadow: 1px 1px 5px #cdcdcd;
        padding: 30px;
        display: flex;
        justify-content: center;
        gap: 20px;
        img{
            width: 90%;
            height: auto;
        }
        &.flex-column{
            flex-direction: column;
            align-items: center;
            gap: 20px;

            h5{
                font-size: 24px;
                font-weight: bold;
            }
            .main-text{
                font-size: 15px;
            }
        }

        .split-area{
            display: flex;
            justify-content: space-between;
            gap: 10px;
            img{
                width: 49%;
                height: auto;
            }
        }
    }
}


.split-area{
    display: flex;
    gap: 20px;
    margin-top: 30px;
    .split-area-inner{
        .list-title{
            font-size: 18px;
            font-weight: bold;

            &:nth-of-type(3){
            margin-top: 20px;
            }
        }
        .indent{
            padding-left: 1em;
        }
    }

    &:nth-of-type(2){
        gap: 80px;
        .split-area-inner{
            width: 70%;
        }
        .img-area{
            width: 20%;
            img{
                width: 100%;
                height: auto;
            }
        }
    }
    &:nth-of-type(3){
        gap: 50px;
        .split-area-inner{
            width: 65%;
        }
        .img-area{
            width: 10%;
            img{
                width: 100%;
                height: auto;
            }
        }
    }
}

.kanren-banner{
    margin-top: 100px;
    .kanren-banner_title{
        font-size: 22px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 15px;
    }
    .kanren-banner__wrapper{
        width: 100%;
        display: flex;
        gap: 30px;
        justify-content: center;
        .haidoku-banner__item{
            width: 28%;
            img{
                width: 100%;
                height: auto;
            }
            p{
                color: #333;
                margin-top: 10px;
                font-size: 14px;
            }
        }
        a:hover{
            opacity: 0.8;
        }
    }
}



@media (hover: hover) {
    .mouse-over-main:hover {

        &.menu-part{
            .menu-title{
                color: #fff;
                transition: all 0.4s ease;
            }
            img{
                transition: all 0.4s ease;
                opacity: 0.5;
            }
        }
        &.menu-part:before {
            transition: all 0.4s ease;
            background: #1f77a6;
        }
    }
}

@media (max-width: 767px) {
    .wrapper {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }


    .head {

        .date{
            font-size: 14px;
        }

        .content-title{
            width: 100%;
            margin-top: 50px;
            margin-left: 0;
            padding-left: 20px;
            padding-right: 20px;
        }

        .director-area{
            align-items: center;
            flex-direction: column;
            gap: 20px;
            padding: 30px 0;
            img{
                width: 30%;
                height: auto;
            }

            .block-part{
                gap: 10px;
                padding-left: 20px;
                padding-right: 20px;

                dl {
                    display: flex;
                    dt {
                        white-space: nowrap;
                        font-size: 16px;
                        padding-top: 4px;
                    }
                    dd{
                        font-size: 16px;
                        .large{
                            font-size: 18px;
                            font-weight: bold;
                        }
                    }
                }
                .career{
                    font-size: 13px;
                    width: 100%;
                }
            }
        }
    }

    .main-article{
        margin-top: 40px;
    }

    .main-text{
        font-size: 16px;
    }


    .menu-area{
        margin-top: 30px;
        flex-direction: column;
        a {
            width: 100%;
            .menu-part {
                position: relative;
                width: 100%;
                padding: 0 30px 30px 30px;

                .type-name{
                    font-size: 18px;
                    ul {
                        li {
                            padding: 5px 10px;

                            &:first-child {
                                background: #0e357f;
                            }

                            &:last-child {
                                background: #942439;
                            }
                        }
                    }
                }

                .menu-title{
                    font-size: 20px;
                    margin-top: 30px;
                }

                img{
                    width: 90%;
                }

            }

            &:nth-child(1) {
                & .menu-part {
                    img {
                        margin-top: auto;
                    }
                }
            }
        }
    }

    cite{
        font-size: 12px;
    }

    .shizai_number{
        font-size: 15px;
    }



    /* 下層 ----------------------------------------------------------------------------- */

    .head-second{

        gap: 20px;
        padding-top: 50px;
        flex-direction: column;

        .type-name{

            li{
                padding: 5px 15px;
                font-size: 18px;
            }
        }

        .title-area {
            width: 100%;


            h2 {
                font-size: 24px;
                margin-top: 30px;
                padding-left: 30px;
                padding-right: 30px;
            }
            .lead-txt{
                font-size: 15px;
                padding-left: 30px;
                padding-right: 30px;

            }
        }
        .img-area{
            width: 80%;
            position:relative;
            margin: auto;
            padding-bottom: 30px;

            .comment{
                top: 0;
                font-size: 12px;
                &:first-of-type{
                    top: auto;
                    bottom: 20px;
                    left: -10%;
                }
                &:nth-of-type(2){
                    top: -10%;
                    right: -5%;
                }
                &:nth-of-type(2).type-b{
                    top: -5%;
                    right: 0;
                }
            }

        }
    }

    .block-title{
        padding: 15px 50px 30px 30px;
        font-size: 20px;
        .large{
            font-size: 24px;
        }

        .director{
            font-size: 15px;
            .large{
                font-size: 18px;
            }
        }

        &:before{
            width: 40px;
            top:-35px
        }

        &.icon01-01:after{
            width: 50px;
            top: auto;
            bottom: 0;
            right: 0;
        }
        &.icon01-02:after{
            width: 50px;
            height: auto;
            top: auto;
            bottom: 0;
            right: 0;
        }
        &.icon01-03:after{
            width: 50px;
            top: auto;
            bottom: 0;
            right: 0;
        }
        &.dr-01:after{
            position:relative;
            height: 80px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 20px;

        }

        &.mt-adjust{
            margin-top: 120px;
        }

        &:first-of-type{
            margin-top: 80px;
        }

        &.dr-01{
            padding-right: 30px;
            padding-bottom: 15px;
        }

    }


    .title02{
        font-size: 20px;
        margin-top: 40px;
        margin-bottom: 20px;
    }

    .img-area01{

        padding: 20px;
        margin-top: 30px;
        .inner-back{
            padding: 20px;
            img{
                width: 90%;
                height: auto;
            }
            &.flex-column{
                flex-direction: column;
                align-items: center;
                gap: 20px;

                h5{
                    font-size: 17px;
                }
                .main-text{
                    font-size: 14px;
                }
            }

            .split-area{
                flex-direction: column;
                gap: 10px;
                img{
                    width: 90%;
                    height: auto;
                }
            }
        }
    }


    .split-area{
        flex-direction: column;
        align-items: center;
        margin-top: 30px;
        .split-area-inner{
            .list-title{
                font-size: 18px;
                font-weight: bold;
            }
            .indent{
                padding-left: 1em;
            }
        }

        &:nth-of-type(2){
            gap: 20px;
            .split-area-inner{
                width: 100%;
            }
            .img-area{
                width: 50%;
            }
        }
        &:nth-of-type(3){
            gap: 20px;
            .split-area-inner{
                width: 100%;
            }
            .img-area{
                width: 50%;
            }
        }
    }

    .kanren-banner{
        margin-top: 100px;
        .kanren-banner_title{
            font-size: 18px;
        }
        .kanren-banner__wrapper{
            flex-wrap: wrap;
            gap: 20px;
            .haidoku-banner__item {
                width: 100%;
            }
        }
    }
}