@charset "UTF-8";

/* タイトルテーブル幅統一 */
div.content,table.layout{width: 100%;}

header#head_wrap,footer#foot_wrap,button#btn,nav.drawer-nav,div#return_wrap,#leftcolumn{
	display: none;
}

@media screen and (max-width: 767px){
	header#head_wrap, footer#foot_wrap, button#btn, nav.drawer-nav{
		display: block;
	}

	ul li{
		list-style: none;
		margin: 0;
	}

	/* レスポンシブヘッダー */
	header#head_wrap{
		display: block;
		margin: 0 auto;
		width: 100%;
		background: url(https://kkbgreen.itembox.design/item/sp/images/header/bg.jpg)no-repeat;
		background-size: cover;
		position: fixed;
		height: 81px;
	}

	header#head_wrap #logo_area{
		width: 100%;
	    background: #fff;
	    border-radius: 50% 50% 0 0/25% 25% 0 0;
	    margin-top: 10px;
	    position: relative;
	    z-index: 2;
	}

	header#head_wrap #logo_area h1{
		width: 75%;
		margin: 0 auto;
		padding: 3.125% 0 0;
		text-align: center;
		display: block;
	}

	header#head_wrap #logo_area h1 img{
		max-width: 100%;
	    margin: 0;
	    padding: 0;
	}

	/* レスポンシブヘッダー下メニュー */
	#other_area{
		width: 100%;
	    background: url(https://kkbgreen.itembox.design/item/sp/images/header/bg.jpg) 50% 50% no-repeat;
	    background-size: cover;
	    margin: .78125% auto 0;
	    position: relative;
	    z-index: 1;
	}

	#other_area:after {
	    content: ".";
	    display: block;
	    height: 0;
	    font-size: 0;
	    clear: both;
	    visibility: hidden;
	}

	#other_area a{
		text-decoration: none;
	}

	#other_menu{
		background-color: #fdf9ed;
	}

	#other_menu ul {
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: space-between;
	    align-items: center;
	    padding: 1.17vw 2.20vw;
	}

	#other_menu ul li{
		width: 20%;
	}

	#other_menu ul li a {
	    color: #31832f;
	    font-size: 6px;
	    text-align: center;
	    line-height: 1;
	    display: block;
	    font-weight: 700;
	}

	#other_menu ul li:nth-child(1) a,#other_menu ul li:nth-child(3) a{
		font-size: 2.35vw;
	}

	#other_menu ul li:nth-child(2) a{
		font-size: 2.20vw;
	}

	#other_menu ul li:nth-child(4) a{
		font-size: 1.94vw;
	}

	#other_menu ul li:nth-child(5) a{
		font-size: 1.91vw;
	}

	#other_menu ul li a img{
		height: 6.76vw;
		margin-bottom: 1.02vw;
	}

	#search_box{
		width: 75%;
		margin-right: auto;
		margin-left: auto;
	}

	#search_box form {
	    display: flex;
	    padding: 1.32vw 0;
	}

	#search_box form #textfield{
		box-sizing: border-box;
		width: 66.17vw;
		height: 6.32vw;
		border-radius: 3px;
		border: #638c0b 1px solid;
		display: inline-block;
		margin-right: 2.5vw;
		transition: all .4s;
	}

	#search_box form #search_button{
		position: relative;
		transition: all .4s;
		width: 6.32vw;
		height: 6.32vw;
		background: url(https://kkbgreen.itembox.design/item/sp/images/header/search.svg)no-repeat 50% 50% #93c855;
		background-size: 75%;
		border-radius: 3px;
		border: none;
		color: #93c855;
		display: inline-block;
		padding: 1.171875% 0;
	}

	/* ヘッダードロワーメニュー＆メニューボタン */
	.drawer--left .drawer-hamburger, .drawer--left.drawer-open .drawer-nav, .drawer--left.drawer-open .drawer-navbar .drawer-hamburger{
		left: 0;
	}

	.drawer-hamburger, .drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before{
		-webkit-transition: all .6s cubic-bezier(0.190,1.000,0.220,1.000);
		transition: all .6s cubic-bezier(0.190,1.000,0.220,1.000);
	}

	.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before{
		width: 100%;
		height: 2px;
		background-color: #fff;
	}

	.drawer-hamburger-icon:after, .drawer-hamburger-icon:before{
		position: absolute;
	    top: -8px;
	    left: 0;
	    content: ' ';
	}

	.drawer-hamburger-icon:after{
		top: 8px;
	}

	.drawer-open .drawer-hamburger-icon:after,.drawer-open .drawer-hamburger-icon:before {
	    top: 0
	}

	.drawer-open .drawer-hamburger-icon {
	    background-color: transparent
	}

	.drawer-open .drawer-hamburger-icon:before {
	    -webkit-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	    transform: rotate(45deg)
	}

	.drawer-open .drawer-hamburger-icon:after {
	    -webkit-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	    transform: rotate(-45deg)
	}

	button#btn{
		display: block;
	}

	button.drawer-hamburger{
		position: fixed;
	    z-index: 6;
	    top: -2px;
	    display: block;
	    box-sizing: content-box;
	    width: 6.25%;
	    padding: 0;
	    padding: 18px 3.125% 6.25%;
	    -webkit-transform: translate3d(0,0,0);
	    transform: translate3d(0,0,0);
	    border: 0;
	    outline: 0;
	    background-color: #31832f;
	    border-radius: 0 0 5px 5px;
	    cursor: pointer;
	}

	button.drawer-hamburger .sr-only{
		position: absolute;
		overflow: hidden;
		clip: rect(0,0,0,0);
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
	}

	button.drawer-hamburger .drawer-hamburger-icon{
		position: relative;
		display: block;
		margin-top: 2px;
	}

	button.drawer-hamburger p#menu_title{
		font-size: 6px;
		font-weight: 700;
		position: absolute;
		bottom: 12.5%;
		left: 50%;
		width: 40px;
		margin-left: -20px;
		text-align: center;
		color: #fff;
	}

	.drawer-open .drawer-hamburger{
		background-color: #575024;
	}

	.drawer--left.drawer-open .drawer-hamburger{
		left: 80%;
	}

	.drawer--left .drawer-nav{
		left: -80%;
		-webkit-transition: left .6s cubic-bezier(0.190,1.000,0.220,1.000);
		transition: left .6s cubic-bezier(0.190,1.000,0.220,1.000);
	}

	.drawer-nav{
		overflow-x: hidden !important;
		overflow-y: scroll !important;
		-webkit-overflow-scrolling: touch;
	}

	.drawer-nav{
		display: block;
		position: fixed;
		z-index: 4;
		top: 0;
		overflow: hidden;
		width: 80%;
		height: 100%;
		color: #222;
		background-color: #eef4cd;
	}

	.drawer-overlay{
		position: fixed;
	    z-index: 3;
	    top: 0;
	    left: 0;
	    display: none;
	    width: 100%;
	    height: 100%;
	    background-color: rgba(0,0,0,.4);
	}

	.drawer-open .drawer-overlay{
		display: block;
	}

	/* レスポンシブフッター */
	footer#foot_wrap{
		display: block;
		width: 93.75%;
		margin: 20px auto;
	}

	footer #foot_navi_wrap{
		width: 100%;
		margin-bottom: 3.125%;
		border-radius: 10px;
		background: #eef4cd;
	}

	footer #foot_navi_wrap li{
		margin: 0;
		list-style-type: none;
		border-bottom: 1px dotted #585026;
	}

	footer #foot_navi_wrap li:last-child{
		border-bottom: none;
	}

	footer #foot_navi_wrap li a{
		font-size: 10px;
	    display: block;
	    width: 96.875%;
	    margin: 0 auto;
	    padding: 3.125% 0 3.125% 6.25%;
	    color: #585026;
	    background: url(https://kkbgreen.itembox.design/item/sp/images/common/arrow.svg)3.125% 50% no-repeat;
	    background-size: 5px;
		text-decoration: none;
		box-sizing: border-box;
	}

	div#return_wrap{
		display: block;
		position: relative;
	    height: 40px;
	    border-bottom: 5px solid #31832f;
	}

	div#return_wrap #top_move{
		position: absolute;
		top: 0;
		right: 3.125%;
		width: 12.5%;
	}

	div#return_wrap #top_move button{
		padding: 1px 6px;
		font-size: 6px;
		font-weight: 700;
		height: 40px;
		text-align: center;
		color: #fff;
		border: none;
		border-radius: 5px 5px 0 0;
		background: #31832f;
	}

	div#return_wrap #top_move button img{
		width: 50%;
	}

	#menu_head_wrap ul{
		display: table;
	    font-size: 0;
	    border-collapse: collapse;
	}

	#menu_head_wrap ul li{
		display: table-cell;
	    width: 50%;
	    border: #575024 1px solid;
	}

	#menu_head_wrap ul li img{
		width: 100%;
	}

	nav.drawer-nav li.item{
		border-right: 5px solid #575024;
	}

	nav.drawer-nav li.item .drawer-brand{
		font-size: 9pt;
		font-weight: 400;
		display: block;
		padding: 3.125% 4.6875%;
		text-decoration: none;
		color: #fff;
		letter-spacing: .1rem;
		background: #575024;
	}

	nav.drawer-nav li.item .drawer-menu-item{
		font-size: 10px;
	    display: block;
	    padding: 4.6875% 12.5%;
	    text-decoration: none;
	    color: #575024;
	    border-bottom: 1px dotted #575024;
	    background: url(https://kkbgreen.itembox.design/item/sp/images/common/arrow.svg)3.125% 50% no-repeat;
	    background-size: 5px;
	}

	.header,.leftnavi,.footer,#breadcrumb_list_wrap{
		display: none;
	}

	#all_content{
		width: 100%;
	}

	.main{
		width: 93.75%;
		float: none;
		margin: 0 auto;
		padding-top: 170px;
	}

	h2.title2{
		margin: 0 1vw 10px;
	}

	h2.title2 img{
		width: 100%;
		height: auto;
	}

	#undercolumn_contact{
		/*margin: 0 1vw 10px;*/
	}

	#undercolumn_contact img{
		width: 100%;
		max-height: 100%;
	}

	table.layout{
		width: 100%;
		margin: 0;
	}

	table.layout td{
		/*width: calc(100%/3) !important;*/
		vertical-align: top;
	}

	table.layout td img{
		width: 100% !important;
		height: auto !important;
		max-height: none !important;
	}

	/* sekou1 */
	div.body_wrapper{
		width: 100%;
	}
	div#two_maincolumn{
		float: none;
		width: 100%;
		padding: 0;
		margin: 0;
	}

	div#undercolumn h2.title2{
		width: 100%;
		margin: 0 0 10px;
	}

	div.content{
		width: 100%;
		padding: 0;
		box-sizing: border-box;
	}

	div.top_cont{
		display: flex;
	    flex-wrap: wrap;
	    justify-content: center;
	}

	div.top_cont img{
		width: 95%;
		height: 100%;
		margin: 10px auto;
	}

	div.top_cont table{
		margin-bottom: 20px;
	}
}