@charset "UTF-8";

#container img {
  max-width: 100%;
}
#container li {
  list-style: none;
}

#container a {
  color: #222;
  text-decoration: none;
}

/*-------------------------------------------
メイン
-------------------------------------------*/

.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}


article {
  flex: 1;
  width: 100%;
  max-width: 540px;
  min-width: 272px;
  padding: 12px;
  margin-bottom:20px;
	
}

article:hover {
  opacity: 0.7;
}

article .title {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: .04em;
  margin: 16px 0 8px 0;
}

article .text {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 8px;
  text-align: justify;
}

article .like {
  color: #ea3f60;
  font-size: 14px;
}

article .like:before {
  content: "\f004";
  font-family: "Font Awesome 5 Free";
  margin-right: 4px;
}

article .name-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #787c7b;
  border-bottom: solid 1px #e8e8e8;		
}

article .name {
  font-size: 14px;
  padding-bottom: 3%;
}

article .name-like {
  font-size: 20px;
}

article .name-like:after {
  content: "\f004";
  font-family: "Font Awesome 5 Free";
}



.border {
  border:#BFBFBF 1px solid;
}


/*-------------------------------------------
PC
-------------------------------------------*/

/* PC画面用（ウィンドウ幅が769px以上の場合に適用） */
@media print,screen and (min-width: 769px) {

.column-wrapper {
  width:940px;	
}
	
#container {
  display: flex;
  justify-content: space-between;
}	
	
	
.content {
 padding:10px  24px;
}
	

.column-wrapper h1 {
  font-size: 30px;
  font-weight: bold;
  padding: 24px 0;
  padding-left: 20px;	
  margin-bottom:30px;
}

	
.column-wrapper h2 {	
	font-size: 1.5em;
	background-color:#D33273;
	color: #fff;
	padding-top: 0.7em;
	padding-bottom: 0.6em;
	padding-left: 1em;
	margin:1% auto 3% auto;
	width: 100%;
	letter-spacing: 0.05em;
}
	
	

.column-wrapper h3 {
  background-color:#fff;	
  color:#1B1B1B;
  font-size: 14px;
  font-weight:normal;
  padding: 2px 2px;
  margin-bottom: 18px;
}
	
		
.h4_design{
	width: 100%;
	padding-top: 0.7em;
	padding-left: 1em;
	padding-bottom: 0.5em;
	font-size: 1.2em;
	letter-spacing: 0.05em;
	color:#333;
	background-color:#E7EFEE;
	margin: auto;
	margin-bottom: 10px;
}	
	
	
}

/*-------------------------------------------
SP
-------------------------------------------*/

/* SP画面用（ウィンドウ幅が768px以下の場合に適用） */
@media screen and (max-width: 768px) {

  #container {
    flex-direction: column;
  }
	
	
.column-wrapper {
  max-width:100%;
  margin: 0 auto;
  padding: 0;
}	
	
.content {
 padding:10px  24px;
}
	

.column-wrapper h1 {
  font-size: 1.4em;
  font-weight: bold;
  padding: 24px 0;
  padding-left: 20px;	
  margin-bottom:30px;
  line-height: 120%;	
}

	
.column-wrapper h2 {	
	font-size: 1.3em;
	background-color:#D33273;
	color: #fff;
	padding-top: 0.7em;
	padding-bottom: 0.6em;
	padding-left: 1em;
	margin:1% auto 3% auto;
	width: 100%;
	letter-spacing: 0.05em;
}
	
	

.column-wrapper h3 {
  background-color:#fff;	
  color:#1B1B1B;
  font-size: 14px;
  font-weight:normal;
  padding: 2px 2px;
  margin-bottom:3%;
}
	
		
.h4_design{
	width: 100%;
	padding-top: 0.7em;
	padding-left: 1em;
	padding-bottom: 0.5em;
	font-size: 1.2em;
	letter-spacing: 0.05em;
	color:#333;
	background-color:#E7EFEE;
	margin: auto;
	margin-bottom: 10px;
}	
	

	

}