@charset "utf-8";

#pagetitle {
    .pagetitle {
        h1 {
            .obj {
                right: -110px;
                top: -15px;
            }
        }
    }
}

#education {
    .wrap {
        .contents {
            .contents_inner {
                display:grid;
                grid-template-columns:repeat(2,1fr);
                grid-column-gap:45px;
                margin-bottom:70px;
                & + .contents_inner {
                    margin-bottom:50px;
                    .detail {
                        order:1;
                    }
                    .img {
                        img {
                            display:block;
                            width:60%;
                            margin:0 auto;
                        }
                    }
                }
            }
            .img_box {
                display:grid;
                grid-template-columns:repeat(3,1fr);
                grid-column-gap:3.6%;
            }
        }
    }
}

#message {
    .wrap {
        .contents {
            h2 {
                margin-bottom: 2.5em;
            }
            .contents_inner {
                background-color:#FFFFFF;
                padding:50px 55px;
                border-radius:20px;
                display:grid;
                grid-template-columns:1fr 235px;
                grid-column-gap:40px;
                align-items:start;
                .detail {
                    h3 {
                        font-size:clamp(2.0rem,2vw,2.2rem);
                        letter-spacing:.03em;
                        line-height: 1.6;
                    }
                }
                .profile {
                    border:2px solid #c19964;
                    border-radius:10px;
                    margin-top:50px;
                    position:relative;
                    padding:70px 25px 25px;
                    dt {
                        font-size:1.6rem;
                        color:var(--color_main);
                        font-weight:600;
                        text-align:center;
                        margin-bottom:.75em;
                        span {
                            font-size:1.4rem;
                            margin-right:.66em;
                        }
                        img {
                            display:block;
                            width:110px;
                            position:absolute;
                            top:-55px;
                            left:calc(50% - 55px);
                        }
                    }
                    dd {
                        font-size:1.2rem;
                        line-height:1.75;
                        font-weight:500;
                        .btn {
                            width:100%;
                            max-width:100%;
                            grid-template-columns:auto;
                            font-size:1.5rem;
                            margin-top:1em;
                        }
                    }
                }
            }
        }
    }
}

#overview {
    .wrap {
        .contents {
            h2 {
                margin-bottom:2.5em;
            }
            .contents_wrap {
                background-color:#FFFFFF;
                border-radius:20px;
                padding:60px;
                table {
                    border-collapse:collapse;
                    width:100%;
                    border-top:1px solid #000000;
                    margin-bottom:50px;
                    tr {
                        border-bottom:1px solid #000000;
                        &.dashed {
                            border-bottom:1px dashed #000000;
                        }
                        th,td {
                            font-size:1.4rem;
                            line-height:1.8;
                            font-weight:500;
                            vertical-align:middle;
                        }
                        th {
                            width:164px;
                            padding:1em;
                            font-weight:500;
                            background-color:#ece0d0;
                        }
                        td {
                            padding:1em 2em;
                        }
                    }
                }
                .contents_inner {
                    background:url(../img/about/border.png) no-repeat center center/100% 100%;
                    padding:30px 40px;
                    .contents_item {
                        display:grid;
                        grid-template-columns:1fr auto;
                        justify-content:space-between;
                        align-items:center;
                        padding-right:3%;
                        margin-bottom:25px;
                        .detail {
                            h3 {
                                font-size:2.0rem;
                                color:var(--color_main);
                                font-weight:600;
                                margin-bottom: .5em;
                            }
                            .body {
                                font-size:1.7rem;
                                font-weight: 600;
                                white-space:nowrap;
                                font-family: "dnp-shuei-mgothic-std", sans-serif;
                            }
                        }
                        .img {
                            max-width:300px;
                        }
                    }
                    & > p {
                        letter-spacing:normal;
                        font-size: 1.35rem;
                    }
                }
            }
        }
    }
}

#access {
    .wrap {
        .contents {
            h2 {
                margin-bottom:2.5em;
            }
            .map {
                text-align:center;
                margin-bottom:80px;
                iframe {
                    display:block;
                    width:100%;
                    aspect-ratio:1.96;
                    border-radius:20px;
                    margin-bottom:25px;
                }
                & > a {
                    font-size:1.8rem;
                    color:var(--color_main);
                    font-weight:600;
                    display:inline-grid;
                    grid-template-columns:repeat(2,auto);
                    align-items:center;
                    justify-content:center;
                    letter-spacing:.08em;
                    grid-column-gap:.33em;
                    margin-bottom:2em;
                    img {
                        width:.9em;
                        transform:translateY(.15em);
                    }
                }
                & > p {
                    font-size:1.8rem;
                    font-weight:500;
                    text-align:center;
                    line-height:1.6;
                    a {
                        & > span {
                            font-size:3.5rem;
                            letter-spacing:.08em;
                            span {
                                display: inline-block;
                                transform: translateY(-.1em);
                            }
                        }
                    }
                }
            }
            h3 {
                font-size:2.0rem;
                font-weight:600;
                line-height:1;
                padding:.5em 0;
                color:var(--color_main);
                text-align:center;
                width:9em;
                margin:0 auto 2em;
                &::before,&::after {
                    content:'';
                    display:block;
                    background-color:var(--color_main);
                    border-radius:10px;
                    width:100%;
                    height:3px;
                }
                &::before {
                    margin-bottom:.55em;
                }
                &::after {
                    margin-top:.55em;
                }
            }
            .contents_inner {
                display:grid;
                grid-template-columns:1fr 35%;
                grid-column-gap:2%;
                .detail {
                    h4 {
                        font-size:1.4rem;
                        font-weight:500;
                        color:var(--color_main);
        				line-height:1.71;
                        margin-left:-.66em;
                    }
                    p {
                        &:not(:last-child) {
                            margin-bottom:1em;
                        }
                    }
                }
            }
        }
    }
}

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

}

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



    #overview {
        .wrap {
            .contents {
                .contents_wrap {
                    .contents_inner {
                        background:url(../img/about/border.png) no-repeat center center/100% 100%;
                        padding:30px 40px;
                        .contents_item {
                            display:grid;
                            grid-template-columns:1fr 30%;
                            justify-content:space-between;
                            align-items:center;
                            padding-right:0;
                            margin-bottom:25px;
                            .detail {
                                h3 {
                                    font-size:2.0rem;
                                    font-size:1.95vw;
                                    color:var(--color_main);
                                    font-weight:600;
                                    margin-bottom: .5em;
                                }
                                .body {
                                    font-size:1.7rem;
                                    font-size:1.66vw;
                                    font-weight: 600;
                                    white-space:nowrap;
                                    font-family: "dnp-shuei-mgothic-std", sans-serif;
                                }
                            }
                            .img {
                                max-width:300px;
                            }
                        }
                        & > p {
                            letter-spacing:.02em;
                                    font-size:1.37vw;
                        }
                    }
                }
            }
        }
    }
    
}

@media screen and (max-width:768px){
    
    #pagetitle {
        .pagetitle {
            h1 {
                .obj {
                    right: -90px;
                    top: -10px;
                }
            }
        }
    }
    
    #education {
        .wrap {
            .contents {
                .contents_inner {
                    grid-template-columns:1fr;
                    margin-bottom:30px;
                    .detail {
                        p {
                            margin-bottom:1.5em
                        }
                    }
                    & + .contents_inner {
                        margin-bottom:35px;
                        .detail {
                            order:unset;
                            p {
                                margin-bottom:2em
                            }
                        }
                        .img {
                            img {
                                width: 62%;
                            }
                        }
                    }
                }
                .img_box {
                    grid-column-gap:3%;
                }
            }
        }
    }
    
    #message {
        .wrap {
            .contents {
                .contents_inner {
                    padding:20px 25px;
                    border-radius:15px;
                    grid-template-columns:1fr;
                    .detail {
                        h3 {
                            font-size:1.7rem;
                            line-height:1.65;
                            margin-bottom:.66em;
                        }
                        p {
                            margin-bottom:1.5em;
                        }
                    }
                    .profile {
                        border-radius:8px;
                        margin-top:0;
                        padding:15px;
                        position:relative;
                        dt {
                            font-size:1.28rem;
                            margin-bottom:.75em;
                            text-align:left;
                            padding-left:95px;
                            span {
                                font-size:1.12rem;
                                margin-right:.66em;
                            }
                            img {
                                width:80px;
                                position:absolute;
                                top:25px;
                                left:15px;
                            }
                        }
                        dd {
                            padding-left:95px;
                            font-size:1.1rem;
                            line-height:1.53;
                            font-weight:500;
                            &:last-child {
                                padding-left:0;
                                .btn {
                                    font-size:1.2rem;
                                    max-width:144px;
                                    margin:1em auto 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
    #overview {
        .wrap {
            .contents {
                h2 {
                    margin-bottom:2em;
                }
                .contents_wrap {
                    border-radius:15px;
                    padding:20px;
                    table {
                        margin-bottom:20px;
                        tr {
                            th,td {
                                font-size:1.1rem;
                                line-height:1.7;
                            }
                            th {
                                width:70px;
                                padding:.66em 0;
                                text-align:center;
                            }
                            td {
                                padding:.75em;
                            }
                        }
                    }
                    .contents_inner {
                        border:none;
                        border-top:4px dotted var(--color_main);
                        border-bottom:4px dotted var(--color_main);
                        border-radius:0;
                        padding:15px 0;
                        background:none;
                        .contents_item {
                            grid-template-columns:1fr;
                            padding-right:0;
                            margin-bottom:10px;
                            position:relative;
                            .detail {
                                padding-top:10px;
                                h3 {
                                    font-size:1.6rem;
                                    line-height:1.61;
                                }
                                .body {
                                    font-size:1.3rem;
                                    white-space:initial;
                                }
                            }
                            .img {
                                width:40%;
                                position:absolute;
                                top:5px;
                                right:0;
                            }
                        }
                        & > p {
                            font-size:1.1rem;
                            line-height:1.55;
                        }
                    }
                }
            }
        }
    }
    
    #access {
        .wrap {
            .contents {
                h2 {
                    margin-bottom:2em;
                }
                .map {
                    margin-bottom:30px;
                    iframe {
                        aspect-ratio:1.53;
                        border-radius:15px;
                        margin-bottom:20px;
                    }
                    & > a {
                        font-size:1.458rem;
                        margin-bottom:1.5em;
                    }
                    & > p {
                        font-size:1.3rem;
                        font-weight:500;
                        line-height:1.4;
                        a {
                            font-size:1.44;
                            span {
                                font-size:2.8rem;
                            }
                        }
                    }
                }
                h3 {
                    font-size:1.6rem;
                    margin-bottom:1.25em;
                }
                .contents_inner {
                    grid-template-columns:1fr;
                    .detail {
                        margin-bottom:15px;
                        h4 {
                            font-size:1.3rem;
                        }
                        p {
                            &:not(:last-child) {
                                margin-bottom:.75em;
                            }
                        }
                    }
                }
            }
        }
    }
    
}