@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){
  /*必要ならばここにコードを書く*/
}


/* ===== PC：ヘッダー・フッターをコンテンツ幅（1256px）に揃える ===== */
@media (min-width: 768px) {
  /* ヘッダーコンテナを1000px中央揃え */
  .header-container-in {
    max-width: 1256px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    padding: 0 !important;
  }
  /* ヘッダー上下の余白 */
  #header-container {
    padding-top: 32px !important;
    padding-bottom: 0px !important;
  }
  /* ロゴ：縮まないように固定 */
  #header {
    flex-shrink: 0 !important;
    width: auto !important;
  }
  /* ナビ：残りスペースを使って右端に配置 */
  #navi {
    flex: 1 !important;
    min-width: 0 !important;
  }
  #navi-in {
    width: 100% !important;
  }
  /* メニューを1行に収める */
  ul.menu-header {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  ul.menu-header > li {
    width: auto !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  ul.menu-header > li > a {
    padding: 8px 16px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }
  /* フッター */
  #footer-in {
    max-width: 1256px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }
  #footer-bottom {
    max-width: 1256px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }
}
/* ===== ここまで ===== */


/* ===== バナースロットを最下部に移動 ===== */
.kth-wrap {
  display: flex !important;
  flex-direction: column !important;
}
/* バナースロットを末尾に */
.kt-banner-slot {
  order: 99 !important;
}
/* 空のバナースロットは非表示 */
.kt-banner-slot.kt-banner-empty {
  display: none !important;
}
/* セクション順序 */
.kth-hero-badge-row { order: 1 !important; }
.kth-hero           { order: 2 !important; }
/* ヒーロー下バッジdiv（クラスなしのdiv） */
.kth-wrap > div:not(.kth-hero):not(.kth-hero-badge-row):not(.kt-banner-slot) { order: 25 !important; }
.kth-section        { order: 30 !important; }
/* ===== ここまで ===== */


/* ===== ヒーロー外バッジ行を非表示 ===== */
.kth-wrap > .kth-hero-badge-row {
  display: none !important;
}

/* ヒーロー：幅全画面・角丸なし対応 */
@media (min-width: 768px) {
  .kth-wrap {
    overflow: visible !important;
  }
  .kth-hero {
    border-radius: 0 !important;
    width: 100vw !important;
    margin-left: calc((100% - 100vw) / 2) !important;
    margin-right: calc((100% - 100vw) / 2) !important;
    max-width: 100vw !important;
    padding: 20px 10px 10px !important;
  }
}

/* ヘッダーに♡お気に入り一覧ボタン（PCのみ） */
@media (min-width: 768px) {
  .kth-hero-fav-link-header {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: #fff !important;
    color: #e70012 !important;
    border: 2px solid #e70012 !important;
    border-radius: 4px !important;
    padding: 4px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    margin-right: 16px !important;
  }
}
/* ===== ここまで ===== */


/* ===== ホームページ余白リセット ===== */
.page-id-234 #main {
  padding-top: 0 !important;
}
.page-id-234 #content {
  margin-top: 0 !important;
}
.page-id-234 .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.page-id-234 .kth-wrap {
  padding-top: 16px !important;
}
/* ===== ここまで ===== */


/* ===== メルカリ風お気に入りボタン（PCヘッダーのみ表示） ===== */
/* スマホでは非表示（ボトムバーのボタンを使う） */
.kt-header-fav-btn {
  display: none !important;
}
@media (max-width: 767px) {
  .kt-header-fav-btn,
  a.kt-header-fav-btn {
    display: none !important;
    visibility: hidden !important;
  }
}
@media (min-width: 768px) {
  /* navi-inをflexにしてボタンを右端に */
  #navi-in {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
  /* ハートボタン本体（テキスト付き） */
  .kt-header-fav-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: auto !important;
    height: 34px !important;
    background: #e70012 !important;
    color: #fff !important;
    border-radius: 17px !important;
    text-decoration: none !important;
    margin-left: 16px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: opacity 0.2s !important;
  }
  .kt-header-fav-btn:hover {
    opacity: 0.8 !important;
    text-decoration: none !important;
    color: #fff !important;
  }
  .kt-header-fav-btn .fa {
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }
}
/* ===== ここまで ===== */


/* ===== 地域バッジ（ロゴ右） ===== */
/* ロゴdivをflexにしてバッジを横並び */
#header .logo.logo-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
}
.kt-area-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #e70012;
  background: rgba(231,0,18,0.07);
  border: 1px solid rgba(231,0,18,0.3);
  border-radius: 4px;
  padding: 3px 8px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .kt-area-badge {
    font-size: 10px;
    padding: 2px 6px;
  }
}
/* ===== ここまで ===== */

/* feat-grid: 5枚カード対応 */
@media(min-width:768px){
  .feat-grid{grid-template-columns:repeat(5,1fr)!important;}
}