@charset "UTF-8";

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

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

.article h3{ /*見出し３カスタマイズ*/
  background: transparent; /*背景カラー*/
  font-size: 18px; /*フォントサイズ*/
  letter-spacing: 2px; /*文字間隔*/
  margin: 35px -8px 20px -8px;
  padding: 9px 7px 9px 10px;
  border-left: 5px solid #FFA500; /*左ラインの太さとカラー*/
  line-height: 25px; /*高さ*/
}



/*************************************
***文字を太文字に変更するCSS ***
*************************************/

.b{
	font-weight:bold;
}

/*************************************
***背景を蛍光黄色と太文字に変更するCSS ***
*************************************/

.y{
	font-weight:bold;
	background-color : yellow;
}


/*************************************
***背景をオレンジと太文字に変更するCSS ***
*************************************/

.or{
	color:white;
	font-weight:bold;
	background-color : #ffb547;
	padding: 0 12px;
	-moz-border-radius: 20px;    /* Firefox */
	-webkit-border-radius: 20px; /* Safari,Chrome */
	border-radius: 20px;         /* CSS3 */

}
/*************************************
***背景を緑と太文字に変更するCSS ***
*************************************/

.gr{
	color:white;
	font-weight:bold;
	background-color : #008000;
	padding: 0 12px;
	-moz-border-radius: 20px;    /* Firefox */
	-webkit-border-radius: 20px; /* Safari,Chrome */
	border-radius: 20px;         /* CSS3 */

}
/*************************************
***赤に文字色を変更するCSS ***
*************************************/

.r{
	color:red;
}

/*************************************
***文字色を紫にするCSS ***
*************************************/
.purple{
	color:purple;
}

/*************************************
***文字サイズを１８にするCSS ***
*************************************/
.ft18{
    font-size: 18px;
}

/*************************************
***文字サイズを１６にするCSS ***
*************************************/
.ft16{
    font-size: 16px;
}

/*************************************
***文字サイズを１４にするCSS ***
*************************************/
.ft14{
    font-size: 14px;
}


/*************************************
***文字に下線を付けるCSS ***
*************************************/

.ud{
	border-bottom:solid 2px;
}

/*************************************
***文字に緑の２重線を付けるCSS２ ***
*************************************/

.ud_g{
	border-bottom:double 3px green;
}


/*************************************
***論理強調タグのCSS ***
*************************************/

em {
	font-weight: normal; 
	font-style: normal;
	text-decoration: none
}


strong {
	font-weight: normal; 
	font-style: normal;
	text-decoration: none
}
/*************************************
***ボックスのCSS ***
*************************************/
div.boxerea{
	background-color:#feff99;
	border:1px dotted #c00000;
	padding:15px 15px 15px 15px;
	box-shadow:5px 5px 5px #aaaaaa;
	border-radius:10px;
}

div.boxerea_yellow{
	background-color:#feff99;
	border:1px dotted #c00000;
	padding:15px 15px 15px 15px;
	box-shadow:5px 5px 5px #aaaaaa;
	border-radius:10px;
}

div.boxerea_b{
	background-color:#F9F9F9;
	border:1px solid #c00000;
	padding:15px 15px 15px 15px;
	box-shadow:5px 5px 5px #aaaaaa;
	border-radius:10px;
}

div.boxerea_gray{
	background-color:#F9F9F9;
	border:1px solid #c00000;
	padding:15px 15px 15px 15px;
	box-shadow:5px 5px 5px #aaaaaa;
	border-radius:10px;
}

div.boxerea_c{
	background-color:#FFFFFF;
	border:2px solid #ffb547;
	padding:15px 15px 15px 15px;
	box-shadow:5px 5px 5px #aaaaaa;
	border-radius:10px;
}

div.boxerea_orange{
	background-color:#FFFFFF;
	border:2px solid #ffb547;
	padding:15px 15px 15px 15px;
	box-shadow:5px 5px 5px #aaaaaa;
	border-radius:10px;
}

div.boxerea_d{
	background-color:#FFFFFF;
	border:2px solid #008000;
	padding:15px 15px 15px 15px;
	box-shadow:5px 5px 5px #aaaaaa;
	border-radius:10px;
}

div.boxerea_green{
	background-color:#FFFFFF;
	border:2px solid #008000;
	padding:15px 15px 15px 15px;
	box-shadow:5px 5px 5px #aaaaaa;
	border-radius:10px;
}

div.boxerea_pink{
	background-color:#FFFFFF;
	border:2px solid #ff69b4;
	padding:15px 15px 15px 15px;
	box-shadow:5px 5px 5px #aaaaaa;
	border-radius:10px;
}

/*************************************
***左スペース
*************************************/
div.pad_left{
	 padding-left:30px;
}

/*************************************
***タイトル付ボックスのCSS ***
*************************************/
div.boxTitle {
	background:#ff9933;
	border:1px solid #ff9933;
	padding-left:10px;
	font-size:1.16em;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	color:#ffffff;
	font-weight:bold;
	margin-bottom: 0;

}
div.boxText {
	border:3px solid #ff9933;
	padding:10px;
	font-size:1em;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	padding-bottom:10px;
}

/*************************************
***アプリーチのCSS ***
*************************************/

.appreach {
  text-align: left;
  padding: 10px;
  border: 1px solid #7C7C7C;
  overflow: hidden;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 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;
}
.appreach__name {
  font-size: 16px;
  line-height: 1.5em !important;
  max-height: 3em;
  overflow: hidden;
}
.appreach__info {
  font-size: 12px !important;
}
.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}
.appreach__posted a {
  margin-left: 0.5em;
}
.appreach__links {
  float: left;
  height: 40px;
  margin-top: 8px;
  white-space: nowrap;
}
.appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px;
}
.appreach__gplink img {
  height: 40px;
  width: 134.5px;
}


img {
    clear:  both;               /* 回り込みを解除する */
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

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

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

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