@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* == MailPoet スパム文言を非表示 == */
.mailpoet_spam_notice {
  display: none !important;
}

/************************************
** ホームページ用スタイル
************************************/

/* セクションタイトル */
.home-section-title {
  font-size: 1.4em;
  font-weight: bold;
  color: #1a5276;
  border-bottom: 3px solid #27ae60;
  padding-bottom: 8px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-icon {
  font-size: 1.2em;
}

/* カテゴリーグリッド */
.home-categories {
  margin-bottom: 40px;
}
.home-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}
.home-cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
  background: #f0f7f4;
  border-radius: 12px;
  text-decoration: none;
  color: #1a5276;
  font-weight: bold;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 2px solid transparent;
}
.home-cat-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(26, 82, 118, 0.15);
  border-color: #27ae60;
  color: #1a5276;
}
.home-cat-icon {
  font-size: 2.2em;
  margin-bottom: 8px;
}
.home-cat-name {
  font-size: 0.95em;
}

/* セクション共通 */
.home-section {
  margin-top: 40px;
}

/* メルマガ登録セクション */
.home-newsletter {
  margin-top: 40px;
  background: linear-gradient(135deg, #f0f7f4 0%, #e8f4fd 100%);
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  border: 2px solid #27ae60;
}
.home-newsletter .home-section-title {
  justify-content: center;
  border-bottom: none;
}
.home-newsletter-desc {
  color: #555;
  margin-bottom: 15px;
  font-size: 0.95em;
}

/* 新着・人気記事のリスト調整 */
.home-section + .wp-block-shortcode + .widget-entry-cards {
  margin-bottom: 30px;
}

/* レスポンシブ */
@media screen and (max-width: 480px) {
  .home-cat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .home-cat-item {
    padding: 15px 8px;
  }
  .home-cat-icon {
    font-size: 1.8em;
  }
  .home-newsletter {
    padding: 20px 15px;
  }
}

/* ホームページ: タイトル・目次・日付を非表示 */
.page-id-92 .entry-title,
.page-id-92 .date-tags,
.page-id-92 .toc,
.page-id-92 .eye-catch {
  display: none !important;
}

/* Cocoonのh2デフォルトスタイルをホームページセクションで上書き */
.page-id-92 .home-section-title,
.page-id-92 .home-categories .home-section-title,
.page-id-92 .home-newsletter .home-section-title,
.page-id-92 .home-section .home-section-title {
  background: none !important;
  padding: 0 0 8px 0 !important;
  color: #1a5276 !important;
  border-bottom: 3px solid #27ae60 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  margin-bottom: 20px !important;
  font-size: 1.4em !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.page-id-92 .home-section-title::before {
  content: none !important;
}

/* ホームページのメインカラム幅調整 */
.page-id-92 .entry-content {
  margin-top: 0;
}

/* カテゴリー: アイキャッチ画像付き */
.home-cat-item.has-eyecatch {
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e0e0e0;
}
.home-cat-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.home-cat-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.home-cat-item.has-eyecatch:hover .home-cat-thumb img {
  transform: scale(1.05);
}
.home-cat-item.has-eyecatch .home-cat-name {
  display: block;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  color: #1a5276;
  background: #f0f7f4;
}

/* ホームページ CTA エリア */
.home-cta-area {
  margin-top: 40px;
}
.home-cta-area .cta-box {
  background: linear-gradient(135deg, #2e8b57 0%, #1a5276 100%);
  border-radius: 12px;
  padding: 30px;
  color: #fff;
}
.home-cta-area .cta-heading {
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: 15px;
}
.home-cta-area .cta-message p {
  color: rgba(255,255,255,0.9);
  line-height: 1.8;
  margin-bottom: 20px;
}
.home-cta-area .cta-button {
  text-align: center;
}
.home-cta-area .cta-button .btn {
  display: inline-block;
  background: #fff;
  color: #1a5276;
  font-weight: bold;
  font-size: 1.1em;
  padding: 15px 40px;
  border-radius: 50px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.home-cta-area .cta-button .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/************************************
** デザイン改善 (2026-04-21)
** 心理学ベース: 青+緑基調、CTR最適化
************************************/

/* =========================================================
 * Cocoon時代のデザインをSWELLで再現（2026-10-21 移行）
 * 上の「ホームページ用スタイル」はCocoon子テーマから移植したもの
 * ========================================================= */

/* ---------- 全体 ---------- */
body{color:#1A1A2E;letter-spacing:.04em;}
.post_content{font-size:16.5px;line-height:1.9;letter-spacing:.05em;}
.post_content p{margin-bottom:1.6em;}

/* ---------- ヘッダー ---------- */
.l-header,.l-fixHeader{background:linear-gradient(135deg,#1B6B8A 0%,#2E7D9A 50%,#3A8F7A 100%) !important;color:#fff;}
.c-headLogo,.c-headLogo a,.c-headLogo__link{color:#fff !important;}
.c-catchphrase{color:rgba(255,255,255,.85) !important;}

/* ---------- 見出し（記事本文） ---------- */
.post_content h2:not(.home-section-title):not(.p-postList__title){
  color:#fff !important;background:linear-gradient(135deg,#1B6B8A 0%,#2E7D9A 100%) !important;
  border:none !important;border-radius:6px !important;padding:14px 20px !important;
  margin-top:48px;font-size:1.35em;line-height:1.5;font-weight:700;
}
.post_content h3:not(.p-postList__title){
  color:#2E7D9A;background:rgba(115,195,251,.2);border:none;
  border-left:4px solid #4CAF84;border-bottom:4px solid #2E7D9A;
  padding:15px 20px 11px 12px;margin-top:36px;font-size:1.2em;font-weight:700;line-height:1.5;
}
.post_content h2:not(.p-postList__title)::before,.post_content h2:not(.p-postList__title)::after,
.post_content h3:not(.p-postList__title)::before,.post_content h3:not(.p-postList__title)::after{content:none !important;}

/* ---------- リンク ---------- */
.post_content a{color:#1B72A0;text-decoration:underline;text-decoration-color:rgba(27,114,160,.3);text-underline-offset:3px;transition:all .2s ease;}
.post_content a:hover{color:#0D5280;text-decoration-color:#0D5280;}
.post_content a.btn,.post_content .p-postList a,.post_content .home-cat-item{text-decoration:none;}

/* ---------- CTA（トップ・サイドバー共通） ---------- */
.cta-box{background:linear-gradient(135deg,#1B6B8A 0%,#2E7D9A 40%,#3A8F7A 100%) !important;border-radius:12px !important;padding:36px 28px !important;box-shadow:0 8px 32px rgba(27,107,138,.18);color:#fff;}
.cta-heading{color:#fff !important;font-size:1.3em !important;font-weight:700 !important;margin-bottom:12px !important;line-height:1.5;}
.cta-message,.cta-message p{color:rgba(255,255,255,.92) !important;font-size:14.5px !important;line-height:1.8 !important;}
.cta-button{text-align:center;margin-top:24px;}
.cta-button a,.cta-box .btn{position:relative;background:#FF7A2F !important;color:#fff !important;border:none !important;border-radius:8px !important;padding:16px 40px !important;font-size:17px !important;font-weight:700 !important;box-shadow:0 4px 16px rgba(255,122,47,.35) !important;transition:all .25s ease !important;display:inline-block;text-decoration:none !important;min-height:52px;line-height:1.2;}
.cta-box .btn::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;border-top:2px solid #fff;border-right:2px solid #fff;transform:translateY(-50%) rotate(45deg);}
.cta-button a:hover,.cta-box .btn:hover{background:#E86820 !important;transform:translateY(-3px) !important;box-shadow:0 8px 24px rgba(255,122,47,.5) !important;}
.cta-button a:active,.cta-box .btn:active{transform:translateY(0) !important;box-shadow:0 2px 8px rgba(255,122,47,.3) !important;}

/* サイドバーのCTAは緑系（Cocoon時代の見た目） */
#sidebar .cta-box{background:linear-gradient(135deg,#1A7A50 0%,#0A5C7A 100%) !important;padding:24px 20px !important;font-size:14.4px;}
#sidebar .cta-heading{font-size:18px !important;}
#sidebar .cta-box .btn{background:#22CC77 !important;font-size:16px !important;padding:16px 40px !important;box-shadow:0 4px 16px rgba(34,204,119,.35) !important;}
#sidebar .cta-box .btn:hover{background:#1DB368 !important;}

/* ---------- サイドバー ---------- */
#sidebar{background:#F0F7FB;border-radius:8px;padding:16px;}
#sidebar .p-profileBox{border:1px solid #E0ECF2;border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.04);}
#sidebar .p-profileBox__name{color:#2E7D9A !important;font-weight:700;}

/* ---------- 投稿リストのホバー ---------- */
.p-postList__link{border-radius:8px;transition:transform .2s ease,box-shadow .2s ease;}
.p-postList__link:hover{transform:translateY(-2px);}

/* ---------- フォローブロック ---------- */
.towa-follow-block{border-radius:8px;}

/* ---------- フッター ---------- */
.l-footer{background:#1A1A2E !important;color:#fff;}
.l-footer a,.l-footer .copyright{color:#fff;}

/* ---------- トップへ戻るボタン ---------- */
.c-fixBtn{background:#2E7D9A !important;color:#fff !important;border:none !important;border-radius:50% !important;box-shadow:0 4px 12px rgba(46,125,154,.3);}

/* ---------- トップページ（固定ページ92） ---------- */
.page-id-92 .c-pageTitle,.page-id-92 .p-articleThumb,.page-id-92 .p-toc,.page-id-92 .p-articleMetas{display:none !important;}
.post_content h2.home-section-title{background:none !important;color:#1a5276 !important;border:none !important;border-bottom:3px solid #27ae60 !important;border-radius:0 !important;padding:0 0 8px !important;margin:0 0 20px !important;font-size:1.4em !important;display:flex !important;align-items:center;gap:8px;}
.post_content h2.home-section-title::before,.post_content h2.home-section-title::after{content:none !important;}
.home-section{margin-top:40px;}

/* ---------- グローバルナビ（Cocoon時代は無し）をPCで非表示 ---------- */
@media (min-width:960px){.l-header__gnav{display:none !important;}}

/* ---------- Cocoonのマーカー（既存記事の本文を書き換えずに表示させる） ---------- */
.marker-under-red{background:linear-gradient(transparent 60%,#ffd0d1 60%);font-weight:inherit;}
.marker-under-blue{background:linear-gradient(transparent 60%,#a8dafb 60%);font-weight:inherit;}

/* SWELLのH2は左右にはみ出すため、Cocoon時代と同じく本文幅に揃える */
.post_content h2:not(.home-section-title):not(.p-postList__title){margin-left:0 !important;margin-right:0 !important;}