@charset "utf-8";
/* CSS Document */
@media (max-width: 640px) {
	.img {
		margin-top: -14px;
}
	#topi_title {
		width: 100
		background-color: #EAF4C1;
		font-weight: bold;
		color: #8cc457;
		display: block;
		margin-bottom: 6%;
        letter-spacing: 2px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
	}
	#topi_title p {
		display: block;
		font-size: 1.3em;
		padding-top: 10px;
		padding-bottom:10px;
		padding-left: 20px;

		padding-right: 20px;
	}
	#topi_bun {
		display: block;
		height: auto;
		padding-bottom: 30px;
		border-bottom: solid 1px #ccc;
		margin-bottom: 35px;
		margin-left: auto;
		margin-right: auto;
		font-size: 1em;
		line-height: 30px;
	}
	#topi_bun p {
		font-size: 1em;
		padding-top: 10px;
		display: block;
		border: #fff solid 1px;
	}
	#topics_01 {
		width: 95%;
		margin: 0 auto;
	}
	#topi_btn {
		width: 160px;
		margin-bottom: 60px;
		height: 40px;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	.btn_02 {
		    width:180px;
			height:50px;
    font-size:16px;
    text-decoration:none;
    display: table-cell;
	vertical-align: middle;
    text-align:center;
    color:#fff;
    background-color:#8cc457;
    border-radius:5px;
	margin: 0 auto;
	}
	.topi_img {
		margin-bottom: 20px;
		width: 100%;
		height: auto;
	}
}
@media (min-width: 641px) {
	#topics_01 {
		width: 960px;
		margin: 0 auto;
	}
	#topics_02 {
		width: 1100px;
		margin: 40px auto 50px auto;
		height: auto;
		overflow: hidden;
	}
	#topi_con {
		display: block;
		margin: 0;
		padding: 0;
		min-width: 1120px;
	}
  .topi {
		width: 100%;
		margin: 0;
		padding: 120px 0;
	  background-position: top 120px center;
	  background-image:url(images/topi01_02.jpg);
	  background-repeat: no-repeat;
	  height: 0;
	  padding-top: 17%;
  -webkit-background-size: 100% auto;
       -o-background-size: 100% auto;
          background-size: 100% auto;
		  }
	#panzuku {
		display:block;
		height: 50px;
		padding-top: 20px;
		font-size: 14px;
		margin: 0 auto;
		margin-left: auto;
		margin-right: auto;
		width: 960px;
	}
	.pan {
   text-decoration: none;
   border-bottom: 1px solid #8cc457;
   padding-bottom: 1px;
   color: #8cc457;
   margin-right: 5px;
	}
	#topi_title {
		width: 945px;
		background-color: #EAF4C1;
		font-weight: bold;
		color: #8cc457;
		display: block;
		padding: 10px 0px 10px 15px;
		margin-bottom: 30px;
		margin-left: auto;
		margin-right: auto;
        letter-spacing: 2px;
	}
	#topi_title p {
		font-size: 28px;
	}
	#topi_bun {
		width: 920px;
		display: block;
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 30px;
		border-bottom: solid 1px #ccc;
		margin-bottom: 35px;
		margin-left: auto;
		margin-right: auto;
		font-size: 16px;
		line-height: 30px;
	}
	#topi_bun p {
		padding-top: 10px;
		display: block;
		border: #fff solid 1px;
	}
	#topi_btn {
		width: 100%;
		width: 120px;
		margin-bottom: 80px;
		height: 40px;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	.btn_02 {
		    width:120px;
			height:40px;
    font-size:14px;
    text-decoration:none;
    display: table-cell;
	vertical-align: middle;
    text-align:center;
    color:#fff;
    background-color:#8cc457;
    border-radius:5px;
	margin: 0 auto;
	}
/*	.lightbox {
		margin-bottom: 20px;
		max-width: 600px;
		height: auto;
	}*/
	.topi_img {
		margin-bottom: 20px;
		max-width: 300px;
		max-height: 500px;

/*		width: 100%;
*/		height: auto;
	}
	.topi_img_wrapper {
		width: 320px;
		float: left;
	}
	.topi_text {
		width: 600px;
		float: left;
		overflow: auto;
		zoom: 1;
	}

	.clearfix:after {  
	  content: ".";   
	  display: block;   
	  height: 0;   
	  clear: both;   
	  visibility: hidden;  
	}  
	  
	.clearfix { display: inline-table; }  

	.no_image { width: 920px !important;  }

}