@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    0.0.5
*/

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

/* トップへ戻るボタン変更開始 */
.go-to-top {
	right: 20px;
	bottom: 22px;
}
/* トップへ戻るボタン変更終了 */

/* リンクバナーのホバー効果開始 */
.image_link{
  display:block;
}
.image_link img{
  transition:0.3s;
  display:block;
 width=100 height=100;
}
.image_link:hover img{
  opacity:0.5;
}
/* リンクバナーのホバー効果終了 */

/* ページ送りナビ色変更開始 */
.pager-post-navi :before {
color: #f9b891;
}

#pager-post-navi .prev-post 
{ border: 1px solid #f9b891;	/* ボックスの線 (太さ　線の種類　線の色)*/
	background: #fef9ed;/* ボックス背景色 */
}

#pager-post-navi .next-post 
{ border: 1px solid #f9b891;	/* ボックスの線 (太さ　線の種類　線の色)*/
	background: #fef9ed;/* ボックス背景色 */
}
/* ページ送りナビ色変更終了 */
/* ページ送りナビの画像を非表示開始 */
.pager-post-navi a figure {
display: none;
}
/* ページ送りナビの画像を非表示終了 */

/* ページ送り開始 */
.pagination-next{
    display: none;
}
.pagination-next-link{
  border-radius: 25px;
  background-color: #f9b891;
  border: none;
  color: #fff;
}
.page-numbers{
  border-color: #f9b891;
  background-color: #fff;
  border-radius: 6px;
}
.page-numbers.dots{
  border: none;
  background-color: #fff;
  opacity: 1;
}

.page-numbers.current,.pagination .current {
  background-color: #f9b891;
  color: #fff;
}
.pagination-next-link, .pagination a{
  transition: .3s;
}
.pagination-next-link:hover, .pagination a:hover{
  background-color: #bee8ed;
  transform: translateY(-5px);
}
.pagination-next-link:hover{
  color: #fff;
}
@media screen and (max-width: 480px){
    .page-numbers{
        width: 34px;
        height: 34px;
        line-height: 34px;
    }
    .pagination-next-link{
        font-size: 1em;
    }
}
/* ページ送り終了 */

.header-in .logo {
text-align: center;
}

/*プロフィールページタイトル非表示開始*/
.page-id-19 .entry-title{
display: none;
}
/*プロフィールページタイトル非表示終了*/

/*ヘッダーロゴサイズ開始*/
.logo-image {
	padding:0 0 5px 0;
}
.logo-image * {
	display: block;
	margin: auto;
}
/*ヘッダーロゴサイズ終了*/

/*フッターロゴサイズ開始*/
.footer-bottom-logo .logo-image {
padding: 0;
max-width: 159px;
}
/*フッターロゴサイズ終了*/

/* スライドインのカラー変更開始 */
.mobile-menu-buttons {
	background: #fef9ed;
}
/* スライドインのカラー変更終了 */

/* フォントアイコンの色開始 */
.my-fontcol {color: #f9b891}
/* フォントアイコンの色終了 */

/* フォントアイコンの色開始 */
.my-fontcol2 {color: #ffffff}
/* フォントアイコンの色終了 */

/* 背景画像設定開始 */
body.page-id-3314 {
background-image:url(https://freesozai.xyz/wp-content/uploads/2019/07/bear-biscuit204p.png);
background-repeat: repeat;
background-attachment: scroll;
background-size: auto;
}
/* 背景画像設定終了 */



/* フレックスボックス開始 */
div.flexbox-container {
    display:flex;
	 flex-wrap:wrap;
	 justify-content:center;
}
.flexbox-item {
  margin: 10px;
}
/* フレックスボックス終了 */

a {
	text-decoration: none;
}






/* アイキャッチカテゴリーラベル非表示開始 */
.entry-card .cat-label,
.related-entry-card .cat-label{
 display: none;
}
/* アイキャッチカテゴリーラベル非表示終了 */

/* h2見出しリセット開始 */
.article h2{
background:none;
padding: 0;
}
/* h2見出しリセット終了 */

/* h2見出し下線開始 */
.article h2{
	color: #3f3f3f;/*文字色*/
	font-size: 20px; /*フォントサイズ*/
border-bottom: dashed 2px #f9b891;
	margin-top: 10px;
	padding: 10px;
}
/* h2見出し下線終了 */

/* h3見出しリセット開始 */
.entry-content h3{
border-top:none;
border-left:none;
border-right:none;
padding: 0;	
}
/* h3見出しリセット終了 */

/* h3見出しカスタマイズ開始 */
.entry-content h3{
 padding: 10px;/*文字周りの余白*/
 padding-left:20px;/*文字と左線の間隔*/
  color: #3f3f3f;/*文字色*/
  border-left: solid 8px #fcc97e;/*左線（実線 太さ 色）*/
}
/* h3見出しカスタマイズ終了 */

/* h5見出しカスタマイズ開始 */
.article h5{ /*見出し５カスタマイズ*/
  background: #fcc97e; /*背景カラー*/
  font-size: 18px; /*フォントサイズ*/
  letter-spacing: 2px; /*文字間隔*/
  margin: 35px 20px 25px 20px;
  padding: 8px 8px 8px 8px;
 color: #fff;/*文字色*/
 border: solid 1px #fcc97e;
  line-height: 27px; /*高さ*/
  text-align: center; /*文字位置中央*/
  border-radius: 6px; /*角丸コーナー*/
}
/* h5見出しカスタマイズ終了 */

/* h6見出しカスタマイズ開始 */
.article h6{
border:none ;
}
 h6{ 
  background: #f9b891; /*背景カラー*/
  font-size: 18px; /*フォントサイズ*/
  letter-spacing: 2px; /*文字間隔*/

  padding: 8px 8px 8px 8px;
 color: #fff;/*文字色*/
 border: solid 1px #fcc97e;
  line-height: 27px; /*高さ*/
  text-align: center; /*文字位置中央*/
  border-radius: 6px; /*角丸コーナー*/
}
/* h6見出しカスタマイズ終了 */

/* メイン記事に影・線開始 */
#main {

box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
/* メイン記事に影・線終了 */

/* サイドバーに影・線開始 */
#sidebar {
padding: 5px 8px; /*上下　左右　余白*/
box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

/* サイドバーに影・線終了 */


/* サイドバーウィジェットの間隔を空ける開始 */
#sidebar .widget {
    margin:18px 18px 26px 18px;
}
/* サイドバーウィジェットの間隔を空ける終了 */
#sidebar h3{
color: #f29b37;/*文字色*/
 background: #ffffff; /*背景カラー*/
  
font-size: 16px; /*フォントサイズ*/
  
letter-spacing: 2px; /*文字間隔*/
 
 text-align: center; /*文字位置中央*/
padding: 6px 10px; /*背景枠の大きさ*/
 /*線の種類（点線）2px 線色*/
  border-bottom: dashed 2px #c0c0c0;
}

/* メインウィジェットタイトルカスタマイズ開始 */
.main-widget-label {
	padding: 10px;
 font-size: 18px; 
font-weight: bold;
color: #333;
}
/* メインウィジェットタイトルカスタマイズ終了 */

.waku {
    border: #ececec solid 2px;box-shadow: 3px 3px 7px #cccccc; /* 枠線のスタイル 太さ 色 */
  }
.waku2 {
   background: #f3f4f5;/*背景色*/
    border-top: solid 6px #f29b37;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
}

img.waku3 {
	box-shadow: 0px 0px 5px #c0c0c0;
}

/*gb画像の枠線開始*/
.grid-border figure img,
.grid-border figure amp-img{
  border: 1px solid #ccc;
}
/*gb画像の枠線終了*/

/*gb画像のシャドー線開始*/
.grid-shadow figure img,
.grid-shadow figure amp-img{
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
/*gb画像のシャドー線終了*/
.fusen{
  color: #333; /*フォントカラー*/
 
 background: #fef9ed; /*背景カラー*/
 
 font-size: 16px; /*フォントサイズ*/
 
letter-spacing: 1px; /*文字間隔*/
 
 text-align: center; /*文字位置中央*/
 
 margin: 0px 0px 0px 0px;
 
padding: 10px 10px 15px 10px;
 
border-left: 10px solid #f29b37; /*左ラインの太さとカラー*/
  
border-bottom: none #fe619a; /*アンダーラインの太さとカラー*/
 
line-height: 100%;
}

/* リストに下線開始 */
.list-2{
   list-style: none;
   padding:0;
   margin:0;
}
.list-2 li { 
   border-bottom:2px 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:  #ffa952; /* 点の色 */
   position: absolute;
   content: '';
   top:0.9em;
   left: 0.5em;
   width: 7px;
   height: 7px;
   border-radius: 4px;
}
/* リストに下線終了 */

/* リストボックス線開始 */
.list-box-2{
max-width: 600px;
padding: 2em;
margin:0 auto;
border:1px solid;
border-color:#fdc44f; /* 線の色 */
border-radius: 4px;
background: #fef9ed;/* 背景色 */
}

@media screen and (max-width: 768px){
.article ul, .article ol {
    padding-left: 0px; /* スマホ閲覧時の余白リセット(cocoon) */
}
}
/* リストボックス終了 */


/* SNSボタン開始 */
#main .button-caption {
  display: none;
}
#main .sns-share-message{
    font-weight: bold;
    color: #499eda;
}
#main .sns-share-buttons a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 8px;
}
.sns-share-buttons {
    justify-content: center;
}
/* SNSボタン終了 */

/* SNSフォローボタン開始 */
.author-box {
	border: none !important;
	padding: 0 !important;
}

.pwa .author-box {
	text-align: left; /* 文字を左揃えに */
}

.author-box .author-widget-name{
	color: #fff;
	background-color: #f29b37;
	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: 16px solid #f29b37;
	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://pocapoca.sakura.ne.jp/wp/wp-content/uploads/2023/05/profile-background-1.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: 100px;
	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: center;
}

.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: #000000 !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%;
}
/* SNSフォローボタン終了 */

/* ナビメニューに区切り線開始 */
#navi .navi-in > ul > li{
  border-right: 1px solid #fff;
}

#navi .navi-in > ul > li:last-child{
  border-right-width: 0;
}

.navi-in > ul > .menu-item-has-children > a::after{
  right: 10px;
} 

/* ナビメニューに区切り線終了 */

/* ナビメニューデザイン開始 */
nav#navi, .menu-header .sub-menu{
    font-weight: bold;

	 
}

.menu-header .sub-menu .item-label{
    font-size: 80%;
}
.menu-header .item-label{
    color: #ffffff !important;
}
.menu-header .current-menu-item,
.menu-header .current-post-item,
.menu-header .current-menu-ancestor,
.menu-header .current-post-ancestor,
.menu-header .menu-item:hover {
    color: #333 !important;
    border-bottom: 3px solid #ffff00;
    transition: all .2s ease;
}

.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;
}
/* ナビメニューデザイン終了 */

/************************************
** ブログカード
************************************/
.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: #7ebde8; /* 背景色 */
  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: auto;
    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;
  }
}
/* ブログカード終了 */



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

/* アイコンつきボックス開始 */
/* ボックス全体 */
.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 #ababab;/* 線(太さ 種類　色) */
  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;
}
/************************************
** 箇条書き(点)
************************************/
/* 箇条書き */
.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:'';
}
/************************************
** 箇条書き(番号)
************************************/
/* 箇条書き(番号) */
.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;/* 中央寄せ */
}
/* アイコンつきボックス終了 */

/* 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:#ffdd66; /* 左背景色 */
    border-right:1px solid #fff; /* 中央線 */
}
.twice-notice a:last-child{
    background:#ffdd66; /* 右背景色 */
}
.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"; /* 矢印アイコン */
}
/* Cocoon通知エリア2つ終了 */


/* ボックスナビ開始 */
.p-nav{
margin:2em 0;/* 全体外余白 */
padding:0;/* 全体内余白 */
}
.p-nav ul{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
list-style:none;
margin:0;
padding:0;
border:none;
}
.p-nav ul li{
-ms-flex-preferred-size: calc(100%/4);/* 4列 */
flex-basis: calc(100%/4);/* 4列 */
margin:0;
padding:0;
text-align:center;
box-shadow: inset 1px 1px 0 0 #e0ddd1, 1px 1px 0 0 #e0ddd1, 1px 0 0 0 #e0ddd1;/* 罫線 */
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
min-height:40px;/* 最低の高さ */
cursor:pointer;
background:#fff;/* 背景色 */
}
.p-nav ul li:hover{
z-index:2;
box-shadow: inset 2px 2px 0 0 #f9b891, 2px 2px 0 0 #f9b891, 2px 0 0 0 #f9b891, 0 2px 0 0 #f9b891;/* 罫線(マウスホバー) */
transition: 0.35s ease-in-out;
}
.p-nav ul li:before{
content:unset !important;
}
.p-nav ul li a{
display:block;
padding: 0.5em 1em;/* 内余白 */
text-decoration:none;
width:100%;
}
.p-nav ul li a:hover{
background:none;
opacity:1;
}
.p-nav ul li a img{
max-width:50% !important;/* 画像横幅 */
height: auto !important;
filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.1));/* 画像影 */
display: inline-block;
}
.p-nav .p-nav-title{
display: block;
color: #666;/* 文字色 */
font-size: 0.7em;/* 文字大きさ */
letter-spacing: 1px;
font-weight: 600;/* 文字太さ */
text-align: center;
line-height: 1.5;/* 文字行間高さ */
}
/* サイドバー */
.sidebar .p-nav ul li{
-ms-flex-preferred-size: calc(100%/2);/* 2列 */
flex-basis: calc(100%/2);/* 2列 */
}
/* スマホ */
@media screen and (max-width: 559px) {
	.p-nav ul li{
		-ms-flex-preferred-size: calc(100%/2);/* 2列 */
		flex-basis: calc(100%/2);/* 2列 */
	}
}
/* fontawesome */
.p-nav ul li a i,.p-nav ul li a svg{
font-size: 26px;/* アイコン大きさ */
padding: 3px 0;/* アイコン余白 */
color: #f9b891;/* アイコン色 */
display:inline-block;
}
/* ボックスナビ終了 */

/* モバイルナビ横スクロール開始 */
#header-container .navi-in > ul li {
   height: auto;
   font-weight: 600;
   line-height:1.3;
}
#header-container #navi a{
   color:#333; /* 文字色 */
   padding:0.8em 1em;
}
#header-container #navi a:hover{
   color:#333; /* マウスホバー時の文字色 */
}
#header-container .navi-in > ul > .menu-item-has-children > a::after {
   top: 0.8em;
   font-size: 1.2em;
   font-weight: 600;
}
#header-container .sub-menu .caption-wrap{
   padding-left:1em;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap{
   height:auto;
}
@media screen and (max-width: 1030px){
	#header-container .menu-mobile{
		display:none;
	}
	.navi-in > .menu-mobile{
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		overflow-x: scroll;
		white-space: nowrap;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		flex-wrap: nowrap;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
	}
	#header-container #navi a{
		font-size:0.8em;
		padding: 1em 1.2em;
	}
	#header-container .navi-in > ul > .menu-item-has-children > a::after{
		display:none;
	}
	#navi .navi-in > .menu-mobile li {
		height: auto;
		line-height: 1.8;
	}
	.mblt-header-mobile-buttons {
		margin-top: 53px;
	}
}
/* モバイルナビ横スクロール終了 */


/* ページ送りナビの左右を入れ替える */
.pager-post-navi a.prev-post {
    flex-direction: row-reverse;
    padding:10px 5px 10px 10px;
}
.pager-post-navi a.next-post {
    flex-direction: row;
    padding:10px 10px 10px 5px;
}
.pager-post-navi a.next-post .iconfont:before {
	content: '\f053';
}
.pager-post-navi a.prev-post .iconfont:before {
	content: '\f054';
}
.pager-post-navi a.next-post .next-post-title {
	margin: 0 0 0 10px;
}
.pager-post-navi a.prev-post .prev-post-title {
	margin: 0 10px 0 0;
}
@media screen and (min-width: 481px) {
    .pager-post-navi.post-navi-square {
        flex-direction: row-reverse;
    }
    .post-navi-square.post-navi-border a:last-child {
        border-left-width: 1px;
    }
    .post-navi-square.post-navi-border a:first-child {
        border-left-width: 0;
    }
}
/* ページ送りナビの左右を入れ替える終了 */

/* リンクカードのカスタマイズ開始 */
.pb-btn{
  margin: 3em auto;
  max-width:500px;
  width:80%;
  position:relative;
}
.pb-btn p{
  margin:0 !important;
  padding:0 !important;
}
.pb-btn a{
  display:block;
  padding:1.5em 2em 1.3em;
  color:#333 !important;
  background:#FAFAFA;
  border:2px solid #777;
  font-size:16px !important;
  font-weight:600;
  position:relative;
  transition:all 0.2s;
  text-decoration:none;
}
.pb-btn .pb-btn__text{
  max-width: 90%;
  display: block;
  line-height:1.8;
}
.pb-btn .pb-btn__label{
  background: #EE8F81;
  color: #fff;
  display: inline-block;
  padding: 0.5em 1em !important;
  font-size: 12px !important;
  line-height: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  position:absolute;
  top: -12px;
  left: 23px;
  z-index: 1;
}
.pb-btn .pb-btn__add{
  font-size:12px !important;
  letter-spacing:0.5px;
  margin: 7px auto 0 !important;
  max-width:90%;
  color: #EE8F81;
  font-weight:600;
  text-align:center;
}
.pb-btn a:after{
  position: absolute;
  content: "";
  display: inline-block;
  right: 7%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 3px solid #333;
  border-right: 3px solid #333;
  -webkit-transform: rotate(45deg) translateY(-50%);
  transform: rotate(45deg) translateY(-50%);
}
.pb-btn a:hover{
  border-color:#EE8F81;
  transition:0.2s;
  text-decoration:none;
  opacity:1;
}
@media screen and (max-width:600px) {
  .pb-btn{
    width:90%;
  }
  .pb-btn a {
    padding: 1.3em 1.3em 1.2em;
    font-size:14px !important;
  }
  .pb-btn .pb-btn__label{
    left:14px;
  }
  .pb-btn .pb-btn__add{
    text-align:left;
  }
}
/* リンクカード影開始 */

.pb-btn__shadow a{
  box-shadow: 0px 4px 10px rgba(0,0,0,0.09);
  border:unset !important;
}
.pb-btn__shadow:hover{
  transform: translateY(2px);
}
.pb-btn__shadow:hover a{
  box-shadow: 0px 2px 5px rgba(0,0,0,0.09);
}
.pb-btn__shadow:hover .pb-btn__add{
  transform: translateY(-2px);
}
/* リンクカード影終了 */

/* リンクカードラベル変更開始 */
.pb-btn .pb-btn__label-2{
  color: #EE8F81;
  display: inline-block;
  font-size: 12px !important;
  line-height: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  position: absolute;
  top: -24px;
  left: -23px;
  z-index: 1;
  transform: rotate( -5deg);
}
.pb-btn .pb-btn__label-2:before,.pb-btn .pb-btn__label-2:after{
  display:inline-block;
}
.pb-btn .pb-btn__label-2:before{
  content:"＼";
  margin-right:3px;
}
.pb-btn .pb-btn__label-2:after{
  content:"／";
  margin-left:3px;
}
/* リンクカードラベル変更終了 */

/* リンクカード色変更開始 */
.pb-btn__blue a{
  background:#fff3e0;
  border-color:#f29b37;
}
.pb-btn__blue.pb-btn__shadow a{
  box-shadow: 0px 4px 10px rgba(197,208,212,0.5);
}
.pb-btn__blue.pb-btn__shadow a:hover{
  box-shadow: 0px 2px 5px rgba(197,208,212,0.5);
}
.pb-btn__blue .pb-btn__label{
  background: #f29b37;
}
.pb-btn__blue .pb-btn__add{
  color:#f29b37;
}
.pb-btn__blue .pb-btn__label-2{
  color:#f29b37;
}
.pb-btn__blue a:after{
  border-top: 3px solid #f29b37;
  border-right: 3px solid #f29b37;
}
/* リンクカード色変終了 */
/* リンクカードのカスタマイズ終了 */

/*下向きの囲み線吹き出し開始*/
.myballoon-sita {
  color: #333;           /* 文字色をグレーに指定 */
  text-align: center;    /* 文字を中央寄せにする */
 font-size: 13px;
  min-width: auto;      /* 長くなっても大丈夫なようにmin-widthで横幅指定 */
  background: #FFF;      /* 背景色を指定 */
  border: 1px solid #adadad;/* 枠線をつける */
  padding: 4px 8px;          /* 適度な余白 */
  display: inline-block; /* widthを効かせるために指定 */
  position: relative;    /* 基準値とする */
border-radius: 10px;
}

.myballoon-sita::after {
  content: '';           /* 疑似要素に必須 */
  position: absolute;    /* 相対位置に指定 */
  bottom: 0;             /* 下から0pxの位置に指定。 */
  left: 50%;             /* 左から50%の位置に指定 */
  width: 10px;           /* 四角形の横幅を指定 */
  height: 10px;          /* 四角形の高さを指定 */
  background: #FFF;      /* 背景色を指定 */
  border-right: 1px solid #adadad; /* 右側にborder */
  border-bottom: 1px solid #adadad;/* 下側にborder */
  transform: translate(-50%,55%) rotate(45deg); /* 表示位置を左方向に半分戻し、下方向に移動。かつ45度時計回りに回転 */
  transform-origin:center center; /* 回転の基準位置を中心に指定 */
}
/*下向きの囲み線吹き出し終了*/

/* スマホとPC両方共0.9秒に変更 */
#bfb_content_sp,#bfb_content_pc{
transition: .9s;	
}

/*YARPPのカスタマイズ開始*/
.related-post{
 width:100%;	
 height:100%;
}
div.yarpp-related {
    overflow:hidden;
    }
div.yarpp-related h3 { 
    padding-left:12px;
    font-size: 0.875em;
    border-bottom:dotted 1px #fdc44f;
    border-top:dotted 1px #fdc44f;
    border-left:solid 8px #fdc44f;
    border-right:none;
    background-color:#fef9ed;
    }
div.related-entry :not(title) {
text-align: center;
}
.related-entry {
    vertical-align: top;
    float: left;
    width:106px;
    font-size: 0.75em;
    min-height: 210px; 
    margin:0px 17px 0px;
    }

.related-entry img {
    padding:4px;
    margin-bottom:6px;
    border: #ccc 1px solid;
    width:106px;
    height:106px;
	border-radius: 4px;
}

@media screen and (max-width: 480px){
.related-entry {
    vertical-align: top;
    float: left;
    width:110px;
    font-size: 0.75em;
    min-height: 190px; 
    margin:0px 26px 0px;
    }
	div.related-entry :not(title) {
text-align: center;
}
.related-entry img{
    padding:4px;
    margin-bottom:6px;
    border: #ccc 1px solid;
    width:106px;
    height:106px;
}
}
/*YARPPのカスタマイズ終了*/



/*記事一覧設定開始*/
.ect-vertical-card {
justify-content:space-between;
}

.ect-2-columns .entry-card-wrap {
width:calc((100% - 1.3em) / 2);
}
	
.entry-card-wrap { 
	 overflow:hidden;
margin-bottom: 1em !important;
	 padding: 4px 6px;
  background-color: white;
   border-radius: 6px;
   box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
	}
.entry-card-title {
    font-size: 16px;
	font-color: #333333;
font-weight: normal;
	margin:0px 17px 10px ;
  }
/*記事一覧アイキャッチ画像の角丸め*/
.entry-card .entry-card-thumb {
  text-align: center;
	padding: 10px 0px;
}
.entry-card img {
	border-radius: 10px;
	 max-width: 93%;
	}
@media screen and (max-width: 480px){
.entry-card-title {
font-size: 16px;
	font-color: #333333;
	margin:0px 14px 8px ;
 }
.entry-card .entry-card-thumb {
  text-align: center;
	padding: 10px ;
}
.entry-card img {
	border-radius: 10px;
	 max-width: 100%;
}
}

/*記事一覧設定終了*/	

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

@media screen and (min-width: 569px){	
  .br-pc { display:block; }
  .br-sp { display:none; }
}

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


/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
	
/* メイン記事に影・線開始 */
#main {

box-shadow: none;
}
/* メイン記事に影・線終了 */
	
/* リストボックス開始 */
 /* カスタマイズ紹介記事の 6 番目のリストのみ左余白を 0 にする */
  .article .list-6 {
    padding-left: 0;
  }
/* リストボックス終了 */
	
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	
/*スマホの時だけ改行なし*/
@media screen and (max-width: 480px) {
 .hidden-mobile{
  display : none ;
}
}

	
/* アフィリンク サイドバーで非表示開始 */
.content-ad {
   display: none;
}
/* アフィリンク サイドバーで非表示終了 */	
	
 .br-pc { display:block; }
  .br-sp { display:none; }	
	
.page-numbers {
  width: 48px;
  height: 48px;
  line-height: 48px;
}	
	/* ヘッダーロゴを左に開始 */
	.header-in .logo {
text-align: left;
 margin: 5px 0 0 12px;	
}
	.header-in .tagline {
text-align:left;
margin: 5px 0 0 18px;			
}
/* ヘッダーロゴを左に終了 */

	/* ナビメニューに区切り線無開始 */
#navi .navi-in > ul > li{
  border-right:none;
}
/* ナビメニューに区切り線無終了 */
	
	/* Cocoon通知エリア2つ開始 */
 .twice-notice a{
        font-size:0.7em; /* 文字サイズ */
	 color:#333; /* 文字色 */
    }
    .twice-notice a:after{
        transform: translateY(-50%);
    }

/* Cocoon通知エリア2つ終了 */
	
	/* スマホアイコンつきボックス開始 */
/* ボックスタイトル */
.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 #ababab;/* 線(太さ 種類 色) */
}
/* 吹き出し(三角) */
.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 li:before{
     top:8px;/* 上からの距離 */
   }

 /* 箇条書き(番号) 行 */
  .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;/* 上からの距離 */
  }
/* スマホアイコンつきボックス終了 */
}



@media screen and (max-width: 568px){	
  .br-pc { display:none; }
  .br-sp { display:block; }

@media screen and (min-width: 569px){	
  .br-pc { display:block; }
  .br-sp { display:none; }
}
	
	/* ヘッダーロゴを左に開始 */
	.header-in .logo {
text-align: left;
 margin: 5px 0 0 12px;		
}
	.header-in .tagline {
text-align:left;
margin: 5px 0 0 18px;			
}
/* ヘッダーロゴを左に終了 */
	
	/* ナビメニューに区切り線無開始 */
#navi .navi-in > ul > li{
  border-right:none;
}

/* ナビメニューに区切り線無終了 */
}

