@charset "UTF-8";


body	{margin: 0;
	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif}


/* サイト名 */
.site h1 a	{
	color: whitesmoke;
	text-decoration: none}

.site h1	{
	margin: 0;
	font-size: 30px;}

.site h1 .small{
	
	font-size :18px;
	display: inline}

.site img	{border: none;}

.site .symbol{
	width: 90px;
	margin-right: 10px;}

.site{
	padding: 5px;margin: 0
}


/* ヘッダー画像 */
.topimg {max-width: 100%;
	height: auto;
	vertical-align: bottom}

/* キャッチコピー */
.catch	{margin: 0;
	padding: 5px;
	background-color: rgba(255,255,255,0.8);
	font-size: 28px}
	
.top a{
	font-size: 20px;
	color: #C51162;
	text-decoration: none}
		
/* ヘッダー画像にキャッチコピーを重ねる */
.top	{position: relative}

.catch	{position: absolute;
	bottom: 7%;
	left: 3%}

.header{
	margin: 0px;
	padding: 0px;
	background-color: #168462;
}

/* ページタイトル */
.pagename h2{
	color: #303F9F;
	font-size: 28px;
	font-weight: normal;
	margin: 0;
	padding: 5px 0px 0px 10px;
}

.pagename p {
	padding: 5px;
	margin: 0;
	color: #363636;
	font-weight: normal;}

.pagename a{
	color: #C51162;
	text-decoration: none}	
	
/*メニュー*/
/*メディアクエリに記載*/
.menu ul li a{
	color: #dcdcdc;
}


/* お知らせ */
.news{
	margin-top: 4px;
	padding: 5px;
	border:solid 3px #D0D0D0}

.news h2{
	font-size: 26px;
	font-weight: normal;
	margin: 0;
	padding: 0;
	color: #303F9F}

.news ul{
	margin: 0;
	padding: 0;
	list-style: none}

.news li a{
	display: block;
	padding: 5px;
	color: dimgray;
	border-bottom: dotted 1px dimgray;
	text-decoration: none}

.news li a:hover	{background-color: #eeeeee}

.news .icon{
	padding: 0px 15px;
	margin-right: 10px;
	color: white;
	background-color: #D61E14;
	border-radius: 3px;}

.news .icon2{
	padding: 0px 15px;
	margin-right: 10px;
	color: white;
	background-color: #1C7EAE;
	border-radius: 3px;}

.news .new{
	margin: 0px 5px;
	color: red;
	font-weight: bold}

.news .news2{
	color: midnightblue;
	}

/* top:工房の利用について */
.introduce{
	content: "";
	display: block;
	clear: both;
	}

/*.frame5{
	background-color: #F3E5F5;}*/

.introduce h2{
	margin: 5px 0px;
	padding: 0;
	font-size: 26px;
	font-weight: normal; 
	color: #303F9F;
	}

.introduce h3{
	margin: 0;
	padding: 0;
	font-size: 22px;
	font-weight: normal}

.introduce a{
	color: #C51162;
	text-decoration: none}

.introduce h3:hover{opacity: 0.5}

.introduce p{
	color: dimgray;
	margin: 0;
	padding: 5px}

.mini{
	font-size: 14px;
}

/*利用日時 アクセス */
.abstract  h2{
	margin: 0;
	padding: 0;
	font-size: 26px;
	font-weight: normal;
	color: #303F9F}

.abstract  h3{
	margin: 0;
	padding: 0;
	font-size: 22px;
	font-weight: normal;
	color: dimgray}

.abstract ul{
	margin: 0;
	padding: 0;
	list-style: none}

.abstract li{
	display: block;
	margin: 0;
	padding: 0px;
	font-size: 16px;
	color: dimgray;
	text-decoration: none}

.abstract:after{
	content: "";
	display: block;
	clear: both}
	
/* アクセス */
.footer{
	background-color: #F3F3F2;
	padding-top: 5px;
}

/* 問い合わせ */

#call input, textarea {
    font: 1em sans-serif;

    width: 300px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    border: 1px solid #999;
}

/*機器工具一覧*/
.machinelist {padding-top: 3px}

.machinelist:after	{content: "";
	display: block;
	clear: both}

.machinelist h2 {
	margin: 5px 0px;
	padding: 0px 0px 0px 5px;
	font-size: 22px;
	font-weight: normal;
	color: #303F9F;
	border-left: solid rgb(7, 104, 63) 10px}

.machinelist .list-m{
	background-color: gainsboro;
	margin-bottom: 10px}

.machinelist h3 {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 16px;
	font-weight: normal;
	color: white;
	background-color: dimgray}

.machinelist h4 {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 13px;
	font-weight: normal;
	color: white;
	background-color: dimgray}
	
.machinelist p{
	margin: 5px 5px 5px 5px;
	font-size: 16px;
	word-wrap: break-word}

.machinelist img{
	width:100%}

.machinelist .space2{
	content: "";
	display: block;
	clear: both}

.machinelist li{font-size: 16px;
	padding: 5px 0px;
	margin: 0px;
}

/* ヘッダー画像にキャッチコピーを重ねる */
.pic	{position: relative}

.note	{
	margin: 0;
	padding: 5px;
	background-color: #168462;
	font-size: 18px;
	color: white;

	position: absolute;
	top: 2%;
	left: 2%;}

.machineimg	{position: relative}

/**/
.sidemenu ul{
	list-style: none}

.sidemenu input{
	margin: 5px;
	padding: 5px}

.sidemenu input:hover{
	background-color: #303F9F}

.caution{
	font-weight: bold;
	color: crimson;
	display: inline}

/*各要素ごとの大枠設定*/
.news, .introduce, .machinelist, .abstract{
	padding: 10px;}
/*
.frame5, .frame6, .frame7{
	border-bottom: solid 1px #BDBDBD}*/


/* ボックスの左右 */
.machinelist, .access
	{padding-left: 10px;
	padding-right: 10px}

/* 安全上の注意 */
.frame6:after, .frame5:after, .frameAB:after{
	display: block;
	clear: both;
	content: "";}



/* ########### 359px以下 ########### */
@media (max-width: 359px) {

}

/* ########### 599px以下 ########### */
@media (max-width: 599px) {

}

/* ########### 767px以下 ########### */
@media (max-width: 767px) {
/*サイト名を２段に*/
.site h1 .small{
	margin-bottom: 5px;
	font-size :18px;
	display: block}

/*「①１から開発ができます」の画像を省略バージョンに変更 */
.abstractimg {
    content: url("./image/2.png")}
	
/*メニュー*/
#menub{
	font-size: 18px;
	color: snow;
	border: solid 1px dimgray;
	border-radius: 5px;
	background-color: darkgray}

#menub:hover{
	background-color: gainsboro}

#menu{
	display: none}

.menu ul{
	margin: 0;
	padding: 0;
	list-style: none}

.menu li a{
	display: block;
	margin: 0;
	padding: 5px;
	font-size: 16px;
	color: dimgray;
	text-decoration: none}

.menu li a:hover{
	background-color: #eeeeee}

.sidemenu nav{
	margin: 5px;
	padding: 5px;
	border: solid 3px #cccccc}

.sidemenu ul{
	padding: 0px;
	margin: 0px}

.sidemenu nav ul li{display: inline}

.sidemenu{
	margin: 0px 10px;}

.pc {display: none !important;}

.sp {display: block !important;}
}

.bar{border-top: solid 1px #BDBDBD}

/* ########### 768px以上 ########### */
@media (min-width: 768px) {
/*メニュー*/
#menub{
	display: none}

#menu{
	display: block !important}

.menu ul{
	margin: 0;
	padding: 0;
	list-style: none}

.menu li a{
	display: block;
	margin: 0px 10px;
	padding: 5px;
	font-size: 16px;
	color: dimgray;
	text-decoration: none;}

.menu li a:hover{
	text-decoration: underline ;
	/*background-color: #eeeeee;*/}

.menu ul:after{
	content: "";
	display: block;
	clear: both}

.menu li{
	float: left;
	width: auto}

.list50per
	{float: left;
	width: 47%;
	margin-right: 3%}

.list30per
	{float: left;
	width: 28%;
	margin-right: 2%}
	
.list70per
	{float: left;
	width: 68%;
	margin-right: 2%;}

.list40per
	{float: left;
	width: 38%;
	margin-right: 2%}
	
.list60per
	{float: left;
	width: 57%;
	margin-right: 2%}

.sidemenu{float: left;
	width: 20%;
	margin-right: 2%;}

.sidemenu nav{
	margin: 5px;
	padding: 5px;
	border: solid 3px #cccccc}

.sidemenu ul{
	padding: 0px;
	margin: 0px}

.sidemenu ul li{
	margin: 5px 0px}

.sidelist{float: left;
	width: 76%;
	margin-right: 2%}

.pc {display: block !important}

.sp {display: none !important}

}

/* ########### 1130px以上 ########### */
@media (min-width: 1130px) {

/* 全体の横幅を固定 */
.header-inner, .frame1, .frame2, .frame3, .frame4, .frame5, .frame6, .frame7, .frameAB, .subtilte, .photo,   .access, .inquiry
	{width: 1100px;
	margin-left: auto;
	margin-right: auto}




}