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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

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

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

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





/* ==========================================
   ◆お知らせ

   ========================================== */

.custom-news-list .wp-block-latest-posts {
    padding: 0 !important;
    margin-top: 20px !important;
    list-style: none !important;
    border-top: 1px solid #e0e0e0; /* 一番上の線 */
}

.custom-news-list .wp-block-latest-posts li {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    border-bottom: 1px solid #e0e0e0 !important; /* 下線 */
    padding: 15px 0 !important;
    margin: 0 !important;
}

.custom-news-list .wp-block-latest-posts__post-date {
    display: block !important;
    flex: 0 0 120px !important; /* 日付の幅 */
    color: #888 !important;    /* 少し淡いグレーに */
    font-size: 14px !important;
    margin-right: 20px !important;
}

.custom-news-list .wp-block-latest-posts__post-title {
    flex: 1 !important;
    font-size: 16px !important;
    color: #333 !important;
    text-decoration: none !important;
}

/*--------------------------------
 ★モバイル　834以下
------------------------------*/
@media screen and (max-width: 834px) {
    .custom-news-list .wp-block-latest-posts__post-date {
        flex: 0 0 100px !important; /* 少し幅を詰める */
        font-size: 13px !important;
    }
    .custom-news-list .wp-block-latest-posts__post-title {
        font-size: 15px !important;
    }
}

/*--------------------------------
 ★モバイル　480以下
------------------------------*/
@media screen and (max-width: 480px) {
    .custom-news-list .wp-block-latest-posts li {
        flex-direction: column !important; /* 縦並びにする */
        align-items: flex-start !important;
        padding: 12px 0 !important;
    }
    .custom-news-list .wp-block-latest-posts__post-date {
        margin-bottom: 4px !important;
        font-size: 12px !important;
    }
    .custom-news-list .wp-block-latest-posts__post-title {
        font-size: 14px !important;
    }
}





/* ==========================================
   ◆注文フォーム

   ========================================== */


/* ラジオボタンの横並び調整 */
.wpcf7-form-control-wrap .wpcf7-list-item {
    display: inline-block;
    margin-right: 20px;
}

/* 日付・数値入力欄の共通デザイン */
input[type="date"], input[type="number"] {
    width: 100%; padding: 12px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 8px;
}

/* 発注用ボタンのデザイン（先ほどのCSSを適用） */
.order-form .wpcf7-submit {
    background-color: #67a67d !important;
    color: #fff !important;
    border-radius: 30px !important;
    padding: 15px !important;
    font-weight: bold;
}

/* グループ全体のレイアウト */
.fax-download-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #ddd;
    gap: 15px;
}

/* ボタンのデザイン */
.order-pdf-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    background: #fff;
    border: 1px solid #67a67d;
    color: #67a67d !important;
    border-radius: 5px;
    text-decoration: none !important;
    font-weight: bold;
    flex-shrink: 0;
}

/* アイコンとテキストの余白 */
.btn-icon { margin-right: 8px; font-size: 1.2em; }
.btn-text { white-space: nowrap; }

/* ==========================================
   ★480以下
   ========================================== */
@media screen and (max-width: 480px) {
    .fax-download-box { flex-direction: column; text-align: center; }
    .order-pdf-btn { width: 100%; }
}


@media screen and (max-width: 480px) {
    /* 1. FAXグループ全体をスリムにする */
    .fax-download-box {
        padding: 15px !important;
        gap: 10px !important;
        text-align: center !important;
    }

    /* 2. テキストサイズを縮小して枠に収める */
    .fax-title {
        font-size: 13px !important;
        margin-bottom: 5px !important;
        font-weight: bold;
    }
    .fax-desc {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    /* 3. ボタンの調整（幅を100%にして、文字を小さくする） */
    .order-pdf-btn {
        width: 100% !important;
        padding: 10px 5px !important;
        font-size: 12px !important; /* 文字を小さくして収める */
        justify-content: center !important;
    }
    
    /* アイコンをさらに小さく */
    .btn-icon { font-size: 14px !important; margin-right: 5px !important; }
}




/* ==========================================
   ◆問い合わせフォーム

   ========================================== */

/* フォーム全体の枠組み */
.custom-contact-form { padding: 20px; }
.form-label { display: block; margin-bottom: 8px; font-weight: bold; color: #333; }
.required { background: #e74c3c; color: #fff; font-size: 10px; padding: 2px 5px; border-radius: 3px; }

/* 入力欄のデザイン */
input[type="text"], input[type="email"], select, textarea {
    width: 100%; padding: 12px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 8px;
}
textarea { height: 150px; }

/* フッターの注釈 */
.form-footer { margin-bottom: 20px; color: #666; font-size: 0.9em; }

/* --- 送信ボタン：基本設定 --- */
.wpcf7-submit {
    background-color: #67a67d !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 30px !important;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex; 
    justify-content: center; 
    align-items: center;
}
.wpcf7-submit::after { content: " →"; }
.wpcf7-submit:hover { background-color: #5a946d !important; }

/* --- 送信ボタン：レスポンシブ設定 --- */
@media screen and (min-width: 481px) {
    .wpcf7-submit {
        width: 300px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
@media screen and (max-width: 480px) {
    .custom-contact-form { padding: 10px !important; }
    .form-label { font-size: 14px !important; margin-bottom: 5px !important; }
    input[type="text"], input[type="email"], select, textarea { padding: 8px 10px !important; font-size: 14px !important; margin-bottom: 15px !important; }
    .required { font-size: 9px !important; padding: 1px 4px !important; }
    .wpcf7-submit { width: 100% !important; padding: 15px !important; font-size: 14px !important; }
}



/* ==========================================
 ◆フッター

   ========================================= */

/* 1. 【最重要】一番下の標準コピーライトと不要見出し、不要ナビを完全消去 */
.widget-footer-left-title,
.footer-widgets .widget-title,
#footer h3,
#footer .widget-title,
.source-org.copyright,
.footer-bottom,
#footer-in + .footer-bottom,
.yf-mobile-fixed-nav {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ウィジェットパーツ自体が持つ下余白(32.4px)などを強制ゼロにする */
#footer .widget_text,
#footer .textwidget,
.footer-widgets .widget_text,
.footer-left .widget_text,
aside.widget_text {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Cocoonのフッター外枠の制限・余白を完全にゼロにする */
#footer, .footer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* ウィジェットの内側・３分割エリア（.footer-leftなど）の余白を強制リセット */
.footer-in,
#footer-in,
.footer-widgets,
.footer-left,
.footer-center,
.footer-right {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;   
  margin: 0 !important;
  border: none !important;
}

/* 全体の共通カラー設定 */
:root {
  --yf-green: #528E6F;      
  --yf-light-bg: #F9F7F2;  
}

/* 2. 最外枠：左右の隙間を画面引き伸ばしで完全相殺 */
.yamatoya-footer-container {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  font-family: sans-serif !important;
}

/* ------------------------------------------
   【PC版】上部4大バナー（1024px以上）
   ------------------------------------------ */
@media screen and (min-width: 1024px) {
  .yf-pc-contact-bar {
    display: flex !important;
    justify-content: center !important;  
    align-items: stretch !important;      
    background-color: var(--yf-light-bg) !important;
    border-top: 1px solid #E5E1D7 !important;
    border-bottom: 1px solid #E5E1D7 !important;
    padding: 35px calc((100vw - 1200px) / 2) !important; 
    gap: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  @media screen and (max-width: 1240px) {
    .yf-pc-contact-bar {
      padding: 35px 3% !important;
    }
  }

  .yf-pc-box {
    flex: 1 !important;
    min-width: 0 !important; 
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    padding: 20px 15px !important;
    border: 1px solid #E5E1D7 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
    box-sizing: border-box !important;
  }

  .yf-pc-box .yf-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background-color: var(--yf-green) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
  }
  .yf-pc-box.line .yf-icon { background-color: #06C755 !important; } 

  .yf-pc-box .yf-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex-grow: 1 !important;
    min-width: 0 !important;
  }
  .yf-pc-box .yf-label {
    font-size: 13px !important;
    font-weight: bold !important;
    color: #333333 !important;
    white-space: nowrap !important;
  }
  .yf-pc-box .tel-num {
    font-size: 20px !important;
    font-weight: bold !important;
    color: var(--yf-green) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }
  .yf-pc-box .yf-sub {
    font-size: 11px !important;
    color: #777777 !important;
    white-space: nowrap !important;
  }
  .yf-pc-box .yf-qr {
    width: 45px !important;
    height: 45px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
  }

  .yf-pc-box .yf-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 1px solid var(--yf-green) !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    color: var(--yf-green) !important;
    font-weight: bold !important;
    text-decoration: none !important;
    background: #ffffff !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    transition: all 0.3s !important;
  }
  .yf-pc-box .yf-btn:hover {
    background-color: var(--yf-green) !important;
    color: #ffffff !important;
  }
}

@media screen and (max-width: 1023px) {
  .yf-pc-contact-bar { display: none !important; }
}

/* ------------------------------------------
   【PC版】メイン緑フッター（1024px以上）
   ------------------------------------------ */
.yf-main-footer {
  background-color: var(--yf-green) !important;
  color: #ffffff !important;
  padding: 50px 0 30px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media screen and (min-width: 1024px) {
  .yf-footer-inner {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important; 
    box-sizing: border-box !important;
  }

  .yf-brand { flex-shrink: 0 !important; }
  .yf-logo-text {
    font-size: 24px !important;
    font-weight: bold !important;
    margin: 0 0 5px 0 !important;
    color: #ffffff !important;
  }
  .yf-sub-text {
    font-size: 13px !important;
    margin: 0 !important;
    opacity: 0.9 !important;
  }

  .yf-pc-nav {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
  }
  .yf-pc-nav a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: bold !important;
    font-size: 14px !important;
    position: relative !important;
  }
  .yf-pc-nav a:not(:last-child)::after {
    content: "|" !important;
    position: absolute !important;
    right: -12px !important;
    color: rgba(255,255,255,0.3) !important;
  }

  .yf-info {
    text-align: right !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    flex-shrink: 0 !important;
  }
  .yf-info p { margin: 0 !important; }
  .yf-info .yf-tel-fax { margin-top: 4px !important; }
  .yf-info .yf-tel-fax span { margin-left: 14px !important; }
}

.yf-copyright {
  max-width: 1200px !important;
  margin: 40px auto 0 !important;
  padding: 20px 20px 0 !important;
  border-top: 1px solid rgba(255,255,255,0.15) !important;
  text-align: center !important;
  font-size: 12px !important;
  opacity: 0.8 !important;
}

.yf-sp-nav, .yf-sp-contact { display: none !important; }

/* ------------------------------------------
   【モバイル版】796px以下のスタイル（文字崩れ防止対策版）
   ------------------------------------------ */
@media screen and (max-width: 796px) {
  .yf-pc-nav, .yf-info-right { display: none !important; }
  
  .yf-main-footer {
    padding: 40px 0 40px !important; 
  }
  .yf-footer-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; 
    padding: 0 25px !important;
    gap: 35px !important;
  }
  
  .yf-sp-nav {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  .yf-sp-nav a {
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 16px 0 !important;
    font-size: 15px !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  .yf-sp-nav a:first-child {
    border-top: 1px solid rgba(255,255,255,0.15) !important;
  }
  
  .yf-sp-contact {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 20px !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    padding-bottom: 25px !important;
  }
  .yf-sp-tel-box { text-align: center !important; width: 100% !important; }
  .yf-sp-tel {
    font-size: 24px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    text-decoration: none !important;
  }
  .yf-sp-time { font-size: 12px !important; opacity: 0.8 !important; margin: 5px 0 0 0 !important; }
  
  /* ボタン2つの並びと隙間を狭い画面用に最適化 */
  .yf-sp-btns {
    display: flex !important;
    gap: 10px !important; /* 15pxから10pxに縮めてボタンの幅を確保 */
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
  }
  
  /* 小さなスマホでも絶対に「せ」が改行されないボタン設定 */
  .yf-sp-btn {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important; /* アイコンとの隙間を少し詰める */
    border: 1px solid #ffffff !important;
    border-radius: 30px !important;
    padding: 12px 4px !important; /* 左右の余白を削って文字スペースを最大化 */
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: bold !important;
    font-size: 13px !important; /* 14pxから13pxに微調整 */
    box-sizing: border-box !important;
    white-space: nowrap !important; /* ★最重要：文字を絶対に2行にさせない命令 */
  }
  
  .yf-info {
    text-align: left !important;
    width: 100% !important;
    font-size: 13px !important;
    opacity: 0.9 !important;
  }
  .yf-info .yf-tel-fax {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-top: 8px !important;
  }
  .yf-info .yf-tel-fax span { margin-left: 0 !important; }

  .yf-copyright {
    margin-top: 20px !important; 
    border-top: none !important;
    text-align: left !important;
    padding: 0 !important;
  }
}




/* ==========================================
  ◆貼れるジャー

   ========================================== */

/* バナーを囲むセクション全体の背景と余白 */
.yamatoya-banner-section {
  background-color: #ffffff !important;   /* 上のセクションから自然に繋がる白背景 */
  padding: 50px 20px !important;         /* 上下にゆったりとした余白を確保 */
  text-align: center !important;
  
  /* Cocoonの横幅制限を無視して全幅化する設定 */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

/* ★ バナー画像（.yamatoya-responsive-banner）のバランス調整 ★ */
.yamatoya-banner-section .yamatoya-responsive-banner {
  max-width: 1000px !important;          /* パソコン表示で見やすくて上品な最大幅 */
  width: 100% !important;
  margin: 0 auto !important;
  display: block !important;
}

/* バナー画像そのものの装飾（ほんのり角を丸くし、上品な影をつけてボタン感を出す） */
.yamatoya-banner-section .yamatoya-responsive-banner img {
  width: 100% !important;
  height: auto !important;
  border-radius: 6px !important;         /* カチッとしすぎないよう角をほんの少し丸く */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important; /* 目立ちすぎない薄い影 */
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* バナーにマウスを乗せたときに、クリックできることが伝わるように少し浮かす */
.yamatoya-banner-section .yamatoya-responsive-banner img:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
}

/* --- スマホ・タブレット画面（横幅767px以下）のとき --- */
@media screen and (max-width: 767px) {
  .yamatoya-banner-section {
    padding: 35px 15px !important;       /* スマホに合わせて上下の余白を少しコンパクトに */
    
    /* 下の「やまとやの強み（薄緑）」とピタッと繋げたい場合は、下のmarginをマイナスにして微調整します */
    margin-bottom: 0 !important;
  }
  
  .yamatoya-banner-section .yamatoya-responsive-banner {
    max-width: 100% !important;          /* スマホ画面の横幅いっぱいにフィットさせる */
  }
  
  .yamatoya-banner-section .yamatoya-responsive-banner img {
    border-radius: 4px !important;       /* スマホ画面に合わせて角丸を微調整 */
  }
}



/*=============================
  ◆やまとやの強み
（4カラム・白いカード調整）
 =========================== */

/* セクション全体の背景と上下のゆったりした余白 */
.yamatoya-features-section {
  background-color: #eaf6ed !important; /* サンプルの薄いグリーン */
  padding: 60px 20px !important;
	
	/* ▼ 強制的に画面の端から端まで広げる魔法のCSS ▼ */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

/* 4カラム全体の横幅やバランスの調整（PC用） */
.yamatoya-features-section .wp-block-columns {
  display: flex !important;
  gap: 20px !important;                 /* カードとカードの間の隙間 */
  max-width: 1100px !important;          /* 全体の最大横幅 */
  margin: 0 auto !important;
}

/* 各カラムの横幅を均等に（PC用） */
.yamatoya-features-section .wp-block-columns > .wp-block-column {
  flex-basis: 25% !important;
  max-width: 25% !important;
  margin: 0 !important;
}

/* ★ 白いカード（.feature-card）の立体感と余白のデザイン ★ */
.yamatoya-features-section .feature-card {
  background-color: #ffffff !important;  /* カードを白にする */
  border-radius: 8px !important;         /* 角をほんのり丸く */
  padding: 35px 20px !important;         /* カード内側の余白 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important; /* 上品で薄い影をプラス */
  text-align: center !important;
  height: 100% !important;               /* 4つのカードの高さを綺麗に揃える */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important; /* 動くときのスムーズさ */
}

/* カードにマウスを乗せたときに少し浮き上がる上品な演出 */
.yamatoya-features-section .feature-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
}

/* カードの中の「アイコン画像」のサイズと位置調整 */
.yamatoya-features-section .feature-card figure.wp-block-image {
  margin: 0 auto 20px auto !important;
  max-width: 65px !important;            /* アイコンの大きさを制限 */
}

/* カードの中の「小さなタイトル」（学校教材が豊富、など） */
.yamatoya-features-section .feature-card h3,
.yamatoya-features-section .feature-card .wp-block-heading {
  font-size: 18px !important;
  font-weight: bold !important;
  color: var(--yamatoya-key-color) !important; /* タイトルを緑色に */
  margin-top: 0 !important;
  margin-bottom: 15px !important;
  border: none !important;               /* Cocoonの不要な線をここでも消す */
  background: none !important;
  padding: 0 !important;
}

/* カードの中の「説明文テキスト」 */
.yamatoya-features-section .feature-card p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #333333 !important;             /* 読みやすいダークグレー */
  margin: 0 !important;
}

/* --- ★横幅767px以下 --- */
@media screen and (max-width: 767px) {
  .yamatoya-features-section {
    padding: 40px 15px !important;
  }
  
  /* スマホでは綺麗に「2列 × 2行」のグリッド状に折り返す */
  .yamatoya-features-section .wp-block-columns {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }
  
  /* 2列にするために、1つのカラム幅を約50%（から隙間を引いた分）に計算 */
  .yamatoya-features-section .wp-block-columns > .wp-block-column {
    flex-basis: calc(50% - 7.5px) !important;
    max-width: calc(50% - 7.5px) !important;
  }
  
  /* スマホ用の文字サイズと余白の微調整 */
  .yamatoya-features-section .feature-card {
    padding: 25px 15px !important;
  }
  .yamatoya-features-section .feature-card h3 {
    font-size: 15px !important;
    margin-bottom: 10px !important;
  }
  .yamatoya-features-section .feature-card p {
    font-size: 12px !important;
  }
}

/* --- ★横幅480px以下 --- */
@media screen and (max-width: 480px) {
  /* 画面がかなり狭いときは、2列だと崩れるので安全に「1列（縦並び）」にします */
  .yamatoya-features-section .wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}



/*===========================
◆【全ページ完全修正版】スマホ・タブレットで
各ページの上部がヘッダーに隠れる問題を修正
============================ */
@media screen and (max-width: 768px) {

  /* 1. 【最重要】固定ヘッダーの位置と手前表示を完全に固定 */
  #header-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
  }

  /* 2. ホーム画面（トップページ）の調整：スライダーの上にだけ隙間を作る */
  .home .n2-section-smartslider {
    margin-top: 60px !important;
  }
  .home #content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 3. 会社概要・お問い合わせなど「ホーム以外のすべてのページ」の最上部に60pxの余白を強制確保 */
  body:not(.home) #content,
  body:not(.home) main,
  body:not(.home) .main-container {
    padding-top: 60px !important; /* 内側に60pxの余白を作り、文字が隠れるのを防ぎます */
    margin-top: 0 !important;
  }

  /* 二重に隙間が開くのを防ぐための全体リセット */
  #container,
  .site-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}



/* ===============================
  ◆共通見出し❷
（クラス名：yamatoya-key-title）
============================ */

/* キーカラーを設定 */
:root {
  --yamatoya-key-color: #67a67d; 
}


/* --- 全画面共通の基本設定 --- */
.article h2.yamatoya-key-title,
.article h3.yamatoya-key-title,
#main .yamatoya-key-title,
h2.yamatoya-key-title,
h3.yamatoya-key-title,
.yamatoya-key-title {
  text-align: center !important;
  position: relative !important;
  font-weight: bold !important;
  color: var(--yamatoya-key-color) !important; /* 文字色を確実に緑に固定 */
  
  /* コクーンの標準の枠線・背景を完全に抹消 */
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;

  /* 下からふわっとフェードインさせるアニメーション */
  animation: yamatoyaFadeUp 1.2s ease-out forwards;
  opacity: 0; /* 最初は透明 */
}

/* アニメーションの具体的な動き */
@keyframes yamatoyaFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ★Cocoon独自の長い線（before）を完全に非表示にします */
.article h2.yamatoya-key-title::before,
.article h3.yamatoya-key-title::before,
#main .yamatoya-key-title::before,
.yamatoya-key-title::before {
  display: none !important;
  content: none !important;
}

/* ★新しくデザインした「中央揃えの短い下線（after）」を確実に表示 */
.article h2.yamatoya-key-title::after,
.article h3.yamatoya-key-title::after,
#main .yamatoya-key-title::after,
.yamatoya-key-title::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 60px !important;         /* 線の長さ */
  height: 3px !important;         /* 線の太さ */
  background-color: var(--yamatoya-key-color) !important; /* 下線を緑に */
  border-radius: 2px !important;
  border: none !important;
}

/* --- パソコン画面（横幅768px以上）のときの見出し調整 --- */
@media screen and (min-width: 768px) {
  .article h2.yamatoya-key-title,
  .article h3.yamatoya-key-title,
  .yamatoya-key-title {
    font-size: 28px !important;
    padding-bottom: 18px !important; /* 文字と下線の隙間 */
    margin-bottom: 40px !important;  /* 見出しと下のコンテンツの隙間 */
  }
}

/* --- 横幅767px以下 見出し --- */
@media screen and (max-width: 767px) {
  .article h2.yamatoya-key-title,
  .article h3.yamatoya-key-title,
  .yamatoya-key-title {
    font-size: 20px !important;
    padding-bottom: 12px !important;
    margin-bottom: 25px !important;
    line-height: 1.4 !important;
  }
  /* スマホ・タブレットでは下線を少しコンパクトに */
  .article h2.yamatoya-key-title::after,
  .article h3.yamatoya-key-title::after,
  .yamatoya-key-title::after {
    width: 45px !important;
    height: 2.5px !important;
  }
}

    /* 2. カラム（画像や文字が入るブロック）の不要な余白を削除 */
    .wp-block-column { 
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. アイコン画像の高さと底上げをキャンセル */
    .wp-block-image img {
        margin-bottom: 0 !important;
        vertical-align: bottom !important;
    }
}


/* --- 横幅480px以下 見出し --- */
@media screen and (max-width: 480px) {
  .article h2.yamatoya-key-title,
  .article h3.yamatoya-key-title,
  .yamatoya-key-title {
    font-size: 15px !important;
    margin-bottom: 20px !important;
  }
}


/*===========================
   創業50周年

 ========================== */

/* --- パソコン画面（横幅768px以上）のとき --- */
@media screen and (min-width: 768px) {
  .yamatoya-intro-section .wp-block-columns {
    display: flex !important;
    align-items: flex-end !important;
  }
	  
  /* 左イラスト (20%) */
  .yamatoya-intro-section .wp-block-columns > .wp-block-column:nth-child(1) {
    flex-basis: 20% !important;
    max-width: 20% !important;
  }
  
  /* 中央文章 (60%) */
  .yamatoya-intro-section .wp-block-columns > .wp-block-column:nth-child(2) {
    flex-basis: 60% !important;
    max-width: 60% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* 右イラスト (20%) */
  .yamatoya-intro-section .wp-block-columns > .wp-block-column:nth-child(3) {
    flex-basis: 20% !important;
    max-width: 20% !important;
  }
  
  /* パソコンでのイラストサイズ（枠内いっぱいに表示） */
  .yamatoya-intro-section .wp-block-column figure.wp-block-image {
    max-width: 100% !important;
   margin-top: auto !important;   /* 上に自動で余白を作って下にくっつける */
    margin-bottom: 0 !important;  /* 下の余白をゼロに */
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .yamatoya-intro-section .wp-block-column p {
    text-align: center !important;
  }
}

/* --- ★横幅　767px --- */
@media screen and (min-width: 481px) and (max-width: 767px) {
  .yamatoya-intro-section .wp-block-columns {
    display: flex !important;
    flex-direction: row !important;
		flex-wrap: nowrap !important;
    align-items: flex-end !important;
    gap: 10px !important;
  }
  .yamatoya-intro-section .wp-block-columns > .wp-block-column:nth-child(1) { flex-basis: 20% !important; max-width: 20% !important; }
  .yamatoya-intro-section .wp-block-columns > .wp-block-column:nth-child(2) { flex-basis: 60% !important; max-width: 60% !important; }
  .yamatoya-intro-section .wp-block-columns > .wp-block-column:nth-child(3) { flex-basis: 20% !important; max-width: 20% !important; }
	
  .yamatoya-intro-section .wp-block-column figure.wp-block-image {
		max-width: 100% !important; 
		margin-top: auto !important;
    margin-bottom: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
	}
	
  .yamatoya-intro-section .wp-block-column p { 
		font-size: 14px !important; text-align: center !important;
	}
}

/* --- ★横幅480px以下★ --- */
@media screen and (max-width: 480px) {
  /* 左右のイラストが入っているカラムを完全に非表示（画像なし）にする */
  .yamatoya-intro-section .wp-block-columns > .wp-block-column:nth-child(1) {
    display: none !important;
  }
  .yamatoya-intro-section .wp-block-columns > .wp-block-column:nth-child(3) {
    display: none !important;
  }

  /* 中央の文章が入っているカラムの幅を100%にして広く見せる */
  .yamatoya-intro-section .wp-block-columns > .wp-block-column:nth-child(2) {
    flex-basis: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  
  /* 文章の微調整 */
  .yamatoya-intro-section .wp-block-column p {
    font-size: 10.5px !important; /* 画像が消えた分、文字を少しだけ読みやすく調整 */
    line-height: 1.7 !important;
    text-align: center !important;
    width: 100% !important;
  }
}



/*---------------------------------
 ◆各ページタイトルの表示調整
　見出し1
---------------------------------*/
/* 1. 投稿・固定ページのタイトルをグレーにして消しておく */
.entry-title, 
h1.entry-title,
.archive-title {
    color: #999 !important;         /* グレーに設定 */
    opacity: 0;                     /* 最初は透明 */
    animation: titleFadeIn 1.2s ease-out forwards; /* 1.2秒でフェードイン */
}

/* 2. フェードインのアニメーション（ふわっと浮き上がる） */
@keyframes titleFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px); /* 10px下から開始 */
    }
    100% {
        opacity: 1;
        transform: translateY(0);    /* 定位置へ */
    }
}

/* 3. タイトル周りの不要な装飾（下線など）があれば消す */
.entry-title::after,
.entry-title::before {
    display: none !important;
}



/*-----------------------------------
 ◆見出し2

---------------------------------*/
/* 中見出し（h2）のデザインカスタマイズ */
.article h2 {
    background-color: transparent !important; /* 背景のグレーや青を消す */
    border-left: none !important;            /* 左側の太線を消す */
    border-bottom: 2px solid #67a67d !important; /* 下線を緑にする */
    padding: 0 0 10px 5px !important;        /* 文字の下に少し余白を作る */
    color: #333 !important;                  /* 文字の色を濃くする */
    font-weight: bold;                        /* 文字を太くする */
}




/* ==========================================
   ◆見出し❷　会社概要
　　my-company-h2 is-visible
   ========================================== */

.article h2.my-company-h2 {
    /* 既存の長い下線と装飾を完全にリセット */
    border-bottom: none !important;
    border-left: none !important;
    background: none !important;
    padding: 0 0 15px 0 !important;
    margin-left: 0 !important;
    text-align: left !important; /* 左寄せを強制 */
    
    /* テキスト設定 */
    color: #333 !important;
    font-size: 24px; /* モバイルサイズ */
    display: block;
    position: relative;
    
    /* アニメーション：左からスッと出てくる */
    opacity: 0;
    transform: translateX(-20px);
    animation: fadeInLeft 1.0s ease forwards;
}

/* 独自の短い下線を作成 */
.article h2.my-company-h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0; /* 左寄せに合わせて線の起点も左に */
    width: 40px; /* 線の長さ */
    height: 4px; /* 線の太さ */
    background-color: #67a67d !important; /* 指定の緑 */
    border-radius: 2px;
}

/* PC版のサイズ調整 */
@media (min-width: 768px) {
    .article h2.my-company-h2 {
        font-size: 40px !important; /* PCでは大きく */
        padding-bottom: 20px !important;
    }
    .article h2.my-company-h2::after {
        width: 60px; /* PCでは線を少し長く */
    }
}

/* アニメーションの定義（左からスライド） */
@keyframes fadeInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}



/* カテゴリー一覧の見出しのみ非表示 */
.archive-title {
    display: none !important;
}


/*---------------------------------
 ◆会社概要テーブル　★モバイル
　thのみ下線消した

---------------------------------*/
@media screen and (max-width: 769px) {
    /* th（項目名）の線を消して、下の余白も詰める */
    .wp-block-flexible-table-block-table th {
        border: none !important;
        padding-bottom: 0 !important;
    }
}



/* ==========================================
   ◆ヘッダー
　　お問い合わせボタンカスタム
   ========================================== */
@media screen and (min-width: 1024px) {

  /* 1. ロゴとメニューエリアを横並びにして、高さを完全に中央揃えにする */
  #header-container-in {
    display: flex !important;
    justify-content: space-between !important; /* 左にロゴ、右にメニュー */
    align-items: center !important;             /* 上下のズレをなくし中央に固定 */
    max-width: 1200px !important;            /* 全体の最大幅 */
    margin: 0 auto !important;
    padding: 20px 20px !important;           /* 上下のゆったりした余白 */
  }

  /* 2. メニューバー自体の余計な幅制限や背景を完全に解除し、一列にする */
  #navi {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    width: auto !important;                  
    max-width: none !important;
    height: auto !important;
    flex-grow: 1 !important;                 /* メニューエリアを右側に押し出す */
    display: flex !important;
    justify-content: flex-end !important;    /* 全メニューを右端に寄せる */
  }

  .navi-in {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    width: auto !important;                  
    max-width: none !important;
    height: auto !important;
  }

  /* 3. メニュー項目を横並びにして縦中央に揃える（絶対に折り返さない） */
  .menu-top {
    display: flex !important;
    flex-wrap: nowrap !important;            /* 絶対に二段に折り返させない */
    align-items: center !important;             /* メニュー項目同士の高さを揃える */
    gap: 15px !important;                    /* 項目同士の間隔 */
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    height: auto !important;
    width: auto !important;
  }

  /* 4. 各メニューの文字装飾 */
  .menu-top li {
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
  }

  .menu-top li a {
    font-size: 15px !important;
    font-weight: bold !important;
    color: #333333 !important;                /* 通常時の文字色（黒） */
    padding: 10px 15px !important;
    position: relative !important;
    display: inline-block !important;
    height: auto !important;
    line-height: 1.2 !important;              
    transition: color 0.3s ease !important;
  }

  /* ★【修正】通常時はホームも含めて文字色は黒、線は非表示。マウスを乗せたときだけ文字を緑に */
  .menu-top li a:hover {
    color: var(--yamatoya-key-color) !important;
  }

  /* 下線アニメーションの土台を作る（初期状態は中央に縮んで透明） */
  .menu-top li a::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    bottom: -2px !important;                 /* 下線の位置 */
    left: 15px !important;                   /* 文字幅に合わせる */
    right: 15px !important;                  
    height: 2.5px !important;               /* 線の太さ */
    background-color: var(--yamatoya-key-color) !important; /* 緑色の線 */
    border-radius: 2px !important;
    transform: scaleX(0) !important;        /* 横幅を0にして隠す */
    transition: transform 0.3s ease !important; /* 0.3秒かけて伸びる設定 */
  }

  /* ★【修正】マウスを乗せた（ホバーした）ときだけ、線を左右に100%伸ばす（常時表示を廃止） */
  .menu-top li a:hover::after {
    transform: scaleX(1) !important;        /* 線を元の幅まで広げる */
  }

  /* 5. ★右端の「お問い合わせ」ボタンの枠線デザイン★ */
  .menu-top li.header-btn-contact {
    margin-left: 15px !important;             
    flex-shrink: 0 !important;               /* ボタンが絶対に潰れないようにする */
  }

  .menu-top li.header-btn-contact a {
    border: 1.5px solid var(--yamatoya-key-color) !important; /* 緑の枠線 */
    border-radius: 6px !important;            
    padding: 12px 24px 12px 46px !important;  
    color: var(--yamatoya-key-color) !important;    /* 文字色も緑 */
    background: transparent !important;
    display: flex !important;
    align-items: center !important;           
    transition: all 0.3s ease !important;
  }

  /* お問い合わせボタンの中に「メールアイコン」を自動挿入 */
  .menu-top li.header-btn-contact a::before {
    content: "\f0e0" !important;             
    font-family: "Font Awesome 5 Free", sans-serif !important;
    font-weight: 400 !important;
    position: absolute !important;
    left: 20px !important;                    
    top: 50% !important;
    transform: translateY(-50%) !important;   
    font-size: 16px !important;
    color: var(--yamatoya-key-color) !important;
    transition: color 0.3s ease !important;
  }

  /* ボタンにマウスを乗せたときは、背景が緑・文字が白に反転 */
  .menu-top li.header-btn-contact a:hover {
    background-color: var(--yamatoya-key-color) !important;
    color: #ffffff !important;
  }

  .menu-top li.header-btn-contact a:hover::before {
    color: #ffffff !important;                
  }
  
  /* お問い合わせボタン自体には下線が出ないようにリセット */
  .menu-top li.header-btn-contact a::after,
  .menu-top li.header-btn-contact a:hover::after {
    display: none !important;
  }
}



/* ==========================================
   ◆スライドインメニュー

   ========================================== */
/* メニューの背景（引き出し部分） */
.navi-menu-content {
    background-color: rgba(255, 255, 255, 0.98) !important; /* 真っ白に近い透過 */
    width: 80% !important;        /* 横幅を少し抑える */
    max-width: 320px !important;
    box-shadow: -5px 0 15px rgba(0,0,0,0.05); /* 軽い影で立体感を出す */
}

/* メニュー内のリスト項目 */
.navi-menu-content ul li a {
    color: #444 !important;       /* 文字は濃いグレー */
    font-size: 16px !important;
    font-weight: bold;
    padding: 15px 20px !important;
    border-bottom: 1px solid #eee !important; /* 項目間の細い線 */
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

/* リンクの左側に緑のアクセントを入れる（ホバー時） */
.navi-menu-content ul li a:hover {
    color: #67a67d !important;    /* 文字を緑に */
    background-color: #f9fbf9 !important; /* ほんのり緑背景 */
    padding-left: 25px !important; /* 少し右にスライドさせる演出 */
}

/* メニューの背景（暗くなる部分） */
.menu-overlay {
    background-color: rgba(0, 0, 0, 0.4) !important; /* 背景を少し暗く */
}


/*---------------------------------
 ◆スライドインメニュー（右から出す設定）
---------------------------------*/
/* メニュー本体を右側に固定 */
.navi-menu-content {
    left: auto !important;        /* 左固定を解除 */
    right: 0 !important;         /* 右に固定 */
    transform: translateX(100%); /* 最初は右側に隠しておく */
    transition: transform 0.4s ease-in-out !important;
}

/* メニューが開いている時の状態 */
.menu-open .navi-menu-content {
    transform: translateX(0) !important; /* 右からスライドして戻ってくる */
}

/* 閉じるボタン（✕）をメニュー内の左上に配置（右メニューなので左側にあった方が押しやすい） */
.navi-menu-close-button {
    justify-content: flex-start !important;
    padding-left: 20px !important;
}


/*--------------------------------
 ◆スライドインメニュー
　アイコン●に調整
------------------------------*/
.mobile-menu-buttons li a {
    color: #67a67d !important;
    font-weight: bold;
}

/* アイコンに薄い背景の丸をつける */
.mobile-menu-buttons i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;      /* アイコン背景の幅 */
    height: 40px;     /* アイコン背景の高さ */
    background-color: #f0f7f3; /* キーカラーの非常に薄い色 */
    border-radius: 50%;       /* 丸くする */
    margin-right: 15px;       /* 文字との間隔 */
    color: #67a67d;           /* アイコンの色 */
}

/* 矢印（>）の色と配置 */
.mobile-menu-buttons li a::after {
    color: #67a67d;
    font-weight: bold;
    margin-left: auto; /* 右端に寄せる */
}

/* 境界線の色を少し薄くする */
.mobile-menu-buttons li {
    border-bottom: 1px solid #e0e0e0 !important;
}


/*---------------------------------
 ★モバイル　480以下 ---
---------------------------------*/
@media screen and (max-width: 480px) {
    /* リンク全体の設定：文字サイズをさらに小さく */
    .mobile-menu-buttons li a {
        font-size: 13px !important; /* 14px→13pxへ */
        padding: 8px 12px !important; /* 余白を詰める */
        white-space: nowrap !important; /* 強制一列 */
        overflow: hidden !important;
    }

    /* アイコンの設定：さらに小さく */
    .mobile-menu-buttons i {
        width: 28px !important;  /* 32px→28pxへ */
        height: 28px !important;
        margin-right: 8px !important;
        font-size: 12px !important; /* アイコン自体も小さく */
        flex-shrink: 0; /* アイコンが縮まないように固定 */
    }

    /* 矢印（>）の調整 */
    .mobile-menu-buttons li a::after {
        font-size: 12px !important;
        margin-left: auto;
    }
}



/*---------------------------------
 ◆ハンバーガーボタン（ヘッダーのみに限定）

---------------------------------*/
/* ヘッダーのボタンだけを対象にするため .mobile-header-menu-buttons を前につける */

.mobile-header-menu-buttons .navi-menu-button .menu-caption {
    display: none !important;
}

.mobile-header-menu-buttons .navi-menu-button {
    position: relative !important;
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
}

.mobile-header-menu-buttons .navi-menu-button .menu-icon {
    font-size: 0 !important;
    position: relative !important;
    width: 25px !important;
    height: 20px !important;
    display: block !important;
    margin: 0 auto !important;
}

.mobile-header-menu-buttons .navi-menu-button .menu-icon::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    width: 100% !important;
    height: 1px !important;
    background-color: #333 !important;
    transform: translateY(-50%) !important;
    opacity: 0.5 !important;
    box-shadow: 
        0 -10px 0 0 #333, 
        0 10px 0 0 #333;
}


/*-----------------------------------
 ◆✕ボタン：極細・中央配置・アニメーション

-----------------------------------*/

/* 閉じるボタンのコンテナ（右上に固定） */
.navi-menu-close-button {
    position: absolute !important; /* 右上に配置 */
    top: 15px !important;
    right: 15px !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    z-index: 1000;
}

/* ✕の線の設定 */
.navi-menu-close-button .fa-close,
.navi-menu-close-button .fa-times {
    width: 25px !important;
    height: 25px !important;
    position: relative !important;
}

/* 線の形状を最適化 */
.navi-menu-close-button .fa-close::before,
.navi-menu-close-button .fa-close::after,
.navi-menu-close-button .fa-times::before,
.navi-menu-close-button .fa-times::after {
    content: "" !important;
    position: absolute !important;
    top: 12px !important; /* 中心に合わせる */
    left: 0 !important;
    width: 25px !important;
    height: 1.5px !important; /* 少しだけ太くして見やすく */
    background-color: #333 !important;
    border-radius: 2px;
}

/* 角度調整 */
.navi-menu-close-button .fa-close::before,
.navi-menu-close-button .fa-times::before {
    transform: rotate(45deg) !important;
}
.navi-menu-close-button .fa-close::after,
.navi-menu-close-button .fa-times::after {
    transform: rotate(-45deg) !important;
}

/* リストとの間隔を空けるための調整 */
.navi-menu-content {
    padding-top: 60px !important; /* ボタンの下に余裕を持たせる */
}


/*---------------------------------
 ◆ヘッダー　上余白

---------------------------------*/
/* 画面幅1024px以上（PC版）だけに適用 */
@media screen and (min-width: 1024px) {
    /* ヘッダー全体の上の余白 */
    .header-container {
        padding-top: 25px !important; /* ★ここの数字でPC版の余白を調整 */
    }
}


/*---------------------------------
 ★モバイル　ヘッダーロゴ左寄せ

---------------------------------*/
@media screen and (max-width: 1023px) {
  /* 1. 親のリスト：ボタンを均等に並べる設定を完全に解除 */
  ul.mobile-header-menu-buttons {
    display: flex !important;
    justify-content: space-between !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 2. ロゴボタンの土台：幅を自由に、余白をゼロに */
  li.logo-menu-button {
    flex: 0 0 auto !important; /* 均等割りを解除 */
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3. ボタンの内側の枠（ここが紫色の余白の正体です）：余白を完全に抹殺 */
  li.logo-menu-button .menu-button-in,
  li.logo-menu-button a {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    display: block !important;
  }

  /* 4. ロゴ画像：左端に密着させ、サイズを固定 */
  li.logo-menu-button img {
    display: block !important;
    margin-left: 0 !important;
    height: 75px !important; /* ←ここで高さを指定（お好みで調整） */
    width: auto !important;
    max-width: none !important;
  }

  /* 5. 右側の三本線メニュー：右端へ追いやる */
  li.menu-button:not(.logo-menu-button) {
    margin-left: auto !important;
    flex: 0 0 60px !important;
  }
}

/*---------------------------------
★モバイル　メイン画像　削除

---------------------------------- モバイル（1023px以下）でロゴを完全に消す */
@media screen and (max-width: 1023px) {
    /* ロゴ画像そのものと、ロゴを囲むリンク・文字をすべて指定 */
    .header-logo, 
    .logo-header, 
    .site-name-text, 
    .logo-header img {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* ヘッダー内部の余白もリセット */
    .header-in {
        min-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}
/*-----------------------------------
★モバイル　メイン画像の下余白削除

-----------------------------------*/
@media screen and (max-width: 1023px) {
    /* アピールエリア全体の余白をゼロに */
    #appeal {
        margin: 0 !important;
        padding: 0 !important;
    }
    /* 中身のコンテンツの余白もゼロに */
    .appeal-in, .appeal-content {
        padding: 0 !important;
        min-height: 0 !important;
    }
}


/*---------------------------------
 ◆パンくずリストの表示制御

---------------------------------*/
/* 記事本文の下（フッター直前）にあるパンくずリストだけを消す */
.pbp-main-bottom {
    display: none !important;
}


/* 1. ページ上部のパンくずは表示する */
.breadcrumb {
    display: block !important;
}

/* 2. ページ下部（フッター直前）のパンくずだけをピンポイントで消す */
/* Cocoonの仕様に合わせた指定です */
.pbp-main-bottom,
.bread-bottom,
#main > div.breadcrumb.bread-bottom {
    display: none !important;
}

/* 3. もし記事一覧のカード内のアイコンを消したい場合はこれだけ残す */
.breadcrumb-item .fa, 
.breadcrumb-item .fas, 
.breadcrumb-item i,
.breadcrumb-item svg {
    display: none !important;
}


/*---------------------------------
 ◆ページ最下部の隙間・余白を完全削除

---------------------------------*/

/* 1. 記事コンテンツ・メインエリアの余白を強制ゼロ */
.article, 
.entry-content, 
#main, 
#content, 
#container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. 本文内の「最後に来る要素」の余白を抹殺 */
.entry-content > *:last-child {
    margin-bottom: 0 !important;
}

/* 3. カバーブロック（ニュース等）自体の下余白を消す */
.wp-block-cover.has-parallax.full-wide-screen {
    margin-bottom: 0 !important;
}

/* 4. ブロックの下に勝手に作られる「空の段落」を非表示にする */
.wp-block-cover__inner-container + p,
.wp-block-cover + p,
.entry-content > p:empty {
    display: none !important;
}

/* 5. テーマが自動挿入する擬似要素(::after)の隙間を消す */
.entry-content::after {
    display: none !important;
    content: none !important;
}

/* 6. フッターを隙間なく連結させる */
#footer {
    margin-top: 0 !important;
    border-top: none !important;
}

/* 7. コンテナの背景を透過して色の境目をなくす */
#container {
    background-color: transparent !important;
}


/*-----------------------------------
 ◆サイト一番下の隙間削除

-----------------------------------*/
.main {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}


/*-----------------------------------
 ◆アピールエリア
---------------------------------*/
/* アピールエリアの背景色・透明度を無視して「透明」にする */
.appeal {
    background-color: transparent !important; /* 背景を透明に */
    background-image: none !important;        /* 背景画像を強制消去 */
}

/* スライダーを置く中身の余白もゼロにする */
.appeal-in {
    background-color: transparent !important;
    padding: 0 !important;
}

/* 指定したブロックだけを全幅にする魔法のコード */
.full-wide-screen {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: none !important;
}