@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){
	/* PC */

}

/*834px以下*/
@media screen and (max-width: 834px){
	/* タブレット */

}

/*480px以下*/
@media screen and (max-width: 480px){
	/* スマホ */

}


/*******************************
　固定ページ記事タイトルを非表示
********************************/
/*.entry-title {
  display: none;
}*/

.entry-header {
  margin: 0;
  padding: 0;
}

/* H1はDOMに残して視覚的にだけ非表示 */
.entry-title {
  position:absolute !important;
  width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important;
  overflow:hidden !important;
  clip: rect(0 0 1px 1px) !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; border:0 !important;
}


/*******************************
　新着・人気・関連記事ウィジェット（ショートコード）全て日付を表示
********************************/
.widget-entry-card-date {
  display: block;
}

/*******************************
  アピールエリアのサイズ変更
********************************/
#appeal-area {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

/* モバイル画面向けのスタイル調整 */
@media (max-width: 768px) {
  #appeal-area {
    padding-top: 0; /* 上の余白を削除 */
    padding-bottom: 0; /* 下の余白を削除 */
    /* 必要に応じて他のスタイル調整 */
  }
}


/*******************************
  コンテンツ上の余白を消す
********************************/
.main {
    padding: 0px 29px; /* 上下のpaddingを36pxから20pxに変更します。左右のpaddingはそのまま29pxです。 */
}



/*******************************
  アーカイブとカテゴリーの一覧を非表示
********************************/
/* 例：アーカイブ/カテゴリーページのみ非表示にする */
.archive .wp-block-group.is-layout-flow.wp-block-group-is-layout-flow,
.category .wp-block-group.is-layout-flow.wp-block-group-is-layout-flow {
  display: none;
}

/*******************************
  投稿日・更新日を非表示
********************************/
.page .date-tags {
 display: none;
}

/*******************************
  新着記事で横並び表示時に、戻るの矢印を表示
********************************/
.is-list-horizontal .swiper-button-prev{
  display: flex;
}

/*******************************
 — コンタクトフォーム7　送信ボタンのカスタマイズ — 
********************************/
input.wpcf7-submit {
    padding: 1em !important; /* ボタン内の余白 */
    margin: 2em auto !important; /* ボタンの上下の余白と左右のマージンを自動で中央揃え */
    background-color: #25c04a !important; /* 背景の色 */
    border-radius: 5px !important; /* 角を丸く */
    color: #fff !important; /* 文字の色 */
    font-size: 18px !important; /* 文字の大きさ */
    font-weight: bold !important; /* 文字の太さ */
    width: 25%; /* ボタンの横幅を25%に変更 */
    transition: 0.5s; /* 背景色が変わるまでの時間 */
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.10); /* 薄っすらとボタンにドロップシャドウをかける */
    display: block; /* ブロックレベル要素として扱い、margin autoが機能するようにする */
}

input.wpcf7-submit:hover {
    background-color: #f2d500 !important; /* マウスを乗せたときの背景色 */
    color: #fff !important; /* マウスを乗せたときの文字の色 */
}

/*******************************
 — 画面サイズで表示内容を変える設定 — 
********************************/
/*PCの場合*/
.pc { display:inline!important; }
.mb { display:none!important; }
 
@media screen and (max-width: 768px) {
/*タブレット、スマホの場合*/
.pc { display:none!important; }
.mb { display:inline!important; }
}


/*******************************
 — サイドメニューの詳細文字を変更 — 
********************************/
.info-list-item-meta{
    font-size: 12px;
    opacity: 0.6;
    line-height: 20px;
    font-weight: 800; /* 文字を太くする */
}

/*******************************
 — 文字を変更 — 
********************************/
.article h2 {
  font-size: clamp(20px, 2vw, 32px) !important;
}

.article h3 {
  font-size: clamp(18px, 2vw, 22px) !important;
}

.article h4 {
  font-size: clamp(16px, 2vw, 20px) !important;
}

/*******************************
 — 枠線を各カラムに追加 (Cocoonのスタイルを上書き) — 
********************************/
/* ページIDが91の固定ページにのみ適用 */
body.page-id-91 .custom-grid-page > .wp-block-group {
    border: 1px solid #ccc !important; /* 枠線の太さ、スタイル、色を調整 */
    box-sizing: border-box; /* 枠線を含めた要素のサイズを指定 */
    min-height: 100%;   /* カラムの高さを最低でも親要素と同じにする */
}

/* ページIDが91の固定ページの一番左のカラムの左枠線を強制的に表示 (Cocoonのスタイルを上書き) */
body.page-id-91 .custom-grid-page > .wp-block-group:first-child {
    border-left: 1px solid #ccc !important;
}

/* ページIDが91の固定ページの3列目以外の右枠線を削除 */
body.page-id-91 .custom-grid-page > .wp-block-group:not(:nth-child(3n)) { /* 3の倍数以外の要素 */
    border-right: none !important;
}

/* ページIDが91の固定ページの最後の行の要素に右枠線を適用 */
body.page-id-91 .custom-grid-page > .wp-block-group:last-child {
    border-right: 1px solid #ccc !important;
}

/* ページIDが91の固定ページの枠線同士の重なりを解消 */
body.page-id-91 .custom-grid-page {
    margin: -1px !important; /* 枠線の太さ分だけマイナス */
}

body.page-id-91 .custom-grid-page > .wp-block-group {
    margin-bottom: -1px !important; /* 下の枠線を消す代わりに、marginで調整 */
}

/* 最新号にNEWリボンを表示 */
body.page-id-91 .custom-grid-page > .wp-block-group:first-child {
  position: relative;
  overflow: hidden;
}

body.page-id-91 .custom-grid-page > .wp-block-group:first-child::before {
  content: 'NEW';
  position: absolute;
  top: 10px;
  left: -35px;
  background-color: #ff5b5b;
  color: #fff;
  width: 140px;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  transform: rotate(-45deg);
  z-index: 10;
  padding: 2px 0;
  box-shadow: 0 2px 3px rgba(0,0,0,0.3);
  pointer-events: none;
}

/* セクション見出し：親（下線のみ） */
.section-title{
  border-bottom: 1px solid #ccc;
  padding: 0;
}

/* セクション見出し：h2本体（帯・余白・色） */
/*.section-title > .wp-block-heading{
  margin: 0;
  display: block;
  background: #fff; /* 白背景で固定 */
/*  color: var(--wp--preset--color--cocoon-black, #333) !important; /* 透明化対策 */
/*  -webkit-text-fill-color: initial !important; /* Safariでの透明化対策 */
/*  line-height: 1.25;
  border-left: 8px solid var(--wp--preset--color--key-color);
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30)
           var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
}

@media (max-width: 768px){
  .section-title > .wp-block-heading{
    padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
  }
}*/

/* タグ一覧だけ、カードの横幅を絞る */
body.tag article.entry-card,
body.tag .entry-card-wrap{
   max-width: 720px;       /* 好みで 640〜800px 程度 */
   margin-right: auto;     /* 左寄せ（中央にしたい場合は margin: 0 auto;） */
 }

/* 画像はこの前に入れていた 120px 指定のままでOK */
 body.tag .entry-card-thumb.card-thumb{
   width: 120px !important;
   flex: 0 0 120px !important;
 }

/* 画像と文章の“間”を詰める（テーマにより gap が効く） */
 body.tag a.entry-card-link{ gap: 16px; }               /* 近代ブラウザ用 */
 body.tag .entry-card .entry-card-content{ margin-left: 16px !important; } /* 互換用 */

/* サイドバーのウィジェットタイトル文字色を変更 */
.widget-title {
    color: #4a2c2a !important; /* ここに変更したい色コードを指定 */
}

/* 例：サイドバー全体の文字色 */
/*.sidebar {
    color: transparent !important;/* ← 好きな色コードに変更 */
/*}*/

/* 投稿一覧の画像サイズ変更 */
.entry-card-thumb {/*サムネイル画像のサイズを変更（変更前320px）*/
  width: 25%;
}

/************************************
** ■サイドバータイトル カスタマイズ
************************************/
#sidebar h3{
  color: #4a2c2a; /*フォントカラー*/
  background: #fff2f9; /*背景カラー*/
  font-size: 20px; /*フォントサイズ*/
  letter-spacing: 6px; /*文字間隔*/
  text-align: center; /*文字位置中央*/
  margin: 10px 0px 20px 0px;
  padding: 10px 10px 10px 10px;
  border-left: 6px solid #ffcccc; /*左ラインの太さとカラー*/
  border-bottom: 1px solid #ffcccc; /*アンダーラインの太さとカラー*/
  line-height: 100%;
}