@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&display=swap');
/*-------------------------------------------------------------
 色 ・　文字
---------------------------------------------------------------*/
:root{
    --color1: #1e1e1e;
    --color2: #b38b42;
    --color3: #858585;
    --color4: #edeae6;
    --color5: #ccc;
    --black: #222222;
    --base: #F7F7F6;
    --font1: 16px;
    --title1: "Klee One", cursive;
    --titleSize: 1.9rem;
    --yohaku: 100px;
}

/* タブレット */
@media screen and (max-width: 768px){
    :root{
        --yohaku: 80px;
        --titleSize: 1.7rem;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    :root{
        --fontB1: 22px;
        --yohaku: 70px
    }
}
html,body,.font_10,.font_11,.font_12,.font_13,.font_14,.font_15,
.font_10_tb,.font_11_tb,.font_12_tb,.font_13_tb,.font_14_tb,.font_15_tb,
.font_10_sp,.font_11_sp,.font_12_sp,.font_13_sp,.font_14_sp,.font_15_sp{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)), calc(1rem  - 2px));}
.font_4dw{font-size: max(calc(var(--font1)), calc(1rem  - 4px));}
.font_6dw{font-size: max(calc(var(--font1)), calc(1rem  - 6px));}


.base_color{background-color: var(--base);} /* ベースカラー　全体の背景色 */

.txt_white, .hvr_txt_white:hover{color: white;}
.txt_red, .hvr_txt_red:hover{color: #C12326;}
.txt_gray, .hvr_txt_gray:hover{color: #ccc}
.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_gray, .hvr_bg_gray:hover{background-color: #ccc}
.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_gray, .hvr_border_gray:hover{border-color: #ccc}
.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)}


/*-------------------------------------------------------------
 top, all
---------------------------------------------------------------*/
#intro, #content1 .con1_img1 img, #content2 .back_color2,#t_cms_banner .img_box .bg_color img,.topcms_news_type4 .cate_box a,#page_title{
    filter: grayscale(1);
}
 #content1 .con1_img1 img,#content2 .back_color2{
    transition: filter 0.3s;
 }
 #t_cms_banner .img_box:hover .bg_color img,.topcms_news_type4 .cate_box a:hover, #content2:hover .back_color2{
     filter: grayscale(0);
}

#content2 h2,#content1 #con1_txt h2,#intro .txt_wrap .title,#top_cms .cms_title .title_box h2,#page_title h2,#t_cms_banner .box_title span{
    font-family: var(--title1);
}
#intro .txt_wrap .title,#con1_txt h2,#content2 h2,#top_cms .cms_title .title_box h2{font-size: var(--titleSize);}
#con1_txt h2 .sub_title,#content2 h2 .sub_title{
    font-size: calc(var(--titleSize) - 0.3rem);
    color: var(--color5);
}


header #header #header_menu li,
header #header #header_menu li a .jp{
    height: 10.5rem;
}
header #header #header_menu li,header #header #header_menu li:hover{
    border-color: #fff;
}

#intro .txt_wrap{padding: var(--yohaku) 0px;}
#intro .txt_wrap .title{}

#content2 .back_color2::after{background: rgba(32 ,32 ,32 ,0.6);}
#content2 .back_color2{padding: var(--yohaku) 50px;}
#content2 .con_box:nth-of-type(1).js_anim_blur.start{padding-bottom: calc(var(--yohaku) - 20px);}
#content2 .con_box:nth-of-type(2).js_anim_blur.start{padding-bottom: 0;}


#t_cms_banner .img_box .box_txt{
    opacity: 1;
    text-shadow: 0px 0px 5px rgb(0 0 0 / 0.3);
}
#t_cms_banner .img_box:hover .box_title span{
    color: var(--color1);
}
.img_box:hover .box_title span{
    background-color: var(--base)!important;
}




/* タブレット */
@media screen and (max-width: 768px){
    #intro .txt{text-align: left;}
    #t_cms_banner{
        margin-bottom: calc(var(--yohaku) * 0.5);
    }
    #page_title{height: 470px;}
    #page_title h2{
        padding: 20px 0;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    #loader img{width: 140px;}
    
    #content1{padding: var(--yohaku) 0;}
    #content1 #con1_txt{padding:0 0 var(--yohaku);}
    #content1 #con1_txt h2{margin-bottom: 0px;}
    #content1 #con1_txt p{padding: var(--yohaku) 5%;}
    #content1 .con1_img1{width: calc(100% - 20vw);}
    #content2 .back_color2{
        padding-top: var(--yohaku)!important;
        padding-bottom: var(--yohaku)!important;
        padding-right: 5%;
        padding-left: 5%;
    }
    #content2 h2{margin-bottom: var(--yohaku);}
    #content2 .con_box:nth-of-type(1).js_anim_blur.start{padding-bottom: calc(var(--yohaku) - 20px);}
    #content2 .con_box:nth-of-type(2).js_anim_blur.start{padding-bottom: 0;}
    #content2 .back_color2 .contents_box_wrap{width: 100%!important;}
    
    .modal-box .inner{padding: 55px 7%;}
    
    #page_title{height: 390px;}
    
    .cms_btn_wrap .more_btn{width: 88vw;}
        #copyright{letter-spacing: 0.02em;}

}
@media screen and (max-width: 350px){
    #content2 .con_title{letter-spacing: 0;}
    
}
/*-------------------------------------------------------------
　ヘッダー,logo
---------------------------------------------------------------*/
#logo{
    width: 120px!important;
}


/* タブレット */
@media screen and (max-width: 768px){
    header #header #logo, .clone-nav #logo{
        width: 110px!important;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    header #header #logo, .clone-nav #logo{
        width: 70px!important;
    }
}

/*-------------------------------------------------------------
 cms1
---------------------------------------------------------------*/
.topcms_news_type4 .cate_box{
	width: 30.33333%!important;
	margin-right: 1.5%;
	margin-left: 1.5%;
	transform: translateY(0px);
	    transition: all 0.3s;
}
.topcms_news_type4 .cate_box{
	background-color: #fff;
	padding: 0;
	box-shadow: 10px 25px 30px rgb(0 0 0 / 8%);
	border-top: 2px solid var(--color1);
}
.topcms_news_type4 .cate_box a:hover{
    opacity: 1;
}
.topcms_news_type4 .cate_box:hover{
    transform: translateY(-3px);
}

.topcms_news_type4 .txt_height{
	height: 3em
}
.topcms_news_type4 .box_title1:empty{
	display: block!important;
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.topcms_news_type4 .cate_box {
    width: 100%!important;
    margin-bottom: 20px;
}
}
/* タブレット */
@media screen and (max-width: 768px){
    .topcms_news_type4 .cate_box:hover{
        transform: translateY(0px);
        opacity: 0.7;
    }
}
/* スマホ */
@media screen and (max-width: 667px){

}
/*-------------------------------------------------------------
 cms2
---------------------------------------------------------------*/

/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){}
/*-------------------------------------------------------------
 cms3
---------------------------------------------------------------*/
.flow_type3 .cate {
    counter-reset: box; /* カウンターをリセット */
}
.flow_type3 .cate_box {
    counter-increment: box; /* カウンターをインクリメント */
}
.flow_type3 .box_item{padding-top: 60px;}
.flow_type3 .box_title1{z-index: 0}
.flow_type3 .box_title1::before, .flow_type3 .box_title1::after{
	position: absolute;
	content: "";
	display: block;
	pointer-events: none
}
.flow_type3 .box_title1::before {
    font-family: "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";;
	content: "step "counter(box, decimal); /* カウンターの値を表示 */
	font-size: 73px;
	color: #fff;
	opacity: 0.7;
	right: 0;
	top: -70px;
	z-index: -1;
}
.flow_type3 .box_title1::after{
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: #222
}
/*-------- スマートフォン --------*/
@media screen and (max-width: 667px){
.flow_type3 .box_title1::before{
	left: auto;
	right: 0;
	top: -50px
}
.flow_type3 .box_item {
    padding-top: 36px;
}
}

/*-------------------------------------------------------------
 cms4
---------------------------------------------------------------*/
#cms_6-b .cate_box .box_txt1{
    background-color: var(--color3);
}
#cms_6-b .cate{
    border-color: var(--color5);
}
/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){}
/*-------------------------------------------------------------
 cms5
---------------------------------------------------------------*/

/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){}
/*-------------------------------------------------------------
 プライバシーポリシー
---------------------------------------------------------------*/
#google_privacy a{
    color: var(--color1);
}


/*-------------------------------------------------------------
 お問い合わせ
---------------------------------------------------------------*/


/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){}
/*-------------------------------------------------------------
 サイトマップ
---------------------------------------------------------------*/


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

/* -------------------------------------------------------------
 リンクボタン 
--------------------------------------------------------------*/
.linkStyle,a{
	color: var(--color1);
	text-decoration: underline;
	transition: all 0.5s;
}
a{
    text-decoration: none;
}
.linkStyle:hover,a:hover{
	opacity: 0.7;
	text-decoration: none;
}
.cate_list li a{
    background-color: var(--color3);
    color: var(--base);
}
.cate_list li a:hover{
    background-color: var(--color5);
    color: var(--color1);
}

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

/* -------------------------------------------------------------
 メインイメージ 
--------------------------------------------------------------*/
.main_ani{
    filter: grayscale(1);
    transition: filter 1s;
}
.main_ani.move{filter: grayscale(0);}

#main_img:before{
    background: linear-gradient(0deg, transparent 80%, rgb(0 0 0 / 0.6) 96%);}
.catch {
    z-index: 3;
    position: absolute;
    bottom: -1px;
    left: 0%;
    width: 55%;
}
.catch_top{
    z-index: 3;
    position: absolute;
    top: 0%;
    right: 0%;
    width: 20%;
}
/* タブレット */
@media screen and (max-width: 768px){
    .catch {width: 74%;}
    .catch_top{width: 30%;}
}
/* スマホ */
@media screen and (max-width: 667px){
    .catch {
        width: 103%;
        left: -4%;
    }
    .catch_top{width: 40%;}
    #main_img{height: 70vh;}
    #main_img .main_img1{background-position: 47%;}
}

/* -------------------------------------------------------------
 問い合わせボタン
--------------------------------------------------------------*/
.con_btn {}
.con_btn a{
    padding: 30px 3%;
    min-height: 145px;
}
#contact_mail a{position: relative;letter-spacing: 0em;}
#contact_mail a p{
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 90%;
}

/* タブレット */
@media screen and (max-width: 768px){
    .con_btn > div{
        width: 48%!important;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
        .con_btn > div{
        width: 100%!important;
        margin-bottom: 20px;
    }
}