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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* 1. Google Fonts の読み込み（4種類一括） */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Zen+Kaku+Gothic+New:wght@400;700&family=Rajdhani:wght@600:700&family=Roboto:wght@700&display=swap');

/* 2. サイトタイトルの設定 */
.site-name, 
.menu-button-in,
.site-name-text {
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* 3. 広告ラベル (div.ad-label) の設定 */
div.ad-label {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 700;
    font-size: 0.68rem;     /* 11px相当まで小さくして洗練された印象に */
    letter-spacing: 0.2em;  /* 指定の字間 */
    color: #888;            /* 少しグレーにするとより馴染みます */
    margin-bottom: 8px;     /* 下の広告との余白 */
    text-transform: uppercase;
}

/* 4. 全体フォントの設定 */
body {
    font-family: 'Open Sans', 'Zen Kaku Gothic New', sans-serif !important;
}
/* Cocoon内の古いアイコン指定を最新の6.7.2に強制適用 */
.fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}
/* サイドバー見出しのリセットと新デザイン適用 */
.sidebar h2, 
.sidebar h3 {
    /* 1. 既存スキンのリセット */
    background: #61a24a !important; /* 斜線背景を塗りつぶしで上書き */
    text-align: center !important;    /* センター寄せを左寄せに */
    border: none !important;        /* 上線を消去 */
    font-weight: 700 !important;    /* 太字に変更 */
    
    /* 2. 新デザインの適用 */
    color: #fff !important;         /* 文字色は白 */
    padding: 10px 22px !important;  /* 上下左右の余白 */
    font-size: 15px !important;     /* 邪魔にならないサイズ感 */
    border-radius: 50px !important; /* 完全に丸い角 */
    
    /* 3. 配置の調整 */
    margin-bottom: 20px;            /* 下のコンテンツとの間隔 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 軽い影で浮かせる */
    line-height: 1.3;
	
}

.author-name i{display:none;}
#navi-in {font-weight:bold;}

/* 見出し */
.article H1{
	font-weight:700;
}
/* アイコンリスト */
.iconlist-title {
    text-align: center;
    position: relative;
}
.iconlist-box{
	border: 1px solid #999;
    padding-top: 2rem;
}
/* ============================================================
   1. スキン固有の装飾を完全に抹殺（最優先リセット）
   ============================================================ */
.article h2::before, .article h2::after,
.article h3::before, .article h3::after,
.article h4::before, .article h4::after,
.article h5::before, .article h5::after,
.article h6::before, .article h6::after {
    display: none !important;
    content: none !important;
}

.article h2, .article h3, .article h4, .article h5, .article h6 {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* ============================================================
   2. 階層別デザイン（微調整版）
   ============================================================ */

/* --- H2: 親階層（Paddingを少しタイトに） --- */
.article h2 {
    background-color: #61a24a !important;
    color: #fff !important;
    padding: 12px 20px !important; /* 18px→12pxへ、よりスマートに */
    font-size: 22px !important;    /* 少しだけサイズダウンして圧迫感を軽減 */
    font-weight: 700 !important;
    margin: 45px 0 25px !important;
    border-radius: 6px !important;
}

/* --- H3: 子階層（Padding調整） --- */
.article h3 {
    background-color: #B2E79F !important;
    color: #2c4a22 !important;
    padding: 10px 15px !important; /* 15px→10pxへ */
    font-size: 19px !important;    /* 全体に合わせて調整 */
    font-weight: 700 !important;
    margin: 35px 0 20px !important;
    border-radius: 6px !important;
    border-left: 6px solid #61a24a !important; /* 線も少し細くしてシャープに */
}

/* --- H4: 孫階層（サイズをH5に合わせる） --- */
.article h4 {
    background-color: #f0f9ed !important;
    color: #333 !important;
    padding: 10px 15px !important; /* 15px→10pxへ */
    font-size: 17px !important;    /* H5と同じサイズ感に */
    font-weight: 700 !important;
    margin: 30px 0 15px !important;
    border-left: 4px solid #B2E79F !important; /* ボーダーも少し細く */
    border-radius: 0 4px 4px 0 !important;
    display: flex !important;
    align-items: center;
}
.article h4::before {
    display: inline-block !important;
    font-family: "Font Awesome 6 Free" !important;
    content: "\f105" !important;
    font-weight: 900 !important;
    color: #B2E79F !important;
    margin-right: 8px;
}

/* --- H5: 曾孫階層（デザイン維持） --- */
.article h5 {
    color: #444 !important;
    padding: 10px 0 10px 5px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #B2E79F !important; /* 下線を少し控えめに */
    margin: 25px 0 15px !important;
    display: flex !important;
    align-items: center;
}
.article h5::before {
    display: inline-block !important;
    font-family: "Font Awesome 6 Free" !important;
    content: "\f0a9" !important;
    font-weight: 900 !important;
    color: #B2E79F !important;
    margin-right: 10px;
}

/* --- H6: 最下位（デザイン維持） --- */
.article h6 {
    color: #555 !important;
    padding: 8px 0 8px 5px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 20px 0 10px !important;
    display: flex !important;
    align-items: center;
    border: none !important;
}
.article h6::before {
    display: inline-block !important;
    font-family: "Font Awesome 6 Free" !important;
    content: "\f105" !important;
    font-weight: 900 !important;
    color: inherit !important;
    margin-right: 8px;
}

/* --- モバイル対応 --- */
@media screen and (max-width: 480px) {
    .article h2 { font-size: 19px !important; padding: 10px 15px !important; }
    .article h3 { font-size: 17px !important; }
    .article h4, .article h5 { font-size: 16px !important; }
}
/* アコーディオン */
.toggle-button{
	border:inherit;
	box-shadow:inherit;
	border:1px solid #666;
	background:#eee;
	border-radius: none;
}

.toggle-button::before{
	opacity:1;
    content: "\f0fe";
	font-weight:normal;
    font-family: "Font Awesome 6 Free";
}
.toggle-checkbox:checked ~ .toggle-button::before{
	content: "\f146";
	transform:none;
	font-weight:bold;
}
.toggle-content{
	border:inherit;
}
.toggle-checkbox:checked ~ .toggle-content{
	border: 1px solid #666;
	border-top:0;
	border-radius: 0;
}
/* ============================================================
   1. 最上部リターンバー（サイトに戻る）
   ============================================================ */
.top-return-bar {
    background-color: #f8f8f8;       /* 薄いグレー背景 */
    border-bottom: 1px solid #d1d1d1; /* 境目の少し濃いめのグレー */
    padding: 8px 0;
    font-size: 13px;
    font-family: 'Open Sans', 'Zen Kaku Gothic New', sans-serif;
}

.top-return-bar .container {
    max-width: 1200px; /* Cocoonの標準幅に合わせる */
    margin: 0 auto;
    padding: 0 20px;
    text-align: left;  /* 左寄せ */
}

.top-return-bar a {
    color: #666 !important;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* アイコンとホバー時の挙動 */
.top-return-bar .fa-angle-left {
    margin-right: 6px;
    font-size: 1.1em;
    vertical-align: -1px;
}

.top-return-bar a:hover {
    color: #61a24a !important; /* 指定の緑色 */
    text-decoration: none;
}

.top-return-bar a:hover .fa-angle-left {
    color: #61a24a;
}

/* ============================================================
   2. サイドバー見出し（リセット & 緑のカプセル型）
   ============================================================ */
.sidebar h2, 
.sidebar h3 {
    /* 既存スキンの強力な装飾をすべて打ち消し */
    background: #61a24a !important;   /* 指定の緑色で塗りつぶし */
    background-image: none !important; /* 斜線などの背景画像を消去 */
    text-align: left !important;      /* センター寄せを左寄せに */
    border: none !important;          /* 既存の枠線を消去 */
    /* 新規デザインの適用 */
    color: #fff !important;           /* 文字色は白 */
    padding: 10px 22px !important;    /* 上下左右のゆとり */
    font-size: 16px !important;       /* 邪魔にならないサイズ */
    font-weight: 700 !important;      /* 日本語が映える太字 */
    border-radius: 50px !important;   /* 完全に丸い角（カプセル型） */
    
    /* 配置と余白 */
    display: inline-block;            /* 文字の長さに合わせる */
    min-width: 160px;                 /* 短すぎないように最低幅 */
    margin-bottom: 25px;              /* 下のコンテンツとの間隔 */
    box-shadow: 0 3px 6px rgba(0,0,0,0.08); /* 非常に薄い影で清潔感を出す */
    line-height: 1.3;
}

/* ============================================================
   3. サイドバー・ウィジェット全体の調整（スッキリ見せる）
   ============================================================ */
.widget {
    margin-bottom: 45px; /* ウィジェットごとの間隔を広げて余白を作る */
}

/* リストの境界線を薄くして清潔感を出す */
.widget ul li {
    padding: 10px 0;
    border-bottom: 1px dashed #eee; /* 薄い点線で区切り */
    font-size: 14px;
}

.widget ul li:last-child {
    border-bottom: none;
}

/* ============================================================
   4. レスポンシブ（モバイル）対応
   ============================================================ */
@media screen and (max-width: 480px) {
    .top-return-bar .container {
        padding: 0 15px;
    }
    .top-return-bar {
        font-size: 11px;
        padding: 6px 0;
    }
    .sidebar h2, 
    .sidebar h3 {
        font-size: 15px !important;
        padding: 8px 18px !important;
    }
}/* ============================================================
   特定のギャラリーのみ：常に3カラムの幅に固定 (.fixed-3col-gallery)
   ============================================================ */

/* 1. 親要素の設定（隙間リセットと左寄せ） */
.wp-block-gallery .wp-block-image,
.blocks-gallery-item {
    flex-grow: 0 !important;   /* 余ったスペースで横に広がらない */
    flex-shrink: 1 !important; /* 画面幅に合わせて縮むことは許可 */
	box-sizing: border-box !important;
    min-width: 0 !important; /* ← これを追記 */
}

.fixed-3col-gallery {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 0 !important; /* 標準の隙間をリセット */
}

/* 2. 各画像アイテムの幅を強制固定 */
.fixed-3col-gallery .wp-block-image,
.fixed-3col-gallery .blocks-gallery-item {
    /* 1枚でも5枚でも、常に3カラムの1枚分の幅 (33.3% - 余白) */
    flex: 0 0 calc(33.333% - 12px) !important; 
    max-width: calc(33.333% - 12px) !important;
    margin-right: 18px !important; /* 横の隙間 */
    margin-bottom: 18px !important; /* 縦の隙間 */
    box-sizing: border-box !important;
}

/* 3. 3枚目（右端）の余白を消して、合計100%に収める */
.fixed-3col-gallery .wp-block-image:nth-child(3n),
.fixed-3col-gallery .blocks-gallery-item:nth-child(3n) {
    margin-right: 0 !important;
}

/* 4. 画像自体の表示崩れ防止 */
.fixed-3col-gallery .wp-block-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
}

/* --- モバイル対応（スマホでは2カラムに調整） --- */
@media screen and (max-width: 599px) {
    .fixed-3col-gallery .wp-block-image,
    .fixed-3col-gallery .blocks-gallery-item {
        flex: 0 0 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
        margin-right: 16px !important;
    }
    /* スマホでは2枚ごとに余白を消す */
    .fixed-3col-gallery .wp-block-image:nth-child(2n),
    .fixed-3col-gallery .blocks-gallery-item:nth-child(2n) {
        margin-right: 0 !important;
    }
    /* 3枚目のマージンをスマホでは復活させる */
    .fixed-3col-gallery .wp-block-image:nth-child(3n) {
        margin-right: 16px !important;
    }
}
/* 1. 埋め込みブロック全体の余白をリセットし、中央寄せの土台を作る */
.wp-block-embed-youtube {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* 2. 動画のサイズを制限し、中央に配置する */
.wp-block-embed-youtube .wp-block-embed__wrapper,
.video-container {
    /* PCでの表示サイズ：ここをお好みで調整してください */
    width: 85% !important;
    max-width: 720px !important;
    
    /* 中央寄せ */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 3. 【重要】二重の余白（押し下げ）を防止する */
.wp-block-embed-youtube .wp-block-embed__wrapper {
    /* WordPress標準のパディングが効いている場合、それを中央寄せの基準にする */
    position: relative !important;
    padding-top: 0 !important; /* 二重パディングをリセット */
}

/* 4. スマホ対応：画面いっぱいに広げる */
@media screen and (max-width: 600px) {
    .wp-block-embed-youtube .wp-block-embed__wrapper,
    .video-container {
        width: 100% !important; /* スマホは余白なし */
        max-width: 100% !important;
    }
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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