@charset "shift_jis";
/* CSS Document */

/*
 共通・indexページ
*/
/* ボディ */
body{
    background-color:#3399ff;
    font-family:"メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    margin:0 auto;
    padding:0;
}

/* コンテナ枠 */
#container{
    width:900px;
    margin:0px auto;
    position:relative;
    background-color:#ffffff;
    border: 1px solid #cccccc;
    padding: 0px;
}

body > #container{
    height: auto;
}

/* ヘッダー */
#header{
    height:130px;
    padding:0;
}

#header h1 {
    color: #333333;
    font-size: small;
    font-weight: normal;
    padding: 0px 5px;
}

/* ロゴ画像 */
.logo {
    float:left;
    width: 500px;
    padding: 10px;
}

/* 問合せ先 */
.address {
    display: block;
    float: right;
    margin-right: 20px;
    background: #ffcc66;
    box-shadow: 0px 0px 0px 7px #ffcc66;
    border: dashed 1px #ff9933;
    padding: 10px 15px;
    font-size: small;
    color: #666666;
    text-align: center;
}

.address .bus {
    font-size: medium;
    padding: 3px 0px;
    color: #ff3300;
}

.address .phone {
    font-size: x-large;
    color: #ff3300;
}

/* メニュー */
.globalNav {
    list-style: none;
    overflow: hidden;
    background: #3399ff
}

.globalNav li {
    float: left;
    border-right: 5px solid #3333ff;
}

.globalNav li a {
    display: block;
    padding: 20px;
    width: 255px;
    text-align: center;
    text-decoration: none;
    font-size: large;
    color: #ffffff;
    background: #3399ff;
}

.globalNav li a:hover {
    background: #66ccff;
}

.globalNav li.active a {
    background: #3366ff;
    color: #ffffff;
}

/* メイン枠 */
#main {
    margin: 0px auto;
    padding: 10px 0px;
    width: 900px;
    min-height: 600px;
}

/* トップ画像 */
#slideshow {
    position: relative;
    width: 900px;
    height: 530px;
    margin: 0 auto;
    text-align: center;
}

#slideshow img {
    position: absolute;
    width: 880px;
    padding: 10px;
    top: 0px;
    left: 0px;
    z-index: 8;
    opacity: 0.0;
}

#slideshow img.active {
    z-index: 10;
    opacity: 1.0;
}

#slideshow img.last-active {
    z-index: 9;
}

/* 見出し */
h2 {
    padding: 10px;
    margin: 0px 10px;
    color: #666666;
    font-size: large;
    background: #ffcc66;
    border-left: solid 5px #ff9933;
}

/* お知らせ */
.notice {
    text-align: center;
    margin: 20px 0px;
}

.notice iframe{
    width: 600px;
    height: 200px;
    border: double 3px #3399ff;
    color: #333333;
}

/* twitter */
.twitter {
    margin: 20px 0px;
}

.buttonX {
  background-color: #fff;
  border: solid 2px #3399ff;
  color: #3399ff;
  border-radius: 20px;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 1em;
  box-shadow: 0 5px 0 #3399ff;
  display: inline-block;
  transition: .3s;
}
.buttonX:hover {
  color: #3399ff;
  transform: translateY(5px);
  box-shadow: 0 0 0 #3399ff;
}

/* テキストエリア */
.text {
    padding: 20px;
    color: #333333;
    line-height: 1.2;
}

.text p {
    text-align: right;
}

/* センタリング */
.center {
    text-align: center;
}

/* 診療時間表 */
.time {
    margin: 20px auto;
}

.time th, .time td {
    width: 80px;
    height: 60px;
    border: solid 2px #ffffff;
    text-align: center;
    vertical-align: middle;
}

.time th {
    font-size: x-large;
    background: #3399ff;
    color: #ffffff;
}

.time th p {
    font-size: medium;
}

.time .firstcol {
    width: 160px;
}

.time td {
    font-size: xx-large;
    background: #99ccff;
    color: #666666;
}

.time td .xl {
    font-size: x-large;
}

.time td .s {
    font-size: small;
}

/* フッター */
#footer{
    width:100%;
    background-color:#3366ff;
    font-size:80%;
    font-style:normal;
    text-align:center;
    margin: 0px auto;
    padding: 5px 0px;
    color:#ffffff;
    bottom:5px;
    border:none;
}

/*
 診療案内ページ
*/
/* 箇条書 */
.service {
    border-top: dashed 1px #ffcc99;
    border-bottom: dashed 1px #ffcc99;
    padding: 10px 10px 10px 30px;
    color: #333333;
    position: relative;
}

.service li {
    line-height: 1.5;
    padding: 2px 0px;
    list-style-type: none!important;
}

.service li:before {
    font-family: "Font Awesome 5 Free";
    content: "\f058";
    position: absolute;
    left : 10px;
    color: #ff9966;
}

/* 設備写真 */
.equip {
    position: relative;
    float: left;
    margin-right: 30px;
    padding: 5px 0px;
}

.text .small {
    padding: 10px;
    font-size: small;
}

.clear {
    clear: both;
}

/*
 スタッフ紹介ページ
*/
/* 写真 */
.profile {
    position: relative;
    float: left;
    top: 30px;
    left: 10px;
    margin-right: 30px;
}

.profile figcaption {
    position: absolute;
    font-size: 100%;
    color: #666666;
    top: 120px;
    left: 30px;
    text-align: center;
}

/* 経歴 */
.bio {
    padding: 5px 0px;
    overflow: auto;
}

.bio li {
    padding: 3px 0px;
    list-style-type: none;
    overflow: auto;
}

/*
 求人情報ページ
*/
/* 求人概要 */
.recruit {
    margin: 20px auto;
}

.recruit th, .recruit td {
    border: solid 1px #333333;
    vertical-align: middle;
    padding: 10px;
    line-height: 1.3;
}

.recruit th {
    background: #3399ff;
    color: #ffffff;
}

.recruit td {
    background: #ffffff;
    color: #666666;
}

/*
 お問合せフォーム
*/
form {
  margin: 10px auto;
  width: 600px;
  padding: 20px;
  border: 1px solid #CCC;
  border-radius: 1em;
}

form div + div {
  margin-top: 1em;
}

label {
  display: inline-block;
  width: 120px;
  text-align: right;
}

input, textarea {
  font: 1em sans-serif;
  width: 400px;
  box-sizing: border-box;
  border: 1px solid #999;
}

input[type="radio"]{
  width: 100px;
  padding: 0;
}

input:focus, textarea:focus {
  border-color: #000;
}

textarea {
  vertical-align: top;
  height: 10em;
}

.button {
  padding-left: 120px; /* label 要素と同じサイズ */
}

button {
  margin-left: .5em;
}

ul{
  padding-left:0;
}

li{
  list-style:none;
}

.calendar-wrap {
  margin: 0 auto;
  padding: 20px;
  max-width: 1110px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
@media (max-width: 767.98px) {
  .calendar-wrap {
    display: flex;
    flex-direction: column;
  }
}
.calendar {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.calendar th,
.calendar td {
  border: 1px solid #000;
  text-align: center;
  padding: 10px;
  font-size: 14px;
}
.calendar th {
  padding: 6px 10px;
  font-weight: bold;
}
.calendar td {}
@media (max-width: 767.98px) {
  .calendar th,
  .calendar td {
    padding: 6px;
    font-size: 12px;
  }
  .calendar th {
    padding: 3px 6px;
  }
}

.calendar .sun {
  color: #e17f7e;
}
.calendar .sat {
  color: #7ab6f3;
}
.calendar .mute {
  color: #aaa;
}
.calendar .today {
  background-color: #f8e4e2;
}
.calendar .off {
  color: #666666;
  background-color: #cccccc;
}
.calendar .pmoff {
  background-color: #e7f6fd;
}