@charset "UTF-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}

/*
Dreamweaver Fluid Grid Properties
----------------------------------
dw-num-cols-mobile:		4;
dw-num-cols-tablet:		8;
dw-num-cols-desktop:	12;
dw-gutter-percentage:	25;

Inspiration from "Responsive Web Design" by Ethan Marcotte 
http://www.alistapart.com/articles/responsive-web-design

and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */

.grid{
width: 100%;
clear: none;
float: none;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serifl;
color:#333;
font-size:100%;
}

a:hover img{
opacity: 0.6;
filter: alpha(opacity=60);
-moz-opacity:0.6;
}

address{
font-style:normal;
font-size:90%;
}
.copy{
margin-top:30px;
font-size:80%;
padding-top:20px;
border-top:1px solid #fff;
}
.contents{
max-width:1200px;
margin:0 auto;
padding:0 20px;
text-align:center;
}
.contents p{
text-align:left;
}
h1{
margin:50px  auto;
padding:15px 0;
text-align:center;
font-weight:400;
font-size:180%;
}
h2{
margin:50px auto;
text-align:center;
font-size:150%;
}
.box100{
text-align:center;
width:100%;
}
.box100 p{
text-align:left;
}
.box50{
text-align:center;
display:inline-block;
width:100%;
vertical-align:top;
}
.center{
text-align:center;
}

.pc{
display:none;
}
.sp{
display:block;
}
table{
padding:0;
width:100%;
margin:30px 0;
}
th{
font-weight:400;
padding:20px;
border:1px solid #ccc;
background-color:#f5f5dc;
}
td{
padding:20px 0 20px 10px;
border:1px solid #ccc;
text-align:left;
}
.contents ul{
margin:50px auto;
}
.contents li{
text-align:left;
margin-bottom:20px;
}
.space50{
margin:30px 0 100px;
}
.tel{
margin:30px;
text-align:center;
}
.tel h3{
display:inline-block;
padding:10px 20px;
font-size:150%;
letter-spacing:5px;
}
.tel p{
display:inline-block;
}
hr{
border-width: 3px 0 0 0;
border-style: double;
border-color:#efefef;
width: 80%;
margin:50px auto;
}
.renkyu-table{


overflow-x: auto;
}
.tate-table {
  border-collapse: collapse;
  width: 100%; 
}

.tate-header,
.tate-cell {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
  vertical-align: middle;
}
.tate-cell span{
  display: inline-block;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
  vertical-align: middle;
  white-space: nowrap;
}
.red{
color: #cc0000;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

.grid {
width: 100%;
clear: none;
float: none;
margin-left: auto;
padding:0;
}

}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {

.grid {
width:100%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
padding:0;
}
.contents{
max-width:1200px;
margin:0 auto;
padding:50px 20px;
text-align:center;
}
.box50{
width:47%;
box-sizing:border-box;
text-align:center;
display:inline-block;
margin:1%;
}
.tel h3{
width:50%;
display:inline-block;
padding:10px 30px;
font-size:180%;
letter-spacing:10px;
}
.pc{
display:block;
}
.sp{
display:none;
}
table{
padding:0;
width:100%;
margin:30px 0 50px;
}
td{
padding:20px 0 20px 50px;
border:1px solid #ccc;
text-align:left;
}
hr{
border-width: 3px 0 0 0;
border-style: double;
border-color:#efefef;
width: 80%;
margin:80px auto;
}
}