@charset "utf-8";


/* 
html5doctor.com Reset Stylesheet 
v1.6.1 
Last Updated: 2010-09-17 
Author: Richard Clark - http://richclarkdesign.com  
Twitter: @rich_clark 
*/ 

/*要素のフォントサイズやマージン・パディングをリセットしています*/ 
html, body, div, span, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
abbr, address, cite, code, 
del, dfn, em, img, ins, kbd, q, samp, 
small, strong, sub, sup, var, 
b, i, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, figcaption, figure,  
footer, header, hgroup, menu, nav, section, summary, 
time, mark, audio, video { 
    margin:0; 
    padding:0; 
    border:0; 
    outline:0; 
    font-size:100%; 
    vertical-align:baseline; 
    background:transparent; 
} 
 
/*行の高さをフォントサイズと同じにしています*/ 
body { 
    line-height:1; 
} 

/*新規追加要素のデフォルトはすべてインライン要素になっているので、section要素などをブロック要素へ変更しています*/ 
article,aside,details,figcaption,figure, 
footer,header,hgroup,menu,nav,section {  
    display:block; 
} 

/*nav要素内ulのマーカー（行頭記号）を表示しないようにしています*/ 
nav ul { 
    list-style:none; 
} 

/*引用符の表示が出ないようにしています*/ 
blockquote, q { 
    quotes:none; 
} 

/*blockquote要素、q要素の前後にコンテンツを追加しないように指定しています*/ 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content:''; 
    content:none; 
} 

/*a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を親要素のベースラインに揃えるようにしています*/ 
a { 
    margin:0; 
    padding:0; 
    font-size:100%; 
    vertical-align:baseline; 
    background:transparent; 
} 

/* ins要素のデフォルトをセットし、色を変える場合はここで変更できるようにしています */ 
ins { 
    background-color:#ff9; 
    color:#000; 
    text-decoration:none; 
} 

/* mark要素のデフォルトをセットし、色やフォントスタイルを変える場合はここで変更できるようにしています 
また、mark要素とは、文書内の検索結果で該当するフレーズをハイライトして、目立たせる際に使用するようです。*/ 
mark { 
    background-color:#ff9; 
    color:#000;  
    font-style:italic; 
    font-weight:bold; 
}

/*テキストに打ち消し線が付くようにしています*/ 
del { 
    text-decoration: line-through; 
} 

/*IEではデフォルトで点線を下線表示する設定ではないので、下線がつくようにしています 
また、マウスオーバー時にヘルプカーソルの表示が出るようにしています*/ 
abbr[title], dfn[title] { 
    border-bottom:1px dotted; 
    cursor:help; 
} 

/*隣接するセルのボーダーを重ねて表示し、間隔を0に指定しています*/ 
table { 
    border-collapse:collapse; 
    border-spacing:0; 
} 

/*水平罫線のデフォルトである立体的な罫線を見えなくしています*/ 
hr { 
    display:block; 
    height:1px; 
    border:0;    
    border-top:1px solid #cccccc; 
    margin:1em 0; 
    padding:0; 
} 

/*縦方向の揃え位置を中央揃えに指定しています*/ 
input, select { 
    vertical-align:middle; 
} 


/* -------------------------------------------------------------- */

/*ページ全体の設定*/
body{
color:#333;/*全体で使う文字の色*/
font:90% verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
line-height:1.5;
background:#fff;/*壁色設定*/
}

/* リンク設定-----------------------------------------------------*/

a{
color:#656565;
}

a:hover{
color:#1c1c1c;;/*リンクの文字の上にマウスが来た時この色に変わる*/
background:#eee;
}

a:active, a:focus{
outline:0;
}

ul{
list-style: none;
}


/* 実際に使うページの設定-----------------------------------*/

#wrapper{
margin:0 auto;
padding:0 1%;
width:98%;
position:relative;
}

/*********************
/* ヘッダー部分の設定
*********************/

#header{
margin:0 auto;
width:100%;
overflow:hidden;
padding:5px 0 15px;
}

/* ｈ１*最上部の小さな文字の部分の設定*検索エンジンで重要な見出しタグ*、*/

h1,#header p{
font-size:90%;/*全体の文字より小さく設定*/
line-height:1.6;/*行間をフォントサイズの1.6倍にする*/
font-weight:normal;/*文字の太さを標準にする*/
}

/* ロゴ*/

#header .logo{
float:left;/*指定した要素を左に寄せる：後に続く内容はその右側に回り込む*/
padding:25px 0 0;/*値を3つ指定した場合：記述した順に[上][左右][下]のパディング*/
}

.logo a{
font-size:150%;/*文字サイズを少し大きくする*/
font-weight:bold;/*フォントの太さを指定***一般的な太字の太さ*/
line-height:1;/*行間をフォントサイズの1.6倍にする*/
color:#333;/*文字の色*/
text-decoration:none;/*テキストに線は付かず、点滅もしません*/
}

.logo span{
font-size:80%;/*文字サイズを少し小さくする*/
font-weight:normal;/*文字の太さを標準にする*/
color:#333;/*文字の色*/
}

.info{
float:right;/*指定した要素を右に寄せる：後に続く内容はその左側に回り込む*/
padding:20px 0 0;/*枠の内側の余白　上・左右・下*/
}

.tel span{
font-size:130%;/*文字サイズを少し大きくする*/
font-weight:bold;/*フォントの太さを指定***一般的な太字の太さ*/
}

/***********************
/* トップナビゲーション*
***********************/

#topnav ul{
overflow:hidden;/*領域を超えるものは非表示*/
margin:20px 0;
border-left:solid 1px #ddd;/*左ボーダーのスタイル（solid：1本線で表示）・太さ・色を指定*/
}

* html ul#topnav{
height:1%;
}

#topnav li{
float:left;/*指定した要素を左に寄せる：後に続く内容はその右側に回り込む*/
text-align:center;/*文字がボタンのセンターに来る設定*/
width:10%;
}

#topnav a{
color:#333;/*メニューボタンの文字の色*/
font-size:80%;/*文字サイズを少し小さくする*/
display:block;
padding:5px 0;
border-right:1px solid #ddd;
text-decoration:none;}

#topnav ul li:first-child a,ul#topnav li:last-child a{
width:100%;
}

#topnav ul li.active a,ul#topnav a:hover{
border-color:#ddd;
background:#eee;
}

/**************
/* メイン画像の設定 *
**************/

#banner{
margin:35px auto 20px;
padding:4px;
position:relative;
line-height:0;
background:#fff;/* 背景色 */
}

#banner img{
max-width:100%;
height:auto;/*領域の高さを指定***auto状況に応じて自動設定*/
}

.slogan{
position:absolute;
max-width:100%;
height:auto;
bottom:10px;
left:10px;
padding:10px 15px;
line-height:1.4;
z-index:100;
color:#fff;
}

h2{
padding:15px;
font-size:100%;
}

/**********************
/* メイン部分の設定 *
**********************/

.main{
clear:both;
padding:20px 0;
overflow:hidden;
}

* html .main{
height:1%;
}

.main h2{
padding-left:7px;
margin-bottom:17px;
font-size:130%;
border-left:solid 14px #b2b2b2;
}


h3{
padding-left:7px;
margin:17px;
font-size:110%;
border-left:solid 14px #eee;
}

/**********************
/* サイド部分の設定 *
**********************/

.sub{
float:left;
}

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

.sub ul{
margin:5px 10px;
}

.sub li{
padding:5px 0;
list-style:inside;
border-bottom:1px dashed #ebebeb;
}

.sub li a{
text-decoration:none;
}

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


/************
/* フッター部分の設定 *
************/

#footer{
clear:both;
margin:0 auto;
width:100%;
padding:10px 0 40px 0;
overflow:hidden;
font-size:90%;
}

* html #footer{
height:1%;
}

#footer ul{
margin:0 0 10px 5px;
}

#footer li{
padding:0 6px 0 5px;
margin-bottom:3px;
list-style:none;
border-bottom:0;
display:inline-block;
border-right:1px solid #eee;
}

#footer .logo{
float:left;/*指定した要素を左に寄せる：後に続く内容はその右側に回り込む*/
padding:25px;
}

#footer .copyright{
margin-top:40px;
font-size:110%;
}

/********
/* PC用 *
********/

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

	#header,#wrapper,#footer{
	width:940px;
	padding:0;
	}

	#wrapper{
        padding-bottom:20px;
        }

	.main{
	float:left;
	width:70％;/*685px*/
	overflow:hidden;
	margin-top:20px;
	}

	.sub{
        width:30％;/*282px*/
        }

}

/***********************
/* モニター幅960px以下 *
***********************/

@media only screen and (max-width:960px){

	h1 p{
        padding:0 2%;width:96%
        }

	#header{
        padding:0 2%;width:96%
        }

	#header .logo{
        padding-left:10px;
        }

	#header .info{
        padding-right:10px;
        }

	#topnav ul{
	clear:both;
	width:100%;
	}

	#topnav li{
	width:33%;
	margin:0 0 5px;
	border-right:1px solid #1c1c1c;
	 box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
	}

	#topnav ul li:nth-child(3n){
        border-right:0;width:34%;
        }

	#topnav ul li a{
	width:100%;
	border-top:0;
	}

	#topnav ul li:first-child a,ul#topnav li:last-child a{
        width:100%;
        }

	.sub{
	width:50%;
	margin:2px 0;
	}

	.sub img{
	float:left;
	margin-right:5px;
	}

	.sub{
        padding-bottom:20px;
        }
	
	#footer{padding:0;}
	
}

/************
/* iPad 縦 *
************/

@media only screen and (max-width:768px){
        #header{
        padding-bottom:0;
        }

	#banner{
        padding:3px;
        }
}

/*************************************
/* スマートフォン 横(ランドスケープ) *
*************************************/

@media only screen and (max-width:640px){

	.sub{
        width:100%;
         }

	.sub img{
	float:none;
	margin:20px auto 10px;
	}

	.sub p{
        text-align:left;
        }

	img.frame,#gallery img{
        border-width:2px;
        }

  .alignleft,.alignright{
	float:none;
	display:block;
	margin:0 auto 10px;
	}

	#footer .grid p{
        text-align:center;
        }
}

/***********************************
/* スマートフォン 縦(ポートレート) *
***********************************/

@media only screen and (max-width:480px){

	#header .logo{
        padding-top:10px;
        }

        .info{
        padding:10px 0 0;
        }

	#topnav li{
        width:50%;
        }

	#topnav ul li:nth-child(3n){
	border-right:1px solid #1c1c1c;
	width:50%;
	}

	#topnav ul li:nth-child(2n),ul#topnav li:nth-child(6n){
　　　　border-right:0;
　　　　}

	#banner{
        margin-left:1px;
        }

	h2,h3{
        font-size:80%;
        }
}