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

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

/* ◆タイトル　固定ページ非表示 */
.page .entry-title{
  display: none;
}

/* ◆見出しリセット */
/* 見出し1 */
.article h1{
background:none;
padding: 0;
}
/* 見出し2 */
.article h2{
background:none;
padding: 0;
}
/* 見出し3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}
/* 見出し4 */
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
}
/* 見出し5 */
.article h5{
border-bottom:none;
padding: 0;
}
/* 見出し6 */
.article h6{
border-bottom:none;
padding: 0;
}

/* ◆見出し装飾 */
.article h1 {
  position: relative; /* 表示位置指定 */
  font-size: 28px; /* 文字の大きさ */
  color: black; /* 文字色 */
  border-top: solid 3px #a9a9a9; /* 線の種類、太さ、色 */
  border-bottom: solid 3px #a9a9a9; /* 線の種類、太さ、色 */
  padding:10px; /* 要素内の余白 */
}
.article h2 {
  /*線の種類（二重線）太さ 色*/
  font-size: 26px; /* 文字の大きさ */
  border-bottom: double 5px #a9a9a9;
  padding:10px; /* 要素内の余白 */
}
.article h3 {
  font-size: 24px; /* 文字の大きさ */
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #a9a9a9;/*左線*/
}
.article h4 {
  font-size: 22px; /* 文字の大きさ */
  padding: 0.5em 1.0em;/*上下 左右の余白*/
  border: solid 3px #a9a9a9;/*線色*/
  border-radius: 0.5em;/*角丸*/
}
.article h5 {
  font-size: 20px; /* 文字の大きさ */
  /*線の種類（実線） 太さ 色*/
  border-bottom: solid 3px #a9a9a9;
  padding:10px; /* 要素内の余白 */
}
.article h6 {
  font-size: 20px; /* 文字の大きさ */
  /*線の種類（点線）2px 線色*/
  border-bottom: dashed 2px #a9a9a9;
  padding:10px; /* 要素内の余白 */
}

/* ◆アピール画像の表示エリア設定 */
    #appeal .appeal-in{
	height: calc(100vw * 0.26);
    }

/* ◆おすすめカードカスタマイズ
	#recommended .navi-entry-card-title {
	/*必要ならばここにコードを書く*/
	font-weight:bold; 
}

/* ◆エントリーカード・関連記事のラベル非表示 */
.entry-card .cat-label,
.related-entry-card .cat-label{
 display: none;
}

/* ◆カテゴリーラベル非表示 */
/* カテゴリーラベルを非表示 */
.cat-label {
display: none;
}

/* ◆ブログカード設定 */
.blogcard{
border: 2px solid #a2d7dd !important;
background-color: #eaf4fc;/*背景色*/
}
.blogcard:hover{
background-color: #f0ffff;
}
.blogcard-title {
color: #007bbb;/*文字色*/
line-height: 1.5;/*行間*/
font-size: 1.6em;/*文字の大きさ*/
}
.blogcard-snippet {
color: #8f8f8f;
line-height: 1.7;
font-size: 10px;
}
.blogcard{
	position: relative;
	padding-bottom:150px;
}
.internal-blogcard-footer{
	display: none
}
.internal-blogcard-footer{
	display: none
}
.blogcard-snippet {
display: none;
}
.internal-blogcard:after{
	position: absolute;
	bottom: 10px;
	right: 20px;
	font-family: 'Font Awesome 5 free';
	content: 'GO! \f101';
	font-size: 90%;
	font-weight: bold;
	background-color: #2ca9e1;
	color: #FFF; 
	padding: 0.2em 2em;
	border-radius: 2px
}

/* ◆サイドバー設定 */
.sidebar {
　border: 2px solid #5b7e91;
}

/* ◆プロフィール　リンク解除 */
.author-box .author-content .author-name a{
	color: #14171a;
	text-decoration: none;
	pointer-events: none;
}

/* ◆ボックスメニュー設定 */
.box-menus{
margin:2px; /*全体の外側余白*/
}
.box-menu{
border: 1px solid #ea553a; /*枠線の形状・色*/
border-radius: 10px; /*枠線の角丸み*/
padding: 10; /*枠内余白*/
}
.box-menu:hover { /*オンマウス時*/
box-shadow: inset 1px 1px 0 0 #839b5c,
 1px 1px 0 0 #839b5c, 1px 0 0 0 #839b5c;
border-radius: 10px; /*枠線角丸*/
background: #f5f5f5; /*背景色*/
color: #fff; /*文字色*/
}
.box-menu-label{ /*メニューの文字*/
 font-size: 16px; /*文字サイズ*/
 color: #696969; /*文字カラー*/
}
.box-menu-description{ /*説明文の文字*/
 font-size: 12px; /*文字サイズ*/
 color: #696969; /*文字カラー*/
}
.box-menu-icon { /*アイコン*/
font-size: 30px; /*アイコンサイズ*/
color: #ea553a; /*アイコンカラー*/
}

/* ◆アコーディオンのＱ＆Ａを作成 */
.toggle-button {
    background: #fff;
    text-align: left;
    font-weight: bold;
    box-shadow: 0 2px 6px 0px #ddd;
    border: none;
    padding: 1em;
}
.toggle-button::before,
.toggle-checkbox:checked~.toggle-button::before {
    content: '問';
    color: #f89174;
    font-size: 1em;
    margin-right: 1em;
}
.toggle-button::after,
.toggle-checkbox:checked~.toggle-button::after {
    font-family: "Font Awesome 5 Free";
    content: '\f107';
    color: #f89174;
    font-size: 1em;
    font-weight: bold;
    position: absolute;
    right: 2em;
    transition: 0.3s;
}
.toggle-checkbox:checked~.toggle-button::after {
    transition: 0.3s;
    transform: rotate(180deg) translateY(3px);
}
.toggle-checkbox:checked~.toggle-content {
    background: #e5f2ff;	
    margin-top: 10px;
    border: none;
    padding: 1em;
}
.toggle-checkbox:checked~.toggle-content p:first-of-type::before {
    content: '答';
    color: #7499f7;
    font-size: 1em;
    font-weight: bold;
    margin-right: 1em;
}

/* ◆FAQショートコード */
.article dd {
    margin-left: 0;
}
.faq_block .faq_q::before,
.faq_block .faq_a::before {
    color: #fff;
    box-shadow: none;
    border-radius: 50%;
    position: absolute;
    top: .75em;
    left: 0;
    display: block;
    width: 2em;
    line-height: 2;
    text-align: center;
    font-family: Arial,sans-serif;
}
.faq_block .faq_q::before {
    font-weight: 400;
    content: "Q";
    background-color: #d55656;
}
.faq_block .faq_a::before {
    content: "A";
    background-color: #6599b7;
}
.faq_block .faq_q,
.faq_block .faq_a {
    position: relative;
    padding: 0.75em 1em 1em 3em;
    line-height: 1.8;
}
.faq_block .faq_q {
    font-weight: 700;
}
.faq_block .faq_a:not(:last-child) {
    margin-bottom: 1em;
    padding-bottom: 2em;
    border-bottom: solid 1px rgba(200,200,200,.5);
}
.faq_block .faq_q {
    font-weight: 700;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
	.mobile-header-menu-buttons .menu-button {
	background-color: #5b7e91;
	}
	.navi-menu-content{
	background-color: #5b7e91;
	}
	.mobile-menu-buttons .menu-button {
	padding-top: 6px;
	background-color: #5b7e91;
	}
	.mobile-header-menu-buttons .menu-caption {
 	display:none;
	}
	.search-menu-button.menu-button,
	.navi-menu-button.menu-button{
	height: 56px;
	padding-top: 20px;
	}
}

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.mobile-header-menu-buttons .menu-button {
	font-size: 14px;
	}
	.navi-menu-content {
	font-size: 16px;
	}
}