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


/************************************
** サイト設定情報
************************************/
/*
Meta Sliderフロントページ表示
main-before.phpにショートコード追加


*/


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


/* ========== 追加CSS ===============================
 * CSS命令規則：BEM参考
 * CSS構成：FLOCSS参考
 *  
 * - Foundation（ベーススタイル）
 * - Layout（共通で使用するレイアウトスタイル）
 *   - ヘッダー
 *   - 投稿ページ
 * - Component（共通で使用する要素スタイル）
 *   - ヘッダー（グローバルメニュー）設定
 *   - 見出し（Hタグ）設定
 *   - 記事リンク・ブログカード
 * - Project（特定ページで使用する要素スタイル）
 *   - メインヴィジュアル（mv）
 * - Utility（スタイル調整）
 * ================================================== */

/* ==================================================
 * Layout
 * 共通で使用するレイアウトスタイル
 * ================================================== */


/* ========== ヘッダー ========== */

/* ----- ヘッダー表示設定 ----- */
	/*ヘッダーに下線*/
.header-container {
	border-bottom: 1px solid #eee;
}

/* ----- 追従ヘッダー時のシャドウ設定 ----- */
.fixed-header {
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);/*デフォルト0.25→0.05（薄くする）*/
}


/* ==================================================
 * Component
 * 共通で使用する要素スタイル
 * ================================================== */


/* ========== ヘッダー（グローバルメニュー）設定 ========== */

/* ----- グローバルナビメニュー設定 ----- */
	/*ホバー設定（ホバー時に赤文字）*/
#navi .navi-in a:hover{
	color: #d51717!important;
	transition: all 0.1s ease;
}

	/*グローバルメニュー ドロップダウン背景色*/
.navi-in > ul .sub-menu {
    background-color: #fafafa!important; 
}

	/*グローバルメニュー ホバー時に左からアンダーラインを出す*/
#navi .navi-in a:after{
	position: absolute;/*線の位置を絶対配置に*/
	content: "";/*文字はなし*/
	left: 0px;/*線の位置*/
	bottom: 0px;/*線の位置*/
	height: 2px;/*線の高さ*/
	width: 100%;/*幅いっぱいに線を引く*/
	background: #d51717;/*線の色*/
	transform: scale(0,1);/*ホバー前は線を消す*/
	transition: 0.3s;/*線が0→100%になるまでの秒数*/
	transform-origin: left;/*線を左側から出す*/
}

#navi .navi-in a:hover:after{
	transform: scale(1);/*マウスオーバー後、線を100%出す*/
}

	/*グローバルナビメニューのフォントサイズ*/
.item-label{
	font-size: 0.8em;
	font-weight:700;
}


/* ========== 見出し（Hタグ）設定 ========== */

/* ----- h2（四角模様+下線） ----- */
.entry-content h2{
	position: relative;
	margin-top: 2em;
	padding-top: 15px!important;
	padding-bottom: 12px!important;
	padding-left: 2em!important;
	border-bottom: 2px solid #d51717;
	border-left: none!important;
	background-color: #ffffff!important;
	color: #0a0a0a!important;
}
.entry-content h2:before{
	position:  absolute;
	top: 18px;
	left: 11px;
	width: 13px;
	height: 13px;
	border: 3px solid #555555;
	content: "";
}
.entry-content h2:after{
	position:  absolute;
	top: 8px;
	left: 1px;
	width: 16px;
	height: 16px;
	border: 3px solid #d51717;
	content: "";
}

/* ----- h3（背景色追加→なしに変更） ----- */
.entry-content h3{
	/*background-color: #fdf2f2!important;*/
	border-width: 0px 0px 0px 7px!important;
	margin-top: 2em;
	padding: 7px 0px 5px 15px;
}

/* ----- h4（下線一部） ----- */
h4{
	position: relative;
	border: none!important;
}
h4:before{
	content:  '';
	width: 100%;
	height: 2px;
	background-color: #dddddd;
	/*border-top: 0px;*/
	display: block;
	position: absolute;
	left: 0;
	bottom: -6px;
}
h4:after{
	content:  '';
	width: 70px;
	height: 2px;
	background-color: #d51717;
	display: block;
	position: absolute;
	left: 0;
	bottom: -6px;
}

/* ========== 記事リンク・ブログカード ========== */

/* ----- 記事リンクのタイトル設定 ----- */
.widget-entry-card-title {
	font-size: 0.9rem; /*フォントサイズ調整*/
}

/* ----- 新着記事一覧レイアウト ----- */
	/*PC表示　4列横並び設定*/
.widget-entry-cards.card-large-image .a-wrap {
	width:24.5%;  /*PCで4列*/
	display: inline-flex !important;
	text-align: left; /*タイトルを左寄せ*/
}
	/*SP表示　2列横並び設定*/
@media screen and (max-width: 834px) {
	.widget-entry-cards.card-large-image .a-wrap {
		width:49%;
		display: inline-flex;
	}
}

/* ----- ホバー時のカラー ----- */
/*ホバー時に色が変わるのを無くす*/
.a-wrap:hover {
	/*box-shadow: 0 0 8px rgba(0, 0, 0, 0.1)!important;*/
	background: none;
}

/* ----- アイキャッチ画像をホバー時に拡大 ----- */
.a-wrap figure{
	overflow: hidden; /*画像拡大時のはみ出しを隠す*/
}
.a-wrap img{
	transition: transform .6s ease; /* ゆっくり変化させる */
}
.a-wrap:hover img {
	transform: scale(1.1); /* 拡大倍率 */
}

/* ----- ブログカードに「続きを読む」追加 ----- */
.internal-blogcard::after{
	content: '続きを読む \00bb'; /* 内部リンク右下枠の文言 */
	position: absolute;
	bottom: .5rem;
	right: 1rem;
	font-size: 70%;
	background-color: #d51717; /* 内部リンク右下枠の背景色 */
	padding: .4em 3em;
	font-weight: bold;
	color: #fff; /* 内部リンク右下枠の文字色 */
	border-radius: 999px;
}

/*ブログカードのURLと日付を非表示にする */
/*.blogcard-footer{
	display: none;
}*/


/* ==================================================
 * Project
 * 特定ページで使用する要素スタイル
 * ================================================== */

/* ========== メインヴィジュアル（mv） ========== */

/* ----- 大見出し ----- */
.p-mv__title-main {
	font-size: 3rem;
}
.p-mv__line {
	width: 100px;
	margin: auto;
	margin-bottom: 1rem;
	text-align: center;
}
.p-mv__btn {
	padding: 0.5em 2em;
	background-color: #d51717;

	
}

/* ========== フロントページ ========== */

/* ----- 検索窓タイトル設定（キーワード検索/リスト検索に適用） ----- */
/*タイトル上部の余白空きすぎ調整*/
.ttl-search {
	margin-top: 0px !important;
}



/* ==================================================
 * Utility
 * スタイル調整
 * ================================================== */



/* ========== ヘッダー ========== */

/*◆◆◆フロントページMV設定◆◆◆*/
/*-----大見出し-----*/




/*◆◆◆フロントページ設定◆◆◆*/

/*フロントページ見出し用CSS*/
/*.front-index{
	border-bottom: solid 3px #dddddd!important;
	position: relative;
	margin:30px 0 30px 0!important;
	font-size: 22px;
	text-align: left;
}*/

/*.front-index:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px #d51717!important;
	bottom: -3px;
	width: 20%;
}*/

/*.front-index p{
	margin: 5px!important;
}*/

/*.front-index{
	border-bottom: solid 3px #dddddd!important;
	position: relative;
	margin:30px 0 30px 0!important;
	font-size: 22px;
	text-align: left;
}*/

/*◆◆◆◆◆◆*/

/*コンテンツ（本文・サイドバー）のボックスシャドウを無効化（枠削除）*/
.main, .sidebar{
	/*box-shadow: none!important;*/
}



/*◆◆◆投稿ページ設定◆◆◆*/

/*-----ストア（アフィリエイト）リンクボタン設-----*/
/*※現在ブロックエディターのボタンにこのクラス付与してデザイン*/
.btn-shop {
	gap:0.5rem !important;
	margin-top: 5px;
}
.btn-shop a:hover {
	color:#fff;
	text-decoration: none;
	opacity: 0.6;
	transition: 0.6s;
}

/*shopボタンの余白を変更*/
.wp-block-button__link {
	/*オリジナルpadding: calc(0.667em + 2px) calc(1.333em + 2px);*/
	padding: 5px 5px!important;
}

/*ボタン上のテキスト設定*/
.ttl-shop{
	font-size: 0.7em;
	margin-bottom: 5px !important
}

/*-----？？？-----*/
.wp-block-search__input {
	padding: 0px !important;
}

/*ボタン上のテキスト設定　旧*/
.ttl-store{
	font-size: 0.7em;
	margin-bottom: 5px !important
}

/*囲みボタン設定（囲みボタンにアフィリリンク挿入）*/
.btn-store a{
	font-size:0.9rem;
	width:100% !important;
	margin-bottom:1px !important;
	padding: 7px 0px;
}

/*カラム上下間に自動で入るマージンを調整*/
.btn-store-column{
	margin-block-start:7px !important;
}

.btn-store-inline{
	display: flex !important;
	flex-wrap: wrap !important;
	/*gap:0.5rem;*/
}


/*◆◆◆サイドバー設定◆◆◆*/

/*-----サイドバータイトル（デフォルト：h3自動割り当て、キーカラー背景+白文字）-----*/

.sidebar h3 {
	border-bottom: solid 2px #dddddd!important;
	position: relative;
	font-size: 1em;
	color: #111111;
	background-color: #fff;
	padding: 0px;
}
.sidebar h3:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 2px #d51717!important;
	bottom: -2px;
	width: 20%;
}


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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	img {
    width:auto;
    height:auto;
    max-height:300px;
	}
	/*480px以下はimg-pc非表示*/
	.img-pc { 
	display: none;
	}
}
/*481px以上はimg-sp非表示*/
@media screen and (min-width: 481px) {
	.img-sp { 
		display: none;
	}
}