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

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

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

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

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

.site-name-text,
.site-name-text a {
  color: #E8EDF3 !important;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
  letter-spacing: 0.08em;
}

#header-container .site-name-text {
  font-size: 40px !important;
  font-weight: 400 !important;

}

#single-post img {
    width: 100%;
    height: auto;
    max-width: 800px; /* 最大幅を指定（必要に応じて調整）*/
    margin-bottom: 20px; /* 画像とテキストの間に余白を追加 */
}

#single-post .post-thumbnail img {
    width: 100%;
    height: auto;
    max-width: 1200px; /* 最大幅を指定（必要に応じて調整） */
    margin-bottom: 20px; /* 画像と記事の間に余白を追加 */
    object-fit: cover; /* 画像が指定のサイズに収まるように */
}

@media (max-width: 768px){
  .site-name-text{
    font-size: 4.5vw;
    white-space: nowrap;
  }
}

/* サイト全体の背景色（夜の静けさカラー） */
body {
  background-color: #232c3f;
}

/* トップページのみ背景を確実に反映（Cocoon対策） */
.home {
  background-color: #232c3f;
}

@media screen and (max-width: 768px) {

  .content {
    max-width: 92%;
    margin: 0 auto;
  }

}

.home .main {
  margin-top: 40px;
  margin-bottom: 40px;
}

/* 記事カードの余白（呼吸感） */
.home .entry-card-wrap {
  margin-bottom: 28px;
}

/* カードを少しだけ柔らかく */
.entry-card {
  border-radius: 12px;
}

/* カードの影をほんのり（やりすぎない） */
.entry-card {
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* スマホ：日本語の改行を自然にする */
@media screen and (max-width: 768px) {

  body {
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
  }

  p {
    line-height: 1.9;
  }

}

/* -----------------------------------
スマホでサイト全体の左右揺れを固定
CocoonChild用
----------------------------------- */
@media (max-width: 768px) {
  html, body,
  #container,
  #body-in,
  .wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important; /* 横スクロール防止 */
    box-sizing: border-box;         /* paddingを含めて幅固定 */
  }
}

/* -----------------------------------
引用ブロック内カードの上下マージン最適化
CocoonChild用
----------------------------------- */
.wp-block-quote {
    margin-bottom: 0; /* 引用ブロック自体の下余白をなくす */
    padding-bottom: 0.25em; /* 少し余白を残す */
}

/* 引用内の段落とカードの間隔を狭める */
.wp-block-quote p {
    margin-bottom: 0.25em;
}

/* 引用内のカードブロック全体 */
.wp-block-quote .cocoon-card,
.wp-block-quote .cocoon-card .cocoon-card-inner,
.wp-block-quote .cocoon-card .cocoon-card-body {
    margin-top: 0.25em;    /* 上余白を少なく */
    margin-bottom: 0.25em; /* 下余白を少なく */
    padding-top: 0;        /* 内部パディングは必要に応じ調整 */
    padding-bottom: 0;
}

/* 固定ページID 116 のみ適用 */
body.page-id-116 .category-card-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  margin-top: 40px;
}

body.page-id-116 .category-card {
  flex: 1 1 calc(50% - 10px); /* 2列表示に変更 */
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s, box-shadow 0.2s;
  color: #fff;
}

body.page-id-116 .category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

/* カテゴリごとの背景色 */
/* 柔らかめ・落ち着き系 */
body.page-id-116 .category-card.card-1 { background-color: #6c7a89; } /* ブルーグレー */
body.page-id-116 .category-card.card-2 { background-color: #50c9b7; } /* ミントグリーン */
body.page-id-116 .category-card.card-3 { background-color: #f5a675; } /* ソフトオレンジ */
body.page-id-116 .category-card.card-4 { background-color: #b03a2e; } /* ワインレッド */

/* カード内要素 */
body.page-id-116 .category-card .card-title {
  font-size: 1.35rem;         
  font-weight: 600;           
  color: #f0f0f0;             
  margin-bottom: 15px; /* 少し広げた */
  padding-left: 12px;         
  border-left: 3px solid #fff; 
  display: inline-block;
  line-height: 1.2;           
  transition: color 0.2s;
}

/* 説明文全体の設定（ここを修正・追加） */
body.page-id-116 .card-description {
  flex-grow: 1;
  margin-bottom: 20px; /* ボタンとの間隔を少し広げた */
  line-height: 1.6;    /* 行間を広げて窮屈さを解消 */
  font-size: 0.95rem;  /* 文字サイズを少し小さくして収まりを良くする */
}

/* 提案したHTML構造用：メインとサブのスタイル */
body.page-id-116 .description-main {
  font-weight: bold;   /* メインは太字で強調 */
  margin-bottom: 8px;  /* サブとの間隔 */
}

body.page-id-116 .description-sub {
  font-size: 0.9rem;   /* サブは少し小さく */
  opacity: 0.9;        /* 少し透過させて強調を抑える */
}


body.page-id-116 .card-btn {
  display: inline-block;
  text-decoration: none;
  background-color: #fff;
  color: #000;
  padding: 10px 15px;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
  transition: background-color 0.2s;
}

body.page-id-116 .card-btn:hover {
  background-color: #f0f0f0;
}

/* -----------------------------
スマホ向けカテゴリカード調整
固定ページID 116専用
----------------------------- */
@media screen and (max-width: 768px) {
  /* カード幅100%で縦並び */
  body.page-id-116 .category-card-wrapper {
    gap: 15px; /* カード間の間隔を少し狭める */
  }

  body.page-id-116 .category-card {
    flex: 1 1 100%;
    padding: 15px;       /* 元の20pxより少し小さめ */
    border-radius: 10px; /* 少し丸めを控えめに */
  }

  /* タイトル・説明文字サイズ調整 */
  body.page-id-116 .card-title {
    font-size: 1.1rem;  /* 元1.3rem */
    margin-bottom: 8px;
  }
  
  body.page-id-116 .card-description {
    font-size: 0.9rem;  /* 元1rem前後なら少し小さく */
    margin-bottom: 12px;
  }

  /* ボタンサイズ調整 */
  body.page-id-116 .card-btn {
    padding: 8px 12px; /* 元10px 15px */
    font-size: 0.9rem;
  }
}

body.page-id-116 .category-card-wrapper .category-card .card-title {
  font-size: 1.35rem;          
  font-weight: 600;            
  color: #f0f0f0;              
  margin-bottom: 8px;          
  padding-left: 12px;          
  border-left: 3px solid #fff; 
  display: inline-block;
  line-height: 1.2;            
  transition: color 0.2s;
}

/* アイコンを丸に変更 */
body.page-id-116 .category-card-wrapper .category-card .card-title::before {
  content: "● ";               
  color: #fff;
  font-size: 1rem;
  margin-right: 6px;
}

/* ホバー時にタイトル色を少し明るく */
body.page-id-116 .category-card-wrapper .category-card:hover .card-title {
  color: #ffffff;
}