@charset "utf-8";

#pagelink {
    .wrap {
        .contents {
            .contents_inner {
                display:grid;
                grid-template-columns:repeat(5,1fr);
                grid-column-gap:1%;
                li {
                    a {
                        font-size:1.6rem;
                        color:#FFFFFF;
                        background-color:var(--color_main);
                        border:1px solid var(--color_main);
                        display:grid;
                        height:2.4em;
                        align-items:center;
                        justify-content:center;
                    }
                }
            }
        }
    }
}

#message {
    .wrap {
        .contents {
            .contents_inner {
                display:grid;
                grid-template-columns:1fr 25%;
                grid-column-gap:5%;
                .img {
                    img {
                        display:block;
                    }
                    span {
                        font-size:1.6rem;
                        display:block;
                        text-align:center;
                        padding-top:1em;
                    }
                }
                .detail {
                    p {
                        &:not(:last-child) {
                            margin-bottom:1.5em;
                        }
                    }
                }
            }
        }
    }
}

#philosophy {
    .wrap {
        .contents {
            p {
                margin-bottom:1em;
                &.body {
                    text-align:center;
                    font-size:4.0rem;
                    line-height:1.5;
                    font-weight:600;
                }
            }
            img {
                display:block;
                width:80%;
                max-width:500px;
                margin:0 auto;
            }
        }
    }
}

#domain {
    .wrap {
        .contents {
            display:grid;
            justify-items:center;
            h2 {
                justify-self:start;
            }
            .img {
                max-width:640px;
                margin:0 auto 50px;
            }
            .domain {
                display:grid;
                grid-template-columns:repeat(3,auto);
                align-items:start;
                justify-content:center;
                grid-column-gap:1em;
                font-size:5.2rem;
                margin-bottom:1em;
                dl {
                    text-align:center;
                    dt {
                        color:var(--color_main);
                        font-weight:700;
                        margin-bottom:.2em;
                    }
                    dd {
                        font-size:1.4rem;
                        line-height:1.6;
                        font-weight:600;
                    }
                    &:nth-child(2) {
                        dt {
                            font-size:7.0rem;
                            font-weight:400;
                            transform:translateY(-.2em);
                        }
                    }
                }
            }
            .contents_inner {
                display:grid;
                grid-row-gap:20px;
                dl {
                    display:grid;
                    grid-template-columns:repeat(2,auto);
                    justify-content:start;
                    align-items:end;
                    grid-column-gap:.5em;
                    font-size:2.1rem;
                    dt {
                        font-size:2.5em;
                        font-weight:800;
                        color: #FFFFFF;
                        -webkit-text-stroke: 1.5px var(--color_main);
                        text-stroke: 1.5px var(--color_main);
                        letter-spacing:.05em;
                    }
                    dd {
                        line-height:1.5;
                        border-bottom:1px solid var(--color_main);
                        padding:0 .5em .2em;
                    }
                }
            }
        }
    }
}

.page-about-zh {
    #domain {
        .wrap {
            .contents {
                .contents_inner {
                    dl {
                        dt {
                            font-family: "Zen Kaku Gothic New", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo,'Hiragino Kaku Gothic Pro',Osaka, "ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
                        }
                    }
                }
            }
        }
    }
}

#statement {
    .wrap {
        .contents {
            p {
                &.body {
                    font-size:6.0rem;
                    font-weight:600;
                    color:var(--color_main);
                    text-align:center;
                    letter-spacing:.05em;
                    sup {
                        font-size:.6em;
                        vertical-align:super;
                    }
                }
            }
        }
    }
}

#guidelines {
    .wrap {
        .contents {
            h2 {
                margin-bottom:2em;
            }
            ul {
                font-size:3.0rem;
                display:grid;
                grid-row-gap:.75em;
                padding-left:3em;
                li {
                    background-color:var(--color_main);
                    color:#FFFFFF;
                    padding:.5em .5em .5em 1.5em;
                    position:relative;
                    &:nth-child(2),&:nth-child(4) {
                        margin-left:1.3em;
                    }
                    &:nth-child(3) {
                        margin-left:2em;
                    }
                    span {
                        display:grid;
                        align-items:center;
                        justify-content:center;
                        font-size:1.5em;
                        color:var(--color_main);
                        font-weight:600;
                        height:1.75em;
                        width:1.75em;
                        background-color:#FFFFFF;
                        border-radius:50%;
                        border:1px solid var(--color_main);
                        position:absolute;
                        left:-1em;
                        top:50%;
                        transform:translateY(-50%);
                    }
                }
            }
        }
    }
}

#policy {
    .wrap {
        .contents {
            p {
                &.body {
                    font-size:2.1rem;
                    font-weight:500;
                }
            }
        }
    }
}

@media (hover:hover) {
    
    #pagelink {
        .wrap {
            .contents {
                .contents_inner {
                    li {
                        a {
                            &:hover {
                                opacity:1;
                                color:var(--color_main);
                                background-color:#FFFFFF;
                            }
                        }
                    }
                }
            }
        }
    }
}

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

}

@media screen and (max-width:1024px){
    
    #pagelink {
        .wrap {
            .contents {
                .contents_inner {
                    li {
                        a {
                            font-size:1.4rem;
                        }
                    }
                }
            }
        }
    }
    
    #message {
        .wrap {
            .contents {
                .contents_inner {
                    grid-template-columns:1fr 28%;
                    .img {
                        span {
                            font-size:1.4rem;
                        }
                    }
                }
            }
        }
    }
    
    #domain {
        .wrap {
            .contents {
                .contents_inner {
                    dl {
                        font-size:1.8rem;
                    }
                }
            }
        }
    }
    
    #statement {
        .wrap {
            .contents {
                p {
                    &.body {
                        font-size:5.0rem;
                    }
                }
            }
        }
    }
    
}

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

    #pagelink {
        .wrap {
            .contents {
                .contents_inner {
                    display:flex;
                    flex-wrap:wrap;
                    gap:5px 1%;
                    li {
                        min-width:32.5%;
                        flex:1;
                        a {
                            font-size:min(3.6vw,1.6rem);
                        }
                    }
                }
            }
        }
    }
    
    #message {
        .wrap {
            .contents {
                .contents_inner {
                    grid-template-columns:1fr;
                    grid-row-gap:30px;
                    .img {
                        img {
                            max-width:320px;
                            margin:0 auto;
                        }
                    }
                    .detail {
                        p {
                            &:not(:last-child) {
                                margin-bottom:1.5em;
                            }
                        }
                    }
                }
            }
        }
    }
    
    #philosophy {
        .wrap {
            .contents {
                p {
                    &.body {
                        font-size:min(5.4vw,3.0rem);
                    }
                }
            }
        }
    }
    
    #domain {
        .wrap {
            .contents {
                .img {
                    margin:0 auto 30px;
                }
                .domain {
                    grid-template-columns:1fr;
                    justify-items:center;
                    margin-bottom:.66em;
                    dl {
                        text-align:center;
                        dt {
                            margin-bottom:.1em;
                        }
                        &:nth-child(2) {
                            dt {
                                transform:translateY(.05em);
                            }
                        }
                    }
                }
                .contents_inner {
                    dl {
                        grid-template-columns:auto;
                        font-size:1.6rem;
                        grid-row-gap:.33em;
                        dt {
                            font-size:2.2em;
                        }
                    }
                }
            }
        }
    }
    
    #statement {
        .wrap {
            .contents {
                p {
                    &.body {
                        font-size:min(7vw,4rem);
                    }
                }
            }
        }
    }
    
    #guidelines {
        .wrap {
            .contents {
                h2 {
                    margin-bottom:1em;
                }
                ul {
                    font-size:min(4.2vw,2.6rem);
                    padding-left:2em;
                    li {
                        padding-right:0;
                    }
                }
            }
        }
    }
    
    #policy {
        .wrap {
            .contents {
                p {
                    &.body {
                        font-size:1.8rem;
                        font-weight:500;
                    }
                }
            }
        }
    }
    
}