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

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

.sidebar {
font-size: 0.9em;
}

.speech-wrap {
  font-size: 0.9em;
}

/*グローバルメニュー 文字の大きさを変更*/
#navi .navi-in > .menu-header .item-label{
	font-size: 14px;
}

/*マウスオーバー時のメニューの色を変更*/
#navi .navi-in a:hover{
	color: #000000!important;
	background: white;
	transition: all 0.5s ease;
}

.marker {background-color: #fff896; }

.marker-under {
background: linear-gradient(transparent 60%, #fff896 60%);
}

.article h2{
  padding: 0.5em;/*文字周りの余白*/
  background: #d0f2d7;/*背景色*/
  border-bottom: solid 3px #00bf63;/*下線*/
  margin-top: 2.5em;
}

.article h3 {
  margin-top: 2em;
}

.article h4 {
  font-size: 20px !important;/*文字のサイズ*/
	color: #00bf63;/*文字色*/
  border-bottom: 1px solid #00bf63;/*下線*/
  margin-top: .5em;
  padding-bottom: .5em;
  margin-bottom: 15px;
  border-top: none;
}

.article h5 {
  font-size: 20px !important;/*文字のサイズ*/
	color: #00bf63;/*文字色*/
  border-bottom: 1px solid #00bf63;/*下線*/
  padding-bottom: .5em;
  margin-bottom: 15px;
  border-top: none;
}

.article h6 {
  font-size: 20px !important;/*文字のサイズ*/
  border-left: 3px solid #00bf63;/*左線*/
  padding: .5em .7em;/*余白*/
  margin-bottom: 15px;
  border-top: none;
  border-bottom: none;
}

.toc-title {
	font-weight:bolder;
}

.toc {
	width: 70%;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
	border-top: 10px solid #cccccc;
	border-color: #cccccc !important;
	margin-bottom: 3em !important;
}

.toc-list > li a {
font-weight: bold;
display:block;
margin-top:10px;
margin-left: 10px;
}

.toc-list > li a::before {
font-family: "Font Awesome 5 Free";
content : "\f0da";
margin-right: 7px;
}

.toc-list > li li a {
font-weight: normal;
margin-top:0;
margin-left: 2em;
}

.toc-list > li li a::before {
	content: "";
	width: 7px;
	height: 7px;
left: -2px;
display: inline-block;
border-radius: 50%;
background: #00bf63;/*こちらで緑点の色を変更できます*/
position: relative;
margin-bottom: 2px;
}

.toc-list > li li li a::before {
content: "";
width: 7px;
height: 7px;
left: -2px;
display: inline-block;
border-radius: 50%;
background: #cccccc;/*こちらで緑点の色を変更できます*/
position: relative;
margin-bottom: 2px;
}

a.btn {
	background-color: #d0f2d7;
	color: black;
	border: 1px solid #00bf63;
}

.wpcf7-form input[type="submit"] {
	border: 2px solid #00bf63;
	background-color: #d0f2d7;
	font-weight: bold;
}

.wpcf7-form input[type="submit"]:hover {
	color: white;
}
  
.font-bold {
  font-weight: bold;
}

.font-large {
  font-size: larger;
}

.font-small {
  font-size: smaller;
}

span.marker-green {
  background: linear-gradient(transparent 80%, #1EAA39 100%);
  font-size: larger;
}

.font-green {
  color: #1EAA39;	
}

.font-white {
  color: white;	
}
  
span.marker-yellow {
  background: linear-gradient(transparent 60%, #ff9 60%);
  font-weight: bold;
}

span.line-yellow {
  background: linear-gradient(transparent 60%, #ff9 60%);
}
  
.box-heading {
  display: inline-block;
  background: #1EAA39;
  padding: 3px 10px;
  color: #ffffff;
}
  
.box-text {
  padding: 15px;
  border: 2px solid #1EAA39;
}

.emphasis_design {
text-emphasis: circle #1EAA39;
}

.recommend-place {
position: relative;
background: #D0F2D7;
padding: 1em 1em;
margin: 1em 0em;
line-height: 1.5em;
border-left: solid 2em #1EAA39;
}

.recommend-place:before {
font-family: "Font Awesome 5 Free";
content: "\f303";
position: absolute;
padding: 0em;
color: white;
font-weight: 900;
left: -1.35em;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

.list-tit {
font-weight: bold;
margin: 0;
padding: .5em;
 text-align: left;
}

.list-tit span {
padding: 0 6px;
}

.list-box {
border-radius: 5px;
box-shadow: 0 0 10px 1px #d7d7d7;
padding: 1em;
}

.list-design {
display: block;
list-style: none;
margin: 0;
padding: 0 .5em;
width: initial;
}

.list-design li {
border-bottom: 1px dashed #b9b9b9;
padding: .5em 0;
}

.emphasis_design11 span {
position: relative;
padding: 0 .5em;
margin: 0 .3em;
}
.emphasis_design11 span::before,
.emphasis_design11 span::after {
position: absolute;
width: 20px;
height: 30px;
content: '';
}
.emphasis_design11 span::before {
border-left: double 5px #4d9bc1;
border-top: double 5px #4d9bc1;
top: 0;
left: 0;
}
.emphasis_design11 span::after {
border-right: double 5px #4d9bc1;
border-bottom: double 5px #4d9bc1;
bottom: 0;
right: 0;
}

.balloon-right {
position: relative;
display: inline-block;
margin: 1.5em 15px 1.5em 0;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
color: #000;
background: #f5f5f5;
}

.balloon-right:before {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -15px;
border: 15px solid transparent;
border-left: 15px solid #f5f5f5;
}

.balloon-right p {
margin: 0;
padding: 10px;
}

.required {
font-size: 0.8em;
padding: 3px;
background: #cc0000;
color: #ffffff;
border-radius: 2px;
margin-right: 10px;
margin-bottom: 2px;
display: inline-block;
}

.box-gray{
	font-size:0.9em;
	padding:2em;/*内側の余白*/
	background: none;/*元のボックス背景色なし*/
	border:1px solid white ;/*線の太さ・種類・色*/
	position: relative;/*配置（基準）*/
}
.box-gray:after{
	background-color:#d0f2d7;/*ずらしたボックスの背景色*/
	border:none;
	content: '';
	position: absolute;/*配置（ここを動かす）*/
	top: 7px;/*上から7pxずらす*/
	left: 7px;/*左から7pxずらす*/
	width: 100%;
	height: 100%;
	z-index: -1;
}

@media (min-width: 769px) {
.mb-only {
  display: none;
}
}

@media screen and (max-width: 768px) {
.pc-only {
  display: none;
}
.toc {
  width: 100%;
}
}

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

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

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