@charset "UTF-8";
/* =======================================================
   中津まさデンタルクリニック ブログ記事 装飾パーツ集
   既存の masa_pc.css / masa_sp.css とは別ファイルとして読み込む。
   サイトのブランドカラー（ティール #01939B / #52c2d0、
   ネイビー #03162f）を軸に、文字色・マーカー・囲みボックス・
   吹き出し・チップの5系統を追加する。
   既存クラス（.aka .aka2 .aka3 .ao .futomoji .mark .mark2
   .mark3 .marker1）は削除せず、そのまま残してあるので
   過去記事の表示は崩れない。
   ======================================================= */
 
/* -------------------------------------------------------
   1. 文字色（テキストカラー）
   意味ごとに色を固定する。「なんとなく赤」「なんとなく青」
   ではなく、用途で使い分ける。
   ------------------------------------------------------- */
 
/* ブランドカラーで強調（一番よく使う想定） */
.txt-teal{
	color: #01939B;
	font-weight: 700;
}
 
/* お知らせ・キャンペーンなど「目立たせたい」強調 */
.txt-gold{
	color: #b8860b;
	font-weight: 700;
}
 
/* 注意・警告（既存の赤系3種の統合版。今後はこちらを使う） */
.txt-red{
	color: #d64550;
	font-weight: 700;
}
 
/* 落ち着いたネイビーの強調（見出し寄りの重み） */
.txt-navy{
	color: #03162f;
	font-weight: 700;
}
 
 
/* -------------------------------------------------------
   2. マーカー（背景ハイライト）
   既存の .mark 系より少し薄め・ブランドカラー寄りに統一。
   ------------------------------------------------------- */
 
.mark-teal{
	background: linear-gradient(transparent 55%, rgba(82,194,208,0.45) 55%);
}
 
.mark-gold{
	background: linear-gradient(transparent 55%, rgba(255,193,7,0.45) 55%);
}
 
.mark-pink{
	background: linear-gradient(transparent 55%, rgba(252,163,177,0.45) 55%);
}
 
/* 波線アンダーライン（マーカーより控えめに使いたい時用） */
.underline-wavy{
	text-decoration: underline wavy #01939B 2px;
	text-underline-offset: 3px;
}
 
 
/* -------------------------------------------------------
   3. 囲みボックス
   段落・リストをまるごと枠で囲んで目立たせる。
   記事編集画面では <div class="box-point"> ... </div>
   のようにHTMLソースで囲んで使う。
   ------------------------------------------------------- */
 
/* ポイント・まとめ用（ティール） */
.box-point{
	background: rgba(82,194,208,0.08);
	border-left: 6px solid #01939B;
	border-radius: 4px;
	padding: 1.2rem 1.4rem;
	margin: 1.5rem 0;
}
.box-point .box-title{
	color: #01939B;
	font-weight: 700;
	margin-bottom: .5rem;
	display: block;
}
 
/* 注意喚起用（アンバー） */
.box-caution{
	background: rgba(255,193,7,0.10);
	border-left: 6px solid #e0a100;
	border-radius: 4px;
	padding: 1.2rem 1.4rem;
	margin: 1.5rem 0;
}
.box-caution .box-title{
	color: #b8860b;
	font-weight: 700;
	margin-bottom: .5rem;
	display: block;
}
 
/* まとめ・結論用（ネイビー、上下ボーダーで区切る） */
.box-summary{
	background: #f7f8f9;
	border-top: 3px solid #03162f;
	border-bottom: 3px solid #03162f;
	padding: 1.2rem 1.4rem;
	margin: 1.5rem 0;
}
.box-summary .box-title{
	color: #03162f;
	font-weight: 700;
	margin-bottom: .5rem;
	display: block;
}
 
/* シンプルな囲み枠（色をつけたくない引用などに） */
.box-plain{
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 1.2rem 1.4rem;
	margin: 1.5rem 0;
}
 
 
/* -------------------------------------------------------
   4. 吹き出し（スタッフのコメント風に使う）
   HTML例：
   <div class="fukidashi fukidashi-left">
     <p>こんにちは、スタッフの〇〇です！</p>
   </div>
   ------------------------------------------------------- */
 
.fukidashi{
	position: relative;
	background: #eef8fa;
	border: 2px solid #52c2d0;
	border-radius: 12px;
	padding: 1rem 1.2rem;
	margin: 1.8rem 0 1.8rem 1rem;
}
.fukidashi:before{
	content: "";
	position: absolute;
	top: -12px;
	left: 20px;
	border: 10px solid transparent;
	border-bottom-color: #52c2d0;
}
.fukidashi:after{
	content: "";
	position: absolute;
	top: -8px;
	left: 22px;
	border: 8px solid transparent;
	border-bottom-color: #eef8fa;
}
 
 
/* -------------------------------------------------------
   5. チップ（キーワードの短い強調タグ）
   HTML例： <span class="chip">ホワイトニング</span>
   ------------------------------------------------------- */
 
.chip{
	display: inline-block;
	background: #01939B;
	color: #fff;
	font-size: .85rem;
	font-weight: 700;
	padding: .2rem .8rem;
	border-radius: 999px;
	margin: 0 .2rem;
}
.chip-outline{
	display: inline-block;
	background: #fff;
	color: #01939B;
	border: 1.5px solid #01939B;
	font-size: .85rem;
	font-weight: 700;
	padding: .15rem .75rem;
	border-radius: 999px;
	margin: 0 .2rem;
}