@charset "utf-8";

.titlewrap {
	h1 {
        .txtclip {
            background: #4CA7D8;
            background: linear-gradient(to right bottom,#4CA7D8 0%,#53DFF8 100%);
        }
        img {
            width:8em;
        }
	}
}

section {
    .wrap {
        .contents {
        }
    }
}

#people {
    .wrap {
        overflow:clip;
        .contents {
            .people {
                display:grid;
                grid-template-columns:50% 1fr;
                grid-column-gap:5%;
                align-items:center;
                margin-bottom:90px;
                .detail {
                    .cat {
                        background-color:#1A80FF;
                        color:#FFFFFF;
                        font-size:1.8rem;
                        display:inline-grid;
                        height:1.7em;
                        justify-content:center;
                        align-items:center;
                        padding:0 .66em;
                        margin-bottom:1.25em;
                    }
                    p {
                        font-size:1.8rem;
                        &.body {
                            font-size:2.8rem;
                            line-height:1.5;
                            font-weight:600;
                            margin-bottom:1em;
                        }
                    }
                    h2 {
                        font-size:2.1rem;
                        margin-bottom:0;
                        span {
                            font-size:5.0rem;
                            margin-right:.2em;
                        }
                    }
                }
                .img {
                    margin-left:-100px;
                    img {
                        display:block;
                        width:calc(100% + 100px);
                        border-radius:10px;
                    }
                }
            }
            .contents_item {
                &:not(:last-child) {
                    margin-bottom:60px;
                }
                h3 {
                    font-size:2.1rem;
                    border-bottom:1px solid #4EB9E2;
                    padding:0 100px 1em .66em;
                    margin-right:-100px;
                    &:has( + .img) {
                        margin-bottom:2em;
                    }
                }
                p {
                    &:not(:last-child) {
                        margin-bottom:2em;
                    }
                }
                .img {
                    img {
                        display:block;
                        border-radius:10px;
                    }
                }
                .contents_inner {
                    display:grid;
                    grid-template-columns:55% 1fr;
                    grid-column-gap:3%;
                    margin-bottom:2em;
                    &.imgleft {
                        grid-template-columns:1fr 55%;
                        .detail {
                            order:1;
                        }
                    }
                }
                & > .img {
                    margin-bottom:2em;
                }
            }
        }
    }
}

@media (hover:hover) {
}

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

}

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

    #people {
        .wrap {
            overflow:clip;
            .contents {
                .people {
                    display:grid;
                    grid-template-columns:45% 1fr;
                    .detail {
                        p {
                            font-size:1.6rem;
                            &.body {
                                font-size:2.4rem;
                            }
                        }
                        h2 {
                            font-size:2.0rem;
                            span {
                                font-size:4.0rem;
                            }
                        }
                    }
                    .img {
                        margin-left:-50px;
                        img {
                            width:calc(100% + 50px);
                        }
                    }
                }
                .contents_item {
                    h3 {
                        font-size:2rem;
                    }
                }
            }
        }
    }
    
}

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

    .titlewrap {
    	h1 {
            img {
                transform:translateY(-1em);
            }
    	}
    }
    
    #people {
        .wrap {
            .contents {
                .people {
                    grid-template-columns:1fr;
                    margin-bottom:60px;
                    grid-row-gap:20px;
                    .detail {
                        .cat {
                            font-size:1.5rem;
                        }
                        p {
                            font-size:1.5rem;
                            &.body {
                                font-size:2.0rem;
                                margin-bottom:.5em;
                            }
                        }
                    }
                    .img {
                        order:1;
                        margin-left:0px;
                        img {
                            width:100%;
                            max-width:400px;
                            margin:0 auto;
                        }
                    }
                }
                .contents_item {
                    &:not(:last-child) {
                        margin-bottom:45px;
                    }
                    h3 {
                        font-size:1.8rem;
                        padding:0 20px .66em 0;
                        margin-right:-20px;
                        padding-left:0;
                        &:has( + .img) {
                            margin-bottom:1.5em;
                        }
                    }
                    p {
                        &:not(:last-child) {
                            margin-bottom:1.5em;
                        }
                    }
                    .contents_inner {
                        grid-template-columns:1fr;
                        grid-row-gap:1.5em;
                        margin-bottom:1.5em;
                        &.imgleft {
                            grid-template-columns:1fr;
                            .detail {
                                order:unset;
                            }
                        }
                    }
                    & > .img {
                        margin-bottom:1.5em;
                    }
                }
            }
        }
    }
    
}