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




/* ================================
   HEADER ONLY（フッター除外）
   ================================ */

/* ヘッダーのテキストを大きめ・太字に */
#navi .menu > li > a,
#navi-in .menu > li > a,
#header .menu > li > a,
header .menu > li > a {
  font-size: 16px !important;   /* ←文字サイズUP */
  font-weight: 700 !important;  /* ←さらに太字 */
  line-height: 1.6 !important;
  color: #222;
}

/* ヘッダーのFont Awesomeアイコンも大きめに */
#navi .menu > li > a .fa,
#navi-in .menu > li > a .fa,
#header .menu > li > a .fa,
header .menu > li > a .fa {
  font-size: 22px !important;   /* ←大きめに設定 */
  margin-right: 8px !important; /* 文字との間隔も広め */
  vertical-align: middle !important;
}

/* スライドインメニュー側（ドロワー） */
#navi-in .menu a {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
}
#navi-in .menu a .fa {
  font-size: 22px !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
}

/* 保険：フッター(.menu-button)は絶対変更しない */
.menu-button .fa,
.menu-button a {
  font-size: inherit !important;
}

	
/* ================================
   フッターモバイルボタン用アイコン置換（40px）
   ================================ */

/* 共通：文字ラベル調整 */
.menu-button a {
  font-size: 14px;        /* ←文字サイズ */
  font-weight: bold;      /* ←太字 */
  color: #222;            /* ←濃いめ */
  text-align: center;
}

/* お問い合わせ（fa-envelope / fa-envelope-o） */
.menu-button .fa-envelope:before,
.menu-button .fa-envelope-o:before {
  background-image: url("https://willowk.jp/wp-content/uploads/2025/08/mail-icon.png");
  background-position: center;
  background-size: contain;
  content: '';
  display: block;
  height: 40px;
  width: 40px;
  margin: 0 auto 4px;
}

/* 注文住宅（fa-home） */
.menu-button .fa-archive:before {
  background-image: url("https://willowk.jp/wp-content/uploads/2025/08/order-icon.png");
  background-position: center;
  background-size: contain;
  content: '';
  display: block;
  height: 40px;
  width: 40px;
  margin: 0 auto 4px;
}

/* 新築（fa-building） */
.menu-button .fa-building:before {
  background-image: url("https://willowk.jp/wp-content/uploads/2025/08/new-icon.png");
  background-position: center;
  background-size: contain;
  content: '';
  display: block;
  height: 40px;
  width: 40px;
  margin: 0 auto 4px;
}

/* リフォーム（fa-wrench） */
.menu-button .fa-wrench:before {
  background-image: url("https://willowk.jp/wp-content/uploads/2025/08/reform-icon.png");
  background-position: center;
  background-size: contain;
  content: '';
  display: block;
  height: 40px;
  width: 40px;
  margin: 0 auto 4px;
}

/* 大工の教科書（YouTube：fa-youtube / fa-youtube-play） */
.menu-button .fa-youtube:before,
.menu-button .fa-youtube-play:before {
  background-image: url("https://willowk.jp/wp-content/uploads/2025/08/youtute.png");
  background-position: center;
  background-size: contain;
  content: '';
  display: block;
  height: 40px;
  width: 40px;
  margin: 0 auto 4px;
}

/************************************
** モバイルスライドインメニュー (menu-drawer)
** 背景グリーン / 白文字 / 仕切り線 / アイコン横並び / 閉じるボタン
************************************/

/* パネル全体（ULにもクラス想定があるため両取り） */
#menu-drawer,
.menu-drawer {
  background: #90C31F !important;
  padding: 16px 0;
  margin: 0;
  list-style: none;
}

/* タイトル行「MENU」 */
ul.menu-drawer::before,
.menu-drawer::before {
  content: "MENU";
  display: block;
  padding: 10px 16px 12px;
  font-size: 1.2rem;               /* 少し大きく */
  font-weight: 700;
  color: #555;                     /* 濃いグレー */
  text-align: center;              /* ← 中央揃え */
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.30);
  margin: 0 0 6px 0;
}


/* 余計な白帯を出さない */
ul.menu-drawer:after,
.menu-drawer:after {
  content: "";
  display: none;
}

/* 行ごとの仕切り線 */
#menu-drawer li,
.menu-drawer li {
  margin: 0;
  padding: 0;
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.22);
}
#menu-drawer li:last-child,
.menu-drawer li:last-child {
  border-bottom: none;
}

/* リンク：アイコン＋文字を横並び＆左寄せ */
#menu-drawer a,
.menu-drawer a {
  display: flex !important;            /* ←横並び */
  align-items: center !important;      /* ←縦位置そろえ */
  justify-content: flex-start !important;
  gap: 8px !important;                 /* アイコンと文字の隙間 */
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: #fff !important;
  text-decoration: none;
  text-align: left;
  background: transparent;
  border-radius: 4px;
  transition: background .25s ease, transform .25s ease;
}

/* ホバー：うっすら光って右へスッ */
#menu-drawer a:hover,
.menu-drawer a:hover {
  background: rgba(255,255,255,0.15);
  transform: translateX(6px);
}

/* アイコン（擬似要素）共通：幅固定で整列しやすく */
#menu-drawer a::before,
.menu-drawer a::before {
  display: inline-block;
  width: 1.2em;
  text-align: center;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 0; /* gapで管理 */
  color: #fff;
}

/* ====== 個別アイコン（メニュー項目にCSSクラスを付与して使う） ======
   管理画面 → 外観 → メニュー → 各項目の「CSSクラス」に下記を設定：
   icon-home / icon-order / icon-new / icon-reform / icon-company / icon-news / icon-youtube / icon-mail
*/

/* ホーム */
.menu-drawer .icon-home > a::before { content: "\f015"; }          /* home */

/* 注文住宅 */
.menu-drawer .icon-order > a::before { content: "\f1ad"; }         /* building */

/* 新築工事 */
.menu-drawer .icon-new > a::before { content: "\f6d9"; }           /* hard-hat */

/* リフォーム・リノベ */
.menu-drawer .icon-reform > a::before { content: "\f0ad"; }        /* wrench */

/* 会社案内 */
.menu-drawer .icon-company > a::before { content: "\f0c0"; }       /* users */

/* 新着記事だけ特別に強調（藍色） */
.menu-drawer .icon-news > a {
  font-size: 1.2rem !important;   /* 他より大きく */
  font-weight: 700 !important;
  color: #1e3a8a !important;      /* 深い藍色 */
}

/* アイコンは他と同じサイズで固定 */
.menu-drawer .icon-news > a::before {
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900;
  content: "\f1ea";               /* 新聞アイコン */
  margin-right: 8px;
  font-size: 1rem !important;     /* ← アイコンサイズを固定（通常） */
  color: #1e3a8a !important;
}


/* 大工の教科書（YouTube：Brands系フォントへ切替） */
.menu-drawer .icon-youtube > a::before {
  font-family: "Font Awesome 5 Brands";
  content: "\f167";                                               /* youtube */
  /* 色を赤にしたい場合 → color:#ff0000; */
}

/* お問い合わせ */
.menu-drawer .icon-mail > a::before { content: "\f0e0"; }         /* envelope */

/* ====== 閉じるボタン（×）を控えめな薄いグレーで ====== */
span.fas.fa-times::before {
  font-family: "Font Awesome 5 Free";
  content: "\f00d";                  /* × */
  font-weight: 900;
  color: #aaa !important;            /* 薄いグレー */
  font-size: 1.1em;                  /* 小さめ */
}

/* YouTube項目の余計なアイコンだけ消す */
.menu-drawer .icon-youtube::before,
.menu-drawer .icon-youtube::after {
  content: none !important;
}

/* 正しいアイコンを再設定 */
.menu-drawer .icon-youtube > a::before {
  font-family: "Font Awesome 5 Brands" !important;  /* Brands系を明示 */
  font-weight: 400;                                 /* Brandsは通常400 */
  content: "\f167";                                 /* YouTube */
  color: #ff0000;                                      /* 赤にしたいなら #ff0000 */
  margin-right: 8px;
}