@charset "utf-8";

.profile__title{
    margin-bottom: 3rem;
    border-bottom: solid 6px var(--font-color);
    position: relative;
}

/*==== 選挙区別 ====*/
.profile__title.nishi{
    border-color: var(--nishi-ku);
}
.profile__title.kita{
    border-color: var(--kita-ku);
}
.profile__title.omiya{
    border-color: var(--omiya-ku);
}
.profile__title.minuma{
    border-color: var(--minuma-ku);
}
.profile__title.chuo{
    border-color: var(--chuo-ku);
}
.profile__title.sakura{
    border-color: var(--sakura-ku);
}
.profile__title.urawa{
    border-color: var(--urawa-ku);
}
.profile__title.minami{
    border-color: var(--minami-ku);
}
.profile__title.midori{
    border-color: var(--midori-ku);
}
.profile__title.iwatsuki{
    border-color: var(--iwatsuki-ku);
}
/*==== 　　　　 ====*/

.profile__title h2{
    margin-bottom: 0;
    color: var(--font-color);
    white-space: nowrap;
    letter-spacing: 0;
    text-align: center;
}

.profile__title h2 span{
    font-size: 50%;
    font-weight: normal;
}

.profile__title a{
    display: inline-block;
    font-size: 0.75rem;
    position: absolute;
    bottom: -2rem;
}

.profile__title .prev-btn{
    padding-left: 1rem;
    background: transparent url(/assets/images/icon-prev.png) no-repeat left center / 0.75rem;
    left: 0;
}

.profile__title .next-btn{
    padding-right: 1rem;
    background: transparent url(/assets/images/icon-next.png) no-repeat right center / 0.75rem;
    right: 0;
}

.profile__image{
    padding: 0;
    text-align: center;
}

.profile__image img{
    display: inline-block;
    width: auto;
    height: 240px;
    padding: 3px;
    border: 1px solid #ddd;
}

.profile__details{
    container-type: inline-size;
    margin-bottom: 3rem;
    padding: 0;
}

.profile__details h3{
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    background-color: var(--back3-color);
    font-size: 1.25rem;
    line-height: 2;
    text-align: center;
}

.profile__details dl, .profile__details ul{
    text-align: center;
}

.profile__details dt, .profile__details dd{
    display: inline-block;
}

.profile__details dt::after{
    content: "：";
}

@container (max-width: 480px){

    .profile__details dl, ul{
        font-size: 0.9rem;
        letter-spacing: 0;
    }

    .profile__details .to-gcs{
        font-size: 0;
    }

    .profile__details .to-gcs::after{
        font-size: 0.9rem;
        content: "GCS";
    }

}

.profile__personal-link{
    width: 90%;
    margin: 0 auto;
    padding: 0;
    border: 1px solid var(--font-color);
}

.profile__personal-link a{
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 4rem;
    padding-left: 3.25rem;
    border-bottom: 1px dotted #aaa;
    line-height: 4rem;
    font-weight: bold;
    white-space: nowrap;
}

@container (max-width: 480px){
    .profile__personal-link a{
        letter-spacing: -0.5px;
        font-size: 0.9rem;
    }
}

.profile__personal-link a::after{
    content: ">>";
    display: inline-block;
    margin-left: 1.5em;
    color: #999;
}

.profile__personal-link a:last-child{
    border: none;
}

.hp{
    background: transparent url(/assets/images/icon-homepage.png) no-repeat left 1rem center / 1.5rem;
}

.blog{
    background: transparent url(/assets/images/icon-rss.png) no-repeat left 1rem center / 1.5rem;
}

.member-list{
    width: 100%;
}

.member-list ul{
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0 1rem 1rem;
}

.member-list li{
    width: 100%;
    margin-top: 1.5rem; /*後に区名で調整*/
    padding: 0.25rem;
    border-top: solid 4px transparent; /*後に区名で調整*/
}

.member-list a{
    width: 100%;
    display: block;
    box-sizing: border-box;
    padding-left: 0.25rem;
    padding-right: 1.5rem;
    background: transparent url(/assets/images/icon-arrow-theme.png) no-repeat right 0.25rem center / 1em;
    font-weight: bold;
    line-height: 2;
    letter-spacing: 1vw;
}

.member-list a:hover{
    background-color: var(--back2-color);
}

.member-list a::before{
    content: "　　　";
    display: inline-block;
    margin-right: clamp(1.5rem, 15%, 5rem);
    font-weight: normal;
    letter-spacing: 0;
}

.member-list a.selected{
    background: unset;
    background-color: var(--back1-color);
}

/*==== 選挙区別 ====*/

li.member-list__nishi{
    border-color: var(--nishi-ku);
}
li.member-list__nishi ~ li.member-list__nishi{
    margin: 0;
    border-top: 1px dotted  #ddd;
}
.member-list__nishi a::before{
    content: "西　区";
}

li.member-list__kita{
    border-color: var(--kita-ku);
}
li.member-list__kita ~ li.member-list__kita{
    margin: 0;
    border-top: 1px dotted  #ddd;
}
.member-list__kita a::before{
    content: "北　区";
}

li.member-list__omiya{
    border-color: var(--omiya-ku);
}
li.member-list__omiya ~ li.member-list__omiya{
    margin: 0;
    border-top: 1px dotted  #ddd;
}
.member-list__omiya a::before{
    content: "大宮区";
}

li.member-list__minuma{
    border-color: var(--minuma-ku);
}
li.member-list__minuma ~ li.member-list__minuma{
    margin: 0;
    border-top: 1px dotted  #ddd;
}
.member-list__minuma a::before{
    content: "見沼区";
}

li.member-list__chuo{
    border-color: var(--chuo-ku);
}
li.member-list__chuo ~ li.member-list__chuo{
    margin: 0;
    border-top: 1px dotted  #ddd;
}
.member-list__chuo a::before{
    content: "中央区";
}

li.member-list__sakura{
    border-color: var(--sakura-ku);
}
li.member-list__sakura ~ li.member-list__sakura{
    margin: 0;
    border-top: 1px dotted  #ddd;
}
.member-list__sakura a::before{
    content: "桜　区";
}

li.member-list__urawa{
    border-color: var(--urawa-ku);
}
li.member-list__urawa ~ li.member-list__urawa{
    margin: 0;
    border-top: 1px dotted  #ddd;
}
.member-list__urawa a::before{
    content: "浦和区";
}

li.member-list__minami{
    border-color: var(--minami-ku);
}
li.member-list__minami ~ li.member-list__minami{
    margin: 0;
    border-top: 1px dotted  #ddd;
}
.member-list__minami a::before{
    content: "南　区";
}

li.member-list__midori{
    border-color: var(--midori-ku);
}
li.member-list__midori ~ li.member-list__midori{
    margin: 0;
    border-top: 1px dotted  #ddd;
}
.member-list__midori a::before{
    content: "緑　区";
}

li.member-list__iwatsuki{
    border-color: var(--iwatsuki-ku);
}
li.member-list__iwatsuki ~ li.member-list__iwatsuki{
    margin: 0;
    border-top: 1px dotted  #ddd;
}
.member-list__iwatsuki a::before{
    content: "岩槻区";
}

/*==== 　　　　 ====*/


@media (min-width: 701px) {

    .flex{
        display: flex;
        gap: 2rem;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: flex-start;
    }

    .profile{
        min-width: calc(700px - 240px -5rem);
        flex-grow: 3;
    }

    .member-list{
        flex: 1 0 240px;
    }

    .member-list a{
        letter-spacing: 0;
    }

}

@media (min-width: 1025px) {

    .profile{
        width: 664px;
        flex-grow: 0;
    }

    .profile__title h2{
        letter-spacing: inherit;
    }

    .member-list{
        flex: 0 0 300px;
    }

    .member-list a{
        letter-spacing: 1px;
    }

    .profile__title a{
        font-size: 0.8rem;
        bottom: 0.5rem;
    }

    .profile__title .prev-btn{
        left: 0.25rem;
    }

    .profile__title .next-btn{
        right: 0.25rem;
    }

}