@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){
.article ul, .article ol {
        padding-left: 10px; /* ここを小さく調整 */
    }
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/*.wp-block-columns {
	flex-wrap: nowrap;
}*/

/*固定ページの日付非表示*/
.page .date-tags,
.page .author-info {
display: none;
}
#toc_container {
        margin: 2.4em auto;
}
a{
text-decoration: none;
}


/* Cocoon見出しデザインのリセット */
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  background: none; /* 背景色を削除 */
  border: none;     /* 枠線を削除 */
  border-radius: 0; /* 角丸を削除 */
}

/*H2見出し：リボン風デザインをスマートに*/
main h2.wp-block-heading {
    color: #fff;
    background-color: #4ca024;
    font-size: 20px;
    padding: 12px 20px; /* 上下20→12pxに。スッキリします */
    display: block;
    position: relative;
    margin-bottom: 20px;
}
main h2.wp-block-heading:before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: 8px solid transparent; /* 少し細く */
    border-right: 15px solid #35701a; /* 真っ黒より少し濃い緑の方が綺麗です */
}

/*H3見出し：文字を見えるようにし、余白を調整*/
main h3.wp-block-heading {
    color: #fff; /* 文字を読めるように黒系へ。白背景前提 */
    font-size: 18px;
    padding: 8px 15px; /* 余白を絞る */
    display: block;
    border-left: 6px dashed #4ca024; /* H2の色と合わせて統一感アップ */
    position: relative;
    margin: 30px 0 15px;
}

/*H4見出し：アイコンと文字の隙間を確保*/
main h4.wp-block-heading {
    color: #fff; /* 文字を読めるように黒系へ */
    font-size: 16px;
    padding: 5px 0 5px 38px; /* 左側を38pxに広げてアイコンとの間隔を確保 */
    display: block;
    position: relative;
}
main h4.wp-block-heading:before {
    font-family: FontAwesome;
    font-weight: 900;
    font-size: 22px; /* 少しだけ小さくして馴染ませる */
    color: #4ca024; /* 緑系で統一 */
    left: 0;
    top: 50%;
    transform: translateY(-50%) rotate(-10deg); /* 常に中央に配置 */
    content: "\f040";
    position: absolute;
}
/* ボタン全体の背景色を変更 */
.wp-block-button__link {
    background-color: #F39800 !important; /* 背景色を指定 */
    color: #ffffff !important;           /* 文字色を白に固定（必要であれば） */
    border: none !important;             /* 枠線を消す */
    box-shadow: none !important;         /* 影を消す（スッキリさせたい場合） */
}

/* マウスを乗せた時（ホバー）の色も指定しておくと親切です */
.wp-block-button__link:hover {
    background-color: #E47911 !important; /* 少し濃い青にする */
    opacity: 0.9;
}

/* --- 1. PCなど広い画面では普通のテーブル（幅100%） --- */
.entry-content table {
    display: table !important;
    width: 100% !important;
    white-space: normal !important;
}

/* --- 2. スマホ・タブレット（1023px以下）でスクロールさせる --- */
@media screen and (max-width: 1023px){
    .entry-content table {
        display: block !important;
        overflow-x: auto !important; /* これが横スクロールの本体 */
        white-space: nowrap !important; /* 文字を改行させない */
        width: 100% !important;
    }

    .entry-content table th,
    .entry-content table td {
        white-space: nowrap !important;
    }

    /* 横スクロール案内もスマホのときだけ出す */
    .wp-block-table::before {
        content: "← 横スクロールできます →";
        display: block !important;
        text-align: center;
        font-size: 12px;
        color: #4ca024;
        font-weight: bold;
        padding: 5px 0;
        background: #f9f9f9;
        border: 1px solid #ddd;
        border-bottom: none;
    }
}