@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.3.5
*/
/* 松井コンサルティング合同会社 UX198101-A1 DF6123 */

/* --------------------------------------------------------- 261003 コラムトップページのタイル用
/* 1. タイルを配置する外枠（3列のグリッド） */
.article-grid .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 横に3分割 */
  gap: 24px; /* タイル同士のすき間（上下左右） */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 2. タイル（カード）1枚ずつの装飾（お好みで調整してください） */
.article-grid .article-card {
  display: flex;
  flex-direction: column;
  background-color: #fff; /* 背景色（白） */
  border: 1px solid #e0e0e0; /* 薄い枠線 */
  border-radius: 8px; /* 角丸 */
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 軽い影 */
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* カードにホバーしたときの動き */
.article-grid .article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 3. カード内の余白と要素の配置 */
.article-grid .card-inner {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px; /* 画像、タイトル、日付のすき間 */
  height: 100%;
}

/* アイキャッチ画像 */
.article-grid .wp-block-post-featured-image {
  margin: -16px -16px 0 -16px; /* 画像をカードの端まで広げる */
}
.article-grid .wp-block-post-featured-image img {
  width: 100%;
  height: 200px; /* 画像の高さを統一 */
  object-fit: cover; /* 画像の比率を保ったまま切り抜き */
}

/* 記事タイトル */
.article-grid .wp-block-post-title {
  font-size: 1.1rem;
  line-height: 1.4;
  margin: 0;
  font-weight: bold;
}
.article-grid .wp-block-post-title a {
  color: #333;
  text-decoration: none;
}

/* 投稿日時 */
.article-grid .wp-block-post-date {
  font-size: 0.85rem;
  color: #777;
  margin-top: auto; /* 日付を常にカードの一番下に固定 */
}

/* 4. スマホ対応（画面幅が狭いときは1列にする） */
@media (max-width: 767px) {
  .article-grid .wp-block-post-template {
    grid-template-columns: 1fr; /* スマホでは1列 */
    gap: 16px;
  }
}

/* フロントページのインデックスタブボタンの装飾 230823 ****************************************************************** */
.index-tab-buttons .index-tab-button {
  background: none #43676b;
  border: 1px solid #43676b;
  font-size: 1.1rem;
  color: #fff;
  font-weight: 400;
}
#index-tab-1:checked ~ .index-tab-buttons .index-tab-button[for='index-tab-1'],
#index-tab-2:checked ~ .index-tab-buttons .index-tab-button[for='index-tab-2'],
#index-tab-3:checked ~ .index-tab-buttons .index-tab-button[for='index-tab-3'],
#index-tab-4:checked ~ .index-tab-buttons .index-tab-button[for='index-tab-4'] {
  background: none #43676b;
  border: 1px solid #43676b;
  color: #fff;
  font-weight: 700;
}

/* ヘッダーの高さと文字の位置の調整（少し細く） */
.header .header-in {
  height: 100px;
}
.logo-text {
  padding: 0;
}
.tagline {
  margin: 0 2em 0.3em;
  font-size: 16px;
  font-family: sans-serif;
}

/* ヘッダー内のグローバルナビのハンドオーバー時の装飾 */
#navi .navi-in a:hover {
  background-color: #d9d9d9;
}

/* 固定ページのタイトルの装飾 */
.page h1 {
  color: #fff;
  background-color: #6d969b; /* skin main color: #4d767b */
  padding: 10px 20px 8px;
  font-weight: normal;
}

/* フッター（左）の写真の枠 */
.effect-footer-photo {
  padding: 3px;
  background-color: #ffffff;
  box-shadow: 0 3px 18px -4px rgba(0, 0, 0, 0.8);
}

/* フッター（中）のタグクラウドのハンドオーバー時の色を調整 */
/* フッターのグローバルナビメニューのハンドオーバー時の色を調整 */
#footer .tagcloud a:hover,
div#navi-footer-in a:hover {
  background-color: #f5f8fa;
  transition: all 0.3s ease-in-out;
  color: #4d767b;
}

/* サイドバーのカテゴリーの横にアイコンを入れる（二階層） */
.widget-sidebar .cat-item a::before {
  font-family: 'Font Awesome 5 Free';
  content: '\f0da';
  margin-right: 6px;
  font-weight: 900;
  color: #9ebfc2;
}
.cat-item .children a::before {
  content: '\f105';
}

/* 検索アイコンの位置を調整 */
.search-submit {
  /* padding: 4px 8px 0;  210707 きちんと虫眼鏡アイコンが表示されているのでコメントアウトしました。 */
  line-height: 30px;
}

/* 記事のタイトルの下線をなくす */
.article h2 {
  border-bottom: none;
}

/* ナビバーの文字を大きく */
.navi-in a {
  font-size: 16px;
}

/* 全てのタグ一覧の表示用のアイコン */
.tag_display::before {
  color: #6d969b; /* #7e7eff */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f02c';
}

/* 関連記事のアイコン */
.related-entry-heading span::before {
  font-family: 'Font Awesome 5 Free';
  content: '\f039';
  margin-right: 10px;
  font-weight: 900;
}

/* パンくずリストの修飾 */
.breadcrumb {
  margin: 1em 0;
  color: #666;
  font-size: 0.95em;
}
.breadcrumb a {
  color: #666;
}

/* 投稿日と更新日を大きく表示 */
.article .post-date,
.article .post-update {
  font-size: 0.9em; /* default 0.7em */
}
.article .date-tags {
  line-height: 2; /* default 0.8 */
}

/* 固定ページの投稿日と更新日を表示しない */
.page .date-tags {
  display: none;
}

/* 投稿ページ下の投稿者の表示を見栄え良く */
div.footer-meta .author-info a {
  text-decoration: none;
  color: #4d767b;
}
div.footer-meta .author-info a:hover {
  transition: all 0.3s ease-in-out;
  color: #9dc6cb;
}
div.footer-meta .author-info .post-author {
  font-size: 1.2em;
}

/* 固定ページに投稿者を表示しない */
.page div.footer-meta .author-info {
  display: none;
}

/* 年毎の投稿記事数の一覧表 210626 */
ul.yearly-list {
  list-style: none;
}
ul.yearly-list li a {
  text-decoration: none;
}
/* .entry-content ul li a .post-count {
    display: block;
    float: left;
} */
.entry-content ul li a .post-count:before {
  content: '年 （';
}
.entry-content ul li a .post-count:after {
  content: '件）';
}
ul.yearly-list li a .fa-external-link-alt:before {
  /* content:"\f35d"非表示 */
  display: none;
}
ul.yearly-list li::before {
  color: #6d969b;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f022';
  padding-right: 20px;
}

/* ウィジェット下部とサイトマップのリンクの下線を消す 210626 */
div.links-widget a,
div.sitemap ul li a {
  text-decoration: none;
  color: #666;
}
/* サイトマップのリストの点を消す 210626 */
div.sitemap ul {
  list-style: none;
}

/* サイドバーのリンクの高さを調整 210626 */
div.menu-links-on-the-sidebar-container {
  line-height: 1.2;
}

/* フロントページから新着記事を消す 210626 */
.list-new-entries {
  display: none;
}

/* reCAPTCHA表示を消す 230922 */
.grecaptcha-badge {
  visibility: hidden;
}

/******************************************
** レスポンシブデザイン用のメディアクエリ
******************************************/
/*1240px以下*/
@media screen and (max-width: 1240px) {
}
/*1023px以下*/
@media screen and (max-width: 1023px) {
}
/*834px以下*/
@media screen and (max-width: 834px) {
  div#navi-footer-in ul li a {
    color: #fff;
    /* color: #4d767b; */
  }
  /* スマホのフッターメニューは白抜きでは見にくいため */
}
/*480px以下*/
@media screen and (max-width: 480px) {
}