@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){
  /*必要ならばここにコードを書く*/
}
@font-face {
  font-family: 'MkPOP';
  src: url('/wp-content/themes/cocoon-child-master/fonts/851MkPOP.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* タイトルに直接適用 */
.site-name-text {
  font-size: 65px !important;
  font-family: 'MkPOP', sans-serif !important;
}

#header,
#header .logo,
#header .site-name-text,
.tagline {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.7 !important;
}


/* サブタイトルのフォントダウンロード */
@font-face {
  font-family: 'ZenMaru Gothic Regular';
  src: url('/wp-content/themes/cocoon-child-master/fonts/ZenMaruGothic-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* サブタイトルのフォントを反映 */
.tagline {
  font-family: 'ZenMaru Gothic Regular', sans-serif !important;
  font-size: 18px !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* サブタイトルのフォントダウンロード */
@font-face {
  font-family: 'ZenMaru';
  src: url('/wp-content/themes/cocoon-child-master/fonts/ZenMaruGothic-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* サブタイトルのフォントを反映 */
.tagline {
  font-family: 'ZenMaru Gothic Regular', sans-serif !important;
  font-size: 18px !important;
  margin-top: 0 !important;
  margin-bottom: 9px !important; /* ← 下に余白を追加 */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.tagline {
  letter-spacing: 0.03em; /* 文字の間隔を少し広く */
}


/* ナビ（カテゴリ部分）の背景色を横幅いっぱいに */
#navi {
  background-color: #bc9c78  !important;
  width: 100vw !important;          /* 横幅いっぱいに */
  position: relative;               /* 子要素位置の設定基準 */
  left: 50%;                        /* 左に50%ずらし */
  right: 50%;
  margin-left: -50vw;               /* 左に 50% のビュー幅分ずらす */
  margin-right: -50vw;
  box-sizing: border-box;
}
#navi .item-label {
  line-height: 1; /* デフォルトより詰めたいならこの値を下げてください（例：1.2 → 1） */
}

/* 中のメニューを中央寄せに整列 */
#navi-in {
  max-width: 1080px; /* 必要に応じて調整 */
  margin: 0 auto;
}
/* カテゴリーフォント */
@font-face {
  font-family: 'ZenMaruGothic';
  src: url('/wp-content/themes/cocoon-child-master/fonts/ZenMaruGothic-Medium.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
.menu-item .item-label {
  font-family: 'ZenMaruGothic', sans-serif;
  font-weight: 600; /* または bold, 数値は400〜700で調整可能 */
}

/* カテゴリ（メニュー）のフォント変更 */
#navi .item-label {
  font-family: 'ZenMaruGothic', sans-serif;
}
#navi .item-label {
  font-family: 'ZenMaruGothic', sans-serif;
  font-size: 23px;
  letter-spacing: 0.8px; /* 文字間隔を少し広めにする（任意） */
  font-weight: 500;       /* 中間の太さ。お好みで normal や bold でもOK */
}
/* カテゴリメニューの上下に一直線の線を引く */
#navi::before,
#navi::after {
  content: '';
  display: block;
  height: 1.5px;
  background-color: #7E5435;
  width: 100%;
  margin: 0;
}

#navi .item-label {
  color: #FFFFFF !important;
}




/* ホバー時の効果（任意） */
#navi .menu-item a:hover {
  opacity: 0.8;
}

/* 共通スタイル：カテゴリ項目に左右余白 */
#navi .menu-item {
  position: relative;
  padding: 0 20px;
}

/* 各項目の間に縦棒を追加（最後以外） */
#navi .menu-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 5%;
  bottom: 5%;
  right: 0;
  width: 1.7px;
  background-color: #7E5435;
}

/* 最初の項目の左に縦棒 */
#navi .menu-item:first-child::before {
  content: '';
  position: absolute;
  top: 5%;
  bottom: 5%;
  left: 0;
  width: 1.7px;
  background-color: #7E5435;
}

/* 最後の項目の右に縦棒 */
#navi .menu-item:last-child::after {
  content: '';
  position: absolute;
  top: 5%;
  bottom: 5%;
  right: 0;
  width: 1.7px;
  background-color: #7E5435;
}
/* 既存の上下線 */
#navi::before,
#navi::after {
  content: '';
  display: block;
  height: 1.5px;
  background-color: #7E5435;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

/* 影用の線を別で追加 */
#navi::after {
  box-shadow: 0 2px 0 rgba(161, 163, 166, 0.4); /* 下に薄い影を落とす */
}