@charset "utf-8";

/*全体設定
=============================*/
main {
    overflow: hidden;
}


/*メインビジュアル
=============================*/
.mv {
    width: 100%;
    position: relative;
    overflow: hidden;
}
.mv h2 {
    position: absolute;
    left: 0;
    right: 0;
    top: 18%;
  height: 120px;
  text-align: center;
    max-width: 80%;
    margin: 0 auto;
    filter: drop-shadow(0px 0px 15px #000);
}
.mv h2 img {
  max-width: 100%;
  max-height: 100%;
}


/*LOCATION
=============================*/
.txt_Box {
    width: 90%;
    margin: 0 auto;
    padding: 80px 0;
    text-align: center;
}
.txt_Box h3 {
    font-size: 30px;
    line-height: 1.5;
    margin-bottom: 30px;
}
.txt_Box p {
    font-size: 14px;
    line-height: 2;
}



/*LOCATION BOX 共通
=============================*/
.loc_Area {
    width: 100%;
    margin: 0 auto 100px;
}
.loc_Area .inn_Block {
    width: 1500px;
    max-width: 90%;
    margin: 30px auto 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-end;
}
.loc_Area .loc_txt_Box {
    width: 45%;
    text-align: left;
}
.loc_Area .inn_Block > figure {
    width: 48%;
}
.loc_Area .loc_txt_Box h4 {
    color: #d7b87e;
    font-style: italic;
    font-size: min(4vw,55px);
    margin-bottom: 30px;
}
.loc_Area .loc_txt_Box p {
    font-size: 14px;
    line-height: 2;
    margin-bottom: 30px;
}
.loc_Area .slider_area {
    display: flex;
    justify-content: space-between;
    gap:4%;
}
.loc_Area .slider_area .slick-slide img {
    max-width: 90%;
}
.loc_Area .slider_area .slick-dots {
    position: absolute;
    left: 0;
    right: inherit;
    top: inherit;
    bottom: -20px;
}
.loc_Area .slider_area .slick-dots li button {
    background: #000;
    opacity: 0.2;
}
.loc_Area .slider_area .slick-dots li.slick-active button {
    opacity: 1;
}




/*BLUE AREA
=============================*/
.blue_Area {
    width: 100%;
    background: #078797;
    background: linear-gradient(90deg, rgba(7, 135, 151, 1) 0%, rgba(9, 162, 181, 1) 50%, rgba(7, 135, 151, 1) 100%);
    padding: 100px 0;
}


/*BLUE AREA MAP
=============================*/
.blue_Area h3.map_ttl {
    width: 115px;
    max-width: 80%;
    margin: 0 auto 30px;
}
.blue_Area .map {
    width: 1000px;
    max-width: 90%;
    margin: 0 auto 100px;
}


/*BLUE AREA LIFEINFO
=============================*/
.blue_Area h3.lifeinfo_ttl {
    width: 497px;
    max-width: 80%;
    margin: 0 auto 30px;
}
.blue_Area .lifeinfo_Box {
    width: 1200px;
    max-width: 90%;
    margin: 0 auto 70px;
}
.blue_Area .lifeinfo_Box h4 {
    font-size: 25px;
    color: #fff;
    font-style: italic;
    background: rgba(255, 255, 255, 0.2);
    padding: 10px 10px 10px 20px;
    clip-path: polygon(0 0, 100% 0, 97% 100%, 0% 100%);
    margin-bottom: 20px;
}
.blue_Area .lf_flex {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 2%;
}
.blue_Area .lf_flex .img {
    width: 50%;
    display: flex;
    justify-content: space-between;
    gap:4%;
    flex-wrap: wrap;
}
.blue_Area .lf_flex .img figure {
    width: 48%;
    margin-bottom: 20px;
    color: #fff;
}
.blue_Area .lf_flex .img figcaption {
    margin-top: 10px;
    line-height: 1.6;
    font-size: 14px;
}
.blue_Area .lf_flex .time {
    width: 45%;
}
.blue_Area .lf_flex .time dl {
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dotted #fff;
    padding: 12px;
    color: #fff;
    font-size: 13px;
}





@media only screen and (max-width: 1030px) {
    
    
    /*メインビジュアル
    =============================*/
    .mv h2 {
        max-width: 60%;
        top: 30%;
    }
    
    
    /*LOCATION
    =============================*/
    .loc_Area {
        margin: 0 auto 70px;
    }
    .txt_Box h3 {
        font-size: 20px;
    }
    .loc_Area .loc_txt_Box {
        width: 100%;
    }
    .loc_Area .loc_txt_Box h4 {
        font-size: min(11vw,55px);
    }
    .loc_Area .inn_Block > figure {
        width: 100%;
        margin-top: 30px;
    }
    .loc_Area .slider_area .slick-slide {
        border-right: 2px solid #fff;
        box-sizing: border-box;
    }
    .loc_Area .slider_area .slick-slide img {
        max-width: 100%;
    }
    
    
    /*BLUE AREA
    =============================*/
    .blue_Area {
        padding: 50px 0;
    }
    
    
    /*BLUE AREA MAP
    =============================*/
    .blue_Area h3.map_ttl {
        width: 80px;
    }
    
    
    
    /*BLUE AREA LIFEINFO
    =============================*/
    .blue_Area h3.lifeinfo_ttl {
        width: 400px;
    }
    .blue_Area .lifeinfo_Box h4 {
        font-size: 20px;
    }
    .blue_Area .lf_flex {
        flex-wrap: wrap;
    }
    .blue_Area .lf_flex .img {
        width: 100%;
    }
    .blue_Area .lf_flex .img figcaption {
        font-size: 12px;
    }
    .blue_Area .lf_flex .time {
        width: 100%;
    }
    .blue_Area .lf_flex .time dl {
        font-size: 12px;
    }
    
    
    
    
    
    
    
}