/*------------------------------------------------
  タイトル下
------------------------------------------------*/
/* 注意書き */
#hpbseo_title_cautions{
	margin      : 5px;
	font-size   : 12px;
}


/*------------------------------------------------
  コンテンツ分析 
------------------------------------------------*/
/* 文字数 */
#hpbseo_content_length{
	font-size   : 28px;
	font-weight : bold;
	line-height : 28px;
}

/* サブタイトル */
.hpbseo_contenttune_subtitle{
	font-size   : 1.2em;
	font-weight : bold;
	padding     : 5px 10px 5px 0px;
}

/* メインテーマ+構成ワードwrap */
#hpbseo_content_tune_wrap{
	position:relative;
	display: flex;
	gap:24px;
	flex-wrap: wrap;
}
@media (min-width: 1100px) {
	#hpbseo_content_tune_wrap > div{
		flex: 1 0 0;
	}
}

/* ブロックエディタ読み込み失敗 */
#hpbseo_content_tune_wrap.fail{
	position: relative;
	overflow: hidden; 
}

#hpbseo_content_tune_wrap.fail::after {
    content: "本文を入力して、右上の更新ボタンをクリックして再読み込みしてください";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
	font-weight:bold;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    text-align: center;
}


/* ローディング */
#hpbseo_content_tune_loading{
	margin:0;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	min-height:50px;
	background:#F9F9F9;
	z-index:10;
	text-align:center;
}
#hpbseo_content_tune_loading img{
	position:absolute;
	top:30%;
	left:50%;
}
/* メインテーマ */
#hpbseo_content_tune_div{
	margin-bottom:10px;
}

/* メインテーマ構成ワード */
#hpbseo_main_theme_word{
	color       : #cc3333;
	font-weight : bold;
	font-size   : 1.6em;
	line-height : 1.6em;
}

#hpbseo_main_theme_word.hpbseo_display_off{
	color       : #cccccc;
	font-weight : bold;
	font-size   : 1.6em;
	line-height : 1.6em;
}

/* 構成ワード */
#hpbseo_composition_word_div{
}

.hpbseo_display_off{
	display:inline;
	color:#cccccc;
}
.hpbseo_display_none{
	display:none;
}
.hpbseo_display{
	display:inline;
}

/* 文字数不足時メッセージ */
#hpbseo_content_tune_msg{
	color       : #CC0000;
	font-weight : bold;
	margin      : 8px;
}

/* 更新ボタン右寄せ */
#hpbseo_content_tune_btn_div{
	text-align:right;
}
/*------------------------------------------------
  ヘッダ情報
------------------------------------------------*/
.hpbseo_headtune_subtitle{
	font-size   : medium;
	font-weight : bold;
	padding     : 5px 10px 5px 0px;
}

/* メタディスクリプション入力欄 */
#hpbseo_meta_des{
	width       : 60%;
}
/* メタキーワード入力欄 */
#hpbseo_meta_key{
	width       : 60%;
}

/*プレビュー/閾値 レイアウト用 */
.hpbseo_leftbox{
	width       : 60%;
	float       : left;
	padding     : 3px;
}

.hpbseo_wrapbox{
	display: flex;
	gap:12px;
}



/* レスポンシブ */
@media (max-width: 500px) {
	#hpbseo_meta_des,
	#hpbseo_meta_key{
		width:100%;
	}
	.hpbseo_wrapbox{
		flex-direction: column;
		gap:0;
	}
	.hpbseo_wrapbox .hpbseo_leftbox{
		width       : 100%;
	}
	.hpbseo_wrapbox .hpbseo_arrow_box_left{
		margin-top: 5px;
		float: none;
		width: auto;
	}
	.hpbseo_wrapbox .hpbseo_arrow_box_left:after,
	.hpbseo_wrapbox .hpbseo_arrow_box_left:before {
		bottom: 100%;
		left: 20%;
		right: auto;
		top: auto;
	}
	.hpbseo_wrapbox .hpbseo_arrow_box_left:after {
		border-color: rgba(226, 148, 124, 0);
		border-bottom-color: #fde5d9;
		border-width: 5px;
		margin-left: -5px;
		margin-top: 0;
	}
	.hpbseo_wrapbox .hpbseo_arrow_box_left:before {
		border-color: rgba(226, 148, 124, 0);
		border-bottom-color: #e2947c;
		border-width: 6px;
		margin-left: -6px;
		margin-top: 0;
	}
}



/* 注意書き */
.hpbseo_meta_cautions{
	margin      : 5px;
	font-size   : 12px;
}

/* プレビュー */
.hpbseo_meta_preview{
	border      : 1px solid #cccccc;
	padding     : 1em 0.5em;
	margin      : 0px;
}


/* 競合メッセージ */
#hpbseo_conflict_message{
	color       : #ff0000;
	font-weight : bold;
}

/* デフォルトメッセージ */
.hpbseo_defaulttext{
	color       : #cccccc;
}
input[type="text"].hpbseo_defaulttext{
	color       : #cccccc;
}

/* チェックボックスdisabledの文字 */
.hpbseo_disabled_text{
	color       : #cccccc;
}

/* 表示イメージ */
#hpbseo_disp_image{
	margin      : 10px 0px 20px 0px;
	padding     : 10px;
	display     : block;
	border      : solid 1px #DFDFDF;
	border-radius: 3px 3px 3px 3px;
	background-color:#ffffff;
/*	width       : 528px;	googleの表示サイズ*/
/*	width       : 550px;*/
	max-width  : 550px;
}
#hpbseo_disp_image p.hpbseo_boxtitle{
	font-size   : 10px;
	text-align  : right;
	margin      : 0px;
	padding     : 0px;
	color       : #999999;
}
#hpbseo_disp_image p.hpbseo_title{
	margin      : 0px;
	padding     : 0px;
	font-size   : medium;
	font-weight : bold;
	color       : #1122cc;
	text-decoration:underline;
	font-family :'arial,sans-serif';
	font-style  : normal;
	line-height : 1.6;

	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}
#hpbseo_disp_image p.hpbseo_meta_des{
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}
#hpbseo_disp_image p.hpbseo_url{
	margin      : 5px 0px;
	padding     : 0px;
	font-size   : 14px !important;
	color       : #009933;
	text-decoration:none;
	font-family :'arial,sans-serif';
	word-break  : break-all;
}
#hpbseo_disp_image p.hpbseo_err{
	color       : #ff0000;
	font-weight : bold;
	text-align  : center;
}

/* カテゴリサービス登録状況 */
#hpbseo_category_box{
	background-color : #ffffff;
	border      : 1px solid #cccccc;
	padding     : 1em 0.5em 0.5em 0.5em;
	margin      : 0px;
/*	width       : 60%;*/
	max-width   : 470px;
	border-radius: 3px; /* CSS3 */
	-moz-border-radius: 3px; /* Firefox */
	-webkit-border-radius: 3px; /* Safari,Chrome */
}
#hpbseo_category_box_left{
	float       : left;
	width       : 80px;
	text-align  : center;
}
#hpbseo_category_value{
	text-align  : center;
	margin      : 0.3em;
	color       : #333333;
	font-size   : 3em;
}
#hpbseo_category_comment{
	color       : #cc3333;
	font-size   : 1.2em;
	font-weight : bold;
	text-align  : center;
	margin      : 0.2em;
}
#hpbseo_category_box_right{
}
#hpbseo_category_box .link{
	text-align  : right;
	margin      : 5px 0 0 0;
}
#hpbseo_category_box .link a{
	text-decoration : underline;
	font-weight : bold;
}
#hpbseo_category_image{
	float       : right;
	width       : 35%;
	padding     : 0 0.5em;
}



/*------------------------------------------------
  オプション画面
------------------------------------------------*/
/* タイトル */
h2.hpbseo_optionmenu_title {
	margin-bottom : 10px;
	color: #464646;
}

/* アイコン */
img.hpbseo_optionmenu_icon {
	margin-right: 10px;
	vertical-align: middle;
}

/* メタディスクリプション入力欄 */
#hpbseo_global_meta_des{
	width       : 600px;
	margin-bottom : 10px;
	margin-left   : 20px;
}
/* メタキーワード入力欄 */
#hpbseo_global_meta_key{
	width       : 600px;
	margin-bottom : 10px;
	margin-left   : 20px;
}

/* 各項目タイトル */
.hpbseo_optionmenu_sub_title {
	margin      : 15px 0px 5px 0px;
    font-size   : 1.17em;
    font-weight : bold;
}
/* 説明文 */
.hpbseo_optionmenu_sub_caption {
	margin      : 3px 0px 5px 20px;
}

/* 表示イメージon/off */
#hpbseo_dispimage_div{
	margin      : 5px 0px;
	padding     : 5px;
	border      : 1px solid #cccccc;
	width       : 600px;
	margin-left : 20px;
	margin-bottom : 20px;
}
.hpbseo_dispimage_div_off{
	background  : #cccccc;
}

/* hpb環境チェックエラー */
.hpbseo_hpb_err_msg{
	color       : #ff0000;
	font-size   : 1.3em;
	font-weight : bold;
	margin      : 20px;
	padding     : 30px;
	border      : 3px solid #cccccc;
}

/* 更新完了メッセージ */
.hpbseo_option_update_msg{
	margin          :0px 15px 15px 0px;
	padding         : 0 0.6em;
	background-color: #FFFFE0;
	border-color    : #E6DB55;
	border-style    : solid;
	border-width    : 1px;
	border-radius   : 3px 3px 3px 3px;
}



/*------------------------------------------------
  float解除
------------------------------------------------*/
.clearfix:after{
    content: "."; 
    display: block; 
    height: 0; 
    font-size:0;	
    clear: both; 
	visibility:hidden;
}
.clearfix{
	display: inline-block;
} 
* html .clearfix{
	height: 1%;
}
.clearfix{
	display:block;
}


/*------------------------------------------------
  区切り線
------------------------------------------------*/
.hpbseo_sep_line{
	border      : solid #DFDFDF;
	border-width: 1px 0 0 0;
	height      : 1px;/* for IE6 */
	clear       : both;/* for IE6 */
	margin      : 20px 0px; 
}


/*------------------------------------------------
  吹き出し （http://cssarrowplease.com/）
  背景：#fde5d9(253, 229, 217)
  枠線：#e2947c(226, 148, 124)
------------------------------------------------*/
/* 左 */
.hpbseo_arrow_box_left {
	position: relative;
	background: #fde5d9;
	border: 1px solid #e2947c;
	padding: 5px;
	border-radius: 3px; /* CSS3 */
	-moz-border-radius: 3px; /* Firefox */
	-webkit-border-radius: 3px; /* Safari,Chrome */
	float:right;
	width:35%;
}
.hpbseo_arrow_box_left:after,
.hpbseo_arrow_box_left:before {
	right: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	top: 50%;
}
.hpbseo_arrow_box_left:after {
	border-color: rgba(226, 148, 124, 0);
	border-right-color: #fde5d9;
	border-width: 5px;
	margin-top: -5px;
}
.hpbseo_arrow_box_left:before {
	border-color: rgba(226, 148, 124, 0);
	border-right-color: #e2947c;
	border-width: 6px;
	margin-top: -6px;
}

/* 上 */
.hpbseo_arrow_box_top {
	position: relative;
	background: #fde5d9;
	border: 1px solid #e2947c;
	padding: 5px;
	margin-top: 5px;
	border-radius: 3px; /* CSS3 */
	-moz-border-radius: 3px; /* Firefox */
	-webkit-border-radius: 3px; /* Safari,Chrome */
	max-width: 500px;
}
.hpbseo_arrow_box_top:after,
.hpbseo_arrow_box_top:before {
	bottom: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	left: 20%;
}
.hpbseo_arrow_box_top:after {
	border-color: rgba(226, 148, 124, 0);
	border-bottom-color: #fde5d9;
	border-width: 5px;
	margin-left: -5px;
}
.hpbseo_arrow_box_top:before {
	border-color: rgba(226, 148, 124, 0);
	border-bottom-color: #e2947c;
	border-width: 6px;
	margin-left: -6px;
}

/* 閾値出力/画像 */
.hpbseo_lint_img{
	vertical-align:top;
	margin:2px;
}

/* グラフ */
#hpbseo_graph_tbl{
	width:244px;
}
#hpbseo_graph_tbl td.no{
	width:10px;
}
#hpbseo_graph_tbl td.keywords{
	width:100px;
}
#hpbseo_graph_tbl td.value{
	width:10px;
	text-align:right;
}
#hpbseo_graph_tbl td.percent{
	width:10px;
	text-align:right;
}
#hpbseo_graph_tbl tr td img{
	max-height:12px !important;
	height:12px !important;
}

/* OK用クラス */
.hpbseo_arrow_box_left_ok {
	background: #ddf8c6;
	border-color: #78876c;
}
.hpbseo_arrow_box_left_ok:after {
	border-color: rgba(221, 248, 198, 0);
	border-right-color: #ddf8c6;
}
.hpbseo_arrow_box_left_ok:before {
	border-color: rgba(120, 135, 108, 0);
	border-right-color: #78876c;
}

/* 上 */
.hpbseo_arrow_box_top_ok {
	background: #ddf8c6;
	border-color: #78876c;
}
.hpbseo_arrow_box_top_ok:after {
	border-color:  rgba(221, 248, 198, 0);
	border-bottom-color: #ddf8c6;
}
.hpbseo_arrow_box_top_ok:before {
	border-color: rgba(120, 135, 108, 0);
	border-bottom-color:  #78876c;
}



.hpbseo_title_alert_visual{max-width:350px;margin-left:auto;margin-right:auto;font-size:13px;}
.hpbseo_title_alert_clasic{max-width:350px;}