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

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

/* メインコンテンツ背景色 */
body {
  color: #333;
}

/* ページタイトル・コンテンツタイトル(H1,H2)を中央揃え */
.article-header,
.wp-block-column,
.wp-block-heading,
#archive-title {
  text-align: center;
}
/* ページタイトル・コンテンツタイトル(H1,H2)の設定 */
.entry-title,
.contents-title,
#archive-title {
  font-size: 35px;
  margin-top: 50px;
  margin-bottom: 90px;
  /* タイトルの下に短い下線を引く */
  position: relative;
}
/* タイトルの下に短い下線を引く */
.entry-title:before,
.contents-title:before,
#archive-title:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px; /*下線の上下位置調整*/
  display: inline-block;
  width: 50px; /*下線の幅*/
  height: 2px; /*下線の太さ*/
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%); /*位置調整*/
  background-color: #666666; /*下線の色*/
}

p {
  font-size: 16px;
}

/* 見出しのデザインリセット */
/*H2 */
.entry-content h2 {
  border: none;
  background: none;
  padding: 0;
}

/* H3 */
.entry-content h3 {
  border: none;
  background: none;
  padding: 0;
}

/* H4 */
.entry-content h4 {
  border: none;
  background: none;
  padding: 0;
}

/* H5 */
.entry-content h5 {
  border: none;
  background: none;
  padding: 0;
}

/* H6 */
.entry-content h6 {
  border: none;
  background: none;
  padding: 0;
}

/************************************
** ヘッダー
************************************/
/* メニューバーの高さ */
#navi .navi-in > ul li {
  height: 45px;
  line-height: 45px;
}

/* ナビゲーション設定 */
.navi-in a {
  font-size: 16px;
}

/* ナビゲーション「予約する」のみの設定 */
li:nth-child(5) {
  /*「予約する」だけ背景色変更 */
  background-color: #bba474;
  /*「予約する」の要素の幅を文字の幅に合わせる */
  display: inline-block;
}

/************************************
** 投稿の詳細画面
************************************/
/* 一覧へ戻るボタン*/
.back-to-archive {
  text-align: end;
}

/************************************
** モバイルスライドメニュー
************************************/
/* スライドメニューの背景透過*/
#navi-menu-input:checked ~ #navi-menu-content {
  opacity: 0.9;
}

/* 文字色*/
.menu-drawer a {
  color: #4e3f16;
}

/* 文字の高さ*/
.mobile-menu-buttons {
  line-height: none;
}

/************************************
** TOPページ
************************************/
.main {
  padding-top: 100px;
}

/*コンテンツタイトルの余白*/
.entry-content h2 {
  margin-bottom: 90px;
}

/*メイン画像と背景色をずらす*/
.main-image {
  margin: auto;
  width: auto;
  position: relative;
}
.main-image::after {
  content: " ";
  position: absolute;
  left: -180px;
  bottom: -90px;
  width: 100%;
  height: 100%;
  background-color: #e6eff1;
  z-index: -1;
}

/*投稿日を非表示*/
.date-tags {
  display: none;
}

/*ボタンの上の余白*/
.wp-block-buttons {
  margin-top: 50px;
}

/*ボタンの背景色*/
.wp-block-button__link {
  background-color: #8b947c;
}

/*ボタンにhover時の文字色・背景色*/
.wp-block-button__link:hover {
  color: #fff;
  opacity: 0.9;
}

/*topへ戻るボタン*/
.go-to-top-button {
  background-color: #bba474;
  color: #fff;
}

/*----------------
  CONCEPTコンテンツ
------------------*/
/*文章の余白*/
.wp-block-column {
  padding-left: 30px;
}

/*--------------
  NEWSコンテンツ
----------------*/
.wp-block-heading {
  margin-top: 200px;
}

/*コンテンツタイトルの余白*/
.wp-block-column h2 {
  padding-top: 10px;
  margin-bottom: 40px;
}

/* ===== 通常投稿 ===== */
/* 通常投稿：縦並び */
.normal-posts .new-entry-card {
  display: block;
  padding: 10px 0;
  border: none; /* いったんリセット */
}

.normal-posts .new-entry-card-thumb {
  display: none; /* アイキャッチ削除 */
}

.normal-posts .new-entry-card-title {
  font-size: 16px;
  font-weight: bold;
}

.normal-posts .new-entry-card-date {
  display: block;
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

/* ===== カスタム投稿 ===== */
/* ---------- PC: 横3列、カード高さ揃え ---------- */
.custom-blogs {
  display: flex !important;
  flex-wrap: wrap;
  gap: 20px;
}

/* 子要素 a タグ */
.custom-blogs > a {
  flex: 0 0 calc(33.333% - 20px);
  max-width: calc(33.333% - 20px);
  display: flex;
  flex-direction: column;
  text-align: center; /* 中央揃え */
  box-sizing: border-box;
  margin-bottom: 20px;
}

/* カード内部 */
.custom-blogs .new-entry-card {
  display: flex;
  flex-direction: column; /* 上から下 */
  align-items: center; /* 横中央 */
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #eee;
  padding: 10px;
  background: #fff;
}

/* カード内コンテンツ幅を100% */
.custom-blogs .new-entry-card-content {
  width: 100% !important;
  text-align: center !important; /* 中央揃え */
}

/*テキストを中央揃えに強制*/
custom-blogs .new-entry-card-title,
.custom-blogs .new-entry-card-date {
  float: none !important; /* float解除 */
  text-align: center !important; /* 中央揃え強制 */
  width: 100% !important;
}

/* アイキャッチ画像 */
.custom-blogs .new-entry-card-thumb img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
  display: block;
  margin: 0 0 10px 0;
}

/* タイトル */
.custom-blogs .new-entry-card-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
  text-align: center;
}

/* 日付 */
.custom-blogs .new-entry-card-date {
  display: block !important;
  font-size: 12px;
  color: #888;
  text-align: center;
  margin-top: auto; /* 下に固定 */
}

/*---------------------------
  アクセス・お問い合わせコンテンツ
-----------------------------*/
/*リンク下線を消す・文字色を白*/
.link-text {
  text-decoration: none;
  color: #fff;
}

/* リンクにhoverした時の文字色 */
.link-text:hover {
  color: #fff;
}

table:not(.has-border-color) :where(th, td) {
  padding: 22px 0;
}

table {
  border-bottom: 1px #4e3f16 solid;
}

/************************************
** アーカイブページ
***********************************/
/*通常投稿のタイトルのアイコン削除 */
.fa-folder-open {
  display: none;
}

.ect-3-columns .entry-card-snippet {
  display: none;
}

/************************************
** お問い合わせページ
************************************/
/* 送信後メッセージを中央揃え */
.wpcf7-response-output {
  text-align: center;
}

/* 承認前の送信ボタン */
input[type="submit"]:disabled {
  background-color: #666;
  border-color: #666;
}

/* 承認後の送信ボタン */
input[type="submit"] {
  background-color: #8b947c;
  border-color: #8b947c;
  color: #fff;
}

/* reCAPTCHAのリンクの文字色 */
a {
  color: #8b947c;
}
a:hover {
  color: #8b947c;
}

/************************************
** フッター
************************************/
/*フッターコンテンツの幅を100％にする*/
.footer-bottom-content {
  width: 100%;
}

.footer-logo {
  font-size: 25px;
  margin-bottom: 40px;
}

/*フッターコンテンツの余白*/
.footer-bottom {
  margin-top: 40px;
  margin-bottom: 40px;
}

/*ナビメニューのサイズと余白*/
.navi-footer-in > .menu-footer {
  margin-bottom: 40px;
  font-size: 14px;
}

/*ナビのhover時の背景色をなし（初期値）*/
#navi-footer-in a:hover {
  background-color: #8b947c;
}

/*コピーライトのサイズ*/
.copyright {
  font-size: 12px;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1204px以下*/
@media screen and (max-width: 1204px) {
  /*ヘッダーとメインの余白をなくす*/
  .header-container {
    display: none;
  }
  /*スライドメニューの文字の余白*/
  .menu-drawer li {
    margin: 10px;
  }
}

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

/*834px以下*/
@media screen and (max-width: 834px) {
  /*必要ならばここにコードを書く*/
  /*ボタンの幅*/
  .wp-block-buttons > .wp-block-button.wp-block-button__width-25 {
    width: 45%;
  }
}

/* ===== スマホ対応(TOPカスタム投稿の表示) ===== */
@media (max-width: 768px) {
  .custom-blogs {
    display: block !important; /* 親はブロック */
  }

  .custom-blogs > a {
    display: block !important; /* float/inline-block対策 */
    float: none !important; /* float解除 */
    width: 100% !important; /* 幅100% */
    max-width: 100% !important;
    margin-bottom: 20px;
  }
}

/*481px以上*/
@media screen and (min-width: 481px) {
}

/*480px以下*/
@media screen and (max-width: 480px) {
  /*必要ならばここにコードを書く*/
  /*ボタンの幅*/
  .wp-block-buttons > .wp-block-button.wp-block-button__width-25 {
    width: 80%;
  }
}