@charset "utf-8";

/* ########### 480px for iPhone ########### */
@media screen and (max-width: 480px) {
/*==========================================
 inner 100%
===========================================*/
.inner {max-width:92%;
margin: 0px auto 0px;
padding: 0px auto 0px;}

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

/*==========================================
 Header
===========================================*/
#header .inner {overflow: hidden; padding: 4px 0px 4px 0;}
#header .inner h1 {float: left;
padding-top: 2px;
padding-left: 2px;
font-size:12px;
font-weight:bold;
color:#ffffff;}
#header .inner ul {display: none; float: right;}

/*==========================================
 Change
===========================================*/
#change .inner {overflow: hidden; padding: 4px 0px 4px 0;}
#change .inner h2 {
margin-bottom: 4px;
padding-top: 2px;
padding-left: 2px;
font-size:12px; 
font-weight:bold;
color:#ffffff;}

#change .inner ul {display: none; margin: 0px 0px 0px 0px;}
#change .inner ul li a {display: block;
border-top:solid 1px #ffffff;
padding: 8px 8px;
font-weight:normal;
color:#ffffff;
text-decoration: none;}

#change .inner ul li a:hover,
#change .inner ul li a:active {background-color:#5288f7; color:#ffffff; text-decoration: none;}

/* トグルボタン */
#change .inner menubtn	{
padding: 6px 12px;
border: solid 1px #aaaaaa;
border-radius: 5px;
background-color: #ffffff;
cursor: pointer}

#change .inner menubtn:hover{background-color: #dddddd;}
#change .inner menubtn:focus{outline: none;}
#change .inner menubtn i{color: #888888; font-size: 18px;}
#change .inner menubtn span{display: inline-block; text-indent: -9999px;}

/*==========================================
 Contents
===========================================*/
#contents section#work article {text-align: center;
width: 98%;
float: left;
margin: 18px auto 18px;}

#contents section#news {width:100%; float:none; margin-top:38px;}
#contents section#information {width:100%; float:none; margin-top:38px;}


/*==========================================
 Footer
===========================================*/
footer {width: 100%; padding:8px 0 8px;}
footer .inner nav {margin: 18px 0px 18px;}
footer .inner nav ul{margin:0; padding:0; list-style: none;}
footer .inner nav ul li {margin:0; padding: 0;}

footer .inner nav ul li a{display: block;
margin:4px;
padding: 8px 8px;
border:solid 1px #cccccc;
color: #666666;
background-color:#f5f5f5;
text-decoration: none;}

footer .inner nav ul li a:hover,
footer .inner nav ul li a:active {background-color:#5288f7; color:#ffffff; text-decoration: none;}

#copyright {font-size: 8px;color: #ffffff;
text-align: center;
margin: 0 auto 88px;
padding: 18px 0px 18px 0px;}

.img-left h4{margin: 0 0 2px 0; font-size:13px; font-weight:bold; color:#006dd9;}
.img-left img{float: none;}

}
/* ###################### */




/* ########### 481px ～ 767px  for iPad ########### */
@media screen and (min-width:481px) and (max-width:768px) {
/*==========================================
 inner 92%
===========================================*/
.inner {max-width:92%;
margin: 0px auto 0px;
padding: 0px auto 0px;}

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

/*==========================================
 Header
===========================================*/
#header .inner {overflow: hidden; padding: 4px 0px 4px 0;}
#header .inner h1 {float: left;
padding-top: 2px;
padding-left: 2px;
font-size:16px;
font-weight:bold;
color:#ffffff;}

#header .inner ul {display: none; float: right;}

/*==========================================
 Change
===========================================*/
#change .inner {overflow: hidden; padding: 4px 0px 4px 0;}
#change .inner h2 {
margin-bottom: 4px;
padding-top: 2px;
padding-left: 2px;
font-size:16px; 
font-weight:bold;
color:#ffffff;}

#change .inner ul {display: none; margin: 0px 0px 0px 0px;}

#change .inner ul li a {display: block;
border-top:solid 1px #ffffff;
padding: 8px 8px;
font-weight:normal;
color:#ffffff;
text-decoration: none;}

#change .inner ul li a:hover,
#change .inner ul li a:active {background-color:#5288f7; color:#ffffff; text-decoration: none;}

/* トグルボタン */
#change .inner menubtn	{
padding: 6px 12px;
border: solid 1px #aaaaaa;
border-radius: 5px;
background-color: #ffffff;
cursor: pointer}

#change .inner menubtn:hover{background-color: #dddddd;}
#change .inner menubtn:focus{outline: none;}
#change .inner menubtn i{color: #888888; font-size: 18px;}
#change .inner menubtn span{display: inline-block; text-indent: -9999px;}


/*==========================================
 Contents
===========================================*/
#contents section#work article {text-align: center;
width: 50%;
float: left;
margin: 18px auto 18px;}

#contents section#work article img {width: 100%;
height: auto;
max-width: 230px;}

/* -----------------------------------------*/
#contents section#news {width:100%; float:none; margin-top:38px;}
#contents section#information {width:100%; float:none; margin-top:38px;}

/*==========================================
 Footer
===========================================*/
footer {width: 100%; padding:8px 0 8px;}
footer .inner nav {margin: 18px 0px 18px;}
footer .inner nav ul{margin:0; padding:0; list-style: none;}
footer .inner nav ul li {margin:0; padding: 0;}

footer .inner nav ul li a{display: block;
margin:4px;
padding: 8px 8px;
border:solid 1px #cccccc;
color: #666666;
background-color:#f5f5f5;
text-decoration: none;}

footer .inner nav ul li a:hover,
footer .inner nav ul li a:active {background-color:#5288f7; color:#ffffff; text-decoration: none;}

#copyright {font-size: 8px;color: #ffffff;
text-align: center;
margin: 0 auto 88px;
padding: 18px 0px 18px 0px;}


}
/* ###################### */




/* ########### 768px～  for PC ########### */
@media screen and (min-width:769px) {
/*==========================================
 Header
===========================================*/
#header .inner h1 {float: left;
line-height: 1.4;
padding-top: 14px;
padding-left: 2px;
font-size:18px; 
font-weight:bold;
color:#ffffff;}

#header .inner ul {float: right;
margin: 18px 0px 10px 48px;}

#header .inner ul li {float: left;
margin-right: 20px;}

#header .inner ul li a {
font-size:14px; 
font-weight:normal;
color:#ffffff;
text-decoration: none;}

#header .inner ul li a:hover,
#header .inner ul li a:active {color:#26ffff;}


/*==========================================
 Change
===========================================*/
#change .inner h2 {float: left;
padding-top: 14px;
padding-left: 2px;
font-size:18px; 
font-weight:bold;
color:#ffffff;}

#change .inner ul {float: right;
margin: 18px 0px 10px 48px;}

#change .inner ul li {float: left;
margin-right: 20px;}

#change .inner ul li a {
font-size:14px; 
font-weight:normal;
color:#ffffff;
text-decoration: none;}

#change .inner ul li a:hover,
#change .inner ul li a:active {color:#26ffff;}

#menubtn{display: none}


/*==========================================
 Footer
===========================================*/
footer {width: 100%;
padding:18px 0 18px;
background-color: #f5f5f5;
border-top:1px solid #cccccc;}

footer nav {margin: 0px 2px 18px;}

footer nav li {display: inline-block;
padding: 0px 18px 4px 4px;
border-left: solid 1px #dddddd;}

footer nav a:link,
footer nav a:visited {color:#666666; text-decoration:none;}

footer nav a:hover,
footer nav a:active {color:#5288f7; text-decoration: underline;}

#copyright {margin: 0; padding: 18px 0px 88px 0px;}

}
/* ###################### */