@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){
  /*必要ならばここにコードを書く*/
}

@charset "utf-8";

/* ===================================================
   1. 基本レイアウト・メインカラム設定
   =================================================== */

/* メインカラムの見た目（角丸・透過背景） */
#main {
  border-radius: 20px; /* 角の丸み */
  /* 背景色：白を少し透過（95%） */
  background-color: rgba(255, 255, 255, 0.95);
}

/* 固定ページのタイトルを中央寄せ */
.entry-title {
  text-align: center;
}

/* 投稿カテゴリー表示を中央寄せ */
.entry-categories {
  text-align: center;
}

/* アーカイブ（カテゴリ・タグ一覧）ページのタイトル設定 */
.archive-title {
  text-align: center;
}
/* アーカイブタイトルの不要なアイコン装飾を消す */
.archive-title:before {
  display: none;
}

/* ===================================================
   2. 記事内メタ情報（日付・投稿者など）の表示制御
   =================================================== */

/* 固定ページ：投稿日、更新日、投稿者名を非表示にする */
.page .date-tags,
.page .author-info {
  display: none;
}

/* カテゴリーラベルの色設定（透過を禁止してはっきり見せる） */
.info-list-item-meta {
  opacity: 1;
}

/* ===================================================
   3. 見出し（Hタグ）のデザイン
   =================================================== */

/* --- 見出し H1：上下を「太い実線」で挟む --- */
.article h1 {
  position: relative;
  color: #7B5547 !important; /* ロゴの茶色 */
  text-align: center;
  margin-top: 40px;
  margin-bottom: 40px;
  padding: 20px 0 20px 0 !important;
  border: none !important;
  background: none !important;
  font-size: 1.6em;
  line-height: 1.2;
}
/* H1 上下の線 */
.article h1:before,
.article h1:after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  left: 0 !important;
  width: 100% !important;
  height: 6px !important;
  background-color: #ffebbe !important; /* 薄いオレンジ */
  border-radius: 6px !important;
  z-index: -1;
}
.article h1:before { top: 0 !important; }
.article h1:after { bottom: 0 !important; }


/* --- 見出し H2：ストライプ背景・吹き出し風 --- */
.article h2 {
  border: none;
  font-size: 1.4em;
  color: #7B5547;
  position: relative;
  padding: 0.6em;
  border-radius: 7px;
  /* 斜めストライプ背景 */
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 3px,
    #ffebbe 3px,
    #ffebbe 6px
  );
}
/* H2 吹き出しのしっぽ */
.article h2:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #ffebbe;
  width: 0;
  height: 0;
}


/* --- 見出し H3：左右に斜めスラッシュ --- */
.article h3 {
  text-align: center;
  justify-content: center;
  display: flex;
  align-items: center;
  background: none;
  border: none;
  color: #7B5547;
  padding: 10px;
  margin-top: 40px;
  margin-bottom: 20px;
  font-size: 1.2em;
}
/* H3 左右の装飾線 */
.article h3::before,
.article h3::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 45px;
  background-color: #ffebbe;
  transform: rotate(25deg);
}
.article h3::before { margin-right: 15px; }
.article h3::after { margin-left: 15px; }


/* --- 見出し H4：下部に斜めストライプ装飾 --- */
.article h4 {
  position: relative;
  color: #7B5547;
  margin-top: 25px;
  margin-bottom: 25px;
  padding: 0 0 10px 0;
  border: none !important;
  background: none !important;
}
/* H4 下線のストライプ */
.article h4:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: repeating-linear-gradient(-45deg, #fff5df, #fff5df 2px, #fff 2px, #fff 4px) !important;
}

/* ===================================================
   4. 新着情報リスト（トップページなど）
   =================================================== */

/* リストアイテム全体の形状 */
.info-list-item {
  border-radius: 10px;    /* 角丸 */
  padding-left: 1em;      /* 左インデント */
  padding-right: 1em;     /* 右インデント */
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 5px;     /* アイテム間の隙間 */
}

/* 奇数行の背景色（オフホワイト） */
.info-list-item:nth-child(odd) {
  background-color: rgba(253, 245, 230, 0.9); /* #FDF5E6 (OldLace) */
}

/* 偶数行の背景色（薄いベージュ） */
.info-list-item:nth-child(even) {
  background-color: rgba(255, 255, 240, 0.9); /* #FFFFF0 (Ivory) */
}

/* 記事タイトルを太字にする */
.info-list-item-content-link {
  font-weight: bold !important;
}

/* ===================================================
   5. ボックスメニュー（ナビゲーション）
   =================================================== */

/* ボックスメニュー全体 */
.box-menu {
  border: 1px solid #F8F8F8;
  border-radius: 5px;
  padding: 0;
  min-height: 0;
}

/* アイコン画像の設定 */
.box-menu-icon * {
  margin: 0;
  max-width: 80%;
  max-height: 280px;
}

/* タイトルラベル */
.box-menu-label {
  color: #7b5547; /* 全角スペース除去済み */
  font-size: 18px;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}

/* サブキャプション（説明文） */
.box-menu-description {
  color: #7b5547;
  font-size: 12px;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}

/* ===================================================
   6. スマホ表示レスポンシブ対応 (最大幅600px)
   =================================================== */
@media screen and (max-width: 600px) {
  
  /* カテゴリーの段ずれ解消（Flexbox強制適用） */
  .info-list-item-categorys {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start !important;
    width: 100%;
    margin-top: 5px;
    margin-left: 0 !important;
  }

  /* 個々のカテゴリーラベルの微調整 */
  .info-list-item-categorys span {
    margin-left: 0 !important;
    margin-right: 5px;
    margin-bottom: 5px;
    font-size: 0.8em;
    vertical-align: middle;
  }
}