/*
Theme Name: kaerulife
Theme URI: http://www.kaeru-life.com
Description: Designed by Kaeru-Life.
Version: 1.0
Author: Kaeru-Life
Author URI: http://www.kaeru-life.com
*/


/* Responsive Design */
/*Styles for screen 900px and lower*/
@media only screen and (max-width : 900px) {
	#wrapper {
		width: 95%;
		}
	#wrapper_top {
		width: 95%;
		}
	#wrapper h1,
	#wrapper_top h1
		{
		font-size: 20px;
		font-weight: bold;
		color: #247907;
		margin: 8px 0 10px 0;
		}
	#hiroba_title
		{
		font-size: 20px;
		font-weight: bold;
		color: #247907;
		margin: 8px 0 10px 0;
		}
	#wrapper h2,
	#wrapper_top h2 {
		font-size: 16px;
		line-height: 130%;
		border-left:6px solid #247907;
		font-weight: bold;
		padding:.0em .6em
		}
	p {
		line-break: strict;
		word-break: break-all;
		word-wrap: break-word;
		font-size: 15px;
		}
	#mobile_header {
		display: block;
		border-bottom: 1px solid #A4A4A4;
		width: 100%;
		height: 49px;
		margin: 0;
		padding: 0;
		}
	#sitelogo {
		float: left;
		margin: 0px;
		line-height: 0;
		}
	#mobile_menu {
		float: right;
		}
	#navbar {
		clear: both;
		height: 0px;
		border-bottom: 0;
		background-color: #fff;
	}
	#navbar-inner {
		width: 100%;
		float: right;
		background-color: #99cc00;
	}
  	#navbar-inner a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 20px;
  	}
	#navbar-inner li {
  		width: 100%;
  		float: left;
  		position: relative;
		background-color: #99cc00;
		border-bottom: 1px solid #fff;
		height: 36px;
	}
  	#navbar-inner li a {
		color: #fff;
		font-size: 12px;
		background: #99cc00;
		border-right: 0px;
		line-height: 36px;
		height: 36px;
	}
  	#navbar-inner li:last-child {
		border-bottom: 1px solid #A4A4A4;
	}
  	#navbar-inner a:hover,
	#navbar-inner a:active {
	  	background-color: #AEDF1C;
  	}
	#navbar-inner ul {
  		width: 100%;
  		display: none;
		height: auto;
	}
	#navbar-inner a#pull {
		color: #2E2E2E; 
		display: block;
		width: 100%;
		position: relative;
		background-color: #99cc00;
	}
	#header {
		display: none;
	}
	#content2 {
		width: 100%;
	}
	#footer {
		height: 40px;
		}
	#footer p {
		width: 95%;
		padding: 10px 0 0 0;
		}
	#bottom-inner {
		width: 100%;
		margin: 0 auto;
	}
	#bottom-left,
	#bottom-mid,
	#bottom-right {
		width: 27%;
		padding: 20px 0 10px 20px;
	}
	#menu_contact,
	#menu_contact a,
	#menu_contact a:hover,
	#menu_contact a:active {
		display: block;
	}

	.border_855 {
 		display: none;
	}

	#breadcrumb {
		font-size: 0.7em;
		margin: 5px 0 5px 0;
	}
	#breadcrumb h1 {
		font-size: 1em;
		font-family: 'Lucida Grande','Lucida Sans Unicode', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'ＭＳ Ｐゴシック','MS P Gothic',Osaka,arial,helvetica,clean,sans-serif;
		color: #333;
		display: inline;
	}
	#topentry img,
	#postentry img {
		width: 100%;
		height: auto;
	}

	/*About Page*/
	#about_LRUnit {
		width: 100%;
	}

	/*YouTube Video*/
	.video-container {
		position : relative;
		padding-bottom : 56.25%;
		padding-top : 30px;
		height : 0;
		overflow : hidden;
	}
	.video-container iframe,
	.video-container object,
	.video-container embed {
		position : absolute;
		border-width: 0;
		top : 0;
		left : 0;
		width : 100%;
		height : 100%;
	}
	
	/*Top Page*/
	#topbanner {
		height: 100%;
	}
	#topleft {
		width: 60%;
		float: none;
	}
	#topright {
		width: 36%;
	}
	#topright ul.side_menu2 li img {
		width: 220px;
	}
	#store_header {
		margin: 0 0 0 0;
	}
	#storehead_LRUnit_top {
		width: 100%;
	}
	#top_desc_inner {
		width: 95%;
		margin: 0 auto;
	}
	#mobile_header {
		overflow: hidden;
	}
	/*画像マウスオーバー無し*/
	a:hover img {
		filter : alpha(opacity=100);
		opacity : 1 ;
	}
}


/*Styles for screen 640px and lower*/
@media only screen and (max-width : 640px) {
	#bottom-mid,
	#bottom-right {
		display: none;
	}
	#bottom-inner {
		width: 91%;
		margin: 0 auto;
	}
	#bottom-left {
		width: 100%;
		padding: 20px 0;
	}
	.resize img {
		width: 75%;
	}
	.resize_60 img {
		width: 50%;
	}
	#about_leftUnit {
		width: 100%;
	}

	#about_rightUnit {
		width: 100%;
	}
	#page_navi {
		margin-top: 10px;
	}
	#page_navi ul {
		padding: 0;
		font-size: 12px;
		background: none;
	}
	#page_navi li {
		border-bottom: none;
		background: #F2F2F2;
		list-style-type: none; 
		display: block;
		float: left;
		line-height: 260%;
		width: 49%;
		text-align: center;
		margin-bottom: 4px;
	}
	#page_navi li:nth-child(odd) {
		margin-right:4px;
	}

	/*clearfix*/
	.clearfix:after {
 		 content: "";
 		 display: block;
 		 clear: both;
	}

	/*top page*/
	#topbanner {
		display: none;
	}
	#topbanner_m {
		display: inherit;
		width: 100%;
		margin: 0 0 5px 0;
	}
	.side_menu2,
	#top_sidebar {
		display: none;
	}
	#topleft {
		width: 95%;
		margin: 0px auto 40px auto;
	}
	#topleft_m {
		width: 95%;
		margin: 0 auto;
	}
	#topright {
		width: 100%;
		margin: 0;
	}
	#topentry img,
	#postentry img {
		width: 100%;
		height: auto;
		pointer-events:none;
	}
	#socialbutton {
		margin: 15px 0 0 10px;
	}

	#top_kousin {
		padding: 12px 12px;
		line-height: 170%;
	}

	/*Table*/
	.hiroba th{
		color: #069;
		background:#e0efff;
		border-right:1px solid #dcdcdc;
		border-bottom:1px solid #dcdcdc;
		padding: 3px 8px;
		font-size: 13px;
	}

	.hiroba td{
		border-right:1px solid #dcdcdc;
		border-bottom:1px solid #dcdcdc;
		padding: 4px 8px;
		font-size: 13px;
	}
	#hiroba_sidebar {
		width: 100%;
		padding-top: 15px;
		border-top: 1px dotted #dadada;
	}

	.hiroba_s th{
		color: #069;
		background:#e0efff;
		border-right:1px solid #dcdcdc;
		border-bottom:1px solid #dcdcdc;
		padding: 3px 3px;
		font-size: 11px;
	}
	.hiroba_s td{
		border-right:1px solid #dcdcdc;
		border-bottom:1px solid #dcdcdc;
		padding: 3px 3px;
		font-size: 11px;
	}

	#kyozai-main ul li {
	align: center;
	margin: 0 25px 20px 0;
	}
}

/*Styles for screen 480px and lower*/
@media only screen and (max-width : 480px) {
	.resize img {
		width: 100%;
	}
	.resize_60 img {
		width: 60%;
	}
	#wrapper {
		width: 92%;
		}
	#wrapper_top {
		width: 100%;
		overflow: hidden;
		}
	#footer p {
		width: 92%;
	}
	#topleft {
		width: 92%;
	}
}