@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

@font-face{ 
  font-family: 'sumaizero-web-font-001';
  src: url('https://sumaizero.com/wp-includes/fonts/sumaizero-web-font-001.woff') format('woff'),
url('https://sumaizero.com/wp-includes/fonts/sumaizero-web-font-001.eot') format('eot');
}

h1, h2, h3, h4, p, div, st-catid5, a {
  font-family: 'sumaizero-web-font-001' !important;
  src: url('https://sumaizero.com/wp-includes/fonts/sumaizero-web-font-001.woff') format('woff'),
url('https://sumaizero.com/wp-includes/fonts/sumaizero-web-font-001.eot') format('eot');
}

/* ACFのすべてのプレースホルダーの色を薄くする */
.acf-field input::placeholder,
.acf-field textarea::placeholder {
    color: rgba(128, 128, 128, 0.5); /* グレーの薄い色 (50%透明) */
}

#datetimepicker-container {
  display: flex;
  align-items: flex-start; /* カレンダーと時間選択の位置を揃える */
  gap: 20px;
  margin: 20px auto;
}

#datepicker {
  width: auto; /* カレンダーを自動調整 */
}

#timepicker {
  width: 150px; /* 入力フィールドの幅を固定 */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  background-color: #f9f9f9;
  cursor: pointer;
}

.ui-timepicker-list {
  position: absolute;
  top: 50px; /* 入力フィールドの下に表示 */
  left: 0;
  list-style: none;
  padding: 10px;
  margin: 0;
  border: 1px solid #ccc;
  background: #fff;
  max-height: 200px; /* 最大高さを設定 */
  overflow-y: auto; /* 縦スクロールを許可 */
  width: 150px;
  z-index: 1000;
  border-radius: 5px;
}

.ui-timepicker-list li {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
}

.ui-timepicker-list li:hover {
  background-color: #f0f0f0;
}

.reserved-time {
  color: red;
  font-weight: bold;
  cursor: not-allowed; /* 無効化を示すカーソル */
  text-decoration: line-through;
}

body.public-page {
  background-color: #fafafa;
}
.main {
  background-color: #fafafa;
}

#header-container {
  background-color: #fafafa !important;
}
#header {
 background-color: #fafafa;
 color: #000; 
}

.article h2 {
  font-size: 18px;
  background-color: #f8f8f8;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
}

#footer {
  background-color: #ffcc00;
  width: 60%;
  margin:auto;
}
#footer-in {
  width: 100%;
  margin: auto;  
}

.post-date {
  display: none;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
  #footer {
    width: 100%;
  }
  .wp-block-buttons>.wp-block-button.wp-block-button__width-25 {
    width: calc(50% - var(--wp--style--block-gap, .5em)* .75);
}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}