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

/************************************
** 子テーマ用のスタイルを書く
************************************/


/* -------------------------------
　ヘッダー
---------------------------------- */

/* ロゴとメニューを綺麗に並べる */
/* (Cocoon設定が「トップメニュー右」などの場合に有効) */
.header-in {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
	}

/* ------------------------ */

/* ロゴの変倍（歪み）を修正 */
.logo-header img {
    width: auto !important;
    height: 150px !important;
    object-fit: contain;
	margin: 0px;
	padding:0px;
	}

/* ------------------------ */

/* SNSアイコンの余白を詰める */
.header-container-in .sns-buttons a {margin:auto 0px !important;}

/* SNSボタン全体の右端の余白を調整する場合 */
.header-container-in .sns-buttons {margin-right: 0;}

/* ヘッダーメニューの項目間に縦線を入れる */
.navi-in > ul > li { position: relative;}
.navi-in > ul > li:not(:last-child)::after {
    content: "|";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #ccc; /* 線の色（薄いグレー） */
    font-size: 0.8em;
	}

/* メニューの文字と線の間隔を調整 */
.navi-in > ul > li a {
    padding-left: 15px !important;
    padding-right: 15px !important;
	}


/* -------------------------------
　アピールエリア
---------------------------------- */
/* アピールエリア内側の幅制限を解除・拡張 */
.appeal-in {
	max-width: 100% !important; /* サイト基本幅の制限を解除 */
	width: 90%;               /* 画面幅の90%まで広げる（お好みで調整） */
	margin: 0 auto;           /* 中央寄せ */
	}

/* 文字の入るボックス自体の横幅を広げる */
.appeal-content {
	max-width: 1200px;        /* 文字が広がりすぎない最大幅を設定（お好みで） */
	width: 100%;              /* 指定したmax-widthまでいっぱいに広げる */
	padding: 40px 20px;       /* 上下の余白を確保 */
	}

/* アピールエリアの背景を消して文字デザインを変更 */
.appeal-content {
	background-color: transparent; /* 背景の白を透明にする */
	box-shadow: none;/* 枠線の影を消す */
	color: #fff; /* 文字の色（白にする場合） */
	}

/* タイトル（上の大きな文字）のカスタマイズ */
.appeal-title {
	font-size:30px; /* 文字の大きさ（お好みで調整） */
	font-weight: 900;             /* 数値で最大級の太さに設定 */
  -webkit-text-stroke: 1px #fff; /* 文字の縁を1px太らせる（隠し技） */
	filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.8)); /* 線と文字に影をつける */
	line-height: 1.2;/* 行間を少し広くする */
	padding-bottom:20px;
	display: inline-block;    /* 【重要】これで線の長さが文字に合います */
	border-bottom: 3px solid #fff; 
	padding-bottom: 10px;     /* 文字と線の隙間 */
	margin-bottom: 30px;      /* 線と下の文章の間の隙間 */
	}


/* メッセージ（下の小さな文字）のカスタマイズ */
.appeal-message {
	font-size: 20px;/* 文字の大きさ */
	font-weight:700;/* 太字にする */
	filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.8)); /* 線と文字に影をつける */
	line-height: 1.6;/* 行間を少し広くする */
	}

/* ------------------------ */

		/* モバイル（スマホ）用の調整 */
		@media screen and (max-width: 480px) {
			.appeal-title {font-size: 28px; /* スマホでは少し小さくする */}
			.appeal-message {font-size: 16px;}
			}



/* -------------------------------
　サイドバー
---------------------------------- */

/*サイドバー：検索窓↓*/
.sidebar .search-box, .search-menu-content .search-box {
	width: 100%;
	margin: 20px 0px 50px; /*検索窓周りの余白*/
	position: relative;
	display: flex;
	border-radius: 50px; /*全体を囲むボックスの角丸*/
	border: solid 2px #3E3A39; /*枠線*/
	}
.sidebar .search-edit, .search-menu-content .search-edit {
	width: 100%; /*入力部分の長さ*/
	background: #fff; /*入力部分の背景色*/
	padding: 0 20px;
	border: none;
	border-radius: 50px 0 0 50px; /*左上、左下のみ角丸*/
	font-size: 14px;
	}
.search-submit {
	width: 20%; /*ボタン部分の長さ*/
	background: #3E3A39; /*ボタン部分の背景色*/
	color: #fff; /*アイコンの色*/
	position: static;
	right: auto;
	top: auto;
	font-size: 20px; /*アイコンの大きさ*/
	cursor: pointer;
	line-height: 40px; /*検索窓の高さ*/
	border: none;
	border-radius: 0 50px 50px 0; /*右上、右下のみ角丸*/
	padding: 0;
	}
.search-box input::placeholder {color: #898989;} /*「サイト内を検索」の色*/
.search-box input:focus, .search-box button:focus {outline: 0;} /*入力時の枠線を消す*/

/* ------------------------ */

/*サイドバー：見出し↓*/
.sidebar h3 {
	color:#3E3A39;
	background: none; /*背景色*/
	padding: 0; /*余白*/
	font-size: 18px; /*文字サイズ*/
	letter-spacing: 2px; /*文字の間隔*/
	border-bottom: solid 2px #898989;/*文字下のボーダー*/
	margin-bottom:0px!important;/*見出しの下の余白を消す*/
	font-weight:bold;
	}

/* ------------------------ */

/* ------------------------ */

/* 公式サイトをみるボタン */
.official-site-btn {
    display: block;
    background-color: #3f3b3a !important; /* ソースコードにあるヘッダーと同じ色 */
    color: #fff !important;
    text-align: center;
    padding: 5px;
    margin-top: 15px;
    border-radius: 5px;
    text-decoration: none !important;
    font-weight: bold;
    transition: 0.3s;
	font-size:0.9rem;
}
.official-site-btn:hover {background-color: #f8b73d !important; /* ホバー時はオレンジに */}


/* -------------------------------
　TOP：メインコンテンツ
---------------------------------- */
/* トップページのタイトル（TOP）を消す */
.home .entry-title {display: none !important;}

/* トップページの投稿日付・更新日を消す */
.home .post-date,.home .post-update {display: none !important;}

/* 固定ページ上部の余白を詰める（タイトルを消した後の不自然な隙間対策） */
.home .main {padding-top: 10px !important;}

/* トップページの見出し */
.home .entry-content h3 {
    position: relative;
    background: #3F3B3A; 
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    margin-top: 40px;
    margin-bottom: 20px;
	border:none!important;
	}	

/* 記事一覧の下の余白調整 */
.home .new-entry-cards { margin-bottom: 30px;}

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

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

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