@charset "UTF-8";

/*================================================
*  一般・共通設定
================================================*/
html {
  overflow-y:scroll;
  font-family:'HGｺﾞｼｯｸM';
}

body {
  margin:0;
  padding:0 0 150px 0;
  line-height:1.6;
  letter-spacing:1px;
  font-size:12px;
  color:#fff;
  background:#683588 url("http://snatama.com/image.php?id=4") repeat-y;
  background-position: right; 
}

br {
  letter-spacing:normal;
}

a {
  color:#fff;
  text-decoration:none;
}

a:hover {
  color:#C94C00;
}

a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

img {
  border:0;
  vertical-align:bottom;
}

h1,h2,h3,h4,h5,h6 {
  margin:0;
}

.sp{
  clear:both;
  padding:5px;
}


.clear{
  clear:both;
}

/*================================================
* 文字飾り
================================================*/
.bcy{
  background:#fffe81;
  color:#683588;
  font-weight:bold;
}

.bcp{
  background:#683588;
  color:#fff;
  font-weight:bold;
  font-size:large;
}

/*================================================
* 見出し
================================================*/

h2{
  font-size:large;
  font-weight:bold;
  color:#fff;
  text-align:center;
  background: linear-gradient(#322862, #5246a5, #322862);
}

h3{
  font-size:large;
  font-weight:bold;
  color:#fff;
  text-align:left;
  background: linear-gradient(#322862, #5246a5, #322862);
  padding-left:10px;
}

h4{
  font-weight:bold;
  color:#fff;
  text-align:center;
  background: linear-gradient(#322862, #5246a5, #322862);
  margin-bottom:5px;
  border-radius:10px;
}

/*================================================
* ヘッダー
================================================*/
#header {
  width:100%;
}

#header h1{
  color:#ff4500;
}

/*================================================
*  フッター
================================================*/
#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-height: 150px;
  background-color:#fff;
  filter:alpha(opacity=0.8);
  -moz-opacity: 0.8;
  opacity: 0.8;
}

/*================================================
*  ナビゲーション トップページ用・店舗一覧用
================================================*/
#gnav{
  width:95%;
  margin:0 auto;
  padding:5px 0;
  box-sizing:border-box;
}

#gnav table{
  width:100%;
  max-height:140px;
}

#gnav table td{
  text-align:center;
  width:25%;
}

#gnav table td img{
  width:95%;
  margin:0 auto;
  max-width:140px;
}

/*================================================
*  メルマガ登録ボタン
================================================*/
#mailmag{
  position: fixed;
  top: 10px;
  right:10px;
  width: 100px;
  height: 100px;
  background-color:#fff;
  filter:alpha(opacity=0.8);
  -moz-opacity: 0.8;
  opacity: 0.8;
  border-radius:50px;
  display:inline-block;
  text-align:center;
}

#mailmag img{
  width:80px;
  margin-top:10px;
}

/*================================================
*  SNSセット
================================================*/
#snswaku{
  width:100%;
  box-sizing:border-box;
  margin:10px auto;
}

.snsl{
  width:500px;
  box-sizing:border-box;
  margin:10px auto;
}

.snsr{
  max-width:500px;
  box-sizing:border-box;
  margin:10px auto;
}

/*================================================
*  メディア情報
================================================*/
.media{
  margin-bottom:20px;
  padding: 10px 0;
  font-size:0;
  box-sizing:border-box;
  width:100%;
  background-color:#37246a;
}
.media article{
  display: inline-block;
  width: 25%;
  vertical-align: top;
  padding: 0 5%;
  box-sizing:border-box;
}
.media article a{
  display: block;
  text-align: center;
  text-decoration: none;
}
.media article a span.type{
  display: inline-block;
  padding: 0 5px;
  background: #fff;
  color: #37246a;
  font-size: 13px;
  font-weight: bold;
}
.media article a span.date{
  display: block;
  margin: 5px 0;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
}
.media article a img{
  display: block;
  width: 100%;
}

/*================================================
*  お知らせ
================================================*/
.information{
  margin-bottom:20px;
  box-sizing:border-box;
  width:100%;
  background-color:#37246a;
}

.information dl{
  height:200px;
  overflow-y: scroll;
}

.information dl::-webkit-scrollbar {
  display: none;
}

.information dt{
  text-align:left;
  border-bottom:1px dotted #d8d8d8;
  box-sizing:border-box;
}

.information dd{
  padding-left:10px;
  border-bottom:1px solid #d8d8d8;
  box-sizing:border-box;
}

/*================================================
*  Topページ　一番上
================================================*/
#top1{
  width:100%;
  margin:0 auto;
  box-sizing:border-box;
  background-size:contain;
}

#top1 img{
  width:50%;
  max-width:500px;
}

/*================================================
*  Topページ　コメント部分
================================================*/
#comp{
  width:100%;
  margin:0 auto;
  padding:20px 5px;
  box-sizing:border-box;
  text-align:center;
}

.comptxt{
  width:100%;
  max-width:800px;
  margin:0 auto;
  padding:5px;
  box-sizing:border-box;
  text-align:left;
  font-size:x-large;
}

#comp img{
  width:100%;
  max-width:500px;
  margin:0 auto;
  box-sizing:border-box;
}

/*================================================
*  Topページ　店舗情報
================================================*/
#shop{
  width:100%;
  margin:0 auto;
  padding:10px 5px 0;
  box-sizing:border-box;
}

#shop img{
  width:70%;
  box-sizing:border-box;
  max-width:200px;
}

.txter{
  padding-left:20px;
  box-sizing:border-box;
  text-align:left;
}

.shopl{
  width:100%;
  margin:0 auto 5%;
}

.shopr{
  width:100%;
  margin:0 auto 5%;
}
#shop .bcy{
  display: block;
  text-align: center;
  margin: 10px 0 5px;
  width: 200px;
}
/*================================================
*  下層ページ　店舗情報 詳細
================================================*/
#shopdt{
  width:100%;
  box-sizing:border-box;
  max-width:1000px;
  margin:0 auto;
  padding:10px 0;
}

.shopdtl{
  width:100%;
}

.shopdtl img{
  width:100%;
}

.shopdtr{
  width:100%;
}

.shopdtr table{
  width:100%;
  box-sizing:border-box;
  font-size:small;
}

.shopdtr table th{
  width:25%;
  padding:2px 5px;
  box-sizing:border-box;
  text-align:left;
}

.shopdtr table td{
  width:75%;
  padding:2px 5px;
  box-sizing:border-box;
  text-align:left;
}

/*================================================
*  下層ページ　スタッフ一覧
================================================*/
#staffli{
  width:100%;
  box-sizing:border-box;
  margin:0 auto;
}

.staffliwaku{
  width:100%;
  box-sizing:border-box;
  margin:0 auto;
  padding:10px 0;
}

#staffli table{
  width:90%;
  box-sizing:border-box;
  margin:0 auto;
  padding:10px 0;
}

#staffli table td{
  width:33%;
  box-sizing:border-box;
  padding:5px;
  text-align:center;
}

#staffli table td img{
  width:100%;
  border-radius:10px;
  box-shadow:2px 2px 2px #322862;
}

#staffli table th{
  width:33%;
  box-sizing:border-box;
  padding:2px 5px;
  text-align:center;
}

/*================================================
*  下層ページ　スタッフ個別
================================================*/
#staffdt{
  width:100%;
  box-sizing:border-box;
  margin:0 auto;
}

.staffdtwaku{
  width:700px;
  box-sizing:border-box;
  margin:0 auto;
  padding:10px 0;
}

.staffdtl{
  width:200px;
  box-sizing:border-box;
  float:left;
}

.staffdtl img{
  width:100%;
  border-radius:5px;
  box-shadow:2px 2px 2px #322862;
}

.staffdtr{
  width:480px;
  box-sizing:border-box;
  float:right;
}

.staffdtr table{
  width:100%;
  box-sizing:border-box;
}

.staffdtr table th{
  width:30%;
  padding:2px 3px;
  box-sizing:border-box;
  text-align:left;
}

.staffdtr table td{
  padding:2px 3px;
  box-sizing:border-box;
  text-align:left;
}

/*================================================
*  下層ページ　店舗一覧
================================================*/
#spl{
  width:100%;
  box-sizing:border-box;
  margin:0 auto;
}

.spll{
  width:100%;
  box-sizing:border-box;
}

.splr{
  width:100%;
  box-sizing:border-box;
}

.waku{
  width:100%;
  box-sizing:border-box;
  border:1px solid #d8d8d8;
  padding:10px;
  background:#fff;
  border-radius:10px;
  box-shadow:#37246a 2px 5px 2px;
  color:#000;
  margin:10px auto;
}

.wakul{
  width:100%;
  box-sizing:border-box;
}

.wakul img{
  width:100%;
}

.wakur{
  width:100%;
  box-sizing:border-box;
}

.wakur table{
  width:100%;
  box-sizing:border-box;
  font-size:small;
}

.wakur table th{
  width:30%;
  padding:5px;
}

.wakur table td{
  width:70%;
  padding:5px;
}

.dtlink{
  text-align:right;
}

.dtlink a{
  color:#2980b9;
}

/*================================================
*  下層ページ　料金システム 詳細
================================================*/
#pri1{
  width:100%;
  margin:0 auto;
  padding:20px 5px;
  box-sizing:border-box;
  background-color:#683588;
}

#pri2{
  width:100%;
  margin:0 auto;
  padding:20px 5px;
  box-sizing:border-box;
  background-color:#37246a;
}

/*================================================
*  下層ページ　ギャラリー
================================================*/
#gal{
  width:100%;
  box-sizing:border-box;
  margin:15px auto;
}

#gal table{
  width:100%;
  box-sizing:border-box;
  margin:5px auto;
}

#gal table td{
  width:25%;
  box-sizing:border-box;
  padding:2px;
}

.gwaku{
  width:100%;
  box-sizing:border-box;
  background-color:#fff; 
  padding:5px;
  border-radius:5px;
  box-shadow:2px 2px 2px #322862;
}

.gwaku img{
  width:100%;
  box-sizing:border-box;
}

/*================================================
*  BLOG
================================================*/
#blog{
  width:100%;
  padding:20px;
  box-sizing:border-box;
}

.blwaku{
  background-color: #37246a;
  border: 2px dashed #fff;
  border-radius: 8px;
  box-shadow: 0 0 0 4px #37246a;
  margin: 2em 0;
  padding: 2em;
}

.bltit{
  font-size:x-large;
  font-weight:bold;
  text-align:left;
  border-bottom:1px solid #d8d8d8;
  padding-left:5px;
}

.bltxt{
  text-align:left;
  min-height:200px;
  padding-left:10px;
}

.blimg img{
  max-width:100%;
}

.bldate{
  text-align:right;
  border-top:1px solid #d8d8d8;
  padding-right:10px;
}

/*================================================
*  各店舗お知らせエリア
================================================*/
#infokb{
  width:100%;
  box-sizing:border-box;
  margin:10px auto;
  padding:0 5px;
}

.infokbl{
  width:100%;
  box-sizing:border-box;
  border:1px solid #37246a;
  margin:10px 0;
  box-shadow:#37246a 2px 2px 2px;
}

.infokbr{
  width:100%;
  box-sizing:border-box;
  border:1px solid #37246a;
  margin:10px 0;
  box-shadow:#37246a 2px 2px 2px;
}

.information2 {
  box-sizing: border-box;
  width: 100%;
  background-color: #37246a;
  font-size: x-large;
}
.information2 dl {
  height: 240px;
  overflow-y: scroll;
}
.information2 dt {
  text-align: left;
  border-bottom: 1px dotted #d8d8d8;
  box-sizing: border-box;
  padding: 5px;
}
.information2 dd {
  padding-left: 10px;
  border-bottom: 1px solid #d8d8d8;
  box-sizing: border-box;
  padding: 10px;
}