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

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

/* CocoonなどWordPressテーマで使用される投稿日の非表示 */
.entry-date,
.post-date,
.published,
.updated,
.time,
.date,
.entry-meta .date {
  display: none !important;
}


/* お問い合わせラジオボタンを行ごとに分ける */
.wpcf7-list-item {
  display: block;
  margin-bottom: 8px; /* 任意：行間 */
}

/* メニューの「お問い合わせ」にクラスを指定して装飾 */
.menu-header .menu-item a[href*="contact"],
.navi .menu-item a[href*="contact"] {
  background-color: #d33;
  color: #fff !important;
  padding: 8px 16px;
  text-align: center;
  font-weight: bold;
  transition: background-color 0.3s, color 0.3s; /* ← colorも追加 */
}

/* ホバー時：背景色を濃く、文字色を黒に */
.menu-header .menu-item a[href*="contact"]:hover,
.navi .menu-item a[href*="contact"]:hover {
  background-color: #b11;
  color: #000 !important; /* ← 文字色を黒に */
}


/* 通常時は細字にしておきたい場合（任意） */
.navi .menu-item a {
  font-weight: 400;          /* 通常はレギュラー */
}

/* ホバー時だけ太字にする */
.navi .menu-item a:hover {
  font-weight: 700;          /* もしくは bold */
}

/* ヘッダー内を横並びにする */
.header-in {
  display: flex;
  align-items: center;
  justify-content: space-between; /* ロゴ左、メニュー右 */
  flex-wrap: wrap; /* レスポンシブ対応 */
}

/* ロゴを左寄せ */
.logo {
  margin-right: 20px;
}


/* お問い合わせフォームのコンテナを縮小（PCなど大きい画面のみ適用） */
.contact-form-box, /* ← 必要に応じて実際のクラス名に変更してください */
.wpcf7 {
  max-width: 50%;      /* 幅を50%に制限 */
  margin: 0 auto;      /* 中央寄せ */
}

/* モバイル（画面幅768px以下）では幅を100%に戻し、影響なし */
@media screen and (max-width: 768px) {
  .contact-form-box,
  .wpcf7 {
    max-width: 100%;   /* モバイルは幅を画面いっぱいに */
    padding-left: 10px;  /* 端の余白を確保 */
    padding-right: 10px;
  }
}




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

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

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