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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/************************************
** フロー
************************************/
.flow > li {
  position: relative;
  list-style-type: none;
}
.flow > li:not(:last-child) {
  margin-bottom: 40px;
}
.flow > li:not(:first-child)::before {
  content: "";
  height: 60px;
  display: block;
  border-left: 4px dotted #e5e5e5;
  position: absolute;
  top: -40px;
  left: -webkit-calc(10% + 30px - 2px);
  left: calc(10% + 30px - 2px);
  z-index: 10;
}
.flow > li dl {
  width: 100%;
  padding: 20px 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 2px solid rgb(52, 148, 55);
  border-radius: 10px;
  position: relative;
}
.flow > li:not(:last-child) dl::before,
.flow > li:not(:last-child) dl::after {
  content: "";
  border: solid transparent;
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.flow > li:not(:last-child) dl::before {
  border-width: 22px;
  border-top-color: rgb(52, 148, 55);
}
.flow > li:not(:last-child) dl::after {
  border-width: 20px;
  border-top-color: #fff;
}
.flow > li dl dt {
  font-size: 20px;
  font-weight: 600;
  color: rgb(46, 128, 59);
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;
  margin-right: 2vw;
  text-align: center;
}
.flow > li dl dt .icon {
  font-size: 12px;
  color: #fff;
  background: rgb(116, 237, 120);
  background: -moz-linear-gradient(left, rgba(75, 201, 79,1) 0%, rgba(178, 247, 180,1) 100%);
  background: -webkit-linear-gradient(left, rgba(75, 201, 79,1) 0%,rgba(178, 247, 180,1) 100%);
  background: linear-gradient(to right, rgba(75, 201, 79,1) 0%,rgba(178, 247, 180,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4bc94f', endColorstr='#b2f7b4',GradientType=1 );
  padding: 5px 10px;
  margin-bottom: 10px;
  display: block;
  border-radius: 20px;
  position: relative;
  z-index: 100;
}
/************************************
** FAQ
************************************/
.qaContainer dt {
padding: 10px 10px 10px 35px;
font-weight: bold;
font-size: 18px;
border-radius: 5px;
background: #bcffbc;
text-indent: -25px;
}
.qaContainer dt:before {
content: "Q";
font-size: 1.8em;
color: #ff2d2d;
font-weight: bold;
margin-right: 7px;
}
.qaContainer dd {
margin: 20px 10px 40px 35px;
text-indent: -25px;
font-size: 14px;
}
.qaContainer dd:before {
content: "A";
font-size: 1.5em;
color: #1771c6;
font-weight: bold;
margin-right: 7px;
}
/************************************
** HR
************************************/
hr {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
hr {
  border-top: 2px dashed #9dd1ff;
  background-color: #56b0ff;
}

/************************************
** ボタン
************************************/
.button01 a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  margin: 0 auto;
  padding: 1em 2em;
  width: 300px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  background-color: #eb6100;
  transition: 0.3s;
}

.button01 a::after {
  width: 5px;
  height: 5px;
  border-top: 3px solid #eb6100;
  border-right: 3px solid #eb6100;
  transform: rotate(45deg);
}

.button01 a:hover {
  text-decoration: underline double;
  background-color: #ff9966;
}

/************************************
** ロゴ位置修正
************************************/
.logo{
	text-align:left;
}
@media screen and (max-width: 480px){
	.logo img {
		height: 40px !important; /* スマホ時のロゴの画像タテサイズ */
		margin: .5em auto;
	}
}


/************************************
** 吹き出し
************************************/
/*吹き出しの色：LINE風*/
.sbs-line.sbp-l .speech-balloon {
background-color: #d6ff9e;
border-color: #d6ff9e;
}

.sbs-line.sbp-l .speech-balloon::before, .sbs-line.sbp-r .speech-balloon::after {
border-right-color: #d6ff9e;
border-left-color: #d6ff9e;
}

.sbs-line.sbp-r .speech-balloon {
background-color: #d6ff9e;
border-color: #d6ff9e;
}

.sbs-line.sbp-r .speech-balloon::before, .sbs-line.sbp-r .speech-balloon::after {
border-right-color: #d6ff9e;
border-left-color: #d6ff9e;
}

/************************************
** 囲み（コメント誘導）
************************************/
.fashionable-box1{
  margin: 1em 10px;
  padding: 1em;
  background-color: #e8f5e9;
  border: dashed 3px #4caf50;
  box-shadow: 0 0 0 10px #e8f5e9;
  border-radius: 5px;
  font-size: 14px;
}

.fashionable-box1 p{
  margin: 0;
  padding: 0;
}

/************************************
** 見出し
************************************/
/**要素を一度リセット**/
.article h2 {
    padding: 0;
    background: none;
}
.article h3 {
    border: none;
    padding: 0;
}
.article h4 {
    border: none;
    padding: 0;
}
.article h5 {
    border: none;
    padding: 0;
}
.article h6 {
    border: none;
    padding: 0;
}

.article h1{
position: relative;/*相対位置*/
padding: 0.5em 0.5em 0.5em 1.5em;/*アイコン分のスペース*/
line-height: 1.4;/*行高*/
color: #222222;/*文字色*/
border-top: dotted 1px #288e11;
border-bottom: dotted 1px #288e11;
background: #d6ffd6;
font-size: 22px;
}

.article h1:before {
font-family: FontAwesome;/*忘れずに*/
content: "\f101";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0.25em;/*アイコンの位置*/
top: 0.5em;/*アイコンの位置*/
color: #288e11; /*アイコン色*/
}

.article h2 {
border: 0;
color: #222222;
font-size: 20px;
border-top: solid 2px #288e11;
border-bottom: solid 2px #288e11;
background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#c1ffc1 3px, #c1ffc1 7px);
background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#c1ffc1 3px, #c1ffc1 7px);
width: 85%; 
padding: 10px 10px 10px 10px;
}

.article h3 {
position: relative;
font-size: 18px;
color: #222;
background: #66cdaa;
line-height: 1.4;
width: 80%; 
padding: 0.5em 0.5em 0.5em 1.7em;
}

.article h3:before {/*疑似要素*/
font-family: FontAwesome;
content: "\f14a";
color: #fff;
position: absolute;
left : 0.5em; /*左端からのアイコンまでの距離*/
}

.article h4{
position: relative;
border-top: solid 2px #288e11;
border-bottom: solid 2px #288e11;
background: #f4f4f4;
font-size: 17px;
line-height: 1.4;
margin: 2em 0 0.5em;
display:inline-block;
width: 80%; 
padding: 3px 10px 3px 10px;
}
.article h4:after {/*タブ*/
position: absolute;
font-family: FontAwesome,'Quicksand','Avenir','Arial','sans-serif';
content: '\f0a7\ Take a look';
background: #288e11;
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 5px 7px 3px;
font-size: 0.8em;
line-height: 1;
letter-spacing: 0.05em;
}

.article h5 {
border-bottom: dotted 2px #288e11;
font-size: 16px;
display:inline-block;
padding: 3px 50px 3px 10px;
}
/************************************
** 引用（blockquote）
************************************/
blockquote {
  background-color: #f4f9f3;
  border: 2px solid #7aaa00;
  margin: 1em 0;
  padding: 12px 2.6em;
  position: relative;
  font-style: italic;
}
blockquote::before {
  color: #7aaa00;
  content: "\f10d";
  font-family: FontAwesome;
  position: absolute;
  font-size: 160%;
}
blockquote::after {
  color: #7aaa00;
  content: "\f10e";
  font-family: FontAwesome;
  position: absolute;
  font-size: 160%;
}
blockquote::before {
  line-height: 1.1;
  left: 10px;
  top: 0;
}
blockquote::after {
  line-height: 0;
  right: 10px;
  bottom: 15px;
}

/*本文下情報*/
.footer-meta {
  font-size: 0.8em;
  text-align: right;
}

/*投稿者*/
.author-info .post-author {
  font-size: 14px;
}

/************************************
** コメント（comment）
************************************/
.st-comment-content p{
	font-size: 14px;
	line-height: 1.3em; /* コメント本文のサイズ・行間調整 */
}

.st-comment-meta .avatar{
	float: left !important;
	border-radius: 27.5px; /* アイコンを丸く切り抜く */
	margin-right: 0.5em;
}
.st-comment-meta::after{
	content: '';
	display: block;
	clear: left; /* アイコンの回り込み解除 */
}

.bypostauthor .avatar{
	float: right !important; /* 管理人のアイコンは右寄せ */
}

.comment-author{
	font-style: normal; /* 斜体の解除 */
}

.commets-list .children{
	margin-left: 10px;
	padding-left: 6px !important;
	border-left: 2px solid #8ecc55; /* 入れ子コメントの左側に線を表示 */
} 

.commets-list .comment-body, .commets-list .st-comment-body{
	margin-bottom: .5em; /* コメントの間隔を狭める */
}

.comment-reply-link{
	font-size: .5em; /* 「返信」ボタンを小さく */
}

.related-entry-heading,
.comment-title {
border: 0;
color: #222222;
font-size: 20px;
border-top: solid 2px #288e11;
border-bottom: solid 2px #288e11;
background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#c1ffc1 3px, #c1ffc1 7px);
background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#c1ffc1 3px, #c1ffc1 7px);
padding: 3px 3px 3px 10px;
}

#jetpack_remote_comment iframe {
 height:315px !important;
}

/************************************
** コメントを残すを消す
************************************/
/* H3の非表示 */
h3#reply-title.comment-reply-title {
    display: none;
}
/************************************
** 最近のコメントウィジェット
************************************/
.recent-comments .a-wrap {
  text-decoration: none;
  display: block;
  color: #333;
  padding: 10px;
  margin-bottom: 5px;
}

.recent-comments {
  line-height: 1.3;
}
.recent-comments .a-wrap:hover .recent-comment-content {
  background-color: #f5f8fa;
  transition: all 0.5s ease;
  color: #222;
}

.recent-comment-avatar {
  float: left;
  margin-right: 10px;
}

.recent-comment-author {
  font-weight: bold;
}

.recent-comment-info,
.recent-comment-article {
  font-size: 12px;
}

.recent-comment-article {
  margin-top: 3px;
}
.recent-comment-article::before {
  font-family: FontAwesome;
  content: "\f0c1";
  padding-right: 3px;
}

.recent-comment-content {
  position: relative;
  background: #fff;
  border: 1px solid #ccc;
  padding: 6px;
  margin-top: 4px;
  font-size: 0.8em;
  border-radius: 5px;
}
.recent-comment-content::after, .recent-comment-content::before {
  bottom: 100%;
  left: 18px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.recent-comment-content::after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #fff;
  border-width: 6px;
  margin-left: -6px;
}
.recent-comment-content::before {
  border-color: rgba(221, 221, 221, 0);
  border-bottom-color: #ccc;
  border-width: 9px;
  margin-left: -9px;
}

/************************************
** 他のウィジェット（細かいところ）
************************************/
.widget ul {
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 14px;
}

.widget-entry-cards.not-default .e-card {
  font-size: 12px;
}

.wp_rp_wrap .related_post_title h3{
border: 0;
}

/************************************
** サイドバー（見出し）
************************************/
.sidebar h3{
line-height: 50px;
padding: 0;
border-radius: 0;
font-weight: 700;
color: #222222;
background-color:transparent;
border-bottom:solid 3px #288e11;
}

/* ウィジェットタイトルにFAアイコン */
.widget h3::before { font-family: FontAwesome; font-size: 80%; vertical-align: middle; font-weight: normal; margin-right: 5px; } /* 共通設定 */
.widget_links h3::before { content: '\f045'; } /* リンク */
.widget_popular_entries h3::before { content: '\f087'; } /* 人気記事 */
.popular-posts h3::before { content: '\f087'; } /* WordPress Popular Posts */
.widget_new_entries h3::before, .widget_recent_entries h3::before { content: '\f046'; } /* 新着記事 */
.widget_categories h3::before { content: '\f115'; } /* カテゴリー */
.widget_rss h3::before { content: '\f143'; } .widget_rss h3 img { display: none; } /* RSSフィード */
.widget_author_box h3::before { content: '\f044'; } /* About me */
.widget_text h3::before { content: '\f002'; } /* 検索 */
.widget_custom_html h3::before { content: '\f002'; } /* サイト内検索 */
.widget_fb_like_box h3::before { content: '\f082'; } /* Faceboxボックス */
.widget_facebook_page_like h3::before { content: '\f082'; } /* Faceboxバルーン */
.widget_item_ranking h3::before { content: '\f091'; } /* ランキング */
.widget_archive h3::before { content: '\f073'; } /* カレンダー */
.widget_recent_comments h3::before { content: '\f0e6'; } /* 新着コメント */

/************************************
** reCAPTCHA v3消去
************************************/
.grecaptcha-badge {
    opacity: 0;
}

/************************************
** プロフィールBOX
************************************/
.author-box {
	border: none !important;
	padding: 0 !important;
}

.pwa .author-box {
	text-align: left; /* 文字を左揃えに */
}

.nwa .author-box .author-description {
    text-align: left;
    color: #222222;
}

.author-box .author-widget-name{
	color: #222;
	background-color: #eaedf2;
	display: inline-block;
	margin: 0 auto 3px 1rem;
	padding: .4em;
	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://keiba.dragon-1.com/wp-content/uploads/2019/12/9015ba9088ad371b47b24fd3476cc863.jpg) center no-repeat; /* カバー画像を指定 */
	background-size: cover;
	position: relative;
	height: 0;
	/* フル表示にしたい場合のpadding-topの値： 表示画像の高さ(px) ÷ 表示画像の幅(px) × 100(%) */
	padding-top: 55%;
	z-index: 0;
}

.author-box figure.author-thumb img{
	border: 3px solid #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: -3.0em;
}

.author-box .author-content{
	margin-left: 0 !important;
	margin-top: 3.5em !important;
}

.author-box .author-content .author-name{
	text-align: center;
	font-size: 1.2rem;
}

.author-box .author-content .author-name a{
	color: #14171a;
	text-decoration: none;
}
.author-box .author-content .author-name a:hover{
	color: #14171a;
	text-decoration: underline;
}

.author-box .author-content .author-description p{
	margin: .5em auto;
	line-height: 1.5 !important;
	max-width: 500px;
	font-size: 95%;
	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{
	border-radius: 50%;
	border: none;
	width: 40px;
	height: 40px;
	color: #fff;
	margin-bottom: .5em;
	margin-right: .2em;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
}

.author-box .bc-brand-color.sns-follow .website-button{ background-color: #6eb6fd !important; }
.author-box .bc-brand-color.sns-follow .twitter-button{ background-color: #7dcdf7 !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: 40px; }
.author-box .author-content .author-follows .sns-buttons a.follow-button span::before{ font-size: 20px !important; }

main .author-box{
	max-width: 400px;
	margin: 0 auto;
	font-size: 80%;
}

.profilepage-link {
    text-align: center;
    margin-bottom: 20px;
}
#main .profilepage-link {
    text-align: left;
}

.profilepage-link a {
	display: inline-block;
	font-size: .8em;
	text-decoration: none;
	color: #fff; /*ボタンの文字色*/
	background: #288e11; /*ボタンの背景色*/
	padding: .3em 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: #fff;
    box-shadow: 0 10px 12px -3px rgba(0,0,0,.24);
}
@media screen and (max-width: 480px){
#main .profilepage-link {
    text-align: center;
}
.profilepage-link a {
    font-size: 14px;
}
}

/************************************
** サイドバープルダウン
************************************/
.search-edit,.widget .widget-sidebar .widget-sidebar-standard .widget_archive input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select {
padding: 6px;
border: 2px solid #ccc;
font-size: 14px;
width: 100%;
}

/************************************
** 新着記事ウィジェット（大きなサムネイル）
************************************/

.widget-entry-cards.card-large-image .e-card {
    font-size: 14px;
}
.widget-entry-card {
  font-size: 12px;
  position: relative;
}

/* --------------------------- *
 *  スライドインのカスタマイズ *
 * --------------------------- */

/* 背景色を変更：背景画像にするなら不要 */
.mobile-menu-buttons {
background: #288e11;
}
/* メニューのみ */
.navi-menu-button {
	color: #fff;
}
/* ホームのみ */
.mobile-menu-buttons .home-menu-button > a {
	color: #fff;
}
/* 検索のみ */
.search-menu-button {
	display:none;
}
/* トップのみ：トップに画像を入れる歳は不要 */
.mobile-menu-buttons .top-menu-button > a {
	color: #fff;
}
/* コメントのみ：コメントに画像を入れる歳は不要 */
.mobile-menu-buttons .comments-menu-button > a {
	color: #fff;
}
/* サイドバーのみ */
.sidebar-menu-button {
	color: #fff;
}

/* スライドインメニュー背景色 */
.navi-menu-content {
	background: #f3fff3;
}

.widget {
    margin-bottom: 20px;
}

.toc {
    border: 1px solid #666; /*全体の枠線の色*/
    font-size: 0.9em;
    line-height: 1.5;
    padding: 0;
    margin-bottom: 1em;
    display: block; /*横幅いっぱいに広げる*/
}
.toc-title {
    background: #666; /*目次タイトルの背景色*/
    color: #fff; /*目次タイトルの文字色*/
    font-size: 1.1em;
    text-align: center;
    padding: 6px 16px;
}
.toc-title::before {
    font-family: FontAwesome;
    content: '\f0ca'; /*目次タイトルのアイコン*/
    margin-right: 0.5em;
}
.toc-content {
    padding: 8px;
}

/************************************
** 目次
************************************/
.toc {
border: 1px solid #288e11; /*全体の枠線の色*/
font-size: 0.9em;
line-height: 1.5;
padding: 0;
margin-bottom: 1em;
display: block; /*横幅いっぱいに広げる*/
}
.toc-title {
background: #288e11; /*目次タイトルの背景色*/
color: #fff; /*目次タイトルの文字色*/
font-size: 1.1em;
text-align: center;
padding: 6px 16px;
}
.toc-title::before {
font-family: FontAwesome;
content: '\f0ca'; /*目次タイトルのアイコン*/
margin-right: 0.5em;
}
.toc-content {
padding: 8px;
}
.toc ul li a, .toc ol li a {
    display: block;
    border-bottom: 1px dashed #288e11; /*h3以下の下側ボーダー*/
    margin-left: -20px;
    padding-left: 20px;
}
.toc ul.toc-list>li, .toc ol.toc-list>li {
    margin-top: 1em;
}
.toc ul.toc-list>li>a, .toc ol.toc-list>li>a {
    border-bottom: 2px solid #288e11; /*h2の下側ボーダー*/
    font-weight: bold;
}


/************************************
** 全体をフワッとさせる
************************************/
#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;}
}


/************************************
** ページネイション
************************************/
.pagination-next-link {
  background-color: #288e11;
  color: #fff;
  border: none;
  border-radius: 30px;
}
.pagination-next-link:hover {
  background-color: #77d682;
  transition: all 0.5s ease;
  color: #fff;
}
.page-numbers {
  color: #288e11;
  border: 1px solid #288e11;
  border-radius: 50%;
}
.pagination .current {
  background-color: #288e11;
  color: #fff;
}
.page-numbers.dots {
  opacity: 1;
  background: none;
}
.pagination a:hover {
  background-color: #288e11;
  color: #fff;
}

/************************************
** Reaction Buttons
************************************/
/* the reaction buttons 見出し */
div.reaction_buttons_tagline{
display: inline-block;
font-weight: bold;
font-size: 1.2em;
  padding: 0.3em;/*文字周りの余白*/
  color: #333333;/*文字色*/
  background: #e8fccc;/*背景色*/
  border-bottom: solid 3px #288e11;/*下線*/
}

div.reaction_buttons ol, ul {
  margin: 1em 0;
  padding-left: 0px;
}


/* the reaction buttons region */
div.reaction_buttons{
    margin-top: 20px;
    margin-bottom: 25px;
    font-size: 0.8em;
    font-weight: bold;
    text-align: left;
    color: #333333;
}
/* a single normal button */
div.reaction_buttons li.reaction_button{
    border: 2px dotted #288e11;
    line-height: 2em;
    padding: 5px;
    margin: 3px;
    cursor: pointer;
    list-style: none;
    text-align: center;
    display: inline-block;

    -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
    -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
}

/* the button while hovering over it */
div.reaction_buttons li.reaction_button:hover {
    background: #e8fccc;
    border: 2px solid #288e11;
    background-image: -moz-linear-gradient(#ffffee, #e8fccc 70%);
    background-image: -webkit-linear-gradient(#ffffee, #e8fccc 70%);
    background-image: linear-gradient(#ffffee, #e8fccc 70%);
}

/* special setings for display as a graph,
 * inspired by http://geoffgraham.me/creating-a-responsive-css-bar-chart/ */
div.reaction_buttons ul.graph {
    clear: both;
    padding: 0;
    width: 90%;
}
div.reaction_buttons ul.graph li.reaction_button {
    height: 125px;
    padding: 0;
    position: relative;
    vertical-align: bottom;
    margin: 0 auto;
    padding-left: 10px;
    text-align: left;
    display: block;

    background: #4ecdc4;
    border: 1px solid #4ecdc4;
    background-image: -moz-linear-gradient(#ffffee, #f7a8f6 70%);
    background-image: -webkit-linear-gradient(#ffffee, #f7a8f6 70%);
    background-image: linear-gradient(#ffffee, #f7a8f6 70%);
    -moz-border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px;
    border-radius: 4px 4px 0 0;
    -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
    -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
}
@media (min-width: 700px) {

    div.reaction_buttons ul.graph {
        height: 250px;
        width: 100%;
    }
    div.reaction_buttons ul.graph li.reaction_button {
        height: 250px;
        margin: 0 1.8% 0 0;
        padding: 0;
        width: 17%;
        display: inline-block;
    }
    div.reaction_buttons ul.graph li.reaction_button span.button_name {
        bottom: -4em;
        position: absolute;
    }
    div.reaction_buttons ul.graph li.reaction_button span.braces {
        display: none;
    }
    div.reaction_buttons ul.graph li.reaction_button span.count_number {
        bottom: 3px;
        position: absolute;
        font-size: 2em;
        font-weight: bold;
    }
}

/* the button after voting */ 
div.reaction_buttons li.voted,
div.reaction_buttons li.voted:hover {
    cursor: default;
}

/* number of votes including parantheses.
.reaction_buttons .reaction_button .count {
}
 */

/* number of votes in between the parantheses.
.reaction_buttons .reaction_button .count_number {
}
 */
 
/* simple sidebar settings */ 
#sidebar div.widget_reaction_buttons h3 {
	margin: 0;
	margin-top: 4px;
	font-size: 1.1em;
}

#sidebar div.widget_reaction_buttons ol {
	margin-left: 25px;
}

/************************************
** フッター下余白消し（暫定
************************************/
html{
  height:100%; 
}

body{
  height:100%;
}

/************************************
** コメントフォーム
************************************/
#commentform label{
	display: inline-block;
}

#commentform textarea, #commentform input{
    border: 1px solid #288e11; /* 枠線の色 */
	font-family: Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	border-radius: 4px;
	transition: all .2s ease;
	font-size: 80%;
	
}

#commentform textarea:focus, #commentform input:focus{
	outline: none;
	border: 3px solid #288e11; /* 枠線の色 */
}

#commentform #submit{
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
	background-color: #288e11; /* 送信ボタンの背景色 */
	color: white;
	border-radius: 15px;
	height: 40px;
	border: none;
	padding: 0;
	line-height: 40px;
	vertical-align: middle;
	text-align: center;
	transition: all .2s ease;
}

.form-allowed-tags {display:none; }
.comment-notes {display:none; }
.says{display:none; }

.comment-form-comment label{
font-size:0;
}
.comment-form-comment label:before {font-size: 14px; content: "Your Comments";}

.comment-form-author label{
font-size:0;
}

.comment-form-author label:before {font-size: 14px; content: "Name";}

.comment-form-url label{
font-size:0;
}

.comment-form-url label:before {font-size: 14px; content: "Your Site URL";}

/*コメントボタン四角から丸ココから*/

.comment-btn {
font-size:16px; /*文字の大きさ*/
font-weight:bold; /*文字の太さ*/
padding:10px; /*文字周り余白 */
border-radius:4px; /*ボタン角の丸み*/
color:#288e11; /*ボタンの文字色 */
background:#fff; /*ボタンの背景色 */
border:2px solid #288e11;/*ボタン枠線の太さと色 */
}

.comment-btn:hover {
border-radius:30px; /*マウスオーバー時のボタン角の丸み*/
color:#fff; /*マウスオーバー時の文字色 */
background:#288e11;/*マウスオーバー時のボタンの背景色 */
border:2px solid #009944;  /*マウスオーバー時のボタン枠線の太さと色 */
transition:all 0.1s;/*色が変わる時間（秒）*/
}


/*コメントボタン四角から丸ココまで */

/*記事を読む見込み時間変更*/
.read-time{
    font-size:.8rem;/*文字の大きさを少し大きく*/
	background-color:#ddffdd;/*背景を薄いグレーに*/
	margin:1rem 0;/*上下の余白を広げる*/
	padding: .2rem 0;/*グレーの背景を少し大きくする*/
	border-top:none;/*上の二重線を消す*/
	border-bottom:none;/*下の二重線を消す*/
}

.home.page .read-time{
	 display: none;/*ホームページに表示させないようにする*/
}

/************************************
** 言語スイッチャー
************************************/

.bogo-language-switcher{
	.current{
		display: none;
	}
	li{
		text-align: right;
	}
	a:before{
		content: "\f0ec";
		font-family: FontAwesome;
		padding-right: 8px;
	}
}
/** ここから下はデフォルト **/

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

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

/*768px以下*/
@media screen and (max-width: 768px){
 /*reaction_buttons モバイル用*/
.reaction_buttons ul, .reaction_buttons ol {
	padding-left: 0px; 
}
/*reaction_buttons モバイル用ここまで */
}

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