* {
	margin: 0px;
	padding: 0px;
}
a {
	text-decoration: underline;
}
img {
	border: none;
}
body {
	margin: 0px;
	padding:0px;
	text-align: center;
	color: #556;
	background-color: #f0fff0;
}

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

@media only screen and (min-width: 10px) and (max-width:599px){


    
    
/* ページのタイトル */     
.site h1 a	{color: #000000;
	text-decoration: none}

.site h1	{
    width:100%;
    margin: 0 auto;
	font-size: 25px}

.site img	{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    border: none}


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



/* トグルボタン */
#menubtn	{padding: 6px 12px;
	border: solid 1px #aaaaaa;
	border-radius: 5px;
	background-color: #ffffff;
	position: absolute;
	top: 20px;
	right: 15px;
	cursor: pointer}

#menubtn:hover	{background-color: #dddddd}

#menubtn:focus	{outline: none}

#menubtn i	{color: #888888;
	font-size: 18px}

#menubtn span	{display: inline-block;
	text-indent: -9999px}

/* ナビゲーションメニュー（縦並び） */
.menu	{display: none}

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

.menu li a	{display: block;
	padding: 5px;
	color: #000000;
	font-size: 14px;
	text-decoration: none}

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


/* BOX Aの下に罫線を挿入（コンテンツページのみ） */
.contents .boxA	{border-bottom: solid 1px #dddddd}

/* ボックスの左右 */
.boxA
	{width:100%;    
    padding-left: px;
	padding-right: 15px;
    padding-top: 20px;
	padding-bottom: 10px}
  /* ロゴをセンターに　 */  
.box1{width:100%;}
.site{width:100%;;
      margin-left:auto;
      margin-right:auto;}

/* サイト名 */ 
.site h10 {
	margin:0 auto 0 0;
	width:100%;
    text-align:center;
}
.site h10 img {
	width:100%;
	max-width:200px;
    /* ロゴから下の部分の幅の調節 */ 
    margin-bottom: 50px;
}    
       
 /* 求人メッセージ */
    #message1{
        width:97%;
        margin-left: auto;
        margin-right: auto;
        text-align: left;}
    p#name{font-size: 20px;}
    p#sub{font-size: 12px;}
    
    #title{margin-top: 10px;
           margin-bottom: 10px;
           font-size: 16px;}
    
    #banner{width:100%;
            float:left;
            background-color: dimgray;
            font-size: 8px;
            color: white;
            margin-bottom: 70px;}
    #banner h3{
        width:40%;
        padding:4px;
        margin:4px;
        float:left;
        border: solid white 1px;}
    
    
    section#recruitcontent{
        width;100%;
        color:red;}
    
    
 /* 表のデザイン */  

table.officeexplain {
 width:100%;
 border-collapse: collapse; 
text-align: left; 
line-height: 1.5;
font-size:1６px;
} 

table.officeexplain th { 
 width: 25%; 
 padding: 10px; 
font-weight: bold; 
vertical-align: top; 
 border: 1px solid #ccc; 
} 
table.officeexplain td { 
width: 70%; 
padding: 10px; 
vertical-align: top; 
border: 1px solid #ccc;
} 
      
    
    
 #message2{
        width:97%;
        margin-top: 15px;
     margin-bottom: 40px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
        font-size: 14px;}  
    
 #message3{
        width:97%;
        margin-top: 15px;
     margin-bottom: 40px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
        font-size: 11px;}  
    
    
    
    
    
    
    
    
    
    /* 写真ギャラリー部分 */  
ul.photos {
	width: 320px;
	padding: 50px 0px;
	margin: 0px auto;
	text-align: center;
	list-style: none;
}
    ul.photos img{width:100%;}    
    
ul.photos li {
	display: inline;
	width: 160px;
	height: 160px;
}
    /* クリックしないと表示されない */ 
ul.photos li#displaynone {
	display: none;
	width: 160px;
	height: 160px;
}
    /* クリックしないと表示されないおわり */ 
ul.photos a.horizontal img,
ul.photos a.effectable img {
	padding: 15px 0px;
}
ul.photos a.vertical img {
	padding: 0px 15px;
}


#explain{text-align: left;}
    
    #contactexplain{
        float:left;
        text-align: left;}    

footer{ background-color: #696969;
        color:white;
        font-size:10px;
        margin-top: 10px;
        padding-top:40px;
        width:100%;
        text-align:center;
        float:left;}
footer section{
        width:70%;
        margin-top: ;
        margin-left:auto;
        margin-right: auto;
    }     
footer a{ color:white;} 
    
}








/* ########### 600px以上 ########### */
@media (min-width: 600px) {
    .contents{
        width:100%;
         margin:0 auto;}
    
    
/* ページのタイトル */     
.site h1 a	{color: #000000;
	text-decoration: none}

.site h1	{
    width:100%;
    margin: 0 auto;
	font-size: 25px}

.site img	{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    border: none}


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



/* トグルボタン */
#menubtn	{padding: 6px 12px;
	border: solid 1px #aaaaaa;
	border-radius: 5px;
	background-color: #ffffff;
	position: absolute;
	top: 20px;
	right: 15px;
	cursor: pointer}

#menubtn:hover	{background-color: #dddddd}

#menubtn:focus	{outline: none}

#menubtn i	{color: #888888;
	font-size: 18px}

#menubtn span	{display: inline-block;
	text-indent: -9999px}

/* ナビゲーションメニュー（縦並び） */
.menu	{display: none}

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

.menu li a	{display: block;
	padding: 5px;
	color: #000000;
	font-size: 14px;
	text-decoration: none}

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


/* BOX Aの下に罫線を挿入（コンテンツページのみ） */
.contents .boxA	{border-bottom: solid 1px #dddddd}

/* ボックスの左右 */
.boxA
	{width:100%;    
    padding-left: px;
	padding-right: 15px;
    padding-top: 20px;
	padding-bottom: 10px}
  /* ロゴをセンターに　 */  
.box1{width:100%;}
.site{width:100%;;
      margin-left:auto;
      margin-right:auto;}

/* サイト名 */ 
.site h10 {
	margin:0 auto 0 0;
	width:100%;
    text-align:center;
}
.site h10 img {
	width:100%;
	max-width:200px;
    /* ロゴから下の部分の幅の調節 */ 
    margin-bottom: 50px;
}    
       
    
 /* totalcontents全幅の制限 */
    #totalcontents{
        width:80%;
        margin-left: auto;
        margin-right: auto;
        max-width:800px;}
    
    
 /* 求人メッセージ */
    #message1{
        width:97%;
        margin-left: auto;
        margin-right: auto;
        text-align: left;}
    p#name{font-size: 20px;}
    p#sub{font-size: 12px;}
    
    #title{margin-top: 10px;
           margin-bottom: 10px;
           font-size: 16px;}
    
    #banner{width:100%;
            float:left;
            background-color: dimgray;
            font-size: 8px;
            color: white;
            margin-bottom: 70px;}
    #banner h3{
        width:20%;
        padding:4px;
        margin:4px;
        float:left;
        border: solid white 1px;}
    
    
    section#recruitcontent{
        width;100%;
        color:red;}
    
    
 /* 表のデザイン */  

table.officeexplain {
 width:100%;
 border-collapse: collapse; 
text-align: left; 
line-height: 1.5;
font-size:1６px;
} 

table.officeexplain th { 
 width: 25%; 
 padding: 10px; 
font-weight: bold; 
vertical-align: top; 
 border: 1px solid #ccc; 
} 
table.officeexplain td { 
width: 70%; 
padding: 10px; 
vertical-align: top; 
border: 1px solid #ccc;
} 
      
    
    
 #message2{
        width:97%;
        margin-top: 15px;
     margin-bottom: 40px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
        font-size: 14px;}  
    
 #message3{
        width:97%;
        margin-top: 15px;
     margin-bottom: 40px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
        font-size: 11px;}  
    
    
    
    
    
    
    
    
    
    /* 写真ギャラリー部分 */  
ul.photos {
	width: 520px;
	padding: 50px 0px;
	margin: 0px auto;
	text-align: center;
	list-style: none;
}
    ul.photos img{width:100%;}    
    
ul.photos li {
	display: inline;
	width: 160px;
	height: 160px;
}
    /* クリックしないと表示されない */ 
ul.photos li#displaynone {
	display: none;
	width: 160px;
	height: 160px;
}
    /* クリックしないと表示されないおわり */ 
ul.photos a.horizontal img,
ul.photos a.effectable img {
	padding: 15px 0px;
}
ul.photos a.vertical img {
	padding: 0px 15px;
}


#explain{text-align: left;}
    
    #contactexplain{
        float:left;
        text-align: left;}    

footer{ background-color: #696969;
        color:white;
        font-size:10px;
        margin-top: 10px;
        padding-top:40px;
        width:100%;
        text-align:center;
        float:left;}
footer section{
        width:70%;
        margin-top: ;
        margin-left:auto;
        margin-right: auto;
    }     
footer a{ color:white;} 
    
}


 
}