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

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

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

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

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


 /*ここからスキン設定*/

/************************************
** フォーム関連
************************************/
.search-edit,
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select {
	padding: 8px;
	border: 1px solid #e29abe;
	font-size: 14px;
}

.search-submit {
	line-height: 35px;
}

/************************************
** 見出し
************************************/
.article h2,
.article h3,
.article h5,
.article h6 {
	color: #fffdf4;
}

.article h3,
.article h4,
.article h5,
.article h6 {
	margin-top: 40px;
	margin-bottom: 20px;
}

.article h4,
.article h5,
.article h6 {
	font-size: 18px;
}

.article h2 {
	margin-bottom: 20px;
	padding: 0.625em;
	border-bottom: 3px solid #c46084;
	background: #e3b6cc;
	font-size: 22px;
}

.article h3 {
	padding: 12px 10px;
	border: none;
	background: #e3ccd7;
	font-size: 18px;
}

.article h4 {
	border-top: 1px solid #e3b6cc;
	border-bottom: 1px solid #e3b6cc;
	color: #515151;
}

.article h5 {
	border-bottom: 1px solid #e3b6cc;
	color: #515151;
}

.article h6 {
	border-bottom: 1px solid #e3ccd7;
	color: #515151;
}

.archive-title {
	padding: 5px;
	border-bottom: 3px solid #e29abe;
	color: #515151;
	font-size: 20px;
}

/************************************
** 記事ページ
************************************/
.article-footer,
.entry-footer {
	margin-top: 3em;
	padding-top: 3em;
	border-top: 1px solid #ffffff;
}

/************************************
** ブログカード
************************************/
.blogcard-wrap .blogcard {
	padding: 1.2% 2%;
	border: 1px solid #e3b6cc;
	background-color: #ffffff;
	color: #515151;
}
.blogcard-wrap .blogcard:hover {
	border: 1px solid #e3b6cc;
	background-color: #fdeff2;
}

/************************************
** 目次
************************************/
.toc {
	width: 80%;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	border: 2px solid #e29abe;
}

.toc-content {
	border-top: 2px solid #e29abe;
}

/************************************
** 記事内　カテゴリリンク・タグリンク
************************************/
.cat-link {
	background-color: #e29abe;
	color: #fffdf4;
}

.cat-link:hover {
	background-color: #e3b6cc;
	opacity: 0.7;
	color: #fff;
}

.tag-link,
.comment-reply-link {
	border: 1px solid #e29abe;
	color: #e29abe;
}

.tag-link:hover,
.comment-reply-link:hover {
	background-color: #e29abe;
	color: #fffdf4;
}

/************************************
** 記事内　SNS
************************************/
.sns-share-message,
.sns-follow-message {
	text-align: center;
}

.sns-share-buttons a,
.sns-follow-buttons a,
.sidebar .sns-follow-buttons a,
.footer .sns-follow-buttons a {
	width: 34px !important;
	height: 34px;
	margin-right: 8px;
	background-color: #e29abe;
	color: #fffdf4;
}
.sns-share-buttons a:last-child,
.sns-follow-buttons a:last-child,
.sidebar .sns-follow-buttons a:last-child,
.footer .sns-follow-buttons a:last-child {
	margin-right: 0;
}

.sns-share-buttons a span.social-icon {
	padding-top: 0;
	font-size: 20px !important;
}

.sns-follow-buttons a {
	font-size: 28px !important;
}

.ss-top a.share-button {
	width: 12% !important;
	height: 34px;
}
.ss-top .sns-share-buttons {
	justify-content: center;
}

.ss-bottom .sns-share-buttons,
.sns-follow-buttons,
.sidebar .sns-follow-buttons,
.footer .sns-follow-buttons {
	justify-content: center;
}

.button-caption,
.share-count {
	display: none !important;
}

/************************************
** 投稿ナビ　記事内　次の記事と前の記事
************************************/
.pager-post-navi {
	border: 1px solid #e29abe;
}
.pager-post-navi .card-thumb img {
	vertical-align: bottom;
}

@media screen and (max-width: 480px) {
	.pager-post-navi a figure {
		min-width: 20%;
		max-width: 20%;
	}
	.pager-post-navi a.next-post {
		border-top: 1px solid #e29abe;
	}
}
@media screen and (min-width: 481px) {
	.pager-post-navi {
		display: flex;
		flex-direction: row;
		position: relative;
		justify-content: space-between;
	}
	.pager-post-navi a.prev-post,
	.pager-post-navi a.next-post {
		width: 50%;
		margin: 0;
	}
	.pager-post-navi::after {
		position: absolute;
		top: 0;
		left: 50%;
		width: 1px;
		height: 100%;
		background-color: #e29abe;
		content: "";
	}
}
.pager-post-navi a.prev-post::before,
.pager-post-navi a.next-post::before {
	color: #515151;
}

.pager-post-navi a:hover {
	background-color: #fdeff2;
}

/************************************
** 記事内　関連記事とコメントタイトル
************************************/
.related-entry-heading,
.comment-title {
	padding: 6px 20px;
	background-color:  #e3b6cc;
	color: #fffdf4;
	font-size: 20px;
}

.related-entry-card-title {
	color: #515151;
}

.related-entry-border .related-entry-card-wrap {
	border: 1px solid #e3b6cc;
}

.related-entry-card-wrap.a-wrap.cf:hover {
	background-color: #fdeff2;
}


/************************************
** エントリーカード　投稿一覧
************************************/
.list .entry-card-title {
	margin-bottom: 0.4em;
	padding: 0.4em 0;
	border-bottom: 2px solid #e29abe;
	font-weight: normal;
}

@media screen and (max-width: 480px) {
	.list .entry-card-title {
		margin-bottom: 0.3em;
		padding: 0.3em 0;
		border: none;
	}
}
.list .entry-card-snippet {
	color: #595857;
	line-height: 1.5;
}

.list .card-thumb img {
	border: 3px solid #fff;
	border-radius: 4px;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	transition: all 0.4s ease-out;
}

.list .a-wrap:hover {
	border-radius: 4px;
	background: none;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.list .a-wrap:hover .card-thumb img {
	border-radius: 0;
	box-shadow: none;
}

.a-wrap:hover {
	background-color: #f4e7e5;
}

.cat-label {
	top: 3px;
	left: 3px;
	padding: 1px 8px 1px 8px;
	border: none;
	border-top-width: 0;
	border-left-width: 0;
	background-color: rgba(226, 154, 190, 0.9);
}

@media screen and (min-width: 769px) {
	.entry-card-thumb {
		width: 30%;
	}

	.entry-card-content {
		margin-left: 35%;
	}
}


/************************************
** ページナンバー　現在地以外のページリンク付の部分
************************************/
.page-numbers {
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 2px;
	line-height: 30px;
}

a.page-numbers {
	background-color: #e29abe;
	color: #fffdf4;
	transition: all 0.4s ease-out;
}
a.page-numbers:hover {
	background-color: #e3b6cc;
	color: #fffdf4;
}

/************************************
** ページナンバー　現在のページ
************************************/
.pagination .current {
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 2px;
	line-height: 30px;
}

.pagination .current { /*現在のページ*/
  background-color: #e3b6cc;
  color: #fffdf4;
}

/************************************
** ページナンバー　次のページへ非表示
************************************/
.pagination-next {
  display: none;
}


/************************************
** サイドバー
************************************/
.sidebar h3 {
	position: relative;
	margin-bottom: 1.5em;
	padding: 0 5px;
	border-bottom: 2px solid #e3b6cc;
	background: none;
	color: #515151;
	font-size: 18px;
}
.sidebar h3::after {
	display: block;
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 30%;
	border-bottom: 2px solid #c46084;
	content: " ";
}

/************************************
** ウィジェット
************************************/
.widget h2 {
	color: #515151;
}

.widget_recent_entries ul li a,
.widget_categories ul li a,
.widget_archive ul li a,
.widget_pages ul li a,
.widget_meta ul li a,
.widget_rss ul li a,
.widget_nav_menu ul li a {
	padding: 5px 0;
}

.widget_recent_entries ul li a:hover,
.widget_categories ul li a:hover,
.widget_archive ul li a:hover,
.widget_pages ul li a:hover,
.widget_meta ul li a:hover,
.widget_rss ul li a:hover,
.widget_nav_menu ul li a:hover {
	background-color: #fdeff2;
}

/************************************
** 新着記事ウィジェット
************************************/
.widget-entry-cards .a-wrap {
	list-style-type: none;
	margin-bottom: 0;
	border-bottom: solid 1px #e29abe;
}

.widget-entry-cards .a-wrap:hover {
	background-color: #fdeff2;
}

.widget-entry-cards .a-wrap:last-of-type {
	border-bottom: none;
}

.widget-entry-cards .widget-entry-card-content {
	padding-top: 0.5em;
}

/************************************
** モバイルフッターバー　メニュー
************************************/
.mobile-menu-buttons {
	background: #e3b6cc;
}
.mobile-menu-buttons .menu-caption,
.mobile-menu-buttons .menu-icon {
	color: #fffdf4;
}
.mobile-menu-buttons .menu-button:hover {
	background-color: #e3ccd7;
}

.navi-menu-content {
	background-color: #e3b6cc;
}
.navi-menu-content .menu-drawer a {
	color: #fffdf4;
	border-bottom: 1px solid #e3b6cc;
}
.navi-menu-content .menu-drawer .sub-menu {
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 0;
}
.navi-menu-content .menu-drawer .sub-menu a {
	padding-left: 2.2em;
}
.navi-menu-content .menu-drawer .sub-menu a::before {
	display: block;
	position: absolute;
	top: 0.5em;
	left: 1.4em;
	width: 1em;
	content: "-";
}
.navi-menu-content .menu-drawer a {
	position: relative;
	padding: 10px;
}
.navi-menu-content .menu-drawer a:hover {
	background-color: #e3ccd7;
}
.navi-menu-content .menu-drawer a::after {
	position: absolute;
	right: 0;
	padding-right: 8px;
	color: #fffdf4;
	font-family: FontAwesome;
	content: "\f054";
}

.search-menu-content {
	top: 55%;
}

/************************************
** 引用（blockquote）
************************************/
blockquote {
	padding: 10px 30px 10px 50px;
	border-color: #e3b6cc;
	background-color: #fff7f9;
}
blockquote::before {
	display: inline-block;
	position: absolute;
	top: 20px;
	left: 12px;
	color: #e3b6cc;
	font-family: FontAwesome;
	font-size: 30px;
	vertical-align: middle;
	line-height: 1;
	content: "\f10d";
}
blockquote::after {
	content: none;
}

/************************************
** トップへ戻るボタン　スクロールして出てくるやつ
************************************/
/* トップへ戻るボタン画像の表示調整 */
.go-to-top-button {
 width: 50px; /* ボタン画像の表示幅 */
 height: auto; /* ボタン画像の高さは自動調整 */
}
.go-to-top-button:hover { /* カーソルを合わせると少し拡大する */
  transform: scale(1.1);
}
.go-to-top {
 right: 10px; /* 右から10pxの位置に配置 */
 bottom: 10px; /* 下から30pxの位置に配置 */
}

/************************************
** 画像リンクホバー時に凹むエフェクト　使用時はリンクをタグで囲む
************************************/
.img-wrap {
  text-align: center;
  margin: 5px 0;
}

.img-wrap img {
  transition: transform 0.25s ease;
  display: inline-block;
}

.img-wrap img:hover {
  transform: translateY(5px); /* 下に 5px 移動 → “沈む” */
}

/************************************
** テキストリンクをホバー時の色変更
************************************/
a:hover { color: #c46084; }

.toc-content a:hover { color: #515151; } /*目次のみ文字色と同じ*/

/************************************
** 本文上のPR表記
************************************/
.pr-label-l {
    border-top: 1px dotted #f4edf0; /* 上の点線 */
    border-bottom: 1px dotted #f4edf0; /* テキスト下の点線 */
    border-left: none;
    border-right: none;
    border-radius: 0;
    font-size: 15px; /* 文字サイズ */
    color: #515151; /* 文字の色 */
    text-align: center; /* テキスト中央揃え */
    background: #f4edf0;
    padding: 3px 0;
    margin-bottom: 2em;
}

/********************************
ボックスメニュー　ヘッダー下の画像メニュー
********************************/
.box-menu{
	padding: 0;
	min-height: 0;
}

.box-menu:hover{
	box-shadow:none;
	opacity: 0.8;
} 

.box-menu-label,
.box-menu-description{
	display: none;
}

.box-menu-icon *{
	margin: 0;
	max-width: 100%;
	max-height: 50px;}

.box-menu{
	background: #e3b6cc;
}

/* 4カテゴリーの幅に変更 */
@media screen and (min-width: 600px){
.wwa .box-menu{
	width: calc(100%/4);
}
}

/* 枠線を消す */
.box-menu{
box-shadow:none;
}

/********************************
サイトマップ
********************************/
/* (1)カテゴリ先頭記号を非表示 */
.wsp-container > ul.wsp-posts-list>li {
list-style-type: none;
}

/* (2)カテゴリ背景色と位置調整 */
.wsp-container strong.wsp-category-title {
display: block;
padding: 0.2em 1.0em;
background: #e3b6cc;
}

/* (3)全体の余白をゼロに(全体左寄せ) */
.wsp-container > ul.wsp-posts-list {
padding: 0;
}

/* (4)カテゴリごとの末尾に余白*/
ul.wsp-posts-list {
padding-bottom: 15px;
}

/* (5)記事タイトルの先頭記号を項番に */
.wsp-container li {
list-style-type: square;
}

/********************************
問い合わせフォーム
********************************/
/* Contact Form 7 */
/* 必須マーク */
.must{
	color: #fffdf4;
	margin-right: 10px;
	padding: 3px 5px;
	background: #e29abe; /* 背景色 */
	border-radius: 5px;
}

/* 項目名を太字にする */
form p {
	font-weight: 600;
}

/* 入力項目を見やすくする */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
	width: 100%;
	padding: 8px 15px;
	margin-right: 10px;
	margin-top: 10px;
	border: 1px solid #e29abe; /* 枠線の色 */
	border-radius: 3px;
}
textarea.wpcf7-form-control.wpcf7-textarea {
	height: 200px;
}

/* 送信ボタンを見やすくする */
input.wpcf7-submit {
	width: 100%; /* 好みで60〜80%でもOK */
	height: 60px;
	border-color: #e3b6cc; /* 枠線の色 */
	background: #e3b6cc; /* ボタンの色 */
	color: #fffdf4;
	font-size: 20px;
	font-weight: 600;
	border-radius: 2px;
}

/* エラーメッセージを見やすくする */
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
	color: red;
	font-weight: 600;
}

/************************************
** リキャプチャマーク非表示
************************************/
.grecaptcha-badge { visibility: hidden; }

/************************************
** 記事内　装飾
************************************/

/*二重線ボックス*/
.box5 {
    padding: 0.5em;
    margin: 2em auto;
	width: 95%;
    border: double 5px #e3b6cc;
}
.box5 p {
    margin: 0; 
    padding: 0;
}

/*ドット囲みボックス*/
.kakomi-box9 {
 margin: 2em auto;
 padding: 0.5em;
 width: 95%;
 border: 5px dotted #c7b1e0; /*太さ・線種・色*/
 background-color: #fff; /* 背景色 */
 border-radius: 1px; /*角の丸み*/
}

/*枠線の途中にタイトル入るボックス*/
.kakomi-box11 {
 position: relative;
 margin: 2em auto;
 padding: 1.2em;
 color: #515151; /* 文章色 */
 background-color: #fff; /* 背景色 */
 border: 2px solid #c46084; /* 枠線の太さ・色 */
 width: 95%;
}
.title-box11 {
 position: absolute;
 padding: 0 .5em;
 left: 20px;
 top: -15px;
 font-weight: bold;
 background-color: #fff; /* タイトル背景色 */
 color: #c46084; /* タイトル文字色 */
}

/*枠内ラベルタイトルボックス*/
.box28 {
    position: relative;
    margin: 2em auto;
    padding: 25px 10px 7px;
	width: 95%;
    border: solid 2px #c7b1e0;
}
.box28 .box-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #c7b1e0;
    color: #fffdf4;
    font-weight: bold;
}
.box28 p {
    margin: 0; 
    padding: 0;
}

/*考え事ボックス*/
.box23 {
    position: relative;
    margin: 2em 0 2em 40px;
    padding: 8px 15px;
    background: #cbd0db;
    border-radius: 30px;
}
.box23:before{font-family: FontAwesome;
    content: "\f111";
    position: absolute;
    font-size: 15px;
    left: -40px;
    bottom: 0;
    color: #cbd0db;
}
.box23:after{
    font-family: FontAwesome;
    content: "\f111";
    position: absolute;
    font-size: 23px;
    left: -23px;
    bottom: 0;
    color: #cbd0db;
}
.box23 p {
    margin: 0; 
    padding: 0;
}

/*薄いクマボックス*/
.kuma-box-b {
 position: relative;
 margin: 4.5em auto 3em;
 padding: 10px 10px 10px;
 width: 90%; /* ボックス幅 */
 background: #DFC29D; /* ボックス背景色 */
 color: #543f32; /* 文字色 */
 border: 10px solid #DFC29D; /* ボックス枠線(太さ・線種・色) */
 border-radius: 50px;
 box-shadow: 0 0 3px 2px #cccccc; /* ボックス影（不要なら行を削除） */
 z-index: auto;
}
.kuma-box-b::before, 
.kuma-box-b::after {
 height: 20px;
 width: 30px;
 border-radius: 50%;
 position: absolute;
 content:'';
 top: -45px;
 box-shadow: 0 0 3px 2px #cccccc; /* 耳の影（不要なら行を削除） */
 z-index: -10;
}
.kuma-box-b::before {
 left: 10px;
 background: #A27F6A; /* 左耳背景色 */
 border: 20px solid #DFC29D; /* 左耳枠線(太さ・線種・色) */
}
.kuma-box-b::after {
 right: 10px;
 background: #A27F6A; /* 右耳背景色 */
 border: 20px solid #DFC29D; /* 右耳枠線(太さ・線種・色) */
}
.kuma-wrap-b{
 background-color: transparent;
 position: relative;
 z-index: 0;
}

/*濃いクマボックス*/
.kuma-box-a {
 position: relative;
 margin: 4.5em auto 3em;
 padding: 10px 20px 10px;
 width: 90%; /* ボックス幅 */
 background: #A27F6A; /* ボックス背景色 */
 color: #fffdf4; /* 文字色 */
 border: 10px solid #543f32; /* ボックス枠線(太さ・線種・色) */
 border-radius: 50px;
 z-index: auto;
}
.kuma-box-a::before, 
.kuma-box-a::after {
 height: 20px;
 width: 30px;
 border-radius: 50%;
 position: absolute;
 content:'';
 top: -45px;
 z-index: -10;
}
.kuma-box-a::before {
 left: 10px;
 background: #F7C663; /* 左耳背景色 */
 border: 20px solid #543f32; /* 左耳枠線(太さ・線種・色) */
}
.kuma-box-a::after {
 right: 10px;
 background: #F7C663; /* 右耳背景色 */
 border: 20px solid #543f32; /* 右耳枠線(太さ・線種・色) */
}
.kuma-wrap-a{
 background-color: transparent;
 position: relative;
 z-index: 0;
}

/*シンプルな線の枠赤*/
.kakomi-box1 {
 margin: 2em auto;
 padding: 0.5em;
 width: 95%;
 background-color: #fff; /* 背景色 */
 border: 2px solid #c46084; /* 枠線 */
}

/*シンプルな線の枠紫*/
.kakomi-box2 {
 margin: 2em auto;
 padding: 0.5em;
 width: 95%;
 background-color: #fff; /* 背景色 */
 border: 2px solid #c7b1e0; /* 枠線 */
}

/*背景のみグレー*/
.box3 {
    padding: 0.5em;
    margin: 2em auto;
	 width: 95%;
    color: #515151;
    background: #cbd0db;/*背景色*/
}
.box3 p {
    margin: 0; 
    padding: 0;
}

/*マーカー紫*/
.marker-P-Purple {
background: linear-gradient(transparent 50%, #ead6ff 0%);
}

/*表横見出し*/
.table2 {
border-collapse: collapse;
text-align: center;
line-height: 1.5;
border: 2px solid #e3ccd7;
}
.table2 th {
padding: 10px;
font-weight: bold;
border-top: 2px solid #e3ccd7;
border-right: 1.5px solid #fffdf4;
border-bottom: 2px solid #e3ccd7;
background: #e3ccd7;
color: #fffdf4;
}
.table2 td{
text-align: center;
padding: 10px 0;
background-color: #ffffff;
border:solid 1.5px #e3ccd7;
}