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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* --- 共通・PC設定 --- */
html {
    scroll-behavior: smooth;
}
a {
    transition: all 0.3s ease;    
}
.site-logo-header {
  width: 100px;
}
.site-logo-footer {
  width: 190px;
}

.content {
    margin-top: 0;
    overflow: hidden;
    position: relative;

    /* 複数背景画像の設定 */
    background-image: 
        url('img/bg-top.png'),   /* 右上の画像 */
        url('img/bg-bottom.png'); /* 左下の画像 */
    
    background-repeat: 
        no-repeat, 
        no-repeat;
    
    background-position: 
        top right,     /* 右上に固定 */
        bottom left;   /* 左下に固定 */
        
    background-size: 
        auto,
        auto;
}
.content-in {
    margin-top: 20px;
    margin-bottom: 20px;
}
main.main, div.sidebar {
    background-color: rgba(255, 255, 255, 0.7);
}
@media screen and (max-width: 768px) {
    .content {
        background: none;
    }
}

/* --- ヘッダー・フッター共通：アイコンメニューのスタイル --- */
header ol, footer ol,
header ul, footer ul {
  padding-left: 0;
  list-style-type: none;
}
.custom-header {
  border-bottom: 5px solid #e5e5e5;
}
.footer-cat-nav li a,
.menu-list li a {
    font-family: "Kiwi Maru", serif;
    transition: all 0.3s ease;
}

/* アイコン画像の設定 */
.footer-cat-nav li a img,
.menu-list li a img {
    width: 28px;
    height: auto;
    margin-bottom: 0;
}

/* --- ホバー時の挙動（継続） --- */
.footer-cat-nav li a:hover,
.menu-list li a:hover {
    color: #606060 !important;
    transform: translateY(-5px);
}

/* ホバー時にアイコンも少し不透明度を変えるなどの演出 */
.footer-cat-nav li a:hover img,
.menu-list li a:hover img {
    filter: brightness(1.1); /* 少し明るくする */
}
.present-btn {
  color: #FFF !important;
  text-decoration: none;
  background-color: #00A73C;
  padding: 8px 12px;
  display: flex;
  gap: 10px;
  text-align: center;
  align-items: center;
  line-height: 1.2;
  font-weight: bold;
  font-size: 12px;
  transition: all 0.3s ease;
  -webkit-border-radius: 8px;
          border-radius: 8px;
}
.present-btn:hover {
  filter: brightness(1.1); /* 少し明るくする */ 
}

/*ヘッダー*/
/* --- [共通設定] --- */
.nav-unshown { display: none; }

/* --- [PC版レイアウト: 961px以上] --- */
@media screen and (min-width: 961px) {
    .header-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }

    /* 中央メニュー：横並び */
    .menu-list {
        display: flex;
        gap: 20px;
        list-style: none;
        flex-wrap: wrap;
        justify-content: center;
    }
    .menu-list li a {
        display: flex;
        align-items: center;
        gap: 5px;
        color: #666 !important;
        font-weight: bold;
        text-decoration: none;
        transition: transform 0.3s;
    }
    .menu-list li a:hover { transform: translateY(-5px); }

    /* 右側：ウィジェット */
    .pc-header-widgets {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 5px;
    }
    .pc-sub-link {
        font-size: 12px;
        color: #4caf50;
        text-decoration: none;
        margin-bottom: 0 !important;
    }
    .pc-present-icon {
      width: 20px;
    }
    /* SP用要素を隠す */
    .sp-header-controls, .sp-menu-footer, .nav-close-btn { display: none; }
}


/*フッター*/
#footer {
    margin-top: 0;
}
.custom-footer {
    background-color: #f0fbe0; /* 薄いグリーンの背景色 */
    padding: 60px 0 40px;
    font-family: "Kiwi Maru", serif;
}

.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* PCレイアウト：横並び */
.footer-main-row, .footer-sub-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.footer-link {
    width: 750px;
}

/* カテゴリナビ */
.footer-cat-nav {
    display: flex;
    list-style: none;
    -webkit-justify-content: space-between;
            justify-content: space-between;
}
.footer-cat-nav li a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #666;
    font-size: 16px;
}

/* 重要リンク集のスタイル */
.footer-links-group {
    width: 100%;
    margin-top: 20px;
}
.important-links {
    list-style: none;
}
.important-links li {
}

.important-links li a {
    text-decoration: none;
    color: #4caf50 !important;
    font-weight: bold;
    display: flex; /* アイコンと文字の垂直中央を揃える */
    align-items: center;
}

.important-links li a:hover,
.pc-sub-link:hover {
    color: #66bb6a !important;
    background-color: rgba(255,255,255,0) !important;
}

/* リンクの先頭にアイコンを表示 */
.important-links li a::before,
.pc-sub-link::before {
    font-family: "Font Awesome 5 Free";
    content: "\f054";
    font-weight: 900;    
    margin-right: 8px;
    color: #4caf50;
    font-size: 12px;
    display: inline-block;
    transition: transform 0.3s ease;
}

/* ホバー時にアイコンを少し動かす演出（おまけ） */
.important-links li a:hover::before,
.pc-sub-link:hover::before {
    transform: translateX(3px);
}

.sub-links {
    display: flex;
    gap: 15px;
    list-style: none;
    margin-bottom: 10px;
}
.sub-links li a {
    color: #888;
    font-size: 13px;
    text-decoration: none;
}

/* インスタバナー */
.sp-insta-banner {
    text-align: center;
}
.footer-insta {
    margin: 30px auto;
}
.footer-insta img,
.sp-insta-banner img {
    width: 450px;
}
.copyright {
    font-size: 10px;
}

/* --- [SP版レイアウト: 960px以下] --- */
@media screen and (max-width: 960px) {
/* ヘッダー全体を最前面に保つ */
    .custom-header {
        position: sticky;
        top: 0;
        z-index: 10005; /* 最前面 */
    }
    .header-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
        height: 80px;
        position: relative;
        z-index: 10006;
        background: #fff;
    }
    .sp-present-icon img {
        width: 25px;
        height: auto;
    }

    /* PC用要素を隠す */
    .pc-header-widgets { display: none; }

    /* ロゴ横のボタンとハンバーガー */
    .sp-header-controls {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* ドロワーメニュー本体 (右から広がる) */
    .header-nav-container {
        position: fixed;
        top: 80px; /* header-innerのheightと同じにする */
        right: 0;
        width: 100%;
        height: calc(100vh - 80px); /* 画面全体の高さから引く */
        background: #f0fbe0; 
        z-index: 10000;
        transform: translateX(100%);
        transition: transform 0.4s ease;
        overflow-y: auto;
        padding-top: 10px;
        border-top: 1px solid #e0eec9;
    }
    /* メニューが開いている時、背景を固定したい場合はこれを使用 */
    body.nav-open {
        overflow: hidden;
    }

    /* --- 通常時（三本線）の基本スタイル --- */
    .nav-open {
      font-size: 12px;
      margin-top: 13px;
    }
    .nav-open span {
        position: relative;
        display: block;
        width: 25px;
        height: 2px;
        background: #4caf50; /* きらきらグリーン */
        transition: 0.3s;
        margin: 0 auto 10px;
    }

    .nav-open span::before,
    .nav-open span::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: inherit;
        transition: 0.3s;
    }

    .nav-open span::before { top: -8px; } /* 上の線 */
    .nav-open span::after { top: 8px; }   /* 下の線 */

/* --- 三本線から「×」へのアニメーション --- */
/* チェックが入った時、隣接する header-inner の中にある nav-open を探す */
    #nav-input:checked ~ .header-inner .nav-open span {
        background: transparent !important;
    }

    #nav-input:checked ~ .header-inner .nav-open span::before {
        top: 0 !important;
        transform: rotate(45deg);
        background: #4caf50; /* 閉じるときもグリーンを維持 */
    }

    #nav-input:checked ~ .header-inner .nav-open span::after {
        top: 0 !important;
        transform: rotate(-45deg);
        background: #4caf50;
    }

    /* --- ドロワーメニューの表示 --- */
    /* チェックが入った時、隣接する header-inner の中にある nav-container を出す */
    #nav-input:checked ~ .header-inner .header-nav-container {
        transform: translateX(0);
    }

    /* 2列グリッド */
    .sp-grid-menu {
        display: grid;
        grid-template-columns: 1fr 1fr;
        list-style: none;
        background: transparent;
    }
    .sp-grid-menu li {
        border-bottom: 1px dotted #d1ebb4;
        padding: 20px;
        display: flex;
    }
    .sp-grid-menu li:nth-child(odd) {
        border-right: 1px dotted #d1ebb4;
    }
    .sp-grid-menu li a {
        display: flex;
        flex-direction: row; /* アイコンとテキスト横並び */
        align-items: center;
        gap: 10px;
        color: #7d7d7d !important;
        font-family: "Kiwi Maru", serif;
        font-weight: bold;
        font-size: 16px;
        text-decoration: none;
    }
    .custom-footer {
        padding-top: 40px;
    }
    .footer-main-row, .footer-sub-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* SP版のカテゴリ2列グリッド */
    .footer-cat-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 0;
        border-top: 1px dotted #d1ebb4;
        margin-top: 20px;
        padding-left: 0;
    }
    .footer-cat-nav li {
        padding: 20px;
        border-bottom: 1px dotted #d1ebb4;
    }
    .footer-cat-nav li:nth-child(odd) {
        border-right: 1px dotted #d1ebb4;
    }

    .footer-insta {
        order: -1; /* バナーをリンクより上に配置 */
        margin-bottom: 30px;
    }
    
    .sub-links {
        justify-content: center;
        flex-wrap: wrap;
    }

    .footer-logo {
        margin: auto;
    }
    .sp-menu-footer {
      padding: 1rem;
    }
    .footer-insta img {
    max-width: 100%;
    height: auto;
    }
    .footer-link {
        width: 100%;
    }
}


/*カテゴリアイコン*/
.cat-link,
.cat-label {
  border-style: solid;
  border-width: 2px;
  border-color: #ffaab8;
  background-color: #FFF;
  color: #ffaab8;
  padding: 2px 10px;
  -webkit-border-radius: 15px;
          border-radius: 15px;
}
.cat-link:hover {
  background-color: #ffaab8;
  color: #FFF;
}

/*アイコン非表示*/
.entry-categories .fa-folder:before,
.entry-tags .fa-tag:before,
.post-date  .fa-clock-o:before,
.post-date  .fa-clock:before,
.breadcrumb .fa-home:before,
.breadcrumb .fa-folder:before,
.fa-folder-open:before {
    display: none;
}
.entry-categories-tags .tax-icon {
  margin-right: 0;
}

/*見出し*/
.article h2 {
  font-size: 20px;
  padding: 15px;
}
.article h3 {
  font-size: 18px;
  padding: 10px 15px;
}
.sidebar h2, .sidebar h3 {
  padding: 5px 10px;
  font-size: 16px;
}
.widget-entry-card {
  font-size: 14px;
}

/* Webフォント Kiwi Maru を適用 */
.font-kiwimaru,
.page .entry-title {
    font-family: "Kiwi Maru", serif;
    font-weight: 400;
    letter-spacing: 0.02em; 
    line-height: 1.4;
}

/*固定ページのタイトル*/
/* 親要素：全体を中央寄せ */
.page .entry-title ,
.page .entry-title {
    color: #4caf50;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center; /* 縦方向の中央 */
    margin: 30px 0;
}

/* span要素：ここをFlexboxにするのがポイント */
.page .entry-title span,
.archive-title span {
    display: inline-flex; /* 文字の長さにフィットさせる */
    align-items: center;  /* 複数行になっても星を上下中央に */
    justify-content: center;
    position: relative;
    max-width: 90%;       /* スマホで画面端にぶつからないよう調整 */
    line-height: 1.5;     /* 行間を広げて星とのバランスをとる */
}

/* 左右の星：共通設定 */
.page .entry-title span::before,
.page .entry-title span::after,
.archive-title span::before,
.archive-title span::after {
    content: "";
    flex-shrink: 0;       /* 星が潰れないように固定 */
    width: 24px;          /* スマホ用に少し小さく調整 */
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 左の星 */
.page .entry-title span::before,
.archive-title span::before {
    background-image: url('/wp-content/themes/cocoon-child-master/img/star-left.svg');
    margin-right: 10px;   /* 文字との距離 */
}

/* 右の星 */
.page .entry-title span::after,
.archive-title span::after {
    background-image: url('/wp-content/themes/cocoon-child-master/img/star-right.svg');
    margin-left: 10px;    /* 文字との距離 */
}

/* 【重要】スマホ専用の微調整（メディアクエリ） */
@media screen and (max-width: 480px) {
    .page .entry-title span::before,
    .page .entry-title span::after,
    .archive-title span::before,
    .archive-title span::after {
        width: 20px;       /* さらに星を小さく */
        height: 20px;
    }
}


/*囲み枠*/
table:not(.has-border-color) th, table:not(.has-border-color) td, table:not(.has-border-color) thead, table:not(.has-border-color) tfoot, .page-numbers, .page-numbers.dots, .tagcloud a, .list.ecb-entry-border .entry-card-wrap, .related-entries.recb-entry-border .related-entry-card-wrap, .carousel .a-wrap, .pager-post-navi.post-navi-border a.a-wrap, .article .toc, .a-wrap .blogcard, .author-box, .comment-reply-link, .ranking-item {
  border-color:#ccc !important;
}

/* Contact Form 7カスタマイズ */
/* フォーム全体のコンテナ */
.form-container {
  max-width: 800px;
  margin: 0 auto;
}
.form-group {
  display: flex;
  margin-bottom: 20px;
  border-bottom: 1px solid #f0f0f0; /* 項目間の区切り線 */
  padding-bottom: 15px;
  align-items: center; /* 上下中央揃え */
}
.form-group.align-top {
  align-items: flex-start;
}

/* ラベル側の設定（左側） */
.form-label {
  flex: 0 0 200px; /* 幅を200pxに固定 */
  font-weight: bold;
  font-family: "Kiwi Maru", serif;
  color: #4caf50;
}

/* 必須ラベル */
.required {
  background: #ff6b6b;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

/* 入力フィールド側の設定（右側） */
.form-field {
  flex: 1;
}

/* 各種入力要素の装飾 */
.wpcf7-form-control:not(.wpcf7-submit) {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

/* チェックボックス・ラジオボタンの幅調整 */
.wpcf7-checkbox .wpcf7-list-item {
  display: inline-block;
  margin: 0 15px 5px 0;
  width: auto;
}
.wpcf7-checkbox {
    padding: 0 !important;
}

/* スマホ表示用（縦並びに切り替え） */
@media screen and (max-width: 600px) {
  .form-container p {
    margin-bottom: 0;
  }
  .form-group {
    flex-direction: column;
    align-items: flex-start;
  }
  .form-field {
      width: 100%;
  }
  .wpcf7-checkbox .wpcf7-list-item {
    display: block;
  }
  .form-label {
    flex: 0 0 auto;
    margin-bottom: 8px;
  }
}

/* reCAPTCHAのバッジを隠す */
.grecaptcha-badge {
    visibility: hidden;
}

/* --- Contact Form 7 送信完了メッセージの強化 --- */
.wpcf7 form .wpcf7-response-output {
    margin: 30px 0 0 0 !important;
    padding: 20px 30px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-align: center !important;
    line-height: 1.6 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease;
}
.wpcf7 form.sent .wpcf7-response-output {
    border: 2px solid #00a94f !important; /* テーマのグリーン */
    background-color: #f0fbe0 !important; /* サイト背景の薄緑 */
    color: #008f42 !important;
}
.wpcf7 form.sent .wpcf7-response-output::before {
    content: "✓";
    display: inline-block;
    margin-right: 8px;
    font-size: 20px;
    font-weight: 900;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unspam .wpcf7-response-output {
    border: 2px solid #ff4757 !important; /* 警告の赤 */
    background-color: #ffeea0 !important;
    color: #d63031 !important;
}

/* --- お問い合わせフォーム用の注釈ボックス --- */
.form-notice-box {
    margin: 20px 0;
    padding: 20px;
    background-color: #fffde6; /* 注意を促すやさしい薄黄色 */
    border: 1px dashed #f1c40f; /* 派手すぎない黄色の点線枠 */
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: #444;
}
.form-notice-box strong {
    color: #d35400; /* 注意を引くオレンジ */
}
@media screen and (max-width: 768px) {
    .form-notice-box {
        padding: 15px;
        font-size: 13px;
    }
}

/* --- ボタンCSS --- */
.wp-block-button a,
.btn-grn {
    background-color: #4caf50 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px;
    padding: 20px 40px !important;
    text-decoration: none !important;
    font-weight: bold;
    box-shadow: 0 5px 0 0 #008a32;
    transition: 0.3s;
    font-size: 16px;
}
.wp-block-button a:hover,
.btn-grn:hover {
    background-color: #459a49 !important;
}
.btn-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    height: 60px;
}
.btn-arrow::after {
    font-family: "Font Awesome 5 Free";
    content: "\f105";
    font-weight: 900;
    position: absolute;
    right: 25px;
    font-size: 18px;
    transition: transform 0.3s ease;
}
.btn-arrow:hover::after {
    transform: translateX(5px);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 240px;
    height: 42px;
    background: #fff;
    border: 2px solid #00a94f; /* きらきら深めのグリーン */
    color: #00a94f !important;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 14px;
    border-radius: 25px;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: #00a94f;
    color: #fff !important;
}

/* 別ウィンドウアイコン（Font Awesome等を使うか、疑似要素で） */
.btn-outline .icon-window::after {
    font-family: "Font Awesome 5 Free";
    content: "\f35d"; /* external-link-alt */
    font-weight: 900;
    margin-left: 8px;
    font-size: 12px;
}

/* もどるボタン */
.back-to-news-container {
    clear: both !important;
    display: block !important;
    margin: 50px auto !important;
    padding: 0 15px;
    text-align: center;
}

.btn-back-custom {
    display: flex !important;
    position: relative; /* 疑似要素の基準 */
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 400px;
    height: 60px;
    margin: 0 auto;
    font-weight: bold;
}

/* 疑似要素でアイコンを左端に固定 */
.btn-back-custom::before {
    font-family: "Font Awesome 5 Free";
    content: "\f104" !important; /* angle-left */
    font-weight: 900;
    position: absolute;
    left: 30px; /* 左端からの距離 */
    font-size: 24px;
}


.top-intro-btn-area {
    text-align: center;
    margin: 40px auto;
    padding: 0 20px;
}

.btn-gradation-green {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 56px;
    background: linear-gradient(to right, #34c000, #b2d600); /* デザイン案のグラデーション */
    color: #fff !important;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 18px;
    border-radius: 50px;
    transition: opacity 0.3s ease;
}

/* 右側の矢印アイコン（Font Awesome使用） */
.btn-gradation-green::after {
    font-family: "Font Awesome 5 Free";
    content: "\f105"; /* angle-right */
    font-weight: 900;
    position: absolute;
    right: 25px;
    font-size: 20px;
}

.btn-gradation-green:hover {
    opacity: 0.8;
}


/* 固定ページの日付・更新日を非表示にする */
.type-page .post-date,
.type-page .post-update,
.type-page .date-tags {
    display: none !important;
}
.entry-categories-tags > div {
  text-align: right;
}

/* SNSシェア・フォローボタンの色を一括変更 */
/* シェアボタン（記事上・下） */
.snsc-border-color .sbtn,
.sns-share-buttons a {
    background-color: #f7f7f7 !important;
    color: #4caf50 !important;
    border: 2px solid #4caf50 !important;
    transition: all 0.3s;
}

.snsc-border-color .sbtn:hover,
.sns-share-buttons a:hover {
    background-color: #4caf50 !important;
    color: #fff !important;
    transform: translateY(-2px);
}
.sns-share-buttons .line-btn a {
    color: #06c755 !important;
    border-color: #06c755 !important;
}
.sns-follow-buttons a {
    background-color: #4caf50 !important;
    color: #fff !important;
    border-radius: 50% !important;
}

.sns-share-message {
    font-family: "Kiwi Maru", serif;
    font-size: 16px;
    color: #666;
    text-align: center;
}

/* 記事内のブログカードの説明文（スニペット）を非表示にする */
.wp-block-embed .wp-block-embed__wrapper .blogcard-snippet,
.wp-block-embed .blogcard-excerpt,
.blogcard-wrap .blogcard-snippet {
    display: none !important;
}

/* カテゴリお知らせのみアイキャッチを非表示 */
.category-12 .eye-catch {
    display: none;
}
.category-12 .entry-card-thumb {
    display: none !important;
}
.category-12 .entry-card-content {
    margin-left: 0 !important;
    padding-left: 10px;
}

/*記事一覧のデザイン*/
.archive-title, .main-widget-label {
    color: #4caf50;
    font-family: "Kiwi Maru", serif;
    font-size: 24px;
}

/* --- カード全体のレイアウト調整 --- */
.list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 2%;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
}
.entry-card-wrap:hover {
    background: none !important;
}

.entry-card-wrap {
    width: 32%; /* PCは3列 */
    margin: 0 !important;
    background-color: transparent;
    border: none;
    box-shadow: none;
}
.entry-card-thumb {
    width: 100% !important;
}
.card-thumb img {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
    
}
.entry-card-wrap .entry-card-thumb {
    float: none !important;
}

.entry-card-content {
    padding: 5px 0;
    margin: 0;
}

.entry-card-meta {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 11px;
}
.cat-label {
    white-space: nowrap;
    position: static;
}
.post-date {
    color: #999;
    font-family: 'Arial', sans-serif;
}
@media screen and (max-width: 768px) {
    .entry-card-meta {
        gap: 8px;
    }
}

.entry-card-title {
    font-size: 14px;
    line-height: 1.6;
    font-weight: normal;
    display: block;
    overflow: visible;
}
.e-card-info {
    -webkit-justify-content: space-between;
            justify-content: space-between;
}
.related-entry-card-snippet, .entry-card-snippet {
    display: none;
}

/* --- [SP版] 記事一覧を2列に --- */
@media screen and (max-width: 768px) {
    .entry-card-wrap {
        width: 49%; /* スマホは2列 */
    }
    .list {
        gap: 20px 2%;
    }
    .entry-card-title {
        font-size: 13px;
    }
    .archive-title {
        font-size: 20px;
    }
}


/* お知らせ一覧（アーカイブ）専用スタイル */
.post-type-archive-news .list {
    display: block !important;
}

/* 1記事ごとの外枠（aタグ） */
.post-type-archive-news .entry-card-wrap {
    display: flex !important;
    align-items: center;
    border: none;
    border-bottom: 1px dotted #ccc !important;
    padding: 0;
    margin-bottom: 0 !important;
    background-color: transparent;
    position: relative;
    width: 100%;
}
.post-type-archive-news .entry-card {
    display: flex !important;
    align-items: center;
    width: 100%;
    padding: 12px 0;
    margin: 0;
}
.post-type-archive-news .entry-card-thumb {
    display: none !important;
}

.post-type-archive-news .entry-card-thumb img {
    display: none !important; /* 画像本体だけを消す */
}
.post-type-archive-news .post-date {
    display: block !important;
    font-size: 14px;
    color: #666;
    margin: 0 15px 0 0 !important;
}

.post-type-archive-news .post-date .fa-clock,
.post-type-archive-news .post-date .far {
    display: none !important;
}
.post-type-archive-news .entry-card-content {
    margin: 0;
    padding: 0;
    flex-grow: 1;
    width: 90% !important;
}

.post-type-archive-news .entry-card-title {
    font-size: 16px;
    font-weight: normal;
    color: #333;
    margin: 0;
}
.post-type-archive-news .entry-card-snippet,
.post-type-archive-news .entry-card-info-cat-label,
.post-type-archive-news .entry-card-meta {
    display: none !important;
}

.post-type-archive-news .entry-card-wrap::after {
    font-family: "Font Awesome 5 Free";
    content: "\f105" !important;
    font-weight: 900;
    color: #4caf50;
    font-size: 18px;
    margin-left: auto;
    padding-right: 10px;
}
.post-type-archive-news .entry-card-wrap:hover .entry-card-title {
    color: #4caf50 !important;
    transition: color 0.3s ease;
}

.post-type-archive-news .entry-card-wrap:hover::after {
    color: #4caf50 !important;
    transform: translateX(5px);
    transition: all 0.3s ease;
}
.post-type-archive-news .entry-card-wrap:hover {
    background-color: rgba(76, 175, 80, 0.05) !important; 
}

/* スマホ版（480px以下）：上下2段レイアウト */
@media screen and (max-width: 480px) {
    .post-type-archive-news .entry-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 15px 0 !important;
    }

    /* 日付エリアの調整 */
    .post-type-archive-news .entry-card-thumb {
        margin: 0 0 5px 0 !important;
    }

    .post-type-archive-news .post-date {
        font-size: 12px !important;
        color: #888;
    }

    /* タイトルエリアの調整 */
    .post-type-archive-news .entry-card-content {
        width: 100%;
        padding-right: 25px;
    }

    .post-type-archive-news .entry-card-title {
        font-size: 15px !important;
        line-height: 1.5;
        font-weight: normal;
    }
    .post-type-archive-news .entry-card-wrap::after {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%); /* 常に縦中央 */
        font-size: 14px !important;
    }
}

/* 前後の記事ナビを非表示（newsの場合のみ） */
.single-news #pager-post-navi {
    display: none !important;
}

/* --- サイドバーのカスタマイズ --- */
.sidebar {
    padding-top: 50px;
}
.widget-title {
    background-color: #4caf50;
    color: #fff;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 16px;
}


/*ページネーションの調整*/
.pagination-next {
    display: none;
}

/* --- bxSliderのカスタマイズ --- */
/* スライダーを包むコンテナ */
.main-visual {
    width: 100%;
    overflow: hidden; /* 画面の一番外側ではみ出しをカット */
    padding: 0 0 30px;
}

/* bxSliderの表示領域（ここが重要！） */
.bx-wrapper {
    margin: 0 auto !important;
}

@media screen and (min-width: 481px) {
    /* 1枚分しか表示しない設定の枠を、無理やり「はみ出しOK」にする */
    .bx-viewport {
        overflow: visible !important; 
    }

    /* 中央以外のスライドを少し薄くして、中央を際立たせる（デザイン案風） */
    .mv-slider li {
        opacity: 0.4;
        transition: opacity 0.5s ease;
    }
    
    /* 中央のスライド（active-slide）だけハッキリ見せる */
    .mv-slider li.active-slide {
        opacity: 1;
    }
}

/* スマホ時は通常通り（チラ見せなし） */
@media screen and (max-width: 480px) {
    .bx-viewport {
        overflow: hidden !important;
    }
    .mv-slider li {
        opacity: 1 !important;
    }
}

/* bxSlider ドットのカスタマイズ */
.bx-wrapper .bx-pager.bx-default-pager a {
    background: #e0e0e0;
    border: 1px solid #4caf50;
    width: 15px;
    height: 15px;
    margin: 0 4px;
    border-radius: 50%;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
    background: #4caf50;
}

/* スライダー外枠の影を消す（Cocoonとの干渉防止） */
.bx-wrapper {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    margin-bottom: 0 !important;
}


/* --- トップページのスタイル --- */
.front-top-page .wrap {
    width: 100%;
}
.front-top-page .main {
    padding: 0;
}
.front-top-page .content,
.front-top-page .content-in {
    margin-top: 0 !important;
    background: none !important;
}

/* バナーエリア・PC時はスライダーを解除して2カラム並びにする */
.banner-item img {
    border: 1px solid #ccc;
}
.banner-item a:hover {
    opacity: 0.8;
}

@media screen and (min-width: 481px) {
    .top-banner-grid {
        display: flex !important;
        flex-wrap: wrap;
        gap: 20px;
        max-width: 1000px;
        margin: 40px auto;
        padding: 0 20px;
        list-style: none;
    }
    .banner-item {
        width: calc(50% - 10px);
    }
}

/* SP時の設定 */
@media screen and (max-width: 480px) {
    .top-banner-area {
        padding: 0 20px;
        margin: 30px 0;
    }
    .banner-item img {
        width: 100%;
        height: auto;
    }
    /* bxSliderの標準マージンをリセット */
    .top-banner-area .bx-wrapper {
        margin-bottom: 20px !important;
    }
}

/*お知らせ*/
.top-news-section {
    padding: 50px 20px;
    margin: 100px 0;
    background-color: #f0fbe0;
}
.top-news-inner {
    max-width: 1000px;
    margin: auto;
}
.news-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: none !important;
}
.news-item {
    border-bottom: 1px dotted #e0e0e0;
}
.news-item:last-child {
    border-bottom: none !important;
}

.news-link {
    display: flex;
    align-items: center;
    padding: 18px 10px;
    text-decoration: none !important;
    color: #333 !important;
    transition: background-color 0.3s;
}
.news-link::after {
    font-family: "Font Awesome 5 Free";
    content: "\f105";
    font-weight: 900;
    color: #4caf50;
    margin-left: 15px;
    font-size: 18px;
}
.news-link:hover {
    color: #4caf50 !important;
    transition: color 0.3s ease;
}
.news-link:hover::after {
    color: #4caf50 !important;
    transform: translateX(5px);
    transition: all 0.3s ease;
}

.news-date {
    font-size: 14px;
    color: #888;
    margin-right: 30px;
    font-family: 'Saira', sans-serif;
}

@media screen and (min-width: 769px) {
    .top-news-inner {
        display: flex;
        align-items: flex-start;
        gap: 60px; /* 見出しとリストの間の余白 */
    }

    .news-title-part {
        flex: 0 0 180px; /* 見出しの横幅 */
        padding-top: 10px; /* リストの1行目と高さを合わせる微調整 */
    }

    .news-list-part {
        flex: 1;
    }
}

/* スマホ時の調整 */
@media screen and (max-width: 768px) {
    .news-heading {
        margin-bottom: 25px;
    }
    .news-date {
        margin-right: 15px;
        min-width: 85px;
    }
}

/*ダウンロードコンテンツバナー*/
.top-printable-banner {
    width: 100%;
    margin: 60px 0;
    padding: 0 20px;
}

.top-printable-banner .inner-container {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.printable-link {
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.printable-link:hover {
    opacity: 0.9;
}
@media screen and (max-width: 768px) {
    .top-printable-banner {
        margin: 40px 0;
        padding: 0 15px;
    }
}

/*おすすめ記事カルーセル*/
.top-recommend-section {
    padding: 60px 0;
    background-color: #f0fbe0; /* 優しいクリーム色の背景 */
    overflow: hidden;
}

.recommend-slider-wrap {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    overflow: visible !important; /* 親要素の切り抜きを解除 */
}

.recommend-slider-wrap .bx-viewport {
    overflow: visible !important; /* これで横のスライドが見えるようになります */
}

/* スライド全体を中央に寄せるための調整 */
.recommend-slider {
    display: flex;
    align-items: baseline;
}


/* bxSliderのカスタマイズ（矢印ボタン） */
.bx-wrapper .bx-controls-direction a {
    width: 40px;
    height: 40px;
    top: 40%;
    background: #4caf50; /* きらきらグリーン */
    border-radius: 50%;
    color: #fff;
    text-indent: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.bx-wrapper .bx-next {
    right: 0;
}
.bx-wrapper .bx-prev {
    left: 0;
}

.bx-wrapper .bx-prev::before { content: "\f104"; font-family: "Font Awesome 5 Free"; font-weight: 900; }
.bx-wrapper .bx-next::before { content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; }


@media screen and (min-width: 481px) {
    .bx-viewport { overflow: visible !important; }
}

@media screen and (max-width: 480px) {
    .top-recommend-section {
        padding: 0 0 60px;
    }
    .recommend-slider-wrap .bx-wrapper {
        padding-left: 10%; /* 左側のチラ見せ具合を調整 */
    }
    .recommend-slider-wrap .recommend-item {
        width: 300px !important;
    }
    .bx-wrapper .bx-next,
    .bx-wrapper .bx-prev {
        display: none !important;
    }
}

/*新着記事グリッド*/
.top-new-posts-section {
    padding: 60px 0;
    max-width: 1000px;
    margin: 0 auto;
}

/* グリッドの設定 */
.new-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* PCは3列 */
    gap: 30px 20px; /* 縦30px, 横20pxの余白 */
    margin-bottom: 40px;
}

/* 記事カードの基本構造 */
.post-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.post-thumbnail,
.entry-card-thumb {
    position: relative;
    aspect-ratio: 16 / 9; /* 画像の比率を固定 */
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 10px;
}

.post-thumbnail img,
.entry-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.post-card:hover img,
.entry-card-wrap:hover img {
    transform: scale(1.05);
}
.post-category {
    padding: 0 10px;
    font-size: 11px;
    font-weight: bold;
}
.post-title {
    margin-top: 10px;
    font-size: 16px;
}

/* レスポンシブ調整 */
@media screen and (max-width: 768px) {
    .new-posts-grid {
        grid-template-columns: repeat(2, 1fr); /* タブレット・大きめスマホは2列 */
        gap: 20px 15px;
        padding: 0 15px;
    }
}

/* --- 新着記事グリッド：スマホ2列設定 --- */
@media screen and (max-width: 480px) {
    .new-posts-grid {
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px 10px; 
        padding: 0 10px;
    }

    .post-title {
        font-size: 13px;
        line-height: 1.4;
        /* 3行以上になる場合は省略する設定（お好みで） */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    .post-date {
        font-size: 11px;
        margin-bottom: 3px;
    }

    /* カテゴリーラベルも少し小さく */
    .post-category {
        font-size: 9px;
        padding: 1px 5px;
    }
}

/* --- きらきらとは --- */
.top-about-section {
    padding: 80px 0;
    background-color: #f0fbe0; 
    overflow: hidden;
    position: relative;
    background-image: 
        url('img/bg-top.png'),   /* 右上の画像 */
        url('img/bg-bottom.png'); /* 左下の画像 */
    
    background-repeat: 
        no-repeat, 
        no-repeat;
    
    background-position: 
        top right,     /* 右上に固定 */
        bottom left;   /* 左下に固定 */
        
    background-size: 
        auto,          /* 画像のサイズ（必要に応じて 150px などを指定） */
        auto;
}

@media screen and (max-width: 768px) {
    .top-about-section {
        padding: 50px 0;
        
        /* スマホ画面に合わせて背景画像のサイズを微調整 */
        background-size: 
            220px auto, 
            220px auto;
    }
}

.about-flex-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    gap: 50px;
}

/* 画像エリア */
.about-image-part {
    flex: 0 0 45%; /* PCでは45%の幅 */
    text-align: center;
}

.about-image-part img {
    width: 100%;
    max-width: 400px;
    height: auto;
}
.about-text-part {
    flex: 1;
}
.about-title,
.about-text-part-title {
    font-family: "Kiwi Maru", serif;
    font-weight: 400;
    letter-spacing: 0.02em;    
    color: #4caf50;
    margin-bottom: 25px;
}
.about-title {
    font-size: 35px;
    text-align: center;
}
.about-text-part-title {
    font-size: 20px;
    font-weight: bold; 
}
.about-description {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 30px;
}
.about-description-line {
    margin-bottom: 30px;
    text-align: center;
}

/* スマホ時の挙動 */
@media screen and (max-width: 768px) {
    .top-about-section {
        padding: 50px 0;
    }

    .about-flex-container {
        flex-direction: column; /* 縦並びに変更 */
        gap: 30px;
        text-align: center;
    }

    .about-image-part {
        flex: 0 0 100%;
        order: 1; /* 画像を上に */
    }

    .about-text-part {
        order: 2; /* テキストを下に */
    }

    .about-title {
        font-size: 24px;
    }

    .about-description {
        font-size: 15px;
        text-align: left; /* テキストは左詰めの方が見やすい場合が多い */
    }
}

/* --- 最新号紹介セクション全体 --- */
.top-magazine-section {
    padding: 60px 0;
    max-width: 750px;
    margin: 0 auto;
}

.magazine-flex-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px; /* 表紙とテキストの間隔 */
    padding: 0 20px;
    margin-bottom: 50px; /* 下部ボタンとの間 */
}
.magazine-cover-part {
    flex: 0 0 300px;
    text-align: right;
}

.cover-wrapper img {
    width: 100%;
    max-width: 260px;
    height: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.magazine-detail-part {
    flex: 1;
    text-align: left;
}

.magazine-title {
    font-size: 20px;
    color: #333;
    font-weight: bold;
    margin: 0 0 8px 0;
}

.magazine-subtext {
    font-size: 14px;
    color: #666;
    margin: 0 0 25px 0;
}

.top-contact-nav-section {
    padding: 30px 0 60px 0; /* 上の余白を少し詰めて、全体のバランスを取る */
    max-width: 1000px;
    margin: 0 auto;
}

/* 2連ボタンの配置コンテナ */
.magazine-bottom-buttons {
    display: flex;
    justify-content: center;
    gap: 30px; /* PC時のボタン同士の間隔を少し広げてゆったりと */
    padding: 0 20px;
}

@media screen and (max-width: 768px) {
    .magazine-flex-container {
        flex-direction: column; /* 縦並び */
        gap: 25px;
        text-align: center;
    }

    .magazine-cover-part {
        flex: 0 0 100%;
        text-align: center;
    }

    .magazine-detail-part {
        text-align: center;
    }

    .top-contact-nav-section {
        padding: 20px 0 40px 0;
    }

    .magazine-bottom-buttons {
        flex-direction: column; /* スマホは縦に並べる */
        align-items: center;
        gap: 15px; /* ボタン同士の上下の隙間 */
    }

    .btn-magazine-green {
        max-width: 100%; /* スマホ画面幅いっぱいに広げる（押しやすさ重視） */
    }
}

/* ==========================================
   ブロックエディタ　PC・スマホの表示切り替え（レスポンシブ）
   ========================================== */
@media screen and (max-width: 767px) {
    .u-hidden-sp {
        display: none !important;
    }
}
@media screen and (min-width: 768px) {
    .u-hidden-pc {
        display: none !important;
    }
}
/* スマホでもカラムを縦並びにさせない共通CSS */
@media screen and (max-width: 768px) {
    .wp-block-columns.keep-columns {
        flex-direction: row !important; /* 縦並び(column)にさせない */
        flex-wrap: nowrap !important;
    }
    .wp-block-columns.keep-columns .wp-block-column {
        flex-basis: 50% !important; /* 2カラムなら均等に50%ずつ */
    }
}

/************************************
** ぬり絵ダウンロードコンテンツ
************************************/
.page-slug-print .entry-title,
.page-id-121 .entry-title,
.page-slug-print .page-title,
.page-id-121 .page-title {
    display: none !important;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  .entry-title, .article h2 {
    font-size: 20px;
    padding: 10px;
  } 
  .page .entry-title {
    padding-left: 0;
    padding-right: 0;
  }
  .article h3 {
    font-size: 18px;
  }
}