/*■■ fv ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#intro:before{
    background:linear-gradient(180deg, transparent 20vh, rgb(79 88 99 / 57%) 80vh)
}


.catch_bg{}
.catch{
    position: relative;
    z-index: 5;
    padding: 10vh 0 80px;
    margin: 0 auto;
    width: 70%;
    max-width: 1000px;
}


/* タブレット */
@media screen and (max-width: 768px){
    .catch{
        padding: 16vh 0 8vh;
        width: 84%;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    .catch{width: 100%;}
}

/*■■ ヘッダークローン無し ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.drawer-open .drawer-overlay{
    display: none;
}
.drawer-nav,.drawer-open{
    touch-action: none!important;
    overflow: hidden !important;
}
.drawer-nav{
    z-index: 10;
}
.is-show{
    pointer-events: none;
    height: 100px;
    background: linear-gradient(180deg, rgb(230 220 210 / 60%) 45%, rgb(230 220 210 / 1%) 100%)!important;
}
.clone-nav #header{pointer-events: auto;}

/* タブレット */
@media screen and (max-width: 768px){
    .clone-nav #header{display: flex;}
    .is-show{height: 90px;}
    header #header{
        position: fixed!important;
        display: none;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    .is-show{height: 70px;}
    .clone-nav #header{display: flex;}
    header #header{
        position: fixed!important;
        display: none;
    }
}

/*■■ ヘッダー TOP ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/* 初期状態：画面外に隠す */
.clone-nav #header ,.is-show {
    position: fixed;
    top: -100px; 
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    transition: top 0.3s ease; 
    z-index: 999;
}

/* スクロール後の状態 */
.clone-nav #header.active,.is-show.active {
    top: 0;
}
.clone-nav #header,.clone-nav #header.active{z-index: 100000!important;}
/* タブレット */
@media screen and (max-width: 768px){
    .clone-nav #header,.is-show {
        top: 0;
    }
    .clone-nav #header{
        width: 90%;
    }
    #t_cms_banner .img_box:hover .bg_color,
    #t_cms_banner .img_box .bg_color,#t_cms_banner .img_box .bg_color{
        width: 90%;
    }#t_cms_banner .img_box .box_title span {
    color: #fff;
    }
/*     #t_cms_banner .img_box .bg_color {
    width: 100%;
} */
    #t_cms_banner .img_box .bg_color img {
        width: 100%;
        opacity: 1;
        -ms-filter: "alpha(opacity=100)";
        filter: alpha(opacity=100);
    }
    #t_cms_banner .img_box .box_txt,#t_cms_banner .img_box:hover .box_txt{
    	opacity: 1!important;
    }
    .img_box .box_title span{
        background-color: rgba(77, 70, 64, 1.0)!important;
        color: #fff;
    }
    #t_cms_banner .box_txt{
        text-shadow: 0 0 5px var(--color2), 0 0 10px var(--color2), 0 0 15px rgb(195 170 148);
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    header #header{
        width: 90%;
        left: 5%;
    }
    
    .drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before{
        background-color: var(--color1)!important;
    }
    .drawer-open .drawer-hamburger-icon{
            background-color: transparent!important;
    }
    #content1 .con1_img1{
        width: calc(100% - 10vw);
        margin: -60px auto 0;
    }
    #intro .txt_wrap{padding: 100px 10px 50px;}
    #intro .txt_wrap .title{
        width: 220px!important;
        margin: 0 auto;
    }

    
    #content2 .back_color2{
        padding-bottom: 100px !important;
    }
}

/*■■ リンク ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.cate_list li{}

.cate_list li a{
    background: var(--color2)!important;
    box-shadow: -1px -1px 0 var(--color3);
}
.cate_list li a:hover{
    box-shadow:5px 5px 0px var(--color3);
    background: linear-gradient(135deg, #f1e8e0, var(--color2))!important;
}
.bnr{
    max-width: 600px;
    width: 70%;
    z-index: 3;
    position: relative;
    margin: 0 auto;
}

/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){
    .bnr{width: 90%;}
}

/*■■ 区切り ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.separate{
    background: url(../img/separate.png);
    background-size: cover;
    display: block;
    position: relative;
    aspect-ratio: 13;
    width: 100%;
    z-index: 2;
}
#page_title .separate{
    position: absolute;
    bottom: 0;
}



/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){
    .separate{
        background: url(../img/separate_sp.png);
        background-size: cover;
        aspect-ratio: 10;
    }
}

/*■■ 波 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.wave{
    position:absolute;
    height:200px;
    width: 100%;
    bottom: 0;
    left: 0;
}
canvas{
position: absolute;
bottom: 0;
left:0;
width: 100%;
}

/*■■ 問い合わせ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.mail{
    max-width: 430px;
    margin: 0 auto;
}


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


/*■■ CMS ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#cms_2-g .cate_title{
    line-height: 1.3;
}

#cms_2-g.te .cate_txt1{
    font-size: 18px;
    line-height: 1.2;
    color: var(--color3);
}