@charset "UTF-8";

#youtube-wrap{
    clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 60%) ;
    padding-top: 50.0714% !important;
    z-index: 10;
}
.diagonal_01{
    display: block;
    width: 100%;
    background: #0459CE;
    clip-path: polygon(0 0, 100% 0%, 100% 90%, 0 100%);
    padding: 280px 0;
    margin: -400px 0 -300px;
}
.area-title>h3{
    position: relative;
    color: #fff;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 50px;
}
.area-title>h3::before {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 60px;
    opacity: 12%;
}
.message{
    margin-bottom: 150px;
}
.message>h3::before {
    content: 'message';
}
.msg-wrap{
    /* display: flex;
    justify-content: center; */
    color: #fff;
}
.msg_txt{
    margin: 0 auto;
    max-width: 1000px;
}
.msg_image{
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 50px auto;

}
.company{
    margin-bottom: 150px;
}
.company>h3::before {
    content: 'company';
}

.cmp-wrap{
    border-top: solid 1px #fff;
    padding-top: 30px;
    color: #fff;
}
.cmp-wrap>table{
    margin: 0 auto;
    border-collapse: unset;
    border-spacing: 20px 10px;
}
.cmp-wrap>table tr{
    margin-bottom: 5px;
}
.cmp-wrap>table .td-first{
    width: 25%;
    vertical-align: top;
}
.access{
    padding-bottom: 150px;
}
.access>h3::before {
    content: 'access';
}
.access-wrap{
    color: #fff;
    display: flex;
}
.map-info{
    width: calc(100% / 3);
    text-align: center;
    
}
.shop-underber{
    width: 85%;
}
.map-info>iframe{
    height: 50%;
}
.hist{
    background-color: rgb(4, 89, 206, 15%);
    padding: 200px 20%;
}
.hist>h3{
    color: #0459CE;
}
.hist>h3::before {
    content: 'history';
    color: #0459CE;
}
.hist-wrap{
    border-top: solid 1px #0459CE;
    color: #0459CE;
    padding-top: 30px;
}
.hist-wrap>table{
    margin: 0 auto;
    border-collapse: unset;
    border-spacing: 30px 0;
}
.hist-wrap>table td{
    color: #000;
    vertical-align: top;
    padding-bottom: 15px;
}
.hist-wrap>table .td-first{
    color: #0459CE;
    border-right: 1px solid #0459CE;
    text-align: center;
    width: calc(100% / 3);
}
@media screen and (max-width:767px) {
    #youtube-wrap{
        clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 0% 60%);
    }
    .message {
        padding: 100px 0 0;
    }
    .msg-wrap{
        display: block;
    }
    .msg_txt{
        margin: 0;
    }
    .diagonal_01{
        clip-path: polygon(0 0, 100% 0%, 100% 98%, 0 100%);
        padding: 100px 30px 0;
    }
    .msg_image{
        width: 100%;
        display: block;
        margin: 35px 0 0 0;
        text-align: center;
    }
    .cmp-wrap>table{
        border-spacing: 0px 10px;
    }
    .area-title>h3{
        margin-top: 100px;
    }
    .access {
        padding-bottom: 100px;
    }
    .access-wrap {
    display: block;
    }
    .map-info{
        width: 100%;
    }
    .shop-underber{
        width: 100%;
    }
    .shop-info{
        text-align: left;
    }
    .hist{
        margin-top: 100px;
        padding: 200px 10% 200px;
    }
    .hist-wrap>table{
        border-spacing: 0px 0;
    }
    .hist-wrap>table td{
        padding-left: 10px;
        line-height: 2rem;
    }
}