/*--------------------------------------------
 色 ・　文字
----------------------------------------------*/
:root{
    --color1: #937218;
    --color2: #f5ecdb;
    --color3: #9d8f68;
    --color4: #ffffff;
	--text: #757575;
	--black: #111111;
	--red: #C12326;
    --base: #ffffff;
    --back: #f1f1f1;
    
    --font1: 16px;
    --font-jp: 'Noto Sans JP', "游ゴシック Medium", sans-serif;
    
    --radi1: 40px;
}
/* スマホ */
@media screen and (max-width: 667px){
    :root{
        --radi1: 20px;
    }
}
.mg_b_30px{margin-bottom: 30px;}


#contact_mail,#contact_tel{
    width: clamp(410px, 50%, 700px);
    margin: 0 auto;
}
/* スマホ */
@media screen and (max-width: 667px){
    #contact_mail,#contact_tel{width: 300px;}
}

/* --------------------------------------------
 メインイメージ 
---------------------------------------------*/
.catch {
    /*top: 49%;*/
    /*left: 53%;*/
    /*transform: translate(0%, -50%);*/
    z-index: 3;
    position: absolute;
    bottom: 3%;
    right: 5%;
    width: 37%;
    max-width: 470px;
}

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


/* --------------------------------------------
 ギャラリー
---------------------------------------------*/
#cms_4-c .cate_box,.cms_4-c .cate_box{
    padding: 10px 10px 10px;
}
/* スマホ */
@media screen and (max-width: 667px){
    #cms_4-c{
        padding: 0;
    }
    #cms_4-c .cate_box,.cms_4-c .cate_box{
        padding: 5px 5px 5px;
    }
}

/*--------------------------------------------
 葉っぱの装飾
----------------------------------------------*/
.txt2,.cms_title h2,#cms_2-f .cate_title{position: relative;}
.txt2::before,.cms_title h2::before,#cms_2-f .cate_title::before{
    content: "";
    background-image: url(./Dup/img/leaf.png);
    width: 90px;
    height: 30px;
    transform: translate(-50%, -50%);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: -25px;
    left: 50%;
}
/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){
    .txt2::before,.cms_title h2::before,#cms_2-f .cate_title::before{
        width: 70px;
        height: 24px;
    }
}

/*--------------------------------------------
 TOP初めての方へ
----------------------------------------------*/
.link_type1 .link_top .link_title {
    font-size: 20px;
    margin-bottom: 20px;
    text-align: center;
    padding-top: 50px!important;
    margin-bottom: 30px;
    color: var(--color4);
    font-weight: normal;
    background-image: url("../dup/img/link_type1_icon.png");
    background-size: 50px;
    background-position: top center;
    background-repeat: no-repeat;
}
.link_type1 .link_top .link_title{
    font-size: 20px;
    margin-bottom: 20px;
}
.link_type1 .link_top a{
	padding-top: 40px;
	padding-bottom: 40px;
	border-radius: var(--radi1);
}
.link_type1 .link_top a:hover{
    background-color: var(--color3);
}
.link_type1 .link_top a:hover .link_img1{
    transform: translate(-50%, -50%) scale(1.1,1.1);
    opacity: 0.1;
}
@media screen and (max-width: 667px){
.link_type1 .link_top .link_title{
    font-size: 15px;
}
}


/*--------------------------------------------
 お知らせ
----------------------------------------------*/
.topcms_news_type2 .cate_box {
	width: 46.33333%!important;
	margin-right: 1.5%;
	margin-left: 1.5%;
	cursor: pointer;
	border-bottom: 1px solid #ddd;
	margin-bottom: 30px;
	box-shadow: 0 6px 12px rgb(0 0 0 / 0);
	/* padding: 20px; */
	/* border-radius: 20px; */
	/* background-color: #f5f5f5; */
}
.topcms_news_type2 .cate_box:hover {
	transform: translateY(-5px);
}
.topcms_news_type2 .cate_box .box_item {
	cursor: pointer;
}
.topcms_news_type2 .txt_height {
	height: 5em
}
.topcms_news_type2 .box_img1 {
	border-radius: 10px;
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.topcms_news_type2 .cate_box {width: 100%!important;}
.topcms_news_type2 .txt_height {height: 3em}
}


/*--------------------------------------------
 カテゴリリスト
----------------------------------------------*/
.cate_list li a,#page10 a{
    background-color: var(--color3);
    color: var(--color4);
    border-radius: 5px;
}
.cate_list li a:hover,#page10 a:hover{
    background-color: var(--color2);
    color: var(--color1);
}

/*--------------------------------------------
 色 ・　文字
----------------------------------------------*/
body, .font_sans-serif,.font_en, .date, a[href^="tel:"], a[href^="mailto:"]{
    font-family: "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}
html,body,.font_10,.font_11,.font_12,.font_13,.font_14,.font_15{font-size: var(--font1);}
.font_2up{font-size: max(calc(var(--font1) + 2px), calc(1rem  + 2px));}
.font_4up{font-size: max(calc(var(--font1) + 4px), calc(1rem  + 4px));}
.font_2dw{font-size: max(calc(var(--font1) - 2px), calc(1rem  - 2px));}
.font_4dw{font-size: max(calc(var(--font1) - 4px), calc(1rem  - 4px));}
.font_6dw{font-size: max(calc(var(--font1) - 6px), calc(1rem  - 6px));}
#fakeloader.bg_color1{background-color: var(--back);}
#contents_box,.page_wrap,#page_title,.top_cms_wrap{background-color: var(--back);}


.linkStyle{
	color: var(--color1);
	text-decoration: underline;
	transition: all 0.5s;
}
.linkStyle:hover{
	opacity: 0.7;
	text-decoration: none;
}
.button:hover::after{
    box-shadow: inset 0 0 0 15em var(--color2);
}
.button:hover{
    color: var(--color1)!important;
}

#contents2{
    padding-right: 0;
}
#contents2 .img5 img{
    border-radius: var(--radi1) 0 0 var(--radi1);
}


#contents3{
    padding: 100px 7% 100px;
}
#contents3 figure{
    border-radius: var(--radi1);
}

.more a{
    border-radius: 5px;
}

.date1{color: var(--color1);}
#page_title {position: relative;}
#page_title .page_box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 0 0;
}
#page_title .page_box h2{
    color: var(--color4);
}

#cms_2-f .cate{
    border: none;
}

/* タブレット */
@media screen and (max-width: 768px){
    #contents3 h3{
        margin-top: 30px;
    }
    #contents3 .pd_l-30px{
        padding-left: 0;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    .txt2{
        letter-spacing: -0.05em;
        font-size: 18px;
    }
    #contents3 .grid_6:last-child{
        padding: 0;
    }
    #attach{
        height: 230px;
    }
    #contents2{
        padding: 80px 10% 80px;
    }
    #contents2 .img5 img{
        border-radius: var(--radi1);
    }
    #contents3{
        padding: 80px 7% 80px;
    }
    #contents3 h3{
        margin-top: 20px;
    }
    
    .cms_title h2{
        font-size: 20px;
    }
    
    .more a{
        max-width: 200px;
    }
    
    #page_title .page_box{
        width: 100%;
    }
    .cms_5-c .box_title1{
        font-size: 18px;
    }
    #cms_2-f .cate{
        padding: 0;
        border: none;
    }
    #cms_2-f .cate_title{
        padding: 0 0 20px;
    }
    #cms_2-f .box_title1{
        padding-left: 0;
        letter-spacing: 0em;
    }
    #cms_2-f .box_title1::after{
        display: none;
    }
    #cms_2-f .box_item.pd_l-r5per_sp{
            padding: 0 1%;
    }
}


/* color */
body, .txt_color_nomal, .hvr_txt_color_nomal:hover{color: var(--text);}
.linkStyle{transition: 0.5s;color: var(--text)}
.linkStyle:hover{opacity: 0.7}

.txt_white, .hvr_txt_white:hover{color: white;}
.txt_red, .hvr_txt_red:hover{color: var(--red);}
.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: 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: white}
.border_black, .hvr_border_black:hover{border-color: var(--black)}
.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)}