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

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

/* reset */
div, figure, figucaption, img,
#main, #sidebar {
  margin: 0;
  padding: 0;
  border: 0;
}
.header-container, .main, .sidebar, .footer{
    background-color: transparent;
}

/* :rootのCSS変数の宣言 */ 

:root {
	--main-color: #52B1D2; 
}



/* ------------------------------------------------------------------------
　　　main レイアウト
------------------------------------------------------------------------ */
/* === 記事一覧 === */
#list article {
	background: #fefefe;
}
#list article div:is(.entry-card-content, .card-content, .e-card-content) {
	margin: 10px 20px 15px;
}
#list article h2 {
	font-size: 1.3em;
	line-height: 1.5;
}
#list a :is(.entry-card-meta, .card-meta, .e-card-meta)::before {
	content: "read more";
	display: block;
	pointer-events: auto;
    text-align: right;
	font-family: "Lexend";
	font-weight: 500;
	color: var(--main-color);
	margin: 10px 0px 20px 0
}
/*カテゴリーラベル*/
.cat-label {
	border: none;
    color: #fff;
	background-color: rgba(115,204,216,0.9);
}

/*  === 投稿記事 === */
#main:has(#breadcrumb):not(:has(#list)) {
	background: #fefefe;
	padding: 2em;
	border-radius: 20px;
}
/* ページ送りナビ 横並びに変更 */
.pager-post-navi {
    display: flex;
	flex-direction: row;
    justify-content: space-between;
	column-gap: 10px;
}
.pager-post-navi .a-wrap {
	flex: 1;
	flex-grow: 1;
	border-top: 1px solid #f0f0f0;
	border-bottom: 1px solid #f0f0f0;
}
div#pager-post-navi.pager-post-navi.post-navi-default.cf::after {
	display: none;
}
.pager-post-navi a .iconfont {
	font-size: 1.3em; /*矢印のサイズ*/
}
.fas.fa-chevron-left.iconfont {
	padding-left: 0;
}
.fas.fa-chevron-right.iconfont {
	padding-right: 0;
}
.card-thumb img {
	width: 100%;
}

/* SNSシェアボタン */
.sns-share, .sns-follow {
	margin: 24px 80px;
}
#main .sns-share a {
	width: 85px;
}
.sns-buttons a {
	height: 30px;
}
#main .social-icon {
	font-size: 13px;
}
#main .button-caption {
	font-size: 12px;
	margin-left: 3px;
}

/* プラグイン > 目次 - Rich Table of Contents - */
.entry-content .rtoc-mokuji-content #rtoc-mokuji-title {
	padding: 1em 2em .5em;
	font-size: 1.2em;
	font-weight: 600;
}
.entry-content .rtoc-mokuji-content .rtoc-mokuji.level-1 {
	margin: 0 2em 1.5em !important;
}
.entry-content .rtoc-mokuji-content {
	width: 70%;
}


/* ------------------------------------------------------------------------
 　　サイドバー 
------------------------------------------------------------------------ */

/*　リンク　*/
#sidebar a{
	text-decoration : none;　/*下線消去*/
}
/*　ウィジェットタイトル　*/
h3.widget-sidebar-title.widget-title {
	position: relative;
	padding: 0.3rem 0.4rem;
	border-bottom: 3px solid #E8E4E2;
	background: transparent;
	font-weight:normal;
	margin: 0 0 16px
}
h3.widget-sidebar-title.widget-title:after {
 position: absolute;
  bottom: -3px;
  left: 0;
  width: 20%;
  height: 3px;
  content: '';
  background: var(--main-color);
}

/*---------------------------------
検索フォームのカスタマイズ
--------------------------------*/
/* 検索ボックス */
.wp-block-search__inside-wrapper {
    max-width: 100%;
    position: relative;
    box-sizing: border-box;
    display: block;
    padding: 3px 10px;
    border-radius: 20px;
    height: 2.2em;
    width: 300px;
    overflow: hidden;
    background: #E8E4E2;
	top: 0; /*中央寄せ*/
    left: 50%;
    transform: translate(-50%,0);
}
/*検索フォーム*/
#wp-block-search__input-1, .wp-block-search__input{
    border: none;
    border-radius: 4px;
    width: 100%;
    background: none;
	outline: 0;
}
/*検索ボタン*/
button.wp-block-search__button{
	font-family: "Font Awesome 5 Free"; /* ※アイコン必須項目 */
	font-weight: 900;/* ※アイコン必須項目 */
	cursor: pointer;
	font-size: 1.3em;
	background-color: transparent;
	color: #05192C;
	border: none;
	outline : none;
    padding: 0;
    height: 2.2em;
    position: absolute;
	right: 0;
    top: -0.3em;	
}

/*---------------------------------
カテゴリーのカスタマイズ
--------------------------------*/
/*件数表示*/
.post-count {
	padding: 2px 10px;
    margin: 3px 0;
	font-size: 0.7rem;
    background-color: transparent;
    border: solid 1px #E8E4E2;/*線*/
    border-radius: 20px;/*角の丸み*/
	transition: background 1s;
}
.cat-item a:hover .post-count {
	background: #E8E4E2;
}


/* 親カテゴリー */
.widget_categories ul li a { 
	border-bottom: none; /* 下線の種類 */ 
	position: relative;
	padding: 0.5rem 0.5rem;
}
.widget_categories ul li a:hover {
	background-color:transparent; /*カテゴリ名のみ背景透明化*/
}
.widget_categories ul li a::before {
	font-family: "Font Awesome 5 Free"; /* ※アイコン必須項目 */
	font-weight: 900;/* ※アイコン必須項目 */
  content: "\f07b"; /* FontAwesomeのユニコード */
  color: var(--main-color); /* アイコンの色 */
  padding-right: 0.4rem;
}
.widget_categories ul li a:hover::before {
	font-family: "Font Awesome 5 Free"; /* ※アイコン必須項目 */
	font-weight: 900;/* ※アイコン必須項目 */
	content: "\f07c"; /* FontAwesomeのユニコード */
}
.widget_categories > ul > li > a:first-child { 
  border-top: none;
}

/* 子カテゴリー */
.widget_categories ul li ul li a::before {
	font-family: "Font Awesome 5 Free"; /* ※アイコン必須項目 */
	font-weight: 900;/* ※アイコン必須項目 */
  content: "\f105"; /* FontAwesomeのユニコード */
  color: #73CCD8; /* アイコンの色 */
  padding-right: 0.4rem;
}
.widget_categories ul li ul li a:hover::before {
	font-family: "Font Awesome 5 Free"; /* ※アイコン必須項目 */
	font-weight: 900;/* ※アイコン必須項目 */
  content: "\f101"; /* FontAwesomeのユニコード */
}



/* ------------------------------------------------------------------------
　　　footer
------------------------------------------------------------------------ */
#footer {
	background-color: #73CCD8;
	color: #ffffff;
}



/* ------------------------------------------------------------------------
　　　投稿　文字装飾
------------------------------------------------------------------------ */
/* 見出し --reset */
.article :is(h1,h2,h3,h4,h5) {
	border: none;
	background-color:transparent;
	margin: 0;
	padding: 0;
}
/* 見出し H2 */
h2.pss {
	margin-top: 5em;
	margin-bottom: 1.5em;
	padding: .2em 1em;
	border-left: 5px solid #73ccd8;
	font-size: 1.5em;
	&:first-of-type {
		margin-top: 2em;
	}
}
/* 見出し H3*/
h3.pss {
	margin-top: 2em;
	margin-bottom: .8em;
	font-size: 1.3em;
	padding: .5em .2em;
	border-bottom: dashed 1px #d3d3d3;
	&:first-of-type {
		margin-top: 0;
	}
}
/* 見出し H4 */
h4.pss {
	display: block;
	font-size: 1.1em;
	line-height: 3;
	margin: 1em .3em 0;
	&::before {
		font-family: "Font Awesome 5 Free";
		content: "\f00c";
		font-weight: 900;
		color: #73ccd8;
		font-size: 1.2em;
		margin-right: .5em;
	}
}

/* 記事の段落 */
.entry-content p {
    margin: 0 .3em .8em;
}

/* テーブル --reset */
.article table tr {
	background-color: transparent;
}

/* self-made CSS ========================================== */

/* 使用上の注意 */
div.caution-box {
	margin: 3em 6em 5em;
	padding: 1em;
	background: #b0e0e6;
	border-radius: 10px;
}
.article .caution-box > h2 {
	margin: 0;
	padding: 1em 0;
	text-align: center;
	border: none;
	font-weight: bold;
	font-size: 1.2em;
}
.caution-box > ul {
	margin: 0;
	padding: 0;
}
.caution-box > ul li {
	margin: 1em;
	padding: 0 0 0 1.5rem;
	position: relative;
	list-style: none;
	font-size: 15px;
}
.caution-box > ul li:before {
	content: "";
	position: absolute;
	top: .2rem;
	left: 0;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	border: 1px solid #333;
}

/* ショップリフィル概要 */
.paid-info-box {
	margin: 1em 0;
	padding: 0 1em;
	box-shadow: 2px 1px 10px #ddd;
}
.paid-info-contents {
	border-bottom: dashed 1px #d3d3d3;
	padding: 2em;
	&::first-line {
		font-weight: 600;
	}
	&:last-child {
		border-bottom: none;
	}
}
.paid-info-contents p {
	margin: 0;
	line-height: 3;
}
/* リフィル概要 --リスト */
ul.paid-info {
	padding: 0em;
	margin-bottom: .5em;
}
ul.paid-info li {
	margin-left: 1.5em;
}
.paid-info ul {
	padding: 0;
}
.paid-info li > ul li {
	margin-left: 0;
	list-style: none;
	&::before {
		content: "└";
		margin-right: .5em;
	}
}
/* リフィル概要 --記載項目 */
.fill-items span {
    display: inline-block;
	margin: .5em 0;
    background: #3f3f3f;
    color: #fefefe;
	padding: 0 .8em;
    border-radius: 3em;
    font-size: .8em;
    line-height: 2.2;
}

/* ネットショップ link box */
.shop-pdf-link {
	border: 1px solid #3f3f3f;
	border-radius: 10px;
	overflow: hidden;
	margin: 1.5em .5em;
}
div.shop-pdf-link > a {
	display: flex;
	flex-wrap: wrap;
	column-gap: 20px;
	padding: .5em 1em;
}
.shop-pdf-img {
	flex-basis: 120px;
	display: flex;
	align-items: center;
	margin: .5em auto;
}
.shop-pdf-img img {
	margin: 0;
	border-radius: 10px;
}
.shop-pdf-info {
	flex: 1 1 195px;
	margin: .5em 0;
	
	display: flex;
	flex-direction: column;
}
.shop-pdf-title {
	color: #3f3f3f;
	flex-grow: 1;
}
.shop-pdf-data {
	display: block;
	font-size: .8em;
	color: gray;
	margin-bottom: 10px;
}
.shop-pdf-button {
	padding: .5em;
	background: #3f3f3f;
	border-radius: 10px;
	text-align: center;
	color: #fefefe;
	background: #3f3f3f;
	font-size: .8em;
	font-family: "Inter";
	font-weight: 400;
	transition: all  0.2s ease;
	&:hover {
		transform: translateY(2px);
	}
}

/* FREE - PDF概要 */
.free-refill-info {
	margin: 0 1.5em;
}
h2.free-info-tit {
	position: relative;
	padding: 0 1em .8em;
	margin-bottom: 1em;
	&::after {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 10px;
		content: '';
		background-image: -webkit-repeating-linear-gradient(135deg, #000, #000 1px, transparent 2px, transparent 5px);
		background-image: repeating-linear-gradient(-45deg, #000, #000 1px, transparent 2px, transparent 5px);
		background-size: 7px 7px;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}
}

/* FREE - PDF download --img */
.pdf_image {
	width: 100%;
	margin: 0 auto; /*中央*/
}
.pdf_image img {
	width: 100%;
}
/* FREE - PDF download box */
div.pdf-box {
	margin: 2em;
	border: 1px solid #3f3f3f;
	border-radius: 10px;
	overflow: hidden;
}
div.pdf-a-wrap {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	column-gap: 20px;
	padding: 1em 1.2em;
}
div.dl-icon {
	flex: 0 0 40px;
	border-right: 1px solid #ddd;
	&::after {
		content: "\f0c1";
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		font-size: 1.3em;
		color: gray;
	}
}
div.pdf-data {
	flex: 3 3 220px;
	width: 100%;
}
div.pdf-data strong {
	display: block;
	word-break: break-all;
	color: #3f3f3f;
	font-weight: 600;
}
.pdf-data strong + div {
	color: gray;
    font-size: .7em;
    margin-top: 1em;
}
.pdf-data strong + div + div {
	color: gray;
    font-size: .8em;
    margin-top: .2em;
}
div.dl-btn {
	flex: 1;
	width: 100%;
	align-items: center;
	margin: .5em 0;
	padding: .7em 1em;
	text-align: center;
	border-radius: 12px;
	color: #fefefe;
	background: #3f3f3f;
	font-size: .9em;
	font-family: "Inter";
	font-weight: 500;
	transition: all  0.2s ease;
	&:hover {
		transform: translateY(2px);
	}
}


/* リンク設定 PC hover
----------------------------------------- */
@media (any-hover: hover) {
	/* 全体 */
	a {
		transition: all 0.3s ease 0s;
		}
	a:hover {
	}
	
	/* 記事一覧 */
	#list a {
		pointer-events: none;/*全体のリンク効果なくす*/
	}
	.a-wrap:hover {
		background: transparent;
	}
	/*画像*/
	#list a figure {
		overflow: hidden;
		margin: 0;
		pointer-events: auto;/*リンク効果*/
	}
	#list a img {
		transition: all 0.5s ease;
	}
	#list a:hover img {
		transform: scale(1.3);
	}
	/*タイトル*/
	#list a article h2 {
		transition-duration: 0.5s;
		pointer-events: auto;/*リンク効果*/
	}
	#list a article:hover h2 {
		color: var(--main-color);
	}

	/* 関連記事 */
	.related-list a:hover {
		color: var(--main-color);
	}
	
	/* ページ送りナビ */
	.pager-post-navi a:hover {
		background: #f0f0f0;
	}
	
	/* フッターナビ */
	.navi-footer-in a {
		transition: all 0.3s ease-in-out;
		&:hover {
			background: transparent;
			transform: translateY(-0.1875em);
			color: var(--cocoon-text-color);
		}
	}

	/* self-made CSS ========================================== */
	
	/* FREE - PDF download link box */
	div.pdf-box a {
		text-decoration: none;
		display: block;
		&:hover {
			background: #b0e0e6;
		}
	}
	/* FREE - PDF download --img */
	.pdf_image a {
		display: block;
		position: relative;
		margin: 80px 20px 50px;
		&:hover {
			opacity: 1;
		}
		&::before {
			content: "DOWNLOAD";
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,.6);
			color: #f1f1f1;
			font-size: 1.5em;
			letter-spacing: 0.3em; /*文字間隔*/
			text-indent: 0.3em; /*間隔調整*/
			font-weight: bold;
			border-radius: 0;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			display: flex;
			align-items: center;
			justify-content: center;
			opacity: 0;
			transition: all 1s ease-in-out;
		}
	}
	.pdf_image a:hover::before{
		opacity: 1;
	}
	
	/* ネットショップ link box */
	.shop-pdf-link a {
		text-decoration: none;
		transition: all  1s ease;
		&:hover {
			background: #b0e0e6;
		}
	}
	
	/*-- ここまで --*/
}




/*media Queries - 1023px以下　> 1カラムに切替
---------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1023px) {

	.content-in {
		max-width: 720px;
	}
	/*-- ここまで --*/
}

/*media Queries - 959px以下　> 1カラムに切替 > 余白なし
---------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 738px) {
	
	#main:has(#breadcrumb) {
		border-radius: 0;
	}

	/*-- ここまで --*/
}
	
/*media Queries タブレットサイズ（600px～959px）のみで適応したいCSS -タブレットのみ
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) and (max-width: 959px) {

	
	/*-- ここまで --*/
}	
	

/*media Queries PCサイズ（960px）以上で適応したいCSS - PCのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (min-width: 960px) {

	
	/*-- ここまで --*/
}

/*media Queries スマホサイズ（599px）以下で適応したいCSS - スマホのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (max-width: 599px) {
	/*ヘッダー*/
	#header .site-name-text {
		width: 80%;
	}
	
	/* メインエリア 余白設定 */
	#main {
		margin: 0 10px;
		padding: 0;
	}
	#main:has(#breadcrumb) {
		margin: 0;
		padding: 1em;
	}

	/* 記事内ページ送りナビ img */
	.pager-post-navi a figure {
		display: none;
	}
	
	/* プラグイン > 目次 - Rich Table of Contents - */
	.entry-content .rtoc-mokuji-content {
		width: 90%;
	}
	
	/* self-made CSS ========================================== */
	
	/* 使用上の注意 */
	div.caution-box {
		margin: 3em 1em 5em 1em;
		padding: .8em .5em;
	}
	
	/* リフィル内容 */
	.refill-info-box {
		margin: 1em 0em;
	}

	/*-- ここまで --*/
}