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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* ===================================================
   正解レシピLAB「Notus風」スタジオデザイン（修正版）
   =================================================== */

/* --- 0. Google Fonts 読み込み (アクセント英語用) --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap');

/* --- 1. 定義 --- */
:root {
  --key-color: #F39C12; /* メインオレンジ */
  --text-black: #111111; /* 限りなく黒に近いグレー */
  --font-serif: 'Cormorant Garamond', serif; /* アクセント英語用 */
}

body {
    color: var(--text-black) !important;
    /* フォントファミリー指定は削除（Cocoon設定にお任せ） */
}

/* --- 2. 英語見出し用クラス (高級感用) --- */
/* 記事内で <span class="en-title">RECIPES</span> のように使う */
.en-title {
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: 0.05em;
    font-style: italic;
}

/* --- 3. ヘッダー周り --- */
#header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #eeeeee !important;
    box-shadow: none !important;
}

/* サイトタイトル：Cocoonの設定に従いつつ、少し文字間を広げて洗練させる */
.site-name-text {
    font-weight: bold !important;
    letter-spacing: 0.1em; /* 文字間を広げる */
}

/* --- 4. グローバルナビ（修正版：二重表示防止） --- */

#navi {
    background-color: transparent !important;
}

/* ★修正点： .menu-pc クラスを追加して、PC用メニューだけに適用 */
#navi .navi-in > ul.menu-pc {
    display: flex;
    justify-content: center;
    gap: 50px; /* 間隔はお好みで */
    padding: 0;
    margin: 0;
}

/* スマホ用メニューはPC画面では隠す（念のため） */
#navi .navi-in > ul.menu-mobile {
    display: none !important;
}


/* --- 以下、スタイルの指定（セレクタを .menu-pc に合わせて修正） --- */

/* メニューの文字 */
#navi .navi-in > ul.menu-pc > li > a {
    color: var(--text-black) !important;
    font-weight: 500;
    font-size: 16px;
    padding: 10px 0 !important;
    text-decoration: none;
    position: relative;
    transition: color 0.3s;
}

/* ホバー時の文字色 */
#navi .navi-in > ul.menu-pc > li > a:hover {
    background-color: transparent !important;
    color: var(--key-color) !important;
}

/* アニメーションの下線 */
#navi .navi-in > ul.menu-pc > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--key-color);
    transform: scaleX(0);
    transform-origin: bottom left;
    transition: transform 0.3s ease-out;
}

/* ホバー時に線を伸ばす */
#navi .navi-in > ul.menu-pc > li > a:hover::after {
    transform: scaleX(1);
}


/* --- 5. 記事内の見出し（Notus風ミニマル） --- */

/* H2: オレンジの左線のみ */
.entry-content h2 {
    background: transparent !important;
    padding: 10px 0 10px 15px !important;
    border-left: 5px solid var(--key-color) !important;
    border-bottom: none !important;
    border-top: none !important;
    border-right: none !important;
    color: var(--text-black) !important;
    font-size: 26px;
    margin-top: 60px;
    margin-bottom: 30px;
}

/* H3: 細い下線＋アクセント */
.entry-content h3 {
    border-bottom: 1px solid #dddddd !important;
    padding: 10px 5px !important;
    border-left: none !important;
	border-right: none !important;
	border-top: none !important;
    font-size: 20px;
    margin-top: 40px;
    position: relative;
    background: transparent !important;
}
.entry-content h3::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--key-color) !important;
}

/* --- 6. ボタン (Learn More用) --- */
.wp-block-button__link {
    background-color: #333333 !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 12px 40px !important;
    font-family: var(--font-serif); /* ここだけ英語フォント */
    font-size: 18px !important;
    letter-spacing: 0.1em;
    transition: all 0.3s ease !important;
}
.wp-block-button__link:hover {
    background-color: var(--key-color) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(243, 156, 18, 0.3);
}

/* --- 7. 箇条書き（リスト）のアクセント --- */
.entry-content ul {
    list-style-type: none !important;
}
.entry-content ul li {
    position: relative;
    padding-left: 1.5em;
}
.entry-content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    background-color: var(--key-color);
    border-radius: 50%;
}

/* ===================================================
   SNSシェアボタンのミニマル化（アイコンのみ）
   =================================================== */

/* 1. ボタン内のテキスト（キャプション）を非表示にする */
.sns-share-buttons .button-caption {
    display: none !important;
}

/* 2. ボタンのレイアウト調整 */
.sns-share-buttons a.sns-button {
    width: 40px !important;   /* 幅を固定してコンパクトに */
    height: 40px !important;  /* 高さも合わせて正方形に */
    padding: 0 !important;    /* 内側の余白をリセット */
    display: flex !important;
    justify-content: center;  /* アイコンを中央寄せ */
    align-items: center;      /* 垂直方向も中央寄せ */
    border-radius: 50% !important; /* 丸くする（四角が良い場合はこの行を削除） */
    margin-right: 10px !important; /* ボタン同士の間隔 */
    margin-bottom: 10px !important;
}

/* 3. アイコンサイズの調整 */
.sns-share-buttons .social-icon {
    font-size: 18px !important; /* アイコンの大きさ */
    margin-right: 0 !important; /* もともとあった右余白を消す */
}

/* 4. ボタンエリア全体の配置調整 */
.sns-share-buttons {
    justify-content: center; /* ボタン群を画面中央に寄せる */
    flex-wrap: wrap; /* 画面幅が狭いときに折り返す */
    gap: 5px; /* ボタン間の隙間 */
}

/* （オプション）シェア数のカウント表示も消す場合 */
.sns-share-buttons .share-count {
    display: none !important;
}

/* ===================================================
   トップページ検索ウィジェット（Notus風ミニマル化）
   =================================================== */

/* 1. ウィジェット全体の枠や背景を消す */
#search-2.widget_search {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 80px auto 100px !important; /* 上下にたっぷりと余白（スタジオ感の演出） */
    max-width: 600px; /* 横幅を制限して間延びさせない */
    padding: 0 !important;
}

/* 2. 検索フォーム（Cocoonデフォルトの枠線を消す） */
#search-2 .search-box {
    border: none !important;
    background: transparent !important;
    position: relative; /* ボタン位置調整の基準 */
    width: 100%;
}

/* 3. 入力エリア（ここを一本線にする） */
#search-2 .search-edit {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid #dddddd !important; /* 通常は薄いグレーの下線 */
    border-radius: 0 !important;
    height: 60px !important; /* 高さを出して存在感を */
    font-size: 24px !important; /* 文字を大きく */
    color: var(--text-black) !important;
    text-align: center; /* 文字を真ん中から入力させる（重要！） */
    padding: 0 40px !important; /* 左右に少し余白 */
    box-shadow: none !important;
    transition: border-color 0.3s ease;
}

/* フォーカス時（入力しようとした時）にオレンジにする */
#search-2 .search-edit:focus {
    border-bottom: 2px solid var(--key-color) !important;
    outline: none !important;
}

/* プレースホルダー（「サイト内を検索」の文字） */
#search-2 .search-edit::placeholder {
    color: #cccccc;
    font-size: 16px;
    letter-spacing: 0.1em;
}

/* 4. 検索ボタン（虫眼鏡）のデザイン調整 */
#search-2 .search-submit {
    color: #aaaaaa !important; /* 控えめなグレー */
    font-size: 20px !important;
    position: absolute;
    top: 50%;
    right: 10px; /* 右端に配置 */
    transform: translateY(-50%);
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
}

/* ホバー時にオレンジ */
#search-2 .search-submit:hover {
    color: var(--key-color) !important;
}

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

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

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