/* css.css */

/* 本文 */
.article h2 {
	margin-top: 2.5em !important;
}
.article h3 {
	margin-top: 2.5em !important;
}
.article h4 {
	margin-top: 2.0em !important;
}

/* 元画像が小さすぎの際 */
.image_zoom img{
	zoom: 1.25!important;
}

/* 説明 */
div.tagline{
    width:98%;
}

/* ブログカード */
.blogcard-wrap{
    width:auto!important;
}

/* アプリーチ */
.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;
}
.appreach__star {
	position: relative;
	font-size: 14px !important;
	height: 1.5em;
	width: 5em;
}
.appreach__star__base {
	position: absolute;
	color: #737373;
}
.appreach__star__evaluate {
	position: absolute;
	color: #ffc107;
	overflow: hidden;
	white-space: nowrap;
}

/* PC用追加 */
.appreach .app_pc{
    display: inline-table;
    width: 130px;
    background: #000;
    color: #fff;
    text-decoration: none;
    padding: 6px 0px;
    font-size: 12pt;
    border-radius: 5px;
    text-align: center;
    margin-left: 10px;
}



/* dl dt dd系 */
dt{
  font-weight: bold;
}




/** 吹き出し **/
/* Cocoonのバルーンをリセット */
.speech-balloon,
.speech-balloon .balloon-content,
.speech-balloon .balloon-icon,
.speech-balloon .balloon-text {
  all: unset !important;
  display: revert !important;
}
.speech-balloon::before,
.speech-balloon::after{
  content: none !important;
  display: none !important;
}


/* 吹き出し全体 */
.speech-balloon {
  display: flex !important;
  align-items: flex-start !important;
  margin: 10px 0 !important;
  box-sizing: border-box !important;
}

/* 方向指定 */
.speech-balloon.right {
  flex-direction: row-reverse !important;
  margin-left: auto !important;
}

.speech-balloon.left {
  flex-direction: row !important;
  margin-right: auto !important;
}

/* アイコン画像 */
.speech-balloon > img {
  width: 70px !important;
  height: 70px !important;
  object-fit: cover !important;
  margin: 0 15px !important;
  flex-shrink: 0 !important;
}

.speech-balloon > img.round {
  border-radius: 50% !important;
  border:1px solid #ccc;
}

.speech-balloon > img.flip-horizontal{
  transform: scale(-1, 1);
}


/* 吹き出し本体 */
.speech-balloon .text {
  padding: 10px 15px !important;
  border-radius: 15px !important;
  position: relative !important;
  max-width: 100% !important;
  word-break: break-word !important;
  background-color: #dcf8c6; /* LINE風グリーン */
  color: #000;
  box-sizing: border-box !important;
  margin-top: 5px !important; /* アイコンとの縦位置調整 */
}

/* 三角形（右寄せ） */
.speech-balloon.right .text::after {
  content: "" !important;
  position: absolute !important;
  top: 10px !important;
  right: -20px !important;
  border: 12px solid transparent !important;
  border-left-color: #dcf8c6 !important;
}

/* 三角形（左寄せ） */
.speech-balloon.left .text::after {
  content: "" !important;
  position: absolute !important;
  top: 10px !important;
  left: -20px !important;
  border: 12px solid transparent !important;
  border-right-color: #dcf8c6 !important;
}

/* 黄色指定 */
.speech-balloon.yellow .text {
  background-color: #ffdd90 !important;
}
.speech-balloon.yellow.left .text::after {
  border-right-color: #ffdd90 !important;
}
.speech-balloon.yellow.right .text::after {
  border-left-color: #ffdd90 !important;
}


/* shocking クラスでマンガ風トゲトゲ吹き出し */
.speech-balloon.shocking .text {
  background-color: #ffb956  !important;
  clip-path: polygon(
    0% 15%, 3.33% 0%, 6.66% 15%, 10% 0%, 13.33% 15%, 16.66% 0%, 20% 15%,
    23.33% 0%, 26.66% 15%, 30% 0%, 33.33% 15%, 36.66% 0%, 40% 15%, 43.33% 0%,
    46.66% 15%, 50% 0%, 53.33% 15%, 56.66% 0%, 60% 15%, 63.33% 0%, 66.66% 15%,
    70% 0%, 73.33% 15%, 76.66% 0%, 80% 15%, 83.33% 0%, 86.66% 15%, 90% 0%,
    93.33% 15%, 96.66% 0%, 100% 15%, 100% 85%, 96.66% 100%, 93.33% 85%,
    90% 100%, 86.66% 85%, 83.33% 100%, 80% 85%, 76.66% 100%, 73.33% 85%,
    70% 100%, 66.66% 85%, 63.33% 100%, 60% 85%, 56.66% 100%, 53.33% 85%,
    50% 100%, 46.66% 85%, 43.33% 100%, 40% 85%, 36.66% 100%, 33.33% 85%,
    30% 100%, 26.66% 85%, 23.33% 100%, 20% 85%, 16.66% 100%, 13.33% 85%,
    10% 100%, 6.66% 85%, 3.33% 100%, 0% 85%
  ) !important;
}

/* shocking用の三角形 */
.speech-balloon.shocking.left .text::after{
  border-right-color: #fff !important;
  left: -18px !important;
  top:0.9rem!important;
  height:100%;
}
.speech-balloon.shocking.left .text{
  padding: 1.5em 1em 1.5em 1.5em !important;
}
.speech-balloon.shocking.right .text::after {
  border-left-color: #fff !important;
  right: -18px !important;
  top:0.9rem!important;
  height:100%;
}
.speech-balloon.shocking.right .text{
  padding: 1.5em 1.5em 1.5em 1.0em !important;
}