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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/************************************
** 目次
** 00.基本設定
** 	00-1.カラーの変数
** 13.本文
** 	13-1.キャプション
** 	13-2.ギャラリー
** 14.目次
** 17.画像
** 18.ブログカード
** 23.おすすめカード
************************************/
/************************************
** 00.基本設定
************************************/
/*:: 00-1.カラーの変数 :::::::::::::::::::::::*/
:root {
    --color_main: #1b435d;
	--color_sub: #f3e5e3;
	--color_brown: #C6AC9E;
}
/************************************
** 13.本文
************************************/
/*:: 13-1.キャプション :::::::::::::::::::::::*/
figcaption {
    font-size: 0.8em;
    text-align: center;
}
/*:: 13-2.ギャラリー :::::::::::::::::::::::*/
/* ギャラリーで奇数枚目の画像サイズを修正. */
.wp-block-gallery.has-nested-images figure.wp-block-image {
    flex-grow: initial;
}
/************************************
** 14.目次
************************************/
/* 余白・全体のデザイン */
.article .toc,
.widget_toc {
    display: block;
	font-size: 1em;
	padding: 8px;
	border: 2px solid #eee;
}
.article .toc {
/* 	margin-bottom: initial; */
}
.toc-center {
	margin: initial;
}
/* ol・liの余白 */
.toc .toc-list ol {
    padding-left: 16px;
}
/* 目次ボックスの中のデザイン */
.toc {
    width: 100%;/* 下線を幅いっぱいに引かせるため */
    border: none;
    padding: 0;
}
/* 文字色 */
.toc-list li a,
.tnt-number ol.toc-list>li:before {
    color: var(--cocoon-default-font);
}
/* マーカーを消す */
.toc-content ol {
    list-style: none;
}
/* マーカー消した分を左詰め */
.toc .toc-list {
    padding-left: 0;
	line-height: 1.8;/* 文字の行間 */
}
/* マーカーデザイン */
/* 連番カウンターリセット */
.toc .toc-list ol {
    counter-reset: li;
}
/* カウンター開始・デザイン */
.toc-list li a {
    font-weight: bold;
}
/* .toc-list li:before { */
.tnt-number ol.toc-list>li:before {
    content: "■";
	padding-right: 4px;
/* 	color: #8E8781; */
	background: initial;
    margin-right: initial;
    width: initial;
    height: initial;
    font-size: initial;
}
.toc-list li ol li a{ 
    font-weight: normal;
	font-size: 0.9em;
	color: #333;
}
.toc-list li ol li:before {
	padding-right: 0;
	color: #333;
}
/* h3以降 */
/* リストの下線部 */
.tnt-number ol.toc-list ol li {
    border-bottom: 1px solid #eee;
	padding-bottom: 0.4em;
}
.tnt-number ol.toc-list ol li:last-child {
    border-bottom: none;
}
/* 文字サイズ */
.tnt-number ol.toc-list ol li a {
	font-size: 1em;
}
/* アイコン */
.tnt-number ol.toc-list ol li::before {
    display: inline-block;
    content: counter(li,decimal);
    counter-increment: li;
    margin-right: .5em;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: .8em;
    border-radius: 10px;
    text-align: center;
}
.tnt-number ol.toc-list ol li::before {
    background: #f4f4f4;
}
/************************************
** 17.画像
************************************/
/* 投稿タイプ「spot」「single-bucket_list」の場合はアイキャッチを上部に表示させない */
.single-spot .eye-catch,
.single-bucket_list .eye-catch{
	display: none;
}
/* 投稿タイプ「spot」の場合、ギャラリーの位置枚目を拡大表示させる */
.single-spot .wp-block-gallery.wp-block-gallery-1 > figure.wp-block-image:first-of-type {
    width: 100%!important;
}
/************************************
** 18.ブログカード
************************************/
/* .wp-block-cocoon-blocks-blogcard { */
.blogcard-wrap {
/* 	max-width: 600px; */
	background: white;
	border-radius: 20px;
	box-shadow: 0 20px 40px rgba(27, 67, 93, 0.15);
	overflow: hidden;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	position: relative;
	cursor: pointer;
	padding: 0;
	border-style: initial;
}
.blogcard-wrap {
	width: 100%;
	display: flex;
/* 	height: 280px; */
	height: 180px;
}
.blogcard {
	padding: 0;
	border: none;
	content: '';
/* 	position: absolute; */
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #1b435d, #2d5a73, #1b435d);
	background-size: 200% 100%;
	animation: shimmer 3s infinite;
}

.blogcard-content {
/* 	padding: 32px 28px; */
	padding: 12px;
	max-height: initial;
}

.blog-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.blogcard-thumbnail {
	margin-top: 0;
	margin-right: 0;
/* 	width: 46%; */
	width: 36%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, rgba(27, 67, 93, 0.3), transparent);
	opacity: 1;
}
.blogcard-thumbnail img {
	height: 280px;
}
.blog-card:hover .blog-image {
	transform: scale(1.05);
}

.blogcard-content {
/* 	margin-left: 46%; */
	margin-left: 36%;
}
.blog-title,
.blogcard-title {
/* 	font-size: 20px !important; */
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #1b435d !important;
	line-height: 1.4 !important;
	margin-bottom: 16px !important;
	transition: color 0.3s ease;
	padding: initial !important;
	background-color: initial !important;
}

.blog-card:hover .blog-title {
	color: #2d5a73;
}

.blog-excerpt,
.blogcard-snippet {
/* 	font-size: 14px; */
	font-size: 13px;
	color: #666;
	line-height: 1.6;
	margin-bottom: 24px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blogcard-footer {
	justify-content: space-between;
	align-items: center;
/* 	padding: 16px 28px; */
	padding: 4px 16px;
	border-top: 1px solid #f0f0f0;
	margin-bottom: 16px !important;
/* 	margin-left: 46%; */
	margin-left: 36%;
}

.blogcard-site {
	display: flex;
	align-items: center;
	gap: 8px;
}

.blogcard-favicon {
	margin-right: initial;
	margin-top: initial;
}
.blogcard-favicon-image {
	width: 20px;
	height: 20px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	color: white;
}

.blogcard-domain {
	font-size: 12px;
	color: #1b435d;
	font-weight: 600;
}

.blogcard-post-date {
	font-size: 12px;
	color: #999;
	position: relative;
}

.blogcard-post-date::before {
	font-weight: 900;
	content: "\f1da";
	font-family: "Font Awesome 5 Free";
	margin-right: 3px;
}


@media (max-width: 768px) {
	.blogcard-wrap {
		height: initial;
	}
	.blogcard {
		padding: initial;
		border: initial;
		content: initial;
		position: initial;
		top: initial;
		left: initial;
		right: initial;
		height: initial;
		background: initial;
		background-size: initial;
		animation: initial;
	}

	.blogcard-thumbnail {
		width: 100%;
		position: initial;
	}
	.blogcard-content {
		display: inline-block;
		margin-left: 0;
	}

	.blog-title {
		font-size: 18px;
	}
	.blogcard-title {
		padding: 24px 20px;
	}
	.blogcard-footer {
		margin-left: initial;
	}
}
/************************************
** 23.おすすめカード
************************************/
.card-thumb img {
    aspect-ratio: initial;
}
/************************************
** 本文
************************************/
/* h1 */
@media screen and (max-width: 480px) {
    .entry-title {
        padding: 0.6em 0;
    }
}
/* ボックス */
/* ラベルボックスのデザイン */
.label-box-content {
    border: 2px solid var(--color_main);
    border-radius: 5px;
}
/* ラベルボックスの余白 */
.label-box-content {
    padding: 20px;
}
/* ラベルボックス内のリスト */
.label-box-content ul {
    padding-left: 20px;
}

/* 囲みボタン */
/* 囲みボタンの余白 */
html .body .btn-wrap {
    margin-bottom: 1em;
	text-align: center;/* 囲みボタンの上に文字を入れるとき用（真ん中寄せ） */
}
html .body .btn-wrap.has-green-background-color>a {
    margin-bottom: 0;
}
/* 囲みボタンと文字との余白 */
.btn-wrap.btn-wrap-l > a {
	padding: 8px 16px 8px 8px;
	font-size: 1em;
}
/* 囲みボタンのアイコン */
.btn-wrap > a:after {
    margin-right: 8px;
}

/* テーブルの横幅 */
figure.wp-block-table table {
    width: 100%;
}
/* テーブル trのデザイン */
table tr:nth-of-type(2n+1) {
    background-color: #F2F2F2;
}
/* テーブル thのデザイン */
table th {
    padding: 10px;
    background: #435f76;
    color: #fff;
    border-right: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
    border-color: #E5E5E5;
}
/* テーブル tdのデザイン */
table td {
    padding: 10px;
    border-right: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
    border-color: #E5E5E5;
}

/* ギャラリー */
.article .wp-block-gallery ul {
    margin-bottom: 0;
}
/* キャプション */
figcaption {
    padding: 0;
}
/* ギャラリーのキャプションを画像上→画像下にする */
/* 効果なし？一旦消して保留 */
/* .wp-block-gallery.is-cropped .blocks-gallery-item img {
    height: initial!important;
}
.wp-block-gallery .blocks-gallery-item figure {
    display: initial!important;
}
.wp-block-gallery .blocks-gallery-item figcaption {
    position: initial!important;
	padding: 0!important;
    color: initial!important;
    text-align: initial!important;
    background: initial!important;
	margin: 0.5em 0!important;
	font-size: .8em!important;
	opacity: 1;
} */
/* こっちで実装（2022/03/14） */
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
    background: initial!important;
    bottom: initial!important;
    color: initial!important;
    font-size: initial!important;
    left: initial!important;
    margin-bottom: initial!important;
    max-height: initial!important;
    overflow: initial!important;
    padding: initial!important;
    position: initial!important;
    text-align: initial!important;
    width: initial!important;
    box-sizing: initial!important;
}
/* モバイルの場合、一列に */
/*480px以下*/
@media screen and (max-width: 480px){
	.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
		margin: initial!important;
    	width: auto!important;
		margin-bottom: 16px!important;
	}
}

/************************************
** インデックス
************************************/
/* サムネイルの影 */
/* サムネイルの余白 */
.ect-vertical-card .entry-card-wrap .entry-card-thumb img {
    box-shadow: 0 12px 10px -6px rgb(0 0 0 / 25%);
	margin-bottom: 0.5em;
}
/* カテゴリーラベル */
.cat-label {
	top: 0;
    right: 0;
	left: initial;
    font-size: 14px;
	padding: 4px 20px;
}
/* タイトル */
.entry-card-title, .related-entry-card-title {
    margin: 0 0 8px 0;
	letter-spacing: 0.5px;
}
/* 投稿日・更新日の位置・デザイン */
.entry-card-meta,
.related-entry-card-meta {
    bottom: initial;
    position: initial;
    right: initial;
	margin-bottom: 8px;
	color: #7f7f7f;
    font-size: 1.2rem;
	text-align: initial;
}
.ect-vertical-card .entry-card-wrap .post-date,
.ect-vertical-card .entry-card-wrap .post-update {
    margin-right: 0;
    margin-right: 10px;
	font-size: 12px;
}
.e-card-info {
    justify-content: initial;
}
/* タグ（ターム）のデザイン */
.entry-card-meta .tag-link {
	color: #fff;
    background-color: #1b435d;
}
/* コンテンツ全体の余白 */
.entry-card-content {
    padding-bottom: 0;
}
/* スニペットの色 */
/* スニペットの行間 */
.entry-card-snippet {
    color: #7f7f7f;
    line-height: 1.75;
}
/* ページング */
/* 次へボタン */
.key-btn {
	background-color: #fff;
    border-color: #7F7F7F;
	border-radius: 5px;
}
/* 数字の色 */
.pagination .current {
    color: #ffffff;
    background: #3F3F3F;
}
/* 数字のサイズ */
.page-numbers {
    height: 36px;
    width: 32px;
    line-height: 36px;
	font-size: 14px;
	border: #7F7F7F 1px solid;
}
/************************************
** 投稿
************************************/
/* パンくずリスト */
.breadcrumb.sbp-main-before {
    background: #F2F2F2;
	margin: 0;
	width: 100%;
}
/* 関連記事 */
/* 関連記事のタイトル */
.related-entry-heading {
    background-color: #1b435d;
    color: #fff;
    padding: 0.6em 0.8em;
}
@media screen and (max-width: 480px) {
    .related-entry-heading {
        font-size: 20px;
    }
}
/* 関連記事のスニペット */
/* タイトルの下にスニペットが来るようにする */
@media screen and (max-width: 480px) {
    .rect-entry-card .card-snippet {
        clear: initial;
    }
}
/************************************
** SNSシェア
************************************/
/* デザイン */
.sns-buttons a {
    border-radius: 0;
}
/* SNSキャプションを非表示 */
.button-caption {
	display: none!important;
}
/* SNSアイコンの大きさ */
.sns-share.ss-high-and-low-lc a .social-icon {
    font-size: 24px;
}
/* 余白をなくし、画面いっぱいに配置 */
.sns-share-buttons {
    flex-wrap: initial;
    justify-content: initial;
    align-content: initial;
}
.sns-share.ss-col-6 a {
    width: 100%;
}
.sns-share.ss-col-6 .sns-buttons {
    column-gap: initial;
}
/************************************
** サイドバー
************************************/
/* タイトル */
/* 参考：https://saruwakakun.com/html-css/reference/h-design */
.sidebar h3 {
    color: initial;
    background-color: initial;
	padding: initial;
    padding-bottom: 10px;
	margin: initial;
    margin-bottom: 20px;
    border-bottom: solid 1px #E5E5E5;
    position: relative;
	letter-spacing: 0.5px;
	line-height: 1;
}
.sidebar h3:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 1px var(--color_main);
    bottom: -1px;
    width: 30%;
}

/* 検索 */
/* 検索ボックス */
.search-edit {
    position: relative;
    height: 32px;
    border-radius: 5px;
    background: #F2F2F2;
    min-width: 130px;
	border: none;
	box-shadow: 0px 5px 5px -5px rgb(0 0 0 / 25%) inset;
	font-size: 0.8em!important;
	padding: 0 10px!important;
	border: none;
}
/* 検索ボタン */
.search-submit {
    font-size: initial;
	line-height: 30px;
	color: #191919;
}

/************************************
** モバイル
************************************/
/* モバイルヘッダーボタンのキャプションを非表示 */
.mobile-menu-buttons .menu-caption {
    display: none;
}
/* モバイルボタンの位置・文字色 */
/* モバイルヘッダーの背景色 */
.menu-button {
    line-height: 2.6;
    background-color: #1b435d;
	color: #fff;
}
.menu-close-button {
	color: var(--cocoon-black-color)!important;
}
.mobile-menu-buttons .menu-button > a {
    color: #fff;
}
/* サイドバーの余白 */
.menu-content .sidebar {
    padding: 16px;
}
/************************************
** ショートコード（トップページ限定の新着記事リスト）
************************************/
/* リスト全体のデザイン */
.widget_custom_html .new-list .new-entry-cards {
	border: 1px solid #eee;
    padding: 8px;
	background-color: #f5f7f8;
}
.widget_custom_html .new-list .widget-entry-cards .a-wrap {
    margin-bottom: 0;
}
/* 先頭・末尾のボーダーの有無 */
.widget_custom_html .new-list .border-partition a:first-of-type {
    border-top: none;
}
.widget_custom_html .new-list .border-partition a:last-of-type {
    border-bottom: none;
}
/* 「投稿日」を表示して「更新日」を非表示 */
/* 参考：https://www.nullllog.com/cocoon_corp_news/ */
.widget_custom_html .new-list .new-entry-cards .display-none {
	display: block;
	padding-top: 0.2em;
	text-align: right;
}
.widget_custom_html .new-list .new-entry-card-update-date {
	display: none;
}
.widget_custom_html .new-list .post-date {
    margin-right: 0;
}
/* サムネイルを非表示 */
.widget_custom_html .new-list .widget-entry-cards figure {
    display: none;
}
/* タイトルにアンダーライン追加 */
.widget_custom_html .new-list .new-entry-card-title {
    text-decoration: underline;
	color: #4682b4;
	margin-top: 8px;/* 余白 */
}
/* タイトルの前後に文言を追加 */
.widget_custom_html .new-list .new-entry-card-title:before {
    content: "「";
	/* display: inline-block;/* 余分なアンダーライン消すために */
	color: initial;
}
.widget_custom_html .new-list .new-entry-card-title:after {
    content: "」の記事を投稿しました。";
	/* display: inline-block;/* 余分なアンダーライン消すために */
	color: initial;
}
/* サムネイルが無くなった分、余白を調整 */
.widget_custom_html .new-list .widget-entry-card-content {
	margin-left: 0;
}
/* カテゴリーラベル */
/* 835px以上 */
@media screen and (min-width: 835px){
	.widget_custom_html .new-list .widget-entry-card-content {
		/* display: flex;/* カテゴリーとタイトルを横並びに */
	}
}
/*834px以下*/
@media screen and (max-width: 834px){
	.widget_custom_html .new-list .entry-categories {
		margin-bottom: 8px;/* 余白 */
	}
}
/* カテゴリーラベルのボーダーを消す */
.widget_custom_html .new-list .cat-link {
    border-top: none!important;
    border-bottom: none!important;
	display: initial;/* 高さの調整 */
}
/* 投稿日・更新日を右寄せ */
/* 参考：https://csshtml.work/flex-right/ */
.widget_custom_html .new-list .new-entry-cards .display-none {
    margin-left: auto;
}
/************************************
** ショートコード（[scDispPrefectureList]）
************************************/
/* リストを横並びに */
/* 参考：https://webtan.tech/space-between-lastline/ */
/* 参考：https://blog.webcreativepark.net/2016/08/15-125202.html */
.prefecture td ul {
/*     display: inline-flex; */
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 0;/* ウィジェット以外でも使うときのために */
}
.prefecture td ul::after {
	display: block;
	content:"";
/* 	width: 5em; */
	width: 24%;
}
/* リストの先頭マーカーを消す */
.prefecture td ul li {
    list-style-type: none;
/*     display: block;
    width: 5em;
    float: left; */
	width: 24%;
	margin: 0!important;/* ウィジェット以外でも使うときのために */
	text-align: center;/* ウィジェット以外でも使うときのために */
}
/* デザインの微修正 */
.prefecture td ul li a {
    text-decoration: none;/* ウィジェット以外でも使うときのために */
    border-bottom: none;
	height: 36px;
	padding: 0;
    justify-content: center;
    align-items: center;
    display: flex;/* ウィジェット以外でも使うときのために */
}
/************************************
** リンク集
************************************/
/* 関連記事（同じタクソノミーを表示する） */
/* 初期化 */
.prefecture-related-list h3 {
    margin-top: 0!important;
	margin-bottom: 0!important;
	margin: 0 0 8px 0!important;
	border-left: initial!important;
    border-right: initial!important;
    border-top: initial!important;
    border-bottom: initial!important;
    padding: initial!important;
	font-size: 18px!important;
}
.prefecture-related-list .entry-card-title {
    letter-spacing: 0.5px;
    line-height: 1.6;
    font-weight: bold;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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