@charset "utf-8";



html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img{border: 0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
/* -------------------------------------------------------------- */

body{
color:#fff;
font:12px verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
line-height:1.5;
background:#111;
-webkit-text-size-adjust: none;
}




/* リンク設定
------------------------------------------------------------*/
a{color:#fff;text-decoration:none;}
a:hover{color:#515353;}
a:active, a:focus{outline:0;}


/* 全体
------------------------------------------------------------*/
#wrapper,#header,#footer{
margin:0 auto;
padding:0 1%;
width:98%;
position:relative;
background:#111;
/*box-shadow:1px 2px 3px #555;*/
}

.inner{
margin:0 auto;
width:100%;
}

.gridWrapper #category h2{
font-size:15px;
padding:10px 10px 10px 10px;
font-weight: 600;
color:#fff;
	background:url(images/category_bg.png) no-repeat;
margin: 0px 0px 10px 0px;
width:;
}

.grid .readmore{
text-align: right;
margin-top:10px; 
} 

.grid .readmore0{
text-align: right;
margin-top:10px;
} 

.readmore0 a{
color: #fff;
}

.grid .readmoreyyy{
text-align: right;
margin-top:10px;
} 

.readmoreyyy a{
color: #fff33f;
}

.grid .readmore_sc{
text-align: right;
margin-top:10px;
} 

.readmore_sc a{
color: #00afec;
}


/* パンくずリスト
------------------------------------------------------------*/
.breadcrumb {
float: left;
margin: 20px 0px 0px 0px;
padding-left: 0px;
width: 100%;
}

.breadcrumb li{
  display:inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
}

.breadcrumb li:after{/* ▶を表示*/
  font-family: FontAwesome;
  content: '＞';
  padding: 0 3px;
  color: silver;
}

.breadcrumb li:last-child:after{
  content: '';
}

.breadcrumb li a {
    text-decoration: none;
    color: #888;
}

.breadcrumb li:first-child a:before{/*家アイコン*/
  font-family: FontAwesome;
  content: '＞';
  font-weight: normal;
  font-size: 1.1em;
  color: #f3948f;
}

.breadcrumb li a:hover {
    text-decoration: underline;
}

/* お知らせ、店舗情報 */
#news dl, #info dl {
  margin-left: 20px;
  margin-bottom: 10px;
  margin-top: -10px;
}
#news dt, #news dd,
#info dt, #info dd {
  line-height: 1.8; /* 行の高さを揃える */
}
#news dt, #info dt {
  width: 8em;
  float: left;
}
#news dd, #info dd {
  margin-left: 8em;
}

#news h2{
    font-size: 15px;
  margin-left: 20px;
  margin-bottom: 10px;
}
#news a{
    color: yellow;
   text-decoration: underline;
}

/*************
/* ヘッダー
*************/
#header{overflow:hidden;}
* html #header{height:1%;}


/*************
/* ロゴ
*************/
#header .logo{
width: 100%;
float:left;
text-align:;
background: #fff;
}

.logo img{
padding: 13px;
}

/**************************
/* メイン画像（トップページ+サブページ）
**************************/
#mainBanner{
margin:0 auto 30px;
padding:0px 0 0;
width:100%;
position:relative;
line-height:0;
background:#000;
}

#mainBanner img{
max-width:100%;
height:auto;
box-shadow:0 0 4px rgba(0,0,0,.3);
-webkit-box-shadow:0 0 4px rgba(0,0,0,.3);
}

.slogan{
position:absolute;
max-width:100%;
height:auto;
bottom:0;
right:0;
padding:5px 10px;
line-height:1.4;
z-index:100;
}

.slogan h2{
text-align:left;
padding-bottom:5px;
color:#fff;
font-size:20px;
}

.slogan h3{
color:#fff;
font-size:14px;
}

/* サブページ スローガンの背景・黒*/
.subImg .slogan{background:url(images/tp.png);}

.subImg .slogan h2{color:#333;}
.subImg .slogan h3{color:#666;}


/**************************
/* グリッド
**************************/
.gridWrapper{
padding-bottom:0px;
overflow: hidden;
}

* html .gridWrapper{height:1%;}
	
.grid{
float:left;
background:#222;
border-bottom:4px solid #555;
box-shadow:0 0 3px rgba(0,0,0,.2);
-webkit-box-shadow:0 0 3px rgba(0,0,0,.2);
}

.grid h3{
font-size:12px;
padding:5px 10px 5px 10px;
text-align:left;
border-bottom:1px solid #ff0;
border-top:0px solid #f00;
}

.grid p{
padding:5px 10px;
}

.grid .price{
    text-align: right;
    padding:0px -5px;
}

.grid .textarea{
    margin: 10px -5px;
}

.gridWrapper img{
max-width:95%;
height:auto;
}

/* フッター内のグリッド(3カラム) */
#footer .grid{
color:#fff;
border:0;
background:transparent;
box-shadow:none;
-webkit-box-shadow:none;
}

#footer .grid p{padding:0;}


/*************
メイン コンテンツ
*************/
section.content{
padding:19px;
margin:10px 0px 0px 0px;
background:#fff;
overflow:hidden;
font-size:14px;
box-shadow:0 0 3px rgba(0,0,0,.2);
-webkit-box-shadow:0 0 3px rgba(0,0,0,.2);
}

* html section.content{height:1%;}

section.content p{margin-bottom:5px;}

h3.heading{
padding:10px;
margin-bottom:15px;
font-size:16px;
border:0px solid #515353;
color:#fff;
background:#58ACFA;
}

section.content img{
max-width:100%;
height:auto;
}

.alignleft{
float:left;
clear:left;
margin:3px 10px 10px 0;
}

.alignright{
float:right;
clear:right;
margin:3px 0 10px 10px;
}

.rtype{
float:right;
clear:right;
margin:3px 0 10px 10px;
}

.aligncenter{
text-align: center;
margin:3px 10px 10px 0;
}

/*
img.frame,#gallery img,p.img img{
border:4px solid #fff;
box-shadow:0 0 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.5);
}
*/

#gallery .grid{
padding:5px 0px 0px 0px;
border:0;
box-shadow:none;
-webkit-box-shadow:none;
}

p.img{
margin:10px 0 0;
text-align:center;
}


/*************
テーブル
*************/
table.table{
border-collapse:collapse;
width:100%;
margin:10px auto;
}

table.table th,table.table td{
padding:5px;
border:1px solid #515353;
}

table.table th{
width: 30%;
text-align: center;
vertical-align:middle;
font-weight:bold;
letter-spacing:1px;
white-space:nowrap;
color:#fff;
background:#797c7b;
border-left:#515353 5px solid;
}

table.table td{
padding-left: 10px;
width: 70%;
letter-spacing:1px;
border-left:#515353 5px solid;
border-right:#515353 5px solid;
}




/*************
サブ（フッター前）コンテンツ
*************/
#sub ul{padding:10px;}

#sub li{
margin-bottom:10px;
padding-bottom:10px;
border-bottom:1px dotted #ccc;
}

#sub li:last-child{
border:0;
margin-bottom:0;
}

#sub li a{display:block;}

#sub ul.list{padding-bottom:2px;}

#sub ul.list li{
clear:both;
margin-bottom:5px;
padding:4px 0;
overflow:hidden;
}

* html #sub ul.list li{height:1%;}

#sub ul.list li img{
float:left;
margin-right:10px;
border:1px solid #ccc;
}

#sub ul.list li{
font-size:12px;
line-height:1.35;
}


/*************
/* フッター
*************/
#footer{
clear:both;
padding:20px 0px;
overflow:hidden;
background:#222;
}

* html #footer{height:1%;}

.tel strong{
font-size:30px;
}

#footer a{color:#fff;}
#footer a:hover{color:#ccc;}

#footer .copyright{font-size:11px;}

/* PC用 */
@media only screen and (min-width:960px){	
	#wrapper,#header,.inner,#footer{
	width:940px;
	padding:0 10px;
	}
	
	#header{margin-top:0px;}
	#wrapper{padding-bottom:20px;}
	#footer{
    /* width: 100%;*/
    padding:20px 10px 0px;
    }
    
/* 画像切り替え用 */    
.pc {
    display: block !important;
    margin-top: 10px;
    }

.sp { display: none !important; }
.sp2 { display: none !important; }

    /* 画像切り替え用 */    
/*    
  nav div.panel{
	display:inline!important;
	float:left;
    margin-bottom:5px;
	}

	a#menu{display:none;}

	nav#mainNav ul{
	float:right;
	margin-right:-10px;
	overflow:hidden;
	}

	* html nav#mainNav ul{height:1%;}

	nav#mainNav ul li{
  display: inline-block;
  vertical-align: middle;
  width: calc(100% / 5.);
    }
*/ 
    
/* ナビメニュー1 */
    
	nav#mainNav ul a{
	font-size:15px;
	display:block;
    text-align: center;
	padding:10px 22px 10px 20px;
	color:#fff;
	border-right:0px solid #fff;
	border-bottom:0px solid #111;
	background:#000;
    margin: 0px 0px 0px 0px;
	}

	nav#mainNav ul a span{font-size:11px;}
    
  nav div.panel{
	display:inline!important;
	float:left;
    margin-bottom:5px;
	}

	a#menu{display:none;}

	nav#mainNav ul{
	float:right;
	margin-right:-10px;
	overflow:hidden;
	}

	* html nav#mainNav ul{height:1%;}

	nav#mainNav ul li{
display: inline-block;
vertical-align: middle;
width: calc(100% / 5.);
margin-bottom: 20px;
    }

	nav#mainNav ul li.active a,nav#mainNav ul a:hover{
    text-decoration:underline;
	}

	nav#mainNav ul a span{font-size:11px;}
    
/* ナビメニュー2 */
    #mainNav2{
        font-size: 0px;
    }
    
	nav#mainNav2 ul a{
	font-size:15px;
	display:block;
	padding:5px 32px;
	color:#fff;
	border-right:0px dashed #888;
	border-bottom:0px solid #999;
    border: solid 0.5px #fff;
	background:;
    margin: 0px 4.4px 0px 0px;
    text-align: center;
	}

	nav#mainNav2 ul li.active a,nav#mainNav ul a:hover{
	text-decoration: underline;
	}

	nav#mainNav2 ul a span{font-size:11px;}
    
  nav div.panel{
	display:inline!important;
	float:left;
    margin-bottom:0px;
	}

	a#menu{display:none;}

	nav#mainNav2 ul{
	float:right;
	margin-right: 0px;
	overflow:hidden;
	}

	* html nav#mainNav2 ul{height:1%;}

	nav#mainNav2 ul li{
  display: inline-block;
  vertical-align: middle;
  width: calc(100% / 6.);
  margin: 0px 0px 0px 0px;
    }
    

	/* グリッド全体 */
	.gridWrapper{
	width:940px;
	margin:0 0 0 0px;
	}
	
	/* グリッド共通 ベース:トップページ4カラム */
	.grid{
	float:left;
	width:220px;
	margin-left:12px;
    margin-bottom:20px;
	}
	
	/* サブコンテンツ + フッター グリッド(3カラム) */
	#sub .grid, #footer .grid{
	width:300px;
	}
	
	/* ギャラリー グリッド(4カラム) */
	#gallery{
	width:920px;
	}
	
  #gallery .grid{
	width:210px;
	}
}

/* テキスト */
.descriptbox{
    float: right;
    max-width: 28%;
    margin: 0px 5px 0px 0px;
    letter-spacing: 1px;
}

.descriptbox .descriptA{
    font-size: 14px;
    border-bottom: 1px dotted #fff;
}

.descriptbox .descriptB{
    font-size: 12px;
}

.descriptbox .select{
    float: right;
    margin: 10px 0px 0px 0px;
}

.descriptbox .descriptC a{
    float: right;
    margin: 0px 0px 0px 0px;
    font-size: 15px;
    color: #888;
}

    /* slider */
.carousel {
    float: left;
  position:relative;
  width:70%;
  border:0px solid #fff;
  margin:0px 0px 0px 20px;
  box-shadow:0px 0px 4px #000;
}
.carousel > img {
  display:none;
  width:100%;
}
.carousel > input {
  position:absolute;
  left:-9999px;
}
.carousel > input:checked + label + img {
  display:block;
}

.carousel > label,
.carousel > input:checked ~ label ~ label ~ label ~ label {
  display:none;
}
.carousel > input:checked + label {
  display:block;
  left:0;
}
.carousel > input:checked ~ label ~ label ~ label {
  display:block;
  right:0;
}

.carousel > label {
  position: absolute;
  top:0;
  width:25%;
  height:100%;
  visibility:hidden;
}
.carousel > label:before {
  content:'';
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  visibility:visible;
}
.carousel > label:after {
  display:block;
  position:absolute;
  top:50%;
  width:25px;
  height:25px;
  line-height:22px;
  margin:-15px 10px 0 10px;
  background-color:black;
  color:white;
  font-family:'Arial';
  font-weight:bold;
  font-size:18px;
  text-align:center;
  visibility:hidden;
  border:2px solid white;
  border-radius:20px;
  box-shadow:0 3px 4px black;
}
.carousel > label:hover:after {
  visibility:visible;
}

.carousel > input:checked + label:after {
  left:0;
  content:'\00AB';
}
.carousel > input:checked ~ label ~ label ~ label:after {
  right:0;
  content:'\00BB';
}

/* 画像一覧 */
.wrap{
    float: left;
 width:70%;
 margin:0px 0px 0px 10px; 
 text-align:center;
}
.mainImage img{
 text-align:center;
}

.ps{
    position: absolute;
    top: 10px;
    left: 590px;
    width: 320px;
    height: 270px;
    padding: 5px 5px 5px 5px;
    line-height: 18px;
    text-align: left;
}
.title{
    font-size: 2em;
    margin: 0.3em 0 0.3em 0;
    color: #000;
}

.thumbnails{
float: left;
    position: relative;
 width:20%;
 margin:0px 0px 5px 16px;
    text-align: left;
}
.thumbnails img{
    float: left;
 width:100%;
}

.thumbnails p{
    float: left;
    position:absolute;/*絶対配置*/
    color: white;/*文字は白に*/
    font-size: 15px;
    top: 35px;
    left: 0px;
}


    .smallcategory{
        font-size:17px;
        font-weight: 500;
        padding: 0px 10px 0px 10px;
        color:#fff;
        margin: 0px 0px 10px 0px;
        border-bottom: dotted 2px #fff;
    }


/* モニター幅940px以下 */
@media only screen and (max-width:940px){
	*{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
	}
    
    .smallcategory{
        font-size:17px;
        font-weight: 500;
        padding: 0px 0px 0px 10px;
        color:#fff;
        margin: 0px 0px 5px 0px;
        border-bottom: dotted 2px #fff;
    }
    
.thumbnails{
position: relative;
 width:25%;
 margin:0 auto;
}

.thumbnails img{
    float:left;
    width:100%;
    margin: 0px 0px 5px 0px;
}

.thumbnails p{
    position: absolute;
    top: 60%;
    color: white;/*文字は白に*/
    font-size: 15px;  
}
    
/* 画像一覧 */
.wrap{
    float: left;
 width:100%;
 margin:0 auto; 
 text-align:center;
}
.mainImage img{
 text-align:center;
}
    
.ps{
    position: static;
    width: auto;
    height: auto;
    margin: -30px 0px 10px 0px;
    padding: 5px 5px 5px 5px;
    line-height: 18px;
    text-align: left;
}
.title{
    color: #999;
}
    
    
.gridWrapper #category h2{
font-size:16px;
font-weight: 600;
padding:10px 10px 10px 10px;
color:#fff;
	background:url(images/category_bg.png) no-repeat;
margin: 0px 0px 10px 0px;
width:;
}
    
.gridWrapper .grid{
margin-bottom: 20px;
}
    
/* テキスト */
.descriptbox{
    float: inherit;
    max-width: 100%;
    margin: 10px 0px 0px -10px;
    
}

.descriptbox .descriptA{
    float: left;
    width: 100%;
    font-size: 14px;
    margin:10px 0px 0px 3%;
    border-bottom: 1px dotted #fff;
}

.descriptbox .descriptB{
    float: left;
    width: 100%;
    margin: 10px 0px 0px 3%;
    font-size: 12px;
    }

.descriptbox .select{
    float: left;
    text-align: right;
    width: 98%;
    margin: 10px 0px 0px 0px;
}

.descriptbox .descriptC a{
    float: left;
    text-align: right;
    width: 98%;
    margin: 0px 0px 10px 0px;
    font-size: 15px;
    color: #888;
}


    /* slider */
.carousel {
    float: left;
  position:relative;
  width:98%;
  border:0px solid #fff;
  margin:0px  3.5% ;
  box-shadow:0px 0px 4px #000;
}
.carousel > img {
  display:none;
  width:100%;
}
.carousel > input {
  position:absolute;
  left:-9999px;
}
.carousel > input:checked + label + img {
  display:block;
}

.carousel > label,
.carousel > input:checked ~ label ~ label ~ label ~ label {
  display:none;
}
.carousel > input:checked + label {
  display:block;
  left:0;
}
.carousel > input:checked ~ label ~ label ~ label {
  display:block;
  right:0;
}

.carousel > label {
  position: absolute;
  top:0;
  width:25%;
  height:100%;
  visibility:hidden;
}
.carousel > label:before {
  content:'';
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  visibility:visible;
}
.carousel > label:after {
  display:block;
  position:absolute;
  top:50%;
  width:25px;
  height:25px;
  line-height:22px;
  margin:-15px 10px 0 10px;
  background-color:black;
  color:white;
  font-family:'Arial';
  font-weight:bold;
  font-size:18px;
  text-align:center;
  visibility:hidden;
  border:2px solid white;
  border-radius:20px;
  box-shadow:0 3px 4px black;
}
.carousel > label:hover:after {
  visibility:visible;
}

.carousel > input:checked + label:after {
  left:0;
  content:'\00AB';
}
.carousel > input:checked ~ label ~ label ~ label:after {
  right:0;
  content:'\00BB';
}
    
/* パンくずリスト
------------------------------------------------------------*/
.breadcrumb {
float: none;
margin: 0px 0px 0px 0px;
padding-left: 0px;
}

.breadcrumb li{
  display:inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
}

.breadcrumb li:after{/* ▶を表示*/
  font-family: FontAwesome;
  content: '＞';
  padding: 0 3px;
  color: silver;
}

.breadcrumb li:last-child:after{
  content: '';
}

.breadcrumb li a {
    text-decoration: none;
    color: #888;
}

.breadcrumb li:first-child a:before{/*家アイコン*/
  font-family: FontAwesome;
  content: '＞';
  font-weight: normal;
  font-size: 1.1em;
  color: #f3948f;
}

.breadcrumb li a:hover {
    text-decoration: underline;
}
	
/* 画像切り替え用 */    
.pc {
    display: none !important;
    text-align: center;
    }
.sp { display: block !important;}
.sp2 {
    display: inline-flex !important;
    text-align: center;
    max-width: 100%;
    margin-top: -10px
    }

    /* 画像切り替え用 */   
    
	h1 p.inner{text-align:center;}
	
	#header .logo{
	float:none;
	text-align:center;
	}
    
    #header .logo img{
    width: ;
    height: auto;
    }

/* ナビメニュー1 */
    
  nav#mainNav{
	clear:both;
	width:100%;
	margin:0px 0px 5px 0px;
	padding:0;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1, #797c7b), color-stop(0.00, #515353));
	background: -webkit-linear-gradient(left, #222 0%, #999 100%);
	background: -moz-linear-gradient(left, #222 0%, #999 100%);
	background: -o-linear-gradient(left, #222 0%, #999 100%);
	background: -ms-linear-gradient(left, #222 0%, #999 100%);
	background: linear-gradient(left, #222 0%, #999 100%);
	}

	nav#mainNav a.menu{
	width:100%;
	display:block;
	height:40px;
	line-height:40px;
	font-weight: bold;
	text-align:left;
	color:#fff;
	}

	nav#mainNav a#menu span{padding-left:10px;}
	nav#mainNav a.menu span:before{content: "→ ";}
	nav#mainNav a.menuOpen span:before{content: "↓ ";}

	nav#mainNav a#menu:hover{cursor:pointer;}

	nav .panel{
	display: none;
	width:100%;
	position: relative;
	right: 0;
	top:0;
	z-index: 1;
	}

	nav#mainNav ul li{
	float: none;
	clear:both;
	width:100%;
	height:auto;
	line-height:1.2;
	}

	nav#mainNav ul li a,nav#mainNav ul li.current-menu-item li a{
	display: block;
	padding:15px 10px;
	text-align:left;
	border-bottom:1px dashed #fff;
	color:#fff;
	}
    
	
	nav#mainNav ul li a span{padding-left:10px;}
	
	nav#mainNav ul li:first-child a{
	border-top:1px dashed #fff;
	}
	
	nav#mainNav ul li:last-child a{border:0;}
	
	nav#mainNav ul li.active a,nav#mainNav ul li a:hover{background:#515353;}

	nav div.panel{float:none;}
    
/* ナビメニュー2 */
    
  nav#mainNav2{
	clear:both;
	width:100%;
	margin:0px 0px 5px 0px;
	padding:0;
    background: #fff;
/*	background: -webkit-gradient(linear, left top, left bottom, color-stop(1, #797c7b), color-stop(0.00, #515353));
	background: -webkit-linear-gradient(left, #222 0%, #999 100%);
	background: -moz-linear-gradient(left, #222 0%, #999 100%);
	background: -o-linear-gradient(left, #222 0%, #999 100%);
	background: -ms-linear-gradient(left, #222 0%, #999 100%);
	background: linear-gradient(left, #222 0%, #999 100%);
*/
    }

	nav#mainNav2 a.menu{
	width:100%;
	display:block;
	height:40px;
	line-height:40px;
	font-weight: bold;
	text-align:left;
	color:#111;
	}

	nav#mainNav2 a#menu span{padding-left:10px;}
	nav#mainNav2 a.menu span:before{content: "→ ";}
	nav#mainNav2 a.menuOpen span:before{content: "↓ ";}

	nav#mainNav2 a#menu:hover{cursor:pointer;}

	nav .panel{
	display: none;
	width:100%;
	position: relative;
	right: 0;
	top:0;
	z-index: 1;
	}

	nav#mainNav2 ul li{
	float: none;
	clear:both;
	width:100%;
	height:auto;
	line-height:1.2;
	}

	nav#mainNav2 ul li a,nav#mainNav2 ul li.current-menu-item li a{
	display: block;
	padding:10px 10px;
	text-align:left;
	border-bottom:1px dashed #222;
	color:#111;
	background:#fff;
	}
	
	nav#mainNav2 ul li a span{
    padding-left:0px;
    margin-top: 5px;
    font-size: 10px;
    border-top:0px dashed #333;
    }
	
	nav#mainNav2 ul li:first-child a{
	border-top:1px dashed #fff;
	}
	
	nav#mainNav2 ul li:last-child a{border:0;}
	
	nav#mainNav2 ul li.active a,nav#mainNav2 ul li a:hover{background:#515353;}

	nav div.panel{float:none;}
    
/**/
	
	.grid{
	float:left;
	width:48%;
	margin:10px 1% 0;
	}
	
	.grid img{
	margin-right:0px;
    margin-bottom:10px;
	}
	
    .grid h3{
        font-size:12px;
        padding:0px 5px 0px 5px;
        text-align:left;
border-bottom:1px solid #ff0;
border-top:0px solid #f00;
    }
    
	#gallery{padding-left:1px;}
	
	#gallery .grid{
	width:23%;
	margin:0 2% 0 0;
	padding:0;
	}
	
	#gallery .grid img{
	float:none;
	margin:0;
	}
	
	#sub .grid{
	width:32%;
	margin:10px 1%;
	}
	
	#sub .grid:first-child{
	margin-left:0;
	}
	
	#sub .grid:last-child{
	margin-right:0;
	}
	
	section.content{margin-bottom:0;}
	
	#footer .grid{
	float:none;
	width:100%;
	text-align:center;
	}
	
	#footer .grid:last-child{
    padding-top:20px;
    }
    
    .rtype{
        float:none;
        text-align: center;
        margin:3px 0 10px 10px;
    }
    
}


/* iPad 縦 */
@media only screen and (max-width:768px){
	#sub .grid{
	float:none;
	width:98%;
	margin-left:1%;
	}
    
.thumbnails{
position: relative;
 width:25%;
 margin:0 auto;
}

.thumbnails img{
    float:left;
    width:100%;
    margin: 0px 0px 5px 0px;
}

.thumbnails p{
    position: absolute;
    top: 62%;
    color: white;/*文字は白に*/
    font-size: 12px;  
}
	
	#sub .grid:first-child{margin-left:1%;}
	
	#sub .grid h3{
	padding:0px;
	text-align:left;
	}
    
	#sub ul.list{padding:10px;}
	
	#sub ul.list li{
	padding-bottom:3px;
	margin-bottom:3px;
	}
	
	#sub ul.list li img{margin:0 5px 0 0;}
}


/* スマートフォン 横(ランドスケープ) */
@media only screen and (max-width:640px){
	#footer .grid p{text-align:center;}
	
	.grid img{
	float:none;
	margin:0px auto 10px auto;
	}
    

	.grid p,#sub .grid li{text-align:left;}
	.grid p.img{text-align:center;}
	
	img.frame,#gallery img{border-width:2px;}

  .alignleft,.alignright{
	float:none;
	display:block;
	margin:0 auto 10px;
	}
    
.thumbnails{
position: relative;
 width:25%;
 margin:0 auto;
}

.thumbnails img{
    float:left;
    width:100%;
    margin: 0px 0px 5px 0px;
}

.thumbnails p{
    position: absolute;
    top: 55%;
    color: white;/*文字は白に*/
    font-size: 12px;  
}
}


/* スマートフォン 縦(ポートレート) */
@media only screen and (max-width:480px){
	#mainBanner{margin-left:1px;}
	#mainBanner h2,#mainBanner h3{font-size:80%;}
    
.thumbnails{
position: relative;
 width:25%;
 margin:0 auto;
}

.thumbnails img{
    float:left;
    width:100%;
    margin: 0px 0px 5px 0px;
}

.thumbnails p{
    position: absolute;
    top: 39%;
    color: white;/*文字は白に*/
    font-size: 11px;  
}


/* フォーム関連 */
form {
    /* フォームをページの中央に置く */
    margin: 0px auto;
    width: 400px;
    /* フォームの範囲がわかるようにする */
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
}

form div + div {
    margin-top: 1em;
}

label {
    /* すべてのラベルを同じサイズにして、きちんと揃える */
    display: inline-block;
    width: 90px;
    text-align: right;
}

input, textarea {
    /* すべてのテキストフィールドのフォント設定を一致させる
       デフォルトで、textarea は等幅フォントが設定されている */
    font: 1em sans-serif;

    /* すべてのテキストフィールドを同じサイズにする */
    width: 300px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* テキストフィールドのボーダーの外見を同一にする */
    border: 1px solid #999;
}

input:focus, textarea:focus {
    /* アクティブな要素を少し強調する */
    border-color: #000;
}

textarea {
    /* 複数行のテキストフィールドをラベルにきちんと揃える */
    vertical-align: top;

    /* テキスト入力に十分な領域を与える */
    height: 12em;

    /* ユーザが textarea を垂直方向にリサイズできるようにする
       これが動作しないブラウザーもある */
    resize: vertical;
}

.button {
    /* ボタンを他のテキストフィールドと同じ場所に置く */
    padding-left: 90px; /* label 要素と同じサイズ */
}

button {
    /* このマージンは、ラベルとテキストフィールドの間のスペースと
       おおよそ同じスペースを表す */
    margin-left: .5em;
}