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

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



@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Noto+Sans+JP:wght@100..900&display=swap');
/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

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

.bt_bnr {
    left: 0;
    right: 0;
    z-index: 5;
}

.is-hidden {
  visibility: hidden;
  opacity: 0;
}

.pagetop {
    border: 1px solid #ffffff;
}

#fakeloader .fl {
    max-width: 200px;
}

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

.header .logo1 img {
    filter: drop-shadow(1px 1px 0px white);
}

}

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

.logo1 {
    padding-left: 0;
}

.header .logo1 img {
    filter: drop-shadow(1px 1px 0px white);
}

.bt_bnr {
    left: 5%;
    right: auto;
    z-index: 5;
}

}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#main_img {
    height: calc(100vh - 100px);
    overflow: hidden;
}

#main_img:before {
    content: "";
    width: 100%;
    height:100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--color2);
    opacity: 0.5;
    z-index: 1;
    ;
}

.main_copy {
    z-index: 2;
    left: 10%;
    bottom: 5%;
    width: 45%;
}
/* 
.fv_1 {
    width: 50%;
    height: 100%;
    background-image: url('../img/fv_1.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top right;
    right: 0;
    top: 0;
    z-index: 2;
}
 */
.fv_2 {
    width: 45%;
    height: 100%;
    background-image: url(../img/fv_2.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top right;
    right: 4%;
    top: 5%;
    z-index: 2;
}

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

#main_img {
    height: calc(45vh - 100px);
}

    .main_copy {
        top: 20%;
        width: 55%;
        left: 5%;
    }

}

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

#main_img {
    height: 80vh;
        max-height: 600px;
}

/*     .fv_1 {
    width: 105%;
    height: 100%;
    background-size: cover;
    left: 0%;
    right: 0px;
    top: 0;
} */

.main_copy {
        top: 25%;
        width: 90%;
        top: auto;
        bottom: 5%;
        left: 4%;
    }

.fv_2 {
    width: 100%;
    height: 100%;
    right: 0%;
    top: 5%;

}

}

/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#con3 .box .title {
    font-size: clamp(25px, 1.8vw, 50px);
    line-height: 1.5;
}

#con3 .box .icon p {
    font-size: clamp(30px, 10vw, 70px);
    line-height: 1.5;
}

.con3_btn {
    border-radius: 50px;
}

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

}

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

}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.cate_list li a {
    color: var(--color1);
}

.cate_list li a:hover {
    background-color: var(--color1);
    color: #ffffff;
    border-color:  var(--color1);
}

.BA_type1 .box_item, .BA_type1 .box_img1, .BA_type1 .box_img2 {position: relative;}
.BA_type1 .box_item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50.3%;
    transform: translate(-50%,-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 17px 0 17px 40px;
    border-color: transparent transparent transparent #ff9e03;
}
.BA_type1 .box_img1 {margin-right: 40px;}
.BA_type1 .box_img2 {margin-left: 40px;}
.BA_type1 .box_img1::after, .BA_type1 .box_img2::after {
    position: absolute;
    height: 33px;
    width: 87px;
    background-color: #fff;
    color: #434343;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}
.BA_type1 .box_img1::after {content: "before";}
.BA_type1 .box_img2::after {content: "after";}

#contact_mail::before {
    display: block;
    height: 10rem;
    margin-top: -10rem;
    content: "";
}

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

.cate_list li {
    width: 100%!important;
}

}

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

.BA_type1 .box_img1 {margin-right: 5%;margin-bottom: 50px;}
.BA_type1 .box_img2 {margin-left: 5%;}
.BA_type1 .box_img1::after, .BA_type1 .box_img2::after {height: 30px;font-size: 15px;}
.BA_type1 .box_item::after {transform: translate(-50%,-60%) rotate( 90deg);border-width: 20px 0 20px 23px;}

.cate_list li a {
    padding-left: 15px;
    padding-right: 15px;
}

}