@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500&display=swap');

:root{--font_ZenKaku:  'Zen Kaku Gothic New', "Yu Gothic Medium", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", sans-serif !important;}
:root{--font_Kiwi_Maru: 'Kiwi Maru', "Yu Gothic Medium", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", sans-serif !important;}

.con1_title, .intro_title, #contents .con_title, h3, h2, h4, h5, h6, .con1_title, .intro_title, #contents .con_title, h3, h2, h4, h5, h6, .top_nav ul li a span, #page_title .font_45, #top_cms .cms_title p
{font-family:var(--font_Kiwi_Maru) !important;}

body, .font_sans-serif,.font_serif,.page_title_box .font_25,.menu .nav ul li a span{
    font-family:var(--font_ZenKaku) !important;
}

/* color ---------------------------------------------------------------------------------------------*/
:root{
    --color1:#429b75;
    --color2:#53af8a;
    --color3:#ffa20d;
    --color4:#ffdc72;
    --color5:#fff2d2;  
    --white:#ffffff;
    --black:#294f3f;
    --gray:#ccc;
}

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 */
.txt_color5,.hvr_txt_color5:hover{color: var(--color5);} /* アクセントカラー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_color5,.hvr_bg_color5:hover{background-color: var(--color5);} /* アクセントカラー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);}
.border_color5,.hvr_border_color5:hover{border-color: var(--color5);}

.linkStyle{color: var(--color1);
          border-bottom:solid 1px;
}
body#body {
    background: var(--white);
}
/* color ---------------------------------------------------------------------------------------------*/
/*装飾に便利なposi_rel*/
#contents_box,#contents1,#contents2,#contents3,.con1_outer, .con2_outer, .con3_outer,.img5, .img6, .img7,div#left,div#right,div#intro_wrap,#contents2_wrap,.custom_wrap,.intro_left,.cms_title,.intro_wrap .font_bar,#contents_wrap .bg_container,#sticked,#top_cms1{position: relative;}
/*装飾に便利なposi_rel*/
/*装飾に便利な疑似クラス設定*/
#main_img::before, #main_img::after, #contents_box::before, .con1_outer::after, #attach::before, .con2_outer::before,.con2_outer::after,.con3_outer::before,.con3_outer::after,#page_title .title_img::after,article .width_1280-max::before,div#contents1::before,div#contents1::after,div#contents3::before,#contents2::before,div#contents2::after,#page_title .title_img::after,.img5::before, .img6::before, .img7::before,div#left::before,div#right::before,div#intro_wrap::before,div#intro_wrap::after,#contents2_wrap::before,.custom_wrap::before,.custom_wrap::after,.font_bar::before,.intro_left::before,.intro_left::after,.cms_title::before,#body::before,#contents_wrap .bg_container::before,#sticked::before,#top_cms1::before,.main_img::before,div#title_img::after{
    content: '';
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    z-index: 1;
}


/*top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.main_wrap {margin-top: 100vh;}
.topimg01 {
    object-fit: contain;
    padding: 50px;
    height: 97vh;
    box-sizing: border-box;
}
    
.navi{display: none;}


.main_img::before {
    background-image: url(dup/img/item01.png),url(dup/img/item02.png),url(dup/img/item03.png),url(dup/img/item04.png),url(dup/img/catch.png);
    width: 100%;
    height: 100%;
    background-size: 29%, 16%,7%,12%,35%;
    left: 0%;
    top: 0%;
    z-index: 0;
    background-position: right 2% bottom 9%,left 47% top 12%,left 40% bottom 34%,right 29% top 11%,left 4% bottom 17%;
    pointer-events: none;
}

.svg_box{display: none;}


section#contents {
    background: rgb(255 242 210 / 15%);
}


#contents .box figure:after {
    color: var(--color4);
}



section#contents .box {
    padding-left: 5%;
    padding-right: 5%;
    margin-bottom: 100px;
}
section#contents {
    padding: 150px 0 50px;
}


section#contents p.txt_color3 {
    margin-bottom: 5px;
}


.top_nav ul li {color: var(--color2);}
.top_nav ul li a {color: var(--black);}
.top_nav ul li a:hover{color: var(--color2);}
.top_nav {margin-top: -1.5%;}


.other .box:hover {
    background-color: rgb(103 150 130 / 70%);
}

.t_cms_img2 .img-container:before {
    background: var(--color2);
}

.img-container:before {
    background: var(--color1);}


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




/*sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
div#title_img span {
    background: url(dup/img/sub_img.jpg) !important;
    background-position: center center !important;
    background-size: cover !important;
}


div#title_img::after {
    width: 100%;
    height: 100%;
    background: rgb(252 250 242 / 60%);
    top: 0;
    left: 0;
    z-index: 0;
    mix-blend-mode: screen;
}

.cate_list li a {
    display: block;
    padding: 10px;
    overflow: hidden;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


main.all_page {
    background: rgb(255 250 237);
}
/*sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*all■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

footer {background-color: var(--color5);}
footer p {color: var(--color1) !important;}
#loading_line .line {background-color: var(--color5);}
.more:hover {
    background: var(--color5);
    border-color: var(--black);
}




/*タブレット*/
@media screen and (max-width: 768px){
.topimg01 {
    object-fit: contain;
    padding: 10px;
    height: 50vh;
    margin-top: 40px;
}
.main_img_wrap {
    height: 50vh;}
    
.main_wrap {
    margin-top: 50vh;
}


.main_img::before {
    background-image: url(dup/img/item01.png),url(dup/img/item02.png),url(dup/img/item03.png),url(dup/img/item04.png),url(dup/img/catch.png);
    width: 100%;
    height: 100%;
    background-size: 32%, 19%,9%,16%,35%;
    left: 0%;
    top: 38px;
    z-index: 0;
    background-position: right 2% bottom 17%,left 47% top 10%,left 40% bottom 37%,right 28% top 19%,left 3% bottom 24%;
    pointer-events: none;
}


#contents .box .txt_wrap {
    width: 100%;
    padding: 0;}        
#contents .box figure {width: 100%;} 

#contents .box h3,section#contents p.txt_color3 {
    text-align: center;
    display: block;}        
#contents .box h3:before {
    left: 50%;
    transform: translate(-50%, 0%);}    
.txt_wrap2{order:2;} 
figure.t_cms_img2 {order: 2;}


#contents figure{margin-top: 30px;}

section#contents {padding: 100px 0 50px;}

.cate_list li {width: 31%;}
}


/*スマホ*/
@media screen and (max-width: 667px){
#page_title .img-container::after {background-color: rgb(121 143 134 / 60%);}
.cate_list li {width: 100%;}
    .cms_3-b .cate_box,#cms_3-b .cate_box,.cms_2-b .cate_box,#cms_2-b .cate_box {padding: 15px;}
     .cms_3-b .cate_box .box_txt1,#cms_3-b .cate_box .box_txt1, .cms_2-b .cate_box .box_txt1,#cms_2-b .cate_box .box_txt1{margin-bottom: 0;}
     .cms_3-b figure,#cms_3-b figure,.cms_2-b figure,#cms_2-b figure{margin-top: 15px;}
    .pager li {
        margin-right: 25px !important;
        margin-left: 25px !important;}   
        
.main_img::before {
    background-image: url(dup/img/item03.png),url(dup/img/item05.png),url(dup/img/catch.png);
    width: 100%;
    height: 100%;
    background-size: 32%, 19%,9%;
    left: 0%;
    top: 38px;
    z-index: 0;
    background-position: right 2% bottom 17%,left 47% top 10%,left 40% bottom 37%;
    pointer-events: none;
} 

.topimg01 {
    object-fit: contain;
    padding: 20px;
    height: 80vh;
    margin-top: 70px;
}

.main_img_wrap {
    height: calc(80vh + 70px);
}
.main_wrap {
    margin-top: calc(80vh + 70px);
}

.main_img::before {
    background-image: url(dup/img/item03.png),url(dup/img/item05.png);
    width: 100%;
    height: 100%;
    background-size: 15%, 30%;
    left: 0%;
    top: 38px;
    z-index: 0;
    background-position: right 8% top 16%,left 1% bottom 8%;
    pointer-events: none;
}

section#contents h3 span {
    font-size: 18px !important;
    letter-spacing: 1px;
}

section#contents {
    padding: 70px 0 30px;
}

#contents .box figure {
    margin-top: 30px !important;
}

.other .box_title {
    font-size: 28px !important;
    letter-spacing: 2px;
    width: 100% !important;
}
}




/*entry*/
.fixed_img {
    /*display: block !important;*/
    position: fixed;
    bottom: 10px;
    left: 10px;
    z-index: 99;
    width: 100%;
    max-width: 300px;
    transition: 0.5s;
}
.fixed_img:hover{
    opacity: 0.7 !important;
    transition: 0.5s;
}

/*--------タブレット--------*/
@media screen and (max-width: 768px){
.fixed_img {
    max-width: 250px;}
    
}
    
/*--------スマートフォン--------*/
@media screen and (max-width: 667px){
.fixed_img {
    max-width: inherit;
    width: 60%;
    left: 50%;
    transform: translate(-60%, 0px);
}
}



/*カテゴリリストずれ修正------------------------*/
#cms_2-b .cate,#cms_3-b .cate {
    display: block;
    padding-top: 100px;
    margin-top: -100px;
}

@media screen and (max-width: 768px){
#cms_3-b .cate,#cms_2-b .cate {
    display: block;
    padding-top: 0px;
    margin-top: 0px;
}
}
/*カテゴリリストずれ修正------------------------*/
/*ヘッダー追従----------------------------------------------------------------------*/