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

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



@charset "utf-8";
/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
body {
    overflow: hidden;
}
.foot_wrap, header {
    background-image: url(../img/wood.jpg);
}
.is-show {
    box-shadow: 0px 2px 3px #0000001a;
}
#footer .grid_6 {
    border-color: var(--color1);
}

.is-show #header .contact a {
    color: #fff;
    background-color: var(--black);
}
.drawer-open .is-show {
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}
/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
header #header {
        position: relative;
    width: 90%;
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#loader img {
    width: 200px;
}
header #header {
    width: 85%;
}
}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#main_img:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url(../img/catch.png), url(../img/fv_img.png);
    background-repeat: no-repeat;
    background-position: 71% 57%, 30% 60%;
    background-size: max(160px, 12%), max(310px, 27%);
    z-index: 2;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
#main_img:after {
    background-position: 80% 60%, 20% 60%;
    background-size: 20%, 40%;
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#main_img {
    height: 90vh;
}
    #main_img:after {
        background-position: 50% 25%, 50% 84%;
        background-size: 33%, 70%;
    }
#content1 #con1_txt h2, #content2 h2, #top_cms h2, #intro .txt_wrap .title {
    font-size: 8vw;
}
#intro .txt_wrap .title {
    letter-spacing: 6px;
}
}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#intro .main_img1 {
    position: absolute;
    mix-blend-mode: luminosity;
    filter: opacity(0.5);
}
#intro .txt_wrap .title {
    text-align: start;
}
#intro {
    background: #000;
}
.clipped {
    mask-image: url(../img/mask.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}
#content1 .con1_img1 {
    position: relative;
}
#content1 .con1_img1:before {
    content: "";
    background-image: url(../img/brush.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30%;
    z-index: 2;
    aspect-ratio: 3 / 2;
    transform: translate(50%, 10%);
}
#content1:before,#content1:after  {
    content: "";
    background-image: url(../img/ac.png);
    background-position: 50% 0;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 106vw;
    height: 120px;
    z-index: 2;
}
#content1:after {
    background-position: 50% 100%;
    top: auto;
    bottom: -30px;
    width: 106vw;
    height: 120px;
    z-index: 2;
}
#content1 .con1_wrap {
    z-index: 2;
    position: relative;
}
#top_cms .cms_title {
    text-align: center;
}
#top_cms .title_box {
    display: inline-block;
    position: relative;
}
#top_cms .title_box:before {
    content: "";
    background-image: url(../img/hammer.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 0%;
    width: 40%;
    transform: translate(-130%, -30%);
    aspect-ratio: 3 / 5;
}

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

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#content1 .con1_img1 {
    width: calc(100% - 10vw);
}
.cms_btn_wrap .more_btn {
    width: 280px;
}
#content2 h3 {
    line-height: 1.4;
}
#content1 #con1_txt > div {
    padding-top: 10px;
}
#t_cms_banner .img_box:hover .bg_color img {
    opacity: 1;
}
#t_cms_banner .img_box:hover .bg_color {
    width: 100%;
}
#top_cms .title_box:before {
    width: 29%;
    transform: translate(-90%, -18%);
}
}



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

#cms_7-d .box_wrap .cate_box::after, .cms_7-d .box_wrap .cate_box::after {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #edeae6 100%);
}
#page_title h2 {
    font-size: 1.8em;
}
#page_title {
    position: relative;
}
#page_title:before {
    content: "";
    background-image: url(../img/ac.png);
    background-position: 50% 0%;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 106vw;
    height: 30px;
    z-index: 0;
}
.cate_list {
    z-index: 2;
    position: relative;
}
/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#page_title h2 {
    font-size: 1.6em;
}
}