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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.page .date-tags {
display: none;
}

/* 見出しのデフォルト装飾を無し */

.article h2 {
    padding: 0;
   background: none;
}

.article h3 {
   border: none;
   padding: 0;
}

.article h4 {
   border: none;
   padding: 0;
}

/* グローバルメニュー */
.gb-category-menu {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 30px auto;
  max-width: 900px;
  padding: 0 10px;
}

.gb-menu-button {
  display: inline-block;
  background-color: #2a5fad;  /* 通常：やや落ち着いた青 */
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.gb-menu-button:hover {
  background-color: #4c9eff;  /* ホバー：明度を上げた青 */
  color: #ffffff !important; /* 赤を上書き */
  transform: translateY(-2px);
}

/* グローバルメニューをモバイル閲覧時だけ非表示 */
@media screen and (max-width: 768px) {
.gb-category-menu {
    display: none;
  }
}

.swiper-title{
	 font-size: 1.6rem;       /* サイズ調整（お好みで） */
  font-weight: bold;       /* 太字 */
  color: #333;             /* 文字色（必要に応じて変更） */
}

.swiper-slide {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.navi-entry-card-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.navi-entry-card-title {
  padding: 0.5em;
  font-weight: bold;
  font-size: 1.1em;
	margin-bottom:5vh;
}

/* 見出し（新着記事|What’s New） */
.custom-whatsnew-section h2 {
  text-align: left;
  font-size: 1.6rem;
  font-weight: bold;
  color: #333;
  border-left: 4px solid #3c87ff;
  padding-left: 12px;
  margin: 0 0 20px 0;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* カード全体 */
.new-entry-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 900px;
}

/* カード単体 */
.new-entry-cards li {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.new-entry-cards li:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* サムネイルリンク全体 */
.new-entry-cards .lcp_thumbnail {
  display: block;
  width: 100%;
  line-height: 0;
  margin: 0;
  padding: 0;
}

/* サムネイル画像 */
.new-entry-cards .lcp_thumbnail img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
  object-fit: cover;
  vertical-align: bottom;
}

/* タイトル */
.new-entry-cards li > a:first-of-type {
  display: block;
  padding: 10px 15px 15px 15px;
  font-weight: bold;
  font-size: 16px;
  color: #0073aa;
  text-decoration: none;
  line-height: 1.4;
  margin: 0;
}

/* モバイル表示：2カラム維持 */
@media (max-width: 600px) {
  .new-entry-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .new-entry-cards li > a:first-of-type {
    font-size: 14px;
    padding: 8px;
  }
}


/* カテゴリボタン装飾 */
.category-tabs {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 20px;
}
.tab-button {
  padding: 8px 16px;
  border: none;
  background: #eee;
  cursor: pointer;
  font-weight: bold;
}
.tab-button.active {
  background: #3c87ff;
  color: white;
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

/* 全体のコンテナを中央寄せ */
.category-tab-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center; /* 子要素（タブとコンテンツ）を中央に寄せる */
}

/* カード表示（中黒削除＆整形） */
.custom-catlist-card {
  list-style: none !important;
  padding: 0;
  margin: 0 auto; /* 左右のマージンをautoにして中央寄せ */
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 900px; /* 必要に応じて最大幅を設定し、中央寄せを際立たせる */
}

.custom-catlist-card li {
  display: grid;
  /* 画像の幅を固定し、残りをコンテンツに。比率1200:630=20:10.5 を考慮 */
  /* ここを画像の幅が十分に取れるように調整。例: 250pxや300px */
  grid-template-columns: 300px 1fr; /* 修正。画像の元サイズ比率1200:630に近い比率にするために横幅を広げる */
  grid-template-rows: auto;
  grid-template-areas:
    "thumbnail title"
    "thumbnail excerpt";
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  align-items: start;
}

.custom-catlist-card li:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* サムネイル画像（lcp_thumbnailクラスを持つaタグ） */
.custom-catlist-card .lcp_thumbnail {
  grid-area: thumbnail; /* Gridエリア「thumbnail」に配置 */
  width: 100%; /* 親グリッドセルいっぱいに */
  height: 100%; /* 親グリッドセルいっぱいに */
  object-fit: cover; /* 画像がはみ出ないようにトリミング */
  display: block; /* リンクとしてブロック要素にする */
}

/* サムネイル画像内のimg要素 */
.custom-catlist-card .lcp_thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* タイトルリンク */
.custom-catlist-card li > a:first-of-type { /* liの最初の子要素（タイトルリンク） */
  grid-area: title; /* Gridエリア「title」に配置 */
  font-weight: bold;
  font-size: 16px;
  color: #0073aa;
  margin-bottom: 8px; /* 抜粋との間の余白 */
  padding: 15px 15px 0 15px; /* 上だけパディング */
  line-height: 1.3;
  display: block; /* ブロック要素に */
}

/* 抜粋 */
.custom-catlist-card .lcp_excerpt {
  grid-area: excerpt; /* Gridエリア「excerpt」に配置 */
  font-size: 14px;
  color: #333;
  padding: 0 15px 15px 15px; /* 下だけパディング */
  /* ここを削除またはコメントアウト: 親のalign-itemsで制御されるため */
  /* align-self: start; */
}

/* モバイル対応 */
@media (max-width: 600px) {
  .custom-catlist-card li {
    grid-template-columns: 1fr; /* 1列にする */
    grid-template-rows: auto auto auto; /* 画像、タイトル、抜粋の3行 */
    grid-template-areas:
      "thumbnail"
      "title"
      "excerpt"; /* エリアの再定義 */
  }

  .custom-catlist-card .lcp_thumbnail {
    width: 100%; /* 幅いっぱいに */
    height: auto; /* 高さは自動 */
  }

  .custom-catlist-card .lcp_thumbnail img {
    height: auto;
  }

  .custom-catlist-card li > a:first-of-type,
  .custom-catlist-card .lcp_excerpt {
    width: 100%; /* 幅いっぱいに */
    padding: 10px 15px; /* パディング調整 */
  }
}

/* 画像リンクのaタグを非表示にして画像だけ表示（高度な調整用） */
.custom-catlist-card li > a:nth-of-type(2) {
  display: contents; /* aタグ自体のブロック影響を排除 */
}


/* ボタンのホバーアニメーションと文字色 */
.wp-block-button__link.wp-element-button {
  transition: all 0.3s ease-in-out; /* アニメーションの速度と種類 */
  color: #ffffff !important; /* 通常時の文字色（白） */
}

/* ボタンのホバーアニメーションと文字色 */
.wp-block-button__link.wp-element-button {
  transition: all 0.3s ease-in-out; /* アニメーションの速度と種類 */
  color: #ffffff !important; /* 通常時の文字色（白） */
}

.wp-block-button__link.wp-element-button:hover {
  background-color: #4a90c9 !important; /* ホバー時の背景色を調整 */
  color: #fff !important; /* ホバー時の文字色（白） */
  transform: translateY(-3px); /* 少し上に移動するアニメーション */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* 影を追加 */
}

/* モバイル（画面幅768px以下）のみ適用 */
@media screen and (max-width: 768px) {
  .navi-entry-card-title {
    font-size: 0.8rem;
  }
}

/* カテゴリ別の「このカテゴリの記事一覧へ」 */
.category-more-link {
  margin-top: 15px;
  margin-bottom: 30px;
}

.category-more-link a {
  font-weight: bold;
  color: #3c87ff;
  text-decoration: underline;
  transition: color 0.3s;
}

.category-more-link a:hover {
  color: #2a5fad;
}


/* 自社宣伝エリアのショートコード用css */
.service-block {
  margin: 3em 0;
}
.service-title {
  font-weight: bold;
  margin-bottom: 1em;
  font-size: 1.2em;
}
.service-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
}
.service-image {
  flex: 1 1 370px;
  max-width: 370px;
}
.service-image img {
  width: 100%;
}
.service-text-btn {
  flex: 2 1 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.service-text {
  margin-bottom: 1em;
  font-size: 0.95em;
  line-height: 1.6;
}
.btn {
  display: inline-block;
  padding: 0.8em 1.2em;
  border-radius: 6px;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  width: fit-content;
}
.btn-orange { background-color: #ffa552; }
.btn-green { background-color: #2fcc70; }
.btn-blue { background-color: #38b6ff; }

@media (max-width: 768px) {
  .service-wrapper {
    flex-direction: column;
    gap: 10px; /* gapを減らす */
  }

  .service-image,
  .service-text-btn {
    max-width: 100%;
    flex: 1 1 auto;
  }

  .service-text-btn {
    align-items: flex-start;
    padding: 0; /* 念のためパディングをリセット */
    gap: 0; /* 内部の上下余白も詰める */
  }

  .service-text {
    margin-bottom: 0.5em; /* テキストとボタンの余白を詰める */
  }

  .btn {
    margin-top: 0.5em; /* ボタンに必要最低限の余白を与える */
  }
}


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

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

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