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

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

/* グローバルナビメニュー */
#navi .navi-in > .menu-header .item-label{
	font-size: 18px;
	font-weight: bold;
}
/* メニューの高さ変更 */
#navi .navi-in > ul li{
	height: 50px;
	line-height: 50px;
}
/*1番左と2番目の仕切り線*/
#navi .navi-in > ul li{
	border-right: 1px solid #ffffff;
	border-left: 1px solid #ffffff;
}

/*左から3番目以降の仕切り線*/
#navi .navi-in > ul li + li{
	border-right: 1px solid #ffffff;
	border-left: none;
}

/*サブメニューの仕切り線無し*/
#navi .navi-in > ul ul li{
	border-right: none;
	border-left: none;
}
/* サイドバー設定 */
.sidebar h3{
/*  background-color:#B1E2FF; */ /* 水色 */
  padding:1px 8px; /* 見出しの内側の余白調整 */	
/*  padding:16px 10px; */
/*  color:#503200; */ /* 茶色 */
  text-align:center;
  margin:16px 0;
}
/* 見出しリセット */
.article h2{
background:none;
padding: 0;
}
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
}
.article h5{
border-bottom:none;
padding: 0;
}
.article h6{
border-bottom:none;
padding: 0;
}

/* 見出し設定 */
.article h1 {
  text-align: center;
  padding: 0.3em; /*文字まわり（上下左右）の余白*/
  border-top: solid 2px #4A0073;
  border-bottom: solid 2px #4A0073;
}
.article h2 {
  background: #4A0073; /* 紫 */
  color:#FFFFFF; /* 白 */
  padding: 0.3em; /*文字まわり（上下左右）の余白*/
}
.article h3 {
/*  background: #C56BFF; */ /* 紫 */
/*  color:#FFFFFF; */ /* 白 */
/*  padding: 0.3em; */ /*文字まわり（上下左右）の余白*/
	padding-top: 10px;
	font-size: 24px;
/*　文字の左側に、色を付ける　*/
	border-left: solid 18px #730073;
	padding-left: 5px; 
/*　文字の下部に下線として、色を付ける　*/
	border-bottom: solid 2px #730073; 
/*	background-color: #ffd4ff; */
	
}
.article h4 {
/*  background: #B1E2FF; */ /* 水色 */
/*  padding: 0.3em; */ /* 文字周りの余白 */
/*  color: #494949;
  border-radius: 0.5em; */ /* 角の丸み */
    padding-top: 10px;
	font-size: 20px;
/*　文字の左側に、色を付ける　*/
	border-left: solid 12px #6bc6ff;
	padding-left: 10px;
/*　文字の下部に下線として、色を付ける　*/
	border-bottom: solid 1px #6bc6ff;
}
.article h5 {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #494949;
  background: none;
  border-left: solid 5px #FF8ED4; /*ピンク*/
}
.article h6 {
	padding-top: 10px;
	font-size: 24px;
	color: #566732;
	background-color: #f0d4ff;
}
/*************************************************
* 固定ページの新着記事一覧(new_list)を２カラム表示
*************************************************/
.new-entry-cards.fp-new-entry-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
}
.fp-new-entry-cards .new-entry-card-link.a-wrap {
    display: inline-block;
    width: 49.5%;
}

/*　コメント欄 */
.aki {
    padding: 10px 20px;
    margin: 10px;
    background: #ffe4e1;
    background-image: url('/site/wp-content/uploads/2021/08/comment.png');
    background-repeat: no-repeat;
    background-position: right 1px;
    box-shadow: #ffe4e1 0 0 10px 10px;
    -webkit-box-shadow: #ffe4e1 0 0 10px 10px;
    -moz-box-shadow: #ffe4e1 0 0 10px 10px;
}
.note {
    padding: 10px 20px;
    margin: 10px;
    background: #f0d4ff;
    background-repeat: no-repeat;
    background-position: right 1px;
    box-shadow: #ffe4e1 0 0 10px 10px;
    -webkit-box-shadow: #f0d4ff 0 0 10px 10px;
    -moz-box-shadow: #f0d4ff 0 0 10px 10px;
}
.msg {
    padding: 10px 20px;
    margin: 10px;
    background: #ffd48e;
    background-repeat: no-repeat;
    background-position: right 1px;
    box-shadow: #ffd48e 0 0 10px 10px;
    -webkit-box-shadow: #ffd48e 0 0 10px 10px;
    -moz-box-shadow: #ffd48e 0 0 10px 10px;
}
/* 2017/02/01 ボタンのスタイル */
button.style-test {
    font-size: 1.9em;
/*    border-style: none; */
    font-weight: bold;
    padding: 15px 35px;
    color: #fff;    
    background-color: #c66bff;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
button.style-test:hover {
    background-color: #ffaa25;
    color: #fff;
}
/* 2018/03/30 カラーメッセージボタンのスタイル */
button.style-color {
    font-size: 1.9em;
/*    border-style: none; */
    font-weight: bold;
    padding: 15px 35px;
    color: #191970;    
    background-color: #ffff6b;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
button.style-color:hover {
    background-color: #d4ff8e;
    color: #191970;
}
/* 2020/10/22 夢実現メッセージボタンのスタイル */
button.style-self {
    font-size: 1.5em;
/*    border-style: none; */
    font-weight: bold;
    padding: 15px 35px;
    color: #fff;    
    background-color: #ffaa25;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
button.style-self:hover {
    background-color: #6bff8f;
    color: #fff;
}
/* ==================== アロマメッセージ ==================== */
.aroma_msgpost h3	{font-size: 20px;
/*	border-bottom: solid 3px #8bc124; */
	background-image: url('images/body_bg_test.jpg');
	background-color: #ffb1ff;
	padding: 4px 4px 4px 10px;
	margin: 0 0 15px;
	text-align: center;
	line-height: 30px;
}
.aroma_msgpost h3 span	{font-size: 12px;
	color: #888888;
}
/* ==================== カラーメッセージ ==================== */
.color_msgpost h3	{font-size: 20px;
/*	border-bottom: solid 3px #8bc124; */
/*	background-image: url('images/body_bg_test.jpg'); */
	background-color: #ffff6b;
	padding: 4px 4px 4px 10px;
	margin: 0 0 15px;
	text-align: center;
	line-height: 30px;
}
.color_msgpost h3 span	{font-size: 12px;
	color: #888888;
}
/* ==================== self アロマメッセージ ==================== */
.self_msgpost h3	{font-size: 20px;
/*	border-bottom: solid 3px #8bc124; */
/*	background-image: url('images/body_bg_test.jpg'); */
	background-color: #b1ffc7;
	padding: 4px 4px 4px 10px;
	margin: 0 0 15px;
	text-align: center;
	line-height: 30px;
}
.self_msgpost h3 span	{font-size: 12px;
	color: #888888;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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