@charset "UTF-8";
/*
Theme Name:   THE SONIC Child
Theme URI:    https://the-sonic.jp
Description:  THE SONICカスタマイズ用子テーマ
Author:       SONIC Team
Author URI:   https://the-sonic.jp
Template:     thesonic
Version:      1.0.0
Li
cense:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/*
* ここから下に記述
*/
/*ピックアップコンテンツ*/
.toppage-top figure.wp-block-image.size-large.is-style-img-frame {
    background: #fff;
    padding: 8px 8px 8px 8px;
}
.toppage-bottom figure.wp-block-image.size-large.is-style-img-frame {
    background: #fff;
    padding: 8px 8px 8px 8px;
}
/*ピックアップコンテンツ終わり*/
/*トップページ記事画像余白部分の調整*/
.kiji-img-img {width:94%;
    background: #fff;
	padding:0px 0px 0px 0px;
}
.linkarea{padding:10px}
}
/*トップページ記事画像余白部分の調整終わり*/

/*リンクアンダーライン*/
.entry-content a {
    text-decoration: underline;
}
/*リンクアンダーライン終わり*/
/*文字横ラインclass名barbar*/
.barbar {
    display: flex;
    align-items: center;
}
.barbar:before, .barbar:after {
    content: "";
    flex: 1;
    border-radius: 6px;
    background: currentColor;
    height: 4px;
    opacity: .3;
    min-width: 50px;
}
.barbar:before {
    margin-right: 12px;
}
.barbar:after {
    margin-left: 12px;
}
/*文字横ラインclass名barbar終わり*/
/***********************
 * ボックスメニューのカスタマイズ
SONIC用（https://goodoneas.com/sonic-boxmenu）
 
 *参考サイト　寝ろぐ様 （https://nelog.jp/box-menu）
 　　　　　　  ぽんひろ.com様（https://ponhiro.com/box-nav/）
 
SpecialThanks　ことりさん@SetouchiKotori（https://setouchi-kotori.com）
 ***********************/
 
.box-menus {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 18px 0;
}
.box-menus * {
  line-height: 1.6;
  margin: 0;
}
 
.box-menus .box-menu {
    display: block;
    padding: 0;/*列数を変更する場合は調整が必要*/
    text-decoration: none;
    width: 100%;
    text-align: center;
    min-height: 100px;
    cursor: pointer;
    background: #fff;
    width: calc(100%/6);/*横に表示させる最大列数*/
    color: #777;
    box-shadow: inset 1px 1px 0 0 #eee, 1px 1px 0 0 #eee, 1px 0 0 0 #eee;
    transition: none;
    margin-bottom: 1em;/*メニューボックス下の間隔調整*/
}
 
.box-menus .box-menu:last-child {
  margin-right: auto;
}
.box-menus .box-menu:hover {
    box-shadow: inset 2px 2px 0 0 #f4b3c2, 2px 2px 0 0 #f4b3c2, 2px 0 0 0 #f4b3c2, 0 2px 0 0
#f4b3c2;
  color: #777;
  z-index: 2;
}
 
.box-menus .box-menu-icon {
  color: #f4b3c2;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box-menus .box-menu-icon * {
  margin: 10px 0;
  max-width: 60px;
  max-height: 60px;
  height: auto;
  display: inline-block;
}
.box-menus .box-menu-icon img {
  font-size: 16px;
  border: none;
  box-shadow: none;
  filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.2));
}
 
.box-menus .box-menu-label {
  font-size: 14px;
  font-weight: 600;
}
 
.box-menus .box-menu-description {
  font-size: 10px;
  opacity: 0.8;
}
 
/* ウィジェットに入っている場合（テーマによってCSSセレクタの変更が必要かも） */
.widget .box-menus .box-menu {
  width: calc(100%/2);/*ウィジェット設置時の列数*/
}
 
/* スマホ用 */
@media screen and (max-width: 599px){
  .box-menus .box-menu{
    width: calc(100%/3);/*スマホ表示の列数*/
  }
}
 
/*ここからSONIC用追記CSS　*/
 
/*デバイス幅が619px以下の場合*/
@media
 
 (max-width: 619px) {
.box-menus .box-menu {
width: calc(100%/3);/*◆３列×２行*/
}}
 
/*デバイス幅が325px以下の場合*/
@media
 
 (max-width: 325px) {
.box-menus .box-menu {
width: calc(100%/2);/*◆２列×３行*/
}}

/*ボックスメニュー（サイドバー調整用）*/
#custom_html-25 .box-menus .box-menu {/*custom_html-33の部分の数字は変わります*/
width: calc(100%/2);/*◆２列×３行*/
}


/*--------------------------------------
ここから下にCSSを追加してください
poripu仕様のCSS
--------------------------------------*/

/*--------------------------------------
  見出しh2
--------------------------------------*/
.entry-content h2{

}
.fa5 .entry-content h2:before {/*fontawesome5を使う場合*/
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
/*--------------------------------------
  見出しh3
--------------------------------------*/
.entry-content h3 {

}
.fa5 .entry-content h3:before {/*fontawesome5を使う場合*/
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
/*--------------------------------------
  見出しh4
--------------------------------------*/
.entry-content h4 {

}
.fa5 .entry-content h4:before {/*fontawesome5を使う場合*/
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}


/*-------------------
 吹き出し変更
-------------*/
/*--------------------------------------
  PORIPUtears　下に出る吹き出し
--------------------------------------*/
.saysprp {/*画像とふきだしを含めた全体*/
    position: relative;/*基準にする*/
}
.saysprp .faceicon span {/*名前部分*/
    position: absolute;/*自由に動けるように*/
    top: 80px;/*上から80px*/
    left: 100px;/*左から100px*/
    color: #999999;/*文字色*/
    font-size: 12px;/*文字のサイズ*/
    line-height: 20px;/*文字の高さ*/
    font-weight: 500;/*文字の太さ*/
}
.saysprp{width:100%;margin:1.5em 0;overflow:hidden;}
.saysprp .faceicon{padding-right:0;}
.saysprp .faceicon img{width:100px;border-radius:50%;border:solid 3px #eaedf2;}
.saysprp .fuki{background-color:#fff;border:2px solid #BDBDBD;border-radius:12px;position:relative;margin:.5em .5em 1.5em .5em;padding:1em;font-size:.95em;width:93%;}
.saysprp .fuki p{margin:0;}
.saysprp .fuki:before{border:10px solid transparent;border-bottom-color:#fff;border-top-width:0;top:-8px;content:"";display:block;left:30px;position:absolute;width:0;z-index:1;}
.saysprp .fuki:after{border:10px solid transparent;border-bottom-color:#BDBDBD;border-top-width:0;top:-10.5px;content:"";display:block;left:30px;position:absolute;width:0;}
.saysprp .faceicon .block-editor-plain-text{text-align:center;font-size:11px;font-weight:bold;margin-top:5px;line-height:1.3;}
@media only screen and (min-width:481px){.saysprp .faceicon{width:110px;}}
@media only screen and (max-width:480px){.saysprp .faceicon{width:80px;}
.saysprp .fuki{margin:1em 0 1.5em 0;}}
@media only screen and (max-width:699px){.saysprp .fuki{width:89%;}}
/*---Rinkerのデザイン変更---*/
div.yyi-rinker-contents {
    border: solid 2px #42424230;
    border-radius: 5px;
    box-shadow: none;
}
div.yyi-rinker-contents div.yyi-rinker-box {
    padding: .25em 0;
}
div.yyi-rinker-contents div.yyi-rinker-image {
    margin: 2%;
    width: 30%;
}
div.yyi-rinker-info {
    padding: 0 2%;
    width: 100%;
    margin: auto;
}
.yyi-rinker-title {
    font-size: 1em;
    margin-left: .5em;
}
div.yyi-rinker-contents div.yyi-rinker-title p {
    margin: 0;
}
div.yyi-rinker-contents div.yyi-rinker-detail {
    font-size: .8em;
    color: #42424280;
    padding-left: 0;
    margin-top: 0;
    margin-left: .5em;
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box {
    margin: .5em 0;
    margin-left: .5em;
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {
    letter-spacing: 0.1em;
    font-size: 1.2em;
    margin-right: .5em;
}
div.yyi-rinker-contents ul.yyi-rinker-links{
    display: inline-block;
}
div.yyi-rinker-contents ul.yyi-rinker-links li{
    width: 46%;
    padding: 0 .7em;
    margin: .5em .5em .4em .5em;
    font-size: .85em;
    display: inline-block;
    height: 40px;
    border-radius: 3px;
    box-shadow: 0 8px 10px -5px rgba(0,0,0,.25);
    font-weight: bold;
    vertical-align: middle;
    line-height: 40px;
    transition: .3s ease-in-out;
    text-align: center;
}

div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {
    background: #FFC266;/*Amazonボタンの色*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a {
    color: #3A4D66;/*Amazonボタン文字色*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink{
    background: #ff7c74;/*楽天ボタンの色*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {
    background: #95cad7;/*Yahoo!ショッピングボタンの色*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li a{
    height: 40px;
    line-height: 40px;
    font-size: 0.95em;
    padding-left: 0px;
    padding-right: 0;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a:after{
    padding-left: 5px;
    font-family: "Font Awesome 5 Free";
    content: "\f138"!important; 
    right: auto;
}
@media screen and (max-width: 500px){/*スマホ表示用（ブレイクポイント500px）*/
div.yyi-rinker-contents div.yyi-rinker-box {
    padding: 0;
    display: block;
}
div.yyi-rinker-contents div.yyi-rinker-image {
    width: auto;
    max-width:50%;
    margin:2% auto;
}
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
    padding: 0;
    margin: auto;
    width: 87%;
    text-align: center;
}
.yyi-rinker-title {
    font-size: .95em;
　　text-align:left
}	
div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {
    display: block;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
	width: 85%;
	font-size: .9em;
        margin-top:2px;
}
body div.yyi-rinker-contents ul.yyi-rinker-links li a {
    padding: 0;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a:after{
}}
@media screen and (min-width: 501px) and (max-width: 1239px){/*スマホとPCの中間くらい（ブレイクポイント501～1239px）*/
div.yyi-rinker-contents ul.yyi-rinker-links li{
    width:80%;
}}

/************************************
** 横長テーブルぽんひろスクロール表参考
************************************/
.p-sticky-table{
	white-space: nowrap;
	line-height:1.6;
}
.p-sticky-table table{
	border:none;
	border-left:1px solid #dedede;
	border-right:1px solid #dedede;
	border-bottom: 1px solid #dedede;
    border-collapse: collapse;
	word-break: break-all;
	table-layout: fixed;
	display:block;
	overflow:scroll;
}
.p-sticky-table th{
	background:#f0f9ff !important; /* 見出し背景色 */
	color: #666;/* 見出し文字色 */
	font-weight: 500 !important;/* 見出し文字太さ */
	font-size:13px !important; /* 見出し文字サイズ */
}
.p-sticky-table td{
	font-size: 13px !important; /* 文字サイズ */
	color:#555; /* 文字色 */
}
.p-sticky-table thead th:first-child,.p-sticky-table tbody th:first-child{
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 1;
	border:none;
}
.p-sticky-table tr{
	border-top:1px solid #dedede;
	border-bottom:none !important;
}
.p-sticky-table tr:last-child{
	border-bottom:1px solid #dedede;
}
.p-sticky-table th, .p-sticky-table td {
	vertical-align:middle !important;
	border: none !important;
	background:#fff;
	text-align:center;
	padding:12px !important;
}
.p-sticky-table img{
	margin:0;
	padding:0;
	max-width:70px !important; /* 画像最大サイズ */
}
/* スマホ */
@media screen and (max-width: 560px) {
	.p-sticky-table th{
		font-size:11px !important; /* スマホ見出し文字サイズ */
	}
	.p-sticky-table td{
		font-size: 11px !important; /* スマホ文字サイズ */
	}
	.p-sticky-table thead th:first-child,.p-sticky-table tbody th:first-child{
		white-space:normal;
		min-width:80px; /* スマホ見出し横幅 */
	}
	.p-sticky-table th, .p-sticky-table td {
		padding:8px !important;
	}
	.p-sticky-table img{
		max-width:50px !important; /* スマホ画像最大サイズ */
	}
}
/************************************
** 追加
************************************/
.p-sticky-table table {
  max-height: 80vh;
  border: 1px solid #dedede !important;
  word-wrap: break-word;
}
.p-sticky-table thead th:first-child {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 3;
}
.p-sticky-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  text-align:center;
}
.p-sticky-table tbody th:first-child {
  white-space: normal;
  min-width: 130px;
}
.p-sticky-table th, .p-sticky-table td {
  min-width: 50px;
  text-align: left;
  font-size: 16px !important;
  position: relative;
  padding: 13px !important;
  color: #333;
  border: none !important;
  z-index: 0;
}
.p-sticky-table th {
  letter-spacing: 1px;
  color: #555 !important;
  font-weight:600 !important;
}
.p-sticky-table img {
  margin: 10px auto;
  display: block;
  padding: 0;
  max-width: 80% !important;
}
.p-sticky-table table th::before, .p-sticky-table table td::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-right: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  z-index: -1;
}
.p-sticky-table table, .p-sticky-table tr {
  border: none;
}
/* スマホ */
@media screen and (max-width: 560px) {
  .p-sticky-table table {
    max-height: 60vh;
  }
  .p-sticky-table thead th:first-child, .p-sticky-table tbody th:first-child {
    min-width: 25vw;
  }
  .p-sticky-table th, .p-sticky-table td {
    font-size: 12px !important;
    padding: 7px !important;
  }
}
/* 中央寄せ */
.pst-center td {
  text-align: center;
}
/*ぽんひろスクロール表終わり*/
/*コメント非表示設定20191127*/
.comment-form-email,.comment-form-url,.comment-notes{
	display:none;
}
/*終わり*/

/*--------------------------------------
  メリット・デメリット　BOX
--------------------------------------*/
.meritto, .demeritto {/*ブロックの枠*/
    position: relative;/*基準に設定*/
    padding: 0.8em 1em;/*内側の余白　上下0.8　左右1*/
    margin: 3em 0 2em;/*外側の余白　上3　左右0　下2*/
}
.meritto {/*メリットの枠線*/
    border: 3px solid #46bc63;
}
.demeritto {/*デメリットの枠線*/
    border: 3px solid #ff6e6e;
}
.meritto .box-title, .demeritto .box-title {/*タイトル部分*/
    position: absolute;/*基準をもとに自由に動かせるように*/
    top: -42px;/*上からの位置*/
    left: -3px;/*左からの位置*/
    color: white;/*文字色*/
    line-height: 32px;/*文字の高さ*/
    padding: 5px 13px 3px;/*内側の余白*/
    border-radius: 10px 10px 0 0;/*角丸　上2つだけ丸*/
}
.meritto .box-title {/*メリットのタイトル背景色*/
    background: #46bc63;
}
.demeritto .box-title {/*デメリットのタイトル背景色*/
    background: #ff6e6e;
}
.meritto .box-title:before, .demeritto .box-title:before {/*タイトルのアイコン*/
    margin-right: 10px;/*右側の余白*/
    font-size: 1.2em;/*アイコンの大きさ*/
}
.meritto .box-title:before {/*メリットのアイコン*/
    content: "\f599";
}
.demeritto .box-title:before {/*デメリットのアイコン*/
    content: "\f119";
}
.meritto ul, .demeritto ul {/*中の箇条書き*/
    list-style: none;/*●を消去*/
}
.meritto li, .demeritto li {/*中の箇条書きの中*/
    padding: .5em 0;/*上下の余白*/
}
.meritto li:before, .demeritto li:before {/*箇条書きの前にアイコン追加*/
    margin-left: -20px;/*左の余白*/
    margin-right: 10px;/*右の余白*/
}
.meritto li:before {/*メリットのアイコンと色*/
    content: "\f164";
    color: #46bc63;
}
.demeritto li:before {/*デメリットのアイコンと色*/
    content: "\f165";
    color: #ff6e6e;
}
.meritto li:before, .meritto .box-title:before, .demeritto li:before, .demeritto .box-title:before {/*アイコンの共通設定*/
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
/*--------------------------------------
  比較ボックス
--------------------------------------*/
.hikaku {
    justify-content: center;
    box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2);
    margin: 2em 0;
}
.hikaku .wp-block-column {
    margin-bottom: 0;
    flex-basis: 50%;
}
.hikaku-left {
    margin-left: 0!important;
}
p.hikaku-title {
    color: white;
    font-weight: 600;
    margin-bottom: 0;
    padding: .5em;
    text-align: center;
}
.hikaku ul.my-bgc1-usume, .hikaku ul.my-bgc2-usume {
    padding: 0.5em 0.75em;
    margin: 0;
}
.hikaku p:empty {
    display: none;
}
@media (min-width: 600px){
.hikaku ul.my-bgc1-usume, .hikaku ul.my-bgc2-usume {
    padding: 1em 1.5em;
}}
.my-bgc1{ background: #ffc0cb}/*★変更場所★*/
.my-bgc2{ background: #afeeee}/*★変更場所★*/
.my-bgc1-usume{ background: #fffafa,}/*★変更場所★*/
.my-bgc2-usume{ background: #f8f8ff}/*★変更場所★*/
/*--------------------------------------
  見出しh2
--------------------------------------*/
.entry-content h2{

}
.fa5 .entry-content h2:before {/*fontawesome5を使う場合*/
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
/*--------------------------------------
  見出しh3
--------------------------------------*/
.entry-content h3 {

}
.fa5 .entry-content h3:before {/*fontawesome5を使う場合*/
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
/*--------------------------------------
  見出しh4
--------------------------------------*/
.entry-content h4 {

}
.fa5 .entry-content h4:before {/*fontawesome5を使う場合*/
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
/*SANGOショートコード記事内関連[kanren]*/
.table {
  display: table;
}
.tbcell {
  display: table-cell;
  vertical-align: middle;
}
.tbcell img {
  width: 100%;
}
.sng-link-time {
  display: block;
  margin-bottom: 5px;
  font-size: 13.5px;
  color: #b5b5b5;
}
.sng-link-time i {
  margin-right: 3px;
}
.linkto {
  max-width: 550px;
  width: 100%;
  margin: 1em 0 1.5em;
  padding: 10px;
  border: solid 2px #eaedf2;
  border-radius: 3px;
  background: #fff;
  color: #555;
  font-weight: bold;
  text-decoration: none !important;
}
.linkto:hover {
  background: #eaedf2;
  text-decoration: none;
}
.linkto img {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
  transition: 0.3s;
}
.linkto:hover img {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
}
.linkto .tbimg {
  width: 100px;
}
.linkto figure {
  width: 110px;
  padding-right: 10px; /*for old ver*/
}
.linkto .tbtext {
  padding-left: 10px;
  line-height: 1.5;
  text-align: left;
}
.sidebar .textwidget .linkto {
  border: none;
  margin: 0;
}
.sidebar .textwidget .linkto:last-child {
  padding-bottom: 1em;
}
.c_linkto {
  display: block;
  overflow: hidden;
  max-width: 400px;
  width: 100%;
  margin: 1em 0;
  padding: 0;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  color: #555;
  font-weight: bold;
  text-decoration: none !important;
}
.c_linkto:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
  color: #888;
  text-decoration: none;
  transform: translateY(-2px);
}
.c_linkto .c_linkto_text {
  display: block;
  padding: 15px 13px;
  line-height: 1.6;
}
.c_linkto img {
  width: 100%;
}
.longc_linkto {
  margin-bottom: 1.5em;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
}
.longc_linkto img {
  padding: 10px 10px 0;
}
/*SANGO2列表示[yoko2]*/
.shtb2 {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 1.5em 0;
}
.shtb2 .cell {
  display: table-cell;
  width: 50%;
  vertical-align: top;
}
.shtb2 .cell:first-of-type {
  padding-right: 2%;
}
.shtb2 .cell:last-of-type {
  padding-left: 2%;
}

/*--------------------------------------
  関連記事
--------------------------------------*/
.kanren {
    position: relative;
    background-color: #fff;
    border: 2px solid #E0E0E0;
    border-radius: 5px;
    margin:30px 5px 20px 7px;
    padding: 25px 20px 15px 20px;
}
.kanren:before {
    position: absolute;
    border-radius: 15px;
    background-color: #9E9E9E;
    color: #fff;
    font-family:"FontAwesome", "Helvetica","Yu Gothic";
    content: '関連する記事';
    font-size: 14px;
    font-weight: bold;
    padding: 5px 20px;
    left: -10px;
    top: -20px;
}
.kanren:after {
    position: absolute;
    border-top: 12px solid #9E9E9E;
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    content: '';
    top: 10px;
    left: 15px;
}
.kanren ul {
    list-style-type: none;
    border:none;
    margin:0;
    padding:0;
}
.kanren ul li {
    list-style-type: none !important;
    position: relative;
    padding: .2em 0 .2em 1.5em;
    line-height: 1.5;
}
.kanren ul li:before {
    position: absolute;
    left: 0;
    display: inline-block;
    font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
    content:'\f05d\ ';
    color: #9E9E9E;
    width: 8px;
    height: 8px;
    margin: 0 16px 20px 0;
}
.fa5 .kanren ul li:before{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f058';
}
/*赤系*/
.kanren.p-red { border: 2px solid #ffcdd2; }
.kanren.p-red:before { background-color: #ef9a9a; }
.kanren.p-red:after { border-top: 12px solid #ef9a9a; }
.kanren.p-red ul li:before { color: #ef9a9a; }
/*オレンジ系*/
.kanren.p-orange { border: 2px solid #FFE0B2; }
.kanren.p-orange:before { background-color: #FFCC80; }
.kanren.p-orange:after { border-top: 12px solid #FFCC80; }
.kanren.p-orange ul li:before { color: #FFCC80; }
/*緑系*/
.kanren.p-green { border: 2px solid #B2DFDB; }
.kanren.p-green:before { background-color: #80CBC4; }
.kanren.p-green:after { border-top: 12px solid #80CBC4; }
.kanren.p-green ul li:before { color: #80CBC4; }
/*青系*/
.kanren.p-blue { border: 2px solid #C5CAE9; }
.kanren.p-blue:before { background-color: #7986CB; }
.kanren.p-blue:after { border-top: 12px solid #7986CB; }
.kanren.p-blue ul li:before { color: #7986CB; }
/*カスタマイズ用*/
.kanren.p-custom { border: 2px solid #E1BEE7; /*枠線の色*/ }
.kanren.p-custom:before { background-color: #CE93D8; /*吹き出しの色*/ }
.kanren.p-custom:after { border-top: 12px solid #CE93D8; /*吹き出しの色*/ }
.kanren.p-custom ul li:before { color: #CE93D8; /*吹き出しの色*/ }
/*--------------------------------------
  タイトル自由形　関連記事ボックス
--------------------------------------*/
.p-box {
    position: relative;
    background-color: #fff;
    border: 2px solid #CFD8DC;
    border-radius: 5px;
    margin:30px 5px 20px 7px;
    padding: 25px 20px 15px 20px;
}
.p-box .p-box-title {
    position: absolute;
    left: -10px;
    top: -20px;
    border-radius: 15px;
    background-color: #90A4AE;
    color: #fff;
    font-family:"FontAwesome", "Helvetica","Yu Gothic";
    font-size: 14px;
    font-weight: bold;
    padding: 5px 20px;
}
.p-box .p-box-title:after {
    position: absolute;
    border-top: 12px solid #90A4AE;
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    content: '';
    top: 30px;
    left: 25px;
}
.p-box p {
    margin: 0;
    padding: 0;
}
.p-box ul {
    list-style-type: none;
    border:none;
    margin:0;
    padding:0;
}
.p-box ul li {
    list-style-type: none !important;
    position: relative;
    padding: .2em 0 .2em 1.5em;
    line-height: 1.5;
}
.p-box ul li:before {
    display: inline-block;
    position: absolute;
    left: 0;
    font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
    content:'\f138\ ';
    color: #90A4AE;
    width: 8px;
    height: 8px;
    margin: 0 16px 20px 0;
}
.fa5 .p-box ul li:before{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
/*赤系*/
.p-box.p-red { border: 2px solid #ffcdd2; }
div.p-box.p-red .p-box-title  { background-color: #ef9a9a; }
div.p-box.p-red .p-box-title:after { border-top: 12px solid #ef9a9a; }
.p-box.p-red ul li:before { color: #ef9a9a; }
/*オレンジ系*/
.p-box.p-orange { border: 2px solid #FFE0B2; }
div.p-box.p-orange .p-box-title { background-color: #FFCC80; }
div.p-box.p-orange .p-box-title:after { border-top: 12px solid #FFCC80; }
.p-box.p-orange ul li:before { color: #FFCC80; }
/*緑系*/
.p-box.p-green { border: 2px solid #B2DFDB; }
div.p-box.p-green .p-box-title { background-color: #80CBC4; }
div.p-box.p-green .p-box-title:after { border-top: 12px solid #80CBC4; }
.p-box.p-green ul li:before { color: #80CBC4; }
/*青系*/
.p-box.p-blue { border: 2px solid #C5CAE9; }
div.p-box.p-blue .p-box-title { background-color: #7986CB; }
div.p-box.p-blue .p-box-title:after { border-top: 12px solid #7986CB; }
.p-box.p-blue ul li:before { color: #7986CB; }
/*カスタマイズ用*/
.p-box.p-custom { border: 2px solid #E1BEE7; /*枠線の色*/ }
div.p-box.p-custom .p-box-title { background-color: #CE93D8; /*吹き出しの色*/ }
div.p-box.p-custom .p-box-title:after { border-top: 12px solid #CE93D8; /*吹き出しの色*/ }
.p-box.p-custom ul li:before { color: #CE93D8; /*チェックの色*/ }
/*--------------------------------
  ボックス＋アイコン（ショートコード用）
---------------------------------*/
/* Note（灰色背景） */
.memo.note {
    background: #f6f6f6;
}
.memo.note .memo_ttl {
    color: #777777;
}
.memo.note .memo_ttl:before {
    background: #777777;
    font-family:"FontAwesome";
    content: "\f02d";
}
.fa5.memo.note .memo_ttl:before{
    font-family:"Font Awesome 5 free";
    font-weight:900;
    content: "\f02d";
}
/* Sefe（水色背景） */
.memo.safe {
    background: #e8f4ff;
}
.memo.safe .memo_ttl {
    color: #5dbce8;
}
.memo.safe .memo_ttl:before {
    background: #5dbce8;
    font-family:"FontAwesome";
    content: "\f2b4";
}
.fa5 .memo.safe .memo_ttl:before{
    font-family: "Font Awesome 5 free";
    font-weight:900;
    content: "\f024";
}
/** ボックス **/
.sng-box p {
  margin: 0;
  padding: 0;
}
.sng-box .say {
  margin-bottom: 0;
}
.sng-box .faceicon {
  padding-right: 20px;
}
#inner-content .sng-box > *:first-child {
  margin-top: 0;
}
.box1 {
  margin: 2em 0;
  padding: 1.5em 1em;
  border: solid 2px #000;
  font-weight: bold;
}
.box2 {
  margin: 2em 0;
  padding: 1.5em 1em;
  border: solid 2px #d1d1d1;
  border-radius: 5px;
  background: #fff;
}
  margin: 0 0 5px;
}
.box30,
.box31,
.box32,
.box33 {
  margin: 2em 0;
  padding: 0 15px 10px;
  background: #edf6ff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.box30 .box-title,
.box31 .box-title,
.box32 .box-title,
.box33 .box-title {
  margin: 0 -15px 15px;
  padding: 8px 4px;
  background: #5fc2f5;
  color: #fff;
  font-size: 1.2em;
  text-align: center;
  line-height: 1.5;
}
.box32,
.box33 {
  background: #fff9eb;
}
.box32 .box-title {
  background: #f5a15f;
}
.box33 .box-title {
  background: #f46b6b;
}
/*シェブロン*/
.li-chevron li {
  list-style-type: none !important;
  padding: 0.5em 0;
  line-height: 1.5;
}
.li-chevron ul {
  position: relative;
  padding: 1em 0.5em 1em 2.5em;
  border: solid 2px skyblue;
  border-radius: 5px;
}

.li-chevron li:before {
  position: absolute;
  left: 1em;
  color: skyblue;
  font-family: FontAwesome;
  content: "\f138";
}

/*SANGO蛍光ペン*/
body#tinymce.wp-editor .keiko_blue {
  background: linear-gradient(transparent 50%, rgba(107, 182, 255, 0.24) 50%);
}
body#tinymce.wp-editor .keiko_yellow {
  background: linear-gradient(transparent 50%, rgba(255, 252, 107, 0.69) 50%);
}
body#tinymce.wp-editor .keiko_green {
  background: linear-gradient(transparent 50%, rgba(151, 232, 154, 0.69) 50%);
}
body#tinymce.wp-editor .keiko_red {
  background: linear-gradient(transparent 50%, rgba(255, 88, 88, 0.24) 50%);
}
.keiko_blue {
  background: linear-gradient(transparent 50%, rgba(107, 182, 255, 0.24) 50%);
}
.keiko_yellow {
  background: linear-gradient(transparent 50%, rgba(255, 252, 107, 0.69) 50%);
}
.keiko_green {
  background: linear-gradient(transparent 50%, rgba(151, 232, 154, 0.69) 50%);
}
.keiko_red {
  background: linear-gradient(transparent 50%, rgba(255, 88, 88, 0.24) 50%);
/*シェブロン*/
.li-chevron li {
  list-style-type: none !important;
  padding: 0.5em 0;
  line-height: 1.5;
}
.li-chevron li:before {
  position: absolute;
  left: 1em;
  color: skyblue;
  font-family: FontAwesome;
  content: "\f138";
	}