@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.0
*/

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

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

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
.eye-catch img{
  margin: 0 auto;
}

/* 目次全体デザイン */
.toc{
    background:#F9F9F9; /* 目次全体の背景色を変える場合はここを変更 */
    border:none;
    display:block;
    border-top:5px solid;
    border-top-color:#FFC679;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
    padding: 20px 25px;
}
/* 目次の文字指定 */
.toc-title {
    text-align:left;
    margin: 0 20px 20px -10px;
    padding-left: -20px;
    font-size: 23px;
    font-weight: 700;
    color: #FFC679; /* 目次の文字色を変える場合はここを変更 */
}
/* 目次のアイコン設定 */
.toc-title:before {
    top: 0;
    left: -45px;
    width: 50px;
    height: 50px;
    font-family: FontAwesome;
    content : "\f0ca"; /* アイコンを変える場合はここを変更 */
    font-size:20px;
    margin-right:5px;
    color:#FFF; /* アイコンの色を変える場合はここを変更 */
    background-color:#FFC679; /* アイコンの背景色を変える場合はここを変更 */
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding:14px;
}
/* 目次のデザインカスタマイズ */
.toc-content ol {
    padding: 0 0.5em;
    position: relative;
}
.toc-content ol li {
    line-height: 1.5;
    padding: 0.7em 0 0.5em 1.4em;
    border-bottom: dashed 1px silver;
    list-style-type: none!important;
}
/* 目次の各節の先頭にあるアイコンを設定 */
.toc-content ol li:before {
    font-family: FontAwesome;
    content: "\f138"; /* アイコンを変える場合はここを変更 */
    position: absolute;
    left : 0.5em;
    color: #FFC679; /* 色を変える場合はここを変更 */
}
.toc-content ol li:last-of-type {
    border-bottom: none;
}
.toc-content .toc-list li {
    font-weight:700; /* h2のみ太文字に */
}
.toc-content .toc-list li li {
    font-weight:normal; /* h3以降の文字サイズを普通に */
}

/*サイドバーのデザイン*/
.sidebar h3{
  background-color:#e8a85f;/*好きな背景色にする*/
  padding:5px;
  margin:16px 0;
  border-radius: 7px;
  text-align:center;
}

/* 投稿日付を非表示　*/
.post-date {
    display:none;
}

/*h1とh2とh3とh4とh5のカスタマイズ*/
h1 {
   position: relative;
   padding: .75em 1em .75em 1.5em;
   border: 1px solid #e8a85f;
}

.article h2 {
    position:relative;
    background: #e8a85f;/* 背景色 */
    color: #fff;/* 文字色 */
    font-size: 125%;/* 文字サイズ */
    font-weight: 700;/* 太さ */
    padding: 16px;
    margin-top: 2.1em;
    margin-bottom: 1em;
    -webkit-border-radius: 3px;
    border-radius: 7px;/* 丸み */
    box-shadow: 0 1px 5px rgba(0,0,0,.03);
}
.article h2:before {
    position: absolute;
    left: 40px;/* 吹き出し位置左右 */
    bottom: -12px;/* 上下*/
    border-top: 12px solid #e8a85f;/* 色 */
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 0;
    content: "";
}
.article h3 {
    border: none;
    padding: 0;
}
.article h3 {
  padding: 16px;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  font-size: 125%;/* 文字サイズ */
  background: #fffaf4;/*背景色*/
  border-left: solid 5px #e8a85f;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
}
.article h4 {
	border: none;
    padding: 0;
    background: none;
	border-top: none;
    border-bottom: none;
}
.article h4 {
   padding: 16px;/*文字の上下 左右の余白*/
   color: #494949;/*文字色*/
   font-size: 125%;/* 文字サイズ */
   background: transparent;/*背景透明に*/
   border-left: solid 5px #e8a85f;/*左線*/
  
}
.article h5{
    padding: 1em 1.5em;
    margin: 2em 0;
    background-color: #fff4ea;/*背景色*/
    box-shadow: 0 0 0 8px #fff4ea;/*背景色外側*/
    border: 2px dashed #ffbf7f;/*線*/
    border-radius: 8px;/*角の丸み*/
    color: #000000;/*文字色*/
}

/* ブログカードに続きはこちらを挿入　*/
.internal-blogcard:after,.external-blogcard:after{
font-family: "FontAwesome";
content: "…続きはこちら \f14d";
font-weight: bold;
font-size: .8em;
color: #ffffff;
padding: .5em;
border-radius: 4px;
width: 45%;
background-color: #e8a85f;
margin-left: auto;
text-align: center;
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
}

/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{
display: none;
}
/*フロント固定ページの投稿日を非表示*/
.home.page .post-date{
display: none;
}
/*フロント固定ページの更新日を非表示*/
.home.page .post-update{
display: none;
}
/*フロント固定ページの投稿者名を非表示*/
.home.page .author-info{
display: none;
}

@media screen and (max-width: 480px){
	/* モバイル版グローバルメニューを横並びに */
	ul.menu-mobile{
		overflow-x: auto;
		overflow-y: hidden;
		display: flex !important;
		flex-wrap: nowrap;
		font-size: 14px;
		justify-content: flex-start;
		padding: 0 1em;
		-webkit-overflow-scrolling: touch;
		position: relative;
	}

	ul.menu-mobile > li{
		padding-right: 1em;
		white-space: nowrap;
	}
	ul.menu-mobile　.item-label{
		white-space: nowrap;
		font-size: 14px;
	}	
	
/* スライドイン背景色（モバイル） */
.mobile-menu-buttons {
background: rgba(73,73,73,0.9); /* RGBA形式 */
}
.menu-button,
.mobile-menu-buttons .menu-button > a {
    color: #ffffff;
}