@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*メインカラー#b4bd4f　背景#fcfaf7*/
* {
	font-family:Noto Sans JP,"sans-serif";
}
a:hover {
	color: #999;
}
/*　トップページの新着記事,プロフィールフィードボタン消す　*/
/*
  div#list-wrap .list-new-entries {
  display: none;
}
*/

.sf-profile,.grecaptcha-badge {
  display: none;
}
.content p {
    line-height: 2;
}
/* main */
.main {
}
.footer {
		background-color: #fcfaf7;
}
.navi-footer-in a:hover {
	background: none;
	text-decoration: underline;
}
.appeal {
    background-position: top center;
    background-repeat: no-repeat;
    background-size: auto;	
}
.content {
	margin-top: 0;
}

.list {
	display: block;
}
.list-title-in {
	color: #b4bd4f;
}
.list-title-in:before, .list-title-in:after {
	background-color: #b4bd4f;
}
input[type=submit] {
	background-color:#b4bd4f;
}
.content-in {
	background:#FFF;
}
.widget-entry-card {
	font-size: 14px;
}
.widget-entry-cards:not(.large-thumb-on) .card-title {
	padding: 0 5px;
	-webkit-line-clamp: 3;
}

.rect-mini-card .related-entry-card-thumb {
    width: 120px;
	height: 68px;
}
.widget-entry-cards .a-wrap {
	padding: 0;
}
.widget-entry-card {
	padding: 7px;
	line-height: 1.5;
}
p.live-info {
	margin-bottom: 0;
}
/****************************
****　boxカラー指定
****************************/
/*プライマリー*/
.primary-box{
	color: #333;
background-color: #e1f0ff;
	padding: 30px 15px;
}
/*セカンダリ*/
.success-box{
	color: #333;
background-color: #efefef;
	padding: 30px 15px;
}
/*インフォ*/
.info-box{
	color: #333;
background-color: #e9fcff;
	padding: 30px 15px;
}
/*サクセス*/
.success-box {
	color: #333;
background-color: #e6ffcc;
	padding: 30px 15px;
}
/*ワーニング*/
.warning-box {
	color: #333;
background-color: #fff7dd;
	padding: 30px 15px;
}
/*デンジャー*/
.danger-box{
	color: #333;
background-color: #fff7f8;
	padding: 30px 15px;
}
/* CTA */
.cta {
    padding: 40px 0;
    background: repeating-linear-gradient(45deg, #fcfaf7, #fcfaf7 4px, #fff 0, #fff 8px);
}
.cta .btn-wrap a {
	margin-bottom: 0;
}

.blank-box {
	border: 1px solid #eee;
    background: #fafafa;
}
.blank-box.bb-tab {
	margin-top: 3em;
}

.widget-entry-cards:not(.large-thumb-on) .card-title {
    padding: 0 25px 0 5px;
}
.tab-caption-box-content {
	padding: 20px;
}

/****************************
****　サイドメニュー
****************************/
.sidebar #toc-4 {
	overflow-y: scroll;
	max-height: 500px; 
}
/****************************
****　リスト　マーカー
****************************/
.wp-block-list li::marker {
  color: #ffc107;
  font-size: 1.3em;
}
/****************************
****　hoverカラー指定
****************************/

.a-wrap .blogcard:hover,
.e-card:hover,
.widget-sidebar ul li a:hover,
.ect-vertical-card a:hover {
	background:#fcf8f4;
}
#footer-in .widget-entry-cards .a-wrap .post:hover,
.a-wrap:hover {
	background: #fff;
}
.textwidget a img:hover {
	opacity:0.7;
}
/****************************
****　写真のキャプション
****************************/
figcaption {
    font-size: 0.9em;
    opacity: 0.8;
    padding: 10px 0 0 0;
}

/****************************
****　メディア中央揃え
****************************/
.block-center iframe {
  margin-left: auto !important;
  margin-right: auto !important;
}
/****************************
****　タグ　角丸
****************************/
.tagcloud a {
	border-radius: 50px; 
}
.tagcloud a:hover {
	background:#b4bd4f;
	color:#FFF;
}
/****************************
****　アイキャッチ　カテゴリラベル　位置
****************************/
.eye-catch .cat-label {
    right: 0.4em;
    top: 0.4em;
    bottom: auto;
    left: auto;
}
/*　トップページ 　*/
.cat-label {
	left: inherit;
    right: 0.24em;
}
/****************************
****　ブログカード　サイズ変更
****************************/
.blogcard-wrap {
    padding: 20px 0;
    width: 100%;	 
}
/****************************
****　ヘッダー　ロゴ　グローバルナビ　フッター
****************************/
#navi {
    background-color: #fcfaf8;
    height: 120px;
}
.header-container-in.hlt-top-menu .tagline {
	display:block;
	text-align: left;
	font-size: 13px;
	margin: 0 1em;
}

.header-container-in.hlt-top-menu .logo-header {
	padding-top: 3px;
}
.header-container-in.hlt-top-menu .logo-header img {
    max-height: 45px;
    height: auto;
}
.header-container-in.hlt-top-menu .logo-header .site-name {
    text-align: left;
}
.navi {
	margin-top: 0;
}
.navi-in > ul {
	justify-content: right;align-content}
.navi-in > ul li {
    display: block;
    width: auto;
    padding: 10px;
    position: relative;
	margin-top: 55px;
	height: auto;
	line-height: 1.2;
}
#navi .navi-in a, #navi .navi-in a:hover {
	color:var(--cocoon-text-color);
	font-size: 15px;
}
.navi-in a {
            padding: 0 5px 5px 5px;
            text-decoration: none;
            position: relative;
        }

        .navi-in a::before {
            background: #b4bd4f;
            content: '';
            width: 100%;
            height: 1px;
            position: absolute;
            left: 0;
            bottom: 0;
            margin: auto;
            transform-origin: right top;
            transform: scale(0, 1);
            transition: transform .3s;
        }

        .navi-in a:hover::before {
            transform-origin: left top;
            transform: scale(1, 1);
        }

/*.fixed-header */
.fixed-header #navi {
	height: 80px;
}
.fixed-header .header-container-in.hlt-top-menu .tagline  {
	display: none;
}

.fixed-header .navi-in > ul li {
	margin-top: 25px;
}

/****************************
****　footer　プロフィール
****************************/
.author-box {
	background: #FFF;
}
.author-box p {
	font-size: 15px;
	line-height: 1.8;
}
/****************************
****　カテゴリリンク背景
****************************/
.cat-link, .cat-label {
	background:#483D28;
	}
/****************************
****　バス　地下鉄　徒歩　タクシー　アイコン
****************************/
.bus::before{
	font-family: "Font Awesome 5 Free";
	content: "\f55e";
	font-weight: 900;
	padding-right: 5px;
	color: #ffc107;
}
.train::before{
	font-family: "Font Awesome 5 Free";
	content: "\f239";
	font-weight: 900;
	padding-right: 5px;
	color: #ffc107;
}
.walk::before{
	font-family: "Font Awesome 5 Free";
	content: "\f554";
	font-weight: 900;
	padding-right: 5px;
	color: #ffc107;
}
.taxi::before{
	font-family: "Font Awesome 5 Free";
	content: "\f1ba";
	font-weight: 900;
	padding-right: 5px;
	color: #ffc107;
}
.star::before{
	font-family: "Font Awesome 5 Free";
	content: "\f005";
	font-weight: 900;
	padding-right: 5px;
	color: #ffc107;
}
/****************************
****　トップページ もっと見る
****************************/
.ect-3-columns {
  justify-content: space-around;
}

/*もっと見るボタン*/
.list-more-button-wrap {
    margin: 20px 0 80px;
}
.list-more-button {
	border-radius: 25px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 260px;
    padding: 6px 25px;
    color: #fff;
    transition: 0.3s ease-in-out;
    font-weight: 500;
	border: 1px solid #ffc107;
	background: #ffc107;
}
.list-more-button:hover {
    background: #fff;
    color: #ffc107;
}
.list-more-button:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;

}
.list-more-button:hover:after {
    border-color: #ffc107;
}

/****************************
****　目次
****************************/
.toc-list li::before {
	color:#b4bd4f;
	font-weight:bold;
}
.toc-list li::marker {
	color: #929f00;
	font-weight: bold;
}
.toc-list ol:nth-child(n+1) li::marker {
	font-weight: normal;
}
.toc-list li ol li:nth-child(n+1)::before {
	color:#6c7c4d;
	font-weight: normal;
}
.toc-list li {
	border-bottom: 1px solid #ddd;
	padding: 10px 0;
}
.toc-list li li:nth-child(n+1),
.toc-list li:last-child {
	border-bottom: none;
}
.toc-list li li {
	padding: 5px 0 0 0;
}
.toc-title {
	color: #929f00;
	font-weight: bold;
}
.toc-title::after {
	color: initial;
	font-weight: normal;
}
/****************************
****　ボックスメニュー
****************************/
.box-menu {
	padding: 1em;
}
/****************************
****　SNSボタン
****************************/
.sns-share-buttons {
  justify-content: center;
}

.sns-share-buttons a {
  font-size: 18px;
}

.sns-share-buttons a .button-caption {
  display: none;
}

.sns-share-buttons a .share-count {
  right: 50%;
  bottom: -16px;
  transform: translateX(50%);
  color: #aaa;
}
.bc-brand-color-white.sns-share a {
  border: none;
  width: auto;
  padding-left: 16px;
  padding-right: 16px;
}

.bc-brand-color-white.sns-share.ss-high-and-low-cl a .social-icon,
.bc-brand-color-white.sns-share.ss-high-and-low-lc a .social-icon {
  font-size: 20px;
}

.bc-brand-color-white .sns-share-buttons a {
  font-size: 20px;
}
.sns-share.ss-high-and-low-lc a .social-icon.button-caption,
.sns-share.ss-high-and-low-cl a .social-icon.button-caption,
.sns-share.ss-high-and-low-lc a .button-caption.button-caption,
.sns-share.ss-high-and-low-cl a .button-caption.button-caption {
  display: none;
}
.sns-share-message {
	position: relative;
}
.sns-share-message::before,
.sns-share-message::after {
    background-color: currentcolor;
    bottom: 0;
    content: "";
    display: block;
    height: 1.5em;
    position: absolute;
    width: 1px;	
}
.sns-share-message::before {
	left: 40%;
    -webkit-transform: rotate(-40deg);
    transform: rotate(-40deg);
}
.sns-share-message::after {
	right: 40%;
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
}
.sns-share.ss-col-3 .sns-buttons {
	column-gap: 5%;
}
@media screen and (max-width: 1023px) {
  .bc-brand-color-white.sns-share a {
    width: 45px !important;
  }
	.sns-share-message::before,
	.sns-share-message::after {
		display: none;
	}
	.sns-share.ss-col-3 .sns-buttons {
	column-gap: 0.75%;
  }
}
.entry-categories-tags {
	margin-bottom: 30px; 
}
/****************************
****　フォローボタン
****************************/
.bc-monochrome .sns-buttons a,
.bc-brand-color .sns-buttons a {
  border-radius: 50%;
}

.bc-monochrome .sns-follow-buttons a,
.bc-brand-color .sns-follow-buttons a {
  border-radius: 50%;
}

.sns-follow-buttons {
  justify-content: center;
}

.sns-follow-buttons a {
  width: 45px;
  font-size: 20px;
  margin-right: 8px;
	background: #90C31F !important;
}

.sns-follow-buttons a:last-child {
  margin-right: 0;
}

/****************************
****　h1,h2,h3,h4,h5
****************************/
.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
    line-height: 1.5;
    font-weight: bold;
}
.entry-title, .archive-title {
	font-size: 24px;
}
.article h2 {
position: relative;
    margin: 3em 0 2em;
    border-bottom: none;
    padding: 20px 10px 20px 20px;
    clear: both;
    font-size: 24px;
    font-weight: bold;
    background: #fdf3dd;
    border-left: 5px solid #ffc107;
}
.article h3 {
    position: relative;
    padding: 15px 10px 15px 20px;
    margin: 3em 0 2em;
    border-bottom: none;
    border-top: none;
    border-left: 5px solid #ffc107;
    border-right: none;
	color: #555;
    font-weight: 600;
    font-size: 22px;
}

.article h4 {
    margin: 3em 0 2em;
    padding: 20px 0;
    border-bottom: #ffc107 solid 2px;
    border-top: #fff solid 1px;
    font-size: 20px;
    color: #555;
}
.article h5 {
    margin: 2em 0 1em;
	padding: 10px 0;
	font-size: 18px;
	color: #555;
}
h2.entry-card-title {
	font-size: 16px;
}
/****************************
****　関連記事・コメントh2
****************************/
.under-entry-content h2 {
	font-size: 18px;
}
.related-entry-heading, .comment-title {
	position: relative;
  padding: 5px 30px;
  background: #fcfaf7;
}
.related-entry-heading::after, .comment-title::after {
  position: absolute;
  left: 0px;
  top: 0px;
  content: '';
  box-shadow: 1px 1px 1px #afaf49;
  border-style: solid;
  border-width: 0 0 20px 20px;
  border-color: #fff #fff #b4bd4f;
}
.rect-mini-card .related-entry-card-title {
    font-size: 14px;
}
.related-entry-card, .entry-card {
    padding: 5px;
}
.pager-post-navi.post-navi-square a:hover {
	opacity: 0.7;
}
/****************************
****　コメント
****************************/
#commentform .comment-form-comment #comment,
	.comment-btn.key-btn {
 background-color:#fff;
 border: 1px solid var(--cocoon-x-thin-color);
}
#commentform .form-submit input[type='submit'] {
 border:none;
 width: 60%;
 padding: 1.2em 1em;

}
#commentform .form-submit{
 text-align:center;
}
#commentform .form-submit input[type='submit']:hover,
.comment-btn.key-btn:hover {
 opacity:0.7;
}
.comment-btn.key-btn {
	border: 1px solid #b4bd4f;
	width: 100%;
	margin: 0 auto;
	font-size: 16px;
}
.st-comment-content {
	font-size: 14px;
}
/****************************
****　ページャー
****************************/
.pager-post-navi {
	border:1px solid #f4f5f7;
}
.pager-post-navi a {
	line-height: 1.5;
}
/****************************
****　ウィジェット・サイドバー
****************************/
.sidebar h2, .sidebar h3, .widget h3 {
  position: relative;
  font-size: 16px;
  font-weight: bold;
  padding: 5px 10px;
  margin-bottom: 1em;
	background: none;
}
.sidebar h2::before, .sidebar h3::before, .widget h3::before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 120px;
  height: 3px;
  background: #ffc107;
  z-index: 1;
}
.sidebar h2::after, .sidebar h3::after, .widget h3::after {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: #F0F0F0;
}
/* sideber */
.sidebar{
}
.sidebar,#breadcrumb {
	background: none;
}
.sidebar .toc-widget-box .toc-list {
	font-size: 14px;
}
.sidebar .toc-widget-box .toc-list li:before {
	margin-left:-1.2em;
}
.sidebar .toc-widget-box .toc-list li li:nth-child(n+1):before {
	margin-left:0;
}
.sidebar .toc-widget-box .toc-title {
	display: none;}

/*フッター右番外編*/
.textwidget p {
	font-size: 12px;
}
/****************************
****　テーブル
****************************/
figure.wp-block-table.info_table table {
	width: 100%;
}
.info_table table tr td:first-child {
	width: 33.33%;
}
.info_table table tr td:nth-child(2) {
	width: 66.66%;
}

/****************************
****　アプリーチ用CSS
****************************/
.appreach {
  text-align: left;
  padding: 10px;
  border: 1px solid #7C7C7C;
  overflow: hidden;
	background:#FFF;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach a:after {
  display: none;
}
.appreach__icon {
  float: left;
  border-radius: 10%;
  overflow: hidden;
  margin: 0 3% 0 0 !important;
  width: 25% !important;
  height: auto !important;
  max-width: 120px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
}
.appreach__detail:after {
  content: "";
  display: block;
  clear: both;
}
.appreach__name {
  font-size: 16px;
  line-height: 1.5em !important;
  max-height: 3em;
  overflow: hidden;
}
.appreach__info {
  font-size: 12px !important;
}
.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}
.appreach__posted a {
  margin-left: 0.5em;
}
.appreach__links {
  float: left;
  height: 40px;
  margin-top: 8px;
  white-space: nowrap;
}
.appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px;
}
.appreach__gplink img {
  height: 40px;
  width: 134.5px;
}
.appreach__star {
  position: relative;
  font-size: 14px !important;
  height: 1.5em;
  width: 5em;
}
.appreach__star__base {
  position: absolute;
  color: #737373;
}
.appreach__star__evaluate {
  position: absolute;
  color: #ffc107;
  overflow: hidden;
  white-space: nowrap;
}


/************************************
**モバイルスライドインメニュー
************************************/
span.fas.fa-times::before{
font-family: "Font Awesome 5 Free";
content: "\f00d";
color:#b4bd4f;
}
span.fas.fa-times::after{
	content: "CLOSE";
	color: #b4bd4f;
    font-weight: normal;
    padding-left: 0.2em;
}
ul.menu-drawer:after {
background: white;
}

.menu-drawer li{
	padding:0;
	border-bottom: 1px solid #F0F0F0;
}
.menu-drawer a{
background-color:#ffffff;
color:#545454;
margin: .5em 0;
}
.menu-drawer a:hover{
background-color:#f7f7f7;
}
.menu-drawer .sub-menu {
padding:0;
}
.menu-drawer .sub-menu li{
font-size: .9em;
}
.menu-drawer .sub-menu li a::before {
margin:0 .5em 0 1em;
}
.menu-close-button {
    display: block;
    cursor: pointer;
    text-align: center;
    font-size: 1.5em;
	padding: 20px;
}.mobile-header-menu-buttons {
	background: none;
}
.logo-menu-button img {
	display: none;
}
@media screen and (max-width: 1023px){
.search-menu-button {
    visibility: hidden;
}
}
.navi-menu-content {
  left: auto;
  right: 0;
  transform: translateX(105%);
}
.mobile-menu-buttons .menu-button {
    position: relative;
    width: 100%;
    cursor: pointer;
}
@media screen and (max-width: 1023px){
.navi-menu-button {
    margin: 15px;
    background: #b4bd4f;
	color: #FFF;
    border-radius: 9999px;
    padding: 3px;
}
	.has-logo-button .menu-button {
    width: 50px;
    height: 50px;
}
	.mobile-header-menu-buttons {
    top: 0;
    bottom: auto;
    justify-content: space-around;
    min-width: 90px;
    box-shadow: none;
}
}
/************************************
** table
************************************/
table tr:nth-of-type(2n+1) {
    background-color: #fff;
}
table tr td:nth-of-type(2n+1) {
    background-color: #fcfaf7;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
	#header-container {
		padding: 15px 0;
	}
	#navi {
		height: auto;

	}
	body:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
    margin-top: 0;
}
	.admin-bar:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
		margin-top: 0;
	}
	#appeal {
		display: none;
	}

}
/*834px以下*/
@media screen and (max-width: 834px){
.header-container-in.hlt-top-menu .logo-header .site-name {
    text-align: center;
}
.navi-footer-in > .menu-footer li.menu-item {
    width: auto;
    border: 0;
    margin: 2px 4px;
    display: flex;
    flex: 1 1 auto;
    text-align: center;
}
	main.main {
		padding: 15px;
		margin: 0;
	}
.list-more-button-wrap {
    margin: 20px 0 20px;
}
#list, .list-wrap {
    margin-bottom: 0;
}
.article h3 {
    font-size: 20px;
	font-weight:bold;
 }
.article h4 {
    font-size: 18px;
	font-weight:bold;
 }
}

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