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

/* Cocoon用ヒーローエリア設定 */
.custom-hero-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px; /* 下の記事一覧との間隔 */
    background: #fff;    /* 背景を白にする場合 */
}

.custom-hero-left {
	flex: 0 0 50%; /* 画像を少し大きくしたい場合はここを調整 */
}

.custom-hero-left img {
    width: 100%;
    height: auto;
    display: block;
}

.custom-hero-right {
    flex: 1;
    font-size: 16px; /* Cocoonの標準に合わせるなら16px前後 */
    line-height: 1.6;
}

/* スマホ表示(768px以下)の設定 */
@media screen and (max-width: 768px) {
    .custom-hero-flex {
        flex-direction: column; /* 縦並びにする */
        gap: 15px;
    }
    .custom-hero-left {
        flex: 0 0 100%;
    }
    .custom-hero-right {
        text-align: center; /* スマホでは中央寄せ */
    }
}

/* サイドバーのフォルダアイコンを丸囲み矢印に変更 */
.widget_categories ul li a::before, 
.widget_archive ul li a::before,
.widget_pages ul li a::before,
.widget_nav_menu ul li a::before {
    content: "\f138" !important; /* Font Awesomeの丸囲み矢印(右) */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    color: #333; /* アイコンの色（お好みで変更してください） */
    margin-right: 8px; /* 文字との隙間 */
}

/* 先頭に四角のアクセント */
.main-h2 {
  position: relative; /* 擬似要素の基準 */
  background: none; /* 背景なし */
  padding: 0 0 .3em 2em; /* 余白 */
  color: #333; /* 文字色 */
  line-height: 1.8; /* 行高 */
  border-bottom: 2px solid #B92A2C; /* 下線 */
}

/* 四角アクセント（共通） */
.main-h2::before,
.main-h2::after {
  content: '';
  position: absolute;
  background: #B92A2C;
  opacity: .5;
}

/* 大きい四角 */
.main-h2::before {
  top: .3em;
  left: .2em;
  width: 1em;
  height: 1em;
  z-index: 2;
}

/* 小さい四角 */
.main-h2::after {
  top: .8em;
  left: .8em;
  width: .7em;
  height: .7em;
}

/************************************
** シンプルテーブル（アコーディオンなし）
************************************/
/* テーブル全体の枠組み */
.p-simple-table {
    line-height: 1.6;
    width: 100% !important;
    border-collapse: collapse;
    max-width: 100%;
    word-break: break-all;
    border: none !important;
    margin-bottom: 2em;
}

.p-simple-table tr {
    border: none !important;
}

/* セルの基本設定 */
.p-simple-table th,
.p-simple-table td {
    vertical-align: middle;
    padding: 13px !important;
    border: solid 1px #ddd !important;
    font-size: 0.85em !important;
}

/* 見出しの装飾（元サイトのカラーを継承） */
.p-simple-table th {
    background: #f1f1f1; /* ここの色を変えると見出し色が変わります */
    letter-spacing: 1px;
    font-weight: 500 !important;
    color: #555 !important;
    min-width: 100px;
    text-align: center;
}

/* コンテンツ部分 */
.p-simple-table td {
    background: #fff;
}

/* スマホ表示の調整（ここが重要） */
@media screen and (max-width: 560px) {
    /* スマホで横幅が狭い場合、見出しと中身を上下に並べる（読みやすさ重視） */
    .p-simple-table th,
    .p-simple-table td {
        display: block;
        width: 100% !important;
        text-align: left;
    }
    
    /* 上下の境界線を調整 */
    .p-simple-table th {
        border-bottom: none !important;
    }
}

/* スマホでも「横並び」を維持したい場合は、上記@media〜の中身を削除してください */