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

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


/*********************************
* ページトップ
*********************************/

.page-top {
	box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}

.page-top a {
	display: block;
	text-align: center;
	background: #66c2c3;
	color: #fff;
	margin: 25px 0 -21px 0;
	text-decoration: none;
	font-weight: 600;
	padding: 10px 0;
}
.page-top a:hover {
	background: #f66877;
	color: #fff;
}
#sidebar .page-top{
	box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
#sidebar .page-top a {
	margin:1em 0;
	background:#66c2c3;
	font-size:0.85em;
}
#sidebar .page-top a:hover {
	background: #f66877;
	color: #fff;
}

/*********************************
* ボックスデザイン
*********************************/

.box3-pink {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	max-width:600px; /* ボックスの横幅 */
	margin: 2em auto;	/* ボックスの外側余白(上下:2em　左右:auto) */
	padding: 1.7em 2em;	/* ボックスの内側余白(上下:1.7em　左右:2em) */
	border: 2px solid #f27398;	/* ボックスの線 (太さ　線の種類　線の色)*/
	border-radius: 4px;	/* ボックスの角丸 */
}
.box3-pink .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
	top: -10px; /* 上から（-10px）移動*/
	left: 30px; /* 左から(30px)移動 */
	background: #fff; /* タイトル背景色 */
	color: #f27398; /* タイトル文字色 */
	padding: 0 10px;/* タイトルの余白 */
	line-height: 1;/* タイトルの行の高さ */
	font-size: 20px;/* タイトル文字の大きさ */
	font-weight: bold;/* タイトル文字の太さ */
}
.box3-pink p {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
}

/*********************************
* Cocoon 通知エリア2つ
*********************************/
.twice-notice{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
}
.twice-notice a{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position:relative;
    flex-basis:50%;
    text-align:center;
    color:#fff; /* 文字色 */
    font-size: 0.9em; /* 文字サイズ */
    line-height: 1.4;
    font-weight: bold;
    padding: 1em 2em;
    letter-spacing: 1px;
    text-decoration:none;
}
.twice-notice a:first-child{
    background:#66c2c3; /* 左背景色 */
    border-right:1px solid #fff; /* 中央線 */
}
.twice-notice a:last-child{
    background:#F66780; /* 右背景色 */
}
.twice-notice a:hover{
    opacity:0.8;
}
.twice-notice a:after{
    position:absolute;
    top:50%;
    right:1em;
    transform: translateY(-50%);
    font-family:"FontAwesome";
    content:"\f054"; /* 矢印アイコン */
    animation:infinite move-arrow 1.5s; /* 矢印アニメーション */
}
@keyframes move-arrow {
    0%{margin:0 5px 0 -5px;opacity:.3;} /* 矢印アニメーション設定 */
}
/* スマホ */
@media screen and (max-width: 480px){
    .twice-notice a{
        font-size:0.7em; /* 文字サイズ */
    }
    .twice-notice a:after{
        transform: translateY(-50%);
    }
}

/************************************
** カテゴリー
************************************/

/*---------------------------------
親カテゴリのカスタマイズ
--------------------------------*/
.widget_categories ul li a{ 
  border-bottom: 1px dashed #CCCCCC; /* 下線の種類 */
}

.widget_categories ul li a::before{
  font-family: FontAwesome;
  content: "\f121"; /* FontAwesomeのユニコード */
  color: #5FB3F5; /* アイコンの色 */
  padding-right: 6px;
}

.widget_categories > ul > li > a:first-child{ 
  border-top: none;
}

/*---------------------------------
子カテゴリのカスタマイズ
--------------------------------*/
.widget_categories ul li ul li a::before{
  font-family: FontAwesome;
  content: "\f121"; /* FontAwesomeのユニコード */
  color: #5FB3F5; /* アイコンの色 */
  padding-right: 6px;
}

/************************************
** 比較棒グラフ
************************************/
.ub-bar-graph{
  margin:0 auto 2rem !important;
  padding:2em !important;
  background:#fafafa;
  box-shadow: 0 3px 5px rgba(0,0,0,.07);
  color: #333;
}
.ub-bar-graph__title{
  letter-spacing: 1.5px !important;
  line-height:1.8 !important;
  font-size: 1em  !important;
  margin: 0 auto 2.5em !important;
  padding: 5px 0 !important;
  border-bottom: 1px dashed #aaa;
  text-align:center;
  font-weight:600 !important;
}
.ub-bar-graph dl > div{
  margin: 0 auto 2.5em !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 30px;
  font-size: 0.9rem;
  position:relative;
  box-shadow: 0 3px 5px rgba(0,0,0,.03);
}
.ub-bar-graph dl > div:last-child{
  margin: 0 !important;
}
.ub-bar-graph dl > div dt{
  background:#fbd366;
  border-right: 2px solid #fff;
}
.ub-bar-graph dl > div .ub-bar-graph__em{
  background:#6cd2d8;
}
.ub-bar-graph dl > div dd{
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex:1;
  margin:0 !important;
  font-size:1em;
  background:#dfe6e8;
}
.ub-bar-graph dl > div dt > span,.ub-bar-graph dl > div dd > span{
  position:absolute;
  z-index: 1;
  color:#333;
  font-size: 1em;
  line-height: 1.5;
}
.ub-bar-graph dl > div dt > .ub-bar-graph__content{
  left:0px;
  top:-20px;
}
.ub-bar-graph dl > div dd >  .ub-bar-graph__value{
  right:5px;
  top:5px;
}
@media screen and (max-width: 560px) {
  .ub-bar-graph{
    padding:2em 1em !important;
  }
  .ub-bar-graph dl > div{
    margin: 0 auto 2em !important;
  }
}

/************************************
** サイドバー追尾目次
************************************/
.sidebar-scroll{
  top:15px !important;
}
.sidebar h3{
  font-size:0.9em;
  padding: 7px 12px;
}
.sidebar .widget_toc{
   box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.sidebar .toc-widget-box{
  margin-top: -0.9em;
}
.sidebar .toc{
  padding: 0;
  width:100%;
}
.sidebar .toc-content {
  overflow-y: scroll;
  max-height: 390px;
  background: #fff;
  padding: 0.5em 1.5em;
}
.sidebar .toc li{
  line-height:1.6;
  margin-bottom: 1em;
  font-size:0.85rem;
  color:#3cb8f1;
}
.sidebar .toc-content > ol  > li,.sidebar .toc-content > ul  > li{
  font-weight:600;
  padding-left: 0.5em;
}
.sidebar .toc-content a{
  letter-spacing:0.5px;
}
.sidebar .toc .toc-list ul, .sidebar .toc .toc-list ol {
  margin: 1em 0;
  list-style-type:none;
  font-weight:500;
}
@media screen and (max-width: 768px){
  .sidebar-menu-button .widget_toc{
    display:none;
  }
}

/************************************
** プロフィール
************************************/

.author-box {
	border: none !important;
	padding: 0 !important;
}

.pwa .author-box {
	text-align: left; /* 文字を左揃えに */
}
.author-box .author-widget-name{
	color: #666;
	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://～～.jpg) center no-repeat; /* カバー画像を指定 */
	background-size: cover;
	position: relative;
	height: 0;
	/* フル表示にしたい場合のpadding-topの値： 表示画像の高さ(px) ÷ 表示画像の幅(px) × 100(%) */
	padding-top: 40%;
	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: -4.5em;
}

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

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

.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: 90%;
	text-align: left;
}

.author-box .author-content .author-description p a{ text-decoration: none; }
.author-box .author-content .author-description p a:hover{ text-decoration: underline; }
.author-box .author-content .author-follows .sns-buttons{ justify-content: center; }

.author-box .author-content .author-follows .sns-buttons a.follow-button{
	border-radius: 50%;
	border: none;
	width: 40px;
	height: 40px;
	color: #fff;
	margin-bottom: .5em;
	margin-right: .5em;
	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%;
}

/************************************
** ブログカード
************************************/
.blogcard-snippet,
.blogcard-footer {
  display: none;
}
.blogcard-wrap {
  transition: all .3s;
  max-width: 600px;
  margin: 2em auto;
}
.blogcard {
  border:1px solid #eaeaea !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
  padding: 10px;
}
.blogcard-wrap:hover {
  background: none;
  transform: translateY(-3px);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, .1);
}
.blogcard-thumbnail {
  margin: 0;
}
.blogcard-thumbnail img {
  display: block;
}
.blogcard-title {
  color: #555;
  letter-spacing: 0.5px;
  font-size: 15px;
  line-height: 1.5;
  margin: 10px 0 0 0;
  height: 45px;
  overflow: hidden;
}
.blogcard-content {
  min-height: auto;
  margin-left: 185px;
  padding-right: 6px;
}
.blogcard-label {
  top: -11px;
  left: 9px;
  padding: 3px 0.6em;
  background:#aaa;
  padding: 1px 10px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1px;
}
.blogcard-content:after {
  content: "クリックして読む";
  background: #66c2c3; /* 背景色 */
  display: block;
  text-align: center;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  width: 180px;
  border-radius: 20px;
  font-size: 13px;
  padding: 1px 0;
  margin-top: 6px;
}
@media screen and (max-width: 834px) {
  .blogcard-content {
    margin-left: 130px;
  }
  .blogcard-title {
    font-size:12px;
    line-height: 1.5;
    height: 35px;
    margin:0;
  }
  .blogcard-content:after {
    content: "タップして読む";
  }
  .blogcard-thumbnail{
    width:120px;
  }
}
@media screen and (max-width: 560px) {
  .blogcard-content:after {
    width: 120px;
    font-size: 12px;
  }
  .blogcard-title {
    margin:0;
  }
}
@media screen and (max-width: 320px) {
  .blogcard-thumbnail {
    width: 100px;
  }
  .blogcard-content {
    margin-left: 110px;
  }
  .blogcard-title {
    height: 35px;
  }
}
/************************************
** CVボタン
************************************/
.p-cv-btn-wrap *{
  margin:0 !important;
  padding:0 !important;
  box-sizing: border-box;
}
.p-cv-btn-wrap{
  background:#f7f7f7;
  padding:1.5em !important;
  margin: 0 0 2em !important;
  font-size:16px;
  line-height:1.8;
}
.p-cv-btn-wrap ul,.p-cv-btn-wrap a,.p-cv-note{
  max-width:350px;
  margin: auto !important;
  border:none;
}
.p-cv-btn-wrap ul li{
  font-weight:500;
  list-style:none;
  font-size:0.9em;
  position:relative;
  padding-left:1.5em !important;
}
.p-cv-btn-wrap ul li:before{
  font-family: "FontAwesome";
	content: "\f058" !important;/*アイコン*/
  font-weight:600;
  color: #66c2c3; /* 色 */
  position:absolute;
  left: 0 !important;
  top: 0 !important;
  width: 0 !important;
  height: 0 !important;
}
.p-cv-btn a{
  color:#fff;
  text-decoration:none !important;
  background:#66c2c3;
  border-bottom: solid 4px #66c2c3;
  padding: 0.5em 1em !important;
  border-radius: 7px;
  margin: 0.3em auto !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.p-cv-btn:hover{
  opacity:0.9;
}
.p-cv-btn a:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  border-bottom: none;
}
.p-cv-btn .p-cv-em{
  font-size:0.9em;
  line-height: 1.3;
  text-align:center;
  font-weight:600;
  display:block;
  color:#66c2c3;
  background:#fff;
  padding: 5px 10px !important;
  margin: 2px 10px 0px 0 !important;
  border-radius: 30px;
  min-width: 55px;
  max-width: 80px;
}
.p-cv-btn .p-cv-text{
  font-size:0.9em;
  font-weight: 600;
  color:#fff;
  letter-spacing: 1px;
  border-left: 1px solid #fff;
  line-height: 25px;
  margin: 0.6em auto 0.6em 0 !important;
  padding: 0 0.6em 0 1em !important;
}
.p-cv-btn i,.p-cv-btn svg{
  color:#fff;
  min-width:22px;
}
.p-cv-url-wrap{
  font-size: 0.8em !important;
  max-width: 350px;
  margin: 0 auto 0.5em !important;
  display: block;
}
.p-cv-url-wrap a{
  color: #1a0dab !important;
  text-decoration:underline !important;
}
.p-cv-btn-wrap .p-cv-note{
  font-size:0.9em;
  border: 1px solid #66c2c3;
  margin-top:0.5em !important;
  padding:0.5em 1em !important;
}
.sidebar .p-cv-btn-wrap{
  background:#fff;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
}
/*320px以下*/
@media screen and (max-width: 320px){
  .p-cv-btn-wrap{
    padding:1em !important;
  }
}
.p-cv-btn-img{
  margin:0 auto !important;
  text-align:center;
  max-width:350px;
  display:block;
}


/************************************
** アイコンフキダシボックス(ブルー)
************************************/
/* ボックス全体 */
.iconbox-blue{
  background: #f2fbff !important; /* 背景色 */
}
/* ボックスタイトル */
.iconbox-blue .box-head-blue{
  background: #00bfff !important; /* 背景色 */
}

/************************************
** 目次
************************************/
/* 目次全体デザイン */
.toc{
    background:#F9F9F9; /* 目次全体の背景色を変える場合はここを変更 */
    border:none;
    display:block;
    border-top:5px solid;
    border-top-color:#00bfff;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
    padding: 20px 25px;
}
/* 目次の文字指定 */
.toc-title {
    text-align:left;
    margin: 0 20px 20px -10px;
    padding-left: -20px;
    font-size: 23px;
    font-weight: 700;
    color: #00bfff; /* 目次の文字色を変える場合はここを変更 */
}
/* 目次のアイコン設定 */
.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:#00bfff; /* アイコンの背景色を変える場合はここを変更 */
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding:14px;
}
/* 目次のデザインカスタマイズ */
.toc-content ol {
    padding: 0 0.5em;
    position: relative;
}
.toc-content ol li {
    line-height: 1.5;
    padding: 0.7em 0 0.5em 1.4em;
    border-bottom: dashed 1px silver;
    list-style-type: none!important;
}
/* 目次の各節の先頭にあるアイコンを設定 */
.toc-content ol li:before {
    font-family: FontAwesome;
    content: "\f138"; /* アイコンを変える場合はここを変更 */
    position: absolute;
    left : 0.5em;
    color: #00bfff; /* 色を変える場合はここを変更 */
}
.toc-content ol li:last-of-type {
    border-bottom: none;
}
.toc-content .toc-list li {
    font-weight:700; /* h2のみ太文字に */
}
.toc-content .toc-list li li {
    font-weight:normal; /* h3以降の文字サイズを普通に */
}

/************************************
** 比較表
************************************/
/* 比較表全体 */
.compare-box {
  display:-webkit-box;/* 配置 */
  display:-ms-flexbox;/* 配置 */
  display:flex;/* 配置 */
  max-width:600px;/* 横幅 */
  margin: 0 auto 2rem;/* 余白 */
  border-radius:4px;/* 角丸 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2); /* 影 */
  background: #fef9ed; /* 背景色 */
}
/* 左のボックス、右のボックス */
.compare-box .compare-left-wrap, .compare-box .compare-right-wrap{
  width:50%;/* 横幅半分ずつ */
  overflow:hidden;/* はみ出さないように*/
}
/* 左のタイトル、右のタイトル */
.compare-box .compare-left-head, .compare-box .compare-right-head{
  background: #fdc44f; /* 背景色 */
  text-align: center;/* 中央寄せ */
  color: #FFF; /* 文字色 */
  font-weight: bold;/* 文字太さ */
  padding:0em 1em;/* 余白 */
  font-size:15px;/* 文字大きさ */
  line-height:1.5;/* 行間 */
  height:65px;/* 縦幅 */
  display:table-cell;/* 形式 */
  vertical-align:middle;/* 高さ中央寄せ */
  width:1000px;/* 横幅 */
}
/* 左のタイトル */
.compare-box .compare-left-head{
  border-radius:4px 0 0 0;/* 角丸 */
}
/* 右のタイトル */
.compare-box .compare-right-head{
  border-radius:0 4px 0 0;/* 角丸 */
}
/* 左のコンテンツ、右のコンテンツ */
.compare-box .compare-left, .compare-box .compare-right{
  padding:1.5em;/* 余白 */
  font-size:15px;/* 文字大きさ */
  line-height:2;/* 行間 */
  text-align: justify;/* 段落両端 */
  text-justify: inter-ideograph;/* 段落両端 */
}
/* 文章 */
.compare-box p {
  padding: 0;/* 余白 */
  margin: 0 0 20px 0;/* 余白 */
}
/*スマホで見たとき*/
@media screen and (max-width: 480px){
  /* 左のタイトル、右のタイトル */
  .compare-box .compare-left-head, .compare-box .compare-right-head{
    font-size:12px;/* 文字大きさ */
    height:50px;/* 高さ */
  }
  /* 左のコンテンツ、右のコンテンツ */
  .compare-box .compare-left, .compare-box .compare-right {
 	 	padding: 1.2em;/* 余白 */
 	 	font-size: 12px;/* 文字大きさ */
 	}
}
/************************************
** 比較表 箇条書き(記号)
************************************/
/* 箇条書き(記号) */
.compare-box .list{
   list-style: none !important;/* 行頭記号リセット */
   padding:0 !important;/* 余白リセット */
   margin:0 !important;/* 余白リセット */
   border:none !important;/* 線リセット */
}
/* 箇条書き 行 */
.compare-box .list li { 
   border-bottom:1px dashed #cdcdcd;/* 線(太さ 種類　色) */
   position: relative;/* 配置 */
   margin:0.5em 0 !important;/* 余白 */
   max-width:500px;/* 横幅 */
   padding: 0 0 0.7em 1.4em !important;/* 余白 */
   line-height:1.8;/* 行間 */
}
/* 箇条書き 行最後 */
.compare-box .list li:last-child{ 
   border:none;
}
/* 箇条書き 行頭記号 */
.compare-box .list li:before {
   background-color:  #ffa952; /* 色 */
   position: absolute;/* 配置 */
   content: '';/* 空文字 */
   top: 10px;/* 上からの距離 */
   left: 7px;/* 下からの距離 */
   width: 7px;/* 横幅 */
   height: 7px;/* 縦幅 */
   border-radius: 4px;/* 角丸 */
}
/*スマホで見たとき*/
@media screen and (max-width: 480px){
  /* 箇条書き 行頭記号 */
  .compare-box .list li:before {
    top: 9px;/* 上からの距離 */
    left: 3px;/* 下からの距離 */
    width:5px;/* 横幅 */
    height:5px;/* 縦幅 */
  }
}
/************************************
** 比較表　箇条書き(番号)
************************************/
/* 箇条書き(番号) */
.compare-box .list-number{
   counter-reset:number; /* 番号リセット */
   list-style: none !important;/* 行頭番号削除) */
   padding:0 !important;/* 余白リセット */
   margin:0 !important;/* 余白リセット */
   border:none !important;/* 線リセット */
}
/* 箇条書き(番号) 行 */
.compare-box .list-number li {
   position: relative;/* 配置 */
   margin:0.5em 0 !important;/* 余白 */
   max-width:500px; /* 横幅 */
   padding: 0 0 0.5em 1.8em !important;/* 余白 */
   line-height:1.8;/* 行間 */
  border-bottom:1px dashed #cdcdcd;/* 線(太さ 種類　色) */
}
/* 箇条書き 行最後 */
.compare-box .list-number li:last-child{ 
   border:none;
}
/* 箇条書き(番号) 行頭番号 */
.compare-box .list-number li:before {
   counter-increment: number;/* 番号 */
   content: counter(number);/* 番号 */
   background-color: #fdc44f; /* 背景色 */
   color: #fff; /* 番号色 */
   position: absolute;/* 配置 */
   font-weight:bold;/* 文字太さ */
   font-size: 12px;/* 文字大きさ */
   border-radius: 50%;/* 角丸 */
   left: 0;/* 左からの距離 */
   top:5px;/* 上からの距離 */
   width: 18px;/* 横幅 */
   height: 18px;/* 縦幅 */
   line-height: 18px;/* 行間 */
   text-align:center;/* 中央寄せ */
}
/* 箇条書き 行頭記号リセット */
.compare-box .list-number li:after{
  content:'';
}
/*スマホで見た時*/
@media screen and (max-width: 480px){
  /* 箇条書き(番号) 行 */
  .compare-box .list-number li{
     padding: 0 0 0.5em 1.8em !important;/* 余白 */
  }
  /* 箇条書き(番号) 行頭番号 */
  .compare-box .list-number li:before {
    font-size:10px;/* 文字大きさ */
    width: 16px;/* 横幅 */
    height: 16px;/* 縦幅 */
    line-height: 16px;/* 行間 */
    top:2px;/* 上からの距離 */
  }
}

/************************************
** 比較表セパレート
************************************/
/* 全体左 */
.compare-box-separate .compare-left{
background:#f0f9fc !important;
height:100%;
}
/* 全体右 */
.compare-box-separate .compare-right{
background:#fff6f2 !important;
height:100%;
}
/* タイトル左 */
.compare-box-separate .compare-left-head{
background:#6fc7e1 !important;
}
/* タイトル右 */
.compare-box-separate .compare-right-head{
background:#ffa883 !important;
}
/* 箇条書き(記号) 行頭番号 左 */
.compare-box-separate .compare-left .list li:before {
background:#6fc7e1 !important;
}
/* 箇条書き(番号) 行頭番号 左 */
.compare-box-separate .list-number li:before {
background:#6fc7e1 !important;
}
/* 箇条書き(記号) 行頭番号 右 */
.compare-box-separate .compare-right .list li:before {
background:#ffa883 !important;
}
/* 箇条書き(番号) 行頭番号 右 */
.compare-box-separate .compare-right .list-number li:before {
background:#ffa883 !important;
}

/************************************
** *リスト
************************************/
.list-3{
   list-style: none;
   padding:0;
   margin:0;
}
.list-3 li { 
   position: relative;
   margin:0.5em 0 !important;
   padding-left: 25px;
}
.list-3 li:before {
   font-family: FontAwesome;
   content: "\f058"; /*アイコン*/
   color:  #F66780; /* 色 */
   position: absolute;
   left:0;
}

/************************************
** *特定ページのページタイトル・シェアボタン・公開日の非表示化
************************************/

article-header, .page-id-9 .entry-title,
article-header, .page-id-9 .sns-share,
article-header, .page-id-9 .post-date  {
    display: none;
}

/************************************
** メニューバー
************************************/

nav#navi, .menu-header .sub-menu{
    font-weight: bold;
    box-shadow: 0 5px 15px -5px rgba(0,0,0,0.2);
}

.menu-header .sub-menu .item-label{
    font-size: 80%;
}
.menu-header .item-label{
    color: #b5b5b5 !important;
}


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

/************************************
** サイドバー
************************************/

.sidebar h3 {
  background: none;
  font-size: 16px;
  letter-spacing: 2px;
  display: inline-block;
  position: relative;
  width: 100%;
  padding: 0;
  text-align: center;
  color: #000000; /* サイドバータイトルの色を指定 */
}
.sidebar h3::before,
.sidebar h3::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10%;
  border-top: 3px solid #00bfff; /* サイドバータイトル横のバーの色を指定 */
}
.sidebar h3::before {
  left: 0;
}
.sidebar h3::after {
  right: 0;
}



/* スマホサイドバー設定 */
#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;
  height: 0;
  padding-top: 75px;
  position: relative;
}
#sidebar .author-thumb img {
  border: 3px;
  width: 35%;
  padding: 2px;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -75%;
}
#sidebar .author-content {
  margin-top: 16%;
  font-size: 0.9em;
}

/************************************
** ボックスメニュー
************************************/
.box-menu-icon{
  color: #00bfff;
}

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

/************************************
** 見出し
************************************/
.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 h2 {
  position: relative;
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;
	color: #494949;
}

.article h2:before {
  font-family: "FontAwesome";
  content: "\f201";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #00bfff; /*アイコン色*/
  font-weight: 900;
}

.article h3 {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #00bfff;/*左線*/
}



/************************************
** トップページカスタマイズ
************************************/
.home #main h1{
    font-size: 1em;
    color: #555;
    letter-spacing: 1px;
    margin: 1em 0 -2em;
    font-weight: 400;
    display: flex;
    align-items: center;
}
.home #main h1:before, .home #main h1:after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background: #aaa;
    display: block;
}
.home #main h1:before {
    margin-right: .4em;
}
.home #main h1:after {
    margin-left: .4em;
}
.home #main .large-thumb{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0.8em 0;
}
.home #main .large-thumb a{
    width: 50%;
    padding: 10px;
}
.home #main .large-thumb a:hover{
    background:unset;
}
.home #main .widget-entry-cards .e-card {
    font-size: 18px;
    box-shadow: 0 0 4px rgba(0,0,0,.15);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    height:100%;
}
.home #main .widget-entry-cards .e-card:hover {
    transform: translateY(-3px);
    box-shadow: 0px 3px 18px 3px rgba(0,0,0,.08);
}
.home #main .widget-entry-cards figure {
    float: none;
    width: 100%;
}
.home #main .widget-entry-cards figure img {
    width: 100%;
    display: block;
    object-fit: cover;
    height: 210px;
}
.home #main .widget-entry-cards .card-content {
    margin: 0 0 0.5em;
    padding:10px 15px;
    background:#fff;
}
.home #main .large-thumb .new-entry-card-title,.home #main .large-thumb .popular-entry-card-title {
    font-size: 0.9em;
    line-height: 1.5;
    font-weight: 600;
    color: #555;
    margin-top: 3px;
}
/*(スマホ)480px以下*/
@media screen and (max-width: 480px){
    .home #main h1{
        margin: 1em 0 0;
        padding: 0;
        font-size:0.8em;
    }
    .home #main .widget-entry-cards .e-card {
        margin:0 5px;
    }
    .home #main .large-thumb a {
        width: 100%;
        padding: 0;
        margin:0 0 15px;
    }
    .home .mobile-2{
        justify-content:space-between;
    }
    .home .mobile-2 a{
        width:48% !important;
    }
    .home .mobile-2 figure img {
        object-fit: unset !important;
        height: auto !important;
    }
    .home #main .large-thumb .new-entry-card-title{
        line-height:1.3;
    }
}
/************************************
** ボタン
************************************/
.p-button {
    max-width: 300px;
    margin: 0 auto;
}
.p-button a {
    display: block;
    margin:25px 0;
    padding: 0.8em 1em;
    border-radius: 2em;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    background: #ffc679;
    box-shadow: 0 5px 20px rgba(235, 160, 47, .5);
    text-align: center;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    opacity:1;
}
.p-button a:hover{
    box-shadow:none;
    transform: translateY(3px);
    opacity:1;
}

/************************************
** アイコンつきリスト
************************************/
/* ボックス全体 */
.iconbox{
  margin: 0 auto 2em; /* 余白 */
  background: #fef9ed; /* 背景色 */
  border-radius:4px; /* 角丸 */
  max-width:600px; /* 横幅 */
  padding: 0; /* 余白 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2); /* 影 */
}
/* ボックスタイトル */
.iconbox .box-title {
  font-size: 18px; /* 文字サイズ */
  background: #fdc44f; /* 背景色 */
  text-align: center; /* 文字配置 */
  color: #fff; /* 文字色 */
  font-weight: bold; /* 文字太さ */
  letter-spacing: 0.05em; /* 文字間隔 */
  border-radius:4px 4px 0 0; /* 角丸 */
  line-height:1.5; /* 行間 */
  padding:1em 2em; /* 余白 */
}
/* 段落の余白リセット */
.iconbox p {
  margin: 0;/* 文字の余白リセット */
  padding: 0; /* 文字の内側余白リセット*/
}
/* ボックス 中 */
.iconbox .iconbox-wrap{
  display:-webkit-box; /* 配置 */
  	display:-ms-flexbox; /* 配置 */
  display:flex; /* 配置 */
  padding:1.3em 2em; /* 余白 */
}
/* コンテンツ */
.iconbox .iconbox-wrap .box-content{
   width: 97%;/*横幅 */
   margin: 0 3% 0 0 !important;/* 余白 */
   line-height:1.8;/* 行間 */
  -ms-flex-item-align: center;/* 中央寄せ */
   align-self: center;/* 中央寄せ */
}
/* コンテンツ段落 */
.iconbox .iconbox-wrap .box-content p{
  margin-bottom:1em;/*余白 */
}
/* アイコン&吹き出し */
.iconballoon{
  -ms-flex-item-align: end; /* 下部に配置 */
  align-self: flex-end; /* 下部に配置 */
}
/* アイコン */
.iconballoon .icon{
  text-align:center;/* 位置を中央へ */
}
/* アイコン画像 */
.iconballoon .icon img{
  width: 120px; /* 横幅 */
  margin:0; /* 余白 */
}
/* アイコン画像 (amp)*/
.iconballoon amp-img{
  max-width: 120px !important; /* 横幅 */
  margin:0; /* 余白 */
}
/* 吹き出し文字 */
.iconballoon .balloon p{
  line-height:1.4; /* 行間 */
}
/* 吹き出し */
.iconballoon .balloon{
  position:relative; /* 配置 */
  width:140px; /* 横幅 */
  background:#fff; /* 背景色 */
  padding:10px; /* 余白 */
  text-align:center; /* 中央寄せ */
  border:2px solid #999;/* 線(太さ 種類　色) */
  color:#555555;/* 文字色 */
  font-size:14px;/* 文字サイズ */
  font-weight:bold;/* 文字太さ */
  border-radius:10px;/* 角丸 */
  margin-bottom:10px;/* 余白 */
  line-height:1.5; /* 行間 */
}
/* 吹き出し(三角) */
.iconballoon .balloon:after,.balloon:before{
  border: solid transparent;
  content:'';
  height:0;
  width:0;
  position:absolute;
  top:100%;
  left:50%;
}
.iconballoon .balloon:after{
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    margin-left: -10px;
    border-top-color:#FFFFFF;
}
.iconballoon .balloon:before{
   border-color:"rgba(153, 153, 153, 0)";
    border-top-width:12px;
    border-bottom-width:12px;
    border-left-width:12px;
    border-right-width:12px;
    margin-left: -12px;
    margin-top: 1px;
    border-top-color:#999999;
}
/*スマホ*/
@media screen and (max-width: 480px){
/* ボックスタイトル */
.iconbox .box-title {
  font-size: 14px; /* 文字サイズ */
}
/* ボックス 中 */
.iconbox .iconbox-wrap {
    padding: 1em 1em 1em 1.5em;/* 余白 */
}
/* コンテンツ */
.iconbox .iconbox-wrap .box-content{
  font-size:12px;/*文字サイズ */
}
/* アイコン画像 */
.iconballoon .icon img{
  width:80px;/* 横幅 */
  margin-top:5px;/* 余白 */
}
/* アイコン画像(amp) */
.iconballoon amp-img{
  max-width:80px !important;/* 横幅 */
  margin-top:5px;/* 余白 */
}
/* 吹き出し */
.iconballoon .balloon{
  width:80px;/* 横幅 */
  font-size:10px;/* 文字サイズ */
  padding: 1em 0;/* 余白 */
  border: 1px solid #999;/* 線(太さ 種類 色) */
}
/* 吹き出し(三角) */
.iconballoon .balloon:after {
    border-top-width: 12px;
    border-bottom-width: 10px;
    border-left-width: 11px;
    border-right-width: 11px;
    margin-left: -11px;
    border-top-color: #FFFFFF;
}
}
/************************************
** 箇条書き(点)
************************************/
/* 箇条書き */
.iconbox .list {
  list-style: none;/* 行頭記号削除  */
  padding: 0 !important;/* 余白リセット */
  margin: 0 !important;/* 余白リセット */
  border:none;/* 線リセット */
}
/* 箇条書き 行 */
.iconbox .list li { 
  position: relative;/* 行頭記号の配置  */
  margin: 0 0 0.5em 0 !important;/* 余白  */
  padding: 0 0 0.5em 1.4em !important;/* 余白 */
  line-height:1.8;/* 行間 */
}
/* 箇条書き 行頭記号 */
.iconbox .list li:before {
  background-color: #ffa952; /* 記号色 */
  position: absolute; /* 行頭記号の配置 */
  content: ''; /* 空文字 */
  top:13px; /* 上からの距離 */
  left: 0; /* 左からの距離 */
  width: 7px; /* 横幅 */
  height: 7px; /* 縦幅 */
  border-radius: 4px; /*角丸 */
}
/* 箇条書き 行頭記号リセット */
.iconbox .list-number li:after{
	content:'';
}
/*スマホ*/
@media screen and (max-width: 480px){
  /* 箇条書き 行頭記号*/
   .iconbox .list li:before{
     top:8px;/* 上からの距離 */
   }
}
/************************************
** 箇条書き(番号)
************************************/
/* 箇条書き(番号) */
.iconbox .list-number{
   counter-reset:number; /* 番号リセット */
   list-style: none !important;/* 行頭番号削除) */
   padding:0 !important;/* 余白リセット */
   margin:0 !important;/* 余白リセット */
   border:none !important;/* 線リセット */
}
/* 箇条書き(番号) 行 */
.iconbox .list-number li {
   position: relative;/* 配置 */
   margin:0.5em 0 !important;/* 余白 */
   max-width:500px; /* 横幅 */
   padding: 0 0 0.5em 1.8em !important;/* 余白 */
   line-height:1.8;/* 行間 */
}
/* 箇条書き(番号) 行頭番号 */
.iconbox .list-number li:before {
   counter-increment: number;/* 番号 */
   content: counter(number);/* 番号 */
   background-color: #fdc44f; /* 背景色 */
   color: #fff; /* 番号色 */
   position: absolute;/* 配置 */
   font-weight:bold;/* 文字太さ */
   font-size: 14px;/* 文字大きさ */
   border-radius: 50%;/* 角丸 */
   left: 0;/* 左からの距離 */
   top:4px;/* 上からの距離 */
   width: 22px;/* 横幅 */
   height: 22px;/* 縦幅 */
   line-height: 22px;/* 行間 */
   text-align:center;/* 中央寄せ */
}
/*スマホ*/
@media screen and (max-width: 480px){
  /* 箇条書き(番号) 行 */
  .iconbox .list-number li{
     padding: 0 0 0.5em 2em !important;/* 余白 */
  }
  /* 箇条書き(番号) 行頭番号 */
  .iconbox .list-number li:before {
    font-size:10px;/* 文字大きさ */
    width: 18px;/* 横幅 */
    height: 18px;/* 縦幅 */
    line-height: 18px;/* 行間 */
    top:2px;/* 上からの距離 */
  }
}
	
/************************************
** 今ここ
************************************/
.flow {
	padding: 1em;
	background: #ebfaff; /* 背景色カラーコード */
	margin: 0;
}
.flow ol{
	margin: 1em 0;
	padding-left: 1.2em;
	line-height: 1.8;
}
.flow li {
	opacity: 0.5;
	margin: 0 0 .5em 5em !important;
}
.flow .now {
	opacity: 1;
	font-weight: bold;
	position: relative;
}
.flow .now:before {
    content: "今ココ"; /* 今ココ */
    position: absolute;
    left: -6.5em;
    top: 0.2em;
    padding: 0 7px;
    background: #00bfff; /* 今ココ背景色カラーコード */
    color: #fff;
    font-size: 0.8em;
    border-radius: 5px;
}
.flow img{
	margin:0.5em 0;
	vertical-align:top;
}


/*********************************
* タイムライン
*********************************/
.ptimeline-wrap{
    margin:0 auto 2rem;
}
.ptimeline-wrap .ptimeline{
    padding:0 !important;
    list-style:none !important;
}
.ptimeline-wrap .ptimeline-label {
    padding: 3px 0 0 2px;
    color: #aaa;
    font-size: 12px;
    font-weight: 500;
}
.ptimeline-wrap .ptimeline-title {
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.5;
    color:#00bfff;
}
.ptimeline-wrap .ptimeline-main {
    margin-top: 0.5em;
    padding: 0 0 1.5em;
    font-size: 0.9em;
    line-height: 1.8;
    border-bottom: dashed 1px #ddd;
    color:#555;
}
.ptimeline-wrap .ptimeline-main img{
  display:block;
  margin:1em auto;
}
.ptimeline-wrap .ptimeline-item {
    position: relative;
    padding: 0 0 1em 1.5em !important;
    margin-bottom:0 !important;
    border:none;
}
.ptimeline-wrap .ptimeline .ptimeline-item:before {
    content: "";
    width: 3px;
    background: #eee !important;
    display: block;
    position: absolute;
    top: 25px;
    bottom: -3px;
    left: 5px;
}
.ptimeline-wrap .ptimeline-item:last-child:before{
    content:none;
}
/*********************************
* タイムライン マーカー
*********************************/
.ptimeline-wrap .ptimeline-marker{
    display: block;
    position: absolute;
    content: "";
    top: 6px;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: solid 3px #00bfff;
}
.ptimeline-wrap .ptimeline-item:first-child .ptimeline-marker,.ptimeline-wrap .ptimeline-item:last-child .ptimeline-marker{
    background:#00bfff;
}
/*四角 */
.ptimeline-wrap .square .ptimeline-marker{
    border-radius: 0;
}
/* アイコン*/
.ptimeline-wrap .icon .ptimeline-item .ptimeline-marker{
    content:unset;
    border:none !important;
    background:none !important;
}
.ptimeline-wrap .icon .ptimeline-item .ptimeline-marker:before{
    font-family: "FontAwesome";
    top: -1px;
    left: 0;
    position:absolute;
    font-weight:bold;
    font-size:16px;
    line-height:1;
    color:#00bfff;
}
.ptimeline-wrap .icon .ptimeline-item:first-child .ptimeline-marker,.ptimeline-wrap .icon .ptimeline-item:last-child .ptimeline-marker{
    background:none !important;
}
/* 画像*/
.ptimeline-wrap .tl-img .ptimeline-item .ptimeline-marker{
    content:unset;
    border:none !important;
    background:none !important;
}
.ptimeline-wrap .tl-img .ptimeline-item .ptimeline-marker:before {
    content:"";
    display:inline-block;
    background-image:url(ここに画像URL); /* 画像1番目*/
    background-size:contain;
    background-repeat:no-repeat;
    width:40px;
    height:40px;
    position: relative;
    top: -4px;
    left: -2px;
}
.ptimeline-wrap .tl-img li:nth-of-type(2) > .ptimeline-marker:before{
    background-image:url(ここに画像URL) !important; /* 画像2番目*/
}
.ptimeline-wrap .tl-img li:nth-of-type(3) > .ptimeline-marker:before{
    background-image:url(ここに画像URL) !important; /* 画像3番目*/
}
.ptimeline-wrap .tl-img li:nth-of-type(4) > .ptimeline-marker:before{
    background-image:url(ここに画像URL) !important; /* 画像4番目*/
}
.ptimeline-wrap .tl-img li:nth-of-type(5) > .ptimeline-marker:before{
    background-image:url(ここに画像URL) !important; /* 画像5番目*/
}
.ptimeline-wrap .tl-img .ptimeline-item {
    padding: 0 0 1em 3em !important;
}
.ptimeline-wrap .tl-img .ptimeline-item:before {
    top: 30px;
    left: 15px;
}
/*********************************
* タイムライン カラー
*********************************/
/* ピンク */
.ptimeline-wrap .pink .ptimeline-title{
    color:#f7bcbc !important; /* タイトル色 */
}
.ptimeline-wrap .pink .ptimeline-main{
    color:#555 !important; /* コンテンツ色 */
}
.ptimeline-wrap .pink .ptimeline-marker{
    border: solid 3px #f7bcbc !important; /* マーカー色 */
    color:#f7bcbc; /* アイコン色 */
}
.ptimeline-wrap .pink .ptimeline-item:first-child .ptimeline-marker,.ptimeline-wrap .pink .ptimeline-item:last-child .ptimeline-marker{
    background:#f7bcbc; /* マーカー色(最初と最後)*/
}
.ptimeline-wrap .pink .ptimeline-item .ptimeline-marker:before{
    color:#f7bcbc !important; /* アイコン色 */
}
/*イエロー*/
.ptimeline-wrap .yellow .ptimeline-title{
    color:#fdc44f !important; /* タイトル色 */
}
.ptimeline-wrap .yellow .ptimeline-main{
    color:#555 !important; /* コンテンツ色 */
}
.ptimeline-wrap .yellow .ptimeline-marker{
    border: solid 3px #fdc44f !important; /* マーカー色 */
    color:#fdc44f; /* アイコン色 */
}
.ptimeline-wrap .yellow .ptimeline-item:first-child .ptimeline-marker,.ptimeline-wrap .yellow .ptimeline-item:last-child .ptimeline-marker{
    background:#fdc44f; /* マーカー色(最初と最後)*/
}
.ptimeline-wrap .yellow .ptimeline-item .ptimeline-marker:before{
    color:#fdc44f !important; /* アイコン色 */
}
/*グリーン*/
.ptimeline-wrap .green .ptimeline-title{
    color:#2fcdb4 !important; /* タイトル色 */
}
.ptimeline-wrap .green .ptimeline-main{
    color:#555 !important; /* コンテンツ色 */
}
.ptimeline-wrap .green .ptimeline-marker{
    border: solid 3px #2fcdb4 !important; /* マーカー色 */
    color:#2fcdb4; /* アイコン色 */
}
.ptimeline-wrap .green .ptimeline-item:first-child .ptimeline-marker,.ptimeline-wrap .green .ptimeline-item:last-child .ptimeline-marker{
    background:#2fcdb4; /* マーカー色(最初と最後)*/
}
.ptimeline-wrap .green .ptimeline-item .ptimeline-marker:before{
    color:#2fcdb4 !important; /* アイコン色 */
}


/************************************
** コピーボタン
************************************/
.copy-box{
    padding:2em;
    width: 90%;
    margin:0 auto;
    font-size:0.9em;
}
.copy-box p:first-child{
    margin-top:0;
}
.copy-box p:last-child{
    margin-bottom:0;
    padding-bottom:0;
}
.copy-box ul{
    border:none;
    margin:0;
    padding:0;
}
.copy-box ul li{
    margin-left:20px; /* 左に隙間があく場合は消してください */
}
.btn-copy {
    display: block;
    margin: 1em auto 2em;
    width: 120px;
    padding: 0.3em 1em;
    text-decoration: none;
    background: #888; /* ボタン背景色 */
    color: #fff;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 0px 5px rgba(0,0,0,0.2);
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing:1px;
    line-height: 1.8;
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.btn-copy:hover {
    color:#fff;
}
.btn-copy:before {
    left: -100%;
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    content: "Copied!";
}
.btn-copy .btn-copy-text {
    display: inline-block;
    -webkit-transition: all 0.3s;
    -webkit-backface-visibility: hidden;
    -moz-transition: all 0.3s;
}
.btn-copy-active{
    background:#bbb;/* ボタンクリック時 背景色 */
}
.btn-copy-active:before {
    left: 0;
}
.btn-copy-active .btn-copy-text {
    -webkit-transform: translateX(250%);
    -moz-transform: translateX(250%);
    -ms-transform: translateX(250%);
    transform: translateX(250%);
}


/************************************
** 評価グラフ
************************************/
.pb-rating-graph {
  box-shadow: 0 3px 5px rgba(0, 0, 0, .07);
  max-width: 700px;
  margin: 0 auto 2em !important;
  padding: 2.5em 2em!important;
  color: #333;
  background: #fafafa;
}
.pb-rating-graph ul {
  margin: 0!important;
  padding: 0!important;
  border: none!important;
}
.pb-rating-graph ul li {
  list-style: none!important;
  margin: 0 !important;
  padding: 0 !important;
}
.pb-rating-graph ul li:before {
  content: unset !important;
}
.pb-rating-graph__label {
  background: #71828A;
  color: #fff;
  display: inline-block;
  padding: 6px 15px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
}
.pb-rating-graph__wrap {
  display: flex;
  margin: 20px 0;
}
.pb-rating-graph li:last-child .pb-rating-graph__wrap {
  margin: 20px 0 0;
}
.pb-rating-graph__axis {
  width: 70%;
  margin-top: 10px;
  position: relative;
  display: flex;
  justify-content: space-between;
}
.pb-rating-graph__axis:before {
  content: "";
  display: inline-block;
  height: 5px;
  background: #E3E6E7;
  width: 100%;
  position: absolute;
}
.pb-rating-graph__basis {
  width: 15%;
  color: #71828A;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
}
.pb-rating-graph__basis-inner {
  display: inline-block;
  text-align: left;
}
.pb-rating-graph__wrap .pb-rating-graph__basis:first-of-type {
  text-align: right;
  padding-right: 15px;
}
.pb-rating-graph__wrap .pb-rating-graph__basis:last-of-type {
  text-align: left;
  padding-left: 15px;
}
.pb-rating-graph__scale {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  width: 20px;
  margin-top: 0 !important;
}
.pb-rating-graph__scale:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-top: -7px;
  margin-bottom: 10px;
  background: #E3E6E7;
}
.pb-rating-graph__axis:after, .pb-rating-graph__scale:after {
  content: unset !important;
}
.pb-rating-graph .pb-rating-graph__scale .pb-rating-graph__item {
  width: 42px;
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: #777;
  text-align: center;
  padding-top: 5px;
  margin-top: -10px !important;
}
@media screen and (max-width:600px) {
  .pb-rating-graph {
    padding: 2em 1em !important;
  }
  .pb-rating-graph__axis {
    width: 60%;
  }
  .pb-rating-graph__basis {
    width: 20%;
    font-size: 13px;
    letter-spacing: 0px;
    line-height: 1.8;
  }
  .pb-rating-graph__wrap .pb-rating-graph__basis:first-of-type {
    padding-right: 7px;
  }
  .pb-rating-graph__wrap .pb-rating-graph__basis:last-of-type {
    padding-left: 7px;
  }
  .pb-rating-graph__scale {
    width: 16px;
  }
  .pb-rating-graph__scale:before {
    width: 16px;
    height: 16px;
  }
  .pb-rating-graph .pb-rating-graph__scale .pb-rating-graph__item {
    font-size: 12px;
  }
  .pb-rating-graph__scale[data-check='true']:before {
    font-size: 20px;
  }
}
.pb-rating-graph__scale[data-check='true']:before {
  background:#ee8f81;

/************************************
** サイドバー追尾目次
************************************/
.sidebar-scroll{
  top:15px !important;
}
.sidebar h3{
  font-size:0.9em;
  padding: 7px 12px;
}
.sidebar .widget_toc{
   box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.sidebar .toc-widget-box{
  margin-top: -0.9em;
}
.sidebar .toc{
  padding: 0;
  width:100%;
}
.sidebar .toc-content {
  overflow-y: scroll;
  max-height: 390px;
  background: #fff;
  padding: 0.5em 1.5em;
}
.sidebar .toc li{
  line-height:1.6;
  margin-bottom: 1em;
  font-size:0.85rem;
  color:#3cb8f1;
}
.sidebar .toc-content > ol  > li,.sidebar .toc-content > ul  > li{
  font-weight:600;
  padding-left: 0.5em;
}
.sidebar .toc-content a{
  letter-spacing:0.5px;
}
.sidebar .toc .toc-list ul, .sidebar .toc .toc-list ol {
  margin: 1em 0;
  list-style-type:none;
  font-weight:500;
}
@media screen and (max-width: 768px){
  .sidebar-menu-button .widget_toc{
    display:none;
  }
}

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

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

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