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


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ コード集サイト ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.topcms_about_type1 {counter-reset: box 0;padding-top: 35px;}
.topcms_about_type1 .cate_box {
	width: 31%!important;
	padding: 55px 25px 25px;
	background-color:  #fffdf9;
	border-radius: 5px;
	box-sizing: border-box;
    /*box-shadow: 5px 5px 15px rgba(176,157,157,0.3);*/
}
.topcms_about_type1 .number {
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 90px;
}
.topcms_about_type1 .number::before {
	counter-increment: box 1;
	content: "0"counter(box);
	font-size: 55px;
	line-height: 1;
	text-align: center;
	color: #006f01;
	display: inline-block;
	position: absolute;
	right: 0;
	left: 0;
	top: -42px;
	margin: auto;
	z-index: 0;
}
.topcms_about_type1 .number::after {
	content: "";
	position: absolute;
	display: block;
	width: 73%;
	height: 2px;
	background: #006f01;
	left: 0;
	right: 0;
	margin: auto;
	top: 22px;
}
.topcms_about_type1 .cate_box .box_title1{font-size: 18px;line-height: 1.6;z-index: 1}


.topcms_about_type1 p.box_title1 {color: #814811;}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.topcms_about_type1 .cate_box {
	margin: 0 auto 80px;
	width: 30.333333%!important;

}
.topcms_about_type1 .cate_box:last-of-type {
	margin-bottom: 0;
}

.topcms_about_type1 .number::before {
    font-size: 48px;
    top: -31px;}

}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.topcms_about_type1 .cate_box {
        	width: 90%!important;
        	padding: 50px 25px 25px;}
.topcms_about_type1 .number::before{
        	font-size: 59px;
        	top: -34px;}
.topcms_about_type1 .number::after{width: 72%;}
.topcms_about_type1 .cate_box {
            width: 100%!important;
            padding: 50px 25px 25px}
.topcms_about_type1 .number::before {
            font-size: 56px;
            top: -38px;}
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ コード集サイト ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*毎回いる*/

.swiper-button-next, .swiper-button-prev { z-index: 2 !important;}
#top_cms.back1:before {z-index: -1;}
.nav_menu_more a span::before {
    display: none !important;}
.nav_menu_more.mg_t-10px a span::before {
    display: block !important;}
div#contents2_wrap {margin-top: 50px;}


@media screen and (max-width: 768px){
#contents1 .line:before, #contents2 .line:before {
    left: 50%;
    -ms-transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);}
}

/*【全フォントKiwi Maruにするとき】-------------------------------------------------------------------------*/
/*font-------------------------------------------------------------------------*/
body {font-family:  'Kiwi Maru',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif !important;}
.cms_title p,.page_title_box p,.con_title .pop400,.con_box h2,a.more_btn,.pop400{
    font-family:  'Kiwi Maru',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif !important;
    font-weight: 500;}
a,.box_title1,.cate_title,.box_title2,.hannari,.num{
    font-family:  'Kiwi Maru',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif !important;
    font-weight: 500;}
.font_14 {font-size: 15px;}
/*font-------------------------------------------------------------------------*/

/*Kiwi Maru-------------------------------------------------------------------------*/
/*IE*/
@media all and (-ms-high-contrast: none){
    .pager li a { padding-bottom: 12px !important;}
    .cate_list li a {
        padding-bottom: 12px !important;
        padding-top: 8px !important;}
    #page9 .more {
        padding-bottom: 6px !important;
        padding-top: 3px!important;}
    #page10 .more_btn {padding-top: 11px !important;}
    p#contact_tel a { padding: 18px 0 23px !important;}
    .more_btn {padding-bottom: 9px !important;}
    .line-l::before {
            top: 15px;
            left: -25px;}
    #page_title .page_title_box {padding-bottom: 27px !important;}

}
/*Kiwi Maru-------------------------------------------------------------------------*/

/*【控え目】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{border-radius: 5px;}
#cms_2-b h3.cate_title {border-radius: 5px;}
/*border-radius-------------------------------------------------------------------------*/

/* color ---------------------------------------------------------------------------------------------*/
body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: #341b03;}
.txt_white,.hvr_txt_white:hover{color: #fffdf9;}
.txt_color1,.hvr_txt_color1:hover{color: #814811} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #f6e5cc} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #006f01} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #d4e4bc} /* アクセントカラー2 */
/* background-color */
.bg_white,.hvr_bg_white:hover{background-color: #fffdf9} /* 白背景 */
.bg_black,.hvr_bg_black:hover{background-color: #341b03} /* 黒背景 */
.bg_color1,.hvr_bg_color1:hover{background-color: #814811} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #f6e5cc} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #006f01} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #d4e4bc} /* アクセントカラー2 */
/* border-color ※!important */
.border_color1,.hvr_border_color1:hover{border-color: #814811 !important}
.border_color2,.hvr_border_color2:hover{border-color: #f6e5cc !important}
.border_color3,.hvr_border_color3:hover{border-color: #006f01  !important}
.border_color4,.hvr_border_color4:hover{border-color: #d4e4bc  !important}

header.scr_header { background-color: rgba(246,229,204,0.9) !important;}
.back2:before,.back1:before { background-color: rgba(246,229,204,0.0) !important;}

#main_img:before,#page_title:before{background-color: rgba(129,72,17,0.6) !important;}

#info_contact .con_img:before,.title_img:before{background-color: rgba(129,72,17,0.6);}
.overlay {background: linear-gradient(135deg, rgba(129,72,17,0.9) , rgba(246,229,204,0.9) ) !important;}
.scr_header div#pc_nav ul li a {color: #341b03;}
.scr_header #pc_nav li a::after, #top_pc_nav li a::after, #footer_nav li a::after{background: rgba(52,27,3,0.5);}
.button_container span {background: #341b03;
                        color:#341b03;}
span.num {color: #006f01;}
.line:before {background-color: rgba(0,110,11,0.3) !important;}
#contents3_wrap:after {background-color: rgba(212,228,188,0.1) !important;}
.pager li a {background-color: rgba(0,110,11,0.5) !important;}
.pager li a:hover {background-color: rgba(129,72,17,0.5) !important;}
#fakeloader:before{background:rgba(246,229,204,0.9) }
#footer {background-color: rgba(246,229,204,0.5);}
.cate_list li a:hover {background-color: rgba(212,228,188,0.3) !important;}

.more_btn span {text-transform: none !important;
               -ms-user-select: none;}
.more_btn {text-transform: none !important;
           -ms-user-select: none;}
#intro h3, #contents1 h3, #contents2 h3, #contents3 h3 {color: #814811;}
/*linkStyle*/
a.linkStyle {
    color: #006f01 !important;
    border-bottom:solid 1px;
    opacity: 0.9 !important;}
a.linkStyle:hover {color: #006f01 !important;
                   opacity: 0.9 !important;}
                   
.opacity07,.opacity08{opacity:0.9;}
/* color ---------------------------------------------------------------------------------------------*/

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ top ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.menu {top: 41% !important;}
img.catch {
    width: 40%;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);}


.num{display:none;}

#contents1 .con_img, #contents2 .con_img {
    z-index: 1;
    border-radius: 5px;}

#contents1 .con_box, #contents2 .con_box {position: relative;}

#contents1 .con_box::before {
    width: 115%;
    height: 135%;
    left: -5%;
    top: -15%;}
    
#contents2 .con_box::before {
    width: 115%;
    height: 130%;
    right: -5%;
    top: -15%;}

#contents1 .con_box::before, #contents2 .con_box::before {
    content: '';
    position: absolute;
    display: block;
    background-color: #fffdf9;
    border-radius: 5px;
    z-index: 0;}


#contents1 {
    margin-bottom: 200px;
    margin-top: 150px;}
#contents2 {margin-bottom: 100px;}

#contents3 .con_box{
    border-radius:5px 0 0 5px;
    margin: 0 0 0 50%;
    background:#fffdf9;
}


#contents1 .con_box {margin-top: 10%;}
#contents2 .con_box {margin-top: 10%;}

.item {z-index: 1;
      opacity: 0.6 !important;}


.item01{
    width: 20vw;
    bottom: 0px;
    left: -50px;}
.item02 {
    top: -15px;
    right: -40px;
    width: 7vw;}
.item03 {
    width: 18vw;
    top: -80px;
    right: -50px;}
.item04{
    width: 20vw;
    top: -100px;
    left: -21px;}
.item05 {
    width: 16vw;
    top: -113px;
    right: -6%;}
    
#contents3_wrap:before, #contents3_wrap:after {width: 66%;
                                           border-radius: 0 0 5px 0;}
                                           
                                        
.top_cms_box:first-of-type {padding-top: 150px;}

.cms_wrap {
    background: #fffdf9;
    border-radius: 5px;
    padding: 30px 30px;}


#intro p, #contents1 p, #contents2 p, #contents3 p {
    font-size: 16px;
    z-index: 3;
    position: relative;}
    
    
#cms_2-b .cate_box {
    border: solid 0px !important;
    border-radius: 5px;
    background: rgba(255,247,234,0.9) !important;
    margin-bottom: 15px;

}    
#cms_2-b img{box-shadow: 0 2px 4px rgba(0,0,0,0);}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ top ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

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

#wrap {
    position: relative;
    background-color: rgba(246,229,204,0.2) !important;
    background-image: url(dup/img/bg_img.jpg);
    background-size: 70%;
}

#pc_nav li, #top_pc_nav li, #footer_nav li {
    max-width: 150px;
    margin-right: 20px;
    word-break: break-all;}
a.res,a.res_sp,a.res02,a.res_sp02{
    border-radius: 5px;
    transition: 0.7s;
    padding: 0;}
a.res:hover,a.res_sp:hover,a.res02:hover,a.res_sp02:hover{
  transition:0.7s;
    opacity: 0.8;}
a.res::after,a.res_sp::after,a.res02::after,a.res_sp02::after{display:none;}
li.res_li {max-width: 215px !important;}
header.scr_header #logo {max-width: 90px;}
.square_box {background: transparent;}
div#top_pc_nav li {display: none;}
#logo {max-width: 120px;}
#footer_nav li{max-width: 185px !important;}

.button_container {background: rgba(246,229,204,0.9);
                   border-radius:5px;}
.scr_header .button_container {background: transparent !important;}
.button_container span:nth-of-type(1) {
        width: 51px;
        top: 40px !important;
        left: 34px;}
.button_container.active{background: transparent !important;}

#logo {
    opacity: 0;
    background: transparent;}
.scr_header #logo {
    background: transparent;
    opacity: 1 !important;}
p#logo2 a {max-width: 200px;}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ all ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*IE*/
@media all and (-ms-high-contrast: none){
   #cms_2-a .cate .cate_title {padding-top: 8px !important;}
    #cms_2-b .cate .cate_title {padding-top: 7px !important;}
}




/*タブレット*/
@media screen and (max-width: 768px){
.head_banner {
    top: 33px;
    right: 118px;
}
a.res,a.res_sp{
    border-radius: 5px;
    background: #d4e4bc;
  transition:0.7s;
}
a.res:hover,a.res_sp:hover{
  background: rgba(212,228,188,0.7);
  transition:0.7s;
}
a.res::after,a.res_sp::after{
display:none;}

a.res_sp {padding: 10px;}
a.res_sp{opacity:0;}
.scr_header a.res_sp{opacity:1;}


.flex_order1_tb {
    order: initial;
}
.page_title_box {letter-spacing: 2px;}
#cms_1-a .pager li {margin-right: 0px;}
#fakeloader .fl { max-width: 200px;}
img.catch {
    width: 60%;
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translate(-50%, -50%);}
#intro p, #contents1 p, #contents2 p, #contents3 p {font-size: 15px;}
#contents1 .con_box::before, #contents2 .con_box::before {
    content: '';
    position: absolute;
    display: block;
    background-color: #fffdf9;
    border-radius: 10px;
    z-index: 0;
}
#contents1 .con_img, #contents2 .con_img {
    width: 70%!important;
    margin: 0px auto -50px;}
#contents1 .con_box, #contents2 .con_box {
    width: 100%!important;
    padding: 0 50px;
    margin-top: 12%;}
#contents1 .con_box::before, #contents2 .con_box::before {
    width: 100%;
    left: 0;
    top: -22%;
    right: 0;
    margin: auto;}
#contents1 .con_box::before {height: 130%;}

#intro h3, #contents1 h3, #contents2 h3, #contents3 h3 {
    color: #814811;
    text-align: center !important;
    display: block;}

#contents1 {
    margin-bottom: 20px;
    margin-top: 90px;}
    
#contents3 .con_box {
    border-radius: 5px 0 0 5px;
    margin: 0 0 0 43%;}
    
#contents3_wrap:before, #contents3_wrap:after {
    width: 50%;
    border-radius: 0 0 5px 0;}

.item01 {
    width: 20vw;
    bottom: -25px;
    left: -50px;}
.item02 {
    top: -15px;
    right: -31px;
    width: 9vw;}
.item03 {
    width: 20vw;
    top: 150px;
    right: -30px;}
.item04 {
    width: 20vw;
    top: 300px;
    left: -15px;}
.item05 {
    width: 19vw;
    top: -65px;
    right: -9%;}
.topcms_about_type1 .cate_box .box_title1 {
    font-size: 16px;
    line-height: 1.5;
    z-index: 1;
    letter-spacing: 0;}
.topcms_about_type1 .cate_box {
    margin: 0 auto 80px;
    width: 31.333333%!important;}
.topcms_about_type1 .cate_box {
    width: 31%!important;
    padding: 50px 15px 20px;}
.topcms_about_type1 .box_txt1{padding-top: 15px;}
#wrap {background-size: 120%;}
p#logo2 a {max-width: 180px;}
}



/*スマホ*/
@media screen and (max-width: 667px){
#cms_2-b .cate_box { padding: 10px;}    
#cms_2-b {padding: 0px 0px !important;}
.cms_wrap {padding: 0px 0px !important;}
img.catch {width: 90%;} 
#logo {max-width: 70px;}
header.scr_header #logo {max-width: 60px;}
#intro h3, #contents1 h3, #contents2 h3, #contents3 h3 {font-size: 17px;
        letter-spacing: 0.5px;}
#intro_wrap {padding: 6% 3%;}
#intro p, #contents1 p, #contents2 p, #contents3 p {
    font-size: 14px;
    letter-spacing: 1px;}
.item01 {
    width: 20vw;
    bottom: -26px;
    left: -15px;}
.item02 {
    top: -15px;
    right: -16px;
    width: 9vw;}
#contents1 .con_img, #contents2 .con_img {
    width: 70%!important;
    margin: 0px auto -25px;}
#contents1 .con_box, #contents2 .con_box {
    width: 100%!important;
    padding: 0 10px;
    margin-top: 14%;}
.item03 {
    width: 20vw;
    top: 88px;
    right: -15px;}
div#contents2_wrap {margin-top: 0px;}
.item04 {
    width: 20vw;
    top: 100px;
    left: -2px;}
#contents1 .con_box::before, #contents2 .con_box::before {
    width: 104%;
    left: -2%;
    top: -26%;}
#contents3 .con_box {
    border-radius: 5px 0 0 5px;
    margin: 0 3%;}
#contents3_wrap:before, #contents3_wrap:after {
    width: 100%;
    border-radius: 0 0 0px 0;}
#contents2 {margin-bottom: 50px;}
.item05 {
    width: 21vw;
    top: -31px;
    right: -9%;}
.topcms_about_type1 .cate_box {
    width: 100%!important;
    padding: 50px 15px 20px;}
p#logo2 a {max-width: 150px;}
#fakeloader .fl {max-width: 140px;}
#wrap {background-size: 160%;}
.page_title_box {width: 59%;}
#page6 .cate_box {padding: 20px;}
.page_title_box h2 {
    font-size: 20px;
    letter-spacing: 1px;}
}


/*スマホ*/
@media screen and (max-width: 667px){
#page9 p {
    font-size: 13px;
    padding-left: 15px;
    letter-spacing: 2px;
}

.head_banner {
    top: 15px;
    right: 87px;
}
}


/*20220325*/
.item01 { bottom: 20%;}

/*タブレット*/
@media screen and (max-width: 768px){
.intro_banner .banner {width: calc(50% - 10px) !important;}
}

/*スマホ*/
@media screen and (max-width: 667px){
.intro_banner .banner {width: 100% !important;}
.item01 {bottom: 26%;}
}