/* ===== 中川生涯学習センター style.css ===== */

* { box-sizing: border-box; }

body {
  font-family: Verdana, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  width: 100%;
  max-width: 770px;
  margin: 0 auto;
  background-color: #cdcdcd;
  position: relative;
}

a { color: #0000ff; }
a:visited { color: #0000ff; }

/* ===== ヘッダー画像 ===== */
.inner  { margin: 0; padding: 0; line-height: 0; font-size: 0; }
.inner2 { display: none; }
.inner2 img { height: auto; width: 380px; }

img.topfull { display: block; height: auto; width: 100%; }
.inner { margin-right: 190px; }
img.top03 { display: none; }

/* ===== ナビゲーション ===== */
#nav_all { overflow: hidden; }

#nav1, #nav2, #nav3, #nav4, #nav5 {
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       100%;
  text-align:      center;
  float:           left;
  margin:          1px;
  width:           150px;
  height:          30px;
  background-color: #027eb4;
  text-decoration: none;
  color:           #ffffff;
  cursor:          pointer;
}
#nav_all a { text-decoration: none; color: #ffffff; }

#nav1:hover, #nav2:hover, #nav3:hover, #nav4:hover, #nav5:hover {
  background-color: #ffe4b5;
  color: #000000;
}

#nav_all .current {
  background-color: #BCC8DB;
  color: #000000;
}

/* ===== ページトップ ===== */
.pagetop { display: none; }

dt { margin: 5px; }

/* ===== 見出し ===== */
h2 {
  color: #003366;
  border-bottom: 2px solid #027eb4;
  padding-bottom: 4px;
}

h3 {
  background-color: #027eb4;
  color: #ffffff;
  padding: 5px 8px;
  margin: 12px 0 6px 0;
}

/* ===== メインコンテンツ ===== */
#new { overflow: hidden; }

/* ===== サイドメニュー ===== */
#sidemenu {
  float: right;
  width: 190px;
  margin: 10px 0 20px 20px;
}
#sidemenu img {
  display: block;
  width:   190px;
  height:  60px;
  object-fit: contain;
  background-color: #ffffff;
  margin:  3px 0;
  border:  2px solid #003f87;
}
#sidemenu dt { margin: 2px 0; }
#sidemenu a  { color: #0000ff; font-size: 13px; }

/* ===== 施設のご紹介 写真 ===== */
.facility-item img {
  width: 480px;
  max-width: 100%;
  height: auto;
  border: 1px solid #ccc;
  display: block;
  margin: 4px 0;
}

/* ===== フッター ===== */
footer { clear: both; }

.footer {
  padding:          6px;
  background-color: #800000;
  color:            #ffffff;
  text-align:       center;
  font-size:        13px;
}
.footer a { color: #ffffff; }

/* ===== バナー ===== */
.banner {
  background-color: #f0f0f0;
  padding:  6px;
  overflow: hidden;
}
.banner dt  { float: left; margin: 2px; }
.banner img { width: 190px; height: 60px; object-fit: contain; background-color: #ffffff; border: 1px solid #ccc; display: block; }

/* ===== 料金表 ===== */
table.empty01 {
  border-collapse: collapse;
  width:           100%;
  font-size:       12px;
  margin-bottom:   16px;
}
table.empty01 td,
table.empty01 th {
  border:          1px solid #aaa;
  padding:         4px 6px;
  text-align:      center;
  vertical-align:  middle;
}

th.roomth00 {
  background-color: #1a4e8a;
  color:       #ffffff;
  font-weight: bold;
}
th.roomth {
  background-color: #2d6fad;
  color:       #ffffff;
  font-size:   11px;
  font-weight: bold;
}

/* 割引セル色 (auto-style) */
.auto-style4  { background-color: #fff3cd; } /* 一日(10%割引) */
.auto-style5  { background-color: #ffffcc; } /* 午前午後(5%割引) */

/* 部屋名セル */
.auto-style13,
.auto-style26, .auto-style27, .auto-style28,
.auto-style29, .auto-style30, .auto-style31 {
  background-color: #dce8f5;
  font-weight: bold;
  text-align:  left;
  padding-left: 6px;
}

/* 体育室 貸切/面貸し 縦ヘッダー */
.auto-style31 {
  background-color: #2d6fad;
  color: #ffffff;
  text-align: center;
}

hr { border: none; border-top: 1px dashed #aaa; width: 95%; margin: 10px auto; }

/* ===== スマートフォン・タブレット (770px以下) ===== */
@media only screen and (max-width: 770px) {
  body {
    width: 100%;
    max-width: 770px;
    border: solid 2px #cdcdcd;
    background-color: #ffffff;
    background-image: none;
  }

  .inner  { display: none; }
  .inner2 { display: block; }
  .inner2 img { width: 100%; height: auto; }
  img.top03 { display: block; width: 100%; height: auto; }

  #nav1 {
    width: calc(100% - 4px);
    background-color: #BCC8DB;
    color: #000;
    height: 32px;
    float: none;
    margin: 1px 2px;
  }
  #nav2, #nav3, #nav4, #nav5 {
    width: calc(50% - 4px);
    height: 32px;
  }

  #main    { margin-right: 0; }
  #new     { margin-right: 0; padding: 0 4px; }
  #sidemenu { width: 100%; float: none; margin: 10px 0; overflow: hidden; }
  #sidemenu img { width: 145px; height: 46px; object-fit: contain; background-color: #ffffff; float: left; margin: 2px; }
  #sidemenu dt.auto-style8 { clear: both; }

  h3 { width: auto; }

  .footer { width: auto; }
  .banner dt  { float: left; }
  .banner img { width: 145px; height: 46px; object-fit: contain; background-color: #ffffff; }

  .pagetop {
    display:   block;
    position:  fixed;
    bottom:    0;
    right:     10px;
    width:     50px;
    background-color: #AD8C38;
    opacity:   0.7;
    text-align: center;
    padding:   4px;
  }
  .pagetop a { display: block; text-decoration: none; color: #000; }
  .pagetop:hover { background-color: #FFFF00; opacity: 0.95; }

  table.empty01 { font-size: 10px; }
  table.empty01 td,
  table.empty01 th { padding: 2px 3px; }

  /* 施設写真はスマホ幅いっぱいに */
  .facility-item img { width: 100%; }
}