@charset "utf-8";

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

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

/*==========================================
 Mainvisual
===========================================*/
#mainvisual {width: 100%;
margin: 0;
padding: 4px 0 4px;
background-color: #f1f1f3;
border-bottom:1px solid #cccccc;
background-image:url('../images/mainvisual_bkg.jpg');
background-size:contain;
background-repeat:no-repeat;
background-position:top right;}

#mainvisual h2 {font-size: 12px;
font-weight:normal;
color: #ffffff;
text-shadow: 1px 1px 2px #000000;}


/*==========================================
 Header
===========================================*/
#header .inner h1 {float: left;
padding-top: 2px;
padding-left: 2px;
font-family: 'Crimson Text', serif;
font-size:16px;
font-weight:bold;
color:#ffffff;}

#header .inner img{margin: 0 4px 0 0; vertical-align:bottom;}
#header .inner ul {display: none; float: right;}

/*==========================================
 Change
===========================================*/
#change .inner h1 {
margin-bottom: 4px;
padding-top: 2px;
padding-left: 2px;
font-family: 'Crimson Text', serif;
font-size:16px; 
font-weight:bold;
color:#ffffff;}

#change .inner img{margin: 0 4px 0 0; vertical-align:bottom;}
#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-family: 'Crimson Text', serif;
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;}


/*==========================================
 Article contents
===========================================*/
#contents {width: 100%; margin: 0 auto 18px; padding: 0 auto; }
#contents .col-left {width: 100%; float:none;}
#contents .col-right {width: 100%; float:none;}


/*==========================================
 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;
padding: 18px 0px 48px 0px;}


/*==========================================
 page-top
===========================================*/
#page-top {position: fixed;
bottom: 4px;
right: 4px;
font-size: 12px;}

#page-top a {background: #0d5287;
text-decoration: none;
color: #ffffff;
width: 100px;
padding: 8px 0;
text-align: center;
display: block;
border-radius: 5px;}

#page-top a:hover {text-decoration: none; background: #cccccc;}

.img-left {float: none; }
.img-right {float: none; }

/*==========================================
 table
===========================================*/

#table{display: block;}
#table thead{display: none;}
#table tbody{display: block;}
#table tbody tr{display: block;margin-bottom: 4px;}

#table tbody th,
#table tbody td{display: list-item;border: none;}

#table tbody th{
margin-bottom: 2px;
list-style-type: none;
color: #ffffff;
background: #2596ad;}

#table tbody td{
margin: 0px 0px 8px 18px;
padding: 0;}

#table tbody td:nth-of-type(1):before { content: "[単位]"; }
#table tbody td:nth-of-type(2):before { content: "[価格]"; }
#table tbody td:nth-of-type(3):before { content: "[内容]"; }

/* table_info ============================*/

#table_info{display: block;}
#table_info thead{display: none;}
#table_info tbody{display: block;}
#table_info tbody tr{display: block;margin-bottom: 4px;}

#table_info tbody th,
#table_info tbody td{display: list-item;border: none;}

#table_info tbody th{
margin-bottom: 2px;
list-style-type: none;
color: #333333;
background: #f5f5f5;}

#table_info tbody td{
margin: 0px 0px 18px 18px;
padding: 0;}

#table_info tbody td:nth-of-type(1):before { content: ""; }

/*==========================================
 form
===========================================*/

.container {margin: 4px 1px;}

form#mailformpro {
margin: 2px 0px;
padding: 10px 0px;}

form#mailformpro dl dt {
float: left;
width: 100%;
clear: both;
font-size: 12px;
padding: 8px 0px;
text-align: left;
border-top: solid 1px #dbdbea;
margin: 0px;}

form#mailformpro dl dd {
border-top: solid 1px #dbdbea;
margin: 0px;
padding: 18px 0px 18px 0px;
font-size: 12px;
line-height: 1.7em;
text-align: left;}

form#mailformpro dl dd ul,form#mailformpro dl dd ol {
margin: 0px;
padding: 0px;}

form#mailformpro dl dd ul li,form#mailformpro dl dd ol li {
margin: 0px;
padding: 0px;
list-style: none;}

.must {
display: block;
background-color: #C00000;
padding: 2px 2px;
font-size: 11px;
color: #ffffff;
float: left;
margin: 0px 2px;
border-radius: 3px;
}

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




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

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

/*==========================================
 Mainvisual
===========================================*/
#mainvisual {width: 100%;
margin: 0;
padding: 8px 0 8px;
background-color: #f1f1f3;
border-bottom:1px solid #cccccc;
background-image:url('../images/mainvisual_bkg.jpg');
background-size:contain;
background-repeat:no-repeat;
background-position:top right;}

#mainvisual h2 {font-size: 12px;
font-weight:normal;
color: #ffffff;
text-shadow: 1px 1px 2px #000000;}


/*==========================================
 Header
===========================================*/
#header .inner h1 {float: left;
padding-top: 2px;
padding-left: 2px;
font-family: 'Crimson Text', serif;
font-size:16px;
font-weight:bold;
color:#ffffff;}

#header .inner img{margin: 0 4px 0 0; vertical-align:bottom;}
#header .inner ul {display: none; float: right;}

/*==========================================
 Change
===========================================*/
#change .inner h1 {
margin-bottom: 4px;
padding-top: 2px;
padding-left: 2px;
font-family: 'Crimson Text', serif;
font-size:16px; 
font-weight:bold;
color:#ffffff;}

#change .inner img{margin: 0 4px 0 0; vertical-align:bottom;}
#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-family: 'Crimson Text', serif;
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;}


/*==========================================
 Article contents
===========================================*/
#contents {width: 100%; margin: 0 auto 18px; padding: 0 auto; }
#contents .col-left {width: 100%; float:none;}
#contents .col-right {width: 100%; float:none;}


/*==========================================
 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;
padding: 18px 0px 48px 0px;}


/*==========================================
 page-top
===========================================*/
#page-top {position: fixed;
bottom: 4px;
right: 4px;
font-size: 12px;}

#page-top a {background: #0d5287;
text-decoration: none;
color: #ffffff;
width: 100px;
padding: 8px 0;
text-align: center;
display: block;
border-radius: 5px;}

#page-top a:hover {text-decoration: none; background: #cccccc;}


/*==========================================
 table
===========================================*/

#table{display: block;}
#table thead{display: none;}
#table tbody{display: block;}
#table tbody tr{display: block;margin-bottom: 4px;}

#table tbody th,
#table tbody td{display: list-item;border: none;}

#table tbody th{
margin-bottom: 2px;
list-style-type: none;
color: #ffffff;
background: #2596ad;}

#table tbody td{
margin: 0px 0px 8px 18px;
padding: 0;}

#table tbody td:nth-of-type(1):before { content: "[単位]"; }
#table tbody td:nth-of-type(2):before { content: "[価格]"; }
#table tbody td:nth-of-type(3):before { content: "[内容]"; }


/*==========================================
 form
===========================================*/
.container {margin: 4px 1px;}

form#mailformpro {
margin: 2px 0px;
padding: 10px 0px;}

form#mailformpro dl dt {
float: left;
width: 100%;
clear: both;
font-size: 12px;
padding: 8px 0px;
text-align: left;
border-top: solid 1px #dbdbea;
margin: 0px;}

form#mailformpro dl dd {
border-top: solid 1px #dbdbea;
margin: 0px;
padding: 18px 0px 18px 0px;
font-size: 12px;
line-height: 1.7em;
text-align: left;}

form#mailformpro dl dd ul,form#mailformpro dl dd ol {
margin: 0px;
padding: 0px;}

form#mailformpro dl dd ul li,form#mailformpro dl dd ol li {
margin: 0px;
padding: 0px;
list-style: none;}

.must {
display: block;
background-color: #C00000;
padding: 2px 2px;
font-size: 11px;
color: #ffffff;
float: left;
margin: 0px 2px;
border-radius: 3px;
}


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




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

#header .inner img{margin: 0 4px 0 0; vertical-align:top;}

#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-family: 'Crimson Text', serif;
font-size:14px; 
font-weight:normal;
color:#ffffff;
text-decoration: none;}

#header .inner ul li a:hover,
#header .inner ul li a:active {color:#59b200;}


/*==========================================
 Change
===========================================*/
#change .inner h1 {float: left;
padding-top: 14px;
padding-left: 2px;
font-family: 'Crimson Text', serif;
font-size:18px; 
font-weight:bold;
color:#ffffff;}

#change .inner img{margin: 0 4px 0 0; vertical-align:top;}

#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-family: 'Crimson Text', serif;
font-size:14px; 
font-weight:normal;
color:#ffffff;
text-decoration: none;}

#change .inner ul li a:hover,
#change .inner ul li a:active {color:#59b200;}


#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 0px 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:#0d5287; text-decoration: underline;}

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

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