/*■■ 全体 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.drawer-nav {
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.95);
}

/* タブレット */
@media screen and (max-width: 768px){
    #header {
        transition: .3s;
    }
    
    .is-show {
        transform: translateY(0);
        z-index: 9999;
        background-color: rgba(255, 255, 255, 0.75);
    }
    
    #header.is-show .contact a {
        background-color: #333;
    }
}

/* スマホ */
@media screen and (max-width: 667px) {
    #loader img {
        width: 150px;
    }
    
    #header a img {
        width: 80%;
    }
    
    #header .menu_bt.grid_1 {
        width: 14.33333% !important;
    }
}

/*■■ top ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#main_img:before {
    background: rgba(0, 0, 0, 0.5);
}

.annual_rings {
    z-index: 2;
    width: 36%;
    height: auto;
    top: 50%;
    margin: auto;
    left: -20%;
    animation: 20s linear infinite rotation;
    transform-origin: 50% 2%;
}

@keyframes rotation{
  0%{ transform:rotate(0)translateY(-50%);}
  100%{ transform:rotate(360deg)translateY(-50%);}
}

.main_copy {
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
    top: 33%;
    width: 45%;
    height: auto;
}

#intro:before {
    background: rgb(47 33 25 / 70%);
}

#content1 .con1_wrap {
    padding-bottom: 5px;
}
#content1 .con1_img1 {
    width: calc(100% - 45vw);
}

#content2 .sub_title {
    color: #ddbb88;
}

#content2 .back_color2::after {
    background: rgba(32, 32, 32, 0.7);
}

/* タブレット */
@media screen and (max-width: 768px){
    #main_img {
        height: 90vh;
    }
    
    #main_img .main_img1 {
        background-position: top left 63%;
    }
    
    .annual_rings {
        width: 65%;
        top: -34%;
        margin: auto;
        left: 50%;
        transform-origin: 0% 47%;
        opacity: 0.6;
    }
    
    @keyframes rotation{
      0%{ transform:rotate(0)translateX(-50%);}
      100%{ transform:rotate(360deg)translateX(-50%);}
    }

    .main_copy {
        top: 25%;
        height: 53%;
        width: auto;
    }
    
    .main_copy img {
        width: auto;
        height: 100%;
    }
    
    .sub_copy {
        z-index: 2;
        left: 50%;
        transform: translateX(-50%);
        bottom: 10%;
        width: 29%;
        height: auto;
    }
    
    .top_cms .cms_title.mg_b-100px {
        margin-bottom: 50px;
    }
    
    #content1 .con1_wrap {
    padding-bottom: 40px;
}

    #t_cms_banner .img_box .bg_color img {
    opacity: 1;
    }
    
    #t_cms_banner .img_box .box_title span {
    color: #fff;
    background-color: rgba(73, 99, 83, 1.0);
    }
    
    #t_cms_banner .img_box .box_txt {
    opacity: 0;
    }
    
    .cms_2-c .box_txt1.font_2up_tb {
        font-size: -webkit-calc(1rem + 5px);
        font-size: calc(1rem + 5px);
    }


}
/* スマホ */
@media screen and (max-width: 667px){
    #intro .txt_wrap .title {
        letter-spacing: 3px;
    }
    
    #main_img .main_img1 {
        background-position: top left 71%;
    }
    
    .annual_rings {
        top: -23%;
    }
    
    .main_copy {
        top: 27%;
        height: 48%;
    }
    
    .sub_copy {
        width: 41%;
    }
    
    #content1 #con1_txt > div {
        height: 230px;
        padding-top: 4px;
    }
    
    #top_cms .top_cms_box .width_1280-max {
        width: 90%;
    }
    
    .cms_2-c .box_txt1.font_2up_tb {
        font-size: -webkit-calc(1rem + 2px);
        font-size: calc(1rem + 2px);
    }
    
    .cms_2-c .box_txt1 {
        font-weight: bold;
    }
    
    #top_cms .cms_title.mg_b-50px_sp {
        margin-bottom: 10px;
    }

}
/* スマホ 320px*/
@media screen and (max-width: 320px) {
    #intro .txt_wrap .title {
        font-size: calc(1rem + 4px);
        letter-spacing: 1px;
    }
    
    .cms_btn_wrap .more_btn {
        width: 274px;
    }
}

/*■■ cms ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/



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


/*■■ footer ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

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