@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
*/

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

.marker { /*黄色マーカー*/
 background-color: #e6dda7;
}
.marker-red { /*赤色マーカー*/
 background-color: #f1d4e4;
}
.marker-blue { /*青色マーカー*/
  background-color: #CFEEF1;
}
.marker-under { /*黄色アンダーラインマーカー*/
 background: linear-gradient(transparent 20%, #e6dda7 20%);
}
.marker-under-red { /*赤色アンダーラインマーカー*/
 background: linear-gradient(transparent 70%, #f1d4e4 70%);
}
.marker-under-blue { /*青色アンダーラインマーカー*/
 background: linear-gradient(transparent 80%, #CFEEF1 80%);
}




/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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

.my-parts {
	display: inline-block;
	width: 30%;
	height: 100px;
	background: #c5b3d3;
	background: linear-gradient(135deg, transparent 15px, #c5b3d3 0) top left,
	linear-gradient(-135deg, transparent 15px, #c5b3d3 0) top right,
	linear-gradient(-45deg, transparent 15px, #c5b3d3 0) bottom right,
	linear-gradient(45deg, transparent 15px, #c5b3d3 0) bottom left;
	background-size: 50% 50%;
	background-repeat: no-repeat;
	  height: ５em;
  display: flex;
  align-items: center;
  justify-content: center;
	margin-bottom: 10px;
}
.my-parts p{
    margin: 0;
}
.my-parts a{
	font-size: 20px;
	color: #fff;
	text-decoration: none;
}
.container-my-parts {
  display: flex;
    flex-flow: row;
    justify-content: space-around;
    margin: 0;
    padding: 6px;
    list-style-type: none;
}
@media screen and (max-width: 600px) {
	.container-my-parts {
	  flex-direction: column;
	  align-content:space-around;
	}
	.my-parts {
	width: 100%;
	}
}

@media screen and (max-width: 480px) {
    .entry-title, .article h2 {
        font-size: 16px;
    }
}