﻿/* --------------------------------------------
 メインイメージ 
---------------------------------------------*/
.main{
    filter: grayscale(1)blur(5px);
    transition: filter 1.3s;
}
.main.start{filter: grayscale(0)blur(0px);}
#main_img {
    height: 100vh;
    
}

.catch {
    z-index: 3;
    position: absolute;
    top: 50%;
    right: 13%;
    transform: translate(0%, -50%);
    width: 35%;
    max-width: 900px;
}
.catch_sub{
    z-index: 3;
    position: absolute;
    bottom: 2%;
    left: 2%;
    width: 40%;
    color: #fff;
    border-left: 2px solid;
    padding-left: 20px;
}

.menu{
    top: 0px;
    left: 0px;
    transform: translateY(0%) translateX(0%);
    -webkit- transform: translateY(0%) translateX(0%);
}
#main_img > img{
    position: absolute;
    width: auto;
	height: 100%;
	top: 50%;
	left: 50%;
    transform: translate(-50%,-50%);
    vertical-align: bottom;
}
@media screen and (min-width: 1500px){
    #main_img img{
        width: 100%;
        height: auto;
    }
}
/* タブレット */
@media screen and (max-width: 768px){
    #main_img {height: 43vh;}
    .catch {
        top: 49%;
        right: 7%;
        width: 38%;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    .catch {width: 55%;}
    .catch_sub{
        width: 90%;
        font-size: 13px;
        line-height: 1.3;
        padding-left: 10px;
    }
    #main_img > img{
        width: 100%;
        height: auto;
        top: 0%;
        left: 50%;
        transform: translate( -50%, 0%);
    }
    #main_img {
        height: 90vh;
        max-height: 360px;
    }
}


/*---------------------------------------------
 テンプレート ・CMS・下層ページ 
--------------------------------------------*/
.shop_link a p{width: 100%;}

#header.active{background: linear-gradient(0deg, transparent 0%, rgba(228,228,222,0.3) 50%, rgba(228,228,222,0.7) 80%, rgba(228,228,222,0.7) 100%);}

/*#intro .intro_img{transition: all 0.7s;}*/
/*#intro .intro_img:hover{width: 105%;}*/


.cms_1-a .date{max-width: 140px;}
.cms_2-h .cate_box{min-height: 110px; border-bottom: 1px solid #b7a885;}
/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){
    #header #logo{padding: 10px;}
    
    .cms_2-h .box_item,#cms_2-h .box_item{justify-content: flex-start!important;}
    .cms_2-h .box_item_img{padding-top: 0;}
    .cms_2-h .cate_box{margin-top: 50px;}
    #contact_tel_wrap .font_23_sp{letter-spacing: 0.03em;}
}

/* ▼ ボタン ▼ --------------------------------------------------- */
#intro .modal_bt,#contents_top .con_more_bt{
    border-radius: 0;
    border-bottom: 1px solid;
}
#intro .modal_bt i,#contents_top .con_more_bt i{opacity: 0.4;transform: translateX(5px);transition: all 0.7s;}
#intro .modal_bt:hover i,#contents_top a:hover .con_more_bt i{opacity: 1;transform: translateX(17px)rotateX(360deg);}

/* ▼ 固定箇所 ▼ --------------------------------------------------- */
#contents_top a{display: block;}
#contents_top .con_top_img_box{
    z-index: 0;
    height: 100%;
}
#contents_top .con_top_img_box img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 1.4s;
}
#contents_top:hover .con_top_img_box img{width: 105%;}

#contents_top .con_top_box{
    z-index: 2;
    margin-left: 58.33333%;
    padding: 17vh 5% 43vh 0px;
    
    text-shadow: 0px 0px 5px #000 ,0px 0px 15px rgba(0,0,0,0.5);
}
#contents_top .con_more_bt{
    width: 230px;
}
#contents_top .con_top_box,#contents_top .con_more_bt{
    color: #fff;
}
@media screen and (max-width: 1420px){
    #contents_top .con_top_img_box img{height: 100%;width: auto;}
    #contents_top:hover .con_top_img_box img{height: 105%; width: auto;}
}
/* タブレット */
@media screen and (max-width: 768px){
    #contents_top .con_top_box{
        width: 80%;
        margin: 0 20% 0 0;
        padding: 20vh 5% 30vh;
    }
    #contents_top .con_top_img_box img{height: 100%;width: auto;}
    #contents_top:hover .con_top_img_box img{height: 105%; width: auto;}
}
/* スマホ */
@media screen and (max-width: 667px){}
/* ▲ 固定箇所 ▲ --------------------------------------------------- */

/*--------------------------------------------
 全体 
----------------------------------------------*/
body{font-family:'Shippori Mincho', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif"!important;}

.linkStyle{
	color: #190c2d;
	text-decoration: underline;
	transition: all 0.5s;
}
.linkStyle:hover{
	color: #190c2d;
	opacity: 0.7;
	text-decoration: none;
}


.txt_color1{color: #6d4d0d;} 
.hvr_txt_color1:hover{color: #b18a3b;} 
.txt_color2,.hvr_txt_color2:hover{color: #a8b4c1;} 
.txt_color3,.hvr_txt_color3:hover{color: #190c2d;} 
/*.txt_color4,.hvr_txt_color4:hover{color: #eae4df;} */
/*.txt_color5,.hvr_txt_color5:hover{color: #f2ede7;}*/ 

.bg_color1,.hvr_bg_color1:hover{background-color: #8c6203;}
.bg_color2,.hvr_bg_color2:hover{background-color: #dae1e5;}
.bg_color3,.hvr_bg_color3:hover{background-color: #190c2d;} 
/*.bg_color4,.hvr_bg_color4:hover{background-color: #eae4df;} */
/*.bg_color5,.hvr_bg_color5:hover{background-color: #f2ede7;}*/ 

.border_color1,.hvr_border_color1:hover{border-color: #6d4d0d;}
.border_color2,.hvr_border_color2:hover{border-color: #a8b4c1;}
.border_color3,.hvr_border_color3:hover{border-color: #190c2d;}
/*.border_color4,.hvr_border_color4:hover{border-color: #eae4df;}*/
/*.border_color5,.hvr_border_color5:hover{border-color: #f2ede7;}*/
