@media screen and (max-width:670px) {
	body,
	body.index {
		-webkit-text-size-adjust:100%;
	}
	.spno,
	.gnav,
	.contheaderR{
		display:none;
	}
	.pcno {
		display:inline;
	}
	.floatleft,
	.floatright {
		float:none;
		width:100%;
	}
	.spb2psp {margin-bottom: 2% ;}
	img.spimg_w40 {
		width: 40%;
		height: auto;
	}
	img.w94 {
		max-width: 94%;
		height: auto;
	}
	img.w100 {
		max-width: 100%;
		height: auto;
	}
	.txtCsp {
		text-align:center;
	}
	
	/* HEADER
	-----------------------------------------------------*/
	.contheader .headerleft h1,
	.contheader .headerright,
	#contnavi{
		display:none;
	}
	#outheader {
		width: 90%;
		min-width:auto;
		margin: 0;
		padding:0;
	}
	.contheader {
		width: 100%;
	}

	.contheader .headerleft {
		float:none;
		width: auto;
		margin: 0;
		padding:0;
	}

	.contheader .headerleft .floatleft {
		width: auto;
		padding:0;
		position: absolute;
		top: 10px;
		left: 0;
		z-index:10;
	}

	.contheader .headerleft .floatleft img{
		width: 225px;
		height: auto;
	}

	
	
	/* CONTENTS
	------------------------------------------------------------ */
	#contents {
		width: 100%;
		padding:0;
	}
	.contL{
		display:none;
	}
	.contR {
		width: 100%;
		float:none;
	}
	

	/* FOOTER
	------------------------------------------------------------ */
	#contfooter {
		width: 100%;
		min-width:auto;
		margin: 0;
		padding:0;
	}

	.footer{
		width:100%;
		padding: 0px;
	}

	.footerleft {
		width: 90%;
		min-width:auto;
		margin: 0;
		padding:5% 5% 0px 5% ;
		float:none;
		text-align:center;
	}

	.footerright {
		float:none;
		width: 90%;
		text-align:center;
		padding:5% ;
	}
	.footerright p {
		text-align:center;
		position:static;
	}


	#page-top{
		width:100%;
		position:static;
		text-align:center;
		margin: 0 auto;
		background :#629BF7;
	}
	#page-top a{
		width:100%;
		display: block;
	}
	
	
	
	/* Naka▼▼
	------------------------------------------------------------ */
	.pankuzu {
		width: 94%;
		padding:3%;
		margin: 0;
		font-size: 10px;
		line-height: 1.4em;
		clear: both;
		overflow: hidden;
		overflow-x:auto;
	}
	.pankuzu::-webkit-scrollbar{
		width: 5px;
		background: #e5e5e5;
	}
	.pankuzu::-webkit-scrollbar:horizontal{
		height: 5px;
		background: #e5e5e5;
	}
	.pankuzu::-webkit-scrollbar-thumb{
		background: #5f5f5f;
		border-radius: 2px;
	}
	.pankuzu::-webkit-scrollbar-thumb:horizontal{
		background: #5f5f5f;
		border-radius: 2px;
	}
	.pankuzu ul {
		width: 100%;
		white-space: nowrap;
	}
	.pankuzu ul li.home {
		padding:5px 0 5px 20px;
	}
	
	.contR h2 {
		width: 100%;
		overflow:hidden;
	}
	.contR h2 img {
		width: 670px;
		height: auto;
		margin-left:-1px;
	}
	h3.h3line {
		width: 90%;
		margin: 5% ;
		border-bottom:1px solid #b9b9b9;
		overflow:hidden;
	}
	h3.h3linesp2,
	h3.h3linesp3 {
		width: 90%;
		padding-bottom:3px;
		margin: 5% ;
		border-bottom:1px solid #b9b9b9;
		overflow:hidden;
	}
	h3.h3line img {
		width: auto;
		max-height: 24px;
	}
	h3.h3linesp2 img {
		width: auto;
		max-height: 44px;
	}
	h3.h3linesp3 img {
		width: auto;
		max-height: 54px;
	}
	.contR h4 {
		width: 90%;
		margin: 5% ;
		overflow:hidden;
		border-right:1px solid #D5D8C8;
	}
	.contR h4 img {
		width: 650px;
		height: auto;
	}
	.contR h5 {
		width: 90%;
		margin: 5% ;
	}
	.spcontbox {
		width: 90%;
		margin: 0 5% 10% 5% ;
	}
	.spcontbox0b {
		width: 90%;
		margin: 0 5% ;
	}
	.spcontbox img,
	.spcontbox0b img {
		max-width: 100%;
		height: auto;
	}
	.contR .sptable {
		width: 90%;
		margin: 0 5% 10% 5% ;
   	 }
	.contR .sptable th,
	.contR .sptable td{
		width:auto;
		display: block;
   	 }
	.contRBoxRed {
		width: 80%;
		margin: 0 5% 5% 5% ;
		padding:5%;
	}
	.contRBox {
		width: 80%;
		margin: 0 5% 10% 5% ;
		padding:5%;
		word-wrap: break-word;
	}
	#members .contRBox {
		width: 90%;
		border:none;
		margin: 0 0 10% 0 ;
		padding:0;
		word-wrap: break-word;
	}
	.contRBoxN {
		width: 90%;
		padding:5%;
	}
	.contRBox01,
	.contRBox03{
		width: 79%;
		height:auto !important;
		margin: 0 5% 10% 5% ;
		padding:5%;
		word-wrap: break-word;
	}
	.contRBox02{
		width: 89%;
		height:auto !important;
		margin: 0 0 5% 0 ;
		padding:5%;
		word-wrap: break-word;
	}
	.contRBox ul, .contRBox ol{
		padding:0 0 0 5%;
	}
	
	.contR .spcontboxTable {
		width: 90%;
		margin: 5% ;
		clear: both;
		overflow: hidden;
		overflow-x:auto;
		padding:0px;
	}
	
	.contR .spcontboxTableN {
		width: 100%;
		clear: both;
		overflow: hidden;
		overflow-x:auto;
		padding:25px 0 0 0;
	}
	
	.contR .spcontboxTable::-webkit-scrollbar,
	.contR .spcontboxTableN::-webkit-scrollbar{
		width: 5px;
		background: #e5e5e5;
	}
	.contR .spcontboxTable::-webkit-scrollbar:horizontal,
	.contR .spcontboxTableN::-webkit-scrollbar:horizontal{
		height: 5px;
		background: #e5e5e5;
	}
	.contR .spcontboxTable::-webkit-scrollbar-thumb,
	.contR .spcontboxTableN::-webkit-scrollbar-thumb{
		background: #5f5f5f;
		border-radius: 2px;
	}
	.contR .spcontboxTable::-webkit-scrollbar-thumb:horizontal,
	.contR .spcontboxTableN::-webkit-scrollbar-thumb:horizontal{
		background: #5f5f5f;
		border-radius: 2px;
	}
	
	/* INDEX
	------------------------------------------------------------ */

	.contR iframe {
		width: 90%;
		padding:5% 5% 0 5%;
		height:300px;
		margin: 0;
	}
	

	.contR .kaiinBox {
		width: 90%;
		padding:5% ;
	margin:0 0 40px 0;
	}

	.contR .kaiinBox .floatleft {
		width: 40%;
		float:left;
	}

	.contR .kaiinBox .bannerBox {
		width: 60%;
		float:right;
	}

	.contR .kaiinBox .bannerBox a {
		width: 49%;
		float:left;
		margin: 0 0 1% 1%;
	}

	.contR .kaiinBox .floatleft a img,
	.contR .kaiinBox .bannerBox a img {
		max-width: 100%;
		height: auto;
		margin: 0;
		padding:0;
	}
	
	
	.contR .serviceBoxBG01,
	.contR .serviceBoxBG02,
	.contR .serviceBoxBG03,
	.contR .serviceBoxBG04,
	.contR .serviceBoxBG05,
	.contR .serviceBoxBG06 {
		width: 90%;
		height:auto !important;
		margin: 0 5% ;
		padding:10px 0;
		text-align:center;
	}
	.contR .serviceBoxBG01 {
		border-top-right-radius:5px;
		-webkit-border-top-right-radius: 5px;
		-moz-border-radius-topright: 5px;
	}
	.contR .serviceBoxBG06 {
		border-bottom-left-radius:0px;
		-webkit-border-bottom-left-radius: 0px;
		-moz-border-radius-bottomleft: 0px;
	}
	.contR .serviceBoxCont {
		width:100px;
		height:auto !important;
		display:inline;
	}

	.contR .serviceBox {
		width: 79.5%;
		height:auto !important;
		margin: 0 5% ;
		padding:5%;
		float:none;
		display:block;
		border-top:1px none;
		border-left:1px solid #dad9d9;
	}

	.contR .serviceBox .spb15,
	.contR .serviceBox_bt .spb15 {
		margin-bottom: 2% ;
	}

	.contR .serviceBox_bt {
		width: 79.5%;
		height:auto !important;
		margin: 0 5% 10% 5% ;
		padding:5%;
		float:none;
		border-top:1px none;
		border-left:1px solid #dad9d9;
		border-bottom-left-radius:5px;
		-webkit-border-bottom-left-radius: 5px;
		-moz-border-radius-bottomleft: 5px;
	}
	
	
	
	/* 茨木商工会議所について▼▼
	------------------------------------------------------------ */
	.contR .kaitouL {
		width: 90%;
		margin: 0 5% ;
		float:none;
	}

	.contR .kaitouR {
		width: 90%;
		margin: 5% ;
		float:none;
	}
	
	
	
	/* 検定試験のご案内・お申込▼▼
	------------------------------------------------------------ */
	.spkenteibox{
		width: 90%;
		margin: 0 5% 10% 5% ;
	}
	.spkenteibox .floatleft {
		float:left;
		width: 32%;
	}
	.spkenteibox .floatleft img {
		max-width: 100%;
		height: auto;
	}
	.spkenteibox .spr15 {
		margin-right: 2%;
	}
	
	
	
	/* 検定試験のご案内・お申込▼▼
	------------------------------------------------------------ */
	.gojoBox {
		width: 80%;
		height: auto;
		margin: 0 5% 10% 5% ;
		padding:5% 5% 35% 5%;
		background:url(../../other_business/welfare/img/bk0301.jpg) no-repeat bottom left #E6F08B;
		background-size: contain;
	}
	.gojoBox02 {
		width: 80%;
		margin: 0 5% 10% 5% ;
		padding:5%;
	}
	.gojoBox h5, .gojoBox02 h5, .contRBox04 h6 {
		width: 100%;
		margin: 0 0 10px 0;
		padding: 0px;
		overflow: hidden;
	}
	.gojoBox_naka00, 
	.gojoBox_naka01, 
	.gojoBox_naka02, 
	.gojoBox_naka03, 
	.gojoBox_naka04, 
	.gojoBox_naka06 {
		width: 90%;
		padding:5%;
		word-wrap: break-word;
	} 
	.gojoBox_naka01,
	.gojoBox_naka02, 
	.gojoBox_naka03, 
	.gojoBox_naka04,
	.gojoBox_naka06 {
		background:none #fff;
	}
	.gojoBox_naka01 ul, 
	.gojoBox_naka02 ul, 
	.gojoBox_naka03 ul, 
	.gojoBox_naka04 ul, 
	.gojoBox_naka06 ul {
		width:auto !important;
		padding: 0 0 0 5%;
	}
	.gojoBox_naka04 p,
	.w450spno,
	.w350spno {
		width:auto !important;
	}
	.contRBox04 {
		width: 79%;
		margin: 0 5% 10% 5% ;
		padding:5%;
	}
	.flowBox {
		width: 90%;
		padding:5% ;
		margin:0;
	}
	
	
	/* nextgen-gallery▼▼
	------------------------------------------------------------ */
	.ngg-gallery-thumbnail2-box {
		width: 40%;
		margin: 0 5% 5% 5% ;
	}
	.ngg-gallery-thumbnail2-box img {
		width: 100%;
		height: auto;
	}
}



@media screen and (max-width:500px) {	
	.contR h2 img {
		width: 500px;
		height: auto;
	}

	.contR .kaiinBox {
		width: 90%;
		padding:5% ;
		margin:0;
	}

	.contR .kaiinBox .floatleft,
	.contR .kaiinBox .bannerBox {
		width: 100%;
		float:none;
		margin:1% 0;
	}

	.contR .kaiinBox .bannerBox a {
		width: 49%;
		float:left;
		margin: 0.5%;
	}

	.contR .kaiinBox .floatleft a img,
	.contR .kaiinBox .bannerBox a img {
		width: 100%;
		height: auto;
		margin: 0;
		padding:0;
	}
	.sp500no{
		display:none;
	}
	.sp500on {
		display:inline;
	}
	.sp500cll {
		clear:both;
		height: 0;
		overflow: hidden;
	}
	
	
	/* 検定試験のご案内・お申込▼▼
	------------------------------------------------------------ */
	.spkenteibox .floatleft {
		float:left;
		width: 49%;
	}
	.spkenteibox .floatleft img {
		max-width: 100%;
		height: auto;
	}
	.spkenteibox .spr15 {margin: 0;}
	.spkenteibox .spr2psp500 {margin-right: 2%;}
}



/*　メニュー部分
-----------------------------------------------------*/

/* hide the link until viewport size is reached */
a.meanmenu-reveal {
	display: none;
}

/* when under viewport size, .mean-container is added to body */
.mean-container .mean-bar {
	float: left;
	width: 100%;
	position: relative;
	padding: 0 0 1px 0;
	min-height: 50px;
	z-index: 9;
		border-bottom:solid 4px #4A89F5;
	background: #fff;
}

.mean-container a.meanmenu-reveal {
	width: 50px;
	height: 50px;
	padding: 0px;
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
	color: #000;
	display: block;
}

.mean-container a.meanmenu-reveal span {
	display: block;
	height: 50px;
	background: url(../img/open.png) no-repeat left top;
	
}

.mean-container a.meanmenu-reveal.meanclose span {
	display: block;
	height: 50px;
	background: url(../img/close.png) no-repeat left top;
	
}




.mean-container .mean-nav {
	float: left;
	width: 100%;
		background: #4A89F5;
	margin-top: 50px;
}

.mean-container .mean-nav ul {
	padding: 0;
	margin: 0;
	width: 100%;
	list-style-type: none;
}

.mean-container .mean-nav ul li {
	position: relative;
	float: left;
	width: 100%;
}

.mean-container .mean-nav ul li a {
	display: block;
	float: left;
	width: 90%;
	padding: 1em 5%;
	margin: 0;
	text-align: left;
	color: #fff;
	border-top: 1px solid #E7F1FF;
	text-decoration: none;
	text-transform: uppercase;
	line-height: 1.5em;
}

.mean-container .mean-nav ul li li a {
	width: 80%;
	padding: 1em 10%;
	border-top: 1px solid #E7F1FF;
		background: #4A89F5;
	text-shadow: none !important;
	visibility: visible;
}

.mean-container .mean-nav ul li.mean-last a {
	border-bottom: none;
	margin-bottom: 0;
}

.mean-container .mean-nav ul li li li a {
	width: 70%;
	padding: 1em 15%;
}

.mean-container .mean-nav ul li li li li a {
	width: 60%;
	padding: 1em 20%;
}

.mean-container .mean-nav ul li li li li li a {
	width: 50%;
	padding: 1em 25%;
}

.mean-container .mean-nav ul li a:hover {
	background: #DDDBDA;
	color: #000;
}

.mean-container .mean-nav ul li a.mean-expand {
	margin-top: 1px;
	width: 26px;
	height: 25px;
	padding: 12px !important;
	text-align: center;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
	font-weight: 700;
	background: rgba(255,255,255,0.1);
	border: none !important;
	border-left: 1px solid rgba(255,255,255,0.4) !important;
}

.mean-container .mean-nav ul li a.mean-expand:hover {
	background: #DDDBDA;
	color: #000;
}

.mean-container .mean-push {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
	clear: both;
}

.mean-nav .wrapper {
	width: 100%;
	padding: 0;
	margin: 0;
}

/* Fix for box sizing on Foundation Framework etc. */
.mean-container .mean-bar, .mean-container .mean-bar * {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}


.mean-remove {
	display: none !important;
}