@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.5
*/

/* =============================================================================
 * 0. 基本設定（フォント・基本色）
 * ========================================================================== */
body {
  font-family: "ヒラギノ角ゴ ProN", "Yu Gothic", "メイリオ", Meiryo, sans-serif !important;
  color: #333;
}

/* リンクの文字色を基本色に統一 */
a {
  color: #333;
}

input, textarea, button, select {
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ ProN", "Yu Gothic", sans-serif !important;
}

/* =============================================================================
 * 1. 全体レイアウト・パーツ
 * ========================================================================== */
/* メインコンテンツの左右余白 */
main.main {
  padding: 0 10px !important;
}

/* ヘッダー高さ自動調整 */
.header .header-in {
  min-height: auto !important;
}

/* ロゴ画像の余白削除 */
.logo-image {
	padding: 0;
}
.logo-image * {
	display: block;
	margin: auto;
}

/* コンテンツエリア上部の余白 */
.container .column-wrap > div {
    padding-top: 5px !important;
}
.entry-content {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.7;
}

/* フッターの余白調整 */
.footer {
  padding-top: 0;
  margin-top: 0;
}
/* ★追加：フッターのリンクホバー色をアクセシビリティ対応カラーに設定 */
.footer a:hover {
  color: #B3E0B3;
}
.footer-bottom {
  margin-top: 0;
}
.footer-bottom-content {
  line-height: 2.0;
}

/* ページネーション（次へ・前へボタン） */
.page-prev-next {
  border-radius: 30px;
}

/* 入力エリアの装飾 */
.search-edit, input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea, select {
  border: 1px solid #8dcaae;
  border-radius: 10px;
}

/* トップへ戻るボタン */
.go-to-top {
  right: 10px;
  bottom: 10px;
}
.go-to-top-button, .go-to-top-button:hover {
	border: 0;
}

/* =============================================================================
 * 2. 見出し (h1-h6)
 * ========================================================================== */
.article h1 {
  color: #1F7343 !important; /* ★変更：コントラスト比対応 */
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-top: 32px !important;
  margin-bottom: 28px !important;
}

.article h2 {
  background-color: #e6f4e6 !important;
  color: #1F7343 !important; /* ★変更：コントラスト比対応 */
  border-bottom: 2px solid #9ddb9d !important;
  padding-bottom: 8px !important;
  margin-top: 2em !important;
  margin-bottom: 24px !important;
  font-weight: 700 !important;
  font-size: 1.6rem !important;
  line-height: 1.3 !important;
}

.article h3 {
  color: #1F7343 !important; /* ★変更：コントラスト比対応 */
  border-left: 4px solid #9ddb9d !important;
  padding-left: 12px !important;
  margin-top: 1.5em !important;
  margin-bottom: 16px !important;
  font-weight: 600 !important;
  font-size: 1.4rem !important;
  line-height: 1.4 !important;
}

.article h4 {
  color: #1F7343 !important; /* ★変更：コントラスト比対応 */
  border-left: 3px solid #9ddb9d !important;
  padding-left: 10px !important;
  margin-bottom: 12px !important;
  font-weight: 600 !important;
  font-size: 1.2rem !important;
  line-height: 1.4 !important;
}

.article h5 {
  color: #1F7343 !important; /* ★変更：コントラスト比対応 */
  border-left: 2px solid #9ddb9d !important;
  padding-left: 8px !important;
  margin-bottom: 10px !important;
  font-weight: 500 !important;
  font-size: 1.1rem !important;
  line-height: 1.4 !important;
}

.article h6 {
  color: #1F7343 !important; /* ★変更：コントラスト比対応 */
  border-left: 2px solid #9ddb9d !important;
  padding-left: 6px !important;
  margin-bottom: 8px !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
}

/* TOPページタブコンテンツ内のh2上部マージン削除 */
div.tab-content h2 {
  margin-top: 0 !important;
}

/* =============================================================================
 * 3. アニメーション
 * ========================================================================== */
/* ふわっと表示（カード型リンク） */
.widget-entry-card-thumb, .entry-card-thumb {
  opacity: 0;
  animation: fadeIn 0.5s ease 0.5s 1 normal forwards;
}
@keyframes fadeIn {
  0%   { opacity: 0; transform: translateY(10px); }
  80%  { opacity: .5; }
  100% { opacity: 1; transform: translateY(0); }
}

/* キラッと光る（ボタン、バナー） */
.more-btn, .banner {
  position: relative;
  overflow: hidden;
}
.more-btn:before, .banner:before {
  content: "";
  position: absolute;
  top: 0;
  left: -30px;
  width: 30px;
  height: 100%;
  background-color: rgba(130, 205, 130, 0.4);
  transform: rotate(45deg);
  opacity: 0;
  animation: shine 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shine {
  0%   { transform: scale(0) rotate(45deg); opacity: 0; }
  80%  { transform: scale(0) rotate(45deg); opacity: 0.5; }
  81%  { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}

/* ふわふわ（吹き出しアイコン） */
.speech-icon {
  animation: fuwa 1.5s ease infinite alternate;
}
@keyframes fuwa {
  0%   { transform: scale(1); }
  95%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* ぷかぷか（プロフィール「詳しく」ボタン） */
.to-profile {
  animation: profuwa 1.0s ease infinite alternate;
}
@keyframes profuwa {
  0%   { transform: scale(1); }
  100% { transform: scale(0.9); }
}

/* =============================================================================
 * 4. Cocoonパーツのカスタマイズ
 * ========================================================================== */
/* 吹き出し */
.sbs-flat .speech-balloon {
  background-color: #e4f5ec;
  border-color: #e4f5ec;
}
.sbs-flat .speech-balloon::before,
.sbs-flat .speech-balloon::after {
  border-right-color: #e4f5ec;
}

/* 内部ブログカード */
.internal-blogcard {
  padding-bottom: 0.5%;
  position: relative;
}
.internal-blogcard-excerpt {
  padding-right: 7em;
  padding-bottom: 1.5em;
}
.internal-blogcard-footer {
  padding: 0;
}
.internal-blogcard-site {
  display: none;
}
.internal-blogcard-date {
  font-size: 12px;
}
.internal-blogcard-date::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
  content: "\f1da";
  padding-right: 2px;
}
a.internal-blogcard-wrap:hover img.blogcard-thumb-image {
  transform: scale(1.05, 1.05);
  transition: .35s;
}

/* ブログカード全体に配置基準と予約領域を設定 */
.internal-blogcard {
  position: relative;
  padding-bottom: 30px; /* 「続きを読む」ボタン用のスペースを確保 */
}
.internal-blogcard::after {
  content: '続きを読む \00bb';
  position: absolute;
  bottom: 0.4rem;
  right: 0.8rem;
  font-size: 68%;
  font-weight: bold;
  background-color: #82cd82;
  padding: 0.3em;
  color: #454545;
  border-radius: 3px;	
}

/* ボックス（おすすめ） */
.recommended .fa::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f4fc" !important;
}
.recommended .bb-label::after {
  content: "こんな人にオススメな記事です" !important;
  font-weight: bold;
}
.recommended ul {
  padding-left: 0;
}
.recommended li {
  list-style-type: none;
  line-height: 1.4;
}
.recommended li:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f138";
  padding-right: 5px;
}

/* コメント欄 */
/* サイト基調色を使った案内ボックス */
/* Cocoonの既存スタイルを上書きするため、セレクタを詳細に記述 */
.blank-box.site-color-notice {
  background-color: #e8f7e8; /* 基調色を淡くした背景 */
  border: none; /* 既存のボーダーをリセット */
  border-left: 5px solid #82cd82; /* 基調色のボーダーを再設定 */
}
.comment-title::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 24px;
  content: "\f086";
}
.comment-notes {
  display: none;
}
.comment-form-comment label:after {
  font-size: 14px;
  content: "（必須）";
}
.comment-form-author label {
  font-size: 0;
}
.comment-form-author label:after {
  font-size: 14px;
  content: "お名前（省略可）";
}
.comment-form-email label:after {
  font-size: 14px;
  content: "（省略可）";
}
.comment-form-url label:after {
  font-size: 14px;
  content: "（省略可）";
}

/* 2ページ目以降のアイキャッチを非表示 */
.single-paged-2 .eye-catch-wrap,
.single-paged-3 .eye-catch-wrap,
.single-paged-4 .eye-catch-wrap,
.single-paged-5 .eye-catch-wrap {
	display: none;
}

/* =============================================================================
 * 5. ウィジェットのカスタマイズ
 * ========================================================================== */
/* --- 5-1. ウィジェット共通 --- */
.sidebar {
  padding: 0 5px !important;
  box-shadow: none;
  background: white;
  color: #454545;
}

/* --- 5-2. プロフィール（サイドバー・記事下共通） --- */
.widget_author_box {
  background: #fff;
  padding-top: 1.2em;
  border-radius: 3px 3px 0 0;
  margin: 0 auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
  letter-spacing: 0;
}
.author-box {
  border: none;
  position: relative;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
}
.author-content {
  background: linear-gradient(90deg, rgba(130, 205, 130, 1) 0%, rgba(169, 225, 169, 1) 51.39%, rgba(130, 205, 130, 1) 100%);
  color: #454545;
  width: 110%;
  margin-left: -5% !important;
}
.author-box .author-name a {
  color: #454545;
  text-decoration: none;
  letter-spacing: 0px;
  font-size: 16px;
}
.author-box .author-description {
  text-align: justify;
}
.author-box p {
  line-height: 1.2;
  font-size: 15px;
}
.author-box .author-thumb {
  width: 120px;
  margin: 0 auto;
  position: absolute;
  bottom: 0;
}
.author-box img {
  border: solid 1px #009250;
}
.author-box .author-name {
  font-size: 1.1em;
  font-weight: bold;
  position: absolute;
  margin-bottom: 0.4em;
}
.author-box .author-widget-name {
  position: absolute;
  top: 3px;
  bottom: 0;
  right: 0;
  left: 0;
  font-size: 0.7em;
  color: #bbb;
}
.author-box .sns-follow {
  padding: 15px 10px;
}
.author-box .sns-follow-buttons {
  display: flex;
  gap: 10px;
}
.widget_author_box .author-box .sns-follow-buttons a {
  border-radius: 50%;
  border: none;
  width: 45px;
  height: 45px;
  line-height: 45px;
  font-size: 30px;
  box-shadow: 0 0 10px rgba(137, 201, 151, .8), 0 0 5px -5px rgba(66, 172, 231);
  background: #fff;
  transition: all .3s ease-in-out;
}
.widget_author_box .author-box .sns-follow-buttons a:hover {
  box-shadow: 0 10px 20px -2px rgba(0, 0, 0, .2);
  opacity: 0.8;
}
.author-box .sns-follow-buttons .follow-button .icon-twitter-logo::before { color: #1da1f2 !important; }
.author-box .sns-follow-buttons .follow-button .icon-hatebu-logo::before { color: #2c6ebd !important; }
.author-box .sns-follow-buttons .follow-button .icon-instagram-logo::before { color: #c522b8 !important; }
.author-box .sns-follow-buttons .follow-button .icon-feedly-logo::before { color: #2bb24c !important; }
.author-box .sns-follow-buttons .follow-button .icon-rss-logo::before { color: #f26522 !important; }

.author-box .sns-follow-message {
  display: block;
  font-size: 13px;
  color: #454545 !important;
}
.to-profile {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  color: #454545;
  box-shadow: 0 0 10px rgba(137, 201, 151, .8), 0 0 5px -5px rgba(66, 172, 231, .8);
  font-size: 0.9em;
  font-weight: bold;
}
.to-profile:hover {
  background-size: 100% 2px;
}

/* --- 5-3. プロフィール（サイドバー用 差分スタイル） --- */
.sidebar .widget_author_box {
  max-width: 360px;
  padding-top: 0 !important;
}
.sidebar .author-box {
  padding: 120px 0 5px;
}
.sidebar .author-content {
  border-radius: 200px 200px 0 0 / 100px 100px 0 0;
  padding: 20px;
}
.sidebar .author-box .author-description {
  padding: 45px 25px 0px;
}
.sidebar .author-box .author-thumb {
  top: 50px;
  right: 0;
  left: 0;
}
.sidebar .author-box .author-name {
  top: 23px;
  right: 0;
  left: 0;
}
.sidebar .author-box .sns-follow-buttons {
  justify-content: center;
}
.sidebar .author-box .to-profile {
  top: 115px;
  left: calc(50% + 36px); /* ★最終修正: calc()で位置を精密に計算 */
}
.sidebar .author-box .sns-follow-message {
  margin-bottom: 10px;
}

/* --- 5-4. プロフィール（記事下用 差分スタイル） --- */
.article .widget_author_box {
  max-width: 900px;
  text-align: left;
  font-size: 16px;
}
.article .author-box {
  padding: 120px 0 0;
}
.article .author-content {
  border-radius: 200px 0 200px 0/100px 0 100px 0;
  padding: 20px 20px 0px 20px;
}
.article .author-box .author-description {
  padding: 45px 45px 0px;
}
.article .author-box .author-thumb {
  top: 50px;
  left: 50px;
}
.article .author-box .author-name {
  top: 23px;
  left: 78px;
}
.article .author-box .sns-follow-buttons {
  justify-content: flex-start;
  padding-left: 80px;
}
.article .author-box .to-profile {
  top: 115px;
  left: 150px !important;
  right: auto !important;
}
.article .author-box .sns-follow-message {
  text-align: left;
  padding-left: 55px;
  margin-bottom: 10px;
}
.article .main-widget-label {
  font-weight: bold;
  padding-left: 20px;
}
.article .main-widget-label::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 16px;
  content: "\f303";
  padding-right: 2px;
}

/* --- 5-5. 最新記事・人気記事 --- */
.widget-entry-cards.card-large-image .e-card, .widget-entry-card {
	font-size: 15px;
}
.popular-entry-card-link, .new-entry-card-link {
  overflow: hidden;
}
.popular-entry-card-link:hover img, .new-entry-card-link:hover img {
  transform: scale(1.05, 1.05) rotate(0.5deg);
  transition: all .35s ease-out 0s;
}
.widget-entry-card-title {
  min-height: 45px;
  margin-top: 5px;
}
.widget-entry-card-content .display-none {
  display: block;
  text-align: right;
}
.widget-entry-card-content .post-date::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  font-size: 12px;
  content: "\f017";
  padding-right: 2px;
}
.widget-entry-card-content .post-update::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
  content: "\f1da";
  padding-right: 2px;
}
article .new-entry-card .card-thumb::before {
  position: absolute;
  content: "New";
  top: 18px;
  left: 9px;
  line-height: 18px;
  font-size: 22px;
  font-weight: bold;
  font-style: italic;
  text-decoration: underline;
  text-shadow: -2px -1px 0 #fff, 2px 1px 0 rgba(0,0,0,.9);
  color: #edad0b;
  z-index: 1;
  transform: rotate(-30deg);
}

/* --- 5-6. ボックスナビ --- */
.p-nav {
  margin: 0;
  padding: 5px 1px;
}
.p-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
}
.p-nav ul li {
  flex-basis: calc(100%/2);
  margin: 0;
  padding: 0;
  text-align: center;
  box-shadow: inset 1px 1px 0 0 #82cd82, 1px 1px 0 0 #82cd82, 1px 0 0 0 #82cd82;
  display: flex;
  align-items: center;
  flex-direction: column-reverse;
  min-height: 100px;
  cursor: pointer;
  background: #f7fdfa;
}
.p-nav ul li a {
  display: block;
  padding: 0.5em 1em;
  text-decoration: none;
  width: 100%;
}
.p-nav ul li a img {
  max-width: 50% !important;
  height: auto !important;
  filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.1));
  display: inline-block;
}
.p-nav .p-nav-title {
  display: block;
  color: #454545;
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
}
.p-nav ul li .sidebar-icon {
  font-size: 4em;
  padding: 5px 0;
  color: #82cd82;
  display: inline-block;
  text-shadow: #eee 3px 3px 0, #eee -3px -3px 0, #eee -3px 3px 0, #eee 3px -3px 0, #eee 0px 3px 0, #eee 0 -3px 0, #eee -3px 0 0, #eee 3px 0 0;
}

/* =============================================================================
 * 6. SNSボタン（シェア・フォロー）
 * ========================================================================== */
/* フォローボタンのキャプションのみ非表示 */
.sns-follow .button-caption,
.mobile-menu-buttons .sns-follow .button-caption {
	display: none;
}
/* メッセージ */
.article .sns-follow-message,
.article .sns-share-message {
	font-weight: bold;
	color: #454545;
}
/* ボタンコンテナ */
.article .sns-follow-buttons,
.mobile-menu-buttons .sns-follow-buttons,
.article .sns-share-buttons,
.mobile-menu-buttons .sns-share-buttons {
	justify-content: center;
}
.article .sns-share-buttons,
.mobile-menu-buttons .sns-share-buttons {
  flex-wrap: nowrap;
}
/* ボタン本体（プロフィールウィジェット以外） */
.article .sns-follow-buttons a,
.mobile-menu-buttons .sns-follow-buttons a,
.article .sns-share-buttons a,
.mobile-menu-buttons .sns-share-buttons a {
	font-size: 20px;
	margin: 0 10px;
}
/* フォローボタンの形状（プロフィールウィジェット以外） */
.article .sns-follow-buttons a,
.mobile-menu-buttons .sns-follow-buttons a {
  border-radius: 50%;
  background: #fff;
}
.article .sns-follow a,
.mobile-menu-buttons .sns-follow a {
  width: 40px;
  height: 40px;
}

/* =============================================================================
 * 7. プラグインのカスタマイズ
 * ========================================================================== */
/* --- 7-1. Kattene --- */
.kattene .fa-external-link-alt::before {
  content: "" !important;
}
.kattene .kattene__btn {
  border-radius: 10px !important;
}

/* --- 7-2. Rinker（かんたんリンク） --- */
div.easyLink-box {
  border: double #CCC !important;
  box-shadow: 2px 3px 9px -5px rgba(0,0,0,.25);
}
p.easyLink-info-name a {
  color: #3296d2 !important;
}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
  padding: 2px !important;
  margin: 3px !important;
  width: 100% !important;
  display: inline-block !important;
  font-weight: bold !important;
  font-size: 80% !important;
  text-align: center !important;
  border-radius: 20px !important;
  line-height: 2.5 !important;
}
a.easyLink-info-btn-amazon {
  background: #ffb442 !important;
  border: 2px solid #ffb442 !important;
  box-shadow: 0 3px 7px 0 rgba(0,0,0,.25);
}
a:hover.easyLink-info-btn-amazon {
  opacity: 1 !important;
  background: #fff !important;
  color: #f6a306 !important;
}
a.easyLink-info-btn-rakuten {
  background: #f76d65 !important;
  border: 2px solid #f76d65 !important;
  box-shadow: 0 3px 7px 0 rgba(0,0,0,.25);
}
a:hover.easyLink-info-btn-rakuten {
  opacity: 1 !important;
  background: #fff !important;
  color: #cf4944 !important;
}
a.easyLink-info-btn-yahoo {
  background: #34a3c2 !important;
  border: 2px solid #34a3c2 !important;
  box-shadow: 0 3px 7px 0 rgba(0,0,0,.25);
}
a:hover.easyLink-info-btn-yahoo {
  opacity: 1 !important;
  background: #fff !important;
  color: #51a7e8 !important;
}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a:last-child {
  margin-bottom: 0 !important;
}

/* --- 7-3. Apprich（アプリーチ） --- */
.appreach {
  text-align: left;
  padding: 25px;
  margin: 20px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 2px 5px 1px #e5e5e5;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach img, .appreach p {
  margin: 0;
  padding: 0;
  border: 0 !important;
}
.appreach a:after {
  display: none;
}
.appreach__icon {
  float: left;
  border-radius: 10%;
  overflow: hidden;
  margin: 0 3% 0 0 !important;
  width: 25% !important;
  height: auto !important;
  max-width: 120px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
}
.appreach__detail:after {
  content: "";
  display: block;
  clear: both;
}
p.appreach__name {
  font-size: 16px;
  color: #555;
  padding-bottom: 10px;
  font-weight: bold;
  line-height: 1.5em !important;
  max-height: 3em;
  overflow: hidden;
}
.appreach__info {
  font-size: 12px !important;
  color: #888;
}
.appreach__links {
  float: left;
  height: 40px;
  margin-top: 15px;
  white-space: nowrap;
}
.appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px;
}
.appreach__gplink img {
  height: 40px;
  width: 134.5px;
}

/* =============================================================================
 * 8. モバイル
 * ========================================================================== */
/* --- 8-1. モバイルメニューボタン --- */
.mobile-footer-menu-buttons,
.mobile-header-menu-buttons {
  background: #82cd82;
  color: white;
}
.mobile-footer-menu-buttons .menu-button > a,
.mobile-header-menu-buttons .menu-button > a {
  background: #82cd82;
  color: white;
}
.mobile-menu-buttons {
  font-size: 20px;
  line-height: 1.4 !important;
}
.mobile-menu-buttons .menu-caption {
  font-size: 12px;
}
.mobile-menu-buttons .menu-content {
  color: #454545;
}
.sidebar-menu-content .menu-close-button {
  background-color: #eee;
}

/* --- 8-2. ドロワーメニュー（スライドインサイドバー）広告非表示 --- */
#sidebar-menu-content .ad-area,
#sidebar-menu-content .widget_ad,
#sidebar-menu-content ins.adsbygoogle {
  display: none !important;
}

/* =============================================================================
 * 9. SVG
 * ========================================================================== */
/* --- 9-1. 回復過程グラフ --- */
.recovery-graph-figure {
  margin: 2em 0;
}
.recovery-graph-svg {
  width: 100%;
  height: auto;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  fill: #444444;
}
.recovery-graph-svg .axis-label { font-size: 14px; }
.recovery-graph-svg .energy-label { font-size: 12px; text-anchor: end; }
.recovery-graph-svg .stage-label { font-size: 16px; text-anchor: middle; }
.recovery-graph-caption {
  text-align: center;
  font-size: 0.9em;
  color: #444444;
  margin-top: 1em;
}

/* =============================================================================
 * 10. メディアクエリ（レスポンシブ）
 * ========================================================================== */
@media screen and (max-width: 834px) {
	.navi-footer-in > .menu-footer li.menu-item {
		width: 40%;
	}
}
@media screen and (max-width: 786px) {
  .appreach { margin: 20px 0; }
  .appreach__info { font-size: 11px !important; }
  p.appreach__name { font-size: 15px; }
}
@media screen and (max-width: 703px) {
  div.easyLink-box div.easyLink-img,
  div.easyLink-box div.easyLink-img p.easyLink-img-box img.easyLink-img-pht {
    max-height: 180px !important;
  }
}
@media screen and (max-width: 559px) {
	.p-nav ul li{
		flex-basis: calc(100%/2);
	}
}

/* =============================================================================
 * 11. サイト全体のデザイン統一とアクセシビリティ向上
 * ========================================================================== */

/* --- 11-1. アクセシビリティ：フォーカスの可視性向上 --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4);
}

/* --- 11-2. NEWマークのデザイン改善（記事本文内限定） --- */
.article .new-entry-card .card-thumb::before {
  position: absolute;
  content: "New";
  top: 8px;
  left: 8px;
  z-index: 1;
  background-color: #e64949;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: bold;
  font-style: normal;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 3px;
  text-decoration: none;
  text-shadow: none;
  transform: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* =============================================================================
 * 11. サイト全体のデザイン統一とアクセシビリティ向上
 * ========================================================================== */

/* --- 11-1. アクセシビリティ：フォーカスの可視性向上 --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4);
}

/* --- 11-2. NEWマークのデザイン改善（記事本文内限定） --- */
.article .new-entry-card .card-thumb::before {
  position: absolute;
  content: "New";
  top: 8px;
  left: 8px;
  z-index: 1;
  background-color: #e64949;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: bold;
  font-style: normal;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 3px;
  text-decoration: none;
  text-shadow: none;
  transform: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/*
 * -----------------------------------------------------------------------------
 * 11-3. 日付表示の完全統一（TOPページ・サイドバー・固定ページ共通）
 * -----------------------------------------------------------------------------
 */

/* [ Step 1 ] 全ての対象エリアでFlexboxレイアウトを適用し、右寄せ・垂直中央揃えを実現 */
.sidebar .widget-entry-card-date,
.page-id-1881 .entry-content .widget-entry-card-date,
.page-id-1746 .entry-content .new-entry-card-date,
.page-id-1756 .entry-content .popular-entry-card-date {
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
    margin-top: 8px;
}

/* [ Step 2 ] 全ての対象エリアで「更新日優先」のロジックを適用 */
.sidebar .widget-entry-card-date .post-date:not(:last-child),
.page-id-1881 .entry-content .widget-entry-card-date .post-date:not(:last-child),
body.page-id-1746 .entry-content .new-entry-cards .new-entry-card-date .post-date:not(:last-child),
body.page-id-1756 .entry-content .popular-entry-cards .popular-entry-card-date .post-date:not(:last-child) {
    display: none !important;
}

/* [ Step 3 ] 全ての対象エリアで、アイコン表示をCSSで完全に制御 */
/* 3-1: アイコンを一旦リセット */
.sidebar .widget-entry-card-date .fas,
.sidebar .widget-entry-card-date .far,
.sidebar .widget-entry-card-date .post-date::before,
.sidebar .widget-entry-card-date .post-update::before,
.page-id-1881 .entry-content .widget-entry-card-date .fas,
.page-id-1881 .entry-content .widget-entry-card-date .far,
.page-id-1881 .entry-content .widget-entry-card-date .post-date::before,
.page-id-1881 .entry-content .widget-entry-card-date .post-update::before,
.page-id-1746 .entry-content .widget-entry-card-date .fas,
.page-id-1746 .entry-content .widget-entry-card-date .far,
.page-id-1746 .entry-content .widget-entry-card-date .post-date::before,
.page-id-1746 .entry-content .widget-entry-card-date .post-update::before,
.page-id-1756 .entry-content .widget-entry-card-date .fas,
.page-id-1756 .entry-content .widget-entry-card-date .far,
.page-id-1756 .entry-content .widget-entry-card-date .post-date::before,
.page-id-1756 .entry-content .widget-entry-card-date .post-update::before {
    display: none !important;
    content: "" !important;
}
/* 3-2: アイコンを再定義（共通スタイル） */
.sidebar .widget-entry-card-date .post-update::before,
.sidebar .widget-entry-card-date .post-date::before,
.page-id-1881 .entry-content .widget-entry-card-date .post-update::before,
.page-id-1881 .entry-content .widget-entry-card-date .post-date::before,
.page-id-1746 .entry-content .widget-entry-card-date .post-update::before,
.page-id-1746 .entry-content .widget-entry-card-date .post-date::before,
.page-id-1756 .entry-content .widget-entry-card-date .post-update::before,
.page-id-1756 .entry-content .widget-entry-card-date .post-date::before {
    display: inline-block !important;
    font-family: "Font Awesome 5 Free";
    font-size: 14px; /* 日付テキストとサイズを統一 */
    color: #555;
    margin-right: 3px;
}
/* 3-3: 更新日アイコン */
.sidebar .widget-entry-card-date .post-update::before,
.page-id-1881 .entry-content .widget-entry-card-date .post-update::before,
.page-id-1746 .entry-content .widget-entry-card-date .post-update::before,
.page-id-1756 .entry-content .widget-entry-card-date .post-update::before {
    font-weight: 900;
    content: "\f1da" !important; /* history icon */
}
/* 3-4: 投稿日アイコン */
.sidebar .widget-entry-card-date .post-date::before,
.page-id-1881 .entry-content .widget-entry-card-date .post-date::before,
.page-id-1746 .entry-content .widget-entry-card-date .post-date::before,
.page-id-1756 .entry-content .widget-entry-card-date .post-date::before {
    font-weight: 400;
    content: "\f017" !important; /* clock icon */
}

/* [ Step 4 ] 全ての対象エリアで、日付のフォントサイズを統一 */
.widget-entry-card-date span.entry-date {
  font-size: 14px !important;
}

/*--------------------------------------------------
 * スキップリンク
 * 概要：キーボード操作ユーザー向けのアクセシビリティ機能
 *--------------------------------------------------*/
.skip-link {
  position: absolute;
  left: -9999px; /* 通常時は画面の外に配置して非表示にする */
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: -9999;
}

.skip-link:focus,
.skip-link:active {
  position: fixed; /* スクロールしても追従するようfixedに変更 */
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  padding: 10px 20px;
  background-color: #276c42; /* サイトのテーマカラーに合わせた濃い緑 */
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border-radius: 0 0 5px 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  overflow: visible;
  z-index: 99999; /* 最前面に表示 */
  transition: top 0.1s ease-in-out;
}

/*--------------------------------------------------
 * FAQ（JSアニメーション連携版）
 *--------------------------------------------------*/
/* 親要素の間隔 */
.entry-content details.faq-box {
  position: relative;
  margin-bottom: 0.5em; /* 各FAQブロック間の間隔 */
}
/* JS制御のため、デフォルトでは回答を非表示にしておく */
.entry-content details.faq-box:not([open]) > .faq-answer {
  display: none;
}

/* --- 質問 (Q) 部分 --- */
.entry-content details.faq-box summary.faq-question {
  position: relative;
  width: 100%;
  padding: 1em 3em 1em 3.2em;
  box-sizing: border-box;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  list-style: none;
  background: #f1f8e9;
  border: 2px solid #81c784;
  border-radius: 8px;
  transition: margin-bottom 0.15s ease-out;
}

/* 開いた時にQの下に隙間を作り、Aとの間隔を確保 */
.entry-content details.faq-box[open] > summary.faq-question {
  margin-bottom: 0.5em;
}

/* キーボード操作時のフォーカス */
.entry-content details.faq-box summary.faq-question:focus-visible {
  box-shadow: 0 0 0 2px #4caf50 inset;
}

/* デフォルトマーカー非表示 */
.entry-content details.faq-box summary.faq-question::-webkit-details-marker {
  display: none;
}

/* 「Q」アイコン */
.entry-content details.faq-box summary.faq-question::before {
  content: 'Q';
  position: absolute;
  left: 1em;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #81c784;
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.9em;
}

/* 開閉「▼」アイコン */
.entry-content details.faq-box summary.faq-question::after {
  content: '▼';
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8em;
  color: #81c784;
  transition: transform 0.2s ease-in-out;
}

/* 開いた状態のアイコン回転 */
.entry-content details.faq-box[open] summary.faq-question::after {
  transform: rotate(180deg);
}

/* --- 回答 (A) 部分 --- */
.entry-content details.faq-box .faq-answer {
  position: relative;
  box-sizing: border-box;
  background: #fff;
  cursor: pointer;
  border: 2px solid #f0a878;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5em 1.5em 0.5em 3.2em;
}

/* 「A」アイコン */
.entry-content details.faq-box .faq-answer::before {
  content: 'A';
  position: absolute;
  left: 1em;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f0a878;
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.9em;
}

/* A内部のpタグのマージンを厳密に制御 */
.entry-content details.faq-box .faq-answer p {
  margin-top: 0;
  margin-bottom: 0;
}
.entry-content details.faq-box .faq-answer p + p {
  margin-top: 1em;
}

/* AdSense v3.3: PHPから分離したサイドバー広告用スタイル */
.sidebar-ad-pc {
  margin-top: 20px;
  text-align: center;
}

/* サイドバー下ウィジェット：PCのみ表示、モバイル非表示 */
.sidebar-bottom-ad {
    margin-top: 20px;
}

/* モバイル非表示 */
@media screen and (max-width: 767px) {
    .sidebar-bottom-ad {
        display: none !important;
    }
}

/* PC表示 */
@media screen and (min-width: 768px) {
    .sidebar-bottom-ad {
        display: block !important;
    }
}