@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.3
*/
/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*スマホで非表示*/
@media screen and (max-width: 767px){
.mobile-display-none{display:none;}}
/*404ページ画像センタリング*/
.not-found{margin: auto; display: block;}

/************************************
** モバイルボタン・サイドバーを非表示
************************************/
.mobile-menu-buttons .sidebar-menu-button {
	display: none;
}
/************************************
** コメント欄のURLを非表示
************************************/
/*.comment-form-url, .comment-notes {
  display: none;
}*/
/************************************
****　FAQ　アコーディオン
************************************/
.faq{margin-bottom:0px;}
.is-style-accordion div.faq-question-label.faq-item-label,
.is-style-accordion div.faq-answer-label.faq-item-label{
font-size: 20px;
font-weight: bold;
padding: 2px;
margin-right: 0.4em;
}
.faq-item-content p{font-size: 15px;}
/************************************
/*フォーラム*/
************************************/
#wpforo-title, .wpf-thread-author-name, .wpf-thread-last-date{display:none;}
/*wpForo添付イメージリンク用*/
.wpforo-attached-file{
  position: relative;
}
.wpforo-attached-file .paperclip{
  position: absolute;
  font-size: 40px !important;
  opacity: 0.6;
  top: -12px;
  left: -13px;
}
div.wpf-right > div.wpforo-post-content a::after{
content:'\f2f6';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
margin-left:5px;
}
/*返信なしの際の「No replies」文字を非表示*/
.wpf-sbd-count{display:none;}
/*ブログカード 詳細非表示*/
.blogcard-snippet{display:none;}
/************************************
ヘッダーに検索窓追加・右寄せ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px) {
.header-in .search-box {
width: 85%;
margin:auto;
padding-bottom:6px;}
}
/*1023px以上*/
@media screen and (min-width: 1024px) {
.header-in {
  position: relative;
}
.header-in .search-box {
  position: absolute;
  top: 50%;
  right: 16px;
  margin: 0;
  width: 280px;
  transform: translateY(-50%);
}
.header-in input[type="text"] {
  padding: 8px 14px 8px 40px;
  font-size: 14px;
  background: #edf6f9;
  border: 1px solid #9fcde1;
  border-radius: 16px 16px 16px 16px / 50% 50% 50% 50%;
}
}
/*検索フォーム*/
.search-edit{
height:50px;
padding:0 10px; 
border-radius:25px !important;
outline:0;
background:#eee;
}
[type="submit"].search-submit {
height:50px;
width:50px;
top:0;
right:0;
background:#000;
color:#fff;
border:none;
border-radius:0 25px 25px 0;
}
[type="submit"].search-submit:hover{
color:#fb8a8a;
background:#ddd;
}
/*TablePress表の横スクロール*/ 
div.myScrollBox { overflow: scroll; white-space: nowrap; }
.tablepress { width: 768px; }
/************************
/ グローバルナビ
/************************/
/*ホバー時*/
#navi .navi-in a:hover {
background-color:#fff ; /*背景色*/
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
color: #000; /*文字色*/
}
#navi .navi-in > ul li{
height: 50px;
line-height: 50px;
}
/************************************
** Amazon APIリンク
************************************/
/*Amazonのボックス用コード*/
.amazon-item-box {
width: 85%;
border: solid 2px #333333;
border-radius: 8px;
}
/*Amazonのアイコンの色*/
.amazon-item-box::after {color: #f6b340;}
/*ボタン*/
.shoplinkamazon,.shoplinkrakuten,.shoplinkyahoo {
transition: .4s;
}
/*Amazonボタン*/
.shoplinkamazon a {background: #ff9900;}
.shoplinkamazon a:hover {
background: rgb(255, 153, 0, 0.7);
}
/*楽天ボタン*/
.shoplinkrakuten a {background: #bf0000;}
.shoplinkrakuten a:hover {
background: rgb(191, 0, 0, 0.7);
}
/*Yahoo！ボタン*/
.shoplinkyahoo a {background: #410093;}
.shoplinkyahoo a:hover {
background: rgb(65, 0, 147, 0.7);
}
/************************************
** おすすめカード
************************************/
.recommended .navi-entry-card-title {
color: #fff; /*文字色*/
font-size: 15px; /*文字サイズ*/
font-weight:bold; /*太字*/
letter-spacing:0.5px; /*余白*/
text-decoration: none;
line-height: 1.4;
text-shadow: 0 0 7px rgba(0,0,0.3); /*文字の影*/
}
.recommended .navi-entry-card-thumb img{ width:180px; height:120px; }

/************************************
** 斜め掛けリボン
<div class="ribbon17-wrapper">
  <div class="ribbon17-content">
  <span class="ribbon17">おすすめ！</span>
  </div>
内容
</div>
************************************/
.ribbon17-wrapper {
  display: block;
  position: relative;
  margin: 15px auto;
  padding: 10px 0;
  width: 820px;
  background: #f1f1f1;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.14);
  box-sizing: border-box;
}
.ribbon17-content {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 89px;
  height: 91px;
  overflow: hidden;
  }
.ribbon17 {
  display: inline-block;
  position: absolute;
  padding: 7px 0;
  left: -23px;
  top: 22px;
  width: 160px;
  text-align: center;
  font-size: 15px;
  line-height: 16px;
  background: #ffa520;
  color: #fff;
  letter-spacing: 0.05em;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.ribbon17:before, .ribbon17:after {
  position: absolute;
  content: "";
  border-top: 4px solid #b2751b;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  bottom: -4px;
}
.ribbon17:before {
  left: 14px;
}

.ribbon17:after {
  right: 18px;
}
/************************************
** 左端にリボン
<div class="ribbon21-wrapper">
  <span class="ribbon21">NEW!</span>
内容
</div>
************************************/
.ribbon21-wrapper {  
  display: block;
  position: relative;
  margin: 0 auto;
  padding: 20px 0;
  background: #f1f1f1;
  }
.ribbon21 {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 10px;
  box-sizing: border-box;
  padding: 0 10px;
  margin: 0;
  height: 30px;
  line-height: 30px;
  font-size: 18px;
  letter-spacing: 0.1em;
  color: white;
  background: #ff7470;
  box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.1);
}
.ribbon21:before {
  position: absolute;
  content: '';
  top: -8px;
  left: -7px;
  border: none;
  height: 38px;
  width: 7px;
  background: #ff7470;
  border-radius: 5px 0 0 5px;
}
.ribbon21:after {
  position: absolute;
  content: '';
  top: -7px;
  left: -5px;
  border: none;
  height: 7px;
  width: 5px;
  background: #b25552;
  border-radius: 5px 0 0 5px;
}
/************************/
/*トップページインデックス見出し*/
/************************/
h1 .list-title-in {
border: solid 2px #333333;
color:#000;
padding:12px;
width:90%;
border-radius: 9px;
}
/*インデックスカード、おすすめカード、記事上アイキャッチ*/
.new-entry-cards img, .recommended img, .eye-catch-wrap img{
border-radius: 9px;
}

/*横並びリスト5列*/
.col_5{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.col_5 > *{
    width: calc( 20% - 20px );
    margin-right: 25px;
    margin-bottom: 25px;
}
.col_5 > *:nth-child(5n){
    margin-right: auto;
}
@media screen and (max-width: 960px) {
    .col_5 > *{
        width: calc( 25% - 9px );
        margin-right: 12px;
        margin-bottom: 12px;
    }
    .col_5 > *:nth-child(5n){
        margin-right: 12px;
    }
    .col_5 > *:nth-child(4n){
        margin-right: auto;
    }
}
@media screen and (max-width: 580px) {
    .col_5 > *{
        width: calc( 33.33333% - 8px ) ;
    }
    .col_5 > *:nth-child(5n){
        margin-right: 12px;
    }
    .col_5 > *:nth-child(4n){
        margin-right: 12px;
    }
    .col_5 > *:nth-child(3n){
        margin-right: auto;
    }
}
/*-------- 記事内 ---------*/
/************************/
/*ヘッダー下のお勧め記事*/
/************************/
.pickup_post {
display:flex;
justify-content:center;
flex-wrap: wrap;
}
.pickup_list {
position: relative;
width:230px;
height:120px;
margin:15px 5px;
transition: .5s;
}
.pickup_img{
position: absolute;
top: 0;
left: 0;
width:230px;
height:120px;
}
.pickup_label {
position: absolute;
top: 0;
left: 0;
margin: 0;
color: white;
background: rgba(237, 57, 85,0.8);
font-size: 14px;
line-height: 1.1;
padding: 5px 10px;
border-top-left-radius:8px;
}
.pickup_list .pickup_title {
position: absolute;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.5);
width:100%;
height:48px;
padding: 5px 10px;
color: #fff;
font-size: 16px;
font-weight:bold;
letter-spacing:0.5px;
text-decoration: none;
line-height: 1.2;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
}
.pickup_list img{border-radius:8px;}
.pickup_list {transition: 0.5s;}
/************************/
/* 見出し */
/************************/
p {margin:  0;line-height: 2;}
/*記事タイトル*/
.post h1 {
position: relative;
padding: 0.5em;
border: solid 2px #454552;
border-left: double 7px #454552;
font-size:20px;
font-weight:bold;
line-height: 1.8;
text-align: center;
border-top-right-radius: 25px;
border-bottom-right-radius:25px;
}
.post h1::before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px #db445b;
}
.article h2 {
margin-bottom:10px;
width: 100%;
padding: 0.5em;
display: inline-block;
line-height: 1.3;
}
.article h3{
margin-bottom:10px;
font-size: 20px;
padding: 10px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border: solid 2px #454552;
height: 45px;
}
.article h3 {
border-bottom: solid 4px #db445b;
position: relative;
}
.post h3:after {
position: absolute;
bottom: -9px;
left: 1em;
width: 0;
height: 0;
content: '';
border-width: 10px 10px 0 10px;
border-style: solid;
border-color: #454552 transparent transparent transparent;
}
.article h4{
width:80%;
margin-bottom:10px;
color: #444;
font-size: 18px;
position: relative;
padding: 10px 30px;
border:solid 1px #454552;
border-left:solid 6px #454552;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.article h5{
width:75%;
padding: 12px;
margin-bottom:10px;
margin-left:25px;
color: #000;
font-weight:bold;
border-top: dotted 2px #454552;
border-bottom: dotted 2px #db445b;
border-left: none;
}
.article h6{
font-size: 16px;
padding: 12px;
margin-bottom:10px;
color: #000;
font-weight:bold;
border-top: dotted 2px #454552;
border-bottom: dotted 2px #db445b;
border-left: none;
}
/************************/
/*カテゴリーボタン*/
/************************/
/*サイトガイド・カテゴリー説明で使用*/
.btn_gray_180,.btn_gray_current {width:150px;}
.btn_gray_180,.btn_gray_current{
display: inline-block;
padding: 0.3em 1em;
text-decoration: none;
color: #5d5855;
border: solid 1px #9d9d9d;
border-radius: 8px;
transition: .4s;
}
.btn_gray_big:hover,.btn_gray_180:hover,.btn_gray_current {
background:rgba(219, 68, 91,0.3);
}


/************************/
/*目次デザイン*/
/************************/
/* 目次全体枠 */
.toc{
border-top:5px solid; color:#000;
padding: 20px;
}
/* 目次アイコン */
.toc-title:before {
width: 40px;
height: 40px;
font-family: "Font Awesome 5 Free";
content : "\f03a";
font-weight: 900;
font-size:18px;
margin-right:8px;
color:#FFF;
background-color:#000;
border-radius: 50%;
padding:10px;
}
/* 目次の文字 */
.toc-title {
text-align:left;
font-size: 20px;
font-weight: 600;
}
/*見出し2（H2）の設定*/
.toc-content > .toc-list > li:before { 
font-family: "Font Awesome 5 Free";
content: "\f35a";
font-weight: 900;
color: #000;
padding-right:8px;
}
.toc-content .toc-list li {
font-weight:600;
}
/*H3以降の文字サイズ*/
.toc-content .toc-list li li {
font-weight:normal;
}

/************************
 * 吹き出し
*************************/
.balloon1 {
position: relative;
display: inline-block;
margin: 1.5em 0;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
font-size: 16px;
background: #9dceff;
border-radius: 15px;
}
.balloon1:before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
border-top: 15px solid #9dceff;
}
.balloon1 p {
margin: 0;
padding: 0;
font-weight:bold;
}
/*吹き出し*/
.balloon {max-width: 600px;}
.balloon-left,.balloon-right {text-align:center;}
/**********************
/* 新着記事にNEW・更新記事にUPマーク
* ********************/
.new_ribbon,.up_ribbon{
display: inline-block;
position: absolute;
top: -6px;
right: 10px;
margin: 0;
padding: 10px 0 7px;
z-index: 2;
width: 50px;
text-align: center;
color: white;
font-size: 15px;
border-radius: 2px 0 0 0;
}
.new_ribbon {
background-color: rgb(255,0,0);
}
.up_ribbon {
background-color: #d53c79;
}
.new_ribbon:before,.up_ribbon:before{
position: absolute;
content: '';
top: 0;
right: -5px;
border: none;
border-right: solid 5px transparent;
}
.new_ribbon:before{
border-bottom: solid 6px rgb(255,0,0);
}
.up_ribbon:before{
border-bottom: solid 6px #d53c79;
}
.new_ribbon:after,.up_ribbon:after{
content: '';
position: absolute;
left: 0;
top: 100%;
height: 0;
width: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
.new_ribbon:after{
border-top: 10px solid rgb(255,0,0);
}
.up_ribbon:after{
border-top: 10px solid #d53c79;
}

/*新着記事　非表示*/
.list-new-entries{display:none;}

/************************/
/* 記事を読む時間 */
/************************/
.read-time {
margin:auto;
width:360px;
border: 2px solid #333;
border-radius: 10px;
}
/************************
/ ブログカード
/************************/
.a-wrap {background-color: #fff;border-radius: 10px;}
.a-wrap .blogcard {border-color: #000;border-radius: 10px;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
}
/*800px以上*/
@media screen and (min-width: 800px) {
.a-wrap {width:600px;}
}
/*タイトル*/
.blogcard-title{
font-size:17px; /*文字サイズ*/
border-bottom: 4px solid #fb8a8a; /*タイトル下にアンダーライン*/
}
.internal-blogcard:after{
	position: absolute;
	bottom: 10px;
	left: 50%;
	font-family: 'Font Awesome 5 free';
	content: 'Read More \f101';
	font-size: 75%;
	font-weight: bold;
	background-color: #000;
	color: #FFF; 
	padding: 0.2em 1.5em;
	border-radius: 6px
}
/************************/
/* フッタのリスト*/
/************************/
#footer-in ul li a:hover{
background-color:#fff;
color:#F297A3;
}
#navi-footer-in .menu-item{width:65px;}
/************************/
/* 固定ページの更新日時を非表示 */
/************************/
.page .date-tags,
.page .author-info {
display: none;
} 
/************************/
/*テーブル*/
/************************/
thead td{
background: #000;
font-size:17px;
line-height:1.5;
font-weight:bold;
color:#fff;
}
.wp-block-table table{width:100%;}
/*枠線なし　table_0*/
.table_0 {
width:340px;
text-align:center;
border-collapse: collapse;
text-align: left;
line-height: 1.6;
border: none;
font-size: 12px;
}
.table0 th, .table_0 td {border: none; padding:0;}

/*THタグに下線、奇数行に背景色　table_1*/
.table1 tr:nth-child(even) {
background: #e1e1e1;
}
/*THタグに下線　table_2*/
.table2 {
border-collapse: separate;
font-size: 15px;
}
.table1 {
border-collapse: separate;
font-size: 16px;
}
.table1,.table2 {
width:100%;
border-collapse: collapse;
text-align: left;
line-height: 1.5;
border: 1px solid #ccc;
}
.table1 th,.table2 th {
padding: 10px;
font-weight: bold;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 2px solid #db445b !important;
background: #ebebeb;
}
/* タイトル行　*/
.table0 .th1,.table1 .th1,.table2 .th1{
font-size:18px;
background: #000;
color:#fff;
text-align:center;
}
.table0 .th2.table1 .th2,.table2 .th2{
font-size:18px;
}
/*引用*/
.table1 blockquote{
font-size:14px;
padding: 2px;
}
/* 太字　本の著者・タイトルで使用*/
.table0 .td1,.table1 .td1,.table2 .td1{
font-weight:bold;
font-size:18px;
}
/*角丸・カラーコードで使用 color_table*/
.color_table,.table3{
width:100%;
border-collapse: separate;
text-align: center;
line-height: 2;
border: 2px solid #ccc;
font-size: 13px;
border-radius: 10px;
}
.color_table td a{color:#5d5855;text-decoration:none;}
.color_table td a:hover{color:#db445b;}
/*角丸の文字サイズ違い table3*/
.table3{font-size: 14px;}

/************************/
/*１ページメニュー用*/
/************************/
/*枠線なし*/
.table_menu {
width:100%;
border-collapse: collapse;
text-align: left;
border: none;
font-size: 15px;
 padding:5px;
}
.table_menu th{
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 2px solid #db445b !important;
background: #ebebeb;
} 
.table_menu td {border: none;line-height: 1.4;text-align:left;}
.table_menu td a{text-decoration:none; color:#5d5855;}
.table_menu td a:hover{color:#db445b;}
/************************/
/*アマゾンリンクで使用*/
/************************/
.table_amazon {
width:100%;
border-collapse: collapse;
text-align: left;
line-height: 1.8;
border: solid 1px #d9d9d9;
}
.table_amazon td {border: none;font-size: 14px;}
/*Amazon、楽天、Yahooボタン　サイズ固定*/
.btn_amazon,.btn_rakuten,.btn_yahoo,.btn_blue,.btn_blue2 {
display: inline-block;
margin-top:6px;
text-align: center;
font-size: 14px;
line-height: 2;
text-decoration: none;
background: #fff;
border-radius: 8px;
transition: .4s;
}
.btn_amazon,.btn_rakuten,.btn_yahoo {
width:110px;}
/*Amazon*/
.btn_amazon , .btn_amazon a{
background: #ff9900;
border: solid 1px #fff;
color: #fff;
}
.btn_amazon:hover {
border: solid 1px #ff9900;
background: #fff;
color: #ff9900;
}
/*楽天*/
.btn_rakuten {
background: #bf0000;
color: #fff;
}
.btn_rakuten:hover {
border: solid 1px #bf0000;
background: #fff;
color: #bf0000;
}
/*Yahoo*/
.btn_yahoo {
background: #410093;
color: #fff;
}
.btn_yahoo:hover {
border: solid 1px #410093;
background: #fff;
color: #410093;
}

/*other*/
.btn_blue {
padding:3px;
border: solid 2px #db445b;
background: #db445b;
color: #fff;
}
.btn_blue:hover {
background: #fff;
color: #db445b;
}
.btn_blue2 {
padding:3px;
border: solid 1px #db445b;
background: #db445b;
color: #fff;
margin-top:3px;
font-size: 13px;
line-height: 1.0;
border-radius: 4px;
}
.btn_blue2:hover {
background: #fff;
color: #db445b;
}

/* 引用 */
blockquote {
position: relative;
padding: 15px 35px;
font-style: italic;
font-size: 15px;
border-radius: 0;
border-left:solid 4px #db445b;
font-weight:normal;
}
/************************/
/* ボタン（カラーコードで使用） */
/************************/
.square_btn {
position: relative;
display: inline-block;
padding: 2px 5px;
font-size: 14px;
border:solid 1px #d2d2d2;
border-top-left-radius:20px;
border-top-right-radius:20px;
color:#666;
line-height: 30px;
transition: .4s;
}
.square_btn:hover {
background: #db445b;
color: #fff;
}
/************************/
/*ボタン茶　CSSコード展開で使用*/
/************************/
.btn_brown {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #2e221b;
  border: solid 2px #2e221b;
  border-radius: 3px;
  transition: .4s;
}
.btn_brown:hover {
  background: #2e221b;
  color: white;
}

/**********************
コピー防止
***********************/
.container {
user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
-khtml-user-select:none;
}

/*一部コピー可*/
.copyok {
user-select:all !important;
-moz-user-select:all !important;
-webkit-user-select:all !important;
-khtml-user-select:all !important;
font-family:ヒラギノ角ゴシック;
font-style:italic;
background-color:#e2e3e5;
color:#000 !important;
}
/*ソースコード用*/
/*コピー可に*/
pre code, .entry-title{
user-select:all !important;
-moz-user-select:all !important;
-webkit-user-select:all !important;
-khtml-user-select:all !important;
}
.code{ 
position:relative;
margin-left: 0px;
padding:30px 0 20px 20px;
border-left: solid 10px #db445b;
background:#2F3437;
color: #fff;
font-size:13px;
border-radius: 0 10px 0 0;
word-break: keep-all;
}
.code:after{content: 'クリックで全選択';
position: absolute;
top: 0px;
left: 0px;
padding: 5px 10px;
background: #ea6589;
line-height: 1;
font-size:1em;
color: #fff;
}
/*600px以下*/
@media screen and (max-width: 834px){
.code{ 
width:580px;
}
}

/*文字装飾スタイル*/
.blank-box {border: 3px solid #d2d2d2;
padding: 10px 10px;
margin: 10px;
}
.blank-box.bb-yellow {border-color: #ffff82;}
.blank-box.bb-red {border-color: #ec8484;}
.blank-box.bb-blue {border-color: #9dceff;}
.blank-box.bb-green {border-color: #ced79f;}
/*ボタン*/
.btn-green {background-color: #839b5c;}
/*案内*/
/*プライマリー（濃い水色）*/
.primary-box{
border: 3px double #007ab5; /*枠線*/
background-color: #afc5dc; /*背景色*/
}
/*セカンダリー（濃い灰色）*/
.secondary-box {
border: 3px double #cccccc;
background-color: #e2e3e5;
}
/*サクセス（薄い緑）*/
.success-box{
border: 3px double rgba(193,199,141,1);
background-color: rgba(193,199,141,0.5);
}
/*インフォ（薄い青）*/
.info-box{
border: 3px double #6fb7ff;
background-color: #d1ecf1;
}
/*ワーニング（薄い黄色）*/
.warning-box{
border: 3px double #fadd16;
background-color: #fff3cd;
}
/*デンジャー（薄い赤色）*/
.danger-box{
border: 3px double #f36767;
background-color: #f8d7da;
}
/*ライト（白色）*/
.light-box {
border: 3px double #555;
background-color: #fefefe;
}
/*ダーク（暗い灰色）*/
.dark-box {
border: 3px double #000000;
background-color: #d6d8d9;
}

/*マーカー*/
/*黄色マーカーはアマゾンカラーに*/
.marker {
width:140px;
display: inline-block;
margin-top:6px;
text-align: center;
;font-size: 16px;
line-height: 2;
text-decoration: none;
background: #fff;
border: solid 2px #ff9900;
color: #ff9900;
border-radius: 8px;
transition: .4s;
}
.marker:hover {
background: #ff9900;
color: #fff;
}
.marker-red {
background-color: #b82012;
color:#fff;
padding: 5px 10px;
border-radius: 20px;
}
.marker-blue {
background-color: #7fa3c9;
color:#fff;
padding: 5px 10px;
border-radius: 20px;
}
/*バッジ*/
.badge{
padding: 5px;
border-radius: 5px;
font-size: 14px;
}
.badge{background-color: #f0c886;}
.badge-red {background-color: #bf4762;}
.badge-pink {background-color: #ebb2cb; color:#222;}
.badge-purple {background-color: #bb8bc7;}
.badge-blue {background-color: #92c1d6;}
.badge-green {background-color: #839b5c;}
.badge-yellow {background-color: #edde8a; color:#000;}
.badge-brown {background-color: #9e735d;}
.badge-grey {background-color: #b9b9bd;}
/**********************************/
/*ビジュアルエディタ　拡張スタイル*/
/**********************************/
/*枠線ボックス（ブルー）*/
.border_box{
border:2px solid #db445b;
border-radius: 5px;
padding:20px;
margin-top:20px;
}
/*枠線ボックス（ピンク）*/
.border_box_p{
border:2px solid #fb8a8a;
border-radius: 5px;
padding:20px;
margin-top:20px;
}
/*枠線ボックス（グレー）*/
.border_box_g{
border:2px solid #5a5a5a;
border-radius: 5px;
padding:20px;
margin-top:20px;
}
/*二重線ボックス*/
.border_box2{
border:6px double #db445b;
padding:20px;
margin-top:20px;
}

/*角丸文字囲み　ブルー*/
.maru_kakomi{
background: #db445b;
color:#fff;
line-height: 1.2;
padding: 5px 10px;
border-radius: 20px;
}
/*角丸文字囲み　濃いブルー*/
.maru_kakomi2{
background: #db445b;
color:#fff;
line-height: 1.2;
padding: 5px 10px;
border-radius: 20px;
}
/*角丸文字囲み　グレー*/
.maru_kakomi3{
background: #5d5855;
color:#fff;
line-height: 1.2;
padding: 5px 10px;
border-radius: 20px;
}
/*角丸文字囲み　グリーン*/
.maru_kakomi4{
background: #69821b;
color:#fff;
line-height: 1.2;
padding: 5px 10px;
border-radius: 20px;
}
/* タイトル付BOX グレー*/
.title_box {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #787878;
}
.title_box .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 16px;
    background: #787878;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.title_box p {
    margin: 0; 
    padding: 0;
}
/* マーカー 黄色*/
.marker_yellow {
background:linear-gradient(transparent 70%, #FFFF00 0%);
}
/* マーカー ピンク*/
.marker_pink {
background:linear-gradient(transparent 70%, #fb8a8a 0%);
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以上*/
@media screen and (min-width: 1023px){
  /*必要ならばここにコードを書く*/
.content #main{width:900px;margin:auto;}
}

/*834px以下*/
@media screen and (max-width: 834px){
/*おすすめカード モバイルで非表示*/
.recommended {display:none;}
}

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