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

/* ==========================================
 *   WordPress管理バーのカスタマイズ
 * ========================================== */
#wpadminbar {
	position: fixed !important;
	top: auto !important;
	left: 0 !important;
	bottom: 0 !important;
	background-color: rgba(0, 0, 0, 0.75) !important;
}


/* ==========================================
 *   共通
 * ========================================== */
html {
	margin-top: 0 !important;
}

body, body.ff-meiryo {
	background-color: #F8F9FA;
	color: #000;
	font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", "Segoe UI", Arial, "Meiryo", "Hiragino Kaku Gothic Pro", "游ゴシック体", "Yu Gothic", sans-serif;
	-moz-font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
	letter-spacing: .04em;
}

img, amp-img {
	vertical-align: bottom;
}


/* ==========================================
 *   ヘッダー
 * ========================================== */
#header-container {
	width: 100%;
	background-color: transparent !important;
}

.home:not(.paged) .header-container-in.hlt-top-menu {
	flex-direction: column;
}

.home:not(.paged) .header-in {
	display: block;
}

.home:not(.paged) .header-container-in.hlt-top-menu .logo-header {
	height: 600px;
	max-height: none;
}

.header .site-name-text {
	font-family: Montserrat, sans-serif;
	text-transform: uppercase;
	color: #000 !important;
}

.home:not(.paged) .header-container-in.hlt-top-menu .site-name-text {
	font-size: 3em;
	position: relative;
	display: block;
}

.home:not(.paged) .header-container-in.hlt-top-menu .site-name-text:before {
	content: "";
	top: 0;
	left: 50%;
	transform: translate(-50%, -10%);
	border-bottom: 120px solid transparent;
	border-left: 120px solid transparent;
	border-right: 120px solid transparent;
	border-top: 160px solid #fff;
	position: absolute;
	z-index: 100;
	opacity: 0.75;
}

#navi, #navi a {
	display: none;
}


/* ==========================================
 *   コンテンツ
 * ========================================== */
#content {
	margin: 0 0 20px;
}

/*   メインカラム
 * ------------------------------------------ */
.main {
	padding: 0 !important;
	background-color: transparent;
}


/*   メインカラム > エントリーカード
 * ------------------------------------------ */
.a-wrap {
	padding: 0;
	margin-bottom: 20px;
	overflow: hidden;
}

.entry-card,
.related-entry-card {
	background-color: #FFF;
	padding: 20px;
}

.entry-card-thumb,
.widget-entry-card-thumb,
.related-entry-card-thumb,
.carousel-entry-card-thumb {
	margin-top: 0;
	position: static !important;
}

.cat-label {
    top: auto;
    bottom: -.1em;
    left: auto;
    right: 0;
    border: 0;
    color: #F0F0F0;
	text-align: right;
    background-color: transparent;
    padding: 0;
    max-width: none;
    text-transform: uppercase;
	line-height: 1;
	font-size: 5em;
	font-weight: 700;
	font-style: italic;
	letter-spacing: -.06em;
	z-index: 101;
}

.entry-card-content,
.related-entry-card-content {
	padding: 0;
	margin-left: 340px;
	position: relative;
	z-index: 102;
}

.entry-card-title,
.related-entry-card-title {
	margin: 0 !important;
	padding: 30px 0 0;
	font-size: 1.25em;
	line-height: 1.6;
}

.entry-card-meta,
.related-entry-card-meta {
	position: absolute;
	top: 0;
	bottom: auto;
	right: auto;
	left: 0;
	text-align: left;
	line-height: 2;
}

.e-card-info {
	display: inline;
}

.entry-card .post-date,
.related-entry-card .post-date {
	font-family: 'Rubik', sans-serif;
	color: #666;
	font-size: 1em;
	margin: 0;
}

.entry-card .post-date .fa-clock, 
.related-entry-card .post-date .fa-clock {
	display: none;
}


.a-wrap:hover .entry-card {
	box-shadow : 0 0 0 1px #A0A0A0 inset;
	transition-duration: .7s;
}

.a-wrap:hover .cat-label {
	-webkit-text-stroke: 1px #A0A0A0;
	text-stroke: 1px #A0A0A0;
	transition-duration: .7s;
}







/*   メインカラム > エントリー
 * ------------------------------------------ */
.article {
	position: relative;
}

.article header {
	position: relative;
	width: 1174px;
	min-height: 240px;
	height: 50vh;
	overflow: hidden;
	background-color: #343A40;
}

.article h1 {
	margin: 0;
	position: absolute;
	z-index: 9999;
	color: #FFF;
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 85%;
}

.eye-catch-wrap {
	display: inline;
}

.eye-catch {
	margin: 0;
}

.eye-catch img {
	width: 100%;
	filter: brightness(66%);
}

.date-tags {
	color: #FFF;
	font-size: x-large;
	line-height: 1;
	text-align: center;
	display: block;
	margin: 0;
	flex-direction: row;
	position: absolute;
	top: 75%;
	left: 50%;
	transform: translate(-50%, -75%);
	width: 100%;
}

.post-date, .post-update, .post-author, .amp-back {
	margin: 0;
	padding: 0;
}

.date-tags .post-update {
	margin-right: 24px;
}

.date-tags .amp-back {
	position: absolute;
	bottom: -36px;
	left: 50%;
	transform: translateX(-50%);
}

.date-tags .amp-back a {
	color: #FFF;
	text-decoration: none;
}

.entry-content>*:not(div):not(p):not(.blogcard-wrap) {
	padding-left: 20px;
	padding-right: 20px;
}

.entry-content>p,
.entry-content>table,
.entry-content>ul,
.entry-content>ol {
	margin-left: 20px;
	margin-right: 20px;
}

.entry-content h2 {
	background-color: transparent;
	border-bottom: 2px solid #000;
	padding-top: 20px;
	padding-bottom: 20px;
}

.entry-content h3 {
	border-top: 0;
	border-right: 0;
	border-bottom: 0;
	border-left: 2px solid #000;
}

.entry-content p>img.size-full,
.entry-content p>amp-img.size-full {
	min-width: calc(100% + 40px);
	width: calc(100% + 40px);
	margin: 0 -20px;
}

.entry-content p>img:not(.size-full),
.entry-content p>amp-img:not(.size-full) {
	filter: drop-shadow(0 0 5px rgba(170, 170, 170, 0.75));
}

.wp-caption {
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	text-align: left;
	max-width: 100% !important;
}

.wp-caption-text {
	margin: 0;
	padding: 2px 20px;
}

.entry-content pre, .hljs {
	border: 0;
	font-size: inherit;
	font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

.ad-index-middle {
	margin: 0;
	padding: 20px 0;
}

.product-item-box {
	background-color: #FFF;
	padding: 16px;
	width: auto;
	border: 0;
}

.pis-l .product-item-content {
	clear: both;
}

.product-item-title {
	overflow: hidden;
	line-height: 1.8;
	max-height: 3.6em;
}

.product-item-title a {
	color: #000;
	text-decoration: none;
}

.product-item-snippet {
	font-size: 1em;
}

.product-item-maker,
.product-item-admin {
	display: none;
}

.acquired-date {
	font-size: .8em;
}

.product-item-buttons div {
	width: 32%;
}

.product-item-buttons a {
	border-radius: 3px !important;
	padding: 6px;
}

.video-container {
	margin: 1.4em auto;
}




/*   メインカラム > エントリー > テーブル
 * .......................................... */
.entry-content table {
    overflow: scroll;
	max-width: calc(100% - 40px);
	width: calc(100% - 40px);
}

.entry-content tbody tr th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
}

/*   メインカラム > エントリー > 吹き出し
 * .......................................... */
.sbp-r, .sbp-l {
	margin: 1.4em 20px !important;
}







hr {
	border: 0;
}

hr:after {
	content: "* * *";
	color: #000;
	text-align: center;
	display: block;
}

.pagination-next,
.author-info,
.pager-post-navi a.prev-next-home {
	display: none;
}






/*   メインカラム > エントリー > SNSボタン
 * .......................................... */
.sns-share.ss-col-5 a {
	width: calc(100% / 5) !important;
}

.sns-share-buttons a {
	margin: 0;
}

.sns-buttons a {
	border-radius: 0;
	height: 36px;
}

/*   メインカラム > エントリー > ブログカード
 * .......................................... */
.blogcard-wrap {
	padding: 16px !important;
	width: auto !important;
	border: 0;
}

.blogcard {
	margin: 0;
	padding: 0;
	border-radius: 0;
	border: 0;
}

.internal-blogcard::before {
	content: "";
	bottom: 0;
	right: 0;
	border-top: 60px solid transparent;
	border-right: 60px solid #FFC107;
	position: absolute;
	z-index: 100;
}

.internal-blogcard::after {
	content: "";
	bottom: 0;
	right: 0;
	display: block;
	-webkit-transform: rotate(-45deg);
	   -moz-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	     -o-transform: rotate(-45deg);
	        transform: rotate(-45deg);
    position: absolute;
	z-index: 101;
}

.internal-blogcard::after {
	content: "More";
	width: 45px;
	height: 45px;
	line-height: 45px;
	overflow: hidden;
	font-size: 11px;
	color: #FFF;
	letter-spacing: 0;
	text-transform: uppercase;
	text-align: center;
}

.blogcard-thumbnail {
	margin: 0 0 0 10px !important;
	width: 200px;
	float: right;
	font-size: 0;
	filter: drop-shadow(0 0 10px rgba(188, 188, 188, 0.75));
	max-height: 120px;
	overflow: hidden;
}

.blogcard-content {
	margin: 0;
}

.blogcard-title {
	margin: 0;
	font-size: 1.1em;
	overflow: hidden;
	line-height: 1.6;
	max-height: 4.8em;
}

.blogcard-title:before,
.pager-post-navi a.prev-post .prev-post-title:before,
.pager-post-navi a.next-post .next-post-title:before {
	background-color: #000;
	margin-right: 5px;
	padding: .5px 5px;
	border-radius: 3px;
	color: #FFF;
	font-size: .84em;
	text-transform: uppercase;
}

.internal-blogcard-title:before {
	content: "Related";
}

.external-blogcard-title:before {
	content: "External";
}

.blogcard-snippet {
	font-size: 1em;
	color: #666;
	margin: 10px 0 0 0;
	overflow: hidden;
	line-height: 1.6;
	max-height: 3.2em;
}

.blogcard-footer {
	padding: 0;
	font-size: 0;
}

.internal-blogcard-site {
	display: none;
}

.external-blogcard-site {
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: #FFC107;
	color: #FFF;
}

.external-blogcard-favicon {
	margin: 0;
}

.external-blogcard-domain {
	padding: 0 2px;
	letter-spacing: 0;
	overflow: hidden;
	max-width: 184px;
	display: inline-flex;
	text-transform: uppercase;
	font-size: 12px;
	line-height: 1.2;
}


/*   メインカラム > エントリー > 関連
 * .......................................... */
.related-entry-card-snippet,
.related-entry-card-meta {
	display: none;
}

/*   メインカラム > エントリー > ページ送りナビ
 * .......................................... */
.pager-post-navi {
	margin: 10px 0;
}

.pager-post-navi a.prev-post,
.pager-post-navi a.next-post {
	padding: 10px 0;
	align-items: flex-start;
	line-height: 1.6;
	font-size: .9em;
}

.pager-post-navi a .iconfont {
	display: none;
}

/* .pager-post-navi a figure {
	min-height: 90px;
	max-height: 90px;
	overflow: hidden;
}*/

.pager-post-navi a.prev-post .prev-post-title:before {
	content: "Older";
}

.pager-post-navi a.next-post .next-post-title:before {
	content: "Newer";
}

.pager-post-navi a.prev-post .prev-post-title,
.pager-post-navi a.next-post .next-post-title {
	margin: 0 10px;
}



/*   メインカラム > 固定ページ
 * ------------------------------------------ */
.breadcrumb {
	display: none;
}

/*   メインカラム > アーカイブページ
 * ------------------------------------------ */
.archive-title {
	font-size: 32px;
	text-transform: uppercase;
	margin: 0 0 20px;
	line-height: 5;
	text-align: center;
	color: #FFF;
	background: linear-gradient(45deg, #DA4453, #89216B);
	width: 1174px;
}

/*   メインカラム > ページ番号
 * ------------------------------------------ */
.pagination .current {
	background-color: #333;
	border-radius: 50%;
	color: #FFF;
}

.page-numbers {
	border: 0;
	border-radius: 50%;
}





/*   サイドバー
 * ------------------------------------------ */
#sidebar {
	background-color: transparent;
}

.sidebar {
	padding: 0 !important;
}

body:not(.home):not(.archive) #sidebar {
	margin-top: calc(50vh + 20px);
}

body.archive #sidebar,
body.search #sidebar {
	margin-top: 180px;
}

.sidebar h3 {
	background-color: transparent;
	padding: 0;
	border-radius: 0;
}

.author-description p {
	text-align: justify;
}

.sidebar ul {
	font-size: 0;
}

.widget_categories ul li,
.widget_archive ul li {
	display: inline-block;
	margin: 2px;
	padding: 0;
	font-size: 13px;
	letter-spacing: 0;
}

.widget_categories ul li a,
.widget_archive ul li a {
	background-color: #343A40;
	color: #FFF;
	text-transform: uppercase;
	padding: 2px 4px;
	border-radius: 3px;
}

.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: #FFC107;
    transition: all .5s ease;
    color: #FFF;
}

.widget_categories ul li a span,
.widget_archive ul li a span {
	font-weight: bold;
}

.widget_categories ul li a span:before,
.widget_archive ul li a span:before {
	content: ":";
	padding-left: .1em;
}

.ad-label {
	margin: 16px 0;
	font-size: 1.17em;
	font-weight: bold;
	padding-left: 10px;
}

.ad-area {
	text-align: left;
}



.widget-entry-cards .a-wrap {
	padding: 0;
	line-height: 1.6;
	margin-bottom: 20px;
}


.widget-entry-card {
	font-size: 14px;
}


.widget-entry-card-content {
	margin-left: 130px;
}

.widget-entry-cards.ranking-visible .card-thumb:before {
	display: none;
}







/*   フッター
 * ------------------------------------------ */
.footer {
	padding-bottom: 40px;
}

.navi-footer-in a {
	color: #FFF;
}

.footer .widget ul,
.search-box {
	margin: 1em 0;
}

.widget ul li {
	margin: 0 4px 2px 0;
}

.footer .search-edit {
	border: 0;
}














/* ==========================================
 *   レスポンシブデザイン用
 * ========================================== */

@media screen and (max-width: 1178px) {
	.main												{ width: 66vw; margin: 0; }
	.article header, .archive-title						{ width: calc(96vw + 24px); }
	.sidebar											{ width: 30vw; }
	body:not(.home):not(.archive) div.sidebar			{ margin: calc(50vh + 20px) 0 0 0 !important; }
	body:not(.home):not(.page-template-default):not(.post-template-default) div.sidebar			{ margin: 180px 0 0 0 !important; }
}

@media screen and (max-width: 1023px) {
	body.home .content-in, body.archive .content-in		{ margin: 0 20px; }
	.article header										{ width: 100%; }
	.archive-title										{ width: calc(100% + 20px); margin: 0 -10px 20px; }
	.pager-post-navi									{ padding: 0 10px; }
	body:not(.home) div#sidebar, main.main				{ margin: 0 !important; }
	body.page-template-default div#sidebar, body.post-template-default div#sidebar { margin: 0 10px !important; }
}

@media screen and (max-width: 834px) {
	#content, body.archive .content-in, body.home div#sidebar		{ margin-top: 0 !important; }
	.home:not(.paged) .header-container-in.hlt-top-menu				{ display: flex; }
	.home:not(.paged) #header .logo-text							{ height: 600px; display: flex; }
	.home:not(.paged) #header .site-name-text						{ font-size: 2.5em; }
	.article header													{ height: auto; min-height: 0; }
	.date-tags 														{ font-size: large; }
	.button-caption													{ display: none; }
	.blogcard-content												{ margin: 0; }
}

@media screen and (max-width: 480px) {
	.home:not(.paged) #header .site-name-text	{ font-size: 8vw; }
	.entry-card									{ padding: 0 0 20px; }
	.entry-card-thumb							{ margin: 0 !important; width: 100% !important; }
	.cat-label									{ font-size: 1.8em; bottom: -.18em; }
	.entry-card-content							{ margin: 0 10px !important; clear: both; }
	.entry-card-meta							{ margin: 0; }
	.blogcard-wrap								{ padding: 10px; }
	.blogcard-snippet 							{ display: none; }
	.blogcard-thumbnail 						{ width: 120px; max-height: 80px; }
	.internal-blogcard::before 					{ border-width: 40px 40px 0 0; }
	.internal-blogcard::after 					{ width: 30px; height: 30px; line-height: 30px; font-size: 9px; }
	.external-blogcard-domain					{ max-width: 104px; font-size: 9px; line-height: 1.8; }
	.product-item-box 							{ padding: 10px; }
	.product-item-content 						{ text-align: left !important; }
	.product-item-buttons > * 					{ width: auto; }
	.sns-share									{ margin: 0; }
	.ss-bottom									{ position: fixed; z-index: 99999; left: 0; bottom: 0; width: 100%; }
	.pager-post-navi							{ display: block; }
	.pager-post-navi:after						{ clear: both; }
	.pager-post-navi a.prev-post, .pager-post-navi a.next-post { padding: 0; width: calc(50% - 5px); display: block; border: 0 !important; }
	.pager-post-navi a.prev-post				{ float: left; }
	.pager-post-navi a.next-post				{ float: right; }
	.pager-post-navi a figure					{ min-width: 100%; max-width: 100%; }
	.pager-post-navi a.prev-post .prev-post-title, .pager-post-navi a.next-post .next-post-title { margin: 5px 0; }
	.author-box									{ font-size: .9em; }
}