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

/************************************
** 子テーマ用のスタイル
************************************/

/* ---------------------------------
   目次リストの装飾
--------------------------------- */
.article .toc-list > li li { list-style: none !important; }
.article .toc-list > li li::before {
  content: "";
  width: 5px;
  height: 5px;
  display: inline-block;
  position: relative;
  left: -15px;
  margin-bottom: 2px;
  border-radius: 100%;
  background: #000000;
}

/* ---------------------------------
   ポイントブロック
--------------------------------- */
.point-box {
  border: 2px solid #000;
  padding: 1.2em 1em;
  margin: 1.5em 0;
  position: relative;
  background: #fff;
}
.point-box .point-title {
  position: absolute;
  top: -0.9em;
  left: 10px;
  background: #fff;
  padding: 0 0.6em;
  font-weight: bold;
  font-size: 1em;
  line-height: 1;
}
.point-box p { margin: 0; padding: 0; }

/* ---------------------------------
   全体のバランス
--------------------------------- */
.entry-content { padding-bottom: 0; margin-bottom: 0; }

@media (max-width: 1023px){
  article > .entry-content,
  article > footer.article-footer { padding: 0 20px; }
}

@media screen and (max-width: 880px){ .page-body { font-size: 16px; } }
@media screen and (max-width: 480px){ .page-body { font-size: 15px; } }

img { box-shadow: 0px 2px 5px 0 rgba(0,0,0,.2); }
a { -webkit-tap-highlight-color: rgba(0,0,0,0); }
.body .article { margin-bottom: 0; }

/* ---------------------------------
   ヘッダーロゴ
--------------------------------- */
.logo-image { padding: 0; margin-left: 1em; margin-top: 1em; margin-bottom: 1em; max-height: 60px; }
.logo { text-align: left; }
.logo-header img { box-shadow: none !important; }

/* ---------------------------------
   ヘッダー レイアウト（PC）
   ロゴ左・メニュー中央
--------------------------------- */
#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo { flex: 0 0 auto; text-align: left; }
.navi-in { 
  flex: 1 1 auto; 
  display: flex; 
  justify-content: center; 
}
.navi-in > ul li { line-height: 50px; height: 50px; }
.navi-in a { font-size: 15px; }
#navi .navi-in a:hover { transform: none!important; }
.navi-in > ul .sub-menu { box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26); }
.sub-menu .caption-wrap {
  color:#333;
  border-top: dotted #dddddd;
  background:#fff;
  padding:0 0 0 2em;
  margin:0;
}
.navi-in > ul .sub-menu a:hover { transform: none!important; }
div#header-container { box-shadow: none; }
div.item-label{ font-weight:bold; }

/* ---------------------------------
   ヘッダー モバイル表示
--------------------------------- */
@media (max-width: 1023px){
  #header { flex-direction: column; align-items: flex-start; }

  .mobile-header-menu-buttons { background: #fff !important; height: 60px !important; }
  img.site-logo-image,
  img.logo-image {
    max-height: 40px !important;
    height: auto !important;
    padding: 2px 0 0 5px !important;
    box-shadow: none !important;
  }
}

/* ---------------------------------
   モバイル表示 ヘッダーメニュー・検索アイコン
--------------------------------- */
.mobile-menu-buttons{ height:50px; box-shadow: none; }
.mobile-menu-buttons > li { padding-top:0; }
.menu-button{ margin: auto; }
.mobile-menu-buttons .menu-button:hover{ background-color:white; }
span.fas.fa-search::before{ color:#90C31F; margin-left:1em; }
span.fas.fa-bars::before{ color:#90C31F; margin-right:1em; }
.navi-menu-caption.menu-caption,
.home-menu-caption.menu-caption,
.search-menu-caption.menu-caption,
.top-menu-caption.menu-caption,
.sidebar-menu-caption.menu-caption{ display:none; }

/* ---------------------------------
   モバイルスライドインメニュー
--------------------------------- */

ul.menu-drawer:before {
  font-size:1.2em;
  background:white;
  color:#333;
  margin-bottom:1em;
  border-bottom:3px dotted #0067C0;
  content:"メニュー";
}
ul.menu-drawer:after {
  background:white;
}
.menu-drawer li {
  padding:0;
  font-weight:bold;
}
.menu-drawer a {
  font-size:1.3em;
  background-color:#ffffff;
  color:#545454;
  margin:.5em 0;
}
.menu-drawer a:hover {
  background-color:#f7f7f7;
}

/* ▼ サブメニュー用：ここを追加！ */
.menu-drawer .sub-menu li a::before {
  font-family:"FontAwesome";
  content:"\f105";
  color:#545454;
  margin-right:0.5em;
}

.article h2:before {
  background-image: none;
}

/* ---------------------------------
   本文記事見出し H3（下線追加）
--------------------------------- */
.article h3 {
  position: relative;         
  margin-bottom: 1em;         
  padding-bottom: 0.3em;      
}

.article h3::after {
  content: "";                
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;                
  background-color: #13CCFF;  /* H2と同じ水色 */
  border-radius: 1px;         
}

/* H3のレスポンシブ調整（タブレット・スマホ） */
@media screen and (max-width: 768px) {
  .article h3::after { height: 2px; }
}
@media screen and (max-width: 480px) {
  .article h3::after { height: 2px; }
}

/* ---------------------------------
   記事タイトルのスマホ用最適化
--------------------------------- */
@media screen and (max-width: 768px) {
  .article-title {
    font-size: 18px;  
    line-height: 1.2;
  }
}
@media screen and (max-width: 480px) {
  .article-title {
    font-size: 16px;  
    line-height: 1.2;
  }
}

/* ---------------------------------
   本文テキストのスマホ用最適化
--------------------------------- */
@media screen and (max-width: 768px) {
  .entry-content,
  .entry-content p {
    font-size: 15px;  
    line-height: 1.5;
  }
}
@media screen and (max-width: 480px) {
  .entry-content,
  .entry-content p {
    font-size: 14px;  
    line-height: 1.5;
  }
}

/*** 文字間隔を少し広げる（全体適用） ***/
.entry-content {
  letter-spacing: 0.04em; 
}

@media screen and (max-width: 480px) {
  .entry-content > p,
  .sidebar p {
    margin: 1.8em 0; 
    line-height: 1.8; 
  }
}

/* PCサブメニュー背景色と文字色 */
@media screen and (min-width: 481px) {
  .navi-in > ul .sub-menu li a {
    background-color: #BBAD8B !important; 
    color: #ffffff !important;            
  }

  .navi-in > ul .sub-menu li {
    border-bottom: none !important;
  }

  .navi-in > ul .sub-menu li a .caption-wrap {
    background-color: transparent !important; 
    color: inherit !important;                
  }
}

#navi .navi-in ul.sub-menu li a .caption-wrap {
  border-top: none !important;
}


/* サムネイルとタイトルだけ表示にする */
.entry-card-snippet {
    display: none !important;
}

/* 新着記事のタイトルを黒＆太字に */
#list .entry-card-title {
    color: #000000 !important;
    font-weight: bold !important;
}

.article h3 {
  border-left: none !important;
  background: none !important;
  position: relative; /* 下線用の擬似要素と共存 */
}

.article h3::before {
  content: none !important; /* 擬似要素で描画される線を消す */
}

.article h3 {
  border-left: none !important;
  background: none !important;
  position: relative;       /* 下線用 */
  padding-left: 0 !important;  /* 左余白をリセット */
  margin-left: 0 !important;   /* 左マージンもリセット */
}

@media screen and (max-width: 480px) {
  .article h2 {
    font-size: 16px;  /* 18px → 16px に縮小 */
  }
}

/* PC・共通 */
.article h3 {
  border-left: none !important;
  background: none !important;
  position: relative;       
  padding-left: 0 !important;  
  margin-left: 0 !important;   
}

/* スマホ（480px以下）用 */
@media screen and (max-width: 480px) {
  .article h3 {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
}

/* H3 PC用 */
.article h3 {
  font-size: 24px;
}

/* H3 タブレット用（768px以下） */
@media screen and (max-width: 768px) {
  .article h3 {
    font-size: 20px;
  }
}

/* H3 スマホ用（480px以下） */
@media screen and (max-width: 480px) {
  .article h3 {
    font-size: 18px;
  }
}

/* PC用（デフォルト） */
.article h2,
.article h3 {
  font-size: 20px;  /* PC表示で20pxに統一 */
}

/* タブレット用（768px以下） */
@media screen and (max-width: 768px) {
  .article h2,
  .article h3 {
    font-size: 20px;  /* タブレットはそのまま20px */
  }
}

/* スマホ用（480px以下） */
@media screen and (max-width: 480px) {
  .article h2,
  .article h3 {
    font-size: 18px;  /* スマホは今のまま18px */
  }
}

@media screen and (max-width: 480px) {
  .article h3 {
    padding-right: 0 !important;
    margin-right: 0 !important;
  }
}

/* 新着記事カードのカテゴリラベル */
.entry-card .cat-label {
    display: inline-block;
    margin: 5px 0;              /* タイトルとの間隔 */
    font-size: 0.9em;
    border: 1px solid #87CEFA;  /* 薄い青の枠線 */
    background-color: #fff;     /* 白背景 */
    color: #0056b3;             /* 濃いめの青文字 */
    padding: 2px 8px;
    border-radius: 4px;
}

/* ラッパーを使って複数ラベルも整列 */
.cat-label-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* デフォルトの絶対配置を解除 */
.entry-card .cat-label {
  position: relative !important;  /* absolute を無効化 */
  top: auto !important;
  left: auto !important;
  display: inline-block;
  margin: 5px 0;   /* タイトルとの間隔 */
  padding: 2px 10px;
  font-size: 0.9em;
  border-radius: 30px;
  background: #FF3100;        /* 背景を白 */
  border: 1px solid #FF3100; /* 枠を薄い青 */
  color: #ffffff;          /* 文字色を濃いめの青 */
}

/* 新着記事カード全体の背景と枠を消す */
.entry-card-wrap {
  background: none !important;   /* 背景を消す */
  border: none !important;       /* デフォルトの枠線を消す */
  box-shadow: none !important;   /* 影も消す */
  padding: 15px 0;               /* 上下に余白をつける */
}

/* 最後の記事カードの仕切り線を消す */
.entry-card:last-child {
  border-bottom: none;
}

/* 最後の記事カードの仕切り線を消す */
.entry-card:last-child {
  border-bottom: none !important;
}

/* 最後のカードの線を消す */
.entry-card-wrap:last-child {
  border-bottom: none !important;
}


/* スマホ用（480px以下） */
@media screen and (max-width: 480px) {
    #list .entry-card {
        padding-bottom: 6px !important;
        margin-bottom: 12px !important;
    }
}

/* Cocoonデフォルトのメタ下のボーダーを消す */
.entry-card .entry-card-meta {
    border-bottom: none !important;
}

/* 新着記事カードの仕切り線と余白 */
#list .entry-card {
    border-bottom: 1px solid #888 !important;  /* グレー線 */
    padding-bottom: 8px !important;            /* 線と記事の内容の距離 */
    margin-bottom: 15px !important;            /* 線と次の記事の距離 */
}

/* スマホ用（480px以下） */
@media screen and (max-width: 480px) {
    #list .entry-card {
        padding-bottom: 6px !important;
        margin-bottom: 12px !important;
    }
}

/* 投稿メタ下のデフォルト線と余白を完全に消す */
.entry-card .entry-card-meta,
.entry-card .entry-card-meta span,
.entry-card .entry-card-meta div {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 記事カード全体の余白を最適化 */
#list .entry-card {
    border-bottom: 1px solid #888 !important;  /* 記事間の仕切り線 */
    padding: 5px 0 !important;                 /* 線と記事内容の距離 */
    margin: 8px 0 !important;                  /* 線と次の記事の距離 */
}

/* スマホ用（480px以下） */
@media screen and (max-width: 480px) {
    #list .entry-card {
        padding-bottom: 4px !important;
        margin-bottom: 6px !important;
    }
}

/* 投稿メタ下の余計な線・余白を消す */
.entry-card .entry-card-meta,
.entry-card .entry-card-meta .entry-card-categorys {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* 記事カード全体の背景と枠を消す */
.entry-card-wrap {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;       /* 上下余白をゼロに */
    margin: 0 !important;
}

/* 記事コンテンツ内の余白も調整 */
.entry-card .entry-card-content {
    padding: 0 !important;
    margin: 0 !important;
}

/* 記事間の仕切り線 */
#list .entry-card {
    border-bottom: 1px solid #888; /* グレー線 */
    margin-bottom: 8px;            /* 次の記事までの距離 */
    padding-bottom: 8px;           /* 線と記事内容の距離 */
}

/* 最後の記事カードの線を消す */
#list .entry-card:last-child {
    border-bottom: none;
}

/* スマホ用調整（480px以下） */
@media screen and (max-width: 480px) {
    #list .entry-card {
        margin-bottom: 6px;
        padding-bottom: 6px;
    }
}



/* li全体の幅 */
.header-search {
  width: 200px !important;
}

/* 検索入力欄 */
.header-search input.search-edit {
  padding: 8px 14px;
  font-size: 14px;
  border-radius: 14px / 50%;
  border: 1px solid #ccc; /* お好みで */
}

/* 送信ボタン */
.header-search .search-submit {
  color: #378cb0;
  background: transparent;
  border: none;
}

ul#header-menu li.header-search input.search-edit {
  padding: 8px 14px !important;
  font-size: 14px !important;
  border-radius: 14px / 50% !important;
  border: 1px solid #ccc !important;
}

/* ヘッダーメニュー内の検索フォームを確実に狙う */
li.header-search {
  width: 200px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* 入力欄 */
li.header-search input.search-edit {
  width: 100% !important;
  padding: 8px 14px !important;
  font-size: 14px !important;
  border-radius: 14px / 50% !important;
  border: 1px solid #ccc !important;
  box-sizing: border-box !important;
}

/* 送信ボタン */
li.header-search .search-submit {
  color: #378cb0 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 4px 6px !important;
}

/* メニュー内で整列させたい場合 */
ul#header-menu {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important; /* メニュー間の余白 */
}

/* li全体の幅調整 */
li.header-search {
  width: 180px !important; /* 横幅も少し短く */
  display: inline-block !important;
  vertical-align: middle !important;
}

/* 入力欄をコンパクトに */
li.header-search input.search-edit {
  width: 100% !important;
  height: 28px !important; /* 縦を小さく */
  padding: 4px 10px !important; /* 内側の余白も調整 */
  font-size: 13px !important;
  border-radius: 14px / 50% !important;
  border: 1px solid #ccc !important;
  box-sizing: border-box !important;
}

/* プレースホルダーを消す */
li.header-search input.search-edit::placeholder {
  color: transparent !important;
}

/* 送信ボタン */
li.header-search .search-submit {
  color: #378cb0 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 2px 4px !important;
}

/* 検索ボタンの虫眼鏡を青にする（元のSVGを歪めずに色変更） */
li.header-search .search-submit {
  filter: invert(37%) sepia(91%) saturate(4089%) hue-rotate(182deg) brightness(92%) contrast(91%) !important;
}

/* モバイル時に本文余白を調整 */
@media screen and (max-width: 768px) {
  .entry-content {
    padding-left: 0.5em !important;
    padding-right: 0.5em !important;
  }
  .entry-content p {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* 投稿記事ページ本文の文字色を黒にする */
body.single .entry-content {
  color: #000000 !important;
}

/* 記事本文全体 */
.entry-content,
.entry-content p,
.entry-content li {
    font-family: "Noto Sans", "Noto Sans JP", sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #000000; /* 黒文字 */
    line-height: 1.7;
}

/* 見出し */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    font-family: "Noto Sans", "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #000000;
}

/* 強調テキスト（<strong> やマーカー） */
.entry-content strong,
.entry-content .marker-under {
    color: #000000; /* 黒文字で統一 */
}

/* 目次のテキスト */
#toc,
#toc a,
#toc .toc-title,
#toc .toc-list li a {
    font-family: "Noto Sans", "Noto Sans JP", sans-serif;
    font-weight: 400;
    color: #000000; /* 黒文字 */
}

/* h2だけ白にする */
.entry-content h2 {
    font-family: "Noto Sans", "Noto Sans JP", sans-serif;
    font-weight: 600;
    color: #ffffff !important; /* 白文字 */
    /* background: #378cb0;  ← この行を削除 */
    padding: 0.5em 0.8em;
    border-radius: 6px;
}

@media screen and (max-width: 480px) {
  .entry-content p,
  .entry-content li {
    font-size: 13px;       /* 文字サイズ */
    line-height: 1.6;      /* 行間 */
    margin-bottom: 0.8em;  /* 段落下の余白 */
  }

  /* li 内のブロック化はしない */
  .entry-content li > p,
  .entry-content li > span,
  .entry-content li > strong {
    margin-bottom: 0;       /* 余計な下余白を削除 */
  }
}

@media screen and (max-width: 480px) {
  .entry-content div[style] {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
  .entry-content div[style] p,
  .entry-content div[style] li,
  .entry-content div[style] span,
  .entry-content div[style] strong {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
}

@media screen and (max-width: 480px) {
  .entry-content div,
  .entry-content div * {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
}

/* 待機中（通常時） */
.tab-label {
  background-color: #f0f0f0 !important; /* 薄いグレー */
  color: #000 !important;               /* 黒文字 */
  transition: background-color 0.3s ease;
  cursor: pointer;
}

/* ホバー時 */
.tab-label:hover {
  background-color: #0056b3 !important; /* 濃い青 */
  color: #fff !important;               /* 白文字 */
}

/* クリック後（アクティブ） */
.tab-label.is-active {
  background-color: #0056b3 !important; /* 濃い青 */
  color: #fff !important;               /* 白文字 */
}

.tab-label {
  background-color: #f0f0f0 !important; /* 待機中の色 */
  color: #000 !important;               /* 待機中の文字色 */
  padding: 16px 16px !important;        /* 上下16px、左右16pxに変更 */
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.tab-label:hover {
  background-color: #0056b3 !important; /* hover色 */
  color: #fff !important;
}

.tab-label.is-active {
  background-color: #0056b3 !important; /* アクティブ色 */
  color: #fff !important;
}

/* 左寄せテキストはそのまま */
.toggle-button {
  text-align: left;
  position: relative;
  padding-right: 30px;   /* 右端アイコン分の余白 */
}

/* デフォルトの + アイコンを非表示 */
.toggle-button .toggle-icon,
.toggle-button .toggle-arrow { 
  display: none !important;
}

/* 右端の矢印アイコン */
.toggle-button::after {
  content: "⌄";            /* 下向き山型矢印 */
  font-size: 22px;         /* アイコンサイズ */
  position: absolute;
  right: 10px;             /* 右端 */
  top: 50%;                /* 縦中央 */
  transform: translateY(-50%); /* 縦中央にぴったり */
  transition: transform 0.2s ease;
}

/* 開いたときは上向き */
.toggle-button.is-active::after,
.toggle-button[aria-expanded="true"]::after {
  content: "⌃";            /* 上向き山型矢印 */
}

/* アコーディオン左端の+アイコンを非表示 */
.toggle-button::before {
  display: none !important;
}

/* デフォルト：下向き矢印 */
.toggle-button::after {
  content: "⌄";               /* 下向き山型 */
  font-size: 22px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}

/* 開いたとき：上向き矢印に切り替え */
.toggle-checkbox:checked + .toggle-button::after {
  content: "⌃";               /* 上向き山型 */
}

/* アコーディオン見出しの背景と文字色 */
.toggle-button {
  background-color: #ffffff;  /* 背景白 */
  color: #000000;             /* 文字黒 */
  text-align: left;           /* 左寄せ維持 */
  position: relative;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* 右端の矢印 */
.toggle-button::after {
  content: "⌄";               /* 下向き山型 */
  font-size: 22px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
  color: #000000;             /* 矢印も黒 */
}

/* 開いたときの矢印 */
.toggle-checkbox:checked + .toggle-button::after {
  content: "⌃";               /* 上向き山型 */
  color: #000000;             /* 矢印も黒 */
}

/* デフォルト：下向き矢印 */
.toggle-button::after {
  font-family: "FontAwesome";   /* Font Awesome を指定 */
  content: "\f078";             /* fa-chevron-down の Unicode */
  font-size: 14px;              /* アイコンの大きさ（ここで調整） */
  position: absolute;
  right: 10px;                  /* 右端 */
  top: 50%;                     /* 縦中央 */
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}

/* 開いたとき：上向き矢印に変更 */
.toggle-checkbox:checked + .toggle-button::after {
  content: "\f077";             /* fa-chevron-up の Unicode */
}

/* タブラベル全体 */
.tab-label-group .tab-label {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  background: #e0f0ff;       /* 通常の背景色 */
  border-radius: 12px;
  margin-right: 5px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

/* アクティブタブ */
.tab-label-group .tab-label.is-active {
  background: #3aa0ff;       /* アクティブ背景色 */
  color: #fff;
  z-index: 10;
  transform: translateY(-3px);
}

/* アクティブタブの三角形 */
.tab-label-group .tab-label.is-active::before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) translateY(50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #3aa0ff; /* ← ここを背景色と同じに */
  z-index: 11;
}

/* ホバー時 */
.tab-label-group .tab-label:hover {
  background: #3aa0ff;
}

.tab-label-group .tab-label:hover::before {
  border-top-color: #3aa0ff; /* ホバー色に合わせる */
}

.tab-label-group {
  overflow: visible;
}

.tab-label-group .tab-label.is-active {
  position: relative;
  background: #3aa0ff;
  color: #fff;
  z-index: 10;
  transform: translateY(-3px);
}

.tab-label-group .tab-label.is-active::before {
  content: "";
  position: absolute;
  bottom: -6px; /* ラベルの下端 */
  left: 50%;
  transform: translateX(-50%) translateY(50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #3aa0ff; /* 背景色と同じ */
  z-index: 11;
}

/* アクティブタブ */
.tab-label-group .tab-label.is-active {
  position: relative;
  background: #3aa0ff !important; /* 強制的に背景色を反映 */
  color: #fff !important;
  z-index: 10;
  transform: translateY(-3px);
}

/* アクティブタブの三角形 */
.tab-label-group .tab-label.is-active::before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) translateY(50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #3aa0ff !important; /* 強制的に背景色と同じ */
  z-index: 11;
}

.tab-label-group {
  overflow: visible;
}

/* 非アクティブタブ（薄いグレー背景＋黒文字）はそのまま */
.tab-label-group .tab-label {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  background: #e0e0e0; /* 非アクティブ背景 */
  color: #000;         /* 非アクティブ文字色 */
  border-radius: 12px;
  margin-right: 5px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

/* ホバー時もアクティブ色に */
.tab-label-group .tab-label:hover {
  background: #3aa0ff !important; /* アクティブ固定と同じ色 */
  color: #fff !important;
}

.tab-label-group .tab-label:hover::before {
  border-top-color: #3aa0ff !important; /* 三角形も同じ色 */
}

/* アクティブタブ */
.tab-label-group .tab-label.is-active {
  position: relative;
  background: #3aa0ff !important; /* アクティブ色 */
  color: #fff !important;
  z-index: 10;
  transform: translateY(-3px);
}

/* アクティブタブの吹き出し三角 */
.tab-label-group .tab-label.is-active::before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) translateY(50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #3aa0ff !important; /* アクティブ色と同じ */
  z-index: 11;
}

/* タブラベルの横スクロール対応 */
.tab-label-group {
  display: flex;             /* 横並び */
  overflow-x: auto;          /* 横スクロール可能 */
  -webkit-overflow-scrolling: touch; /* スマホでスムーズスクロール */
  gap: 5px;                  /* タブ間の隙間 */
  padding-bottom: 10px;      /* 下に余白（吹き出し分） */
}

/* タブ自体 */
.tab-label-group .tab-label {
  flex: 0 0 auto;           /* 幅を固定せず、内容に合わせる */
  white-space: nowrap;       /* 改行させない */
}

/* optional: スクロールバーを非表示に */
.tab-label-group::-webkit-scrollbar {
  display: none;
}

/* H2に細かい斜めストライプ背景 */
.article h2 {
  font-size: 20px; /* PC用 */
  color: #000000 !important; /* テキスト黒 */
  background: repeating-linear-gradient(
    45deg,                         
    #ffffff,                       
    #ffffff 2px,                   
    rgba(19, 204, 255, 0.12) 2px,  
    rgba(19, 204, 255, 0.12) 4px   
  );
  padding: 0.8em 1em;
  border-radius: 6px;
  border: none;

  /* 👇 追加部分 */
  border-left: 6px solid #349FDB; /* 左に青い線 */
  padding-left: 0.8em; /* 線と文字の間に少し余白 */
}

/* タブレット（768px以下） */
@media screen and (max-width: 768px) {
  .article h2 {
    font-size: 20px;
  }
}

/* スマホ（480px以下） */
@media screen and (max-width: 480px) {
  .article h2 {
    font-size: 16px;
  }
}

#appeal,
.appeal .appeal-in {
	min-height: 24vw;
}
@media screen and (min-width: 1267px) {
	#appeal,
	.appeal .appeal-in {
		min-height: 200px; /* 300px から 200px に変更 */
	}
}
.appeal {
	background-size: contain;
}

@media screen and (max-width: 480px) {
  .index-list::before,
  .list::before {
    margin-top: -10px;
    font-size: 16px !important;
  }
}


/* カルーセルのカテゴリーラベルスタイル */
.carousel-entry-card .cat-label {
  position: static !important;  /* 絶対配置を解除 */
  display: inline-block;
  padding: 4px 10px;
  margin: 8px 0 0 0;
  font-size: 0.85em;
  font-weight: normal;
  background-color: #f0f0f0;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 3px;
}

 /* 新着記事カード全体の幅を統一 */
  #list .entry-card-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

/* PC版の新着記事カードの仕切り線を統一 */
@media (min-width: 481px) {
  #list .entry-card {
    border-bottom: 1px solid #888 !important;
    padding-bottom: 8px !important;
    margin-bottom: 15px !important;
    width: 100% !important;
    display: block !important;
  }
	
/* 新着記事見出しとボタンのラッパー */
.newpost-header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;  /* 上下左右に余白を追加 */
  background-color: #f5f5f5;  /* 薄いグレーの背景 */
  border-bottom: none;  /* 青い線を削除 */
  margin-bottom: 20px;
}

.newpost-title {
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.newpost-view-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 20px;
  background: #c62828;
  color: #fff;
  text-decoration: none;
  border-radius: 25px;
  font-weight: bold;
  font-size: 0.9em;
  transition: background 0.3s;
}

.newpost-view-all:hover {
  background: #a52020;
}

.newpost-view-all span {
  font-size: 1.2em;
}

/* 2. 新着記事のタイトルの文字間隔を調整 */
@media (min-width: 481px) {
  #list .entry-card-title {
    font-size: 1.3em !important;
    line-height: 1.6 !important;  /* 行間を広く */
    letter-spacing: 0.03em !important;  /* 文字間を広く */
    margin-bottom: 8px !important;
    padding: 2px 0 !important;  /* 上下に余白 */
  }
}

/* 新着記事とカルーセルのコンテナ幅を統一 */
@media (min-width: 481px) {
  #carousel,
  .newpost-header-wrapper,
  #list {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
  }
}

	/* モバイル版の「一覧へ」ボタン調整 */
@media (max-width: 480px) {
  /* 新着記事見出しと一覧へボタンのラッパー */
  .newpost-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 3px solid #007BFF;
    margin-bottom: 15px;
  }
  
  .newpost-title {
    font-size: 1em;
    font-weight: bold;
    color: #333;
    margin: 0;
  }
  
  .newpost-view-all {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 6px 15px;
    background: #c62828;
    color: #fff !important;
    text-decoration: none;
    border-radius: 25px;
    font-weight: bold;
    font-size: 0.85em;
    white-space: nowrap;
    transition: background 0.3s;
  }
  
  .newpost-view-all:hover {
    background: #a52020;
  }
  
  .newpost-view-all span {
    font-size: 1.1em;
  }
}

/* 既存の #list::before を完全に非表示 */
#list::before {
  display: none !important;
  content: none !important;
}
	
.widget-entry-card-update-date {
	display: none;
}

	
/* カルーセルカードの幅を調整して左寄せ */
.carousel-entry-card-wrap {
    width: 600px !important;      /* 横幅を短く（お好みで調整） */
    margin-left: 0 !important;    /* 左寄せ */
    margin-right: auto !important; /* 右側に余白を作る */
}

/* カルーセル自体のパディングを調整 */
#carousel {
    padding-left: 10px !important; /* 左側に少し余白を残す */
    padding-right: 0 !important;
    max-width: none !important;     /* 親の幅に制限されないように */
}

	/* カルーセルタイトルの折り返しを有効にする */
.carousel-entry-card-title {
    white-space: normal !important;    /* 折り返しを有効に */
    overflow: visible !important;      /* はみ出しを表示 */
    text-overflow: clip !important;    /* ellipsisを無効化 */
    line-height: 1.4;                  /* 行間を少し調整 */
    max-height: none !important;       /* 高さ制限を解除 */
}

@media screen and (min-width: 481px) {
    /* タイトルをブロックにして改行 */
    .carousel-entry-card .carousel-entry-card-title {
        display: block !important;
        margin-bottom: 30px !important; /* カテゴリとの距離を指定 */
        line-height: 1.4;
    }

    /* カテゴリラベルをブロックに */
    .carousel-entry-card .cat-label {
        display: block !important;  /* これでタイトル下に必ず来る */
        margin-top: 0 !important;   /* 上余白はタイトルのmarginで調整 */
    }
}

/* reCAPTCHAバッジを完全に非表示 */
.grecaptcha-badge { 
  visibility: hidden !important;
  opacity: 0 !important;
  display: none !important;
}

/* モバイル専用の指定も追加 */
@media screen and (max-width: 768px) {
  .grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
    display: none !important;
  }
}

/* カルーセルのカテゴリーラベルを横並びに */
.carousel-entry-card-thumb .cat-label-wrapper,
.carousel-entry-card-content .cat-label-wrapper {
  display: flex !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
  margin: 10px 0 !important;
}

.carousel-entry-card .cat-label {
  display: inline-block !important;
  margin: 0 !important;
}
	
/* カルーセルのカテゴリーラベルをタイトルの下に配置 */
.carousel-entry-card-content {
  display: flex !important;
  flex-direction: column !important;
}

.carousel-entry-card-title {
  order: 1 !important;  /* タイトルを上に */
}

.carousel-entry-card-content .cat-label-wrapper {
  order: 2 !important;  /* カテゴリーラベルを下に */
}
	
/* 本文の段落テキストのみを変更 */
.entry-content > p,
.entry-content > div > p,
.entry-content li {
    font-family: "Noto Sans JP", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    color: #333333 !important;
    line-height: 1.85 !important;
    letter-spacing: 0.05em !important;
}

/* 段落の余白 */
.entry-content > p {
    margin-bottom: 1.8em !important;
}

/* リスト項目 */
.entry-content ul li,
.entry-content ol li {
    margin-bottom: 0.8em !important;
}

/* PC版サブメニューのカードスタイル */
@media screen and (min-width: 481px) {
  /* サブメニュー全体 */
  .navi-in > ul .sub-menu {
    background: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    padding: 10px 0 !important;
    overflow: hidden !important;
  }

  /* 各メニュー項目 */
  .navi-in > ul .sub-menu li {
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border: none !important;           /* 全ての枠線を削除 */
    margin: 0 !important;
  }

  /* メニューリンク */
  .navi-in > ul .sub-menu li a {
    background-color: #ffffff !important;
    color: #333333 !important;
    padding: 12px 20px !important;
    transition: background-color 0.2s ease !important;
    border: none !important;           /* リンクの枠線も削除 */
    font-size: 14px !important;        /* 文字サイズを小さく */
  }

  /* ホバー時 */
  .navi-in > ul .sub-menu li a:hover {
    background-color: #f5f5f5 !important;
    color: #333333 !important;
    border: none !important;
  }

  /* キャプション部分 */
  .sub-menu .caption-wrap {
    color: #333333 !important;
    background: transparent !important;
    border-top: none !important;
    border: none !important;           /* キャプションの枠線も削除 */
    padding: 0 !important;
    margin: 0 !important;
    font-size: 14px !important;        /* 文字サイズを小さく */
  }
}
	
.navi-in > ul .sub-menu li {
	height: 33px !important; /* ← この値を変更すれば高さが変わる */
}

.content_area {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 30px 20px;
}

table {
    width: 100%;
    margin-bottom: 10px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
}

th,
td {
    padding: 10px 18px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    line-height: 2.7rem;
    vertical-align: top;
}

th {
    width: 300px;
    background: #F5F5F5;
    font-weight: bold;
    text-align: left;
}

/* テーブルのセルの余白を少し広く */
.has-fixed-layout th,
.has-fixed-layout td {
  padding: 8px 12px;     /* 上下・左右の余白を増やす */
  line-height: 1.6;      /* 行間も少し広げる */
}

/* ヘッダーの上下に仕切り線を追加 */
.has-fixed-layout thead th {
  border-top: 2px solid #999;    /* 上線 */
  border-bottom: 2px solid #999; /* 下線 */
}

@media (min-width: 768px) {
  .table_box table td {
    line-height: 1.4; /* ← デフォルトより少し詰める */
  }
}

.content_area {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.table_box {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: auto; /* ← これ大事。枠外にはみ出さず中でスクロール可 */
}

.table_box table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: auto;
}

.table_box table th,
.table_box table td {
  padding: 12px 16px;
  border: 1px solid #ccc;
  text-align: left;
  vertical-align: top;
}

@media screen and (min-width: 768px) {
    .table_box table th,
    .table_box table td {
        font-size: 13px;  /* PC用に文字サイズを小さく */
        line-height: 1.5; /* 行間も少し詰める */
    }
}

/* シェアボタンのカスタマイズ */

/* デフォルトのSHAREテキストを非表示 */
.sns-share-message {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sns-share-buttons .sns-share-message {
  display: none !important;
}

/* ボタン全体を中央寄せ */
.sns-share-buttons {
  text-align: center !important;
  margin: 30px auto !important;
  position: relative !important;
  padding-top: 40px !important;
  display: block !important;
}

/* デフォルトの ::after を削除 */
.sns-share-buttons::after {
  display: none !important;
}

/* SHARE テキストを上部に配置 */
.sns-share-buttons::before {
  content: "＼ SHARE ／" !important;
  display: block !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: normal !important;
  color: #999 !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 20px !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
}

/* ボタンを横並びに（PC・モバイル共通） */
.sns-share-buttons .sns-button {
  display: inline-flex !important;
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  margin: 0 4px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  position: relative !important;
  transition: transform 0.2s ease !important;
  vertical-align: middle !important;
  float: none !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: row !important;
}

/* ホバー時 */
.sns-share-buttons .sns-button:hover {
  transform: translateY(-3px) !important;
}

/* アイコン */
.sns-share-buttons .social-icon {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  font-size: 24px !important;
  color: #fff !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* キャプションとカウントを非表示 */
.sns-share-buttons .button-caption,
.sns-share-buttons .share-count {
  display: none !important;
}

/* 各SNSの背景色 */
.sns-share-buttons .twitter-button,
.sns-share-buttons .x-corp-button {
  background-color: #000000 !important;
}

.sns-share-buttons .facebook-button {
  background-color: #3b5998 !important;
}

.sns-share-buttons .hatebu-button {
  background-color: #00a4de !important;
}

.sns-share-buttons .line-button {
  background-color: #00b900 !important;
}

.sns-share-buttons .pinterest-button {
  background-color: #bd081c !important;
}

.sns-share-buttons .copy-button {
  background-color: #666666 !important;
}

/* モバイル対応（強制的に適用） */
@media screen and (max-width: 767px) {
  /* SHAREメッセージを確実に非表示 */
  .sns-share-message {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* 上部余白 */
  .sns-share-buttons {
    padding-top: 35px !important;
    text-align: center !important;
  }
  
  /* SHAREテキスト */
  .sns-share-buttons::before {
    font-size: 11px !important;
    margin-bottom: 15px !important;
  }
  
  /* ボタンを確実に横並びに */
  .sns-share-buttons .sns-button {
    display: inline-flex !important;
    width: 45px !important;
    height: 45px !important;
    min-width: 45px !important;
    max-width: 45px !important;
    margin: 0 3px !important;
    float: none !important;
    flex-direction: row !important;
  }
  
  .sns-share-buttons .social-icon {
    font-size: 20px !important;
  }
  
  /* Cocoonのモバイル用クラスも上書き */
  .sns-share-buttons.sns-buttons .sns-button {
    display: inline-flex !important;
    width: 45px !important;
    height: 45px !important;
  }