@charset "UTF-8";

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

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

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

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

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

}


/************************************ 
 * CLCサイト用の装飾クラス 
 * 
 */


/* 非表示読み上げ専用クラス */
.visually-hidden {
  position: fixed !important;
  /* keep it on viewport */
  top: 0px !important;
  left: 0px !important;
  /* give it non-zero size, VoiceOver on Safari requires at least 2 pixels
     before allowing buttons to be activated. */
  width: 4px !important;
  height: 4px !important;
  /* visually hide it with overflow and opacity */
  opacity: 0 !important;
  overflow: hidden !important;
  /* remove any margin or padding */
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  /* ensure no other style sets display to none */
  display: block !important;
  visibility: visible !important;
}


/* ふりがな・行間関連 */
button#rubyChange,
button#spacingChange{
	padding:7px;
	margin:0px;
	line-height: 100%;
}
button#rubyChange > span,
button#spacingChange > span{
	line-height: 100%;
}
/* ふりがなが非表示のとき */
ruby {
   display:inline;
}
rt {
	display:none;
}
rp {
	opacity:0;
}
/* ふりがなが表示されているとき、いつも見せたいとき */
.ruby_flag ruby,
ruby.rb_display_always{
	display:revert;
	/* firefox向け設定 */
    ruby-position: over;
	ruby-align: center;
	display:ruby !important;
}
.ruby_flag rt,
ruby.rb_display_always rt{
	line-height: 100% !important;
	display:revert;
	/* firefox向け設定 */
	display:ruby-text !important;
}
.ruby_flag rp,
ruby.rb_display_always rp{
    opacity:1;
}
/* ふりがな非表示・行間広め */
div.spacing_flag p,
div.spacing_flag span
{
	line-height: 250% ;
}
/* ふりがな表示・行間広め */
body.ruby_flag div.spacing_flag p,
body.ruby_flag div.spacing_flag span{
	line-height: 350% ;
}
/* 
 * 行間を広く取るとき
 * ・親要素の表示をrelativeに（位置調整のため）
 * ・子要素でY軸を少し上に
 * ・ルビそのものの行間は100%固定
 */
.ruby_flag .spacing_flag ruby
{
	position: relative;
}
.ruby_flag .spacing_flag ruby rt
{
	transform: translateY(-.5em);
	margin-bottom: .5em;
	line-height: 100% !important;
}


/* ふりがなボタンエリアの余白 */
div#pryc-wp-acctp-top {
	padding-top: 10px;
	padding-bottom: 30px;
}


/************************************ 
 * αページ向けスタイル
 * 
 * /

/* α：大分類 */
.alpha_theme{
	background-color: #f6f5ea;
	margin-top:55px;
	margin-bottom:25px;
	padding:25px;
}

/* α：大分類用h2 */
.alpha_theme h2{
    margin:0px;
	padding: 0px;
}

/* α：大分類サブタイトル */
.alpha_theme_subtitle {
	
}

/* α：小分類説明 */
.alpha_headline_detail {
	background-color:#f4f5f7;
	border-left:solid 7px #333;
	padding: 10px;
	margin-bottom: 15px;
}

/* α：小分類用h3 */
.alpha_headline_detail h3{
    margin:0px;
	padding: 0px;
}

/* α：サイトタイトル */
.alpha_site_title {
	font-size:16pt;
	font-weight:bold;
	float:left;
}

/* α：サイト提供者 */
.alpha_offered {
	font-size:12pt;
	text-align:right;
}

/* α：サイトタグエリア */
.alpha_tags {
	margin-top:10px;
	clear: right;
	clear: left;
}

/* α：サイトタグ */
.alpha_tags span {
	margin:5px;
}

/* α：リード文 */
.alpha_lead {
	padding-left:5%;
}

/* α：アクセシビリティに関するリード文 */
.alpha_lead_inclusion {
	padding-left:5%;	
}

/* α：詳細はこちら */
.alpha_jump_to_detail {
	text-align:right;
	padding-bottom:30px;
}

/* α：コンテンツ詳細 */
.alpha_detail {
	padding-left:5%;
}


/************************************ 
 * Tipsページ向けスタイル
 * 
 * /
/* Tips：大分類 */
.tips_theme{
	background-color: #f6f5ea;
	margin-top:55px;
	margin-bottom:25px;
	padding:25px;
}

/* Tips：大分類用h2 */
.tips_theme h2{
    margin:0px;
	padding: 0px;
}

/* Tips：大分類サブタイトル */
.tips_theme_subtitle {
	
}


/************************************ 
 * βページ向けスタイル
 * 
 */


/* β：複数画像を横に並べたいとき */
.beta_img_inline {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
	align-items: center;

}
.beta_img_inline *{
	flex-grow: 5;
	flex-basis: auto;
	height:auto;
}

/* 吹き出しでも見出しを使いたい */
.speech-balloon h2, 
.speech-balloon h3 {
	margin: 0px;
	padding: 0px;
	background-color: transparent;
	border: none;
}



/* 吹き出しのボイスを変えてみたい */




/************************************ 
 * 既存部品の上書き
 * 
 */

/* テーマカラーの上書き */
.blogcard-label{
	background-color: #272077 !important;
}

.blogcard,
table th, 
table td, 
.page-numbers, 
.page-numbers.dots,
.comment-reply-link,
blockquote,
.key-btn,
.entry-card-wrap{
   border-color: #272077 !important;
}

blockquote::before, 
blockquote::after{
	color: #272077;
}

/* エントリーカード（カテゴリ一覧・タグ一覧）のレイアウト変更 */
.entry-card-thumb {
	width:20%;
}
.entry-card-content {
	margin-left:25%;
	padding-bottom: 0;
}
.entry-card-meta {
	position:relative;
}

/* 今いるページ番号の背景色を変更 */
span.page-numbers.current {
	background-color: #272077;
	color: #FFFFFF;
}

/* スクリーンリーダーモードにしたときの、アイコン読み上げ変更 */
.sr_mode_flg .information-box::before,
.sr_mode_flg .question-box::before,
.sr_mode_flg .alert-box::before,
.sr_mode_flg .information::before,
.sr_mode_flg .question::before,
.sr_mode_flg .alert::before,
.sr_mode_flg .memo-box::before,
.sr_mode_flg .comment-box::before,
.sr_mode_flg .common-icon-box::before,
.sr_mode_flg .fa.fa-angle-double-up::before {
  border: none;
  font-size: 3px;
}

/* アイコンボックス */
.sr_mode_flg .information-box::before,
.sr_mode_flg .information::before {
  content: 'インフォメーションマーク';
}

.sr_mode_flg .question-box::before,
.sr_mode_flg .question::before {
  content: 'クエスチョンマーク';
}

.sr_mode_flg .alert-box::before,
.sr_mode_flg .alert::before {
  content: 'エクスクラメーションマーク';
}

.sr_mode_flg .memo-box::before {
  content: '鉛筆マーク';
}

.sr_mode_flg .comment-box::before {
  content: '吹き出しマーク';
}

.sr_mode_flg .profile-box::before {
  content: '人のシルエットマーク';
}

.sr_mode_flg .ok-box::before {
  content: 'OKマーク';
}

.sr_mode_flg .ng-box::before {
  content: 'NGマーク';
}

.sr_mode_flg .good-box::before {
  content: 'GOODマーク';
}

.sr_mode_flg .bad-box::before {
  content: 'BADマーク';
}

/* Font Awesome */
.sr_mode_flg .fab-info-circle::before {
  content: 'インフォメーションマーク';
}

.sr_mode_flg .fab-question-circle::before {
  content: 'クエスチョンマーク';
}

.sr_mode_flg .fab-exclamation-circle::before {
  content: 'エクスクラメーションマーク';
}

.sr_mode_flg .fab-pencil::before {
  content: '鉛筆マーク';
}

.sr_mode_flg .fab-edit::before {
  content: '編集マーク';
}

.sr_mode_flg .fab-comment::before {
  content: '吹き出しマーク';
}

.sr_mode_flg .fab-ok::before {
  content: 'OKマーク';
}

.sr_mode_flg .fab-bad::before {
  content: 'NGマーク';
}

.sr_mode_flg .fab-lightbulb::before {
  content: '電球マーク';
}

.sr_mode_flg .fab-graduation-cap::before{
  content: '角帽マーク';
}

.sr_mode_flg .fab-book::before {
  content: '本のマーク';
}

.sr_mode_flg .fab-amazon::before {
  content: 'アマゾンのマーク';
}

.sr_mode_flg .fab-envelope::before {
  content: '封筒のマーク';
}

.sr_mode_flg .fab-flag::before {
  content: '旗のマーク';
}

.sr_mode_flg .fab-ban::before {
  content: '禁止マーク';
}

.sr_mode_flg .fab-bolt::before {
  content: '雷マーク';
}

.sr_mode_flg .fab-calendar::before {
  content: 'カレンダーマーク';
}

.sr_mode_flg .fab-clock::before {
  content: '時計のマーク';
}

.sr_mode_flg .fab-cutlery::before {
  content: 'カトラリーのマーク';
}

.sr_mode_flg .fab-heart::before,
.list-heart li::before {
  content: 'ハートマーク';
}

.sr_mode_flg .fab-camera::before {
  content: 'カメラマーク';
}

.sr_mode_flg .fab-search::before {
  content: '虫眼鏡マーク';
}

.sr_mode_flg .fab-folder::before {
  content: 'フォルダマーク';
}

.sr_mode_flg .fab-tag::before {
  content: 'タグマーク';
}

.sr_mode_flg .fab-trophy::before {
  content: 'トロフィーマーク';
}

.sr_mode_flg .fab-car::before {
  content: '車マーク';
}

.sr_mode_flg .fab-truck::before {
  content: 'トラックのマーク';
}

.sr_mode_flg .fab-bicycle::before {
  content: '自転車マーク';
}

.sr_mode_flg .fab-motorcycle::before {
  content: 'バイクのマーク';
}

.sr_mode_flg .fab-bus::before {
  content: 'バスのマーク';
}

.sr_mode_flg .fab-plane::before {
  content: '飛行機のマーク';
}

.sr_mode_flg .fab-train::before {
  content: '電車のマーク';
}

.sr_mode_flg .fab-subway::before {
  content: '地下鉄のマーク';
}

.sr_mode_flg .fab-taxi::before {
  content: 'タクシーのマーク';
}

.sr_mode_flg .fab-file-text::before {
  content: 'ファイルのマーク';
}

.sr_mode_flg .fab-jpy::before {
  content: '日本円のマーク';
}

.sr_mode_flg .fab-usd::before {
  content: 'USドルのマーク';
}

.sr_mode_flg .fab-eur::before {
  content: 'ユーロのマーク';
}

.sr_mode_flg .fab-btc::before {
  content: 'ビットコインのマーク';
}

.sr_mode_flg .fab-apple::before {
  content: 'アップルのマーク';
}

.sr_mode_flg .fab-android::before {
  content: 'アンドロイドのマーク';
}

.sr_mode_flg .fab-ship::before {
  content: '船のマーク';
}

.sr_mode_flg .fab-wordpress::before {
  content: 'WordPressのマーク';
}

.sr_mode_flg .fab-thumbs-up::before {
  content: '親指を上げたマーク';
}

.sr_mode_flg .fab-thumbs-down::before {
  content: '親指を下げたマーク';
}

.sr_mode_flg .fab-check::before,
.list-check li::before {
  content: 'チェックマーク';
}

.sr_mode_flg .fab-bell::before {
  content: 'ベルのマーク';
}

.sr_mode_flg .fab-star::before,
.list-star li::before {
  content: '星マーク';
}

.sr_mode_flg .fab-bookmark::before {
  content: '栞マーク';
}

.sr_mode_flg .fab-download::before {
  content: 'ダウンロードマーク';
}

.sr_mode_flg .fab-coffee::before {
  content: '珈琲マーク';
}

.sr_mode_flg .fab-user::before {
  content: '人のマーク';
}

/* ページ最上部に戻るマーク */
.sr_mode_flg .fa.fa-angle-double-up::before {
	content: 'ページトップへ戻る';
}

/* 
 * アイコン読み上げなし
 * ・IESをもっと知る
 * ・ブログカードのアイコン 
 */
.sr_mode_flg .icon-home-logo::before,
.sr_mode_flg .icon-twitter-logo::before,
.sr_mode_flg .icon-facebook-logo::before,
.sr_mode_flg .external-blogcard-label .fa::before{
	content: none;
}


/************************************ 
 * 専用ブロックエディタ
 * 
 */

/******* 
 * ブックレビュー用ブロック
 */
div.book-review {
	padding: 15% 10%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.book-review .book-title {
	text-align: center;
	letter-spacing: 0.5em;
}
.book-review .book-publisher, 
.book-review .book-published-year,
.book-review .book-isbn {
	text-align: right;
}
.book-review .sapie {
	clear: right;
	clear: left;
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
	align-items: center;
}
.book-review span.sapie-braille,
.book-review span.sapie-daisy  {	
	vertical-align: middle;
	margin:5px;
}
.book-review .book-isbn,
.book-review .aozora {
	font-size: 16px;
}
.book-review.book-review-monochrome {
	background-image: url("../../../wp-content/uploads/2020/07/book-review-monochrome.png");
}
.book-review.book-review-monochrome .badge {
	background-color:#080404;
}
.book-review.book-review-red {
	background-image: url("../../../wp-content/uploads/2020/07/book-review-red.png");
}
.book-review.book-review-red .badge {
	background-color:#a72272;
}
.book-review.book-review-green {
	background-image: url("../../../wp-content/uploads/2020/07/book-review-green.png");
}
.book-review.book-review-green .badge {
	background-color:#2c893a;
}
.book-review.book-review-blue {
	background-image: url("../../../wp-content/uploads/2020/07/book-review-blue.png");
}
.book-review.book-review-blue .badge {
	background-color:#1e3670;
}
.book-review.book-review-antique {
	background-image: url("../../../wp-content/uploads/2020/07/book-review-antique.png");
}
.book-review.book-review-antique .badge {
	background-color:#6b3a07;
}
.book-review h2, 
.book-review h3,
.book-review h4{
	margin: 0px;
	margin-bottom: 10px;
	padding: 0px;
	background-color: transparent;
	border: none;
}
.book-review p{
	margin: 0.2em 0;
}


/******* 
 * クイズ用ブロック
 */
div.quiz-block {
	margin-top: 20px;
	margin-bottom: 20px;
}
.quiz-block ul {
	list-style-type: none;
}
.quiz-block ul li::before {
	font-family: FontAwesome;
	display: inline-block;
	content: "\f0eb";
	text-align: center;
	width: 1.25em;
}
.quiz-block ul li.quiz-answered.true::before {
	content: "\f10c";
	color: red;
}
.quiz-block ul li.quiz-answered.false::before {
	content: "\f00d";
	color: blue;
}
.quiz-block .marker-under-blue {
	background: linear-gradient(transparent 80%, #a8dafb 90%);
}


/**
  * タグインデックス風（横並べ） 
  */
.tag-index-group {
  margin-left: 10px;
}
.tag-index, .tag-index-red, .tag-index-green, .tag-index-blue,
.tag-index-lightblue, .tag-index-lightgreen, .tag-index-yellow, 
.tag-index-orange, .tag-index-pink{
  position: relative;
  display: inline-block;
  vertical-align: middle;
  padding-left: 7px;
  padding-right: 7px;
  margin-left: 7px;
  margin-right: 7px;
  height: 32px;
  color: #ffffff;
}
.tag-index:before, .tag-index-red:before, .tag-index-green:before, .tag-index-blue:before, 
.tag-index-lightblue:before, .tag-index-lightgreen:before, .tag-index-yellow:before, 
.tag-index-orange:before, .tag-index-pink:before {
  content: "";
  position: absolute;
  top: 0;
  right: 100%;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-bottom:  32px solid;
}
.tag-index:after, .tag-index-red:after, .tag-index-green:after, .tag-index-blue:after, 
.tag-index-lightblue:after, .tag-index-lightgreen:after, .tag-index-yellow:after, 
.tag-index-orange:after, .tag-index-pink:after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 0;
  height: 0;
  border-right: 15px solid transparent;
  border-bottom: 32px solid;
}
/**
  * タグインデックス風（背景色指定）
  */
.tag-index {
  background-color: #949495;
}
.tag-index:before, .tag-index:after {
  border-bottom-color: #949495;
}
.tag-index-red {
  background-color: #e60033;
}
.tag-index-red:before, .tag-index-red:after {
  border-bottom-color: #e60033;
}
.tag-index-green {
  background-color: #007b43;
}
.tag-index-green:before, .tag-index-green:after {
  border-bottom-color: #007b43;
}
.tag-index-blue {
  background-color: #1e50a2;
}
.tag-index-blue:before, .tag-index-blue:after {
  border-bottom-color: #1e50a2;
}
.tag-index-lightblue {
  background-color: #2ca9e1;
}
.tag-index-lightblue:before, .tag-index-lightblue:after {
  border-bottom-color: #2ca9e1;
}
.tag-index-lightgreen {
  background-color: #8bc34a;
}
.tag-index-lightgreen:before, .tag-index-lightgreen:after {
  border-bottom-color: #8bc34a;
}
.tag-index-yellow {
  background-color: #ffc107;
}
.tag-index-yellow:before, .tag-index-yellow:after {
  border-bottom-color: #ffc107;
}
.tag-index-orange {
  background-color: #f39800;
}
.tag-index-orange:before, .tag-index-orange:after {
  border-bottom-color: #f39800;
}
.tag-index-pink {
  background-color: #e95295;
}
.tag-index-pink:before, .tag-index-pink:after {
  border-bottom-color: #e95295;
}