@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.2
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* 駐輪場一覧レイアウト(固定ページ)*/
.list_img{
	border: solid 1px #888;
	width: 100%;
	background-color: #eee;
	margin-bottom: 16px;
	height:182px;
}
.list_img img{
	float: left;
	margin-right: 16px;
}
.list_img figcaption{
	vertical-align: top;
	font-size: 1.0em;
	margin-left: 0.8em;
}
.list_img:hover{
  opacity: 0.6;
}

/* カテゴリーのテーブルリスト1セル目のセル幅調整 */
.cat_table td{
	width: 20%;
}
.cat_table td img, .cat_table td amp-img{
	width: 100%;
}
.cat_table td + td{
	width: 80%;
}
.cat_table tr{
	padding: 8px 0;
}

/* トップページのタイトル(H1)を非表示にする */
#post-743 h1, #post-2012 h1{
	display: none;
}

/* トップページの記事一覧アイキャッチ */
ul.page_list{
  flex-wrap:wrap;
  list-style: none;
  display: flex;
  padding: 0;
}
li.list_title{
  position: relative;
  padding: 0;
  width: 48%;
  height: 100%;
  min-height: 160px;
  margin: 0 !important;
}
li.list_title .img_caption{
  position: absolute;
  font-weight: bold;
  text-align: left;
  width: 100%;
  bottom: 0;
  color: #fff;
  background-color:  rgba(0, 0, 0, 0.6);
}
li.list_title .img_caption p{
  margin:16px;
}
li.list_title:hover{
  opacity: 0.6;
}
li.list_title img{
  width: 100%;
  display: block;
  margin: 0;
}

/* reCAPTCHA */
.grecaptcha-badge{
  margin-bottom: 60px;
}

/* SNSアイコンカラー */
.sns_ico{
  text-align: right;
}
.sns_ico i{
  margin: 0 4px;
  font-size: 3.0em;
}
.sns_ico i.fa-line{
  color: #00B900;
}
.sns_ico i.fa-twitter-square{
  color: #1DA1F2;
}
.sns_ico i.fa-facebook-square{
  color: #3C5A99;
}
.sns_ico i.fa-get-pocket{
  color: #ee4056;
}
.sns_ico i.Pinterest{
  color: #cb2027;
}
/* スキンVeilnui Simplogで固定ページのSNSアイコン非表示を表示させる */
#main .page .sns-share{
    display: block;
}

/* サイドバーのエリアメニュー2列 */
ul.side_ico{
	width: 100%;
	flex-wrap: wrap;
    list-style: none;
    display: flex;
    padding: 0;
    margin: auto;
    background-color:#ffffff;
}
ul.side_ico li{
	position: relative;
	padding: 0;
	width: 48%;
	min-height: 120px;
	height: 48%;
	border: solid 1px #594321;
	margin: 2px;	
}
ul.side_ico img{
	width: 100%;
  display: block;
  margin: 0;
}
ul.side_ico span{
	position: absolute;
  width: 100%;
  text-align: center;
  bottom: 0;
  color: #242424;
  font-weight: bold;
}
ul.side_ico li:hover{
   background-color: #a5e8ff;;
}
/* GPSボタン */
.gps_button{
	text-align:center;
	min-width: 300px;
	height:60px;
	margin: 0 auto;
}
.gps_button a{
	font-weight:bold;
	margin: 0 auto;
	text-align: center;
	color: #333333;
	padding: 1em;
	text-decoration: none;
	border:solid 4px #816156;
	border-radius: 16px;
}
.gps_button a:hover{
	background-color: #816156;
		color: #ffffff;
}
.gps_list{
	margin-bottom:48px;
}

/* 全車種リスtページのセレクトフォーム */
.Searchfoam{
	text-align:center;
}
.Searchfoam select{
	width:90%;
	margin:8px 0;
}
/* サムネ画像3列横並びにする */
.img_samune3retsu img{
	width: 32%;
	height: auto;
	margin: 1px;
}

/* サマリー要素をH2と同じ表示にする */
#main summary{
    color: #6D4C41;
    background-color: transparent;
    border: 0;
    border-bottom: 5px solid #6D4C41;
    font-size: 24px;
    font-weight: bold;
    border-radius: 2px;
}

/* ページトップのアイキャッチサイズ調整 */
.content_eyecatch{
	max-width: 320px;
	width: 40%;
}

/* キャプションの余白調整 */
.wp-caption p{
	margin-bottom: 0px;
	
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/

}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	/* 駐輪場一覧レイアウト(固定ページ)*/
	.list_img{
		border: solid 1px #888;
		height:100%;
	}
	.list_img img{
		width: 100%;
		float: none;
		margin: 0;
	}
	.list_img figcaption{
	margin-bottom: 8px;
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	/* トップページ記事一覧を一列表示にする */
	li.list_title{
	  width: 46%;
	  min-height: 146px;
	  border: solid 1px #333;
	  margin: 0 2px 4px 2px !important;

	}
	li.list_title a{
		 text-decoration: none;
	}
	li.list_title .img_caption{
		position: relative;
		color: #333;
		background-color:  rgba(0, 0, 0, 0);
		}
	li.list_title .img_caption p{
	  margin:auto 4px;
	}

	/* サイトバー見出しフォント */
	h3.widget-sidebar-title{
		font-size:18px;
	}
	ul.side_ico{
		font-size: 14px;
	}
	/* ヘッダー サイトタイトル余白調整 */
	.logo-text {
    padding: 8px 0 8px;
	}
	/* カテゴリーのテーブルリスト1セル目のセル幅調整 */
	#main{
		padding: 16px;
	}
}