@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*ロゴとメニュースキマ削除＆ロゴ左*/
.logo-image * {
  display: block;
}
 

/*2021.05.29*/
.page .sns-share,
.page .sns-follow {
    display: none;
}

/*2021.05.29全てをまとめて非表示*/
.home.page .entry-title,
.home.page .sns-share,
.home.page .sns-follow,
.home.page .date-tags,
.home.page .author-info{
  display: none;
}


/************************************
** SNS ボタンをまとめて丸くする
************************************/

/*シェア・フォローボタンの枠組み*/
.sns-share.ss-top .sns-share-buttons,
.sns-share.ss-bottom .sns-share-buttons,
.sns-follow.sf-bottom .sns-follow-buttons,
.sns-follow.sf-widget .sns-follow-buttons {
	justify-content: center; /*中央に寄せる*/
	flex-wrap: wrap; /*折り返す*/
}

/*シェア・フォローボタンのリンク*/
.sns-share.ss-top .sns-buttons a,
.sns-share.ss-bottom .sns-buttons a,
.sns-follow.sf-bottom .sns-buttons a,
.sns-follow.sf-widget .sns-buttons a {
	width: 40px; /*横幅*/
	height: 40px; /*高さ*/
	margin-right: 4px; /*右側の余白*/
	margin-left: 4px; /*左側の余白*/
	border-radius: 50%; /*丸み*/
}

/*プロフィールウィジェットのリンク*/
.sns-follow.sf-profile .sns-buttons a {
	border-radius: 50%; /*丸み*/
}

/*シェアボタンのアイコン*/
.sns-share.ss-top .sns-buttons a .social-icon,
.sns-share.ss-bottom .sns-buttons a .social-icon {
	font-size: 18px; /*アイコンの大きさ*/
}

/*フォローボタンのアイコン*/
.sns-follow.sf-bottom .sns-follow-buttons .follow-button,
.sns-follow.sf-widget .sns-follow-buttons .follow-button {
	font-size: 24px; /*アイコンの大きさ*/
}

/*シェアボタンのキャプション*/
.sns-share.ss-top .sns-buttons a .button-caption,
.sns-share.ss-bottom .sns-buttons a .button-caption {
	display: none; /*非表示*/
}

/*シェア・フォローボタンのシェア数*/
.sns-share.ss-top .sns-buttons a .share-count,
.sns-share.ss-bottom .sns-buttons a .share-count,
.sns-follow.sf-bottom .sns-buttons a .follow-count,
.sns-follow.sf-widget .sns-buttons a .follow-count {
	right: -2px; /*右側からの距離*/
	bottom: -2px; /*下側からの距離*/
	padding: 2px; /*内側の余白*/
	font-size: 10px; /*文字の大きさ*/
	border: solid 1px; /*線*/
	border-radius: 3px; /*丸み*/
	background-color: inherit; /*背景色*/
}

/*シェア数の表示が必要ないシェア・フォローボタン*/
.sns-share.ss-top .sns-buttons a .share-count:empty,
.sns-share.ss-bottom .sns-buttons a .share-count:empty,
.sns-follow.sf-bottom .sns-buttons a .follow-count:empty,
.sns-follow.sf-widget .sns-buttons a .follow-count:empty {
	padding: 0; /*内側の余白*/
	border: 0; /*線*/
}


/************************************
** ブログカードをすっきり　20216.27
************************************/
.blogcard-snippet,
.blogcard-footer {
  display: none;
}
.blogcard-wrap {
  transition: all .3s;
  max-width: 600px;
/*  margin: 2em auto;*/
}
.blogcard {
  border:1px solid #eaeaea !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
  padding: 10px;
}
.blogcard-wrap:hover {
  background: none;
  transform: translateY(-3px);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, .1);
}
.blogcard-thumbnail {
  margin: 0;
}
.blogcard-thumbnail img {
  display: block;
}
.blogcard-title {
  color: #555;
  letter-spacing: 0.5px;
  font-size: 15px;
  line-height: 1.5;
  margin: 10px 0 0 0;
  height: 45px;
  overflow: hidden;
}
.blogcard-content {
  min-height: auto;
  margin-left: 185px;
  padding-right: 6px;
}
.blogcard-label {
  top: -11px;
  left: 9px;
  padding: 3px 0.6em;
  background:#aaa;
  padding: 1px 10px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1px;
}
.blogcard-content:after {
  content: "クリックして読む";
  background: #003989; /* 背景色 */
  display: block;
  text-align: center;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  width: 180px;
  border-radius: 20px;
  font-size: 13px;
  padding: 1px 0;
  margin-top: 6px;
}
@media screen and (max-width: 834px) {
  .blogcard-content {
    margin-left: 130px;
  }
  .blogcard-title {
    font-size:12px;
    line-height: 1.5;
    height: 80px;
    margin:0;
  }
  .blogcard-content:after {
    content: "タップして読む";
  }
  .blogcard-thumbnail{
    width:120px;
  }
}
@media screen and (max-width: 560px) {
  .blogcard-content:after {
    width: 120px;
    font-size: 12px;
  }
  .blogcard-title {
    margin:0;
  }
}
@media screen and (max-width: 320px) {
  .blogcard-thumbnail {
    width: 100px;
  }
  .blogcard-content {
    margin-left: 110px;
  }
  .blogcard-title {
    height: 35px;
  }
}





/***  トップページのアイキャッチ　カテゴリ非表示 2021.07.08 ***/
.cat-label {
display: none;
}


/***********************************
** 目次ｸﾘｯｸで飛ぶ時に見出しが見やすい位置調整
***********************************/
span[id^="toc"] {
padding-top: 4.0em;  /* 数値変更で調整可能 */
}




/* ボックスメニューの設定 */
.box-menu-icon {
color: #003989;/* アイコンの色 */
}

.box-menu-label{
	color: #003989;

}

.box-menu:hover {
    box-shadow: inset 2px 2px 0 0 
#b60081,2px 2px 0 0 #b60081,2px 0 0 0 #b60081,0 2px 0 0
    #b60081;
} 


/*h2をカスタマイズ */
.article h2 {
  color: #ffffff;/*文字色*/
  font-size: 22px;/*文字の大きさ18px*/
  background: #003989;/*背景色*/
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 0.2em;/*角丸*/
}

/*H3をリセット */
.entry-content h3{
border:none;
background:none;
padding: 0;
}

/*h3をカスタマイズ */
.article h3 {
  border: none;
  padding: 0.3em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background:#EFF5FF;/*背景色*/
  border-left: solid 5px #003989;/*左線（実線 太さ 色）*/
}


/*サイドバーh3をカスタマイズ */
.sidebar h3 {
  background: none;
  font-size: 22px;
  letter-spacing: 2px;
  display: inline-block;
  position: relative;
  width: 100%;
  padding: 0;
  text-align: center;
  color: #003989; /* サイドバータイトルの色を指定 */
}
.sidebar h3::before,
.sidebar h3::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 25%;
  border-top: 1px solid #003989; /* サイドバータイトル横のバーの色を指定 */
}
.sidebar h3::before {
  left: 0;
}
.sidebar h3::after {
  right: 0;
}

/* 見出し4 リセット*/
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
}
/*h4をカスタマイズ */
.article h4 {
  position: relative;
  padding: 0.5em 0.5em 0.2em 1.3em;
  border-bottom: none;
  border-top: none;
  color: #003989;
 
}
.article h4:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0c8";
  position: absolute;
  font-size: 1.0em;
  left : 0.2em;/*アイコンの位置*/
  top: 0.45em;/*アイコンの位置*/
  color: #003989;
  padding-top: 0;
}


/* ホームボタンの色 */
.mobile-menu-buttons .home-menu-button > a {
color: #b60081;
}



/*-----------------------------------
 * リンク（下線表示）2022.6.6
-----------------------------------*/
.entry-content a {
	text-decoration: none;
}
.entry-content a:hover {
	text-decoration: underline;
}

.sample-button:hover{
  box-shadow:none;
  text-decoration:none;
}



/************************************
**　　グローバルナビメニュー 
************************************/
/*マウスオーバーでアンダーライン*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 10px;/*線の位置*/
bottom: 10px;/*線の位置*/
height: 2px;/*線の高さ*/
width: 80%;/*線の幅*/
background: #ffffff;/*線の色*/
transform: scale(0,1);/*マウスオーバーの前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/
}

#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}




/*バッジ1*/
.badge1-red, .badge1-grey, .badge1-blue, .badge1-green, .badge1-light-green, .badge1-indigo, .badge1-pink {
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  font-size: 13px;
}

.badge1-red {background-color: #F0284F;}
.badge1-grey {background-color: #949495;}
.badge1-blue {background-color: #8AB9FE;}
.badge1-green {background-color: #008A0B;}
.badge1-light-green {background-color:#628A45;}
.badge1-indigo {background-color: #1e50a2;}
.badge1-pink {background-color: #b60081 ;}

/*バッジ2*/
.badge2-orange {
  color: #fff;
  padding: 2px;
  border-radius: 2px;
  font-size: 12px;
}
.badge2-orange {background-color: #ea5506;}

/*バッジ ピンク拡大、イオンレッドに変更*/
.badge-pink{
padding: 5px;
border-radius: 5px;
font-size: 13px;
}
/*.badge{background-color: #f0c886;}*/
.badge-pink{background-color: #b60081;}

/*バッジ イオンレッド*/
.badge-aeonred {
  color: #fff;
  padding: 1px 5px 0;
  border-radius: 2px;
  font-size: 12px;
}
.badge-aeonred {background-color: #b60081;}

/*バッジ レッド*/
.badge-red {background-color: #F0284F;} 
}

/*バッジ-ライン*/
.badge-line-green, .badge-line-aeonred {
  font-size: 13px;
  border-radius: 5px;
}
.badge-line-green {border: solid 1px #384D38; color: #384D38; padding: 5px;}
.badge-line-aeonred {border: solid 1px #b60081; color: #b60081; padding: 5px 11px;}


/*タイトルボックス2(早わかり記事に使用）*/
.title-box2{
  margin: 1em 0;
  padding: 1.5em 1em 1em;
  position: relative;
  border: 1px solid #eff5ff;
  border-radius: 5px;
  background-color: #eff5ff;
  color: #39466A;
  font-weight: bold;
}

.title-box2-title{
  position: absolute;
  top: -0.8em;
  left: 20px;
  font-weight: 400;
  font-size: 1.0em;
  background: #F6AB00;
  color: #fff;
  padding: 0 0.5em;
  border-radius: 5px;
}

.title-box2 p{
  margin: 0;
  padding: 0;
}


/*アンダーライン*/
.under1 {
  border-bottom: solid 2px #333333;
}


/*トップページ　カテゴリ一覧　タイトル*/
.list-title{
color:#003989; /*文字色*/
padding:5px; /*余白*/
font-size:22px; /*文字サイズ*/
font-weight: 700; /*太字*/
}
.list-title-in:before,
.list-title-in:after {
background-color:#003989; /*前後の線の色*/
}


/*サイドバー目次*/
.widget_toc{
	overflow-y:scroll;/*縦方向スクロールを設置*/
	max-height: 390px; /* 目次の高さ上限*/
}
/*サイドバー目次スクロールバー調整（webkitを採用しているブラウザ）*/
.widget_toc::-webkit-scrollbar {
	width: 10px;/*幅*/
}
.widget_toc::-webkit-scrollbar-track {
	background: transparent;/*背景色を消す*/
}
.widget_toc::-webkit-scrollbar-thumb {
	background: #ccc;/*可動部のみ背景色を付ける*/
	border-radius: 10px;
}

/*fontawesomeマーカー,ブックマーク,トライアングルの色指定*/
.color_red {
color: #F0284F;
}

.color_blue {
color: #004ab3;
}

.color_aeonred {
color: #b60081;
}

.color_green {
color: #628A45;
}

.color_gold {
color: #B68933;
}

.color_lime {
color: #C3D825;
}

.color_orange {
color: #EA5506;
}

.color_dark-blue {
color: #0a0a66;
}


/*fontawesome分野別ブックマークの色指定*/
.strategy-color {color: #a02020}
.management-color {color: #6C2850}
.technology-color {color: #2172A6}


/*太字の色変更*/
.bold-red {
    color: #F0284F;
}

.bold-blue {
    color: #004ab3;
}


/*モバイルヘッダーメニューの横スライド（サルワカ）  */
#header-container .navi-in > ul li {
   height: auto;
   font-weight: 600;
   line-height:1.3;
}
#header-container #navi a{
   color:#fff; /* 文字色 */
   padding:0.8em 1em;
}
#header-container #navi a:hover{
   color:#89c997; /* マウスホバー時の文字色 */
}
#header-container .navi-in > ul > .menu-item-has-children > a::after {
   top: 0.8em;
   font-size: 1.2em;
   font-weight: 600;
}
#header-container .sub-menu .caption-wrap{
   padding-left:1em;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap{
   height:auto;
}
@media screen and (max-width: 1030px){
	#header-container .menu-mobile{
		display:none;
	}
	.navi-in > .menu-mobile{
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		overflow-x: scroll;
		white-space: nowrap;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		flex-wrap: nowrap;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
	}
	#header-container #navi a{
		font-size:0.8em;
		padding: 0.6em 0.9em;
	}
	#header-container .navi-in > ul > .menu-item-has-children > a::after{
		display:none;
	}
	#navi .navi-in > .menu-mobile li {
		height: auto;
		line-height: 1.8;
	}
	.mblt-header-mobile-buttons {
		margin-top: 53px;
	}
}

/*問題選択のボタン*/
/*ボタン共通の書式*/
.right-btn1 a, .left-btn1 a, .center-btn1 a, .right-btn2s a, .left-btn2s a, .center-btn2s a, .right-btn2m a, .left-btn2m a, .center-btn2m a, .right-btn2t a, .left-btn2t a, .center-btn2t a, .right-btn3 a, .left-btn3 a {
	border-radius: 100vh;
	position: relative;
 	display: block;
	text-align: center;
    align-items: center;
	padding: 3px 6px;
	margin: 0 auto;
	max-width: 350px;
	text-decoration: none;
    font-weight: 500;
}
/*年度別左右ボタン共通の書式*/
.right-btn1 a, .left-btn1 a {
	color: #fff;
	background: rgb(0,74,179);
	background: linear-gradient(30deg, rgba(0,74,179,1) 0%, rgba(0,85,204,1) 80%, rgba(0,106,255,1) 100%);
}

/*分野別ボタン左右共通の書式*/
.right-btn2s a, .left-btn2s a {
	color: #fff;
	background: rgb(160,32,32);
	background: linear-gradient(30deg, rgba(160,32,32,1) 0%, rgba(179,36,36,1) 80%, rgba(255,51,51,1) 100%);
}
.right-btn2m a, .left-btn2m a {
	color: #fff;
	background: rgb(108,40,80);
	background: linear-gradient(30deg, rgba(108,40,80,1) 0%, rgba(179,66,132,1) 80%, rgba(255,94,188,1) 100%);
}
.right-btn2t a, .left-btn2t a {
	color: #fff;
	background: rgb(33,114,166);
	background: linear-gradient(30deg, rgba(33,114,166,1) 0%, rgba(36,124,179,1) 80%, rgba(51,177,255,1) 100%);
}

/*予想問題左右ボタン共通の書式*/
.right-btn3 a, .left-btn3 a {
	color: #fff;
	background: rgb(182,137,51);
	background: linear-gradient(30deg, rgba(182,137,51,1) 30%, rgba(216,183,118,1) 80%, rgba(230,208,164,1) 100%);
}

/*左右ボタン共通書式*/
.right-btn1 a:after, .left-btn1 a:after, .right-btn2s a:after, .left-btn2s a:after, .right-btn2m a:after, .left-btn2m a:after, .right-btn2t a:after, .left-btn2t a:after, .right-btn3 a:after, .left-btn3 a:after {
	content: "";
	position: absolute;
	top: 50%;
	bottom: 0;
	font-size: 90%;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 8px;
	height: 8px;
	border-top: solid 2px currentColor;
	border-right: solid 2px currentColor;
}

/*右ボタン書式*/
.right-btn1 a:after, .right-btn2s a:after, .right-btn2m a:after, .right-btn2t a:after, .right-btn3 a:after {
	right: 1.5rem;
	transition: right 0.3s;
	transform: translateY(-50%) rotate(45deg);
}

/*左ボタン書式*/
.left-btn1 a:after, .left-btn2s a:after, .left-btn2m a:after, .left-btn2t a:after, .left-btn3 a:after {
	left: 1.5rem;
	transition: left 0.3s;
	transform: translateY(-50%) rotate(225deg);
} 	

/*左右ボタンホバー*/
.right-btn1 a:hover, .left-btn1 a:hover, .right-btn2s a:hover, .left-btn2s a:hover, .right-btn2m a:hover, .left-btn2m a:hover, .right-btn2t a:hover, .left-btn2t a:hover, .right-btn3 a:hover, .left-btn3 a:hover {
	text-decoration:none;
	color: fff;
}

/*右ボタンホバー後*/
.right-btn1 a:hover:after, .right-btn2s a:hover:after, .right-btn2m a:hover:after, .right-btn2t a:hover:after, .right-btn3 a:hover:after {
	right: 1.0rem;
}

/*左ボタンホバー後*/
.left-btn1 a:hover:after, .left-btn2s a:hover:after, .left-btn2m a:hover:after, .left-btn2t a:hover:after, .left-btn3 a:hover:after {
	left: 1.0rem;
}


/*年度別ホームボタン書式*/
.center-btn1 a{
	color: #003989;
	border: 1px solid #003989;
	background: #fff;
	text-decoration:none;
	transition: 0.3s;
}

.center-btn1 a:hover{
	color: #fff;
	background: #003989;
	text-decoration: none;
	transition: 0.3s;
}

/*分野別ホームボタン書式*/
.center-btn2s a{
	border: 1px solid #a02020;
	color: #a02020;
	text-decoration:none;	
	background: #fff;
}
.center-btn2s a:hover{
	color: #fff;	
	background: #a02020;
	text-decoration:none;
	transition: 0.3s;
}

.center-btn2m a{
	border: 1px solid #6c2850;
	color: #6c2850;
	text-decoration:none;
	background: #fff;
}
.center-btn2m a:hover{
	color: #fff;	
	background: #6c2850;
	text-decoration:none;
	transition: 0.3s;

}

.center-btn2t a{
	border: 1px solid #2172a0;
	color: #2172a0;
	text-decoration:none;
	background: #fff;
}

.center-btn2t a:hover{
	color: #fff;	
	background: #2172a0;
	text-decoration:none;
	transition: 0.3s;

}


/* 用語集（w)・問題集(q)へのボタン */
.wq-btn a {
	border-radius: 3px;
	border: 1px solid #cccccc;
 	display: block;
	text-align: center;
	align-items: center;
 	margin: 0 auto;
    max-width: 100%;
	text-decoration:none;
	color: #333333;
    padding: 1px 6px;
    background: #fff;
	transition: .2s;
}
.wq-btn a:hover{
	background: #F4F5F6;
	border-color: #F4F5F6;
	text-decoration: none; 
}

/*予想問題選択のボタン*/
/*ボタン共通の書式*/
.right-btn3 a, .left-btn3 a {
	border-radius: 100vh;
	position: relative;
 	display: block;
	text-align: center;
    align-items: center;
	padding: 3px 6px;
	margin: 0 auto;
    max-width: 400px;
	text-decoration: none;
    font-weight: 500;
}
/*予想問題左右ボタン共通の書式*/
.right-btn3 a, .left-btn3 a {
	color: #fff;
	background: rgb(182,137,51);
	background: linear-gradient(30deg, rgba(182,137,51,1) 30%, rgba(216,183,118,1) 80%, rgba(230,208,164,1) 100%);
}

/*予想問題左右ボタン共通書式*/
.right-btn3 a:after, .left-btn3 a:after {
	content: "";
	position: absolute;
	top: 50%;
	bottom: 0;
	font-size: 90%;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 8px;
	height: 8px;
	border-top: solid 2px currentColor;
	border-right: solid 2px currentColor;
}

/*予想問題右ボタン書式*/
.right-btn3 a:after {
	right: 1.1rem;
	transition: right 0.3s;
	transform: translateY(-50%) rotate(45deg);
}

/*予想問題左ボタン書式*/
.left-btn3 a:after {
	left: 1.1rem;
	transition: left 0.3s;
	transform: translateY(-50%) rotate(225deg);
} 	

/*予想問題左右ボタンホバー*/
.right-btn3 a:hover, .left-btn3 a:hover {
	text-decoration:none;
	color: fff;
}

/*予想問題右ボタンホバー後*/
.right-btn3 a:hover:after {
	right: 0.7rem;
}

/*予想問題左ボタンホバー後*/
.left-btn3 a:hover:after {
	left: 0.7rem;
}


/*リンク画像クロールオーバー（明るくする）*/
a.rollover:hover img {
opacity: 0.8;
}

/*リンク画像クロールオーバー（枠色変える）*/
a.rollover2 img {
padding:1px;
border:1px solid #cccccc;
border-radius:5px;
}
a.rollover2:hover img {
padding:1px;
border:1px solid #b60081;
border-radius:5px;	
}

/*パンくずリストの下の空白を狭める*/
.article .entry-categories-tags {
    margin-bottom: 0;
}
.article h1 {
    margin-top: 0;
}

/*サイドバー用ボタン*/
a.btn_01 {
	display: block;
	text-decoration:none;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	margin: auto;
	/*padding: 1px 1px;*/
	font-weight: bold;
	border-radius: 3px;
	border: 1px solid #003989;
	color: #003989;
	background: #FFF;
	transition: 0.3s;
}
a.btn_01:hover {
	text-decoration:none;
	color: #fff;
	background: #003989;
}

/*クイズ*/
.asq-theme.asq-theme-buzzfeed .quiz-question-title{
font-size: 1.1em !important;
}

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

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

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