@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    0.0.5
*/

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

/************************************
** ページ全体がふわっとフェードイン
************************************/
#main{
    animation: fadeIn 1s ease-out 0s 1 normal;
}
#sidebar {
    animation: fadeIn 1s ease-out 0s 1 normal;
}

@keyframes fadeIn {
    from {transform: translateY(10%); opacity: 0;}
    100% {transform: translateY(0%); opacity: 1;}
}
#header-container {
    animation: Down 1s ease-out 0s 1 normal;
}

@keyframes Down {
    from {transform: translateY(-10%); opacity: 0;}
    100% {transform: translateY(0%); opacity: 1;}
}

#breadcrumb {
    animation: Right 1s ease-out 0s 1 normal;
}

@keyframes Right {
    from {transform: translateX(10%); opacity: 0;}
    100% {transform: translateX(0%); opacity: 1;}
}

/************************************
** ヘッダー内のキャッチフレーズ設定
************************************/
.tagline {
  color:#003399; /* 文字色 */
  font-weight:bold;
  animation: flowing 10s linear infinite;
  transform: translateX(100%);/*初期位置*/
  bottom:20px;	
}

@keyframes flowing {
  100% {
    transform: translateX(-100%);
  }
}
/************************************
** ヘッダー画像周りの余白設定
************************************/
.logo-image * {
  display: block;
}

.logo-image {
  padding: 0 0 0;
}
/*********************************
**アピールエリア設定
*********************************/
.appeal .appeal-in {
	width: 100%;
	background-color: rgba(128, 128, 128, .25);
}

.appeal-content {
	background-color: transparent;
}

.appeal-title {
	color: #fff;
	text-shadow: 2px 2px 0 #3f3f3f;
}
.appeal-message {
	color: #fff;
	text-shadow: 2px 2px 0 #3f3f3f;
}
/*********************************
* Cocoon アピールエリアカスタマイズ
*********************************/
.appeal-content .appeal-button {
  display: inline-block;
  position: relative;
  text-decoration: none;
  font-size: 17px!important; /*フォントサイズ*/
  color: white;
  width: 320px;
  height: 50px;
  border-radius: 5px;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  background: linear-gradient(#d6f4fe 0%, #54a5ff 100%);
  text-shadow: 0 2px 3px rgba(0,0,0,0.2); /* 影 */ 
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}
/*********************************
* Cocoon 通知エリアカスタマイズ
*********************************/
.notice-area {
	max-width: 100%;
	margin: auto;
	padding: 5px;
	line-height: 2.2;
	text-align:center;
    color:#fff; /* 文字色 */
    font-size: 16px; /* 文字サイズ */
	font-weight: bold; /* 太文字 */
	text-shadow: 0 2px 3px rgba(0,0,0,0.2); /* 影 */
	background: #86a7fc; /*背景カラー*/
    background-image: linear-gradient(to right, #86a7fc 0%, #c4daff 100%);
}
/*********************************
* Cocoon 通知エリア2列
*********************************/
.twice-notice{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
}
.twice-notice a{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position:relative;
flex-basis:50%;
text-align:center;
color:#fff; /* 文字色 */
font-size: 0.9em; /* 文字サイズ */
margin-top: -25.5px;
margin-bottom: -21px;
line-height: 1.4;
font-weight: bold;
padding: 1em 2em;
letter-spacing: 1px;
text-decoration:none;
}
.twice-notice a:first-child{
background:#86a7fc; /* 左背景色 */
border-right:1px solid #fff; /* 中央線 */
}
.twice-notice a:last-child{
background:#9dc0fc; /* 右背景色 */
}
.twice-notice a:hover{
opacity:0.8;
}
.twice-notice a:after{
position:absolute;
top:50%;
right:1em;
transform: translateY(-50%);
font-family:"Font Awesome 5 Free";
content:"\f054"; /* 矢印アイコン */
animation:infinite move-arrow 1.5s; /* 矢印アニメーション */
}
@keyframes move-arrow {
0%{margin:0 5px 0 -5px;opacity:.3;} /* 矢印アニメーション設定 */
}
/* スマホ */
@media screen and (max-width: 768px){
    .twice-notice a{
        font-size:0.8em; /* 文字サイズ */
		margin-top: -30px;
		margin-bottom: -18px;
    }
    .twice-notice a:after{
        transform: translateY(-50%);
    }
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

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

/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
 html,
 body {
 overflow-x: hidden!important;
 overflow-y: scroll;
 -webkit-overflow-scrolling: touch;
 }
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	 html,
 body {
 overflow-x: hidden!important;
 overflow-y: scroll;
 -webkit-overflow-scrolling: touch;
 }
}
/* ナビメニュー 文字*/
#navi {
font-weight: bold; /* 太文字 */
font-size: 10px; /* 文字の大きさ */
text-shadow: 0 2px 3px rgba(0,0,0,0.2); /* 影 */
}
/* ナビメニュー 背景*/
#navi li a:hover {
color: #000; /*サブメニューにポインタを置いたときの文字色*/
background-color :#e6f7ff!important; /*サブメニューにポインタを置いたときの背景色*/
border:solid 0.5px #bbbbbb; /*サブメニューにポインタを置いたときの枠の太さと色*/
}
/* ナビメニュー（アイコン） */
#navi .menu-item-has-children>a::after {
display: none; /* 非表示 */
}
.navi-in > ul {
-webkit-justify-content:space-between; /* Safari */
  justify-content:space-between;
}

/* モバイルのグローバルナビ(メニュー)の設定 */
#navi-menu-content{
  background-color: #555555 !important;
}
#navi-menu-content ul li {
  margin-right:2px;
  margin-right:5px;
  border: 1px solid #000;
  border-radius: 0px;
}
#navi-menu-content a { 
 color:#696969;
}
#navi-menu-content ul li a{ 
 color:#696969;
 background:#b0c4de; 	
}
ul.sub-menu li a {
color: #696969; /*サブメニューにポインタを置く前の文字色*/
font-size: 12px!important; /*フォントサイズ*/
background:#55555; /*サブメニューにポインタを置く前の背景色*/
border:solid 0.5px #bbbbbb; /*サブメニューにポインタを置く前の枠の太さと色*/
}
ul.sub-menu li a:hover {
color: #dc143c; /*サブメニューにポインタを置いたときの文字色*/
background-color :#b0c4de!important; /*サブメニューにポインタを置いたときの背景色*/
border:solid 0.5px #bbbbbb; /*サブメニューにポインタを置いたときの枠の太さと色*/
}
/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
ul.sub-menu li a {
color: #fff; /*サブメニューにポインタを置く前の文字色*/
font-size: 12px!important; /*フォントサイズ*/
background:#55555; /*サブメニューにポインタを置く前の背景色*/
border:solid 0.5px #bbbbbb; /*サブメニューにポインタを置く前の枠の太さと色*/
}
ul.sub-menu li a:hover {
color: #191970; /*サブメニューにポインタを置いたときの文字色*/
background-color :#FFFFDD!important; /*サブメニューにポインタを置いたときの背景色*/
border:solid 0.5px #bbbbbb; /*サブメニューにポインタを置いたときの枠の太さと色*/
}
/************************************
** ■見出しカスタマイズ（h1-6）
************************************/
/*デフォルト見出しリセット*/
.article-header h1,
.entry-header h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6{
	padding:0;
	border:none;
	background:none;
}
/* H1 */
.article h1{
font-size: 24px; /*フォントサイズ*/
margin: 20px -8px 20px -8px;
padding: 9px 10px 9px 10px;
background:none;
padding: 0;
}
/* H2 */
.article h2{
font-size: 22px; /*フォントサイズ*/
padding: .5em 0.5em;
background:none;
padding: 0;
}

/* H3 */
.article h3{
font-size: 20px; /*フォントサイズ*/
margin: 35px -8px 20px 4px;
padding: 9px 7px 9px 5px;
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}

/* H4 */
.article h4{
font-size: 18px; /*フォントサイズ*/
border-top:none;
border-bottom:none;
padding: 0;
}

/* H5 */
.article h5{
border-bottom:none;
padding: 0;
}

/* H6 */
.article h6{
border-bottom:none;
padding: 0;
}
/************************************
** ブログカードの設定
************************************/
.blogcard {
	padding: 1rem;
	color: #666;
	position: relative;
	border-color: #68d6cb !important; /* 枠線の色を変更 */
}

a.blogcard-wrap:hover{
	background-color: transparent!important;
	opacity: 0.8;
}

a.blogcard-wrap:hover img.blogcard-thumb-image{
	transform: scale(1.1);
	transition: .3s;
}

.blogcard-thumbnail {
	line-height: 0;
	margin-right: 1rem;
	overflow: hidden;
}

.blogcard-title{
	margin-bottom: .5rem;
}

.blogcard-snipet{
	font-size: 70%;
	line-height: 1.7;
	padding-right: 10%;
}

/************************************
** サイドバー見出し
************************************/
.sidebar h3{ /*見出し１（タイトル）カスタマイズ*/
background: #EEEEEE; /*背景カラー*/
background-image: linear-gradient(to right, #EEEEEE 0%, #FFFFFF 100%);	
font-size: 18px; /*フォントサイズ*/
letter-spacing: 1px; /*文字間隔*/
margin: 20px -8px 10px -8px;
padding: 9px 10px 9px 10px;
border-left: 6px solid #6699FF; /*左ラインの太さとカラー*/
border-image-slice:1;
line-height: 30px; /*高さ*/
border-radius: 3px; /*角丸コーナー*/
}

/************************************
** 画像の配置をページの中央に寄せる
************************************/
img {
max-width:100%;
display: block;
margin: 0 auto;
}
/*********************************
* Cocoon 投稿ページヘッダー非表示
*********************************/
@media screen and (max-width: 768px) {
	.single #header-container,
	.single #notice-area{
		display: none;
	}
}
	.category #header-container,
	.category #notice-area{
		display: none;
	}
/************************************
** ●アイキャッチのカテゴリーラベル非表示
************************************/
.eye-catch .category {
  display: none;
}

.comment-btn {
  background-color: #72c7e6;
  color: #fff;
  border: none;
  font-size: 20px;
  transition: 0.5s;
}
.comment-btn:hover {
  background-color: #49add1;
  color: #fff;
  transition: 0.5s;
}

.comment-respond { /*入力欄全体の枠*/
  border: 2px solid #72c7e6;
  margin-top: -2px;
}
.comment-respond p {
  margin: 1em 0;
}
#commentform { /*フォーム部分の枠*/
  padding: 20px;
}
p.comment-notes { /*注意書きの文字サイズ*/
  font-size: 14px;
}
p.form-submit {
  margin: 2em 0 1em 0;
}
#commentform input[type="text"], #commentform textarea { /*入力スペースの装飾*/
  padding: 11px;
  border: none;
  border-radius: 4px;
  font-size: 18px;
  width: 100%;
  background: #e2e2e2; /*入力スペースの背景色*/
}
#commentform input[type="submit"] { /*送信ボタンの装飾*/
  -webkit-appearance: none;
  padding: 11px;
  width: 100%;
  margin: 0;
  cursor: pointer;
  background: #72c7e6;
  color: #fff;
  border: none;
  font-size: 16px;
  transition: 0.5s;
}
#commentform input[type="submit"]:hover { /*送信ボタンのマウスホバー時*/
  background: #49add1;
  transition: 0.5s;
}

.comment-list { /*全体の枠*/
  border: 2px solid #72c7e6;
  padding: 0;
  border-radius: 10px 10px 0 0;
}
.comment-title { /*タイトルの装飾*/
  margin: 0;
  font-size: 24px;
  background: #72c7e6;
  color: #fff;
  padding-left: 20px;
  font-weight: normal;
}
.comment-title:before { /*タイトルにアイコンを付ける*/
  font-family: FontAwesome;
  content: '\f27b';
  color: #fff;
  margin-right: 4px;
}
.commets-list {
  padding: 20px 20px 0 20px;
}
.commets-list > li {
  border-top: 2px dashed #72c7e6; /*スレッドを区切る点線*/
  margin: 30px 0;
  padding-top: 20px;
}
.commets-list > li:first-child {
  border: none;
  margin-top: 0;
  padding-top: 0;
}
.commets-list .children {
  border-left: 2px solid #ccc; /*返信コメントの左側のボーダー*/
  margin: 0;
}
.commets-list .avatar { /*アバターの位置調整*/
  float: left;
  border-radius: 50%;
  margin-right: 10px;
}
.comment-content { /*コメントの吹き出し*/
  background: #e2e2e2;
  padding: 2px 10px;
  margin: 10px 0 6px 0;
  border-radius: 10px;
  position: relative;
}
.comment-content::before { /*吹き出しの三角部分*/
  content: "";
  position: absolute;
  top: -14px;
  left: 50px;
  border-style: solid;
  border-color: transparent transparent #e2e2e2 transparent;
  border-width: 0 20px 20px 0;
}
.comment-content p { /*吹き出し内の文字を調整*/
  font-size: 14px;
  margin: 1em 0;
  line-height: 1.5em;
}
.comment-reply-link { /*返信ボタンの装飾*/
  color: #fff;
  border: none;
  border-radius: 20px;
  background: #72c7e6;
  padding: 1px 12px;
  transition: 0.5s;
}
.comment-reply-link:hover { /*返信ボタンのマウスホバー時*/
  color: #fff;
  background: #49add1;
  transition: 0.5s;
}
.commets-list .comment-body {
  margin-bottom: 0;
}
/************************************
** 白い余白・空間・ブレ・揺れをなくす
************************************/
.wrap_original {
overflow: hidden;
}

#post-8
.entry-title {
  display:none;
}
.date-tags {
    display: none;
}
.home.page .toc {
 display: none;
}
span.author {
	display: none;
}
#carousel .carousel-in{
   box-shadow:none;
   background-color:#f7f7f7;
}
#carousel .a-wrap{
   margin:0;
   box-shadow:none;
   border:none;
}
#carousel .carousel-entry-card-title{
   font-size:0.75em;
   font-weight:bold;
   color:#333;
}
.carousel .a-wrap {
    padding: 5px;
}
.slick-dots li {
    display: none;
}
.card-thumb {
    overflow: hidden;
}
.card-thumb img {
    transition: all .6s ease-out 0.1s;
}
.card-thumb img:hover {
    transform: scale(1.3);
    transition: all .6s ease-out 0.1s;
	  opacity:0.6;
}
.card-title:hover {
    color: #CC3333; /*マウスホバー時の色*/
	  font-weight:700;
}

.a-wrap:hover { /*マウスホバー時の全体の背景色を消す*/
    background: none;
}

.entry-card-title {
    margin-top: 7px; /*上に余白を付ける*/
    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; /*スマホでの行間*/
  }
}
.e-card-info {
	color: #666; /*色を薄く*/
}
@media screen and (max-width: 768px){
.e-card-info {
	font-size: 11px; /*スマホでの文字サイズ*/
    }
}

.home main, .archive main{
background-color: transparent;
margin-top: 0;
padding-top: 0;
}
.entry-card-wrap{
    background-color: white;
    border-radius: 4px;
    margin-bottom: 1em!important;
}
.entry-card-wrap:hover{
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
    transform: translateY(-2px);
    background-color: white; 
    transition: all .3s ease;
}
.grecaptcha-badge { visibility: hidden; }
/************************************
** 横幅いっぱいの画像配置
************************************/
.alignwide {
	margin-left: 0;
	margin-right: 0;
	max-width: 100vw;
}

.alignfull {
	margin-left: calc(-100vw / 2 + 100% / 2);
	margin-right: calc(-100vw / 2 + 100% / 2);
	max-width: 100vw;
}

.alignfull img {
	width: 100vw;
}
/************************************
** カテゴリー・投稿ページのレイアウト設定
************************************/
.category .eye-catch { 
	display: none;
}
.category .notice-area {
	display: none;
}
.category .twice-notice {
	display: none;
}
.category #header-container {
	display: none;
}
.single .notice-area {
	display: none;
}
.single .twice-notice {
	display: none;
}
.single #header-container {
	display: none;
}
.blog .notice-area {
	display: none;
}
.blog .twice-notice {
	display: none;
}
.tag .notice-area {
	display: none;
}
.tag .twice-notice {
	display: none;
}
.tag #header-container {
	display: none;
}
.search-results .notice-area {
	display: none;
}
.search-results .twice-notice {
	display: none;
}
.search-results #header-container {
	display: none;
}
/*検索ボックス*/
.search-box {
		width: 30%;
		margin-top: -75px;
		bottom:-20px;
		margin-left: auto;
		margin-right: 20px;
	}
@media screen and (max-width: 480px) {
	.search-box {
		width: 55%;
		margin-top:-20px;
		bottom:-20px;
		margin-left: auto;
		margin-right: auto;
	}
}	
/*検索窓*/
.search-edit {
width:auto; /*入力部分の長さ*/
height:33px ;/*検索窓の高さ*/ 
background: #fff; /*入力部分の背景色*/
font-size: 15px;
}
/*メニューをページ下部に固定*/
#sp-fixed-menu{
   position: fixed;
   width: 100%;
   bottom: 0px;
   font-size: 0;
   opacity: 0.9;
   z-index: 99;
}
/*メニューを横並びにする*/
#sp-fixed-menu ul{
   display: flex;
   list-style: none;
   padding:0;
   margin:0;
   width:100%;
}

#sp-fixed-menu li{
   justify-content: center;
   align-items: center;
   width: 50%;
   padding:0;
   margin:0;
   font-size: 14px;
   border-right: 1px solid #fff;
}

/*左側メニューを緑色に*/
#sp-fixed-menu li:first-child{
   background: #38b435;
}

/*左側メニューをオレンジ色に*/
#sp-fixed-menu li:last-child{
   background: #f3a324;
}

/*ボタンを調整*/
#sp-fixed-menu li a{
   color: #fff;
   font-size: 18px;
   text-align: center;
   display:block;
   width: 100%;
   padding:6px;
}
/*PCの場合にはメニューを表示させない*/
@media (min-width: 768px) {
   .for-sp{
      display:none;
    }
}
/* 画面の横揺れ防止 */
@media screen and (max-width : 480px){
	html,
	body {
		overflow-x: hidden;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}
}