@charset "UTF-8";

/*子テーマ用「base.css」*/
/*--------------------------------------------------------
【追加】グローバルメニューの高さ（上下幅）を変更
--------------------------------------------------------*/
.global-nav-in li a{
	display: block;
	min-height: 1.5em; /*メニュー毎に高さが変わるときに調整*/
	padding: 0.6em 1em; /*画像をメニューにする場合は値を0に*/
	background-color: #111111;
	color: #fff;
	text-decoration: none;
}

/*--------------------------------------------------------
【追加】インスタグラムフォローボタンデザイン
--------------------------------------------------------*/
.insta_btn2{/*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 7px;/*角丸に*/
  position: relative;
  display: inline-block;
  height: 34px;/*高さ*/
  width: 295px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  font-size: 16px;/*文字のサイズ*/
  line-height: 34px;/*高さと合わせる*/
  vertical-align: middle;/*垂直中央寄せ*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.insta_btn2:before{/*グラデーション②*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/*全体を覆う*/
  height: 100%;/*全体を覆う*/
  background: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

.insta_btn2 .fa-instagram{/*アイコン*/
  font-size: 26px;/*アイコンサイズ*/
  position: relative;
  top: 4px;/*アイコン位置の微調整*/
}

.insta_btn2 span {/*テキスト*/
  display:inline-block;
  position: relative;
  font-size: 16px;
  transition: .5s;
}

.insta_btn2:hover span{/*ホバーで一周回転*/
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

/*------------------------------------------------------------
【追加】Table of Contents Plus のカスタマイズ
-------------------------------------------------------------*/
#toc_container {
    background-color: #f0ffff !important;/*背景色*/
    margin-bottom: 70px !important;
    border: solid 3px #a52a2a !important;/*外枠*/
    position: relative;
    border-radius: 0 7px 7px;/*角丸*/
    padding: 0.2em 1em 1em !important;
    margin-left: auto;/*配置を中央に*/
    margin-right: auto;/*配置を中央に*/
    display: block;/*幅を記事幅と合わせる*/
}

#toc_container p.toc_title {
    text-align: left;
    font-weight: 700;
    padding: 0.2em 5% 0.1em !important;
    color: #fff !important;/*文字色*/
    margin: 0 60% 0 0;
    border-radius: 7px 7px 0 0;/*角丸*/
    background-color: #a52a2a !important;/*背景色*/
    position: absolute;
    top: -2.1em;/*上部スペースを狭く。コンテンツ部分もコードを記述で同様に可能*/
    left: -0.19em;
    letter-spacing: 0.05em;
    display: inline-block
}

#toc_container li {
 padding-left: 1em !important;
 line-height: 2.2em;
}

#toc_container .toc_depth_2, .toc_depth_3, .toc_depth_4, .toc_depth_5 {
display:none;/*第一階層以外リストマーカー非表示*/
}

#toc_container .toc_list > li ul {
  padding-left: 0px;
  margin-left: 0px;
}/*リストマーカーの位置調整*/
  
#toc_container .toc_list > li > ul li {
  list-style-type: none !important;/*リストマーカーの種類*/
  list-style-position: inside;/*リストマーカーと文字の配置*/
}

#toc_container .toc_list > li > ul li:before {
	content: '';
	width: 6px;
	height: 6px;
	display: inline-block;
	border-radius: 100%;
	background: #4DB1EC;
	position: relative;
	left: -5px;
	top: -3px;
}/*リストマーカー作成（上記：list-style-type: none として作成）*/

/*--------------------------------------------------------
【追加】WordPress Popular Postsの調整
--------------------------------------------------------*/
/*左寄せ*/
ul.wpp-list {
   margin: 0 0 30px;
   list-style: none;
   font-size: 13px;
   text-align: left;
}

/*カーソルを合わせた時の背景色の設定*/
.popular-posts li:hover {
background-color: #fff8dc ;
}

/*クリック時の背景色の設定*/
.wpp-list .current{
  background: #fff8dc ;
}

/*リスト間の間隔、リスト間点線*/
.wpp-list li {
margin:0px 0px !important;
border-bottom: 1px dashed #006400;/*記事間の点線と色*/
padding-bottom:10px;
padding-top:10px;
}

/*--------------------------------------------------------
【追加】SNSボタンデザイン、余白調整
--------------------------------------------------------*/
.sns-list li{
    display: inline-block;
    vertical-align: top;
    line-height: 18px !important;
    margin-left: 6px;
}

/*Pocketボタンの高さ調整*/
.wsbl_pocket {
 line-height: 18px !important;
}

/*--------------------------------------------------------
【追加】見出しのフォントサイズ、余白等調整
--------------------------------------------------------*/
/*記事タイトルや基本単位毎の最初の見出し*/
.section-wrap .section-title{
	line-height: 1.5;
	margin: 0 0 1em;
	padding: 0;
	border: none;
	background: transparent;
	color: #333;
	font-size: 1.7em;
}

.main-body h2{
	margin: 30px 0 30px;
	padding: 8px 13px;
	background: #006400;
	color: #fff;
	font-size: 1.3em;
}

.main-body h3{
	margin: 20px 0 20px;
	padding: 0 0 2px;
	border-bottom: 2.5px solid #3cb371;
	font-weight: bold;
	font-size: 1.2em;
}

.main-body h4{
	margin: 20px 0 20px;
	padding: 6px 8px;
	border-bottom: none;
	font-weight: bold;
	background: #fff8dc;
	color: #3e3e3e;
	font-size: 1.1em;
}

.main-body h5{
	margin: 20px 0 20px;
	padding: 0 0 0 9px;
	border-left: 6px solid #006400;
	font-weight: bold;
	font-size: 1.1em;
}

.main-body h6{
	margin: 55px 0 25px;
	font-weight: bold;
	font-size: 1em;
}

/*--------------------------------------------------------
【追加】見出しのルックス変更クラス指定
--------------------------------------------------------*/
.h3simple-1{
	margin: 20px 0 8px !important;
	padding: 0 0 2px;
	color: #9400d3;
	border-bottom: hidden !important;
	font-weight: bold;
	font-size: 1.1em;
}

.h4simple-1{
	margin: 20px 0 8px !important;
	padding: 0 0 2px !important;
	color: #9400d3 !important;
	font-weight: bold !important;
	font-size: 1.1em !important;
	background: transparent !important;
}

/*--------------------------------------------------------
【追加】表（テーブル）のデザイン変更
--------------------------------------------------------*/
table{
	width: 100%;
	margin: 1.5em 0 0em;
	padding: 0;
	border-top: 1px solid #959595 ;
	border-left: 1px solid #959595 ;
}

th,
td{
	padding: 0.2em 0.6em;
	border-right: 1px solid #959595 ;
	border-bottom: 1px solid #959595 ;
}

th{
	background-color: #e9e9e9;
	font-weight: normal;
	font-size: 14px;
	text-align: center;
}

td{
	font-size: 13px;
}

thead th{
	background-color: #333333;
	color: #fff;
	text-align: center;
}

.double-line-b {
   border-bottom: 3px double #959595; /* 表の二重線 */
}

/*--------------------------------------------------------
【追加】記事下日付（公開日、更新日）のデザイン設定
--------------------------------------------------------*/
.post-date2{
	padding: 15px 20px 0.02px 20px;
	background-color: #fff8dc;
	font-size: 14px;
}

/*--------------------------------------------------------
【追加】埋め込みYoutube動画のレスポンシブ対応
--------------------------------------------------------*/
.video{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.video iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

.video-wrapper {
	width: 500px;
	max-width: 100%;
}

/*--------------------------------------------------------
【追加】Wp-PageNavi デザイン変更
--------------------------------------------------------*/
/*wp-pagenavi 06*/
.wp-pagenavi {
clear: both;
margin: 0px 10px 20px;
}
.wp-pagenavi a, .wp-pagenavi span {
color: #777;
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
background:-ms-linear-gradient( top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf) );
background-color:#ededed;
border:1px solid #dcdcdc;
padding: 8px 15px;
margin: 0 2px;
white-space: nowrap;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
text-align: center;
text-decoration:none;
}
.wp-pagenavi a:hover{
color:#e4685d; 
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
background:-ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) );
background-color:#dfdfdf;
}
.wp-pagenavi span.current{
color: #FFF;
background:-moz-linear-gradient( center top, #fc8d83 5%, #e4685d 100% );
background:-ms-linear-gradient( top, #fc8d83 5%, #e4685d 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fc8d83', endColorstr='#e4685d');
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fc8d83), color-stop(100%, #e4685d) );
background-color:#fc8d83;
border-color: #e4685d;
font-weight: bold;
}

/*--------------------------------------------------------
【追加】画像にカーソル時のルックス
--------------------------------------------------------*/
p.over-image {
   background-color: #8080ff; /* 淡い青色 */
   width: 560px; /* 画像の横幅に合わせる */
   height: 88px; /* 画像の高さに合わせる */
}
p.over-image img:hover {
   opacity: 0.6; /* 40％ほど透過させる */
}

/*--------------------------------------------------------
【追加】フォントスタイル
--------------------------------------------------------*/
/*フォントサイズの設定*/
.f12px{ font-size: 12px; }
.f13px{ font-size: 13px; }
.f14px{ font-size: 14px; }

/*行間の設定*/
.lh08{ line-height: 0.8!important; }
.lh09{ line-height: 0.9!important; }

/*--------------------------------------------------------
【追加】Wordpress Related Postsのデザイン変更
--------------------------------------------------------*/
/*関連記事の見出しスタイル*/
.wp_rp_content h3 {
  position: relative;
  color: white;
  background: #ff6347;
  line-height: 1.2;
  padding: 0.5em 0.5em 0.5em 1.8em;
  border-bottom: none;
  font-size: 1.4em;
  font-weight: bold;
  border-radius: 3px 3px 3px 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.wp_rp_content h3:before {/*疑似要素*/
  font-family: "Font Awesome 5 Free";
  content: "\f14a";
  position: absolute;
  left : 0.5em; /*左端からのアイコンまでの距離*/
}