@charset "UTF-8";
/*
  Skin Name: hakodate-skins
  Description: コミュニティはこだて
  Skin URI: https://wp-cocoon.com/
  Author: かねひら
  Author URI: https://nelog.jp/
  Screenshot URI: https://community-h.com/wp-content/themes/cocoon-child-master/skins/hakodate-skin/images/hakodate-skin.png
  Version: 0.0.1
  Priority: 10
*/

/*以下にスタイルシートを記入してください*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*---------------------------------
グローバルナビ（メニュー）の高さ（縦幅）
---------------------------------*/
.navi-in>ul li {
  height: auto;
  line-height: normal;
}

/* ナビメニュー 文字*/
#navi {
font-weight: bold; /* 太文字 */
/*text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* 影 */
}

/************************************
** 見出し、投稿・固定ページで使うHTML要素
************************************/
.article h1 {
	line-height: 1.25;
	font-size: 22px;
	border-bottom: solid 3px #00A0E9;
	background-color: #E6F7FF;
	padding: 10px 10px;
	margin: 6px 0 12px;
	/*border-top: dotted 2px #9d9d9d;*/
}

/*.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
  line-height: 1.25;
  font-weight: bold;
}
.article h2, .article h3, .article h4, .article h5, .article h6 {
  margin: 2.4em 0 1em;
}
.article h4, .article h5, .article h6 {
  font-size: 20px;
  padding: 9px 10px;
}*/

.article h2 {
	font-size: 24px;
	padding: 25px;
	background-color: #008000; /*#E6F7FF;*/
	color: #ffffff;
	border-radius: 2px;
}
.article h3 {
	font-size: 22px;
	padding: 12px 20px;
    background-color: #E6F7FF;
	border-left: 7px solid #00A0E9;
	border-right: 1px solid #00A0E9;
	border-top: 1px solid #00A0E9;
	border-bottom: 1px solid #00A0E9;
}
.article h4 {
	border-top: 2px solid #00A0E9;
	border-bottom: 2px solid #00A0E9;
    background-color: #E6F7FF;
	padding-left: 66px;

}
.article h5 {
	border-bottom: 2px solid #00A0E9;
}
.article h6 {
	border-bottom: 1px solid #00A0E9;
}
.article .column-wrap h1, .article .column-wrap h2, .article .column-wrap h3, .article .column-wrap h4, .article .column-wrap h5, .article .column-wrap h6 {
	margin-top: 0;
}

/************************************
** 目次のカスタマイズ
** https://sec.ayaito.net/cocoon/customize/345/
************************************/

/* 目次全体枠 */
.toc{
	border-top:5px solid; color:#839b5c;
	border-bottom:3px solid; color:#839b5c;
	border-left:.5px solid; color:#839b5c;
	border-right:.5px solid; color:#839b5c;
	/*border: solid 1px #E9F5F3; 枠線の種類　太さ　色*/
	padding: 20px;
	border-radius:8px; /*角丸め（pxまたは%で指定）*/
	/*background-color: #EDF6FF; 背景の色*/
	}
/* 目次アイコン */
.toc-title:before {
	width: 40px;
	height: 40px;
	font-family: "Font Awesome 5 Free";
	content : "\f03a";
	font-size:18px;
	margin-right:8px;
	color:#FFF;
	background-color:#839b5c;
	border-radius: 50%;
	padding:10px;
	}
/* 目次の文字 */
.toc-title {
	text-align:left;
	font-size: 20px;
	text-align: center;
	font-weight: 600;
	color: #839b5c;
	}
/*見出し2（H2）の設定*/
.toc-content > .toc-list > li:before { 
	font-family: "Font Awesome 5 Free";
	content: "\f35a";
	font-weight: 900;
	color: #839b5c;
	padding-right:8px;
	}
.toc-content .toc-list li {
	font-weight:600;
	}
/*H3以降の文字サイズ*/
.toc-content .toc-list li li {
	font-weight:normal;
	}

/************************************
** cocoonボックスパターン
** https://ponhiro.com/cocoon-box-design/
************************************/
.box5-blue {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	max-width:600px; /* ボックスの横幅 */
	margin: 2em auto;	/* ボックスの外側余白(上下:2em　左右:auto) */
	padding: 2em 2em 1.7em;	/* ボックスの内側余白(上:2em　左右:2em 下：1.7em) */
	border: 1px solid #0e7ac4;	/* ボックスの線 (太さ　線の種類　線の色)*/
	border-radius: 4px;	/* ボックスの角丸 */
	background: #e6f1f9; /* ボックス背景色 */
}
.box5-blue .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
	top: -18px; /* 上から（-18px）移動*/
	left: 27px; /* 左から(27px)移動 */
	background: #0e7ac4; /* タイトル背景色 */
	color: #fff; /* タイトル文字色 */
	padding: 0.6em 1em;/* タイトルの内側余白 */
	line-height: 1;/* タイトルの行の高さ */
	font-size: 17px;/* タイトル文字の大きさ */
	font-weight: bold;/* タイトル文字の太さ */
	border-radius:4px;/* タイトルの角丸 */
}
.box5-blue p {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
}

/************************************
** サイドバーのカスタマイズ
** https://yuzuyu3.com/cocoon-sidebar-custom/
************************************/
.sidebar h3{
	line-height: 1.25;
	font-size: 22px;
	border-bottom:3px solid #00A0E9;/*下線の太さ、種類、色*/
	background-color:#E6F7FF;/*好きな背景色にする*/
	padding:10px 10px;
	margin: 6px 0 12px;
	/*color:#ffffff;好きな文字色にする*/
}

/************************************
** ブログカードのカスタマイズ
** https://
************************************/

/************************************
** エントリーカードのカスタマイズ
** https://mainamain.net/cocoon-customize-entry-card-css-animation/
************************************/
.ect-vertical-card .entry-card-wrap {
margin-bottom: 24px;
}
.entry-card-wrap {
/*background-color: #afc5dc; 背景色*/
border: solid 1px #333; /*枠線形状・色*/
border-radius:8px; /*角丸め（pxまたは%で指定）*/
border:1px #d2d6d6;
box-shadow: 3px 3px 3px 3px #d2d6d6
}
.entry-card-wrap a {
transition: color .3s, background.3s, box-shadow .3s, transform .3s;
}
.entry-card-wrap:hover {
background: #efffff;/*カードの色*/
box-shadow: 0 3px 0 #d2d6d6, 0 6px 0 rgba(0,0,0,.2);
transform: translateY(3px);
}
.entry-card-wrap a:active {
transition-duration: .1s;
}
/*.entry-card .cat-label{
display: none;
}*/
.eye-catch .cat-label {
border-radius: 5px;
}

/************************************
** 関連記事エントリーカードのカスタマイズ
** https://mainamain.net/cocoon-customize-entry-card-css-animation/
** https://yujiblog.org/cocoon-related-article
************************************/
.ect-vertical-card .related-entry-card-wrap {
margin-bottom: 10px;
}
.related-entry-card-wrap {
/*background-color: #afc5dc; 背景色*/
border: solid 1px #333; /*枠線形状・色*/
border-radius:8px; /*角丸め（pxまたは%で指定）*/
border:1px #d2d6d6;
box-shadow: 3px 3px 3px 3px #d2d6d6
}
.related-entry-card-wrap a {
transition: color .3s, background.3s, box-shadow .3s, transform .3s;
}
.related-entry-card-wrap:hover {
background: #efffff;/*カードの色*/
box-shadow: 0 3px 0 #d2d6d6, 0 6px 0 rgba(0,0,0,.2);
transform: translateY(3px);
}
.related-entry-card-wrap a:active {
transition-duration: .1s;
}
/*.entry-card .cat-label{
display: none;
}*/
.eye-catch .cat-label {
border-radius: 5px;
}

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

/*834px以下*/
@media screen and (max-width: 834px){
  /*エントリーカード*/
	.entry-card-wrap {
		background-color: #E6F7FF; /*背景色*/
		border: solid 1px #333; /*枠線形状・色*/
		border-radius:8px; /*角丸め（pxまたは%で指定）*/
	}
	.related-entry-card-wrap {
		background-color: #E6F7FF; /*背景色*/
		/*background-color: #afc5dc; 背景色*/
		border: solid 1px #333; /*枠線形状・色*/
		border-radius:8px; /*角丸め（pxまたは%で指定）*/
	}
  /*必要ならばここにコードを書く*/
}

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


/*検索結果ページにSNSボタンや日付などは不要のとき*/
.date-tags, #content .sns-share, .article-footer /*, .breadcrumb*/{
    display: none;
}

/************************************
** フッターの位置変更（左・真ん中・右の３カラムの場合）
************************************
.footer-left {
	width: 40%;
}

.footer-center,
.footer-right {
	width: 30%;
}*/

/* 上下に余白を持たせる */
.footer {
 padding: 40px 0;
}
/* レスポンシブサイズ用の余白 */
@media screen and (max-width: 834px) {
.footer {
 padding: 30px 0;
 }
}
/* 不要な余白をリセット */
.footer-bottom {
 margin-top: 0;
}
/* 不要な余白をリセット */
.copyright {
 margin-top: 10px;
}

/************************************
** フッターのサイトマップ変更
************************************/