/* **********
共通
************* */
body{
    font-family: "Noto Sans JP", sans-serif;
}

.en{
    font-family: "Roboto", sans-serif;
}

.flex{
    display: flex;
}

img{
    max-width: 100%;
    display: block;
}

a{
    text-decoration: none;
    color: #151515;
}

li{
    list-style: none;
}

main{
    margin: 63px 0 100px;
}

section, .footer-container{
    max-width: 1110px;
    padding: 0 40px;
    margin: 0 auto;
}

main h2{
    font-size: 40px;
    min-width: 4em;
    color: #F7BB36;
}

/* **********
header
************* */
header{
    justify-content: space-between;
    padding: 31px 70px;
    height: 90px;
    align-items: center;
}

header h1 img{
    width: 167px;
}

header .menu ul{
    gap: 52px;
}

.hover-menu li {
    position: relative;
    overflow: hidden;
    padding: 7px;
}

.hover-menu li::before,
.hover-menu li::after {
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: 1px;
    background: #F7BB36;
    transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.hover-menu li::before {
top: 0;
left: -100%;
}

.hover-menu li::after {
bottom: 0;
right: -100%
}

.hover-menu li a::before,
.hover-menu li a::after{
    position: absolute;
    display: block;
    content: "";
    width: 1px;
    height: 100%;
    background: #F7BB36;
    transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.hover-menu li a::before {
    top: 100%;
    left: 0;
}

.hover-menu li a::after {
    top: -100%;
    right: 0;
}

.hover-menu li:hover::before {
    animation: topline 0.1s linear forwards;
}

@keyframes topline {
    0% {
      left: -100%;
    }
    100% {
      left: 0;
    }
}

.hover-menu li:hover::after {
    animation: btmline 0.1s linear forwards 0.2s;
}

@keyframes btmline {
    0%{
        right: -100%
    }
    100%{
        right: 0;
    }
}

.hover-menu li:hover a::before {
    animation: leftline 0.1s linear forwards 0.3s;
}

@keyframes leftline{
    0%{
        top: 100%;
    }
    100%{
        top: 0;
    }
}

.hover-menu li:hover a::after {
    animation: rightline 0.1s linear forwards 0.1s;
}

@keyframes rightline{
    0%{
      top: -100%;
    }
    100%{
      top: 0;
    }
}
  
/* **********
mv
************* */
.mv{
    background-image: url(../img/pc-fv.jpg);
    background-size: cover;
    aspect-ratio: 12 / 5;
    position: relative;
}

.mv .mv-item{
    position: absolute;
    text-align: center;
    color: #FFFFFF;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.mv .mv-item .big-text{
    font-weight: 700;
    font-size: 11.11vw;
}

.mv .mv-item .sub-text{
    font-weight: 400;
    font-size: 1.67vw;
}

/* **********
news
************* */
.news{
    gap: 12.34%;
}

.news article{
    justify-content: flex-start;
    gap: 3.6%;
    font-size: 0.938rem;
    border-bottom: 1px solid #E8E8E8;
    line-height: 1.8;
    padding: 17px 0;
}

/* **********
service
************* */
.service{
    margin-bottom: 100px;
    position: relative;
    z-index: 2;
}

.service::after{
    font-size: 10.5rem;
    position: absolute;
    top: -11%;
    right: 1.5%;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    color: #F2F2F2;
    z-index: -1;
    content: "SERVICE";
}

.service h2{
    margin-top: 73px;
}

.service .grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    margin-top: 53px;
    gap: 30px;
}

.service .grid .item img{
    margin: 0 auto;
    width: 48px;
}

.service .grid .item{
    background-color: #FFFFFF;
    box-shadow: 0 3px 21px rgba(00, 00, 00, 16);
    border-radius: 8px;
    text-align: center;
    padding: 50px;
}

.service .grid .item h3{
    color: #151515;
    font-size: 1.125rem;
    font-weight: 400;
    margin-top: 5px;
    line-height: 1;
}

.service .grid .item p{
    color: #151515;
    font-size: 0.875rem;
    font-weight: 400;
    margin-top: 16px;
    text-align: left;
    line-height: 1.7;
    letter-spacing: 0.04em;
}

/* **********
footer
************* */
footer{
    background-color: #F7BB36;
    padding: 61px 0 50px;
}

footer .footer-container{
    margin: 0 auto;
    max-width: 1110px;
    padding: 0 40px
}
.footer-container ul{
    gap: 4.95%;
    margin-bottom: 18px;
}

.footer-container a{
    color: #FFFFFF;
    font-size:  0.875rem;
    line-height: 1;
    letter-spacing: 0.005em;
    display: block;
}

footer small {
    color: #FFFFFF;
    font-size: 0.75rem;
    line-height: 4.833;
    letter-spacing: 0.003em;
    display: block;
}

/* *************************************************************
下層ページ（message）
************************************************************* */
/* **********
mv 
************* */
.sub-mv{
    background-image: url(../img/pc-sub.jpg);
    background-size: cover;
    aspect-ratio: 144 / 19;
    position: relative;
}

.sub-mv-text{
    font-size: 2.7vw;
    font-weight: 700;
    color: #FFFFFF;
    position: absolute;
    text-align: center;
    left: 43%;
    top: 33%;
}

/* **********
main 
************* */
.container{
    margin-bottom: 82px;
}

.message-text{
    text-align: center;
    font-weight: 400;
    margin-top: 60px;
}

.small-text{
    margin-top: 26px;
    text-align: center;
    font-size: 1.125rem;
    line-height: 1;
    letter-spacing: 0.05em;
}

.ceo-img{
    margin-top: 40px;
}

.ceo-img img{
    width: 100px;
    height: 100px;
    margin: 0 25px 0 0;
}

.ceo-message{
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: 0.05em;
}

.ceo-message a{
    color: #349BF4;
}

.office-img{
    margin: 0 auto;
    display: block;
    max-width: 1110px;
}

.pc{
    display: block !important;
}

.sp{
    display: none !important;
}

/* *************************************************************
下層ページ（company-overview）
************************************************************* */
/* **********
main 
************* */
.company-profile dl{
    border-bottom: solid 1px #DDDDDD;
    padding: 2.7%;
    gap: 17.39%;
}

.company-profile dt{
    min-width: 5em;
    font-weight: 400;
}

.company-profile dd{
    font-weight: 400;
}

.company-profile dt, dd{
    line-height: 1;
    letter-spacing: 0.05em;
}

/* **********
map 
************* */
#map{
    width: 100%;
    height: 400px;
    margin: 0 auto;
}

.company-map{
    margin-top: 50px;
}

.company-map .map-link{
    text-align: right;
    margin: 22px 0 79px 0;
}
/* *************************************************************
レスポンシブ
************************************************************* */
@media(max-width: 768px){
    header{
        padding: 20px;
        height: 60px;
    }
    
    header h1 img{
        width: 107px;
    }

    .mv{
        background-image: url(../img/sp-fv.jpg);
        aspect-ratio: 75 / 92;
        width: 100%;
    }

    .mv .mv-item .big-text{
        font-weight: 700;
        font-size: 22.22vw;
    }
    
    .mv .mv-item .sub-text{
        font-weight: 400;
        font-size: 5.56vw;
    }
    
    main{
        margin-top: 32px;
        margin-bottom: 50px;
    }

    .news{
        flex-direction: column;
    }

    .news h2{
        font-size: 32px;
        margin-top: 32px;
        font-weight: 400;
    }

    .news article{
        display: block;
        margin-top: 22px;
    }

    .news article .date{
        margin-bottom: 6px;
    }

    .service h2{
        font-size: 32px;
        font-weight: 400;
        margin-top: 60px;
    }
    
    .service .grid{
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 22px;
    }

    .service .grid .item{
        box-shadow: 0 3px 12px rgba(00, 00, 00, 16);
    }

    .service .grid img{
        width: 60px;
        margin-top: 40px;
    }

    .service .grid .item h3{
        font-size: 1rem;
        line-height: 1;
        margin-top: 7px;
    }

    .service .grid .item p{
        line-height: 1.6;
        padding: 0 30px;
    }

    section{
        padding: 0 20px;
    }

    footer{
        padding: 41px 0 29px;
    }

    footer ul{
        gap: 34px;
        margin-bottom: 20px;
    }
    
    .footer-container a{
        font-size:  0.75rem;
        line-height: 1;
    }

    footer small {
        font-size: 0.625rem;
        line-height: 1;
    }

    .service::after{
        font-size: 4.375rem;
        top: 0%;
        right: 2%;
    }

    /* message */
    .sub-mv{
        background-image: url(../img/sp-fv.jpg);
        aspect-ratio: 75 / 32;
        width: 100%;
        margin-bottom: 56px;
    }

    .sub-mv .sub-mv-text{
        left: 36%;
        top: 40%;
        font-weight: 700;
        font-size: 6.4vw;
    }

    .message-text{
        font-size: 24px;
        line-height: 1.5;
        letter-spacing: 0.05em;
        font-weight: 400;
    }

    .small-text{
        font-weight: 400;
        font-size: 15px;
        line-height: 1.5;
        letter-spacing: 0.05em;
    }

    .ceo-message{
        gap: 15px;
    }
    
    .office-img{
        display: block;
    }

    .office-img .sp{
        max-width: 100%;
        padding: 0 20px;
        margin: 0 auto;
        aspect-ratio: 67 / 52;
    }
    
    .pc{
        display: none !important;
    }
    
    .sp{
        display: block !important;
    }

    /* company-overview */
    #map{
        height: 300px;
    }

    .company-map{
        margin-bottom: 79px;
    }
}