@charset "UTF-8";

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


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



/* ==================================================
   ヘッダー
================================================== */
#header-in {
	margin-top: 15px;
}

#header .tagline {
	font-size: 16px;
	font-weight: bold;
	color: #555;
}

.logo-image {
	padding: 4px 0;
	font-size: inherit;
}

@media screen and (max-width: 480px) {
	/* サイト紹介文 */
	.tagline {
		margin-bottom: 20px;
	}
}

/* ヘッダーのキャッチフレーズをトップページへのリンクにする用のcss */
.tagline-home-link {
	color: inherit;
	text-decoration: none;
}

.tagline-home-link:hover {
	color: inherit;
	text-decoration: none;
}

/* ==================================================
   パンくずリスト
================================================== */
.breadcrumb {
	margin: .4em .4em 1em 0;
	color: var(--cocoon-x-pallid-text-color);
	font-size: 13px;
}



/* ==================================================
   フッター
================================================== */
.footer-bottom {
	margin-top: 0;
	padding: 0;
}



/* ==================================================
   サイドバー
================================================== */

/* サイドバー「カテゴリー」見出し */
#sidebar h2 {
	background: #fff7f7 !important;
}


.sidebar h3 {
	background: #fff;
	position: relative;
	margin-top: 20px;
	padding: 4px 0 10px 24px;
	color: #4f4036;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	border-bottom: 1px solid #e7e2de;
}

/* 左の縦線 */
.sidebar h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 6px;
	height: calc(100% - 8px);
	background: #6a523f;
}

/* サイドの個別要素の下にスペース調整 */
#sidebar .widget-sidebar {
	margin-bottom: 30px;
}

/* リストのスペース・文字サイズ変更 */
.widget_block ul li a,
.widget_categories ul li a,
.side-menu-about a {
	padding: 2px 0 2px 15px;
	
	text-decoration: none;
	color: var(--cocoon-text-color);
}

/* サイドバーのリンク：ホバー時は背景なし＋赤文字 */
#sidebar a:hover {
	background: transparent !important;
	background-color: transparent !important;
	color: #c9030e !important;
	box-shadow: none !important;
	transform: none !important;
}

#sidebar a:hover * {
	color: #c9030e !important;
}

/* 子カテゴリーの先頭に矢印 */
.cat-item .children a::before {
	font-family: "Font Awesome 5 Free";
	content: '\f105';
	font-weight: 900;
	font-size: .8em;
	margin-right: 6px;
	opacity: .2;
}

/* 最近の投稿 */
#recent-posts-2 {
	font-size: 16px;
}

#recent-posts-2 .post-date {
	padding-top: 0;
}

.widget_recent_entries ul li a {
	padding-bottom: 0px;
}

.body .wp-block-categories {
	margin-bottom: 0;
}



/* ==================================================
   自己紹介・著者情報
================================================== */
.author-description,
.author-box .author-name {
	font-size: 16px;
}

.article-footer .author-widget-name {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 15px;
}



/* ==================================================
   記事ヘッダー・タイトル・PR表記
================================================== */
.entry-title,
.archive-title {
	margin-bottom: 24px;
}

.article-header .date-tags {
	margin-bottom: 2em;
}

/* [PR] 記事内に広告が含まれています */
.pr-label-s {
	left: 20px;
	border: none;
	font-size: 14px;
	color: var(--cocoon-x-pallid-text-color);
	padding: 0 0 0 4px;
}

@media screen and (max-width: 480px) {
	.pr-label-s {
		left: 8px;
	}

	.entry-title {
		font-size: 26px;
		padding: 10px 0 5px 0;
	}
}



/* ==================================================
   記事本文
================================================== */

/* 見出し */
.article h2 {
	font-size: 22px;
	margin-top: 40px;
	margin-bottom: 20px;
	padding: 25px;
	border-left: solid 5px #c9252e;
	background-color: #fdf5f6;
	color: #333;
}

.article h3 {
	border: none;
	padding: 0.2em 0.5em;
	border-left: solid 5px #c9252e;
	border-bottom: 1px dashed rgba(201, 3, 14, .5);
}

.article h4 {
	border: none;
	border-bottom: dashed 1px rgba(201, 3, 14, .5);
}

.article h5,
.article h6 {
	border: none;
}

/* ソースコード改行 */
.entry-content pre {
	white-space: pre-wrap;
	word-break: break-all;
}

/* 小さい文字用 */
.mini {
	font-size: 80%;
	padding-bottom: 10px;
}

@media screen and (max-width: 480px) {
	/* 記事の行間 */
	.entry-content > * {
		line-height: 1.5em;
	}
}



/* ==================================================
   引用
================================================== */
blockquote {
	position: relative;
	padding: 2em 3em;
	box-sizing: border-box;
	font-style: italic;
	color: #555;
	background: #fdf5f6;
	border: 0;
	margin-bottom: 0 !important;
	border-radius: 10px;
}

blockquote::before {
	display: inline-block;
	position: absolute;
	top: 15px;
	left: 20px;
	font-family: "Font Awesome 5 Free";
	content: '\f10d';
	font-weight: 900;
	color: #c9252e;
	font-size: 20px;
	line-height: 1;
}

blockquote::after {
	display: inline-block;
	position: absolute;
	bottom: 15px;
	right: 20px;
	text-align: center;
	font-family: "Font Awesome 5 Free";
	content: '\f10e';
	font-weight: 900;
	color: #c9252e;
	font-size: 20px;
	line-height: 1;
}

blockquote p {
	font-size: 0.95em;
	line-height: 1.6em;
}

blockquote cite {
	position: relative;
	z-index: 3;
	display: block;
	text-align: right;
	color: #888888;
	font-size: 0.9em;
}



/* ==================================================
   目次
================================================== */
.entry-content .toc {
	margin-top: 70px;
	border-radius: 15px;
	padding-bottom: 30px;
	margin-bottom: 100px;
	border-color: #ccc;
}

.toc-title {
	font-size: 16px;
	font-weight: 600;
}

#toc .toc-list li {
	margin-bottom: 0px;
}

#toc .toc-list ol {
	margin-top: 0px;
}



/* ==================================================
   Google Map・YouTube
================================================== */

/* Googleマップ */
.entry-content iframe[src*="google.com/maps/embed"] {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    border: 0;
}

/* CocoonのYouTubeを記事幅いっぱいに表示 */
.entry-content .video-container {
    width: 100%;
    max-width: none;
}


/* ==================================================
   Table
================================================== */
table caption {
	font-weight: bold;
}

table th,
table td {
	text-align: center;
	border: 1px solid #ddd;
}

table th {
	background-color: #fdf5f6;
}

table tr:nth-of-type(2n+1) {
	background-color: #fafbfc;
}

/* 文字寄せ */
.tbl-col1-left tr td:nth-child(1),
.tbl-col2-left tr td:nth-child(2),
.tbl-col3-left tr td:nth-child(3),
.tbl-col4-left tr td:nth-child(4) {
	text-align: left;
}

.tbl-col1-right tr td:nth-child(1),
.tbl-col2-right tr td:nth-child(2),
.tbl-col3-right tr td:nth-child(3),
.tbl-col4-right tr td:nth-child(4) {
	text-align: right;
}

/* 海抜用 */
.asl-tbl tr:nth-child(1) th:nth-child(1) {
	width: 40%;
}

.asl-tbl tr:nth-child(1) th:nth-child(2) {
	width: 20%;
}

.asl-tbl tr:nth-child(3) th:nth-child(3) {
	width: 50%;
}

.asl-tbl tr td:nth-child(1),
.asl-tbl tr td:nth-child(3) {
	text-align: left;
}

/* 海抜用2 */
.asl-tbl2 tr:nth-child(1) th:nth-child(1) {
	width: 70%;
}

.asl-tbl2 tr:nth-child(1) th:nth-child(2) {
	width: 30%;
}

.asl-tbl2 tr td:nth-child(1) {
	text-align: left;
}

/* 店舗紹介用 */
.store-intro tr td:nth-child(1) {
	width: 25%;
	text-align: center;
}

.store-intro tr td:nth-child(2) {
	width: 75%;
	text-align: left;
}



/* ==================================================
   記事一覧カード
================================================== */

/* カードラベル非表示 */
.cat-label {
	display: none;
}

/* 画像サイズ */
.entry-card-thumb {
	width: 230px;
}

/* 画像横余白 */
.entry-card-content {
	margin-left: 250px;
}

/* 下ライン */
.entry-card {
	padding-bottom: 9px;
	border-bottom: 1px solid #eee;
}

/* 見出し文字サイズ */
h2.entry-card-title {
	font-size: 20px;
	line-height: 1.3;
	margin-bottom: 10px;
}

/* カードのスペース調整 */
.entry-card-wrap {
	padding: 0;
	margin-bottom: 6px;
}

/* カードhover */
.a-wrap:hover {
	color: #c9030e;
	background: none;
}

/* 掲載日の時計アイコンを消す */
.entry-card-info span.post-date > .fa-clock {
	display: none;
}

/* 投稿日のフォントサイズ・色 */
.entry-date {
	font-size: 14px;
	color: #333 !important;
}

/* 掲載日の下に余白追加 */
.entry-card-meta {
	bottom: 13px;
}

@media screen and (max-width: 480px) {
	/* カテゴリーラベル */
	.cat-label {
		font-size: 17px;
	}

	/* 画像サイズを100%に */
	.entry-card-thumb {
		width: 100%;
	}

	/* 見出し文字サイズ */
	h2.entry-card-title {
		font-size: 24px;
		margin-bottom: 16px;
		clear: both;
	}

	/* 本文文字サイズ */
	.e-card-snippet {
		font-size: 22px;
	}

	/* 日付の位置・余白 */
	.entry-card-meta {
		bottom: 0;
		position: static;
	}

	.e-card-info > span {
		margin-top: 10px;
	}
}



/* ==================================================
   ブログカード
================================================== */
.blogcard {
	color: #555;
	border-color: rgba(201, 3, 14, .2) !important;
	background-color: rgba(201, 3, 14, .02);
	border-width: 1px;
}

.blogcard .blogcard-snippet {
	color: #333;
}

.blogcard-footer {
	display: none;
}

.blogcard:hover {
	color: #c9030e;
	border-color: rgba(201, 3, 14, .5) !important;
	background-color: rgba(201, 3, 14, .02);
}



/* ==================================================
   ページネーション
================================================== */
.pagination-next-link,
.pagination .page-numbers,
.numbers.dots {
	font-size: 19px;
	font-weight: 500;
	color: #444;
	border-color: rgba(201, 3, 14, .2);
	background-color: rgba(201, 3, 14, .02);
}

/* 次へのリンクボタン */
.pagination-next-link {
	width: 250px;
	margin: auto;
	padding: 7px;
	border-radius: 30px;
}

/* ナンバーリンクを丸に */
.pagination .page-numbers {
	border-radius: 50%;
}

/* カレントボタン、各リンクホバー時のカラー変更 */
.pagination .page-numbers:hover,
.pagination-next .pagination-next-link:hover,
.pager-numbers .page-numbers:hover,
.pager-links .page-prev-next:hover,
.pagination .current,
.pager-links span {
	background-color: #c9030e;
	color: #fff;
}



/* ==================================================
   広告
================================================== */
#main .ad-area {
	text-align: center;
	padding-top: 40px;
	padding-bottom: 40px;
}



/* ==================================================
   カテゴリー別アフィリエイトリンク
   記事本文の最後に自動表示
================================================== */
.kichizu-category-affiliate {
	margin: 80px 0 20px;
}



/* ==================================================
   アフィリエイト商品リンクカード
================================================== */

/* フォントカラー変更、アンダーライン非表示 */
.amazon-item-title a,
.amazon-item-review a {
	color: #1967d2;
	text-decoration: none;
}

/* カード枠を細く */
.product-item-box {
	width: 100%;
	border: 1px solid #dfdfdf;
}

/* メルカリボタン色変更 */
.shoplinkmercari a {
	background: #16b1ff;
}

@media screen and (max-width: 480px) {
	/* 画像サイズを広げ、右マージンを狭く変更 */
	.product-item-thumb {
		width: 180px;
		margin-right: 0 !important;
	}

	/* 商品タイトル文字を小さく */
	.amazon-item-title a,
	.amazon-item-review a {
		font-size: 15px;
		line-height: 0;
	}

	/* 各サイトリンクボタン装飾 */
	.product-item-buttons a {
		padding: 12px 12px;
		font-size: 17px;
		margin: 0px auto 16px;
		border-radius: 10px;
	}
}



/* ==================================================
   コメント
================================================== */
.comment-information-messag {
	margin-bottom: 25px;
}

.comment-form textarea,
.comment-form input {
	border-width: 2px;
	border-color: rgba(201, 3, 14, .2);
}

.comment-form textarea:hover,
.comment-form input:hover {
	background-color: rgba(201, 3, 14, .02);
}

/* コメントを送信ボタン */
input[type=submit] {
	font-size: 18px;
	font-weight: 500;
	color: #000;
	border-color: rgba(201, 3, 14, .2);
	background-color: rgba(201, 3, 14, .02);
	border-radius: var(--cocoon-basic-border-radius);
}



/* ==================================================
   1カラム時の下部メニュー・SNS
================================================== */

/* 指定アイコンの非表示 */
.share-menu-button .bluesky-button,
.share-menu-button .misskey-button,
.share-menu-button .linkedin-button {
	display: none;
}

/* アイコンサイズ */
.share-menu-content .sns-share-buttons a {
	width: 46%;
}

.share-menu-content .sns-buttons a {
	font-size: 36px;
	height: 60px;
}

/* アイコン表示高さ位置調整 */
.share-menu-content,
.follow-menu-content {
	top: 40%;
}

/* アイコン同士の間隔調整 */
.sns-share.ss-col-3 .sns-buttons {
	column-gap: 12px;
}




/* カテゴリー投稿数をカテゴリー名の直後に表示 */
.widget_categories ul li a .post-count {
  display: inline;
  float: none !important;
  margin-left: 0.25em;
  padding: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}

/* 投稿数を（）で囲む */
.widget_categories .post-count::before {
  content: "(";
  position: relative;
  top: -1px;
}

.widget_categories .post-count::after {
  content: ")";
  position: relative;
  top: -1px;
}




/* ヘッダーメニュー */
#navi {
  background: #fff;
  border: none;
}

#navi .navi-in {
  max-width: 1000px;
  margin: 0 auto;
}

#navi .navi-in > ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 14px 0 8px;
}

#navi .navi-in > ul > li {
  flex: 1;
  text-align: center;
}

/* 区切り線は2個目以降だけ */
#navi .navi-in > ul > li + li {
  border-left: 1px solid #ddd;
}

#navi .navi-in > ul > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  color: #444;
  font-size: 16.5px;
  font-weight: 500;
  text-decoration: none;
}

#navi .navi-in > ul > li > a:hover {
  color: #111;
  background: transparent;
}


/* コンテンツトップのmargin設定 */
.content {
    margin-top: 0;
}

.breadcrumb {
    margin: 0 4em 1em 0;
    color: var(--cocoon-x-pallid-text-color);
    font-size: 13px;
}


#sidebar {
	font-size: 17px;
	line-height: 1.9;
}


/*カード画像の角を丸くする*/
.entry-card-thumb,
.entry-card-thumb img {
  border-radius: 6px;
  overflow: hidden;
}


/* 2カラムの記事カードの横間隔 */
@media screen and (min-width: 769px) {
  .ect-vertical-card {
    column-gap: 10px;
  }

  .ect-3-columns .entry-card-wrap {
    width: calc((100% - 20px) / 3);
  }
}

.ect-vertical-card .entry-card-title {
  font-size: 17px;
  font-weight:600;
  color: #555;
}

.ect-vertical-card .entry-card-title {
  margin-top: 8px;
}

.entry-card {
    padding-bottom: 9px;
    border-bottom: none;
}

h2.entry-card-title {
    line-height: 1.5;
    margin-bottom: 8px;
}

/* 一覧カード：画像とタイトルの間のカテゴリー */
.entry-card-categorys {
  display: block;
  position: static;
  margin: 0;
  text-align: left;
}

.entry-card-categorys .entry-category {
  font-size: 15px;
  padding: 0;
}

.entry-card-title {
  margin-top: 0;
}


/* プロフィール 余白 */
.nwa .author-box .author-content {
    margin: 0;
    padding: 1em .5em;
}
.author-box p {
    margin-top: 0.3em;
    line-height: 1.5;
}

/* タグ設定 */
.tagcloud a {
    font-size: 14px;
}

/* 最新記事 */
.info-list-item {
    margin: 14px 0;
	padding: 0;
    font-size: 16px;
    line-height: 1.6;
}