body {
	padding: 10px;
	margin: 0;
	box-sizing: border-box;
	font-weight: normal;
	font-size: 0.9rem;
	font-family: "Kiwi Maru", serif;
	font-weight: 400;
	font-style: normal;
	background-color: #FFFEF2;
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
	text-autospace: normal;
}

a {
	text-decoration: none;
	color: #303030;
}

.embeddedimage {
	display: block;
	max-width: 90%;
	height: auto;
	padding: 10px;
	margin: auto;
}

.hitokoto-body {
	max-width: 100%;
	height: 100%;
	overflow-wrap: anywhere;
	line-break: anywhere;
	margin: 5px 0px 30px;
	padding: 10px 20px 10px;
	background: none;
	border: 1px solid #ccc;
	border-radius: 7px;
	position: relative;
	font-size: 0.875rem;
}

.hitokoto-body:after {
	background-color: #dcf1f0;
	border: none;
	content: "";
	position: absolute;
	top: 7px;
	left: 7px;
	width: 100%;
	height: 100%;
	z-index: -1;
	border-radius: 7px;
}

.hitokoto-body::before {
	content: "";
	position: absolute;
	bottom: -17px;
	right: 15%;
	width: 5px;
	height: 5px;
	box-sizing: border-box;
	border: 13px solid transparent;
	border-color: #dcf1f0 #dcf1f0 transparent transparent;
	rotate: 135deg;
	translate: -50%;
}

.hitokoto-log {
	text-align: right;
	display: block;
	margin-top: 0px;
}

.hitokoto-log a {
	border-bottom: 2px solid #e4cccf;
}

.hitokoto-poweredby {
	text-align: right;
	display: block;
	font-size: 12px;
	color: #767676;
}

.hitokoto-poweredby a {
	background: linear-gradient(transparent 10%, #f1dadd 30%);
}

.cemoji img {
	width: 17px;
	height: auto;
	margin: 0;
	padding: 0;
	vertical-align: -3px;
}

/* twiemoji */
img.emoji {
	width: 16px;
	height: auto;
	margin: 0;
	padding: 0;
	vertical-align: -1px;
}

.embeddedimage.nolisted {
	display: inline-block;
	max-width: 100%;
	height: stretch;
	width: -webkit-fill-available;
	width: -moz-available;
	line-height: 1.5em;
	padding-bottom: 0.4em;
}

@media (max-width: 767px) {

	.embeddedspotify {
		display: block;
		width: 100% !important;
		margin-top: 10px;
	}

	.embeddedmusic.embeddedapplemusic {
		margin-top: 10px;
	}

}

/* ---------------------- */
/* ▼カード型リンクの装飾 */
/* ---------------------- */
.cardlink {
	display: inline-block;
	width: 100%;
	max-width: 500px;
	/* 最大幅 (※横幅を制限したくない場合はこれを削除して下さい) */
	padding: 8px;
	margin: 0 0.3rem 0.5rem 0;
	font-size: 16px;
	/* 文字サイズ */
	text-decoration: none;
	/* リンク文字の下線を消す */
	vertical-align: middle;
	/* 行内の上下方向では中央配置 */
}

/* ------------------------------------- */
/* リンクカードの装飾(サイズS/L共通部分) */
/* ※後述の「サイズS用の追記」や「サイズL用の追記」と合わせて、1つのカードデザインになります。 */
/* ------------------------------------- */
/* カード外枠 */
.cardlinkbox {
	border: 1px solid #ccc;
	/* 枠線 */
	border-radius: 7px;
	/* 角丸 */
	background-color: white;
	/* 背景色 */
	display: flex;
	/* 内部レイアウトのFlexbox化 */
}

/* (マウスが載ったとき) */
.cardlinkbox:hover {
	background-color: #F2FAFC;
	/* 背景色 */
	border-color: #ACCDEA;
	/* 枠線色 */
}

/* ▽リンクカード内の画像枠 (※読み込まれたog:imageは、この枠に《背景画像として》描画されます) */
.cardlinkimage {
	background-image: linear-gradient(-30deg, #eeaeca 0%, #94bbe9 100%);
	/* プレースホルダ的な背景グラデーション(※og:imageの画像指定が読み込まれたら、この値は上書きされます) */
	background-size: cover;
	/* 背景画像で枠を埋める */
	background-position: center center;
	/* 背景画像を中央に寄せる */
	background-repeat: no-repeat;
	/* 背景画像を繰り返さない */
}

/* ▽リンクカード内のテキスト枠 */
.cardlinktextbox {
	display: flex;
	/* Flexbox化 */
	flex-direction: column;
	/* 子要素を縦方向に並べる */
	padding: 0.5em 1em;
	/* 内側の余白量 */
}

/* ▽リンクカードのテキスト枠内の3要素共通 */
.cardlinktitle,
.cardlinkdescription,
.cardlinkurl {
	/* ↓表示行数を制限するための準備 (※システム側では文字数は制限せずに「記述されている全文字」をHTMLに出力しますので、表示分量を制限したい場合はCSSで制御する必要があります。) */
	display: -webkit-box;
	/* -webkit-line-clampを使うために必要な記述1 ※A */
	-webkit-box-orient: vertical;
	/* -webkit-line-clampを使うために必要な記述2 ※A */
	overflow: hidden;
	/* 表示量を制限する場合に必須の記述 */
	/* ↓制限の仕様 */
	line-clamp: 1;
	/* 1行だけ見せる (将来的にはこれだけで実現可能かも) */
	-webkit-line-clamp: 1;
	/* 1行だけ見せる (今のブラウザにはこちらが必要で、そのためには上記「※A」も必要) */
	text-overflow: ellipsis;
	/* 省略記号(三点リーダー) */
}

/* リンクタイトル */
.cardlinktitle {
	padding-bottom: 0.25em;
	/* 内側下端の余白量 */
}

/* リンク概要文 */
.cardlinkdescription {
	line-height: 1.3;
	/* 行の高さ */
	color: #555;
	/* 文字色 */
	line-clamp: 2;
	/* (既存指定の上書き) 最大2行まで見せる */
	-webkit-line-clamp: 2;
	/* (既存指定の上書き) 最大2行まで見せる */
}

/* リンクドメイン */
.cardlinkurl {
	color: #999;
	/* 文字色 */
}

/* ----------------------------------- */
/* リンクカードの装飾(サイズS用の追記) */
/* 前述の「サイズS/L共通部分」と合わせて、1つのカードデザインになります。 */
/* ----------------------------------- */
.cardsize-S {
	flex-direction: row;
	/* 画像とテキストは横に並べる(Flexbox) */
}

/* ▽リンクカード内の画像枠 */
.cardsize-S .cardlinkimage {
	min-width: 100px;
	/* 最小の横幅 */
	min-height: 100px;
	/* 最小の高さ */
	border-radius: 6px 0 0 6px;
	/* 左側だけ角丸 */
	flex-shrink: 0;
	/* 枠サイズを自動縮小させない */
}

/* ▽リンクカード内のテキスト枠 */
.cardsize-S .cardlinktextbox {
	border-left: 1px solid #ccc;
	/* 左側の枠線 */
	justify-content: center;
	/* Flexboxの上下方向での中央寄せ */
}

/* ▽リンクカードのテキスト枠内の3要素 */
.cardsize-S .cardlinktitle {
	order: 2;
}

/* タイトルは、2番目に表示 */
.cardsize-S .cardlinkdescription {
	order: 3;
}

/* 概要文　は、3番目に表示 */
.cardsize-S .cardlinkurl {
	order: 1;
}

/* ドメインは、1番上に表示 */

/* ----------------------------------- */
/* リンクカードの装飾(サイズL用の追記) */
/* 前述の「サイズS/L共通部分」と合わせて、1つのカードデザインになります。 */
/* ----------------------------------- */
.cardsize-L {
	flex-direction: column;
	/* 画像とテキストは縦に並べる(Flexbox) */
}

/* ▽リンクカード内の画像枠 */
.cardsize-L .cardlinkimage {
	aspect-ratio: 1.91 / 1;
	/* 画像枠の縦横比を指定= (横)1.91：(縦)1 */
	width: 100%;
	/* 横幅は枠最大に拡げる */
	height: auto;
	/* 高さは自動計算 */
	border-radius: 6px 6px 0 0;
	/* 上側だけ角丸 */
}

/* ▽リンクカード内のテキスト枠 */
.cardsize-L .cardlinktextbox {
	border-top: 1px solid #ccc;
	/* 上側の枠線 */
}

/* ▽リンクカードのテキスト枠内の3要素 */
.cardsize-L .cardlinktitle {
	font-weight: bold;
}

/* 太字 */
.cardsize-L .cardlinkdescription {
	min-height: 2.5em;
}

/* 内容量が少ない場合でも一定の高さを確保 */
.cardsize-L .cardlinkurl {
	border-top: 1px solid #ddd;
	/* 上側の枠線 */
	margin-top: 0.5em;
	/* 上側の枠線より上の余白量 */
	padding-top: 0.5em;
	/* 上側の枠線より下の余白量 */
	font-size: 0.75rem;
	/* 文字サイズ(小さめ) */
}

/* ▼埋め込みTweet */
blockquote.twitter-tweet {
	background-color: #f8f8f8;
	border: 1px dashed #ddd;
	border-radius: 9px;
	margin: 0.3em 0;
	padding: 1em;
	font-size: 14px;
	color: #999;
	text-shadow: 1px 1px 1px #fff;
}

/* ▼埋め込みツイートの横幅を強制的に制限 */
div.twitter-tweet {
	width: 100%;
	margin: 0 auto;
}


/* -------------- */
/* ▼埋め込み動画 */
/* -------------- */
@media all and (max-width: 600px) {
	.embeddedmovie {
		display: inline-block;
		max-width: 100%;
		width: auto;
		height: auto;
	}
}

.taglink {
	display: none;
}