/* スマホ版 */

/* ヘッダーとフッターの間のコンテンツ */
.MainBox { 
  position :absolute;
  left:0;
  /* 上に2行によって、やっと左の僅かな余白を消せる。 */
  /* 余白を消すには position を決めて left:0; をしないと消せないらしい */
  /* position:relative;では余白は消えない */
  margin-bottom:-15px;
  padding-bottom:15px;
  /* 上に2行によって、MainBoxの下に余白を表示できる まあただのお遊び */
}
.header {
  z-index: 99; /* MainBoxのpositionをabsoluteにした際にMainBoxより上になるように */
  left:0; /* 左の余白の除去 */
  position :fixed; /* ヘッダーの固定 */
  background:#eee183; /* ヘッダーの背景色 */
  width:100%; /* position :fixed;を入れる前は必要無かった。入れたらなぜかwidthが狭くなった */
  top: 0; /* これが無いとヘッダーがバナー広告みたいに画面中央に移動 */
  border-bottom: 2px solid #eee; /* ヘッダーの下のボーダーライン#eeeは薄い灰色 前は2px *//* 5pxでちょうどイラストの背景の黒と接する */
}

/* 和歌山スペイクリニック さくらねこ のタイトルのスタイル */
.header-title { /* ※ TEL・FAX 073-407-1288 */
  text-align: center; /* 休診宣言する時はPC版でleftにして赤文字にすると良い */
  color: #000;
  line-height:10px; /* 2行にならなければ10px *//* 2行にになったら18pxでないと文字が重なる */
  padding-top:20px; /* 元々30px */
  padding-left:15px; /* 元々30px */
  padding-bottom:2px;
  font-weight: bold; /* bold太字　lighter細字　normal戻す */
}
.header-title span { /* 休診宣言する時に使用「red」) */
  color:red;
}

/* TEL・FAXを右へ寄せる */
.telfax { 
  text-align: right;
  color: #070; /* TEL・FAXの文字色 */
  font-weight: bold
}

/* 営業時間：休日 のスタイル */
.hours_Holiday { 
  color:green;
  font-weight: normal; /* bold太字　lighter細字　normal戻す */
  padding-top:10px;
  padding-right:30px;
  font-size:15px;
  text-align: right;
}
/* 営業時間：休日 のフォントを調整 */
.hours_Holiday span { 
  color:red;
  font-weight: bold; /* bold太字　lighter細字　normal戻す */
}

/* リストを表示する帯のスタイル */
.gnav { 
  width: 100%;
  height: 80px; /* 元々40px～80pxにしてもあまり変わらないが、90pxにすると画像と被ってくる */
  margin: 0;
  padding: 0;
  background: #eee183; /* 青グレー(#9fb7d4)の帯を薄卵色に */
}
/* リストを表示する帯のスタイル */
.gnav .nav { 
  width: 300px; /* リストの幅 元々300px */
  height: 40px;
  margin: 0 auto;
  padding: 0;
  display: flex; /* display: flexの使い方はかなり奥深い */
}
.gnav .nav li {
  position: relative;
  list-style: none;
  box-sizing: border-box; /* 要素の幅と高さの中にpaddingとborderを含めるかどうか */
   /* box-sizing: content-box; ←初期値 paddingとborderを幅と高さに含めないのではみ出る */
   /* box-sizing: border-box; ← paddingとborderを幅と高さに含めるので要素の中で収まる */
   /* box-sizing: inherit; ← 親要素のborder-boxの値を引き継ぐ*/
  border: 1px solid #eee; /* 最初のリスト同士の境目の線のスタイル 元はborder-leftだった*/
   /* しかしborder-leftにするとリスト同士が微妙にズレる */
}

/* リスト(li a)のCSS */
.gnav .nav li a { 
  display: block; /* inline-blockにしても変わらない　理由はまだ理解してないから分からない */
  width: 60px;
  height: 40px;
  text-align: center;
  color: #fff; /* リストの文字色：白 */
  font-size: 12px;
  line-height: 3.2; /* 行間を調整するコード*/
  background: black; /* リストそのものの色：青グレー(#9fb7d4)の帯を黒に */
  box-sizing: border-box;
  text-decoration: none; /* text-decorationはテキストに下線、上線、打ち消し線、点滅などの装飾を施し、noneは無し*/
}
/* ホバーで色が変わる様にした */
.gnav .nav > li:hover > a {
  color: orange; /*1番目のリストにホバーした時文字がオレンジ色に*/
  background-color: #444444; /* #444444はこげ茶色　元はグレー:#afc6e2 */
}

/* タイトルイメージ */
.title-img {
  background-color: black; /* タイトルイメージの背景:黒 */
  text-align: center; /* タイトルイメージの中央揃え…これが無いと、画像が黒い背景よりも大きくなる */
  margin-top:170px; 
  /* 通常140px */
  /* 計2行(改行無し)だと170pxが良い*/
  /* この幅のお陰でヘッダーと被らない */
  /* 折り返しの無い短い文ならPCと同じで良い */
  /* 以下、文が長く折りたたむと重なる場合 */
  /* .header-title {line-height:10px 又は 18px(文が長く折りたたむと重なる場合)} */
  /* 1行目でも折り返しがある場合、180pxが良い*/
  /* 計3行にするなら250px(PC版は200px) 計2行で且つ1行目が折り返して2行に表示されると215pxが良い */
  /* 和歌山スペイクリニック さくらねこ
  緊急事態宣言を踏まえ、来院の自粛をお願い致します。(2行)
  妊娠の可能性のある猫はご相談下さい。
  以上3行だと240pxが丁度いい */
}

/* 下のコマンド必要無かった？上にも.header-titleあるし… */
/* .header-title {
  line-height:18px;
  text-align: left;
} */

/* タイトルイメージの伸縮 2020/3/13「.」が無いのに気づいたが無い方が正常に見れる */
/* クラスじゃないのでそりゃそうだ */
img {
  width: 95vw; /* このコードのおかげで、画面のサイズに合わせて画像が伸縮する 前は90vw*/
  margin-top:1vw; /* タイトルイメージの上の黒い隙間の幅　前は2px */
  padding-left:0vw; /* 以前は padding:7px; */
}


/* 病院紹介 */
.introduction {
  width: 100%;
  min-height: 200px;
  background: #fefde0; /* 元々#eee(灰色) 薄卵色(濃さ)#eee183>#fdfdcd>fefde0>#fffbf5 タイトルのオレンジ#ffc90d */
  margin: 0 auto;
  padding: 10px;
  text-align: left;
  font-size: 15px;
  color:#000; /* 効くが下の.intro-textのプロパティで打ち消される */
  box-sizing: border-box; /* このコードが無いとボーダーラインがはみ出るらしいがあまり意味が判らない */
}

/*  病院紹介の文字色 */
#clinic-introduction { 
  color:#99634b; /*  赤・緑・青の順　数字が大きくなるほど白に近づく */
} 

/*  まずはご予約をお願いいたします。の文字色 */
.kotoba {color:red;}
/* その他表題の文字色 */
.kotoba2 {color:#02cd88;} 

/*  以下過去の物 */
.director { 
  line-height: 5px;
  text-align:center;
  font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;}
.kotoba3 {color:#026338;} /*  院長紹介の文字色 */
.director-intro {
  color:#026338;
  font-size :15px;
}
/*  顔写真の大きさ */
.img-mine { 
  height:150px;
  width:115px;
}
/*  ↑ 前のHPのなごり。今は使ってない */

.bloglink-btn { /* ブログへ飛ぶボタン */
  padding: 3px 20px 3px 3px; /*  */
  background-color: #edae2f; /* 背景色 */
  color: white; /* 文字色 */
  display: inline-block;
  opacity: 0.9;
  border-radius: 4px; /* ボタンに丸みを */
}
.bloglink-btn:hover {
  opacity: 1; /* ボタンにホバーすると透明度0.8が解除 */
}

/* 「料金案内」の文字のスタイル */
#clinic-prices {
  text-align: left; /* 料金表の見出しを左へ */
  color:#d72521;
}
/* 手術料金には～含まれております */
.price-caption { 
  font-size:3vw;
  text-align: right;
  line-height:8px;
  color:red
}
/* 表の下の緑の文字 */
.price-caption2 { 
  font-size:3vw;
  text-align: left;
  line-height:8px;
  color:green;
  padding-left:20px;
}

/* 料金案内 */
.prices { 
  width: 100%;
  min-height: 200px;
  background: #fefde0; /* 元々#eee(灰色) 薄卵色#eee183 タイトルのオレンジ#ffc90d*/
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  font-size: 15px;
  color:#000;
  box-sizing: border-box;
}


/* 以下 tableに付けてたclassだったが、別に必要無かったっぽい */
/* .price-table { text-align:centr;} */



/* 下の tableとthは「.」が付いていなかったため無効だが問題なかった2019/10/07 */
/* と思ったがclassじゃないので有効だった2020/05/30 */
/* 料金表 */
table {
  margin-left: auto;
  margin-right:auto;
  table-layout: fixed; /* ２列の表の幅を固定、文字数が多ければ、折り返して表示 */
  width:100%; /* 料金表の幅を画面の100%に固定 */
}
/* 税込料金の文字は赤に */
table span { 
 color:red;
 font-size:80%;
}
/* 表内見出しth(=table header)=の色 */
th {background:#eee183;} 

/* F12を押して初めて分かる最初から設定されている謎の余白を消す */
table p { 
  margin-block-start: 0em;
  margin-block-end: 0em;
  color:rgb(0, 0, 0);
  background-color: #eee183;
}



/* アクセス */
#clinic-access {
  color:#2d6d4b;
}
#clinic-access span { /* Google Mapの文字色 */
  color:#dd0000; /* ※ 効かない と思ったら後で効くようになった */
}
/* アクセス */
.access {
  width: 100%;
  min-height: 150px;
  background: #fefde0; /* 元々#eee(灰色) 薄卵色#eee183 タイトルのオレンジ#ffc90d*/
  margin: 0 auto;
  padding: 10px;
  text-align: left;
  font-size: 15px;
  color:#000;
  box-sizing: border-box;
  border: 5px solid #fdfdcd; /* ★★　無くて多分誰も気づかない　★★ */
}
/* 「木広町の交差点から～」の行間を調整するコード*/
.map p {
  font-size:15px;
  line-height:15px; 
}
/* 「端末によって～」のスタイル */
.device {
  font-size: 12px;
  color:red;
  margin-left: 15px;
}
.map-img img { /* ※　追加記載 .map-imgだけでは効かない */
  width:80%;
  margin-left:7%;
}
.googlemap-text {text-align:center;}/* ※　追加記載 こっちのコードは有効だが .map-btnで指定しても効かなかった  */
.map-btn {
  /*text-align:center;  　効かないので仕方なく上記の .googlemap-textクラスを作った。 */
  padding: 6px 15px; /* 3pxだった */
  background-color: #ee0000; /* HOME文字の背景色 赤 */
  color: white; /* Google Mapの文字色 */
  display: inline-block;
  opacity: 0.7;
  border-radius: 4px; /* ボタンに丸みを */
  margin-bottom: 15px;
}
.map-btn:hover {
  opacity: 1; /* ボタンにホバーすると透明度0.7が解除 */
}

.homestyle-btn{text-align:center;
}
.home-btn {
  font-size:20px;
  padding: 3px 15px;
  background-color: #00bb00; /* HOME文字の背景色 黄緑 */
  color: white; /* 文字色 */
  display: inline-block;
  opacity: 0.8;
  border-radius: 4px; /* ボタンに丸みを */
  margin-right: 20px;
  margin-top: 10px;
  margin-bottom: 0px; /* スマホ版だと画面下が白く空いてしまうので仕方なくボトムを長く取った */
}
.SP_btn {
  text-align:center;
}
.sp_btn { /* スマホ用 Google Map のボタン */
  font-size:18px;
  padding: 3px 6px; /* 3pxだった */
  background-color: #ff0000; /* HOME文字の背景色 赤 */
  color: white; /* Google Mapの文字色 */
  display: inline-block;
  opacity: 0.9;
  border-radius: 4px; /* ボタンに丸みを */
  margin-top: 15px;
  margin-bottom: 15px;
}
a {
  text-decoration: none; /* テキストに装飾を施し、noneは下線を打ち消す */
}

.gmap { /* 下と合わせてGoogleマップを画面幅に合わせて表示できるコード */
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.gmap iframe,
.gmap object,
.gmap embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.empty { /* スマホ版で下の白い空間を埋めるため */
  width: 100%;
  min-height: 50px;
  background: #fefde0;
}

#clinic-introduction {
  margin-top:-180px;
  padding-top:180px;
}
#clinic-prices {
  margin-top:-180px;
  padding-top:180px;
}
#clinic-access { 
  margin-top:-180px;
  padding-top:180px;
}
#vac2000 { 
  margin-top:-180px;
  padding-top:180px;
}

.footer {
  bottom:0;
  height: 80px; /* PCでは120pxだがスマホで縦長になり過ぎたので */
  width:100%;
  line-height:15px;
  background:#eee183;
  text-align:center;
}  
.footer-left { /* 空div　中身無し */
  padding-top:20px; /* footer-rightにmargin-topを指定するとおかしくなるので止む無く */
}
.footer-right a {
  float:right;
  text-decoration: none;
  font-size:18px;
}
.facebook { /* 下の .btn と一緒にしても問題なく動くがなごりで */
  background-color: #3b5998; /* Facebookの周りの文字色　薄い紺 */
  margin-left: 15px; /* スマホで左に寄りすぎなのでマージンを作った */
  margin-right: 10px; /* 30pxだったがスマホで２行に分かれるのが嫌だったので狭く */
}
.btn { /* Facebookのボタン */
  padding: 8px 8px; /* PCでは、8px 24px */
  color: white;
  display: inline-block;
  opacity: 0.8;
  border-radius: 4px;
}
.btn:hover {
  opacity: 1; /* ボタンにホバーすると透明度0.8が解除 */
}
/* ※　FontAwesome スタイル */
.fab { /* Facebookのアイコン */
  margin-right: 5px;
}
.far { /* 指のアイコン */
  margin-left: 10px;
}
.Out_of_MainBox {
  position:fixed; z-index:-1;left:0;bottom:0;
  /* 上のコード指定とMainBoxに マイナスmargin-bottomとpadding-bottom を指定すると表示する事が出来る。 */
  /* 注意すべきはここはあくまでMainBoxよりz軸が下の領域。リンクを貼ってもクリック出来ない。 */
  height: 120px;/* ここでいくら数値を上げても、MainBoxで作った余白以上にはならない */
  width:100%;
  background: #3b5998; /* 紺色 */
}