@charset "utf-8";
/* CSS Document */
/*===============================================
●smart.css  画面の横幅が960pxまで
===============================================*/
@media screen and (max-width:960px){
/*********** header設定 ***********/
	/*header{
		height:auto;
	}*/
    #pc_header,
	#pc_header2{
        display: none;
    }
    #sp_header{
        display: block;
        background: #fff;
        padding:10px;
        position: fixed;
        top:0;
        left:0;
        width:100%;
        box-sizing: border-box;
        z-index: 9999;
    }
    #sp_logo img{
        height:40px;
    }
	.hamburger-menu{
		position: absolute;
		top: 0px;
		right: 0px;
	}
	.menu-btn {
		margin:0 auto;
		position: relative;
		display: flex;
		height: 60px;
		width: 60px;
		justify-content: center;
		align-items: center;
		z-index: 90;
		background-color: #fff;
		cursor: pointer;
	}
	.menu-btn span,
	.menu-btn span:before,
	.menu-btn span:after {
		content: '';
		display: block;
		height: 2px;
		width: 16px;
		background-color: #158942;
		position: absolute;
		-webkit-transition: 0.1s ease-in-out;
		-moz-transition: 0.1s ease-in-out;
		-o-transition: 0.1s ease-in-out;
		transition: 0.1s ease-in-out;
	}
	.menu-btn span:before {
		bottom: 6px;
	}
	.menu-btn span:after {
		top: 6px;
	}
	#menu-btn-check:checked ~ .menu-btn span {
		background-color: rgba(255, 255, 255, 0);
	}
	#menu-btn-check:checked ~ .menu-btn span::before {
		bottom: 0;
		transform: rotate(45deg);
	}
	#menu-btn-check:checked ~ .menu-btn span::after {
		top: 0;
		transform: rotate(-45deg);
	}
	#menu-btn-check {
		display: none;
	}
	#gnavi_sp{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 100%;
		z-index: -1;
		background-color:#fff;
		transition: all 0.5s;
		overflow: auto;
	}
	#gnavi_sp ul {
		padding: 60px 20px 0;
	}
	#gnavi_sp ul li {
		border-bottom: solid 1px #ddd;
		list-style: none;
	}
	#gnavi_sp ul li:first-child {
		border-top: solid 1px #ddd;
	}
	#gnavi_sp ul li a {
		display: block;
		width: 100%;
		font-size: 15px;
		box-sizing: border-box;
        color:#158941;
		text-decoration: none;
		padding:16px 15px 14px 0;
		position: relative;
	}
	#gnavi_sp ul li a::before {
		content: "";
		width: 7px;
		height: 7px;
		border-top: solid 2px #ccc;
		border-right: solid 2px #ccc;
		transform: rotate(45deg);
		position: absolute;
		right: 11px;
		top: 0;
		bottom:0;
		margin:auto 0;
	}
	#gnavi_sp a img{
		width:26px;
		vertical-align: middle;
		margin-right:5px;
	}
	#menu-btn-check:checked ~ #gnavi_sp {
		left: 0;
	}	
	#gnavi {
		display: none;
	}  
    
    
    #contents{
        padding-top:60px;
    }
    

	#clm1{
		display:block;
	}
	#side1{
		width:100%;
		padding-bottom:0;
	}
	#main1{
		width:100%;
		padding:60px 20px 60px 20px;
	}
	/*お知らせ詳細用*/
	#side2{
		width:100%;
		padding:60px 0 60px;
	}
	#main2{
		width:100%;
		box-sizing: border-box;
		padding:60px 20px 0 20px;
	}


	/*********** side設定 ***********/
	.ttl_side2{
		padding:0 1em 10px 1em;
	}

	.ul_side2{
		padding:0 20px 20px 20px;
	}



	/*********** TTL設定 ***********/
	#ttl_page{
		height:auto;
		padding:3em 20px;
	}
	#ttl_page_jp{
		font-size:clamp(20px,5vw,32px);
	}
	#ttl_page_en{
		font-size:clamp(16px,2.5vw,32px);
	} 
    

    /*********** 問い合わせ設定 ***********/
    #btn_cont{
        flex-direction: column;
    }
    .btn_cont_wrap{
        width:100%;
    }
    .btn_tel_img{
        width:10%;
    }    
    .btn_tel{
        height:auto;
        padding:20px;
    }
    .btn_cont_text1{
        font-size:clamp(16px,4vw,23px);
    }
    .btn_cont_text2{
        font-size: 40px;
        font-size:clamp(22px,6vw,40px);
    }



    /*********** footer設定 ***********/
    #f_flex{
        flex-wrap: wrap;
        gap:40px;
    }
    #f_logo{
        width:100%;
        padding-right:0;
    }
    .f_flex_div{
        width:calc(50% - 20px);
        box-sizing: border-box;
        padding:0 0 0 0;
        border-left:0;
    }
	
	


	/*********** 事業紹介設定 ***********/
	.buz_item{
		display: block;
	}
	.buz_img,
	.buz_dl{
		width:100%;
	}
	.buz_img figure{
		padding-top:calc(300 / 640 * 100%);
	}
	.buz_dl,
	.buz_item:nth-of-type(2n) .buz_dl{
		padding:20px 20px 40px 20px;
	}
	.buz_dl dt,
	.buz_item:nth-of-type(2n) .buz_dl dt{
		padding:0 0 10px 0;
	}
	.buz_dl dd,
	.buz_item:nth-of-type(2n) .buz_dl dd{
		padding:20px 0 0 0;
	}
}






/*===============================================
●smart.css  画面の横幅が768pxまで
===============================================*/
@media screen and (max-width:768px){
    /*********** スライド設定 ***********/
    .thumbnail .slick-track {
        flex-wrap:wrap; 
        height:215px;
    }
    .thumbnail .slick-slide{
        width:calc(50% - 5px/2) !important;
        height:105px;
    }
    .thumbnail-img dl{
        font-size:clamp(12px, 3vw, 18px);
    }

    /*********** 代表あいさつ設定 ***********/
    #top_mes{
        flex-direction: column;
        align-items: center;
    }
    .top_mes_l{
        width:80%;
        max-width:326px;
    }
    .top_mes_r{
        width:100%;
    }

    /*********** おしらせ設定 ***********/
    #top_news{
        gap:60px;        
        flex-direction: column;
    }
    .top_news_item{
        width:100%;
    }
}






/*===============================================
●smart.css  画面の横幅が640pxまで
===============================================*/
@media screen and (max-width:640px){
    /*********** footer設定 ***********/
    #f_logo{
        width:100%;
    }
    .f_flex_div:last-of-type{
        width:100%;
        box-sizing: border-box;
        padding:0 0 0 0;
        border-left:0;
    }


	/*********** 代表あいさつ設定 ***********/
	.dl_greet{
		flex-direction: column;
		align-items: center;
		gap:20px;
	}
	.dl_greet dd{
		width:100%;
	}
	.dl_greet dt{
		width:100%;
	}
	.dl_greet figure img{
		width:80%;
		max-width:240px;
	}
	
	


	/*********** 問い合わせ設定 ***********/
	.dl_contact {
		padding:40px 20px;
	}

    
    
}