@charset "UTF-8";
/*
  Skin Name: バブル・ブルー
  Description: 泡がモチーフのふわっとしたスキン
  Skin URI: https://zvalinf.info/skin-check/?theme-switch=skin-BubbleBlue
  Author: y.hiroaki
  Author URI: https://zvalinf.info
  Version: 0.0.1
  Priority: 9830001000
*/

/* □■-----------------------------------------
/    ベースカラー：	#088cc0
/										rgba(8, 140, 192, .X)
-----------------------------------------■□ */

/* □■--------------------------------
/    全体的なもの
--------------------------------■□ */
.header-container {
  box-shadow: 0 4px 5px -3px rgba(0, 0, 0, .24), 0 5px 11px -3px rgba(0, 0, 0, .18);
}

.footer {
  box-shadow: -6px -8px 6px -1px rgba(0, 0, 0, .24),
      -6px -6px 10px -3px rgba(0, 0, 0, .18);
}

body {
  background-color: #f4f5f7;
}

.main,
.sidebar,
.carousel-in {
  background: none;
}

.blogcard, 
.ecb-entry-border 
.entry-card-wrap, 
.page-numbers, 
.pagination-next-link, 
.comment-btn, 
.index-tab-buttons 
.index-tab-button, 
.border-square a, 
.author-box {
  border-color: rgba(8, 140, 192, .4);
}

.box-menu {
  background-color: transparent;
}

/* □■--------------------------------
/    グローバルメニュー
--------------------------------■□ */
.navi-in a {
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.navi-in a:hover {
  color: white;
}

.navi-in a::before,
.navi-in a::after {
  content: '';
  position: absolute;
  width: 130%;
  height: 100%;
  z-index: -1;
  background-color: rgba(8, 140, 192, .4);
  transition: all .7s ease;
  transform: skewX(-30deg) scale(0, 1);
}


.navi-in a::before {
  top: 0;
  left: -100%;
}

.navi-in a:hover::before {
  left: -15%;
  transform: skewX(-30deg) scale(1, 1);
}

.navi-in a::after {
  bottom: 0;
  right: -100%;
}

.navi-in a:hover::after {
  right: -15%;
  transform: skewX( -30deg) scale(1, 1);
}

/* □■--------------------------------
/    サムネイルの影
--------------------------------■□ */
.card-thumb img {
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .25), 0 2px 2px rgba(0, 0 ,0, .22);
}

.blogcard-thumbnail img {
  box-shadow: 0 3px 10px rgba(0, 0, 0, .25), 0 2px 2px rgba(0, 0, 0, .22);
}

/* □■--------------------------------
/　　目次
--------------------------------■□ */
.article .toc {
  min-width: 60%;
  border: 1px solid #088cc0;
  border-radius: 4px;
  background-color: rgba(8, 140, 192, .02);
  position: relative;
  z-index: 1;
}

.article .toc::before {
  position: absolute;
  top: 5px;
  left: 5px;
  border: 1px solid #088cc0;
  content: "";
  width: 100%;
  height: 100%;
  z-index: -1;
  border-radius: 4px;
}

.toc {
  padding: 0.3em 1.8em;
}

.toc-title {
  padding: 6px 16px 0px 16px;
}

.toc ul li a, .toc ol li a {
  display: block;
  margin-left: -1.5em;
  padding-left: 2em;
}

.toc-content ul li a:hover,
.toc-content ol li a:hover{
  background-color: rgba(8, 140, 192, .1);
}

.toc a:hover {
  text-decoration: none;
}

/* □■--------------------------------
/    見出し（H2）
--------------------------------■□ */
.article h1, .article h2, .article h3, .article h5, .article h6 {
  margin-bottom: 18px !important;
  color: #088cc0;
}

.article h2 {
  position: relative;
  padding: 20px 15px 18px 38px;
  background-color: transparent;
}

.article h2::before,
.article h2::after {
  position: absolute;
  border: 2px solid rgba(8, 140, 192, .8);
  content: "";
  border-radius: 50%;
}

.article h2::before {
  top: 26px;
  left: 0px;
  width: 12px;
  height: 12px;
}

.article h2::after {
  top: 12px;
  left: 4px;
  width: 20px;
  height: 20px;
}

/* □■--------------------------------
/    見出し（H3）
--------------------------------■□ */
.article h3 {
  margin: 52px 18px 22px 18px;
  padding: 0px 0px 8px 12px;
  background: 0 0;
  border: none;
  position: relative;
  border-bottom: 1px solid rgba(8, 140, 192, .8);
  color: #088cc0;
  margin-bottom: 40px!important;
}

.article h3:before,
.article h3:after {
  position: absolute;
  content: "";
  bottom: -8px;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(8, 140, 192, .8);
  border-radius: 50%;
}

.article h3:before {
  left: -18px;
}

.article h3:after {
  right: -18px;
}

/* □■--------------------------------
/    見出し（H4）
--------------------------------■□ */
.article h4 {
  position: relative;
  padding: 10px 10px 10px 28px;
  border: none;
}

.article h4::after {
  position: absolute;
  content: '';
  border-radius: 50%;
}

.article h4::after {
  top: .7em;
  left: 0px;
  width: 14px;
  height: 14px;
  background-image: linear-gradient(
	  135deg, 
	  rgba(8, 140, 192, .8) 0%, 
	  rgba(8, 140, 192, .8) 50%, 
	  rgba(8, 140, 192, .5) 50%, 
	  rgba(8, 140, 192, .5) 100%, 
	  transparent 0);
}

/* □■--------------------------------
/    見出し（H5）
--------------------------------■□ */
.article h5 {
  position: relative;
  border: none;
  padding: 0px 0px 8px 28px;
}

.article h5:before {
  position: absolute;
  content: '';
  left: 2px;
  top: .2em;
  background: rgba(8, 140, 192, .8);
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
/* □■--------------------------------
/    見出し（H6）
--------------------------------■□ */
.article h6 {
  border-bottom: 1px solid rgba(8, 140, 192, .8);
}

/* □■--------------------------------
/    サイドバー見出し（H3）
--------------------------------■□ */
.widget-sidebar {
  margin: 0 0 26px 0;
}

.sidebar h3 {
  background-color: rgba(8, 140, 192, .5);
  color: white;
  padding: 8px 12px 8px 14px;
  border-radius: 4px;
}

/* □■--------------------------------
/    関連記事／投稿ナビ
--------------------------------■□ */
.prev-post.a-wrap,
.next-post.a-wrap {
  margin:2px 0px;
}

.related-entry-card-wrap.a-wrap,
.prev-post.a-wrap,
.next-post.a-wrap {
  border: 1px solid rgba(8, 140, 192, .15);
  border-radius:4px;
}

.prev-post.a-wrap:hover,
.next-post.a-wrap:hover {
  border: 1px solid rgba(8, 140, 192, .1);
  background-color:rgba(8, 140, 192, .1);
}

.prev-post.a-wrap .iconfont,
.next-post.a-wrap .iconfont{
  transition: all .5s;
}
.prev-post.a-wrap:hover .iconfont,
.next-post.a-wrap:hover .iconfont{
  color: rgba(8, 140, 192, .6);
}

/* □■--------------------------------
/　  ページネーション
--------------------------------■□ */
.pagination-next-link, .comment-btn {
  width: 60%;
  margin: auto;
  background-color: transparent;
  color: rgba(8, 140, 192, .8);
  transition: all .4s;
  border-radius:4px;
}

.pagination-next-link:hover, .comment-btn:hover {
  border-color: #088cc0;
  background-color: transparent;
  color: rgba(8, 140, 192, .8);
}

.pagination a {
  border-radius: 50%;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-property: transform;
  transition-property: transform;
  transition: .5s;
  color: #088cc0;
  background-color: transparent;
}

.pagination a:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center,ellipse,rgba(0, 0, 0, .35) 0%,rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at center,rgba(0, 0, 0, .35) 0%,rgba(0, 0, 0, 0) 80%);
  transition: .5s;
  -webkit-transition-property: transform,opacity;
  transition-property: transform,opacity;
}

.pagination a:hover {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  color: rgba(8, 140, 192, .8);
  opacity: 1;
  background-color: transparent;
  border: 1px solid #088cc0;
}

.pagination a:hover:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
}

.pagination .current {
  position: relative;
  background-color: rgba(8, 140, 192, .6);
  color: white;
}

.page-numbers {
  border-radius: 50%;
  border: 1px solid rgba(8, 140, 192, .4);
}

/* □■--------------------------------
/　　トップページ
--------------------------------■□ */
.index-tab-buttons .index-tab-button {
  position: relative;
  background:none;
  border:none;
  min-width: auto;
}

#index-tab-wrap .index-tab-buttons .index-tab-button{
  border:none;
}

#index-tab-1:checked ~ .index-tab-buttons .index-tab-button[for=index-tab-1], 
#index-tab-2:checked ~ .index-tab-buttons .index-tab-button[for=index-tab-2], 
#index-tab-3:checked ~ .index-tab-buttons .index-tab-button[for=index-tab-3], 
#index-tab-4:checked ~ .index-tab-buttons .index-tab-button[for=index-tab-4] {
  position: relative;
  border:none;
  background:none;
  color:#088cc0;
}

#index-tab-1:checked ~ .index-tab-buttons .index-tab-button[for=index-tab-1]::before, 
#index-tab-2:checked ~ .index-tab-buttons .index-tab-button[for=index-tab-2]::before, 
#index-tab-3:checked ~ .index-tab-buttons .index-tab-button[for=index-tab-3]::before, 
#index-tab-4:checked ~ .index-tab-buttons .index-tab-button[for=index-tab-4]::before {
  position: absolute;
  content: "";
  bottom: -2px;
  left: 12px;
  height: 2px;
  width: calc(100% - 24px);
  background-color: #088cc0;
  z-index: 2;
}

#index-tab-1:not(:checked) ~ .index-tab-buttons .index-tab-button[for="index-tab-1"]::before, 
#index-tab-2:not(:checked) ~ .index-tab-buttons .index-tab-button[for="index-tab-2"]::before, 
#index-tab-3:not(:checked) ~ .index-tab-buttons .index-tab-button[for="index-tab-3"]::before, 
#index-tab-4:not(:checked) ~ .index-tab-buttons .index-tab-button[for="index-tab-4"]::before {
  position: absolute;
  content: "";
  bottom: -2px;
  left: 12px;
  width: 0px;
  height: 2px;
  background-color: #088cc0;
  transition: .3s;
  z-index: 2;
}

#index-tab-1:not(:checked) ~ .index-tab-buttons .index-tab-button[for="index-tab-1"]::after, 
#index-tab-2:not(:checked) ~ .index-tab-buttons .index-tab-button[for="index-tab-2"]::after, 
#index-tab-3:not(:checked) ~ .index-tab-buttons .index-tab-button[for="index-tab-3"]::after, 
#index-tab-4:not(:checked) ~ .index-tab-buttons .index-tab-button[for="index-tab-4"]::after {
  position: absolute;
  content: "";
  bottom: -2px;
  left: 12px;
  width: calc(100% - 24px);
  height: 2px;
  background-color: rgba(8, 140, 192, .2);
  transition: .3s;
}

#index-tab-1:not(:checked) ~ .index-tab-buttons .index-tab-button[for="index-tab-1"]:hover::before, 
#index-tab-2:not(:checked) ~ .index-tab-buttons .index-tab-button[for="index-tab-2"]:hover::before, 
#index-tab-3:not(:checked) ~ .index-tab-buttons .index-tab-button[for="index-tab-3"]:hover::before, 
#index-tab-4:not(:checked) ~ .index-tab-buttons .index-tab-button[for="index-tab-4"]:hover::before {
  height: 2px;
  width: calc(100% - 24px);
}

.list-more-button:hover{
  background: none;
  border-color: #088cc0;
}

.list-title {
  background-color: rgba(8, 140, 192, .1);
}

.list-title-in {
  position: relative;
  padding: 14px 10px 6px 44px;
  color: #088cc0;
}

.list-title-in:before {
  position: absolute;
  top: 22px;
  left: 6px;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(8, 140, 192, .8);
  content: "";
  border-radius: 50%;
  background: transparent;
}

.list-title-in:after {
  position: absolute;
  top: 8px;
  left: 0px;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(8, 140, 192, .8);
  content: "";
  border-radius: 50%;
  background: transparent;
}

/* □■--------------------------------
/　　カルーセル
--------------------------------■□ */
.carousel {
  margin-bottom: 30px;
}

.carousel .slick-arrow:before {
  color: #088cc0;
}

.slick-dots li button:before {
  color: rgba(8, 140, 192, .4);
  opacity:1;
}

.slick-dots li.slick-active button:before {
  color: #088cc0;
}

/* □■--------------------------------
/    Topへ戻るボタン
--------------------------------■□ */
.go-to-top-button {
  background:transparent;
  color: #088cc0;
  border:2px solid #088cc0;
  border-radius:50%;
}

.go-to-top-button:hover {
  color: #088cc0;
}

/* □■--------------------------------
/　　プロフィール
--------------------------------■□ */
.author-thumb img {
  box-shadow: 0 3px 10px rgba(0, 0, 0, .25), 0 2px 2px rgba(0, 0, 0, .22);
}

.author-box .sns-follow-buttons a.follow-button {
  border-radius:50%;
  font-size: 22px;
  width: 30px;
  height: 30px;
  line-height: 1.5;
  margin-right: 6px;
  margin-top: 4px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-property: transform;
  transition-property: transform;
  transition: .5s;
}

/* □■--------------------------------
/　　ランキング
--------------------------------■□ */
.widget-entry-cards.ranking-visible .card-thumb::before {
  border-radius: 50%;
  top: -8px;
  left: -8px;
  border: 2px solid #e5e5e5;
  opacity: 1;
}

/* □■--------------------------------
/　　フッター
--------------------------------■□ */
.footer-bottom.fnm-text-width .menu-footer li a:hover {
  background: none;
  background-color:rgba(8, 140, 192, .6);
  color: white;
}

@media screen and (min-width: 1030px) {
	.footer {
	  position: relative;
	  z-index: 1;
	  overflow: hidden;
	  box-shadow: -3px -8px 10px -1px rgba(0, 0, 0, .24), -4px -5px 10px -3px rgba(0, 0, 0, .18);
	}

	.footer::before {
	  width: 800px;
	  height: 800px;
	  border: 10px solid rgba(236, 228, 225, .4);
	  position: absolute;
	  left: 280px;
	  top: 100px;
	  content: "";
	  border-radius: 50%;
	  z-index: -1;
	}

	.footer::after {
	  width: 540px;
	  height: 540px;
	  position: absolute;
	  left: -28px;
	  top: -78px;
	  content: "";
	  border-radius: 50%;
	  z-index: -1;
	  box-shadow: 0 0 0 6px rgba(177, 163, 32, .15), 0 0 0 10px #fff, 0 0 0 20px rgba(156, 189, 243, .15);
	}
}
/* □■--------------------------------
/　　ウィジェット
--------------------------------■□ */
.widget_recent_entries ul li a,
.widget_categories ul li a,
.widget_archive ul li a,
.widget_pages ul li a,
.widget_meta ul li a,
.widget_rss ul li a,
.widget_nav_menu ul li a {
  border-bottom: 1px dotted rgba(8, 140, 192, .15);
}

.widget_recent_entries ul li a:hover,
.widget_categories ul li a:hover,
.widget_archive ul li a:hover,
.widget_pages ul li a:hover,
.widget_meta ul li a:hover,
.widget_rss ul li a:hover,
.widget_nav_menu ul li a:hover {
  background-color: rgba(8, 140, 192, .08);
}

.widget_recent_entries ul li a,
.widget_categories ul li a,
.widget_archive ul li a,
.widget_meta ul li a{
  padding: 5px 0;
}

.widget_recent_entries ul li a .post-count,
.widget_categories ul li a .post-count,
.widget_archive ul li a .post-count,
.widget_pages ul li a .post-count,
.widget_meta ul li a .post-count,
.widget_rss ul li a .post-count,
.widget_nav_menu ul li a .post-count {
  font-style: italic;
  font-size: 90%;
}

.card-arrow .a-wrap:hover::after {
  border-top: solid 3px #088cc0;
  border-right: solid 3px #088cc0;
}

/* □■--------------------------------
/　　テーブル
--------------------------------■□ */
table th, table td,
.scrollable-table th,
.scrollable-table td {
  border: solid 1px #f4f5f7;
}

table th, .scrollable-table th {
  background-color: rgba(8, 140, 192, .4);
  color: white;
}

table#wp-calendar tr:nth-of-type(2n+1),
table tr:nth-of-type(2n+1) {
    background-color: rgba(8, 140, 192, .03);
}

table#wp-calendar tr:nth-of-type(2n),
table tr:nth-of-type(2n) {
    background-color: rgba(8, 140, 192, .08);
}

.widget_calendar table th, 
.widget_calendar .scrollable-table th {
  color: white;
}

/* □■--------------------------------
/ 　 引用
--------------------------------■□ */
blockquote::after {
  content:none;
}

blockquote {
  position: relative;
  border: 1px solid rgba(8, 140, 192, .5);
  padding: 20px;
  border-radius: 4px;
  background-color: rgba(8, 140, 192, .03);
}

blockquote:before {
  position: absolute;
  left: 45%;
  top: -24px;
  background-color: #088cc0;
  box-sizing: border-box;
  font-family: 'FontAwesome';
  content: '\f10d';
  line-height: 1;
  padding-top: 12px;
  text-align: center;
  width: 42px;
  height: 42px;
  font-size: 18px;
  border-radius: 50%;
  color: white;
  font-style: italic;
}

blockquote p {
  color:#088cc0;
  font-style: italic;
}

blockquote cite {
  display: block;
  padding-top:10px;
  font-size: 0.8rem;
  text-align:right;
  color:#088cc0;
}

/* □■--------------------------------
/    入力ボックス
--------------------------------■□ */
.search-box .fa-search:before {
  color: rgba(8, 140, 192, .8);
}

/* □■--------------------------------
/    コメント
--------------------------------■□ */
.recent-comment img {
  box-shadow: 0 3px 10px rgba(0, 0, 0, .25), 0 2px 2px rgba(0, 0, 0, .22);
}

.recent-comment-content {
  background:none;
  background-color: transparent;
  border: 1px solid #088cc0;
  margin-top: 6px;
}

.recent-comment-content::before {
  border-bottom-color: #088cc0;
}

.recent-comment-content::after {
  border-bottom-color: #f4f5f7;
}

.recent-comment-link.a-wrap:hover {
  background-color: rgba(8, 140, 192, .06);
}

/* □■--------------------------------
/    送信系ボタン
--------------------------------■□ */
.search-edit, 
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 {
  background-color: transparent;
}

/* □■--------------------------------
/    SNSボタン（シェア）
--------------------------------■□ */
.sns-share-buttons a .button-caption {
  display: none !important;
}

.sns-share-buttons {
  justify-content: flex-end;
  margin-bottom: 5px;
}

.sns-share .sns-share-buttons a .social-icon {
  font-size: 130%;
}

.sns-share .sns-share-buttons.sns-buttons a {
  width: 40px;
  height: 40px;
  margin: 0px 3px 8px 3px;
}

.sns-share-message, .sns-follow-message {
  text-align: right;
}

.bc-brand-color-white.sns-share .share-button, 
.bc-brand-color-white.sns-follow .follow-button {
  background-color: transparent;
  border-radius: 50%;

}

.bc-brand-color.sns-share .share-button,
.bc-brand-color.sns-follow .follow-button {
  border-radius: 50%;
}

.sns-share-buttons a .share-count {
	right: 1px;
  bottom: -7px;
}

.bc-brand-color .sns-share-buttons a .share-count {
  background-color: rgba(128, 128, 128, .8);
}

/* □■--------------------------------
/    SNSボタン（フォロー）
--------------------------------■□ */
.sns-follow-buttons a {
  font-size: 24px;
}
.sns-follow .sns-follow-buttons, .footer .sns-follow-buttons {
  justify-content: center;
}

.sns-follow .sns-follow-buttons a, .footer .sns-follow-buttons a {
  width: 34px;
  height: 34px;
  margin: 0px 3px 8px 3px;
}

.sns-follow .sns-share-message, .sns-follow-message {
  text-align: center;
}

.sns-follow-buttons a .follow-count {
  right: 1px;
  bottom: -7px;
}

.bc-brand-color .sns-follow-buttons a .follow-count {
  background-color: rgba(128, 128, 128, .8);
}

/* □■--------------------------------------------
/    SNSフォローボタン（プロフィール内含む）
/    ブランドカラー／白抜き共通
---------------------------------------------■□ */
.author-box .sns-follow-buttons a.follow-button, 
.sns-follow .sns-follow-buttons a,
.sns-share .sns-share-buttons a {
  transition: .5s;
}

.author-box .sns-follow-buttons a.follow-button:before,
.sns-follow .sns-follow-buttons a:before,
.sns-share .sns-share-buttons a:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 80%);
  transition: .5s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}

.author-box .sns-follow-buttons a.follow-button:hover,
.sns-follow .sns-follow-buttons a:hover,
.sns-share .sns-share-buttons a:hover {
  transform: translateY(-5px);
  background-color: transparent;
  opacity: 1;
  border: transparent !important;
}

.author-box .sns-follow-buttons a.follow-button:hover:before,
.sns-follow .sns-follow-buttons a:hover:before,
.sns-share .sns-share-buttons a:hover:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
}

.sns-share-buttons a.twitter-button:hover,
.sns-buttons a.twitter-button:hover {
  color: #1da1f2;
}

.sns-share-buttons a.facebook-button:hover,
.sns-buttons a.facebook-button:hover {
  color: #3b5998;
}

.sns-share-buttons a.hatebu-button:hover,
.sns-buttons a.hatebu-button:hover {
  color: #2c6ebd;
}

.sns-share-buttons a.google-plus-button:hover,
.sns-buttons a.google-plus-button:hover {
  color: #dd4b39;
}

.sns-share-buttons a.pocket-button:hover,
.sns-buttons a.pocket-button:hover {
  color: #ef4056;
}

.sns-share-buttons a.line-button:hover,
.sns-buttons a.line-button:hover {
  color: #00c300;
}

.sns-share-buttons a.website-button:hover,
.sns-buttons a.website-button:hover {
  color: #002561;
}

.sns-share-buttons a.instagram-button:hover,
.sns-buttons a.instagram-button:hover {
  color: #405de6;
}

.sns-share-buttons a.pinterest-button:hover,
.sns-buttons a.pinterest-button:hover {
  color: #bd081c;
}

.sns-share-buttons a.youtube-button:hover,
.sns-buttons a.youtube-button:hover {
  color: #cd201f;
}

.sns-share-buttons a.linkedin-button:hover,
.sns-buttons a.linkedin-button:hover {
  color: #0077b5;
}

.sns-share-buttons a.note-button:hover,
.sns-buttons a.note-button:hover {
  color: #41c9b4;
}

.sns-share-buttons a.soundcloud-button:hover,
.sns-buttons a.soundcloud-button:hover {
  color: #ff8800;
}

.sns-share-buttons a.flickr-button:hover,
.sns-buttons a.flickr-button:hover {
  color: #111;
}

.sns-share-buttons a.amazon-button:hover,
.sns-buttons a.amazon-button:hover {
  color: #ff9900;
}

.sns-share-buttons a.rakuten-button:hover,
.sns-buttons a.rakuten-button:hover {
  color: #c61e79;
}

.sns-share-buttons a.slack-button:hover,
.sns-buttons a.rakuten-button:hover {
  color: #e01563;
}

.sns-share-buttons a.github-button:hover,
.sns-buttons a.github-button:hover {
  color: #4078c0;
}

.sns-share-buttons a.codepen-button:hover,
.sns-buttons a.codepen-button:hover {
  color: #333;
}

.sns-share-buttons a.feedly-button:hover,
.sns-buttons a.feedly-button:hover {
  color: #2bb24c;
}

.sns-share-buttons a.rss-button:hover,
.sns-buttons a.rss-button:hover {
  color: #f26522;
}

.sns-share-buttons a.copy-button:hover,
.sns-share-buttons a.comment-button:hover,
.sns-buttons a.copy-button:hover,
.sns-buttons a.comment-button:hover {
  color: #333;
}


.author-box .twitter-button {
  border: 1px solid #1da1f2 !important;
  color: #1da1f2 !important;
}

.author-box .feedly-button {
  border: 1px solid #2bb24c !important;
  color: #2bb24c !important;
}

.author-box .rss-button {
  border: 1px solid #f26522 !important;
  color: #f26522 !important;
}

.author-box .facebook-button {
  border: 1px solid #3b5998 !important;
  color: #3b5998 !important;
}

.author-box .line-button {
  border: 1px solid #00c300 !important;
  color: #00c300 !important;
}

.author-box .instagram-button {
  border: 1px solid #e1306c !important;
  color: #e1306c !important;
}

.author-box .youtube-button {
  border: 1px solid #ef1515 !important;
  color: #ef1515 !important;
}

.author-box .pinterest-button {
  border: 1px solid #bd081c !important;
  color: #bd081c !important;
}

.author-box .note-button {
  border: 1px solid #41c9b4 !important;
  color: #41c9b4 !important;
}

.author-box .hatebu-button {
  border: 1px solid #2c6ebd !important;
  color: #2c6ebd !important;
}

.author-box .website-button {
  border: 1px solid #47555c !important;
  color: #47555c !important;
}

.author-box .google-plus-button {
  border: 1px solid #dd4b39 !important;
  color: #dd4b39 !important;
}

.author-box .linkedin-button {
  border: 1px solid #0077b5 !important;
  color: #0077b5 !important;
}

.author-box .flickr-button {
  border: 1px solid #0063dc !important;
  color: #0063dc !important;
}

.author-box .amazon-button {
  border: 1px solid #ff9900 !important;
  color: #ff9900 !important;
}

.author-box .rakuten-room-button {
  border: 1px solid #c42e7f !important;
  color: #c42e7f !important;
}

.author-box .slack-button {
  border: 1px solid #e01563 !important;
  color: #e01563 !important;
}

.author-box .github-button {
  border: 1px solid #333 !important;
  color: #333 !important;
}

.author-box .codepen-button {
  border: 1px solid #333 !important;
  color: #333 !important;
}

.author-box .soundcloud-button {
  border: 1px solid #ff8800 !important;
  color: #ff8800 !important;
}

.author-box .pocket-button {
  border: 1px solid #ef4056 !important;
  color: #ef4056 !important;
}

/* ■ Font Awesome5用 ■ */
.font-awesome-5 blockquote::before,
.font-awesome-5 blockquote::after{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}

/* □■--------------------------------
/    タグ、パンくずリストなど
--------------------------------■□ */
.tag-link:hover, .comment-reply-link:hover,
.breadcrumb a:hover {
  background-color: rgba(8, 140, 192, .6);
  color: white;
}

.fa-folder-open:before {
  color: #088cc0;
}

.fa-home:before {
  color: #088cc0;
}

.breadcrumb .fa-folder:before {
  color: #088cc0;
}

/* □■----------------------------------------------------
/　　ブログカード／関連記事（ホバーで『Read More』表示）
----------------------------------------------------■□ */
.blogcard-label {
  background-color: #088cc0;
  z-index: 2;
}

.related-entry-card-wrap.a-wrap,
.blogcard-wrap {
  background-color: transparent;
}

.related-entry-card-wrap.a-wrap,
.blogcard-wrap.a-wrap {
  position: relative;
  perspective: 200px;
  z-index: 1;
}

.related-entry-card-wrap.a-wrap::before,
.blogcard-wrap.a-wrap::before {
  background-color: rgba(0, 0, 0, .4);
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  transition: all .6s;
  opacity: 0;
  z-index: 2;
  top: 0px;
  left: 0px;
  border-radius: 4px;
}

.related-entry-card-wrap.a-wrap:hover::before,
.blogcard-wrap.a-wrap:hover::before {
  opacity: 1;
}

.related-entry-card-wrap.a-wrap::after,
.blogcard-wrap.a-wrap::after {
  position: absolute;
  content: "Read More";
  top: calc(50% - 20px);
  right: calc(50% - 80px);
  width: 160px;
  height: 40px;
  border: 2px solid white;
  border-radius:4px;
  font-size: 22px;
  text-align: center;
  color: white;
  transition: all .4s ease-out;
  transform-origin: right bottom;
  transform: rotateX(90deg);
  background: none;
  opacity: 0;
  z-index: 3;
}

.related-entry-card-wrap.a-wrap:hover::after,
.blogcard-wrap.a-wrap:hover::after {
  transform: rotateX(0deg);
  opacity: 1;
}

/* □■------------------------------------------------
/    コンテンツエリアを起点に背景へ泡を表示
/      ※サイドバーがなくてもこの2つは必ず表示
------------------------------------------------■□ */
/* 解像度が1030px以上のみ */
@media screen and (min-width: 1030px) {
	.content {
	  position: relative;
	}

	.content::before {
	  width: 540px;
	  height: 540px;
	  position: absolute;
	  content: "";
	  border-radius: 50%;
	  right: 22px;
	  top: 22px;
	  z-index: -1;
	  box-shadow: 0 0 0 6px rgba(177, 163, 32, .2), 0 0 0 10px #f4f5f7, 0 0 0 20px rgba(236, 228, 225, .4);
	}

	.content::after {
	  width: 800px;
	  height: 800px;
	  border: 10px solid rgba(91, 159, 138, .08);
	  position: absolute;
	  content: "";
	  border-radius: 50%;
	  right: 350px;
	  top: 300px;
	  z-index: -1;
	}
}

/* □■--------------------------------------------------------------
/    サイドバーの5番目のウィジェットを起点に背景へ泡を表示
--------------------------------------------------------------■□ */
/* 解像度が1030px以上のみ */
@media screen and (min-width: 1030px) {
	#sidebar .widget-sidebar:nth-of-type(5) {
	  position: relative;
	}

	#sidebar .widget-sidebar:nth-of-type(5)::before {
	  width: 540px;
	  height: 540px;
	  position: absolute;
	  left: -978px;
	  top: -278px;
	  content: "";
	  border-radius: 50%;
	  z-index: -1;
	  box-shadow: 0 0 0 6px rgba(177, 163, 32, .15), 0 0 0 10px #f4f5f7, 0 0 0 20px rgba(156, 189, 243, .15);
	}

	#sidebar .widget-sidebar:nth-of-type(5)::after {
	  width: 800px;
	  height: 800px;
	  border: 10px solid rgba(236, 228, 225, .4);
	  position: absolute;
	  right: 0px;
	  top: 0px;
	  content: "";
	  border-radius: 50%;
	  z-index: -1;
	}
}

/* □■--------------------------------------------------
/    ページオンロード時の泡（背景）のアニメーション
--------------------------------------------------■□ */
.content::before {
  animation: mainBubble 1.2s ease 0s 1 normal;
  -webkit-animation: mainBubble 1.2s ease 0s 1 normal;
}

@keyframes mainBubble {
  0% {
    opacity: 0;
    transform: translateY(120px);
  }
  100% {
    opacity: 1;
  }
}

.content::after {
  animation: secondBubble 0.5s ease 0s 1 normal;
  -webkit-animation: secondBubble 0.5s ease 0s 1 normal;
}

@keyframes secondBubble {
  0% {
    opacity: 0;
    transform: translateY(180px);
  }
  100% {
    opacity: 1;
  }
}

/* □■--------------------------------
/　　カードのホバーで泡を浮かせる
/      ※ランキング表示カードは除外
--------------------------------■□ */
.widget-entry-cards .a-wrap {
  padding: 5px 5px 5px 8px;
}

.entry-card-wrap figure,
.widget-entry-cards .a-wrap,
.widget-entry-cards:not(.ranking-visible) figure,
.carousel figure {
  overflow:hidden;
}

.entry-card-wrap figure,
.widget-entry-cards:not(.ranking-visible) figure,
.carousel figure{
  position: relative;
}

.entry-card-wrap figure:before,
.widget-entry-cards:not(.ranking-visible) figure:before,
.carousel figure:before {
  position: absolute;
  top:-80px;
  left: calc(20%);
  width: 40px;
  height: 40px;
  content: "";
  border-radius: 50%;
  background: transparent;
  border: 3px solid rgba(86, 189, 237, .8);
  box-shadow: -1px -1px 3px 3px #e7e7e7;
  opacity: 0;
  z-index: 2;
  background-image: radial-gradient(at 10px 10px, rgba(255, 255, 255, .6) 15%, rgba(255, 255, 255, .03) 40%);
}

.entry-card-wrap figure:after,
.widget-entry-cards:not(.ranking-visible) figure:after,
.carousel figure:after {
  position: absolute;
  top:-80px;
  left: calc(50%);
  width: 60px;
  height: 60px;
  content: "";
  border-radius: 50%;
  background: transparent;
  border: 3px solid rgba(243, 130, 188, .8);
  box-shadow: -1px -1px 3px 3px #e7e7e7;
  opacity: 0;
  z-index: 2;
  background-image: radial-gradient(at 15px 15px, rgba(255, 255, 255, .68) 10%, rgba(255, 255, 255, .03) 50%);
}

.widget-entry-cards:not(.ranking-visible) .a-wrap:hover figure:before,
.carousel .a-wrap:hover figure:before {
  animation: leftBubble 1.4s ease 0s 1 normal;
  -webkit-animation: leftBubble 1.4s ease 0s 1 normal;
}

.widget-entry-cards:not(.ranking-visible) .a-wrap:hover figure:after,
.carousel .a-wrap:hover figure:after {
  animation: rightBubble 1.4s ease 0s 1 normal;
  -webkit-animation: rightBubble 1.4s ease 0s 1 normal;
}

@keyframes leftBubble {
  15% {
    opacity: 0;
    transform: translateY(260px);	/* 決め打ち移動量 */
  }
  100% {
    opacity: 1;
  }
}

@keyframes rightBubble {
  0% {
    opacity: 0;
    transform: translateY(260px);	/* 決め打ち移動量 */
  }
  100% {
    opacity: 1;
  }
}

/* □■----------------------------------------------------------
/　　エントリーカード（インデックスページ）の泡（移動量大きめ）
----------------------------------------------------------■□ */
.entry-card-wrap.a-wrap {
  transition:all 0.3s;
}

.entry-card-wrap.a-wrap:hover {
	background-color:rgba(8, 140, 192, .1);
}

.entry-card-wrap.a-wrap:hover figure:before {
  animation: indextLeftBubble 1.6s ease 0s 1 normal;
  -webkit-animation: indextLeftBubble 1.6s ease 0s 1 normal;
}

.entry-card-wrap.a-wrap:hover figure:after {
  animation: indexRightBubble 1.6s ease 0s 1 normal;
  -webkit-animation: indexRightBubble 1.6s ease 0s 1 normal;
}

@keyframes indextLeftBubble {
  15% {
    opacity: 0;
    transform: translateY(350px);	/* 決め打ち移動量 */
  }
  100% {
    opacity: 1;
  }
}

@keyframes indexRightBubble {
  0% {
    opacity: 0;
    transform: translateY(350px);	/* 決め打ち移動量 */
  }
  100% {
    opacity: 1;
  }
}

/* □■--------------------------------
/　　他のカードの泡（小さめ）
--------------------------------■□ */
.widget-entry-cards .a-wrap:hover {
	background-color:rgba(8, 140, 192, .1);
}

.widget-entry-cards:not(.ranking-visible):not(.card-large-image) figure:before {
  top:-60px;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(86, 189, 237, .8);
  box-shadow: -1px -1px 2px 2px #e7e7e7;
  background-image: radial-gradient(at 5px 5px, rgba(255, 255, 255, .8) 10%, rgba(255, 255, 255, .03) 50%);
}

.widget-entry-cards:not(.ranking-visible):not(.card-large-image) figure:after {
  top:-60px;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(243, 130, 188, .8);
  box-shadow: -1px -1px 2px 2px #e7e7e7;
  background-image: radial-gradient(at 10px 10px, rgba(255, 255, 255, .8) 10%, rgba(255, 255, 255, .03) 50%);
}

.widget-entry-cards:not(.ranking-visible):not(.card-large-image) .a-wrap:hover figure:before {
  animation: smallLeftBubble 1.4s ease 0s 1 normal;
  -webkit-animation: smallLeftBubble 1.4s ease 0s 1 normal;
}

.widget-entry-cards:not(.ranking-visible):not(.card-large-image) .a-wrap:hover figure:after {
  animation: smallRightBubble 1.4s ease 0s 1 normal;
  -webkit-animation: smallRightBubble 1.4s ease 0s 1 normal;
}

@keyframes smallLeftBubble {
	15% {
    opacity: 0;
    transform: translateY(180px);	/* 決め打ち移動量 */
	}
	100% {
    opacity: 1;
	}
}

@keyframes smallRightBubble {
  0% {
    opacity: 0;
    transform: translateY(180px);	/* 決め打ち移動量 */
  }
  100% {
    opacity: 1;
  }
}

/* □■--------------------------------
/    カテゴリーのアイコン
--------------------------------■□ */
.widget_archive ul li a {
  padding: 5px 4px 5px 4px;
}

.widget_meta ul li a {
  padding: 5px 4px 5px 5px;
}
.widget_categories ul li a {
  padding: 5px 4px 5px 22px;
  position: relative;
}

.cat-item a::before {
  content: "";
  position: absolute;
  top: calc(50% - 6px);
  left: 4px;
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 2px solid #088cc0;
}

.cat-item .children a::before {
  background-color: #088cc0;
  border: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  top: calc(50% - 4px);
}