@charset "UTF-8";

/*!
Theme Name: Simplicity2 child
Template:   simplicity2
Version:    20161002
*/

/* Simplicity子テーマ用のスタイルを書く */

/*全体*/
body{
 color: #333333 !important; /*フォントを灰色に*/
}

/* ブログの背景 */
body.blog, body.single , body.archive, body.search{
 background-color: #c1e4e9;
}

/* タイトルロゴのサイズを調整 */
img.site-title-img {
  max-height: 40px;
}

/* タイトルロゴの位置を調整*/
#site-title {
 margin-top: 14px !important;/*上下の余白を14pxに*/
}

/*モバイル時の右上のメニュー*/
#mobile-menu a{
  margin-top: 16px;
  background-color: #1e7eb4;
  color: #fff;
}

/*ページトップへのボタン*/
#page-top a, ul.snsp li a span{
  background-color: #3498db;
  color: #fff;
}

/*検索ボックス*/
#s{
padding-right: 30px; /*虫眼鏡と入力欄が重ならないように調整*/
}

/*入力欄の枠の色*/
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
textarea:focus
{
border: 1px solid #3498db;
box-shadow: 0 0 3px #3498db;
}

/*サイドバーのカテゴリー*/
#sidebar aside ul{  
	padding-left: 0;
}
#sidebar aside li.cat-item a { /* リンク全体の装飾 */
	display: block;
	overflow: hidden;
	font-size: 16px; /* 文字サイズ */
	line-height: 2.4em; /* 行（ボックス）の高さ */
	text-decoration: none;
	vertical-align: middle;
	padding: 0 8px; /* 左右の余白 */
	color: #fff; /* 文字色 */
	background: #3498db; /* 背景色 */
	margin-bottom: 2px; /* 次のカテゴリーとの余白 */
}
#sidebar aside li.cat-item a:hover { /* マウスオーバー時の設定 */
	background: #1e7eb4; /* 背景色 */
	color: #fff; /* 文字色 */
}
#sidebar aside li.cat-item span { /* 記事数部分の装飾 */
	line-height: 1em;
	float: right; /* 右端に寄せる */
	margin: 8px 0 0 8px; /* 位置の調整 */
	padding: 4px 8px; /* 文字周りの余白 */
	border-radius: 4px; /* 角の丸み */
	color: #4d4d4d; /* 文字色 */
	background: #fff; /* 背景色 */
}

/*サイドバーのタグクラウド*/
.tagcloud a {
	line-height: 1em;
	background: #3498db; /* 背景色 */
	color: #fff; /* 文字色 */
	display: inline-block;
	white-space: nowrap;
	padding: 8px 8px; /* 文字周りの余白 */
	margin-top: 3px; /* タグ同士の余白 */
	border-radius: 4px; /* 角を少し丸く */
	text-decoration: none;
}
.tagcloud a:hover {
 	background: #1e7eb4; /* マウスホバー時の背景色 */
	color: #fff !important; /* マウスホバー時の文字色*/
}

/*グローバルナビ */
#navi {
 border-top: 1px solid #1e7eb4;
 border-bottom: 1px solid #1e7eb4;
}
#navi ul li a{
 font-size: 16px;
}

/*グローバルナビでアクティブページだけ装飾を変える（カレント表示）*/
#navi .current_page_item ,
.archive #navi #menu-item-56,/*ブログのアーカイブ系ページ*/
.post-template-default #navi #menu-item-56/*ブログの個別記事ページ*/{
background: #3498db;
}

/*フッターナビ*/
div#footer-navi {
font-size: 16px;
word-break: keep-all;
}

/* mainとsidebar*/
#main, #sidebar{
 border:none;/*枠線を消す*/
}

/* サイドバーの見出し背景を修正 */
#sidebar h3{
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  border-radius: 5px;
  font-weight: bold;
  background: #e3e3e3;
  color: #4D4D4D;
  text-align: center;
}

/*検索ボックスの下の余白を狭める*/
form#searchform {
height: 32px;
}

/*お問い合わせはこちらボタン*/
p.contact-button {
text-align: center;
}
.contact-button a{
  height: 50px;
  line-height: 50px;
  padding: 16px 32px;
  border-radius: 5px;
  font-weight: bold;
  background: #1e73be;
  color: #fff;
  text-align: center;
  text-decoration: none;
}
.contact-button a:hover{
color: #fff !important;
background: #3498db;
}

/*h1を装飾*/
body.page-template h1.entry-title {
    padding-bottom: 25px;
    border-bottom: 1px solid #ccc;
    font-weight: normal;
    font-size: 36px;
    text-align:center;
    margin: 0px -29px 40px;
    color: #4D4D4D;
}

/*h2を装飾*/
.article h2 {
    padding: .5em .75em;
    background-color: #e3e3e3;
    border-left: 12px solid #3498db;
    color: #4D4D4D;
}
.page-template-page-home h2{
margin-left: 0;
margin-right: 0;
}

/*h3を装飾*/
.article h3,
#comment-area h3,
#related-entries h3{
  border-bottom: 3px solid #3498db;
  color: #4D4D4D;
}

/*h4を装飾*/
.article h4 {
    padding: .25em 0 .25em .75em;
    border-left: 6px solid #3498db;
    border-bottom:none;
    color: #4D4D4D;
}

/*トップページの画像の上が空きすぎているのでその対策*/
p {
  margin-top: 0;
}

/*各個別ページの上が空きすぎているのでその対策。*/
div#main {
  padding-top: 10px;
}

/*HOMEのカードスタイル*/
.mycontainer{
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.myblock{
  margin: 20px 0;
}
.myblock__element{
  display: inline-block;
  vertical-align: top;
  width: 300px;
  padding: 10px;
  text-align: justify;
}
.mycard{
  position: relative;
  width:100%;
  padding:0;
  background: #e3e3e3;
  color: #fff;
}
.mycard h5{
  font-size: 175%;
  margin: 0;
  padding: 8px 1em 16px;
  text-align: center;
  color: #4D4D4D;
}
.mycard div{
padding: 0 1em 1em;
}
.mycard p{
margin: 0;
}
.mycard a{
display: block;
position: absolute;
top: -1px;
left: -1px;
height:100%;
width: 100%;
border:1px solid #ddd;
}
.mycard a:hover{
 color: #222;
 text-decoration: none;
 opacity: 0.25;   /*要素を透明に*/
 background-color: #ddd;
}