@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* ==============================================
   atsuageworks — Cocoon 追加CSS（works/ と同じトークン）
   貼り付け先: 外観 → テーマファイルエディター → Cocoon Child → style.css の末尾
   フォントの読み込みは Cocoon設定 → アクセス解析・認証 → ヘッド用コード に <link> で入れる
   ============================================== */

/* 見出し */
.article h1,.article h2,.article h3,
.entry-card-title,.entry-title{
  font-family:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;
  color:#1F3A5F;
}
.article h2{
  border-left:4px solid #E8A33D;padding-left:14px;
  background:none;border-bottom:none;border-top:none;border-right:none;
}
.article h3{border-left:none;border-bottom:2px solid #E6E0D3;}

/* カード・本文エリア */
.entry-card,.main{
  background:#fff;border:1px solid #EFE7D6;border-radius:16px;
}
.entry-card{padding:16px;}

/* カテゴリラベル */
.cat-label,.cat-link{background:#1F3A5F;color:#fff;border-radius:999px;border:none;}

/* 引用 = ふきだし */
.article blockquote{
  background:#FBF6EC;border:none;border-radius:16px 16px 16px 4px;padding:16px 20px;
}

/* 日付は Outfit */
.post-date,.post-update,.entry-date{font-family:'Outfit','Noto Sans JP',sans-serif;}

/* ヘッダーメニューの「実績・お仕事のご相談」をCTA化
   ※ 外観 → メニュー で該当項目の「CSSクラス」に header-cta を入れる
   Cocoon は PCメニューの li を幅176px固定＋ラベルを省略記号で切るので、CTAだけ幅を文字に合わせる */
.navi-in > ul > li.header-cta{width:auto;}
.navi-in > ul > li.header-cta > a{
  display:inline-flex;align-items:center;height:100%;
  background:#E8A33D;color:#1F3A5F;border-radius:999px;
  padding:0 24px;margin:0 8px;font-weight:700;
}
.navi-in > ul > li.header-cta > a:hover{background:#C98622;color:#fff;}
.navi-in > ul > li.header-cta > a .caption-wrap,
.navi-in > ul > li.header-cta > a .item-label{
  width:auto;max-width:none;overflow:visible;text-overflow:clip;white-space:nowrap;color:inherit;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}