@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');
@font-face {
font-family: "hono";
  src: url("./Dup/img/honokamarugo.ttf") format("ttf"),url("./Dup/img/honokamarugo.eot") format("eot"),url("./Dup/img/honokamarugo.woff") format("woff"),url("./Dup/img/honokamarugo.woff2") format("woff2");}
  
  
:root{
    --font-en: 'Sacramento', cursive;
    --font-hono: 'hono','Kiwi Maru','Zen Maru Gothic','Zen Kaku Gothic Antique', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif !important;
    --font-jp:'Kiwi Maru','Zen Maru Gothic','Zen Kaku Gothic Antique', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif !important;    
}


body,.intro_box .font_un,.font_un,.font_san,h4,h5,h6.intro_box .font_un,.font_un,.intro_box .font_un,#cms_5-c .box_title1 {font-family:  var(--font-jp);}
h2,h3 {font-family:  var(--font-hono)
      transform: rotate(0.05deg);
}
.font_bold {font-weight: 500;}
.font-en{font-family: var(--font-en);
        color: var(--color4);
        line-height: 1.4;
}
/* color ---------------------------------------------------------------------------------------------*/
:root{
    --color1:#F7CA79;
    --color2:#FFFAF3;
    --color3:#D1943B;
    --color4:#F2B149;
    --color5:#fcefd9;    
    --white:#FFFFFF;
    --black:#595041;
    --gray:#E2D6C7;
}

body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: var(--black);}
.txt_white,.hvr_txt_white:hover{color: var(--white);}
.txt_color1,.hvr_txt_color1:hover{color: var(--color1);} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: var(--color2);} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: var(--color3);} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: var(--color4);} /* アクセントカラー2 */
/* background-color */
.bg_white,.hvr_bg_white:hover{background-color: var(--white)} /* 白背景 */
.bg_black,.hvr_bg_black:hover{background-color: var(--black);} /* 黒背景 */
.bg_color1,.hvr_bg_color1:hover{background-color: var(--color1);} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: var(--color2);} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: var(--color3);} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: var(--color4);} /* アクセントカラー2 */
.bg_color_clear,.hvr_bg_color_clear:hover{background-color: transparent!important;}
/* border-color ※!important */
.border_white,.hvr_border_white:hover{border-color: var(--white);}
.hvr_border_black:hover{border-color: var(--black);}
.border_black{border-color: var(--gray);}
.border_color1,.hvr_border_color1:hover{border-color: var(--color1);}
.border_color2,.hvr_border_color2:hover{border-color: var(--color2);}
.border_color3,.hvr_border_color3:hover{border-color: var(--color3);}
.border_color4,.hvr_border_color4:hover{border-color: var(--color4);}

.intro_item h2{color: var(--color3);}
.linkStyle{color: var(--color3);
          border-bottom:solid 1px;
}
/* color ---------------------------------------------------------------------------------------------*/

/*【控え目】5～10px*/
/*border-radius-------------------------------------------------------------------------*/
.con_img, .cate_img1, .box_img1, .box_img2, .box_img3, .box_img4, #cms_3-c .cate_box .box_title3 span,#contents3 .con_box,#intro_wrap,#page_title .page_title_box,.pd_l-r10per.pd_t-5per.pd_b-5per.pd_5per_tb.pd_t-50px_sp .con_box,.box_img1 img{border-radius: 5px;}
.nav_menu_more a,.cate_list li a,.pager li a,.intro_img a::before,.intro_img a img,#page_title .title_box{border-radius: 5px;}
#cms_2-b h3.cate_title,.sf_contact_box,.shop_bnr a img,#s_content2 .c2_box .c2_box_txt > div,.phone_wrap,.phone_txt  {border-radius: 5px;}

.sf_contact_mail a,.more_box,.more_btn a,.pager li a,.cate_list li a,.c2_box_bg::before,#header li a,.overlay_l::before,.s_footer_info_l::before{border-radius: 3px;}
/*border-radius-------------------------------------------------------------------------*/


.link_type2 .cate_box a {
    color: #fff;
    padding:80px 50px;
}
.link_type2 .cate_box a:before, .link_type2 .cate_box a:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(209,148,59,0.5);
    z-index: 1;
}
.link_type2 .cate_box a:after {
    top: 100%;
    background-color: #f7ca79;
    transition: 0.5s;
	z-index: 3;
}
.link_type2 .cate_box a:hover:after {
    top: 0;
}
.link_type2 .cate_box .txt_wrap {
    z-index: 2;
}
.link_type2 .more {
	letter-spacing: 3px;
    box-sizing: border-box;
	opacity: 0;
	transition: opacity .8s;
	z-index: 4;
}
.link_type2 .cate_box a:hover .more {
    opacity: 1;
}


/* top ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.introimg01 img {
    width: 100% !important;
    height: 17vw !important;
    object-fit: cover;}
    
.introimg02 img {
    width: 100% !important;
    height: 12vw !important;
    object-fit: cover;}
    
.introimg03 img {
    width: 77% !important;
    height: 10vw !important;
    object-fit: cover;}
    
.introimg {position: relative;}
.introimg::before {
    content: '';
    background: url(dup/img/item01.png);
    width: 100%;
    height: 77vh;
    z-index: 0;
    position: absolute;
    left: 0%;
    top: 0%;
    background-repeat: no-repeat;
    background-size: 100%;
    transform: translate(-13%, -16%);}
    
.intro_item {position: relative;}
.intro_item::before {
    content: '';
    background: url(dup/img/item02.png);
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: contain;
    width: 50%;
    height: 58%;
    position: absolute;
    z-index: -1;
    right: -11%;
    bottom: -12%;}
    
.c2_box_txt {
    background: url(dup/img/bg_img.jpg);
    padding: 30px 0;
    background-size: 100%;}    
    
#s_content2 .c2_box:first-of-type .c2_box_txt > div {left: -30px;}
#s_content2 .c2_box:last-of-type .c2_box_txt > div {right: -30px;}

#s_content2 .c2_box .c2_box_txt > div {
    position: relative;}

.contents_no{display:none;}

section#s_content2 h2 {
    color: var(--color3);
    font-size: -webkit-calc(1rem + 20px);
    font-size: calc(1rem + 20px);}
    
.c2_box_txt span {
    width: 40px;
    margin: 0 auto;}
    
span.more_box,.more_btn a {
    border: solid 0px;
    background: var(--color5);
    border-radius: 50px;}

.more_btn .more_line {
    transition: all .8s ease-in-out;
    transform: translateX(-100%);}

.top_cms_title h2 {
    font-size: -webkit-calc(1rem + 19px);
    font-size: calc(1rem + 19px);}
    
.top_cms_title p {
    font-family: var(--font-en);
    font-size: 23px;
    color: var(--color4);}

.top_cms_title h2{position:relative;
              display: inline;
}
    
.top_cms_title h2:before {
    content: '';
    position: absolute;
    background: url(dup/img/item05.png);
    width: 8vw;
    height: 11vh;
    z-index: -1;
    top: 0;
    right: 0;
    background-size: contain;
    background-repeat: no-repeat;
    transform: translate(17%, -33%);
}


.sub_cate {
    background: var(--color2);
    margin-bottom: 20px;
    padding: 20px;}

p.sub_cate_title {
    border: solid 0;
    padding: 0 0 5px;
    border-bottom: dotted 2px;
    border-color: var(--color3);}

#cms_3-f h3.cate_title {margin-bottom: 20px;}

.sub_cate .box_wrap {margin-top: 5px;}    
#main_img .swiper-wrapper::before {background-image: radial-gradient(rgb(89 80 65 / 70%) 40%, transparent 40%);}
.catch {
    z-index: 2;
    width: 45vw;}
#cms_2-c .cate .cate_box {
    background: var(--color2);
    padding: 20px;
    border-radius: 5px;}

/* top ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/



/* all ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.width_1280-max {
    width: 100%;
    max-width: 1400px;}
    
.overlay .tb_hide {position: relative;}
.overlay .tb_hide::before {
    content: "";
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    border: solid 1px rgba(255,255,255,0.7);
    z-index: 2;
}


.res_m {
    transform: translate(0px, 3px);
}


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

    h1#logo {max-width: 135px;}

    #cms_2-c .box_item {
        padding: 5px 5px 10px;
        word-break: break-all;}
        
    .catch {
        z-index: 2;
        width: 60vw;}
        
    .introimg01 img {
    width: 100% !important;
    height: 35vw !important;
    object-fit: cover;}
    .introimg02 img {
    width: 100% !important;
    height: 24vw !important;
    object-fit: cover;}
    
    .introimg03 img {
    width: 77% !important;
    height: 17vw !important;
    object-fit: cover;}

.introimg::before {
    content: '';
    background: url(dup/img/item01.png);
    width: 100%;
    height: 46vh;
    z-index: 0;
    position: absolute;
    left: 0%;
    top: 0%;
    background-repeat: no-repeat;
    background-size: 100%;
    transform: translate(-10%, -5%);}
.introimg {padding: 80px 0 60px;}
.intro_item {width: 90% !important;}
.c2_box_txt {padding: 20px 0;}
#s_content2 .c2_box:first-of-type .c2_box_txt > div {left: -20px;}
#s_content2 .c2_box:first-of-type .c2_box_txt > div {left: -20px;}

section#s_content2 h2 {
    color: var(--color3);
    font-size: -webkit-calc(1rem + 17px);
    font-size: calc(1rem + 17px);}
.top_cms_title h2 {
    font-size: -webkit-calc(1rem + 17px);
    font-size: calc(1rem + 17px);}
.cms_box .cms_box_bg {top: 37px;}
.top_cms_title h2:before {
    content: '';
    position: absolute;
    background: url(dup/img/item05.png);
    width: 15vw;
    height: 10vh;
    z-index: -1;
    top: 0;
    right: 0;
    background-size: contain;
    background-repeat: no-repeat;
    transform: translate(25%, -15%);
    opacity: 0.9;
}
.link_type2 .cate_box a {
    color: #fff;
    padding: 50px;}
    
section#main_img {padding-top: 75px !important;}

main {padding-top: 75px !important;}
.res_m {transform: translate(0px, 4px);}
#main_img .swiper-wrapper::before {
    background-image: radial-gradient(rgb(89 80 65 / 50%) 40%, transparent 40%);
    background-size: 2px 2px;}
.c2_box_txt {background-size: cover;}
}
    
/*スマホ*/
@media screen and (max-width: 667px){
    h1#logo {max-width: 100px;}
    section#main_img {padding-top: 60px !important;}
    .catch {
        z-index: 2;
        width: 64vw;}
    .introimg { padding: 50px 0 60px;}
    .intro_item {width: 100% !important;}
    .intro_item::before {
        right: -4%;
        bottom: -5%;}
        
    .introimg::before { transform: translate(0%, -11%);}
    #s_content2 .c2_box:first-of-type .c2_box_txt > div,#s_content2 .c2_box:last-of-type .c2_box_txt > div{
        left: 0;
        right:0;
        top: -20px;}
    .c2_box_txt {padding: 0 20px;}
    section#s_content2 h2 {
        color: var(--color3);
        font-size: -webkit-calc(1rem + 13px);
        font-size: calc(1rem + 13px);}
    .top_cms_title h2 {
        font-size: -webkit-calc(1rem + 8px);
        font-size: calc(1rem + 8px);}
    .cms_box .cms_box_bg {top: 27px;}
    .top_cms_title h2:before {
        width: 21vw;
        height: 11vh;
        transform: translate(25%, -15%);}
    .link_type2 .cate_box a {
        color: #fff;
        padding: 30px;}
    div#logo2, .footer_txt {
        text-align: center;
        display: block;}
    .overlay {top: 62px;}
    main {padding-top: 62px !important;}
    div#phone a {font-size: 14px !important;}
#main_img .swiper-wrapper::before {
    background-image: radial-gradient(rgb(89 80 65 / 30%) 40%, transparent 40%);
    background-size: 1px 1px;}    
    .res span {line-height: 2;}
}


/*2024/12/19---------------------------*/
footer .sns_link a {
    width: 40px;
    padding: 0;
    padding-right: 20px;
}

.overlay .menu-box ul.sns_link a {
    width: 35px;
}


/*タブレット*/
@media screen and (max-width: 768px){
    footer .sns_link a {
        width: 30px;
        padding: 0;
        padding-right: 17px;
    }
}


/*スマホ*/
@media screen and (max-width: 667px){
footer .sns_link a {
    width: 37px;
    padding: 0;
    padding-right: 17px;
}
}


/*スマホ*/
@media screen and (max-width: 340px){
    footer .sns_link a {
        width: 30px;
        padding: 0;
        padding-right: 15px;
    }
    .overlay .menu-box ul.sns_link a {
        width: 28px;
    }
}