@charset "UTF-8";

/*!
Theme Name:  Webspoon
Template:    cocoon-master
Description: webspoon default theme based cocoon child theme.
Author:      Masao Watanabe
Author URI:  https://webspoon.net/
Template:    Cocoon Child
Version:    1.0.0
*/

/*
Base Color:   #f9f9f9
Main Color:   #202935
Accent Color: #e21041
Text Color:   #333747
Link Color:   #2878b2
*/


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

/* common */
body {
	font-family: 'Roboto', 'Noto Sans CJK JP', 'Noto Sans JP', 'Avenir Next', 'Helvetica Neue', 'Helvetica', 'Calibri', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic', 'Arial', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    line-height: 1.8;
	letter-spacing: .4px;
}

/* layout */
.content {
    margin-top: 0;
}
.wrap {
	width: 100%;
}
.article-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	height: 28vw;
	background: #263238;
}
.eye-catch-wrap, .eye-catch {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.eye-catch {
	display: flex;
	align-items: center;
	justify-content: center;
}
.eye-catch img {
	position: absolute;
	width: 100%;
	height: auto;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	opacity: .35;
}
.main {
	padding: 0;
	border: none;
	background: none;
}
.entry-content {
	max-width: 760px;
	margin: 80px auto 0;
}

/* title */
.article h1 {
	width: 760px;
	color: #fff;
	font-size: 40px;
	text-align: center;
	z-index: 1;
}
.article h1::after {
	content: '';
	display: block;
	margin: 8px auto 0;
	width: 60px;
	height: 2px;
	background: #fff;
}
.article h2 {
	padding: 20px 0;
	color: #202935;
	font-size: 28px;
	line-height: 1.45;
	letter-spacing: 1.25px;
	background: none;
	border-bottom: thin solid #ddd;
}
.article h3 {
	padding: 0;
	font-size: 24px;
	border: none;
}
.article h3::before {
	content: '# ';
	font-size: 20px;
}

/* text */
a {
	transition: all .25s ease-in-out;
}

/* tags */
.article-header .entry-categories-tags {
	margin: 0 0 8px;
	z-index: 1;
}
.cat-link {
	margin-right: 8px;
}
.cat-link::before {
	content: none;
}
.article-header .entry-categories-tags .cat-link {
	padding: 0 8px;
	font-size: 13px;
	opacity: 1;
	border: none;
	border-radius: 3px;
}


/* navi */
.navi-in > ul li {
    height: 48px;
    line-height: 48px;
}
.navi-in .has-icon {
    right: -1px;
    top: 0px;
    opacity: 0.9;
    font-size: 15px;
}
.fa-s {
	font-size: 1.1em;
	line-height: 0.75em;
	vertical-align: -10%;
}
.fa-r8 {
	margin-right: 8px;
}


/* meta */
.article-header .sns-share {
	position: absolute;
	bottom: -24px;
}
.article-header .sns-share .sns-share-buttons > a {
	display: flex;
	flex-direction: row;
	margin: 0 8px;
	width: 48px;
	height: 48px;
	border-radius: 99px;
}
.sns-share .sns-share-buttons > a {
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12);
}
.sns-share .sns-share-buttons > a:hover {
	box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
	opacity: 1;
}
.sns-share .sns-share-buttons > a > .social-icon {
    font-size: 20px;
}
.sns-share .sns-share-buttons > a > .button-caption {
	display: none;
}
.date-tags {
	color: #fff;
	z-index: 1;
}
.date-tags .post-date,
.date-tags .post-update {
	font-size: 13px;
}

/* index */
.toc {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 0;
	border: none;
}
.toc-title {
	padding: 20px 0;
	color: #202935;
	font-size: 28px;
	font-weight: bold;
	letter-spacing: 2px;
}
.toc-list {
	font-size: 16px;
}
.toc-list a:hover {
	color: #e21041;
	text-decoration: none;
	opacity: .75;
}

/* images */
.entry-content img, amp-img {
	width: 100%;
}

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

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

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

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