@charset "UTF-8";

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

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

/*Cocoon用商品ボックス*/
.product-item-space {
margin-top: 3em;
}

.shoplinkother1 a {
background: #f70101ba;
}
.shoplinkother2 a {
background: #0163f7b3;
}

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

/* マウスオーバー時にリンクの下線を付ける */
a:hover{
text-decoration: underline;
}

/*区切り線の太さ*/
hr {
 height: 3px;
 background-color: #d3d3d3;
 border: none;
}

/*テーブルの背景色を透過*/
.container table tr {
  background-color: transparent;
}


/*ボタンの高さを細く*/
.btn{
padding:5px;
}

/*SNSフォローボタンをカスタマイズ@フッター*/
.footer .sns-follow-buttons {
  justify-content: center; /*ボタンを中央寄せにする*/
}
.footer .sns-follow-buttons a {
  width: 40px; /*ボタンの横の大きさ*/
  height: 40px; /*ボタンの縦の大きさ*/
  font-size: 20px; /*アイコンのサイズ*/
  margin: 0 6px; /*ボタン同士の間隔*/
}
.footer .sns-follow {
  margin: 0 0 24px 0;
}
.footer .sns-follow-buttons a {
  background: none !important;
  border: 1px solid #444d53;
  color: #444d53;
  border-radius: 50px;
}
.footer .twitter-button:hover {
  background-color: #1da1f2 !important;
  color: #fff;
  border-color: #1da1f2;
}
.footer .feedly-button:hover {
  background-color: #2bb24c !important;
  color: #fff;
  border-color: #2bb24c;
}
.footer .rss-button:hover {
  background-color: #f26522 !important;
  color: #fff;
  border-color: #f26522;
}
.footer .youtube-button:hover {
  background-color: #DA1725 !important;
  color: #fff;
  border-color: #DA1725;
}
.footer .instagram-button:hover {
  background-color: #c522b8 !important;
  color: #fff;
  border-color: #c522b8;
}

/*SNSフォローボタンをカスタマイズ@サイドバー*/
.sidebar .sns-follow-buttons {
  justify-content: center; /*ボタンを中央寄せにする*/
}
.sidebar .sns-follow-buttons a {
  width: 40px; /*ボタンの横の大きさ*/
  height: 40px; /*ボタンの縦の大きさ*/
  font-size: 20px; /*アイコンのサイズ*/
  margin: 0 6px; /*ボタン同士の間隔*/
}
.sidebar .sns-follow {
  margin: 0 0 24px 0;
}
.sidebar .sns-follow-buttons a {
  background: none !important;
  border: 1px solid #444d53;
  color: #444d53;
  border-radius: 50px;
}
.sidebar .twitter-button:hover {
  background-color: #1da1f2 !important;
  color: #fff;
  border-color: #1da1f2;
}
.sidebar .feedly-button:hover {
  background-color: #2bb24c !important;
  color: #fff;
  border-color: #2bb24c;
}
.sidebar .rss-button:hover {
  background-color: #f26522 !important;
  color: #fff;
  border-color: #f26522;
}
.sidebar .youtube-button:hover {
  background-color: #DA1725 !important;
  color: #fff;
  border-color: #DA1725;
}
.sidebar .instagram-button:hover {
  background-color: #c522b8 !important;
  color: #fff;
  border-color: #c522b8;
}

/*キャッチの左右に線を引く*/
.catch {
  display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
}
.catch:before, .catch:after {
  border-top: 1px solid;
  content: "";
  width: 3em; /* 線の長さ */
}
.catch:before {
  margin-right: 1em; /* 文字の右隣 */
}
.catch:after {
  margin-left: 1em; /* 文字の左隣 */
}


/*ウィジェット「コンテンツ上部」の余白調整*/
.content-top {
margin-top: 5px;
padding-top: 5px;
margin-bottom: -20px;
padding-bottom: -30px;
}

/*トップバナー（ウィジェット「コンテンツ上部」）で4個横並びにする*/

.top-banner{
	display: flex;
	flex-wrap:wrap;
}
.top-banner li {
	width: calc(100%/4);/*←画像を横に4つ並べる場合*/
	padding:0 5px;/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
}
.top-banner li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
	border:solid 0px #ccc; /*←画像を1pxのグレーの枠線で囲む指定の場合*/
}

ul {
  list-style: none; padding-left: 0;
}

/* 見出しリセット */
/* 見出し2 */
.article h2{
background:none;
padding: 0;
}

/* h2 見出しのカスタマイズ */
.article h2 {
  padding: 0.5em;/*文字周りの余白*/
  	background: -webkit-linear-gradient(to bottom, #f4f4f4, #ffffff);
	background: linear-gradient(to bottom, #f4f4f4, #ffffff);/*背景色*/
  border-top: solid 2px #516ab6;
}


/* h6 見出しのカスタマイズ */
.article h6 {
    font-size: 20px;
    padding: 6px 10px;
    border :none;
}
/* サイドバーh3 見出しのカスタマイズ */
.sidebar h3 {
    background: none;
    font-size: 17px;
    letter-spacing: 2px;
    display: inline-block;
    position: relative;
    width: 100%;
    padding: 0;
    text-align: center;
}
.sidebar h3::before, .sidebar h3::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28%; /*ラインの長さ*/
    border-top: 3px solid #444d53; /*ラインの色*/
}
.sidebar h3::before {
    left: 0;
}
.sidebar h3::after {
    right: 0;
}

/* 新着記事やランキング(ウィジェット)内のフォントサイズを変更 */
.widget-entry-card-content{
 font-size: 12pt;
}

/* タグクラウド　デザイン変更 */
.tagcloud a {
border-radius: 20px; /* 角の丸み */
font-size: 12px; /* 初期サイズ（12px） */
color: ; /* 文字色 */
border-color:; /* 枠線色 */
background-color: ;
}

/* タグクラウド デフォルトアイコンの非表示 */
.tag-caption .fa-tag {
    display: none;
}

/* タグクラウド アイコンの変更 */
.tagcloud a .tag-caption::before {
    content: "#"; /*アイコンの変更*/
    padding-right: 3px;
}

/* サイドバーウィジェットの【新着記事】や【ランキング】内の文字サイズ変更 */
.widget-entry-card {
    font-size: 10px;
}

/* コンテンツ下部 ウィジェット タイトルの文字カラー変更 */
.widget-content-bottom-title {
color: ; /* 文字色 */
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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){
  /*必要ならばここにコードを書く*/
}

/*ページネーションカスタマイズ
----------------------------------------------- */
.pagination-next{ display: none; }
.next, .prev, .pager-prev-next, .pager-numbers a { text-decoration: none; }


/*検索窓カスタマイズ
----------------------------------------------- */

.search-box{
	margin: 1em;
}

.search-edit{
	height: 40px;
}

.search-submit{
	line-height: 0;
	top: 0;
	bottom: 0;
}

/*アプリサーチ
 ----------------------------------------------*/
.appreach{ border-top:1px dashed #043d78; /*上線の色*/ border-bottom:1px dashed #043d78; /*下線の色*/ } .appreach { text-align: left; padding: 25px; margin:20px; overflow: hidden; } .appreach:after { content: ""; display: block; clear: both; } .appreach img, .appreach p { margin: 0; padding:0; } .appreach a:after { display: none; } .appreach__icon { float: left; border-radius: 10%; overflow: hidden; margin: 0 3% 0 0 !important; width: 25% !important; height: auto !important; max-width: 120px !important; } .appreach__detail { display: inline-block; font-size: 20px; line-height: 1.5; width: 72%; max-width: 72%; } .appreach__detail:after { content: ""; display: block; clear: both; } p.appreach__name { font-size: 16px; color:#555; padding-bottom:10px; font-weight:bold; line-height: 1.5em !important; max-height: 3em; overflow: hidden; } .appreach__info { font-size: 12px !important; color:#888; } .appreach__info a{ color:#aaa; } .appreach__developper, .appreach__price { margin-right: 0.5em; } .appreach__posted a { margin-left: 0.5em; } .appreach__links { float: left; height: 40px; margin-top: 15px; white-space: nowrap; } .appreach__aslink img { margin-right: 10px; height: 40px; width: 135px; } .appreach__gplink img { height: 40px; width: 134.5px; } @media only screen and (max-width: 786px){ .appreach{ margin:20px 0;} .appreach__info { font-size: 11px !important;} p.appreach__name { font-size: 15px;}} 

/* ************ *
 * PCnavi（ヘッダー右）に画像 *
 * ************ */
@media screen and (min-width : 769px) {
	/* メニューの余白・幅・高さ指定 */
	.navi-in > ul > li {
		line-height: 1.2;
		margin: 0.5em 0em; /* 上下1em　左右1em→0.6emで余白が狭く */
		width: 180px;
		height: 90px;
	}
	/* ナビ領域下余白 */
	.navi-in .menu-header {
		padding-bottom: 1em;
	}
	/* 背景画像の領域：リンク */
	#navi-in > ul > li > a {
		width: 180px;
		height: 90px;
		display: inline-block;
		font-size: 0.75em; /* 文字サイズ変更時：子カテゴリがあれば要調整 */
		position: relative;
		background-size: cover; /* 画像サイズ調整 */
		background-position: 50%;
	}
	/* 子カテゴリがある時のマーク */
	.navi-in > ul > .menu-item-has-children > a::after {
		top: 7.5em; /* 文字サイズ変更時：要調整 */
		right: -0.9em;
	}
	/* 1つ目 */
	.navi-in > ul > li:nth-child(1) > a {
		background: url(https://www.nerdbrain.net/wp-content/uploads/2021/12/bkyoyaku_2021_clear.png) no-repeat;
	}
	/* 2つ目 */
	.navi-in > ul > li:nth-child(2) > a {
		background: url(https://www.nerdbrain.net/wp-content/uploads/2022/12/dbchosenshi_yoyaku_2022-01.webp) no-repeat;
	}
	/* 3つ目 */
	.navi-in > ul > li:nth-child(3) > a {
		background: url(https://www.nerdbrain.net/wp-content/uploads/2022/11/niformation_yoyaku_2022.png) no-repeat;
	}
	/* 4つ目 */
	.navi-in > ul > li:nth-child(4) > a {
		background: url(https://www.nerdbrain.net/wp-content/uploads/2022/11/gaoroad_yoyaku_2022_02.png) no-repeat;
	}

	/* メニュー名 */
	#navi-in > ul > li > a .item-label {
		position: absolute;
		bottom: -20%; /* 位置調整 */
		font-weight: bold;
		/*text-shadow: 1px 1px 0 #fff;*/
		left: 0;
		right: 0;
	}
	/* 短めcaptionを付けているとき */
	.navi-in > ul .menu-item-has-description > a > .caption-wrap > div {
		position: absolute;
		bottom: -3.6em;
	}
	/* ナビ名の色 */
	.navi-in a .item-label {
		color: #ffffff;
	}
	/* ナビ名の色：hover */
	.navi-in a .item-label:hover {
		color: #6dc1e0;
	}
	/* ナビ背景色 */
	.navi {
		background-color: #fff0; /* 白透明に指定 */
	}
	/* ココまでナビ背景色：不要なら削除 */
	/* ナビリンクonマウス */
	.navi-in a:hover {
		background-color: #fff0; /* 白透明に指定 */
	}
	/* ココまでナビリンクonマウス ：不要なら削除 */
}

/* ヘッダーロゴ トップメニュー　サイズ&位置変更 */
div.header-container-in.hlt-top-menu .logo-header img {
padding: 0 55px 0 55px;
height: auto;
max-height: none;
width: 300px;
vertical-align: top;
}

/************************************
** ブログカードをスッキリ
************************************/
.blogcard-snippet,
.blogcard-footer {
  display: none;
}
.blogcard-wrap {
  transition: all .3s;
  max-width: 600px;
  margin: 2em auto;
}
.blogcard {
  border:1px solid #eaeaea !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
  padding: 10px;
}
.blogcard-wrap:hover {
  background: none;
  transform: translateY(-3px);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, .1);
}
.blogcard-thumbnail {
  margin: 0;
}
.blogcard-thumbnail img {
  display: block;
}
.blogcard-title {
  color: #555;
  letter-spacing: 0.5px;
  font-size: 15px;
  line-height: 1.5;
  margin: 10px 0 0 0;
  height: 45px;
  overflow: hidden;
}
.blogcard-content {
  min-height: auto;
  margin-left: 185px;
  padding-right: 6px;
}
.blogcard-label {
  top: -11px;
  left: 9px;
  padding: 3px 0.6em;
  background:#aaa;
  padding: 1px 10px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1px;
}
.blogcard-content:after {
  content: "クリックして読む";
  background: #66c2c3; /* 背景色 */
  display: block;
  text-align: center;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  width: 180px;
  border-radius: 20px;
  font-size: 13px;
  padding: 1px 0;
  margin-top: 6px;
}
@media screen and (max-width: 834px) {
  .blogcard-content {
    margin-left: 130px;
  }
  .blogcard-title {
    font-size:12px;
    line-height: 1.5;
    height: 35px;
    margin:0;
  }
  .blogcard-content:after {
    content: "タップして読む";
  }
  .blogcard-thumbnail{
    width:120px;
  }
}
@media screen and (max-width: 560px) {
  .blogcard-content:after {
    width: 120px;
    font-size: 12px;
  }
  .blogcard-title {
    margin:0;
  }
}
@media screen and (max-width: 320px) {
  .blogcard-thumbnail {
    width: 100px;
  }
  .blogcard-content {
    margin-left: 110px;
  }
  .blogcard-title {
    height: 35px;
  }
}

/*Cocoonのcat-label（カテゴリラベル）のデザインのカスタマイズ：枠線を消す*/
/*ここから*/
.cat-label {
	border: 0;
}
/*ここまで*/