/*
	====================================
		layout
	====================================
*/
body {
	min-width:auto;
}
#main_area {
	width: 700px;
	margin: 0 auto;
}
#contents {
	margin: 0 5px;
}
#contents p {
    margin: 0 0.85em 1.25em;
    word-break: break-all;
}
#contents ul {
    list-style: outside none disc;
}
#contents ul li {
	list-style: disc;
	margin-bottom: 10px;
}
#contents ul, #contents dl {
    margin: 1em 1em 1.5em 1.25em;
}
#contents .section ol {
	margin: 0 0 1.5em 3em;
}
#contents .section ol li {
	margin-bottom: 10px;
}
#contents .section ol li p {
	margin-right: 0;
}
#contents .section ol li ul {
	margin-left: 2em;
}
#contents .section {
	margin-bottom: 30px;
}
strong {
	word-break: break-all;
}
@media screen and (max-width: 640px) {
	#main_area {
		width: auto;
	}
	#contents {
		margin: 0 10px;
	}
}

/* ブラウザの幅が801px以上になった場合 */
@media screen and (min-width: 801px) {
	body {
		margin: 0 10%;
		width: 80%;
	}
	.mod-mainContentContainer {
		max-width: 100%;
	}	
	#main_area {
		width: 100%;
	}
	#contents .section {
		font-size: 180%;
		text-align: left;
	}
}

/*
	====================================
		h2 タイトル
	====================================
*/
/* タイトル部分全体 */
.contents_title {
	border: 3px solid #417909;
	border-radius: 10px;
	background-color: #fbfeec;
	margin: 20px 0 30px 0;
}
/* タイトル部分上部 */
.contents_title .main {
	overflow: hidden;
    border-bottom: 3px dotted #9bcc73;
	padding: 15px;
}
.contents_title .main .img_area {
	width: 70px;
	float: left;
}
.contents_title .main .txt_area {
	width: 100%;
	float: left;
	margin-left: -70px;
}
.contents_title .main .txt_area .txt_inner {
	margin-left: 70px;
}
.contents_title .main .txt_area .txt_inner h2 {
	font-size: 140%;
	margin-left: 15px;
}
@media screen and (max-width: 640px) {
	.contents_title .main .txt_area .txt_inner h2 {
		font-size: 120%;
	}
}
@media screen and (min-width: 801px) {
	.contents_title .main .txt_area .txt_inner h2 {
		font-size: 180%;
	}
}
/* タイトル部分下部 */
.contents_title .models {
	clear: both;
	padding: 10px 15px;
	word-break: break-all;
}
#contents .contents_title .models p {
	margin-bottom: 0;
}
#contents .contents_title .models ul {
	margin-bottom: 10px;
}
@media screen and (min-width: 801px) {
	.contents_title .models p,
	.contents_title .models ul {
		font-size: 1.2em;
	}
}

/*
	====================================
		h3 見出し 豆画像+上下ドットライン
	====================================
*/
.section h3.sttlbean {
    background: transparent url("/support/tv/special/beans/share/images/index_sttl.gif") no-repeat scroll 0 50%;
    border-bottom: 3px dotted #1b7504;
    border-top: 3px dotted #1b7504;
    margin: 25px 0;
    padding: 13px 0 13px 45px;
}
@media screen and (min-width: 801px) {
	.section h3.sttlbean {
		font-size: 1.5em;
		line-height: 1.2em;
	}
}

/*
	====================================
		h4 見出し 緑字+緑下線
	====================================
*/
.section h4 {
    border-bottom: 1px dotted #6c9c3b;
    color: #336600;
	padding: 0 0 5px 10px;
	margin-bottom: 15px;
}
@media screen and (min-width: 801px) {
	.section h4 {
		font-size: 1.3em;
	}
}

/*
	====================================
		こんな方にオススメ
	====================================
*/
#contents .section ul.recommended {
	margin-left: 2em;
}
@media screen and (min-width: 801px) {
	img.mq_large {
		height: auto;
		width: 48%;
	}
}

/*
	====================================
		その他のパーツ
	====================================
*/
/* 注釈 */
#contents .annotation li {
	list-style: none;
	text-indent: -0.9em;
}
#contents .section ul.annotation li {
	margin-left: 1em;
}
/* 注釈内リンク */
#contents .section ul.annotation li ul.txtlink li {
	text-indent: 0;
}
#contents .annotation2 li {
	list-style: none;
	text-indent: -1.5em;
	padding-left: 8px;
}

div.banner_chat {
	margin-top: 20px !important;
	text-align: center;
}
div.banner_chat a:hover {
	cursor: pointer;
	position:relative;
	opacity: 0.5;
}

/* 緑色（注釈等の※に使用） */
.mark {
    color: #009966;
    font-weight: bold;
}

/* 画像 */
.pct {
	margin-bottom: 20px;
}
/* 画像 640px以下の場合の最大幅を制御 */
@media screen and (max-width: 640px) {
	.img228 {
		max-width: 228px;
	}
	.img300 {
		max-width: 300px;
	}
	.img360 {
		max-width: 360px;
	}
	.img400 {
		max-width: 400px;
	}
	.img500 {
		max-width: 500px;
	}
}
/*
	====================================
		目次パーツ
	====================================
*/

#contents .index_area {
	width: 560px;
	margin: 0 auto;
	padding: 0;
	font-weight: bold;
	text-align: left;
}

#contents .index_head {
	background: url("/support/tv/special/beans/share/images/index_box_head.gif") no-repeat;
}

#contents .index_head p {
	color: white;
	margin: 0;
	padding: 4px 0 0 38px;
	font-weight: bold;
}

#contents .index_body_area {
	background: url("/support/tv/special/beans/share/images/index_box_body.gif") repeat-x;
	margin: 0;
	padding: 0;
	border-width: 0 1px;
	border-color: #C6D3DC;
	border-style: solid;
	width: 558px;
}


#contents .index_body,
#contents .index_body_single {
	margin: 0;
	padding: 10px;
}

#contents .index_body ul,
#contents .index_body_single ul {
    margin: 0.5em 0 0 0;
	list-style: none;
}

#contents .index_body ul li {
    float: left;
    padding-right: 1em;
	margin-left: 10px;
	padding-left: 10px;
	width: 43%;
	background: url("/support/tv/special/beans/share/images/arrow_black_dw.gif") no-repeat 0 0.5em;
	list-style: none;
}

#contents .index_body_single li {
    padding-right: 1em;
	margin-left: 10px;
	padding-left: 10px;
	background: url("/support/tv/special/beans/share/images/arrow_black_dw.gif") no-repeat 0 0.5em;
	list-style: none;
	text-indent: -1.5em;
	padding-left: 2.5em;
}
#contents .index_foot {
	background: url("/support/tv/special/beans/share/images/index_box_foot.gif") no-repeat;
	margin: 0;
	padding: 0;
	width: 560px;
	height: 10px;
}
@media (max-width: 640px) {
	#contents .index_area,
	#contents .index_body_area,
	#contents .index_foot {
		width: auto;
	}	
}
@media (min-width: 801px) {
	#contents .index_area {
		border: 1px solid #cccccc;
		width: 90%;
	}
	#contents .index_head {
    	background: #333333 url("/support/tv/special/beans/share/images/bg_index-title.gif") no-repeat scroll left center;
 	   font-size: 75%;
	}
	#contents .index_body_area {
		background: none repeat scroll 0 0;
		font-size: 75%;
		width: auto;
	}

	#contents .index_foot {
		display: none;
	}
}

/*
	--------------------------------------
		インフォメーション・ご注意枠
	--------------------------------------
*/

body #contents .box_info_area dl {
	background-image: none;
	border: 1px #CCCCCC solid;
	border-radius: 8px;
	box-shadow: 1px 1px 5px #aaa;
	background-color:#f3f3f3;
	/* background-color:#fff; */
	background: -moz-linear-gradient(top, #e0e9ef, #f3f3f3);/* Firefox用 */  
	background: -webkit-gradient(linear, center top, center bottom, from(#e0e9ef), to(#f3f3f3));/* Safari,Google Chrome用 */
	/* background: -webkit-gradient(linear, center top, center bottom, from(#CCFFFF), to(#fff));/* Safari,Google Chrome用 */
	padding-bottom: 15px;
}
body #contents .box_info_area dl dt {
	background-image: none;
    float: right;
    height: auto;
    padding: 0;
    width: 100%;
}
#contents .box_info_area dl dt.caution img,
#contents .box_info_area dl dt.info img {
	position: absolute;
	margin: 12px 14px;
}
body #contents .box_info_area dl dd {
	padding: 16px 0px 0 54px;
}
body #contents .box_info_area {
	background: none;
    margin: 0.5em 5px 1em;
    padding: 0 0 9px;
}

@media (min-width: 801px) {
	/* メッセージボックス */
	body #contents .box_info_area dl {
		background-image: none;
		border: 1px #CCCCCC solid;
		border-radius: 8px;
		box-shadow: 1px 1px 5px #aaa;
		background-color:#fff;
		background: -moz-linear-gradient(top, #e0e9ef, #f3f3f3);/* Firefox用 */  
		background: -webkit-gradient(linear, center top, center bottom, from(#e0e9ef), to(#f3f3f3));/* Safari,Google Chrome用 */
		/* background: -webkit-gradient(linear, center top, center bottom, from(#CCFFFF), to(#fff));/* Safari,Google Chrome用 */
		padding-bottom: 15px;
		background-color:#f3f3f3;
	}
	body #contents .box_info_area dl {
		background-color: #f3f3f3\9; /* IE9 */
	}
	body #contents .box_info_area dl dt {
	  background-image: none;
	}
	body #contents .box_info_area dl dt img {
		float: left;
		margin: 12px 14px;
	}
	body #contents .box_info_area dl dd {
		padding: 16px 10px 0 54px;
	}
	body #contents .box_info_area {
	  background: none;

	}
}

@media (max-width: 640px) {
	/* メッセージボックス */
	body #contents .box_info_area dl {
		background-image: none;
		border: 1px #CCCCCC solid;
		border-radius: 8px;
		box-shadow: 1px 1px 5px #aaa;
		background-color:#fff;
		background: -moz-linear-gradient(top, #e0e9ef, #f3f3f3);/* Firefox用 */  
		background: -webkit-gradient(linear, center top, center bottom, from(#e0e9ef), to(#f3f3f3));/* Safari,Google Chrome用 */
		/* background: -webkit-gradient(linear, center top, center bottom, from(#CCFFFF), to(#fff));/* Safari,Google Chrome用 */
		padding-bottom: 15px;
		background-color:#f3f3f3;
	}
	body #contents .box_info_area dl {
		background-color: #f3f3f3\9; /* IE9 */
	}
	body #contents .box_info_area dl dt {
	  background-image: none;
	}
	body #contents .box_info_area dl dt img {
		float: left;
		margin: 12px 14px;
	}
	body #contents .box_info_area dl dd {
		padding: 16px 10px 0 54px;
	}
	body #contents .box_info_area {
	  background: none;

	}
}

/* テキストリンク　*/
#contents ul.txtlink li {
	float: none;
	list-style-type: none;
	margin-right: 0;
}

/* 別窓マーク */
#contents span.link_out {
    background: transparent url("/support/tv/special/beans/share/images/link_out.gif") repeat scroll 0 0;
    display: inline-block;
    height: 0;
    margin-left: 3px;
    overflow: hidden;
    padding: 10px 0 0;
    vertical-align: middle;
    width: 13px;
    list-style: outside none none;
    text-indent: 0;
}
/* noatv */
#contents span.noatv{
	font-size: 11px;
}
a.textLink {
    display: inline;
    margin: 0 5px 0 0;
    padding: 0 0 0 10px;
    background: url(/share/images/arrow_black.gif) no-repeat left .4em;
}

/*===========================================
	この豆知識のサポート情報はお役にたちましたか？
=============================================*/
.useful p {
	color:#1B7504;
	margin-top:30px !important;
}
.useful img {
	margin:0.5em 0 0 1em;
}

/*===========================================
	アンケート
=============================================*/
.js-enqueteArea {
	clear: both;
	margin: 0 auto;
	width: 700px;
}
html>body #enqueteArea {
	float: none;
	width: 700px;
	margin-right: 0;
}
/*===========================================
	アンケート 640px以下
=============================================*/
@media screen and (max-width: 640px) {
	.js-enqueteArea {
		width: auto;
	}
	html>body #enqueteArea {
		width: auto;
	}
}

div.section .turn_link {
	word-break: break-all;
}




/* 20200423 */

#contents .models > p.indent{
	padding-left: 5em;
	text-indent: -5em;
}

#contents ul.txtlink.indent > li{
	margin-left: 3.25em;
}

#contents p.annotation{
	padding-left: 1em;
	text-indent: -1em;
}

img.icon{
	vertical-align: middle;
    padding: 2px 4px;
}
@media (max-width: 640px){
	#contents p{
		margin: 0 5px 1.25em 5px;
	}
	
	#contents ul li{
		padding-left: 0;
	}
	
	#contents ul.txtlink li{
		padding-left: 10px;
	}
	
	#contents .section ul.recommended {
		margin-left: 1.5em;
	}
}

/* 20220701 */
/* ブラウザの幅が801px以上になった場合 */
@media screen and (min-width: 801px) {
	body {
		margin: 0;
		width: 100%;
	}
	#contents .section {
		font-size: 140%;
	}
}
@media (max-width: 640px){
	#contents .section ol {
			margin: 0 0 1.5em 1em;
	}
	#contents .section .box_info_area ul {
		margin-left: 0;
	}
}

/*　20220830　*/

#contents li > ol > li{
	list-style-type: decimal !important;
}