/* 本文中の画像 */
article img{
  border: none;             /* 枠線を表示しない */
  max-width: 100%;          /* 親要素の幅を超えないようにする（レスポンシブ対応） */
  height: auto;             /* アスペクト比を保ったまま高さを自動調整 */
}
.aligncenter{               /* 画像を中央に配置 */
  display: block;           /* インライン画像をブロック要素として扱う（中央配置のため） */
  margin-top: 1px;          /* 上の余白を1pxに設定 */
  margin-bottom: 30px;      /* 下の余白を30pxに設定 */
  margin-left: auto;        /* 左右のマージンをautoで中央寄せ */
  margin-right: auto;
}
.alignright{                /* 画像を右寄せに配置 */
  float: right;             /* 右に回り込ませる（テキストは左側に流れる） */
  margin-bottom: 30px;      /* 下の余白を30pxに設定 */
  margin-left: 30px;        /* 左の余白を30pxに設定（テキストとの間隔） */
}
.alignleft{                 /* 画像を左寄せに配置 */
  float: left;              /* 左に回り込ませる（テキストは右側に流れる） */
  margin-bottom: 30px;      /* 下の余白を30pxに設定 */
  margin-right: 30px;       /* 右の余白を30pxに設定（テキストとの間隔） */
}
.alignnone{                 /* 配置なしの画像に適用（特に意味のある効果はなし） */
  margin-top: auto;         /* 自動設定（多くの場合、効果は出ない） */
}
.wp-caption{                /* キャプション付き画像の外枠 */
  max-width: 100%;          /* 記事幅を超えないようにする */
}
.wp-caption-text{           /* キャプションのテキスト部分に適用 */
  margin: 0;                /* デフォルトの余白をリセット */
  color: #666666;           /* グレーの文字色 */
  font-size: 14px;          /* フォントサイズをやや小さく設定 */
  text-align: center;       /* キャプションを中央揃えにする */
}

/* 小見出し */
article h2{                       /* リボン見出し */
  font-size: 20px;
  margin-top: 10px;               /* 外側上の余白 */
  margin-bottom: 20px;            /* 外側下の余白 */
  padding: 6px;
  position: relative;
  background: #a6d3c8;
  clear: both;
}
article h2:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(149, 158, 155);
  clear: both;
}
article h3 {
  font-size: 16px;                /* 文字サイズ */
  border-left: solid 6px #e80;      /* 文字周りに線追加 */
  border-bottom: solid 1px #e80;
  padding: .25em 0 .5ex .75em;                   /* 範囲内側の余白 */
  background-color: #ffffff;      /* 背景色 */
  clear: both;
}
article h4{                        /* 中見出し */
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 16px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  border-left: solid 10px #a5e2fe;
  clear: both;
}
article h5{                     /* 左下見出し */
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 16px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 10px;
  border-left: solid 5px #000099;
  clear: both;
}

/* 補足情報 */
.point{
  position: relative;
  margin: 20px 0 10px;
  padding: 20px 15px 15px 15px;
  border-radius: 10px;
  background-color: #cfedb7;
  font-size: 14px;
  clear: both;
}
.point:before{
  position: absolute;
  left: 15px;
  top: -15px;
  content: '\f0eb';
  z-index: 2;
  width: 32px;
  height: 32px;
  padding-top: 3px;
  border-radius: 16px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #5ab80e;
  color: #fffff;
  font-family: 'FontAwesome';
  font-size: 26px;
  line-height: 1;
  text-align: center;
}
.point:after{
  position: absolute;
  left: 32px;
  top: -8px;
  z-index: 1;
  content: 'POINT';
  padding: 3px 10px 3px 20px;
  border-radius: 5px;
  background-color: #5ab80e;
  color: #fffff;
  font-family: Verdana, Helvetica, sans-serif;
  font-weight: bold;
  line-height: 1;
}

/* 注意書き */
.attention{
  position: relative;
  margin: 20px 0 10px;           /* 枠外の余白 */
  padding: 20px 15px 15px 15px;  /* 枠内の余白 */
  border-radius: 10px;           /* 枠角丸く */
  border: dotted 2px #f0e448;    /* 枠線の種類、太さ、色 */
  background-color: #feefbc;     /* 枠内色 */
  font-size: 14px;
  clear: both;
}
.attention:before{
  position: absolute;
  left: 20px;
  top: -15px;
  content: '\f071';
  background-color: #ffffff;     /* マークの背景色 */
  color: #f4d500;                /* マークの色 */
  font-family: 'FontAwesome';
  font-size: 26px;
  line-height: 1;
}

/* メリット */
.merit{
  position: relative;
  margin: 20px 0 10px;            /* 枠外の余白 */
  padding: 20px 15px 15px 15px;   /* 枠内の余白 */
  border-radius: 10px;            /* 枠角を丸く */
  background-color: #fadbda;      /* 枠内色 */
  font-size: 14px;
  clear: both;
}
.merit:after{
  position: absolute;
  left: 32px;
  top: -8px;
  z-index: 1;
  content: 'メリット';
  padding: 5px 10px;
  border-radius: 5px;
  background-color: #fa6964; /* 文字枠背景色 */
  color: #ffffff;             /* 文字色 */
  font-family: Verdana, Helvetica, sans-serif;
  font-weight: bold;
  line-height: 1;
}

/* デメリット */
.demerit{
  position: relative;
  margin: 20px 0 10px;
  padding: 20px 15px 15px 15px;
  border-radius: 10px;
  background-color: #d3def1;      /* 枠内色 */
  font-size: 14px;
  clear: both;
}
.demerit:after{
  position: absolute;
  left: 32px;
  top: -8px;
  z-index: 1;
  content: 'デメリット';
  padding: 5px 10px;
  border-radius: 5px;
  background-color: #6196f2;   /* 文字枠背景色 */
  color: #ffffff;               /* 文字色 */
  font-family: Verdana, Helvetica, sans-serif;
  font-weight: bold;
  line-height: 1;
}

/* ハイライト */
.highlight{
  font-weight: bold;              /* 太字 */
  background: linear-gradient(transparent 50%, #ffaba8 30%); /* アンダーライン */ 
}

/* 色枠 */
.irowaku{
  background-color: #fffacd;
  padding: 10px;
}

/* 色枠２ */
.irowaku2{
  background-color: #faf0e6;
  padding: 10px;
}

/* ハイライトボックス */
.highlight-box {
 background-color: #fffacd;  /* 背景色 */
 padding: 16px; /* 内側の余白 */
 border-radius: 6px; /* 角を丸くする */
}

/* 目次 */
.mokuzi{
  margin: 30px 50px; /* 枠外余白 */
  padding: 10px;
  color: #333;
  border: #ccc solid 1px; /* 枠線の色と太さ */
  border-radius: 3px; /* 枠線の角を丸くする */
}
.mokuzi .mokumozi{
 margin: 0px;
 padding: 5px;
 font-weight : 700; /* 文字の太さ */
 color: #FFFFFF; /* 文字の色 */
 text-align: center; /* 目次を中央へ */
 background : #4169e1; /* 目次の背景色 */
 font-size : 18px; /* 目次サイズ */
}
.mokuzi ul{
 padding: 10px;
}
.mokuzi li{
 list-style: none; /* 先頭の点を消す */
 margin-bottom: 5px; /* 文字下の余白 */
}
.mokuzi a{
 text-decoration: none; /* リンクの下線を非表示にする */
 color:#0066cc; /* リンクの色 */
 font-weight:bold; /* リンクを太字にする */
}
.mokuzi a:hover{
  color:#00ccff; /* カーソルが乗った時の色 */
  text-decoration: underline; /* アンダーラインあり */
}

/* シリーズもの前後記事リンク */
.siribn{
    text-align: center;
    padding: 12px 19px 4px 19px;
    margin: 2em 0;
    color: #2c2c2f;
    background: #cde4ff;
    border-top: solid 5px #5989cf;
    border-bottom: solid 5px #5989cf;
}
.siribn i{ /* 左右アイコンデザイン */
 margin: 0 3px;
 color: #2c2c2f;
}

/* 合わせて読みたい */
.kakomi-box11 {
 position: relative;
 margin: 2em auto;
 padding: 1.2em;
 color: #555555; /* 文章色 */
 background-color: #fff; /* 背景色 */
 border: 2px solid #008000; /* 枠線の太さ・色 */
 width: 90%;
}
.title-box11 {
 position: absolute;
 padding: 0 .5em;
 left: 20px;
 top: -15px;
 font-weight: bold;
 background-color: #fff; /* タイトル背景色 */
 color: #008000; /* タイトル文字色 */
}
.title-box11 i{
  margin: 0 3px;
  font-size: 18px;
}

/* デザインリンクボタン */
a.button{
  display: inline-block;
  max-width: 300px;
  text-align: center;
  font-size: 16px;
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
  padding: 12px 12px;
  border-radius: 4px;
  background: #ffa500;
  transition: .5s;
  background-size: 200%;
}
a.button:hover {
  background: #ff8c00;
}

/* アマゾンボタン */
.am-bt a{
 margin: 3px;
 display: inline-block;
 font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
 border-radius: 8px;      /* 角丸 */
 font-size: 13px;         /* 文字サイズ */
 color: #ffffff;          /* 文字色 */
 text-align: center;      /* 文字位置 */
 background: #FF9901;     /* 背景色 */
 padding: 6px 10px;         /* 余白 */
 text-decoration: none;   /* 下線削除 */
 font-weight: bold;       /* 文字太さ */
 border:2px solid #FF9901;   /* 枠線色＆太さ */
 transition: 0.8s;           /* 変化速度 */
}
.am-bt a:hover {
 color: #FF9901;           /* 文字色 */
 background: #fff;         /* 背景色 */
}

/* 楽天ボタン */
.rk-bt a{
 margin: 3px;
 display: inline-block;
 font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
 border-radius: 8px;      /* 角丸 */
 font-size: 13px;         /* 文字サイズ */
 color: #ffffff;          /* 文字色 */
 text-align: center;      /* 文字位置 */
 background: #bf0000;     /* 背景色 */
 padding: 6px 10px;         /* 余白 */
 text-decoration: none;   /* 下線削除 */
 font-weight: bold;       /* 文字太さ */
 border:2px solid #bf0000;   /* 枠線色＆太さ */
 transition: 0.8s;           /* 変化速度 */
}
.rk-bt a:hover{
 color: #bf0000;           /* 文字色 */
 background: #fff;         /* 背景色 */
}

/* ヤフーショッピングボタン */
.ys-bt a{
 margin: 3px;
 display: inline-block;
 font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
 border-radius: 8px;      /* 角丸 */
 font-size: 13px;         /* 文字サイズ */
 color: #ffffff;          /* 文字色 */
 text-align: center;      /* 文字位置 */
 background: #ff0033;     /* 背景色 */
 padding: 6px 10px;         /* 余白 */
 text-decoration: none;   /* 下線削除 */
 font-weight: bold;       /* 文字太さ */
 border:2px solid #ff0033;   /* 枠線色＆太さ */
 transition: 0.8s;           /* 変化速度 */
}
.ys-bt a:hover{
 color: #ff0033;           /* 文字色 */
 background: #fff;         /* 背景色 */
}

/* サウンドハウスボタン */
.sh-bt a{
 margin: 3px;
 display: inline-block;
 font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
 border-radius: 8px;      /* 角丸 */
 font-size: 13px;         /* 文字サイズ */
 color: #ffffff;          /* 文字色 */
 text-align: center;      /* 文字位置 */
 background: #8942af;     /* 背景色 */
 padding: 6px 10px;         /* 余白 */
 text-decoration: none;   /* 下線削除 */
 font-weight: bold;       /* 文字太さ */
 border:2px solid #8942af;   /* 枠線色＆太さ */
 transition: 0.8s;           /* 変化速度 */
}
.sh-bt a:hover{
 color:#8942af;           /* 文字色 */
 background: #fff;        /* 背景色 */
}

/* ロックオンボタン */
.rkon-bt a{
 margin: 3px;
 display: inline-block;
 font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
 border-radius: 8px;      /* 角丸 */
 font-size: 13px;         /* 文字サイズ */
 color: #ffffff;          /* 文字色 */
 text-align: center;      /* 文字位置 */
 background: #0000FF;     /* 背景色 */
 padding: 6px 10px;         /* 余白 */
 text-decoration: none;   /* 下線削除 */
 font-weight: bold;       /* 文字太さ */
 border:2px solid #0000FF;   /* 枠線色＆太さ */
 transition: 0.8s;           /* 変化速度 */
}
.rkon-bt a:hover{
 color:#0000FF;           /* 文字色 */
 background: #fff;        /* 背景色 */
}

/* レビューボタン */
a.re-bt{
  display: inline-block;
  max-width: 300px;
  text-align: center;
  font-size: 14px;
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
  margin: 1px 8px;
  padding: 1px 4px;
  border-radius: 4px;
  background-image: linear-gradient(-90deg, #FF006E, #FFD500);
  transition: .5s;
  background-size: 200%;
  vertical-align: bottom;
}
a.re-bt:hover {
  background-position: right center;
}

/* ブログカード */
.blog-card {
  border: 2px solid #fb8c00;  /* ブログカード枠 */
  word-wrap: break-word;
  box-sizing: border-box;
  max-width: 100%;          /* ブログカード幅 */
  margin: 1em 0;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.blog-card:hover {
  cursor: pointer;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .2);
  -moz-transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}
.blog-card a {
  text-decoration: none;
  display: block;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.blog-card a:hover {
  color: #333;
  background: rgba(235, 235, 235, 0.8);
  text-decoration: none;
}
.blog-card-thumbnail {
  width: 200px;
  display: table-cell;
  vertical-align: middle;
}
.blog-card-thumbnail img {
  padding: 0;
  max-height: 80px;
  margin: 10px 0 2px 10px;  /* 画像の外余白 */
}
.blog-card-content {
  display: table-cell;
  vertical-align: middle;
  padding: 0.4em;
}
.blog-card-title {
  font-size: 1em;
  font-weight: bold;
  line-height: 1.4;
  color: #333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 15px;
}
.blog-card-excerpt {
  display: none;/*消します*/
}
.blog-card .clear {
  clear: both;
}
.blog-card:before {
  font-family: FontAwesome;
  position: absolute;
  padding: 2px 6px;
  content: "詳細を見る";
  background-color: #fb8c00;
  color: #fff;
  font-size: .8em;
  z-index: 1;
}
@media screen and (max-width: 500px) {
  .blog-card-title {
    font-size: .85em;
  }
  .blog-card-thumbnail {
    width: 160px;
  }
}