@charset "UTF-8";

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

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

/*レスポンシブコラムが縦並びになったときの上下の余白を消す*/
@media screen and (max-width: 834px) {
    .container .column-wrap {
        gap: 0em!important;
    }
}

/*スマホ用のボタンの文字を大きくする*/
@media screen and (max-width: 834px) {
    .btn-l, .ranking-item-link-buttons a, .btn-wrap.btn-wrap-l > a {
        font-size: 18px;
    }
}

/************************************
** 記事内目次
************************************/
.toc {
  background: #f9f9f9!important;
  border: 0!important;
  display: block!important;
  border-top: 5px solid!important;
  border-top-color: #96da4d!important;/*お好みの色に*/
  box-shadow: 0 2px 2px rgba(0,0,0,.2)!important;
  padding: 20px 32px 7px 32px!important;
  margin-bottom: 5%!important;
  width:95%;
  border-radius:10px;
}
@media screen and (min-width:600px){
.toc {
  padding: 20px 35px 15px 35px!important;
  width:70%;
}
}
.toc-title{
  margin: 0 20px 20px -10px!important;
  font-size: 23px!important;
  font-weight: 700!important;
  color: #96da4d!important;/*お好みの色に*/
  background-color: initial;
}

/* 目次のアイコン設定 */
.toc-title:before {
    top: 0;
    left: -45px;
    width: 50px;
    height: 50px;
    font-family: FontAwesome;
    content : "\f0ca"; /* アイコンを変える場合はここを変更 */
    font-size:20px;
    margin-right:5px;
    color:#FFF; /* アイコンの色を変える場合はここを変更 */
    background-color:#96da4d; /* アイコンの背景色を変える場合はここを変更 */
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding:14px;
}

.toc a{
  color:#333;
  display: block;
  border-bottom: dashed 1px silver;
  padding-bottom: .5em;/*下の点線との間*/
  padding-top: 0em!important;/*下の点線との間*/
}
.toc ul li{
  font-weight: 700;
  line-height: 1.5;
  padding: 0 0 .4em 1.4em;
  position: relative;
}
.toc ul li:before{
  font-family: "Font Awesome 5 Free"!important;
  content: "\f138";/*f105*/
  position: absolute!important;
  left: -0.3em!important;
  color: #96da4d;/*お好みの色に*/
  font-weight: 900;
}
.toc li li{
  font-weight: 400;
  padding-top:.5em;
  margin-top:0!important;
}
.toc_list li{
  margin-top:-5%!important;
}

@media screen and (min-width:834px){
.toc_list li{/*PCでは目次のh2同士の間隔は抑えめに*/
  margin-top:-1.8%!important;
}
}

/* もくじへ戻るボタン*/
.go-to-toc-button {
    flex-direction: column;
}
.go-to-toc-button:after {
    content:'目次';
    font-size: 12px; /* 文字サイズ */
    margin-top: 2px;
}

/* ページ送りボタン*/
.page-numbers { /*通常時*/
  color: #49add1;
  border: 1px solid #49add1;
}
.pagination .current { /*現在のページ*/
  background-color: #49add1;
  color: #fff;
}
.page-numbers.dots { /*ドット「…」の部分*/
  opacity: 1;
  background: none;
}
.pagination a:hover { /*マウスホバー時*/
  background-color: #49add1;
  color: #fff;
}

/* モバイルトップメニューの背景色と高さを変更*/
.slicknav_menu {
    background: #00a508;　
    padding: 0px;
}
.slicknav_btn {
     background-color: #00a508;
}

/*モバイルメニューボタンの色変更*/
.mobile-footer-menu-buttons,
.mobile-footer-menu-buttons .menu-button > a,
.mobile-footer-menu-buttons .menu-button:hover,
.navi-menu-content a,
.navi-menu-content a:hover {
  background: #90C31F;
  color: #fff;
}

/*センターメニューの文字を太く変更*/
.navi .item-label, .navi .item-description {
    font-weight: bold;
}

/*モバイルヘッダーボタン内のロゴの幅変更*/
.logo-menu-button img {
    max-height: 44px;
    display: block;
    margin: 0 auto;
    width: auto;
}

/*モバイルヘッダーメニューの文字と背景の色を変える*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background-color: #90C31F;
	color: #FFFFFF;
}

.logo-menu-button.menu-button{
	background-color: #90C31F;
}

/*固定フッタープラグインの文字の大きさを変える*/
.msf-layout-l2-label {
    display: table-cell;
    width: 70%;
    text-align: center;
    vertical-align: middle;
    padding: 5px;
    font-size: 20px;
    font-weight: bold;
    color: #FFFFFF;
}

/*ページ全体のマージン*/
.content-top, .content-bottom {
    margin: 1em;
    margin-left: 16px;
}

/*Cocoon　案内ボックス（サクセス）*/
.success-box{
background-color: #e9ffdc;
}

/*Cocoon　案内ボックス（ライト）*/
.light-box{
background-color: #f8f1ec;
}

/*画像を明るくする*/
.brighten {
  filter: brightness(1.5) contrast(1.2);
}

/*画像に影をつける（使い方はshadow_img上級者CSSに設定）*/
.shadow_img {
    box-shadow: 3px 3px 15px -5px #000;
}

/*切り替えタブ内の文字を大きくした*/
.su-tabs-pane {
    font-size: 16px!important;
}

/*料金表CSS*/
table.aaa {
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  width: 1000px;
  table-layout: fixed;
}

table tr.aaa {
  background-color: #f5f9e6;
  padding: .35em;
  border-bottom: 2px solid #fff;
}
table th.aaa,
table td.aaa {
  padding: 1em 10px 1em 1em;
  border-right: 2px solid #fff;
}
table th.aaa {
  font-size: 1em;
}
table thead tr.aaa{
  background-color: #167F92;
  color:#fff;
}
table tbody th.aaa {
    background: #96da4d;
    color: #fff;
}
.txt.aaa{
   text-align: left;
   font-size: 1em;
}
.price.aaa{
  text-align: right;
  color: #1ab300;
  font-weight: bold;
}
.non.aaa{
  background:#fff
}
@media screen and (max-width: 600px) {
  table.aaa {
    border: 0;
    width:100%
  }
  table th.aaa{
    background-color: #96da4d;
	font-size: 1em;
    display: block;
    border-right: none;
  }
  table thead.aaa {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  table tr.aaa {
    display: block;
    margin-bottom: .625em;
  }
  table td.aaa {
    border-bottom: 1px solid #bbb;
    display: block;
    font-size: 1em;
    text-align: right;
    position: relative;
    padding: .625em .625em .625em 4em;
    border-right: none;
  }
  
  table td.aaa::before {
    content: attr(data-label);
    font-weight: bold;
    position: absolute;
    left: 10px;
    color: #1ab300;
  }
  table td.aaa:last-child {
    border-bottom: 0;
  }
  table tbody th.aaa {
    color: #fff;
}
}

/************************
/ ページトップボタン
/************************/
#go-to-top {bottom: 60px;}

/************************************
**モバイルスライドインメニュー
************************************/
span.fas.fa-times::before{
font-family: "Font Awesome 5 Free";
content: "\f060";
color:#90C31F;/*矢印色変更はこちら*/
}
ul.menu-drawer:before{
font-size:1.2em;
background: white;
color:#333;
margin-bottom:1em;
border-bottom:3px dotted #90C31F; /*点線の色変更はこちら*/
content: "メニュー";
}
ul.menu-drawer:after {
background: white;
}
.menu-drawer li {
padding:0;
}
.menu-drawer li{
font-weight: bold;
}
.menu-drawer a{
font-size:1em;
background-color:#ffffff;
color:#545454;
margin: .5em 0;
}
.menu-drawer a:hover{
background-color:#f7f7f7;
}
.menu-drawer .sub-menu {
padding:0;
}
.menu-drawer .sub-menu li{
font-size: .9em;
}
.menu-drawer .sub-menu li a::before {
font-family: "Font Awesome 5 Free";
content : "\f105";
color:#7b7b7b;
margin:0 .5em 0 1em;
}

/*横線を点線に*/
hr{
border:none;
border-top:dashed 0.5px #90C31F;
height:1px;
color:#FFFFFF;	
}

/* 黒のボタンを緑枠ボタンへと変更 */
.btn-black.btn-l {
  display: block;
  background-color: #ffffff;
  color: #96da4d !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #96da4d !important;
  font-size: 18px !important;
  font-weight: bold;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  transition: all 0.3s ease;
  border-radius: 0px;
  width: 90%;
  margin: 0 auto;
}

/* 💻 PCだけ幅を固定して中央寄せ */
@media screen and (min-width: 768px) {
  .btn-black.btn-l {
	display: block;
    width: 500px !important;
    margin: 0 auto;
  }
}

/* ✨ ホバー時：黄緑がちょっと濃くなってしっとり光る */
.btn-black.btn-l:hover {
  background-color: #ffffff;
  color: #00c853 !important;
  border-color: #00c853 !important;
}

/* ❌ Cocoonの右矢印（::after）を消す */
.btn-black.btn-l::after {
  content: none !important;
}

/* Cocoonの白抜きボックスを透明から白背景に変更 */
.blank-box {
  background-color: #ffffff !important; /* 白背景に変更 */
}

/*モバイルメニューボタンの色変更でサイドバーの文字色が白になるのを変更*/
.menu-content {
    color: black;
}

/* h1デザイン */
.entry-title, .archive-title {
    font-size: 32px;
    margin: 0em -3.6% 0.5em;
    padding: 20px;
    background-color: #96da4d;
    color: #ffffff;
    line-height: 1.3;
}

/* h2デザイン */
.article h2 {
    position: relative;
    background: #96da4d;
    color: #ffffff;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    padding: 30px 20px;
    margin: 1.0em -3.6% 1.5em;
}
.article h2:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(150, 218, 77, 0);
	border-top-color: #96da4d;
	border-width: 25px;
	margin-left: -25px;
}

/* h3デザイン */
.article h3 {
    position: relative;
    color: #ffffff;
    background: #96da4d;
    border-left: solid 7px #1da900;
    border-bottom: #96da4d;
    font-size: 24px;
    line-height: 1.4;
    padding: 0.5em;
}
:root{
	--cocoon-middle-thickness-color: #1da900;
}


/* h4デザイン */
.article h4 {
    padding: 0.8em 0.5em;
    font-size: 22px;
    color: #494949;
    background: transparent;
    border-left: solid 7px #96da4d;
    border-color: #96da4d;
    border-right: solid 2px #96da4d;
}

/* 見出しの上下の余白を1.26emから狭くしてみた */
.article h2, .article h3, .article h4, .article h5, .article h6 {
    margin-bottom: 1em;
}
.article h2, .article h3, .article h4, .article h5, .article h6 {
    margin-top: 1em;
}

/* ウィジェットh2文字大きさ */
.su-heading-style-default .su-heading-inner {
    padding: 1em 0.5em;
    border-top: 4px solid #eee;
    border-bottom: 4px solid #eee;
    font-size: 18px;
}

/* サイドバーウィジェットh3文字装飾 */
.sidebar h3 {
    padding: 1em .5em;
    border-top: 4px solid #eee;
    border-bottom: 4px solid #eee;
	background-color: #ffffff;
	font-size: 18px;
	text-align: center;
}

/* タイムラインボックスの枠線の色 */
.ranking-item, .timeline-box {
    padding: 3%;
    margin-bottom: 20px;
    border: 3px solid #6fd42f;
    border-radius: 4px;
}

/* コクーンバッジを大きくしてみた */
.badge, .ref, .reffer, .sankou, .badge-red, .badge-pink, .badge-purple, .badge-blue, .badge-green, .badge-yellow, .badge-brown, .badge-grey {
    color: #fff;
    padding: 2px 5px;
    border-radius: 2px;
    font-size: 14px;
}

/* ブログカードラベル（あわせて読みたい）をオレンジに */
.blogcard-label {
    position: absolute;
    top: -18px;
    left: 16px;
    font-size: 13px;
    padding: 3px 0.6em;
    background-color: #FFA103;
    color: #fff;
    border-radius: 3px;
    letter-spacing: .7px;
    display: none;
}

/* 吹き出しの色 */
.sbs-flat .speech-balloon {
    background-color: #f5f1eb!important;
    border-color: #f5f1eb!important;
}
.sbs-flat .speech-balloon::before, .sbs-flat .speech-balloon::after {
    border-right-color: #f5f1eb!important;
    border-left-color: #f5f1eb!important;
}

/* 吹き出しを100％に広げる */
.sbp-l {
    margin-right: 0px;
}

.sbp-r {
    margin-left: 0px;
}


/* エントリーカードラベル非表示 */
.entry-card .cat-label{
  display: none;
}

/* トグルボックス背景を白に */
toggle-wrap .toggle-content {
    background-color: #ffffff;
}

/* テーブル背景を白に */
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
	background-color: #ffffff;
}

/* ボックスメニューをフル画像に変える */
.box-menu{
	padding: 0;
	min-height: 0;
}

.box-menu:hover{
	box-shadow:none;
	opacity: 0.8;
} 

.box-menu-label,
.box-menu-description{
	display: none;
}

.box-menu-icon *{
	margin: 0;
	max-width: 100%;
	max-height: 300px;}

/* 角丸ボックス */
.kado-maru-pink{
  margin: 1em 0;
  padding: 1em;
  background-color: #ffb3b3;
  border-radius: 10px;
}

.kado-maru-pink p{
  margin: 0;
  padding: 0;
}

.kado-maru-green{
  margin: 1em 0;
  padding: 1em;
  background-color: #96da4d;
  border-radius: 10px;
}

.kado-maru-green p{
  margin: 0;
  padding: 0;
}

.kado-maru-orange{
  margin: 1em 0;
  padding: 1em;
  background-color: #ffc259;
  border-radius: 10px;
}

.kado-maru-orange p{
  margin: 0;
  padding: 0;
}

.kado-maru-blue{
  margin: 1em 0;
  padding: 1em;
  background-color: #66d4ff;
  border-radius: 10px;
}

.kado-maru-blue p{
  margin: 0;
  padding: 0;
}

/*
 * Cocoon風タブボックス *
 ***********************/
/* タイトル */
.title-simple {
	position: absolute;
	top: -1.9em;
	left: -1px;
	font-size: 1em;
	font-weight: bold;
	display: inline-block;
	padding: 0.2em 1em 0;
	border-radius: 5px 5px 0 0;
	color: #fff;
	background: #666; /* 背景グレー：いろ差し替え場所 */
}
/* BOX */
.box-simple {
	position: relative;
	border-radius: 0 5px 5px;
	padding: 1.5em 1em 0.5em;
	margin: 2.5em 0 2em;
	box-shadow: 2px 3px 3px #ddd;
	border: 1px solid #bbb; /* 枠グレー：色の差し替え場所 */
}

/* SANGO風BOX */
.boxblue {
    margin: 2em 0;
    background: #dcefff;
}
.boxblue .box-title1 {
    font-size: 20px;
    background: #5fb3f5;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.boxblue p {
    padding: 15px 20px;
    margin: 0;
}

.boxorange {
    margin: 2em 0;
    background: #ffeac7;
}
.boxorange .box-title1 {
    font-size: 20px;
    background: #FFA103;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.boxorange p {
    padding: 15px 20px;
    margin: 0;
}

.boxred {
    margin: 2em 0;
    background: #ffe9e9;
}
.boxred .box-title1 {
    font-size: 20px;
    background: #ff6a8b;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.boxred p {
    padding: 15px 20px;
    margin: 0;
}

.boxgreen {
    margin: 2em 0;
    background: #f0ffe7;
}
.boxgreen .box-title1 {
    font-size: 20px;
    background: #8cd23c;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.boxgreen p {
    padding: 15px 20px;
    margin: 0;
}

.boxgreen2 {
    margin: 2em 0;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}

.boxgreen2 .box-title2 {
    font-size: 20px;
    background: #8cd23c;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.boxgreen2 p {
    padding: 15px 20px;
    margin: 0;
}

/* ホーム */
.menu-drawer .menu-item-home > a {
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.2;
	font-weight: bold;
}
/* 2階層目っぽい場所 */
.menu-drawer .sub-menu .menu-item-has-children > a {
	font-size: 1.2em;
	font-weight: bold;
}

/* サイドボックスメニュー　色変更 */
.box-menu-icon {
    color: #8cd23c;
}

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

/* Cocoon ライトグリーンボタン　色変更 */
.btn-light-green, .btn-wrap.btn-wrap-light-green>a {
    background-color: #8cd23c;
}

/* Cocoon 通知エリア太文字 */
.notice-area {
    font-weight: bold;
}

/* スマホ以外481px以上 */
@media screen and (min-width: 481px) {
	.box-simple {
		margin: 3em 1em 2em; /* 上 左右 下 */
	}
}
/* ここまでCocoon風 */
/*
 * シンプルタブボックス *
 **********************/
/* タイトル */
.box-title {
	position: absolute;
	top: -1em; /* タイトル位置マイナス値あげると上  */
	left: 1em; /* 左から1文字分右へ */
	font-size: 1.1em; /* サイズ1.1文字分 */
	font-weight: bold; /* フォント太く */
	display: inline-block;
	padding: 0.2em 0.8em 0; /*内側余白:上下 左右*/
	border-radius: 5px; /* 角丸 */
}
/* BOX */
.title-box {
	position: relative;
	border-radius: 5px;
	padding: 1em 1em 0.5em; /* 内側余白:上 左右 下 */
	margin: 2.5em 0 2em; /* 外側余白: 上 左右 下 */
	box-shadow: 2px 3px 3px #ddd;
}
/* スマホ以外481px以上 */
@media screen and (min-width: 481px) {
	.title-box {
		margin: 3em 1em 2em; /* 上 左右 下 */
	}
}
/* gray */
.title-gray {
	color: #666;
	background: #fff;
}
.box-gray {
	border: #ddd 1px solid;
	background: #fff;
}
/* pink */
.title-pink {
	color: #f278a4;
	background: #fff;
}
.box-pink {
	border: #ffcbde 1px solid;
	background: #fff;
}
/* blue */
.title-blue {
	color: #3847fa;
	background: #fff;
}
.box-blue {
	border: #a0a8ff 1px solid;
	background: #fff;
}
/* orange */
.title-brown {
	color: #ffa500;
	background: #fff;
}
.box-brown {
	border: #ffa500 1px solid;
	background: #fff;
}
/* green */
.title-green {
	color: #4CAF50;
	background: #fff;
}
.box-green {
	border: #9dd9a0 1px solid;
	background: #fff;
}
/* orange2 */
.title-brown2 {
	color: #fff;
	background: #ffa500;
}
.box-brown2 {
	border: #ffa500 1px solid;
	background: #fff;
}

/*ヘッダーロゴ縮尺変更*/
div.header-container-in.hlt-top-menu .logo-header img {
height: auto;
max-height: none;
width: 400px;
}

/*ヘッダー下ギャラリー影を消したり、スマホで2カラムにしたり*/
.gallery { width: 100%; margin-bottom: 20px!important; overflow: hidden; }
.gallery br { display: none; } 
.gallery-item { float: left; margin-bottom: 0!important; }
.gallery-icon { text-align: center; }
.gallery-icon img { width: 100%; height: auto; margin-bottom: 10px!important; }
.gallery-columns-2 .gallery-item, .gallery-columns-3 .gallery-item, .gallery-columns-4 .gallery-item, .gallery-columns-5 .gallery-item { margin: 0; }
.gallery-columns-1 .gallery-item { width: 100%; margin-right: 0; }
.gallery-columns-2 .gallery-item { width: 50%; }
.gallery-columns-3 .gallery-item { width: 33.33333%; }
.gallery-columns-4 .gallery-item { width: 25%; }
.gallery-columns-5 .gallery-item { width: 20%; }

@media screen and (max-width: 640px) {
	.gallery-icon img { margin-bottom: 0!important; }
	.gallery-columns-2 .gallery-item { width: 50%; margin: 0; }
	.gallery-columns-3 .gallery-item, .gallery-columns-4 .gallery-item { width: 50%; margin: 0; }
	.gallery-columns-5 .gallery-item { width: 31.33333%; margin: 0; }
}

/*SANGO風プロフィール*/
.nwa .author-box {
    text-align: center;
    max-width: 100%;
}
#sidebar .author-box {
    border: none;
    border-radius: 4px;
    margin: 1em 0;
    line-height: 1.4;
    position: relative;
    padding: 1.4% 2% 1.8%;
}
#sidebar .author-thumb {
    float: none;
    width: 100%;
    margin: 9px auto 0;
    background: url(http://example.com/wp-content/uploads/2018/12/profile.jpg) center no-repeat;
    background-size: cover;
    height: 0;
    padding-top: calc(100%*392/700);
    position: relative;
}
#sidebar .author-thumb img{
	border: 3px solid #fff;
    width: 30%;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -25%;
}
#sidebar .author-content {
    margin-top: 16%;
    font-size: 0.9em;
}
.author-name {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 10px;
}
.author-box .author-name a {
    text-decoration: none;
    color: #333;
}
.author-box p {
    margin-top: 0.3em;
    line-height: 1.6;
}
.author-box p a {
    text-decoration: none;
    color: #008cee;
}
.author-box p a:hover {
    text-decoration: underline;
    color: #008cee;
}
.author-box .sns-follow-buttons a.follow-button {
    font-size: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    margin-bottom: 4px;
    margin-right: 8px;
    background: none;
    color: #fff;
}
.author-box a.follow-button span {
    line-height: 40px;
}
.author-box a.follow-button span::before {
    font-size: 22px;
}
.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 .website-button { background-color: #47555c !important; }
.author-box .twitter-button { background-color: #1da1f2 !important; }
.author-box .facebook-button { background-color: #3b5998 !important; }
.author-box .hatebu-button { background-color: #2c6ebd !important; }
.author-box .google-plus-button { background-color: #dd4b39 !important; }
.author-box .instagram-button { background: #e1306c !important; }
.author-box .youtube-button { background-color: #ef1515 !important; }
.author-box .flickr-button { background-color: #0063dc !important; }
.author-box .pinterest-button { background-color: #bd081c !important; }
.author-box .line-button { background-color: #00c300 !important; }
.author-box .amazon-button { background-color: #ff9900 !important; }
.author-box .rakuten-room-button { background-color: #c42e7f !important; }
.author-box .github-button { background-color: #333 !important; }
.author-box .feedly-button { background-color: #2bb24c !important; }
.author-box .rss-button { background-color: #f26522 !important; }
#main .author-box {
    border: none;
    border-radius: 3px;
    margin: 1em 0;
    line-height: 1.4;
    position: relative;
    padding: 1.4% 2% 1.8% 0;
    box-shadow: 0 5px 20px -5px rgba(105,115,131,.35);
}
#main .author-widget-name {
    display: inline-block;
    position: relative;
    margin: 10px 0 0 -170px;
    padding: 6px 12px;
    border-radius: 20px;
    background: #eaedf2;
    color: #555;
    font-size: 14px;
    font-weight: 700;
    z-index: 1;
}
#main .author-widget-name::before {
    position: absolute;
    content: '';
    z-index: -1;
    bottom: -30px;
    left: 60px;
    border: 15px solid transparent;
    border-top: solid 30px #eaedf2;
    transform: rotate(-40deg);
}
#main .author-thumb {
    float: left;
    margin: 0;
    padding-top: 70px;
    width: 200px;
    text-align: center;
}
#main .author-thumb img {
    border: solid 5px #dfe2e8;
    width: 100px;
}
#main .author-content {
    margin: -30px 0 0 200px;
    padding-left: 30px;
    border-left: 2px #eaedf2 dashed;
}
#main .author-box .author-name {
    line-height: 1;
}
#main .author-box p {
    font-size: .95em;
}
@media screen and (max-width: 480px){
#main .author-box {
    margin: 1em 10px;
    padding: 16px;
    text-align: center;
}
#main .author-widget-name {
    margin: 0;
}
#main .author-widget-name::before {
    left: 50px;
}
#main .author-thumb {
    float: none;
    margin: 0;
    padding-top: 20px;
    width: 100%;
}
#main .author-box .author-name {
    font-size: 14px;
}
#main .author-content {
    margin: 10px 0 0 0;
    padding-left: 0;
    border: none;
}
#main .author-box p {
    font-size: 14px;
    text-align: left;
}
#main .author-box .sns-follow-buttons {
    justify-content: center;
}
}

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

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

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

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

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

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

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

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

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

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

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

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

/* h1デザイン */
.entry-title, .archive-title {
    font-size: 28px;
    margin: 0em -3.6% 0.5em;
    padding: 15px;
    background-color: #96da4d;
    color: #ffffff;
    line-height: 1.3;
}	
	
/* h2デザイン */
.article h2 {
	position: relative;
	background: #96da4d;
	color: #ffffff;
	text-align: center;
	font-size: 26px;
	padding: 30px 20px;
	margin: 1em -3.6% 1.5em;
}
.article h2:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(150, 218, 77, 0);
	border-top-color: #96da4d;
	border-width: 20px;
	margin-left: -20px;
}

/* h3デザイン */
.article h3 {
        position: relative;
        color: white;
        background: #96da4d;
        border-left: solid 5px #1da900;
        font-size: 22px;
        line-height: 1.4;
}

/* h4デザイン */
.article h4 {
        padding: 0.5em 0.5em;
        color: #494949;
        background: transparent;
        font-size: 20px;
        border-left: solid 7px #96da4d;
        border-color: #96da4d;
        border-right: solid 2px #96da4d;
}

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

/* h1デザイン */
.entry-title, .archive-title {
        font-size: 28px;
        margin: 0em -3.6% 0.5em;
        padding: 15px;
        background-color: #96da4d;
        color: #ffffff;
        line-height: 1.3;
}
	
/* h2デザイン */
.article h2 {
        position: relative;
        background: #96da4d;
        color: #ffffff;
        text-align: center;
        font-size: 26px;
        padding: 30px 20px;
        margin: 1em -3.6% 1.5em;
}
.article h2:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(150, 218, 77, 0);
	border-top-color: #96da4d;
	border-width: 20px;
	margin-left: -20px;
}

/* h3デザイン */
.article h3 {
        position: relative;
        color: white;
        background: #96da4d;
        border-left: solid 5px #1da900;
        font-size: 22px;
        line-height: 1.4;
}

/* h4デザイン */
.article h4 {
        padding: 0.5em 0.5em;
        color: #494949;
        background: transparent;
        font-size: 20px;
        border-left: solid 7px #96da4d;
        border-color: #96da4d;
        border-right: solid 2px #96da4d;
}
	
/*線の種類（点線）2px 線色*/
padding-bottom: 8px;
line-height: 120%;
font-size: 100%;
font-weight: bold;
text-shadow: none;
-webkit-text-size-adjust: 100%;
border-left: 0px solid #777;
border-right: 0px solid #ccc;
border-top: 0px solid #ccc;
padding: 5px 0px;
margin-top: 10px;
}

/* アイコンボックス */
.information-box::before, .question-box::before, .alert-box::before, .information::before, .question::before, .alert::before, .memo-box::before, .comment-box::before, .common-icon-box::before {
padding: 0;
top: .7em;
margin-left: -.5em;
font-size:25px;
border: 0;
width: auto;
}	
	
}