/*次のページの数字を丸く*/
.page-numbers {
  color: #c0a9bd;  border: 1px solid #c0a9bd;  border-radius: 50%;}.pagination .current {  background-color: #c0a9bd;  color: #fff;}.page-numbers.dots {  opacity: 1;  background: none;}.pagination a:hover {  background-color: #becfd5;  color: #fff;}
/*次のページBOXを丸く*/
.pagination-next-link {
  background-color: #c0a9bd;  color: #fff;  border: none;  border-radius: 30px;}.pagination-next-link:hover {  background-color: #becfd5;  transition: all 0.5s ease;  color: #fff;}
/*見出し*/
.article h2{
	border:4px solid #c0a9bd;/*枠線の太さと色*/
	font-size:17px;
	color:#444444;/*文字色*/
	background:transparent;/*見出し背景色*/
	position:relative;
	margin:10px -10px;
	padding:15px 10px 15px 20px;
}
.article h2::before{
	content:"";
	position:absolute;
	left:7%;
	top:100%;
	border:15px solid transparent;/*吹出し部分の大きさ*/
	border-top:15px solid #c0a9bd;/*吹出し部分の大きさと色*/
	 	margin-left: -15px;
}
.article h2::after{
	content:"";
	position:absolute;
	left:7%;
	top:90.5%;/*数値変更で吹出し部分の太さ変更*/
	border:15px solid transparent;
	border-top:15px solid #fff;/*太さはbeforeと同一にしてください*/
	 	margin-left: -15px;
}
/*カエレバボタンを丸く*/
.shoplinkamazon a,.shoplinkrakuten a,.shoplinkrakukobo a,.shoplinkyahoo a,.shoplinkseven a,.shoplinkkindle a,.shoplinkebj a {
	border-radius: 22px; }
/* もしもアフィリエイトの場合不要な画像を削除 */ 
.kaerebalink-image img[src^="//i.moshimo.com/af/i/impression"],
.booklink-image img[src^="//i.moshimo.com/af/i/impression"],

.shoplinkamazon img,
.shoplinkrakuten img,
.shoplinkseven img,
.shoplinkyahoo img,
.shoplinkkindle img,
.shoplinkrakukobo img,
.shoplinkebj img { display:none; }
/*丸リスト*/
.list-2{
   list-style: none;
   padding:0;
   margin:0;
}
.list-2 li { 
   border-bottom:1px dashed;
   border-color:#cdcdcd; /* 線の色 */
   position: relative;
   margin:0.5em 0 !important;
   max-width:500px; /* 横幅 */
   padding: 0 0 0.5em 1.4em;
}
.list-2 li:last-child{ 
   border:none;
}
.list-2 li:before {
   background-color:  #000000; /* 点の色 */
   position: absolute;
   content: '';
   top:0.9em;
   left: 0.5em;
   width: 3px;
   height: 3px;
   border-radius: 4px;
}
/*メリット*/
.memobox{
  margin: 1em 0;
  background-color: #fffafa;
  padding: 1em;
}

.memobox-title{
  font-size: 16px;
  font-weight: bold;
  color: #ffafaf;
}
.memobox-title:before{
  font-family: FontAwesome;
  content: "";
  font-size: 17px;
}

.memobox p{
  margin: 0;
  padding: 0;
}
/*デメリット*/
.memobox-2{
  margin: 1em 0;
  background-color: #f8f8ff;
  padding: 1em;
}

.memobox-title-2{
  font-size: 16px;
  font-weight: bold;
  color: #000;
}
.memobox-title-2:before{
  font-family: FontAwesome;
  content: "";
  font-size: 17px;
}

.memobox p{
  margin: 0;
  padding: 0;
}
/*シンプルボックス*/
.box1 {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: ;
    border: solid 1px #e2e2e2;
}
.box1 p {
    margin: 0; 
    padding: 0;
}
/*ボタン*/
a.btn--orange {
  color: #fff;
  background-color: #becfd5;
  border-bottom: 5px solid #9fb7c0;
}
a.btn--orange:hover {
  margin-top: 3px;
  color: #fff;
  background: #c0a9bd;
  border-bottom: 2px solid #cca7c5;
}
a.btn--shadow {
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
}
/*紫タイトル付きBOX*/
.mybox{
	background-color: #fff;	/* 背景色 */
	border: 2px solid #c0a9bd;	/* 線の太さ・種類・色 */
	border-radius: 5px;
	margin: 40px 5px 5px 20px;	/* 外側の余白 上・右・左・下 */
	padding: 25px 20px 10px 20px;	/* 内側の余白 上・右・左・下 */
	position: relative;
}
.mybox:before{
	background-color: #c0a9bd;	/* 吹き出し背景色 */
	border-radius: 5px;
	color: #fff;	/* 吹き出し文字色 */
	content: 'こんな方におすすめ';
	padding: 5px 20px;
	position: absolute;
	left: -10px;
	top: -20px;
}
/*ストライプ背景*/
.sample_box2_1 {
    padding: 1em 1.5em;
    margin: 2em 0;
    background: -webkit-repeating-linear-gradient(-45deg, #f4f2f3, #f4f2f3 5px, #ffffff 5px, #ffffff 10px);/*ストライプ*/
    background: repeating-linear-gradient(-45deg, #f4f2f3, #f4f2f3 5px, #ffffff 5px, #ffffff 10px);/*ストライプ*/
    color: #4f274f;/*文字色*/
}
.sample_box2_1 p {
    margin: 0; 
    padding: 0;
}
/*チェックリスト*/
.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: "\f00c"; /*アイコン*/
   color:  #a5a5a5; /* 色 */
   position: absolute;
   left:0;
}
/*番号リスト*/
.list-5{
   counter-reset:number; 
   list-style-type: none; 
   padding:0;
   margin:0;
}
.list-5 li { 
   position: relative;
   margin:0.5em 0 !important;
   padding-left: 1.8em;
}
.list-5 li:before {
   counter-increment: number;
   content: counter(number);
   background-color: #becfd5; /* 文字背景色 */
   color: #fff; /* 文字色 */
   position: absolute;
   font-weight:bold;
   font-size: 14px;
   border-radius: 50%;
   left: 0;
   top:0.5em;
   width: 22px;
   height: 22px;
   line-height: 22px;
   text-align: center;
}
/*光るボタン*/
.my-btn {
  text-align: center;
}
.my-btn a {
  display: inline-block;
  width: 50%;
  margin: 20px auto;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  color: #fff!important;
  text-decoration: none;
  font-size: 15px;
  line-height: 27px;
  font-weight: bold;
  background: #becfd5;
  border-bottom: 4px solid #9fb7c0;
  position: relative;
  overflow: hidden;
}
/* ボタンを凹ませる */
.my-btn a:active {
  transform: translateY(4px); /*下に動く*/
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2); /*影を小さく*/
  border-bottom: none;
}
/* ボタンをキラッとさせる */
.my-btn a:before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: -100%;
  background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 100) 81%, rgba(255, 255, 255, 0) 100%);
  animation: shine 3s infinite; /* inifiniteによりずっと続ける */
}
@keyframes shine {
  33% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}
/* テキストの後ろにarrow */
.my-btn a:after {
  content: '»';
  display: inline-block;
  color: #fff;
  padding-left: 10px;
  font-size: 20px;
}
/* 767px（iPad）以下 */
@media (max-width: 767px) {
  .my-btn a {
    width: 90%;
  }
}
/* 目次 */
.toc{
    font-size: 1em;
    padding: 1em 2em 2em;
    background-color: #f4f2f3; /*←背景色*/
    box-shadow: 5px 5px 8px rgba(0,0,0,0.1);
    border: none;
}
 
.toc-title {
    font-size: 1.2em;
    font-weight: 500;
    color: #c6d4c6;  /*←タイトルの文字色*/
    margin: 1em;
}
 
.toc-title:before {
    font-family: FontAwesome;
    content : "\f002"; /*←アイコン*/
    font-size: 1.2em;
    border-radius: 50%;
    color: #FFF; /*←アイコンの色*/
    background-color: #c6d4c6; /*←アイコンの背景色*/
    padding: 0.5em;
    margin-right: 0.5em;
}
 
.toc-content ol {
    position: relative;
}
 
.toc-content ol li {
    padding: 1em 0 0 1em;
    border-bottom: dotted 1px #a5a5a5  ;
    list-style: none;
}
 
.toc a {
    color: #928484 ; /*←見出しの文字色*/
}
 
.toc-content ol li:before {
    font-family: FontAwesome;
    content: "\f105"; /*←見出しアイコン*/
    color: #c6d4c6; /*←見出しアイコンの色*/
    position: absolute;
    left : 1em;
}
 
.toc-content ol li:last-child {
    border-bottom: none;
}
/*****/
#appeal {

height: calc(100vw * calc(720 / 1280));

}
/*この記事で分かる事*/
.box19 {
  margin: 1em auto;
  background: #ffffff; /* 背景色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22); /* 影の色 */
  width: 95%;
}

.box19-title {
  font-size: 1.1em;
  background: #c0a9bd; /* タイトル背景色 */
  padding: 2px;
  text-align: center;
  color: #FFF; /* タイトル文字色 */
  font-weight: bold;
  letter-spacing: 0.05em;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.22); /* タイトル影の色 */
}

.box19 p {
  margin: 0;
  padding: 1em;
}

/* box19用リスト表示 */
ol.list5 {
  counter-reset:list;
  list-style-type:none;
  padding: 5px 15px 2px 15px;
}
ol.list5 li {
  position:relative;
  padding: 5px 0 6px 27px;
  line-height: 25px;
  border-bottom: dashed 1px #c0a9bd;
}
ol.list5 li:before {
  counter-increment: list;
  font-family: "FontAwesome";
  content: "\f00c";
  font-weight: 900;
  font-size: 1.2em;
  color: #a5a5a5; /* アイコンの色 */
  display: block;
  position: absolute;
  left: 1px;
  top: 6px;
}
/*--------------------
  この記事を書いた人
---------------------*/
/*ボックス全体*/
.profile-box {
    margin:3em 1em 2em;
    padding:10px 10px 15px;
    position:relative;
    border:2px solid #c6d4c6;   /*枠線の太さ 線種 色*/
    font-size:14px;
}

.profile-box:before , .profile-box:after {
    clear:both;
    content:"";
    display:block;
}

/*「この記事を書いた人」のタイトル*/
.profile-box .profile-box_title {
    position:absolute;
    top:-30px;
    left:-2px;
    padding:0 10px;
    background:#c6d4c6;    /*背景色*/
    color:#fff;            /*文字の色*/
    font-weight:bold;
    border:2px solid #c6d4c6;    /*枠線の太さ 線種 色*/
    display:inline-block;
}

.profile-box_title:before {
    font-family:"Font Awesome 5 Free";
    content:"";
    font-weight:900;
    margin-right:7px;
}

/*アイコン画像*/
.profile-box img {
    display:block;
    width:80px;
    height:80px;
    float:left;
    margin:0 20px 7px 10px;    /*画像周りの余白*/
}

/*名前(ニックネーム)*/
.profile-box .profile-box_name {
   margin:0 0 7px;
   padding:0;
   font-size:15px;       /*文字サイズ*/
   font-weight:bolder;
}

/*プロフィール*/
.profile-box p {
    margin:0;
    padding:0;
    font-size:11px;
    line-height:21px;    /*行間*/
}
/* リストで使える囲み枠④ */
.box18 {
  margin: 1em 0 1.5em 0;
  background: #fff7db; /* 背景色 */
  padding: 1em 1em 0.1em 1em;
}

.box18-title {
  color: #f79476; /* タイトル文字色 */
  font-size: 18px;
  font-weight: bold;
}

.box18-title:before {
  font-family: "Font Awesome 5 Free";
  content: "\f005";
  font-size: 18px;
  margin: 0 3px 0 0;
}

.box18 p {
  margin: 0;
  padding: 0;
}

/* box18用リスト表示 */
ol.list4 {
  counter-reset:list;
  list-style-type:none;
  padding: 5px 0px 10px 0px;
}
ol.list4 li {
  position:relative;
  padding: 5px 0 0 10px;
  line-height: 25px;
}
ol.list4 li:before {
  counter-increment: list;
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  font-weight: 900;
  font-size: 1.2em;
  color: #f99889; /* アイコンの色 */
  display: block;
  position: absolute;
  left: -20px;
  top: 6px;
}
/************************/
/*吹き出し（デフォルト）*/
/************************/
.sbs-stn .speech-balloon{
background-color: #f6f3f5; /*背景色*/
color:#; /*文字色*/
border: dotted 2px #f6f3f5; /*枠線形状・色*/
}
/*左アイコン用　▲部分*/
.sbs-stn .speech-balloon::before,
.sbs-stn .speech-balloon::after {
border-right-color: #f6f3f5;
border-left-color: #839b5c;
}
/* 右アイコン用　▲部分*/
.sbs-stn.sbp-r .speech-balloon::before,
.sbs-stn.sbp-r .speech-balloon::after {
border-right-color: #839b5c;
border-left-color: #839b5c;
}