@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
.sidebar h3 {
    background: none; /*背景色を解除*/
    padding: 0; /*余白をなしに*/
    font-size: 16px; /*文字サイズを小さく*/
    letter-spacing: 2px; /*文字の間隔を少し広く*/
}
.sidebar h3:first-letter {
    font-size: 2.0em; /*最初の文字を1.5文字分に大きく*/
}
.sidebar h3:after { /*グラデーションのラインを引く*/
    content:"";
    display:block;
    height:3px;
    width:100%;
    background: -webkit-linear-gradient(left, #5d8afc 10%,#40bf8c 15%,#f7eb1b 60%,#f37b7b 100%);
    background: linear-gradient(to right, #5d8afc 10%,#40bf8c 15%,#f7eb1b 60%,#f37b7b 100%);
}
/************************************
** フッターカスタマイズ
************************************/
.footer {
  margin-top: 40px; /*フッターとコンテンツの間に余白追加*/
  background: #68c0dd; /*フッター背景色*/
  border-top: 4px solid #02b337; /*上部にボーダー追加*/
}
.footer-bottom {
  margin-top: 14px; /*フッター内上部の余白を詰める*/
}
.footer-bottom-logo { /*ロゴの位置調整*/
  float: none;
  bottom: auto;
  position: static;
  margin-bottom: 10px;
}
.footer-bottom-logo .logo-image {
  padding: 0;
  max-width: 300px; /*ロゴ画像を少し大きく*/
  margin: 0 auto;
}
.footer-bottom-content { /*メニュー＆クレジットの位置調整*/
  float: none;
  text-align: center;
}
.navi-footer-in > .menu-footer { /*メニューの位置調整*/
  justify-content: center;
  margin-bottom: 1em;
}
.navi-footer-in a {
  color: #ffffff; /*メニューの文字色*/
}
.navi-footer-in a:hover { /*メニューのマウスホバー時の指定*/
  color: #0800ff; /*文字色を通常時と同じに*/
  background: none; /*背景色をなしに*/
  text-decoration: underline; /*アンダーラインを追加*/
}
.footer-bottom.fnm-text-width .menu-footer li {
  line-height: 1; /*メニューの区切りボーダーの高さを1文字分にする*/
}
.copyright {
  color: #ffffff; /*クレジットの文字色*/
  font-size: 12px;
}
@media screen and (max-width: 834px) {
  .navi-footer-in > .menu-footer li.menu-item {
    border: none; /*モバイルでメニューのボーダーを消す*/
  }
}
@media screen and (max-width: 460px) {
  .navi-footer-in > .menu-footer li.menu-item { /*モバイルでメニューを1カラムにする*/
    width: 100%;
    display: block;
    flex: auto;
    padding: 0.3em 0;
  }
}
/************************************
** 投稿記事一覧カスタマイズ
************************************/
.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 #246b85; /*小さな三角の色*/
    border-right: solid 6px transparent;
}
/************************************
** 投稿記事の画像カスタマイズ
************************************/
.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; /*スマホでの行間*/
    }
}
/************************************
** 投稿記事タイトルのカスタマイズ
************************************/
.article h1 {
    line-height: 1.25;
    font-weight: bold;
}
.entry-title {
    font-size: 26px;
    margin: 16px 0;
    line-height: 1.3;
}
.post-title {
    font-size: 26px;
    margin: 16px 0;
    line-height: 1.3;
    padding: 0 0 10px 0;
    position: relative;
}
.post-title::after { /* グラーデーションラインをひく擬似要素 */
    content:"";
    display: block;
    position: absolute;
    bottom: -10px;
    height: 4px;
    width: 100%;
    background: -webkit-linear-gradient(left, #72c7e6 0%,#e2ff05 100%);
    background: linear-gradient(to right, #72c7e6 0%,#e2ff05 100%);
}
/************************************
** 記事のタイトル周りのカスタマイズ
************************************/
.cat-link { /* カテゴリー */
    color: #fff;
    text-decoration: none;
    display: inline-block;
    margin-right: 5px;
    padding: 2px 8px;
    font-size: 12px;
    background-color: #72c7e6;
    border-top-right-radius: 10px; /* 右上の角だけ丸く */
    border-bottom-left-radius: 10px; /* 左下の角だけ丸く */
    word-break: break-all;
}
.cat-link:hover { /* マウスホバー時 */
    opacity: 1;
    background: #4979d1;
    transition: all .5s ease; /* ふわっと変化するアニメーション */
    color: #fff;
}
.tag-link { /* タグ */
    color: #fff;
    text-decoration: none;
    display: inline-block;
    margin-right: 5px;
    padding: 2px 8px;
    font-size: 12px;
    background-color: #72c7e6;
    border: none;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    word-break: break-all;
}
.tag-link:hover {
    background: #49add1;
    transition: all .5s ease;
    color: #fff;
}
.entry-header-categories .cat-link {
}
.entry-header-categories .cat-link:hover {
}
.entry-header-tags .tag-link {
}
.entry-header-tags .tag-link:hover {
}
.date-tags {
    line-height: .8;
    position: relative;
    color: #aaa; /* 文字色を薄くする */
    flex-direction: row;  /* 左揃えにする */
}
.post-date {
    order: 1; /* 投稿日の表示順を1番目に */
}
.post-update {
    order: 2; /* 更新日の表示順を2番目に */
}
.post-date, .post-update {
    padding: 2px;
    display: inline;
    font-size: .8em; /* 少しだけ文字サイズを大きく */
}
.post-update .fa-history, .post-date .fa {
    display: none; /* Cocoon バージョン2以降のデフォルトアイコンを非表示に */
}
.post-date::before { /* 投稿日のアイコンの変更 */
    font-family: FontAwesome;
    content: "\f040";
    padding-right: 3px;
}
.post-update::before { /* 更新日のアイコンの変更 */
    font-family: FontAwesome;
    content: "\f021";
    padding-right: 3px;
}
/************************************
** 検索バーのカスタマイズ
************************************/
.sidebar .search-box, .search-menu-content .search-box {
  width: 100%;
  margin: 1em 0 2em;
  position: relative;
  display: flex;
  border-radius: 50px; /*全体を囲むボックスの角丸*/
}
.sidebar .search-edit, .search-menu-content .search-edit {
  width: 80%; /*入力部分の長さ*/
  background: #fff; /*入力部分の背景色*/
  padding: 0 10px;
  border: border: 1px solid #444d53;; /*ボーダーを消す*/
  border-radius: 50px 0 0 50px; /*左上、左下のみ角丸*/
  font-size: 16px;
}
.search-submit {
  width: 20%; /*ボタン部分の長さ*/
  background: #444d53; /*ボタン部分の背景色*/
  color: #fff; /*アイコンの色*/
  position: static;
  right: auto;
  top: auto;
  font-size: 20px; /*アイコンの大きさ*/
  cursor: pointer;
  line-height: 40px; /*検索窓の高さ*/
  border: none;
  border-radius: 0 50px 50px 0; /*右上、右下のみ角丸*/
  padding: 0;
}
.search-box input::placeholder {
  color: #bbb; /*プレースホルダーの色*/
}
.search-box input:focus, .search-box button:focus {
  outline: 0; /*フォーカス時の枠線を消す*/
}
/************************************
**Contact Form 7カスタマイズ
**スマホContact Form 7カスタマイズ
************************************/
@media(max-width:500px){
.inquiry th,.inquiry td {
 display:block!important;
 width:100%!important;
 border-top:none!important;
 -webkit-box-sizing:border-box!important;
 -moz-box-sizing:border-box!important;
 box-sizing:border-box!important;
}
.inquiry tr:first-child th{
 border-top:1px solid #ffffff!important;
}
/* 必須・任意のサイズ調整 */	
.inquiry .haveto,.inquiry .any {	
font-size:10px;
}}
/*見出し欄*/
.inquiry th{
 text-align:left;
 font-size:13px;
 color:#444;
 padding-right:10px;/*見出し入力欄の右側余白*/
 width:40%;/*見出し欄の幅*/
 background:#e0ebff;/*見出し背景の色*/
 border:solid 1px #d7d7d7;
}
/*通常欄*/
.inquiry td{
 font-size:13px;
 background:#ffffff;/*左入力欄　背景の色*/
 border:solid 1px #d7d7d7;	
}
/*横の行とテーブル全体*/
.entry-content .inquiry tr,.entry-content table{
 border:solid 1px #d7d7d7;	
}
/*必須の調整*/
.haveto{
 font-size:7px;
 padding:5px;
 background:#ff9393;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
/*任意の調整*/
.any{
 font-size:7px;
 padding:5px;
 background:#93c9ff;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
/*送信ボタンのデザイン変更*/
#formbtn{
 display: block;
 padding:10px;
 width:230px;
 background:#0000ff;
 color:#ffffff;
 font-size:17px;
 font-weight:bold;	 
 border-radius:30px;/*角を丸く*/
 margin:20px auto 0;
}
/*送信ボタンマウスホバー時*/
#formbtn:hover{
 background:#cd5c5c;
 color:#ffffff;
 border:2px solid #b22222;
}
/************************************
** 見出しカスタマイズ
************************************/
.index3 {
	border-bottom: 3px solid #96bfff;
}
.index3 span {
	color: #ffffff;
	font-size: 20px;
	line-height: 20px;
	position: relative;
	background: #96bfff;
	display: inline-block;
	padding: 10px;
	margin-left: 10px;
}
.index3 span:before {
	content: " ";
	position: absolute;
	top: 0;
	left: -10px;
	width: 0;
	height: 0;
	border-width: 40px 10px 0 0;
	border-style: solid;
	border-color: transparent;
	border-right-color: #96bfff;
}
.index3 span:after {
	content: " ";
	position: absolute;
	top: 0;
	left: 100%;
	width: 0;
	height: 0;
	border-width: 0 10px 40px 0;
	border-style: solid;
	border-color: transparent;
	border-bottom-color: #96bfff;
}

/***ブログカード***/
/***コメント***/
.internal-blogcard-footer{
	display: none; 
}

.internal-blogcard::after{
	content: '続きを読む \0bb'; /* 内部リンク右下枠の文言 */
	position: absolute;
	right: 1rem;
	font-size: 70%;
	background-color: #69D695; /* 内部リンク右下枠の背景色 */
	padding: .4em 3em;
	font-weight: bold;
	color: #ffffff; /* 内部リンク右下枠の文字色 */
	border-radius: 2px;
}
/************************************
** トップへ戻るボタンカスタマイズ
************************************/
#go-to-top{bottom:80px;}

/*アピールエリアの高さ設定 */
#appeal {
    height: calc(100vw * calc(500 / 1200));
}
/*アピールエリアの高さ設定　スマホ*/
@media (max-width: 767px){
#appeal {
height: 100vw; 
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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){
  /*必要ならばここにコードを書く*/
}