@charset "utf-8";
/* CSS Document */
body,.txt_color_nomal{color: #000;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #000;} /* メインカラー */
.txt_color2{color: #fff;} /* サブカラー */
.txt_color3{color: #5b5b5b;} /* アクセントカラー1 */
.txt_color4{color: #f6f5ee;} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white;} /* 白背景 */
.bg_black{background-color: black;} /* 黒背景 */
.bg_color1{background-color: #000;} /* メインカラー */
.bg_color2{background-color: #fff;} /* サブカラー */
.bg_color3{background-color: #787878;} /* アクセントカラー1 */
.bg_color4{background-color: #f6f5ee;} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important;}


/* border-color ※!important */
.border_color1{border-color: #000;}
.border_color2{border-color: #fff;}
.border_color3{border-color: #787878;}
.border_color4{border-color: #f6f5ee;}


/* hover ---------------------------------------------------------------------------------------------*/
/* color */
.hvr_txt_color_nomal:hover{color: #000;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #000;} /* メインカラー */
.hvr_txt_color2:hover{color: #fff;} /* サブカラー */
.hvr_txt_color3:hover{color: #787878;} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #f6f5ee;} /* アクセントカラー2 */

/* background-color */
.hvr_bg_white:hover{background-color: white;} /* 白背景 */
.hvr_bg_black:hover{background-color: black;} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #000;} /* メインカラー */
.hvr_bg_color2:hover{background-color: #fff;} /* サブカラー */
.hvr_bg_color3:hover{background-color: #787878;} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #f6f5ee;} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important;}

/* border-color ※!important */
.hvr_border_color1:hover{border-color: #000;}
.hvr_border_color2:hover{border-color: #fff;}
.hvr_border_color3:hover{border-color: #787878;}
.hvr_border_color4:hover{border-color: #f6f5ee;}
/* ----------　linkStyle　---------- */
.linkStyle{
    color: var(--color1);
    border-bottom:solid 1px;
}
.linkStyle:hover{
	color: var(--color3);
	opacity: 0.7;
	transition: all 0.5s;
}

#loading_bg{
    background-color: #000;
}

#header .logo{
    width: 8%!important;
}

.cms_img1::after {
	content: "";
	display: block;
	position: absolute;
	background-image: url(./Dup/img/fv01.png);
	bottom: 0%;
	right: 8%;
	width: 34vw;
	height: 40vw;
	background-size: contain; 
	background-position: 50% 50%;
	background-size: 100%;
	background-repeat: no-repeat;
	z-index:2 ;
}

#main .main_box{
    left: 10%;
    max-width: 1000px;
}

#main .main_txt{
    position: relative;
    height: 100px;
    background-color: #000;
}

#main .main_txt::after {
	content: "";
	display: block;
	position: absolute;
	background-image: url(./Dup/img/kc.png);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50vw;
	height: 100vw;
	background-size: contain; 
	background-position: 50% 50%;
	background-size: 100%;
	background-repeat: no-repeat;
	z-index:4 ;
}

.cate_list p {
    left: -34px;
}

#cms_2-c .box_description1 {
    width: 90%!important;
    order: 1;
}

#cms_2-c .box_description2 {
    width: 90%!important;
}

#page7 .box_item .letter_3 {
    letter-spacing: 2px;
}

/*PC小用（1200px以下）
--------------------------------------------------------------------------*/
@media  screen and (max-width: 1200px){

/*#main,#main .cms_img1 img{
    max-height: 60vw;
}*/
}

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

#header .logo {
    width: 20%!important;
}

#main .main_box {
    top: 24%;
    left: 33%;
}

#main h1 img{
    width: 70%!important;
}

.cms_img1::after {
    width: 56vw;
    height: 67vw;
    right: 18%;
}

#main .more a{
    width: 70%;
}

.cms_2-c .box_item {
    width: 100%!important;
}

.cate_title{
    font-size: 31px!important;
    letter-spacing: 0px;
}
}

/*スマホ用（667px以下）
--------------------------------------------------------------------------*/
@media  screen and (max-width: 667px){

.sp_back {
    opacity:1 !important;
}

.cms_img1::after {
    width: 70vw;
    height: 83vw;
    right: 5%;
}

#main .main_box {
    width: 60%;
    left: 30%;
}

#main .more a {
    width: 65%;

}

#main .more a:after{
    display: none;
}

.shop_info .font_18up_sp{
    font-size: calc(1rem + 9px);
}

.cate_title{
    font-size: 20px!important;
}

#page_title span{
    font-size: calc(1rem + 11px);
    letter-spacing: 0px;
}

#cms_2-c .box_item{
    margin:auto;
}

#tel_contact{
    padding: 20px;
}

#footer .logo{
    text-align: center;
}
}