@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く

  /*ボタン背景色*/

.cta-box {
background-color: #ffffff;
color: #669966;
padding: 20px;
}


************************************/
/*必要ならばここにコードを書く*/

div.cal_wrapper {
    padding: 10px 0px;
}
div.schedule_wrapper {
    padding: 10px 0px;
    width: 310px;
    border: solid 1px #CCC;
    border-radius: 5px;
    box-shadow: 1px 1px 3px #666;
}
div.schedule_wrapper h3 {
    padding: 0px 10px;
    font-weight: normal;
    margin: 0px;
    font-size: 12px;
    color: #666;
}
div.schedule_wrapper div.schedule_list {
    padding: 0px 10px;
    margin: 0px;
}
 
div.cal_wrapper table.cal tr th p {
    float: left;
    padding: 5px;
    margin: 0px;
    color: #666;
    font-size: 12px;
}
div.cal_wrapper table.cal tr th div.cal_ui {
    float: right;
}
 
div.cal_wrapper table.cal tr th div.cal_ui input {
    border: solid 1px #CCC;
    background-color: #FFF;
    font-size: 12px;
    margin: 0px 1px;
    padding: 1px 3px;
    border-radius: 2px;
}
div.cal_wrapper table.cal td {;
    border: solid 1px #000;
}
table{
  border-collapse: collapse;
}
div.cal_wrapper table.cal tr td {
    font-size: 10px;
    text-align: center;
    padding: 2px
}
div.cal_wrapper table.cal tr.headline td {
    padding: 5px 0px;
}
div.cal_wrapper table.cal tr.headline {
    background-color: #EEE;
}
/*カレンダー表組の装飾*/
div.cal_wrapper table.cal tr td div {
    position: relative;
    padding: 5px 9px;/*日付の幅*/
    font-size: 10px;
    text-align: center;
    background-color: #FFF;
    border-radius: 3px;
}
div.cal_wrapper table.cal tr td div span {
    display: none;
    position: absolute;
    top: 20px;
    left: 0px;
    width: 180px;
    border: solid 1px #EEE;
    background-color: #FFF;
    text-align: left;
    padding: 5px;
    z-index: 10;
    color: #000;
    font-weight: normal;
    line-height: 1.5em;
    box-shadow: 1px 1px 3px #666;
}
 
/* Holydayの装飾 */
div.cal_wrapper table.cal tr td div.Holyday {
    font-weight: bolder;
    color: red;/*祝日の文字色。赤色にしてます。*/
    background-color: #FFFACD;/*祝日の背景色。黄色にしてます。*/
}
 
div.cal_wrapper table.cal tr td div.Holyday, div.cal_wrapper table.cal tr td div.Sun, div.cal_wrapper table.cal tr td div.Sat {
    background-color: #FFFACD;/*日曜日・土曜日の背景色。黄色にしてます。*/
}
 
 
div.cal_wrapper table.cal tr td div.Today {
  color: #66ccff;/*当日の文字色。見本では水色にしてます。*/
    font-weight: bolder;
}
 
/*過去日付の装飾*/
div.cal_wrapper table.cal tr td div.backward {
    color: #CCC;
    font-weight: normal;
    background-color: #FFF;
    border-radius: 3px;
}
 
.sat {
  color: blue;
  background: #D0E8FF;/*「土曜日」見出し部分の背景色。水色にしてます。*/
  font-weight: bold;
}
 
.sun {
  color: red;
  background-color: #FDDFFC;/*「日曜日」見出し部分の背景色。ピンク色にしてます。*/
  font-weight: bold;
}
 
.Sun {
  color: red;/*日曜日の文字色。見本では赤色にしてます。*/
  font-weight: bold;
}
 
.Sat {
  color: blue;/*土曜日の文字色。見本では赤色にしてます。*/
  font-weight: bold;
}
/*フッターロゴサイズ*/
.footer-bottom-logo .logo-image {
	padding: 0;
	max-width: 1500px;
}

.footer-bottom-logo img {
	height: 100px;
	width: auto;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/*1023px以下（タブレット・モバイル共通）*/
@media screen and (max-width: 1023px){

  /* === 全体のオーバーフロー防止 === */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* === モバイルフッターメニューを確実に表示 === */
  .mblt-header-and-footer-mobile-buttons .mobile-menu-buttons,
  .mblt-footer-mobile-buttons .mobile-menu-buttons {
    display: flex !important;
    align-items: stretch;
  }

  .mblt-header-mobile-buttons .mobile-header-menu-buttons,
  .mblt-header-and-footer-mobile-buttons .mobile-header-menu-buttons {
    display: flex !important;
  }

  /* === ヘッダーレスポンシブ対応 === */
  .header-container,
  .header-container-in,
  .header-in,
  #header-container {
    max-width: 100% !important;
    overflow: hidden;
  }

  .logo-header img {
    max-width: 100%;
    height: auto;
  }

  /* === メインコンテンツエリア === */
  #container,
  #content,
  .content,
  .wrap {
    max-width: 100% !important;
    overflow-x: hidden;
  }

  .wrap {
    flex-direction: column;
    padding: 0 10px;
  }

  #main {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 20px 15px;
  }

  /* === サイドバー非表示（モバイル時） === */
  #sidebar {
    display: none;
  }

  /* === テーブルのレスポンシブ対応 === */
  #main table,
  .entry-content table,
  .article table {
    max-width: 100% !important;
    width: 100% !important;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #main table.has-fixed-layout {
    table-layout: auto !important;
  }

  /* === Smart Sliderレスポンシブ対応 === */
  .n2-ss-align,
  .n2-ss-margin,
  .n2-ss-section-main-content,
  [class*="n2-ss"] {
    max-width: 100% !important;
  }

  /* === ナビゲーションメニュー非表示（モバイル時） === */
  #navi {
    display: none;
  }

  /* === 画像のはみ出し防止 === */
  img,
  iframe,
  video,
  embed,
  object {
    max-width: 100% !important;
    height: auto;
  }

  /* === カレンダーウィジェットのレスポンシブ対応 === */
  div.schedule_wrapper {
    width: 100% !important;
    max-width: 310px;
  }

  div.cal_wrapper {
    max-width: 100%;
    overflow-x: auto;
  }

  /* === フッターロゴ === */
  .footer-bottom-logo .logo-image {
    max-width: 100%;
  }

  .footer-bottom-logo img {
    max-width: 100%;
    height: auto;
  }
}

/*834px以下（タブレット縦・モバイル）*/
@media screen and (max-width: 834px){

  .header-in .wrap {
    flex-direction: column;
    align-items: center;
  }

  /* テーブルセルの文字サイズ調整 */
  #main table td,
  #main table th {
    font-size: 14px;
    padding: 8px 6px;
  }

  /* コンテンツ内の余白調整 */
  .entry-content {
    padding: 0 5px;
  }
}

/*480px以下（スマートフォン）*/
@media screen and (max-width: 480px){

  /* ヘッダーの電話番号・予約エリアのレスポンシブ */
  .header-in .wrap {
    padding: 0 5px;
  }

  /* テーブルの文字サイズをさらに小さく */
  #main table td,
  #main table th {
    font-size: 12px;
    padding: 6px 4px;
    word-break: break-all;
  }

  /* フッター下部の余白（モバイルメニュー分） */
  .mblt-footer-mobile-buttons #container,
  .mblt-header-and-footer-mobile-buttons #container {
    padding-bottom: 60px;
  }
}