@charset "utf-8";
/*--------------------------------------------------------
                        PC用
----------------------------------------------------------*/

/* 共通の設定 */

* {
  margin: 0px;
}

body {
  font-family: "游明朝体", "YuMincho", "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  text-align: center;
  -webkit-text-size-adjust: 100%;
}

img {
  border-style: none;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

p {
  margin-top: 10px;
  font-size: 92%;
  text-align: left;
}

.rock p {
  text-align: center;
  font-size: 20px;
}

/* ヘッダー設定 */

header {
  width: 100%;
  background-color: #ffffff;
  padding: ;
  margin: 0px;
}

header h1 {
  font-size: 40%;
}

.header {
  display: inline-block;
}
/* ヘッドロゴ設定 */
.head-logo {
  padding-top: 1px;
}
/* リンク設定 */

a {
  font-size: 95%;
}

a:hover {
  color: brown;
  transition: all 0.3s linear;
}

a:visited {
  color: ;
}

/* 画像リンクホバー設定 */

a:hover img {
  opacity: 0.4;
  filter: alpha(opacity=40);
  -ms-filter: "alpha( opacity=40 )";
  transition: all 0.3s linear;
}

/*----- 見出し設定 -----*/

h1 {
  color: black;
  width: 70%;
  font-size: 90%;
  font-weight: normal;
  padding-left: 20px;
  padding-top: 15px;
  padding-bottom: 7px;
  text-align: left;
  z-index: ;
}

h2 {
  font-size: 160%;
  position: relative;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
  color: #5c4437;
}

h3 {
  font-size: 120%;
  margin-top: 25px;
  margin-left: 0px;
}

h4 {
  font-size: 100%;
  font-weight: bold;
  padding-top: 20px;
  padding-left: 1px;
  text-align: left;
  color: cadetblue;
}

h5 {
  padding-top: 15px;
  text-align: left;
}

/*----- リスト設定 -----*/
ul {
  list-style: none;
  padding-left: 1px;
}
/*----- コンタクトアイコン設定 フローティングメニュー　-----*/

#contact_ico {
  top: 60px;
  right: 0;
  position: absolute;
  z-index: 300;
  opacity: 0.7;
  -moz-opacity: 0.7;
  filter: alpha(opacity=70);
}

/*----- content -----*/

.content-menu img {
  margin: 5px auto;
}

#list ul {
  list-style-image: url(../img/check.gif);
}

.content-unei {
  text-align: left;
}

.content-unei p {
  text-align: left;
  margin-top: 10px;
  font-size: 80%;
}

.under-line {
  border-bottom: solid 3px #5c4437;
  line-height: 0.7em;
}

.under-line-thin {
  border-bottom: solid 1px #505050;
  line-height: 1em;
}

.border-green-bold {
  border: 4px solid #5dce2b;
  background-color: #fff;
}

table {
  border-collapse: collapse;
  width: 100%;
}

table th {
  border: solid 1px;
  padding: 10px;
  background-color: #dbffc4;
}

table td {
  border: solid 1px;
  padding: 10px;
}

/*----- map・店舗情報設定　-----*/

#map {
  padding-top: 50px;
  margin-top: -50px;
}

.content-map {
  margin: 0 auto;
}

.map {
  width: 100%;
}

.cover .addr {
  width: 100%;
  font-size: 80%;
  text-align: left;
}

.addr-outline {
  border-bottom: 1px dotted #666;
  line-height: 1.5em;
}

.addr-outline img {
  padding: 3px;
  padding-bottom: 5px;
}

/*----- フォームメール設定 -----*/

#contact {
  margin: 0 auto;
  padding-top: 50px;
}

#contact h3 span {
  background-color: #fff;
}

/*----- フォント設定 -----*/

.font-red {
  color: #ff0000;
}

.font-blue {
  color: #3580c9;
  font-size: 120%;
  font-weight: bold;
  font-family: fantasy;
}

.font-yellow {
  color: #ffb100;
  font-size: 170%;
  font-weight: bold;
}

.font-orange {
  color: orange;
  font-size: 150%;
}

.font-green {
  color: #175f09;
  font-weight: bold;
}

.font-bold {
  font-weight: bold;
}

.font-plantitle {
  font-size: 100%;
  color: black;
  font-weight: bold;
}

.font-small {
  font-size: 65%;
}

.baner {
  width: 20%;
  margin: 0 auto;
}

/*----- footer -----*/

.footer-content {
  color: #6969669;
  background-color: white;
  border-top: solid 1px black;
  clear: both;
  padding-top: 30px;
  padding-bottom: 30px;
}

.copyright {
  width: 100%;
  margin: 0 auto;
  padding-top: 2.5em;
  padding-bottom: 2.5em;
  text-align: center;
  font-size: 90%;
  color: #696969;
}

footer ul {
  list-style: none;
}

/*----- メールフォーム設定 -----*/

#formwrap {
  width: 100%;
  margin: 0 auto;
  color: #555;
  line-height: 120%;
  font-size: 90%;
}

#formwrap table.formtable {
  width: 60%;
  margin: 0 auto;
  border-collapse: collapse;
}

#formwrap table.formtable td,
table.formtable th {
  border: 0px solid #ccc;
  padding: 10px;
  text-align: left;
}

#formwrap .form-left {
  width: 25%;
  font-weight: normal;
  text-align: left;
}

#formwrap .form-checkbox {
  width: 100%;
  height: 10px;
  text-align: left;
}

.line {
  background-color: #fff7e0;
  margin: 15px 10px;
}

.border {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  border: 1px #7b7b7b solid;
  border-radius: 10px;
  width: 100%;
  /* 横幅いっぱいにする */
  /* CSS3草案 */
  -webkit-border-radius: 10px;
  /* Safari,Google Chrome用 */
  -moz-border-radius: 10px;
  /* Firefox用 */
}

/*----- リスト設定 -----*/

.check {
  list-style-image: url(../img/check.png);
  margin-top: -2px;
}

.facebook {
  background-image: url(../img/facebook3.png);
  margin-top: 10px;
  padding: 15px;
  background-repeat: no-repeat;
}

/*---------------------------------------------------------------------
 以下、タブレット縦（ディスプレイ幅が768px）より小さい画面に使われるCSS
-----------------------------------------------------------------------*/

@media screen and (max-width: 768px) {
  h1 {
    color: black;
    width: 80%;
    font-size: 90%;
    font-weight: normal;
    padding-left: 20px;
    padding-top: 15px;
    padding-bottom: 7px;
    text-align: left;
    z-index: 2;
  }

  #site_title {
    float: left;
    padding-right: 5px;
  }

  .content-greeting {
    margin: 0 auto;
    width: 80%;
  }

  .calendar {
    margin: 0 auto;
    width: 90%;
  }

  #footer_content {
    position: relative;
    bottom: 0;
    width: 100%;
    clear: both;
  }

  .image-none {
    display: none;
  }

  /*----- メールフォーム設定 -----*/
  #formwrap {
    width: 100%;
    margin: 0 auto;
    color: #555;
    line-height: 10%;
    font-size: 90%;
  }

  #formwrap table.formtable {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
  }

  #formwrap table.formtable td,
  table.formtable th {
    padding: 7px;
    text-align: left;
    display: block;
  }

  #formwrap .form-left {
    width: 80%;
  }
  /*----- コンタクトアイコン設定　-----*/
  #contact_ico {
    right: 0;
    top: 100px;
    width: 45px;
  }
}

/*------------------------------------------------------------------------
 以下、スマートフォン（ディスプレイ幅480px以下）より小さい画面に使われるCSS
--------------------------------------------------------------------------*/

@media screen and (max-width: 480px) {
  body {
    font-size: 90%;
  }

  h1 {
    font-size: 30%;
    margin-top: 0px;
  }

  h2 {
    font-size: 100%;
  }

  h3 {
    font-size: 120%;
  }

  /*----- テーブル設定 -----*/
  table {
    font-size: 10px;
  }

  .head-dial {
    padding-top: 50ex;
  }

  .image-none {
    display: none;
  }

  /* 下部リンクアイコン設定 */
  #footer_content {
    width: 100%;
    margin: 0 auto;
    padding-top: 0px;
  }

  .copyright {
    font-size: 90%;
  }

  /*----- メールフォーム設定 -----*/
  #formwrap {
    width: 100%;
    margin: 0 auto;
    color: #555;
    line-height: 10%;
    font-size: 90%;
  }

  #formwrap table.formtable {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
  }

  #formwrap table.formtable td,
  table.formtable th {
    padding: 7px;
    text-align: left;
    display: block;
  }

  #formwrap .form-left {
    width: 80%;
  }

  /*----- コンタクトアイコン設定　-----*/
  #contact_ico {
    right: 0;
    top: 30px;
    width: 45px;
  }
}