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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/


/* FAQボックス */
.is-style-accordion>.faq>.faq-question {
    background-color: #f0f3f5;
}


/* cocoon標準ボタン マウスオーバー*/
.wp-block-buttons>.wp-block-button .wp-block-button__link {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.wp-block-buttons>.wp-block-button .wp-block-button__link:hover {
    background-color: #e35050 !important;
    color: white !important;
}

/* =========================================
   PCだけ：ヘッダーを左右いっぱいに広げる
   ※全ページ共通
========================================= */
@media screen and (min-width: 1024px) {

  /* ヘッダー全体 */
#header-container,.header-container {
    width: 100% !important;
    max-width: none !important;
    background: #fff !important; /* 必要に応じて transparent に変更 */
}
/* ロゴ＋メニューの内側 */
#header-container .header-container-in,
.header-container .header-container-in {
  	width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 24px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}
/* ロゴ側 */
.header-logo,.logo-header,.header .logo {
    flex: 0 0 auto;
}
/* ナビ側を右まで使う */
#navi, .navi {
    flex: 1 1 auto;
    margin-left: 24px;
    width: auto !important;
}
#navi .navi-in,.navi .navi-in,
#navi-in {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}
/* メニューを右寄せ */
#navi .navi-in > ul,.navi .navi-in > ul {
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
}
/* メニュー文字 */
#header-container #navi a,.header-container #navi a,
#header-container .navi a,.header-container .navi a {
    white-space: nowrap;
}
/* ロゴ画像 */
.custom-logo,.header-logo img,.logo-image img {
    max-width: 100%;
    height: auto;
}
} /* ← メディアスクリーン閉じる*/

/* スマホ・タブレット：ヘッダー非表示 */
@media screen and (max-width: 1023px) {
#header-container,  .header-container {
    display: none !important;
  }
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
	
}



/*---------------------------
* モバイル 左スライドメニュー　*/
/*---------------------------*/
.menu-close-button {
 display:none;
}
.menu-content {
background:rgba( 255, 255, 255, 0.93 ); 
}

ul.menu-drawer:before {
content: "MENU"; 
display: block;
background-color: #888;
color: #fff; 
font-size: 1.1em;
font-weight: bold;
text-align: center;
padding: 7px;
margin: 15px 0;
}
ul.menu-drawer:after {
background-color: #fff;
}
.menu-drawer a {
color: #555 !important;/* 文字色 */
font-size: 1em;
font-weight: 600;
}
.menu-drawer a:hover {
background-color: #eff8f9;
}
.menu-drawer a .fas, .menu-drawer a .far,.menu-drawer a .fa,.menu-drawer a .fab {
margin-right: 3px;
}
.sub-menu li {
font-size: 0.8em;
}

/*---------------------------*/
/*モバイル ブログ記事一覧の文字サイズ*/
/*---------------------------*/
.related-entry-card-title, .entry-card-title {
    font-size: 14px !important;
	font-weight: 500;
}

/*---------------------------*/
/*モバイル ブログページのタイトル余白 */
/*---------------------------*/
.entry-title {
padding:0 0 10px;		
	}

/*---------------------------------
 アイコンボックス スタイル追加
/*---------------------------------*/

/*アイコン変更（メモアイコン） */
.memo-box::before {
	content: "\f304"; /* アイコンをメモに変更 */
}
/* 丸み設定 */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon1, .is-style-icon2, .is-style-icon3,.is-style-icon4, .is-style-icon5, .is-style-icon6,.is-style-icon7) {
	border-radius: 0; /* 角を四角く */
}
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon1-radius, .is-style-icon2-radius, .is-style-icon3-radius, .is-style-icon6-radius, .is-style-icon7-radius) {
	border-radius: 8px; /* 角を丸く */
}

/* スタイル1・2・3の設定 ----------------------------------------------- */
/* アイコンボックス（スタイル1・2・3） */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon1, .is-style-icon2, .is-style-icon3, .is-style-icon1-radius, .is-style-icon2-radius, .is-style-icon3-radius) {
	padding: 1.2em 1.5em 1.2em 4em; /* 内側余白（上・右・下・左） */
}
/* スタイル2：外枠なしのボックス */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon2, .is-style-icon2-radius) {
	border-width: 0; /* 外枠なし */
}
/* スタイル3：背景色なしで外枠の太さを設定 */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon3, .is-style-icon3-radius) {
	border-width: 2px; /* 外枠の太さ */
	background-color: transparent; /* 背景色なし */
}
/* スタイル1・2・3 - アイコンのサイズ設定 */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon1, .is-style-icon2, .is-style-icon3, .is-style-icon1-radius, .is-style-icon2-radius, .is-style-icon3-radius)::before {
	font-size: 1.3em; /* アイコンのフォントサイズ */
	padding:0;
}
/* スタイル4・5の設定 ----------------------------------------------- */
/* アイコンボックス（スタイル4・5） */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon4, .is-style-icon5) {
	border-width: 5px; /* 外枠の太さ */
	padding: 1em 1.5em 1em 3em; /* 内側余白（上・右・下・左） */
}
/* スタイル4：左・下・右の枠線を非表示 */
.wp-block-cocoon-blocks-icon-box.is-style-icon4 {
	border-right: none;
	border-left: none;
	border-bottom: none;
}
/* スタイル5：上・右・下の枠線を非表示 */
.wp-block-cocoon-blocks-icon-box.is-style-icon5 {
	border-top: none;
	border-right: none;
	border-bottom: none;
}
/* スタイル4・5 - アイコンのサイズとスタイル */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon4, .is-style-icon5)::before {
	font-size: 1.3em; /* アイコンのフォントサイズ */
	border-right: 0;
	padding:0;
}
/* スタイル6・7の設定 ------------------------------------------------ */
/* アイコンボックスの基本スタイル（スタイル6・7） */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon6,.is-style-icon7, .is-style-icon6-radius, .is-style-icon7-radius){
	border-width: 2px; /* 外枠の太さ */
}
/* スタイル6：ボックスの位置調整 */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon6,.is-style-icon6-radius){
	margin-left: 10px; /* 左側に余白 */
}
/* スタイル7：背景色なし */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon7, .is-style-icon7-radius){
	background-color: initial; /* 背景色なし */
}
/* スタイル7：ボックスの余白 */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon6,.is-style-icon7, .is-style-icon6-radius, .is-style-icon7-radius) {
	padding: 1.5em; /* 内側余白（上下左右） */
}
/* スタイル6・7 - アイコンのスタイル調整 */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon6,.is-style-icon7, .is-style-icon6-radius, .is-style-icon7-radius)::before {
	display:grid; /* アイコンを中央揃え */
	place-content:center; /* アイコンの配置を中央揃え */
	margin: 0; /* 余白なし */
	padding:0; /* パディングなし */
	width: 2em; /* アイコンの幅 */
	height:2em; /* アイコンの高さ */
	border-right: 0; /* 右側のボーダーなし */
	border-radius: 99px; /* アイコン背景の角を丸く */
	font-size: .9em; /* アイコンのフォントサイズ */
	color: #fff; /* アイコンの色 */
	box-shadow: 0 0 0 2px #fff;
}
/* スタイル6：アイコンの位置調整 */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon6, .is-style-icon6-radius)::before {
	top: -15px; /* アイコンの上位置 */
	left: -10px; /* アイコンの左位置 */
}
/* スタイル7：アイコンの位置調整 */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon7, .is-style-icon7-radius)::before {
	top: -1em; /* アイコンの上位置 */
	left: .75em; /* アイコンの左位置 */
}
/* 種類別のアイコン背景色設定（スタイル6・7） */
.information-box:where(.is-style-icon6,.is-style-icon7, .is-style-icon6-radius, .is-style-icon7-radius)::before {
    background-color: #87cefa; /* 情報(i)の背景色 */
	content: "\f129";/*アイコン変更*/
}
.question-box:where(.is-style-icon6,.is-style-icon7, .is-style-icon6-radius, .is-style-icon7-radius)::before {
    background-color: gold; /* 質問(?)の背景色 */
	content: "\3f";/*アイコン変更*/
}
.alert-box:where(.is-style-icon6,.is-style-icon7, .is-style-icon6-radius, .is-style-icon7-radius)::before {
    background-color: #f3aca9; /* アラート(!)の背景色 */
	content: "\21";/*アイコン変更*/
}
.memo-box:where(.is-style-icon6,.is-style-icon7, .is-style-icon6-radius, .is-style-icon7-radius)::before {
    background-color: #7ad0b6; /* メモの背景色 */
}
.comment-box:where(.is-style-icon6,.is-style-icon7, .is-style-icon6-radius, .is-style-icon7-radius)::before {
    background-color: #999; /* コメントの背景色 */
}
.ok-box:where(.is-style-icon6,.is-style-icon7, .is-style-icon6-radius, .is-style-icon7-radius)::before {
    background-color: #3cb2cc; /* OKの背景色 */
}
.ng-box:where(.is-style-icon6,.is-style-icon7, .is-style-icon6-radius, .is-style-icon7-radius)::before {
    background-color: #dd5454; /* NGの背景色 */
}
.good-box:where(.is-style-icon6,.is-style-icon7, .is-style-icon6-radius, .is-style-icon7-radius)::before {
    background-color: #98e093; /* GOODの背景色 */
}
.bad-box:where(.is-style-icon6,.is-style-icon7, .is-style-icon6-radius, .is-style-icon7-radius)::before {
    background-color: #eb6980; /* BADの背景色 */
}
.profile-box:where(.is-style-icon6,.is-style-icon7, .is-style-icon6-radius, .is-style-icon7-radius)::before {
    background-color: #999; /* プロフィールの背景色 */
}

/* コメント・プロフィールボックス背景色設定 --------------------------------- */
:where(.comment-box, .profile-box):where(.is-style-icon2, .is-style-icon4, .is-style-icon5) {
	background-color: #f8f8f8; /* 背景色をグレーに設定 */
}
/* モバイル調整 -------------------------------------------------------- */
/* 480px以下の画面幅用設定 */
@media screen and (max-width: 480px) {
	/* スタイル2・3の内側余白（モバイル用） */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon1,.is-style-icon2, .is-style-icon3, .is-style-icon1-radius, .is-style-icon2-radius, .is-style-icon3-radius) {
	padding: 1em 1.5em 1em 3.5em; /* 内側余白（上・右・下・左） */
	}
/* スタイル4・5の内側余白（モバイル用） */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon4, .is-style-icon5) {
	padding: 1em 1.5em 1em 3em; /* 内側余白（上・右・下・左） */
}
/* アイコン位置（モバイル用） */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon1,.is-style-icon2, .is-style-icon3, .is-style-icon1-radius, .is-style-icon2-radius, .is-style-icon3-radius, .is-style-icon4, .is-style-icon5)::before {
	top: 50%; /* 縦の中央揃え */
	left: 5px; /* 左位置調整 */
	margin-left: 0;
	width: 35px; /* アイコンの幅 */
}
/* スタイル1・2・3 - アイコン横の線（モバイル用） */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon1,.is-style-icon2, .is-style-icon3, .is-style-icon1-radius, .is-style-icon2-radius, .is-style-icon3-radius)::before {
		border-right: 1px solid; /* アイコン横に線を追加 */
}
}　 /* ←ここまでアイコンボックスのカスタム */