@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
*/
/************************************
** 子テーマ用のスタイルを書く
************************************/

/* ===== 基本カラー・フォント ===== */
body {
  font-family: 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif !important;
  font-size: 15px !important;
  color: #333 !important;
  background-color: #fff !important;
}

/* ===== リンク色 ===== */
a { color: #1a3a5c !important; }
a:hover { color: #2a5a8c !important; text-decoration: underline !important; }

/* ===== ヘッダー ===== */
#header,
.header,
#site-header,
#header-container,
.header-container {
  background-color: #1a3a5c !important;
}

#header-in.wrap,
.header-in.wrap {
  max-width: 100% !important;
}

/* ===== ナビゲーション ===== */
/* PCナビの画像のみ非表示（スライドインメニューは表示） */
#navi img,
.navi img,
#global-nav img,
.global-nav img,
.menu-top img,
.menu-header img {
  display: none !important;
}

/* スライドインメニューの画像は表示 */
.menu-drawer img {
  display: block !important;
}

#navi,
.navi,
#global-nav,
.global-nav {
  background-color: #1a3a5c !important;
}

#navi a,
.navi a,
#global-nav a,
.global-nav a,
nav li a {
  color: #fff !important;
  font-size: 13px !important;
  padding: 12px 16px !important;
  transition: none !important;
  -webkit-transition: none !important;
}

#global-nav li a:hover,
#global-nav li a:focus,
#global-nav li a:active,
.global-nav li a:hover,
.global-nav li a:focus,
nav li a:hover,
nav li a:focus,
nav li a:active {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  transition: none !important;
  opacity: 0.8 !important;
}

/* ===== モバイルスライドインメニュー ===== */
#navi-menu-content,
.navi-menu-content,
.menu-content {
  background-color: #1a3a5c !important;
  width: 85vw !important;
  max-width: 320px !important;
}

/* メニュー項目 */
.menu-drawer li {
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
  background-color: #1a3a5c !important;
}

.menu-drawer li a {
  color: #fff !important;
  background-color: #1a3a5c !important;
  display: flex !important;
  align-items: center !important;
  padding: 6px 12px !important;
}

/* メニュー画像を表示（スライドインメニューのみ） */
.menu-drawer li a img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 44px !important;
  object-fit: contain !important;
}

.menu-drawer li a:hover {
  background-color: #2a5a8c !important;
  opacity: 1 !important;
}

/* メニュー閉じるボタン */
.navi-menu-close-button,
.menu-close-button {
  color: #fff !important;
  background-color: #2a5a8c !important;
  padding: 10px !important;
  display: block !important;
  text-align: right !important;
}


#navi .sub-menu,
.navi .sub-menu,
nav .sub-menu,
#global-nav .sub-menu {
  background-color: #1a3a5c !important;
  border: none !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
}

#navi .sub-menu li a,
.navi .sub-menu li a,
nav .sub-menu li a,
#global-nav .sub-menu li a {
  color: #fff !important;
  background-color: #1a3a5c !important;
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
  padding: 10px 16px !important;
}

#navi .sub-menu li a:hover,
nav .sub-menu li a:hover {
  background-color: #2a5a8c !important;
  color: #fff !important;
  opacity: 1 !important;
}


.entry-title {
  color: #333 !important;
  border-left: 5px solid #1a3a5c !important;
  padding-left: 12px !important;
  font-size: 22px !important;
}

.entry-content {
  font-size: 15px !important;
  line-height: 1.8 !important;
}

/* ===== 関連記事を横並びに ===== */
.related-entry-cards-wrap,
.related-entry-card-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.related-entry-card {
  flex: 1 1 calc(33% - 12px) !important;
  min-width: 200px !important;
}

@media (max-width: 600px) {
  .related-entry-card {
    flex: 1 1 calc(50% - 12px) !important;
  }
}

/* ===== 固定ページ・アーカイブ・ブログページのサイドバーを非表示 ===== */
.page #sidebar,
.page .sidebar,
.page .widget-area,
.blog #sidebar,
.blog .sidebar,
.blog .widget-area,
.archive #sidebar,
.archive .sidebar,
.archive .widget-area,
.category #sidebar,
.category .sidebar,
.category .widget-area {
  display: none !important;
}

.page #content,
.page .content,
.page #main,
.page .main,
.blog #content,
.blog .content,
.blog #main,
.blog .main,
.archive #content,
.archive .content,
.archive #main,
.archive .main,
.category #content,
.category .content,
.category #main,
.category .main {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

/* ===== 前の記事・次の記事を非表示 ===== */
.pager-post-navi,
.post-navi,
.nav-links,
.navigation.post-navigation,
.post-navigation,
#post-nav,
.pager-prev-next,
a.prev-post,
a.next-post,
.next-post,
.prev-post {
  display: none !important;
}


.single #sidebar,
.single .sidebar,
.single .widget-area {
  display: none !important;
}

.single #content,
.single .content,
.single #main,
.single .main {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}


.eye-catch,
.post-thumbnail,
.entry-thumb,
.article-thumb {
  display: none !important;
}

/* ===== 投稿本文内の画像を中央揃え ===== */
.entry-content img,
.entry-content p img {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
  height: auto !important;
}

/* ===== 見出しh2・h3 ===== */
.entry-content h2 {
  background-color: #1a3a5c !important;
  color: #fff !important;
  padding: 10px 16px !important;
  border-radius: 4px !important;
  font-size: 18px !important;
}

.entry-content h3 {
  border-left: 4px solid #1a3a5c !important;
  padding-left: 10px !important;
  color: #333 !important;
  font-size: 16px !important;
}

/* ===== ボタン ===== */
.btn,
.button,
input[type="submit"],
button[type="submit"] {
  background-color: #1a3a5c !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 24px !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  cursor: pointer !important;
}

/* ===== フッター ===== */
#footer,
.footer,
#site-footer,
.site-footer,
#footer-container,
.footer-container {
  background-color: #1a3a5c !important;
  color: #fff !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#footer-in.wrap,
.footer-in.wrap,
#footer .wrap,
.footer .wrap {
  max-width: 100% !important;
  width: 100% !important;
  padding: 16px !important;
}

#footer a,
.footer a,
.footer-bottom a,
.source-org {
  color: #ccc !important;
}

#footer a:hover,
.footer a:hover {
  color: #fff !important;
}

/* フッターロゴを白く表示 */
.footer .logo img,
.footer-bottom-logo img,
#footer img {
  filter: brightness(0) invert(1) !important;
}

/* フッター上のボーダーライン */
#footer {
  border-top: 4px solid #fff !important;
}

/* フッターレイアウト */
.footer-bottom {
  text-align: center !important;
  padding: 20px 16px !important;
}

.footer-bottom-logo {
  display: block !important;
  text-align: center !important;
  margin: 0 auto 12px !important;
}

.footer-bottom-content {
  text-align: center !important;
}

.menu-footer {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 4px 16px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
}

.source-org {
  font-size: 12px !important;
  color: #aaa !important;
  display: block !important;
  margin-top: 8px !important;
}

/* フッター下の余白を削除 */
body,
html {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  height: auto !important;
  min-height: unset !important;
}

#container,
.container,
#wrap,
.wrap-content {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  height: auto !important;
}

/* フッターのナビ画像を非表示 */
#navi-footer img,
.navi-footer img,
.menu-footer img,
.menu-drawer img {
  display: none !important;
}

/* ===== サイドバー ===== */
.widget-title,
.widget-sidebar-title {
  background-color: #1a3a5c !important;
  color: #fff !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  border-radius: 4px !important;
}

/* ===== パンくず ===== */
.breadcrumb {
  background-color: #f0f4f8 !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
}

/* ===== 投稿メタ情報をすべて非表示 ===== */
.post-date,
.post-modified-date,
.post-update,
.post-publish,
.published,
.updated,
.entry-date,
.entry-time,
time,
.post-author,
.author,
.byline,
.entry-meta,
.post-meta,
.article-header-info,
.post-views,
.views,
.view-count,
.pv,
.admin-pv,
span.post-views,
.entry-meta .views,
.post-categories,
.cat-links,
.tags-links,
.entry-footer,
.post-footer,
.article-footer-info,
.fa-clock-o,
.fa-calendar,
.fa-history,
.fa-user,
.fa-eye,
.icon-clock,
.icon-calendar,
.icon-user,
.post-date-icon,
.post-modified-date-icon {
  display: none !important;
}

/* ===== エリアから探す ===== */
.ph-area-wrap { background: #eef2f7; }
.ph-area-wrap .ph-sec-title { color: #333 !important; border-bottom-color: #1a3a5c !important; }
.ph-area-wrap .ph-sec-title small { color: #888 !important; }
.ph-area-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
.ph-area-card {
  display: block;
  text-decoration: none;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.ph-area-img {
  width: 100%;
  height: 120px;
  background-size: cover;
  background-position: center;
  background-color: #2a5a8c;
  transition: opacity 0.2s;
}
.ph-area-card:hover .ph-area-img { opacity: 0.85; }
.ph-area-name {
  background: #fff;
  color: #333 !important;
  text-align: center;
  padding: 8px 4px;
  font-size: 14px;
  font-weight: bold;
}
.ph-area-name span {
  display: block;
  font-size: 11px;
  font-weight: normal;
  color: #888 !important;
}

@media (max-width: 768px) {
  .ph-area-grid { grid-template-columns: repeat(4, 1fr); }
  .ph-area-img { height: 80px; }
}
@media (max-width: 480px) {
  .ph-area-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .ph-area-img { height: 65px; }
  .ph-area-name { font-size: 11px; padding: 5px 2px; }
}

/* ===== ph-moreボタン ===== */
.ph-more {
  color: #fff !important;
}

/* サイドバーボタンを非表示 */
.sidebar-menu-button {
  display: none !important;
}

/* フォームページではLINEボタンを非表示 */
.page-id-1450 .ph-line-float,
.page-id-1591 .ph-line-float,
.page-id-1936 .ph-line-float,
.page-id-1934 .ph-line-float {
  display: none !important;
}


.grecaptcha-badge {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* フォームページのみ表示 */
.page-id-1450 .grecaptcha-badge,
.page-id-1591 .grecaptcha-badge,
.page-id-1936 .grecaptcha-badge,
.page-id-1934 .grecaptcha-badge {
  visibility: visible !important;
  opacity: 1 !important;
}

/* ===== LINEフロートボタン ===== */
.ph-line-float {
  position: fixed;
  bottom: 70px;
  right: 12px;
  z-index: 9999;
  display: none;
}

.ph-line-float a {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background-color: #06C755 !important;
  border-radius: 50%;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
  font-size: 10px;
  font-weight: bold;
}

.ph-line-float a svg {
  width: 28px;
  height: 28px;
  fill: #fff;
  margin-bottom: 2px;
}

.ph-line-float a span {
  font-size: 9px;
  color: #fff !important;
  line-height: 1;
}

@media (max-width: 1023px) {
  .ph-line-float { display: block; }
}


.mobile-footer-menu-buttons {
  background-color: #1a3a5c !important;
}

.mobile-footer-menu-buttons a,
.mobile-footer-menu-buttons label,
.mobile-footer-menu-buttons .menu-caption,
.mobile-footer-menu-buttons .menu-icon,
.mobile-footer-menu-buttons .fa,
.mobile-footer-menu-buttons span {
  color: #fff !important;
}

.mobile-footer-menu-buttons .menu-button-in {
  color: #fff !important;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  .entry-title { font-size: 18px !important; }
}
/*834px以下*/
@media screen and (max-width: 834px){
  body { font-size: 14px !important; }
  .entry-title { font-size: 16px !important; }
}
/*480px以下*/
@media screen and (max-width: 480px){
  .entry-title { font-size: 15px !important; }
}