@charset "utf-8";

@media screen and (min-width:871px) { 

	#g-navi-sp{ display: none; }
	.hp-none{ display: none; }
}

@media screen and (max-width:871px) { 
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
	#g-navi{ display: none; }
	.sp-none{
		display: none;
	}
	.sp-none-p{
		display: block;	
	}
	body{
		width: 100%;
	}
	#home-content {
		padding: 0;
	}
	#home-content #home-bug h2,
	#home-content #home-news h2{
		top: -15px;
	}
	#container {
		width: 100%;
		height: auto
	}
	.pic {
		margin: 0 auto;
		max-width: 440px;
		text-align: center;
	}

	#header {
		width: 100%;
		margin-bottom: calc(-10vw - 3px);
		background: url(images/header-c.gif) no-repeat;
		background-size : 100%;
		height: 24vw;
	}
	#content {
		width: 100%;
		margin: 0;
	}
	#content-inner{
		width: 100%;
		height: auto;
		padding: 0 5px;
		text-align: left;
	}
	#content-inner p{
		text-align: center;
	}

	#content-inner ul li{
		padding: 0;
	}
	#ipm1,
	#ipm2,
	#ipm3,
	#a1,
	#a2,
	#a3{
		width:100%!important;
	}
	#contact {
		width: 100%!important;
		position: static!important;
		margin: 0!important;
		left: 0!important;
		bottom: 0!important;
		float: left;
	}
	#top-banner{
		text-align: center;
		margin: 0;
	}
	#top-contact{
		display: block;
		text-align: center!important;
		margin: 0 auto;
		max-width: 450px;
	}
	#top-contact img{
		float: left;
		margin: 10px;
		max-width: 100%!important;
	}
	#footer{
		width: 100%;
	}
	#home-policy,
	#home-content,
	#home-content-left,
	#home-bug,
	#home-news,
	#home-content-right,
	#banner,
	#side{
		width: 100%;
	}
	#s-bldg{
		width: 230px;
		margin: 0;
	}
	#home-content {
		min-height: 200px;
	}
	img{
		max-width: 100%;
		height: auto;
	}
	#content table{
		width:100%;
	}

	.summary{
		width: 100%;
		background: none;
	}
	.summary h4{
		background: none;
	}
	#content .summary p {
			width: 100%;
		position: static;
		padding: 0;
	}
	#content .summary p img {
		position: static;
		left: 0;
		margin: 0 5px 5px 0;
		float: left;
	}
	.summary ol {
		position: static;
		left: 0;
		margin:10px;
		width: 100%;
		text-align: left;
	}
	.summary ol li{
		margin-top: 8px;
	}
	 #fb-root {
        display: none;
    }
     
    .fb_iframe_widget, .fb_iframe_widget span,
    .fb_iframe_widget span iframe[style] {
        width: 100% !important;
    }

	#image {
		width: 100%;
		height: auto;
		background: none;
	}

	#header form {
		left: 47vw;

		top: calc(9.7vw);
	}
	#searchbox {
		width: 140px;
	}

	#banner {
		width: 100%;
		clear: both;
	}
	#banner li{
		float: left;
	}
	#home-content-right{
		width: 100%;
		margin: 10px 0;
	}
	#home-content-right dl{
		width: 100%;
		display:table;
		table-layout:fixed;
	}
	.sp-left,
	.sp-right{
		float: left;
		display: table-cell;
		height: 11em;
	}
	#s-bldg h4 {
		left: -1px;
		top: -1px;
	}
	#s-navi3 #s53{
		font-size: 73%;
	}
	#home-policy {
		text-align:center;
	}
	#side h2 {
		top: -7px;
	}
	#content h2 {
		margin-top: 15px;
	}
	#content h3 {
		text-align:left;
	}
	#content h4 {
		margin-top: 10px;
	}
	.nowrap {
		white-space: normal;
	}
	#header h3 {
		left: 10px;
		top: 10px;
	}

	#header h3 a {
		width: 40vw;
		height: 10vw;
	}
	#attitude{
		text-align: center;

	}
	#attitude h3{
		max-width: 100%;
		text-align: center;
	}
	#attitude ul{
		text-align: center;
		max-width: 100%;
	}

	#attitude p{
		max-width: 100%;
		text-align: center;
	}
	#attitude li#a1,
	#attitude li#a2,
	#attitude li#a3{
		background-position: center;
	}
	iframe{
		max-width: 100%;
	}
	#content textarea {
		max-width: 100%;
	}


	#content form table {
		width: 100%;
		box-sizing:border-box;
		overflow: hidden;
	}

	#content form table th {
		max-width: 100%;
	}

	#content form table td {
		max-width: 100%;
		box-sizing:border-box;
		
	}

	input[type="text"] {
	    max-width: 70%;
	}
	.box dt {
		padding-left: 15px!important;
	}

	.box dd {
		padding-left: 15px!important;
	}

	.box li {
		padding-left: 15px!important;
	}
	#bldg-navi {
		width: 100%;
		background:none;
		
	}

	.bldg-box {
		float: left;
		max-width:500px;
		
		background: url(images/bldg-box1-sp.gif) no-repeat left bottom ;
		background-size: 100% 100%;
	}
	.bldg-box#house {
		background: url(images/bldg-box2-sp.gif) no-repeat bottom;
		background-size: 100% 100%;
	}
	.bldg-box#shop {
		background: url(images/bldg-box3-sp.gif) no-repeat bottom;
		background-size: 100% 100%;
	}
	.bldg-navi-sp{
		text-align: center;
		margin: 20px 0;
	}
	.bldg-navi-sp li{
		margin: 5px;
	}
	.hachi .rightbox {
		float: none;
		display: block;
	}
	.hato .leftbox {
		float: none;
		display: block;
		margin: 0 auto;
	}
	#point{
		width: 100%;
	}
	#point ul{
		width: 100%;
	}
	.hakubishin #point-sp{
		display: block
	}
	.hakubishin #point{
		display: none;
	}
	#point ul{
		width: 100%;
		margin-right: 0;
	}
	#point li {
		margin: 0 0 15px 0;
		width: 48%;
		text-align: center;
	}
	#point-sp li {
		margin: 0 0 15px 0;
		width: 48%;
		text-align: center;
	}
	#point li:nth-child(2n-1){
		margin-right: 8px;
	}
	#point-sp li:nth-child(2n-1){
		margin-right: 8px;
	}
	.sanitary .pic li{
		max-width: 210px;
	}
	.shirami .listbox li {
		padding-left: 15px!important;
	}
	.shiroari .pic li{
		max-width: 210px;
	}
	.shiroari .pic{
		margin: 10px auto;
	}
	.shiroari #point li:nth-child(4){
		float: left!important;
	}
	.sp-none{
		display: none;
	}

	/*---------------------------------------------------------------------------
	            　　　　　     ▽ハンバーガーメニューここから▽
	---------------------------------------------------------------------------*/

	.g-navi-sp {
	  position: fixed;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 40px;
	  background-color: #fff;
	  box-shadow: 0 2px 6px rgba(0,0,0,.16);
	}
	.global-nav {
	  position: fixed;
	  right: -320px; /* これで隠れる */
	  top: 0;
	  width: 250px; /* スマホに収まるくらい */
	  height: 100vh;
	  padding-top: 40px;
	  background-color: #fff;
	  transition: all .6s;
	  z-index: 200;
	  overflow-y: auto; /* メニューが多くなったらスクロールできるように */
	}
	.hamburger {
	  position: fixed;
	  right: 10px;
	  top: 10px;
	  width: 40px; /* クリックしやすいようにちゃんと幅を指定する */
	  height: 40px; /* クリックしやすいようにちゃんと高さを指定する */
	  cursor: pointer;
	  z-index: 300;
	  background-color: #eee;
	}
	.global-nav__list {
	  margin: 0;
	  padding: 0;
	  list-style: none;
	}
	.global-nav__item {
	  text-align: center;
	  padding: 0 14px;
	}
	.global-nav__item a {
	  display: block;
	  padding: 8px 0;
	  border-bottom: 1px solid #eee;
	  text-decoration: none;
	  color: #111;
	}
	.global-nav__item a:hover {
	  background-color: #eee;
	}
	.hamburger__line {
	  position: absolute;
	  left: 11px;
	  width: 18px;
	  height: 1px;
	  background-color: #111;
	  transition: all .6s;
	}
	.hamburger__line--1 {
	  top: 14px;
	}
	.hamburger__line--2 {
	  top: 20px;
	}
	.hamburger__line--3 {
	  top: 26px;
	}
	.black-bg {
	  position: fixed;
	  left: 0;
	  top: 0;
	  width: 100vw;
	  height: 100vh;
	  z-index: 100;
	  background-color: #000;
	  opacity: 0;
	  visibility: hidden;
	  transition: all .6s;
	  cursor: pointer;
	}
	/* 表示された時用のCSS */
	.nav-open .global-nav {
	  right: 0;
	}
	.nav-open .black-bg {
	  opacity: .8;
	  visibility: visible;
	}
	.nav-open .hamburger__line--1 {
	  transform: rotate(45deg);
	  top: 20px;
	}
	.nav-open .hamburger__line--2 {
	  width: 0;
	  left: 50%;
	}
	.nav-open .hamburger__line--3 {
	  transform: rotate(-45deg);
	  top: 20px;
	}

}
	/*---------------------------------------------------------------------------
	            　　　　　     △ハンバーガーメニューここまで△
	---------------------------------------------------------------------------*/

@media screen and (max-width:480px) { 
	.sp-none-4{
		display:none;
	}
	.sp-none-h{
		display: block;
	}
	.left { text-align: none;}
	.right { text-align: none;}
	.leftbox{
		float: none;
	}

	#header {
		width: 100%;
		height: 41vw;
		background-color: #eee;
		background: url(images/header03.png) no-repeat ;
		background-size   : 100%;
		margin-bottom: 38px;
	}
	#header form {
		top: calc(41vw + 7px);
		left: 10px;
	}
	#banner li{
		margin: 0;
		width: 50%;
	}

	.sp-left{
		float:left;
		margin: 0;
		width: 50%;
	}
	.sp-right{
		float: right;
		width: 50%;
		margin: 0;
	}

	#s-bldg img{
		max-width: 100%;
	}
	#image{
		display: none;
	}
	#image-sp{
		display: block;
	}
	#image-sp{
		margin-bottom: 10px;
	}
	#side{
		margin: 20px 0 10px;
	}
	.sp-title{
		display:block;
		width:100%;
		position:absolute;
		top: 25vw;
	}

	#f-navi ul li#pagetop {
		top: calc(-18vw - 35px);
	}
	.info-title img{
		width: 178px;
		height: 34px;
		object-fit: cover;
		object-position: 100% 0 ;
	}
	#image-sp img{
		width: 100%;
	}
	#side .side-list{
		background-color: white;
		width: 50%;
		float: left;
	}
	#side ul li {
		border: none;
		border-bottom: none;
		font-size: 90%;
		zoom: 1;
	}

	#side .side-list h4{
		border-bottom: solid 1px #BF7820;
		text-align:center;
	}
	#side .side-list li{
		width: 90%;
		list-style-image: url("images/square-green.gif");
		margin: 0 0 0 15px;
	}

	#side ul#s-navi2 li { border-bottom: none; }
	#side ul#s-navi3 li { border-bottom: none; }
	#side h2{
		text-align: center;
	}
	#side ul li a {
	    display:block;
		width: 100%;
		padding: 0 ;
		border: none;
		background: none;
		color: #333;
		font-weight: bold;
		line-height: 30px;
	}

	#side ul li a:hover {
		background: none;
	}
	#home-content-right .info-title{
		text-align: center;
		margin: 0 0 15px 0;
	}
	#s-bldg{
		float: right;
		margin:10px 0;
		width: 50%;
		border: solid 1px #D6D6D6;
	}
	#s-bldg h4 {
		text-align: center;
		margin: 10px 0;
		width: 100%;
	}
	#s-bldg ul li {
		width: 33%;
	}
	#s-navi3 #s53{
		font-size: 100%;
	}
	#home-policy{
		background: none;
		width: 100%;
	}
	#home-policy ul {
		float: none;
	}
	#home-policy ul li {
		padding: 0;
	}
	#home-policy .policy-1{
		float:left;
		width: 50%;
	}
	#home-policy .policy-2{
		float:right;
		width: 50%;
	}
	#home-policy .policy-3{
		width: 50%;
	}
	.contact-img1,
	.contact-img2{
		width: 100%;
		float: left;
	}

	#summary{
		width: 100%;
		background: none!important;
	}
	#summary ol{
		width: 100%;
	}
	#content .summary p {
			width: 100%;
		position: static;
		padding: 0;
	}
	#content .summary p img {
		position: static;
		left: 0;
		float: left;
	}
	.summary ol {
		position: static;
		left: 0;
		margin: 10px;
		width: 100%;
		text-align: left;
	}

	.summary ol li {
		margin-bottom: 0;
	}
	#content h3 {
		font-size: 20px
		border: solid 1px #333
		background: none;
	}
	#header h3 {
		left: 10px;
		top: 15px;
	}
	#header h3 a {
		width: 70vw;
		height: 15vw;
	}
	iframe{
		width: 100%;
	}
	#content th {
		white-space: normal;
	}
	.sp-nofloat{
		float: none;
		display: block;
		margin: 0 auto;
	}

	#attitude li#a1,
	#attitude li#a2,
	#attitude li#a3{
		background-position: left;
	}
	#policy #content-inner h3{
		background: url(images/arrow.gif) no-repeat left 40%;
	color: #8BA954;
	font-size: 115%;
	border-bottom: solid 1px #A4CF51;
	}
	.shiroari   #side ul li#s11 a,
	.gokiburi   #side ul li#s12 a,
	.hachi      #side ul li#s13 a,
	.hae        #side ul li#s14 a,
	.dani       #side ul li#s15 a,
	.shirami    #side ul li#s16 a,
	.kemushi    #side ul li#s17 a,

	.nezumi     #side ul li#s21 a,
	.hato       #side ul li#s22 a,
	.bat        #side ul li#s23 a,
	.hakubishin #side ul li#s24 a,

	.influenza  #side ul li#s31 a,
	.kouteieki  #side ul li#s32 a,

	.environ    #side ul li#s41 a,

	.sanitary   #side ul li#s51 a,
	.sanitary   #side ul li#s52 a,
	.sanitary   #side ul li#s53 a {
		background: url(images/side-navi-bg.gif) no-repeat -200px center;
	}
	.ul-left {
		position: relative;
		left: 0;
		top: 0;
		margin: 10px 0;
		float:left;
	}

	.ul-right {
		position: relative;
		left: 10px;
		top: 0;
		margin: 10px 0;
	}
	.bldg-box h4{

		position: block;
		clear: both;
		padding-left: 0;
	}
	.bldg-box p {
		padding-left: 0;
	}
	ul.bldg-navi{
		width: 100%;
		background-position: 100%;
	}
	input[type="text"] {
	    max-width: 100%;
		width: 100%;
	}
	.bldg-navi-sp{
		text-align: center;
		margin: 5px;
	}
	.bldg-navi-sp li{
		margin: 5px;
	}
	.box{
		padding-left: 10px;
		padding-right: 10px;
	}
	.box2 {
		padding: 10px 10px 0;
	}
	.box2 img{
		display: block;
		margin: 0 auto;
	}
	.species {
		margin: 10px 0 ;
	}
	.species img {
		position: relative;
		left: 0;
		padding: 10px 0;
	}
	.species dt {
		padding: 0 10px 0 0;
	}
	.species dd {
		padding: 3px 0 3px 3em;
	}


	.hachi .rightbox {
		float: none;
		display: block;
		margin: 0 auto;
	}
	.bat .leftbox {
		float: none;
		display: block;
		margin: 0 auto;
	}
	.hakubishin .green li{
		text-align: center;
	}
	.sanitary .pic li{
		float: none;
		text-align: center;
	}
	.shiroari .pic li{
		float: none;
		text-align: center;
		display:block;
		margin:10px auto;
	}
	.shiroari .green li{
		text-align: center;
	}
	#policy #content-inner .rightbox,
	#policy #content-inner .leftbox{
		display: block;
		float: none;
		margin: 0 auto;
	}
	.sp-none{
		display: none;
	}
	#header h5 {
		position: absolute;
		left: 12px;
		top: calc(30px + 15vw);
		width: 50%;
	}

	#header h5 a {
		display: block;
			width: 70vw;
			height: 15vw;
		text-indent: -9999px;
	}
	#f-navi #pagetop {
		display: none;
	}
	#f-navi #pagetop-sp {
		display: block;
		position: fixed;
		bottom: 10px;
		right: 10px;
 		 z-index: 99;
	}
	#footer{
		padding-bottom: 25px;
	}
#s-bldg h4{
	margin: 0;
	text-align: left;
}
	#top-contact img{
		float: none;
		margin: 0 auto;
	}
	#attitude p{
		  text-shadow: 1px 1px 0 #fff,
               -1px 1px 0 #fff,
               1px -1px 0 #fff,
               -1px -1px 0 #fff;
	}
}