@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap&subset=japanese');
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

body {
color: #cccccc;	/*全体の文字色*/
margin: 0px;
padding: 0px;
font-size: 14px;
line-height: 1.6em;
letter-spacing: 0.08em;
font-feature-settings : "palt";
font-family: "Helvetica Neue",
Arial,
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
Meiryo,
sans-serif;
background: #171717;	/*全体の背景色*/
}
img {
margin: 0px 0px 0px 0px;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form{
	margin: 0px;
	padding: 0px;
}
ul{
	list-style-type: none;
}
img {
	border: none;
}
input,textarea,select {
	font-size: 1em;
}
form {
	margin: 0px;
}
table {
	border-collapse:collapse;
	font-size: 100%;
	border-spacing: 0;
}

/*サムネイル
------------------------------------------------------*/
#gallery img {
	object-fit: contain;
	margin: 5px 5px 0px 0px;
	width: 55px;
	height: 55px;
}

/*リンク設定
------------------------------------------------------*/
a {
	color: #CCCCCC;	/*リンクテキストの色*/
	text-decoration: none;	/*下線を消す設定*/
	-webkit-transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
	transition: 0.5s;			/*同上*/
}
a:hover {
	color: #ffffff;	/*マウスオン時の文字色*/
	text-decoration: none;	/*下線を消す設定*/
}
a img {
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
a:hover img {
 opacity: 0.8;
 filter: alpha(opacity=80);
 -moz-opacity: 0.8;
}

#close {
	width: 100%;	/*ブロック幅*/
	position: relative;
	margin: 0px auto;
	text-align: center;	/*文字を右寄せ*/
}

#centerbutton {
	width: 100%;	/*ブロック幅*/
	position: relative;
	margin: 0px auto;
	text-align: center;	/*文字を右寄せ*/
}

.button {
font-size:12px;
color: #ccc;
background-color: #111;
display: inline-block;
width: 200px;
height: 30px;
text-align: center;
font-weight: bold;
text-decoration: none;
line-height: 30px;
outline: none;
border: 1px solid #535353;
border-radius: 0px;
margin:10px 0px 20px 0px;
}
.button:hover {
color: #fff;
background-color: #333;
}
.button::before,
.button::after {
position: absolute;
z-index: -1;
display: block;
content: '';
}
.button,
.button::before,
.button::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}

.button2 {
font-size:12px;
color: #ccc;
background-color: #111;
display: inline-block;
width: 200px;
height: 30px;
text-align: center;
font-weight: bold;
text-decoration: none;
line-height: 30px;
outline: none;
border: 1px solid #535353;
border-radius: 0px;
margin:0px 5px 0px 0px;
}
.button2:hover {
color: #fff;
background-color: #333;
}
.button2::before,
.button2::after {
position: absolute;
z-index: -1;
display: block;
content: '';
}
.button2,
.button2::before,
.button2::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}

.button3 {
font-size:12px;
color: #ccc;
background-color: #111;
display: inline-block;
width: 200px;
height: 30px;
text-align: center;
font-weight: bold;
text-decoration: none;
line-height: 30px;
outline: none;
border: 1px solid #535353;
border-radius: 0px;
margin:10px 5px 0px 0px;
}
.button3:hover {
color: #fff;
background-color: #333;
}
.button3::before,
.button3::after {
position: absolute;
z-index: -1;
display: block;
content: '';
}
.button3,
.button3::before,
.button3::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}

.button4 {
font-size:12px;
color: #ccc;
background-color: #111;
display: inline-block;
text-align: center;
font-weight: bold;
text-decoration: none;
line-height: 0px;
outline: none;
border: 1px solid #535353;
border-radius: 0px;
padding: 10px;
margin:0px 0px 20px 0px;
}
.button4:hover {
color: #fff;
background-color: #333;
}
.button4::before,
.button4::after {
position: absolute;
z-index: -1;
display: block;
content: '';
}
.button4,
.button4::before,
.button4::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}

.btn {
	text-decoration: none;
	text-align: center;
	font-size: 12px;
	display: block;
	background: -moz-linear-gradient(top,#27232c 0%,#131116);
	background: -webkit-gradient(linear, left top, left bottom, from(#27232c), to(#131116));
/* IE 5.5-7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#27232c', endColorstr='#131116', GradientType=0);
/* IE 8+ */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#27232c', endColorstr='#131116', GradientType=0)"; 
/* IE 10 */
background: linear-gradient(to bottom, #27232c, #131116);
	border: 1px solid #3b3542;
	color:#cccccc;
	width: 140px;
	padding: 5px 0;
	margin: 10px 0px 10px 0px;
}
.btn:hover{
	color: #ffffff;	/*リンクテキストの色*/
	text-decoration:none;
}

.btn2 {
	text-decoration: none;
	text-align: center;
	font-size: 12px;
	display: block;
	background: -moz-linear-gradient(top,#27232c 0%,#131116);
	background: -webkit-gradient(linear, left top, left bottom, from(#27232c), to(#131116));
/* IE 5.5-7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#27232c', endColorstr='#131116', GradientType=0);
/* IE 8+ */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#27232c', endColorstr='#131116', GradientType=0)"; 
/* IE 10 */
background: linear-gradient(to bottom, #27232c, #131116);
	border: 1px solid #3b3542;
	color:#cccccc;
	width: 180px;
	padding: 5px 0px;
	margin: 10px 0px 0px 0px;
}
.btn2:hover{
	color: #ffffff;	/*リンクテキストの色*/
	text-decoration:none;
}

/*HPを囲むブロック
------------------------------------------------------*/
#wrap {
	text-align: left;
	width: 800px;
	margin-right: auto;
	margin-left: auto;
}
/*h1タグ設定*/
#wrap h1 {
	font-size: 10px;	/*文字サイズ*/
	font-weight: normal;
	text-align: right;	/*文字を右寄せ*/
	line-height: 30px;	/*行間*/
	background: #000000;	/*wrap_bgが出てしまうので、背景色を指定する*/
}
#wrap h1 a {
	text-decoration: none;
}

/*メインブロック
------------------------------------------------------*/

#main-col {
	width: 100%;	/*ブロック幅*/
	padding: 0px;
	margin: 0 auto;
}

#main-col2 {
	width: 100%;	/*ブロック幅*/
	padding: 10px 0px 10px 0px;
	margin: 0 auto;
}

/*h2タグ*/
#main-col h2 {
	font-size: 100%;
	color: #CCCCCC;		/*文字色*/
	padding: 2px 10px;	/*左から、上下、左右への余白*/
	clear: both;
	border-left: 4px solid #990000;		/*左の線の幅、線種、色*/
	border-bottom: 1px solid #990000;	/*下の線の幅、線種、色*/
}

/*h2タグ*/
#main-col2 h2 {
	font-size: 14px;
	color: #CCCCCC;		/*文字色*/
	padding: 2px 10px 5px;	/*左から、上下、左右への余白*/
	clear: both;
	border-left: 4px solid #990000;		/*左の線の幅、線種、色*/
	border-bottom: 1px solid #990000;	/*下の線の幅、線種、色*/
}

/*h3タグ*/
#main-col h3 {
	font-size: 100%;
	padding: 5px 5px 5px 10px;	/*左から上、右、下、左への余白*/
	width: 700px;
	border-bottom: 1px solid #990000;	/*下線の幅、線種、色*/
	border-left: 5px solid #990000;		/*左側の線の幅、線種、色*/
	clear: both;
	color: #CCCCCC;	/*文字色*/
}
/*h3タグ*/
#main-col2 h3 {
	font-size: 14px;
	color: #CCCCCC;	/*文字色*/
	padding: 5px 5px 5px 10px;	/*左から上、右、下、左への余白*/
	margin:0px 0px 10px 0px;
	background-color: #0d0d0d;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background-image: -webkit-gradient(linear, left top, left bottom, from(#747474), to(#0d0d0d));	/*グラデーション*/
	background-image: -webkit-linear-gradient(#747474, #444444 49%, #1a1a1a 50%, #0d0d0d);	/*同上*/
	background-image: linear-gradient(#747474, #444444 49%, #1a1a1a 50%, #0d0d0d);			/*同上*/
　　clear: both;
	border-right: 1px solid #535353;	/*右側の線の幅、線種、色*/
	border-bottom: 1px solid #535353;	/*下側の線の幅、線種、色*/
	border-left: 1px solid #535353;		/*左側の線の幅、線種、色*/
	border-top: 4px solid #990000;		/*左側の線の幅、線種、色*/
}
#main-col2 span.c1 {
padding-left:5px;
font-weight: normal;
font-size : 12px;
}
/*段落タグ*/
#main-col p {
	padding: 10px;
}

.clr-block{
clear : both ;
margin:0px 0px 0px 0px;
}

/*PAGE TOP設定
---------------------------------------------------------------------------*/
#pagetop {
	clear: both;
}
#pagetop a {
	color: #CCCCCC;		/*文字色*/
	font-size: 10px;	/*文字サイズ*/
	background-color: #000000;	/*背景色*/
	text-decoration: none;
	text-align: center;
	width: 10em;	/*ボックス幅*/
	display: block;
	float: right;
}
/*マウスオン時*/
#pagetop a:hover {
	background-color: #333;	/*背景色*/
	color: #FFF;			/*文字色*/
}

/*フッター設定(copyrightなどが入った最下部ブロック)
---------------------------------------------------------------------------*/
footer {
	font-size: 11px;
	clear: both;
	text-align: center;
	padding-top: 15px;
	padding-bottom: 15px;
	color: #CCCCCC;			/*文字色*/
	background: #000000;	/*背景色*/
}
footer a {
	text-decoration: none;
	color: #CCCCCC;
	-webkit-transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
	transition: 0.5s;			/*同上*/
}
footer a:hover {
	color: #ffffff;
}

/*テーブル(CMSのstaff.html内で使用)
------------------------------------------------------*/
table.l3 {
	width: 100%;
	background: #131116;
	margin: 10px 0px 0px 0px;
	font-size:13px;
}
table.l3,
table.l3 th,
table.l3 td {
	border: 1px solid #535353;
}
table.l3 th {
	background-color: #000000;
	width: 14%;
	text-align: center;
	padding: 10px;
}
table.l3 td {
	width: 14%;
    height: 70px;
	text-align: center;
}

/*スタッフ詳細テーブル(staff.html内で使用)
------------------------------------------------------*/
.staff {
	width: 100%;
}
.staff table.right {
	width: 100%;
	float: reft;
	background: #000000;
}
.staff .left {
	float: left;
	width: 100%;
	padding-bottom: 0px;
}
.staff .left p {
	padding: 0px !important;
	height : 600px;
}
.staff table.right,
.staff table.right th,
.staff table.right td {
	border: 1px solid #535353;
}
.staff table.right th {
	background-color: #000000;
	width: 100px;
	text-align: center;
}
.staff table.right th,
.staff table.right td {
	padding: 0px;
}
.staff .tx1{
	margin: 20px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
.staff .tx2{
font-size:	1em;
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 0px 0px;
}
.staff .tx1 img{
	margin: 0px 0px -10px 0px;
}
.bt{
	border-bottom: 1px solid #535353;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px -10px 0px;
}
/*画像大
------------------------------------------------------*/
.photo{
max-width : 600px;
max-height : 600px;
}

/*予約ボタン
------------------------------------------------------*/
#reserve{
width: 100%;
text-align: left;
margin: 15px 0px 0px 0px;
}
#reserve img{
width : 300px;
}

/*リストマーク
------------------------------------------------------*/
ul.d {
	padding: 10px 20px 10px 35px;
	list-style: disc;
}
ul.d li{
	padding-bottom: 0.5em;
}

/*他
------------------------------------------------------*/
.mb1 {
	margin-bottom: 10px;
}
.mb05 {
	margin-bottom: 5px;
}
.color1 {
	color: #F5E999;
}
.color2 {
	color: #ff0000;
}
.img {
	padding-right: 0px !important;
	padding-left: 0px !important;
}
.wl {
	width: 96%;
}
.ws {
	width: 50%;
}
.c {
	text-align: center;
}
.clear {
	clear: both;
}
.mini1 {
	font-size: 10px;
	line-height: 1.6;
}

/*ここからタブレット用（481px～800px）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media (min-width:481px) and (max-width:800px){

body {
	margin: 0px;
}
#wrap {
	width: auto;	/*ブロック幅*/
	padding: 0px;
	margin: 0px 0px;
}
#main-col2 {
	width: auto;	/*ブロック幅*/
	padding: 10px;
	margin: 0px 0px;
}
/*画像大
------------------------------------------------------*/
.photo{
max-width : 480px;
max-height : 480px;
}
.noimage{
max-width : 480px;
max-height : 480px;
}
.staff .left p {
	padding: 0px !important;
	height : 480px;
}

/*予約ボタン
------------------------------------------------------*/
#reserve img{
width : 270px;
}

}

/*ここからスマートフォン用（480px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media (max-width : 480px){

body {
	margin: 0px;
}
#wrap {
	width: auto;	/*ブロック幅*/
	padding: 0px;
	margin: 0px 0px;
}
#main-col2 {
	width: auto;	/*ブロック幅*/
	padding: 10px;
	margin: 0px 0px;
}

/*スタッフ詳細テーブル(staff.html内で使用)
------------------------------------------------------*/
.staff {
	width: 100%;
}
.staff table.right {
	width: 100%;
	float: reft;
	background: #000000;
}
.staff .left {
	float: left;
	width: 100%;
	padding-bottom: 1em;
}
.staff .left p {
	padding: 0px !important;
}
.staff table.right,
.staff table.right th,
.staff table.right td {
	border: 1px solid #535353;
}
.staff table.right th {
	background-color: #000000;
	width: 100px;
	text-align: center;
}
.staff table.right th,
.staff table.right td {
	padding: 0px;
}
.bt{
	border-bottom: 1px solid #535353;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px -20px 0px;
}

/*画像大
------------------------------------------------------*/
.photo{
max-width : 340px;
max-height : 340px;
}
.noimage{
max-width : 340px;
max-height : 340px;
}
.staff .left p {
	padding: 0px !important;
	height : 340px;
}

/*予約ボタン
------------------------------------------------------*/
#reserve img{
width : 100%;
}
	
/*テーブル(CMSのstaff.html内で使用)
------------------------------------------------------*/
table.l3 {
	width: 100%;
	background: #131116;
	margin: 10px 0px 0px 0px;
}
table.l3,
table.l3 th,
table.l3 td {
	border: 1px solid #535353;
}
table.l3 th {
	background-color: #000000;
	width: 25%;
	text-align: center;
	padding: 10px 0px;
}
table.l3 td {
	width: 25%;
	text-align: center;
	padding: 10px 0px;
}

}