@charset "UTF-8";

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

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


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

/*1030px以下*/
@media screen and (max-width: 1030px){
  /*必要ならばここにコードを書く*/
  /* 目次 */
  .toc,.article h1 {
    min-width:100%; /*モバイル時の目次横幅*/
  }
	/* モバイルトップメニュー */
	ul.menu-mobile{
		overflow-x: auto;
		overflow-y: hidden;
		display: flex !important;
		flex-wrap: nowrap;
		font-size: 14px;
		justify-content: flex-start;
		padding: 0 1em;
		-webkit-overflow-scrolling: touch;
		position: relative;
	}
	ul.menu-mobile > li{
		padding-right: 1em;
		white-space: nowrap;
	}
	ul.menu-mobile　.item-label{
		white-space: nowrap;
		font-size: 14px;
	}/* モバイルトップメニューおわり */
}


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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
  /* プロフィールボタン */
#main .profilepage-link {
    text-align: center;
}
.profilepage-link a {
    font-size: 14px;
}
}

/* カテゴリラベル（一覧、アイキャッチ）開始 */
.cat-label {
    border: none;
	padding: 1px 8px;
    top: 0em;
    left: 0em;
}
.eye-catch .cat-label {
	border: none;
    padding: 1px 10px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    opacity: 0.9;
    top: 0em;
    left: 0em;
    font-size: 12px;
    min-width: 100px;
}
.eye-catch .cat-label:before {
    font-family: "fontawesome";
    content: "\f08d";
    display: inline-block;
    margin-right: .5em;
    transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
}
/* カテゴリラベル（一覧、アイキャッチ）終了 */

/* ページネーション */
.pagination-next, .next, .prev, .pager-prev-next
{ display: none; }
.pager-numbers a { text-decoration: none; }
.page-numbers{
    border: none !important;
    border-radius: 50%;
/*    font-family: 'M PLUS Rounded 1c';*/
    font-size: 80%;
    color: #666 !important;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
    transition: all .1s ease;
    background-color: #ffffff;
}
.pagination a.page-numbers::hover,
.pager-numbers a::hover .page-numbers{
    background-color: #33a1dc; /* マウスオーバー時の背景色 */
    color: #fff !important;
}
.pagination .current/*, .pager-links .current*/{
	border-radius: 50%;
    background-color: #33a1dc;
    color: #fff !important;
}

/* 検索ボックス */
.search-box{
	margin: 1em 1em 2em;
	border-radius: 40px;
	border: none;
	box-shadow: 0px 4px 5px 0px #c4c4c4;
}
.search-edit, input[type="text"] {
	height: 40px;
	border-radius: 40px;
	background-color: #545B63;
	border: none;
	color: #f5f5f5;
	font-size: 14px;
}
.search-submit{
	line-height: 0;
	top: 0;
	bottom: 0;
	color: #bbb;
}
.search-box input::placeholder{
	color: #bbb;
	font-size: 14px;
}
.search-edit:focus{
	outline: 0;
	border: none;
	/*border-color: #33a1dc; /* フォーカス時の枠色 */
	font-size: 14px;
}
/* 検索ボックス終わり */

/* 20190702追加 ボタンを押して文章を表示 */
/* 全体 */
.hidden_box {
    margin: 2em 0;
    padding: 0;
}

/* ボタン装飾 */
.hidden_box label {
  position: relative;
  display: inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #f5f5f5;
  background: #33a1dc;/* 背景色 */
  border-bottom: solid 2px #237099;/* 少し濃い目の色に */
  border-radius: 4px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
}
.hidden_box label:active {
  border-bottom: solid 2px #33a1dc;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

/* アイコンを表示 */
.hidden_box label:before {
    display: inline-block;
    content: '\f078';
    font-family: 'FontAwesome';
    padding-right: 5px;
    transition: 0.2s;
}

 ボタンホバー時 
.hidden_box label:hover {
    background: #33a1dc;
}

/* アイコンを切り替え */
.hidden_box input:checked ~ label:before {
     content: '\f00d';
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
     color: #cbd0d3;/* スカイグレイ */
}

/* チェックは見えなくする */
.hidden_box input {
    display: none;
}

/* 中身を非表示にしておく */
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/* クリックで中身表示 */
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}
/* 20190702追加 ボタンを押して文章を表示終わり */

/* ページ全体がふわっとフェードイン */
#main{
    animation: fadeIn 1s ease-out 0s 1 normal;
}
#sidebar {
    animation: fadeIn 1s ease-out 0s 1 normal;
}
@keyframes fadeIn {
    from {transform: translateY(10%); opacity: 0;}
    100% {transform: translateY(0%); opacity: 1;}
}
#header-container {
    animation: Down 1s ease-out 0s 1 normal;
}
@keyframes Down {
    from {transform: translateY(-10%); opacity: 0;}
    100% {transform: translateY(0%); opacity: 1;}
}
#breadcrumb {
    animation: Right 1s ease-out 0s 1 normal;
}
@keyframes Right {
    from {transform: translateX(10%); opacity: 0;}
    100% {transform: translateX(0%); opacity: 1;}
}
/* ページ全体がふわっとフェードイン終わり */

/* サイトタイトル */
.site-name-text{
	justify-content:flex-start;
/*	padding-bottom: 20px !important;*/
/*	padding-left: 10px !important;*/
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: 24px !important;
	font-weight: bold !important; 
	text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
	color:#f5f5f5 !important;
}
.header-in .tagline {
	text-align:left;
	padding-left: 10px;
}
.header-in .logo {
	text-align: left;
	padding-left: 10px ;
}

/* blogcardの外観 */
.blogcard {
	padding: 0.5em 1em;
	margin-bottom: 0.5em;
	color: #545b63;
	background: #f4f4f4;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.33);
	border: none;
	border-radius: 4px;
}
.internal-blogcard {
	border-left: solid 5px #33a1dc;
}
.external-blogcard {
	border-right: solid 5px #33a1dc;
}
a.blogcard-wrap:hover{
	background-color: transparent!important;
	opacity: 0.8;
}
a.blogcard-wrap:hover img.blogcard-thumb-image{
	transform: scale(1.1);
	transition: .3s;
}
/* 画像部分 */
.blogcard-thumbnail {
	line-height: 0;
	margin-right: 1rem;
	overflow: hidden;
	width: 35%;
}
/* タイトル */
.blogcard-title{
	margin-bottom: .5rem;
	line-height: 1.5;
	font-size: 90%;
}
/* 内容説明 */
.external-blogcard-snippet {
/*	display: none;*/
	font-size: 70%;
	line-height: 1.5;
/*	padding-right: 5%; */
}
.internal-blogcard-snippet {
	display: none;
}
/* 内部ブログカードのアイコンとURLを非表示 */
.internal-blogcard-footer{
	display: none;
}
/* 続きはこちらを挿入 */
.internal-blogcard:after
/*, .external-blogcard:after*/{
	font-family: "FontAwesome";
	content: "…続きはこちら \f14d";
	right: 1rem;
	font-weight: bold;
	font-size: 70%;
	color: #f4f4f4;
	padding: .5em;
	border-radius: 4px;
	width: 45%;
	background-color: #192f60;
	margin-left: auto;
	text-align: center;
	display: block;
	margin-top: .5em;
	margin-bottom: 0.5em;
}
/* blogcardの外観終わり */

/* liリスト用 */
.list-1{
   list-style: none;
   padding:0;
   margin:0;
}
.list-1 li { 
   position: relative;
   /*margin:0.5em 0 !important;*/
   padding-left: 1.8em;
}
.list-1 li:before {
   font-family: FontAwesome;
   content: "\f058"; /*アイコン*/
   color:  #33a1dc; /* 色 */
   position: absolute;
   left:0;
}
/* liリスト用 終わり */
/* ナンバー付きリスト用 */
.list-2{
   counter-reset:number; 
   list-style-type: none; 
   padding:0;
   margin:0;
}
.list-2 li { 
   position: relative;
   /*margin:0.5em 0 !important;*/
   padding-left: 1.8em;
}
.list-2 li:before {
   counter-increment: number;
   content: counter(number);
   background-color: #33a1dc; /* 文字背景色 */
   color: #f5f5f5; /* 文字色 */
   position: absolute;
   font-weight:bold;
   font-size: 12px;
   border-radius: 50%;
   left: 0;
   top:0.4em;
   width: 20px;
   height: 20px;
/*   line-height: 18px;*/
   text-align: center;
}
/* ナンバー付きリスト用 終わり */

/* 20180814 menu */
nav#navi, .menu-header .sub-menu{
    font-weight: bold;
    box-shadow: 0 5px 15px -5px rgba(0,0,0,0.2);
}
.menu-header .sub-menu .item-label{
    font-size: 80%;
}
.menu-header .item-label{
    color: #b5b5b5 !important; /* グレー */
}
.menu-header .current-menu-item,
.menu-header .current-post-item,
.menu-header .current-menu-ancestor,
.menu-header .current-post-ancestor,
.menu-header .menu-item::hover {
	/* マウスオーバー */
    color: #333 !important; /* 黒に近いグレー */
    border-bottom: 3px solid #33a1dc; /* 水色 */
    transition: all .4s ease;
}

.menu-header .sub-menu .menu-item,
.menu-header .sub-menu .menu-item::hover{
    border-bottom: none;
}
.menu-header .current-menu-item>a .item-label,
.menu-header .current-post-item>a .item-label,
.menu-header .current-menu-ancestor>a .item-label,
.menu-header .current-post-ancestor>a .item-label,
.menu-header .item-label::hover{
    color: #333 !important;
    transition: all .2s ease;
}

/*=================
    カエレバ・ヨメレバ・トマレバ
=================*/

.cstmreba { /* 全体、外枠や大枠の設定 */
    width:98%;
    height:auto;
    margin:36px auto; /* 左右をautoにして中央に配置 */
    /*font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;*/
    line-height: 1.5; /* 行間 */
    word-wrap: break-word; /* 単語の途中で改行：する */
    box-sizing: border-box; /* パディングとボーダーを含めwidthとheightのサイズ */
    display: block; /* ブロックボックスを生成 */
}
/* WordPressで自動挿入されるPタグの余白を対処 */
.cstmreba p {
    margin: 0;
    padding: 0;
}
.cstmreba a {
    transition: 0.8s ;
    color:#285EFF; /* テキストリンクカラー */
}
.cstmreba a:hover { /* マウスオーバーでメインのテキストの色が変わる */
    color:#FFCA28; /* テキストリンクカラー(マウスオーバー時) */
}
.cstmreba .booklink-box,
.cstmreba .kaerebalink-box,
.cstmreba .tomarebalink-box { /* 箱内の設定 */
    width: 100%;
    background-color: #fafafa; /* 全体の背景カラー */
    overflow: hidden; /* はみ出た要素の指定：非表示 */
    border-radius: 0px;
    box-sizing: border-box; /* パディングとボーダーを含めwidthとheightのサイズ */
    padding: 12px 8px; /* [上下][左右] */
    box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
}
/* サムネイル画像ボックス */
.cstmreba .booklink-image,
.cstmreba .kaerebalink-image,
.cstmreba .tomarebalink-image {
    width:150px;
    float:left; /* 指定した要素を左寄せ、後に続く内容はその右側に回り込み */
    margin:0 14px 0 0; /* [上][右][下][左] */
    text-align: center; /* センタリング */
    background: rgba(255,255,255,0);
}
.cstmreba .booklink-image a,
.cstmreba .kaerebalink-image a,
.cstmreba .tomarebalink-image a {
    width:100%;
    display:block; /* ブロックボックスを生成 */
}
.cstmreba .booklink-image a img,
.cstmreba .kaerebalink-image a img,
.cstmreba .tomarebalink-image a img {
    text-align:center; /* センタリング */
    margin:0 auto;
    padding: 0;
    background: rgba(255,255,255,0);
}
.cstmreba .booklink-info,
.cstmreba .kaerebalink-info,
.cstmreba .tomarebalink-info {
    overflow:hidden; /* はみ出た要素の指定：非表示 */
    line-height:170%;
    color: #333;
}
/* infoボックス内リンク下線非表示 */
.cstmreba .booklink-info a,
.cstmreba .kaerebalink-info a,
.cstmreba .tomarebalink-info a {
    text-decoration: none;
}
/* 作品・商品・ホテル名 リンク */
.cstmreba .booklink-name>a,
.cstmreba .kaerebalink-name>a,
.cstmreba .tomarebalink-name>a {
    border-bottom: 1px solid ; /* 下線をつける */
    font-size:16px;
}
/* powered by */
.cstmreba .booklink-powered-date,
.cstmreba .kaerebalink-powered-date,
.cstmreba .tomarebalink-powered-date {
    font-size:10px;
    line-height:150%;
}
.cstmreba .booklink-powered-date a,
.cstmreba .kaerebalink-powered-date a,
.cstmreba .tomarebalink-powered-date a {
    color:#333;
    border-bottom: none ;
}
.cstmreba .booklink-powered-date a:hover,
.cstmreba .kaerebalink-powered-date a:hover,
.cstmreba .tomarebalink-powered-date a:hover {
    color:#333;
    border-bottom: 1px solid #333 ; /* マウスオーバーで下線 */
}
/* 著者・住所 */
.cstmreba .booklink-detail,
.cstmreba .kaerebalink-detail,
.cstmreba .tomarebalink-address {
    font-size:12px;
}
.cstmreba .kaerebalink-link1 div img,
.cstmreba .booklink-link2 div img,
.cstmreba .tomarebalink-link1 div img {
    display:none !important; /* 要素が表示されず、レイアウトに影響を与えない */
}
.cstmreba .kaerebalink-link1,
.cstmreba .booklink-link2,
.cstmreba .tomarebalink-link1 {
    display: inline-block; /* インラインレベルのブロックコンテナを生成する。要素全体としてはインライン要素のような表示形式だが、内部はブロックボックスで高さ・横幅などを指定できる。*/
    width: 100%;
    margin-top: 5px;
}
.cstmreba .booklink-link2>div,
.cstmreba .kaerebalink-link1>div,
.cstmreba .tomarebalink-link1>div {
    float:left; /* 左に配置 */
    width:24%;
    min-width:128px;
    margin:0.5%;
}
/***** ボタンデザインここから ******/
.cstmreba .booklink-link2 a,
.cstmreba .kaerebalink-link1 a,
.cstmreba .tomarebalink-link1 a {
    width: 100%;
    display: inline-block; /* インラインレベルのブロックコンテナを生成する。要素全体としてはインライン要素のような表示形式だが、内部はブロックボックスで高さ・横幅などを指定できる。*/
    text-align: center;
    box-sizing: border-box;/* パディングとボーダーを含めwidthとheightのサイズ */
    margin: 5px 3px;
    padding:3% 0.5%;
    border-radius: 8px;
    font-size: 13px;
    font-weight: bold;
    line-height: 180%;
    color: #fff;
    box-shadow: 0px 2px 4px 0 rgba(0,0,0,.26);
}
/* トマレバ */
.cstmreba .tomarebalink-link1 .shoplinkrakuten a {background: #76ae25; border: 2px solid #76ae25; }/* 楽天トラベル */
.cstmreba .tomarebalink-link1 .shoplinkjalan a { background: #ff7a15; border: 2px solid #ff7a15;}/* じゃらん */
.cstmreba .tomarebalink-link1 .shoplinkjtb a { background: #c81528; border: 2px solid #c81528;}/* JTB */
.cstmreba .tomarebalink-link1 .shoplinkknt a { background: #0b499d; border: 2px solid #0b499d;}/* KNT */
.cstmreba .tomarebalink-link1 .shoplinkikyu a { background: #bf9500; border: 2px solid #bf9500;}/* 一休 */
.cstmreba .tomarebalink-link1 .shoplinkrurubu a { background: #000066; border: 2px solid #000066;}/* るるぶ */
.cstmreba .tomarebalink-link1 .shoplinkyahoo a { background: #ff0033; border: 2px solid #ff0033;}/* Yahoo!トラベル */
.cstmreba .tomarebalink-link1 .shoplinkhis a { background: #004bb0; border: 2px solid #004bb0;}/*** HIS ***/
/* カエレバ */
.cstmreba .kaerebalink-link1 .shoplinkyahoo a {background:#ff0033; border:2px solid #ff0033;} /* Yahoo!ショッピング */
.cstmreba .kaerebalink-link1 .shoplinkbellemaison a { background:#84be24 ; border: 2px solid #84be24;}    /* ベルメゾン */
.cstmreba .kaerebalink-link1 .shoplinkcecile a { background:#8d124b; border: 2px solid #8d124b;} /* セシール */
.cstmreba .kaerebalink-link1 .shoplinkwowma a { background:#ea5404; border: 2px solid #ea5404;} /* Wowma */
.cstmreba .kaerebalink-link1 .shoplinkkakakucom a {background:#314995; border: 2px solid #314995;} /* 価格コム */
/* ヨメレバ */
.cstmreba .booklink-link2 .shoplinkkindle a { background:#007dcd; border: 2px solid #007dcd;} /* Kindle */
.cstmreba .booklink-link2 .shoplinkrakukobo a { background:#bf0000; border: 2px solid #bf0000;} /* 楽天kobo */
.cstmreba .booklink-link2  .shoplinkbk1 a { background:#0085cd; border: 2px solid #0085cd;} /* honto */
.cstmreba .booklink-link2 .shoplinkehon a { background:#2a2c6d; border: 2px solid #2a2c6d;} /* ehon */
.cstmreba .booklink-link2 .shoplinkkino a { background:#003e92; border: 2px solid #003e92;} /* 紀伊國屋書店 */
.cstmreba .booklink-link2 .shoplinkebj a { background:#f8485e; border: 2px solid #f8485e;} /* ebookjapan */
.cstmreba .booklink-link2 .shoplinktoshokan a { background:#333333; border: 2px solid #333333;} /* 図書館 */
/* カエレバ・ヨメレバ共通 */
.cstmreba .kaerebalink-link1 .shoplinkamazon a,
.cstmreba .booklink-link2 .shoplinkamazon a {
    background:#FF9901;
    border: 2px solid #ff9901;
} /* Amazon */
.cstmreba .kaerebalink-link1 .shoplinkrakuten a,
.cstmreba .booklink-link2 .shoplinkrakuten a {
    background: #bf0000;
    border: 2px solid #bf0000;
} /* 楽天 */
.cstmreba .kaerebalink-link1 .shoplinkseven a,
.cstmreba .booklink-link2 .shoplinkseven a {
    background:#225496;
    border: 2px solid #225496;
} /* 7net */
/****** ボタンカラー ここまで *****/

/***** ボタンデザイン　マウスオーバー時ここから *****/
.cstmreba .booklink-link2 a:hover,
.cstmreba .kaerebalink-link1 a:hover,
.cstmreba .tomarebalink-link1 a:hover {
    background: #fff;
}
/* トマレバ */
.cstmreba .tomarebalink-link1 .shoplinkrakuten a:hover { color: #76ae25; }/* 楽天トラベル */
.cstmreba .tomarebalink-link1 .shoplinkjalan a:hover { color: #ff7a15; }/* じゃらん */
.cstmreba .tomarebalink-link1 .shoplinkjtb a:hover { color: #c81528; }/* JTB */
.cstmreba .tomarebalink-link1 .shoplinkknt a:hover { color: #0b499d; }/* KNT */
.cstmreba .tomarebalink-link1 .shoplinkikyu a:hover { color: #bf9500; }/* 一休 */
.cstmreba .tomarebalink-link1 .shoplinkrurubu a:hover { color: #000066; }/* るるぶ */
.cstmreba .tomarebalink-link1 .shoplinkyahoo a:hover { color: #ff0033; }/* Yahoo!トラベル */
.cstmreba .tomarebalink-link1 .shoplinkhis a:hover { color: #004bb0; }/*** HIS ***/
/* カエレバ */
.cstmreba .kaerebalink-link1 .shoplinkyahoo a:hover {color:#ff0033;} /* Yahoo!ショッピング */
.cstmreba .kaerebalink-link1 .shoplinkbellemaison a:hover { color:#84be24 ; }    /* ベルメゾン */
.cstmreba .kaerebalink-link1 .shoplinkcecile a:hover { color:#8d124b; } /* セシール */
.cstmreba .kaerebalink-link1 .shoplinkwowma a:hover { color:#ea5404; } /* Wowma */
.cstmreba .kaerebalink-link1 .shoplinkkakakucom a:hover {color:#314995;} /* 価格コム */
/* ヨメレバ */
.cstmreba .booklink-link2 .shoplinkkindle a:hover { color:#007dcd;} /* Kindle */
.cstmreba .booklink-link2 .shoplinkrakukobo a:hover { color:#bf0000; } /* 楽天kobo */
.cstmreba .booklink-link2 .shoplinkbk1 a:hover { color:#0085cd; } /* honto */
.cstmreba .booklink-link2 .shoplinkehon a:hover { color:#2a2c6d; } /* ehon */
.cstmreba .booklink-link2 .shoplinkkino a:hover { color:#003e92; } /* 紀伊國屋書店 */
.cstmreba .booklink-link2 .shoplinkebj a:hover { color:#f8485e; } /* ebookjapan */
.cstmreba .booklink-link2 .shoplinktoshokan a:hover { color:#333333; } /* 図書館 */
/* カエレバ・ヨメレバ共通 */
.cstmreba .kaerebalink-link1 .shoplinkamazon a:hover,
.cstmreba .booklink-link2 .shoplinkamazon a:hover {
    color:#FF9901; } /* Amazon */
.cstmreba .kaerebalink-link1 .shoplinkrakuten a:hover,
.cstmreba .booklink-link2 .shoplinkrakuten a:hover {
    color: #bf0000; } /* 楽天 */
.cstmreba .kaerebalink-link1 .shoplinkseven a:hover,
.cstmreba .booklink-link2 .shoplinkseven a:hover {
    color:#225496;} /* 7net */
/***** ボタンデザイン　マウスオーバー時ここまで *****/
.cstmreba .booklink-footer {
    clear:both;
}

/*****  解像度768px以下のスタイル *****/
@media screen and (max-width:768px){
    .cstmreba .booklink-image,
    .cstmreba .kaerebalink-image,
    .cstmreba .tomarebalink-image {
        width:100%;
        float:none;
        text-align: center; /* センタリング */
    }
    .cstmreba .booklink-link2>div,
    .cstmreba .kaerebalink-link1>div,
    .cstmreba .tomarebalink-link1>div {
        width: 32.33%;
        margin: 0.5%;
    }
    .cstmreba .booklink-info,
    .cstmreba .kaerebalink-info,
    .cstmreba .tomarebalink-info {
      text-align:center;
      padding-bottom: 1px;
    }
}
/*****  解像度480px以下のスタイル *****/
@media screen and (max-width:480px){
    .cstmreba .booklink-link2>div,
    .cstmreba .kaerebalink-link1>div,
    .cstmreba .tomarebalink-link1>div {
        width: 49%;
        margin: 0.5%;
    }
}
/*=================
    カエレバ・ヨメレバ・トマレバ終わり
=================*/

/* h1見出し */
/* 短い下線付き */
.article h1 {
  position: relative;
/*  font-size:1.3em; */
  color: #545B63;
/*  color: #5c6b80;*/
  margin-bottom: 1em;
/*  text-align: center; */
}
.article h1::before {
	content: '';
	position: absolute;
	bottom: -15px;
	display: inline-block;
	width: 10%;
	height: 6px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #33a1dc;
	border-radius: 4px;
}

/* h2見出し */
/* 吹き出し */
.article h2 {
	border: none; 
	position: relative;
	padding: .7em .75em;
	margin-bottom: 1.5em;
	background-color: #33a1dc;
	color: #f5f5f5;
	border-radius: 6px;
	border-bottom: 0px;
}
.article h2::after {
	position: absolute;
	top: 100%;
	left: 30px;
	content: '';
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top: 15px solid #33a1dc;
	border-bottom: 0px
} 

/* h3見出し */
/* 斜めストライプ */
.article h3 {
	border: none;
	padding: 0;
	border-radius: 0.2em;
	padding: 0.6em 0.5em;
	background: repeating-linear-gradient(-45deg, rgba(51,161,220,0.7), rgba(51,161,220,0.7) 5px, rgba(51,51,51,0.7) 5px, rgba(51,51,51,0.7) 10px);
	box-shadow: 0px 5px 3px -4px rgba(0,0,0,0.4);
	color: #f5f5f5;
	/*font-size: 1.3em;*/
  text-shadow: 2px 2px 2px rgba(0,0,0,0.9);/*文字を読みやすくするために影を追加*/
}

/* h4見出し */
.article h4,
#comment-area h4,
#related-entries h4{
 border: none; 
 color: #545B63;
 position: relative;
 padding-bottom: .5em;
 border-bottom: 4px solid #f4f7fa;
}
.article h4::after {
 position: absolute;
 bottom: -4px;
 left: 0;
 z-index: 2;
 content: '';
 width: 20%;
 height: 4px;
 background-color: #33a1dc;
}

/* h5見出し */
/* タブタイプ */
.article h5{
	border: none; 
  position: relative;
  border-top: solid 2px #33a1dc;
  border-bottom: solid 2px #33a1dc;
  background: #f4f7fa;
  color: #545B63;
  line-height: 1.4;
  padding: 0.4em 0.5em;
  margin: 2em 0 0.5em;
}
h5:after { /* タブ */
  position: absolute;
  font-family: FontAwesome,'Quicksand',
  'Avenir','Arial',sans-serif;
  content: '\f0a7\ Check';
  background: #33a1dc;
  color: #f5f5f5;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 5px 7px 3px;
  font-size: 0.7em;
  line-height: 1;
  letter-spacing: 0.05em;
}

/* h6見出し */
/* 頭にアイコン付き */
.article h6 {
  position: relative;
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;
  border: none; 
  padding:0px 30px 10px;
  margin-top: 30px !important;
  color: #545B63;/*文字色*/
}
.article h6:before {
  font-family: FontAwesome;/*アイコンフォント*/
  content: "\f164";/*アイコン 元々\f138 */
  position: absolute;/*絶対配置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #545B63; /*アイコン色*/
}

/* リンクカードの色
** あわせて読みたい など */
.blogcard-type .blogcard::before{
	background-color: #33a1dc;
	color: #f5f5f5;
}

/* タイトルを上に記入する囲みカード */
.box27 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #33a1dc;
	color: #545B63;
}
.box27 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #33a1dc;
    color: #f5f5f5;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box27 p {
    margin: 0; 
    padding: 0;
}
/* タイトルを上に記入する囲みカード終わり */

/* タイトルを中に記入する囲みカード */
.box28 { 
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: solid 2px #33a1dc;
	color: #545B63;
}
.box28 .box-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #33a1dc;
    color: #f5f5f5;
    font-weight: bold;
}
.box28 p {
    margin: 0; 
    padding: 0;
}
/* タイトルを中に記入する囲みカード終わり */

/* 「」の囲みカード  */
.box19 {
    position: relative;
    padding:1em 1.5em;
	color: #545B63
}
.box19::before,.box19::after{ 
    content:'';
    width: 30px;
    height: 40px;
    position: absolute;
    display: inline-block;
}
.box19::before{
    border-left: solid 2px #19448e/*1px #5767bf*/;
    border-top: solid 2px #19448e/*1px #5767bf*/;
    top:0;
    left: 0;
}
.box19::after{
    border-right: solid 2px #19448e/*1px #5767bf*/;
    border-bottom: solid 2px #19448e/*1px #5767bf*/;
    bottom:0;
    right: 0;
}
.box19 p {
    margin: 0; 
    padding: 0;
}
/* 「」の囲みカード 終わり  */

/* ここからスライドイン */
.mobile-menu-buttons {
    background: #33a1dc; /* 背景色 */
	color: #333333;
}
/* ボタンhover時の文字・背景変更 */
.mobile-menu-buttons ::hover {
    background: #33a1dc; /* 背景色 */
    color: #f5f5f5; /* 文字の色 */
}
/* スライドイン終わり */

/* 引用ボックス */
blockquote {
    position: relative;
    padding: 35px 15px 10px 15px;
    box-sizing: border-box;
    font-style: italic;
    background: #f5f5f5;
    color: #777777;
	border-top: none;
	border-bottom: none;
	border-right: none;
    border-left:6px solid #33a1dc;
    box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.14);
}
blockquote:before{
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 15px;
    vertical-align: middle;
    content: "\f10d";
    font-family: FontAwesome;
    color: #33a1dc;
    font-size: 35px;
    line-height: 1;
    font-weight: 900;
}
blockquote p {
    padding: 0;
    margin: 7px 0;
    line-height: 1.7;
}
blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}
/*blockquote {
    position: relative;
    padding: 30px 15px 8px 15px;
    box-sizing: border-box;
    font-style: italic;
    background: #efefef;
    color: #555;
}
blockquote:before{
    display: inline-block;
    position: absolute;
    top: 13px;
    left: 15px;
    vertical-align: middle;
    content: "\f10d";
    font-family: FontAwesome;
    color: #cfcfcf;
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
}
blockquote p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.7;
}
blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
} */
/* 引用ボックス終わり */

/* SNSシェア */
#main .sns-share-message {
	display: none;
/*	text-align: left;
    font-weight: bold;
	font-size: 15px;
    color: #545B63;
	margin: 5px 5px 0 5px; */
}
#main .sns-share a {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin: 5px 5px 5px 5px;
}
.sns-share-buttons {
	justify-content: flex-end;
}
#main .button-caption {
	display: none;
}
#main .social-icon {
	font-size: 25px;
}
.ss-bottom{
    position: fixed;
    bottom: -7px;
    right: 75px;
    z-index: 99999;
/*    width: calc(100vw - 70px);
    height: 40px;*/
    transform: translatey(100px);
    animation: fadeIn 1s ease-out 4s 1 normal both;
}
@keyframes fadeIn {
  from {transform: translatey(10%); opacity: 0;}
  100% {transform: translatey(0%); opacity: 1;}
}

/* トップへ */
.go-to-top-button {
	width: 45px;
    height: 45px;
	border-radius: 50%;
}

/* SNSフォロー */
#main .sns-follow-message {
	font-size: 15px;
    font-weight: bold;
    color: #545B63;
}
/* SNSフォローメッセの前に罫線を追加 */
.sns-follow-message::before{
  content:"\A────────────────────\A";
	white-space: pre;
}
#main .sns-follow-buttons a {
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 70px; /* ボタンの横の大きさ */
  height: 70px; /* ボタンの縦の大きさ */
  font-size:50px; /* アイコンのサイズ */
  margin: 7px; /* ボタン同士の間隔 */
}
.sns-follow-buttons {
  justify-content: center;
}

/* 目次カスタマイズ */
.toc {
  border: 2px solid #33a1dc; /*全体の枠線の色*/
  font-size: 14px; /*フォントサイズ*/
  color: #545B63; /*フォントカラー*/
  line-height: 1.5; /*行の高さ指定*/
  padding: 0;
  margin-top: 3em; /*目次上の空間*/
  margin-bottom: 1em; /*目次下の空間*/
  min-width:65%; /*目次横幅*/
  border-radius: 6px;/*角丸コーナー*/
  background: #f5f5f5; /*背景カラー*/
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3); /*シャドー（影）*/
}
.toc-title {
  background: #33a1dc; /*目次タイトル背景カラー*/
  color: #f5f5f5; /*目次タイトルフォントカラー*/
  font-size: 16px; /*目次タイトルフォントサイズ*/
  text-align: center; /*目次タイトル中央寄せ*/
  padding: 6px 16px;
  font-weight: bold; /*文字強調*/
  font-style: oblique; /*斜体フォント*/
}
.toc-title::before {
  font-family: FontAwesome;
  content: '\f0f6'; /*目次タイトルのアイコン指定*/
  margin-right: 0.3em;
  font-weight: 500; /*アイコンの太さ*/
  font-style: normal; /*通常フォント*/
}
.toc-content {
  padding: 6px;
}
.toc-content li a:hover {
  text-decoration:none; /*選択時装飾無し*/
  background: #b0c4dc; /*選択時の背景カラー*/
  transition: all 0.8s ease; /*ふわっと変化するアニメーション*/
}
.toc ul.toc-list>li, .toc ol.toc-list>li {
  margin-top: 0.4em; /*h2の上側の空間*/
}
.toc ul.toc-list>li>a, .toc ol.toc-list>li>a {
  padding:6px;
  border-bottom: 1px solid #33a1dc; /*h2のアンダーラインの太さとカラー*/
  font-weight: bold;
}
.toc ul li a, .toc ol li a {
  display: block;
  border-bottom: 2px dotted #33a1dc; /*h3～h6のアンダーラインの太さとカラー*/
  margin-left: -20px; /*アンダーライン調整*/
  padding-left: 20px; /*アンダーライン調整*/
}

/* プロフィールに詳細ボタンを追加 */
.profilepage-link {
    text-align: center;
    margin: 20px 0;
}
#main .profilepage-link {
    text-align: center;
	margin: 20px 0;
}
.profilepage-link a {
    display: inline-block;
    font-size: .9em;
    text-decoration: none;
    color: #f5f5f5; /*ボタンの文字色*/
	font-weight: bold; /*文字強調*/
    background: #33a1dc; /*ボタンの背景色*/
    padding: 1em 2em;
    border-radius: 4px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.2);
    transition: .3s ease-in-out;
}
.profilepage-link a::hover {
    color: #f5f5f5;
    box-shadow: 0 10px 12px -3px rgba(0,0,0,.24);
}

/* プロフィールデザイン変更 */
.author-box { /* 外枠 */
	border: none !important;
	padding: 0 !important;
}
.pwa .author-box {
	text-align: left; /* 文字を左揃えに */
}
.author-box .author-widget-name{ /* 吹き出し（書いた人） */
	color: #333; /* 濃い目グレー */
	background-color: #eaedf2; /* 薄いグレー */
	display: inline-block;
	margin: 0 auto 3px 1rem;
	padding: .5em 1em;
	border-radius: 4px;
	font-weight: bold;
	position: relative;
	z-index: 2;
	font-size: .9em;
}
.author-box .author-widget-name::before { /* 吹き出し（三角部） */
	content: '';
	position: absolute;
	left: 20%;
	bottom: -15px;
	display: block;
	width: 0;
	height: 0;
	border-right: 15px solid transparent;
	border-top: 15px solid #eaedf2; /* 薄いグレー */
	border-left: 15px solid transparent;
	z-index: 1;
}
.author-box figure.author-thumb{ /* 背景画像 */
	float: none;
	margin: 0 !important;
	text-align: center;
	width: 100% !important;
	background: url(https://hiei02.net/wp-content/uploads/2019/06/1727899C-3903-4FD4-BE77-185625CF5269.jpeg) center no-repeat; /* カバー画像を指定 */
	background-size: cover;
/*	box-shadow: 2px 0px 3px 0 rgba(0,0,0,.2); /* 水平 垂直 ぼかし 広がり 透過黒 */
	position: relative;
	height: 0;
	/* フル表示にしたい場合のpadding-topの値： 表示画像の高さ(px) ÷ 表示画像の幅(px) × 100(%) */
	padding-top: 56%;
	z-index: 0;
}
.author-box figure.author-thumb img{
	/* アイコン画像 */
	border: 3px solid #fff; /* 白 */
	background-color: #fff; /* 白 */
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2); /* 透過黒 */
	height: auto;
	width: 30%;
	max-width: 200px;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: -4.5em;
}

.author-box .author-content{ /* テキスト部分 */
	margin-left: 0 !important;
	margin-top: -0.2em !important;
	padding-top: 5.7em !important;
	padding-bottom: 0.5em;
/*	background-color: #33a1dc; */
/*	box-shadow: 2px 2px 3px 0 rgba(0,0,0,.2); /* 水平 垂直 ぼかし 広がり 透過黒 */
}

.author-box .author-content .author-name{
	/* テキスト部分（名前） */
	text-align: center;
	font-size: 1.3rem;
}
.author-box .author-content .author-name a{
	color: #545B63; /* h1と同じ */
	text-decoration: none;
}
.author-box .author-content .author-name a::hover{
	color: #333; /* ほぼ黒 */
	text-decoration: underline;
}
.author-box .author-content .author-description p{
	/* テキスト部分（本文） */
	margin: .5em auto;
	line-height: 1.5 !important;
	max-width: 500px;
	padding-left: 1em;
	padding-right: 1em;
	font-size: 90%;
	text-align: left;
}
.author-box .author-content .author-description p a{ 
	text-decoration: none; 
}
.author-box .author-content .author-description p a:hover{ 
	text-decoration: underline; 
}
.author-box .author-content .author-follows .sns-buttons{ 
	justify-content: center; 
}

.author-box .author-content .author-follows .sns-buttons a.follow-button,
.nwa .author-box .author-content .sns-follow-buttons a{
	font-size: 25px  !important;
	border-radius: 50%;
	border: none;
	width: 45px  !important;
	height: 45px  !important;
	color: #fff; /* 白 */
	margin-bottom: .5em;
	margin-right: .5em;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2); /* 透過黒 */
}
.author-box .icon-twitter-logo::before {
    font-family: FontAwesome;
    content: "\f099"
}
.author-box .icon-facebook-logo::before {
    font-family: FontAwesome;
    content: "\f09a";
}
.author-box .icon-instagram-new::before {
    font-family: FontAwesome;
    content: "\f16d";
}
.author-box .icon-hatebu-logo::before {
    font-family: Verdana;
    content: 'B!';
    font-weight: bold;
}
.author-box .icon-google-plus-logo::before {
    font-family: FontAwesome;
    content: "\f0d5";
}
.author-box .icon-youtube-logo::before {
    font-family: FontAwesome;
    content: "\f167";
}
.author-box .icon-pinterest-logo::before {
    font-family: FontAwesome;
    content: "\f231";
}
.author-box .icon-amazon-logo::before {
    font-family: FontAwesome;
    content: "\f270";
}
.author-box .icon-github-logo::before {
    font-family: FontAwesome;
    content: "\f09b";
}
.author-box .bc-brand-color.sns-follow .website-button{ background-color: #6eb6fd !important; } /* 水色 */
.author-box .bc-brand-color.sns-follow .twitter-button{ background-color: #1da1f2 !important; } /* 水色 */
.author-box .bc-brand-color.sns-follow .facebook-button{ background-color: #7c9dec !important; } /* 薄い紫 */
.author-box .bc-brand-color.sns-follow .hatebu-button{ background-color: #2c6ebd !important; } /* 青 */
.author-box .bc-brand-color.sns-follow .google-plus-button{ background-color: #dd4b39 !important; } /* 赤 */
.author-box .bc-brand-color.sns-follow .instagram-button{ background: linear-gradient(135deg, #427eff 0%, #f13f79 80%) no-repeat !important;} /* 明るい青〜マゼンタ */
.author-box .bc-brand-color.sns-follow .youtube-button{ background-color: #cd201f !important; } /* 赤 */
.author-box .bc-brand-color.sns-follow .flickr-button{ background-color: #111 !important; } /* ほぼ黒 */
.author-box .bc-brand-color.sns-follow .pinterest-button{ background-color: #bd081c !important; } /*赤*/
.author-box .bc-brand-color.sns-follow .line-button{ background-color: #00c300 !important; } /* 黄緑 */
.author-box .bc-brand-color.sns-follow .amazon-button{ background-color: #ff9900 !important; } /* 橙 */
.author-box .bc-brand-color.sns-follow .github-button{ background-color: #4078c0 !important; } /*青系*/
.author-box .bc-brand-color.sns-follow .feedly-button{ background-color: #2bb24c !important; } /* 緑系 */
.author-box .bc-brand-color.sns-follow .rss-button{ background-color: #f26522 !important; } /*濃い橙 */

.author-box .author-content .author-follows .sns-buttons a.follow-button span{ 
	line-height: 45px; 
}
.author-box .author-content .author-follows .sns-buttons a.follow-button span::before{ 
	font-size: 25px; 
}

main .author-box{
	max-width: 400px;
	margin: 0 auto;
	font-size: 80%;
}
/* 最後に罫線を追加 */
.author-box::after{
  
	text-align: center;
	color: #777;
content:"\A────────────────────\A";
	white-space: pre;
}
/* プロフィールデザイン変更終わり */

/* サイドバータイトル変更 */
.sidebar h3 {
	background: linear-gradient(transparent 56%, rgb(51,161,220,0.5)/*#33a1dc*/ 56%);
	padding: 2px 10px;
}

/* toto関連 始まり */
/*toto表用*/
/* その他の表も含む juni */
.toto, .mini, .goal {
    border-collapse: collapse;
    border: 2px solid #dcdcdc;
}
.toto th { 
    background-color: #e6b422;/* 金色 */
    color: #f5f5f5;
}
.mini th { 
    background-color: #2ca9e1; /* 天色 */
    color: #f5f5f5;
}
.goal th { 
    background-color: #008000; /* green */
    color: #f5f5f5;
}
.toto td, .mini td, .goal td,
.toto th, .mini th, .goal th {
	border: 2px solid #dcdcdc;
    text-align: center; 
}
.toto tbody, .mini tbody, .goal tbody tr:nth-child(even){
    background-color: #e8ecef; /* 白花色 */
    /* 行の色を交互にする */
}
.juni {
    border-collapse: collapse;
    border: 2px solid #f5f5f5;
}
.juni th { 
    background-color: #d9333f;/* 紅赤 */
}
.juni th, .juni td {
	border: 2px solid #f5f5f5;
    text-align: center; 
	color: #f5f5f5;
}
.juni tbody tr:nth-child(odd){
    background-color: #545b63/*666c67*/; /* アイビーグレイ */
    /* 行の色を交互にする */
}
.juni tbody tr:nth-child(even){
    background-color: #545b63/*9fa09e*/; /* アッシュグレイ */
    /* 行の色を交互にする */
}

/* 試合レビューのスタメン用 */
.yosou {
    border-collapse: collapse;
    border: 2px solid #dcdcdc;
}
/* .yosou th { 
    background-color: #d9333f;
} */
.yosou th, .yosou td {
	border: 2px solid #dcdcdc;
    text-align: center; 
	color: #545b63;
}
.yosou tbody tr:nth-child(odd){
    background-color: #fdfdfd; /* ほぼ白 */
    /* 行の色を交互にする */
}
.yosou tbody tr:nth-child(even){
    background-color: #fdfdfd; /* ほぼ白*/
    /* 行の色を交互にする */
}

/* totoアフィボタン */
.btn-4 {
    background-color: #e6b422;
    /* ボタン背景色 金色 */
    color: #f5f5f5; /* ボタン文字色 */
    box-shadow: 5px 5px 2px 0 #c89932;
    /* ボタン陰色 左右 垂直 ぼかし 影の距離 山吹茶 */
    font-weight: bold;
    border-radius: 4px; /* 角を丸くする */
    max-width: 80%;
    margin: 0.5em auto;
    padding: 10px;
    text-align: center;
    line-height: 1.4;
    transition: all .2s ease;
    animation: jumpbtn 3s ease-out 0s infinite;
    /* ジャンプの頻度など */
}
.btn-4:hover {
    opacity: 0.8;
}
.btn-4 a {
    text-decoration: none !important;
    color: #f5f5f5 !important;
    display: block;
    margin: 0;
    padding: 0.5em;
}
.btn-4 > img {
    float: left;
}
.btn-4::after{
    content: '';
    clear: left;
}

.btn-5 {
    background-color: #a22041;
    /* ボタン背景色 真紅*/
    color: #f5f5f5; /* ボタン文字色 */
    box-shadow: 5px 5px 2px 0 #752100;
    /* ボタン陰色 左右 垂直 ぼかし 影の距離 赤銅色 */
    font-weight: bold;
    border-radius: 4px; /* 角を丸くする */
    max-width: 80%;
    margin: 0.5em auto;
    padding: 10px;
    text-align: center;
    line-height: 1.4;
    transition: all .2s ease;
    animation: jumpbtn 3s ease-out 0s infinite;
    /* ジャンプの頻度など */
}
.btn-5:hover {
    opacity: 0.8;
}
.btn-5 a {
    text-decoration: none !important;
    color: #f5f5f5 !important;
    display: block;
    margin: 0;
    padding: 0.5em;
}
.btn-5 > img {
    float: left;
}
.btn-5::after{
    content: '';
    clear: left;
}

.btn-6 {
    background-color: #0000cd;
    /* ボタン背景色 mediumblue */
    color: #f5f5f5; /* ボタン文字色 */
    box-shadow: 5px 5px 2px 0 #191970;
    /* ボタン陰色 左右 垂直 ぼかし 影の距離 midnightblue */
    font-weight: bold;
    border-radius: 4px; /* 角を丸くする */
    max-width: 80%;
    margin: 0.5em auto;
    padding: 10px;
    text-align: center;
    line-height: 1.4;
    transition: all .2s ease;
    animation: jumpbtn 3s ease-out 0s infinite; 
    /* ジャンプの頻度など */
}
.btn-6:hover {
    opacity: 0.8;
}
.btn-6 a {
    text-decoration: none !important;
    color: #f5f5f5 !important;
    display: block;
    margin: 0;
    padding: 0.5em;
}
.btn-6 > img {
    float: left;
}
.btn-6::after {
    content: '';
    clear: left;
}

@keyframes jumpbtn {
    from, 10%, 20%, 100% {
        transform: translateY(0%);
    }
    5%, 15% {
        transform: translateY(-0.5em);
        /* ジャンプする高さ */
    } 
}
/* toto関連 終わり */