@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;
}

/* ---- 834px以下 ---- */
@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;
  }
}

/* ---- 480px以下 ---- */
@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;
}

/* 発注用ボタンのデザイン */
.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;
}

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

  /* FAXグループ全体をスリムにする */
  .fax-download-box {
    padding: 15px !important;
    gap: 10px !important;
    text-align: center !important;
  }

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

  /* ボタンの調整（幅を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;
}

/* ---- 481px以上 ---- */
@media screen and (min-width: 481px) {
  .wpcf7-submit {
    width: 300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ---- 480px以下 ---- */
@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;
}

/* ウィジェットパーツ自体が持つ下余白などを強制ゼロにする */
#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-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;
}

/* ---- 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;
  }

  /* ---- 1240px以下 ---- */
  @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: 1024px) {
  .yf-pc-contact-bar {
    display: none !important;
  }
}

.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;
}

/* ---- 1023px以下 ---- */
@media screen and (max-width: 1023px) {
  .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;
    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;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  .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-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-bottom: 0 !important;
  }

  .yamatoya-banner-section .yamatoya-responsive-banner {
    max-width: 100% !important;
  }

  .yamatoya-banner-section .yamatoya-responsive-banner img {
    border-radius: 4px !important;
  }
}


/* ============================================================
   ■ やまとやの強み
   ============================================================ */
/* セクション全体の背景と上下余白 */
.yamatoya-features-section {
  background-color: #eaf6ed !important;
  padding: 60px 20px !important;

  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;
}

/* 白いカードの立体感と余白のデザイン */
.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;
  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;
  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列にするためのカラム幅計算 */
  .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) {
  /* 画面が狭いときは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: 50px !important;
  }
  .home #content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 3. ホーム以外のすべてのページの最上部に余白を強制確保 */
  body:not(.home) #content,
  body:not(.home) main,
  body:not(.home) .main-container {
    padding-top: 60px !important;
    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;
  }

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

  /* アイコン画像の高さと底上げをキャンセル */
  .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;
  }
}

/* --- 481px〜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;
}

/* 2. フェードインアニメーション */
@keyframes titleFadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

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


/* ============================================================
   ■ 見出し2
   ============================================================ */
.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;
    padding-bottom: 20px !important;
  }
  .article h2.my-company-h2::after {
    width: 60px;
  }
}

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

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


/* ============================================================
   ■ 会社概要テーブル（モバイル）
   thのみ下線消した
   ============================================================ */
@media screen and (max-width: 769px) {
  .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;
    transition: transform 0.3s ease !important;
  }

  /* ホバー時のみ線を左右に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;
}

/* ---- モバイル 480px以下 ---- */
@media screen and (max-width: 480px) {
  .mobile-menu-buttons li a {
    font-size: 13px !important;
    padding: 8px 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .mobile-menu-buttons i {
    width: 28px !important;
    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;
  }
}


/* ============================================================
   ■ ハンバーガーボタン（右寄せ・2本線・#333固定）
   ============================================================ */
/* 1. 不要なテキストや独立した閉じるボタンを非表示 */
.mobile-header-menu-buttons .navi-menu-button .menu-caption,
.navi-menu-close-button,
.fa-close,
.fa-times {
  display: none !important;
}

/* 2. ボタン枠（最前面に配置） */
.mobile-header-menu-buttons .navi-menu-button,
#navi-menu-open {
  position: fixed !important;
  top: 5px !important;
  right: 15px !important;
  left: auto !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  z-index: 999999 !important;
  cursor: pointer;
}

/* 3. ハンバーガー線の基本設定（中央線は透明） */
.mobile-header-menu-buttons .navi-menu-button .menu-icon {
  position: relative !important;
  display: block !important;
  width: 24px;
  height: 1px !important;
  background-color: transparent !important;
  font-size: 0 !important;
  transition: background-color 0.35s ease;
}

/* 2本線（上下の線）の設定 */
.mobile-header-menu-buttons .navi-menu-button .menu-icon::before,
.mobile-header-menu-buttons .navi-menu-button .menu-icon::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  width: 100% !important;
  height: 1px !important;
  background-color: #333333 !important;
  transition: transform 0.35s ease, top 0.35s ease;
}

/* 通常時：上下の線の位置 */
.mobile-header-menu-buttons .navi-menu-button .menu-icon::before {
  width: 24px !important;
  top: -5px !important;
}

.mobile-header-menu-buttons .navi-menu-button .menu-icon::after {
  width: 16px !important;
  top: 5px !important;
}

/* --- メニューが開いた時（checked）の「✕」アニメーション --- */
/* 上の線を「／」に回転 */
#navi-menu-input:checked ~ .mobile-header-menu-buttons .navi-menu-button .menu-icon::before,
#navi-menu-input:checked ~ #navi-menu-open .menu-icon::before {
  width: 28px !important;
  top: 0 !important;
  transform: rotate(45deg) !important;
  background-color: #333333 !important;
}

/* 下の線を「＼」に回転 */
#navi-menu-input:checked ~ .mobile-header-menu-buttons .navi-menu-button .menu-icon::after,
#navi-menu-input:checked ~ #navi-menu-open .menu-icon::after {
  width: 28px !important;
  top: 0 !important;
  transform: rotate(-45deg) !important;
  background-color: #333333 !important;
}

/* --- スライドメニュー本体 --- */
#navi-menu-content,
.navi-menu-content,
.mobile-navi-array {
  z-index: 99990 !important;
  padding-top: 70px !important;
}


/* ============================================================
   ■ ヘッダー 上余白
   ============================================================ */
@media screen and (min-width: 1024px) {
  .header-container {
    padding-top: 25px !important;
  }
}


/* ============================================================
   ■ モバイル：ヘッダーロゴ左寄せ
   ============================================================ */
@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;
  }
}


/* ============================================================
   ■ モバイル：メイン画像（ロゴ）削除
   ============================================================ */
@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. ページ下部（フッター直前）のパンくずだけをピンポイントで消す */
.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;
}


/* ============================================================
   ■ プライバシーポリシー（見出し3）
   ============================================================ */
.policy-page h3 {
  border-top: none !important;
  border-bottom: none !important;
  border-right: none !important;
  border-left: 5px solid #5d7a54 !important; /* 左の線だけ残す */
  background: none !important;
  background-color: transparent !important;
  padding: 5px 0 5px 15px !important;
  font-size: 1.25em !important;
  margin-top: 40px !important;
  margin-bottom: 20px !important;
  line-height: 1.4 !important;
}


/* ============================================================
   ■ 取引先紹介のリスト全体
   ============================================================ */
.sec-partners ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sec-partners li {
  border-bottom: 1px solid #e8e8e8;
  padding: 15px 0;
  display: flex;
  align-items: center;
  font-size: 16px;
}

.sec-partners li::before {
  content: "●";
  color: #5d7a54;
  margin-right: 15px;
  font-size: 8px;
  flex-shrink: 0;
}

.sec-partners a {
  text-decoration: none;
  color: #333;
  display: block;
  width: 100%;
  transition: 0.3s;
}

.sec-partners a:hover {
  color: #5d7a54;
  opacity: 0.7;
}


/* ============================================================
   ■ モバイルフッター下の余白削除
   ============================================================ */
.footer-mobile,
#footer-in .footer-mobile {
  padding: 0 !important;
  margin: 0 !important;
}

.footer-widgets-mobile {
  padding: 0 !important;
  margin: 0 !important;
}


/* ============================================================
   ■ PC版・下層ページ：コンテンツが少ないときに
   フッターを一番下に固定する
   ============================================================ */
html,
body {
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#container,
.site-container {
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
}

#content {
  flex: 1 0 auto !important;
}

#footer,
footer {
  flex-shrink: 0 !important;
}


/* ============================================================
   ■ スライダー下の隙間を消す
   ============================================================ */
#appeal,
.appeal-container,
#content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

#main,
main.main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}


/* ============================================================
   ■ 左画面はみだしの削除
   ============================================================ */
html,
body {
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}

.main-container {
  overflow: hidden;
}


/* ============================================================
   ■ 代表挨拶セクション（アニメーション付き）
   yamatoya-greeting-container / yamatoya-greeting-text
   ============================================================ */
.yamatoya-greeting-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 60px;
  align-items: center;
  overflow: hidden;
}

.yamatoya-greeting-container .wp-block-image {
  width: 100% !important;
  max-width: 400px;
  margin: 0 !important;

  opacity: 0;
  transform: translateX(-40px);
  animation: greetingFadeIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.yamatoya-greeting-text {
  width: 100%;
  flex: 1;

  opacity: 0;
  transform: translateX(40px);
  animation: greetingFadeIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

@keyframes greetingFadeIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.yamatoya-greeting-container .wp-block-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.yamatoya-greeting-text p:first-of-type {
  font-size: 1.15rem;
  font-weight: bold;
  color: #67a67d;
  line-height: 1.6;
  margin-bottom: 25px;
}

.yamatoya-greeting-text p {
  font-size: 16px;
  line-height: 1.9;
  color: #444;
}

.yamatoya-greeting-signature {
  text-align: right !important;
  margin-top: 30px;
  font-weight: bold;
  font-size: 1.2rem;
  color: #333;
}

/* ---- モバイル版（767px以下） ---- */
@media (max-width: 767px) {
  .yamatoya-greeting-container .wp-block-image,
  .yamatoya-greeting-text {
    transform: translateY(30px);
  }
  @keyframes greetingFadeIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ---- PC版（768px以上） ---- */
@media (min-width: 768px) {
  .yamatoya-greeting-container {
    flex-direction: row;
    align-items: center;
    gap: 60px;
  }
  .yamatoya-greeting-container .wp-block-image {
    max-width: 45%;
  }
}


/* ============================================================
   ■ カテゴリー名のタイトルを非表示にする
   ============================================================ */
.archive-title {
  display: none !important;
}

.archive-header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


/* ============================================================
   ■ カテゴリ（中身）：見出しサイズ、ラベル削除
   ============================================================ */
.entry-card-wrap:hover .entry-card-thumb img {
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.entry-card-wrap:hover {
  background-color: transparent !important;
}

.archive-title .fa,
.archive-title .fas,
.archive-title .far,
.archive-title .fal,
.archive-title .fab,
.archive-title i,
.archive-title svg {
  display: none !important;
}

.breadcrumb-item .fa,
.breadcrumb-item .fas,
.breadcrumb-item i,
.breadcrumb-item svg {
  display: none !important;
}

.card-caption,
.cat-label {
  display: none !important;
}

.entry-card-category,
.category-label {
  display: none !important;
}

/* ---- モバイル：文字を一括で小さく（1024px以下） ---- */
@media screen and (max-width: 1024px) {
  .archive-title {
    font-size: 20px !important;
    padding: 15px 10px !important;
    margin-bottom: 0px !important;
    padding-bottom: 5px !important;
  }

  .entry-card-title,
  .widget-entry-card-title,
  .popular-entry-card-title {
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-top: 5px !important;
  }

  .breadcrumb {
    font-size: 12px !important;
    margin-bottom: 10px !important;
  }
}

/* ---- さらに小さいスマホ（600px以下） ---- */
@media screen and (max-width: 600px) {
  .archive-title {
    font-size: 16px !important;
  }
  .entry-card-title {
    font-size: 11px !important;
  }
}


/* ============================================================
   ■ カテゴリ（中身）：小さく表示・横並び
   ============================================================ */
#main .entry-card-wrap.vertical-card {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 8px !important;
}

#main .entry-card-wrap.vertical-card a.entry-card-link {
  flex: 0 0 calc(25% - 8px) !important;
  max-width: calc(25% - 10px) !important;
  min-width: 0 !important;
  margin: 0 0 15px 0 !important;
  border: none !important;
}

.entry-card-thumb {
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
}

.entry-card-thumb img {
  width: 100% !important;
  max-height: 110px !important;
  object-fit: contain !important;
}

.entry-card-title {
  font-size: 11px !important;
  text-align: center !important;
  line-height: 1.2 !important;
  margin: 4px 0 !important;
}

.entry-card-content {
  padding: 0 !important;
}

/* ---- モバイル：2列にする（480px以下） ---- */
@media screen and (max-width: 480px) {
  #list.list.ect-vertical-card-3 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    padding: 5px !important;
    gap: 10px 0 !important;
  }

  #list.list a.entry-card-wrap {
    flex: 0 0 48% !important;
    width: 48% !important;
    max-width: 48% !important;
    margin: 0 0 15px 0 !important;
    float: none !important;
  }

  .entry-card-thumb {
    width: 100% !important;
    height: auto !important;
  }

  .entry-card-thumb img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .entry-card-title {
    font-size: 12px !important;
    padding: 0 5px !important;
  }
}


/* ============================================================
   ■ カテゴリ（ホーム）：小さく表示・横並び
   ============================================================ */
.popular-list-box .swiper-slide {
  flex: 0 0 calc(20% - 10px) !important;
  max-width: calc(20% - 10px) !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

.popular-list-box .entry-card-thumb {
  width: 100% !important;
  height: 160px !important;
  background: #f0f0f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
}

.popular-list-box .entry-card-thumb img {
  width: auto !important;
  height: auto !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;

  position: static !important;
  transform: none !important;
  min-width: 0 !important;
  min-height: 0 !important;

  image-rendering: -webkit-optimize-contrast !important;
}

.popular-list-box .entry-card-title {
  font-size: 11px !important;
  text-align: center !important;
  margin-top: 8px !important;
  line-height: 1.3 !important;
}

/* ---- 480px以下 ---- */
@media screen and (max-width: 480px) {
  .popular-entry-card-title,
  .entry-card-title,
  .widget-entry-card-title {
    font-size: 10px !important;
    line-height: 1.2 !important;
    margin-top: 3px !important;
    white-space: normal !important;
  }

  .popular-entry-card-content,
  .entry-card-content {
    padding: 2px !important;
  }
}


/* ============================================================
   ■ 緑ボタン：すべて表示
   ============================================================ */
.wp-block-buttons.search-button-green.is-content-justification-right {
  margin-left: auto !important;
  margin-right: 0 !important;
  width: fit-content;
  justify-content: flex-end;
}

.search-button-green {
  justify-content: flex-end !important;
  display: flex !important;
  margin: 10px 0 !important;
}

.search-button-green a.wp-block-button__link {
  background: #67a67d !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 6px 16px !important;
  font-size: 13px !important;
  border-radius: 0 !important;
  white-space: nowrap !important;
}

.search-button-green a.wp-block-button__link::before {
  content: "" !important;
  width: 15px !important;
  height: 1px !important;
  background-color: #ffffff !important;
  margin-right: 10px !important;
  display: inline-block !important;
}

.search-button-green a.wp-block-button__link:hover {
  background-color: #568c6a !important;
  opacity: 0.9 !important;
}

/* ---- 480px以下 ---- */
@media screen and (max-width: 480px) {
  .search-button-green {
    margin: 5px 0 !important;
  }

  .search-button-green a.wp-block-button__link {
    padding: 4px 12px !important;
    font-size: 11px !important;
  }

  .search-button-green a.wp-block-button__link::before {
    width: 10px !important;
    margin-right: 6px !important;
  }
}


/* ============================================================
   ■ ＜＞矢印（緑）
   ============================================================ */
.popular-list-box .swiper-container {
  padding-bottom: 50px !important;
}

.popular-list-box .swiper-button-prev,
.popular-list-box .swiper-button-next {
  background: none !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  top: auto !important;
  bottom: 5px !important;
  position: absolute !important;
  margin: 0 !important;
  z-index: 10 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.popular-list-box .swiper-button-prev::after,
.popular-list-box .swiper-button-next::after {
  content: "" !important;
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  border-top: 2px solid #67a67d !important;
  border-right: 2px solid #67a67d !important;
}

.popular-list-box .swiper-button-prev {
  left: 10px !important;
  transform: rotate(0deg) !important;
}
.popular-list-box .swiper-button-prev::after {
  transform: rotate(-135deg) !important; /* 左向き */
}

.popular-list-box .swiper-button-next {
  left: 50px !important;
  right: auto !important;
}
.popular-list-box .swiper-button-next::after {
  transform: rotate(45deg) !important; /* 右向き */
}

/* ---- 480px以下 ---- */
@media screen and (max-width: 480px) {
  .popular-list-box .swiper-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  .popular-list-box a.swiper-slide {
    flex: 0 0 calc(25% - 5px) !important;
    width: calc(25% - 5px) !important;
    max-width: calc(25% - 5px) !important;
    margin-right: 5px !important;
    box-sizing: border-box !important;
  }

  .popular-list-box .entry-card-thumb {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  .popular-list-box .swiper-slide:last-child {
    margin-right: 0 !important;
  }
}

@media screen and (max-width: 480px) {
  .popular-list-box .swiper-container {
    padding-bottom: 80px !important;
  }

  .popular-list-box .swiper-button-prev,
  .popular-list-box .swiper-button-next {
    top: auto !important;
    bottom: -15px !important;
    width: 40px !important;
    height: 40px !important;
  }

  .popular-list-box .swiper-button-prev {
    left: 0px !important;
  }

  .popular-list-box .swiper-button-next {
    left: 40px !important;
    right: auto !important;
  }
}


/* ============================================================
   ■ モバイル3枚表示 ＋ 下の余白確保
   ============================================================ */
@media screen and (max-width: 794px) {
  .popular-list-box .swiper-container,
  .popular-list-box .swiper {
    padding-bottom: 0px !important;
    overflow: visible !important;
    height: auto !important;
  }

  .popular-list-box .swiper-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
  }
  .popular-list-box a.swiper-slide {
    flex: 0 0 calc(33.3% - 8px) !important;
    width: calc(33.3% - 8px) !important;
    max-width: calc(33.3% - 8px) !important;
    margin-right: 8px !important;
  }

  .popular-list-box .swiper-button-prev,
  .popular-list-box .swiper-button-next {
    top: auto !important;
    bottom: -20px !important;
    position: absolute !important;
    width: 40px !important;
    height: 40px !important;
    z-index: 9999 !important;
  }

  .popular-list-box .swiper-button-prev {
    left: 0 !important;
  }

  .popular-list-box .swiper-button-next {
    left: 45px !important;
    right: auto !important;
  }
}


/* ============================================================
   ■ ホバー（全体の全リンク）
   ============================================================ */
a:hover,
.wpcf7-submit:hover,
.search-button-green input:hover,
.tab-label:hover {
  opacity: 0.7 !important;
  text-decoration: none !important;
  transition: opacity 0.3s ease;

  background-color: inherit;
  color: inherit;
}

a:hover img {
  opacity: 0.7 !important;
  transition: opacity 0.3s ease;
}

a:hover img,
.entry-card-thumb a:hover,
.related-entry-card-thumb a:hover {
  background-color: transparent !important;
  opacity: 0.7 !important;
  transition: opacity 0.3s ease;
}

a:hover {
  background-color: transparent !important;
}

.search-button-green input:hover {
  background-color: #67a67d !important;
  opacity: 0.8 !important;
}

a[style*="background-color:#f5a691"] {
  background-color: #f5a691 !important;
  display: inline-block !important;
}

a[style*="background-color:#f5a691"]:hover {
  background-color: #f5a691 !important;
  opacity: 0.8 !important;
  color: #ffffff !important;
}

a[style*="background-color:#f5a691"] * {
  background: none !important;
}


/* ============================================================
   ■ 商品ページ：タブ（色 緑）
   ============================================================ */
.tab-block.cocoon-block-tab,
.tab-content-group {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tab-label-group {
  background: transparent !important;
  border-bottom: 2px solid #eee !important;
  margin-bottom: 20px !important;
  display: flex !important;
}

.tab-label-group .tab-label {
  background: transparent !important;
  border: none !important;
  color: #666 !important;
  padding: 10px 20px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  font-weight: normal !important;
  position: relative !important;
}

.tab-label-group .tab-label.is-active {
  background: transparent !important;
  color: #67a67d !important;
  font-weight: bold !important;
}

.tab-label-group .tab-label.is-active::after {
  content: "" !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 100% !important;
  height: 3px !important;
  background-color: #67a67d !important;
}