@charset "utf-8";

#message {
        .wrap {
                .contents {
                        .contents_inner {
                                display:grid;
                                grid-template-columns:1fr 25%;
                                align-items:start;
                                grid-gap:30px;
                                .detail {
                                        h2 {
                                                font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
                                                font-size:2.2rem;
                                                font-weight:400;
                                                line-height:1.6;
                                                margin-bottom:1.5em;
                                                &::after {
                                                        content:none;
                                                }
                                                span {
                                                        font-size:1.4rem;
                                                        display:block;
                                                }
                                        }
                                }
                                .img {
                                        img {
                                                display:block;
                                                margin-bottom:15px;
                                        }
                                        p {
                                                font-size:1.5rem;
                                                display:grid;
                                                grid-template-columns:repeat(2,auto);
                                                align-items:center;
                                                justify-content:center;
                                                grid-gap:.5em;
                                                span {
                                                        font-size:1.75em;
                                                }
                                        }
                                }
                        }
                }
        }
}

#philosophy {
        .wrap {
                padding-top:90px;
                .contents {
                        p {
                                margin-bottom:2em;
                        }
                        .strength {
                                width:100%;
                                padding:60px;
                                aspect-ratio:11/3.5;
                                background:url(../img/about/company02.jpg) no-repeat center center/cover;
                                display:grid;
                                align-content:space-between;
                                position: relative;
                                h3 {
                                        font-size:7.0rem;
                                        color:#FFFFFF;
                                        font-weight:500;
                                        line-height:1.2;
                                        position: relative;
                                        z-index: 1;
                                        span {
                                                font-size:2.0rem;
                                                display:block;
                                        }
                                }
                                .btn {
                                        justify-self:end;
                                        margin-right:0;
                                        position: relative;
                                        z-index: 1;
                                }
                                &::before {
                                        content:'';
                                        display: block;
                                        width: 100%;
                                        height: 100%;
                                        position: absolute;
                                        left: 0;
                                        top:0;
                                        background-color: rgba(0,0,0,.2);
                                        z-index: 0;
                                }
                        }
                }
        }
}

#history {
        .wrap {
                padding-top:90px;
                .contents {
                        table {
                                th {
                                        text-align:left;
                                        width:15em;
                                }
                        }
                }
        }
}

#about {
        .wrap {
                padding-top:90px;
                .contents {
                        table {
                                margin-bottom:90px;
                                th {
                                        text-align:left;
                                        width:15em;
                                }
                                td {
                                        h3 {
                                                margin-bottom:1em;
                                                & + div {
                                                        display:grid;
                                                        grid-template-columns:repeat(2,1fr);
                                                        grid-gap:2em;
                                                        &:not(:last-child) {
                                                                margin-bottom:2em;
                                                        }
                                                }
                                        }
                                }
                        }
                        .contents_inner {
                                display:grid;
                                grid-template-columns:50% 1fr;
                                align-items:start;
                                grid-gap:30px;
                                .map {
                                        iframe {
                                                display:block;
                                                width:100%;
                                                aspect-ratio:1.7/1;
                                                margin-bottom:15px;
                                        }
                                        a {
                                                color:var(--color_main);
                                        }
                                }
                                &:not(:last-child) {
                                        margin-bottom:60px;
                                }
                                .addr {
                                        h3 {
                                                font-weight:600;
                                                margin-bottom:.5em;
                                        }
                                        p {
                                                margin-bottom:3em;
                                        }
                                        dl {
                                                font-size:1.6rem;
                                                padding:1.5em 1em;
                                                background-color:#f5f5f5;
                                                dt {
                                                        font-weight:600;
                                                        margin-bottom:1em;
                                                }
                                                dd {
                                                        line-height:1.75;
                                                }
                                        }
                                }
                        }
                }
        }
}


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

}

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

        #message {
                .wrap {
                        .contents {
                                .contents_inner {
                                        grid-gap:20px;
                                        .img {
                                                p {
                                                        grid-template-columns:1fr;
                                                        justify-items:center;
                                                        grid-gap:0;
                                                        line-height:1.5;
                                                }
                                        }
                                }
                        }
                }
        }
        
}

@media screen and (max-width:768px){
        
        #message {
                .wrap {
                        .contents {
                                .contents_inner {
                                        grid-template-columns:1fr;
                                        grid-gap:20px;
                                        .detail {
                                                display:contents;
                                                h2 {
                                                        margin-bottom:0;
                                                }
                                                p {
                                                        order:2;
                                                }
                                        }
                                        .img {
                                                max-width:400px;
                                                margin:0 auto;
                                                p {
                                                        font-size:1.4rem;
                                                        grid-template-columns:repeat(2,auto);
                                                        grid-gap:.5em;
                                                }
                                        }
                                }
                        }
                }
        }
        
        #philosophy {
                .wrap {
                        padding-top:60px;
                        .contents {
                                p {
                                        margin-bottom:2em;
                                }
                                .strength {
                                        padding:45px 30px;
                                        aspect-ratio:unset;
                                        justify-items:center;
                                        grid-gap:30px;
                                        h3 {
                                                font-size:5.0rem;
                                                color:#FFFFFF;
                                                font-weight:500;
                                                line-height:1.2;
                                                span {
                                                        font-size:2.0rem;
                                                        display:block;
                                                }
                                        }
                                        .btn {
                                                justify-self:center;
                                                margin-right:auto;
                                        }
                                }
                        }
                }
        }
        
        #history {
                .wrap {
                        padding-top:60px;
                        .contents {
                                table {
                                        th,td {
                                                width:100%;
                                        }
                                }
                        }
                }
        }
        
        #about {
                .wrap {
                        padding-top:60px;
                        .contents {
                                table {
                                        margin-bottom:60px;
                                        th,td {
                                                width:100%;
                                        }
                                        td {
                                                h3 {
                                                        & + div {
                                                                grid-gap:1em;
                                                                p {
                                                                        font-size:1.2rem;
                                                                }
                                                        }
                                                }
                                        }
                                }
                                .contents_inner {
                                        grid-template-columns:1fr;
                                        grid-gap:0;
                                        .map {
                                                order:1;
                                                iframe {
                                                        margin-bottom:5px;
                                                }
                                                a {
                                                        font-size:1.3rem;
                                                }
                                        }
                                        &:not(:last-child) {
                                                margin-bottom:45px;
                                        }
                                        .addr {
                                                display:contents;
                                                p {
                                                        margin-bottom:1em;
                                                }
                                                dl {
                                                        order:2;
                                                        font-size:1.4rem;
                                                        padding:1em;
                                                        margin-top:1.5em;
                                                }
                                        }
                                }
                        }
                }
        }
        
}