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

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

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

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

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

/* 見出しリセット */
/* H2 */
.article h2{
background:none;
padding: 0;
}
 
/* H3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}
 
/* H4 */
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
}

/* 見出しカスタマイズ */
.article h1 {
    font-size: 22px;
}

.article h2 {
font-size: 22px;
padding: .5em 1em;
background: #dcdcdc; /*内側の色を変更*/
border-top: 3px solid #5a9f25; /*線の色を変更*/
border-bottom: 3px solid #5a9f25; /*線の色を変更*/
}

.article h3 {
    position: relative;
    background: #eee;
    padding: 10px 4px 10px 39px;
    font-size: 20px;
    border-radius: 10px;
    margin: 3em 0 1.5em;
    border: none;
}

.article h3:before {
    font-family: "Font Awesome 5 Free"; /*バージョン指定*/
    content: "\f00c";
    display: inline-block;
    position: absolute;
    padding: 0;
    color: #eee;
    background: #5a9f25;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 41px;
    top: 50%;
    left: -0.4em;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border-radius: 50%;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}

.article h4 {
    position: relative;
    padding-left: 25px;
    border: none;
    font-size: 18px;
    margin-bottom: 1.3em;
    margin-top: 2.4em;
    width: 95%;
}

.article h4:before {
    position: absolute;
    content: '';
    bottom: -3px;
    left: 0;
    width: 0;
    height: 0;
    border: none;
    border-left: solid 15px transparent;
    border-bottom: solid 15px#5a9f25 ;
}

.article h4:after {
    position: absolute;
    content: '';
    bottom: -3px;
    left: 10px;
    width: 100%;
    border-bottom: solid 3px #5a9f25;
}

/* 固定ページの日時を非表示 */
.page .date-tags{ /*投稿日・更新日*/
display: none;
}

/* テーブルカスタマイズ */
table th {
   border: 1px solid #888;
   background: #cbdfe8;
}
table td {
   border: 1px solid #888;
   background: #fff;
}
table {
	font-size: 15px;
}

/* サイドカスタマイズ */
.sidebar h3 {
  border-bottom: 3px solid #5a9f25;
}

/*親カテゴリーのカスタマイズ*/
.widget_categories ul li a{ 
	margin: 0;
    position: relative;
    border-bottom: dotted 2px #aaa;
	padding: 0.5em;
}
.widget_categories ul li a::before{
  font-family: "Font Awesome 5 Free"; /*バージョン指定*/
  content: "\f152"; /* FontAwesomeのユニコード */
  color: #aaa; /* アイコンの色 */
  padding-right: 6px; /*アイコン右側空間*/
  font-weight: 900; /*アイコンの太さ*/
}

.widget_categories > ul > li > a:first-child{ 
  border-top: none; /*最初の親カテゴリは上部ボーダーを消す*/
}

#appreach-box{
	width:80%;
}

/*マーカー*/
.marker {
  background-color: #ff9;
}
.marker-red {
  background-color: #ffd0d1;
}
.marker-blue {
  background-color: #a8dafb;
}
/*下半分のマーカー色（km）*/
.marker-under {
  background: linear-gradient(transparent 60%, #fcd8b1 60%);
}
.marker-under-red {
  background: linear-gradient(transparent 60%, #ffd0d1 60%);
}
.marker-under-blue {
  background: linear-gradient(transparent 60%, #a8dafb 60%);
}

/************************************
** ■スマホ時のタイトルロゴのサイズ設定
************************************/
@media screen and (max-width: 1240px){
  .logo img {
    width: 200px !important; /*ロゴ横サイズ*/
  }
}

/* サムネイル画像にふんわり拡大アニメーション */
.entry-card-thumb img,
.related-entry-thumb img,
.widget-entry-card-thumb img {
  transition: transform 0.4s ease;
}

.entry-card-thumb:hover img,
.related-entry-thumb:hover img,
.widget-entry-card-thumb:hover img {
  transform: scale(1.05);
}