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



/* 画像の周りに細いグレーの罫線を追加（フロントページを除く） */
body:not(.home) .wp-block-image img,
body:not(.home) .entry-content img,
body:not(.home) .post-content img,
body:not(.home) img.wp-post-image,
body:not(.home) .wp-post-image,
body:not(.home) .content img {
    border: 1px solid #cccccc; /* 細いグレーの罫線 */
    padding: 0px; /* 画像と罫線の間に少し余白を作る（オプション） */
}



/* デフォルトのボールドの太さを調整 */
strong {
  font-weight: 700; /* 数値が大きいほど太くなります。通常は700がboldです。 */
}

/* 特定のクラスを持つ要素内のボールドの太さを調整 */
.your-custom-class strong {
  font-weight: 600; /* こちらは少し細めのボールド */
}

/* bタグで囲まれた文字の太さを調整 (非推奨ですが念のため) */
b {
  font-weight: 700; /* strongタグと揃えるのが一般的です */
}



/******************************************************************************************

/* TOPバナーセンター揃え */
.wp-block-group.is-layout-grid {
  display: grid; /* flexからgridに変更 */
  grid-template-columns: repeat(2, 1fr); /* モバイルは横に2個 */
  gap: 20px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center; /* gridアイテムを中央に配置（必要に応じて） */
}

/* PC (768px以上の画面) では横に4個 */
@media (min-width: 768px) {
  .wp-block-group.is-layout-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.hover-zoom-container {
  overflow: hidden;
}

.hover-zoom-container img {
  display: block;
  width: 100%; /* 親要素の幅に合わせて画像を伸縮 */
  height: auto;
}

.hover-zoom-container:hover {
  transform: scale(1.1);
}
/******************************************************************************************

/**目次**/
.toc {
  display: block;
  padding: 0px;
  max-width: 600px;
  border: 1.2px #6ec4db solid !important;
}
.toc-title {
  position: relative;
  padding: 10px 0;
  background: #6ec4db;
  color: #fff;
  font-weight: bold;
}
.toc .toc-content {
  padding: 15px 20px;
  background-color: #ffffff;
}
.toc-list > li li a {
  font-weight: normal;
  font-size: 100%;
  color: #708090;
  margin-left: -10px;
}
.toc-list > li li ::before {
  content: '';
  width: 5px;
  height: 5px;
  display: inline-block;
  left: -15px;
  border-radius: 100%;
  background: #cdcdcd;
  position: relative;
  margin-bottom: 2px;
}
.article .toc-list > li li {
  list-style: none;
}

@media screen and (max-width: 750px){
/*目次スマホ用*/
.toc {
  margin: 10px 5px;
}
.toc-list > li a {
  font-size:11px;
}
.toc-list > li li a {
  margin-left: -3px;
}
.toc-list > li li ::before {
  margin-left:-5px;
}
}


/******************************************************************************************
表のデザインを変更

/*--- 表全体(table) ---*/
.entry-content table {
    border-bottom: 1px solid #e6e6e6; /* 表の一番下の線 */
    border-top: none;
    border-left: none;
    border-right: none;
}
/*--- ヘッダーセル(th) ---*/
.entry-content th {
    border-radius: 10px 10px 0 0; /* 丸み（※ヘッダーセルが縦の場合は削除）*/
    padding: 0.5em .6em; /* 余白（上下　左右） */
    background-color: #6ec4db; /* 背景色 */
    color: #fff; /* 文字の色 */
    letter-spacing: 0.1em; /* 文字の間隔 */
    text-align: center; /* 中央揃え */
    border: none; /* 線削除 */
}
.wp-block-table thead {
    border-bottom: none;
}
/*--- 行（横方向）(tr) ---*/
.entry-content tr {
    text-align:center; /* 中央揃え */
}
.entry-content tr:not(:last-child) { /* 最後の行以外に適用 */
    border-bottom: 1px solid #e6e6e6; /* 下線 */
}
/*--- ヘッダーセル以外のセル(td) ---*/
.entry-content td {
    padding: 0.5em 0.5em; /* 余白（上下　左右） */
    border:none; /* 線を削除 */
}
.entry-content td:last-child { /* 最後のセルのみ適用 */
    border-right: 1px solid #e6e6e6; /* 右線 */
}
.entry-content td:not(last-child) { /* 最後のセル以外に適用 */
    border-left: 1px solid #e6e6e6; /* 左線 */
}

/******************************************************************************************
プロフィール欄

/* 著者ボックス全体 */
.nwa .author-box {
  max-width: none;
  padding: 0;
  margin-bottom: 0;
  /* 枠線と角丸 */
  border: 2px solid #6ec4db;
  border-radius: 10px;
  /* 背景色を追加 */
  background-color: #f0f8fc; /* お好みの色に変更してください */
}

.nwa .author-box {
  max-width: none;
  padding: 0;
  margin-bottom: 0;
}

aside#author_box-2.widget.widget-sidebar.widget-sidebar-standard.widget_author_box {
  padding: 0!important;
  border-radius: 10px;
}

/* 画面幅1023px以下のasideの余白 */
@media (max-width: 1023px) {
  aside {
    padding: 0 .5em;
  }
}

/* サムネイル部分（著者ボックス内）の調整 */
/* 高さと下部余白を短くするために変更 */
.nwa .author-box .author-thumb {
  width: 100%;
  height: 3.5em;
  margin: 0 0 1em 0;
  border-radius: 10px 10px 0 0;
}

/* サムネイル画像（背景画像）の設定 → ベタ塗り版 */
.author-box figure.author-thumb {
  float: none;
  text-align: center;
  background: #6ec4db; /* 任意の背景色に変更 */
  /* background-sizeは不要になりますが、残しても問題ありません */
  position: relative;
  z-index: 0;
}


/* アバター画像の調整 */
.author-box img.avatar.photo {
  background-image: none;
  padding: 0!important;
  box-shadow: none;
}

/* サムネイル内のimg設定 */
.author-box figure.author-thumb img {
  width: 60%;
  max-width: 180px;
  margin-top: 1em;
}

/* 1023px以上（デスクトップ）のメディアクエリ */
@media (min-width:1023px) {
  .nwa .author-box .author-thumb {
    height: 5em;
  }
  .author-box figure.author-thumb img {
    max-width: 120px;
  }
}

/* 480px以下（スマホ）のメディアクエリ */
@media (max-width:480px) {
  .nwa .author-box .author-thumb {
    height: 5em;
  }
  .author-box figure.author-thumb img {
    max-width: 130px;
  }
}

/* 著者名を非表示にする */
.author-box .author-name {
  display: none;
}

/* 著者名のリンクも非表示 */
.author-box .author-content .author-name a {
  display: none;
}

/* 説明文の設定 - 著者名がないので上部マージン追加 */
.nwa .author-box .author-description {
  margin-top: 2.5em;
  margin-bottom: 0.7em;
}
.author-box .author-content .author-description p {
  font-size: 14px;
  color: #7b7b7b;
  line-height: 1.5em!important;
  margin: 0.7em;
}
#author_box-2 p {
  margin: 0.7em 2.5em;
}

/* SNSフォローボタン周りの設定 */
div.author-follows {
  padding-bottom: 0.3em;
}
.author-box .author-content .author-follows .sns-buttons {
  justify-content: center;
}
.author-box .author-content .author-follows .sns-buttons a.follow-button {
  border-radius: 50%;
  border: none;
  width: 35px;
  height: 35px;
  color: #fff!important;
  margin: 2px;
  transition: .5s;
}

/* 各SNSボタンの背景色設定 */
div.author-follows a.follow-button.website-button.website-follow-button-sq {
  background-color: #6ec4db!important;
}
div.author-follows a.follow-button.twitter-button.twitter-follow-button-sq {
  background-color: #000000!important;
}
div.author-follows a.follow-button.facebook-button.facebook-follow-button-sq {
  background-color: #7c9dec!important;
}
div.author-follows a.follow-button.hatebu-button.hatebu-follow-button-sq {
  background-color: #2c6ebd!important;
}
div.author-follows a.follow-button.instagram-button.instagram-follow-button-sq {
  background: linear-gradient(165deg, #427eff 5%, #f13f79 50%) no-repeat !important;
}
div.author-follows a.follow-button.pinterest-button.pinterest-follow-button-sq {
  background-color: #bd081c!important;
}
div.author-follows a.follow-button.youtube-button.youtube-follow-button-sq {
  background-color: #cd201f!important;
}
div.author-follows a.follow-button.tiktok-button.tiktok-follow-button-sq {
  background-color: #000000!important;
}
div.author-follows a.follow-button.linkedin-button.linkedin-follow-button-sq {
  background-color: #0A66C2!important;
}
div.author-follows a.follow-button.note-button.note-follow-button-sq {
  background-color: #41C9B4!important;
}
div.author-follows a.follow-button.soundcloud-button.soundcloud-follow-button-sq {
  background-color: #FF5500!important;
}
div.author-follows a.follow-button.flickr-button.flickr-follow-button-sq {
  background-color: #111!important;
}
div.author-follows a.follow-button.line-button.line-follow-button-sq {
  background-color: #00c300!important;
}
div.author-follows a.follow-button.amazon-button.amazon-follow-button-sq {
  background-color: #ff9900!important;
}
div.author-follows a.follow-button.twitch-button.twitch-follow-button-sq {
  background-color: #5C16C5!important;
}
div.author-follows a.follow-button.rakuten-room-button.rakuten-room-follow-button-sq {
  background-color: #C61E79!important;
}
div.author-follows a.follow-button.slack-button.slack-follow-button-sq {
  background-color: #4A154B!important;
}
div.author-follows a.follow-button.github-button.github-follow-button-sq {
  background-color: #4078c0!important;
}
div.author-follows a.follow-button.codepen-button.codepen-follow-button-sq {
  background-color: #47CF73!important;
}
div.author-follows a.follow-button.feedly-button.feedly-follow-button-sq {
  background-color: #2bb24c!important;
}
div.author-follows a.follow-button.rss-button.rss-follow-button-sq {
  background-color: #f26522!important;
}
.author-box .author-content .author-follows .sns-buttons a.follow-button span {
  line-height: 35px;
}
.author-box .author-content .author-follows .sns-buttons a.follow-button span::before {
  font-size: 18px !important;
}

/* 1023px以下のレスポンシブ調整 */
@media (max-width:1023px) {
  .nwa .author-box .author-thumb {
    height: 6em;
    margin: 0 0 2em 0;
  }
  .author-name {
    display: none;
  }
  .author-description {
    line-height: 1.4 !important;
    text-align: center;
    margin: 0 auto;
  }
}

/* スマホ画面（1023px以下）でサイドバーを非表示 */
@media screen and (max-width: 1023px) {
  div.sidebar {
    display: none;
  }
}
/******************************************************************************************

/* 次のページのデザイン変更 */

/* 「次のページ」ボタン */
.pagination-next-link{
    background-color:#4590ad; /* ベタ塗りの色 */
    border: none; /* ボーダーを削除 */
    color: #fff; /* 白抜き文字 */
    display: block;
    font-size: 1.2em;
    text-decoration: none;
    width: 100%; /* calcは不要になったので削除 */
    height: 60px;
    text-align: center;
    padding: 15px 10px 5px 10px; /* 上:15px, 右:10px, 下:5px, 左:10px */
    display: block;
    position:relative;
    transition-duration:0.2s;
    border-radius: 30px; /* 角を完全に丸くする */
}
/* ボタンホバー時 */
.pagination-next-link:hover{
    transform: none; /* 移動を削除 */
    background-color:#ff8a97; /* ピンク色に変更 */
    transition-duration:0.2s;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); /* シャドウを追加 */
    color: #fff; /* 白抜き文字 */
}
/* ボタンの影のラインを削除 */
.pagination-next-link::after{
    display: none;
}
/* ボタンの影のラインホバー時を削除 */
.pagination-next-link:hover::after{
    display: none;
}
/* ページネーション現在のページの表示 */
.pagination .current {
    background-color: #555; /* 濃いめのグレーに変更 */
    color:#fff; /* 白抜き文字 */
    border: none; /* ボーダーを削除 */
    border-radius: 50%; /* 円形にする */
    line-height: 46px; /* 高さに合わせて調整 */
    width: 46px; /* 幅と高さを同じにして円にする */
    height: 46px;
}
/* ページネーション現在のページ以外の表示 */
.page-numbers {
    color: #4590ad; /* 基本の文字色 */
    text-decoration: none;
    display: inline-block;
    height: 46px;
    width: 46px;
    border: 2px solid #4590ad; /* 罫線の色 */
    margin: 0 4px;
    line-height: 42px; /* 行の高さを調整して中央に配置 */
    text-align: center;
    border-radius: 50%; /* 円形にする */
    background-color: #fff; /* 背景を白に */
}
/* ページネーションホバーを離して元に戻る時間を指定 */
.pagination a{
    transition-duration:0.2s;
}
/* ページネーションホバー時 */
.pagination a:hover{
    background-color:#fff; /* ホバー時の背景色 */
    transition-duration:0.2s;
    color:#ff8a97; /* ホバー時の文字色 */
    border-color: #ff8a97; /* ホバー時の罫線の色 */
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* ホバー時にシャドウを追加 */
}


/******************************************************************************************

/* ヘッダーメニューのアニメーション */
#navi ul#menu-menu li a {
  position: relative; /* 下線を配置するための基準点 */
  overflow: hidden; /* 下線がはみ出さないように */
  /* padding-bottom: 5px; /* 下線を表示するためのスペース */ /* コメントアウトまたは削除 */
  padding-bottom: 0px; /* 減らす場合の例 */
}

/* ホバー時に背景色を濃くする */
#navi ul#menu-menu li a:hover {
  background-color: #ebf2f5; /* ホバー時の背景色（お好みの濃さに調整してください） */
  transition: background-color 0.2s ease-in-out; /* 背景色の変化を滑らかにする（任意） */
}

#navi ul#menu-menu li a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px; /* 下線の太さ */
  background-color: #4590ad; /* 下線の色（お好みの色に変更してください） */
  transition: width 0.3s ease-in-out; /* アニメーションの時間とイージング */
}

#navi ul#menu-menu li a:hover::before {
  width: 100%;
}

/******************************************************************************************

/*検索ボックスのカスタマイズ（長方形・やや角丸）*/
/*ここから*/
/*入力欄*/
.search-box .search-edit {
	padding: 8px 16px;
	padding-right: 68px;
	border-color: #999;
	border-radius: 5px; /* 角の丸みを小さく */
}

/*検索ボタン*/
.search-box .search-submit {
	top: 0;
	right: 0px;
	height: 100%;
	width: 60px;
	color: #fff;
	background-color: #999;
	border-radius: 0 5px 5px 0; /* 右側の角の丸みを小さく */
}

.search-box .fa-search {
	display: block;
	margin-top: 3px;
	margin-right: 3px;
}

/*入力欄と検索ボタンの強調の無効化*/
.search-box .search-edit:focus, .search-box .search-submit:focus {
	outline: 0;
	outline-offset: unset;
}
/*ここまで*/

/*入力欄と検索ボタンの強調の無効化*/
.search-box .search-edit:focus, .search-box .search-submit:focus {
	outline: 0;
	outline-offset: unset;
}
/*ここまで*/


/******************************************************************************************


/* H2見出し：メインとサイドバーに適用 */
main h2.wp-block-heading,
.sidebar h2.wp-block-heading {
    color: #fff; /* 文字色を白に設定 */
    background-color: #4590ad; /* 背景色を指定 */
    font-size: 20px; /* フォントサイズを20pxに設定 */
    padding: 20px 25px; /* 上下に20px、左右に25pxの余白を付与 */
    display: block; /* ブロックレベル要素として扱う */
    position: relative; /* 擬似要素の絶対配置の基準にする */
}

main h2.wp-block-heading:before,
.sidebar h2.wp-block-heading:before {
    position: absolute; /* 親要素に対して絶対位置で配置 */
    content: ''; /* 空のコンテンツを指定して要素生成 */
    top: 100%; /* 親要素の下端に配置 */
    left: 0; /* 親要素の左端に配置 */
    border: none; /* デフォルトの枠線の設定をリセット */
    border-bottom: 10px solid transparent; /* 下側に透明なボーダーを作成 */
    border-right: 20px solid #222222; /* 右側に黒色のボーダーを作成 */
}

/*H3見出し*/
main h3.wp-block-heading {
    color: #2e2f35;/*文字色*/
    font-size: 22px;/*文字サイズ*/
    padding: 15px 20px;/*文字回りの余白（上下 左右）*/
    display: block;
    border-left: 7px dashed #56899d;/*左線（太さ 破線 色）*/
    position: relative;
}
/* H4見出し：先頭に丸が付くスタイル */
main h4.wp-block-heading {
    color: #2e2f35; /* 文字色 */
    font-size: 18px; /* 文字サイズ */
    padding: 10px 15px 10px 35px; /* 丸のスペースを確保するため左の余白を多めに */
    position: relative; /* :beforeを配置するための基準 */
    display: block;
	
    /* --- ここを変更 --- */
    border-top: 2px solid #56899d; /* 上の罫線を2pxに */
    border-bottom: 2px solid #56899d; /* 下の罫線を2pxに */
    padding: 15px 15px 15px 35px; /* 上下の余白を調整し、丸のスペースを確保 */
}

/* 差し替える部分 */
main h4.wp-block-heading:before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 6px;  /* チェックマークの横線の長さ */
    height: 12px; /* チェックマークの縦線の長さ */
    border-bottom: 3px solid #56899d; /* 線の太さと色 */
    border-right: 3px solid #56899d; /* 線の太さと色 */
    transform: translateY(-65%) rotate(45deg); /* 位置と角度を調整 */
}

/* より広いセレクタを試す */
#sidebar h2, .sidebar h2, .widget-area h2,
#sidebar h3, .sidebar h3, .widget-area h3,
.widget h2, .widget h3, .widget-title,
.widgettitle {
  color: #fff;
  font-size: 22px;
  padding-top: 0.5rem; /* 上側のパディングを増やす (例：1rem) */
  padding-bottom: 0.5rem; /* 下側のパディングは調整 (例：0.5rem) */
  padding-left: 1rem;
  padding-right: 1rem;
  border-left: 10px solid #6ec4db;
  background: #4590ad;
  display: flex;
  align-items: center;
}

/******************************************************************************************/

.entry-card { /* ブログカードの親要素のクラス (テーマによって異なる場合があります) */
  transition: transform 0.3s ease-in-out; /* アニメーションの変化を滑らかにする */
}

.entry-card:hover {
  transform: rotate(3deg); /* ホバー時に3度回転 */
}

/******************************************************************************************/

/* 新しいブログカード（直接ホバーする場合） */
.new-entry-card:hover,
.widget-entry-card:hover { /* 既存のwidget-entry-cardにも直接ホバーで適用する場合 */
  opacity: 0.5; /* 半透明にする（透明度50%） */
  transition: opacity 0.3s ease-in-out; /* 透明度の変化をアニメーション */
}

/* 親要素のリンクにホバーした場合（もしあれば） */
.widget-entry-card-link:hover .new-entry-card,
.widget-entry-card-link:hover .widget-entry-card,
.widget-entry-card-link:hover .e-card { /* 既存のルールも維持 */
  opacity: 0.5; /* 半透明にする（透明度50%） */
  transition: opacity 0.3s ease-in-out; /* 透明度の変化をアニメーション */
}

/******************************フェードイン効果************************************************************/

body {
  opacity: 0; /* 初期状態を透明にする */
  transition: opacity 1s ease-in-out; /* 0.5秒かけてゆっくりと表示 */
}

/* わずかな遅延を加えることで、初期ロード時のちらつきを軽減 */
body {
  animation: fadeIn 1s ease-in-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* メニューアイテムの固定幅を解除し、テキスト幅に合わせる */
#navi .navi-in ul#menu-menu > li {
  width: auto !important;      /* 固定幅を無効化 */
  flex: none !important;       /* 縮小・拡大も不要に */
  white-space: nowrap;         /* 改行させずに１行に */
}

/* メニューリンク内のパディング調整 */
#navi .navi-in ul#menu-menu > li > a {
  padding: 0 1em !important;   /* 左右に適度な余白を */
}

/* 右寄せにしたい場合は親コンテナで flex-end を指定 */
#navi .navi-in {
  display: flex !important;
  justify-content: flex-end !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}


/******************************投稿日バナーのスタイル ************************************************************/
/* 投稿日バナーのスタイル */
.post-date-banner {
    background-color: #ffe99c; /* 背景色を薄い水色に */
    border-left: 0px solid #4682b4; /* 左側に太めの青いボーダー */
    padding: 10px 15px;          /* 内側の余白を少し調整 */
    margin-bottom: 25px;         /* 下側の余白 */
    border-radius: 5px;          /* 角を少し丸くする */
    font-size: 0.9em;            /* 文字サイズを少し小さめに */
    color: #333;                 /* 文字色 */
    line-height: 1.6;            /* 行間 */
    word-wrap: break-word;       /* 長い単語でも折り返すように */
    overflow-wrap: break-word;   /* 同上 (CSS3) */
	text-align: center;        /* テキスト中央揃え */
	font-size: 1em;          /* フォントサイズ */
}

.date-highlight {
    padding: 2px 4px;         /* 日付の周りの余白を少し調整 */
    border-radius: 3px;       /* 日付の角を少し丸くする */
}

/* テキスト自体のマージンをリセット */
.post-date-banner * {
  margin: 0;
  padding: 0;

}

/* スマートフォン向けの調整例 (画面幅が600px以下の場合) */
@media screen and (max-width: 600px) {
    .post-date-banner {
        padding: 8px 10px; /* スマートフォンでは余白をさらに少し小さく */
        font-size: 0.85em; /* スマートフォンでは文字サイズをさらに少し小さく */
    }
    .date-highlight {
        padding: 1px 3px; /* 日付の余白も調整 */
    }

    /* 投稿日と更新日が異なる場合に2行表示にするためのスタイル */
    .post-date-line-1,
    .post-date-line-2 {
        display: block; /* ブロック要素にして改行させる */
    }

    .post-date-line-1 {
        margin-bottom: 0.2em; /* 1行目と2行目の間に少しマージンを追加 (任意) */
    }
}



/******************************************************************************************/

/* =========================================================================
   PAGE-JUMP フォーム：レイアウト調整＋デザイン強化
   ========================================================================= */
.pagination{
  /* ボタン列＋フォームを横並びにして中央寄せ */
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:16px;               /* ← ページ番号との間隔をまとめて確保 */
}

/* ---------- フォーム外側 ---------- */
.pagination-jump{
  order:2;                /* ページ番号群の後ろ(右)に回す */
  display:inline-flex;
  align-items:center;
  background:#ffffff;
  border:2px solid #4590ad;
  border-radius:40px;
  overflow:hidden;        /* 子要素の角を親の丸みに合わせて切る */
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  transition:.25s;
}

.pagination-jump:active{
  transform:translateY(1px);   /* 押すと 1px 下へ */
  box-shadow:0 3px 6px rgba(0,0,0,.10);
}

/* ---------- 数字入力欄 ---------- */
.pagination-jump input[type="number"]{
  width:65px;
  min-width:72px;
  padding:.4em .5em;
  border:none;
  border-right:1px solid #E0E0E0;   /* フォーム内部の区切り線 */
  font-size:1rem;
  text-align:center;
  outline:none;
}

/* ---------- 送信ボタン ---------- */
.pagination-jump button{
  padding:.55em 1.4em;
  background:#4590ad;               /* 既存ブランドカラー */
  color:#fff;
  font-weight:600;
  border:none;
  border-radius:0;                  /* 親の overflow:hidden が丸く切ってくれる */
  cursor:pointer;
  transition:.25s;
}
.pagination-jump button:hover{
  background:#ff8a97;               /* 既存ホバーと同色系 */
}

/* ---------- スマホ調整 ---------- */
@media(max-width:600px){
  .pagination{gap:10px;}
  .pagination-jump input[type="number"]{width:70px;}
}





/*************************************モバイルメニューの設定****************************************/

/* ================================
   モバイル(～767px)だけロゴを 90% に
   ================================ */
@media screen and (max-width: 767px) {

  /* Cocoon の中央ロゴ（hlt-center-logo）の img 要素 */
  .logo-header img,
  /* site-name で囲まれた img（旧バージョン） */
  .site-name img {
      width: 95% !important;   /* 横幅を親要素の 90% に */
      height: auto;            /* 縦横比を維持 */
      display: block;          /* 行間の余白を除去 */
      margin: 0 auto;          /* 中央寄せ */
  }

  /* ロゴを CSS でスケールしたい場合は下記でも可
     transform の利点：width/height を個別に書き換えない */
  /*
  .logo-header {
      transform: scale(0.9);
      transform-origin: center top;
  }
  */
}




/*************************************完成版】数字付きリスト：イエローのスタイル（背景白）****************************************/
/* ---【A】イエローのデザイン（数字付きリスト用）--- */

/* リスト全体のボックス */
ul.is-style-numeric-list-enclosed {
    list-style-type: none !important;
    border: 2px solid #ffe599; 
    background-color: #FFFBF0 !important; 
    padding: 25px 25px 15px 30px; 
    border-radius: 8px; 
    margin-bottom: 1.5em;
    counter-reset: list-counter;
}

/* リストの各項目 */
ul.is-style-numeric-list-enclosed > li {
    padding-left: 40px; 
    position: relative;
    padding-bottom: 10px; 
    margin-bottom: 10px;
    list-style-type: none;
}

ul.is-style-numeric-list-enclosed > li:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}

/* 数字マーカー */
ul.is-style-numeric-list-enclosed > li::before {
    counter-increment: list-counter;
    content: counter(list-counter);
    position: absolute;
    left: 0;
    top: 0;
    background-color: #ffc107; 
    color: #333333; 
    width: 28px;
    height: 28px;
    border-radius: 6px; 
    font-weight: bold;
    font-size: 14px;
    line-height: 28px; 
    text-align: center; 
}


/* ---【B】サーモンピンクのデザイン（白抜きボックス用）--- */

/* ★リスト全体のボックス（上下の余白を狭める）*/
ul.is-style-blank-box-gray {
    list-style-type: none !important;
    border: 2px solid #FDCDC7; 
    background-color: #FFF5F3 !important; 
    padding: 20px 25px 10px 30px; /* ★上下の余白を調整 */
    border-radius: 8px; 
    margin-bottom: 1.5em;
}

/* ★リストの各項目（行間をさらに詰める）*/
ul.is-style-blank-box-gray > li {
    padding-left: 40px; 
    position: relative;
    padding-bottom: 5px; /* ★項目下の余白を8pxから5pxに変更 */
    margin-bottom: 5px;  /* ★項目下の余白を8pxから5pxに変更 */
    list-style-type: none;
    line-height: 1.6; 
}

ul.is-style-blank-box-gray > li:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}

/* チェックマークマーカー */
ul.is-style-blank-box-gray > li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 5px;
    width: 8px;
    height: 14px;
    border-bottom: 3px solid #FDCDC7; 
    border-right: 3px solid #FDCDC7; 
    transform: rotate(45deg);
}


/* ---【C】共通の入れ子リストのスタイルリセット --- */

/* 内側のリスト自体のスタイルを無効化 */
.is-style-numeric-list-enclosed li ul,
.is-style-blank-box-gray li ul {
    list-style-type: disc !important; 
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 10px 0 5px 25px !important; 
    margin: 10px 0 0 0 !important;
    border-radius: 0 !important;
}

/* 内側のリスト項目のスタイルを無効化 */
.is-style-numeric-list-enclosed li ul li,
.is-style-blank-box-gray li ul li {
    padding: 0 0 8px 0 !important;
    margin: 0 !important;
}

/* 内側のリスト項目からは、カスタムマーカー(::before)を非表示にする */
.is-style-numeric-list-enclosed li ul li::before,
.is-style-blank-box-gray li ul li::before {
    display: none !important;
}






/*************************************
【完成版】数字付きリスト：イエロー（角丸・影なし・アクションなし）
*************************************/

/* リスト全体のボックス（ul/ol 両対応） */
ul.wp-block-list.is-style-numeric-list-enclosed,
ol.wp-block-list.is-style-numeric-list-enclosed {
  list-style: none !important;
  counter-reset: list-counter;
  border: 2px solid #ffe599;
  background-color: #FFFBF0 !important; /* 完全な白にするなら → #ffffff */
  padding: 25px 25px 15px 30px;
  border-radius: 8px;
  margin: 0 0 1.5em 0;
}

/* 各項目 */
ul.wp-block-list.is-style-numeric-list-enclosed > li,
ol.wp-block-list.is-style-numeric-list-enclosed > li {
  position: relative;
  padding-left: 40px;         /* 数字マーカー分の余白 */
  padding-bottom: 10px;
  margin-bottom: 10px;
  list-style: none;
}

/* 末尾だけ余白を詰める */
ul.wp-block-list.is-style-numeric-list-enclosed > li:last-child,
ol.wp-block-list.is-style-numeric-list-enclosed > li:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
}

/* 数字マーカー（角丸四角・単色） */
ul.wp-block-list.is-style-numeric-list-enclosed > li::before,
ol.wp-block-list.is-style-numeric-list-enclosed > li::before {
  counter-increment: list-counter;
  content: counter(list-counter);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background-color: #ffc107;
  color: #333333;              /* 濃い文字色。より黒に近づけるなら #1a1a1a */
  font-weight: 700;
  font-size: 14px;
  line-height: 28px;
  text-align: center;
}

/* ネストしたリストも同じ雰囲気に（1.1/1.2…の連番表示） */
ul.wp-block-list.is-style-numeric-list-enclosed ol,
ul.wp-block-list.is-style-numeric-list-enclosed ul,
ol.wp-block-list.is-style-numeric-list-enclosed ol,
ol.wp-block-list.is-style-numeric-list-enclosed ul {
  list-style: none;
  counter-reset: list-counter;
  margin: 10px 0 0 0;
  padding-left: 0;
}

ul.wp-block-list.is-style-numeric-list-enclosed li > ol > li,
ul.wp-block-list.is-style-numeric-list-enclosed li > ul > li,
ol.wp-block-list.is-style-numeric-list-enclosed li > ol > li,
ol.wp-block-list.is-style-numeric-list-enclosed li > ul > li {
  position: relative;
  padding-left: 40px;
  margin: 8px 0;
}

ul.wp-block-list.is-style-numeric-list-enclosed li > ol > li::before,
ul.wp-block-list.is-style-numeric-list-enclosed li > ul > li::before,
ol.wp-block-list.is-style-numeric-list-enclosed li > ol > li::before,
ol.wp-block-list.is-style-numeric-list-enclosed li > ul > li::before {
  counter-increment: list-counter;
  content: counters(list-counter, ".");
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background-color: #ffe599;  /* 親より淡いイエロー */
  color: #333333;
  font-weight: 700;
  font-size: 13px;
  line-height: 28px;
  text-align: center;
  border: 2px solid #ffc107;  /* 外枠で階層差を軽く表現（影なし） */
}

/* アクセシビリティ：キーボードフォーカスのみ視認性を確保（ホバー等のアクションは無し） */
ul.wp-block-list.is-style-numeric-list-enclosed a:focus-visible,
ol.wp-block-list.is-style-numeric-list-enclosed a:focus-visible {
  outline: 3px solid #ffd34d;
  outline-offset: 3px;
}