@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){
}

/* ==========================================
 * unico風ヘッダー【強制1行化コンテナ対応CSS】
 * ========================================== */

/* --- PC用（1024px以上）のヘッダー装飾 --- */
@media screen and (min-width: 1024px) {
  body.is-unico-header {
    padding-top: 85px !important; 
  }
  body.is-unico-header.admin-bar #header {
    top: 32px !important; 
  }
  body.is-unico-header #header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 85px !important; 
    background-color: #FFFAEB !important;
    border-bottom: 1px solid #dbaba0 !important;
    z-index: 99999 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .unico-flex-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 100% !important;
    max-width: 1350px !important;
    margin: 0 auto !important;
    padding: 8px 40px 0 40px !important; 
    box-sizing: border-box !important;
  }

  .unico-flex-container .header-container,
  .unico-flex-container .logo-header {
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }
  .unico-flex-container img.site-logo-image {
    max-height: 55px !important;
    width: auto !important;
    box-shadow: none !important;
  }

  .unico-flex-container #navi {
    flex-grow: 1 !important;
    margin: 0 40px !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    justify-content: center !important;
  }
  .unico-flex-container #navi-in,
  .unico-flex-container .navi-in > ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .unico-flex-container .navi-in > ul > li {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
  }

  .unico-flex-container .navi-in > ul > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 25px !important;
    height: 100% !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  .unico-right-area {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }
  .unico-header-icons {
    display: flex !important;
  }
  .unico-icon-item {
    display: flex !important;
    align-items: center !important;
    color: #333 !important;
    text-decoration: none !important;
    transition: opacity 0.2s;
  }
  .unico-icon-item:hover { opacity: 0.6; }
  .unico-icon-item .u-icon {
    width: 26px !important;
    height: 26px !important;
  }
}

/* --- スマホ用（1023px以下） --- */
@media screen and (max-width: 1023px) {
  #header .logo-header,
  #header .header-container {
    display: none !important;
  }
  #header {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
  }
}

/* ==========================================
 * メニューの文字とサブメニューの装飾 (全幅共通)
 * ========================================== */
.menu-label { 
  display: flex !important; /* 強制的にflexを効かせる */
  align-items: center; 
  gap: 8px; 
  text-align: left;
  position: relative; 
  padding-bottom: 6px; 
}
.menu-label i { color: #716a67; font-size: 1.0em; }
.menu-label .text-group { display: flex; flex-direction: column; line-height: 1.1; }
.menu-label .main-text { font-weight: bold; font-size: 14px; color: #716a67; font-family: 'Yu Gothic', sans-serif; }
.menu-label .sub-text { font-size: 10px !important; color: #716a67 !important; font-family: 'Yu Gothic', sans-serif !important; }

/* ==========================================
 * メニューのリンク(aタグ)全体を基準に線を引く（強制表示版）
 * ========================================== */
#navi .navi-in > ul > li > a {
  position: relative !important;
}

#navi .navi-in > ul > li > a::after {
  content: ""; /* ここは !important なしでOK */
  position: absolute !important;
  bottom: 15px !important; /* ★ここで線の上下位置を調整（数値を小さくすると下がる） */
  left: 50% !important;
  width: 70% !important; /* ★ここで線の長さを調整（メニュー幅の70%） */
  height: 2px !important; /* 線の太さ */
  background-color: #333333 !important; /* 線の色 */
  transform: translateX(-50%) scaleX(0) !important; /* 中央から広げるための設定 */
  transition: transform 0.3s ease !important; /* アニメーション速度 */
  transform-origin: center !important; 
  z-index: 9999 !important; /* 他の要素に隠れないよう最前面へ強制 */
  display: block !important;
}

/* ホバー時に線を100%（指定したwidth）に広げる */
#navi .navi-in > ul > li:hover > a::after {
  transform: translateX(-50%) scaleX(1) !important;
}

/* サブメニュー装飾 */
#navi .navi-in ul.sub-menu {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(10px) !important;
  background: #ffffff !important;
  padding: 0.5em 0 !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18) !important;
  min-width: 180px !important;
  border-radius: 8px !important;
  z-index: 999999 !important;
  border-top: 4px solid #cf9f96 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
  display: block !important;
}
#navi .navi-in > ul > li:hover > ul.sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}
#navi .navi-in ul.sub-menu li a {
  display: block !important;
  padding: 0.7em 1.2em !important;
  color: #716a67 !important;
  text-align: left !important;
  white-space: nowrap !important;
  font-weight: bold !important; 
  font-family: 'Yu Gothic', sans-serif !important; 
  font-size: 14px !important; 
  background: transparent !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}
#navi .navi-in ul.sub-menu li a:hover {
  background-color: #f2f2f2 !important;
  color: #cf9f96 !important;
}

@media (max-width:834px){
  .mobile-header-menu-buttons {
    background: #FFFAEB;
  }
}

/*タイトル非表示*/
.page .entry-title { display: none; }
.post-type-archive-product .entry-title,
.post-type-archive-product h1.page-title { display: none; }




.sukima
{
	  position: relative;
	margin-top: -150px; 

}