/*
Theme Name: genique by digipress child
Version: 1.0.3.5
Template: dp-genique 
*/
/*タイトルロゴを画像にした時にカラー表示できない場合*/
.header_bar.hd_bar_trpt:not(.float):not(.no_ct_hd):not(:hover) .h_group .hd-title img{
filter: none!important;
}

/*
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
*/





/*見出し　*/

/*アメリカンな吹き出し*/
.post_content001{
position:relative;
padding:14px 20px;  /*高さ*/
margin: 20px 0;    /*見出し上下に余白をあける*/
font:bold 28px/1.6 Arial, Helvetica, sans-serif;
color:#333;
background:#fff;
text-shadow:
1px 1px 0 #fff,
2px 2px 0 #999;
border-top:#333 solid 3px;
border-bottom:#333 solid 3px;
background-image: -webkit-gradient(linear, left top, right bottom,
from( rgba(255, 255, 255, 0.0)),
color-stop(0.4, rgba(255, 255, 255, 0.0)),
color-stop(0.4, rgba(0, 0, 0, 0.1)),
color-stop(0.6, rgba(0, 0, 0, 0.1)),
color-stop(0.6, rgba(255, 255, 255, 0.0)),
to( rgba(255, 255, 255, 0.0))
);
background-image: -webkit-linear-gradient(top -45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
background-image: -moz-linear-gradient(top -45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
background-image: -o-linear-gradient(top -45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
background-image: linear-gradient(to bottom -45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
background-size:4px 4px;
}

.post_content001:before{
content:" ";
position:absolute;
top:100%;
left:24px;
width:0;
height:0;
border-width:12px;
border-style:solid;
border-color:transparent;
border-top-color:#333;
}

.post_content001:after{
content:" ";
position:absolute;
top:100%;
left:28px;
width:0;
height:0;
border-width:8px;
border-style:solid;
border-color:transparent;
border-top-color:#f0f0f0;
z-index:1;
}
/*ストライプ002*/
.post_content002 {
  color: #6cb4e4;
  text-align: left;
  padding: 0.65em;
  border-top: solid 2px #6cb4e4;
  border-bottom: solid 2px #6cb4e4;
  background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

/*吹無地003*/
.post_content003{
    position: relative;
    padding: 1rem 1rem 1rem 1.5rem;
    border: 3px solid #333;
    font-weight: bold;
    font-size: 26px;
}

.post_content003:before,
.post_content003:after {
    position: absolute;
    top: 100%;
    left: 30px;
    height: 0;
    width: 0;
    border: solid transparent;
    content: "";
}

.post_content003:before {
    margin-left: -12px;
    border-color: transparent;
    border-top-color: #333;
    border-width: 12px;
}

.post_content003:after {
    margin-left: -8px;
    border-color: transparent;
    border-top-color: white;
    border-width: 8px;
}

/*吹無地004*/
.post_content004 {
    position: relative;
    padding: 0.8rem 0.8rem;
    margin-bottom: 0.2rem;
    border-bottom: 5px solid;
    color: black;
    font-weight: bold;
    font-size: 35px;
    text-align: center;
}

.post_content004:before,
.post_content004:after {
    position: absolute;
    top: 100%;
    left: 50%;
    content: "";
    height: 0;
    width: 0;
}

.post_content004:before {
    border: 16px solid;
    border-color: transparent;
    border-top-color: black;
    margin-left: -16px;
}

.post_content004:after {
    border: 10px solid;
    border-color: transparent;
    border-top-color: white;
    margin-left: -10px;
}

/*下吹005*/

.post_content005{
    position: relative;
    padding: .5em .7em .4em;
    border-bottom: 3px solid #000000;
    color: #333333;
}

.post_content005::before,
.post_content005::after {
    position: absolute;
    left: 30px;
    bottom: -15px;
    width: 30px;
    height: 15px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}

.post_content005::before {
    background-color: #000000;
}

.post_content005::after {
    bottom: -11px;
    background-color: #fff;
}

/*020チェック柄上下線*/
.post_content020{
    padding: .6em .7em;
    border-top: 2px solid #5ba9f7;
    border-bottom: 2px solid #5ba9f7;
    background-image: linear-gradient(45deg, #5ba9f712 25%, transparent 25%, transparent 50%, #5ba9f712 50%, #5ba9f712 75%, transparent 75%, transparent), linear-gradient(-45deg, #5ba9f712 25%, transparent 25%, transparent 50%, #5ba9f712 50%, #5ba9f712 75%, transparent 75%, transparent);
    background-color: #5ba9f70d;
    background-size: 20px 20px;
    color: #5ba9f7;
}

/*021映画フィルム*/

.post_content021 {
    display: flex;
    align-items: center;
    position: relative;
    padding: 1.1em 1.4em 1.1em 1em;
    background-color: #000000;
    color: #fff;
}

.post_content021::before {
    position: absolute;
    left: 5px;
    width: calc(100% - 10px);
    height: 65%;
    border-top: 10px dashed #fff;
    border-bottom: 10px dashed #fff;
    content: '';
}

/*アイコン付見出し050*/
 .post_content050 {
	position: relative;
	padding: 0.5em 0.75em;
	border: solid 1px #27acd9;
	border-left: solid 2.5em #27acd9;
}
.post_content050:before {
	position: absolute;
	font-family: "Font Awesome 5 Free";
	content: "\f0eb";
	font-weight: 900;
	color: #fff;
	padding: 0;
	left: -1.6em;
	top: 50%;
	transform: translateY(-50%);
}
  
 /*051アイコン->赤*/
.post_content051 {
  position: relative;/*相対位置*/
  padding: 0.5em 0.5em 0.5em 1.5em;/*アイコン分のスペース*/
  line-height: 1.4;/*行高*/
  color: #000000;/*文字色*/
  /*border-top: solid 2px gray; 上の線*/
  /*border-bottom: solid 2px gray;下の線*/
  background: #ffffff;
}

.post_content051::before {
  font-family: "Font Awesome 5 Free";/*忘れずに*/
  content: "\f138";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0.25em;/*アイコンの位置*/
  top: 0.5em;/*アイコンの位置*/
  color: #ff6a6a; /*アイコン色*/
	}

/*052アイコン-✓塗りつぶし*/
.post_content052 {
  position: relative;
  color: white;
  background: #81d0cb;
  line-height: 1.4;
  padding: 0.5em 0.5em 0.5em 1.8em;
}

.post_content052:before {
  font-family: "Font Awesome 5 Free";
  content: "\f14a";
  font-weight: 900;
  position: absolute;
  left : 0.5em; /*左端からのアイコンまでの距離*/
}

/*タイトル付ボックス*/
.post_content150{
	background-color:#fff; /* ボックス背景色 */
	padding:2em; /* ボックス内側余白 */
	position:relative; /* 配置(ここを基準に) */
	border: 2px solid #666;/* ボックスの線 (太さ・種類・色)*/
}
.post_content150 .box-title {
	background-color:#fff; /* タイトル背景色 */
	font-size: 1em;/* タイトル文字の大きさ */
	font-weight:800;
	color: #666; /* タイトル文字色 */
	padding: 0 5px;/*タイトルの余白*/
	line-height: 1;/*タイトルの行の高さ*/
	position:absolute;/* 配置(ここを動かす) */
	top: -8px; /*上からの距離*/
	left: 20px; /*左からの距離*/
}
/*054icon-消える線*/
.post_content054{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 0 0 5px calc(1em + 5px);	
	color: #6699cc;
}
.post_content054:before{
	position: absolute;
	left: 0;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f4ad';
}
.post_content054:after{
	position: absolute;
	bottom: -4px;
	display: block;
	width: 100%;
	height: 4px;
	background: rgba(102, 153, 204, 1);
	background: -moz-linear-gradient(left, rgba(102, 153, 204, 1) 0%, rgba(102, 153, 204, 0) 100%);
	background: -webkit-linear-gradient(left, rgba(102, 153, 204, 1) 0%, rgba(102, 153, 204, 0) 100%);
	background: linear-gradient(to right, rgba(102, 153, 204, 1) 0%, rgba(102, 153, 204, 0) 100%);
	left: 0;
	content: '';
}
/*053icon->>青*/
.post_content053{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 5px 5px 5px calc(1em + 5px);
	border-bottom: 3px double #3366cc;
	color: #3366cc;
}
.post_content053:before{
	position: absolute;
	left: 0;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f101';
}

/*022チエック柄ブルー*/

.post_content022 {
  padding: 1.65rem 2rem;
  background-color: rgba(165, 210, 255, .4);
  background-image:
    linear-gradient(90deg, rgba(165, 210, 255, .3) 50%, transparent 50%),
    linear-gradient(rgba(165, 210, 255, .3) 50%, transparent 50%);
  background-size: 40px 40px;
}
/*023チェック柄レッド*/
.post_content023 {
  padding: 1.65rem 2rem;
  color: #e5004f;
  background-color: transparent;
  background-image: linear-gradient(45deg, #f9dbdc 25%, transparent 25%, transparent 75%, #f9dbdc 75%, #f9dbdc),
    linear-gradient(45deg, #f9dbdc 25%, transparent 25%, transparent 75%, #f9dbdc 75%, #f9dbdc);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
}

/*024チェック柄グリーン*/
.post_content024 {
  padding: 1rem 2rem;
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
}