/* ----------　all　---------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap');

body {
    font-family: "Noto Sans JP","游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 16px;
        line-height: 1.8;
}

.font_en, .date, a[href^="tel:"], a[href^="mailto:"] {
      font-family: "Montserrat", sans-serif;
}

header {
    background-image: url('../img/header_bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

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

.fat-nav li {
    font-size: 16px;
}

}

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


}


/* -----　FV　----- */

#main_img {
    background-size: cover;
    background-position: left top;
}

#main_img:before {
    content: "";
    width: 45%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #ffffff;
background: #F9F9F7;
background: linear-gradient(90deg, rgba(249, 249, 247, 1) 30%, rgba(255, 255, 255, 0) 100%);
z-index: 0;
    
} 

.cachcopy {
    left: 8%;
    top: 5%;
    width: 20%;
    z-index: 1;
}

.subcopy {
    left: 8%;
    bottom: 5%;
    width: 20%;
    z-index: 1;
}

.scroll_bt span {
    border-color: #5e845f;
}

.scroll_bt span::before {
        background-color: #5e845f;
}

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

#main_img {
    height: 50vh;
}

.cachcopy {
    width: 27%;
}

.subcopy {
    left: 8%;
    bottom: 2%;
    width: 27%;
}

}

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

    #main_img {
        height: 65vh;
        background-position: 55% 0%;
    }
    
    .cachcopy {
    width: 45%;
    left: 8%;
    top: 7%;
    }

    .subcopy {
        left: 8%;
        bottom: 0%;
        width: 60%;
    }

#main_img:before {
    width: 35%;
    background: linear-gradient(90deg, rgba(249, 249, 247, 1) 10%, rgba(255, 255, 255, 0) 100%);
}

}


/* ----------　TOP　---------- */

#contents1 .title, #contents2 .title, #contents3 .title {
    justify-self: flex-start;
}


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


}

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


}



/* ----------　下層ページ　---------- */

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


}

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


}


/* ----------　PC確認サイズ　---------- */
/* 1536 */
@media screen and (max-width: 1536px){}
/* 1530 × 735 */
@media screen and (max-width: 1530px){}
/* 1366 */
@media screen and (max-width: 1366px){}