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

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

/************************************
/*共通------------------------------------------*/
.main {
    padding: 0px 0px 5px 0px;
    border-radius: 8px;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
	border:none;
}
/* ヘッダーとコンテンツの間　デフォは24もある */
.content {
    margin-top: 24px;
}

/* 一覧の上にスペースいれる */
#list, .list-wrap {
  margin-top: 6px;
}
/* 次のページ　消す */
.pagination-next {
  display: none;
}
/* 本分下のスペース+サイドスペース*/
.entry-content {
    margin-top: 1em;
    margin-bottom: 0;
	padding:10px;
}
/*投稿の画像横幅小さくする*/
img.image.pict{max-width:80%}

/*レスとレスの間隔狭める*/
.entry-content > *, .entry-content > p {
    margin:0 0 0.2em 0;
}
/* 外部アイキャッチ利用*/
.card-thumb img {
    object-fit: cover;
}
/*投稿H2*/
.article h2 {
    font-size: 24px;
    padding: 10px;
    background-color:#fff;
    zzborder: solid #f3d088 3px;
    zzcolor: #515151;
}
/*フッターメニュー文字*/
.navi-footer-in a {
    color: #d18737;
    font-size: 16px;
}
/*フッター上下の幅　デフォだと広すぎる*/
.footer {
    margin-top: 2px;
    padding-top: 2px;
	}
.footer-bottom {
    margin-top: 2px;
    padding: 2px;
    font-size:16px;
}
/*リンク文字太さと間隔*/
.widget {
    margin-bottom: 10px;
    font-weight: bold;
}
/*カテゴリー*/
select {
    padding: 5px;
    border: 2px solid #ccc;
    font-size: 18px;
    width: 100%;
    height: 45px;
}
/* 引用--------------------------------------- */
blockquote {
    position: relative;
    padding: 10px;
    box-sizing: border-box;
    font-weight:bold;
    color: #464646;
    border:  solid 1px #72a570;
}
zblockquote:before{
    display: inline-block;
    position: absolute;
    top: -20px;
    left: -20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    vertical-align: middle;
    text-align: center;
    content: "\f10d";
    font-family: FontAwesome;
    background: #72ccf4;
    color: #FFF;
    font-size: 22px;
    font-weight: 900;
}
zblockquote:after{
    display: inline-block;
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    vertical-align: middle;
    text-align: center;
    content: "\f10e";
    font-family: FontAwesome;
    background: #72ccf4;
    color: #FFF;
    font-size: 22px;
    font-weight: 900;
}
blockquote p {
    padding: 0;
    margin:  0;
    line-height: 1.7;
}
zblockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}
blockquote::before,
blockquote::after {
  display: none;
}
/* 記事下の新着記事 */
.widget-entry-cards:not(.large-thumb-on) .card-title {
  padding-top: 22px;
  font-size: 22px;
}

/*サイドバー------------------------------------------*/
/* 新着記事 */	
.widget-entry-cards.card-large-image figure img{
	height:auto;
}
.widget-entry-cards.large-thumb-on.card-title {
	max-height:45%;
}
.sidebar{
	border-radius:8px;
    background-color: #fff;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
	}
/*サイドバー見出し*/
.sidebar h3{
    background-color: #fff;
    zzheight: 50px;
    margin: 0 0 12px 0;
    padding: 5px 5px;
    color: #d54444;
    zzborder-radius: 5px;
    border-bottom: #d54444 solid 2px;
}
/*----snsボタン間隔+角-----------------------*/
.sns-share.ss-col-5 a {
 width: 20%;
}
.sns-buttons a{
border-radius: 0;
}
.sns-share.ss-col-5 .sns-buttons {
  column-gap: 0;
}
.sns-buttons {
  margin-top: 0px;
  padding:0px;
  }
/*----下部のトップページへのリンク-----------------------*/
.bottomlink{
text-align: center;
width: 100%;
display: table;
border: #f07c7c solid;
  border-radius: 6px;
  color: #d96c6c;
  text-decoration: none;
  background-color: white;
	padding: 10px;
}
.bottomlink:hover{
  color: #fff;
  background-color: #2a2a2a;
  border: #fff solid;
}
/*----次の記事　前の記事--------*/
.pager-post-navi {
    margin: 18px 0;
    border-top: solid silver 1px;
    border-bottom: solid silver 1px;
    font-weight: bold;
}
.pager-post-navi a::before {
    font-size: 1.8em;
    color: #6ee742;
}
.fetch-tweets-heading > .fetch-tweets-user-name a {
    font-size: 14px;
}
.fetch-tweets-heading > .fetch-tweets-tweet-created-at a {
    font-size: 12px;
}
.fetch-tweets-body > .fetch-tweets-text {
    margin-bottom: 0;
    font-size: 14px;
}
.fetch-tweets > .fetch-tweets-item {
    display: inline-block;
    padding-bottom: 0em;
    width: 100%;
    border: solid #70a6fb 1px;
}
.fetch-tweets {
    border-radius:4px;
    border-top: solid 1px #70a6fb;
    border-bottom: solid 1px #70a6fb;
}
/*新着記事*/
.widget h2 {
    font-size: 22px;
    color: #db7373;
    border-left: double 10px;
}
.card-title-bold .card-title {
    padding-top: 10px;
}
/*---コメントのメールアドレス消し-------*/
.comment-form-email { display:none; }
/*---メールアドレスが公開～消す------*/
.comment-notes{display:none;}
/*---コメント前のメッセージ消し-------*/
.comment-information-messag{display:none;}
/*---コメントの名前消し-------*/
.comment-author.vcard{
	display:none;
}
/*---コメントの名前消し-------*/
.comment-form-author{display:none;}
/*---名前消・メアド保持チェック消し-------*/
.comment-form-cookies-consent{display:none;}
/*---コメントフォーム欄サイド-------*/
.comment-area{padding:0 10px;}

/*---コメント欄の色---*/
.comment-body.article{
border: solid 1px #fff8ee;
padding: 5px;
background-color: #fff8ee;
border-radius: 6px;
}
/*---コメント欄の文字色---*/
.comment-content{
    font-weight: bold;
    color: #454545;
    font-size: 18px;
}
/*---コメントボタン---*/
.comment-btn{
  background-color: #f5f8fa;
  border-radius: 45px;
  border: solid 1px green;
}
.comment-btn:hover{
	background-color: white;}
/*--------シンプルスレッドコメント欄------------------------*/
/*---名前消し---*/
.st-comment-author{
	display:none;
}
/*---ID表示させる---*/
.st-comment-id {
  display: inline;
}
/*---メタデータ---*/
.st-comment-meta.st-commentmetadata{
	font-size:16px;
	color:silver;
	border-bottom: dotted 2px silver;
}
/*---コメント本文---*/
.st-comment-content{
	font-size:20px;
	font-weight:bold;
	color: #3d3d3d;
	padding-top: 6px;
}
/*---タグ--*/
.tagcloud a {
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #c57133;
    padding: 3px 5px;
	}
.tagcloud a:hover {
    color:#f05627;
	}
.tagcloud :hover {
	background-color:white;
}
/*---投稿ページの日付-------*/
.date-tags {
    margin-bottom: 0;
    position: absolute;
    top: 162px;
    right: 0px;
    padding:6px;
    margin-right: 0px;
    color: white;
    background-color: rgba(51, 51, 51, 0.9);
    font-size: 20px !important;
}
/*---ウィジェットタイトル色-------*/
.widget {
    color: #3c90b1;
}
/*--------ふたば用-------------*/
.cnw{color: #b1adad;
  font-size: small;}
.cno{display:none;}
z.rsc{display:none;}
.rsc{color: #b1adad;
  font-size: small;}
.rsc:after{
content: ": ";
}


span.custumread  {
    position: relative;
    line-height: 2;
	font-weight:bold;
	padding: 0px 4px 18px 4px;
	margin-bottom: 0;
    display: block;
	color: #464646;
}
/*共通ここまで-------------------------------------------------*/
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

/*1030px以下*/
@media screen and (max-width: 1030px){
  /*必要ならばここにコードを書く*/
.entry-card-content {
    margin-left: 32%;
  }	
}

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

	
/* スマホはこれが必要 */
.no-scrollable-main .main {
    padding:0px;
}
/* ヘッダーロゴ */
.logo-image  {
  position: relative;
  left: 20px;
  top: 20px;
  }
 /*レス文字サイズ  */
.t_b{font-size:18px
	}
/*------------一覧------------------*/
.entry-card {
    height: 100px;
	}
.card-thumb img {
    object-fit: cover;
    height: 100px !important;
}
.entry-card-thumb {
    width: 30%;
    height: 100px;
    margin: 0 4px 0 0;
}
.a-wrap {
    padding: 0 4px;
    margin-bottom: 0px;
}	
.entry-card-title {
	padding-top:10px;
	font-size:18px;
		}
/*------------アイキャッチ------------------*/
.eye-catch {
    position: relative;
    margin-bottom: 0em;
    max-width: 100%;
    max-height: 190px;
}
.eye-catch img, .eye-catch amp-img {
    width: 100%;
    min-width: 100%;
    display: block;
    height: 190px;
    object-fit: cover;
	border-radius: 0;
	opacity: 0.6;
}
.entry-title {
    color: white;
    position: absolute;
    top: 30px;
    left: 0px;
    background-color:rgba(51, 51, 51, 0.9);
    z-index: 1;
	padding:12px 4px;
    width:100%;
	font-size:24px;
}
/* ライブドア*/
.blogroll-channel .blogroll-list-wrap {
    margin: 5px;
    padding-left: 3px;
}
.blogroll-channel a.blogroll-link {
    font-size: 16px;
	text-decoration: none;
	color:#3333FF;
	margin-bottom:5px;
	}
.blogroll-channel .blogroll-list {
    margin-bottom: 10px !important;
	border-bottom: solid 1px silver;
	padding-bottom:7px;
	}
/*----ライブドア広告消し------------*/
.blogroll-channel .blogroll-ad-text {
    border:none;
    font-size: 0 !important;
}
.blogroll-ad-default{
		font-size:0 !important;
	}
/*------------- 外部アイキャッチ利用---------*/
.card-thumb img {
    object-fit: cover;
    height: 90px;
}
}
/*769px以上*/
@media screen and (min-width: 769px){

/* ヘッダーロゴ */
.logo-image  {
position: relative;
      left: 150px;
}
/*レス文字サイズ  */
.t_b{font-size:22px
	}
/* ---------エントリーカード------------- */
.entry-card-thumb {
    width: 200px;
    height:112px;
    margin-top:0px;
	}
.card-thumb img {
    width: 200px;
    height: 112px;
	}
.a-wrap {
    text-decoration: none;
    color: #333;
    padding: 0px;
    margin-bottom: 0px;
}
.entry-card-title {
    font-size: 24px;
    margin-bottom: 5px;
    padding-right:5px;
    padding-top:15px;
    line-height: 1.2;
    font-weight: bold;
}
/* -------ホバーエフェクト------------- */
.entry-card-wrap:hover{
  background-color: white;
  color: #d0721f;
	}	
/* -------一覧の余白------------- */	
.entry-card-content {
    margin-left: 0px;
	padding-bottom:0;
}
.e-card-info > span {
    margin-right: 10px;
    margin-bottom: 5px;
}
.entry-card{
    margin-bottom: 0px;
}
/* ----------- 一覧のページ送り */
.pagination .current {
    background-color: #f6f6f6;
}
.page-numbers {
    color: #d5662c;
    height: 70px;
    width: 70px;
    border-color:#d5662c;
    margin: 0 4px;
    line-height: 70px;
    border-radius: 0px;
}
.pagination {
   margin: 10px 0 20px 0;
}
.pagination a:hover {
    background-color: #fbf3f2;
}
/* ------投稿記事-------------------------------------- */
/*投稿の関連記事*/
.related-entry-card-wrap{
	height:200px;
}
.rect-vartical-card .related-entry-card-thumb img {
    width: 100%;
    object-fit: cover;
}

/*----ライブドア--------------*/
.blogroll-channel{
		padding:0;
		margin-bottom:5px;
	}	
.blogroll-channel .blogroll-list-wrap {
    margin-bottom: 10px;
    padding-left: 3px;
}
.blogroll-channel a.blogroll-link {
    font-size: 18px;
	text-decoration: none;
	color:#3333FF;
	}
.blogroll-channel .blogroll-list {
    margin-bottom: 3px;
    line-height: 1.3;
    border: 1px solid silver;
    border-radius: 2px;
	}
/*----ライブドア広告消し------------*/
.blogroll-channel .blogroll-ad-text {
    border:none;
    font-size: 0 !important;
}
.blogroll-ad-default{
		font-size:0 !important;
	}
/*------------アイキャッチ------------------*/
.entry-card {
    margin-left: 15px;
	}
.eye-catch {
    position: relative;
    margin-bottom: 0em;
    max-width: 100%;
    max-height: 190px;
}
.eye-catch img, .eye-catch amp-img {
    width: 100%;
    min-width: 100%;
    display: block;
    height: 190px;
    object-fit: cover;
	border-radius: 6px 6px 0 0;
	opacity: 0.6;
}
.entry-title {
    color: white;
    position: absolute;
    top: 30px;
    left: 0px;
    background-color:rgba(51, 51, 51, 0.9);
    z-index: 1;
	padding:15px 8px;
    width:100%;
	font-size:28px;
}
.footer-left{width:50%;}
.footer-center{width:11%;}	
/*----記事下の新着記事----------*/
.card-title-bold .card-title {
    padding-top: 14px;
    font-size: 24px;
}
/*----新着記事外部イメージ------------------*/
.widget-entry-cards.card-large-image figure img {
    height: 180px;
}
.slidertest {
  display: flex;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  height:400px;
  overflow: hidden;
}
.slidertest ul{
	display:flex;
	padding: 0;
	margin:0;
}
.slidertest li{
	width:600px;
	list-style: none;
}
.slidertest ul:first-child {
  animation: slide1 150s -75s linear infinite;
}
.slidertest ul:last-child {
  animation: slide2 150s linear infinite;
}
@keyframes slide1 {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slide2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
}