/* 1536 , 1530 × 735 ,1366 *//* 上記画面幅でも崩れていないか確認 */

/* 修正した場合→各項目の一番下に日付をコメントアウトして追記 */



@charset "utf-8";
/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.head_box .link_box ul {
    justify-content: space-evenly;
}

.head_box .link_box ul li {
    width: 12.33333% !important;
}

.head_box .contact_bt .hvr_txt_color1:hover {
    color: white;
}

.head_box .tel_bt .hvr_txt_color1:hover {
    color: white;
}

header .button:hover::after {
    box-shadow: inset 0 0 0 15em var(--color3);
}

main {
  position: relative;
  z-index: 0; /* main自体はクリック可能な位置に保つ */
}

main::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: #efefef;
  z-index: -1; /* 背景だけをmain内のコンテンツより後ろへ */
}

#page-top .fa-chevron-up:before {
    color: white;
}

.footer_back {
    background-color: var(--color4);
}

.ft_img1 {
    width: 67vw;
    bottom: 0;
    left: -1%;
    opacity: 0.3;
}

#footer_menu,#copyright,#page-top {
    position: relative;z-index: 2
    
}

.footer_back .logo img {
        max-width: 300px;
}

.foot_tel_bt .button:hover::after {
    box-shadow: inset 0 0 0 15em var(--color3);
}

.foot_tel_bt .border_color1:hover {
    border-color: var(--color3);
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    a .banner {
        background-color: var(--color3);
    }
    
    .fat-nav li {
        font-size: 18px;
    }
    
    .ft_img1 {
        width: 111vw;
        bottom: -24%;
        left: -21%;
    }

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    .banner {
        font-size: 20px
    }
    
    .fat-nav li {
        font-size: 15px;
    }
    
    .footer_back .f_before {
        right: -59%;
        height: 1214px;
        width: 50%;
    }
    
    .ft_img1 {
        width: 138vw;
        bottom: -17%;
        left: -49%;
    }

}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.flexslider {
    filter: brightness(0.8) saturate(0.7);
}

.tora {
    width: 52vw;
    max-width: 1010px;
    min-width: 750px;
    right: 6%;
    top: -3%;
    z-index: 2;
    opacity: 0.35;
}

.fv_main {
    height: 47vw;
    max-height: 920px;
    min-height: 870px;
    left: 50%;
    bottom: -6%;
    transform: translateX(-50%);
    z-index: 2;
}

.fv_main img {
    height: 100%;
    width: auto;
}

.copy {
    width: 80%;
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    top: 50%;
    left: 50%;
    transform: translate(-47%, -50%);
    z-index: 2;
}

.copy1 {
    width: 22vw;
    max-width: 490px;
    min-width: 200px;
/*     top: 47%;
left: 27%; */
    /* transform: translateX(-50%); */
    z-index: 2;
}

.copy2 {
    width: 31vw;
    max-width: 600px;
    min-width: 200px;
/*     top: 35%;
right: -15%; */
    /* transform: translateX(-50%); */
    z-index: 2;
}



/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    .tora {
        width: 94vw;
        max-width: 1010px;
        min-width: 300px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        top: 3%;
    }
    
    .fv_main {
        height: 115vw;
        max-height: 920px;
        min-height: 300px;
        left: 50%;
        bottom: -1%;
        transform: translateX(-50%);
    }
    
    .copy {
        align-items: center;
        top: auto;
        bottom: 20%;
        left: 50%;
        transform: translate(-50%, 0%);
        flex-direction: column;
    }

    .copy1 {
        width: 39vw;
        max-width: 490px;
        min-width: 200px;
        /* top: auto;
        bottom: 36%;
        left: 50%; */
    }
    
    .copy2 {
        width: 54vw;
        max-width: 600px;
        min-width: 200px;
        top: auto;
        /* bottom: 19%;
        right: auto;
        left: 50%; */
    }
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    #main_img {
        max-height: 85vh;
    }
    
    .fv_main {
        height: 131vw;
        max-height: 510px;
        bottom: -2%;
    }
    
    .copy {
        bottom: 12%;
    }
    
    .copy1 {
        width: 56vw;
        max-width: 220px;
        min-width: 160px;
        bottom: 30%;
    }
    
    .copy2 {
        width: 77vw;
        max-width: 300px;
        min-width: 200px;
        bottom: 11%;
    }
    
    #main_img .img2 {
        object-position: left -190px top 0;
    }
    
    #main_img .img3 {
        object-position: right;
    }

}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#contents1 {
    padding-bottom: 60px;
    padding-top: 60px;
}

#contents1 .title, #attach .title {
    font-feature-settings: "palt";
    font-size: max(1.55vw, 23px);
}

#attach .title::first-letter {
  color: #e51331; /*指定したい色*/
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    #contents1 {
        padding-bottom: 30px;
        padding-top: 30px;
    }

    #contents1 .title > div {
        padding-left: 22px;
    }
    
    #contents1 .text, #contents2 .text, #contents3 .text {
        line-height: 1.7;
    }
    
    #contents1, #contents2, #contents3 {
        width: 95% !important;
    }

}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.hvr_bg_color1:hover{
    background-color: var(--color3);
    border-color: var(--color3);
}

#tel_txt .title {
    color: var(--color3) !important;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

}