@charset "UTF-8";
/************************************
****　記事本文　ブログカード
************************************/
.blogcard {
padding-bottom:.8%;
border: 0px solid whitesmoke;
border-radius:4px;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 30%);
}
a.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf,
a.blogcard-wrap.external-blogcard-wrap.a-wrap.cf{
transition: all 200ms;
}
a.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf:hover,
a.blogcard-wrap.external-blogcard-wrap.a-wrap.cf:hover{
background-color: #fafafa;
box-shadow:none;
transform: none;
}
.blogcard-footer {
padding-top: 2%;
}
.blogcard:before {
display:none;
}
.internal-blogcard::after,
.external-blogcard::after{
content: "続きを読む ≫"; 
position: absolute;
bottom: 0.7em;
right: 1em;
font-size: 0.7em;
background-color: #8b968d;/*続きを読むの背景色変更はこちら*/
padding: .4em 3em;
font-weight: bold;
color: #fff;
border-radius: 2px;
}
.blogcard-content{
max-height: none;
}
.blogcard-date{
display:none;
}
.blogcard-title {
font-size:1em;
padding:.2em .2em 0;
line-height:1.4em;
text-align: justify;
}
.blogcard-snippet {
padding:0em .5em;
color:#7b7b7b;
text-align: justify;
}
@media screen and (max-width: 1023px){
.blogcard-title {
padding:.3em .3em 0em .2em;
line-height:1.5em;
}
.blogcard-snippet {
font-size:.9em;
margin-top:.3em;
}
}
@media screen and (max-width: 960px){
.blogcard-title {
padding:.3em .3em .2em .2em;
line-height:1.5em;
}
.blogcard-snippet{
font-size:.8em;
max-height:15em;
}
}
@media screen and (max-width: 834px){
.blogcard-title {
font-size:1.1em;
padding:.2em .3em .5em .2em;
}
.blogcard-snippet {
font-size:.9em;
}
}
@media screen and (max-width: 740px){
.blogcard-title {
padding:.3em;
}
}
@media screen and (max-width: 673px){
.blogcard-title {
padding:.3em .5em 1em .2em;
line-height:1.8em;
}
.blogcard-snippet {
display:none;
}
}
@media screen and (max-width: 480px){
.blogcard {
padding-bottom: 2%;
}
.blogcard-title {
padding:.1em .4em 0em .1em;
line-height:1.5em;
}
.blogcard-footer {
padding-top: 5%;
}
}
@media screen and (max-width: 410px){
.blogcard-domain{
max-width: 11em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}}
@media screen and (max-width: 375px){
.blogcard-domain{
max-width: 9em;
}}

/************************************
****　記事本文　ブログカード　ラベル
************************************/
.bct-related .blogcard-label,/*関連記事*/
.bct-reference .blogcard-label,/*参考記事*/
.bct-reference-link .blogcard-label,/*参考リンク*/
.bct-popular .blogcard-label,/*人気記事*/
.bct-together .blogcard-label,/*あわせて読みたい*/
.bct-detail .blogcard-label,/*詳細はこちら*/
.bct-check .blogcard-label,/*チェック*/
.bct-pickup .blogcard-label,/*ピックアップ*/
.bct-official .blogcard-label,/*公式サイト*/
.bct-dl .blogcard-label{/*ダウンロード*/
display: inline !important;
background-color: #90C31F;
margin-left:.5em;
}
@media screen and (max-width: 600px){
.blogcard-label{
margin-bottom:-0.3em!important;
}
}

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

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

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

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	/* コピーライトの文字回転モバイル */
	.sns-buttons {
	margin-top: 1.1em; /*シェアボタン上の余白調整*/
    margin-bottom: 0em; /*シェアボタン下の余白調整*/
}
	.entry-categories-tags {
    margin-bottom: 40px;
}
}

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

/*メインカラムの幅を横幅いっぱいに広げる*/
.wrap {
   width: auto;
}

/*メインカラムの幅を横幅いっぱいに広げる2*/
.entry-content{
	margin: 0px -10px 0px -10px;
}



/*ヘッダーやメニューの影を消す*/
.fixed-header {
    box-shadow: none;
}

/*リンクの下線を消す*/
a{
text-decoration: none;
}


/* ホバー状態 */
a:hover{
  text-decoration: underline;
}



/*ヘッダー背景透明化*/
#header-container {
background-color: transparent;
}
/*ナビゲーションメニュー背景透明化*/
#header-container .navi {
background-color: transparent;
}
/*上部の余白を消す*/

#main {
  margin-top: 0;
}
.content {
  margin-top: 0;
}
.article h1 {
  margin-top: 0;
  padding-top: 0;
}
/* メニュー左寄せ */
.tagline,
.logo {
	text-align: left;
}
.navi-in > ul {
	justify-content: flex-start;
}

/* モバイル時フッターのメニュー非表示 */
.mobile-menu-buttons .sidebar-menu-button {
	display: none;
}

/* コピーライトの文字回転 */
    .vertical-text {
        display: inline-block;
        transform: rotate(-90deg);
        transform-origin: 10px 10px;
        width: 20px; height: 20px;
        padding: 0;
        white-space: nowrap;
		font-size : 10pt
    }

/* コピーライトの文字回転モバイル 左側*/
    .vertical-text2 {
        display: inline-block;
        transform: rotate(-90deg);
        transform-origin: 5px 9px;
        width: 0px; height:15px;
        padding: 0px;
        white-space: nowrap;
		font-size : 10pt
    }

/* コピーライトの文字回転モバイル 右側*/
    .vertical-text3 {
        display: inline-block;
        transform: rotate(-90deg);
        transform-origin: 11px 10px;
        width: 0px; height:22px;
        padding: 0px;
        white-space: nowrap;
		font-size : 10pt
    }



/* 固定ページのメニュー1 */
.koteimenu1{
  font-size: 1.25em;
  text-align: right;
  position: fixed; /* バナーを追従させる */
  z-index: 99999; /* 他の要素の下に隠れないように */
  top: 150px; /* バナーの上下の位置 */
  right: 15px; /* バナーの左右の位置 */
}
@media screen and (max-width: 1280px){
.koteimenu1{
  font-size: 1.25em;
  text-align: right;
  position: fixed; /* バナーを追従させる */
  z-index: 99999; /* 他の要素の下に隠れないように */
  top: 85px; /* バナーの上下の位置 */
  right: 15px; /* バナーの左右の位置 */
}
}
@media screen and (max-width: 1024px){
.koteimenu1{
  font-size: 1.25em;
  text-align: right;
  position: fixed; /* バナーを追従させる */
  z-index: 99999; /* 他の要素の下に隠れないように */
  top: 130px; /* バナーの上下の位置 */
  right: 15px; /* バナーの左右の位置 */
}
}

/* 固定ページのメニュー2 */
.koteimenu2{
  font-size: 6.5em;
  position: fixed; /* バナーを追従させる */
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
    top: 510px;
	right: 1px;
    font-family: 'Zen Antique Soft', serif;
}
@media screen and (max-width: 1280px){
.koteimenu2{
  font-size: 6.5em;
  position: fixed; /* バナーを追従させる */
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
    top: 390px;
	right: 1px;
    font-family: 'Zen Antique Soft', serif;
}	
}
@media screen and (max-width: 1024px){
.koteimenu2{
	display: none;
  font-size: 6em;
  position: fixed; /* バナーを追従させる */
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
    top: 258px;
	right: 1px;
    font-family: 'Zen Antique Soft', serif;
}

}

p{
	font-family:'Young Serif', 'Zen Old Mincho', serif;
}




@media screen and (max-width:768px){
.post p:not(.max-img) {
margin-left:15px;
margin-right:15px;}
}





/*ここから下は画像に影を付けてフワっと浮かせるCSS*/

.entry-card-thumb {
    transition-duration: 0.3s; /*アニメーションの時間*/
    box-shadow: 0px 4px 15px -5px rgba(85,85,85,0.75); /*通常時の画像の影*/
}
.entry-card-thumb:hover {
    transform: translateY(-6px); /*マウスホバーで上に移動*/
    box-shadow: 0px 8px 18px -5px rgba(85,85,85,0.75); /*マウスホバー時の画像の影*/
}
.entry-card-thumb img { /*画像下の隙間を消す*/
    vertical-align: bottom;
}
.a-wrap:hover { /*マウスホバー時の全体の背景色を消す*/
    background: none;
}

.entry-card-title {
    margin-top: 10px; /*上に余白を付ける*/
    line-height: 1.5; /*行間を広く*/
}
.entry-card-title:hover {
    color: #49add1; /*マウスホバー時の色*/
}
@media screen and (max-width: 768px){
    .entry-card-title {
        font-size: 14px; /*スマホでの文字の大きさ*/
        line-height: 1.4; /*スマホでの行間*/
    }
}

.cat-label {
    top: 0;
    left: 10px;
    border: none;
    font-size: 12px;
    color: #fff;
    background-color: #49add1;
    padding: 1px 5px;
    margin: -6px 0 0 0;
    overflow: visible;
}
.cat-label::after { /*右上に小さな三角を作る*/
    position: absolute;
    content: '';
    top: 0;
    right: -6px;
    border: none;
    border-bottom: solid 6px #3089a9; /*小さな三角の色*/
    border-right: solid 6px transparent;
}

.e-card-info {
  color: #666; /*色を薄く*/
}
@media screen and (max-width: 768px){
    .e-card-info {
  font-size: 11px; /*スマホでの文字サイズ*/
    }
}

/*画像に影を付けてフワっと浮かせるCSSでスマホでカテゴリー名が長すぎて入らない場合の文字の長さ調整*/
@media screen and (max-width: 480px){
  .cat-label {
    font-size: 9px;
    max-width: 90%;
    overflow: visible;
}
}


/*モバイル時のカラムもしくは文字の左右の余白が発生するのを*/
@media screen and (max-width: 768px) {
    .post p:not(.max-img) {
        margin-left: 0px;
        margin-right: 0px;
    }
}

/* ブログ内文章の行間調節*/
.gyokan1
p {
    line-height: 1.75;
    margin: 2em 0;
}

.gyokan2
p {
    line-height: 1.5;
    margin: 1em 0;
}


/*吹き出しアイコンサイズPC*/
.speech-person{
width: 42px;
min-width: 42px;
}


/*文字を震わせる*/
.buruburu {
    display: inline-block;
    animation: hurueru .3s  infinite;
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(2deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-2deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}




/************************************
SNS ボタンをまとめて小さくする
************************************/

/*トップシェアボタンの枠組み*/
.sns-share.ss-top .sns-share-buttons {
	justify-content: flex-center; /*中央寄せ*/
}

/*ボトムシェア・フォローボタンの枠組み*/
.sns-share.ss-bottom .sns-share-buttons,
.sns-follow.sf-bottom .sns-follow-buttons,
.sns-follow.sf-widget .sns-follow-buttons {
	justify-content: flex-center; /*中央寄せ*/
	flex-wrap: wrap; /*折り返す*/
}

/*シェア・フォローボタンの形*/
.sns-share.ss-top .sns-buttons a,
.sns-share.ss-bottom .sns-buttons a,
.sns-follow.sf-bottom .sns-buttons a,
.sns-follow.sf-widget .sns-buttons a {
	width: 35px; /*横幅*/
	height: 35px; /*高さ*/
	margin-right: 4px; /*右側の余白*/
	margin-left: 4px; /*左側の余白*/
	/*border-radius: 50%; 丸み*/
	border: none;/*ボタンの枠線*/
}

/*シェアボタンのアイコン*/
.sns-share.ss-top .sns-buttons a .social-icon,
.sns-share.ss-bottom .sns-buttons a .social-icon {
	font-size: 25px; /*アイコンのサイズ*/
}

/*フォローボタンのアイコン*/
.sns-follow.sf-bottom .sns-follow-buttons .follow-button,
.sns-follow.sf-widget .sns-follow-buttons .follow-button {
	font-size: 25px; /*アイコンのサイズ*/
}

/*シェアボタンのキャプション*/
.sns-share.ss-top .sns-buttons a .button-caption,
.sns-share.ss-bottom .sns-buttons a .button-caption {
	display: none; /*非表示*/
}

/*シェア・フォローボタンのシェア数*/
.sns-share.ss-top .sns-buttons a .share-count,
.sns-share.ss-bottom .sns-buttons a .share-count,
.sns-follow.sf-bottom .sns-buttons a .follow-count,
.sns-follow.sf-widget .sns-buttons a .follow-count {
	right: 1px; /*右側からの距離*/
	bottom: 0; /*下側からの距離*/
	font-size: 10px; /*文字の大きさ*/
}

/*シェアメッセージ*/
.sns-share-message {
	text-align: left;
}


/*フッターメニューの両脇の枠線を消す*/
#navi-footer li {
  border: none;
}


/*フッターメニューの余白調整*/
.footer {
	margin-top: 0;
	padding-top: 0;
}
.main{
	padding-top: 0px;
}
.footer-bottom {
    margin-top: 0px;
    padding: 0px;
}