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

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

/*■■■■■■■■■■■■■■■■■■
  【全体】全体に関係するスタイル
■■■■■■■■■■■■■■■■■■*/
/*■■■ リンクのアンダーライン無し ■■■*/
a {
  text-decoration: none;
}

/*■■■ カテゴリやタグを押してリストとして出力される投稿同士の間隔 ■■■*/
/* リスト同士に指定されているgapを0に */
.list {
  row-gap: 0px !important;
}

/* リストのeyecatchと文章全体の余白調整 */
.a-wrap {
    padding: 1px;
}

/*■■■■■■■■■■■■■■■■■■
  【全体】トップメニュー
■■■■■■■■■■■■■■■■■■*/
/*■■■ トップメニューのホバー時の色指定 ■■■*/
#navi-in a:hover .item-label {
    color: #b26201 !important;
}
.entry-card-wrap:hover .entry-card-title {
    color: #b26201 !important;
}

/*■■■■■■■■■■■■■■■■■■
  【固定】文字の大きさ
■■■■■■■■■■■■■■■■■■*/
/*■■■ トップページのnews&informationの下部余白を削除 ■■■*/
.article h2, .article h3, .article h4, .article h5, .article h6 {
    margin-bottom: 0px;
}

/*■■■ トップページのnews&informationのリストの左側の余白調整 ■■■*/
ul {
    padding-inline-start: 10px !important;
}

/*■■■ トップページの最近の投稿のリストの下側の余白調整 ■■■*/
.wp-block-latest-posts__list {
    margin-block-end: 0px !important;
}

.wp-block-latest-posts.is-grid li {
	margin-block-end: 1px;
}

/*■■■ 最近の投稿の抜粋の文字の大きさ ■■■*/
.wp-block-latest-posts__post-excerpt {
  font-size: 13px; /* 文字の大きさを**pxに設定 */
}

/*■■■■■■■■■■■■■■■■■■
  【投稿】アイキャッチ画像、投稿の画像ギャラリー
■■■■■■■■■■■■■■■■■■*/
/*■■■ 投稿ページのeyecatch下余白 ■■■*/
.eye-catch {
  margin-bottom: 1px;
}
.entry-content {
  margin-top: 0px;
}
.entry-content.cf {
  margin-top: 0px !important;
}
.date-tags {
  margin-bottom: 0px;
}

/*■■■ 投稿のギャラリーの画像同士の間隔 ■■■*/
.wp-block-gallery {
  gap: 1px !important; /* 画像の間隔を1pxにする */
}

.wp-block-gallery img {
  margin: 0px !important; /* 画像の余白をなくす */
}

/*■■■■■■■■■■■■■■■■■■
  【投稿】 投稿本文
■■■■■■■■■■■■■■■■■■*/
/*■■■ 建築の投稿下部の建築情報位置揃え@日本語 ■■■*/
.project-info .info-label-jpn {
    display: inline-block;
    width: 75px;
    text-align: left;
	margin-right: 5px;
}

/*■■■ 建築の投稿下部の建築情報位置揃え@英語 ■■■*/
.project-info .info-label-eng {
    display: inline-block;
    width: 120px;
    text-align: left;
	margin-right: 5px;
}

/*■■■ コロン等でA:Bのように書く文が複数行の時、Bの文頭を揃える(Aの幅300) ■■■*/
.list_300-info .info-label {
    display: inline-block;
    width: 300px;
    text-align: left;
    margin-right: 5px;
}
/*■■■ コロン等でA:Bのように書く文が複数行の時、Bの文頭を揃える(Aの幅250) ■■■*/
.list_250-info .info-label {
    display: inline-block;
    width: 250px;
    text-align: left;
    margin-right: 5px;
}

/*■■■ コロン等でA:Bのように書く文が複数行の時、Bの文頭を揃える(Aの幅150) ■■■*/
.list_150-info .info-label {
    display: inline-block;
    width: 150px;
    text-align: left;
    margin-right: 5px;
}

/*■■■ コロン等でA:Bのように書く文が複数行の時、Bの文頭を揃える(Aの幅120) ■■■*/
.list_120-info .info-label {
    display: inline-block;
    width: 120px;
    text-align: left;
    margin-right: 5px;
}

/*■■■ 投稿の段落を両端揃え ■■■*/
.wp-block-column {
  text-align: justify;
}


/*■■■■■■■■■■■■■■■■■■
  【投稿】本文下部のカテゴリー、タグ
■■■■■■■■■■■■■■■■■■*/
/*■■■ ホバー時 ■■■*/
/* ホバー時のスタイル */
.entry-categories a:hover {
    color: #871800;
}

.entry-tags a:hover {
    color: #b26201 !important;
    background-color: #f4f3f1;
}

/*■■■■■■■■■■■■■■■■■■
  【全体】フッターメニュー
■■■■■■■■■■■■■■■■■■*/
/*■■■ フッターメニューのホバー時の色指定 ■■■*/
#footer .widget_nav_menu a:hover {
    color: #b26201;
}
#footer .widget_recent_entries a:hover {
    color: #b26201;
}

/*■■■ フッターメニューの間隔 ■■■*/
 /* フッターメニュー同士の間隔 */
#footer .widget_nav_menu ul li {
    line-height: 0.9;
    padding-left: 15px; /* フッターのメニューリストを右にずらす */
}

/* フッター最近の投稿同士の間隔 */
#footer .widget_recent_entries ul li {
    line-height: 1.2;
    padding-left: 15px; /* 最近の投稿のリスト左端を右にずらす */
}

/*■■■■■■■■■■■■■■■■■■
  【全体】検索ボックス
■■■■■■■■■■■■■■■■■■*/
/*■■■ 検索ボックス入力欄とボタンの背景色と文字色 ■■■*/
/* 検索ボックス入力欄 */
.search-box.input-box .search-edit {
    background-color: #f4f3f1; /* 背景色（薄いグレー） */
    color: #b2aba1; /* 文字色（濃いグレー） */
    border: 1px solid #ccc; /* 枠線の色 */
    padding: 8px; /* 内側の余白 */
    vertical-align: middle;  /* 入力欄の中央揃え */
    margin-left: 15px; /* ここで左側に余白を追加 */
}
.search-box.input-box {
    width: 85%; /* 全体の横幅を50%に設定 */
}

/* 検索ボタンの背景色とアイコンの色 */
.search-box.input-box .search-submit {
    background-color: #b2aba1; /* ボタンの背景色（薄いグレー） */
    color: #fff; /* アイコンの色（白） */
    border: none; /* 枠線を消す */
    padding: 5px 5px; /* ボタンのサイズ */
    cursor: pointer; /* カーソルをポインターに */
    vertical-align: middle; /* ボタンを縦方向で中央揃え */
    height: 20px; /* 高さを調整 */
    margin-top: -4px;  /* この値は実際の見た目に合わせて調整 */
    margin-right: -14px;
}
/* 検索ボタンのホバー時の色 */
.search-box.input-box .search-submit:hover {
    background-color: #b26201 !important; /* ホバー時の色 */
}

/*■■■■■■■■■■■■■■■■■■
  使わないものを非表示
■■■■■■■■■■■■■■■■■■*/
/*■■■ カテゴリアイコンの非表示 ■■■*/
.fa.fa-folder-open {
	display: none !important; /* カテゴリをリスト表示した時のタイトル(=カテゴリ)のアイコンを非表示 */
}

/*■■■ 写真上のラベルの非表示 ■■■*/
.cat-label {
	display: none !important; /* 写真左上のカテゴリラベルを非表示 */
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/* 1023px以下（デスクトップやラップトップ） */
@media screen and (max-width: 1023px) {
	/*■■■ ヘッダーメニューの段を指定 ■■■*/
    #navi .navi-in > .menu-mobile {
        display: flex;
        flex-wrap: wrap; /* 必要に応じて折り返す */
        justify-content: center; /* メニューを中央寄せに */
    }

    #navi .navi-in > .menu-mobile > li {
        flex: 1 1 auto; /* 均等配置 */
        min-width: 30%; /* メニュー項目の最小幅を設定 */
        text-align: center; /* テキストを中央寄せ */
    }
}

/* 834px以下（iPad） */
@media screen and (max-width: 834px) {
  #navi {
    display: none !important;  /* ナビはページ下部に出るので、上部メニューは取り止め */
  }
  .logo-header {
    margin-top: 10px !important; /* logo上に余白 */
    margin-bottom: 10px !important; /* logo下に余白 */
  }
  main.main, div.sidebar {
    padding: 0px 15px; /* logoと本文の間、本文両側の余白調整 */
  }
}

/* 768px以下（iPad mini） */
@media screen and (max-width: 768px) {
  /* 特に追加のスタイルなし（共通スタイルが適用される） */
}

/* 480px以下（スマートフォン） */
@media screen and (max-width: 480px) {
  /*■■■■■■■■■■■■■■■■■■
   【投稿】 投稿ページ
  ■■■■■■■■■■■■■■■■■■*/
  .entry-title, .article h2 {
    padding: 10px 0px; /* 投稿タイトルの左側余白調整 */
  }
  /*■■■■■■■■■■■■■■■■■■
   【固定】 HOME
  ■■■■■■■■■■■■■■■■■■*/
  /*■■■ 最近の投稿の写真 ■■■*/
  .wp-block-latest-posts__featured-image.alignleft {
    margin-bottom: 10px; /* 右の文字列回り込み制御 */
  }
  /*■■■ 最近の投稿のタイトル ■■■*/
  .wp-block-latest-posts__post-title {
    display: flex;
    align-items: flex-start; /* 上端を揃える */
    line-height: 1.4em; /* 行高さ指定 */
  }
  /*■■■ 最近の投稿の抜粋 ■■■*/
  .wp-block-latest-posts__post-excerpt {
    line-height: 1.6em; /* 行高さ指定 */
  }
}

  /*■■■■■■■■■■■■■■■■■■
  【投稿】 投稿本文
  ■■■■■■■■■■■■■■■■■■*/
  /*■■■ コロン等でA:Bのように書く文が複数行の時、Bの文頭を揃える(Aの幅300) ■■■*/
  .list_300-info .info-label {
      width: auto;  /* スマートフォンでは幅を自動に戻す */
  }
}  /*■■■ コロン等でA:Bのように書く文が複数行の時、Bの文頭を揃える(Aの幅250) ■■■*/
  .list_250-info .info-label {
      width: auto;  /* スマートフォンでは幅を自動に戻す */
  }
}  /*■■■ コロン等でA:Bのように書く文が複数行の時、Bの文頭を揃える(Aの幅150) ■■■*/
  .list_150-info .info-label {
      width: auto;  /* スマートフォンでは幅を自動に戻す */
  }
}  /*■■■ コロン等でA:Bのように書く文が複数行の時、Bの文頭を揃える(Aの幅120) ■■■*/
  .list_120-info .info-label {
      width: auto;  /* スマートフォンでは幅を自動に戻す */
  }
}